FLAT mmo-champion.com by skildar

/* ==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...