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

Fix more raid color stuff

Browse source 
This should be it for real this time
This commit is contained in:
Justin Edmund 2023-07-03 21:53:47 -07:00
parent a54f1b4c46
commit 9b098a15d8
4 changed files with 94 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
components/common/Button/index.module.scss
View file

@ -11,6 +11,7 @@
gap: 6px;
transition: 0.18s opacity ease-in-out;
user-select: none;
transition: background-color 0.18s ease-out, color 0.18s ease-out;
.text {
align-items: center;
@ -396,22 +397,13 @@
}
}
&.null {
background: $grey-90;
color: $grey-55;
&:hover {
background: $grey-70;
color: $grey-15;
}
}
&.wind {
background: var(--wind-bg);
color: var(--wind-text);
&:hover {
background: var(--wind-bg-hover);
color: var(--wind-text-hover);
}
}
@ -421,6 +413,7 @@
&:hover {
background: var(--fire-bg-hover);
color: var(--fire-text-hover);
}
}
@ -430,6 +423,7 @@
&:hover {
background: var(--water-bg-hover);
color: var(--water-text-hover);
}
}
@ -439,6 +433,7 @@
&:hover {
background: var(--earth-bg-hover);
color: var(--earth-text-hover);
}
}
@ -448,6 +443,7 @@
&:hover {
background: var(--dark-bg-hover);
color: var(--dark-text-hover);
}
}
@ -457,6 +453,7 @@
&:hover {
background: var(--light-bg-hover);
color: var(--light-text-hover);
}
}
}

12
components/raids/RaidCombobox/index.module.scss
View file

@ -192,25 +192,25 @@
}
.raid.wind {
color: var(--wind-text);
color: var(--wind-raid-text);
}
.raid.fire {
color: var(--fire-text);
color: var(--fire-raid-text);
}
.raid.water {
color: var(--water-text);
color: var(--water-raid-text);
}
.raid.earth {
color: var(--earth-text);
color: var(--earth-raid-text);
}
.raid.dark {
color: var(--dark-text);
color: var(--dark-raid-text);
}
.raid.light {
color: var(--light-text);
color: var(--light-raid-text);
}

66
styles/themes.scss
View file

@ -131,34 +131,40 @@
// Light - Element theming
--wind-bg: #{$wind--bg--light};
--wind-hover-bg: #{$wind--bg--hover--light};
--wind-bg-hover: #{$wind--bg--hover--light};
--wind-text: #{$wind--text--light};
--wind-hover-text: #{$wind--text--hover--light};
--wind-raid-text: #{$wind--text--raid--light};
--wind-text-hover: #{$wind--text--hover--light};
--fire-bg: #{$fire--bg--light};
--fire-hover-bg: #{$fire--bg--hover--light};
--fire-bg-hover: #{$fire--bg--hover--light};
--fire-text: #{$fire--text--light};
--fire-hover-text: #{$fire--text--hover--light};
--fire-raid-text: #{$fire--text--raid--light};
--fire-text-hover: #{$fire--text--hover--light};
--water-bg: #{$water--bg--light};
--water-hover-bg: #{$water--bg--hover--light};
--water-bg-hover: #{$water--bg--hover--light};
--water-text: #{$water--text--light};
--water-hover-text: #{$water--text--hover--light};
--water-raid-text: #{$water--text--raid--light};
--water-text-hover: #{$water--text--hover--light};
--earth-bg: #{$earth--bg--light};
--earth-hover-bg: #{$earth--bg--hover--light};
--earth-bg-hover: #{$earth--bg--hover--light};
--earth-text: #{$earth--text--light};
--earth-hover-text: #{$earth--text--hover--light};
--earth-raid-text: #{$earth--text--raid--light};
--earth-text-hover: #{$earth--text--hover--light};
--dark-bg: #{$dark--bg--light};
--dark-hover-bg: #{$dark--bg--hover--light};
--dark-bg-hover: #{$dark--bg--hover--light};
--dark-text: #{$dark--text--light};
--dark-hover-text: #{$dark--text--hover--light};
--dark-raid-text: #{$dark--text--raid--light};
--dark-text-hover: #{$dark--text--hover--light};
--light-bg: #{$light--bg--light};
--light-hover-bg: #{$light--bg--hover--light};
--light-bg-hover: #{$light--bg--hover--light};
--light-text: #{$light--text--light};
--light-hover-text: #{$light--text--hover--light};
--light-raid-text: #{$light--text--raid--light};
--light-text-hover: #{$light--text--hover--light};
// Gradients
--hero-gradient: #{$hero--gradient--light};
@ -298,40 +304,40 @@
// Dark - Element theming
--wind-bg: #{$wind--bg--dark};
--wind-hover-bg: #{$wind--bg--hover--dark};
--wind-bg-hover: #{$wind--bg--hover--dark};
--wind-text: #{$wind--text--dark};
--wind-text-bg: #{$wind--text--bg--dark};
--wind-hover-text: #{$wind--text--hover--dark};
--wind-raid-text: #{$wind--text--raid--dark};
--wind-text-hover: #{$wind--text--hover--dark};
--fire-bg: #{$fire--bg--dark};
--fire-hover-bg: #{$fire--bg--hover--dark};
--fire-bg-hover: #{$fire--bg--hover--dark};
--fire-text: #{$fire--text--dark};
--fire-text-bg: #{$fire--text--bg--dark};
--fire-hover-text: #{$fire--text--hover--dark};
--fire-raid-text: #{$fire--text--raid--dark};
--fire-text-hover: #{$fire--text--hover--dark};
--water-bg: #{$water--bg--dark};
--water-hover-bg: #{$water--bg--hover--dark};
--water-bg-hover: #{$water--bg--hover--dark};
--water-text: #{$water--text--dark};
--water-text-bg: #{$water--text--bg--dark};
--water-hover-text: #{$water--text--hover--dark};
--water-raid-text: #{$water--text--raid--dark};
--water-text-hover: #{$water--text--hover--dark};
--earth-bg: #{$earth--bg--dark};
--earth-hover-bg: #{$earth--bg--hover--dark};
--earth-bg-hover: #{$earth--bg--hover--dark};
--earth-text: #{$earth--text--dark};
--earth-text-bg: #{$earth--text--bg--dark};
--earth-hover-text: #{$earth--text--hover--dark};
--earth-raid-text: #{$earth--text--raid--dark};
--earth-text-hover: #{$earth--text--hover--dark};
--dark-bg: #{$dark--bg--dark};
--dark-hover-bg: #{$dark--bg--hover--dark};
--dark-bg-hover: #{$dark--bg--hover--dark};
--dark-text: #{$dark--text--dark};
--dark-text-bg: #{$dark--text--bg--dark};
--dark-hover-text: #{$dark--text--hover--dark};
--dark-raid-text: #{$dark--text--raid--dark};
--dark-text-hover: #{$dark--text--hover--dark};
--light-bg: #{$light--bg--dark};
--light-hover-bg: #{$light--bg--hover--dark};
--light-bg-hover: #{$light--bg--hover--dark};
--light-text: #{$light--text--dark};
--light-text-bg: #{$light--text--bg--dark};
--light-hover-text: #{$light--text--hover--dark};
--light-raid-text: #{$light--text--raid--dark};
--light-text-hover: #{$light--text--hover--dark};
// Gradients
--hero-gradient: #{$hero--gradient--dark};

90
styles/variables.scss
View file

@ -112,25 +112,25 @@ $selected--item--bg--light--hover: #ecbc4c6f;
// Colors -- Elements
$wind-text-00: #023e28;
$wind-text-10: #00492f;
$wind-text-20: #008758;
$wind-text-20: #006a45;
$wind-text-30: #1dc688;
$wind-bg-00: #4cffbf55;
$wind-bg-00: #30c372;
$wind-bg-10: #3ee489;
$wind-bg-20: #cdffed;
$fire-text-00: #3f0202;
$fire-text-10: #3e0000;
$fire-text-20: #880000;
$fire-text-20: #700101;
$fire-text-30: #ec5c5c;
$fire-bg-00: #ff4d4d55;
$fire-bg-10: #ff7f7f;
$fire-bg-00: #e05555;
$fire-bg-10: #fa6d6d;
$fire-bg-20: #ffcdcd;
$water-text-00: #03263b;
$water-text-10: #004b77;
$water-text-20: #00639c;
$water-text-30: #5cb7ec;
$water-bg-00: #6cc9ff55;
$water-bg-00: #4aabe3;
$water-bg-10: #6cc9ff;
$water-bg-20: #cdedff;
@ -138,23 +138,23 @@ $earth-text-00: #321602;
$earth-text-10: #662a00;
$earth-text-20: #913d01;
$earth-text-30: #ec985c;
$earth-bg-00: #fd9f5b55;
$earth-bg-00: #df8849;
$earth-bg-10: #fd9f5b;
$earth-bg-20: #ffe2cd;
$light-text-00: #433d02;
$light-text-10: #564d00;
$light-text-20: #817400;
$light-text-00: #3d3700;
$light-text-10: #4b4300;
$light-text-20: #706500;
$light-text-30: #c5b20c;
$light-bg-00: #ffed4c55;
$light-bg-00: #cab91c;
$light-bg-10: #e8d633;
$light-bg-20: #fffacd;
$dark-text-00: #260134;
$dark-text-10: #4c0068;
$dark-text-20: #6c0093;
$dark-text-00: #23002f;
$dark-text-10: #3e0054;
$dark-text-20: #5b017b;
$dark-text-30: #c65cec;
$dark-bg-00: #d565fb55;
$dark-bg-00: #ba63d8;
$dark-bg-10: #de7bff;
$dark-bg-20: #f2cdff;
@ -371,96 +371,96 @@ $tag--text--dark: $grey-50;
$wind--bg--light: $wind-bg-10;
$wind--bg--dark: $wind-bg-10;
$wind--bg--hover--light: $wind-bg-20;
$wind--bg--hover--light: $wind-bg-00;
$wind--bg--hover--dark: $wind-bg-00;
$wind--text--light: $wind-text-20;
$wind--text--dark: $wind-bg-10;
$wind--text--dark: $wind-text-20;
$wind--text--bg--light: $wind-text-10;
$wind--text--bg--dark: $wind-text-10;
$wind--text--raid--light: $wind-text-20;
$wind--text--raid--dark: $wind-bg-10;
$wind--text--hover--light: $wind-text-10;
$wind--text--hover--light: $wind-text-00;
$wind--text--hover--dark: $wind-text-00;
// Color Definitions: Element / Fire
$fire--bg--light: $fire-bg-10;
$fire--bg--dark: $fire-bg-10;
$fire--bg--hover--light: $fire-bg-20;
$fire--bg--hover--light: $fire-bg-00;
$fire--bg--hover--dark: $fire-bg-00;
$fire--text--light: $fire-text-20;
$fire--text--dark: $fire-bg-10;
$fire--text--dark: $fire-text-10;
$fire--text--bg--light: $fire-text-10;
$fire--text--bg--dark: $fire-text-10;
$fire--text--raid--light: $fire-text-20;
$fire--text--raid--dark: $fire-bg-10;
$fire--text--hover--light: $fire-text-10;
$fire--text--hover--light: $fire-text-00;
$fire--text--hover--dark: $fire-text-00;
// Color Definitions: Element / Water
$water--bg--light: $water-bg-10;
$water--bg--dark: $water-bg-10;
$water--bg--hover--light: $water-bg-20;
$water--bg--hover--light: $water-bg-00;
$water--bg--hover--dark: $water-bg-00;
$water--text--light: $water-text-20;
$water--text--dark: $water-bg-10;
$water--text--dark: $water-text-10;
$water--text--bg--light: $water-text-10;
$water--text--bg--dark: $water-text-10;
$water--text--raid--light: $water-text-20;
$water--text--raid--dark: $water-bg-10;
$water--text--hover--light: $water-text-10;
$water--text--hover--light: $water-text-00;
$water--text--hover--dark: $water-text-00;
// Color Definitions: Element / Earth
$earth--bg--light: $earth-bg-10;
$earth--bg--dark: $earth-bg-10;
$earth--bg--hover--light: $earth-bg-20;
$earth--bg--hover--light: $earth-bg-00;
$earth--bg--hover--dark: $earth-bg-00;
$earth--text--light: $earth-text-20;
$earth--text--dark: $earth-bg-10;
$earth--text--dark: $earth-text-10;
$earth--text--bg--light: $earth-text-10;
$earth--text--bg--dark: $earth-text-10;
$earth--text--raid--light: $earth-text-20;
$earth--text--raid--dark: $earth-bg-10;
$earth--text--hover--light: $earth-text-10;
$earth--text--hover--light: $earth-text-00;
$earth--text--hover--dark: $earth-text-00;
// Color Definitions: Element / Dark
$dark--bg--light: $dark-bg-10;
$dark--bg--dark: $dark-bg-10;
$dark--bg--hover--light: $dark-bg-20;
$dark--bg--hover--light: $dark-bg-00;
$dark--bg--hover--dark: $dark-bg-00;
$dark--text--light: $dark-text-20;
$dark--text--dark: $dark-bg-10;
$dark--text--dark: $dark-text-10;
$dark--text--bg--light: $dark-text-10;
$dark--text--bg--dark: $dark-text-10;
$dark--text--raid--light: $dark-text-20;
$dark--text--raid--dark: $dark-bg-10;
$dark--text--hover--light: $dark-text-10;
$dark--text--hover--light: $dark-text-00;
$dark--text--hover--dark: $dark-text-00;
// Color Definitions: Element / Light
$light--bg--light: $light-bg-10;
$light--bg--dark: $light-bg-10;
$light--bg--hover--light: $light-bg-20;
$light--bg--hover--light: $light-bg-00;
$light--bg--hover--dark: $light-bg-00;
$light--text--light: $light-text-20;
$light--text--dark: $light-bg-10;
$light--text--dark: $light-text-10;
$light--text--bg--light: $light-text-10;
$light--text--bg--dark: $light-text-10;
$light--text--raid--light: $light-text-20;
$light--text--raid--dark: $light-bg-10;
$light--text--hover--light: $light-text-10;
$light--text--hover--light: $light-text-00;
$light--text--hover--dark: $light-text-00;
// Font-weight