LCARStrek/global/datetimeinputpickers.css

   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 :root {
   6   --font-size-default: 1.1rem;
   7   --spinner-width: 3rem;
   8   --spinner-margin-top-bottom: 0.4rem;
   9   --spinner-item-height: 2.4rem;
  10   --spinner-item-margin-bottom: 0.1rem;
  11   --spinner-button-height: 1.2rem;
  12   --colon-width: 2rem;
  13   --day-period-spacing-width: 1rem;
  14   --calendar-width: 23.1rem;
  15   --date-picker-item-height: 2.5rem;
  16   --date-picker-item-width: 3.3rem;
  17
  18   --border: 0.1rem solid #9C9CFF;
  19   --border-radius: 0.3rem;
  20   --border-active-color: #FF9F00;
  21
  22   --font-color: #FF9F00;
  23   --fill-color: #000000;
  24
  25   --today-fill-color: #008484;
  26
  27   --selected-font-color: #000000;
  28   --selected-fill-color: #008484;
  29
  30   --button-font-color: #FF9F00;
  31   --button-font-color-hover: #FFCF00;
  32   --button-font-color-active: #FF9F00;
  33   --button-fill-color-active: #000000;
  34
  35   --weekday-header-font-color: #FF9F00;
  36   --weekend-header-font-color: #FF0000;
  37
  38   --weekend-font-color: #FF0000;
  39   --weekday-outside-font-color: #A09090;
  40   --weekend-outside-font-color: #E7ADE7;
  41
  42   --weekday-disabled-font-color: rgba(255, 159, 0, 0.2);
  43   --weekend-disabled-font-color: rgba(255, 0, 0, 0.2);
  44   --disabled-fill-color: rgba(160, 144, 144, 0.8);
  45
  46   --disabled-opacity: 0.2;
  47 }
  48
  49 html {
  50   font-size: 10px;
  51 }
  52
  53 body {
  54   margin: 0;
  55   color: var(--font-color);
  56   font: message-box;
  57   font-size: var(--font-size-default);
  58 }
  59
  60 button {
  61   -moz-appearance: none;
  62   background: none;
  63   border: none;
  64 }
  65
  66 .nav {
  67   display: flex;
  68   width: var(--calendar-width);
  69   height: 2.4rem;
  70   margin-bottom: 0.8rem;
  71   justify-content: space-between;
  72 }
  73
  74 .nav > button {
  75   width: 3rem;
  76   height: var(--date-picker-item-height);
  77   -moz-context-properties: fill;
  78   fill: var(--button-font-color);
  79 }
  80
  81 .nav > button:hover {
  82   fill: var(--button-font-color-hover);
  83 }
  84
  85 .nav > button.active {
  86   fill: var(--button-font-color-active);
  87 }
  88
  89 .nav > button.prev,
  90 .nav > button.next:dir(rtl) {
  91   background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
  92 }
  93
  94 .nav > button.next,
  95 .nav > button.prev:dir(rtl) {
  96   background: url("chrome://global/skin/icons/calendar-arrow-right.svg") no-repeat 50% 50%;
  97 }
  98
  99 .month-year-container {
 100   position: absolute;
 101   display: flex;
 102   justify-content: center;
 103   align-items: center;
 104   top: 0;
 105   left: 3rem;
 106   right: 3rem;
 107   width: 17.1rem;
 108   height: var(--date-picker-item-height);
 109   z-index: 10;
 110 }
 111
 112 button.month-year {
 113   font-size: 1.3rem;
 114   border: var(--border);
 115   border-radius: 0.3rem;
 116   padding-top: 0.2rem;
 117   padding-bottom: 0.2rem;
 118   padding-inline-start: 1.2rem;
 119   padding-inline-end: 2.6rem;
 120 }
 121
 122 button.month-year:hover {
 123   background: var(--fill-color);
 124 }
 125
 126 button.month-year.active {
 127   border-color: var(--border-active-color);
 128   background: var(--button-fill-color-active);
 129 }
 130
 131 button.month-year::after {
 132   position: absolute;
 133   content: "";
 134   width: 2.6rem;
 135   height: 1.6rem;
 136   background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
 137   -moz-context-properties: fill;
 138   fill: var(--button-font-color);
 139 }
 140
 141 button.month-year.active::after {
 142   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 143 }
 144
 145 .month-year-view {
 146   position: absolute;
 147   z-index: 5;
 148   padding-top: 3.2rem;
 149   top: 0;
 150   left: 0;
 151   bottom: 0;
 152   width: var(--calendar-width);
 153   background: window;
 154   opacity: 1;
 155   transition: opacity 0.15s;
 156 }
 157
 158 .month-year-view.hidden {
 159   visibility: hidden;
 160   opacity: 0;
 161 }
 162
 163 .month-year-view > .spinner-container {
 164   width: 5.5rem;
 165   margin: 0 0.5rem;
 166 }
 167
 168 .month-year-view .spinner {
 169   transform: scaleY(1);
 170   transform-origin: top;
 171   transition: transform 0.15s;
 172 }
 173
 174 .month-year-view.hidden .spinner {
 175   transform: scaleY(0);
 176   transition: none;
 177 }
 178
 179 .month-year-view .spinner > div {
 180   transform: scaleY(1);
 181   transition: transform 0.15s;
 182 }
 183
 184 .month-year-view.hidden .spinner > div {
 185   transform: scaleY(2.5);
 186   transition: none;
 187 }
 188
 189 .order-month-year > #spinner-month,
 190 .order-year-month > #spinner-year {
 191   order: 1;
 192 }
 193
 194 .order-month-year > #spinner-year,
 195 .order-year-month > #spinner-month {
 196   order: 2;
 197 }
 198
 199 .calendar-container {
 200   cursor: default;
 201   display: flex;
 202   flex-direction: column;
 203   width: var(--calendar-width);
 204 }
 205
 206 .week-header {
 207   display: flex;
 208 }
 209
 210 .week-header > div {
 211   color: var(--weekday-header-font-color);
 212 }
 213
 214 .week-header > div.weekend {
 215   color: var(--weekend-header-font-color);
 216 }
 217
 218 .days-viewport {
 219   height: 15rem;
 220   overflow: hidden;
 221   position: relative;
 222 }
 223
 224 .days-view {
 225   position: absolute;
 226   display: flex;
 227   flex-wrap: wrap;
 228   flex-direction: row;
 229 }
 230
 231 .week-header > div,
 232 .days-view > div {
 233   align-items: center;
 234   display: flex;
 235   height: var(--date-picker-item-height);
 236   position: relative;
 237   justify-content: center;
 238   width: var(--date-picker-item-width);
 239 }
 240
 241 .days-view > .outside {
 242   color: var(--weekday-outside-font-color);
 243 }
 244
 245 .days-view > .weekend {
 246   color: var(--weekend-font-color);
 247 }
 248
 249 .days-view > .weekend.outside {
 250   color: var(--weekend-outside-font-color);
 251 }
 252
 253 .days-view > .out-of-range {
 254   color: var(--weekday-disabled-font-color);
 255   background: var(--disabled-fill-color);
 256 }
 257
 258 .days-view > .out-of-range.weekend {
 259   color: var(--weekend-disabled-font-color);
 260 }
 261
 262 .days-view > .out-of-range::before {
 263   display: none;
 264 }
 265
 266 .days-view > div:hover::before,
 267 .days-view > .select::before,
 268 .days-view > .today::before {
 269   top: 5%;
 270   bottom: 5%;
 271   left: 5%;
 272   right: 5%;
 273 }
 274
 275 #time-picker,
 276 .month-year-view {
 277   display: flex;
 278   flex-direction: row;
 279   justify-content: center;
 280 }
 281
 282 .spinner-container {
 283   display: flex;
 284   flex-direction: column;
 285   width: var(--spinner-width);
 286 }
 287
 288 .spinner-container > button {
 289   height: var(--spinner-button-height);
 290   -moz-context-properties: fill;
 291   fill: var(--button-font-color);
 292 }
 293
 294 .spinner-container > button:hover {
 295   fill: var(--button-font-color-hover);
 296 }
 297
 298 .spinner-container > button.active {
 299   fill: var(--button-font-color-active);
 300 }
 301
 302 .spinner-container > button.up {
 303   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 304 }
 305
 306 .spinner-container > button.down {
 307   background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
 308 }
 309
 310 .spinner-container.hide-buttons > button {
 311   visibility: hidden;
 312 }
 313
 314 .spinner-container > .spinner {
 315   position: relative;
 316   width: 100%;
 317   margin: var(--spinner-margin-top-bottom) 0;
 318   cursor: default;
 319   overflow-y: scroll;
 320   scroll-snap-type: mandatory;
 321   scroll-snap-points-y: repeat(100%);
 322 }
 323
 324 .spinner-container > .spinner > div {
 325   box-sizing: border-box;
 326   position: relative;
 327   text-align: center;
 328   padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0;
 329   margin-bottom: var(--spinner-item-margin-bottom);
 330   height: var(--spinner-item-height);
 331   -moz-user-select: none;
 332   scroll-snap-coordinate: 0 0;
 333 }
 334
 335 .spinner-container > .spinner > div::before,
 336 .calendar-container .days-view > div::before {
 337   position: absolute;
 338   top: 5%;
 339   bottom: 5%;
 340   left: 5%;
 341   right: 5%;
 342   z-index: -10;
 343   border-radius: var(--border-radius);
 344 }
 345
 346 .spinner-container > .spinner > div:hover::before,
 347 .calendar-container .days-view > div:hover::before {
 348   background: var(--fill-color);
 349   border: var(--border);
 350   content: "";
 351 }
 352
 353 .spinner-container > .spinner:not(.scrolling) > div.selection,
 354 .calendar-container .days-view > div.selection:not(.out-of-range) {
 355   color: var(--selected-font-color);
 356 }
 357
 358 .spinner-container > .spinner > div.selection::before,
 359 .calendar-container .days-view > div.selection::before {
 360   background: var(--selected-fill-color);
 361   border: none;
 362   content: "";
 363 }
 364
 365 .spinner-container > .spinner > div.disabled::before,
 366 .spinner-container > .spinner.scrolling > div.selection::before,
 367 .spinner-container > .spinner.scrolling > div:hover::before {
 368   display: none;
 369 }
 370
 371 .spinner-container > .spinner > div.disabled {
 372   opacity: var(--disabled-opacity);
 373 }
 374
 375 .colon {
 376   display: flex;
 377   justify-content: center;
 378   align-items: center;
 379   width: var(--colon-width);
 380   margin-bottom: 0.3rem;
 381 }
 382
 383 .spacer {
 384   width: var(--day-period-spacing-width);
 385 }