зеркало из https://github.com/mozilla/gecko-dev.git
Bug 885242 - Part 1 - Reorder browser.css to more closely follow the structure of browser.xul. r=mbrubeck
--HG-- extra : rebase_source : e453a8669887800caae7acf5e9b616e3be962187
This commit is contained in:
Jonathan Wilde
Родитель
7ee9db63db
Коммит
ecdc0252b1
|
|
@ -8,38 +8,7 @@
|
|||
%define forward_transition_length 200ms
|
||||
%define forward_spacing 50px
|
||||
|
||||
/* 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-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;
|
||||
}
|
||||
|
||||
/* Sliding Toolbar/Tab Tray ------------------------------------------------- */
|
||||
/* Tab/StartUI tray ======================================================== */
|
||||
|
||||
#tray {
|
||||
transition: transform @metro_animation_duration@ @metro_animation_easing@;
|
||||
|
|
@ -55,7 +24,7 @@
|
|||
transform: none;
|
||||
}
|
||||
|
||||
/* Tabs --------------------------------------------------------------------- */
|
||||
/* Tabs -------------------------------------------------------------------- */
|
||||
|
||||
#tabs-container {
|
||||
background: @panel_dark_color@ @panel_dark_background@;
|
||||
|
|
@ -218,7 +187,90 @@ documenttab[selected] .documenttab-selection {
|
|||
list-style-image: url(chrome://browser/skin/images/newtab-default.png);
|
||||
}
|
||||
|
||||
/* Selection overlay and monocles ----------------------------------------------- */
|
||||
/* Start UI ----------------------------------------------------------------- */
|
||||
|
||||
#start-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#start-container[startpage],
|
||||
#start-container[filtering] {
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
#start-scrollbox[input="precise"] {
|
||||
overflow-x: scroll;
|
||||
/* Move scrollbar above toolbar,
|
||||
* discount padding added by .meta in #start-container */
|
||||
margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* startUI sections, grids */
|
||||
#start-container .meta-section {
|
||||
/* allot space for at least a single column */
|
||||
min-width: @grid_double_column_width@;
|
||||
}
|
||||
|
||||
#start-topsites {
|
||||
/* allot space for 3 tile columns for the topsites grid */
|
||||
min-width: calc(3 * @grid_double_column_width@);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*Formatting for the limited horizontal space of snapped*/
|
||||
#start-autocomplete[viewstate="snapped"] .richgrid-item-content {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#start-container,
|
||||
#start-autocomplete {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#start-container[viewstate="snapped"] .meta-section {
|
||||
margin: 0px;
|
||||
min-width: @grid_double_column_width@;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#browsers browser {
|
||||
transition: padding-bottom @metro_animation_duration@ @metro_animation_easing@;
|
||||
}
|
||||
|
||||
#browsers[findbar] browser {
|
||||
padding-bottom: @findbar_height@;
|
||||
}
|
||||
|
||||
/* Selection overlay and monocles */
|
||||
|
||||
#page,
|
||||
.selection-overlay {
|
||||
|
|
@ -246,7 +298,183 @@ documenttab[selected] .documenttab-selection {
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Toolbar ------------------------------------------------------------------ */
|
||||
/* 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@;
|
||||
}
|
||||
|
||||
#browsers[input="imprecise"] browser {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* helperapp (save-as) popup */
|
||||
|
||||
#helperapp-target {
|
||||
font-size: @font_small@ !important;
|
||||
}
|
||||
|
||||
/* 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[keyboardVisible] > .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[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[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 ========================================================== */
|
||||
|
||||
#navbar[startpage] {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 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-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-autocomplete {
|
||||
background-color: @panel_light_color@;
|
||||
|
|
@ -352,12 +580,6 @@ documenttab[selected] .documenttab-selection {
|
|||
visibility: collapse;
|
||||
}
|
||||
|
||||
#navbar[startpage] {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* App Bar ----------------------------------------------------------------- */
|
||||
|
||||
/* Page-Specific */
|
||||
|
||||
#pin-button {
|
||||
|
|
@ -398,6 +620,180 @@ documenttab[selected] .documenttab-selection {
|
|||
-moz-image-region: rect(80px, 40px, 120px, 0px) !important;
|
||||
}
|
||||
|
||||
/* Panel UI ================================================================ */
|
||||
|
||||
#panel-container {
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
#panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#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/appbar-back.png);
|
||||
-moz-image-region: rect(0 40px 40px 0);
|
||||
padding: 0;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
@media (min-resolution: 130dpi) {
|
||||
#panel-close-button {
|
||||
list-style-image: url(chrome://browser/skin/images/appbar-back@1.4x.png);
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
#panel-close-button[disabled] {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#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-container[viewstate="snapped"] #panel-view-switcher {
|
||||
font-size: @metro_font_large@;
|
||||
}
|
||||
|
||||
#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;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#findbar > toolbar {
|
||||
min-height: @findbar_height@ !important;
|
||||
}
|
||||
|
||||
#findbar > .previous-button,
|
||||
#findbar > .next-button,
|
||||
#findbar > .close-button {
|
||||
list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
|
||||
min-width: @touch_button_small@ !important; /* button size */
|
||||
min-height: @touch_button_small@ !important; /* button size */
|
||||
border: none !important;
|
||||
background-image: none !important;
|
||||
background-color: inherit !important;
|
||||
pointer-events: auto;
|
||||
-moz-user-focus: ignore !important;
|
||||
margin: 0 @margin_normal@ !important;
|
||||
}
|
||||
|
||||
#findbar > .close-button {
|
||||
-moz-margin-start: 0;
|
||||
-moz-image-region: rect(0px, 480px, 40px, 440px);
|
||||
}
|
||||
|
||||
#findbar > .close-button:hover {
|
||||
-moz-image-region: rect(40px, 480px, 80px, 440px);
|
||||
}
|
||||
|
||||
#findbar > .close-button:active {
|
||||
-moz-image-region: rect(80px, 480px, 120px, 440px);
|
||||
}
|
||||
|
||||
#findbar > .previous-button {
|
||||
-moz-margin-end: 0;
|
||||
-moz-image-region: rect(0px, 400px, 40px, 360px);
|
||||
}
|
||||
|
||||
#findbar > .previous-button:hover {
|
||||
-moz-image-region: rect(40px, 400px, 80px, 360px);
|
||||
}
|
||||
|
||||
#findbar > .previous-button:active{
|
||||
-moz-image-region: rect(80px, 400px, 120px, 360px);
|
||||
}
|
||||
|
||||
#findbar > .next-button {
|
||||
-moz-margin-start: 0;
|
||||
-moz-image-region: rect(0px, 440px, 40px, 400px);
|
||||
}
|
||||
|
||||
#findbar > .next-button:hover {
|
||||
-moz-image-region: rect(40px, 440px, 80px, 400px);
|
||||
}
|
||||
|
||||
#findbar > .next-button:active {
|
||||
-moz-image-region: rect(80px, 440px, 120px, 400px);
|
||||
}
|
||||
|
||||
#findbar-textbox {
|
||||
pointer-events: auto;
|
||||
-moz-margin-end: 0;
|
||||
border: none !important;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.textbox-search-icon {
|
||||
list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
|
||||
-moz-image-region: auto;
|
||||
}
|
||||
|
||||
/* 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 deck {
|
||||
margin-right: @margin_normal@;
|
||||
}
|
||||
|
||||
#findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
|
||||
background: rgb(255,200,200);
|
||||
}
|
||||
|
||||
#findbar-textbox:hover:active {
|
||||
background: #8db8d8;
|
||||
}
|
||||
|
||||
/* Contextual appbar ======================================================= */
|
||||
|
||||
#contextualactions-tray {
|
||||
background-color: @metro_orange@;
|
||||
}
|
||||
|
|
@ -465,13 +861,41 @@ documenttab[selected] .documenttab-selection {
|
|||
-moz-image-region: rect(80px, 560px, 120px, 520px) !important;
|
||||
}
|
||||
|
||||
/* Flyouts ---------------------------------------------------------------- */
|
||||
/* 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 flyout pane -------------------------------------------------------- */
|
||||
|
||||
#sync-flyoutpanel {
|
||||
width: 346px;
|
||||
|
|
@ -562,7 +986,7 @@ flyoutpanel > settings:first-child {
|
|||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/* About flyout pane */
|
||||
/* About flyout pane ------------------------------------------------------- */
|
||||
|
||||
#about-flyoutpanel {
|
||||
width: 350px;
|
||||
|
|
@ -590,7 +1014,7 @@ flyoutpanel > settings:first-child {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Preferences flyout */
|
||||
/* Preferences flyout pane ------------------------------------------------- */
|
||||
|
||||
#prefs-flyoutpanel {
|
||||
width: 400px;
|
||||
|
|
@ -712,172 +1136,8 @@ setting[type="radio"] > vbox {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Start UI (Autocomplete + New Tab Page) ----------------------------------- */
|
||||
/* Alert Popup ============================================================= */
|
||||
|
||||
#start-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#start-container[startpage],
|
||||
#start-container[filtering] {
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
#start-scrollbox[input="precise"] {
|
||||
overflow-x: scroll;
|
||||
/* Move scrollbar above toolbar, discount padding added by .meta in #start-container */
|
||||
margin-bottom: calc(@toolbar_height@ - @metro_spacing_normal@);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* startUI sections, grids */
|
||||
#start-container .meta-section {
|
||||
/* allot space for at least a single column */
|
||||
min-width: @grid_double_column_width@;
|
||||
}
|
||||
|
||||
#start-topsites {
|
||||
/* allot space for 3 tile columns for the topsites grid */
|
||||
min-width: calc(3 * @grid_double_column_width@);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*Formatting for the limited horizontal space of snapped*/
|
||||
#start-autocomplete[viewstate="snapped"] .richgrid-item-content {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#start-container,
|
||||
#start-autocomplete {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#start-container[viewstate="snapped"] .meta-section {
|
||||
margin: 0px;
|
||||
min-width: @grid_double_column_width@;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#browsers browser {
|
||||
transition: padding-bottom @metro_animation_duration@ @metro_animation_easing@;
|
||||
}
|
||||
|
||||
#browsers[findbar] browser {
|
||||
padding-bottom: @findbar_height@;
|
||||
}
|
||||
|
||||
/* Panel UI ---------------------------------------------------------------- */
|
||||
|
||||
#panel-container {
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
#panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#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/appbar-back.png);
|
||||
-moz-image-region: rect(0 40px 40px 0);
|
||||
padding: 0;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
@media (min-resolution: 130dpi) {
|
||||
#panel-close-button {
|
||||
list-style-image: url(chrome://browser/skin/images/appbar-back@1.4x.png);
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
#panel-close-button[disabled] {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#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-container[viewstate="snapped"] #panel-view-switcher {
|
||||
font-size: @metro_font_large@;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Context Menu ------------------------------------------------------------ */
|
||||
|
||||
#context-commands richlistitem[disabled] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Alert Popup -------------------------------------------------------------- */
|
||||
#alerts-container {
|
||||
color: white;
|
||||
background-color: #5e6166;
|
||||
|
|
@ -908,162 +1168,3 @@ setting[type="radio"] > vbox {
|
|||
-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-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[keyboardVisible] > .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[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[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;
|
||||
}
|
||||
|
||||
|
||||
/* helperapp (save-as) popup ----------------------------------------------- */
|
||||
#helperapp-target {
|
||||
font-size: @font_small@ !important;
|
||||
}
|
||||
|
||||
/* 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@;
|
||||
}
|
||||
|
||||
#browsers[input="imprecise"] browser {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* :::::: 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -781,98 +781,3 @@ appbar toolbar[labelled] > toolbarbutton > .toolbarbutton-text {
|
|||
.appbar-secondary {
|
||||
list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
|
||||
}
|
||||
|
||||
/* Find bar ------------------------------------------------------------- */
|
||||
|
||||
#findbar {
|
||||
background-color: @metro_orange@;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#findbar > toolbar {
|
||||
min-height: @findbar_height@ !important;
|
||||
}
|
||||
|
||||
#findbar > .previous-button,
|
||||
#findbar > .next-button,
|
||||
#findbar > .close-button {
|
||||
list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
|
||||
min-width: @touch_button_small@ !important; /* button size */
|
||||
min-height: @touch_button_small@ !important; /* button size */
|
||||
border: none !important;
|
||||
background-image: none !important;
|
||||
background-color: inherit !important;
|
||||
pointer-events: auto;
|
||||
-moz-user-focus: ignore !important;
|
||||
margin: 0 @margin_normal@ !important;
|
||||
}
|
||||
|
||||
#findbar > .close-button {
|
||||
-moz-margin-start: 0;
|
||||
-moz-image-region: rect(0px, 480px, 40px, 440px);
|
||||
}
|
||||
|
||||
#findbar > .close-button:hover {
|
||||
-moz-image-region: rect(40px, 480px, 80px, 440px);
|
||||
}
|
||||
|
||||
#findbar > .close-button:active {
|
||||
-moz-image-region: rect(80px, 480px, 120px, 440px);
|
||||
}
|
||||
|
||||
#findbar > .previous-button {
|
||||
-moz-margin-end: 0;
|
||||
-moz-image-region: rect(0px, 400px, 40px, 360px);
|
||||
}
|
||||
|
||||
#findbar > .previous-button:hover {
|
||||
-moz-image-region: rect(40px, 400px, 80px, 360px);
|
||||
}
|
||||
|
||||
#findbar > .previous-button:active{
|
||||
-moz-image-region: rect(80px, 400px, 120px, 360px);
|
||||
}
|
||||
|
||||
#findbar > .next-button {
|
||||
-moz-margin-start: 0;
|
||||
-moz-image-region: rect(0px, 440px, 40px, 400px);
|
||||
}
|
||||
|
||||
#findbar > .next-button:hover {
|
||||
-moz-image-region: rect(40px, 440px, 80px, 400px);
|
||||
}
|
||||
|
||||
#findbar > .next-button:active {
|
||||
-moz-image-region: rect(80px, 440px, 120px, 400px);
|
||||
}
|
||||
|
||||
#findbar-textbox {
|
||||
pointer-events: auto;
|
||||
-moz-margin-end: 0;
|
||||
border: none !important;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.textbox-search-icon {
|
||||
list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
|
||||
-moz-image-region: auto;
|
||||
}
|
||||
|
||||
/* 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 deck {
|
||||
margin-right: @margin_normal@;
|
||||
}
|
||||
|
||||
#findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
|
||||
background: rgb(255,200,200);
|
||||
}
|
||||
|
||||
#findbar-textbox:hover:active {
|
||||
background: #8db8d8;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче