owntone-server/web-src/src/styles.scss

@charset "utf-8";

@use 'bulma/bulma';
@use 'bulma/sass/utilities/mixins';

@mixin navbar($theme) {
  $bg: '--bulma-#{$theme}';
  $bg-l: '--bulma-#{$theme}-l';
  $color-l: '--bulma-#{$theme}-invert-l';
  --bulma-navbar-background-color: var(#{$bg});
  --bulma-navbar-item-background-l: var(#{$bg-l});
  --bulma-navbar-item-color-l: var(#{$color-l});
}

.is-top {
  @media (prefers-color-scheme: dark) {
    @include navbar(dark);
  }

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

  [data-theme='dark'] & {
    @include navbar(dark);
  }

  [data-theme='light'] & {
    @include navbar(light);
  }
}

.is-bottom {
  @include navbar(dark);
}

button.navbar-item:hover {
  --bulma-navbar-item-background-l-delta: var(
    --bulma-navbar-item-hover-background-l-delta
  );
  --bulma-navbar-item-background-a: 1;
  background-color: hsla(
    var(--bulma-navbar-h),
    var(--bulma-navbar-s),
    calc(
      var(--bulma-navbar-item-background-l) +
        var(--bulma-navbar-item-background-l-delta)
    ),
    var(--bulma-navbar-item-background-a)
  );
}

.navbar-item {
  width: var(--bulma-navbar-height);
  justify-content: center;
}

.media:first-of-type {
  padding-top: 1rem;
}

.overlay-fullscreen {
  @extend .is-overlay;
  z-index: 1;
  background-color: rgba(10, 10, 10, 0.5);
}

.dropdown-menu.is-mobile {
  @include mixins.mobile {
    width: 100vw;
  }
  .dropdown-content {
    max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
    overflow: auto;
  }
}