LCARStrek/global/timepicker.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
  15   --border: 0.1rem solid #9C9CFF;
  16   --border-radius: 0.3rem;
  17
  18   --font-color: #FF9F00;
  19   --fill-color: #000000;
  20
  21   --selected-font-color: #000000;
  22   --selected-fill-color: #008484;
  23
  24   --button-font-color: #FF9F00;
  25   --button-font-color-hover: #FFCF00;
  26   --button-font-color-active: #FF9F00;
  27
  28   --disabled-opacity: 0.2;
  29 }
  30
  31 html {
  32   font-size: 10px;
  33 }
  34
  35 body {
  36   margin: 0;
  37   color: var(--font-color);
  38   font-size: var(--font-size-default);
  39 }
  40
  41 #time-picker {
  42   display: flex;
  43   flex-direction: row;
  44   justify-content: space-around;
  45 }
  46
  47 .spinner-container {
  48   font-family: sans-serif;
  49   display: flex;
  50   flex-direction: column;
  51   width: var(--spinner-width);
  52 }
  53
  54 .spinner-container > button {
  55   -moz-appearance: none;
  56   border: none;
  57   background: none;
  58   background-color: var(--button-font-color);
  59   height: var(--spinner-button-height);
  60 }
  61
  62 .spinner-container > button:hover {
  63   background-color: var(--button-font-color-hover);
  64 }
  65
  66 .spinner-container > button.active {
  67   background-color: var(--button-font-color-active);
  68 }
  69
  70 .spinner-container > button.up {
  71   mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%;
  72 }
  73
  74 .spinner-container > button.down {
  75   mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%;
  76 }
  77
  78 .spinner-container.hide-buttons > button {
  79   visibility: hidden;
  80 }
  81
  82 .spinner-container > .spinner {
  83   position: relative;
  84   width: 100%;
  85   margin: var(--spinner-margin-top-bottom) 0;
  86   cursor: default;
  87   overflow-y: scroll;
  88   scroll-snap-type: mandatory;
  89   scroll-snap-points-y: repeat(100%);
  90 }
  91
  92 .spinner-container > .spinner > div {
  93   box-sizing: border-box;
  94   position: relative;
  95   text-align: center;
  96   padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0;
  97   margin-bottom: var(--spinner-item-margin-bottom);
  98   height: var(--spinner-item-height);
  99   -moz-user-select: none;
 100   scroll-snap-coordinate: 0 0;
 101 }
 102
 103 .spinner-container > .spinner > div:hover::before {
 104   background: var(--fill-color);
 105   border: var(--border);
 106   border-radius: var(--border-radius);
 107   content: "";
 108   position: absolute;
 109   top: 0%;
 110   bottom: 0%;
 111   left: 0%;
 112   right: 0%;
 113   z-index: -10;
 114 }
 115
 116 .spinner-container > .spinner:not(.scrolling) > div.selection {
 117   color: var(--selected-font-color);
 118 }
 119
 120 .spinner-container > .spinner > div.selection::before {
 121   background: var(--selected-fill-color);
 122   border: none;
 123   border-radius: var(--border-radius);
 124   content: "";
 125   position: absolute;
 126   top: 0%;
 127   bottom: 0%;
 128   left: 0%;
 129   right: 0%;
 130   z-index: -10;
 131 }
 132
 133 .spinner-container > .spinner > div.disabled::before,
 134 .spinner-container > .spinner.scrolling > div.selection::before,
 135 .spinner-container > .spinner.scrolling > div:hover::before {
 136   display: none;
 137 }
 138
 139 .spinner-container > .spinner > div.disabled {
 140   opacity: var(--disabled-opacity);
 141 }
 142
 143 .colon {
 144   display: flex;
 145   justify-content: center;
 146   align-items: center;
 147   width: var(--colon-width);
 148   margin-bottom: 0.3rem;
 149 }
 150
 151 .spacer {
 152   width: var(--day-period-spacing-width);
 153 }