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