mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
1142 lines
27 KiB
CSS
1142 lines
27 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 150ms
|
|
%define forward_width 51px
|
|
%define back_width 62px
|
|
%define clipped_url_back_width 71px
|
|
|
|
/* Sliding Toolbar/Tab Tray ------------------------------------------------- */
|
|
|
|
#tray {
|
|
transition: transform @metro_animation_duration@ @metro_animation_easing@;
|
|
transform: translateY(-@tray_slide_height@);
|
|
width: 100%;
|
|
}
|
|
|
|
#progress-control {
|
|
display: block;
|
|
height: @progress_height@;
|
|
max-height: @progress_height@;
|
|
margin-bottom: -@progress_height@;
|
|
opacity: 1;
|
|
background: linear-gradient(to right, @progress_start_color@, @progress_end_color@);
|
|
transition-property: width;
|
|
transition-duration: .3s;
|
|
-moz-user-focus: ignore;
|
|
}
|
|
|
|
#progress-control:-moz-dir(rtl) {
|
|
background: linear-gradient(to left, @progress_start_color@, @progress_end_color@);
|
|
}
|
|
|
|
#progress-control[fade] {
|
|
opacity: 0;
|
|
transition-property: width, opacity;
|
|
transition-duration: .3s, .5s;
|
|
transition-timing-function: ease-in, ease-in;
|
|
}
|
|
|
|
/* in non-tabsonly mode the navigation bar and tab tray float over content. In
|
|
tabsonly mode they are always visible and offset content. */
|
|
#tray:not([tabsonly]) {
|
|
position: fixed;
|
|
}
|
|
|
|
#tray[visible][expanded] {
|
|
transform: none;
|
|
}
|
|
|
|
#tray[startpage],
|
|
#tray[visible]:not([expanded]) {
|
|
transform: translateY(-@tabs_height@);
|
|
}
|
|
|
|
/* Tabs --------------------------------------------------------------------- */
|
|
|
|
#tabs-container {
|
|
background: @panel_dark_color@ @panel_dark_background@;
|
|
padding: 0;
|
|
-moz-padding-start: @metro_spacing_xnormal@;
|
|
width: 100%;
|
|
}
|
|
|
|
#tabs {
|
|
-moz-padding-start: @metro_spacing_large@;
|
|
}
|
|
|
|
#tabs .tabs-list {
|
|
display: block;
|
|
-moz-user-focus: ignore;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
#tabs > .tabs-scrollbox > .arrowscrollbox-scrollbox {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up,
|
|
#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;
|
|
}
|
|
#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;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
|
|
@-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);
|
|
}
|
|
}
|
|
|
|
#tray:not([tabsonly]) .documenttab-container {
|
|
animation: open-documenttab 0.4s ease-out;
|
|
}
|
|
|
|
#tray:not([tabsonly]) documenttab[closing] > .documenttab-container {
|
|
animation: close-documenttab 0.4s ease-out;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
#tray:not([tabsonly]) .documenttab-favicon {
|
|
visibility: collapse;
|
|
}
|
|
|
|
.documenttab-thumbnail {
|
|
margin: @metro_spacing_normal@ @metro_spacing_snormal@;
|
|
background: white none center top no-repeat;
|
|
background-size: cover;
|
|
width: @thumbnail_width@;
|
|
height: @thumbnail_height@;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#tray[tabsonly] {
|
|
transform: none !important;
|
|
}
|
|
|
|
#tray[tabsonly] #tabs {
|
|
-moz-padding-start: @metro_spacing_small@;
|
|
}
|
|
|
|
#tray[tabsonly] #tabs-controls {
|
|
-moz-box-align: center;
|
|
-moz-box-orient: horizontal;
|
|
-moz-box-pack: end;
|
|
margin: 0;
|
|
}
|
|
|
|
#tray[tabsonly] #tabs-controls toolbarbutton {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#tray[tabsonly] documenttab {
|
|
height: @toolbar_height@;
|
|
margin: 0 -@tab_compression@;
|
|
}
|
|
|
|
#tray[tabsonly] documenttab:first-child {
|
|
-moz-margin-start: 0;
|
|
}
|
|
|
|
#tray[tabsonly] documenttab:last-child {
|
|
-moz-margin-end: 0;
|
|
}
|
|
|
|
#tray[tabsonly] .documenttab-thumbnail,
|
|
#tray[tabsonly] .documenttab-selection,
|
|
#tray[tabsonly] .documenttab-crop {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#tray[tabsonly] .documenttab-container {
|
|
display: -moz-box;
|
|
-moz-box-orient: horizontal;
|
|
-moz-box-align: center;
|
|
padding: 0 @tab_spacing@;
|
|
}
|
|
|
|
#tray[tabsonly] .documenttab-favicon {
|
|
-moz-margin-start: @metro_spacing_normal@;
|
|
-moz-margin-end: @metro_spacing_snormal@;
|
|
}
|
|
|
|
#tray[tabsonly] .documenttab-title {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: auto;
|
|
background: 0 none;
|
|
opacity: 1;
|
|
box-shadow: none;
|
|
width: @tab_inner_width@;
|
|
}
|
|
|
|
#tray[tabsonly] .documenttab-close {
|
|
list-style-image: url("chrome://browser/skin/images/closetab-tab.png");
|
|
position: relative;
|
|
padding: 0 !important;
|
|
z-index: 1;
|
|
}
|
|
|
|
#tray[tabsonly] documenttab[selected=true] {
|
|
background-color: @panel_light_color@;
|
|
background-image: url("chrome://browser/skin/images/tab-selection-left.png"),
|
|
url("chrome://browser/skin/images/tab-selection-right.png"),
|
|
@panel_light_background@;
|
|
background-position: left top, right top, center center;
|
|
background-repeat: no-repeat, no-repeat, repeat;
|
|
}
|
|
|
|
#tray[tabsonly] documenttab[selected=true] .documenttab-close {
|
|
list-style-image: url("chrome://browser/skin/images/closetab-tabselected.png");
|
|
}
|
|
|
|
#page,
|
|
.selection-overlay {
|
|
-moz-stack-sizing: ignore;
|
|
}
|
|
|
|
.selection-overlay {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.selection-overlay:-moz-focusring {
|
|
outline: 0 !important;
|
|
}
|
|
|
|
.selection-overlay-hidden {
|
|
display: none;
|
|
}
|
|
|
|
#tray[tabsonly] documenttab[selected=true] .documenttab-title {
|
|
color: #000;
|
|
}
|
|
|
|
#tabs-controls {
|
|
margin-top: @metro_spacing_small@;
|
|
-moz-box-align: start;
|
|
-moz-box-orient: vertical;
|
|
padding: 0 @metro_spacing_small@;
|
|
}
|
|
|
|
#tabs-controls toolbarbutton {
|
|
margin: @toolbar_vertical_spacing@ @toolbar_horizontal_spacing@;
|
|
}
|
|
|
|
#newtab-button {
|
|
list-style-image: url("images/newtab-default.png");
|
|
}
|
|
|
|
/* Toolbar ------------------------------------------------------------------ */
|
|
|
|
#toolbar-container {
|
|
background: @panel_dark_color@ @panel_dark_background@;
|
|
border-bottom: @border_width_small@ solid @border_color@;
|
|
-moz-padding-end: @padding_large@;
|
|
width: 100%;
|
|
}
|
|
|
|
#toolbar-container[filtering],
|
|
#toolbar-container[startpage] {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
#toolbar {
|
|
-moz-appearance: none;
|
|
-moz-box-align: center;
|
|
padding: 0;
|
|
-moz-padding-end: @metro_spacing_xxxlarge@;
|
|
-moz-padding-start: @metro_spacing_xxnormal@;
|
|
border: none;
|
|
border-top: @metro_border_thin@ solid #293642;
|
|
background-color: @panel_light_color@;
|
|
background-image: url("chrome://browser/skin/images/tab-selection-right.png"),
|
|
linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.5)),
|
|
@panel_light_background@;
|
|
background-repeat: no-repeat, repeat-x;
|
|
background-position: right bottom;
|
|
min-height: @toolbar_height@;
|
|
}
|
|
|
|
#toolbar[dir=ltr] {
|
|
background-position: left bottom;
|
|
}
|
|
|
|
#toolbar toolbarbutton {
|
|
margin: 0 @toolbar_horizontal_spacing@;
|
|
}
|
|
|
|
/* Unified back-forward buttons */
|
|
/* TODO: Pull code from mainline firefox to support RTL. */
|
|
#unified-back-forward-button {
|
|
-moz-box-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
#back-button {
|
|
-moz-appearance: none;
|
|
margin: 0 !important;
|
|
margin-right: -@metro_spacing_normal@ !important;
|
|
list-style-image: url(chrome://browser/skin/images/back.png);
|
|
-moz-image-region: rect(0 48px 48px 0);
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 0 !important;
|
|
min-height: 48px !important;
|
|
max-height: 48px !important;
|
|
}
|
|
|
|
#back-button[disabled] {
|
|
-moz-image-region: rect(0 96px 48px 48px);
|
|
}
|
|
|
|
#forward-button {
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)), @panel_light_background@;
|
|
border: @metro_border_thick@ solid rgb(192, 198, 204);
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
-moz-padding-start: 17px !important;
|
|
-moz-padding-end: 7px !important;
|
|
transition: opacity @forward_transition_length@ ease-out;
|
|
list-style-image: url(chrome://browser/skin/images/forward.png);
|
|
}
|
|
|
|
/* XXX: Hack to move the image up one pixel because
|
|
it's not vertically centered for some reason. */
|
|
#forward-button image {
|
|
margin: -1px 0 1px 0 !important;
|
|
}
|
|
|
|
#unified-back-forward-button > #forward-button[disabled] {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* URL bar */
|
|
#unified-back-forward-button + #urlbar-container {
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: @back_width@;
|
|
-moz-margin-start: -@forward_width@;
|
|
-moz-margin-end: @metro_spacing_normal@;
|
|
position: relative;
|
|
pointer-events: none;
|
|
|
|
border: @metro_border_thick@ solid @urlbar_border_color@;
|
|
-moz-border-start: 0 none;
|
|
background: @field_background_color@;
|
|
}
|
|
|
|
#unified-back-forward-button + #urlbar-container > #urlbar {
|
|
-moz-border-start: none;
|
|
pointer-events: all;
|
|
transition: margin-left @forward_transition_length@ ease-out;
|
|
}
|
|
|
|
#unified-back-forward-button[forwarddisabled] + #urlbar-container {
|
|
clip-path: url("chrome://browser/content/browser.xul#back-button-clip-path");
|
|
padding-left: @clipped_url_back_width@;
|
|
}
|
|
|
|
#unified-back-forward-button[forwarddisabled] + #urlbar-container > #urlbar {
|
|
margin-left: -@forward_width@;
|
|
}
|
|
|
|
/* Identity widget */
|
|
#identity-icon {
|
|
width: @metro_spacing_xxnormal@;
|
|
height: @metro_spacing_xxnormal@;
|
|
margin: 0;
|
|
-moz-margin-end: @metro_spacing_small@;
|
|
padding: 0;
|
|
list-style-image: url(chrome://browser/skin/images/identity-icons-generic.png);
|
|
}
|
|
|
|
#identity-box[mode="verifiedDomain"] > #identity-icon[pageproxystate="valid"] {
|
|
list-style-image: url(chrome://browser/skin/images/identity-icons-https.png);
|
|
}
|
|
|
|
#identity-box[mode="verifiedIdentity"] > #identity-icon[pageproxystate="valid"] {
|
|
list-style-image: url(chrome://browser/skin/identity-icons-https-ev.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 :invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Combined stop-reload button */
|
|
#tool-reload {
|
|
list-style-image: url("chrome://browser/skin/images/reload.png");
|
|
}
|
|
|
|
#tool-stop {
|
|
list-style-image: url("chrome://browser/skin/images/stop-hdpi.png");
|
|
}
|
|
|
|
#urlbar-icons[mode="loading"] > #tool-reload {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#urlbar-icons[mode="edit"] > #tool-stop,
|
|
#urlbar-icons[mode="view"] > #tool-stop {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* Toggle that displays the tab bar */
|
|
#toolbar-transition {
|
|
-moz-padding-end: @metro_spacing_snormal@;
|
|
background: @panel_dark_color@ @panel_dark_background@;
|
|
}
|
|
|
|
#tool-new-tab {
|
|
margin: 0;
|
|
-moz-margin-start: -@metro_spacing_normal@;
|
|
list-style-image: url("images/newtab-default.png");
|
|
transition: opacity ease-out 0.2s;
|
|
}
|
|
|
|
/* Hide the tab toggle if the tabs are visible */
|
|
#tray[visible][expanded] #tool-new-tab {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Hide the tab toggle if we're showing classic tabs or we're snap-viewed. */
|
|
#toolbar[viewstate="snapped"],
|
|
#tray[tabsonly] #toolbar {
|
|
background: @panel_light_color@ @panel_light_background@;
|
|
-moz-padding-end: 0;
|
|
}
|
|
|
|
#toolbar-container[viewstate="snapped"],
|
|
#tray[tabsonly] #toolbar-container {
|
|
-moz-padding-end: 0;
|
|
}
|
|
|
|
#toolbar-transition[viewstate="snapped"],
|
|
#tray[tabsonly] #toolbar-transition {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* If we're in the small snap view, compress and simplify the UI. */
|
|
#tray[visible][expanded][viewstate="snapped"] {
|
|
margin-top: -@tabs_height@ !important;
|
|
}
|
|
|
|
#toolbar[viewstate="snapped"] {
|
|
-moz-padding-end: 0;
|
|
}
|
|
|
|
#unified-back-forward-button[viewstate="snapped"] + #urlbar-container {
|
|
-moz-margin-end: 0;
|
|
}
|
|
|
|
/* App Bar ----------------------------------------------------------------- */
|
|
|
|
appbar {
|
|
display: block;
|
|
position: fixed;
|
|
height: @toolbar_height@;
|
|
bottom: 0;
|
|
transform: translateY(@toolbar_height@);
|
|
transition: transform @metro_animation_duration@ @metro_animation_easing@;
|
|
width: 100%;
|
|
}
|
|
|
|
appbar toolbar {
|
|
border-top: 1px solid @appbar_top_border@;
|
|
border-bottom: 0px;
|
|
height: @toolbar_height@;
|
|
-moz-appearance: none;
|
|
background-color: @appbar_color@;
|
|
-moz-box-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
appbar toolbarbutton {
|
|
float: left;
|
|
border-width: 0px;
|
|
margin: 0 @toolbar_horizontal_spacing@;
|
|
padding: 0;
|
|
/* Don't inherit background-color from toolbarbutton[checked="true"] */
|
|
background-color: transparent;
|
|
}
|
|
|
|
appbar toolbarbutton[disabled] {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#appbar:not([viewstate="snapped"])[visible] {
|
|
transform: none;
|
|
}
|
|
|
|
#appbar toolbarbutton {
|
|
list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
|
|
-moz-image-region: rect(0px, 200px, 40px, 160px); /* Gear icon is default. */
|
|
}
|
|
#appbar toolbarbutton:hover {
|
|
-moz-image-region: rect(40px, 200px, 80px, 160px);
|
|
}
|
|
#appbar toolbarbutton:active {
|
|
-moz-image-region: rect(80px, 200px, 120px, 160px);
|
|
}
|
|
|
|
/* Application-Specific */
|
|
#download-button {
|
|
-moz-image-region: rect(0px, 40px, 40px, 0px) !important;
|
|
}
|
|
#download-button:hover {
|
|
-moz-image-region: rect(40px, 40px, 80px, 0px) !important;
|
|
}
|
|
#download-button:active {
|
|
-moz-image-region: rect(80px, 40px, 120px, 0px) !important;
|
|
}
|
|
|
|
#plugin-button {
|
|
-moz-image-region: rect(0px, 80px, 40px, 40px) !important;
|
|
}
|
|
#plugin-button:hover {
|
|
-moz-image-region: rect(40px, 80px, 80px, 40px) !important;
|
|
}
|
|
#plugin-button:active {
|
|
-moz-image-region: rect(80px, 80px, 120px, 40px) !important;
|
|
}
|
|
|
|
/* Page-Specific */
|
|
#zoomout-button {
|
|
-moz-image-region: rect(0px, 120px, 40px, 80px) !important;
|
|
}
|
|
#zoomout-button:hover {
|
|
-moz-image-region: rect(40px, 120px, 80px, 80px) !important;
|
|
}
|
|
#zoomout-button:active {
|
|
-moz-image-region: rect(80px, 120px, 120px, 80px) !important;
|
|
}
|
|
|
|
#zoomin-button {
|
|
-moz-image-region: rect(0px, 160px, 40px, 120px) !important;
|
|
}
|
|
#zoomin-button:hover {
|
|
-moz-image-region: rect(40px, 160px, 80px, 120px) !important;
|
|
}
|
|
#zoomin-button:active {
|
|
-moz-image-region: rect(80px, 160px, 120px, 120px) !important;
|
|
}
|
|
|
|
#pin-button {
|
|
-moz-image-region: rect(0px, 240px, 40px, 200px) !important;
|
|
}
|
|
#pin-button:hover {
|
|
-moz-image-region: rect(40px, 240px, 80px, 200px) !important;
|
|
}
|
|
#pin-button:active {
|
|
-moz-image-region: rect(80px, 240px, 120px, 200px) !important;
|
|
}
|
|
#pin-button[checked] {
|
|
-moz-image-region: rect(0px, 280px, 40px, 240px) !important;
|
|
}
|
|
|
|
#star-button {
|
|
-moz-image-region: rect(0px, 360px, 40px, 320px) !important;
|
|
}
|
|
#star-button:hover {
|
|
-moz-image-region: rect(40px, 360px, 80px, 320px) !important;
|
|
}
|
|
#star-button:active,
|
|
#star-button[checked] {
|
|
-moz-image-region: rect(80px, 360px, 120px, 320px) !important;
|
|
}
|
|
|
|
/* Tile-selection-Specific */
|
|
#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;
|
|
}
|
|
|
|
#pin-selected-button {
|
|
-moz-image-region: rect(0px, 240px, 40px, 200px) !important;
|
|
}
|
|
#pin-selected-button:hover {
|
|
-moz-image-region: rect(40px, 240px, 80px, 200px) !important;
|
|
}
|
|
#pin-selected-button:active {
|
|
-moz-image-region: rect(80px, 240px, 120px, 200px) !important;
|
|
}
|
|
#unpin-selected-button {
|
|
-moz-image-region: rect(0px, 280px, 40px, 240px) !important;
|
|
}
|
|
#unpin-selected-button:hover {
|
|
-moz-image-region: rect(40px, 280px, 80px, 240px) !important;
|
|
}
|
|
#unpin-selected-button:active {
|
|
-moz-image-region: rect(80px, 280px, 120px, 240px) !important;
|
|
}
|
|
#delete-selected-button {
|
|
-moz-image-region: rect(0px, 480px, 40px, 440px) !important;
|
|
}
|
|
#delete-selected-button:hover {
|
|
-moz-image-region: rect(40px, 480px, 80px, 440px) !important;
|
|
}
|
|
#delete-selected-button:active {
|
|
-moz-image-region: rect(80px, 480px, 120px, 440px) !important;
|
|
}
|
|
#clear-selected-button {
|
|
-moz-image-region: rect(0px, 520px, 40px, 480px) !important;
|
|
}
|
|
#clear-selected-button:hover {
|
|
-moz-image-region: rect(40px, 520px, 80px, 480px) !important;
|
|
}
|
|
#clear-selected-button:active {
|
|
-moz-image-region: rect(80px, 520px, 120px, 480px) !important;
|
|
}
|
|
|
|
#restore-selected-button {
|
|
-moz-image-region: rect(0px, 560px, 40px, 520px) !important;
|
|
}
|
|
#restore-selected-button:hover {
|
|
-moz-image-region: rect(40px, 560px, 80px, 520px) !important;
|
|
}
|
|
#restore-selected-button:active {
|
|
-moz-image-region: rect(80px, 560px, 120px, 520px) !important;
|
|
}
|
|
|
|
/* 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 {
|
|
width: 400px;
|
|
}
|
|
|
|
/* About flyout pane */
|
|
|
|
#about-flyoutpanel {
|
|
width: 350px;
|
|
background-image:url('chrome://browser/skin/images/about-footer.png');
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-position: right bottom;
|
|
}
|
|
|
|
#about-product-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#about-version-label {
|
|
margin-top: 11pt;
|
|
}
|
|
|
|
#about-policy-label {
|
|
margin-top: 24pt;
|
|
}
|
|
|
|
/* Preferences flyout */
|
|
|
|
#prefs-flyoutpanel {
|
|
width: 400px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
#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-done {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Start UI (Autocomplete + New Tab Page) ----------------------------------- */
|
|
|
|
#start-container {
|
|
display: none;
|
|
}
|
|
|
|
#start-container[startpage],
|
|
#start-container[filtering] {
|
|
display: -moz-box;
|
|
}
|
|
|
|
#start-scrollbox {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* if autocomplete is set, hide both start pages,
|
|
* else hide the autocomplete screen */
|
|
#start-container[filtering] > .start-page,
|
|
#start-container:not([filtering]) > #start-autocomplete {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* if snapped, hide the fullscreen awesome screen, if viewstate is anything
|
|
* other than snapped, hide the snapped awesome screen */
|
|
#start[viewstate="snapped"],
|
|
#snapped-start:not([viewstate="snapped"]) {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* Browser Content Areas ----------------------------------------------------- */
|
|
|
|
/* Hide the browser while the start UI is visible */
|
|
#content-viewport[startpage],
|
|
#content-viewport[filtering] {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* a 'margin-top' is applied dynamically in ContentAreaObserver */
|
|
#browsers {
|
|
background: white;
|
|
transition-property: margin-top;
|
|
transition-duration: .3s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
/* Panel UI ---------------------------------------------------------------- */
|
|
|
|
#panel-container {
|
|
padding: 60px 40px;
|
|
}
|
|
|
|
#panel-close-button {
|
|
background: transparent;
|
|
border: 0 none;
|
|
-moz-appearance: none;
|
|
margin: 0;
|
|
-moz-margin-end: 40px;
|
|
list-style-image: url(chrome://browser/skin/images/back.png);
|
|
-moz-image-region: rect(0 48px 48px 0);
|
|
padding: 0;
|
|
min-height: 48px;
|
|
max-height: 48px;
|
|
-moz-box-pack: center;
|
|
}
|
|
|
|
#panel-close-button[disabled] {
|
|
-moz-image-region: rect(0 96px 48px 48px);
|
|
}
|
|
|
|
#panel-view-switcher {
|
|
border: 0 none !important;
|
|
color: #000 !important;
|
|
background: transparent;
|
|
padding: 0;
|
|
font-size: @metro_font_xlarge@;
|
|
font-weight: 100;
|
|
margin: 0;
|
|
}
|
|
|
|
#panel-items {
|
|
padding-top: 20px;
|
|
-moz-padding-start: 88px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Context Menu ------------------------------------------------------------ */
|
|
|
|
#context-commands richlistitem[disabled] {
|
|
display: none;
|
|
}
|
|
|
|
/* Alert Popup -------------------------------------------------------------- */
|
|
#alerts-container {
|
|
color: white;
|
|
background-color: #5e6166;
|
|
border: @border_width_small@ solid #767973;
|
|
border-radius: @border_radius_normal@;
|
|
box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@;
|
|
padding: @padding_normal@; /* core spacing on top/bottom */
|
|
margin-bottom: @margin_large@;
|
|
transition-property: opacity;
|
|
transition-duration: 0.5s;
|
|
opacity: 0;
|
|
}
|
|
|
|
#alerts-container.showing {
|
|
opacity: 1;
|
|
}
|
|
|
|
#alerts-title {
|
|
font-size: @font_small@ !important;
|
|
}
|
|
|
|
#alerts-text {
|
|
font-size: @font_xsmall@ !important;
|
|
white-space: pre;
|
|
}
|
|
|
|
#alerts-container {
|
|
-moz-margin-end: @margin_large@;
|
|
}
|
|
|
|
/* 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-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;
|
|
}
|
|
|
|
.overlay-button[disabled] {
|
|
box-shadow: none;
|
|
}
|
|
|
|
#overlay-back[disabled]:-moz-locale-dir(ltr),
|
|
#overlay-plus[disabled]:-moz-locale-dir(rtl) {
|
|
transform: translateX(-60px);
|
|
}
|
|
|
|
#overlay-plus[disabled]:-moz-locale-dir(ltr),
|
|
#overlay-back[disabled]:-moz-locale-dir(rtl) {
|
|
transform: translateX(60px);
|
|
}
|
|
|
|
.overlay-button:not([disabled]):hover {
|
|
background-color: hsla(210,30%,10%,.4);
|
|
background-size: 90px;
|
|
border-color: hsla(0,0%,100%,.9);
|
|
}
|
|
|
|
#overlay-back:not([disabled]):-moz-locale-dir(ltr):hover,
|
|
#overlay-plus:not([disabled]):-moz-locale-dir(rtl):hover {
|
|
background-position: right 12px center;
|
|
transform: translateX(40px) scale(1.2);
|
|
}
|
|
|
|
#overlay-plus:not([disabled]):-moz-locale-dir(ltr):hover,
|
|
#overlay-back:not([disabled]):-moz-locale-dir(rtl):hover {
|
|
background-position: left 12px center;
|
|
transform: translateX(-40px) scale(1.2);
|
|
}
|
|
|
|
/* helperapp (save-as) popup ----------------------------------------------- */
|
|
#helperapp-target {
|
|
font-size: @font_small@ !important;
|
|
}
|
|
|
|
/* Sync Setup ------------------------------------------------------------- */
|
|
.syncsetup-code {
|
|
display: block !important;
|
|
margin: @metro_spacing_small@;
|
|
padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
|
|
background: @field_background_color@;
|
|
border: @metro_border_thick@ solid @field_foreground_color@ !important;
|
|
color: @field_foreground_color@;
|
|
font-size: @metro_font_large@ !important;
|
|
letter-spacing: 0.2em;
|
|
text-align: left;
|
|
width: 250px;
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
.syncsetup-label {
|
|
color: #fff;
|
|
}
|
|
|
|
#syncsetup-customserver {
|
|
-moz-margin-start: @margin_xnormal@;
|
|
}
|
|
|
|
#syncsetup-waiting {
|
|
padding: 2em 0 0 0;
|
|
}
|
|
|
|
#syncsetup-waiting-top {
|
|
padding: 1em;
|
|
}
|
|
|
|
/* 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@;
|
|
}
|
|
|
|
/* Text selection handles */
|
|
|
|
#selectionhandle-mark1,
|
|
#selectionhandle-mark2,
|
|
#selectionhandle-mark3 {
|
|
list-style-image: url("chrome://browser/skin/images/selection-monocle.png");
|
|
border: 0px solid gray;
|
|
padding: 0px;
|
|
margin-top: -30px;
|
|
margin-left: -18px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Capture picker ------------------------------------------------------------- */
|
|
|
|
#capturepicker-video {
|
|
border: @border_width_tiny@ solid white;
|
|
}
|
|
|
|
#capturepicker-container {
|
|
margin: @margin_normal@;
|
|
}
|
|
|
|
#capturepicker-container.vertical {
|
|
height: 330px;
|
|
}
|