262 lines
6.4 KiB
SCSS
262 lines
6.4 KiB
SCSS
#toolbar-menubar {
|
|
// Need this to force show the menubar
|
|
display: initial;
|
|
// Allow right-click context menu on menubar
|
|
visibility: visible;
|
|
flex: 1;
|
|
}
|
|
|
|
#menubar-items {
|
|
pointer-events: all;
|
|
-moz-window-dragging: drag;
|
|
}
|
|
|
|
.titlebar-buttonbox {
|
|
height: 100%;
|
|
pointer-events: all;
|
|
}
|
|
|
|
#titlebar,
|
|
.menubar-container {
|
|
appearance: none;
|
|
flex-direction: row;
|
|
height :var(--tab-min-height);
|
|
-moz-box-pack: center;
|
|
border-bottom: var(--material-border);
|
|
background: var(--material-tabbar);
|
|
toolbar {
|
|
appearance: none;
|
|
}
|
|
menubar {
|
|
height :var(--tab-min-height);
|
|
padding: 5px 1px 5px 1px !important;
|
|
}
|
|
menu {
|
|
border-radius: 4px;
|
|
}
|
|
#main-menubar {
|
|
align-self: flex-start;
|
|
}
|
|
#main-menubar > menu {
|
|
height: 100%;
|
|
padding: 0px 4px 0px 4px;
|
|
}
|
|
#main-menubar > menu > menupopup {
|
|
// Align with menu bar bottom
|
|
margin-top: 0px;
|
|
}
|
|
}
|
|
|
|
.titlebar-icon {
|
|
background-image: url(chrome://zotero/skin/z.svg);
|
|
width: 16px;
|
|
height: 16px;
|
|
z-index: 2;
|
|
-moz-window-dragging: no-drag;
|
|
pointer-events: all;
|
|
// to make the icon 36*36
|
|
margin: 10px;
|
|
}
|
|
|
|
|
|
// Following rules from https://searchfox.org/mozilla-central/source/browser/themes/windows/browser.css
|
|
:root {
|
|
--sidebar-border-color: ThreeDLightShadow;
|
|
}
|
|
|
|
#menubar-items {
|
|
flex-direction: column; /* for flex hack */
|
|
justify-content: normal; /* align the menubar to the top also in customize mode */
|
|
}
|
|
|
|
#main-menubar > menu {
|
|
appearance: none;
|
|
color: inherit;
|
|
|
|
&[_moz-menuactive] {
|
|
// background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
|
|
@include light-dark(background-color, hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
|
|
color: inherit;
|
|
|
|
@media (prefers-contrast) {
|
|
background-color: -moz-menuhover;
|
|
color: -moz-menuhovertext;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (-moz-windows-accent-color-in-titlebar) {
|
|
:root[tabsintitlebar] {
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
|
|
--toolbox-non-lwt-bgcolor: ActiveCaption;
|
|
--toolbox-non-lwt-textcolor: CaptionText;
|
|
--toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
|
|
--toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;
|
|
|
|
#TabsToolbar:not(:-moz-lwtheme) {
|
|
/* These colors match the Linux/HCM default button colors. We need to
|
|
* override these on the tabs toolbar because the accent color is
|
|
* arbitrary, so the hardcoded colors from browser-custom-colors might
|
|
* not provide sufficient contrast. */
|
|
--toolbarbutton-icon-fill: currentColor;
|
|
--toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
|
|
--toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
|
|
}
|
|
}
|
|
|
|
&[sizemode="normal"] #titlebar {
|
|
border-top: .5px solid ActiveBorder;
|
|
&:-moz-window-inactive {
|
|
border-top-color: InactiveBorder;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Titlebar */
|
|
|
|
.titlebar-buttonbox {
|
|
right: 0px;
|
|
position: absolute;
|
|
height: var(--tab-min-height);
|
|
appearance: none;
|
|
/* 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. It will also place the buttons above the fog on
|
|
* Windows 7 with Aero Glass.
|
|
*/
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Window control buttons */
|
|
|
|
.titlebar-button {
|
|
appearance: none;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 8px 17px;
|
|
-moz-context-properties: stroke;
|
|
stroke: currentColor;
|
|
|
|
:root[tabletmode] & {
|
|
display: none;
|
|
}
|
|
|
|
> .toolbarbutton-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.titlebar-min {
|
|
/* Even though we use appearance: none, -moz-default-appearance is necessary
|
|
* for Windows 11's "snap layouts" feature, see
|
|
* DealWithWindowsAppearanceHacks */
|
|
-moz-default-appearance: -moz-window-button-minimize;
|
|
list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
|
|
}
|
|
|
|
.titlebar-max {
|
|
-moz-default-appearance: -moz-window-button-maximize;
|
|
list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
|
|
}
|
|
|
|
.titlebar-restore {
|
|
-moz-default-appearance: -moz-window-button-restore;
|
|
list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
|
|
}
|
|
|
|
.titlebar-close {
|
|
-moz-default-appearance: -moz-window-button-close;
|
|
list-style-image: url(chrome://browser/skin/window-controls/close.svg);
|
|
}
|
|
|
|
:root[lwtheme-image] {
|
|
.titlebar-button {
|
|
-moz-context-properties: unset;
|
|
}
|
|
.titlebar-min {
|
|
list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
|
|
}
|
|
.titlebar-max {
|
|
list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
|
|
}
|
|
.titlebar-restore {
|
|
list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
|
|
}
|
|
.titlebar-close {
|
|
list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
|
|
}
|
|
}
|
|
|
|
/* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
|
|
* rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
|
|
@media (1.20dppx <= resolution <= 1.45dppx) {
|
|
.titlebar-button > .toolbarbutton-icon {
|
|
width: 11.5px;
|
|
height: 11.5px;
|
|
}
|
|
}
|
|
|
|
/* 175% dpi should result in the same device pixel sizes as 150% dpi. */
|
|
@media (1.70dppx <= resolution <= 1.95dppx) {
|
|
.titlebar-button {
|
|
padding-inline: 14.1px;
|
|
|
|
> .toolbarbutton-icon {
|
|
width: 10.8px;
|
|
height: 10.8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 225% dpi should result in the same device pixel sizes as 200% dpi. */
|
|
@media (2.20dppx <= resolution <= 2.45dppx) {
|
|
.titlebar-button {
|
|
padding-inline: 15.3333px;
|
|
|
|
> .toolbarbutton-icon {
|
|
width: 10.8px;
|
|
height: 10.8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 275% dpi should result in the same device pixel sizes as 250% dpi. */
|
|
@media (2.70dppx <= resolution <= 2.95dppx) {
|
|
/* NB: todo: this should also change padding on the buttons
|
|
* themselves, but without a device to test this on, it's
|
|
* impossible to know by how much. */
|
|
.titlebar-button > .toolbarbutton-icon {
|
|
width: 10.8px;
|
|
height: 10.8px;
|
|
}
|
|
}
|
|
|
|
// End of browser.css
|
|
|
|
#main-menubar > menu[_moz-menuactive="true"],
|
|
.titlebar-button:hover {
|
|
@include light-dark(background-color, hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
|
|
}
|
|
.titlebar-button:hover:active {
|
|
@include light-dark(background-color, hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
|
|
}
|
|
|
|
.titlebar-close:hover {
|
|
stroke: white;
|
|
background-color: hsl(355,86%,49%);
|
|
}
|
|
.titlebar-close:hover:active {
|
|
background-color: hsl(355,82%,69%);
|
|
}
|
|
|
|
.titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
|
|
opacity: 0.5;
|
|
}
|