mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-24 22:39:18 +01:00
138 lines
3.4 KiB
SCSS
138 lines
3.4 KiB
SCSS
@charset "utf-8";
|
|
@import "~bulma/sass/utilities/initial-variables.sass";
|
|
|
|
$body-family: "Roboto", sans-serif;
|
|
$body-background-color: var(--body-background-color);
|
|
|
|
$scheme-main: var(--scheme-main);
|
|
$scheme-main-bis: var(--scheme-main-bis);
|
|
$scheme-main-ter: var(--scheme-main-ter);
|
|
|
|
$border: var(--border-color);
|
|
$border-hover: var(--border-hover-color);
|
|
|
|
$menu-item-active-background-color: var(--menu-item-active-background-color);
|
|
$menu-item-color: var(--menu-item-color);
|
|
$menu-item-hover-background-color: var(--menu-item-hover-background-color);
|
|
$menu-item-hover-color: var(--menu-item-hover-color);
|
|
|
|
$text-strong: var(--text-strong-color);
|
|
$text: var(--text-color);
|
|
|
|
$panel-heading-background-color: var(--panel-heading-background-color);
|
|
$panel-heading-color: var(--panel-heading-color);
|
|
|
|
$link: $turquoise;
|
|
$link-active: $grey-dark;
|
|
|
|
@import "~bulma";
|
|
@import "../node_modules/splitpanes/dist/splitpanes.css";
|
|
@import "~buefy/src/scss/utils/_all";
|
|
@import "~buefy/src/scss/components/_dropdown";
|
|
@import "~buefy/src/scss/components/_switch";
|
|
|
|
html {
|
|
--scheme-main: #{$black};
|
|
--scheme-main-bis: #{$black-bis};
|
|
--scheme-main-ter: #{$black-ter};
|
|
|
|
--border-color: #{$grey-darker};
|
|
--border-hover-color: var(--secondary-color);
|
|
--logo-color: var(--secondary-color);
|
|
|
|
--primary-color: #{$turquoise};
|
|
--secondary-color: #{$yellow};
|
|
|
|
--body-background-color: #{$black-bis};
|
|
|
|
--menu-item-active-background-color: var(--primary-color);
|
|
--menu-item-color: hsl(0, 6%, 87%);
|
|
--menu-item-hover-background-color: #{$white-ter};
|
|
--menu-item-hover-color: #{$black-ter};
|
|
|
|
--panel-heading-background-color: var(--secondary-color);
|
|
--panel-heading-color: var(--scheme-main-bis);
|
|
|
|
--text-strong-color: #{$grey-lightest};
|
|
--text-color: #{$grey-lighter};
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--scheme-main: #{$white};
|
|
--scheme-main-bis: #{$white-bis};
|
|
--scheme-main-ter: #{$white-ter};
|
|
|
|
--border-color: #{$grey-lighter};
|
|
--border-hover-color: var(--secondary-color);
|
|
--logo-color: #{$grey-darker};
|
|
|
|
--primary-color: #{$turquoise};
|
|
--secondary-color: #d8f0ca;
|
|
|
|
--body-background-color: #{$white-bis};
|
|
--body-color: #{$grey-darker};
|
|
|
|
--menu-item-color: #{$grey-dark};
|
|
--menu-item-hover-background-color: #eee8e7;
|
|
--menu-item-hover-color: #{black-ter};
|
|
|
|
--panel-heading-background-color: var(--secondary-color);
|
|
--panel-heading-color: var(--text-strong-color);
|
|
|
|
--text-strong-color: #{$grey-dark};
|
|
--text-color: #{$grey-darker};
|
|
}
|
|
|
|
html {
|
|
overflow-x: unset;
|
|
overflow-y: unset;
|
|
scroll-snap-type: y proximity;
|
|
}
|
|
|
|
html.has-custom-scrollbars {
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
display: content;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(128, 128, 128, 0.33);
|
|
outline: 1px solid slategrey;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:active {
|
|
background-color: #777;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-track:hover {
|
|
background-color: rgba(64, 64, 64, 0.33);
|
|
}
|
|
|
|
section main {
|
|
scrollbar-color: #353535 transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
}
|
|
|
|
.is-settings-control {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
color: #fff;
|
|
border-color: transparent;
|
|
&:hover {
|
|
border-color: var(--border-hover-color) !important;
|
|
background: rgba(0, 0, 0, 0.8) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: none !important;
|
|
color: unset;
|
|
border-color: transparent;
|
|
}
|
|
}
|