third_party/WebKit/Source/devtools/front_end/elements/spectrum.css

   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: 271px;
  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     background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));
  56 }
  57
  58 .spectrum-val {
  59     background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));
  60 }
  61
  62 .spectrum-hue {
  63     background: linear-gradient(to left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  64 }
  65
  66 .spectrum-dragger {
  67     border-radius: 12px;
  68     height: 12px;
  69     width: 12px;
  70     border: 1px solid white;
  71     cursor: pointer;
  72     position: absolute;
  73     top: 0;
  74     left: 0;
  75     background: black;
  76     box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.24);
  77 }
  78
  79 .spectrum-slider {
  80     position: absolute;
  81     top: -1px;
  82     cursor: pointer;
  83     width: 13px;
  84     height: 13px;
  85     border-radius: 13px;
  86     background-color: rgb(248, 248, 248);
  87     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  88 }
  89
  90 .swatch {
  91     width: 24px;
  92     height: 24px;
  93     margin: 0;
  94     position: absolute;
  95     top: 144px;
  96     left: 47px;
  97     background-image: url(Images/checker.png);
  98     border-radius: 16px;
  99 }
 100
 101 .swatch-inner {
 102     width: 100%;
 103     height: 100%;
 104     display: inline-block;
 105     border-radius: 16px;
 106 }
 107
 108 .swatch-inner-white {
 109     border: 1px solid #ddd;
 110 }
 111
 112 .spectrum-text {
 113     position: absolute;
 114     top: 184px;
 115     left: 16px;
 116 }
 117
 118 .spectrum-text-value {
 119     display: inline-block;
 120     width: 39px;
 121     overflow: hidden;
 122     text-align: center;
 123     border: 1px solid #dadada;
 124     border-radius: 2px;
 125     margin-right: 6px;
 126     line-height: 20px;
 127     font-size: 11px;
 128     padding: 0;
 129     color: #333;
 130     white-space: nowrap;
 131 }
 132
 133 .spectrum-text-label {
 134     letter-spacing: 38.5px;
 135     margin-top: 8px;
 136     display: block;
 137     color: #969696;
 138     margin-left: 16px;
 139     width: 174px;
 140 }
 141
 142 .spectrum-text-hex > .spectrum-text-value {
 143     width: 174px;
 144 }
 145
 146 .spectrum-text-hex > .spectrum-text-label {
 147     letter-spacing: normal;
 148     margin-left: 0px;
 149     text-align: center;
 150 }
 151
 152 .spectrum-palette-value {
 153     background-color: rgb(65, 75, 217);
 154     border-radius: 2px;
 155     margin-top: 12px;
 156     margin-left: 12px;
 157     width: 12px;
 158     height: 12px;
 159     display: inline-block;
 160 }
 161
 162 .spectrum-switcher {
 163     border-radius: 2px;
 164     height: 20px;
 165     width: 20px;
 166     padding: 2px;
 167 }
 168
 169 .spectrum-display-switcher {
 170     top: 196px;
 171     position: absolute;
 172     right: 10px;
 173 }
 174
 175 .spectrum-switcher:hover {
 176     background-color: #EEEEEE;
 177 }
 178
 179 .spectrum-eye-dropper {
 180     width: 32px;
 181     height: 24px;
 182     position: absolute;
 183     left: 12px;
 184     top: 144px;
 185     cursor: pointer;
 186 }
 187
 188 .spectrum-palette {
 189     border-top: 1px solid #dadada;
 190     position: absolute;
 191     top: 235px;
 192     width: 100%;
 193     padding: 6px 24px 6px 6px;
 194     display: flex;
 195     flex-wrap: wrap;
 196 }
 197
 198 .spectrum-palette-color {
 199     width: 12px;
 200     height: 12px;
 201     flex: 0 0 12px;
 202     display: inline-block;
 203     border-radius: 2px;
 204     margin: 6px;
 205     cursor: pointer;
 206 }
 207
 208 .spectrum-palette > .spectrum-palette-color {
 209     transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
 210     border: 1px solid rgba(0, 0, 0, 0.1);
 211     will-change: transform;
 212     z-index: 13;
 213 }
 214
 215 .spectrum-palette > .spectrum-palette-color.empty-color {
 216     border-color: transparent;
 217 }
 218
 219 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover {
 220     transform: scale(1.15);
 221 }
 222
 223 .add-color-toolbar {
 224     margin-left: -3px;
 225     margin-top: -1px;
 226 }
 227
 228 .spectrum-palette-switcher {
 229     right: 10px;
 230     top: 235px;
 231     margin-top: 9px;
 232     position: absolute;
 233 }
 234
 235 .palette-panel {
 236     width: 100%;
 237     height: 100%;
 238     position: absolute;
 239     top: 100%;
 240     display: flex;
 241     flex-direction: column;
 242     background-color: white;
 243     z-index: 14;
 244     transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 200ms;
 245     border-top: 1px solid #dadada;
 246     visibility: hidden;
 247 }
 248
 249 .palette-panel-showing > .palette-panel {
 250     transform: translateY(calc(-100% + 117px));
 251     transition-delay: 0s;
 252     visibility: visible;
 253 }
 254
 255 .palette-panel > div.toolbar {
 256     position: absolute;
 257     right: 6px;
 258     top: 6px;
 259 }
 260
 261 .palette-panel > div:not(.toolbar) {
 262     flex: 0 0 38px;
 263     border-bottom: 1px solid #dadada;
 264     padding: 12px;
 265     line-height: 14px;
 266     color: #333;
 267 }
 268
 269 .palette-panel > div.palette-title {
 270     font-size: 14px;
 271     line-height: 16px;
 272     color: #333;
 273     flex-basis: 40px;
 274 }
 275
 276 div.palette-preview {
 277     display: flex;
 278     cursor: pointer;
 279 }
 280
 281 .palette-preview-title {
 282     flex: 0 0 84px;
 283 }
 284
 285 .palette-preview > .spectrum-palette-color {
 286     margin-top: 1px;
 287 }
 288
 289 .palette-preview:hover {
 290     background-color: #eee;
 291 }
 292
 293 .spectrum-overlay {
 294     z-index: 13;
 295     visibility: hidden;
 296     background-color: hsla(0, 0%, 0%, 0.5);
 297     opacity: 0;
 298     transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 100ms;
 299 }
 300
 301 .palette-panel-showing > .spectrum-overlay {
 302     transition-delay: 0s;
 303     visibility: visible;
 304     opacity: 1;
 305 }
 306
 307 .spectrum-contrast-container {
 308     width: 100%;
 309     height: 100%;
 310 }
 311
 312 .spectrum-contrast-line {
 313     fill: none;
 314     stroke: white;
 315     opacity: 0.7;
 316     stroke-width: 1.5px;
 317 }
 318
 319 .delete-color-toolbar {
 320     position: absolute;
 321     right: 0;
 322     top: 0;
 323     height: 100%;
 324     background-color: #EFEFEF;
 325     visibility: hidden;
 326     z-index: 3;
 327     width: 36px;
 328     display: flex;
 329     align-items: center;
 330     padding-left: 5px;
 331 }
 332
 333 @keyframes showDeleteToolbar {
 334     from {
 335         opacity: 0;
 336     }
 337     to {
 338         opacity: 1;
 339     }
 340 }
 341
 342 .delete-color-toolbar.dragging {
 343     visibility: visible;
 344     animation: showDeleteToolbar 100ms 150ms cubic-bezier(0, 0, 0.2, 1) backwards;
 345 }
 346
 347 .delete-color-toolbar-active {
 348     background-color: #ddd;
 349     color: white;
 350 }