| OLD | NEW |
|---|
| (Empty) |
| 1 /* https://github.com/bgrins/spectrum */ | |
| 2 :host { | |
| 3 width: 232px; | |
| 4 height: 240px; | |
| 5 -webkit-user-select: none; | |
| 6 } | |
| 7 | |
| 8 :host(.palettes-enabled) { | |
| 9 height: 319px; | |
| 10 } | |
| 11 | |
| 12 .spectrum-color { | |
| 13 position: relative; | |
| 14 width: 232px; | |
| 15 height: 124px; | |
| 16 border-radius: 2px 2px 0 0; | |
| 17 overflow: hidden; | |
| 18 } | |
| 19 | |
| 20 .spectrum-display-value { | |
| 21 -webkit-user-select: text; | |
| 22 display: inline-block; | |
| 23 padding-left: 2px; | |
| 24 } | |
| 25 | |
| 26 .spectrum-hue { | |
| 27 top: 140px; | |
| 28 } | |
| 29 | |
| 30 .spectrum-alpha { | |
| 31 top: 159px; | |
| 32 background-image: url(Images/checker.png); | |
| 33 background-size: 12px 11px; | |
| 34 } | |
| 35 | |
| 36 .spectrum-alpha-background { | |
| 37 height: 100%; | |
| 38 border-radius: 2px; | |
| 39 } | |
| 40 | |
| 41 .spectrum-hue, .spectrum-alpha { | |
| 42 position: absolute; | |
| 43 right: 16px; | |
| 44 width: 130px; | |
| 45 height: 11px; | |
| 46 border-radius: 2px; | |
| 47 } | |
| 48 | |
| 49 .spectrum-dragger, | |
| 50 .spectrum-slider { | |
| 51 -webkit-user-select: none; | |
| 52 } | |
| 53 | |
| 54 .spectrum-sat, | |
| 55 .-theme-preserve { | |
| 56 background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0)); | |
| 57 } | |
| 58 | |
| 59 .spectrum-val, | |
| 60 .-theme-preserve { | |
| 61 background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0)); | |
| 62 } | |
| 63 | |
| 64 .spectrum-hue { | |
| 65 background: linear-gradient(to left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #
00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); | |
| 66 } | |
| 67 | |
| 68 .spectrum-dragger { | |
| 69 border-radius: 12px; | |
| 70 height: 12px; | |
| 71 width: 12px; | |
| 72 border: 1px solid white; | |
| 73 cursor: pointer; | |
| 74 position: absolute; | |
| 75 top: 0; | |
| 76 left: 0; | |
| 77 background: black; | |
| 78 box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.24); | |
| 79 } | |
| 80 | |
| 81 .spectrum-slider { | |
| 82 position: absolute; | |
| 83 top: -1px; | |
| 84 cursor: pointer; | |
| 85 width: 13px; | |
| 86 height: 13px; | |
| 87 border-radius: 13px; | |
| 88 background-color: rgb(248, 248, 248); | |
| 89 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); | |
| 90 } | |
| 91 | |
| 92 .swatch { | |
| 93 width: 24px; | |
| 94 height: 24px; | |
| 95 margin: 0; | |
| 96 position: absolute; | |
| 97 top: 144px; | |
| 98 left: 47px; | |
| 99 background-image: url(Images/checker.png); | |
| 100 border-radius: 16px; | |
| 101 } | |
| 102 | |
| 103 .swatch-inner, | |
| 104 .swatch-overlay { | |
| 105 position: absolute; | |
| 106 width: 100%; | |
| 107 height: 100%; | |
| 108 display: inline-block; | |
| 109 border-radius: 16px; | |
| 110 } | |
| 111 | |
| 112 .swatch-inner-white { | |
| 113 border: 1px solid #ddd; | |
| 114 } | |
| 115 | |
| 116 .swatch-overlay { | |
| 117 cursor: pointer; | |
| 118 opacity: 0; | |
| 119 } | |
| 120 | |
| 121 .swatch-overlay:hover { | |
| 122 background-color: rgba(0, 0, 0, .3); | |
| 123 opacity: 1; | |
| 124 } | |
| 125 | |
| 126 .swatch-overlay:active { | |
| 127 background-color: rgba(0, 0, 0, .5); | |
| 128 } | |
| 129 | |
| 130 .copy-color-icon { | |
| 131 background-color: white; | |
| 132 } | |
| 133 | |
| 134 .spectrum-text { | |
| 135 position: absolute; | |
| 136 top: 184px; | |
| 137 left: 16px; | |
| 138 } | |
| 139 | |
| 140 .spectrum-text-value { | |
| 141 display: inline-block; | |
| 142 width: 40px; | |
| 143 overflow: hidden; | |
| 144 text-align: center; | |
| 145 border: 1px solid #dadada; | |
| 146 border-radius: 2px; | |
| 147 margin-right: 6px; | |
| 148 line-height: 20px; | |
| 149 font-size: 11px; | |
| 150 padding: 0; | |
| 151 color: #333; | |
| 152 white-space: nowrap; | |
| 153 } | |
| 154 | |
| 155 .spectrum-text-label { | |
| 156 letter-spacing: 39.5px; | |
| 157 margin-top: 8px; | |
| 158 display: block; | |
| 159 color: #969696; | |
| 160 margin-left: 16px; | |
| 161 width: 174px; | |
| 162 } | |
| 163 | |
| 164 .spectrum-text-hex > .spectrum-text-value { | |
| 165 width: 178px; | |
| 166 } | |
| 167 | |
| 168 .spectrum-text-hex > .spectrum-text-label { | |
| 169 letter-spacing: normal; | |
| 170 margin-left: 0px; | |
| 171 text-align: center; | |
| 172 } | |
| 173 | |
| 174 .spectrum-palette-value { | |
| 175 background-color: rgb(65, 75, 217); | |
| 176 border-radius: 2px; | |
| 177 margin-top: 12px; | |
| 178 margin-left: 12px; | |
| 179 width: 12px; | |
| 180 height: 12px; | |
| 181 display: inline-block; | |
| 182 } | |
| 183 | |
| 184 .spectrum-switcher { | |
| 185 border-radius: 2px; | |
| 186 height: 20px; | |
| 187 width: 20px; | |
| 188 padding: 2px; | |
| 189 } | |
| 190 | |
| 191 :host-context(.-theme-with-dark-background) .spectrum-switcher { | |
| 192 -webkit-filter: invert(60%); | |
| 193 } | |
| 194 | |
| 195 .spectrum-display-switcher { | |
| 196 top: 196px; | |
| 197 position: absolute; | |
| 198 right: 10px; | |
| 199 } | |
| 200 | |
| 201 .spectrum-switcher:hover { | |
| 202 background-color: #EEEEEE; | |
| 203 } | |
| 204 | |
| 205 .spectrum-eye-dropper { | |
| 206 width: 32px; | |
| 207 height: 24px; | |
| 208 position: absolute; | |
| 209 left: 12px; | |
| 210 top: 144px; | |
| 211 cursor: pointer; | |
| 212 } | |
| 213 | |
| 214 .spectrum-palette { | |
| 215 border-top: 1px solid #dadada; | |
| 216 position: absolute; | |
| 217 top: 235px; | |
| 218 width: 100%; | |
| 219 padding: 6px 24px 6px 6px; | |
| 220 display: flex; | |
| 221 flex-wrap: wrap; | |
| 222 } | |
| 223 | |
| 224 .spectrum-palette-color { | |
| 225 width: 12px; | |
| 226 height: 12px; | |
| 227 flex: 0 0 12px; | |
| 228 border-radius: 2px; | |
| 229 margin: 6px; | |
| 230 cursor: pointer; | |
| 231 position: relative; | |
| 232 border: 1px solid rgba(0, 0, 0, 0.1); | |
| 233 background-position: -1px !important; | |
| 234 } | |
| 235 | |
| 236 .spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-co
lor-shadow { | |
| 237 opacity: 0.2; | |
| 238 } | |
| 239 | |
| 240 .spectrum-palette-color:hover:not(.spectrum-shades-shown) > .spectrum-palette-co
lor-shadow:first-child { | |
| 241 opacity: 0.6; | |
| 242 top: -3px; | |
| 243 left: 1px; | |
| 244 } | |
| 245 | |
| 246 .spectrum-palette-color-shadow { | |
| 247 position: absolute; | |
| 248 opacity: 0; | |
| 249 margin: 0; | |
| 250 top: -5px; | |
| 251 left: 3px; | |
| 252 } | |
| 253 | |
| 254 .palette-color-shades { | |
| 255 position: absolute; | |
| 256 background-color: white; | |
| 257 height: 228px; | |
| 258 width: 28px; | |
| 259 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12
), 0 2px 4px -1px rgba(0, 0, 0, 0.4); | |
| 260 z-index: 14; | |
| 261 border-radius: 2px; | |
| 262 transform-origin: 0px 228px; | |
| 263 margin-top: -208px; | |
| 264 margin-left: -8px; | |
| 265 } | |
| 266 | |
| 267 .spectrum-palette > .spectrum-palette-color.spectrum-shades-shown { | |
| 268 z-index: 15; | |
| 269 } | |
| 270 | |
| 271 .palette-color-shades > .spectrum-palette-color { | |
| 272 margin: 8px 0 0 0; | |
| 273 margin-left: 8px; | |
| 274 width: 12px; | |
| 275 } | |
| 276 | |
| 277 .spectrum-palette > .spectrum-palette-color { | |
| 278 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); | |
| 279 will-change: transform; | |
| 280 z-index: 13; | |
| 281 } | |
| 282 | |
| 283 .spectrum-palette > .spectrum-palette-color.empty-color { | |
| 284 border-color: transparent; | |
| 285 } | |
| 286 | |
| 287 .spectrum-palette > .spectrum-palette-color:not(.empty-color):not(.has-material-
shades):hover, | |
| 288 .palette-color-shades > .spectrum-palette-color:not(.empty-color):hover { | |
| 289 transform: scale(1.15); | |
| 290 } | |
| 291 | |
| 292 .add-color-toolbar { | |
| 293 margin-left: -3px; | |
| 294 margin-top: -1px; | |
| 295 } | |
| 296 | |
| 297 .spectrum-palette-switcher { | |
| 298 right: 10px; | |
| 299 top: 235px; | |
| 300 margin-top: 9px; | |
| 301 position: absolute; | |
| 302 } | |
| 303 | |
| 304 .palette-panel { | |
| 305 width: 100%; | |
| 306 height: 100%; | |
| 307 position: absolute; | |
| 308 top: 100%; | |
| 309 display: flex; | |
| 310 flex-direction: column; | |
| 311 background-color: white; | |
| 312 z-index: 14; | |
| 313 transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 200ms; | |
| 314 border-top: 1px solid #dadada; | |
| 315 visibility: hidden; | |
| 316 } | |
| 317 | |
| 318 .palette-panel-showing > .palette-panel { | |
| 319 transform: translateY(calc(-100% + 117px)); | |
| 320 transition-delay: 0s; | |
| 321 visibility: visible; | |
| 322 } | |
| 323 | |
| 324 .palette-panel > div.toolbar { | |
| 325 position: absolute; | |
| 326 right: 6px; | |
| 327 top: 6px; | |
| 328 } | |
| 329 | |
| 330 .palette-panel > div:not(.toolbar) { | |
| 331 flex: 0 0 38px; | |
| 332 border-bottom: 1px solid #dadada; | |
| 333 padding: 12px; | |
| 334 line-height: 14px; | |
| 335 color: #333; | |
| 336 } | |
| 337 | |
| 338 .palette-panel > div.palette-title { | |
| 339 font-size: 14px; | |
| 340 line-height: 16px; | |
| 341 color: #333; | |
| 342 flex-basis: 40px; | |
| 343 } | |
| 344 | |
| 345 div.palette-preview { | |
| 346 display: flex; | |
| 347 cursor: pointer; | |
| 348 } | |
| 349 | |
| 350 .palette-preview-title { | |
| 351 flex: 0 0 84px; | |
| 352 } | |
| 353 | |
| 354 .palette-preview > .spectrum-palette-color { | |
| 355 margin-top: 1px; | |
| 356 } | |
| 357 | |
| 358 .palette-preview:hover { | |
| 359 background-color: #eee; | |
| 360 } | |
| 361 | |
| 362 .spectrum-overlay { | |
| 363 z-index: 13; | |
| 364 visibility: hidden; | |
| 365 background-color: hsla(0, 0%, 0%, 0.5); | |
| 366 opacity: 0; | |
| 367 transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 100ms; | |
| 368 } | |
| 369 | |
| 370 .palette-panel-showing > .spectrum-overlay { | |
| 371 transition-delay: 0s; | |
| 372 visibility: visible; | |
| 373 opacity: 1; | |
| 374 } | |
| 375 | |
| 376 .spectrum-contrast-container { | |
| 377 width: 100%; | |
| 378 height: 100%; | |
| 379 } | |
| 380 | |
| 381 .spectrum-contrast-line { | |
| 382 fill: none; | |
| 383 stroke: white; | |
| 384 opacity: 0.7; | |
| 385 stroke-width: 1.5px; | |
| 386 } | |
| 387 | |
| 388 .delete-color-toolbar { | |
| 389 position: absolute; | |
| 390 right: 0; | |
| 391 top: 0; | |
| 392 background-color: #EFEFEF; | |
| 393 visibility: hidden; | |
| 394 z-index: 3; | |
| 395 width: 36px; | |
| 396 display: flex; | |
| 397 align-items: center; | |
| 398 padding-left: 4px; | |
| 399 bottom: 2px; | |
| 400 border-bottom-right-radius: 2px; | |
| 401 } | |
| 402 | |
| 403 @keyframes showDeleteToolbar { | |
| 404 from { | |
| 405 opacity: 0; | |
| 406 } | |
| 407 to { | |
| 408 opacity: 1; | |
| 409 } | |
| 410 } | |
| 411 | |
| 412 .delete-color-toolbar.dragging { | |
| 413 visibility: visible; | |
| 414 animation: showDeleteToolbar 100ms 150ms cubic-bezier(0, 0, 0.2, 1) backward
s; | |
| 415 } | |
| 416 | |
| 417 .delete-color-toolbar-active { | |
| 418 background-color: #ddd; | |
| 419 color: white; | |
| 420 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2608043002:
DevTools: extract modules (with extensions) (Closed)
