Sutty/panel
5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-11-21 22:26:22 +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-icon-valid-color: $black;
$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: (
2-plus: 0.75rem
@ -44,6 +51,9 @@ $sizes: (
--foreground: #{$black};
--background: #{$white};
--color: #{$magenta};
--card-border-color: #{rgba($black, .125)};
--btn-bg-color: #{$black};
--btn-color: #{$white};
}
@media (prefers-color-scheme: dark) {
@ -51,40 +61,16 @@ $sizes: (
--foreground: #{$white};
--background: #{$black};
--color: #{$cyan};
--card-border-color: #{rgba($white, .250)};
--btn-bg-color: #{$white};
--btn-color: #{$black};
}
.btn {
background-color: $white;
}
.btn-secondary {
background-color: $white;
color: $black;
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
@ -239,6 +225,8 @@ svg {
.btn {
margin-right: 0.3rem;
margin-bottom: 0.3rem;
background-color: $btn-bg-color;
color: $btn-color;
&:hover {
color: var(--background);

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

@ -6,39 +6,13 @@ $cyan: #13fefe;
--foreground: #{$white};
--background: #{$black};
--color: #{$cyan};
}
.btn {
background-color: $white;
--card-border-color: #{rgba($white, .250)};
--btn-bg-color: #{$white};
--btn-color: #{$black};
}
.btn-secondary {
background-color: $white;
color: $black;
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;
}
}