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