FLAT mmo-champion.com by skildar

/* ==UserStyle==
@name         FLAT mmo-champion.com
@version      20220530.20.43
@namespace    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_wrapper {
    padding: 0px;
}

#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 .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_bottom > form {
    padding: 10px 0px;
}

#pagination_bottom > form div,
#pagination_bottom > div {
    display: block;
    position: relative;
    float: unset;
    text-align: right;
}

.cms_separator {
    margin: 10px 0 20px 0;
}

.cms_article_username {
    position: relative;
    margin-top: 10px;
    margin-bottom: -10px;
}

.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;
    }
}

body:not(.ad-skin) .bar {
    height: auto;
    margin: 0 -10px;
    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;
}

/**
div.bar > div.border > div.recentbar:not(:hover) div.recent {
    max-height: 100px;
    transition-delay: 0.7s;
}
*/

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;
}


#news_highlight_container {
    margin: 0 -10px;
    margin-bottom: 20px;
    gap: 0;
}

#news_highlight_container a,
#news_highlight_container a > .news_highlight_item .overlay {
    transition: all 0.3s;
}

#news_highlight_container a > .news_highlight_item {
    border: none;
}

#news_highlight_container a:hover {
    filter: brightness(125%);
}

#news_highlight_container a > .news_highlight_item .overlay {
    line-height: 1.2;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px, rgba(0, 0, 0, 0.8) 0px 0px 1px;
}

#news_highlight_container a:hover > .news_highlight_item .overlay {
    background-color: rgba(0, 0, 0, .8);
    line-height: 2;
}

#breadcrumb_two {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px !important;
}


#section_content .border {
    padding: 0;
    margin: 0;
    border: none;
}

#page .body_wrapper {
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 0 10px;
    border: none;
    box-shadow: none;
}

.polloptionsblock .blockhead > h2,
.pollresultsblock .blockhead > h2 {
    float: none;
}

.pollresultsblock .pollsubhead {
    background-color: #ebead1;
    padding: 5px 10px;
}
}

@-moz-document url-prefix("https://www.mmo-champion.com/threads/") {
#posts .postcontainer {
    background-color: unset;
    margin: 10px 0px;
    border: none;
}

/** HEADER **/
#posts .postcontainer .posthead {
    background-color: unset;
    border: none;
    text-align: right;
}

#posts .postcontainer .posthead .postdate {
    float: unset;
}

#posts .postcontainer .posthead .postdate,
#posts .postcontainer .posthead .nodecontrols {
    display: inline-block;
    position: relative;
    width: initial;
    padding: 0px 15px;
    vertical-align: middle;
}

.postdate .date {
    position: relative;
    font-weight: normal;
    color: #888;
}

.postdate .date::before {
    position: absolute;
    top: 50%;
    left: -15px;
    font-size: 10px;
    font-weight: bold;
    transform: translate(0, -50%);
    content: '⏱';
}

/** Author details **/
.postdetails {
    background-color: unset;
}

.userinfo {
    color: white;
}

.userinfo .username_container {
    padding: 4px 0px;
}

#posts .postcontainer .userinfo .username_container .username {
    position: relative;
    color: #99b778;
    font-size: 15px;
}

.userinfo .username_container .username::before {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    top: -4px;
    bottom: -4px;
    left: -10px;
    right: -24px;
    transform: rotate(-1.5deg);
    z-index: 0;
    content: '';
}

#posts .postcontainer .userinfo .username_container .username .usernameMemberAction {
    position: relative;
    z-index: 0;
}

.userinfo .usertitle {
    padding-left: 10px;
    color: #ddd;
}

#posts .postcontainer .userinfo .postuseravatar {
    position: relative;
    margin: 20px 0px 14px 0px;
}

.userinfo .postuseravatar::before {
    ...