FLAT mmo-champion.com by skildar

FLAT mmo-champion.com screenshot
Install Get Stylus Write a review

Details

Authorskildar

LicenseCC-BY-NC-SA-4.0

Created atApril 13, 2022 09:50

Updated atMay 30, 2022 20:43

Applies tommo-champion

Statistics

Learn how we calculate statistics in the FAQ.

Total views53

Total installs5

Weekly installs0

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.

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

No style history. Come back in a couple of days.

Source code

/* ==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 {
    position: absolute;
    background-color: black;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    transform: rotate(-10deg);
    z-index: 0;
    content: '';
}

.userinfo .username_container.TopicOP  .username::before {
    background-color: #125a2c;
}

.userinfo .postuseravatar img {
    position: relative;
    box-shadow: #333 0px 0px 4px;
    z-index: 0;
}

#posts .postcontainer .userinfo .userinfo_extra {
    margin-top: 20px;
}


/** AUTHOR name test **/
.userinfo .username_container {
    position: absolute;
    top: -30px;
    left: 10px;
    white-space: nowrap;
}

.userinfo .usertitle {
    position: absolute;
    top: -20px;
    left: 300px;
    white-space: nowrap;
}

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

dl.userinfo_extra > :not(:first-child),
dl.userinfo_extra > :not(dd) {
    display: none;
}

/** BODY **/
#posts .postcontainer .postbody {
    border-radius: 10px 10px 10px 0px;
}

#posts .postcontainer .postbody .content {
    background-color: unset;
}

#posts .postcontainer .postbody .after_content .lastedited {
    color: #666;
}

#posts .postcontainer .postfoot {
    background-color: unset;
    border: none;
    transition: opacity 0.3s;
}

#posts .postcontainer:not(:hover) .postfoot {
    opacity: 0;
}


#posts .postcontainer .postfoot .textcontrols {
    background-color: rgba(0, 0, 0, 0.4);
    padding-right: 10px;
    margin: 10px 0px;
}

#posts .postcontainer .postfoot .textcontrols .postcontrols a {
    color: white;
}

#posts .postcontainer .postfoot .textcontrols .postlinking a {
    color: #99b778;
}

#posts .postcontainer .postfoot .textcontrols .postcontrols img,
#posts .postcontainer .postfoot .textcontrols .postlinking img {
    filter: brightness(125%);
}

/** Pagination **/
#above_postlist, #below_postlist {
    position: relative;
}

.newcontent_textcontrol {
    position: absolute;
    top: 0px;
    left: 0px;
}
}

Reviews

No reviews yet.