git.wh0rd.org / tt-rss.git / blame
| Commit | Line | Data |
|---|---|---|
| 81bea17a AD |
1 | /* Slider |
| 2 | * | |
| 3 | * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) | |
| 4 | * | |
| 5 | * Slider progress bar: | |
| 6 | * 1. Slider progress bar (default styling): | |
| 7 | * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider | |
| 8 | * .dijitSliderLeftBumper - bar at the left of horizontal slider | |
| 9 | * .dijitSliderRightBumper - bar at the right of horizontal slider | |
| 10 | * .dijitSliderProgressBarV - progress bar at the middle of vertical slider | |
| 11 | * .dijitSliderTopBumper - bar at the top of vertical slider | |
| 12 | * .dijitSliderBottomtBumper - bar at the bottom of vertical slider | |
| 13 | * | |
| 14 | * 2. hovered Slider progress bar (ie, mouse hover on progress bar) | |
| 15 | * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border | |
| 16 | * | |
| 17 | * 3. focused Slider progress bar (ie, mouse focused on progress bar) | |
| 18 | * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border | |
| 19 | * | |
| 20 | * 4. disabled/read-only Slider progress bar | |
| 21 | * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled | |
| 22 | * | |
| 23 | * | |
| 24 | * Slider Thumbs: | |
| 25 | * 1. Slider Thumbs (default styling): | |
| 26 | * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar | |
| 27 | * | |
| 28 | * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) | |
| 29 | * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style | |
| 30 | * | |
| 31 | * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) | |
| 32 | * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style | |
| 33 | * | |
| 34 | * | |
| 35 | * Slider Increment/Decrement Buttons: | |
| 36 | * 1. Slider Increment/Decrement Buttons (default styling): | |
| 37 | * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider | |
| 38 | * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider | |
| 39 | * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider | |
| 40 | * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider | |
| 41 | * | |
| 42 | * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) | |
| 43 | * .dijitSliderHover .dijitSliderDecrementIconH - for background, border | |
| 44 | * | |
| 45 | * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) | |
| 46 | * .dijitSliderActive .dijitSliderIncrementIconV - for background, border | |
| 47 | * | |
| 48 | * 4. disabled/read-only Slider Increment/Decrement Buttons | |
| 49 | * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider | |
| 50 | * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider | |
| 51 | */ | |
| 52 | ||
| 53 | @import "../variables"; | |
| 54 | ||
| 55 | .claro .dijitSliderBar { | |
| 56 | border-style: solid; | |
| 57 | outline: 1px; | |
| 58 | } | |
| 59 | .claro .dijitSliderFocused .dijitSliderBar { | |
| 60 | border-color: @focused-border-color; | |
| 61 | } | |
| 62 | .claro .dijitSliderHover .dijitSliderBar { | |
| 63 | border-color: @hovered-border-color; | |
| 64 | } | |
| 65 | .claro .dijitSliderDisabled .dijitSliderBar { | |
| 66 | background-image: none; | |
| 67 | border-color: @disabled-border-color; | |
| 68 | } | |
| f0cfe83e | 69 | .claro .dijitRuleLabelsContainer { |
| 1354d172 AD |
70 | color: @text-color; |
| 71 | } | |
| 81bea17a AD |
72 | |
| 73 | /* Horizontal Slider */ | |
| 74 | ||
| 75 | .claro .dijitRuleLabelsContainerH { | |
| 76 | padding: 2px 0; | |
| 77 | } | |
| 78 | .claro .dijitSlider .dijitSliderProgressBarH, | |
| 79 | .claro .dijitSlider .dijitSliderLeftBumper{ | |
| 81bea17a AD |
80 | border-color: @border-color; |
| 81 | background-color: @slider-fullbar-background-color; | |
| f0cfe83e | 82 | .alpha-white-gradient (top, 1,0px, 1,1px, 0,2px); |
| 81bea17a AD |
83 | } |
| 84 | .claro .dijitSlider .dijitSliderRemainingBarH, | |
| 85 | .claro .dijitSlider .dijitSliderRightBumper{ | |
| 81bea17a AD |
86 | border-color: @border-color; |
| 87 | background-color: @slider-remainingbar-background-color; | |
| 88 | } | |
| 89 | .claro .dijitSliderRightBumper { | |
| 90 | border-right: solid 1px @border-color; | |
| 91 | } | |
| 92 | .claro .dijitSliderLeftBumper { | |
| 93 | border-left: solid 1px @border-color; | |
| 94 | } | |
| 95 | .claro .dijitSliderHover .dijitSliderProgressBarH, | |
| 96 | .claro .dijitSliderHover .dijitSliderLeftBumper{ | |
| 81bea17a AD |
97 | background-color: @slider-hovered-fullbar-background-color; |
| 98 | border-color: @hovered-border-color; | |
| 99 | } | |
| 100 | .claro .dijitSliderHover .dijitSliderRemainingBarH, | |
| 101 | .claro .dijitSliderHover .dijitSliderRightBumper{ | |
| 81bea17a AD |
102 | background-color: @slider-hovered-remainingbar-background-color; |
| 103 | border-color: @hovered-border-color; | |
| 104 | } | |
| 105 | .claro .dijitSliderFocused .dijitSliderProgressBarH, | |
| 106 | .claro .dijitSliderFocused .dijitSliderLeftBumper{ | |
| 81bea17a AD |
107 | background-color: @slider-focused-fullbar-background-color; |
| 108 | border-color: @focused-border-color; | |
| f0cfe83e | 109 | .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); |
| 81bea17a AD |
110 | } |
| 111 | .claro .dijitSliderFocused .dijitSliderRemainingBarH, | |
| 112 | .claro .dijitSliderFocused .dijitSliderRightBumper{ | |
| 81bea17a AD |
113 | background-color: @slider-focused-remainingbar-background-color; |
| 114 | border-color: @focused-border-color; | |
| f0cfe83e | 115 | .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); |
| 81bea17a AD |
116 | } |
| 117 | .claro .dijitSliderDisabled .dijitSliderProgressBarH, | |
| 118 | .claro .dijitSliderDisabled .dijitSliderLeftBumper{ | |
| 119 | background-color: @disabled-border-color; /* left side of slider, fill matches border */ | |
| 120 | background-image:none; | |
| 121 | } | |
| 122 | .claro .dijitSliderDisabled .dijitSliderRemainingBarH, | |
| 123 | .claro .dijitSliderDisabled .dijitSliderRightBumper{ | |
| 124 | background-color: @disabled-background-color; | |
| 125 | } | |
| 126 | ||
| 127 | /* Vertical Slider */ | |
| 128 | ||
| 129 | .claro .dijitRuleLabelsContainerV { | |
| 130 | padding: 0 2px; | |
| 131 | } | |
| 132 | .claro .dijitSlider .dijitSliderProgressBarV, | |
| 133 | .claro .dijitSlider .dijitSliderBottomBumper{ | |
| 81bea17a AD |
134 | border-color: @border-color; |
| 135 | background-color: @slider-fullbar-background-color; | |
| f0cfe83e | 136 | .alpha-white-gradient (left, 1,0px, 0,1px); |
| 81bea17a AD |
137 | } |
| 138 | .claro .dijitSlider .dijitSliderRemainingBarV, | |
| 139 | .claro .dijitSlider .dijitSliderTopBumper{ | |
| 81bea17a AD |
140 | border-color: @border-color; |
| 141 | background-color: @slider-remainingbar-background-color; | |
| 142 | } | |
| 143 | .claro .dijitSliderBottomBumper { | |
| 144 | border-bottom: solid 1px @border-color; | |
| 145 | } | |
| 146 | .claro .dijitSliderTopBumper { | |
| 147 | border-top: solid 1px @border-color; | |
| 148 | } | |
| 149 | .claro .dijitSliderHover .dijitSliderProgressBarV, | |
| 150 | .claro .dijitSliderHover .dijitSliderBottomBumper{ | |
| 81bea17a | 151 | background-color: @slider-hovered-fullbar-background-color; |
| f0cfe83e | 152 | border-color: @hovered-border-color; |
| 81bea17a AD |
153 | } |
| 154 | .claro .dijitSliderHover .dijitSliderRemainingBarV, | |
| 155 | .claro .dijitSliderHover .dijitSliderTopBumper{ | |
| 81bea17a | 156 | background-color: @slider-hovered-remainingbar-background-color; |
| f0cfe83e | 157 | border-color: @hovered-border-color; |
| 81bea17a AD |
158 | } |
| 159 | .claro .dijitSliderFocused .dijitSliderProgressBarV, | |
| 160 | .claro .dijitSliderFocused .dijitSliderBottomBumper{ | |
| 81bea17a | 161 | background-color: @slider-focused-fullbar-background-color; |
| f0cfe83e AD |
162 | border-color: @focused-border-color; |
| 163 | .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); | |
| 81bea17a AD |
164 | } |
| 165 | .claro .dijitSliderFocused .dijitSliderRemainingBarV, | |
| 166 | .claro .dijitSliderFocused .dijitSliderTopBumper{ | |
| 81bea17a | 167 | background-color: @slider-focused-remainingbar-background-color; |
| f0cfe83e AD |
168 | border-color: @focused-border-color; |
| 169 | .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); | |
| 81bea17a AD |
170 | } |
| 171 | .claro .dijitSliderDisabled .dijitSliderProgressBarV, | |
| 172 | .claro .dijitSliderDisabled .dijitSliderBottomBumper{ | |
| 173 | background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ | |
| 174 | } | |
| 175 | .claro .dijitSliderDisabled .dijitSliderRemainingBarV, | |
| 176 | .claro .dijitSliderDisabled .dijitSliderTopBumper{ | |
| 177 | background-color: @disabled-background-color; | |
| 178 | } | |
| 179 | ||
| 180 | ||
| 181 | /* ------- Thumbs ------- */ | |
| 182 | ||
| 183 | .claro .dijitSliderImageHandleH { | |
| 184 | border: 0; | |
| 185 | width: 18px; | |
| 186 | height: 16px; | |
| 1354d172 | 187 | background-image: url("../@{image-form-slider-thumbs}"); |
| 81bea17a AD |
188 | background-repeat:no-repeat; |
| 189 | background-position:0 0; | |
| 190 | } | |
| 191 | .claro .dijitSliderHover .dijitSliderImageHandleH { | |
| 192 | background-position:-18px 0; | |
| 193 | } | |
| 194 | .claro .dijitSliderFocused .dijitSliderImageHandleH { | |
| 195 | background-position:-36px 0; | |
| 196 | } | |
| 197 | .claro .dijitSliderProgressBarH .dijitSliderThumbHover{ | |
| 198 | background-position:-36px 0; | |
| 199 | } | |
| 200 | .claro .dijitSliderProgressBarH .dijitSliderThumbActive{ | |
| 201 | background-position:-36px 0; | |
| 202 | } | |
| 203 | .claro .dijitSliderReadOnly .dijitSliderImageHandleH, | |
| 204 | .claro .dijitSliderDisabled .dijitSliderImageHandleH { | |
| 205 | background-position:-54px 0; | |
| 206 | } | |
| 207 | .claro .dijitSliderImageHandleV { | |
| 208 | border: 0; | |
| 209 | width: 18px; | |
| 210 | height: 16px; | |
| 1354d172 | 211 | background-image: url("../@{image-form-slider-thumbs}"); |
| 81bea17a AD |
212 | background-repeat:no-repeat; |
| 213 | background-position:-289px 0; | |
| 214 | } | |
| 215 | .claro .dijitSliderHover .dijitSliderImageHandleV { | |
| 216 | background-position:-307px 0; | |
| 217 | } | |
| 218 | .claro .dijitSliderFocused .dijitSliderImageHandleV { | |
| 219 | background-position:-325px 0; | |
| 220 | } | |
| 221 | .claro .dijitSliderProgressBarV .dijitSliderThumbHover{ | |
| 222 | background-position:-325px 0; | |
| 223 | } | |
| 224 | .claro .dijitSliderProgressBarV .dijitSliderThumbActive{ | |
| 225 | background-position:-325px 0; | |
| 226 | } | |
| 227 | .claro .dijitSliderReadOnly .dijitSliderImageHandleV, | |
| 228 | .claro .dijitSliderDisabled .dijitSliderImageHandleV { | |
| 229 | background-position:-343px 0; | |
| 230 | } | |
| 231 | ||
| 232 | /* ---- Increment/Decrement Buttons ---- */ | |
| 233 | ||
| 234 | .claro .dijitSliderButtonContainerH{ | |
| 235 | padding: 1px 3px 1px 2px; | |
| 236 | } | |
| 237 | .claro .dijitSliderButtonContainerV{ | |
| 238 | padding: 3px 1px 2px 1px; | |
| 239 | } | |
| 240 | .claro .dijitSliderDecrementIconH, | |
| 241 | .claro .dijitSliderIncrementIconH, | |
| 242 | .claro .dijitSliderDecrementIconV, | |
| 243 | .claro .dijitSliderIncrementIconV { | |
| 1354d172 | 244 | background-image: url("../@{image-form-common-arrows}"); |
| 81bea17a AD |
245 | background-repeat:no-repeat; |
| 246 | background-color: @arrowbutton-background-color; | |
| 247 | .border-radius(2px); | |
| 248 | border: solid 1px @border-color; | |
| 249 | font-size: 1px; | |
| 250 | } | |
| 251 | .claro .dijitSliderDecrementIconH, | |
| 252 | .claro .dijitSliderIncrementIconH { | |
| 253 | height: 12px; | |
| 254 | width: 9px; | |
| 255 | } | |
| 256 | .claro .dijitSliderDecrementIconV, | |
| 257 | .claro .dijitSliderIncrementIconV { | |
| 258 | height: 9px; | |
| 259 | width: 12px; | |
| 260 | } | |
| 261 | .claro .dijitSliderActive .dijitSliderDecrementIconH, | |
| 262 | .claro .dijitSliderActive .dijitSliderIncrementIconH, | |
| 263 | .claro .dijitSliderActive .dijitSliderDecrementIconV, | |
| 264 | .claro .dijitSliderActive .dijitSliderIncrementIconV, | |
| 265 | .claro .dijitSliderHover .dijitSliderDecrementIconH, | |
| 266 | .claro .dijitSliderHover .dijitSliderIncrementIconH, | |
| 267 | .claro .dijitSliderHover .dijitSliderDecrementIconV, | |
| 268 | .claro .dijitSliderHover .dijitSliderIncrementIconV { | |
| 269 | /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ | |
| 270 | border: solid 1px @hovered-border-color; | |
| 271 | background-color: @slider-hoveredButton-background-color; | |
| 272 | } | |
| 273 | ||
| 274 | .claro .dijitSliderDecrementIconH { | |
| 275 | background-position:-357px 50%; | |
| 276 | } | |
| 277 | .claro .dijitSliderActive .dijitSliderDecrementIconH | |
| 278 | .claro .dijitSliderHover .dijitSliderDecrementIconH { | |
| 279 | background-position:-393px 50%; | |
| 280 | } | |
| 281 | .claro .dijitSliderIncrementIconH { | |
| 282 | background-position:-251px 50%; | |
| 283 | } | |
| 284 | .claro .dijitSliderActive .dijitSliderIncrementIconH | |
| 285 | .claro .dijitSliderHover .dijitSliderIncrementIconH { | |
| 286 | background-position:-283px 50%; | |
| 287 | } | |
| 288 | .claro .dijitSliderDecrementIconV { | |
| 289 | background-position:-38px 50%; | |
| 290 | } | |
| 291 | .claro .dijitSliderActive .dijitSliderDecrementIconV | |
| 292 | .claro .dijitSliderHover .dijitSliderDecrementIconV { | |
| 293 | background-position:-73px 50%; | |
| 294 | } | |
| 295 | .claro .dijitSliderIncrementIconV { | |
| 296 | background-position:-143px 49%; | |
| 297 | } | |
| 298 | .claro .dijitSliderActive .dijitSliderIncrementIconV | |
| 299 | .claro .dijitSliderHover .dijitSliderIncrementIconV { | |
| 300 | background-position:-178px 49%; | |
| 301 | } | |
| 302 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, | |
| 303 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, | |
| 304 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, | |
| 305 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { | |
| 306 | background-color: @slider-button-hovered-background-color; | |
| 307 | } | |
| 308 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, | |
| 309 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, | |
| 310 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, | |
| 311 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { | |
| 312 | background-color: @slider-button-pressed-background-color; | |
| 313 | border-color:@pressed-border-color; | |
| 314 | } | |
| 315 | .claro .dijitSliderButtonInner { | |
| 316 | visibility: hidden; | |
| 317 | } | |
| 318 | .claro .dijitSliderDisabled .dijitSliderBar{ | |
| 319 | border-color: @disabled-border-color; | |
| 320 | } | |
| 321 | .claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { | |
| 322 | border-color: @disabled-border-color; | |
| 323 | color: @disabled-text-color; | |
| 324 | } | |
| 325 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconH, | |
| 326 | .claro .dijitSliderDisabled .dijitSliderDecrementIconH { | |
| 327 | background-position:-321px 50%; | |
| 328 | background-color:@disabled-background-color; | |
| 329 | } | |
| 330 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconH, | |
| 331 | .claro .dijitSliderDisabled .dijitSliderIncrementIconH { | |
| 332 | background-position:-215px 50%; | |
| 333 | background-color:@disabled-background-color; | |
| 334 | } | |
| 335 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconV, | |
| 336 | .claro .dijitSliderDisabled .dijitSliderDecrementIconV { | |
| 337 | background-position:-3px 49%; | |
| 338 | background-color:@disabled-background-color; | |
| 339 | } | |
| 340 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconV, | |
| 341 | .claro .dijitSliderDisabled .dijitSliderIncrementIconV { | |
| 342 | background-position:-107px 49%; | |
| 343 | background-color:@disabled-background-color; | |
| 344 | } |