gecko/browser/metro/theme/platform.css
Sam Foster 1baf431d40 Bug 829056 - Cross-slide gesture module for Fx start tiles. r=mbrubeck
--HG--
extra : rebase_source : 8722b2800b93015b218400c6e1f7d79227b78924
2013-04-22 22:42:09 +01:00

727 lines
17 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 {
text-decoration: none;
color: #1167bd;
}
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@;
}
.link {
color: blue;
text-decoration: underline;
}
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%;
}
.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;
}
.menu-popup richlistitem:not([disabled]):hover {
background-color: #dedad0;
color: black;
}
.menu-popup richlistitem:not([disabled]):active {
background-color: @selected_color@ !important;
color: black;
}
.menu-popup > richlistbox[left-hand="true"] > richlistitem {
padding-left: 50px;
}
.menu-popup > richlistbox[left-hand="false"] > richlistitem {
padding-right: 50px;
}
/* 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;
}
/* Rich Grid ---------------------------------------------------------------- */
richgrid {
display: -moz-box;
-moz-box-sizing: border-box;
}
richgrid .meta-grid {
display: block;
}
richgriditem {
padding: @metro_spacing_small@;
}
richgriditem .richgrid-item-content {
border: @metro_border_thin@ solid @tile_border_color@;
box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.1);
-moz-box-sizing: border-box;
padding: 10px 8px 6px 8px;
position: relative;
}
.richgrid-item-content {
background: #fff;
}
richgriditem[selected] .richgrid-item-content::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url(chrome://browser/skin/images/tile-selected-check-hdpi.png);
background-origin: border-box;
background-position: right 0 top 0;
background-repeat: no-repeat;
/* scale the image whatever the dppx */
background-size: 35px 35px;
border: @metro_border_xthick@ solid @selected_color@;
}
/* ease the return to original position when cross-sliding */
richgriditem:not([crosssliding]) {
transition: transform ease-out 0.2s;
}
richgriditem .richgrid-icon-container {
padding-bottom: 2px;
}
richgriditem .richgrid-icon-box {
padding: 4px;
background: #fff;
opacity: 1.0;
}
/* tile pinned-state indication */
richgriditem[pinned] .richgrid-item-content::before {
pointer-events:none;
content: "";
display: block;
position: absolute;
width: 35px;
height: 35px;
right: 0;
left: auto;
top: 0;
background-image: url(chrome://browser/skin/images/pinned-hdpi.png);
background-position: center;
background-repeat: no-repeat;
/* scale the image whatever the dppx */
background-size: 70px 70px;
}
/* Selected _and_ pinned tiles*/
richgriditem[selected][pinned] .richgrid-item-content::before {
background-position: right -@metro_border_xthick@ top -@metro_border_xthick@;
width: 70px;
height: 70px;
}
richgriditem[pinned]:-moz-locale-dir(rtl) .richgrid-item-content::before {
left: 0;
right: auto;
}
richgriditem[customColor] {
color: #f1f1f1;
}
richgriditem[customImage] {
color: #1a1a1a;
}
richgriditem[customColor] .richgrid-icon-box {
opacity: 0.8;
background-color: #fff;
}
.richgrid-item-content[customImage] {
height: 160px;
width: 250px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-moz-box-pack: end;
padding: 0px;
}
/* hide icon if there is an image background */
.richgrid-icon-container[customImage] {
visibility: collapse;
}
.richgrid-item-desc {
width: @tile_width@;
font-size: @metro_font_normal@;
margin-left: 0px !important;
padding-left: 0px !important;
}
.richgrid-item-content[customImage] > .richgrid-item-desc {
background: hsla(0,2%,98%,.95);
/*margin-bottom: 0px;
margin-right: 0px;*/
margin: 0px;
}
richgriditem image {
width: 24px;
height: 24px;
list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
}
/* 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 {
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;
}
/* 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: radial-gradient(circle farthest-corner at left bottom,
rgba(255, 127, 0, 0.2) 0%,
rgba(255, 212, 0, 0) 30%),
radial-gradient(circle farthest-corner at 40% 100%,
rgba(0, 120, 255, 0.15) 0%,
rgba(0, 186, 255, 0) 20%),
radial-gradient(circle farthest-corner at 60% 100%,
rgba(0, 120, 255, 0.125) 0%,
rgba(0, 186, 255, 0) 20%),
radial-gradient(circle farthest-corner at right bottom,
rgba(185, 17, 255, 0.1) 0%,
rgba(255, 84, 253, 0) 30%),
url("chrome://browser/skin/images/firefox-watermark.png"),
@panel_light_background@;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, 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;
}