Emilio Cobos Álvarez
32e1eb0363
Differential Revision: https://phabricator.services.mozilla.com/D312028
308 lines
9.6 KiB
CSS
308 lines
9.6 KiB
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");
|
|
|
|
/**
|
|
* 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) and (not -moz-pref("browser.nova.enabled")) {
|
|
--urlbar-box-background-color: #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([tiled]) {
|
|
/* 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;
|
|
|
|
body,
|
|
dialog::backdrop {
|
|
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
|
|
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
|
|
@media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
|
|
/* 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 */
|
|
|
|
#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 --panel-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-background-color);
|
|
background-color: var(--toolbox-text-color);
|
|
&:-moz-window-inactive {
|
|
color: var(--toolbox-background-color-inactive);
|
|
background-color: var(--toolbox-text-color-inactive);
|
|
}
|
|
}
|
|
&:hover:active > .toolbarbutton-icon {
|
|
background-color: color-mix(in srgb, var(--toolbox-text-color) 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;
|
|
}
|
|
}
|
|
|
|
.titlebar-return-to-opener {
|
|
--titlebar-button-position: env(-moz-gtk-csd-minimize-button-position);
|
|
}
|