vivaldi-vh-vivalarc.scss

/*
  Vivaldi VH VivalArc Edition
  Version: 1.4.2
  
  Target Vivaldi Browser version: 6.9
  Target VivalArc version: 1.0.4.1

  Vivaldi VH is a CSS modification for Vivaldi Browser that grants your webpages the entire vertical space of the browser window by moving the rest of the UI into a separate column.

  This edition of Vivaldi VH is designed to be used in combination with the VivalArc CSS modification by tovi: https://arc.tovi.fun

  Copyright (c) 2023-2024 HKayn <https://hkayn.com>
*/

@use "base";
@use "variables";
@use "grid-items";
@use "toolbar-components";
@use "ui-elements";

:root {
  /* Set a minimum width for the Pillar: */
  --vvh-pillar-min-width: 0px;
  /* Set a custom width for toolbar components that are set to extend on focus (address field, search field): */
  --vvh-extend-on-focus-width: 1200px;
}

:root:has(#{variables.$select-browser-with-valid-settings}) {
  @include variables.custom-properties-declare;

  // border-styles are excluded
  @include base.grid-layout-styles;

  @include grid-items.title-bar-styles;
  @include grid-items.address-bar-styles;
  @include grid-items.bookmark-bar-styles;
  @include grid-items.panel-styles;
  @include grid-items.status-bar-styles;
  @include grid-items.tab-bar-styles;
  @include grid-items.webpage-styles;

  @include toolbar-components.address-field-styles;
  @include toolbar-components.command-chain-styles;
  @include toolbar-components.extensions-styles;
  @include toolbar-components.flexible-space-styles;
  @include toolbar-components.mail-search-styles;
  @include toolbar-components.page-zoom-controls-styles;
  @include toolbar-components.search-field-styles;
  @include toolbar-components.status-info-styles;
  @include toolbar-components.workspaces-styles;

  @include ui-elements.default-browser-notification-styles;

  // # Command Chain Flag bindings with edition-specific changes

  @include variables.mixin-bind-command-chain-flag(
    "addressbar-universal-flex-grow",
    true
  ) {
    @include grid-items.address-bar-universal-flex-grow;
  }

  @include variables.mixin-bind-command-chain-flag(
    "statusbar-universal-flex-grow",
    true
  ) {
    @include grid-items.status-bar-universal-flex-grow;
  }

  // webpage-permanent-padding is not included because it is redundant

  @include variables.mixin-bind-command-chain-flag(
    "addressfield-extend-on-focus",
    true
  ) {
    @include toolbar-components.address-field-extend-on-focus;

    #browser {
      &:not(.address-top-off, .address-bottom-off) #{variables.$select-address-bar},
      #{variables.$select-footer-has-status-bar} {
        .UrlBar-AddressField:has(#urlFieldInput:focus) {
          background-color: var(--colorBgIntense); // restores background color set by browser
        }
      }
    }
  }

  @include variables.mixin-bind-command-chain-flag(
    "searchfield-extend-on-focus"
  ) {
    @include toolbar-components.search-field-extend-on-focus;

    #browser {
      &:not(.address-top-off, .address-bottom-off) #{variables.$select-address-bar},
      #{variables.$select-footer-has-status-bar} {
        .UrlBar-SearchField:has(.searchfield-input:focus) {
          background-color: var(--colorBgIntense); // restores background color set by browser
        }
      }
    }
  }

  @include variables.mixin-bind-command-chain-flag(
    "extensions-invert-toggle-position"
  ) {
    @include toolbar-components.extensions-invert-toggle-position;
  }

  @include variables.mixin-bind-command-chain-flag(
    "panel-in-pillar"
  ) {
    @include base.grid-layout-panel-in-pillar;

    // undo margin-top set in edition-specific fixes
    #browser.disable-titlebar #{variables.$select-panel} {
      margin-top: calc(var(--vvh-vivalarc-os-specific-header) * (1 - min(1, (
        var(--vvh-grid-title-bar, 0)
        + var(--vvh-grid-address-bar-top, 0)
        + var(--vvh-grid-bookmark-bar-top, 0)
      ))));
    }
  }

  @include base.grid-layout-title-bar-full-width; // always enabled because VivalArc expects a full width title bar

  // # Edition-specific compatibility fixes

  #browser.linux {
    --vvh-vivalarc-os-specific-header: var(--linux-header); // custom property taken from VivalArc
  }
  #browser.mac {
    --vvh-vivalarc-os-specific-header: var(--mac-header); // custom property taken from VivalArc
  }
  #browser.win {
    --vvh-vivalarc-os-specific-header: var(--win-header); // custom property taken from VivalArc
  }

  #{variables.$select-title-bar},
  #{variables.$select-address-bar} {
    background: var(--colorTabBar) !important; // value taken from VivalArc
  }

  #{variables.$select-panel},
  #{variables.$select-webpage} {
    border-top: unset !important; // reverts borders of titlebar-full-width
  }

  #{variables.$select-title-bar} {
    min-height: var(--vvh-vivalarc-os-specific-header) !important; // value taken from VivalArc
  }

  #{variables.$select-address-bar}::after {
    display: none;
  }

  #browser.disable-titlebar {
    #{variables.$select-panel},
    #{variables.$select-webpage} {
      margin-top: var(--vvh-vivalarc-os-specific-header);
    }
  }
}