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

Tweaked CSS variables

Browse source 
Added some new variables for elevation, rounder corners, and tweaked some other things
This commit is contained in:
Justin Edmund 2025-09-17 22:04:26 -07:00
parent be09e67d42
commit 7fb9ef2d9a
3 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/themes/_colors.scss
View file

@ -202,10 +202,10 @@ $notice--button--text--light--hover: $accent--yellow--00;
$notice--button--text--dark--hover: $accent--yellow--100; $notice--button--text--dark--hover: $accent--yellow--100;
// Color Definitions: Button // Color Definitions: Button
$button--bg--light: $grey-80; $button--bg--light: $grey-85;
$button--bg--light--hover: $grey-100; $button--bg--light--hover: $grey-80;
$button--bg--light--disabled: $grey-80; $button--bg--light--disabled: $grey-70;
$button--contained--bg--light: $grey-85; $button--contained--bg--light: $grey-90;
$button--contained--bg--light--hover: $grey-80; $button--contained--bg--light--hover: $grey-80;
$button--bg--dark: $grey-00; $button--bg--dark: $grey-00;
@ -214,9 +214,9 @@ $button--bg--dark--disabled: $grey-30;
$button--contained--bg--dark: $grey-15; $button--contained--bg--dark: $grey-15;
$button--contained--bg--dark--hover: $grey-05; $button--contained--bg--dark--hover: $grey-05;
$button--text--light: $grey-55; $button--text--light: $grey-40;
$button--text--light--hover: $grey-40; $button--text--light--hover: $grey-30;
$button--text--light--disabled: $grey-70; $button--text--light--disabled: $grey-50;
$button--text--dark: $grey-70; $button--text--dark: $grey-70;
$button--text--dark--hover: $grey-100; $button--text--dark--hover: $grey-100;
$button--text--dark--disabled: $grey-50; $button--text--dark--disabled: $grey-50;
@ -227,8 +227,8 @@ $input--bg--light--hover: $grey-95;
$input--bg--dark: $grey-40; $input--bg--dark: $grey-40;
$input--bg--dark--hover: $grey-30; $input--bg--dark--hover: $grey-30;
$input--bound--bg--light: $grey-85; $input--bound--bg--light: $grey-90;
$input--bound--bg--light--hover: $grey-80; $input--bound--bg--light--hover: $grey-85;
$input--bound--bg--dark: $grey-15; $input--bound--bg--dark: $grey-15;
$input--bound--bg--dark--hover: $grey-10; $input--bound--bg--dark--hover: $grey-10;

10
src/themes/_effects.scss
View file

@ -1,5 +1,15 @@
@use 'sass:list'; @use 'sass:list';
// Borders
$page-border: 0.5px solid rgba(0, 0, 0, 0.18);
$dialog-border: 0.5px solid rgba(0, 0, 0, 0.18);
$card-border: 0.5px solid rgba(0, 0, 0, 0.18);
// Elevation
$page-elevation: 0 0 4px rgba(0, 0, 0, 0.06);
$dialog-elevation: 0 1px 8px rgba(0, 0, 0, 0.16);
$card-elevation: 0 1px 3px rgba(0, 0, 0, 0.1);
// Shadows // Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1); $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px; $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;

1
src/themes/_layout.scss
View file

@ -6,6 +6,7 @@ $scale-tall: scale(1.012, 1.012);
// Border radius // Border radius
$full-corner: 500px; $full-corner: 500px;
$page-corner: spacing.$unit-2x;
$card-corner: spacing.$unit * 1.5; $card-corner: spacing.$unit * 1.5;
$input-corner: spacing.$unit; $input-corner: spacing.$unit;
$item-corner: spacing.$unit; $item-corner: spacing.$unit;