With the release of the Global Beta, we encourage contributions to topics related to Girls' Frontline 2. Learn how to contribute and join our Discord server to discuss major changes.
MediaWiki:Gadget-DesignTokens.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/** "Reset" */
* {
box-sizing: border-box;
}
/** Definition of Design Tokens **/
:root {
--iopw-ref-typeface-base: Helvetica;
--iopw-ref-typeface-base-alt: Arial;
--iopw-ref-typeface-base-fallback: sans-serif;
--iopw-ref-typeface-fancy: Times;
--iopw-ref-typeface-fancy-fallback:serif;
--iopw-ref-typeface-mono: "Courier New";
--iopw-ref-typeface-mono-alt: Courier;
--iopw-ref-typeface-mono-fallback: monospace;
--iopw-ref-border-width: thin;
--iopw-ref-border-width-thick: thick;
--iopw-ref-border-style: solid;
--iopw-ref-transparency-00: 0%;
--iopw-ref-transparency-25: 25%;
--iopw-ref-transparency-50: 50%;
--iopw-ref-transparency-75: 75%;
--iopw-ref-transparency-99: 100%;
--iopw-ref-palette-gray-00: #000000;
--iopw-ref-palette-gray-10: #1F1F1F;
--iopw-ref-palette-gray-20: #333333;
--iopw-ref-palette-gray-30: #4A4A4A;
--iopw-ref-palette-gray-40: #646464;
--iopw-ref-palette-gray-50: #7F7F7F;
--iopw-ref-palette-gray-60: #AAAAAA;
--iopw-ref-palette-gray-70: #BBBBBB;
--iopw-ref-palette-gray-80: #DADADA;
--iopw-ref-palette-gray-90: #EDEDED;
--iopw-ref-palette-gray-99: #FFFFFF;
--iopw-ref-palette-primary: #F0B000;
--iopw-ref-palette-primary-lighter: #FFCC00;
--iopw-ref-palette-primary-darker: #EEAA00;
--iopw-ref-palette-primary-darkest: #4E443C;
--iopw-ref-palette-on-primary: #000000;
--iopw-ref-palette-secondary: #FF0000;
--iopw-ref-palette-secondary-darker: #BD0B0B;
--iopw-ref-palette-tertiary: #0000FF;
--iopw-ref-palette-tertiary-darker: #00007F;
--iopw-ref-palette-quaternary: #00FF00;
--iopw-ref-palette-quaternary-darker: #007F00;
--iopw-ref-palette-input: #F5F5EF;
--iopw-ref-palette-on-input: #5A5A55;
--iopw-ref-palette-surface: #808080;
--iopw-ref-palette-on-surface: #FFFFFF;
--iopw-ref-palette-surface-container: #474747;
--iopw-ref-palette-surface-dim: #4E443C;
--iopw-ref-palette-on-surface-dim: #A2A2A2;
--iopw-ref-palette-font-sidenote: #71FDFF;
--iopw-ref-palette-font-positive: #ADFF2F;
--iopw-ref-palette-font-negative: #FF0000;
--iopw-ref-palette-obtain-construct-normal: #008000;
--iopw-ref-palette-obtain-construct-heavy: #FFA500;
--iopw-ref-palette-obtain-construct-drop: #FFFF00;
--iopw-ref-palette-obtain-construct-reward: #FF8C69;
--iopw-ref-palette-obtain-construct-dormitory: #F9D988;
--iopw-ref-palette-obtain-construct-assimilation: #8ABFEE;
/** Values specific to PNC */
--pnc-ref-palette-rarity-1star: #2999F3;
--pnc-ref-palette-rarity-2star: #B470E1;
--pnc-ref-palette-rarity-3star: #FC8C10;
--pnc-ref-palette-card-level1: #6293E3;
--pnc-ref-palette-card-level2: #9450D9;
--pnc-ref-palette-card-level3: #DEC743;
/** Values specific to GFL */
--gfl-ref-palette-rarity-extra: #DFB6FF;
--gfl-ref-palette-rarity-2star: #DDDDDD;
--gfl-ref-palette-rarity-3star: #6BDFCE;
--gfl-ref-palette-rarity-4star: #D6E35A;
--gfl-ref-palette-rarity-5star: #FFCD4A;
--gfl-ref-palette-rarity-mod3: #FF4F00;
--gfl-ref-palette-unit-enemy: #FF0012;
--gfl-ref-palette-unit-enemy-alt: #EC5151;
--gfl-ref-palette-unit-hoc-orange: #F89736;
--gfl-ref-palette-unit-hoc-blue: #85B6DF;
--gfl-ref-palette-unit-fairy-battle: #F76529;
--gfl-ref-palette-unit-fairy-strategy: #739EE7;
--gfl-ref-palette-hoc-chip-orange: #DD786C;
--gfl-ref-palette-hoc-chip-orange-alt: #79644C;
--gfl-ref-palette-hoc-chip-blue: #6C6CDD;
--gfl-ref-palette-hoc-chip-blue-alt: #4C4C79;
--gfl-ref-palette-tile-container: #333333;
--gfl-ref-palette-tile: #1F1F1F;
--gfl-ref-palette-tile-stand: #FFFFFF;
--gfl-ref-palette-tile-buffed: #00FFDE;
}
/** Setting up theme */
:root {
/** Base */
--iopw-sys-size-0-5: 0.125rem;
--iopw-sys-size-1: 0.25rem;
--iopw-sys-size-2: 0.5rem;
--iopw-sys-size-3: 0.75rem;
--iopw-sys-size-4: 1rem;
--iopw-sys-size-5: 1.25rem;
--iopw-sys-size-6: 1.5rem;
--iopw-sys-size-7: 1.75rem;
--iopw-sys-size-8: calc(var(--iopw-sys-size-4) * 2);
--iopw-sys-size-12: calc(var(--iopw-sys-size-4) * 3);
--iopw-sys-size-16: calc(var(--iopw-sys-size-4) * 4);
--iopw-sys-size-24: calc(var(--iopw-sys-size-4) * 6);
--iopw-sys-size-32: calc(var(--iopw-sys-size-4) * 8);
--iopw-sys-font-weight-lighter: 100;
--iopw-sys-font-weight-light: 200;
--iopw-sys-font-weight-normal: 400;
--iopw-sys-font-weight-bold: 700;
--iopw-sys-font-weight-bolder: 900;
--iopw-sys-typeface-base: var(--iopw-ref-typeface-base);
--iopw-sys-typeface-base-alt: var(--iopw-ref-typeface-base-alt);
--iopw-sys-typeface-base-fallback: var(--iopw-ref-typeface-base-fallback);
--iopw-sys-typeface-fancy: var(--iopw-ref-typeface-fancy);
--iopw-sys-typeface-fancy-fallback: var(--iopw-ref-typeface-fancy-fallback);
--iopw-sys-typeface-mono: var(--iopw-ref-typeface-mono);
--iopw-sys-typeface-mono-alt: var(--iopw-ref-typeface-mono-alt);
--iopw-sys-typeface-mono-fallback: var(--iopw-ref-typeface-mono-fallback);
--iopw-sys-transparency-00: var(--iopw-ref-transparency-00);
--iopw-sys-transparency-25: var(--iopw-ref-transparency-25);
--iopw-sys-transparency-50: var(--iopw-ref-transparency-50);
--iopw-sys-transparency-75: var(--iopw-ref-transparency-75);
--iopw-sys-transparency-99: var(--iopw-ref-transparency-99);
--iopw-sys-border-width: var(--iopw-ref-border-width);
--iopw-sys-border-width-thick: var(--iopw-ref-border-width-thick);
--iopw-sys-border-style: var(--iopw-ref-border-style);
--iopw-sys-palette-gray-00: var(--iopw-ref-palette-gray-00);
--iopw-sys-palette-gray-10: var(--iopw-ref-palette-gray-10);
--iopw-sys-palette-gray-20: var(--iopw-ref-palette-gray-20);
--iopw-sys-palette-gray-30: var(--iopw-ref-palette-gray-30);
--iopw-sys-palette-gray-40: var(--iopw-ref-palette-gray-40);
--iopw-sys-palette-gray-50: var(--iopw-ref-palette-gray-50);
--iopw-sys-palette-gray-60: var(--iopw-ref-palette-gray-60);
--iopw-sys-palette-gray-70: var(--iopw-ref-palette-gray-70);
--iopw-sys-palette-gray-80: var(--iopw-ref-palette-gray-80);
--iopw-sys-palette-gray-90: var(--iopw-ref-palette-gray-90);
--iopw-sys-palette-gray-99: var(--iopw-ref-palette-gray-99);
--iopw-sys-palette-primary: var(--iopw-ref-palette-primary);
--iopw-sys-palette-primary-lighter: var(--iopw-ref-palette-primary-lighter);
--iopw-sys-palette-primary-darker: var(--iopw-ref-palette-primary-darker);
--iopw-sys-palette-primary-darkest: var(--iopw-ref-palette-primary-darkest);
--iopw-sys-palette-on-primary: var(--iopw-ref-palette-on-primary);
--iopw-sys-palette-secondary: var(--iopw-ref-palette-secondary);
--iopw-sys-palette-secondary-darker: var(--iopw-ref-palette-secondary-darker);
--iopw-sys-palette-tertiary: var(--iopw-ref-palette-tertiary);
--iopw-sys-palette-tertiary-darker: var(--iopw-ref-palette-tertiary-darker);
--iopw-sys-palette-quaternary: var(--iopw-ref-palette-quaternary);
--iopw-sys-palette-quaternary-darker: var(--iopw-ref-palette-quaternary-darker);
--iopw-sys-palette-input: var(--iopw-ref-palette-input);
--iopw-sys-palette-on-input: var(--iopw-ref-palette-on-input);
--iopw-sys-palette-surface: var(--iopw-ref-palette-surface);
--iopw-sys-palette-on-surface: var(--iopw-ref-palette-on-surface);
--iopw-sys-palette-surface-container: var(--iopw-ref-palette-surface-container);
--iopw-sys-palette-surface-dim: var(--iopw-ref-palette-surface-dim);
--iopw-sys-palette-on-surface-dim: var(--iopw-ref-palette-on-surface-dim);
--iopw-sys-palette-font-sidenote: var(--iopw-ref-palette-font-sidenote);
--iopw-sys-palette-font-positive: var(--iopw-ref-palette-font-positive);
--iopw-sys-palette-font-negative: var(--iopw-ref-palette-font-negative);
--iopw-sys-palette-obtain-construct-normal: var(--iopw-ref-palette-obtain-construct-normal);
--iopw-sys-palette-obtain-construct-heavy: var(--iopw-ref-palette-obtain-construct-heavy);
--iopw-sys-palette-obtain-construct-drop: var(--iopw-ref-palette-obtain-construct-drop);
--iopw-sys-palette-obtain-construct-reward: var(--iopw-ref-palette-obtain-construct-reward);
--iopw-sys-palette-obtain-construct-dormitory: var(--iopw-ref-palette-obtain-construct-dormitory);
--iopw-sys-palette-obtain-construct-assimilation: var(--iopw-ref-palette-obtain-construct-assimilation);
/** Values specific to PNC */
--pnc-sys-rarity-1star: var(--pnc-ref-palette-rarity-1star);
--pnc-sys-rarity-2star: var(--pnc-ref-palette-rarity-2star);
--pnc-sys-rarity-3star: var(--pnc-ref-palette-rarity-3star);
--pnc-sys-card-level1: var(--pnc-ref-palette-card-level1);
--pnc-sys-card-level2: var(--pnc-ref-palette-card-level2);
--pnc-sys-card-level3: var(--pnc-ref-palette-card-level3);
/** Values specific to GFL */
--gfl-sys-rarity-extra: var(--gfl-ref-palette-rarity-extra);
--gfl-sys-rarity-2star: var(--gfl-ref-palette-rarity-2star);
--gfl-sys-rarity-3star: var(--gfl-ref-palette-rarity-3star);
--gfl-sys-rarity-4star: var(--gfl-ref-palette-rarity-4star);
--gfl-sys-rarity-5star: var(--gfl-ref-palette-rarity-5star);
--gfl-sys-rarity-mod3: var(--gfl-ref-palette-rarity-mod3);
--gfl-sys-unit-enemy: var(--gfl-ref-palette-unit-enemy);
--gfl-sys-unit-enemy-alt: var(--gfl-ref-palette-unit-enemy-alt);
--gfl-sys-unit-hoc-orange: var(--gfl-ref-palette-unit-hoc-orange);
--gfl-sys-unit-hoc-blue: var(--gfl-ref-palette-unit-hoc-blue);
--gfl-sys-unit-fairy-battle: var(--gfl-ref-palette-unit-fairy-battle);
--gfl-sys-unit-fairy-strategy: var(--gfl-ref-palette-unit-fairy-strategy);
--gfl-sys-hoc-chip-orange: var(--gfl-ref-palette-hoc-chip-orange);
--gfl-sys-hoc-chip-orange-alt: var(--gfl-ref-palette-hoc-chip-orange-alt);
--gfl-sys-hoc-chip-blue: var(--gfl-ref-palette-hoc-chip-blue);
--gfl-sys-hoc-chip-blue-alt: var(--gfl-ref-palette-hoc-chip-blue-alt);
--gfl-sys-tile-buffed-container: var(--gfl-ref-palette-tile-container);
--gfl-sys-tile: var(--gfl-ref-palette-tile);
--gfl-sys-tile-stand: var(--gfl-ref-palette-tile-stand);
--gfl-sys-tile-buffed: var(--gfl-ref-palette-tile-buffed);
}
/** Component Themes */
:root {
/** Diagram (ex. Radar Chart) */
--iopw-comp-diagram-grid-stroke: var(--iopw-sys-palette-gray-50);
--iopw-comp-diagram-primary-stroke: var(--iopw-sys-palette-primary);
--iopw-comp-diagram-primary-fill: color-mix(in srgb, var(--iopw-sys-palette-primary-darker) var(--iopw-sys-transparency-50), transparent);
--iopw-comp-diagram-secondary-stroke: var(--iopw-sys-palette-secondary);
--iopw-comp-diagram-secondary-fill: color-mix(in srgb, var(--iopw-sys-palette-secondary-darker) var(--iopw-sys-transparency-50), transparent);
--iopw-comp-diagram-tertiary-stroke: var(--iopw-sys-palette-tertiary);
--iopw-comp-diagram-tertiary-fill: color-mix(in srgb, var(--iopw-sys-palette-tertiary-darker) var(--iopw-sys-transparency-50), transparent);
--iopw-comp-diagram-quaternary-stroke: var(--iopw-sys-palette-quaternary);
--iopw-comp-diagram-quaternary-fill: color-mix(in srgb, var(--iopw-sys-palette-quaternary-darker) var(--iopw-sys-transparency-50), transparent);
/** Flowthread (Comment plugin) **/
--iopw-comp-comment-font-color: var(--iopw-sys-palette-on-surface);
--iopw-comp-comment-font: var(--iopw-sys-typeface-base), var(--iopw-sys-typeface-base-alt), --iopw-sys-typeface-base-fallback);
--iopw-comp-comment-border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
--iopw-comp-comment-border-radius: 0;
--iopw-comp-comment-control-font-size: var(--iopw-sys-size-3);
--iopw-comp-comment-post-font-size: calc(var(--iopw-sys-size-3) + var(--iopw-sys-size-0-5));
}