Sutty/panel
5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-11-25 04:16:21 +00:00
Code Issues Projects Releases Wiki Activity

fix: colores en modo oscuro (media query y dark.scss) usando variables #16489

Browse source
This commit is contained in:
maki 2024-06-14 14:26:06 -03:00
parent fe33dd8caa
commit 089602a7a9
2 changed files with 18 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/stylesheets/application.scss
View file

@ -20,6 +20,13 @@ $form-feedback-valid-color: $black;
$form-feedback-invalid-color: $magenta; $form-feedback-invalid-color: $magenta;
$form-feedback-icon-valid-color: $black; $form-feedback-icon-valid-color: $black;
$component-active-bg: $magenta; $component-active-bg: $magenta;
$modal-content-bg: var(--background);
$card-bg: var(--background);
$card-border-color: var(--card-border-color);
$input-bg: var(--background);
$input-color: var(--foreground);
$btn-bg-color: var(--btn-bg-color);
$btn-color: var(--btn-color);
$spacers: ( $spacers: (
2-plus: 0.75rem 2-plus: 0.75rem
@ -44,6 +51,9 @@ $sizes: (
--foreground: #{$black}; --foreground: #{$black};
--background: #{$white}; --background: #{$white};
--color: #{$magenta}; --color: #{$magenta};
--card-border-color: #{rgba($black, .125)};
--btn-bg-color: #{$black};
--btn-color: #{$white};
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -51,40 +61,16 @@ $sizes: (
--foreground: #{$white}; --foreground: #{$white};
--background: #{$black}; --background: #{$black};
--color: #{$cyan}; --color: #{$cyan};
--card-border-color: #{rgba($white, .250)};
--btn-bg-color: #{$white};
--btn-color: #{$black};
} }
.btn {
background-color: $white;
}
.btn-secondary { .btn-secondary {
background-color: $white;
color: $black;
border: none; border: none;
&:hover {
color: $black;
background-color: $cyan;
} }
&:active {
background-color: $cyan;
}
&:focus {
box-shadow: 0 0 0 0.2rem $cyan;
}
}
.card {
p, a, span {
color: $black;
}
a:hover {
color: $black;
}
}
} }
// TODO: Encontrar la forma de generar esto desde los locales de Rails // TODO: Encontrar la forma de generar esto desde los locales de Rails
@ -239,6 +225,8 @@ svg {
.btn { .btn {
margin-right: 0.3rem; margin-right: 0.3rem;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
background-color: $btn-bg-color;
color: $btn-color;
&:hover { &:hover {
color: var(--background); color: var(--background);

32
app/assets/stylesheets/dark.scss
View file

@ -6,39 +6,13 @@ $cyan: #13fefe;
--foreground: #{$white}; --foreground: #{$white};
--background: #{$black}; --background: #{$black};
--color: #{$cyan}; --color: #{$cyan};
} --card-border-color: #{rgba($white, .250)};
--btn-bg-color: #{$white};
.btn { --btn-color: #{$black};
background-color: $white;
} }
.btn-secondary { .btn-secondary {
background-color: $white;
color: $black;
border: none; border: none;
&:hover {
color: $black;
background-color: $cyan;
}
&:active {
background-color: $cyan;
}
&:focus {
box-shadow: 0 0 0 0.2rem $cyan;
}
}
.card {
p, a, span {
color: $black;
}
a:hover {
color: $black;
}
} }