MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

:root {
    --color-bg-page: #000000;
    --color-bg-content: #1e1f22;
    --color-text-base: #e6e6e6;
    --color-primary: #a862ea;
}

/* Global Styles */
body {
    background-color: #000000 !important;
    background-image: url('https://wiki.jcraft-eoe.com/images/6/65/Wiki_Background.png') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    font-family: 'Rubik', sans-serif !important;
    color: #e6e6e6 !important;
}

#mw-panel { display: none !important; }

#content {
    background-color: rgba(30, 31, 34, 0.96) !important;
    max-width: 1100px !important;
    margin: 40px auto 40px auto !important;
    border-radius: 8px !important;
    padding: 40px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #2b2d31 !important;
    color: #e6e6e6 !important;
    position: relative !important;
}

/* Navigation & Head */
#mw-head {
    background: rgba(18, 18, 18, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #333 !important;
    left: 0 !important;
    overflow: visible !important;
    height: 75px !important;
}

#left-navigation, #right-navigation {
    height: 75px !important;
    position: relative !important;
    top: -5px !important;
}

#left-navigation { margin-left: 20px !important; }

#mw-page-base, #mw-head-base { background: transparent !important; }
#mw-head::before, #p-logo { display: none !important; }

/* Custom Logo Replacement (Talk Tab) */
#ca-talk {
    display: block !important;
    visibility: visible !important;
    z-index: 9999 !important;
    position: relative !important;
    height: 100% !important;
}

#ca-talk a {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 68px !important;
    height: 68px !important;
    position: absolute !important;
    top: 50% !important; 
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#ca-talk a span { display: none !important; }

#ca-talk a::before {
    content: "" !important;
    display: block !important;
    width: 68px !important;
    height: 68px !important;
    background-image: url('https://wiki.jcraft-eoe.com/images/7/71/JCraft_Icon.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    visibility: visible !important;
}

#ca-talk a:hover::before {
    filter: drop-shadow(0 0 5px var(--color-primary)) !important;
}

/* Typography */
.firstHeading {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
}

h2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #fff !important;
    border-bottom: 1px solid #a862ea !important;
}

h3, h4, h5, h6 { color: #ffffff !important; border-bottom: none !important; }

a { color: #a862ea !important; }
a:visited { color: #8c4dbf !important; }

/* Infobox & UI Components */
.portable-infobox {
    background-color: #1e1f22 !important;
    border: 1px solid #a862ea !important;
    color: #e6e6e6 !important;
    width: 270px !important;
    border-radius: 4px;
}

.portable-infobox .pi-title {
    background-color: #111 !important;
    color: #fff !important;
    font-size: 21px !important;
}

.catlinks { background: #1e1f22; border: 1px solid #2b2d31; border-radius: 8px; }
#footer { display: none !important; }

/* --- STAND CHART CORE --- */
.stand-chart-box {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 10px auto;
    background-image: url('https://wiki.jcraft-eoe.com/images/2/20/HexGrid_StandChart_Full.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.stand-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 175px; 
    height: 175px;
    background-color: rgba(255, 0, 0, 0.5) !important;
    z-index: 1;
    pointer-events: none;

    /* Multiplier to pull filling closer to center */
    --step: 7.0%; 

    /* Calculations for the polygon points */
    --v-p:  calc(var(--p, 0)  * var(--step));
    --v-s:  calc(var(--s, 0)  * var(--step));
    --v-r:  calc(var(--r, 0)  * var(--step));
    --v-d:  calc(var(--d, 0)  * var(--step));
    --v-pr: calc(var(--pr, 0) * var(--step));
    --v-po: calc(var(--po, 0) * var(--step));

    clip-path: polygon(
        50% calc(50% - var(--v-p)),
        calc(50% + (var(--v-s) * 0.866)) calc(50% - (var(--v-s) * 0.5)),
        calc(50% + (var(--r) * 0.866)) calc(50% + (var(--v-r) * 0.5)),
        50% calc(50% + var(--v-d)),
        calc(50% - (var(--v-pr) * 0.866)) calc(50% + (var(--v-pr) * 0.5)),
        calc(50% - (var(--v-po) * 0.866)) calc(50% - (var(--v-po) * 0.5))
    );
}

/* Stand Rank Labels */
.stand-rank {
    position: absolute;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 2px 2px 4px #000;
    z-index: 10;
}

.rank-power { top: 26px; left: 50%; transform: translateX(-50%); }
.rank-speed { top: 68px; right: 46px; }
.rank-range { bottom: 68px; right: 46px; }
.rank-durability { bottom: 26px; left: 50%; transform: translateX(-50%); }
.rank-precision { bottom: 68px; left: 46px; }
.rank-potential { top: 68px; left: 46px; }

/* Rank Colors */
.rank-A { color: #ffcc00 !important; text-shadow: 0 0 8px rgba(255, 204, 0, 0.8); }
.rank-B { color: #00ff00 !important; }
.rank-C { color: #ffffff !important; }
.rank-D { color: #555555 !important; }
.rank-E { color: #ff0000 !important; }