[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 specificiity. */
  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      opacity: 1;
 111  }
 112  
 113  .wp-color-picker:-ms-input-placeholder {
 114      color: #646970;
 115  }
 116  
 117  .wp-picker-container input[type="text"].iris-error {
 118      background-color: #fcf0f1;
 119      border-color: #d63638;
 120      color: #000;
 121  }
 122  
 123  .iris-picker .ui-square-handle:focus,
 124  .iris-picker .iris-strip .ui-slider-handle:focus {
 125      border-color: #3582c4;
 126      border-style: solid;
 127      box-shadow: 0 0 0 1px #3582c4;
 128      outline: 2px solid transparent;
 129  }
 130  
 131  .iris-picker .iris-palette:focus {
 132      box-shadow: 0 0 0 2px #3582c4;
 133  }
 134  
 135  @media screen and (max-width: 782px) {
 136      .wp-picker-container input[type="text"].wp-color-picker {
 137          width: 5rem;
 138          font-size: 16px;
 139          line-height: 1.875; /* 30px */
 140          min-height: 32px;
 141      }
 142  
 143      .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
 144          padding: 0 5px;
 145      }
 146  
 147      .wp-picker-input-wrap .button.wp-picker-default,
 148      .wp-picker-input-wrap .button.wp-picker-clear {
 149          padding: 0 8px;
 150          line-height: 2.14285714; /* 30px */
 151          min-height: 32px;
 152      }
 153  
 154      .wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
 155      .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
 156          padding: 0 8px;
 157          font-size: 14px;
 158          line-height: 2.14285714; /* 30px */
 159          min-height: 32px;
 160      }
 161  
 162      .wp-picker-container .wp-color-result.button {
 163          padding: 0 0 0 40px;
 164          font-size: 14px;
 165          line-height: 2.14285714; /* 30px */
 166      }
 167  
 168      .wp-customizer .wp-picker-container .wp-color-result.button {
 169          font-size: 14px;
 170          line-height: 2.14285714; /* 30px */
 171      }
 172  
 173      .wp-picker-container .wp-color-result-text {
 174          padding: 0 14px;
 175          font-size: inherit;
 176          line-height: inherit;
 177      }
 178  
 179      .wp-customizer .wp-picker-container .wp-color-result-text {
 180          padding: 0 10px;
 181      }
 182  }