зеркало из https://github.com/mozilla/gecko-dev.git
1095 строки
28 KiB
CSS
1095 строки
28 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/. */
|
|
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
%include ../shared/browser.inc.css
|
|
%filter substitution
|
|
%define glassShadowColor hsla(240,5%,5%,0.3)
|
|
|
|
:root {
|
|
--toolbar-non-lwt-bgcolor: -moz-dialog;
|
|
--toolbar-non-lwt-textcolor: -moz-dialogtext;
|
|
--toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
|
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
|
|
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
|
|
|
|
--toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
|
|
--toolbarbutton-border-radius: 2px;
|
|
--toolbarbutton-icon-fill-opacity: 1;
|
|
|
|
--panel-separator-color: ThreeDLightShadow;
|
|
--arrowpanel-dimmed: hsla(0,0%,80%,.3);
|
|
--arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
|
|
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
|
|
|
|
--urlbar-separator-color: ThreeDLightShadow;
|
|
|
|
--toolbox-border-bottom-color: ThreeDShadow;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
--tabs-border-color: threedshadow;
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
--tab-line-color: highlight;
|
|
}
|
|
|
|
@media (-moz-windows-default-theme) {
|
|
:root {
|
|
--toolbar-non-lwt-bgcolor: #f9f9fa;
|
|
--toolbar-non-lwt-textcolor: #0c0c0d;
|
|
--toolbar-non-lwt-bgimage: none;
|
|
|
|
--toolbarbutton-icon-fill-opacity: .7;
|
|
|
|
--panel-separator-color: hsla(210,4%,10%,.14);
|
|
|
|
--toolbox-border-bottom-color: #e1e1e2;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
--tabs-border-color: rgba(0,0,0,.3);
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
--tab-line-color: #0a84ff;
|
|
}
|
|
}
|
|
|
|
:root:-moz-lwtheme {
|
|
--toolbar-bgcolor: rgba(255,255,255,.4);
|
|
--toolbar-bgimage: none;
|
|
|
|
--toolbox-border-bottom-color: rgba(0,0,0,.3);
|
|
|
|
--panel-separator-color: hsla(210,4%,10%,.14);
|
|
}
|
|
|
|
:root[lwt-popup-brighttext] {
|
|
--panel-separator-color: rgba(249,249,250,.1);
|
|
|
|
--arrowpanel-dimmed: rgba(249,249,250,.1);
|
|
--arrowpanel-dimmed-further: rgba(249,249,250,.15);
|
|
--arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
|
|
}
|
|
|
|
#navigator-toolbox:-moz-lwtheme {
|
|
--tabs-border-color: rgba(0,0,0,.3);
|
|
}
|
|
|
|
#menubar-items {
|
|
-moz-box-orient: vertical; /* for flex hack */
|
|
}
|
|
|
|
#main-menubar {
|
|
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
|
|
}
|
|
|
|
#main-menubar > menu {
|
|
-moz-appearance: none;
|
|
color: inherit;
|
|
}
|
|
|
|
#main-menubar > menu[_moz-menuactive="true"] {
|
|
background-color: -moz-menuhover;
|
|
color: -moz-menuhovertext;
|
|
}
|
|
|
|
/* Use a different color only on Windows 8 and higher in inactive windows.
|
|
* On Win 7, the menubar fog disappears for inactive windows, and renders gray
|
|
* illegible.
|
|
*/
|
|
@media (-moz-windows-default-theme) {
|
|
@media not all and (-moz-os-version: windows-win7) {
|
|
#toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
|
|
color: ThreeDShadow;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hides the titlebar-placeholder underneath the window caption buttons when we
|
|
are not autohiding the menubar. */
|
|
#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
|
|
display: none;
|
|
}
|
|
|
|
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
|
|
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
|
|
padding-top: var(--space-above-tabbar);
|
|
}
|
|
|
|
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
|
|
@media (-moz-os-version: windows-win7) {
|
|
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
|
|
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
|
|
padding-top: calc(var(--space-above-tabbar) + 4px);
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox,
|
|
.browser-toolbar {
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
.browser-toolbar:not(.titlebar-color) {
|
|
background-color: var(--toolbar-bgcolor);
|
|
background-image: var(--toolbar-bgimage);
|
|
background-clip: padding-box;
|
|
color: var(--toolbar-color, inherit);
|
|
}
|
|
|
|
/*
|
|
* Windows 7 draws the chrome background color as the tab background
|
|
* instead of in the tabs toolbar.
|
|
*/
|
|
@media (-moz-os-version: windows-win7) {
|
|
@media (-moz-windows-default-theme) {
|
|
#navigator-toolbox:not(:-moz-lwtheme) {
|
|
--tabs-border-color: @glassShadowColor@;
|
|
}
|
|
|
|
#TabsToolbar:not(:-moz-lwtheme) {
|
|
color: hsl(240,9%,98%);
|
|
}
|
|
|
|
/* Always show full-height tab separators on tabs with borders. */
|
|
.tabbrowser-tab:not(:-moz-lwtheme)::before,
|
|
.tabbrowser-tab:not(:-moz-lwtheme)::after {
|
|
border-image: none !important;
|
|
}
|
|
|
|
/* Show border on tabs with background colors and
|
|
* show the tabs toolbar background color inside tabs. */
|
|
.tabbrowser-tab:not(:-moz-lwtheme) {
|
|
background-color: hsl(235,33%,19%) !important;
|
|
border-top: 1px solid var(--tabs-border-color);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* The top border on top of the tab background is replaced
|
|
* by the slightly transparent outside tabs-border-color. */
|
|
.tab-background:not(:-moz-lwtheme) {
|
|
border-top-style: none !important;
|
|
}
|
|
|
|
/* The border at the end of the tab strip is replaced
|
|
* by the slightly transparent outside tabs-border-color. */
|
|
.tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
|
|
border-inline-end: 1px solid var(--tabs-border-color);
|
|
}
|
|
|
|
.tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (-moz-windows-compositor: 0),
|
|
(-moz-windows-default-theme: 0) {
|
|
/* Please keep the menu text colors in this media block in sync with
|
|
* compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
|
|
*/
|
|
:root[tabsintitlebar]:not([inFullscreen]) .titlebar-color:not(:-moz-lwtheme) {
|
|
color: CaptionText;
|
|
}
|
|
|
|
:root[tabsintitlebar]:not([inFullscreen]) .titlebar-color:not(:-moz-lwtheme):-moz-window-inactive {
|
|
color: InactiveCaptionText;
|
|
}
|
|
}
|
|
|
|
@media (-moz-windows-compositor: 0) {
|
|
#main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
|
|
visibility: visible;
|
|
-moz-window-dragging: drag;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* In the classic themes, the titlebar has a horizontal gradient, which is
|
|
* problematic for reading the text of background tabs when they're in the
|
|
* titlebar. We side-step this issue by layering our own background underneath
|
|
* the tabs. Unfortunately, this requires a bunch of positioning in order to get
|
|
* text and icons to not appear fuzzy.
|
|
*/
|
|
@media (-moz-windows-classic) {
|
|
/**
|
|
* We need to bump up the z-index of the tabbrowser-tabs so that they appear
|
|
* over top of the fog we're applying for classic themes, as well as the nav-bar.
|
|
*/
|
|
#main-window[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
#main-window[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
|
|
position: relative;
|
|
}
|
|
|
|
#main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme)::after {
|
|
/* Because we use placeholders for window controls etc. in the tabstrip,
|
|
* and position those with ordinal attributes, and because our layout code
|
|
* expects :before/:after nodes to come first/last in the frame list,
|
|
* we have to reorder this element to come last, hence the
|
|
* ordinal group value (see bug 853415). */
|
|
-moz-box-ordinal-group: 1001;
|
|
box-shadow: 0 0 50px 8px ActiveCaption;
|
|
content: "";
|
|
display: -moz-box;
|
|
height: 0;
|
|
margin: 0 50px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 100%;
|
|
width: -moz-available;
|
|
}
|
|
|
|
#main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
|
|
box-shadow: 0 0 50px 8px InactiveCaption;
|
|
}
|
|
|
|
#main-window[tabsintitlebar]:not([sizemode=fullscreen]) toolbar[customindex]:not(:-moz-lwtheme),
|
|
#main-window[tabsintitlebar]:not([sizemode=fullscreen]) #PersonalToolbar:not(:-moz-lwtheme) {
|
|
position: relative;
|
|
}
|
|
|
|
/* Need to constrain the box shadow fade to avoid overlapping layers, see bug 886281. */
|
|
#main-window[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
|
|
overflow: -moz-hidden-unscrollable;
|
|
}
|
|
|
|
#main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox:-moz-lwtheme {
|
|
/* Render a window top border: */
|
|
background-image: linear-gradient(to bottom,
|
|
ThreeDLightShadow 0, ThreeDLightShadow 1px,
|
|
ThreeDHighlight 1px, ThreeDHighlight 2px,
|
|
ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
|
|
}
|
|
|
|
/* End classic titlebar gradient */
|
|
|
|
#main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
|
|
/* This is needed for some toolbar button animations. Gross :( */
|
|
position: relative;
|
|
}
|
|
|
|
#nav-bar {
|
|
box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
|
|
}
|
|
@media (-moz-windows-compositor: 0) {
|
|
#TabsToolbar[collapsed="true"] + #nav-bar {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
#print-preview-toolbar:not(:-moz-lwtheme) {
|
|
-moz-appearance: toolbox;
|
|
}
|
|
|
|
#browser-bottombox:not(:-moz-lwtheme) {
|
|
background-color: -moz-dialog;
|
|
}
|
|
|
|
/* ::::: titlebar ::::: */
|
|
|
|
#main-window[sizemode="normal"] > #titlebar {
|
|
-moz-appearance: -moz-window-titlebar;
|
|
}
|
|
|
|
#main-window[sizemode="maximized"] > #titlebar {
|
|
-moz-appearance: -moz-window-titlebar-maximized;
|
|
}
|
|
|
|
@media (-moz-windows-classic) {
|
|
#main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #toolbar-menubar {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
/* 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.
|
|
*/
|
|
#titlebar-buttonbox {
|
|
z-index: 1;
|
|
}
|
|
|
|
#titlebar-buttonbox-container {
|
|
-moz-box-align: center;
|
|
}
|
|
|
|
@media (-moz-os-version: windows-win7) {
|
|
/* Preserve window control buttons position at the top of the button box. */
|
|
#titlebar-buttonbox-container {
|
|
-moz-box-align: start;
|
|
}
|
|
}
|
|
|
|
/* titlebar command buttons */
|
|
|
|
#titlebar-min {
|
|
-moz-appearance: -moz-window-button-minimize;
|
|
}
|
|
|
|
#titlebar-max {
|
|
-moz-appearance: -moz-window-button-maximize;
|
|
}
|
|
|
|
#main-window[sizemode="maximized"] #titlebar-max {
|
|
-moz-appearance: -moz-window-button-restore;
|
|
}
|
|
|
|
#titlebar-close {
|
|
-moz-appearance: -moz-window-button-close;
|
|
}
|
|
|
|
@media (-moz-windows-classic: 0) {
|
|
#titlebar-min {
|
|
margin-inline-end: 2px;
|
|
}
|
|
}
|
|
|
|
/* ::::: bookmark menus ::::: */
|
|
|
|
menu.bookmark-item,
|
|
menuitem.bookmark-item {
|
|
min-width: 0;
|
|
max-width: 32em;
|
|
}
|
|
|
|
.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
|
|
padding-inline-start: 0px;
|
|
}
|
|
|
|
.bookmark-item[cutting] > .toolbarbutton-icon,
|
|
.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.bookmark-item[cutting] > .toolbarbutton-text,
|
|
.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
|
|
%include ../shared/toolbarbuttons.inc.css
|
|
%include ../shared/toolbarbutton-icons.inc.css
|
|
%include ../shared/menupanel.inc.css
|
|
|
|
/* ::::: fullscreen window controls ::::: */
|
|
|
|
#minimize-button,
|
|
#restore-button,
|
|
#close-button {
|
|
-moz-appearance: none;
|
|
padding: 6px 12px;
|
|
-moz-context-properties: stroke;
|
|
stroke: currentColor;
|
|
color: inherit;
|
|
}
|
|
|
|
#minimize-button {
|
|
list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
|
|
}
|
|
|
|
#restore-button {
|
|
list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
|
|
}
|
|
|
|
#minimize-button:hover,
|
|
#restore-button:hover {
|
|
background-color: hsla(0,0%,0%,.12);
|
|
}
|
|
|
|
#minimize-button:hover:active,
|
|
#restore-button:hover:active {
|
|
background-color: hsla(0,0%,0%,.22);
|
|
}
|
|
|
|
#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover,
|
|
#TabsToolbar[brighttext] > #window-controls > #restore-button:hover {
|
|
background-color: hsla(0,0%,100%,.12);
|
|
}
|
|
|
|
#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover:active,
|
|
#TabsToolbar[brighttext] > #window-controls > #restore-button:hover:active {
|
|
background-color: hsla(0,0%,100%,.22);
|
|
}
|
|
|
|
#close-button {
|
|
list-style-image: url(chrome://browser/skin/window-controls/close.svg);
|
|
}
|
|
|
|
#close-button:hover {
|
|
background-color: hsl(355, 86%, 49%);
|
|
stroke: white;
|
|
}
|
|
|
|
#close-button:hover:active {
|
|
background-color: hsl(355, 82%, 69%);
|
|
}
|
|
|
|
@media (-moz-os-version: windows-win7) {
|
|
#window-controls {
|
|
-moz-box-align: start;
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
#minimize-button,
|
|
#restore-button,
|
|
#close-button {
|
|
-moz-appearance: none;
|
|
border-style: none;
|
|
margin: 0;
|
|
/* Important to ensure this applies even on toolbar[brighttext] */
|
|
list-style-image: url("chrome://global/skin/icons/windowControls.png") !important;
|
|
/* Also override background color to a avoid hover background styling
|
|
* leaking through around the image. */
|
|
background-color: transparent !important;
|
|
padding: 0;
|
|
-moz-context-properties: unset;
|
|
}
|
|
|
|
#minimize-button {
|
|
-moz-image-region: rect(0, 16px, 16px, 0);
|
|
}
|
|
|
|
#minimize-button:hover {
|
|
-moz-image-region: rect(16px, 16px, 32px, 0);
|
|
}
|
|
|
|
#minimize-button:hover:active {
|
|
-moz-image-region: rect(32px, 16px, 48px, 0);
|
|
}
|
|
|
|
#restore-button {
|
|
-moz-image-region: rect(0, 32px, 16px, 16px);
|
|
}
|
|
|
|
#restore-button:hover {
|
|
-moz-image-region: rect(16px, 32px, 32px, 16px);
|
|
}
|
|
|
|
#restore-button:hover:active {
|
|
-moz-image-region: rect(32px, 32px, 48px, 16px);
|
|
}
|
|
|
|
#close-button {
|
|
-moz-image-region: rect(0, 48px, 16px, 32px);
|
|
-moz-appearance: none;
|
|
border-style: none;
|
|
margin: 2px;
|
|
}
|
|
|
|
#close-button:hover {
|
|
-moz-image-region: rect(16px, 48px, 32px, 32px);
|
|
}
|
|
|
|
#close-button:hover:active {
|
|
-moz-image-region: rect(32px, 48px, 48px, 32px);
|
|
}
|
|
|
|
#close-button {
|
|
-moz-image-region: rect(0, 49px, 16px, 32px);
|
|
}
|
|
|
|
#close-button:hover {
|
|
-moz-image-region: rect(16px, 49px, 32px, 32px);
|
|
}
|
|
|
|
#close-button:hover:active {
|
|
-moz-image-region: rect(32px, 49px, 48px, 32px);
|
|
}
|
|
|
|
#minimize-button:-moz-locale-dir(rtl),
|
|
#restore-button:-moz-locale-dir(rtl),
|
|
#close-button:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
/* ::::: Location Bar ::::: */
|
|
|
|
%include ../shared/urlbar-searchbar.inc.css
|
|
|
|
#urlbar,
|
|
.searchbar-textbox {
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
@media (-moz-windows-default-theme: 0) {
|
|
#urlbar:not(:-moz-lwtheme):not([focused="true"]),
|
|
.searchbar-textbox:not(:-moz-lwtheme):not([focused="true"]) {
|
|
border-color: ThreeDShadow;
|
|
}
|
|
}
|
|
|
|
html|*.urlbar-input:-moz-lwtheme::placeholder,
|
|
.searchbar-textbox:-moz-lwtheme > .urlbar-textbox-container > moz-input-box > html|*.textbox-input::placeholder {
|
|
opacity: 1.0;
|
|
color: #777;
|
|
}
|
|
|
|
/* ::::: URL Bar Zoom Reset Button ::::: */
|
|
@keyframes urlbar-zoom-reset-pulse {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
75% {
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
transform: scale(1.0);
|
|
}
|
|
}
|
|
|
|
#urlbar-zoom-button {
|
|
-moz-appearance: none;
|
|
color: inherit;
|
|
}
|
|
|
|
#urlbar-search-footer {
|
|
border-top: 1px solid var(--panel-separator-color);
|
|
background-color: var(--arrowpanel-dimmed);
|
|
}
|
|
|
|
#urlbar-search-settings {
|
|
-moz-appearance: none;
|
|
-moz-user-focus: ignore;
|
|
color: GrayText;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 8px 20px;
|
|
background: transparent;
|
|
}
|
|
|
|
#urlbar-search-settings:hover {
|
|
background-color: var(--arrowpanel-dimmed);
|
|
}
|
|
|
|
#urlbar-search-settings:hover:active {
|
|
background-color: var(--arrowpanel-dimmed-further);
|
|
}
|
|
|
|
.urlbar-display {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-inline-start: 0;
|
|
color: GrayText;
|
|
}
|
|
|
|
%include ../shared/urlbarSearchSuggestionsNotification.inc.css
|
|
|
|
#search-container {
|
|
min-width: calc(54px + 11ch);
|
|
}
|
|
|
|
/* identity box */
|
|
|
|
#identity-box:not(:active):-moz-focusring {
|
|
outline: 1px dotted;
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
%include ../shared/identity-block/identity-block.inc.css
|
|
|
|
/* autocomplete */
|
|
|
|
%include ../shared/autocomplete.inc.css
|
|
%include ../shared/urlbar-autocomplete.inc.css
|
|
|
|
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
|
|
border-top: 1px solid ThreeDShadow;
|
|
}
|
|
|
|
.ac-title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ac-tags {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ac-separator,
|
|
.ac-url,
|
|
.ac-action {
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (-moz-windows-default-theme) {
|
|
:root {
|
|
--urlbar-popup-url-color: hsl(210, 77%, 47%);
|
|
--urlbar-popup-action-color: hsl(178, 100%, 28%);
|
|
}
|
|
}
|
|
|
|
@media (-moz-windows-default-theme: 0) {
|
|
:root {
|
|
--urlbar-popup-url-color: -moz-nativehyperlinktext;
|
|
--urlbar-popup-action-color: -moz-nativehyperlinktext;
|
|
}
|
|
}
|
|
|
|
/* bookmarking panel */
|
|
|
|
%include ../shared/places/editBookmarkPanel.inc.css
|
|
|
|
/* ::::: content area ::::: */
|
|
|
|
%include ../shared/sidebar.inc.css
|
|
|
|
#browser {
|
|
--sidebar-border-color: ThreeDLightShadow;
|
|
}
|
|
|
|
.browserContainer > findbar {
|
|
background-color: -moz-dialog;
|
|
color: -moz-DialogText;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.browserContainer > findbar:-moz-lwtheme {
|
|
background-color: var(--toolbar-bgcolor);
|
|
color: var(--toolbar-color, -moz-DialogText);
|
|
}
|
|
|
|
/* Tabstrip */
|
|
|
|
#TabsToolbar {
|
|
min-height: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
%include ../shared/tabs.inc.css
|
|
|
|
@media (-moz-windows-default-theme: 0) {
|
|
/* For high contrast themes. */
|
|
#tabbrowser-tabpanels,
|
|
:root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
|
|
background-color: -moz-default-background-color;
|
|
}
|
|
}
|
|
|
|
/* tabbrowser-tab focus ring */
|
|
.tabbrowser-tab:focus > .tab-stack > .tab-content {
|
|
outline: 1px dotted;
|
|
outline-offset: -6px;
|
|
}
|
|
|
|
/* Tab DnD indicator */
|
|
.tab-drop-indicator {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
|
|
margin-bottom: -9px;
|
|
z-index: 3;
|
|
}
|
|
|
|
/* All tabs menupopup */
|
|
|
|
.alltabs-item[selected="true"] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Bookmarks toolbar */
|
|
#PlacesToolbarDropIndicator {
|
|
list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
|
|
}
|
|
|
|
toolbarbutton.bookmark-item[dragover="true"][open="true"] {
|
|
-moz-appearance: none;
|
|
background: Highlight !important;
|
|
color: HighlightText !important;
|
|
}
|
|
|
|
/* rules for menupopup drop indicators */
|
|
.menupopup-drop-indicator-bar {
|
|
position: relative;
|
|
/* these two margins must together compensate the indicator's height */
|
|
margin-top: -1px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.menupopup-drop-indicator {
|
|
list-style-image: none;
|
|
height: 2px;
|
|
margin-inline-end: -4em;
|
|
background-color: Highlight;
|
|
}
|
|
|
|
%include ../shared/notification-icons.inc.css
|
|
|
|
.popup-notification-body[popupid="addon-progress"],
|
|
.popup-notification-body[popupid="addon-install-confirmation"] {
|
|
width: 28em;
|
|
max-width: 28em;
|
|
}
|
|
|
|
.addon-install-confirmation-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
html|*.addon-webext-perm-list {
|
|
margin-block-end: 0;
|
|
padding-inline-start: 10px;
|
|
}
|
|
|
|
.addon-webext-perm-text {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.popup-notification-description[popupid="addon-webext-permissions"],
|
|
.popup-notification-description[popupid="addon-webext-permissions-notification"] {
|
|
margin-inline-start: -1px;
|
|
}
|
|
|
|
.addon-webext-perm-notification-content,
|
|
.addon-installed-notification-content {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.addon-webext-name {
|
|
display: inline;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.addon-addon-icon,
|
|
.addon-toolbar-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
vertical-align: bottom;
|
|
margin-bottom: 1px;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.addon-addon-icon {
|
|
list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg");
|
|
}
|
|
|
|
.addon-toolbar-icon {
|
|
list-style-image: url("chrome://browser/skin/menu.svg");
|
|
}
|
|
|
|
/* Notification icon box */
|
|
|
|
.notification-anchor-icon:-moz-focusring {
|
|
outline: 1px dotted -moz-DialogText;
|
|
}
|
|
|
|
/* Translation infobar */
|
|
|
|
%include ../shared/translation/infobar.inc.css
|
|
|
|
notification[value="translation"] {
|
|
min-height: 40px;
|
|
}
|
|
|
|
@media (-moz-windows-default-theme) {
|
|
notification[value="translation"],
|
|
notification[value="translation"] button,
|
|
notification[value="translation"] menulist {
|
|
min-height: 30px;
|
|
color: #545454;
|
|
}
|
|
|
|
notification[value="translation"] {
|
|
background-color: #EEE;
|
|
}
|
|
|
|
notification[value="translation"] button,
|
|
notification[value="translation"] menulist {
|
|
padding-inline-end: 1ch;
|
|
}
|
|
|
|
notification[value="translation"] menulist {
|
|
border: 1px solid #C1C1C1;
|
|
background-color: #FFF;
|
|
}
|
|
|
|
notification[value="translation"] button {
|
|
border: 1px solid #C1C1C1;
|
|
background-color: #FBFBFB;
|
|
}
|
|
|
|
notification[value="translation"] button,
|
|
notification[value="translation"] menulist,
|
|
notification[value="translation"] menulist > .menulist-label-box {
|
|
margin-inline-start: 1ch;
|
|
margin-inline-end: 1ch;
|
|
}
|
|
|
|
notification[value="translation"] button:hover,
|
|
notification[value="translation"] button:active,
|
|
notification[value="translation"] menulist:hover,
|
|
notification[value="translation"] menulist:active {
|
|
background-color: #EBEBEB;
|
|
}
|
|
|
|
notification[value="translation"] button[anonid="translate"] {
|
|
color: #FFF;
|
|
background-color: #0095DD;
|
|
box-shadow: none;
|
|
border: 1px solid #006B9D;
|
|
}
|
|
|
|
notification[value="translation"] button[anonid="translate"]:hover,
|
|
notification[value="translation"] button[anonid="translate"]:active {
|
|
background-color: #008ACB;
|
|
}
|
|
|
|
notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
|
|
notification[value="translation"] menulist > .menulist-dropmarker {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
|
|
}
|
|
notification[value="translation"] menulist > .menulist-dropmarker > .dropmarker-icon {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
notification[value="translation"] button > .button-box,
|
|
notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker {
|
|
padding: 0;
|
|
margin-inline-start: 3ch;
|
|
}
|
|
|
|
notification[value="translation"] button:not([type="menu"]) > .button-box {
|
|
margin-inline-end: 3ch;
|
|
}
|
|
}
|
|
|
|
.translation-menupopup {
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
/* Bookmarks roots menu-items */
|
|
#subscribeToPageMenuitem:not([disabled]),
|
|
#subscribeToPageMenupopup {
|
|
list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
|
|
}
|
|
|
|
#bookmarksToolbarFolderMenu,
|
|
#BMB_bookmarksToolbar,
|
|
#panelMenu_bookmarksToolbar {
|
|
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
|
|
-moz-image-region: auto;
|
|
}
|
|
|
|
#menu_unsortedBookmarks,
|
|
#BMB_unsortedBookmarks,
|
|
#panelMenu_unsortedBookmarks {
|
|
list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg");
|
|
-moz-image-region: auto;
|
|
}
|
|
|
|
/* Status panel */
|
|
|
|
#statuspanel-label {
|
|
margin: 0;
|
|
padding: 2px 4px;
|
|
background-color: -moz-dialog;
|
|
border: 1px none ThreeDLightShadow;
|
|
border-top-style: solid;
|
|
color: -moz-dialogText;
|
|
text-shadow: none;
|
|
}
|
|
|
|
@media (-moz-windows-default-theme) {
|
|
#statuspanel-label {
|
|
background-color: #f9f9fa;
|
|
color: #444;
|
|
}
|
|
}
|
|
|
|
#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr),
|
|
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) {
|
|
border-right-style: solid;
|
|
/* disabled for triggering grayscale AA (bug 659213)
|
|
border-top-right-radius: .3em;
|
|
*/
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl),
|
|
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) {
|
|
border-left-style: solid;
|
|
/* disabled for triggering grayscale AA (bug 659213)
|
|
border-top-left-radius: .3em;
|
|
*/
|
|
margin-left: 1em;
|
|
}
|
|
|
|
%include ../shared/fullscreen/warning.inc.css
|
|
%include ../shared/ctrlTab.inc.css
|
|
|
|
/* Customization mode */
|
|
|
|
%include ../shared/customizableui/customizeMode.inc.css
|
|
|
|
/**
|
|
* This next rule is a hack to disable subpixel anti-aliasing on all
|
|
* labels during the customize mode transition. Subpixel anti-aliasing
|
|
* on Windows with Direct2D layers acceleration is particularly slow to
|
|
* paint, so this hack is how we sidestep that performance bottleneck.
|
|
*/
|
|
#main-window:-moz-any([customize-entering],[customize-exiting]) label {
|
|
transform: perspective(0.01px);
|
|
}
|
|
|
|
/* End customization mode */
|
|
|
|
/* Private browsing and accessibility indicators */
|
|
|
|
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .private-browsing-indicator,
|
|
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .accessibility-indicator,
|
|
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .private-browsing-indicator,
|
|
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .accessibility-indicator {
|
|
margin-top: calc(-1 * var(--space-above-tabbar));
|
|
}
|
|
|
|
/* Compensate for 4px extra margin on top of the tabs toolbar on Windows 7. */
|
|
@media (-moz-os-version: windows-win7) {
|
|
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .private-browsing-indicator,
|
|
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .accessibility-indicator,
|
|
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .private-browsing-indicator,
|
|
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .accessibility-indicator {
|
|
margin-top: calc(-1 * (var(--space-above-tabbar) + 4px));
|
|
}
|
|
}
|
|
|
|
:root:not([privatebrowsingmode=temporary]) .accessibility-indicator,
|
|
.private-browsing-indicator {
|
|
margin-inline-end: 12px;
|
|
}
|
|
|
|
:root:not([accessibilitymode]) .private-browsing-indicator,
|
|
.accessibility-indicator {
|
|
margin-inline-start: 12px;
|
|
}
|
|
|
|
/* End private browsing and accessibility indicators */
|
|
|
|
%include ../shared/UITour.inc.css
|
|
|
|
#UITourTooltipButtons {
|
|
/**
|
|
* Override the --arrowpanel-padding so the background extends
|
|
* to the sides and bottom of the panel.
|
|
*/
|
|
margin-left: -10px;
|
|
margin-right: -10px;
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
%include ../shared/contextmenu.inc.css
|
|
|
|
/* Make menu items larger when opened through touch. */
|
|
#widget-overflow[touchmode] .toolbarbutton-1,
|
|
panel[touchmode] .PanelUI-subView .subviewbutton,
|
|
menupopup[touchmode] menu,
|
|
menupopup[touchmode] menuitem {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
panel[touchmode] .PanelUI-subView #appMenu-edit-controls > .subviewbutton,
|
|
panel[touchmode] .PanelUI-subView #appMenu-zoom-controls > .subviewbutton-iconic {
|
|
padding-inline-start: 12px;
|
|
padding-inline-end: 12px;
|
|
}
|
|
|
|
#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
#context-navigation {
|
|
background-color: menu;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
#context-sep-navigation {
|
|
margin-inline-start: -28px;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
%include browser-aero.css
|
|
|
|
.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (-moz-os-version: windows-win7) {
|
|
.cui-widget-panelview[id^=PanelUI-webext-] {
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.webextension-popup-browser,
|
|
.webextension-popup-stack {
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.contentSelectDropdown-ingroup > .menu-iconic-text {
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup > menucaption,
|
|
#ContentSelectDropdown > menupopup > menuitem {
|
|
padding: 0 6px;
|
|
border-width: 0;
|
|
font: -moz-list;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
|
|
#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
|
|
/* Padding should follow the 4/12 ratio, where 12px is the default font-size
|
|
with 4px being the preferred padding size. */
|
|
padding-top: .3333em;
|
|
padding-bottom: .3333em;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
|
|
color: GrayText;
|
|
background-color: unset;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup > menucaption {
|
|
background-color: buttonface;
|
|
}
|
|
|
|
#ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
|
|
color: GrayText;
|
|
}
|
|
|
|
#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
|
|
#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
|
|
/* Touch padding should follow the 11/12 ratio, where 12px is the default
|
|
font-size with 11px being the preferred padding size. */
|
|
padding-top: .9167em;
|
|
padding-bottom: .9167em;
|
|
}
|