granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix ExtraSummons for dark mode

Browse source
This commit is contained in:
Justin Edmund 2022-12-05 22:21:17 -08:00
parent 0ea675d18a
commit 0660f98550
3 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/ExtraSummons/index.scss
View file

@ -1,5 +1,5 @@
#ExtraSummons { #ExtraSummons {
background: #ffebd9; background: var(--subaura-orange-bg);
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -17,7 +17,7 @@
} }
& > span { & > span {
color: #825b39; color: var(--subaura-orange-text);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -46,10 +46,10 @@
} }
.SummonUnit .SummonImage { .SummonUnit .SummonImage {
background: #facea7; background: var(--subaura-orange-card-bg);
} }
.SummonUnit .SummonImage .icon svg { .SummonUnit .SummonImage .icon svg {
fill: #a8703f; fill: var(--subaura-orange-secondary);
} }
} }

12
styles/themes.scss
View file

@ -32,6 +32,12 @@
--extra-purple-secondary: #{$extra--purple--secondary--light}; --extra-purple-secondary: #{$extra--purple--secondary--light};
--extra-purple-text: #{$extra--purple--text--light}; --extra-purple-text: #{$extra--purple--text--light};
--subaura-orange-bg: #{$subaura--orange--bg--light};
--subaura-orange-card-bg: #{$subaura--orange--card--bg--light};
--subaura-orange-primary: #{$subaura--orange--primary--light};
--subaura-orange-secondary: #{$subaura--orange--secondary--light};
--subaura-orange-text: #{$subaura--orange--text--light};
--grid-border-color: #{$grid--border--color--light}; --grid-border-color: #{$grid--border--color--light};
--wind-hover-bg: #{$wind-bg-20}; --wind-hover-bg: #{$wind-bg-20};
@ -82,6 +88,12 @@
--extra-purple-secondary: #{$extra--purple--secondary--dark}; --extra-purple-secondary: #{$extra--purple--secondary--dark};
--extra-purple-text: #{$extra--purple--text--dark}; --extra-purple-text: #{$extra--purple--text--dark};
--subaura-orange-bg: #{$subaura--orange--bg--dark};
--subaura-orange-card-bg: #{$subaura--orange--card--bg--dark};
--subaura-orange-primary: #{$subaura--orange--primary--dark};
--subaura-orange-secondary: #{$subaura--orange--secondary--dark};
--subaura-orange-text: #{$subaura--orange--text--dark};
--grid-border-color: #{$grid--border--color--dark}; --grid-border-color: #{$grid--border--color--dark};
--wind-hover-bg: #{$wind-bg-00}; --wind-hover-bg: #{$wind-bg-00};

22
styles/variables.scss
View file

@ -37,7 +37,7 @@ $grey-95: #fafafa;
$grey-100: white; $grey-100: white;
// Purple -- Additional Weapons // Purple -- Additional Weapons
$purple-00: #332f7c; $purple-00: #25224e;
$purple-10: #4f3c79; $purple-10: #4f3c79;
$purple-20: #635fb7; $purple-20: #635fb7;
$purple-30: #8c86ff; $purple-30: #8c86ff;
@ -45,6 +45,15 @@ $purple-40: #7471c7;
$purple-80: #d5d3f6; $purple-80: #d5d3f6;
$purple-90: #ecebff; $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 // Colors -- Interface
$blue: #275dc5; $blue: #275dc5;
$red: #ff6161; $red: #ff6161;
@ -135,6 +144,17 @@ $extra--purple--primary--dark: $purple-00;
$extra--purple--secondary--dark: $purple-10; $extra--purple--secondary--dark: $purple-10;
$extra--purple--text--dark: $purple-00; $extra--purple--text--dark: $purple-00;
$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;
$text--primary--color--light: $grey-30; $text--primary--color--light: $grey-30;
$text--primary--color--dark: $grey-90; $text--primary--color--dark: $grey-90;