mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-12 14:37:50 +00:00
10ffadea74
For non-root scroll frames this would lead to the scrollbars drawing above content outside the scroll frame and above everything in the scroll frame.
306 lines
7.6 KiB
CSS
306 lines
7.6 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/. */
|
|
|
|
@namespace url("http://www.w3.org/1999/xhtml");
|
|
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
|
|
|
/* Style the scrollbars */
|
|
xul|window xul|scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
html xul|scrollbar[root="true"] {
|
|
position: relative;
|
|
z-index: 2147483647;
|
|
}
|
|
|
|
html xul|scrollbar {
|
|
-moz-appearance: none !important;
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
border: 0px solid transparent !important;
|
|
pointer-events: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
xul|scrollbar[orient="vertical"] {
|
|
-moz-margin-start: -8px;
|
|
min-width: 8px;
|
|
max-width: 8px;
|
|
}
|
|
|
|
xul|scrollbar[orient="vertical"] xul|thumb {
|
|
max-width: 6px !important;
|
|
min-width: 6px !important;
|
|
}
|
|
|
|
xul|scrollbar[orient="horizontal"] {
|
|
margin-top: -8px;
|
|
min-height: 8px;
|
|
max-height: 8px;
|
|
}
|
|
|
|
xul|scrollbar[orient="horizontal"] xul|thumb {
|
|
max-height: 6px !important;
|
|
min-height: 6px !important;
|
|
}
|
|
|
|
xul|scrollbar:not([active="true"]),
|
|
xul|scrollbar[disabled] {
|
|
opacity: 0;
|
|
transition: opacity 1s ease;
|
|
}
|
|
|
|
xul|scrollbarbutton {
|
|
min-height: 8px !important;
|
|
min-width: 8px !important;
|
|
-moz-appearance: none !important;
|
|
visibility: hidden;
|
|
}
|
|
|
|
xul|scrollbarbutton[sbattr="scrollbar-up-top"],
|
|
xul|scrollbarbutton[sbattr="scrollbar-bottom-top"] {
|
|
display: none;
|
|
}
|
|
|
|
xul|thumb {
|
|
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: 1px solid rgba(255, 255, 255, 0.4) !important;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
xul|scrollbarbutton {
|
|
background-image: none !important;
|
|
}
|
|
|
|
/* -moz-touch-enabled? media elements */
|
|
:-moz-any(video, audio) > xul|videocontrols {
|
|
-moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");
|
|
}
|
|
|
|
select:not([size]):not([multiple]) > xul|scrollbar,
|
|
select[size="1"] > xul|scrollbar,
|
|
select:not([size]):not([multiple]) xul|scrollbarbutton,
|
|
select[size="1"] xul|scrollbarbutton {
|
|
display: block;
|
|
margin-left: 0;
|
|
min-width: 16px;
|
|
}
|
|
|
|
/* Override inverse OS themes */
|
|
select,
|
|
textarea,
|
|
button,
|
|
xul|button,
|
|
* > input:not([type="image"]) {
|
|
-moz-appearance: none !important; /* See bug 598421 for fixing the platform */
|
|
border-radius: 3px;
|
|
}
|
|
|
|
select[size],
|
|
select[multiple],
|
|
select[size][multiple],
|
|
textarea,
|
|
* > input:not([type="image"]) {
|
|
border-style: solid;
|
|
border-color: #7d7d7d;
|
|
color: #414141;
|
|
background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 3px, rgba(255,255,255,0.2) 16px);
|
|
}
|
|
|
|
/* Selects are handled by the form helper, see bug 685197 */
|
|
select option, select optgroup {
|
|
pointer-events: none;
|
|
}
|
|
|
|
select:not([size]):not([multiple]),
|
|
select[size="0"],
|
|
select[size="1"],
|
|
* > input[type="button"],
|
|
* > input[type="submit"],
|
|
* > input[type="reset"],
|
|
button {
|
|
border-style: solid;
|
|
border-color: #7d7d7d;
|
|
color: #414141;
|
|
background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(215,215,215,0.5) 18px, rgba(115,115,115,0.5) 100%);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 2px, rgba(255,255,255,0.2) 6px);
|
|
}
|
|
|
|
input[type="radio"] {
|
|
background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(195,195,195,0.5) 5px, rgba(115,115,115,0.5) 100%);
|
|
}
|
|
|
|
select {
|
|
border-width: 1px;
|
|
padding: 1px;
|
|
}
|
|
|
|
select:not([size]):not([multiple]),
|
|
select[size="0"],
|
|
select[size="1"] {
|
|
padding: 0 1px 0 1px;
|
|
}
|
|
|
|
* > input:not([type="image"]) {
|
|
border-width: 1px;
|
|
padding: 1px;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
border-width: 1px;
|
|
padding: 2px 1px 2px 1px;
|
|
}
|
|
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
input[type="reset"],
|
|
button {
|
|
border-width: 1px;
|
|
padding: 0 7px 0 7px;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
max-width: 14px;
|
|
max-height: 14px;
|
|
border: 1px solid #a7a7a7 !important;
|
|
padding: 2px 1px 2px 1px;
|
|
}
|
|
|
|
select > button {
|
|
border-width: 0px !important;
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
border-radius: 0;
|
|
color: #414141;
|
|
|
|
background-image: radial-gradient(at bottom left, #bbbbbb 40%, #f5f5f5), url(arrow.svg) !important;
|
|
background-color: transparent;
|
|
background-position: -15px center, 4px center !important;
|
|
background-repeat: no-repeat, no-repeat !important;
|
|
background-size: 100% 90%, auto auto;
|
|
|
|
-moz-binding: none !important;
|
|
position: relative !important;
|
|
font-size: inherit;
|
|
}
|
|
|
|
select[size]:focus,
|
|
select[multiple]:focus,
|
|
select[size][multiple]:focus,
|
|
textarea:focus,
|
|
input[type="file"]:focus > input[type="text"],
|
|
* > input:not([type="image"]):focus {
|
|
outline: 0px !important;
|
|
border-style: solid;
|
|
border-color: rgb(94,128,153);
|
|
background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 3px, rgba(255,255,255,0.2) 16px);
|
|
}
|
|
|
|
select:not([size]):not([multiple]):focus,
|
|
select[size="0"]:focus,
|
|
select[size="1"]:focus,
|
|
input[type="button"]:focus,
|
|
input[type="submit"]:focus,
|
|
input[type="reset"]:focus,
|
|
button:focus {
|
|
outline: 0px !important;
|
|
border-style: solid;
|
|
border-color: rgb(94,128,153);
|
|
background: white linear-gradient(rgba(255,255,255,0.2) 0, rgba(198,225,256,0.2) 18px, rgba(27,113,177,0.5) 100%);
|
|
}
|
|
|
|
input[type="checkbox"]:focus,
|
|
input[type="radio"]:focus {
|
|
border-color: #99c6e0 !important;
|
|
}
|
|
|
|
input[type="checkbox"]:focus {
|
|
background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 2px, rgba(255,255,255,0.2) 6px);
|
|
}
|
|
|
|
input[type="radio"]:focus {
|
|
background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(198,225,246,0.2) 5px, rgba(27,113,177,0.5) 100%);
|
|
}
|
|
|
|
/* we need to be specific for selects because the above rules are specific too */
|
|
textarea[disabled],
|
|
select[size][disabled],
|
|
select[multiple][disabled],
|
|
select[size][multiple][disabled],
|
|
select:not([size]):not([multiple])[disabled],
|
|
select[size="0"][disabled],
|
|
select[size="1"][disabled],
|
|
button[disabled],
|
|
* > input:not([type="image"])[disabled] {
|
|
color: rgba(0,0,0,0.3);
|
|
border-color: rgba(125,125,125,0.4);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
background: transparent linear-gradient(rgba(185,185,185,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(255,255,255,0.4) 100%);
|
|
}
|
|
|
|
select:not([size]):not([multiple])[disabled],
|
|
select[size="0"][disabled],
|
|
select[size="1"][disabled] {
|
|
background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%);
|
|
}
|
|
|
|
input[type="button"][disabled],
|
|
input[type="submit"][disabled],
|
|
input[type="reset"][disabled],
|
|
button[disabled="true"] {
|
|
padding: 0 7px 0 7px;
|
|
background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%);
|
|
}
|
|
|
|
input[type="radio"][disabled],
|
|
input[type="radio"][disabled]:active,
|
|
input[type="radio"][disabled]:hover,
|
|
input[type="radio"][disabled]:hover:active,
|
|
input[type="checkbox"][disabled],
|
|
input[type="checkbox"][disabled]:active,
|
|
input[type="checkbox"][disabled]:hover,
|
|
input[type="checkbox"][disabled]:hover:active {
|
|
border:1px solid rgba(125,125,125,0.4) !important;
|
|
}
|
|
|
|
select[disabled] > button {
|
|
opacity: 0.6;
|
|
padding: 1px 7px 1px 7px;
|
|
}
|
|
|
|
*:-moz-any-link:active,
|
|
*[role=button]:active,
|
|
button:active,
|
|
input:active,
|
|
option:active,
|
|
select:active,
|
|
label:active,
|
|
textarea:active {
|
|
background-color: rgba(141, 184, 216, 0.5);
|
|
}
|
|
|
|
input[type=number] > div > div, /* work around bug 946184 */
|
|
input[type=number]::-moz-number-spin-box {
|
|
display: none;
|
|
}
|
|
|
|
%ifdef MOZ_WIDGET_GONK
|
|
/* This binding only provide key shortcuts that we can't use on devices */
|
|
input,
|
|
textarea {
|
|
-moz-binding: none !important;
|
|
}
|
|
%endif
|