253 lines
6.1 KiB
SCSS
253 lines
6.1 KiB
SCSS
// @import 'include-media/dist/_include-media';
|
|
|
|
// Breakpoints
|
|
$breakpoints: (
|
|
small: 320px,
|
|
medium: 800px,
|
|
large: 1024px,
|
|
);
|
|
$medium-screen: 800px;
|
|
|
|
// Sizing
|
|
$unit: 8px;
|
|
|
|
$unit-fourth: calc($unit / 4);
|
|
$unit-half: calc($unit / 2);
|
|
$unit-2x: $unit * 2;
|
|
$unit-4x: $unit * 4;
|
|
$unit-6x: $unit * 6;
|
|
$unit-8x: $unit * 8;
|
|
$unit-10x: $unit * 10;
|
|
$unit-12x: $unit * 12;
|
|
$unit-20x: $unit * 20;
|
|
|
|
// Colors
|
|
$grey-00: #000;
|
|
$grey-05: #0a0a0a;
|
|
$grey-10: #111;
|
|
$grey-15: #191919;
|
|
$grey-25: #232323;
|
|
$grey-30: #2f2f2f;
|
|
$grey-40: #444;
|
|
$grey-50: #777;
|
|
$grey-55: #888;
|
|
$grey-60: #a9a9a9;
|
|
$grey-70: #c6c6c6;
|
|
$grey-80: #e9e9e9;
|
|
$grey-90: #f5f5f5;
|
|
$grey-95: #fafafa;
|
|
$grey-100: white;
|
|
|
|
// Purple -- Additional Weapons
|
|
$purple-00: #25224e;
|
|
$purple-10: #4f3c79;
|
|
$purple-20: #635fb7;
|
|
$purple-30: #8c86ff;
|
|
$purple-40: #7471c7;
|
|
$purple-80: #d5d3f6;
|
|
$purple-90: #ecebff;
|
|
|
|
// Orange -- Subaura Summons
|
|
$orange-00: #201710;
|
|
$orange-10: #6b401b;
|
|
$orange-30: #825b39;
|
|
$orange-40: #925a2a;
|
|
$orange-50: #a8703f;
|
|
$orange-80: #facea7;
|
|
$orange-90: #ffebd9;
|
|
|
|
// Colors -- Interface
|
|
$blue: #275dc5;
|
|
$red: #ff6161;
|
|
$error: #d13a3a;
|
|
|
|
// Colors -- Elements
|
|
$wind-text-00: #023e28;
|
|
$wind-text-10: #006a43;
|
|
$wind-text-20: #1dc688;
|
|
$wind-bg-00: #4cffbf55;
|
|
$wind-bg-10: #4cffbf;
|
|
$wind-bg-20: #cdffed;
|
|
|
|
$fire-text-00: #3f0202;
|
|
$fire-text-10: #6e0000;
|
|
$fire-text-20: #ec5c5c;
|
|
$fire-bg-00: #ff4d4d55;
|
|
$fire-bg-10: #ff4d4d;
|
|
$fire-bg-20: #ffcdcd;
|
|
|
|
$water-text-00: #03263b;
|
|
$water-text-10: #004b77;
|
|
$water-text-20: #5cb7ec;
|
|
$water-bg-00: #6cc9ff55;
|
|
$water-bg-10: #6cc9ff;
|
|
$water-bg-20: #cdedff;
|
|
|
|
$earth-text-00: #321602;
|
|
$earth-text-10: #662a00;
|
|
$earth-text-20: #ec985c;
|
|
$earth-bg-00: #fd9f5b55;
|
|
$earth-bg-10: #fd9f5b;
|
|
$earth-bg-20: #ffe2cd;
|
|
|
|
$light-text-00: #433d02;
|
|
$light-text-10: #716500;
|
|
$light-text-20: #c5b20c;
|
|
$light-bg-00: #ffed4c55;
|
|
$light-bg-10: #ffed4c;
|
|
$light-bg-20: #fffacd;
|
|
|
|
$dark-text-00: #260134;
|
|
$dark-text-10: #560075;
|
|
$dark-text-20: #c65cec;
|
|
$dark-bg-00: #d565fb55;
|
|
$dark-bg-10: #d565fb;
|
|
$dark-bg-20: #f2cdff;
|
|
|
|
$page--bg--light: $grey-90;
|
|
$page--bg--dark: $grey-15;
|
|
|
|
$page--hover--light: $grey-90;
|
|
$page--hover--dark: $grey-30;
|
|
|
|
$page--element--bg--light: $grey-70;
|
|
$page--element--bg--dark: $grey-40;
|
|
|
|
// Color Definitions: Menu
|
|
$menu--bg--light: $grey-100;
|
|
$menu--bg--dark: $grey-05;
|
|
$menu--text--light: $grey-90;
|
|
$menu--text--dark: $grey-50;
|
|
$menu--separator--light: $grey-90;
|
|
$menu--separator--dark: $grey-05;
|
|
$menu--item--bg--light--hover: $grey-90;
|
|
$menu--item--bg--dark--hover: $grey-00;
|
|
$menu--text--light--hover: $grey-100;
|
|
$menu--text--dark--hover: $grey-15;
|
|
|
|
// Color Definitions: Button
|
|
$button--bg--light: $grey-80;
|
|
$button--bg--light--hover: $grey-100;
|
|
$button--bg--light--disabled: $grey-50;
|
|
$button--contained--bg--light: $grey-90;
|
|
$button--contained--bg--light--hover: $grey-80;
|
|
|
|
$button--bg--dark: $grey-00;
|
|
$button--bg--dark--hover: $grey-05;
|
|
$button--bg--dark--disabled: $grey-30;
|
|
$button--contained--bg--dark: $grey-15;
|
|
$button--contained--bg--dark--hover: $grey-05;
|
|
|
|
$button--text--light: $grey-55;
|
|
$button--text--light--hover: $grey-40;
|
|
$button--text--light--disabled: $grey-40;
|
|
$button--text--dark: $grey-70;
|
|
$button--text--dark--hover: $grey-100;
|
|
$button--text--dark--disabled: $grey-50;
|
|
|
|
// Color Definitions: Input
|
|
$input--bg--light: $grey-100;
|
|
$input--bg--light--hover: $grey-95;
|
|
$input--bg--dark: $grey-40;
|
|
$input--bg--dark--hover: $grey-30;
|
|
|
|
$input--bound--bg--light: $grey-90;
|
|
$input--bound--bg--light--hover: $grey-80;
|
|
$input--bound--bg--dark: $grey-15;
|
|
$input--bound--bg--dark--hover: $grey-25;
|
|
|
|
// Color Definitions: Select
|
|
$select--bg--light: $grey-100;
|
|
$select--bg--dark: $grey-05;
|
|
$select--contained--bg--light: $grey-90;
|
|
$select--contained--bg--dark: $grey-05;
|
|
$select--contained--bg--light--hover: $grey-80;
|
|
$select--contained--bg--dark--hover: $grey-00;
|
|
$select--separator--light: $grey-90;
|
|
$select--separator--dark: $grey-00;
|
|
$option--bg--light--hover: $grey-90;
|
|
$option--bg--dark--hover: $grey-00;
|
|
|
|
$grid--rep--hover--light: $grey-100;
|
|
$grid--rep--hover--dark: $grey-10;
|
|
|
|
$grid--border--color--light: $grey-80;
|
|
$grid--border--color--dark: $grey-40;
|
|
|
|
$switch--nub--bg--light: $grey-80;
|
|
$switch--nub--bg--dark: $grey-30;
|
|
|
|
// Color Definitions: Additional Weapons
|
|
$extra--purple--bg--light: $purple-90;
|
|
$extra--purple--card--bg--light: $purple-80;
|
|
$extra--purple--primary--light: $purple-30;
|
|
$extra--purple--secondary--light: $purple-40;
|
|
$extra--purple--text--light: $purple-10;
|
|
$extra--purple--bg--dark: $purple-20;
|
|
$extra--purple--card--bg--dark: $purple-40;
|
|
$extra--purple--primary--dark: $purple-00;
|
|
$extra--purple--secondary--dark: $purple-10;
|
|
$extra--purple--text--dark: $purple-00;
|
|
|
|
// Color Definitions: Subaura
|
|
$subaura--orange--bg--light: $orange-90;
|
|
$subaura--orange--card--bg--light: $orange-80;
|
|
$subaura--orange--primary--light: $orange-30;
|
|
$subaura--orange--secondary--light: $orange-50;
|
|
$subaura--orange--text--light: $orange-30;
|
|
$subaura--orange--bg--dark: $orange-10;
|
|
$subaura--orange--card--bg--dark: $orange-30;
|
|
$subaura--orange--primary--dark: $orange-00;
|
|
$subaura--orange--secondary--dark: $orange-10;
|
|
$subaura--orange--text--dark: $orange-00;
|
|
|
|
// Color Definitions: Text
|
|
$text--primary--color--light: $grey-40;
|
|
$text--primary--color--dark: $grey-90;
|
|
|
|
$text--secondary--color--light: $grey-50;
|
|
$text--secondary--hover--light: $grey-40;
|
|
$text--secondary--color--dark: $grey-50;
|
|
$text--secondary--hover--dark: $grey-70;
|
|
|
|
// Color Definitions: Icon
|
|
$icon--secondary--color--light: $grey-70;
|
|
$icon--secondary--color--dark: $grey-50;
|
|
$icon--secondary--hover--light: $grey-50;
|
|
$icon--secondary--hover--dark: $grey-70;
|
|
|
|
$text--tertiary--color--light: $grey-60;
|
|
$text--tertiary--color--dark: $grey-60;
|
|
|
|
// Color Definitions: Tag
|
|
$tag--bg--light: $grey-60;
|
|
$tag--bg--dark: $grey-00;
|
|
$tag--text--light: $grey-100;
|
|
$tag--text--dark: $grey-50;
|
|
|
|
// Font-weight
|
|
$normal: 400;
|
|
$medium: 500;
|
|
$bold: 600;
|
|
|
|
// Font size
|
|
$font-tiny: 11px;
|
|
$font-small: 13px;
|
|
$font-button: 15px;
|
|
$font-regular: 16px;
|
|
$font-medium: 18px;
|
|
$font-large: 21px;
|
|
$font-xlarge: 24px;
|
|
$font-xxlarge: 28px;
|
|
|
|
// Scale factors
|
|
$scale-wide: scale(1.05, 1.05);
|
|
$scale-tall: scale(1.012, 1.012);
|
|
|
|
// Border radius
|
|
$input-corner: $unit;
|
|
$item-corner: $unit-half;
|
|
|
|
// Shadows
|
|
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
|
|
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
|