MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 730: | Line 730: | ||
padding: 2px 6px; | padding: 2px 6px; | ||
border-radius: 3px; | border-radius: 3px; | ||
} | |||
/* Item Sources Table */ | |||
.item-sources { | |||
margin: 10px 0; | |||
} | |||
.item-sources-table { | |||
border-collapse: collapse; | |||
background-color: #1a1a2e; | |||
} | |||
.item-sources-table th { | |||
background-color: #2a2a4e; | |||
color: #aaa; | |||
padding: 8px 12px; | |||
text-align: left; | |||
font-weight: bold; | |||
border: 1px solid #4a4a6a; | |||
} | |||
.item-sources-header-icon { | |||
width: 32px; | |||
padding: 4px !important; | |||
} | |||
.item-sources-table td { | |||
padding: 8px 12px; | |||
vertical-align: middle; | |||
border: 1px solid #4a4a6a; | |||
background-color: #1a1a2e; | |||
} | |||
.item-sources-cell-icon { | |||
width: 32px; | |||
text-align: center; | |||
padding: 4px !important; | |||
} | |||
.item-sources-cell-name { | |||
white-space: nowrap; | |||
} | |||
.item-sources-cell-quantity { | |||
text-align: center; | |||
} | |||
.item-sources-cell-rarity { | |||
text-align: center; | |||
} | } | ||
Revision as of 22:14, 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;
}
/* Item Sources Table */
.item-sources {
margin: 10px 0;
}
.item-sources-table {
border-collapse: collapse;
background-color: #1a1a2e;
}
.item-sources-table th {
background-color: #2a2a4e;
color: #aaa;
padding: 8px 12px;
text-align: left;
font-weight: bold;
border: 1px solid #4a4a6a;
}
.item-sources-header-icon {
width: 32px;
padding: 4px !important;
}
.item-sources-table td {
padding: 8px 12px;
vertical-align: middle;
border: 1px solid #4a4a6a;
background-color: #1a1a2e;
}
.item-sources-cell-icon {
width: 32px;
text-align: center;
padding: 4px !important;
}
.item-sources-cell-name {
white-space: nowrap;
}
.item-sources-cell-quantity {
text-align: center;
}
.item-sources-cell-rarity {
text-align: center;
}