223 lines
6.4 KiB
SCSS
223 lines
6.4 KiB
SCSS
$background-color: rgb(43, 58, 66);
|
|
$button-hover-color: rgb(33, 48, 56);
|
|
$light-background-color: rgb(51, 71, 82);
|
|
$input-background-color: rgb(189, 211, 222);
|
|
$loading-background-color: rgba(43, 58, 66, 0.9);
|
|
$text-color: rgb(223, 235, 240);
|
|
$discrete-text-color: rgba(223, 235, 240, 0.904);
|
|
$border-color: rgb(63, 88, 102);
|
|
$light-shadow-color: rgba(223, 235, 240, 0.15);
|
|
$shadow-color: rgba(63, 102, 97, 0.95);
|
|
$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95), 0px 0px 0px 1px rgba(63, 88, 102, 0.98);
|
|
$link-color: rgb(255, 144, 0);
|
|
|
|
.theme-dark {
|
|
background-color: $background-color;
|
|
.ui.labeled.input {
|
|
input, .label {
|
|
background-color: $input-background-color;
|
|
&::placeholder {
|
|
color: $light-background-color;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
.ui.statistics .statistic {
|
|
> .label, > .value {
|
|
color: $text-color;
|
|
}
|
|
}
|
|
.ui.link.list.list .active.item, .ui.link.list.list .active.item a:not(.ui) {
|
|
color: inherit;
|
|
}
|
|
.ui.form textarea, .ui.form select, .ui.selection.dropdown, .ui.dropdown.selected, .ui.dropdown .menu .selected.item, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] {
|
|
background-color: $input-background-color;
|
|
&::placeholder {
|
|
color: $light-background-color;
|
|
|
|
}
|
|
}
|
|
.ui.dropdown .menu .item:hover {
|
|
background-color: $light-background-color;
|
|
color: $text-color;
|
|
|
|
}
|
|
.main.pusher > .ui.secondary.menu {
|
|
background-color: $background-color;
|
|
box-shadow: inset 0px -2px 0px 0px $light-background-color;
|
|
.ui.item {
|
|
color: $text-color;
|
|
&.active {
|
|
box-shadow: inset 0px -2px 0px 0px $shadow-color;
|
|
}
|
|
}
|
|
}
|
|
.ui.modal {
|
|
> .header, > .content, > .actions {
|
|
background-color: $background-color;
|
|
}
|
|
> .header {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
|
|
> .actions {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
}
|
|
main, .main, footer, .modal {
|
|
|
|
.ui.menu {
|
|
background-color: $light-background-color;
|
|
.item {
|
|
|
|
color: $text-color;
|
|
}
|
|
}
|
|
.ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover {
|
|
background: $background-color;
|
|
color: $text-color;
|
|
}
|
|
.header, .ui.form .field > label, .sub.header {
|
|
color: $text-color;
|
|
}
|
|
.ui.attached.header {
|
|
background-color: transparent;
|
|
}
|
|
.ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label {
|
|
color: $text-color !important;
|
|
}
|
|
.ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
|
|
background-color: $light-background-color;
|
|
}
|
|
a:not(.ui):not(.discrete) {
|
|
color: $link-color;
|
|
}
|
|
.ui.segment:not(.basic) {
|
|
background-color: $light-background-color;
|
|
}
|
|
.ui.list, .ui.dropdown {
|
|
.item, div.item, a.item, .button.item {
|
|
background-color: $background-color;
|
|
color: $discrete-text-color;
|
|
}
|
|
.selected.item:not(:hover) {
|
|
color: $background-color;
|
|
}
|
|
}
|
|
.ui.divided.items > .item:not(:first-child) {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
.ui.items {
|
|
.extra {
|
|
color: $discrete-text-color;
|
|
}
|
|
}
|
|
label, .toggle label {
|
|
color: $text-color !important;
|
|
}
|
|
&, .main.pusher, .ui.vertical.segment {
|
|
color: $text-color;
|
|
background-color: $background-color;
|
|
}
|
|
|
|
.discrete {
|
|
color: $discrete-text-color;
|
|
}
|
|
|
|
.ui.table thead th, .ui.table {
|
|
color: $text-color;
|
|
}
|
|
.ui.divider:not(.vertical):not(.horizontal) {
|
|
border-top: 1px solid $border-color;
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
.ui.cards > .card, .ui.card {
|
|
color: $text-color;
|
|
background-color: $background-color;
|
|
box-shadow: $box-shadow;
|
|
.content, .header, .description {
|
|
color: $text-color;
|
|
}
|
|
.extra, .meta {
|
|
color: $discrete-text-color;
|
|
}
|
|
}
|
|
.playlist.card {
|
|
.attached.button {
|
|
background-color: $light-background-color;
|
|
}
|
|
}
|
|
|
|
// buttons
|
|
[class='ui button ui button'], [class='ui button'], [class='ui icon button'], [class='ui fluid button'], [class='ui cancel button'] {
|
|
background-color: $light-background-color;
|
|
color: $text-color;
|
|
&:hover {
|
|
background-color: $button-hover-color;
|
|
|
|
}
|
|
}
|
|
.ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button {
|
|
box-shadow: 0px 0px 0px 1px $light-shadow-color inset;
|
|
|
|
}
|
|
.ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) .button, .ui.basic.button {
|
|
box-shadow: 0px 0px 0px 1px $text-color inset;
|
|
&:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) {
|
|
color: $text-color !important;
|
|
}
|
|
}
|
|
.ui.basic.buttons .button, .ui.basic.button {
|
|
&:hover {
|
|
color: $text-color !important;
|
|
}
|
|
|
|
}
|
|
.ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red) .button:hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
|
|
color: $background-color !important;
|
|
}
|
|
// loading /dimmers
|
|
.ui.loading.form::before {
|
|
background-color: $loading-background-color;
|
|
}
|
|
.ui.inverted.dimmer {
|
|
background-color: $loading-background-color;
|
|
}
|
|
// table
|
|
.ui.basic.table tbody tr, .ui.table tr td {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
.ui.table thead th {
|
|
border-bottom: 1px solid $border-color;
|
|
}
|
|
.ui.table {
|
|
&:not(.basic) {
|
|
&, thead th {
|
|
background-color: $light-background-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ui.link.list.list a.item:hover, .ui.link.list.list .item a:not(.ui):not(.button):hover {
|
|
color: $link-color;
|
|
}
|
|
[data-tooltip]::after {
|
|
background-color: $light-background-color;
|
|
color: $text-color;
|
|
}
|
|
.ui.progress > .label {
|
|
color: $text-color;
|
|
|
|
}
|
|
i.grey.icon {
|
|
color: $text-color !important;
|
|
}
|
|
input {
|
|
&::selection, &::-moz-selection {
|
|
background: $background-color;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|