MediaWiki:Common.css: Difference between revisions

From JCraft Wiki
Jump to navigation Jump to search
← Older editNewer edit →
KasaneTetoLover (talk | contribs)
Bureaucrats, Interface administrators, Administrators
2,984 edits
No edit summary
No edit summary
Line 346: Line 346:
}
}


Based on the alignment in your latest image, the background grid is still sitting slightly too low and to the left of the red filling. To pull that grid up and right to meet the static red shape while keeping the letters perfectly centered in their circular tracks, use these updated values.
Final Calibration CSS
CSS
/* --- STAND CHART 2 (LATEST CALIBRATION) --- */
.stand-chart-box {
.stand-chart-box {
     position: relative;
     position: relative;
Line 359: Line 354:
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     /* Shifting background right and up to align with red mask */
     /* Shifts the grid UP and RIGHT to align with the red mask */
     background-position: 51.4% 48.6%;  
     background-position: 51.4% 48.6%;  
}
.stand-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.6) !important;
    z-index: 1;
    pointer-events: none;
    --cX: 50%;
    --cY: 50%;
    clip-path: polygon(
        var(--cX) calc(var(--cY) - var(--p, 0px)),
        calc(var(--cX) + (var(--s, 0px) * 0.866)) calc(var(--cY) - (var(--s, 0px) * 0.5)),
        calc(var(--cX) + (var(--r, 0px) * 0.866)) calc(var(--cY) + (var(--r, 0px) * 0.5)),
        var(--cX) calc(var(--cY) + (var(--d, 0px))),
        calc(var(--cX) - (var(--pr, 0px) * 0.866)) calc(var(--cY) + (var(--pr, 0px) * 0.5)),
        calc(var(--cX) - (var(--po, 0px) * 0.866)) calc(var(--cY) - (var(--po, 0px) * 0.5))
    );
}
}


Line 395: Line 368:
}
}


/* Coordinates adjusted for centered placement on the tracks */
/* These coordinates place the letters directly on the circular grid tracks */
.rank-power { top: 43px; left: 50%; transform: translateX(-50%); }
.rank-power { top: 43px; left: 50%; transform: translateX(-50%); }
.rank-speed { top: 88px; right: 58px; }
.rank-speed { top: 88px; right: 58px; }
Line 402: Line 375:
.rank-precision { bottom: 88px; left: 58px; }
.rank-precision { bottom: 88px; left: 58px; }
.rank-potential { top: 88px; left: 58px; }
.rank-potential { top: 88px; left: 58px; }
/* Rank Colors */
.rank-A { color: #ffcc00 !important; text-shadow: 0 0 10px 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; }

Revision as of 15:04, 26 April 2026

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

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

#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 {
    margin-left: 20px !important;
    height: 75px !important;
    position: relative !important;
    top: -5px !important;
}

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

#mw-page-base,
#mw-head-base {
    background: transparent !important;
}

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

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

.mc-crafting-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    background: #c6c6c6 !important;
    padding: 20px !important;
    border: 2px solid #373737 !important;
    width: min-content !important;
    margin: 1em auto !important;
}

.mc-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 50px) !important;
    grid-template-rows: repeat(3, 50px) !important;
    gap: 2px !important;
    background: #8b8b8b !important;
    border: 2px solid #8b8b8b !important;
    width: 154px !important;
    height: 154px !important;
}

.mc-cell {
    width: 50px !important;
    height: 50px !important;
    background: #8b8b8b !important;
    border: 2px solid !important;
    border-color: #373737 #ffffff #ffffff #373737 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.mc-cell img,
.mc-result img {
    max-width: 32px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

.mc-arrow {
    font-size: 32px !important;
    color: #373737 !important;
    font-family: sans-serif !important;
}

.mc-result {
    width: 64px !important;
    height: 64px !important;
    background: #8b8b8b !important;
    border: 2px solid !important;
    border-color: #373737 #ffffff #ffffff #373737 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.mw-mmv-image-wrapper {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.mw-mmv-post-image {
    background-color: #1e1f22 !important;
    color: #e6e6e6 !important;
}

figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumb,
.thumbinner {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
}

.thumbcaption,
figure figcaption {
    color: #ffffff !important;
    font-size: 12.6px !important;
    text-align: center !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.magnify,
.magnifier {
    display: none !important;
}

.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;
    text-decoration: none !important;
}

a {
    color: #a862ea !important;
}

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

#p-views li,
#p-cactions li,
#p-namespaces li,
#p-views li a,
#p-cactions li a,
#p-namespaces li a,
#p-views li.selected a,
#p-namespaces li.selected a,
#p-views li a:hover,
#p-cactions li a:hover,
#p-namespaces li a:hover {
    background-color: #1e1f22 !important;
    background-image: none !important;
    color: #e6e6e6 !important;
    border: 1px solid #333 !important;
    border-bottom: none !important;
}

#p-views li.selected,
#p-namespaces li.selected {
    border-bottom: 2px solid #a862ea !important;
}

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

.portable-infobox .pi-header {
    background-color: #111 !important;
    color: #fff !important;
    border-bottom: none !important;
}

#toc,
.toc {
    background-color: #1e1f22 !important;
    border: 1px solid #2b2d31 !important;
    border-top: 3px solid #a862ea !important;
    padding: 15px !important;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 2px solid #a862ea !important;
}

.pi-section-navigation .pi-section-tab.current,
.pi-section-navigation .pi-section-tab.current b,
.pi-media-collection .pi-tab-link.current {
    color: #a862ea !important;
    font-weight: bold !important;
}

.pi-section-navigation {
    background-color: #0a0a0a !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #333 !important;
}

.pi-section-tab {
    flex: 1;
    text-align: center;
    padding: 10px 5px !important;
    color: #bbb !important;
    cursor: pointer;
}

.mw-collapsible-content img[src$=".gif"] {
    display: block !important;
    visibility: visible !important;
}

.wikitable,
.loot-table {
    background-color: #1e1f22 !important;
    color: #e6e6e6 !important;
    border: 1px solid #333 !important;
}

.wikitable th,
.loot-table th {
    background-color: #111111 !important;
    color: #ffffff !important;
}

.catlinks {
    background: #1e1f22;
    border: 1px solid #2b2d31;
    border-radius: 8px;
}

#footer {
    display: none !important;
}

.stand-chart-box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px auto;
    background-image: url('https://wiki.jcraft-eoe.com/images/b/bd/StandChart_Background.png');
    background-size: contain;
    background-repeat: no-repeat;
    /* Shifts the grid UP and RIGHT to align with the red mask */
    background-position: 51.4% 48.6%; 
}

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

/* These coordinates place the letters directly on the circular grid tracks */
.rank-power { top: 43px; left: 50%; transform: translateX(-50%); }
.rank-speed { top: 88px; right: 58px; }
.rank-range { bottom: 88px; right: 58px; }
.rank-durability { bottom: 43px; left: 50%; transform: translateX(-50%); }
.rank-precision { bottom: 88px; left: 58px; }
.rank-potential { top: 88px; left: 58px; }
Retrieved from "https://wiki.jcraft-eoe.com/index.php?title=MediaWiki:Common.css&oldid=923"