Jump to content

MediaWiki:Common.css: Difference between revisions

From Apogea Wiki
← Older editNewer edit →
Jayarrowz (talk | contribs)
dbmanager, designer, webgl-developer
441 edits
Dane (talk | contribs)
Bureaucrats, dbmanager, designer, Interface administrators, Administrators, webgl-developer
2,681 edits
No edit summary
Jayarrowz (talk | contribs)
dbmanager, designer, webgl-developer
441 edits
No edit summary
Line 595: Line 595:
}
}


/* Recipe List */
.recipe-list {
.recipe-list {
    background-color: #1a1a2e;
    border: 2px solid #4a4a6a;
    border-radius: 5px;
    padding: 10px;
     margin: 10px 0;
     margin: 10px 0;
    overflow-x: auto;
}
}


Line 609: Line 605:
     color: #ffd700;
     color: #ffd700;
     margin-bottom: 10px;
     margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #4a4a6a;
}
}


/* Recipe Table */
.recipe-table {
.recipe-table {
    width: 100%;
     border-collapse: collapse;
     border-collapse: collapse;
     table-layout: fixed;
     background-color: #1a1a2e;
}
}


.recipe-table-header th {
.recipe-table th {
    background-color: #2a2a4e;
    color: #aaa;
    padding: 8px 12px;
     text-align: left;
     text-align: left;
     padding: 8px;
     font-weight: bold;
    color: #aaa;
     border: 1px solid #4a4a6a;
     border-bottom: 1px solid #4a4a6a;
}
}


.recipe-table-header th:nth-child(1) { width: 45%; }
.recipe-table td {
.recipe-table-header th:nth-child(2) { width: 5%; }
    padding: 8px 12px;
.recipe-table-header th:nth-child(3) { width: 25%; }
    vertical-align: top;
.recipe-table-header th:nth-child(4) { width: 25%; }
     border: 1px solid #4a4a6a;
 
     background-color: #1a1a2e;
.recipe-row td {
    padding: 8px;
     border-bottom: 1px solid #2a2a4e;
     vertical-align: middle;
}
}


.recipe-cell-inputs {
.recipe-cell-item {
     display: flex;
     white-space: nowrap;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
}


.recipe-cell-arrow {
.recipe-cell-station {
    color: #9edc60;
    font-size: 20px;
     text-align: center;
     text-align: center;
}
}


.recipe-cell-output {
.recipe-cell-materials {
     color: #fff;
     padding: 0 !important;
}
}


.recipe-cell-station {
.recipe-item-inline {
     color: #9bddff;
     display: inline-flex;
    align-items: center;
    gap: 6px;
}
}


.recipe-inline-item {
/* Alternating material rows */
     display: inline-flex;
.recipe-material-odd {
    align-items: center;
     background-color: #1a1a2e;
     gap: 4px;
     padding: 4px 12px;
    white-space: nowrap;
}
}


.recipe-plus-small {
.recipe-material-even {
     color: #888;
     background-color: #2a2a4e;
    padding: 4px 12px;
}
}


/* Single Recipe Container */
.recipe-container {
.recipe-container {
     display: inline-flex;
     display: inline-flex;
Line 732: Line 722:
}
}


/* Inline recipe */
.recipe-inline {
.recipe-inline {
     display: inline-flex;
     display: inline-flex;

Revision as of 22:10, 27 January 2026

:root:root {
  /* Apogea warm theme - stone/wood dark tones with gold accents */

  /* Custom theme colors */
  --bg-primary: #1a1410;
  --bg-secondary: #241c16;
  --bg-surface: #2e241c;
  --bg-elevated: #3a2e24;
  --text-primary: #e8dcc8;
  --text-secondary: #b8a890;
  --text-muted: #7a6e60;
  --gold: #d4a84b;
  --gold-bright: #f0c866;
  --gold-dim: #a67c32;
  --red: #8b2d2d;
  --red-bright: #a63d3d;
  --border-subtle: #3a2e24;
  --border-accent: #5c4a36;

  /* Glow effects */
  --glow-gold: 0 0 8px rgba(212, 168, 75, 0.4), 0 0 16px rgba(212, 168, 75, 0.2);
  --glow-gold-strong: 0 0 12px rgba(240, 200, 102, 0.6), 0 0 24px rgba(212, 168, 75, 0.3);
  --glow-red: 0 0 8px rgba(139, 45, 45, 0.4), 0 0 16px rgba(139, 45, 45, 0.2);

  /* MediaWiki color mappings */
  --color-base: var(--text-primary);
  --color-base-fixed: var(--text-primary);
  --color-base--hover: #f5edd8;
  --color-emphasized: #f5edd8;
  --color-subtle: var(--text-secondary);
  --color-placeholder: var(--text-muted);
  --color-disabled: #5a4e40;
  --color-disabled-emphasized: var(--text-muted);
  --color-inverted: var(--bg-primary);
  --color-inverted-fixed: var(--bg-primary);
  --color-progressive: var(--gold);
  --color-progressive--hover: var(--gold-bright);
  --color-progressive--active: var(--gold-dim);
  --color-progressive--focus: var(--gold);
  --color-visited: var(--gold-dim);
  --color-visited--hover: var(--gold);
  --color-visited--active: #8a6528;
  --color-destructive: var(--red-bright);
  --color-destructive--hover: #c04a4a;
  --color-destructive--active: var(--red);
  --color-destructive--focus: var(--gold);
  --color-destructive--visited: var(--red);
  --color-destructive--visited--hover: var(--red-bright);
  --color-destructive--visited--active: #6b2222;
  --color-error: var(--red-bright);
  --color-error--hover: #c04a4a;
  --color-error--active: var(--red);
  --color-warning: var(--gold-bright);
  --color-success: #7a9a5a;
  --color-notice: var(--text-secondary);
  --color-icon-error: var(--red-bright);
  --color-icon-warning: var(--gold);
  --color-icon-success: #7a9a5a;
  --color-icon-notice: var(--text-muted);
  --color-content-added: #7a9a5a;
  --color-content-removed: var(--red-bright);
  --background-color-base: var(--bg-primary);
  --background-color-base-fixed: var(--bg-primary);
  --background-color-neutral: var(--bg-surface);
  --background-color-neutral-subtle: var(--bg-secondary);
  --background-color-inverted: var(--text-primary);
  --background-color-transparent: transparent;
  --background-color-interactive: var(--bg-surface);
  --background-color-interactive--hover: var(--bg-elevated);
  --background-color-interactive--active: #4a3e32;
  --background-color-interactive-subtle: var(--bg-secondary);
  --background-color-interactive-subtle--hover: var(--bg-surface);
  --background-color-interactive-subtle--active: var(--bg-elevated);
  --background-color-disabled: var(--bg-surface);
  --background-color-disabled-subtle: var(--bg-secondary);
  --background-color-progressive: var(--gold-dim);
  --background-color-progressive--hover: var(--gold);
  --background-color-progressive--active: #8a6528;
  --background-color-progressive--focus: var(--gold-dim);
  --background-color-progressive-subtle: var(--bg-secondary);
  --background-color-progressive-subtle--hover: var(--bg-surface);
  --background-color-progressive-subtle--active: var(--bg-elevated);
  --background-color-destructive: var(--red);
  --background-color-destructive--hover: var(--red-bright);
  --background-color-destructive--active: #6b2222;
  --background-color-destructive--focus: var(--gold-dim);
  --background-color-destructive-subtle: var(--bg-surface);
  --background-color-destructive-subtle--hover: var(--bg-elevated);
  --background-color-destructive-subtle--active: #4a3e32;
  --background-color-error: var(--red);
  --background-color-error--hover: var(--red-bright);
  --background-color-error--active: #6b2222;
  --background-color-error-subtle: var(--bg-surface);
  --background-color-error-subtle--hover: var(--bg-elevated);
  --background-color-error-subtle--active: #4a3e32;
  --background-color-warning-subtle: var(--bg-surface);
  --background-color-success-subtle: var(--bg-surface);
  --background-color-notice-subtle: var(--bg-surface);
  --background-color-content-added: #4a5a3a;
  --background-color-content-removed: var(--red);
  --background-color-input-binary--checked: var(--gold-dim);
  --border-color-base: var(--border-subtle);
  --border-color-emphasized: var(--border-accent);
  --border-color-subtle: var(--bg-elevated);
  --border-color-muted: var(--bg-surface);
  --border-color-divider: var(--border-subtle);
  --border-color-transparent: transparent;
  --border-color-inverted: var(--text-primary);
  --border-color-inverted-fixed: var(--text-primary);
  --border-color-interactive: var(--border-accent);
  --border-color-interactive--hover: #6c5a46;
  --border-color-interactive--active: var(--text-muted);
  --border-color-disabled: var(--bg-elevated);
  --border-color-progressive: var(--gold);
  --border-color-progressive--hover: var(--gold-bright);
  --border-color-progressive--active: var(--gold-dim);
  --border-color-progressive--focus: var(--gold);
  --border-color-destructive: var(--red-bright);
  --border-color-destructive--hover: #c04a4a;
  --border-color-destructive--active: var(--red);
  --border-color-destructive--focus: var(--gold);
  --border-color-error: var(--red-bright);
  --border-color-error--hover: #c04a4a;
  --border-color-error--active: var(--red);
  --border-color-warning: var(--gold);
  --border-color-warning--hover: var(--gold-bright);
  --border-color-warning--active: var(--gold-dim);
  --border-color-success: #7a9a5a;
  --border-color-notice: var(--text-muted);
  --border-color-content-added: #7a9a5a;
  --border-color-content-removed: var(--red-bright);
  --box-shadow-color-base: var(--border-subtle);
  --box-shadow-color-progressive--active: var(--gold-dim);
  --box-shadow-color-progressive--focus: var(--gold);
  --box-shadow-color-progressive-selected: var(--gold);
  --box-shadow-color-progressive-selected--hover: var(--gold-bright);
  --box-shadow-color-progressive-selected--active: var(--gold-dim);
  --box-shadow-color-destructive--focus: var(--gold);
  --box-shadow-color-inverted: var(--text-primary);
  --box-shadow-color-transparent: transparent;
  --outline-color-progressive--focus: var(--gold);
  --accent-color-base: var(--gold);
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.25rem;
  --font-size-xx-large: 1.5rem;
  --font-size-xxx-large: 1.75rem;
  --line-height-xxx-small: 1.4285714rem;
  --line-height-xx-small: 1.5714285rem;
  --line-height-x-small: 1.25rem;
  --line-height-small: 1.375rem;
  --line-height-medium: 1.625rem;
  --line-height-large: 1.75rem;
  --line-height-x-large: 1.875rem;
  --line-height-xx-large: 2.125rem;
  --line-height-xxx-large: 2.375rem;
  --line-height-content: 1.625;
  --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;
  --filter-invert-icon: 1;
  --filter-invert-primary-button-icon: 0;
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: screen;
  
  /* ===== Game text colors - Base palette ===== */
  --color-outline: #1A1A1A;
  
  /* Grays & Neutrals */
  --color-white: #FFFFFF;
  --color-white-outline: #1A1A1A;
  --color-silver: #DAE0EA;
  --color-silver-outline: #151517;
  --color-cadet: #B3B9D1;
  --color-cadet-outline: #121316;
  
  /* Greens */
  --color-mint: #CDF7E2;
  --color-mint-outline: #131916;
  --color-aero: #CEFFEC;
  --color-aero-outline: #141A17;
  --color-jade: #92DCBA;
  --color-jade-outline: #091510;
  --color-shamrock: #56D191;
  --color-shamrock-outline: #06140C;
  --color-conifer: #9CDB43;
  --color-conifer-outline: #0B1501;
  --color-forest: #14A02E;
  --color-forest-outline: #010D03;
  --color-eucalyptus: #328464;
  --color-eucalyptus-outline: #030D08;
  
  /* Blues & Cyans */
  --color-sky: #9CDBF5;
  --color-sky-outline: #0B1519;
  --color-columbia: #A0DFFF;
  --color-columbia-outline: #0C1519;
  --color-malibu: #76C5EE;
  --color-malibu-outline: #081318;
  --color-picton: #249FDE;
  --color-picton-outline: #020D14;
  --color-wedgwood: #588DBE;
  --color-wedgwood-outline: #060C11;
  --color-prussian: #143464;
  --color-prussian-outline: #010408;
  --color-turquoise: #20D6C7;
  --color-turquoise-outline: #021514;
  
  /* Purples & Pinks */
  --color-pink: #EC8FD7;
  --color-pink-outline: #170914;
  --color-periwinkle: #B9BFFB;
  --color-periwinkle-outline: #111219;
  --color-thistle: #F1D4E8;
  --color-thistle-outline: #181418;
  --color-mulberry: #BC4A9B;
  --color-mulberry-outline: #12050E;
  --color-grape: #7F3EA1;
  --color-grape-outline: #09040D;
  --color-byzantium: #793A80;
  --color-byzantium-outline: #09040A;
  
  /* Yellows & Golds */
  --color-gold: #FFE792;
  --color-gold-outline: #1A1609;
  --color-cream: #FEF3C0;
  --color-cream-outline: #1A1811;
  --color-cornsilk: #FFFAE3;
  --color-cornsilk-outline: #1A1916;
  --color-sunglow: #FFD541;
  --color-sunglow-outline: #1A1404;
  --color-mustard: #FFE65A;
  --color-mustard-outline: #1A1706;
  --color-flax: #E9D569;
  --color-flax-outline: #171407;
  
  /* Oranges & Reds */
  --color-coral: #F5A097;
  --color-coral-outline: #190C0C;
  --color-roman: #E86A73;
  --color-roman-outline: #17070A;
  --color-bittersweet: #F3705B;
  --color-bittersweet-outline: #180906;
  --color-pumpkin: #FA6A0A;
  --color-pumpkin-outline: #190901;
  --color-cinnabar: #DF3E23;
  --color-cinnabar-outline: #160502;
  
  /* Browns & Tans */
  --color-desert: #E9B5A3;
  --color-desert-outline: #17100D;
  --color-mongoose: #C7B08B;
  --color-mongoose-outline: #14110B;
  --color-bordeaux: #572638;
  --color-bordeaux-outline: #070304;
  --color-mistyrose: #FFDFDA;
  --color-mistyrose-outline: #1A1615;
  
  /* Teals & Aquas */
  --color-aquamarine: #A6FCDB;
  --color-aquamarine-outline: #0D1A15;
  --color-casper: #B9D2E0;
  --color-casper-outline: #111518;
  
  /* ===== Game semantic aliases ===== */
  /* Items */
  --color-common-item: var(--color-silver);
  --color-common-item-outline: var(--color-silver-outline);
  --color-uncommon-item: var(--color-mint);
  --color-uncommon-item-outline: var(--color-mint-outline);
  --color-rare-item: var(--color-sky);
  --color-rare-item-outline: var(--color-sky-outline);
  --color-epic-item: var(--color-pink);
  --color-epic-item-outline: var(--color-pink-outline);
  --color-legendary-item: var(--color-gold);
  --color-legendary-item-outline: var(--color-gold-outline);
  --color-item-default: var(--color-silver);
  --color-item-default-outline: var(--color-silver-outline);
  --color-item-description: var(--color-jade);
  --color-item-description-outline: var(--color-jade-outline);
  --color-item-title: var(--color-sunglow);
  --color-item-title-outline: var(--color-sunglow-outline);
  --color-item-important: var(--color-columbia);
  --color-item-important-outline: var(--color-columbia-outline);
  --color-item-high-stat: var(--color-conifer);
  --color-item-high-stat-outline: var(--color-conifer-outline);
  --color-item-low-stat: var(--color-coral);
  --color-item-low-stat-outline: var(--color-coral-outline);
  
  /* Damage types */
  --color-fire-hit: var(--color-pumpkin);
  --color-fire-hit-outline: var(--color-pumpkin-outline);
  --color-water-hit: var(--color-turquoise);
  --color-water-hit-outline: var(--color-turquoise-outline);
  --color-earth-hit: var(--color-desert);
  --color-earth-hit-outline: var(--color-desert-outline);
  --color-energy-hit: var(--color-periwinkle);
  --color-energy-hit-outline: var(--color-periwinkle-outline);
  --color-holy-hit: var(--color-cream);
  --color-holy-hit-outline: var(--color-cream-outline);
  --color-death-hit: var(--color-byzantium);
  --color-death-hit-outline: var(--color-byzantium-outline);
  --color-poison-hit: var(--color-forest);
  --color-poison-hit-outline: var(--color-forest-outline);
  --color-magic-hit: var(--color-mulberry);
  --color-magic-hit-outline: var(--color-mulberry-outline);
  --color-magic-damage: var(--color-grape);
  --color-magic-damage-outline: var(--color-grape-outline);
  
  /* Blood types */
  --color-red-blood: var(--color-cinnabar);
  --color-red-blood-outline: var(--color-cinnabar-outline);
  --color-blue-blood: var(--color-wedgwood);
  --color-blue-blood-outline: var(--color-wedgwood-outline);
  --color-green-blood: var(--color-eucalyptus);
  --color-green-blood-outline: var(--color-eucalyptus-outline);
  --color-dark-blood: var(--color-bordeaux);
  --color-dark-blood-outline: var(--color-bordeaux-outline);
  --color-white-blood: var(--color-cadet);
  --color-white-blood-outline: var(--color-cadet-outline);
  --color-rock-blood: var(--color-mongoose);
  --color-rock-blood-outline: var(--color-mongoose-outline);
  
  /* Spells */
  --color-basic-spell: var(--color-roman);
  --color-basic-spell-outline: var(--color-roman-outline);
  --color-offensive-spell: var(--color-bittersweet);
  --color-offensive-spell-outline: var(--color-bittersweet-outline);
  --color-defensive-spell: var(--color-flax);
  --color-defensive-spell-outline: var(--color-flax-outline);
  --color-support-spell: var(--color-malibu);
  --color-support-spell-outline: var(--color-malibu-outline);
  
  /* Health & Mana */
  --color-healing: var(--color-conifer);
  --color-healing-outline: var(--color-conifer-outline);
  --color-mana-heal: var(--color-picton);
  --color-mana-heal-outline: var(--color-picton-outline);
  --color-mana-damage: var(--color-prussian);
  --color-mana-damage-outline: var(--color-prussian-outline);
  --color-npc-health: var(--color-shamrock);
  --color-npc-health-outline: var(--color-shamrock-outline);
  --color-diamond-skin: var(--color-aquamarine);
  --color-diamond-skin-outline: var(--color-aquamarine-outline);
  
  /* Chat & Text */
  --color-speak-text: var(--color-mustard);
  --color-speak-text-outline: var(--color-mustard-outline);
  --color-npc-text: var(--color-aero);
  --color-npc-text-outline: var(--color-aero-outline);
  --color-private-text: var(--color-casper);
  --color-private-text-outline: var(--color-casper-outline);
  --color-global-text: var(--color-thistle);
  --color-global-text-outline: var(--color-thistle-outline);
  --color-event-text: var(--color-cadet);
  --color-event-text-outline: var(--color-cadet-outline);
  --color-warning-text: var(--color-cinnabar);
  --color-warning-text-outline: var(--color-cinnabar-outline);
  --color-monster-speak: var(--color-pumpkin);
  --color-monster-speak-outline: var(--color-pumpkin-outline);
  --color-sign-color: var(--color-mistyrose);
  --color-sign-color-outline: var(--color-mistyrose-outline);
  
  /* Misc */
  --color-experience: var(--color-cornsilk);
  --color-experience-outline: var(--color-cornsilk-outline);
}

/* ===== Base color classes ===== */
.color-white { color: var(--color-white); --color-outline: var(--color-white-outline); }
.color-silver { color: var(--color-silver); --color-outline: var(--color-silver-outline); }
.color-cadet { color: var(--color-cadet); --color-outline: var(--color-cadet-outline); }
.color-mint { color: var(--color-mint); --color-outline: var(--color-mint-outline); }
.color-aero { color: var(--color-aero); --color-outline: var(--color-aero-outline); }
.color-jade { color: var(--color-jade); --color-outline: var(--color-jade-outline); }
.color-shamrock { color: var(--color-shamrock); --color-outline: var(--color-shamrock-outline); }
.color-conifer { color: var(--color-conifer); --color-outline: var(--color-conifer-outline); }
.color-forest { color: var(--color-forest); --color-outline: var(--color-forest-outline); }
.color-eucalyptus { color: var(--color-eucalyptus); --color-outline: var(--color-eucalyptus-outline); }
.color-sky { color: var(--color-sky); --color-outline: var(--color-sky-outline); }
.color-columbia { color: var(--color-columbia); --color-outline: var(--color-columbia-outline); }
.color-malibu { color: var(--color-malibu); --color-outline: var(--color-malibu-outline); }
.color-picton { color: var(--color-picton); --color-outline: var(--color-picton-outline); }
.color-wedgwood { color: var(--color-wedgwood); --color-outline: var(--color-wedgwood-outline); }
.color-prussian { color: var(--color-prussian); --color-outline: var(--color-prussian-outline); }
.color-turquoise { color: var(--color-turquoise); --color-outline: var(--color-turquoise-outline); }
.color-pink { color: var(--color-pink); --color-outline: var(--color-pink-outline); }
.color-periwinkle { color: var(--color-periwinkle); --color-outline: var(--color-periwinkle-outline); }
.color-thistle { color: var(--color-thistle); --color-outline: var(--color-thistle-outline); }
.color-mulberry { color: var(--color-mulberry); --color-outline: var(--color-mulberry-outline); }
.color-grape { color: var(--color-grape); --color-outline: var(--color-grape-outline); }
.color-byzantium { color: var(--color-byzantium); --color-outline: var(--color-byzantium-outline); }
.color-gold { color: var(--color-gold); --color-outline: var(--color-gold-outline); }
.color-cream { color: var(--color-cream); --color-outline: var(--color-cream-outline); }
.color-cornsilk { color: var(--color-cornsilk); --color-outline: var(--color-cornsilk-outline); }
.color-sunglow { color: var(--color-sunglow); --color-outline: var(--color-sunglow-outline); }
.color-mustard { color: var(--color-mustard); --color-outline: var(--color-mustard-outline); }
.color-flax { color: var(--color-flax); --color-outline: var(--color-flax-outline); }
.color-coral { color: var(--color-coral); --color-outline: var(--color-coral-outline); }
.color-roman { color: var(--color-roman); --color-outline: var(--color-roman-outline); }
.color-bittersweet { color: var(--color-bittersweet); --color-outline: var(--color-bittersweet-outline); }
.color-pumpkin { color: var(--color-pumpkin); --color-outline: var(--color-pumpkin-outline); }
.color-cinnabar { color: var(--color-cinnabar); --color-outline: var(--color-cinnabar-outline); }
.color-desert { color: var(--color-desert); --color-outline: var(--color-desert-outline); }
.color-mongoose { color: var(--color-mongoose); --color-outline: var(--color-mongoose-outline); }
.color-bordeaux { color: var(--color-bordeaux); --color-outline: var(--color-bordeaux-outline); }
.color-mistyrose { color: var(--color-mistyrose); --color-outline: var(--color-mistyrose-outline); }
.color-aquamarine { color: var(--color-aquamarine); --color-outline: var(--color-aquamarine-outline); }
.color-casper { color: var(--color-casper); --color-outline: var(--color-casper-outline); }

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: 'Liberation Sans', 'Helvetica Neue', Arial, sans-serif;
}

body> :not(:nth-child(2)) {
  flex-grow: 1;
}

* {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.mw-page-container {
  width: 100%;
}

.mw-content-container {
  height: 100%;
}

.mw-footer-container {
  margin-top: auto;
  opacity: 50%;
}

#vector-appearance-dropdown,
.vector-pinnable-header-toggle-button {
  display: none !important;
}

/* Hide theme selection, there's only one theme anyway. */
#mw-prefsection-rendering>div:nth-child(2)>div:nth-child(1)>div:nth-child(1) {
  display: none !important;
}

/* Link glow effects */
.mw-parser-output a,
.vector-menu-content a,
#p-logo a {
  transition: color 0.2s, text-shadow 0.2s;
}

.mw-parser-output a:hover,
.vector-menu-content a:hover {
  text-shadow: var(--glow-gold);
}

/* Stronger glow for headings with links */
.mw-parser-output h1 a:hover,
.mw-parser-output h2 a:hover,
.mw-parser-output h3 a:hover {
  text-shadow: var(--glow-gold-strong);
}

/* Red link glow (missing pages) */
.mw-parser-output a.new:hover {
  text-shadow: var(--glow-red);
}

@font-face {
  font-family: 'Apogea';
  src: url('/images/d/d6/Apogea.woff2?v=4') format('woff2');
}

.font-apogea {
  font-family: 'Apogea', monospace;
  font-size: 16px;
  line-height: 17px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* Outline + depth shadow (1x scale, use at 16px) */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

@font-face {
  font-family: 'ApogeaLong';
  src: url('/images/e/e2/ApogeaLong.woff2?v=4') format('woff2');
}

.font-apogea-long {
  font-family: 'ApogeaLong', monospace;
  font-size: 16px;
  line-height: 22px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* 2px outline (1x scale, use at 16px) */
  /* 1px: all 8 directions, 2px: cardinal only */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px -1px 0 var(--color-outline),
    1px -1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    -2px 0 0 var(--color-outline),
    2px 0 0 var(--color-outline),
    0 -2px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

@font-face {
  font-family: 'BitCell';
  src: url('/images/8/80/BitCell.woff2?v=4') format('woff2');
}

.font-bitcell {
  font-family: 'BitCell', monospace;
  font-size: 16px;
  line-height: 28px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* 2px outline (1x scale, use at 16px) */
  /* 1px: all 8 directions, 2px: cardinal only */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px -1px 0 var(--color-outline),
    1px -1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    -2px 0 0 var(--color-outline),
    2px 0 0 var(--color-outline),
    0 -2px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

/* Ninepatch panel style */
.tooltip-panel {
  flex-grow: 0;
  flex-shrink: 1;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-image: url('/images/0/0a/Panel-dark.png?v=2') 3 fill / 9px stretch;
  padding: 12px 12px;
  color: white;
}

.tooltip-panel p {
	margin:0;
	padding:0;
}

/* Recipe List */
.recipe-list {
    margin: 10px 0;
}

.recipe-list-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 10px;
}

/* Recipe Table */
.recipe-table {
    border-collapse: collapse;
    background-color: #1a1a2e;
}

.recipe-table th {
    background-color: #2a2a4e;
    color: #aaa;
    padding: 8px 12px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #4a4a6a;
}

.recipe-table td {
    padding: 8px 12px;
    vertical-align: top;
    border: 1px solid #4a4a6a;
    background-color: #1a1a2e;
}

.recipe-cell-item {
    white-space: nowrap;
}

.recipe-cell-station {
    text-align: center;
}

.recipe-cell-materials {
    padding: 0 !important;
}

.recipe-item-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Alternating material rows */
.recipe-material-odd {
    background-color: #1a1a2e;
    padding: 4px 12px;
}

.recipe-material-even {
    background-color: #2a2a4e;
    padding: 4px 12px;
}

/* Single Recipe Container */
.recipe-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #1a1a2e;
    border: 2px solid #4a4a6a;
    border-radius: 5px;
    margin: 10px 0;
}

.recipe-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
}

.recipe-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background-color: #2a2a4e;
    border: 1px solid #3a3a5a;
    border-radius: 3px;
    position: relative;
}

.recipe-quantity {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 2px;
}

.recipe-plus {
    font-size: 24px;
    color: #888;
    padding: 0 5px;
}

.recipe-arrow {
    font-size: 28px;
    color: #9edc60;
    padding: 0 10px;
}

.recipe-output {
    display: flex;
    align-items: center;
}

.recipe-station {
    font-size: 12px;
    color: #9bddff;
    margin-top: 5px;
    font-style: italic;
}

/* Inline recipe */
.recipe-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #2a2a4e;
    padding: 2px 6px;
    border-radius: 3px;
}
Retrieved from "https://apogea.wiki/index.php?title=MediaWiki:Common.css&oldid=828"