mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-31 14:15:30 +00:00
4be83d4a79
--HG-- extra : rebase_source : 73711c1bd03f2316086fe0b752105a4239218eaf
1327 lines
31 KiB
CSS
1327 lines
31 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/. */
|
|
|
|
%filter substitution
|
|
%include defines.inc
|
|
|
|
%define forward_transition_length 200ms
|
|
%define forward_spacing 50px
|
|
|
|
/* Tab/StartUI tray ======================================================== */
|
|
|
|
#tray {
|
|
transition: transform @metro_animation_duration@ @metro_animation_easing@;
|
|
transform: translateY(-@tabs_height@);
|
|
width: 100%;
|
|
}
|
|
|
|
#tray {
|
|
position: fixed;
|
|
}
|
|
|
|
#tray[expanded]:not([viewstate="snapped"]) {
|
|
transform: none;
|
|
}
|
|
|
|
/* Tabs -------------------------------------------------------------------- */
|
|
|
|
#tabs-container {
|
|
background: @panel_dark_color@ @panel_dark_background@;
|
|
padding: 0;
|
|
-moz-padding-start: @metro_spacing_normal@;
|
|
width: 100%;
|
|
}
|
|
|
|
#tabs {
|
|
-moz-padding-start: 0;
|
|
}
|
|
|
|
#tabs .tabs-list {
|
|
display: block;
|
|
-moz-user-focus: ignore;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
#tabs[input="precise"] > .tabs-scrollbox > .scrollbutton-up {
|
|
visibility: visible !important;
|
|
}
|
|
#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up {
|
|
visibility: hidden !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-down {
|
|
visibility: collapse !important;
|
|
}
|
|
|
|
#tabs > .tabs-scrollbox > .scrollbutton-up {
|
|
list-style-image: url("images/tab-arrows.png") !important;
|
|
-moz-image-region: rect(15px 58px 63px 14px) !important;
|
|
padding-right: 13px;
|
|
}
|
|
#tabs > .tabs-scrollbox > .scrollbutton-up:hover {
|
|
-moz-image-region: rect(14px 102px 62px 58px) !important;
|
|
}
|
|
#tabs > .tabs-scrollbox > .scrollbutton-up:active {
|
|
-moz-image-region: rect(14px 152px 62px 108px) !important;
|
|
}
|
|
#tabs > .tabs-scrollbox > .scrollbutton-up[disabled] {
|
|
-moz-image-region: rect(15px 196px 63px 152px) !important;
|
|
}
|
|
|
|
#tabs > .tabs-scrollbox > .scrollbutton-down {
|
|
list-style-image: url("images/tab-arrows.png") !important;
|
|
-moz-image-region: rect(73px 58px 121px 14px) !important;
|
|
padding-left: 16px;
|
|
}
|
|
#tabs > .tabs-scrollbox > .scrollbutton-down:hover {
|
|
-moz-image-region: rect(72px 102px 120px 58px) !important;
|
|
}
|
|
#tabs > .tabs-scrollbox > .scrollbutton-down:active {
|
|
-moz-image-region: rect(72px 152px 120px 108px) !important;
|
|
}
|
|
#tabs > .tabs-scrollbox > .scrollbutton-down[disabled] {
|
|
-moz-image-region: rect(73px 196px 121px 152px) !important;
|
|
}
|
|
|
|
#tabs-container[viewstate="snapped"] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@-moz-keyframes open-documenttab {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0, 0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes close-documenttab {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0, 0);
|
|
}
|
|
}
|
|
|
|
.documenttab-container {
|
|
animation: open-documenttab 0.4s ease-out;
|
|
}
|
|
|
|
documenttab[closing] > .documenttab-container {
|
|
animation: close-documenttab 0.4s ease-out;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.documenttab-favicon {
|
|
visibility: collapse;
|
|
}
|
|
|
|
.documenttab-thumbnail {
|
|
margin: @metro_spacing_normal@ @metro_spacing_snormal@;
|
|
background: white none center top no-repeat;
|
|
background-size: cover;
|
|
min-width: @thumbnail_width@;
|
|
width: @thumbnail_width@;
|
|
height: @thumbnail_height@;
|
|
}
|
|
#tray:not([expanded]) .documenttab-thumbnail {
|
|
background-image: none!important;
|
|
}
|
|
|
|
.documenttab-title {
|
|
margin: @metro_spacing_normal@ @metro_spacing_snormal@;
|
|
margin-top: 0;
|
|
font-size: @metro_font_normal@;
|
|
width: @thumbnail_width@;
|
|
padding: 4px @metro_spacing_snormal@ 8px;
|
|
|
|
background: #000;
|
|
opacity: 0.95;
|
|
color: #fff;
|
|
box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.documenttab-crop {
|
|
background: transparent url("chrome://browser/skin/images/tab-crop.png") 50% 50% no-repeat;
|
|
}
|
|
|
|
.documenttab-selection {
|
|
background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 0%, 100%, 50%, 0%) 50% 50% no-repeat;
|
|
}
|
|
|
|
documenttab[selected] .documenttab-selection {
|
|
background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 50%, 100%, 100%, 0%) 50% 50% no-repeat;
|
|
}
|
|
|
|
.documenttab-close {
|
|
background: none !important;
|
|
padding: @metro_spacing_small@ !important;
|
|
margin-top: @metro_spacing_snormal@;
|
|
-moz-margin-end: @metro_spacing_xsmall@;
|
|
border-color: transparent !important;
|
|
list-style-image: url("chrome://browser/skin/images/closetab-default.png");
|
|
}
|
|
|
|
.documenttab-close > .button-box > .button-text {
|
|
display: none;
|
|
}
|
|
|
|
#tabs-controls {
|
|
-moz-box-align: start;
|
|
-moz-box-orient: vertical;
|
|
}
|
|
|
|
#newtab-button {
|
|
list-style-image: url(chrome://browser/skin/images/newtab-default.png);
|
|
|
|
/* Add some extra padding for a larger target */
|
|
padding: 18px 20px 30px 20px;
|
|
}
|
|
|
|
/* Start UI ----------------------------------------------------------------- */
|
|
|
|
#content-viewport[startpage] browser {
|
|
padding-bottom: @toolbar_height@;
|
|
}
|
|
|
|
#startui-page {
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
#startui-page[viewstate="snapped"],
|
|
#startui-page[viewstate="portrait"] {
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#startui-body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
#start-container {
|
|
height: 100%;
|
|
}
|
|
|
|
#urlbar-autocomplete[viewstate="snapped"],
|
|
#urlbar-autocomplete[viewstate="portrait"]{
|
|
-moz-box-orient: vertical;
|
|
}
|
|
|
|
#start-container[viewstate="snapped"],
|
|
#start-container[viewstate="portrait"] {
|
|
width: 100%;
|
|
max-width: 100%; /* ensure page doesn't expand, messing up @media rules */
|
|
height: auto;
|
|
}
|
|
|
|
#start-container[viewstate="snapped"] .meta-section:not([expanded]) > richgrid {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#autocomplete-overlay {
|
|
display: none;
|
|
background-color: black;
|
|
opacity: .3;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
#stack[autocomplete] > #page > #content-viewport > #autocomplete-overlay {
|
|
display: -moz-box;
|
|
}
|
|
|
|
/* Browser Content Areas ==================================================== */
|
|
|
|
/* a 'margin-top' is applied dynamically in ContentAreaObserver */
|
|
#browsers {
|
|
background: white;
|
|
transition-property: margin-top;
|
|
transition-duration: .3s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
#browsers browser {
|
|
/* unset padding-bottom immediately */
|
|
transition-duration: 0s;
|
|
transition-delay: 0s;
|
|
transition-property: padding-bottom;
|
|
}
|
|
/* Selection overlay and monocles */
|
|
#page,
|
|
.selection-overlay {
|
|
-moz-stack-sizing: ignore;
|
|
}
|
|
|
|
.selection-overlay {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.selection-overlay:-moz-focusring {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
.selection-overlay-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.selectionhandle {
|
|
background-image: url("chrome://browser/skin/images/selection-monocle.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 18px 18px;
|
|
padding: 0px;
|
|
margin-top: -19px;
|
|
margin-left: -9px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
/* Load 140% image when scaled by 140% */
|
|
.selectionhandle {
|
|
background-image: url("chrome://browser/skin/images/selection-monocle@1.4x.png");
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
/* Load 180% image when scaled by 180% */
|
|
.selectionhandle {
|
|
background-image: url("chrome://browser/skin/images/selection-monocle@1.8x.png");
|
|
}
|
|
}
|
|
|
|
/* content scrollbars */
|
|
.scroller {
|
|
opacity: 0;
|
|
background-color: rgba(0, 0, 0, 0.4) !important;
|
|
-moz-border-top-colors: none !important;
|
|
-moz-border-bottom-colors: none !important;
|
|
-moz-border-right-colors: none !important;
|
|
-moz-border-left-colors: none !important;
|
|
border-radius: @border_radius_tiny@;
|
|
border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
|
|
}
|
|
|
|
.scroller[panning] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.scroller[orient="vertical"] {
|
|
min-width: @scroller_thickness@;
|
|
width: @scroller_thickness@;
|
|
min-height: @scroller_minimum@;
|
|
}
|
|
|
|
.scroller[orient="horizontal"] {
|
|
min-height: @scroller_thickness@;
|
|
height: @scroller_thickness@;
|
|
min-width: @scroller_minimum@;
|
|
}
|
|
|
|
/* overlay buttons */
|
|
|
|
.overlay-button {
|
|
position: fixed;
|
|
top: 50%;
|
|
margin-top: -65px;
|
|
width: 118px;
|
|
height: 118px;
|
|
background-color: hsla(210,30%,10%,.2);
|
|
background-size: 60px;
|
|
background-repeat: no-repeat;
|
|
background-origin: padding-box;
|
|
background-clip: padding-box;
|
|
border: 6px solid hsla(0,0%,100%,.7);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
|
|
0 0 9px 0 hsla(0,0%,0%,.1);
|
|
transition-property: left, right, transform, background-position,
|
|
background-color, background-size, border-color,
|
|
visibility, box-shadow, top;
|
|
transition-duration: 550ms;
|
|
transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
|
|
}
|
|
|
|
#overlay-back {
|
|
background-image: url(chrome://browser/skin/images/overlay-back.png);
|
|
}
|
|
|
|
#overlay-plus {
|
|
background-image: url(chrome://browser/skin/images/overlay-plus.png);
|
|
}
|
|
|
|
#overlay-back:-moz-locale-dir(ltr),
|
|
#overlay-plus:-moz-locale-dir(rtl) {
|
|
left: -70px;
|
|
background-position: right 6px center;
|
|
}
|
|
|
|
#overlay-plus:-moz-locale-dir(ltr),
|
|
#overlay-back:-moz-locale-dir(rtl) {
|
|
right: -70px;
|
|
background-position: left 6px center;
|
|
}
|
|
|
|
#stack[viewstate="snapped"] > .overlay-button,
|
|
#stack[keyboardVisible] > .overlay-button,
|
|
#stack[autocomplete] > .overlay-button,
|
|
#stack[fullscreen] > .overlay-button,
|
|
#appbar[visible] ~ .overlay-button,
|
|
.overlay-button[disabled] {
|
|
box-shadow: none;
|
|
visibility: collapse;
|
|
}
|
|
|
|
#stack[keyboardVisible] > #overlay-back:-moz-locale-dir(ltr),
|
|
#stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(rtl),
|
|
#stack[autocomplete] > #overlay-back:-moz-locale-dir(ltr),
|
|
#stack[autocomplete] > #overlay-plus:-moz-locale-dir(rtl),
|
|
#stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
|
|
#stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
|
|
#appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
|
|
#appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
|
|
#overlay-back[disabled]:-moz-locale-dir(ltr),
|
|
#overlay-plus[disabled]:-moz-locale-dir(rtl) {
|
|
transform: translateX(-60px);
|
|
}
|
|
|
|
#stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(ltr),
|
|
#stack[keyboardVisible] > #overlay-back:-moz-locale-dir(rtl),
|
|
#stack[autocomplete] > #overlay-plus:-moz-locale-dir(ltr),
|
|
#stack[autocomplete] > #overlay-back:-moz-locale-dir(rtl),
|
|
#stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
|
|
#stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
|
|
#appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
|
|
#appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
|
|
#overlay-plus[disabled]:-moz-locale-dir(ltr),
|
|
#overlay-back[disabled]:-moz-locale-dir(rtl) {
|
|
transform: translateX(60px);
|
|
}
|
|
|
|
.overlay-button:hover {
|
|
background-color: hsla(210,30%,10%,.4);
|
|
background-size: 90px;
|
|
border-color: hsla(0,0%,100%,.9);
|
|
}
|
|
|
|
#overlay-back:-moz-locale-dir(ltr):hover,
|
|
#overlay-plus:-moz-locale-dir(rtl):hover {
|
|
background-position: right 12px center;
|
|
transform: translateX(40px) scale(1.2);
|
|
}
|
|
|
|
#overlay-plus:-moz-locale-dir(ltr):hover,
|
|
#overlay-back:-moz-locale-dir(rtl):hover {
|
|
background-position: left 12px center;
|
|
transform: translateX(-40px) scale(1.2);
|
|
}
|
|
|
|
#overlay-back[mousedrag],
|
|
#overlay-plus[mousedrag] {
|
|
transition-property: left, right, transform, background-position,
|
|
background-color, background-size, border-color,
|
|
visibility, box-shadow;
|
|
}
|
|
|
|
/* Navigation bar ========================================================== */
|
|
|
|
/* Most appbars are hidden by default, but we want to keep #navbar visible so
|
|
* we can show the progress bar at all times. Instead, we hide only the
|
|
* toolbar portion of the navbar. */
|
|
#navbar {
|
|
visibility: visible;
|
|
}
|
|
#navbar:not([hiding]):not([visible]) > #toolbar-overlay {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Progress meter ---------------------------------------------------------- */
|
|
|
|
#progress-container {
|
|
display: block;
|
|
position: absolute;
|
|
top: -@progress_height@;
|
|
height: @progress_height@;
|
|
width: 100%;
|
|
background-color: hsla(210,5%,80%,1);
|
|
box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
|
|
-moz-user-focus: ignore;
|
|
}
|
|
#progress-container[startpage] {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#progress-control {
|
|
display: block;
|
|
height: @progress_height@;
|
|
background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5),
|
|
hsla(200,100%,83%,0)),
|
|
-moz-linear-gradient(top, #1ab2ff, #0091ff);
|
|
border-right: 1px solid #0082e5;
|
|
transition: width .3s ease-in;
|
|
-moz-user-focus: ignore;
|
|
}
|
|
|
|
#progress-control:-moz-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
#progress-control[fade] {
|
|
opacity: 0;
|
|
transition: width .3s ease-in, .5s opacity ease-in;
|
|
}
|
|
|
|
/* Toolbar ----------------------------------------------------------------- */
|
|
|
|
#toolbar-overlay {
|
|
background-color: @panel_light_color@;
|
|
}
|
|
|
|
#urlbar-autocomplete {
|
|
padding-top: 0;
|
|
}
|
|
|
|
#toolbar {
|
|
padding: 0 @toolbar_horizontal_padding@;
|
|
}
|
|
|
|
#toolbar[viewstate="snapped"] {
|
|
padding: 0 @toolbar_snapped_horizontal_padding@;
|
|
}
|
|
|
|
#toolbar[viewstate="snapped"] > toolbarbutton {
|
|
margin: 0 @toolbar_snapped_horizontal_spacing@;
|
|
}
|
|
|
|
/* Combined back/forward buttons */
|
|
|
|
#back-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-back.png);
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: opacity @forward_transition_length@ ease-out;
|
|
}
|
|
|
|
#back-button[disabled] {
|
|
visibility: visible;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#forward-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
|
|
transition: margin @forward_transition_length@ ease-out,
|
|
visibility @forward_transition_length@ ease-out,
|
|
opacity @forward_transition_length@ ease-out;
|
|
}
|
|
|
|
#forward-button[disabled] {
|
|
-moz-margin-start: -@forward_spacing@ !important;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
#back-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
|
|
}
|
|
|
|
#forward-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
#back-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
|
|
}
|
|
|
|
#forward-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
|
|
}
|
|
}
|
|
|
|
/* URL bar */
|
|
#urlbar {
|
|
border: @metro_border_thick@ solid @urlbar_border_color@;
|
|
margin: 0 @toolbar_horizontal_spacing@;
|
|
padding: 0;
|
|
background-color: @field_background_color@;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#urlbar[editing] {
|
|
border-color: @metro_orange@;
|
|
}
|
|
|
|
/* Identity widget */
|
|
#identity-icon {
|
|
margin: 0;
|
|
padding: 0 @metro_spacing_snormal@;
|
|
list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
|
|
}
|
|
|
|
#identity-box.verifiedDomain > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
|
|
}
|
|
|
|
#identity-box.verifiedIdentity > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
|
|
}
|
|
|
|
#toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/icons-identity-firefox.png");
|
|
}
|
|
|
|
#urlbar[autocomplete] > #identity-box > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search.png");
|
|
}
|
|
|
|
/* Main URL textbox */
|
|
#urlbar-edit {
|
|
margin: 0 !important;
|
|
min-height: @urlbar_edit_height@;
|
|
-moz-appearance: none !important;
|
|
border-radius: 0;
|
|
border: 0 none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
#urlbar-edit > hbox > .textbox-input-box > .textbox-input:invalid {
|
|
/* Hide error glow around the address bar that shows by default
|
|
* when URLs are made invalid by trmming. */
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Combined stop-reload button */
|
|
.urlbar-button {
|
|
margin: 0;
|
|
-moz-image-region: rect(0px, 30px, 30px, 0px);
|
|
}
|
|
|
|
.urlbar-button:hover:not(:active) {
|
|
-moz-image-region: rect(0px, 60px, 30px, 30px);
|
|
background-color: #dedfdf;
|
|
}
|
|
|
|
.urlbar-button:active {
|
|
-moz-image-region: rect(0px, 90px, 30px, 60px);
|
|
background-color: #6d7073;
|
|
}
|
|
|
|
.urlbar-button > .toolbarbutton-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
#go-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-go.png)
|
|
}
|
|
|
|
#reload-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-reload.png);
|
|
}
|
|
|
|
#stop-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-stop.png);
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
.urlbar-button {
|
|
-moz-image-region: rect(0px, 42px, 42px, 0px);
|
|
}
|
|
|
|
.urlbar-button:hover:not(:active) {
|
|
-moz-image-region: rect(0px, 84px, 42px, 42px);
|
|
}
|
|
|
|
.urlbar-button:active {
|
|
-moz-image-region: rect(0px, 126px, 42px, 84px);
|
|
}
|
|
|
|
#go-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-go@1.4x.png)
|
|
}
|
|
|
|
#reload-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.4x.png);
|
|
}
|
|
|
|
#stop-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.4x.png);
|
|
}
|
|
|
|
#toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.4x.png");
|
|
}
|
|
|
|
#urlbar[autocomplete] > #identity-box > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.4x.png");
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
.urlbar-button {
|
|
-moz-image-region: rect(0px, 54px, 54px, 0px);
|
|
}
|
|
|
|
.urlbar-button:hover:not(:active) {
|
|
-moz-image-region: rect(0px, 108px, 54px, 54px);
|
|
}
|
|
|
|
.urlbar-button:active {
|
|
-moz-image-region: rect(0px, 162px, 54px, 108px);
|
|
}
|
|
|
|
#go-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-go@1.8x.png)
|
|
}
|
|
|
|
#reload-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.8x.png);
|
|
}
|
|
|
|
#stop-button {
|
|
list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.8x.png);
|
|
}
|
|
|
|
#toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.8x.png");
|
|
}
|
|
|
|
#urlbar[autocomplete] > #identity-box > #identity-icon {
|
|
list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.8x.png");
|
|
}
|
|
}
|
|
|
|
/* navbar edit button: one button out of three - when editing: go, when !editing,
|
|
loading: stop, when !editing, !loading: reload */
|
|
|
|
#go-button, #reload-button, #stop-button {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#urlbar[editing] > #go-button,
|
|
#urlbar:not([editing])[loading] > #stop-button,
|
|
#urlbar:not([editing]):not([loading]) > #reload-button {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Contextual toolbar controls */
|
|
|
|
#toolbar-context-autocomplete,
|
|
.hide-on-start,
|
|
#toolbar-context-page {
|
|
transition-property: opacity, visibility;
|
|
transition-duration: @forward_transition_length@;
|
|
transition-timing-function: @metro_animation_easing@;
|
|
}
|
|
|
|
#toolbar-contextual:not([autocomplete]) #toolbar-context-autocomplete,
|
|
#toolbar-contextual[startpage] .hide-on-start,
|
|
#toolbar-contextual[autocomplete] #toolbar-context-page {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#toolbar[viewstate="snapped"] #toolbar-contextual {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#download-progress:not([progress]) {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#download-progress {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-download.png);
|
|
}
|
|
|
|
#pin-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
|
|
}
|
|
|
|
#star-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-star.png);
|
|
}
|
|
|
|
#menu-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
#download-progress {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-download@1.4x.png);
|
|
}
|
|
|
|
#pin-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
|
|
}
|
|
|
|
#star-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
|
|
}
|
|
|
|
#menu-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
#download-progress {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-download@1.8x.png);
|
|
}
|
|
|
|
#pin-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
|
|
}
|
|
|
|
#star-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
|
|
}
|
|
|
|
#menu-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
|
|
}
|
|
}
|
|
|
|
#close-button {
|
|
-moz-image-region: rect(0px, 480px, 40px, 440px);
|
|
}
|
|
|
|
#close-button:hover:not(:active) {
|
|
-moz-image-region: rect(40px, 480px, 80px, 440px);
|
|
}
|
|
|
|
#close-button:active {
|
|
-moz-image-region: rect(80px, 480px, 120px, 440px);
|
|
}
|
|
|
|
/* Panel UI ================================================================ */
|
|
|
|
#panel-container {
|
|
padding: 60px 40px;
|
|
}
|
|
|
|
#panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
|
|
-moz-box-orient: horizontal;
|
|
}
|
|
|
|
#panel-close-button {
|
|
-moz-margin-end: 40px;
|
|
list-style-image: url(chrome://browser/skin/images/navbar-back.png);
|
|
-moz-box-pack: center;
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
#panel-close-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
#panel-close-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
|
|
}
|
|
}
|
|
|
|
#panel-items {
|
|
padding-top: 20px;
|
|
-moz-padding-start: 88px;
|
|
}
|
|
|
|
#panel-container[viewstate="snapped"] #panel-items {
|
|
padding-left: 0px;
|
|
}
|
|
|
|
/* Console Section - Panel UI ---------------------------------------------- */
|
|
|
|
#console-filter-warnings,
|
|
#console-filter-messages {
|
|
visibility: visible;
|
|
}
|
|
|
|
@media (max-width: 499px) {
|
|
#console-filter-warnings,
|
|
#console-filter-messages {
|
|
visibility: collapse;
|
|
}
|
|
}
|
|
|
|
.console-error-msg,
|
|
.console-msg-text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Find bar ================================================================ */
|
|
|
|
#findbar {
|
|
background-color: @metro_orange@;
|
|
padding: 0;
|
|
}
|
|
|
|
#findbar > toolbar {
|
|
min-height: @findbar_height@ !important;
|
|
}
|
|
|
|
#findbar-textbox {
|
|
border: none !important;
|
|
width: 20em;
|
|
}
|
|
|
|
/* Override the default box ordering and make the find textbox appear to the
|
|
right of the icon */
|
|
#findbar-textbox input {
|
|
-moz-box-ordinal-group: 2
|
|
}
|
|
|
|
#findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
|
|
background: rgb(255,200,200);
|
|
}
|
|
|
|
#findbar-textbox:hover:active {
|
|
background: #8db8d8;
|
|
}
|
|
|
|
.textbox-search-icon {
|
|
list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
|
|
-moz-image-region: auto;
|
|
}
|
|
|
|
#findbar-previous-button {
|
|
-moz-image-region: rect(0px, 400px, 40px, 360px);
|
|
}
|
|
|
|
#findbar-previous-button:hover:not(:active) {
|
|
-moz-image-region: rect(40px, 400px, 80px, 360px);
|
|
}
|
|
|
|
#findbar-previous-button:active {
|
|
-moz-image-region: rect(80px, 400px, 120px, 360px);
|
|
}
|
|
|
|
#findbar-next-button {
|
|
-moz-image-region: rect(0px, 440px, 40px, 400px);
|
|
}
|
|
|
|
#findbar-next-button:hover:not(:active) {
|
|
-moz-image-region: rect(40px, 440px, 80px, 400px);
|
|
}
|
|
|
|
#findbar-next-button:active {
|
|
-moz-image-region: rect(80px, 440px, 120px, 400px);
|
|
}
|
|
|
|
#findbar-close-button {
|
|
-moz-image-region: rect(0px, 480px, 40px, 440px);
|
|
}
|
|
|
|
#findbar-close-button:hover:not(:active) {
|
|
-moz-image-region: rect(40px, 480px, 80px, 440px);
|
|
}
|
|
|
|
#findbar-close-button:active {
|
|
-moz-image-region: rect(80px, 480px, 120px, 440px);
|
|
}
|
|
|
|
/* Contextual appbar ======================================================= */
|
|
|
|
#contextualactions-tray {
|
|
background-color: @metro_orange@;
|
|
}
|
|
|
|
#contextualactions-tray > toolbarbutton {
|
|
opacity: 1;
|
|
}
|
|
#contextualactions-tray > toolbarbutton[fade] {
|
|
opacity: 0;
|
|
}
|
|
#contextualactions-tray > toolbarbutton:not([immediate]) {
|
|
transition-property: opacity;
|
|
transition-duration: .3s;
|
|
transition-timing-function: ease-in;
|
|
transition-delay: 80ms;
|
|
}
|
|
#contextualactions-tray > toolbarbutton > .toolbarbutton-text {
|
|
color: white;
|
|
}
|
|
|
|
#pin-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
|
|
}
|
|
|
|
#unpin-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
|
|
}
|
|
|
|
#hide-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
|
|
}
|
|
|
|
#delete-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
|
|
}
|
|
|
|
#clear-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
|
|
}
|
|
|
|
#restore-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
#pin-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
|
|
}
|
|
|
|
#unpin-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
|
|
}
|
|
|
|
#hide-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
|
|
}
|
|
|
|
#delete-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
|
|
}
|
|
|
|
#clear-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
|
|
}
|
|
|
|
#restore-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
#pin-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
|
|
}
|
|
|
|
#unpin-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
|
|
}
|
|
|
|
#hide-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
|
|
}
|
|
|
|
#delete-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
|
|
}
|
|
|
|
#clear-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
|
|
}
|
|
|
|
#restore-selected-button {
|
|
list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
|
|
}
|
|
}
|
|
|
|
/* Download notifications ======================================================= */
|
|
|
|
.download-filename-text {
|
|
font-weight: bold;
|
|
}
|
|
.download-host-text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Autoscroll popup ======================================================== */
|
|
|
|
.autoscroller {
|
|
height: 28px;
|
|
width: 28px;
|
|
border: none;
|
|
margin: -14px;
|
|
padding: 0;
|
|
background-image: url("chrome://browser/skin/images/autoscroll.png");
|
|
background-color: transparent;
|
|
position: fixed;
|
|
visibility: hidden;
|
|
background-repeat: no-repeat;
|
|
background-origin: padding-box;
|
|
background-clip: padding-box;
|
|
background-position: right top;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
.autoscroller[scrolldir="NS"] {
|
|
background-position: right center;
|
|
}
|
|
|
|
.autoscroller[scrolldir="EW"] {
|
|
background-position: right bottom;
|
|
}
|
|
|
|
/* Flyouts ================================================================= */
|
|
|
|
/* don't add a margin to the very top settings entry in flyouts */
|
|
flyoutpanel > settings:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/* Sync flyout pane -------------------------------------------------------- */
|
|
|
|
#sync-flyoutpanel {
|
|
font-size: @metro_font_normal@;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#sync-flyoutpanel button {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#sync-flyoutpanel .syncHeader {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#sync-flyoutpanel .syncSecondaryText {
|
|
font-weight: 100;
|
|
font-size: @metro_font_snormal@;
|
|
}
|
|
|
|
#sync-flyoutpanel .syncInstructionText {
|
|
font-style: italic;
|
|
}
|
|
|
|
.syncThrobber .progressBall {
|
|
margin: 2px;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.syncThrobber .progressBallInner {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#sync-flyoutpanel .syncErrorText {
|
|
color: red;
|
|
}
|
|
|
|
#sync-flyoutpanel textbox {
|
|
margin: @metro_spacing_small@;
|
|
padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
|
|
background: @field_background_color@;
|
|
border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
|
|
color: @field_foreground_color@;
|
|
}
|
|
|
|
#sync-setup-throbber {
|
|
margin-top: 15px;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
#sync-connected-device {
|
|
width: 200px;
|
|
}
|
|
|
|
#sync-manualsetup-failure {
|
|
width: 200px;
|
|
}
|
|
|
|
#sync-flyoutpanel .syncJPAKECode {
|
|
margin: @metro_spacing_small@;
|
|
padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
|
|
background: @field_background_color@;
|
|
border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
|
|
color: @field_foreground_color@;
|
|
display: block !important;
|
|
font-size: @metro_font_large@ !important;
|
|
font-weight: 600;
|
|
letter-spacing: 0.4em;
|
|
text-align: center;
|
|
width: 175px;
|
|
}
|
|
|
|
#sync-connected-device {
|
|
margin-bottom: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
#sync-connected-lastSynced {
|
|
margin-top: 0px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
#sync-connected-throbber {
|
|
margin-top: 12px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
/* About flyout pane ------------------------------------------------------- */
|
|
|
|
/* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
|
|
|
|
#about-flyoutpanel {
|
|
background-image: url('chrome://branding/content/metro-about-footer.png');
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-position: right bottom;
|
|
}
|
|
|
|
#about-flyoutpanel .text-link {
|
|
color: inherit;
|
|
}
|
|
|
|
#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
|
|
#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
|
|
background-color: inherit;
|
|
border: none;
|
|
}
|
|
|
|
#about-policy-label {
|
|
padding: 1.5em @metro_spacing_large@;
|
|
margin: 1em -@metro_spacing_large@;
|
|
}
|
|
|
|
#about-version-label {
|
|
margin-top: 11pt;
|
|
}
|
|
|
|
#currentChannel {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Preferences flyout pane ------------------------------------------------- */
|
|
|
|
/* Lay out each <setting> in a single row */
|
|
setting {
|
|
min-height: @touch_row@; /* row size */
|
|
-moz-box-align: center;
|
|
-moz-box-orient: horizontal;
|
|
}
|
|
|
|
/* ...except for some exceptions */
|
|
.setting-expanded {
|
|
-moz-box-align: start;
|
|
-moz-box-orient: vertical;
|
|
}
|
|
|
|
setting > vbox {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
settings {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.settings-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* <setting> elements that are not in a <settings> group get special treatment */
|
|
#prefs-flyoutpanel > setting,
|
|
#sync-flyoutpanel > setting {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
#prefs-flyoutpanel > setting .preferences-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
setting[type="integer"] > .preferences-alignment,
|
|
setting[type="string"] > .preferences-alignment {
|
|
-moz-box-flex: 3;
|
|
}
|
|
|
|
setting[type="file"] > .preferences-alignment,
|
|
setting[type="directory"] > .preferences-alignment {
|
|
-moz-box-align: center;
|
|
}
|
|
|
|
/* Removes the left side title vbox on radio setting */
|
|
setting[type="radio"] > vbox {
|
|
display: none;
|
|
}
|
|
|
|
#prefs-homepage-options, #prefs-homepage-popup {
|
|
min-width: 200px;
|
|
}
|
|
|
|
.options-box {
|
|
-moz-margin-start: 28px; /* sized based on the 32px addon image */
|
|
}
|
|
|
|
.options-box > setting:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.preferences-description {
|
|
font-size: @font_small@ !important;
|
|
color: grey;
|
|
}
|
|
|
|
.preferences-description:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Clear private data prefs */
|
|
|
|
/* hide subitems when other data checkbox is not checked */
|
|
#prefs-privdata-other:not([checked]) + #prefs-privdata-subitems {
|
|
display: none;
|
|
}
|
|
|
|
#prefs-privdata-subitems {
|
|
display: block;
|
|
padding-left: @metro_spacing_xnormal@;
|
|
font-size: @metro_font_snormal@;
|
|
}
|
|
|
|
/* arrange sub-items in two columns */
|
|
.privdata-subitem-item {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
width: 50%;
|
|
}
|
|
|
|
#clear-notification {
|
|
max-height: 25px;
|
|
}
|
|
|
|
#clearprivacythrobber {
|
|
max-width: 25px;
|
|
max-height: 25px;
|
|
}
|
|
|
|
#clearprivacythrobber .progressContainer {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
#clearprivacythrobber .progressBall {
|
|
margin: 2px;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
#clear-notification-done {
|
|
font-weight: bold;
|
|
}
|