MediaWiki:Main.css

/* after content section */
#mw-data-after-content > div {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 15px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-top: 0;
}

#mw-data-after-content br {
    display: none;
}

#mw-data-after-content {
    background: var(--theme-tone-6);
    border-radius: 0 0 5px 5px;
}

#mw-data-after-content a.nn-cmp-show {
    margin-top: 0.8em;
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--theme-tone-3);
    width: fit-content;
    border-radius: 4px;
    font-weight: 500;
    color: black;
    transition: background-color 0.3s, color 0.2s;
    text-decoration: none;
    color: var(--text-color);
}

#mw-data-after-content a.nn-cmp-show:hover {
    background-color: var(--accent-color);
    color: white;
}

@media screen and (min-width: 1100px) and (max-width: 1340px) {
    #content-bottom-stuff {
        margin-left: 0;
        display: table-caption;
    }
    #mw-related-navigation .sidebar-chunk {
        box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%) !important;
    }

    #mw-related-navigation {
        position: absolute;
        right: 0;
        transform: translateX(90%);
        transition: 300ms;
    }

    #mw-related-navigation:hover {
        transform: translateX(0);
    }
}

/****************************** Checkbox, Radio & Button Styles ******************************/
input,
button {
    position: relative;
}

/****************************** Namebox Styles ******************************/
table.nmbox {
    border-collapse: collapse;
    width: 100%;
    clear: both;
    font-size: 85%;
    border: 2px solid #bfdbe3;
    margin: 20px 0;
}

.nmbox th:first-of-type {
    width: 80px;
}

table.nmbox > tbody > tr > th,
table.nmbox > tbody > tr > td {
    padding: 0.4em 0.8em;
}

table.nmbox > tbody > tr > td {
    background-color: #f7fdff;
}

table.nmbox > tbody > tr > th {
    background-color: #ebf4f7;
}

#p-googleadsense .pBody {
    padding-top: 5px;
    text-align: center;
}

/* Collapsible toggle */
.mw-content-ltr .section-border .mw-collapsible-toggle {
    padding-right: 10px;
    position: absolute;
    right: 0;
}

/* floating text */

.textfloat {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

.textfloat a,
.textfloat a:link,
.textfloat a:visited,
.textfloat a:hover,
.textfloat a:active {
    color: inherit;
}

th {
    background-color: inherit;
}

/**
    Bilibili Sidebar Style
**/
.portal h3 {
    background-image: none !important;
    padding: 0 0 3px 0 !important;
}

.portal h3,
.portal h3:hover,
.portal h3:active,
.portal h3:link,
.portal h3:visited {
    font-weight: bolder !important;
    text-decoration: none !important;
}

.portal li > ul {
    position: absolute;
    visibility: hidden;
    left: 100%;
    background-color: #fff;
    margin-top: -1em !important;
    margin-left: -10px !important;
    min-width: 180px;
    max-width: 230px;
    opacity: 0;
    -webkit-box-shadow: 10px 10px 10px #ccf;
    -moz-box-shadow: 10px 10px 10px #ccf;
    box-shadow: 10px 10px 10px #ccf;
}

.portal li:hover > ul {
    opacity: 1;
    visibility: visible;
}

.portal ul,
.portal li,
.portal a,
.portal strong.selflink {
    display: block;
}

.portal a,
.portal strong.selflink {
    max-width: 96%;
}

.portal li {
    position: relative;
    font-weight: bold;
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.portal li:hover {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px);
}

.portal a,
.portal a:link,
.portal a:visited,
.portal a:hover,
.portal a:active,
.portal strong.selflink {
    text-decoration: none;
    color: #000 !important;
}

.portal a:before,
.portal a:after,
.portal strong.selflink:before,
.portal strong.selflink:after {
    color: #07a3d7;
    margin: auto 3px;
}

.portal a:before,
.portal strong.selflink:before {
    content: ">";
}

.portal a:after,
.portal strong.selflink:after {
    content: "<";
    visibility: hidden;
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -o-transform: translateX(15px);
    transform: translateX(15px);
}

.portal a:hover:after,
.portal strong.selflink:hover:after {
    visibility: visible;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}

.portal strong.selflink {
    color: #07a3d7 !important;
    border-bottom: 2px #07a3d7 solid;
}

.portal a:after,
.portal strong.selflink:after,
.portal li {
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
}

.portal li > ul {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

/** floating header **/
.persistHeader {
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    z-index: 3000;
    background-color: red;
}

.persistHeader.visible {
    visibility: visible;
}

code {
    display: inline-block;
    font-weight: bold;
    font-family: "Consolas", "Menlo", "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", monospace;
    background-color: #eee;
    color: #4e9a06;
    padding: 2px 0.4em;
    border-radius: 3px;
}

.rainbow-text {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #f22),
        color-stop(0.15, #f2f),
        color-stop(0.3, #22f),
        color-stop(0.45, #2ff),
        color-stop(0.6, #2f2),
        color-stop(0.75, #2f2),
        color-stop(0.9, #ff2),
        color-stop(1, #f22)
    );
    background-image: gradient(
        linear,
        left top,
        right top,
        color-stop(0, #f22),
        color-stop(0.15, #f2f),
        color-stop(0.3, #22f),
        color-stop(0.45, #2ff),
        color-stop(0.6, #2f2),
        color-stop(0.75, #2f2),
        color-stop(0.9, #ff2),
        color-stop(1, #f22)
    );
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.rainbow {
    background-color: orange;
}

* {
    text-rendering: optimizeSpeed;
}

.mw-body .external {
    padding-right: 0;
    background-image: none;
}

.shady,
.shady a {
    background-color: black !important;
    color: transparent !important;
}

.shady:hover,
.shady:hover a,
.shady a:hover {
    background-color: black !important;
    color: white !important;
}

/* Hoverimage */
.hoverimage img {
    opacity: 0;
    filter: alpha(opacity=0);
}

.hoverimage img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.hoverimages img {
    opacity: 0.85;
    filter: alpha(opacity=0);
}

.hoverimages img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

/* Installing Hover Logo */
#WikiHeader h1.wordmark img {
    opacity: 0.85;
    filter: alpha(opacity=85);
    /* For IE8 and earlier */
}

#WikiHeader h1.wordmark img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}

/* ImageHover */
.fadeout-container:hover .fadeout {
    z-index: -1 !important;
}

.fadeout img:hover {
    opacity: 0;
}

.fadeout img:active {
    opacity: 0;
}

body:not(.editor) .fadeout-container.fadeout-hide-bottom > :nth-child(2) {
    visibility: hidden;
    /* the 'body:not(.editor)' is used to prevent hiding the image in editing mode where it is not displayed properly */
}

.inner-border th:not(th:last-child) {
    border-right: 1px solid var(--border-color);
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted var(--text-color);
}

tr[style] th .tooltip,
table[class*="colortable-"] tr th .tooltip,
table[class*="colortable-"] tr th .tippy-btn {
    border-bottom-color: #000 !important;
}

.tooltiptext {
    visibility: hidden;
    min-width: 220px;
    padding: 12px 14px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: calc(20px + 100%);
    z-index: 100004;
    background: #171717;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
    border: 2px solid white;
    border-radius: 2px;
    font-weight: normal;
    text-shadow: none;
    border-radius: 4px;
    color: var(--text-color);
}

.tooltiptext:after,
.tooltiptext:before {
    content: "";
    position: absolute;
    left: 50%;
    border-style: solid;
}

.tooltiptext:after {
    top: 100%;
    bottom: auto;
    width: 20px;
    height: 20px;
    background: #171717;
    margin-top: -10px;
    margin-left: -10px;
    box-shadow: 2px 2px 0px white;
    transform: rotate(45deg);
    border-width: 0;
}

.tooltiptext:before {
    top: 100%;
    bottom: auto;
    border-width: 18px;
    margin-left: -18px;
    border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
    pointer-events: none;
}

.tooltip .tooltip .tooltiptext {
    bottom: auto;
    top: calc(20px + 100%);
}

.tooltip .tooltip .tooltiptext:after {
    top: auto;
    bottom: 100%;
    border-width: 15px;
    margin-left: -15px;
    border-color: transparent transparent #171717 transparent;
    width: 0;
    height: 0;
    box-shadow: none;
    background: none;
    transform: none;
}

.tooltip .tooltip .tooltiptext:before {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #ffffff transparent;
}

.tooltiptext hr {
    margin: 10px 0 12px;
    position: relative;
    background: none;
}

.tooltiptext hr:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px !important;
    position: absolute;
    left: -14px;
    background: var(--border-color-tone-2);
    padding: 0 14px;
}

.tooltip:hover > .tooltiptext {
    visibility: visible;
}

.tooltiptext {
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
    transform: translate(-50%, 8px);
}

.tooltip .tooltip .tooltiptext {
    transform: translate(-50%, -8px);
}

.tooltip:hover > .tooltiptext {
    opacity: 1;
    transition-delay: 0s;
    transform: translate(-50%, 0);
}

.tooltiptext a {
    color: var(--accent-color);
    border-bottom: 0;
}

.tooltiptext a:visited {
    color: var(--accent-color-tone-3);
}

.tooltiptext a:active {
    color: #faa700;
}

.tooltiptext a:hover,
a:focus {
    text-decoration: underline;
}

.tooltiptext a.new {
    color: #ba0000;
}

.mwe-math-element {
    filter: brightness(0%);
}

@media screen and (min-width: 851px) {
    #personal {
        padding-left: 0;
    }
}

.infobox * {
    z-index: 2;
}

/* Syntax highlighter - dark mode */
.dark-mode .mw-highlight .k,
.mw-search-result-data,
.dark-mode .mw-highlight .kr {
    color: #76ff76;
}

.dark-mode .mw-highlight .kc {
    color: #fff;
    font-weight: 400;
}

.dark-mode .mw-highlight .mh {
    color: #ffc0c0;
}

.dark-mode .mw-highlight .nf,
.dark-mode .mw-highlight .nc {
    color: #44f5ff;
    font-weight: 500;
}

.dark-mode .mw-highlight .nn {
    color: #ffe144;
    font-weight: 500;
}

.dark-mode .mw-highlight .mi,
.dark-mode .mw-highlight .kt {
    color: #eee;
    font-weight: 500;
}

.dark-mode .mw-highlight .o,
.dark-mode .mw-highlight .mf {
    color: #eee;
}

.dark-mode .mw-highlight .nt,
.dark-mode .mw-highlight .nb,
.dark-mode .mw-highlight .kd {
    color: #33ffa1;
    font-weight: 500;
}

.dark-mode .mw-highlight .nd,
.dark-mode .mw-highlight .s1 {
    color: #e152ff;
}

.dark-mode .mw-highlight .cp {
    color: #ff3232;
}

.dark-mode .mw-highlight .s2 {
    color: #ffffff;
}

.dark-mode .mw-highlight .c {
    color: #63c2c2;
}

.dark-mode .mw-highlight .sx {
    color: #56d0ff;
}

.dark-mode .mw-highlight .c1 {
    color: #77d235;
}

#mw-content-container {
    background-image: url(https://roguepedia.net/wiki/images/2/26/Background.png);
    background-repeat: no-repeat;
    background-position: initial !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}