path: root/browser/themes/linux/browser.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://browser/skin/browser-shared.css");
@import url("chrome://browser/skin/contextmenu.css");

@namespace html url("http://www.w3.org/1999/xhtml");

/**
 * We intentionally do not include browser-custom-colors.css, instead choosing to
 * fall back to system colors and transparencies in order to accommodate the
 * wider variety of GTK system themes.
 *
 * We still want to do some of the tweaks that browser-custom-colors does, like
 * disabling the toolbar field border and backgrounds.
 */
@media not (prefers-contrast) {
  :root:not(:-moz-lwtheme) {
    --toolbar-field-border-color: transparent;

    /* These colors don't exactly match the default dark color that buttons and
     * textfields have in Adwaita[1][2], which would end up computing to
     * rgba(0, 0, 0, .8 * .1) and rgba(255, 255, 255, 1 * .1) for light and
     * dark, respectively.
     *
     * Instead, for the light theme we use .05 alpha, to increase the contrast
     * of the text. For the dark theme, we use a darker background, which works
     * because the toolbar background applies some white unconditionally, and
     * matches what our default themes do in other platforms too.
     *
     * [1]: https://gitlab.gnome.org/GNOME/libadwaita/-/blob/42c04e038f19b2123560da662692d65480a67931/src/stylesheet/widgets/_buttons.scss#L1
     * [2]: https://gitlab.gnome.org/GNOME/libadwaita/-/blob/42c04e038f19b2123560da662692d65480a67931/src/stylesheet/widgets/_entries.scss#L9
     */
    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
    --toolbar-field-color: inherit;

    @media (-moz-gtk-theme-family) {
      --tabs-navbar-shadow-color: transparent;
      @media (prefers-color-scheme: light) {
        --urlbar-box-bgcolor: #fafafa;
      }
    }
  }
}

#menubar-items {
  flex-direction: column; /* for flex hack */
  justify-content: normal; /* align the menubar to the top also in customize mode */
}

/**
 * Titlebar drawing:
 *
 * GTK windows have both a window radius (exposed via the
 * `-moz-gtk-csd-titlebar-radius`) environment variable, and a window shadow
 * (which we can't read back from GTK). Note that the -moz-window-decorations
 * (in X11) or the compositor (in Wayland) does draw the shadow corners
 * already.
 */
:root[tabsintitlebar] {
  background-color: transparent;

  /* When temporarily showing the menu bar, make it at least as tall as the tab
   * bar such that the window controls don't appear to move up. */
  #toolbar-menubar[autohide="true"] {
    height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
  }

  &[sizemode="normal"]:not([gtktiledwindow="true"]) {
    /* This takes care of drawing our window decorations on X11 */
    -moz-default-appearance: -moz-window-decorations;
    appearance: auto;

    #navigator-toolbox,
    dialog::backdrop {
      border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
      border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
    }

    /* stylelint-disable-next-line media-query-no-invalid */
    @media (-moz-bool-pref: "widget.gtk.rounded-bottom-corners.enabled") {
      #navigator-toolbox {
        /* The body clip below covers this. */
        border-radius: 0;
      }

      body,
      dialog::backdrop {
        /* Use an uniform clip to allow WebRender to optimize it better */
        border-radius: env(-moz-gtk-csd-titlebar-radius);
      }
    }
  }
}

/* Bookmark menus */
.bookmark-item {
  &:is(menu, menuitem) {
    min-width: 0;
    max-width: 32em;
  }

  &:not(.subviewbutton) > .menu-iconic-left {
    margin-block: 0;
  }

  /* Bookmark drag and drop styles */
  &[dragover-into="true"] {
    background: SelectedItem !important;
    color: SelectedItemText !important;
  }

  &[cutting] {
    > .toolbarbutton-icon,
    > .menu-iconic-left > .menu-iconic-icon {
      opacity: 0.5;
    }

    > .toolbarbutton-text,
    > .menu-iconic-left > .menu-iconic-text {
      opacity: 0.7;
    }
  }
}

/* Address bar */
#urlbar,
#searchbar {
  font-size: 1.05em;
}

/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.experimental.expandTextOnFocus") {
  #urlbar[breakout-extend] {
    font-size: 1.14em;
  }
}

/* AutoComplete */

#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
  border-top: 1px solid ThreeDShadow;
}

/* Content area */

.sidebar-splitter {
  appearance: none;
  width: 6px;
  background-color: -moz-dialog;
  border: 1px ThreeDShadow;
  border-style: none solid;
}

/* Tabstrip */

#tabbrowser-tabs {
  /* override the global style to allow the selected tab to be above the nav-bar */
  z-index: auto;
}

#TabsToolbar {
  min-height: 0;
}

#TabsToolbar,
#toolbar-menubar,
#main-menubar,
#titlebar {
  appearance: none;
  background-color: transparent;
  color: inherit;
}

/* All tabs menupopup */

.alltabs-item[selected="true"] {
  font-weight: bold;
}

#UITourHighlight {
  /* Below are some fixes for people without an X compositor on Linux.
     This is why we can't have nice things: */
  /* Animations don't repaint properly without an X compositor. */
  animation-name: none !important;
  /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the
     background color not visible. Anti-aliasing is not available either. Make a
     thicker outline and cancel border-radius for that case. */
     outline: 4px solid rgb(0,200,215);
     border-radius: 0 !important;
}

#UITourTooltipDescription {
  font-size: 1.05rem;
}

#UITourTooltipClose {
  margin-inline-end: -4px;
}

/**
 * Override the --arrowpanel-padding so the background extends
 * to the sides and bottom of the panel.
 */
#UITourTooltipButtons {
  margin-inline-start: -10px;
  margin-bottom: -10px;
}

/* The button box must appear on top of the navigator-toolbox in order for
 * click and hover mouse events to work properly for the button in the restored
 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 * can swallow those events. */
.titlebar-buttonbox {
  z-index: 1;
  align-items: stretch;
}

@media (-moz-gtk-csd-reversed-placement) {
  .titlebar-buttonbox-container {
    order: -1;
  }
}

.titlebar-button {
  appearance: none;
  align-items: center;
  padding: 0;
  padding-inline: calc(env(-moz-gtk-csd-titlebar-button-spacing) / 2);

  > .toolbarbutton-icon {
    appearance: auto;
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media (-moz-bool-pref: "widget.gtk.non-native-titlebar-buttons.enabled") {
    /* When using lightweight themes, use our own buttons since native ones might
     * assume a native background in order to be visible. */
    &:-moz-lwtheme {
      padding-inline: 3px;

      > .toolbarbutton-icon {
        appearance: none;
        border-radius: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        -moz-context-properties: stroke;
        stroke: currentColor;
        /* Roughly the Adwaita size */
        width: 24px;
        height: 24px;
      }
    }
  }

  &:hover > .toolbarbutton-icon {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }

  &:hover:active > .toolbarbutton-icon {
    background-color: color-mix(in srgb, currentColor 20%, transparent);
  }

  &:focus-visible > .toolbarbutton-icon {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }
}

.titlebar-max {
  order: env(-moz-gtk-csd-maximize-button-position);
  > .toolbarbutton-icon {
    -moz-default-appearance: -moz-window-button-maximize;
    background-image: url(chrome://browser/skin/window-controls/maximize.svg);
  }
}

.titlebar-restore {
  order: env(-moz-gtk-csd-maximize-button-position);
  > .toolbarbutton-icon {
    -moz-default-appearance: -moz-window-button-restore;
    background-image: url(chrome://browser/skin/window-controls/restore.svg);
  }
}

@media not (-moz-gtk-csd-maximize-button) {
  .titlebar-restore,
  .titlebar-max {
    display: none;
  }
}

.titlebar-close {
  order: env(-moz-gtk-csd-close-button-position);

  > .toolbarbutton-icon {
    -moz-default-appearance: -moz-window-button-close;
    background-image: url(chrome://browser/skin/window-controls/close.svg);
  }

  &:hover > .toolbarbutton-icon {
    background-color: #d70022;
    color: white;
  }

  &:hover:active > .toolbarbutton-icon {
    background-color: #ff0039;
  }

  @media not (-moz-gtk-csd-close-button) {
    display: none;
  }
}

.titlebar-min {
  order: env(-moz-gtk-csd-minimize-button-position);

  > .toolbarbutton-icon {
    -moz-default-appearance: -moz-window-button-minimize;
    background-image: url(chrome://browser/skin/window-controls/minimize.svg);
  }

  @media not (-moz-gtk-csd-minimize-button) {
    display: none;
  }
}