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

Fix styles

Browse source
This commit is contained in:
Justin Edmund 2023-07-06 03:33:07 -07:00
parent 5b42ca862e
commit a70c09b373
3 changed files with 53 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
components/common/Editor/index.module.scss
View file

@ -74,21 +74,21 @@
h1 {
font-size: $font-xlarge;
font-weight: $medium;
margin: $unit 0;
margin: $unit-2x 0;
text-align: left;
}
h2 {
font-size: $font-large;
font-weight: $medium;
margin: $unit 0;
margin: $unit-2x 0;
text-align: left;
}
h3 {
font-size: $font-regular;
font-weight: $medium;
margin: $unit 0;
margin: $unit-2x 0;
text-align: left;
}
@ -96,6 +96,7 @@
border-radius: $item-corner-small;
background: var(--highlight-bg);
color: var(--highlight-text);
font-weight: $normal;
padding: 1px $unit-fourth;
}
@ -116,15 +117,18 @@
.mention {
border-radius: $item-corner-small;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px rgba(0, 0, 0, 0.25);
background: var(--card-bg);
0 1px 0px var(--null-shadow);
background: var(--null-bg);
color: var(--text-primary);
font-weight: $medium;
font-size: 15px;
padding: 1px $unit-half;
transition: all 0.1s ease-out;
&:hover {
background: var(--card-bg-hover);
background: var(--null-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--null-shadow-hover);
text-decoration: none;
cursor: pointer;
}
@ -136,6 +140,7 @@
color: var(--fire-text);
&:hover {
background: var(--fire-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--fire-shadow-hover);
color: var(--fire-text-hover);
@ -149,6 +154,7 @@
color: var(--water-text);
&:hover {
background: var(--water-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--water-shadow-hover);
color: var(--water-text-hover);
@ -162,6 +168,7 @@
color: var(--earth-text);
&:hover {
background: var(--earth-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--earth-shadow-hover);
color: var(--earth-text-hover);
@ -188,6 +195,7 @@
color: var(--dark-text);
&:hover {
background: var(--dark-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--dark-shadow-hover);
color: var(--dark-text-hover);
@ -201,6 +209,7 @@
color: var(--light-text);
&:hover {
background: var(--light-bg-hover);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0px var(--light-shadow-hover);
color: var(--light-text-hover);

16
styles/themes.scss
View file

@ -159,6 +159,14 @@
--grid-border-color: #{$grid--border--color--light};
// Light - Element theming
--null-bg: #{$null--bg--light};
--null-bg-hover: #{$null--bg--hover--light};
--null-text: #{$null--text--light};
--null-raid-text: #{$null--text--raid--light};
--null-text-hover: #{$null--text--hover--light};
--null-shadow: #{$null--shadow--light};
--null-shadow-hover: #{$null--shadow--light--hover};
--wind-bg: #{$wind--bg--light};
--wind-bg-hover: #{$wind--bg--hover--light};
--wind-text: #{$wind--text--light};
@ -373,6 +381,14 @@
--grid-border-color: #{$grid--border--color--dark};
// Dark - Element theming
--null-bg: #{$null--bg--dark};
--null-bg-hover: #{$null--bg--hover--dark};
--null-text: #{$null--text--dark};
--null-raid-text: #{$null--text--raid--dark};
--null-text-hover: #{$null--text--hover--dark};
--null-shadow: #{$null--shadow--dark};
--null-shadow-hover: #{$null--shadow--dark--hover};
--wind-bg: #{$wind--bg--dark};
--wind-bg-hover: #{$wind--bg--hover--dark};
--wind-text: #{$wind--text--dark};

22
styles/variables.scss
View file

@ -464,6 +464,28 @@ $wind--shadow--dark: fade-out($wind-text-20, 0.3);
$wind--shadow--light--hover: fade-out($wind-text-00, 0.3);
$wind--shadow--dark--hover: fade-out($wind-text-00, 0.3);
// Color Definitions: Element / Null
$null--bg--light: $grey-75;
$null--bg--dark: $grey-40;
$null--bg--hover--light: $grey-70;
$null--bg--hover--dark: $grey-30;
$null--text--light: $grey-40;
$null--text--dark: $grey-90;
$null--text--raid--light: $grey-40;
$null--text--raid--dark: $grey-90;
$null--text--hover--light: $grey-20;
$null--text--hover--dark: $grey-90;
$null--shadow--light: fade-out($grey-60, 0.3);
$null--shadow--dark: fade-out($grey-25, 0.3);
$null--shadow--light--hover: fade-out($grey-50, 0.3);
$null--shadow--dark--hover: fade-out($grey-10, 0.3);
// Color Definitions: Element / Fire
$fire--bg--light: $fire-bg-10;
$fire--bg--dark: $fire-bg-10;