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);
$text-light: var(--text-light-color);

$panel-heading-background-color: var(--panel-heading-background-color);
$panel-heading-color: var(--panel-heading-color);

$link: $turquoise;
$link-active: $grey-dark;
$link-hover: $yellow;

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

@import "bulma/bulma";
@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/dropdown.scss";
@import "@oruga-ui/theme-bulma/dist/scss/components/skeleton.scss";
@import "splitpanes/dist/splitpanes.css";

@mixin 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};
  --body-color: #{$grey-lighter};

  --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};
  --text-light-color: #{$grey};
}

@mixin 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: var(--secondary-color);

  --primary-color: #{$turquoise};
  --secondary-color: rgb(249 115 22);

  --body-background-color: #{$white-bis};
  --action-toolbar-background-color: #{$light-toolbar-color};
  --body-color: #{$grey-darker};

  --menu-item-active-background-color: var(--primary-color);
  --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};
  --text-light-color: #{$grey};
}

[data-theme="dark"] {
  @include dark;
}

[data-theme="light"] {
  @include light;
}

@media (prefers-color-scheme: dark) {
  html {
    @include dark;
  }
}

@media (prefers-color-scheme: light) {
  html {
    @include light;
  }
}

:root {
  --green-color: #00b5ad;
  --red-color: #f44336;
  --purple-color: #9c27b0;
  --orange-color: #ff9800;
  --blue-color: #2196f3;
}

.is-red {
  color: var(--red-color);
}

.is-green {
  color: var(--green-color);
}

.is-purple {
  color: var(--purple-color);
}

.is-orange {
  color: var(--orange-color);
}

.is-blue {
  color: var(--blue-color);
}

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

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

.splitpanes__splitter {
  z-index: 99;
}

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

.modal {
  z-index: 1000;
  .modal-background {
    backdrop-filter: blur(10px);
  }
}

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

.has-dropshadow {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}

.has-boxshadow {
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

mark {
  border-radius: 2px;
  background-color: var(--secondary-color);
  animation: pops 200ms ease-out;
  display: inline-block;
}

@keyframes pops {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.05);
  }
}

.button.is-rounded:hover {
  color: var(--text-strong-color);
  background: var(--scheme-main-ter);
}

a {
  transition: color 0.2s ease-in-out;
}