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

   1 /* https://github.com/bgrins/spectrum */
   2 :host {
   3     width: 205px;
   4     height: 220px;
   5     -webkit-user-select: none;
   6 }
   7
   8 .spectrum-color {
   9     position: absolute;
  10     top: 5px;
  11     left: 5px;
  12     width: 158px;
  13     height: 158px;
  14     outline: 1px solid #bbb;
  15 }
  16
  17 .spectrum-display-value {
  18     -webkit-user-select: text;
  19     display: inline-block;
  20     padding-left: 2px;
  21 }
  22
  23 .spectrum-hue {
  24     position: absolute;
  25     top: 5px;
  26     right: 5px;
  27     width: 28px;
  28     height: 158px;
  29     -webkit-box-reflect: right -28px;
  30 }
  31
  32 .spectrum-range-container {
  33     position: absolute;
  34     bottom: 28px;
  35     left: 5px;
  36     display: flex;
  37     align-items: center;
  38 }
  39
  40 .spectrum-text {
  41     position: absolute;
  42     bottom: 5px;
  43     left: 5px;
  44     display: flex;
  45     align-items: center;
  46 }
  47
  48 .spectrum-range-container * {
  49     font-size: 11px;
  50     vertical-align: middle;
  51 }
  52
  53 .spectrum-range-container label {
  54     display: inline-block;
  55     padding-right: 4px;
  56 }
  57
  58 .spectrum-dragger,
  59 .spectrum-slider {
  60     -webkit-user-select: none;
  61 }
  62
  63 .spectrum-sat {
  64     background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));
  65 }
  66
  67 .spectrum-val {
  68     background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));
  69 }
  70
  71 .spectrum-hue {
  72     background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  73 }
  74
  75 .spectrum-dragger {
  76     border-radius: 5px;
  77     height: 5px;
  78     width: 5px;
  79     border: 1px solid white;
  80     cursor: pointer;
  81     position: absolute;
  82     top: 0;
  83     left: 0;
  84     background: black;
  85 }
  86
  87 .spectrum-slider {
  88     position: absolute;
  89     top: 0;
  90     cursor: pointer;
  91     border: 1px solid black;
  92     height: 4px;
  93     left: -1px;
  94     right: -1px;
  95 }
  96
  97 .swatch {
  98     width: 20px;
  99     height:20px;
 100     margin: 0;
 101 }
 102
 103 .swatch-inner {
 104     width: 100%;
 105     height: 100%;
 106     display: inline-block;
 107     border: 1px solid rgba(128, 128, 128, 0.6);
 108 }
 109
 110 .swatch-inner:hover {
 111     border: 1px solid rgba(64, 64, 64, 0.8);
 112 }