YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Try to improve dark-mode colors for alert boxes, outline buttons

Browse source
This commit is contained in:
Alexandre Aubin 2022-10-08 20:31:15 +02:00 • committed by axolotle
parent 90231ef84d
commit 72a941e648
2 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/src/scss/_variables.scss
View file

@ -34,7 +34,7 @@ $font-weight-bold: 500;
--background-color: #ffffff; --background-color: #ffffff;
--background-color-secondary: #fafbfc; --background-color-secondary: #fafbfc;
--border-color: #c5d9e8; --border-color: #c5d9e8;
--font-color: #2c405a; --font-color: #333;
--font-color-secondary: #3f536e; --font-color-secondary: #3f536e;
--black: #2c405a; --black: #2c405a;
@ -59,7 +59,7 @@ $font-weight-bold: 500;
[dark-theme="true"] { [dark-theme="true"] {
/* Variables for dark mode */ /* Variables for dark mode */
--background-color: #222c3c; --background-color: #202025;
--background-color-secondary: #273142; --background-color-secondary: #273142;
--border-color: #313d4f; --border-color: #313d4f;
--font-color: #ffffff; --font-color: #ffffff;
@ -85,6 +85,43 @@ $font-weight-bold: 500;
--warning: #ffc02a; --warning: #ffc02a;
} }
//
// FIXME : these five blocks are probably not well-written and are not just "variable declarations" ;/
// probably to be refactored ...
//
[dark-theme="true"] .alert-success {
color: #4dd0af;
background-color: #005e46;
border: var(--border-color);
}
[dark-theme="true"] .alert-info {
color: #5dbecd;
background-color: #0c515c;
border: var(--border-color);
}
[dark-theme="true"] .alert-warning {
color: #f7ba59;
background-color: #7a4e09;
border: var(--border-color);
}
[dark-theme="true"] .alert-danger {
color: #ee8277;
background-color: #74261e;
border: var(--border-color);
}
[dark-theme="true"] .btn-outline-dark {
color: var(--font-color-secondary);
border-color: var(--border-color);
}
//
// END FIXME
//
$purple: #9932cc; $purple: #9932cc;
$theme-colors: ( $theme-colors: (
@ -133,6 +170,8 @@ $background-color-primary: var(--background-color);
$background-color-secondary: var(--background-color-secondary); $background-color-secondary: var(--background-color-secondary);
$card-border-color: var(--border-color);
// ╭──────────────────────────────────────╮ // ╭──────────────────────────────────────╮
// │ ┌─╴╭─╮┌─╮╷ ╭ ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │ // │ ┌─╴╭─╮┌─╮╷ ╭ ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
// │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │ // │ ├─╴│ │├┬╯├┴╮╶─╴├─┤│││├─╴╰─╮│ ││││├─╴ │

8
app/src/scss/main.scss
View file

@ -43,11 +43,19 @@ body {
color: $list-group-action-color; color: $list-group-action-color;
} }
.list-group-item {
border-color: var(--border-color);
}
.list-group-item:hover { .list-group-item:hover {
background-color: $background-color-secondary; background-color: $background-color-secondary;
color: var(--font-color-secondary); color: var(--font-color-secondary);
} }
.text-secondary {
color: var(--font-color-secondary) !important;
}
.form-control { .form-control {
background-color: $background-color-secondary; background-color: $background-color-secondary;
} }