zotero/scss/linux/_titleBar.scss
2024-01-24 23:32:16 -05:00

156 lines
3.6 KiB
SCSS

// Prevent window background overflows window border
#main-window {
background-color: initial;
}
// Prevent background flicker
#browser {
background: var(--material-tabbar);
}
#navigator-toolbox {
height: var(--tab-min-height);
-moz-box-pack: center;
pointer-events: none;
}
#toolbar-menubar {
pointer-events: none;
visibility: visible;
// space for 30*30 icon
padding-left: var(--tab-min-height);
height: var(--tab-min-height);
}
#menubar-items {
pointer-events: all;
}
#main-menubar {
height: var(--tab-min-height);
}
#titlebar {
pointer-events: none;
}
.titlebar-buttonbox {
pointer-events: all;
}
.titlebar-button {
margin: 4px 0;
}
.titlebar-icon-container {
margin-bottom: calc(0px - var(--tab-min-height));
height: var(--tab-min-height);
}
.titlebar-icon {
-moz-window-dragging: drag;
// to make the icon 30*30
margin: 7px;
object-fit: none;
}
.titlebar-buttonbox-container {
-moz-box-pack: end;
height: var(--tab-min-height);
}
// Following rules from https://searchfox.org/mozilla-central/source/browser/themes/linux/browser.css
/* 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: center;
// Disable button stretch
-moz-box-align: baseline;
}
/* Render titlebar command buttons according to system config.
* Use full scale icons here as the Gtk+ does. */
.titlebar-min {
appearance: auto;
-moz-default-appearance: -moz-window-button-minimize;
order: env(-moz-gtk-csd-minimize-button-position);
}
.titlebar-max {
appearance: auto;
-moz-default-appearance: -moz-window-button-maximize;
order: env(-moz-gtk-csd-maximize-button-position);
}
.titlebar-restore {
appearance: auto;
-moz-default-appearance: -moz-window-button-restore;
order: env(-moz-gtk-csd-maximize-button-position);
}
.titlebar-close {
appearance: auto;
-moz-default-appearance: -moz-window-button-close;
order: env(-moz-gtk-csd-close-button-position);
}
/* When using lightweight themes, use our own buttons since native ones might
* assume a native background in order to be visible. */
.titlebar-button:-moz-lwtheme {
appearance: none;
border-radius: 100%;
}
.titlebar-button > .toolbarbutton-icon:-moz-lwtheme {
padding: 6px;
-moz-context-properties: stroke;
stroke: currentColor;
}
.titlebar-min:-moz-lwtheme {
list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
}
.titlebar-max:-moz-lwtheme {
list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
}
.titlebar-restore:-moz-lwtheme {
list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
}
.titlebar-close:-moz-lwtheme {
list-style-image: url(chrome://browser/skin/window-controls/close.svg);
}
.titlebar-button:-moz-lwtheme:hover {
background-color: color-mix(in srgb, currentColor 12%, transparent);
}
.titlebar-button:-moz-lwtheme:hover:active {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.titlebar-close:-moz-lwtheme:hover {
background-color: #d70022;
color: white;
}
.titlebar-close:-moz-lwtheme:hover:active {
background-color: #ff0039;
}
@media (not (-moz-gtk-csd-minimize-button)) {
.titlebar-min {
display: none;
}
}
@media (not (-moz-gtk-csd-maximize-button)) {
.titlebar-restore,
.titlebar-max {
display: none;
}
}
@media (not (-moz-gtk-csd-close-button)) {
.titlebar-close {
display: none;
}
}
@media (-moz-gtk-csd-reversed-placement) {
.titlebar-buttonbox-container {
order: -1;
}
}