vivaldi-vh.scss

/*
  Vivaldi VH
  Version: 1.4.2
  
  Target Vivaldi Browser version: 6.9

  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.

  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;

  @include base.border-styles;
  @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

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

  @include variables.mixin-bind-command-chain-flag(
    "webpage-permanent-padding",
    true
  ) {
    @include grid-items.webpage-permanent-padding;
  }

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

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

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

  @include variables.mixin-bind-command-chain-flag(
    "titlebar-full-width"
  ) {
    @include base.grid-layout-title-bar-full-width;
  }
}