scrollbars.css (7109B)
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: scrollbar-horizontal; 16 -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar"); 17 cursor: default; 18 background: url("chrome://global/skin/scrollbar/slider.gif") scrollbar; 19 } 20 21 @media all and (-moz-overlay-scrollbars) { 22 scrollbar[root="true"] { 23 position: relative; 24 z-index: 2147483647; /* largest positive value of a signed 32-bit integer */ 25 } 26 27 scrollbar:not([active="true"]), 28 scrollbar[disabled="true"] { 29 visibility: hidden; 30 } 31 } 32 33 scrollbar[orient="vertical"] 34 { 35 -moz-appearance: scrollbar-vertical; 36 } 37 38 /* ::::: borders for thumb and buttons ::::: */ 39 40 thumb, 41 scrollbarbutton { 42 border: 2px solid; 43 -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight; 44 -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow; 45 -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow; 46 -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight; 47 background-color: -moz-Dialog; 48 } 49 50 /* ::::: slider - a thumb is inside ::::: */ 51 slider { 52 -moz-appearance: scrollbartrack-horizontal; 53 } 54 55 slider[orient="vertical"] { 56 -moz-appearance: scrollbartrack-vertical; 57 } 58 59 /* ::::: thumb (horizontal) ::::: */ 60 61 thumb { 62 -moz-appearance: scrollbarthumb-vertical; 63 min-height: 8px; 64 } 65 66 thumb[orient="horizontal"] { 67 -moz-appearance: scrollbarthumb-horizontal; 68 min-width: 8px; 69 } 70 71 /* ::::: scrollbar button ::::: */ 72 73 scrollbarbutton { 74 background: -moz-Dialog no-repeat 50% 50%; 75 min-width: 16px; 76 min-height: 16px; 77 } 78 79 scrollbarbutton:hover:active, scrollbarbutton[active="true"] { 80 -moz-border-top-colors: ThreeDShadow -moz-Dialog; 81 -moz-border-right-colors: ThreeDShadow -moz-Dialog; 82 -moz-border-bottom-colors: ThreeDShadow -moz-Dialog; 83 -moz-border-left-colors: ThreeDShadow -moz-Dialog; 84 background-position: 60% 60%; 85 } 86 87 /* ::::: square at the corner of two scrollbars ::::: */ 88 89 scrollcorner { 90 /* XXX -moz-appearance: scrollcorner; */ 91 -moz-binding: url(chrome://global/content/bindings/scrollbar.xml#scrollbar-base); 92 width: 16px; 93 cursor: default; 94 background-color: -moz-Dialog; 95 } 96 97 /* ..... increment .... */ 98 99 scrollbarbutton[type="increment"] { 100 -moz-appearance: scrollbarbutton-right; 101 background-image: url("chrome://global/skin/arrow/arrow-rit.gif") 102 } 103 104 scrollbarbutton[type="increment"][disabled="true"] { 105 background-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif") 106 } 107 108 scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] { 109 -moz-appearance: scrollbarbutton-down; 110 background-image: url("chrome://global/skin/arrow/arrow-dn.gif") 111 } 112 113 scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] { 114 background-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif") 115 } 116 117 /* ..... decrement .... */ 118 119 scrollbarbutton[type="decrement"] { 120 -moz-appearance: scrollbarbutton-left; 121 background-image: url("chrome://global/skin/arrow/arrow-lft.gif") 122 } 123 124 scrollbarbutton[type="decrement"][disabled="true"] { 125 background-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif") 126 } 127 128 scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] { 129 -moz-appearance: scrollbarbutton-up; 130 background-image: url("chrome://global/skin/arrow/arrow-up.gif") 131 } 132 133 scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] { 134 background-image: url("chrome://global/skin/arrow/arrow-up-dis.gif") 135 } 136 137 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */ 138 /* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */ 139 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */ 140 @media print { 141 /* ::::: scrollbar ::::: */ 142 143 html|div scrollbar { 144 -moz-appearance: scrollbar-horizontal; 145 -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar"); 146 cursor: default; 147 background: url("chrome://global/skin/scrollbar/slider.gif") scrollbar; 148 } 149 150 html|div scrollbar[orient="vertical"] 151 { 152 -moz-appearance: scrollbar-vertical; 153 } 154 155 /* ::::: borders for thumb and buttons ::::: */ 156 157 html|div thumb, 158 html|div scrollbarbutton { 159 border: 2px solid; 160 -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight; 161 -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow; 162 -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow; 163 -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight; 164 background-color: -moz-Dialog; 165 } 166 167 /* ::::: thumb (horizontal) ::::: */ 168 169 html|div thumb { 170 -moz-appearance: scrollbarthumb-vertical; 171 min-height: 8px; 172 } 173 174 html|div thumb[orient="horizontal"] { 175 -moz-appearance: scrollbarthumb-horizontal; 176 min-width: 8px; 177 } 178 179 /* ::::: scrollbar button ::::: */ 180 181 html|div scrollbarbutton { 182 background: -moz-Dialog no-repeat 50% 50%; 183 min-width: 16px; 184 min-height: 16px; 185 } 186 187 html|div scrollbarbutton:hover:active, html|div scrollbarbutton[active="true"] { 188 -moz-border-top-colors: ThreeDShadow -moz-Dialog; 189 -moz-border-right-colors: ThreeDShadow -moz-Dialog; 190 -moz-border-bottom-colors: ThreeDShadow -moz-Dialog; 191 -moz-border-left-colors: ThreeDShadow -moz-Dialog; 192 background-position: 60% 60%; 193 } 194 195 /* ..... increment .... */ 196 197 html|div scrollbarbutton[type="increment"] { 198 -moz-appearance: scrollbarbutton-right; 199 background-image: url("chrome://global/skin/arrow/arrow-rit.gif") 200 } 201 202 html|div scrollbarbutton[type="increment"][disabled="true"] { 203 background-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif") 204 } 205 206 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] { 207 -moz-appearance: scrollbarbutton-down; 208 background-image: url("chrome://global/skin/arrow/arrow-dn.gif") 209 } 210 211 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] { 212 background-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif") 213 } 214 215 /* ..... decrement .... */ 216 217 html|div scrollbarbutton[type="decrement"] { 218 -moz-appearance: scrollbarbutton-left; 219 background-image: url("chrome://global/skin/arrow/arrow-lft.gif") 220 } 221 222 html|div scrollbarbutton[type="decrement"][disabled="true"] { 223 background-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif") 224 } 225 226 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] { 227 -moz-appearance: scrollbarbutton-up; 228 background-image: url("chrome://global/skin/arrow/arrow-up.gif") 229 } 230 231 html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] { 232 background-image: url("chrome://global/skin/arrow/arrow-up-dis.gif") 233 } 234 235 }