My Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
Administrator (talk | contribs)
Bureaucrats, Interface administrators, Administrators
245 edits
No edit summary
No edit summary
Line 455: Line 455:
.invslot > a.image {
.invslot > a.image {
   display: block;
   display: block;
   width: 64px;
   position: absolute;
   height: 64px;
  top: 50%;
   line-height: 64px;
   left: 50%;
   text-align: center;
   transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
   line-height: 0;
}
}


.invslot img,
.invslot img,
.invslot > a.image img {
.invslot > a.image img {
   display: inline-block;
   display: block;
   width: 32px;
   width: 32px;
   height: 32px;
   height: 32px;
  vertical-align: middle;
  margin: 0;
  line-height: normal;
}
}


Revision as of 04:07, 2 November 2025

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("/w/index.php?title=MediaWiki:Inventory.css&action=raw&ctype=text/css");

/* ==========================================================================
   BRAND DARK THEME
   Brand colors:
   --brand-light-blue: #78A5FF
   --brand-dark-blue:  #1A3763
   --brand-off-blue:   #369EA7
   --brand-dark-orange:#DD552F
   --brand-mid-orange: #ED8136
   --brand-light-orange:#FAB243
   --brand-green:      #70C32C
   ========================================================================== */
:root {
    /* brand palette */
    --brand-light-blue: #78A5FF;
    --brand-dark-blue: #1A3763;
    --brand-off-blue: #369EA7;
    --brand-dark-orange: #DD552F;
    --brand-mid-orange: #ED8136;
    --brand-light-orange: #FAB243;
    --brand-green: #70C32C;

    /* layout metrics */
    --headermarginleft: 25px;
    --headermarginright: 25px;
    --ulmarginleft: 15px;

    /* dark base */
    --color-base: #E8F0FF; /* text on dark */
    --color-base--hover: #FAB243;
    --color-emphasized: #78A5FF;
    --color-subtle: rgba(232, 240, 255, 0.55);
    --color-placeholder: #93A2C0;
    --color-disabled: #5C6A7D;
    --color-inverted: #02050A;
    --color-inverted-fixed: #02050A;

    /* progressive = link/action */
    --color-progressive: var(--brand-light-blue);
    --color-progressive--hover: var(--brand-off-blue);
    --color-progressive--active: var(--brand-dark-blue);
    --color-progressive--focus: var(--brand-light-blue);

    /* destructive / warning / success mapped to oranges + green */
    --color-destructive: var(--brand-dark-orange);
    --color-destructive--hover: #f16640;
    --color-destructive--active: #b23b1e;
    --color-destructive--focus: var(--brand-light-blue);
    --color-warning: var(--brand-mid-orange);
    --color-success: var(--brand-green);
    --color-notice: var(--brand-off-blue);

    /* visited */
    --color-visited: #A5BFFF;

    /* content change */
    --color-content-added: var(--brand-off-blue);
    --color-content-removed: var(--brand-dark-orange);

    /* overlays and cards */
    --color-main-in: #0F1724;
    --color-general-insideinfobox: rgba(15, 23, 36, 0.7);
    --color-table-big-top: rgba(15, 23, 36, 0.35);
    --color-table-big: rgba(2, 5, 10, 0.6);
    --boxbg: rgba(26, 55, 99, 0.45); /* dark blue glass */

    /* backgrounds */
    --background-color-base: rgba(2, 5, 10, 0.8);
    --background-color-base-fixed: #02050A;
    --background-color-neutral: rgba(15, 23, 36, 0.35);
    --background-color-neutral-subtle: rgba(2, 5, 10, 0.35);
    --background-color-interactive: rgba(120, 165, 255, 0.32);
    --background-color-interactive-subtle: rgba(54, 158, 167, 0.12);

    /* buttons */
    --background-color-progressive: var(--brand-light-blue);
    --background-color-progressive--hover: var(--brand-off-blue);
    --background-color-progressive--active: var(--brand-dark-blue);
    --background-color-progressive--focus: var(--brand-light-blue);

    --background-color-destructive: var(--brand-dark-orange);
    --background-color-destructive--hover: #f16640;
    --background-color-destructive--active: #b23b1e;
    --background-color-destructive--focus: var(--brand-light-blue);

    --background-color-destructive-subtle: rgba(221, 85, 47, 0.12);
    --background-color-error: var(--brand-dark-orange);
    --background-color-error-subtle: rgba(221, 85, 47, 0.12);
    --background-color-warning-subtle: rgba(237, 129, 54, 0.12);
    --background-color-success-subtle: rgba(112, 195, 44, 0.12);
    --background-color-notice-subtle: rgba(54, 158, 167, 0.12);

    /* tabs */
    --background-color-tab-list-item-framed--hover: rgba(120, 165, 255, 0.1);
    --background-color-tab-list-item-framed--active: rgba(120, 165, 255, 0.3);

    /* outlines and shadows */
    --box-shadow-color-base: #000;
    --box-shadow-color-progressive--active: rgba(120, 165, 255, 0.65);
    --box-shadow-color-progressive--focus: rgba(120, 165, 255, 0.65);
    --box-shadow-color-progressive-selected: rgba(120, 165, 255, 0.9);
    --box-shadow-color-progressive-selected--hover: rgba(54, 158, 167, 0.9);
    --box-shadow-color-progressive-selected--active: rgba(26, 55, 99, 0.9);
    --box-shadow-color-destructive--focus: rgba(221, 85, 47, 0.6);
    --box-shadow-color-inverted: #fff;
    --box-shadow-color-transparent: transparent;

    /* borders */
    --border-color-base: rgba(120, 165, 255, 0.14);
    --border-color-interactive: rgba(120, 165, 255, 0.6);
    --border-color-disabled: rgba(147, 162, 192, 0.35);
    --border-color-subtle: rgba(15, 23, 36, 0.4);
    --border-color-muted: rgba(120, 165, 255, 0.04);
    --border-color-inverted: #fff;
    --border-color-progressive: var(--brand-light-blue);
    --border-color-progressive--hover: var(--brand-off-blue);
    --border-color-progressive--active: var(--brand-dark-blue);
    --border-color-progressive--focus: var(--brand-light-blue);
    --border-color-destructive: var(--brand-dark-orange);
    --border-color-destructive--hover: #f16640;
    --border-color-destructive--active: #b23b1e;
    --border-color-destructive--focus: var(--brand-light-blue);
    --border-color-error: var(--brand-dark-orange);
    --border-color-warning: var(--brand-mid-orange);
    --border-color-success: var(--brand-green);
    --border-color-notice: rgba(54, 158, 167, 0.65);
    --border-color-content-added: rgba(54, 158, 167, 0.65);
    --border-color-content-removed: rgba(221, 85, 47, 0.65);
    --border-color-transparent: transparent;
    --border-color-divider: rgba(232, 240, 255, 0.05);

    --border-base: 1px solid rgba(120, 165, 255, 0.14);
    --border-subtle: 1px solid rgba(15, 23, 36, 0.3);
    --border-progressive: 1px solid var(--brand-light-blue);
    --border-destructive: 1px solid var(--brand-dark-orange);
    --outline-color-progressive--focus: var(--brand-light-blue);

    /* misc */
    --background-color-backdrop-light: rgba(15, 23, 36, 0.65);
    --background-color-backdrop-dark: rgba(2, 5, 10, 0.85);
    --background-color-transparent: transparent;
    --background-color-button-quiet--hover: rgba(120, 165, 255, 0.06);
    --background-color-button-quiet--active: rgba(120, 165, 255, 0.14);
    --background-color-input-binary--checked: var(--brand-light-blue);

    --opacity-icon-base: 0.87;
    --opacity-icon-base--hover: 0.74;
    --opacity-icon-base--selected: 1;
    --opacity-icon-base--disabled: 0.51;
    --opacity-icon-placeholder: 0.51;
    --opacity-icon-subtle: 0.67;

    /* minerva diffs */
    --minerva-diff-addedline: var(--brand-green);
    --minerva-diff-deletedline: var(--brand-dark-orange);
}

/* ===== BASE BACKGROUND ===== */
html, body {
    background-image: url("https://furdox.github.io/oldwebsite/oldwebsite/website/cdn/nikooneshotunofficial.jpg") !important;
    background-color: #02050A !important;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: Rubik, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== WRAPPERS ===== */
#mw-mf-viewport,
#mw-wrapper {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mw-page-base,
#mw-head-base {
    background-color: transparent !important;
    background-image: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* ===== HEADER ===== */
.header-container,
.header-container.header-chrome,
.minerva-header {
    background-color: rgba(2, 5, 10, 0.35) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(120, 165, 255, 0.08);
}

/* ===== SEARCH OVERLAY ===== */
.overlay.search-overlay {
    background: rgba(2, 5, 10, 0.85);
}
.overlay.search-overlay .results,
.overlay.search-overlay .search-feedback {
    background-color: rgba(15, 23, 36, 0.9);
    border: 1px solid rgba(120, 165, 255, 0.18);
}

/* ===== INFOBOXES ===== */
.infobox_v3 {
    background: rgba(15, 23, 36, 0.7) !important;
    border: 1px solid rgba(120, 165, 255, 0.18);
}
.mw-parser-output #mp-topbanner {
    background: rgba(120, 165, 255, 0.12) !important;
    border-color: var(--brand-light-blue) !important;
}
.mw-parser-output #mp-left,
.mw-parser-output #mp-right,
.mw-parser-output #mp-lower,
.mw-parser-output #mp-bottom {
    background: rgba(2, 5, 10, 0.3) !important;
    border-color: rgba(120, 165, 255, 0.08) !important;
}

/* ===== MAIN CONTENT CONTAINER ===== */
#mw-mf-page-center {
    width: 90%;
    position: relative;
    background-color: rgba(2, 5, 10, 0.55) !important;
    align-self: center;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid rgba(120, 165, 255, 0.04);
    border-radius: 12px;
}

/* ===== FOOTER ===== */
.minerva-footer {
    border-top: solid 3px rgba(237, 129, 54, 0.35);
    background-color: rgba(2, 5, 10, 0.35) !important;
    background-image: none !important;
    color: rgba(232, 240, 255, 0.55);
}
.last-modified-bar,
#mw-data-after-content {
    background: transparent !important;
    color: rgba(232, 240, 255, 0.55) !important;
}
#catlinks {
    background: rgba(2, 5, 10, 0.35) !important;
    border: 1px solid rgba(120, 165, 255, 0.04);
}

/* ===== LISTS ===== */
ul {
    margin-left: var(--ulmarginleft);
}

/* ===== BODY AND OVERLAYS ===== */
.mw-body,
.overlay-enabled {
    background-image: url("https://furdox.github.io/oldwebsite/oldwebsite/website/cdn/nikooneshotunofficial.jpg");
    background-color: #02050A;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: Rubik, sans-serif;
}
.mw-body {
    background-color: rgba(2, 5, 10, 0.6);
    color: var(--color-base);
}
.mw-body-content {
    background-color: transparent !important;
}

/* ===== CODE BLOCKS ===== */
pre {
    background-color: rgba(2, 5, 10, 0.7);
    border: 1px solid rgba(120, 165, 255, 0.04);
    color: #E8F0FF;
}

/* ===== ICONS ===== */
.mw-ui-icon-with-label-desktop {
    color: var(--brand-light-orange);
}

/* ===== PARSER OUTPUT ===== */
.mw-parser-output {
    background: rgba(2, 5, 10, 0.4);
    border-color: rgba(120, 165, 255, 0.04);
}

/* ===== TEXT COLORS ===== */
p {
    color: var(--color-base);
}

/* ===== LINKS ===== */
a {
    color: var(--brand-light-blue);
}
a:hover {
    color: var(--brand-off-blue);
}
.mw-parser-output a.external,
.mw-parser-output a.extiw {
    color: var(--brand-light-blue);
}

/* ===== CONTENT ELEMENTS ===== */
.content .infobox {
    background-color: rgba(15, 23, 36, 0.7);
    border: 1px solid rgba(120, 165, 255, 0.08);
}
.content .thumbcaption {
    color: var(--color-base);
}
.thumbinner .multiimageinner {
    background-color: transparent;
}
.mw-parser-output .navbox,
.thumbcaption,
.thumbinner,
.toc,
.trow {
    background-color: rgba(2, 5, 10, 0.55);
    color: var(--color-base);
    border: 1px solid rgba(120, 165, 255, 0.04);
}
.infobox {
    color: var(--color-base);
}

/* ===== HEADINGS ===== */
.mw-body h1 {
    font-weight: 700;
}
.mw-body-content h2 {
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--brand-light-orange);
    font-family: Rubik, sans-serif;
}

/* ===== PRE-CONTENT ===== */
.pre-content {
    background-color: rgba(2, 5, 10, 0.35) !important;
    background-image: none !important;
}

/* ===== CONTENT MARGINS ===== */
.content p,
#firstHeading,
.minerva__tab-container,
.page-actions-menu,
.mw-headline,
h1, h2, h3, h4, h5, h6,
.content .mw-parser-output h1 .mw-headline,
.content .mw-parser-output h2 .mw-headline,
.content .mw-parser-output h3 .mw-headline,
.content .mw-parser-output h4 .mw-headline,
.content .mw-parser-output h5 .mw-headline,
.content .mw-parser-output h6 .mw-headline {
    margin-left: var(--headermarginleft);
    margin-right: var(--headermarginright);
}

/* ===== POPUPS ===== */
.mwe-popups .mwe-popups-container {
    padding-top: 0;
    display: flex;
    background: rgba(2, 5, 10, 0.85) !important;
    border: 1px solid rgba(120, 165, 255, 0.08);
}
.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(2, 5, 10, 1) 50%);
}
.mwe-popups-container {
    background: rgba(2, 5, 10, 0.55);
}

/* ===== SIDE BOXES ===== */
.mw-parser-output .side-box,
.mw-parser-output .spoken-wikipedia {
    background-color: rgba(54, 158, 167, 0.2) !important;
    border: 1px solid rgba(54, 158, 167, 0.35);
}

/* ===== BANNERS ===== */
.bandeau-niveau-ebauche, 
.bandeau-niveau-information {
    background-color: rgba(26, 55, 99, 0.35);
    border-color: var(--brand-off-blue);
    color: var(--color-base);
}

/* ===== FILE INFO TEMPLATES ===== */
.mw-parser-output .nfur,
licensetpl, 
fileinfotpl, 
fileinfotpl-type-fairuse, 
nfur, 
nfur-2 {
    background-color: rgba(15, 23, 36, 0.7);
    border-collapse: separate;
    border-spacing: 2px;
    border: 1px solid rgba(120, 165, 255, 0.18);
    box-sizing: border-box;
    font-size: 95%;
    padding: 5px;
    width: 100%;
    border-top: 0;
    padding-top: 0;
    color: var(--color-base);
}

/* ===== NUCLEAR OPTION ===== */
body > div:not(#mw-mf-page-center) {
    background: transparent !important;
}

/* ===== FIX ANY REMAINING WRAPPERS ===== */
.content-wrapper,
.page-wrapper,
.page-container {
    background: transparent !important;
}

/*#################################### ===== FIX ANY REMAINING WRAPPERS ===== */

.inventory {
  border-collapse: collapse;
  background: #3c3f41;
}

.invslot {
  width: 64px;
  height: 64px;
  display: inline-block;
  vertical-align: top;
  background: url('https://wiki.2bz.org/images/3/37/MinecraftSlot.png') no-repeat center;
  background-size: 64px 64px;
  position: relative;
  margin: 1px;
  overflow: visible;
}

.slotwrap,
.invslot > a.image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  line-height: 0;
}

.invslot img,
.invslot > a.image img {
  display: block;
  width: 32px;
  height: 32px;
}

.invslot .invcount {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #fff;
  text-shadow: 1px 1px 0 #3f3f3f;
  font-weight: bold;
  font-size: 11px;
  line-height: 11px;
}

.mctt {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 0, 16, 0.95);
  border: 1px solid #000;
  padding: 4px 6px;
  color: #fff;
  font-family: monospace;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  display: none;
  box-shadow: 2px 2px 0 #000;
}

.invslot:hover .mctt {
  display: block;
}

.invslot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  pointer-events: none;
}

.invslot:hover::after {
  opacity: 1;
  background: rgba(255, 255, 255, 0.5);
}
Retrieved from "https://wiki.2bz.org/index.php?title=MediaWiki:Common.css&oldid=43"