dozzle/assets/styles.scss

@charset "utf-8";
@import "bulma/sass/utilities/initial-variables.sass";

$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;

$dark-toolbar-color: rgba($black-bis, 0.7);
$light-toolbar-color: rgba($grey-darker, 0.7);

@import "bulma/bulma.sass";
@import "@oruga-ui/theme-bulma/dist/scss/components/utils/all.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/autocomplete.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/button.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/modal.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/switch.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/tooltip.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/dropdown.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss";
@import "splitpanes/dist/splitpanes.css";

html,
[data-theme="dark"] {
  --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};
  --action-toolbar-background-color: #{$dark-toolbar-color};

  --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};
}

@media (prefers-color-scheme: dark) {
  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};
  --action-toolbar-background-color: #{$dark-toolbar-color};

  --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};
  }
}

@media (prefers-color-scheme: light) {
  html {
  --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};
  --action-toolbar-background-color: #{$light-toolbar-color};
  --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};
  }
}

[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};
  --action-toolbar-background-color: #{$light-toolbar-color};
  --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;
  }
}

@media screen and (min-width: 770px) {
  .splitpanes__pane {
    overflow: unset;
  }
}

.splitpanes__splitter {
  z-index: 99;
}

.is-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.modal {
  z-index: 1000;
}

.button .button-wrapper > span {
  display: contents;
}