MediaWiki:Common.css/sandbox

From Evospace
< MediaWiki:Common.css
Revision as of 11:03, 5 September 2026 by EvoBot (talk | contribs) (Candidate dark skin for preview; this subpage is not loaded by the wiki)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

/*====================================================================== 

 Evospace wiki skin — tokens shared with evospace.tech

======================================================================*/

root {
   color-scheme: dark;
   --bg: #2e2e2e;
   --bg-deep: #1a1a1a;
   --bg-base: #0a0a10;
   --steel: #3a3e44;
   --steel-light: #525860;
   --steel-mid: #434850;
   --steel-dark: #272a2f;
   --panel: #1a1a1a;
   --panel-raised: #242424;
   --panel-border: #4a4a4a;
   --recess: #151515;
   --bevel-light: rgba(255, 255, 255, 0.1);
   --bevel-dark: rgba(0, 0, 0, 0.65);
   --text: #ececec;
   --muted: #8a8a8a;
   --accent-subtle: rgba(72, 212, 255, 0.14);
   --accent-muted: #5ec4e8;
   --accent: #48d4ff;
   --accent-bright: #7ae4ff;
   --accent-deep: #1e9ec7;
   --steel-ink: #0a0a0a;
   --danger: #c45c5c;
   --steel-texture:
       repeating-linear-gradient(0deg,
           rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
           transparent 1px, transparent 3px,
           rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px,
           transparent 4px, transparent 7px),
       repeating-linear-gradient(90deg,
           transparent, transparent 2px,
           rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 3px);
   --steel-gloss:
       linear-gradient(180deg,
           rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 6%,
           rgba(255,255,255,.02) 14%, transparent 38%);
   --metal-rim:
       linear-gradient(90deg, transparent 0%,
           rgba(255,255,255,.22) 12%, rgba(255,255,255,.72) 50%,
           rgba(255,255,255,.22) 88%, transparent 100%);
   --steel-body:
       linear-gradient(180deg,
           var(--steel-light) 0%, var(--steel-mid) 14%,
           var(--steel) 32%, var(--steel) 100%);
   --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

}

/*==================== page ====================*/ body { 

   background: var(--bg-base);
   color: var(--text);

}

.mw-body,

  1. content,
  2. mw-content-text {
   background: var(--panel);
   color: var(--text);
   border-color: var(--panel-border);

}

.mw-body { 

   border: 1px solid var(--panel-border);
   border-radius: 6px;
   box-shadow: inset 1px 1px 0 var(--bevel-light), 0 6px 24px rgba(0,0,0,.5);

}

  1. mw-page-base {
   background: var(--bg-deep);

}

  1. mw-head-base,
  2. mw-navigation h2 {
   border: 0;

}

/*==================== typography ====================*/ .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,

  1. firstHeading {
   color: var(--text);
   font-weight: 600;
   border: 0;

}

.mw-body h1,

  1. firstHeading {
   border-bottom: 1px solid var(--steel-mid);
   padding-bottom: .25em;

}

.mw-body h2 { 

   border-bottom: 1px solid var(--steel-dark);
   padding-bottom: .2em;

}

.mw-body h2 .mw-headline, .mw-body h3 .mw-headline { 

   color: var(--accent-muted);

}

hr { 

   border: 0;
   border-top: 1px solid var(--steel-dark);

}

/*==================== links ====================*/ .mw-body a, .mw-body a.external,

  1. mw-panel a,
  2. footer a {
   color: var(--accent);

}

.mw-body a:visited { 

   color: var(--accent-deep);

}

.mw-body a:hover,

  1. mw-panel a:hover {
   color: var(--accent-bright);
   text-decoration: underline;

}

.mw-body a.new,

  1. mw-panel a.new,

a.new:visited { 

   color: var(--danger);

}

.mw-body a.external { 

   background-image: none;
   padding-right: 0;

}

/*==================== sidebar & tabs ====================*/

  1. mw-panel .portal {
   background: none;

}

  1. mw-panel .portal h3 {
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .08em;
   font-size: .72rem;

}

  1. mw-panel .portal .body {
   background: none;
   margin-left: .5em;

}

.vectorTabs, .vectorTabs ul, .vectorTabs li, .vectorMenu h3 { 

   background-image: none;

}

.vectorTabs li, .vectorMenu h3 { 

   background: var(--steel-dark);
   border: 1px solid var(--panel-border);
   border-bottom: 0;
   border-radius: 4px 4px 0 0;

}

.vectorTabs li.selected { 

   background: var(--steel-body);
   background-image: var(--steel-gloss), var(--steel-texture), var(--steel-body);

}

.vectorTabs li a, .vectorTabs li a span, .vectorMenu h3 span { 

   color: var(--accent);

}

.vectorTabs li.selected a, .vectorTabs li.selected a span { 

   color: var(--steel-ink);
   font-weight: 600;

}

  1. p-search input,
  2. simpleSearch {
   background: var(--recess);
   border: 1px solid var(--panel-border);
   color: var(--text);
   border-radius: 4px;

}

/*==================== steel frame — the shared panel look ====================*/ .infobox,

  1. toc,

.toc, .catlinks, table.recipe-table { 

   background: var(--steel-gloss), var(--steel-texture), var(--steel-body) !important;
   border: 1px solid rgba(255,255,255,.1) !important;
   border-top-color: rgba(255,255,255,.28) !important;
   border-bottom-color: rgba(0,0,0,.55) !important;
   border-radius: 8px !important;
   padding: 5px !important;
   box-shadow:
       inset 0 1px 0 rgba(255,255,255,.48),
       inset 0 -1px 0 rgba(0,0,0,.7),
       0 6px 24px rgba(0,0,0,.5) !important;
   color: var(--text);

}

/*==================== table of contents ====================*/

  1. toc,

.toc { 

   display: inline-block;

}

  1. toc .toctitle,

.toc .toctitle { 

   color: var(--steel-ink);
   text-align: left;
   padding: 2px 4px 6px;

}

  1. toc ul,

.toc ul { 

   background: var(--recess);
   border-radius: 5px;
   padding: .6em 1.2em;
   margin: 0;
   box-shadow: inset 2px 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.38);

}

/*==================== wikitables ====================*/ table.wikitable { 

   background: var(--recess);
   color: var(--text);
   border: 1px solid var(--panel-border);
   border-collapse: collapse;
   border-radius: 6px;
   overflow: hidden;

}

table.wikitable > * > tr > th { 

   background: var(--steel-body);
   background-image: var(--steel-gloss), var(--steel-texture), var(--steel-body);
   color: var(--steel-ink);
   border: 1px solid var(--steel-dark);
   text-align: left;

}

table.wikitable > * > tr > td { 

   background: transparent;
   border: 1px solid var(--steel-dark);

}

table.wikitable > * > tr:nth-child(even) > td { 

   background: rgba(255,255,255,.022);

}

/*==================== infobox ====================*/ .infobox { 

   float: right;
   clear: right;
   margin: 0 0 1em 1em;
   width: 300px;
   border-collapse: separate !important;
   font-size: 90%;
   overflow: hidden;

}

.infobox caption { 

   color: var(--steel-ink);
   font-weight: 600;
   padding: 4px 6px 8px;
   background: none;
   border: 0;

}

.infobox th, .infobox td { 

   background: var(--recess) !important;
   color: var(--text);
   border: 0 !important;
   padding: 6px !important;

}

.infobox th { 

   color: var(--muted);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .06em;
   font-size: .78em;
   width: 40%;

}

.infobox tr { 

   border: 0;

}

/*==================== recipe cards ====================*/ .recipe-grid { 

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 14px;
   align-items: stretch;
   margin: 10px 0;

}

table.recipe-table { 

   display: flex !important;
   flex-direction: column;
   width: auto !important;
   min-width: 0;
   max-width: none;
   height: 100%;
   margin: 0;
   font-size: 85%;
   border-collapse: separate !important;

}

table.recipe-table caption { 

   color: var(--steel-ink);
   font-weight: 600;
   padding: 3px 4px 7px;
   text-align: left;
   background: none;
   border: 0;
   display: flex;
   align-items: center;
   gap: 6px;

}

table.recipe-table tbody { 

   display: flex;
   flex-direction: column;
   flex: 1;
   background: var(--recess);
   border-radius: 5px;
   padding: 4px;
   box-shadow: inset 2px 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.38);

}

table.recipe-table tr { 

   display: flex;
   align-items: center;
   gap: 6px;
   border: 0;

}

table.recipe-table tr:last-child { 

   margin-top: auto;

}

table.recipe-table th { 

   display: block;
   width: 100%;
   background: none !important;
   color: var(--muted) !important;
   text-align: left !important;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .68rem !important;
   font-weight: 600 !important;
   padding: 6px 2px 2px !important;
   border: 0 !important;

}

table.recipe-table td { 

   background: none !important;
   border: 0 !important;
   padding: 2px !important;
   color: var(--text);

}

table.recipe-table td:first-child { 

   flex: 0 0 34px;
   width: 34px !important;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0,0,0,.35) !important;
   border: 1px solid var(--steel-dark) !important;
   border-radius: 4px;

}

table.recipe-table td:nth-child(2) { 

   flex: 1;
   width: auto !important;
   white-space: normal;
   line-height: 1.25;

}

table.recipe-table td[colspan="2"] { 

   flex: 1;
   text-align: center;
   color: var(--muted);
   font-variant-numeric: tabular-nums;

}

table.recipe-table img { 

   width: 28px !important;
   height: 28px !important;
   image-rendering: pixelated;

}

/*==================== category bar ====================*/ .catlinks { 

   padding: 8px 10px !important;
   color: var(--steel-ink);

}

.catlinks a { 

   color: #0d3d52;
   font-weight: 600;

}

.catlinks a:hover { 

   color: #061f2a;

}

/*==================== footer ====================*/

  1. footer,
  2. footer li,
  3. footer-info li {
   color: var(--muted);

}

  1. footer {
   border-top: 1px solid var(--steel-dark);

}

Retrieved from "https://wiki.evospace.tech/index.php?title=MediaWiki:Common.css/sandbox&oldid=10329"