mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 03:05:34 +00:00
48da2d49f0
MozReview-Commit-ID: 96ug22yZt5G --HG-- extra : rebase_source : 248c9e43cfd11de7ecee80d73b5b634b8d60e4d8
304 lines
10 KiB
CSS
304 lines
10 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/.
|
|
|
|
/* compacttheme.css is loaded in browser.xul after browser.css when it is
|
|
preffed on. The bulk of the styling is here in the shared file, but
|
|
there are overrides for each platform in their compacttheme.css files. */
|
|
|
|
:root:-moz-lwtheme {
|
|
%ifndef MOZ_PHOTON_THEME
|
|
--space-above-tabbar: 0px;
|
|
--backbutton-urlbar-overlap: 0px;
|
|
/* 18px icon + 2 * 5px padding + 1 * 1px border */
|
|
--forwardbutton-width: 29px;
|
|
%endif
|
|
--toolbar-bgcolor: var(--chrome-secondary-background-color);
|
|
--toolbar-gbimage: none;
|
|
--toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
|
|
--toolbar-non-lwt-textcolor: var(--chrome-color);
|
|
--toolbar-non-lwt-bgimage: none;
|
|
}
|
|
|
|
:root:-moz-lwtheme-brighttext {
|
|
|
|
%ifndef MOZ_PHOTON_THEME
|
|
|
|
/* Chrome */
|
|
--chrome-background-color: #272b35;
|
|
--chrome-color: #F5F7FA;
|
|
--chrome-secondary-background-color: #393F4C;
|
|
--chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
|
|
--chrome-nav-bar-separator-color: rgba(0,0,0,.2);
|
|
--chrome-nav-buttons-background: #252C33;
|
|
--chrome-nav-buttons-hover-background: #1B2127;
|
|
--chrome-nav-bar-controls-border-color: #1D2328;
|
|
--chrome-selection-color: #fff;
|
|
--chrome-selection-background-color: #5675B9;
|
|
|
|
--pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%);
|
|
|
|
|
|
%else
|
|
|
|
/* Chrome */
|
|
--chrome-background-color: hsl(240, 5%, 5%);
|
|
--chrome-color: rgb(249, 249, 250);
|
|
--chrome-secondary-background-color: hsl(240, 1%, 20%);
|
|
--chrome-navigator-toolbox-separator-color: hsla(240, 5%, 5%, .1);
|
|
--chrome-nav-bar-separator-color: rgba(0,0,0,.2);
|
|
--chrome-nav-buttons-background: hsla(240, 5%, 5%, .1);
|
|
--chrome-nav-buttons-hover-background: hsla(240, 5%, 5%, .15);
|
|
--chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
|
|
--chrome-selection-color: #fff;
|
|
--chrome-selection-background-color: #5675B9;
|
|
|
|
--toolbarbutton-icon-fill-inverted: rgba(249, 249, 250, .7);
|
|
|
|
%endif
|
|
|
|
/* Url and search bars */
|
|
%ifndef MOZ_PHOTON_THEME
|
|
--url-and-searchbar-background-color: #171B1F;
|
|
%else
|
|
--url-and-searchbar-background-color: hsla(0, 0%, 100%, .1);
|
|
%endif
|
|
--urlbar-separator-color: #5F6670;
|
|
--urlbar-dropmarker-url: url("chrome://browser/skin/compacttheme/urlbar-history-dropmarker.svg");
|
|
--urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
|
|
--urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
|
|
--urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
|
|
--urlbar-dropmarker-2x-url: url("chrome://browser/skin/compacttheme/urlbar-history-dropmarker.svg");
|
|
--urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
|
|
--urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
|
|
--urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
|
|
}
|
|
|
|
%ifndef MOZ_PHOTON_THEME
|
|
/* Override the lwtheme-specific styling for toolbar buttons */
|
|
:root:-moz-lwtheme-brighttext,
|
|
toolbar:-moz-lwtheme-brighttext {
|
|
--toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
|
|
--toolbarbutton-hover-boxshadow: none;
|
|
--toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
|
|
--toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
|
|
--toolbarbutton-active-boxshadow: none;
|
|
--toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
|
|
--toolbarbutton-checkedhover-backgroundcolor: #3C5283;
|
|
}
|
|
%endif
|
|
:root:-moz-lwtheme-darktext {
|
|
--url-and-searchbar-background-color: #fff;
|
|
|
|
--chrome-background-color: #E3E4E6;
|
|
--chrome-color: #18191a;
|
|
--chrome-secondary-background-color: #f5f6f7;
|
|
--chrome-navigator-toolbox-separator-color: #cccccc;
|
|
--chrome-nav-bar-separator-color: #B6B6B8;
|
|
--chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
|
|
--chrome-nav-buttons-hover-background: #DADBDB;
|
|
--chrome-nav-bar-controls-border-color: #ccc;
|
|
--chrome-selection-color: #f5f7fa;
|
|
--chrome-selection-background-color: #4c9ed9;
|
|
|
|
%ifndef MOZ_PHOTON_THEME
|
|
--pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
|
|
%endif
|
|
}
|
|
|
|
%ifndef MOZ_PHOTON_THEME
|
|
/* Override the lwtheme-specific styling for toolbar buttons */
|
|
:root:-moz-lwtheme-darktext,
|
|
toolbar:-moz-lwtheme-darktext {
|
|
--toolbarbutton-hover-background: #eaeaea;
|
|
--toolbarbutton-hover-boxshadow: none;
|
|
--toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
|
|
--toolbarbutton-active-background: #d7d7d8 border-box;
|
|
--toolbarbutton-active-boxshadow: none;
|
|
--toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
|
|
--toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
|
|
}
|
|
|
|
/* Give some space to drag the window around while customizing
|
|
(normal space to left and right of tabs doesn't work in this case) */
|
|
#main-window[tabsintitlebar][customizing] {
|
|
--space-above-tabbar: 9px;
|
|
}
|
|
%endif
|
|
|
|
#urlbar ::-moz-selection,
|
|
#navigator-toolbox .searchbar-textbox ::-moz-selection,
|
|
.browserContainer > findbar ::-moz-selection {
|
|
background-color: var(--chrome-selection-background-color);
|
|
color: var(--chrome-selection-color);
|
|
}
|
|
|
|
/* Change the base colors for the browser chrome */
|
|
|
|
#TabsToolbar,
|
|
#browser-panel {
|
|
background: var(--chrome-background-color);
|
|
color: var(--chrome-color);
|
|
}
|
|
|
|
#navigator-toolbox:-moz-lwtheme::after {
|
|
border-bottom-color: var(--chrome-navigator-toolbox-separator-color);
|
|
}
|
|
|
|
#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
|
|
.browserContainer > findbar,
|
|
#browser-bottombox {
|
|
background-color: var(--chrome-secondary-background-color) !important;
|
|
background-image: none !important;
|
|
color: var(--chrome-color);
|
|
}
|
|
|
|
/* Default findbar text color doesn't look good - Bug 1125677 */
|
|
.browserContainer > findbar .findbar-find-status,
|
|
.browserContainer > findbar .found-matches {
|
|
color: inherit;
|
|
}
|
|
|
|
#navigator-toolbox .toolbarbutton-1,
|
|
.browserContainer > findbar .findbar-button,
|
|
#PlacesToolbar toolbarbutton.bookmark-item {
|
|
color: var(--chrome-color);
|
|
text-shadow: none;
|
|
}
|
|
|
|
#TabsToolbar {
|
|
text-shadow: none !important;
|
|
}
|
|
%ifndef MOZ_PHOTON_THEME
|
|
|
|
/* Back and forward button */
|
|
|
|
#back-button > .toolbarbutton-icon,
|
|
#forward-button > .toolbarbutton-icon {
|
|
background: var(--chrome-nav-buttons-background) !important;
|
|
border-radius: 0 !important;
|
|
padding: var(--toolbarbutton-inner-padding) 5px !important;
|
|
margin: 0 !important;
|
|
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
|
|
box-shadow: none !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* the normal theme adds box-shadow: <stuff> !important when the back-button is [open]. Fix: */
|
|
#back-button[open="true"] > .toolbarbutton-icon {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#forward-button > .toolbarbutton-icon {
|
|
border-inline-start: none !important;
|
|
}
|
|
|
|
/* Override a box shadow for disabled back button */
|
|
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Override !important properties for hovered back button */
|
|
#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
|
|
#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
|
|
background: var(--chrome-nav-buttons-hover-background) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#back-button > .toolbarbutton-icon {
|
|
border-radius: 2px 0 0 2px !important;
|
|
}
|
|
|
|
#nav-bar .toolbarbutton-1:not([type=menu-button]),
|
|
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
|
|
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
%endif
|
|
|
|
/* URL bar and search bar*/
|
|
#urlbar,
|
|
#navigator-toolbox .searchbar-textbox {
|
|
background-color: var(--url-and-searchbar-background-color) !important;
|
|
background-image: none !important;
|
|
color: inherit !important;
|
|
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#identity-icon:-moz-lwtheme-brighttext,
|
|
#tracking-protection-icon:-moz-lwtheme-brighttext,
|
|
#connection-icon:-moz-lwtheme-brighttext,
|
|
.notification-anchor-icon:-moz-lwtheme-brighttext,
|
|
#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme-brighttext,
|
|
#extension-icon:-moz-lwtheme-brighttext {
|
|
fill: rgba(255,255,255,.7);
|
|
}
|
|
|
|
%ifndef MOZ_PHOTON_THEME
|
|
#urlbar {
|
|
border-inline-start: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
|
|
overflow: -moz-hidden-unscrollable;
|
|
clip-path: none;
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
|
|
window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
|
|
/* Resolves text blurring issue when hovering, see bug 1340206 */
|
|
transform: none;
|
|
/* For some reason, this property must be specified here, even though the same
|
|
value is set in the previous rule set. o_O */
|
|
margin-inline-start: 0;
|
|
}
|
|
%endif
|
|
#urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
|
|
background-color: rgba(255,255,255,.2);
|
|
}
|
|
|
|
#urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
|
|
background-color: rgba(255,255,255,.3);
|
|
}
|
|
|
|
/* Use smaller back button icon */
|
|
#back-button {
|
|
list-style-image: url("chrome://browser/skin/back.svg");
|
|
}
|
|
|
|
.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
|
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
|
%ifdef MOZ_PHOTON_THEME
|
|
background-position: center bottom -4px;
|
|
%else
|
|
background-image: var(--pinned-tab-glow);
|
|
background-position: center;
|
|
background-size: 100%;
|
|
%endif
|
|
}
|
|
|
|
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
|
|
background-position: left bottom var(--tab-toolbar-navbar-overlap);
|
|
background-size: 34px 100%;
|
|
}
|
|
|
|
.tab-throbber[selected][progress] {
|
|
list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted.png");
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.tab-throbber[selected][progress] {
|
|
list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted@2x.png");
|
|
}
|
|
}
|
|
|
|
.tab-icon-sound[soundplaying],
|
|
.tab-icon-sound[muted] {
|
|
filter: none !important; /* removes drop-shadow filter */
|
|
}
|
|
|