scrollbars.css (7290B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* ===== xulscrollbars.css ============================================== 6 == Styles used by XUL scrollbar-related elements. 7 ======================================================================= */ 8 9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 10 @namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */ 11 12 /* ::::: scrollbar ::::: */ 13 14 scrollbar { 15 -moz-appearance: none; 16 -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar"); 17 cursor: default; 18 background: #181411; 19 pointer-events: auto; 20 } 21 22 @media all and (-moz-overlay-scrollbars) { 23 scrollbar[root="true"] { 24 position: relative; 25 z-index: 2147483647; /* largest positive value of a signed 32-bit integer */ 26 } 27 28 scrollbar:not([active="true"]), 29 scrollbar[disabled="true"] { 30 visibility: hidden; 31 } 32 } 33 34 scrollbar[orient="vertical"] 35 { 36 -moz-appearance: none; 37 } 38 39 /* ::::: borders for thumb and buttons ::::: */ 40 41 thumb, 42 scrollbarbutton { 43 background:#181411 50% 50% no-repeat; 44 } 45 46 thumb { 47 border: 1px solid; 48 -moz-border-top-colors: rgb(64,64,64); 49 -moz-border-right-colors: rgb(64,64,64); 50 -moz-border-bottom-colors: rgb(64,64,64); 51 -moz-border-left-colors: rgb(64,64,64); 52 } 53 54 thumb:hover { 55 background-color: rgb(1,1,1); 56 } 57 58 thumb:active { 59 background-color: rgb(2,2,2); 60 } 61 62 /* ::::: slider - a thumb is inside ::::: */ 63 slider { 64 -moz-appearance: scrollbartrack-horizontal; 65 } 66 67 slider[orient="vertical"] { 68 -moz-appearance: scrollbartrack-vertical; 69 } 70 71 /* ::::: thumb (horizontal) ::::: */ 72 73 thumb { 74 min-height: 16px; 75 border-radius: 0px; 76 } 77 78 thumb[orient="horizontal"] { 79 min-width: 16px; 80 } 81 82 /* ::::: scrollbar button ::::: */ 83 84 scrollbarbutton { 85 background: #181411 no-repeat 0px 1px; 86 min-width: 15px; 87 min-height: 15px; 88 } 89 90 scrollbarbutton:hover:active, scrollbarbutton[active="true"] { 91 background-color: rgb(1,1,1); 92 } 93 94 scrollbar[orient="vertical"] > scrollbarbutton { 95 background-size: 9px 5px; 96 } 97 98 scrollbar:not([orient="vertical"]) > scrollbarbutton { 99 background-size: 5px 9px; 100 } 101 102 /* ::::: square at the corner of two scrollbars ::::: */ 103 104 scrollcorner { 105 /* XXX -moz-appearance: scrollcorner; */ 106 -moz-binding: url(chrome://global/content/bindings/scrollbar.xml#scrollbar-base); 107 width: 16px; 108 cursor: default; 109 background-color: #181411; 110 } 111 112 /* ..... increment .... */ 113 114 scrollbarbutton[type="increment"] { 115 -moz-appearance: none; 116 background-image: url("chrome://global/skin/arrow/arrow-h.svg#rit"); 117 background-position: center; 118 background-repeat: no-repeat; 119 } 120 121 scrollbarbutton[type="increment"][disabled="true"] { 122 background-image: url("chrome://global/skin/arrow/arrow-h.svg#rit-dis"); 123 background-color: rgb(62,62,62); 124 } 125 126 scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] { 127 -moz-appearance: none; 128 background-image: url("chrome://global/skin/arrow/arrow-v.svg#dn"); 129 background-position: center; 130 background-repeat: no-repeat; 131 } 132 133 scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] { 134 background-image: url("chrome://global/skin/arrow/arrow-v.svg#dn-dis"); 135 background-color: #181411; 136 } 137 138 /* ..... decrement .... */ 139 140 scrollbarbutton[type="decrement"] { 141 -moz-appearance: none; 142 background-image: url("chrome://global/skin/arrow/arrow-h.svg#lft"); 143 background-position: center; 144 background-repeat: no-repeat; 145 } 146 147 scrollbarbutton[type="decrement"][disabled="true"] { 148 background-image: url("chrome://global/skin/arrow/arrow-h.svg#lft-dis"); 149 background-color: #181411; 150 } 151 152 scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] { 153 -moz-appearance: none; 154 background-image: url("chrome://global/skin/arrow/arrow-v.svg#up"); 155 background-position: center; 156 background-repeat: no-repeat; 157 } 158 159 scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] { 160 background-image: url("chrome://global/skin/arrow/arrow-v.svg#up-dis"); 161 background-color: #181411; 162 } 163 164 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */ 165 /* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */ 166 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */ 167 @media print { 168 /* ::::: scrollbar ::::: */ 169 170 html|div scrollbar { 171 -moz-appearance: none; 172 -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar"); 173 cursor: default; 174 background: #181411; 175 } 176 177 /* ::::: borders for thumb and buttons ::::: */ 178 179 html|div thumb, 180 html|div scrollbarbutton { 181 background: #181411 50% 50% no-repeat; 182 } 183 184 html|div thumb { 185 border: 1px solid; 186 -moz-border-top-colors: rgb(64,64,64); 187 -moz-border-right-colors: rgb(64,64,64); 188 -moz-border-bottom-colors: rgb(64,64,64); 189 -moz-border-left-colors: rgb(64,64,64); 190 } 191 192 html|div thumb:hover { 193 background-color: rgb(1,1,1); 194 } 195 196 html|div thumb:active { 197 background-color: rgb(2,2,2); 198 } 199 200 /* ::::: thumb (horizontal) ::::: */ 201 202 html|div thumb { 203 min-height: 16px; 204 border-radius: 0px; 205 } 206 207 html|div thumb[orient="horizontal"] { 208 min-width: 16px; 209 } 210 211 /* ::::: scrollbar button ::::: */ 212 213 html|div scrollbarbutton { 214 background: #181411 no-repeat 0px 1px; 215 width: 15px; 216 height: 15px; 217 } 218 219 html|div scrollbarbutton:hover:active, html|div scrollbarbutton[active="true"] { 220 background-color: rgb(1,1,1); 221 } 222 223 /* ..... increment .... */ 224 225 html|div scrollbarbutton[type="increment"] { 226 -moz-appearance: none; 227 background-image: url("chrome://global/skin/arrow/arrow-h.svg#rit"); 228 background-position: center; 229 background-repeat: no-repeat; 230 } 231 232 html|div scrollbarbutton[type="increment"][disabled="true"] { 233 background-image: url("chrome://global/skin/arrow/arrow-h.svg#rit-dis"); 234 background-color: #181411; 235 } 236 237 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] { 238 -moz-appearance: none; 239 background-image: url("chrome://global/skin/arrow/arrow-v.svg#dn"); 240 background-position: center; 241 background-repeat: no-repeat; 242 } 243 244 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] { 245 background-image: url("chrome://global/skin/arrow/arrow-v.svg#dn-dis"); 246 background-color: #181411; 247 } 248 249 /* ..... decrement .... */ 250 251 html|div scrollbarbutton[type="decrement"] { 252 -moz-appearance: none; 253 background-image: url("chrome://global/skin/arrow/arrow-h.svg#lft"); 254 background-position: center; 255 background-repeat: no-repeat; 256 } 257 258 html|div scrollbarbutton[type="decrement"][disabled="true"] { 259 background-image: url("chrome://global/skin/arrow/arrow-h.svg#lft-dis"); 260 background-color: #181411; 261 } 262 263 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] { 264 -moz-appearance: none; 265 background-image: url("chrome://global/skin/arrow/arrow-v.svg#up"); 266 background-position: center; 267 background-repeat: no-repeat; 268 } 269 270 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] { 271 background-image: url("chrome://global/skin/arrow/arrow-v.svg#up-dis"); 272 background-color: #181411; 273 } 274 275 }