mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
831 lines
19 KiB
CSS
831 lines
19 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/. */
|
|
|
|
/* Global Skin ------------------------------------------------------------- */
|
|
|
|
@import url(chrome://global/skin/);
|
|
|
|
%filter substitution
|
|
%include defines.inc
|
|
|
|
/* Typography & General Styling -------------------------------------------- */
|
|
|
|
:root {
|
|
font-family: "Segoe UI", sans-serif !important;
|
|
font-size: @font_normal@;
|
|
}
|
|
|
|
.text-link {
|
|
color: @metro_orange@;
|
|
text-decoration: none;
|
|
}
|
|
|
|
textbox,
|
|
menulist {
|
|
-moz-appearance: none;
|
|
min-width: @field_sizing@; /* button size */
|
|
min-height: @field_sizing@; /* button size */
|
|
margin: @metro_spacing_small@;
|
|
padding: @metro_spacing_xsmall@ @metro_spacing_small@;
|
|
|
|
font-size: @metro_font_normal@;
|
|
font-weight: normal !important;
|
|
|
|
color: @field_foreground_color@;
|
|
background: @field_background_color@;
|
|
border: @metro_border_thick@ solid @field_foreground_color@ !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
textbox[disabled],
|
|
menulist[disabled] {
|
|
border-color: @field_disabled_foreground_color@ !important;
|
|
color: @field_disabled_foreground_color@;
|
|
}
|
|
|
|
menulist:not([disabled]):hover:active {
|
|
color: @field_background_color@;
|
|
background: @field_foreground_color@;
|
|
}
|
|
|
|
/* Button ------------------------------------------------------------------ */
|
|
|
|
button {
|
|
-moz-appearance: none;
|
|
border: 1px solid;
|
|
font-size: @metro_font_normal@;
|
|
font-weight: normal;
|
|
margin: @metro_spacing_small@;
|
|
min-width: @field_sizing@;
|
|
min-height: 32px;
|
|
padding: 3px 16px;
|
|
}
|
|
|
|
/* Non-default button colors */
|
|
|
|
button {
|
|
background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
|
|
border-color: hsl(220, 5%, 86%);
|
|
color: hsl(0, 0%, 10%);
|
|
}
|
|
|
|
button:not([disabled]):hover {
|
|
background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
|
|
border-color: hsl(210, 5%, 71%);
|
|
color: hsl(0, 0%, 10%);
|
|
}
|
|
|
|
/* Default button colors */
|
|
|
|
.button-default,
|
|
.notification-button-default {
|
|
background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
|
|
border-color: hsl(30, 100%, 48%);
|
|
color: white;
|
|
}
|
|
|
|
.button-default:not([disabled]):hover,
|
|
.notification-button-default:not([disabled]):hover {
|
|
background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
|
|
border-color: hsl(25, 100%, 43%);
|
|
color: white;
|
|
}
|
|
|
|
/* Pushed button colors (both default and non-default */
|
|
|
|
/* Note: these need enough specificity to override all the :hover rules above. */
|
|
button:not([disabled]):hover:active,
|
|
button:not([disabled])[checked="true"],
|
|
.button-default:not([disabled])[checked="true"],
|
|
.notification-button-default:not([disabled])[checked="true"] {
|
|
background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
|
|
border-color: hsl(216, 4%, 27%);
|
|
color: white;
|
|
}
|
|
|
|
/* Disabled button colors (both default and non-default */
|
|
|
|
button[disabled] {
|
|
background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
|
|
border-color: hsl(210, 3%, 91%);
|
|
color: hsl(0, 0%, 60%);
|
|
}
|
|
|
|
/* Textbox ----------------------------------------------------------------- */
|
|
|
|
textbox[isempty="true"] {
|
|
color: @field_mid_foreground_color@;
|
|
}
|
|
|
|
spinbuttons {
|
|
border: none;
|
|
}
|
|
|
|
.spinbuttons-box {
|
|
border: none;
|
|
-moz-box-orient: horizontal;
|
|
-moz-box-direction: reverse;
|
|
}
|
|
|
|
.spinbuttons-down,
|
|
.spinbuttons-up {
|
|
border: none !important;
|
|
}
|
|
|
|
.spinbuttons-down {
|
|
list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
|
|
}
|
|
|
|
.spinbuttons-up {
|
|
list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
|
|
}
|
|
|
|
/* Menu List --------------------------------------------------------------- */
|
|
|
|
menulist {
|
|
-moz-user-focus: ignore;
|
|
padding: @metro_spacing_xsmall@ 0;
|
|
-moz-padding-start: @metro_spacing_small@;
|
|
border-color: @field_disabled_foreground_color@ !important;
|
|
}
|
|
|
|
/* Popup Menus ------------------------------------------------------------- */
|
|
|
|
.menu-container {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.menu-container[showingfrom="below"] {
|
|
transform: translateY(@metro_spacing_normal@);
|
|
}
|
|
|
|
.menu-container[showingfrom="above"] {
|
|
transform: translateY(-@metro_spacing_normal@);
|
|
}
|
|
|
|
.menu-container[hiding],
|
|
.menu-container[showing] {
|
|
transition: opacity ease-out 0.2s,
|
|
transform ease-out 0.2s;
|
|
}
|
|
|
|
.menu-container[showing] {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
.menu-popup > richlistbox {
|
|
padding: 3px 0;
|
|
border: #000 solid @metro_border_thick@;
|
|
-moz-appearance: none;
|
|
display: -moz-box;
|
|
}
|
|
|
|
.menu-popup > richlistbox > scrollbox {
|
|
width: 100%;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.menu-popup richlistitem {
|
|
width: 100%;
|
|
min-height: @touch_button_small@;
|
|
min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
|
|
border: 0 none;
|
|
-moz-box-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.menu-popup richlistitem:not([disabled]):hover {
|
|
background-color: #ccc;
|
|
color: black;
|
|
}
|
|
|
|
.menu-popup richlistitem:not([disabled]):active {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
.menu-popup > richlistbox[left-hand="true"] > richlistitem {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.menu-popup > richlistbox[left-hand="false"] > richlistitem {
|
|
padding-right: 50px;
|
|
}
|
|
|
|
/* Additional styles applied to popups for form <select> elements. */
|
|
|
|
#select-container {
|
|
padding: 0;
|
|
position: absolute;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#select-commands {
|
|
-moz-appearance: none;
|
|
background-color: white;
|
|
border: #000 solid @metro_border_thick@;
|
|
display: -moz-box;
|
|
-moz-user-focus: ignore;
|
|
-moz-box-align: stretch;
|
|
width: 100%;
|
|
}
|
|
|
|
/* listcell element doesn't have flex="1" so we need to force it */
|
|
.option-command > listcell {
|
|
-moz-box-flex: 1 !important;
|
|
}
|
|
|
|
.option-command {
|
|
min-height: @touch_button_small@;
|
|
min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
|
|
border: 0 none;
|
|
}
|
|
|
|
.option-command.selected {
|
|
background-color: #ff8000;
|
|
color: white;
|
|
}
|
|
|
|
.option-command.optgroup {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.option-command:not([disabled]):hover {
|
|
background-color: #f0f0f0;
|
|
color: black;
|
|
}
|
|
|
|
.option-command:not([disabled]):active {
|
|
background-color: #d3d3d3;
|
|
color: black;
|
|
}
|
|
|
|
.select-popup > richlistbox > scrollbox {
|
|
width: 100%;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Toolbar Button --------------------------------------------------------- */
|
|
|
|
toolbarbutton {
|
|
min-width: @metro_spacing_large@; /* primary button size */
|
|
min-height: @metro_spacing_large@; /* primary button size */
|
|
-moz-appearance: none;
|
|
margin: 0;
|
|
padding: @metro_spacing_xsmall@;
|
|
}
|
|
|
|
toolbarbutton:not(.show-text) .toolbarbutton-text {
|
|
display: none;
|
|
}
|
|
|
|
.toolbarbutton-icon[label]:not([label=""]),
|
|
.toolbarbutton-icon[type="menu"] {
|
|
-moz-margin-end: @metro_spacing_xsmall@;
|
|
}
|
|
|
|
toolbarbutton:not(.show-text) .toolbarbutton-icon,
|
|
toolbarbutton:not([image]) .toolbarbutton-icon,
|
|
toolbarbutton[image=''] .toolbarbutton-icon {
|
|
-moz-margin-end: 0;
|
|
}
|
|
|
|
toolbarbutton:hover,
|
|
toolbarbutton:hover:active,
|
|
toolbarbutton[open="true"] {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Toggleswitch ------------------------------------------------------------ */
|
|
|
|
checkbox.toggleswitch {
|
|
margin: @metro_spacing_small@;
|
|
min-height: @metro_spacing_normal@;
|
|
font-weight: bold;
|
|
}
|
|
|
|
checkbox.toggleswitch hbox {
|
|
-moz-box-align: center;
|
|
}
|
|
|
|
checkbox.toggleswitch:not([checked]) .onlabel,
|
|
checkbox.toggleswitch[checked] .offlabel {
|
|
display: none;
|
|
}
|
|
|
|
checkbox.toggleswitch radiogroup {
|
|
border: @metro_border_thick@ solid @field_disabled_foreground_color@;
|
|
-moz-box-orient: horizontal;
|
|
}
|
|
|
|
checkbox.toggleswitch radio {
|
|
-moz-appearance: none;
|
|
margin: 0;
|
|
border: 0 none;
|
|
border-radius: 0;
|
|
background: 0 none;
|
|
padding: 0;
|
|
min-height: @metro_spacing_normal@;
|
|
height: @metro_spacing_normal@;
|
|
}
|
|
|
|
checkbox.toggleswitch[checked] radio.checkbox-radio-on,
|
|
checkbox.toggleswitch:not([checked]) radio.checkbox-radio-off {
|
|
width: @metro_spacing_normal@;
|
|
min-width: @metro_spacing_normal@;
|
|
background: #000;
|
|
margin: -@metro_border_thick@;
|
|
}
|
|
|
|
checkbox.toggleswitch[checked] radio.checkbox-radio-off,
|
|
checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
|
|
width: @metro_spacing_xxxnormal@;
|
|
min-width: @metro_spacing_xxxnormal@;
|
|
margin: @metro_border_thin@;
|
|
}
|
|
|
|
checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
|
|
background: @field_disabled_foreground_color@;
|
|
}
|
|
|
|
checkbox.toggleswitch[checked] radio.checkbox-radio-off {
|
|
background: @selected_color@;
|
|
}
|
|
|
|
checkbox.toggleswitch[checked] radio:last-child {
|
|
-moz-margin-start: 0;
|
|
}
|
|
|
|
checkbox.toggleswitch[checked] radio:first-child {
|
|
-moz-margin-end: 0;
|
|
}
|
|
|
|
/* Color Picker ------------------------------------------------------------ */
|
|
|
|
colorpicker > panel {
|
|
background-color: #767973;
|
|
}
|
|
|
|
colorpicker > vbox {
|
|
background-color: #767973;
|
|
}
|
|
|
|
/* Rich List Box ---------------------------------------------------------- */
|
|
|
|
richlistbox {
|
|
-moz-user-focus: ignore;
|
|
margin: 0;
|
|
}
|
|
|
|
richlistitem {
|
|
-moz-user-focus: ignore;
|
|
min-height: @metro_spacing_normal@; /* row size */
|
|
padding: @metro_spacing_small@;
|
|
}
|
|
|
|
richlistitem label.normal,
|
|
richlistitem description.normal,
|
|
richlistitem label.normal-black,
|
|
richlistitem description.normal-black,
|
|
richlistitem label.normal-bold,
|
|
richlistitem description.normal-bold{
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
richlistitem label.normal,
|
|
richlistitem description.normal {
|
|
color: gray;
|
|
}
|
|
|
|
richlistitem label.normal-bold,
|
|
richlistitem description.normal-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
richlistitem[selected] {
|
|
color: black;
|
|
background-color: white;
|
|
}
|
|
|
|
richlistitem:hover:active:not([selected]) {
|
|
background-color: #8db8d8;
|
|
}
|
|
|
|
richlistitem.section-header,
|
|
richlistitem[selected].section-header {
|
|
font-weight: bold;
|
|
color: #000;
|
|
background-color: lightgray;
|
|
}
|
|
|
|
richlistitem[selected] .hide-on-select,
|
|
richlistitem .show-on-select {
|
|
visibility: collapse;
|
|
}
|
|
|
|
richlistitem[selected] .show-on-select,
|
|
richlistitem .hide-on-select {
|
|
visibility: visible;
|
|
}
|
|
|
|
richlistitem[typeName="message"] {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* Notification box ("info app bar") ---------------------------------------- */
|
|
|
|
notification {
|
|
background: hsl(0, 0%, 98%);
|
|
border-bottom: 1px solid hsla(0, 0%, 0%, .07);
|
|
box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
|
|
min-height: 64px;
|
|
}
|
|
|
|
.notification-inner {
|
|
border-style: none;
|
|
}
|
|
|
|
.notification-button {
|
|
-moz-margin-start: 0;
|
|
-moz-margin-end: 20px;
|
|
}
|
|
|
|
.messageImage {
|
|
width: 32px;
|
|
height: 32px;
|
|
-moz-margin-start: 40px;
|
|
-moz-margin-end: 16px;
|
|
}
|
|
|
|
/* If there is no image set, collapse the image but keep the starting margin */
|
|
.messageImage:not([src]) {
|
|
width: 0;
|
|
-moz-margin-end: 0;
|
|
}
|
|
|
|
.messageText {
|
|
margin: 0;
|
|
}
|
|
|
|
.messageCloseButton {
|
|
list-style-image: url("chrome://browser/skin/images/infobar-close.png");
|
|
padding: 0;
|
|
-moz-margin-start: 0;
|
|
-moz-margin-end: 40px;
|
|
-moz-image-region: rect(0, 40px, 40px, 0);
|
|
}
|
|
|
|
.messageCloseButton > .toolbarbutton-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.messageCloseButton:hover {
|
|
-moz-image-region: rect(0, 80px, 40px, 40px);
|
|
}
|
|
|
|
.messageCloseButton:hover:active {
|
|
-moz-image-region: rect(0, 120px, 40px, 80px);
|
|
}
|
|
|
|
.notification-link {
|
|
/* Make the link take up all the space before the buttons. */
|
|
-moz-box-flex: 9999;
|
|
}
|
|
|
|
/* Dialogs ----------------------------------------------------------------- */
|
|
|
|
.modal-block,
|
|
.perm-modal-block {
|
|
background-color: rgba(0,0,0,.6);
|
|
-moz-box-align: center;
|
|
-moz-box-pack: center;
|
|
-moz-box-orient: horizontal;
|
|
}
|
|
|
|
.dialog-dark,
|
|
.panel-arrowcontent {
|
|
background: url("chrome://browser/skin/images/popup-bg-hdpi.png") left bottom repeat-x;
|
|
background-color: white;
|
|
border-radius: @border_radius_normal@;
|
|
box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@,
|
|
black 0 -@border_radius_tiny@ @border_radius_tiny@;
|
|
padding: @padding_normal@ 0; /* core spacing on top/bottom */
|
|
}
|
|
|
|
dialog {
|
|
-moz-box-orient: horizontal;
|
|
-moz-box-align: center;
|
|
-moz-box-pack: center;
|
|
}
|
|
|
|
dialog > .prompt-inner {
|
|
width: 600px;
|
|
}
|
|
|
|
.prompt-header > .prompt-message {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.prompt-header > .button-checkbox {
|
|
margin-left: @margin_large@;
|
|
}
|
|
|
|
.prompt-title {
|
|
padding-top: @metro_spacing_normal@;
|
|
text-align: start;
|
|
font-size: @metro_font_large@;
|
|
}
|
|
|
|
/* Authentication dialogs do not have a title */
|
|
.prompt-title:empty {
|
|
display: none;
|
|
}
|
|
|
|
.prompt-message {
|
|
padding-top: @metro_spacing_normal@;
|
|
text-align: start;
|
|
font-size: @metro_font_normal@;
|
|
}
|
|
|
|
.prompt-buttons {
|
|
-moz-box-pack: end;
|
|
text-align: end;
|
|
padding: @metro_spacing_normal@ 0;
|
|
}
|
|
|
|
.prompt-edit {
|
|
margin: @margin_xnormal@;
|
|
font-size: @font_normal@;
|
|
text-align: start;
|
|
}
|
|
|
|
/* additional styles for crash prompt dialog */
|
|
|
|
/* specific height and wider for the long privacy statement */
|
|
.prompt-inner-statement {
|
|
margin-top: @metro_spacing_xnormal@;
|
|
margin-bottom: @metro_spacing_xnormal@;
|
|
height: 450px;
|
|
width: 800px;
|
|
}
|
|
|
|
.crash-message {
|
|
text-align: justify;
|
|
margin-top: 5px;
|
|
margin-bottom: @metro_spacing_small@;
|
|
font-size: @metro_font_normal@;
|
|
}
|
|
|
|
.crash-link {
|
|
margin-top: @metro_spacing_small@;
|
|
}
|
|
|
|
/* temp - bug 887176 */
|
|
.crash-privacy-back-button {
|
|
width: 26px;
|
|
margin-top: 22px; /* align with title text */
|
|
-moz-margin-end: 15px;
|
|
background-image: url(chrome://browser/skin/images/appbar-stop.png);
|
|
background-origin: border-box;
|
|
background-position: right 0 top 0;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.crash-privacy-statement-scroller {
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Arrowbox ---------------------------------------------------------------- */
|
|
|
|
arrowbox {
|
|
-moz-appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.arrowbox-dark .panel-arrowcontent {
|
|
color: white;
|
|
background: @panel_dark_color@;
|
|
}
|
|
|
|
.arrowbox-dark .panel-arrowcontent {
|
|
border: @border_width_large@ solid white;
|
|
border-radius: @border_radius_normal@;
|
|
box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
|
|
}
|
|
|
|
.panel-arrow[side="top"] {
|
|
list-style-image: url("chrome://browser/skin/images/arrowbox-up.png");
|
|
margin-bottom: -@margin_normal@;
|
|
}
|
|
|
|
.panel-arrow[side="bottom"] {
|
|
list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
|
|
margin-top: -@margin_normal@;
|
|
}
|
|
|
|
.panel-arrow[side="left"] {
|
|
list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
|
|
margin-right: -@margin_normal@;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.panel-arrow[side="right"] {
|
|
list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
|
|
margin-left: -@margin_normal@;
|
|
}
|
|
|
|
/*.meta -------------------------------------------------------------------- */
|
|
|
|
.meta {
|
|
background-color: @panel_light_color@;
|
|
background-image: url("chrome://browser/skin/images/firefox-watermark.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
padding: @metro_spacing_normal@ @metro_spacing_xxnormal@;
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.meta-section {
|
|
margin: 0 @metro_spacing_large@;
|
|
}
|
|
|
|
.meta-section-title {
|
|
font-size: @metro_font_large@;
|
|
font-weight: 100;
|
|
display: none;
|
|
cursor: default;
|
|
}
|
|
|
|
#start-container[viewstate="snapped"] .meta-section-title.narrow-title,
|
|
#start-container:not([viewstate="snapped"]) .meta-section-title.wide-title {
|
|
display: block;
|
|
}
|
|
|
|
.meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(ltr):after {
|
|
content: ">";
|
|
}
|
|
|
|
.meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(rtl):before {
|
|
content: "<";
|
|
}
|
|
|
|
/* App bars ----------------------------------------------------------------- */
|
|
|
|
appbar {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
transform: translateY(100%);
|
|
transition: transform @metro_animation_duration@ @metro_animation_easing@;
|
|
font-size: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
appbar[hiding],
|
|
appbar[visible] {
|
|
visibility: visible;
|
|
}
|
|
|
|
appbar[visible] {
|
|
transform: none;
|
|
}
|
|
|
|
#stack[keyboardVisible] > appbar {
|
|
/* Slow the bottom up transition since it's impossible to match the system's
|
|
soft keyboard movement. */
|
|
transition: transform @metro_animation_duration@ @metro_animation_easing@,
|
|
bottom @appbar_keyboard_slideup_duration@ @metro_animation_easing@;
|
|
}
|
|
|
|
|
|
appbar toolbar {
|
|
-moz-appearance: none;
|
|
-moz-box-align: center;
|
|
border: 0;
|
|
width: 100%;
|
|
min-height: @toolbar_height@;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
appbar toolbar toolbarbutton {
|
|
border: 0;
|
|
margin: 0 @toolbar_horizontal_spacing@;
|
|
padding: 0;
|
|
/* Don't inherit background-color from toolbarbutton[checked="true"] */
|
|
background-color: transparent;
|
|
}
|
|
|
|
appbar toolbar toolbarbutton[disabled] {
|
|
visibility: collapse;
|
|
}
|
|
|
|
appbar toolbar[labelled] {
|
|
min-height: @labelled_toolbar_height@;
|
|
}
|
|
|
|
appbar toolbar[labelled] toolbarbutton {
|
|
-moz-box-orient: vertical;
|
|
}
|
|
|
|
appbar toolbar[labelled] toolbarbutton > .toolbarbutton-text {
|
|
display: block;
|
|
padding-top: @metro_spacing_small@;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Sprites */
|
|
|
|
.appbar-primary > .toolbarbutton-icon,
|
|
.appbar-secondary > .toolbarbutton-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
/* Primary sprite format: one button per sprite.
|
|
|
|
States from left to right:
|
|
normal, hover, active/toggled, toggled+hover, toggled+active. */
|
|
|
|
.appbar-primary {
|
|
-moz-image-region: rect(0 40px 40px 0);
|
|
}
|
|
|
|
.appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
|
|
-moz-image-region: rect(0 80px 40px 40px);
|
|
}
|
|
|
|
.appbar-primary:not([checked]):active:not([disabled]),
|
|
.appbar-primary[checked] {
|
|
-moz-image-region: rect(0 120px 40px 80px);
|
|
}
|
|
|
|
.appbar-primary[checked]:hover:not(:active):not([disabled]) {
|
|
-moz-image-region: rect(0 160px 40px 120px);
|
|
}
|
|
|
|
.appbar-primary[checked]:active:not([disabled]) {
|
|
-moz-image-region: rect(0 200px 40px 160px);
|
|
}
|
|
|
|
@media (min-resolution: @min_res_140pc@) {
|
|
.appbar-primary {
|
|
-moz-image-region: rect(0 56px 56px 0);
|
|
}
|
|
|
|
.appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
|
|
-moz-image-region: rect(0 112px 56px 56px);
|
|
}
|
|
|
|
.appbar-primary:not([checked]):active:not([disabled]),
|
|
.appbar-primary[checked] {
|
|
-moz-image-region: rect(0 168px 56px 112px);
|
|
}
|
|
|
|
.appbar-primary[checked]:hover:not(:active):not([disabled]) {
|
|
-moz-image-region: rect(0 224px 56px 168px);
|
|
}
|
|
|
|
.appbar-primary[checked]:active:not([disabled]) {
|
|
-moz-image-region: rect(0 280px 56px 224px);
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: @min_res_180pc@) {
|
|
.appbar-primary {
|
|
-moz-image-region: rect(0 72px 72px 0);
|
|
}
|
|
|
|
.appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
|
|
-moz-image-region: rect(0 144px 72px 72px);
|
|
}
|
|
|
|
.appbar-primary:not([checked]):active:not([disabled]),
|
|
.appbar-primary[checked] {
|
|
-moz-image-region: rect(0 216px 72px 144px);
|
|
}
|
|
|
|
.appbar-primary[checked]:hover:not(:active):not([disabled]) {
|
|
-moz-image-region: rect(0 288px 72px 216px);
|
|
}
|
|
|
|
.appbar-primary[checked]:active:not([disabled]) {
|
|
-moz-image-region: rect(0 360px 72px 288px);
|
|
}
|
|
}
|
|
|
|
/* Secondary sprite format: one sprite for everything */
|
|
|
|
.appbar-secondary {
|
|
list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
|
|
}
|