scrollbars.css (4481B)
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 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 6 7 scrollcorner, 8 resizer, 9 scrollbar { 10 /* Rules required for style caching of anonymous content scrollbar parts */ 11 /* stylelint-disable-next-line media-query-no-invalid */ 12 @media -moz-pref("layout.css.cached-scrollbar-styles.enabled") { 13 /* All scrollbar parts must not inherit any properties from the scrollable 14 * element (except for visibility and pointer-events), for the anonymous 15 * content style caching system to work. 16 */ 17 all: initial; 18 visibility: inherit; 19 pointer-events: inherit; 20 21 /* These properties are not included in 'all'. */ 22 -moz-context-properties: initial; 23 -moz-control-character-visibility: initial; 24 -moz-min-font-size-ratio: initial; 25 -moz-box-collapse: initial; 26 -moz-theme: initial; 27 28 /* We don't want zoom on our ancestors to affect our styles. */ 29 zoom: document; 30 31 math-depth: initial; 32 /* As long as inert implies pointer-events: none as it does now, we're 33 * good. */ 34 -moz-inert: initial; 35 36 /* direction: initial is not sufficient, since its initial value can depend 37 * on the document's language. But we specify ltr explicitly below */ 38 39 /* Similarly for font properties, whose initial values depend on the 40 * document's language. Scrollbar parts don't have any text or rely on 41 * font metrics. 42 */ 43 font: 16px sans-serif; 44 45 /* The initial value of justify-items is `legacy`, which makes it depend on 46 * the parent style. 47 * 48 * Reset it to something else. 49 */ 50 justify-items: start; 51 } 52 53 /* We need a display value that doesn't get blockified to preserve the 54 * scrollbar sizing asserts. In practice it doesn't matter since these get 55 * special frames */ 56 display: block; 57 box-sizing: border-box; 58 59 /* Our scrollbar layout uses physical coordinates, we wouldn't want an 60 * horizontal scrollbar to flip in rtl for example. */ 61 direction: ltr; 62 writing-mode: initial; 63 64 -moz-user-focus: ignore; 65 user-select: none; 66 } 67 68 /********** resizer **********/ 69 70 resizer { 71 position: relative; 72 z-index: 2147483647; 73 74 background: url("chrome://global/skin/icons/resizer.svg") no-repeat; 75 background-size: 100% 100%; 76 cursor: se-resize; 77 width: 15px; 78 height: 15px; 79 80 @media (-moz-platform: android) { 81 pointer-events: none; 82 } 83 84 &[dir="left"], 85 &[dir="bottom"][flip], 86 &[dir="bottomleft"] { 87 transform: scaleX(-1); 88 } 89 90 &[dir="bottomleft"] { 91 cursor: sw-resize; 92 } 93 94 &[dir="top"], 95 &[dir="bottom"] { 96 cursor: ns-resize; 97 } 98 99 &[dir="left"], 100 &[dir="right"] { 101 cursor: ew-resize; 102 } 103 104 &[dir="topleft"] { 105 cursor: nw-resize; 106 } 107 108 &[dir="topright"] { 109 cursor: ne-resize; 110 } 111 } 112 113 thumb { 114 appearance: auto; 115 -moz-default-appearance: scrollbarthumb-horizontal; 116 117 scrollbar[vertical] & { 118 -moz-default-appearance: scrollbarthumb-vertical; 119 } 120 121 scrollbar:disabled & { 122 visibility: hidden; 123 } 124 } 125 126 scrollbar { 127 appearance: auto; 128 -moz-default-appearance: scrollbar-horizontal; 129 cursor: default; 130 131 /* stylelint-disable-next-line media-query-no-invalid */ 132 @media -moz-pref("layout.testing.scrollbars.always-hidden") { 133 opacity: 0 !important; 134 } 135 136 @media (-moz-platform: android) { 137 pointer-events: none; 138 } 139 140 @media (-moz-overlay-scrollbars) { 141 will-change: opacity; 142 transition-property: opacity; 143 transition-duration: env(-moz-overlay-scrollbar-fade-duration); 144 145 &:not([active]), 146 &:disabled { 147 pointer-events: none; 148 opacity: 0; 149 } 150 } 151 152 &[vertical] { 153 -moz-default-appearance: scrollbar-vertical; 154 } 155 156 &[root] { 157 position: relative; 158 z-index: 2147483647; /* largest positive value of a signed 32-bit integer */ 159 } 160 } 161 162 scrollbarbutton { 163 appearance: auto; 164 -moz-default-appearance: scrollbarbutton-right; 165 166 scrollbar[vertical] > & { 167 -moz-default-appearance: scrollbarbutton-down; 168 } 169 170 &[type="decrement"] { 171 -moz-default-appearance: scrollbarbutton-left; 172 173 scrollbar[vertical] > & { 174 -moz-default-appearance: scrollbarbutton-up; 175 } 176 } 177 } 178 179 scrollcorner { 180 appearance: auto; 181 -moz-default-appearance: scrollcorner; 182 width: 16px; 183 cursor: default; 184 185 @media (-moz-overlay-scrollbars) { 186 pointer-events: none; 187 } 188 }