tor-browser

browser.css (9967B)

---

/* 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");

/**
* We still want to do some of the tweaks that browser-colors does, like
* disabling the toolbar field border and backgrounds.
*/
@media not (prefers-contrast) {
 :root:not([lwtheme]) {
   @media (-moz-gtk-theme-family) {
     --tabs-navbar-separator-style: none;
     @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).
*/
@media (-moz-gtk-csd-transparency-available) {
 :root[customtitlebar] {
   background-color: transparent;

   &[sizemode="normal"]:not([gtktiledwindow="true"]) {
     /* Firefox draws its contents to a child window, while GTK takes care of
      * drawing the toplevel (which in most cases is just the window
      * decorations).
      *
      * Due to how X11 child windows work, pixels painted by a child window will
      * never be drawn by its toplevel, even in compositing window managers.
      * That means that we need to draw the part of the decorations that fall
      * into our client area ourselves, which is what this does.
      *
      * Alternatives to this would be:
      *  * Using the XComposite extension
      *  * Drawing to the toplevel window buffer directly
      *  * Approximating the corners with gdk_window_shape_combine_region
      *
      * None of them being particularly appealing.
      *
      * On Wayland we render to a subsurface which gets properly composited
      * atop our toplevel, so there's no issue there (MozWindowDecorations
      * does nothing).
      */
     -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-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-icon {
   margin-block: 0;
 }

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

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

/* AutoComplete */

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

/* Tabstrip */

#tabbrowser-tabs {
 /* override the native styling */
 border-bottom: 0;
}

#TabsToolbar {
 min-height: 0;
}

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

/* All tabs menupopup */

.alltabs-item[selected="true"] {
 font-weight: var(--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;
 /* In libadwaita buttons are 24px big and spacing is
  * 3px of gap + 5px * 2 of padding = 13px / 2, see:
  * https://gitlab.gnome.org/GNOME/libadwaita/-/blob/fe21c3c823443a8f2333cf3cc09ba3d0fa753228/src/stylesheet/widgets/_header-bar.scss#L164
  * We want a contiguous hit region so we use 6.5px of padding instead. */
 --titlebar-button-size: 24px;
 --titlebar-button-spacing: 6.5px;
 --titlebar-button-end-spacing: 10px;
 @media (-moz-gtk-theme-family: breeze) {
   /* On breeze, titlebar button size and spacing depends on the font, see:
    *  * https://invent.kde.org/plasma/kdecoration/-/blob/28898c2492708f6a1603458baa535a8504e8d638/src/decorationsettings.cpp#L18-33
    *  * https://invent.kde.org/plasma/breeze/-/blob/156193c14942cbc836cf131e92e16fc3310513ed/kdecoration/breezedecoration.cpp#L734-750
    *  * https://invent.kde.org/plasma/breeze/-/blob/156193c14942cbc836cf131e92e16fc3310513ed/kdecoration/breeze.h#L34
    * Since we don't have the height of the "M" glyph, we approximate using
    * ems snapped to device pixels for crisp rendering. */
   /* The button size is also the grid unit */
   --titlebar-button-size: round(1.3em, 2 * env(hairline));
   /* The spacing is half the button size. Since we apply it to each side,
    * it's that divided by 2 */
   --titlebar-button-spacing: calc(var(--titlebar-button-size) / 4);
   /* End spacing is 2 * smallSpacing, which is max(2px, clamp(grid-unit / 4)). */
   --titlebar-button-end-spacing: calc(2 * max(2px, round(down, var(--titlebar-button-size) / 4, env(hairline))));
 }
 --max-titlebar-button-position: max(
   env(-moz-gtk-csd-maximize-button-position),
   env(-moz-gtk-csd-minimize-button-position),
   env(-moz-gtk-csd-close-button-position)
 );
}

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

.titlebar-button {
 appearance: none;
 color: inherit;
 align-items: center;
 padding: 0;
 padding-inline: var(--titlebar-button-spacing);
 padding-inline-end: max(
   var(--titlebar-button-spacing),
   var(--titlebar-button-end-spacing) * (var(--titlebar-button-position) - var(--max-titlebar-button-position) + 1)
 );
 order: var(--titlebar-button-position);
 /* In GTK applications, you can drag the window by titlebar buttons */
 -moz-window-dragging: drag;

 > .toolbarbutton-icon {
   border-radius: var(--border-radius-circle);
   background-position: center center;
   background-size: min(16px, var(--titlebar-button-size) - 2 * env(hairline));
   background-repeat: no-repeat;
   -moz-context-properties: stroke;
   stroke: currentColor;
   width: var(--titlebar-button-size);
   height: var(--titlebar-button-size);

   @media not (-moz-gtk-theme-family: breeze) {
     /* Matches the libadwaita transition */
     transition: background-color 0.2s ease;
   }

   @media (-moz-gtk-theme-family: adwaita) or (-moz-gtk-theme-family: yaru) {
     /* On Adwaita / Yaru, the titlebar buttons have a background by default */
     background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
 }

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

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

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

 @media (-moz-gtk-theme-family: breeze) {
   &:hover > .toolbarbutton-icon {
     color: var(--toolbox-bgcolor);
     background-color: var(--toolbox-textcolor);
     &:-moz-window-inactive {
       color: var(--toolbox-bgcolor-inactive);
       background-color: var(--toolbox-textcolor-inactive);
     }
   }
   &:hover:active > .toolbarbutton-icon {
     background-color: color-mix(in srgb, var(--toolbox-textcolor) 50%, transparent);
   }
   &.titlebar-close:hover > .toolbarbutton-icon {
     background-color: #ff98a2;
   }
   &.titlebar-close:hover:active > .toolbarbutton-icon {
     background-color: #6d2229;
   }
 }
}

.titlebar-restore,
.titlebar-max {
 --titlebar-button-position: env(-moz-gtk-csd-maximize-button-position);

 > .toolbarbutton-icon {
   background-image: -moz-symbolic-icon(window-maximize-symbolic);
 }

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

.titlebar-restore > .toolbarbutton-icon {
 background-image: -moz-symbolic-icon(window-restore-symbolic);
}

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

 > .toolbarbutton-icon {
   background-image: -moz-symbolic-icon(window-close-symbolic);
 }

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

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

 > .toolbarbutton-icon {
   background-image: -moz-symbolic-icon(window-minimize-symbolic);
 }

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