OLD | NEW |
1 /* https://github.com/bgrins/spectrum */ | 1 /* https://github.com/bgrins/spectrum */ |
2 :host { | 2 :host { |
3 width: 232px; | 3 width: 232px; |
4 height: 240px; | 4 height: 240px; |
5 -webkit-user-select: none; | 5 -webkit-user-select: none; |
6 } | 6 } |
7 | 7 |
8 :host(.palettes-enabled) { | 8 :host(.palettes-enabled) { |
9 height: 271px; | 9 height: 271px; |
10 } | 10 } |
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
81 top: -1px; | 81 top: -1px; |
82 cursor: pointer; | 82 cursor: pointer; |
83 width: 13px; | 83 width: 13px; |
84 height: 13px; | 84 height: 13px; |
85 border-radius: 13px; | 85 border-radius: 13px; |
86 background-color: rgb(248, 248, 248); | 86 background-color: rgb(248, 248, 248); |
87 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); | 87 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); |
88 } | 88 } |
89 | 89 |
90 .swatch { | 90 .swatch { |
91 width: 16px; | 91 width: 24px; |
92 height: 16px; | 92 height: 24px; |
93 margin: 0; | 93 margin: 0; |
94 position: absolute; | 94 position: absolute; |
95 top: 148px; | 95 top: 144px; |
96 left: 48px; | 96 left: 47px; |
97 background-image: url(Images/checker.png); | 97 background-image: url(Images/checker.png); |
98 border-radius: 16px; | 98 border-radius: 16px; |
99 } | 99 } |
100 | 100 |
101 .swatch-inner { | 101 .swatch-inner { |
102 width: 100%; | 102 width: 100%; |
103 height: 100%; | 103 height: 100%; |
104 display: inline-block; | 104 display: inline-block; |
105 border-radius: 16px; | 105 border-radius: 16px; |
106 } | 106 } |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
183 left: 12px; | 183 left: 12px; |
184 top: 144px; | 184 top: 144px; |
185 cursor: pointer; | 185 cursor: pointer; |
186 } | 186 } |
187 | 187 |
188 .spectrum-palette { | 188 .spectrum-palette { |
189 border-top: 1px solid #dadada; | 189 border-top: 1px solid #dadada; |
190 position: absolute; | 190 position: absolute; |
191 top: 235px; | 191 top: 235px; |
192 width: 100%; | 192 width: 100%; |
193 padding-right: 24px; | 193 padding: 6px 24px 6px 6px; |
194 display: flex; | 194 display: flex; |
195 flex-wrap: wrap; | 195 flex-wrap: wrap; |
196 } | 196 } |
197 | 197 |
198 .spectrum-palette-color { | 198 .spectrum-palette-color { |
| 199 width: 12px; |
199 height: 12px; | 200 height: 12px; |
200 flex: 0 0 12px; | 201 flex: 0 0 12px; |
201 display: inline-block; | 202 display: inline-block; |
202 border-radius: 2px; | 203 border-radius: 2px; |
203 margin-left: 12px; | 204 margin: 6px; |
204 margin-top: 12px; | |
205 cursor: pointer; | 205 cursor: pointer; |
206 } | 206 } |
207 | 207 |
208 .spectrum-palette-color.empty-color { | |
209 border: 1px solid #dadada; | |
210 } | |
211 | |
212 .spectrum-palette > .spectrum-palette-color { | 208 .spectrum-palette > .spectrum-palette-color { |
213 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); | 209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); |
| 210 border: 1px solid rgba(0, 0, 0, 0.1); |
| 211 } |
| 212 |
| 213 .spectrum-palette > .spectrum-palette-color.empty-color { |
| 214 border-color: transparent; |
214 } | 215 } |
215 | 216 |
216 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { | 217 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { |
217 transform: scale(1.15); | 218 transform: scale(1.15); |
218 } | 219 } |
219 | 220 |
220 .spectrum-palette > .toolbar { | 221 .add-color-toolbar { |
221 margin-left: 5px; | 222 position: absolute; |
222 margin-top: 5px; | 223 right: 29px; |
| 224 bottom: 5px; |
223 } | 225 } |
224 | 226 |
225 .spectrum-palette-switcher { | 227 .spectrum-palette-switcher { |
226 right: 10px; | 228 right: 10px; |
227 top: 235px; | 229 top: 235px; |
228 margin-top: 9px; | 230 margin-top: 9px; |
229 position: absolute; | 231 position: absolute; |
230 } | 232 } |
231 | 233 |
232 .palette-panel { | 234 .palette-panel { |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
302 width: 100%; | 304 width: 100%; |
303 height: 100%; | 305 height: 100%; |
304 } | 306 } |
305 | 307 |
306 .spectrum-contrast-line { | 308 .spectrum-contrast-line { |
307 fill: none; | 309 fill: none; |
308 stroke: white; | 310 stroke: white; |
309 opacity: 0.7; | 311 opacity: 0.7; |
310 stroke-width: 1.5px; | 312 stroke-width: 1.5px; |
311 } | 313 } |
OLD | NEW |