[Summary view] [Print] [Text view]

   1  /* rtl:ignore */
   2  .wp-color-picker {
   3      width: 80px;
   4      direction: ltr;
   5  }
   6  
   7  .wp-picker-container .hidden {
   8      display: none;
   9  }
  10  
  11  /* Needs higher specificity to override `.wp-core-ui .button`. */
  12  .wp-picker-container .wp-color-result.button {
  13      min-height: 30px;
  14      margin: 0 6px 6px 0;
  15      padding: 0 0 0 30px;
  16      font-size: 11px;
  17  }
  18  
  19  .wp-color-result-text {
  20      background: #f6f7f7;
  21      border-radius: 0 2px 2px 0;
  22      border-left: 1px solid #c3c4c7;
  23      color: #50575e;
  24      display: block;
  25      line-height: 2.54545455; /* 28px */
  26      padding: 0 6px;
  27      text-align: center;
  28  }
  29  
  30  .wp-color-result:hover,
  31  .wp-color-result:focus {
  32      background: #f6f7f7;
  33      border-color: #8c8f94;
  34      color: #1d2327;
  35  }
  36  
  37  .wp-color-result:hover:after,
  38  .wp-color-result:focus:after {
  39      color: #1d2327;
  40      border-color: #a7aaad;
  41      border-left: 1px solid #8c8f94;
  42  }
  43  
  44  .wp-picker-container {
  45      display: inline-block;
  46  }
  47  
  48  .wp-color-result:focus {
  49      border-color: #4f94d4;
  50      box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
  51  }
  52  
  53  .wp-color-result:active {
  54      /* See Trac ticket #39662 */
  55      transform: none !important;
  56  }
  57  
  58  .wp-picker-open + .wp-picker-input-wrap {
  59      display: inline-block;
  60      vertical-align: top;
  61  }
  62  
  63  .wp-picker-input-wrap label {
  64      display: inline-block;
  65      vertical-align: top;
  66  }
  67  
  68  /* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
  69  .form-table .wp-picker-input-wrap label {
  70      margin: 0 !important;
  71  }
  72  
  73  .wp-picker-input-wrap .button.wp-picker-default,
  74  .wp-picker-input-wrap .button.wp-picker-clear,
  75  .wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
  76  .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
  77      margin-left: 6px;
  78      padding: 0 8px;
  79      line-height: 2.54545455; /* 28px */
  80      min-height: 30px;
  81  }
  82  
  83  .wp-picker-container .iris-square-slider .ui-slider-handle:focus {
  84      background-color: #50575e
  85  }
  86  
  87  .wp-picker-container .iris-picker {
  88      border-radius: 0;
  89      border-color: #dcdcde;
  90      margin-top: 6px;
  91  }
  92  
  93  .wp-picker-container input[type="text"].wp-color-picker {
  94      width: 4rem;
  95      font-size: 12px;
  96      font-family: monospace;
  97      line-height: 2.33333333; /* 28px */
  98      margin: 0;
  99      padding: 0 5px;
 100      vertical-align: top;
 101      min-height: 30px;
 102  }
 103  
 104  .wp-color-picker::-webkit-input-placeholder {
 105      color: #646970;
 106  }
 107  
 108  .wp-color-picker::-moz-placeholder {
 109      color: #646970;
 110  }
 111  
 112  .wp-picker-container input[type="text"].iris-error {
 113      background-color: #fcf0f1;
 114      border-color: #d63638;
 115      color: #000;
 116  }
 117  
 118  .iris-picker .ui-square-handle:focus,
 119  .iris-picker .iris-strip .ui-slider-handle:focus {
 120      border-color: #3582c4;
 121      border-style: solid;
 122      box-shadow: 0 0 0 1px #3582c4;
 123      outline: 2px solid transparent;
 124  }
 125  
 126  .iris-picker .iris-palette:focus {
 127      box-shadow: 0 0 0 2px #3582c4;
 128  }
 129  
 130  @media screen and (max-width: 782px) {
 131      .wp-picker-container input[type="text"].wp-color-picker {
 132          width: 5rem;
 133          font-size: 16px;
 134          line-height: 1.875; /* 30px */
 135          min-height: 32px;
 136      }
 137  
 138      .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
 139          padding: 0 5px;
 140      }
 141  
 142      .wp-picker-input-wrap .button.wp-picker-default,
 143      .wp-picker-input-wrap .button.wp-picker-clear {
 144          padding: 0 8px;
 145          line-height: 2.14285714; /* 30px */
 146          min-height: 32px;
 147      }
 148  
 149      .wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
 150      .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
 151          padding: 0 8px;
 152          font-size: 14px;
 153          line-height: 2.14285714; /* 30px */
 154          min-height: 32px;
 155      }
 156  
 157      .wp-picker-container .wp-color-result.button {
 158          padding: 0 0 0 40px;
 159          font-size: 14px;
 160          line-height: 2.14285714; /* 30px */
 161      }
 162  
 163      .wp-customizer .wp-picker-container .wp-color-result.button {
 164          font-size: 14px;
 165          line-height: 2.14285714; /* 30px */
 166      }
 167  
 168      .wp-picker-container .wp-color-result-text {
 169          padding: 0 14px;
 170          font-size: inherit;
 171          line-height: inherit;
 172      }
 173  
 174      .wp-customizer .wp-picker-container .wp-color-result-text {
 175          padding: 0 10px;
 176      }
 177  }