Commit | Line | Data |
---|---|---|
987dae1b RK |
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 #9999CC; | |
16 | --border-radius: 0.3rem; | |
17 | ||
18 | --font-color: #000000; | |
19 | --fill-color: #CCD0DD; | |
20 | ||
21 | --selected-font-color: #FFFFFF; | |
22 | --selected-fill-color: #336699; | |
23 | ||
24 | --button-font-color: #666699; | |
25 | --button-font-color-hover: #6666CC; | |
26 | --button-font-color-active: #9999CC; | |
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 | } |