mirror of
https://github.com/filegator/filegator.git
synced 2025-08-21 01:51:31 +02:00
137 lines
2.7 KiB
SCSS
137 lines
2.7 KiB
SCSS
@media (prefers-color-scheme: dark) {
|
|
|
|
:root {
|
|
/* Dark theme primary colors */
|
|
--color-primary-a0: #34b891;
|
|
--color-primary-a20: #6ec8a8;
|
|
--color-primary-transparent: #34b89123;
|
|
|
|
/* Dark theme surface colors */
|
|
--color-surface-a0: #121212;
|
|
--color-surface-a10: #282828;
|
|
--color-surface-a20: #3f3f3f;
|
|
--color-surface-a30: #575757;
|
|
--color-surface-a50: #8b8b8b;
|
|
|
|
--color-text: #fff;
|
|
}
|
|
|
|
html, body, .navbar {
|
|
background-color: var(--color-surface-a0);
|
|
}
|
|
|
|
.navbar-item,
|
|
.label,
|
|
.table,
|
|
.table thead th,
|
|
.modal-card-title,
|
|
.modal-card-body,
|
|
.button:focus,
|
|
.dropdown-item,
|
|
.checkbox:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.box, .table, .modal-card-head, .modal-card-foot {
|
|
background-color: var(--color-surface-a10);
|
|
}
|
|
|
|
.table.is-hoverable tbody tr:not(.is-selected):hover {
|
|
background-color: var(--color-primary-transparent);;
|
|
}
|
|
|
|
.file-row a, .node-tree > a, strong {
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
a.navbar-item:hover {
|
|
background-color: var(--color-primary-transparent);;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.input {
|
|
background-color: var(--color-surface-a20);
|
|
color: var(--color-text);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.input:hover {
|
|
border-color: var(--color-primary-a20);
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: var(--color-surface-a50);
|
|
}
|
|
|
|
.table td, .table th {
|
|
border-bottom: 1px solid var(--color-surface-a0);
|
|
}
|
|
|
|
.is-current-sort {
|
|
border-bottom: 1px solid var(--color-primary-a0) !important;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-card-body {
|
|
background-color: var(--color-surface-a20);
|
|
}
|
|
|
|
.modal-card-head {
|
|
border-bottom: 1px solid var(--color-surface-a0);
|
|
}
|
|
|
|
.modal-card-foot {
|
|
border-top: 1px solid var(--color-surface-a0);
|
|
}
|
|
|
|
.modal input {
|
|
background-color: var(--color-surface-a30);
|
|
}
|
|
|
|
/* Button */
|
|
.button {
|
|
background-color: var(--color-primary-transparent);
|
|
border-color: var(--color-primary-a0);
|
|
color: var(--color-text)
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: var(--color-primary-a0);
|
|
border-color: var(--color-primary-a0);
|
|
color: var(--color-text)
|
|
}
|
|
|
|
.button:active {
|
|
color: var(--color-primary-a0) !important;
|
|
}
|
|
|
|
/* Dropdown */
|
|
.dropdown-content {
|
|
background-color: var(--color-surface-a20);
|
|
}
|
|
|
|
a.dropdown-item:hover {
|
|
background-color: var(--color-primary-transparent);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
a:hover,
|
|
.breadcrumb a:hover {
|
|
color: var(--color-primary-a20);
|
|
}
|
|
|
|
#bottom-info {
|
|
color: var(--color-surface-a50);
|
|
}
|
|
|
|
.select select {
|
|
background-color: var(--color-surface-a20);
|
|
border-color: var(--color-surface-a20);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.select select:hover, .select:not(.is-multiple):not(.is-loading):hover::after {
|
|
border-color: var(--color-primary-a0);
|
|
}
|
|
}
|