Authorskildar
LicenseCC-BY-NC-SA-4.0
Categorymmo-champion
Created
Updated
Size17 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
This is an experimental solution to bring a new style version for the mmo-champion website. The already well established display of mmo-champion is slowly evolving and this attempt is aiming at bringing clarity in the display of information.
This is not an official product, this is a personal project and will try and keep it updated as regularly as possible.
There is currently no bug tracking as it is my first upload.
/* ==UserStyle==
@name FLAT mmo-champion.com
@version 20240319.14.45
@namespace https://userstyles.world/user/skildar
@description This is an experimental solution to bring a new style version for the mmo-champion website. The already well established display of mmo-champion is slowly evolving and this attempt is aiming at bringing clarity in the display of information.This is not an official product, this is a personal project and will try and keep it updated as regularly as possible.There is currently no bug tracking as it is my first upload.
@author skildar
@license No License
==/UserStyle== */
@-moz-document domain("mmo-champion.com") {
* {
box-sizing: border-box;
}
body .border,
body .block,
body #usercp_nav div.block {
padding: 0px;
border: none;
background-color: transparent;
border-radius: 0;
}
body #page {
max-width: calc(1900px - 20%);
--page-padding: 30px;
}
body #page .body_wrapper {
background: rgba(0, 0, 0, 0.4) !important;
padding: 0px var(--page-padding);
border: none;
box-shadow: none;
@media (max-width: 1023px) {
padding: 0px calc(var(--page-padding)/2);
}
}
#footer_links,
#breadcrumb,
#breadcrumb_two {
color: white;
}
#breadcrumb {
display: block;
position: relative;
--margin-top: 60px;
padding-top: 10px;
}
#footer_links a,
#breadcrumb a,
#breadcrumb_two a {
color: #dfece7;
}
#breadcrumb a[href="index.php"] img,
#breadcrumb_two a[href="index.php"] img {
display: inline-block;
position: relative;
top: -2px;
background-color: #d3d2b6;
padding: 3px;
border-radius: 50%;
border: 2px solid white;
vertical-align: middle;
width: 20px;
height: 20px;
}
#thread_controls,
#above_threadlist_controls {
background-color: #d3d2b6;
margin-bottom: 5px;
}
#postlist {
padding: 0 20px;
}
#postlist .navlinks a {
display: inline-block;
position: relative;
background-color: #d3d2b6;
padding: 5px 10px;
margin-top: 10px;
}
#postlist .navlinks a:first-of-type {
padding-left: 35px;
}
#postlist .navlinks a:first-of-type:before {
position: absolute;
left: 10px;
content: '<<';
}
#postlist .navlinks a:last-of-type {
padding-right: 35px;
}
#postlist .navlinks a:last-of-type:before {
position: absolute;
right: 10px;
content: '>>';
}
#postlist .navlinks strong {
display: none;
}
#posts {
border: none;
background: transparent;
overflow: unset;
}
.pagination div a {
color: #d7f0e6;
}
.pagination dl > dd span a {
border: none;
border-radius: 4px;
box-shadow: #333 0px 0px 1px 1px;
}
#pagination_bottom > form {
padding: 10px 0px;
}
#pagination_bottom > form div,
#pagination_bottom > div {
display: block;
position: relative;
float: unset;
text-align: right;
}
/** ===== article ==== */
.cms_separator {
margin: 60px 0 20px 0;
}
#section_content .fullwidth div.article_preview {
position: relative;
background-color: transparent;
margin-top: 0px;
border: none;
}
#section_content .fullwidth div.article_preview .title h3 {
display: inline-block;
position: relative;
background-color: #6c963e;
width: auto;
margin: 0;
margin-bottom: -10px;
overflow: hidden;
transition: all 0.3s;
text-shadow: #000 0px 0px 1px, rgba(0, 0, 0, 0.4) 1px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 3px 3px;
z-index: 1;
}
#section_content .fullwidth div.article_preview .title h3:hover {
transform: scale(1.05);
}
@keyframes articleTitleSlide {
from {transform: translate(-50vw, 0) rotate(30deg);}
to {transform: translate(50vw, 0) rotate(30deg);}
}
#section_content .fullwidth div.article_preview .title h3:hover::before {
position: absolute;
background-color: #6c963e;
top: -10px;
bottom: -10px;
left: 0px;
right: 0px;
transform: rotate(30deg);
transform-origin: center;
content: '';
opacity: 0.4;
animation-name: articleTitleSlide;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#section_content .fullwidth div.article_preview .title a {
text-decoration: none;
}
#section_content .fullwidth div.article_preview .title ~ div,
#section_content .fullwidth div.article_preview .title ~ .article_preview_contents{
margin-left: 30px;
margin-right: 20px;
padding-left: 30px !important;
background-color: #ebead1;
@media (max-width: 1023px) {
margin-left: 10px;
margin-right: 5px;
padding-left: 10px !important;
}
}
/** ===== article author display ===== */
.cms_article_username {
position: relative;
margin: 0px;
padding: 10px;
color: #888;
}
.cms_article_username .usernameMemberAction {
background-color: #6f9546;
padding: 5px;
color: white;
text-shadow: rgba(255, 255, 255, 0.4) 0px 0px 3px,
rgba(255, 255, 255, 0.8) 0px 0px 1px,
rgba(48, 48, 48, 0.8) 1px 1px 1px;
font-size: 1em;
font-weight: bold;
border-radius: 5px;
}
.cms_article_username .usernameMemberAction .user-admin {
background-color: #a00;
padding: 5px;
margin: -5px;
color: white;
text-shadow: rgba(255, 255, 255, 0.4) 0px 0px 3px,
rgba(255, 255, 255, 0.8) 0px 0px 1px,
rgba(48, 48, 48, 0.8) 1px 1px 1px;
font-size: 1em;
font-weight: bold;
border-radius: 5px;
}
@media (min-width: 1024px) {
.body_wrapper {
margin-top: 43px;
}
}
/** ========== blue posts / forum posts ========== */
body:not(.ad-skin) .bar {
height: auto;
margin: 0 calc((-1)*var(--page-padding));
min-height: 0px;
}
div.bar > div.border,
div.bar > div.border > div.recentbar {
background-color: transparent;
padding: 0;
margin: 0;
border: none;
border-bottom: 3px solid #86b750;
}
div.bar > div.border > div.recentbar div.recent-body {
padding: 0px;
}
div.bar > div.border > div.recentbar div.recent > div {
position: relative;
background-color: #333;
margin: 0;
padding: 0px;
transition: all 0.7s;
z-index: 1;
}
div.bar > div.border > div.recentbar div.recent:first-child > div {
padding-right: 5px;
}
div.bar > div.border > div.recentbar div.recent:last-child > div {
padding-left: 5px;
}
div.bar > div.border > div.recentbar div.recent {
position: relative;
background-color: #222;
max-height: 50vh;
transition: all 0.7s 0.3s;
}
/** Hide every last posts and reduce the size of the container */
div.bar > div.border > div.recentbar:not(:hover) div.recent {
max-height: 100px;
transition-delay: 0.7s;
}
div.bar > div.border > div.recentbar:not(:hover) > div.recent {
flex-basis: 10%!important;
}
div.bar > div.border > div.recentbar:not(:hover) > div.recent > div {
opacity: 0!important;
}
div.bar > div.border > div.recentbar div.recent:first-child:not(:hover),
div.bar > div.border > div.recentbar div.recent:first-child:hover + div.recent {
flex-basis: 10%;
}
div.bar > div.border > div.recentbar div.recent:not(:hover) > div {
opacity: 0;
transition-delay: 0.6s;
}
div.bar > div.border > div.recentbar div.recent:not(:hover) + div.recent > div {
opacity: 1;
}
div.bar > div.border > div.recentbar div.recent:first-child::before {
background: url(images/cms/widget-article.png), #62aad0;
}
div.bar > div.border > div.recentbar div.recent:first-child::after {
color: #62aad0;
content: 'Blue posts'
}
div.bar > div.border > div.recentbar div.recent:last-child::before {
background: url(images/cms/widget-forum.png), #99b778;
}
div.bar > div.border > div.recentbar div.recent:last-child::after {
color: #99b778;
content: 'Forum posts'
}
div.bar > div.border > div.recentbar div.recent:first-child::before,
div.bar > div.border > div.recentbar div.recent:last-child::before {
position: absolute;
background-size: 18px, auto;
background-repeat: no-repeat;
background-position: center;
top: calc(50% - 0.5em);
left: 50%;
height: 30px;
width: 30px;
border: 2px solid white;
border-radius: 50%;
transform: translate(-50%, -50%);
content: '';
}
div.bar > div.border > div.recentbar div.recent:first-child::after,
div.bar > div.border > div.recentbar div.recent:last-child::after {
position: absolute;
top: calc(50% + 2em);
left: 50%;
transform: translate(-50%, -50%);
text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px, rgba(0, 0, 0, 0.8) 0px 0px 1px;
z-index: 0;
}
div.bar > div.border > div.recentbar div.recent > div,
div.bar > div.border > div.recentbar div.recent > div .meta,
div.bar > div.border > div.recentbar div.recent > div .meta > div,
div.bar > div.border > div.recentbar div.recent > div h4 {
border: none;
color: white;
text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px, rgba(0, 0, 0, 0.8) 0px 0px 1px;
}
div.bar > div.border > div.recentbar div.recent .cms_widget_post_bit .meta {
right: 10px;
}
div.bar > div.border > div.recentbar .recent .cms_widget_post_bit > div {
border: none;
}
div.bar > div.border > div.recentbar div.recent-body div.cms_widget_post_bit {
padding: 2px 10px;
}
div.bar > div.border > div.recentbar div.recent-body div.cms_widget_post_bit:hover {
background-color: rgba(44, 44, 44, 1);
}
div.bar > div.border > div.recentbar div.recent > div .blue a {
color: #62aad0;
}
div.bar > div.border > div.recentbar div.recent-threads a,
div.bar > div.border > div.recentbar .goto {
color: #99b778;
}
div.bar > div.border > div.recentbar .goto {
margin: 10px 5px 15px 5px;
}
/** ========== dark mode ========== */
/**#section_content .fullwidth div.article_preview .title ~ div,
#section_content .fullwidth div.article_preview .title ~ .article_preview_contents {
position: relative;
background-color: #232320;
}
#section_content .fullwidth div.article_preview .title ~ div::before,
#section_conte...