[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: 32px;
  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.72727273; /* 30px */
  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.72727273; /* 30px */
  80      min-height: 32px;
  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      margin: 0;
  98      padding: 0 5px;
  99      vertical-align: top;
 100      min-height: 32px;
 101  }
 102  
 103  .wp-color-picker::-webkit-input-placeholder {
 104      color: #646970;
 105  }
 106  
 107  .wp-color-picker::-moz-placeholder {
 108      color: #646970;
 109  }
 110  
 111  .wp-picker-container input[type="text"].iris-error {
 112      background-color: #fcf0f1;
 113      border-color: #d63638;
 114      color: #000;
 115  }
 116  
 117  .iris-picker .ui-square-handle:focus,
 118  .iris-picker .iris-strip .ui-slider-handle:focus {
 119      border-color: var(--wp-admin-theme-color, #3858e9);
 120      border-style: solid;
 121      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 122      outline: 2px solid transparent;
 123  }
 124  
 125  .iris-picker .iris-palette:focus {
 126      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 127  }
 128  
 129  @media screen and (max-width: 782px) {
 130      .wp-picker-container input[type="text"].wp-color-picker {
 131          width: 5rem;
 132          font-size: 16px;
 133          line-height: 1.875; /* 30px */
 134          min-height: 32px;
 135      }
 136  
 137      .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
 138          padding: 0 5px;
 139      }
 140  
 141      .wp-picker-input-wrap .button.wp-picker-default,
 142      .wp-picker-input-wrap .button.wp-picker-clear {
 143          padding: 0 8px;
 144          line-height: 2.14285714; /* 30px */
 145          min-height: 32px;
 146      }
 147  
 148      .wp-customizer .wp-picker-input-wrap .button.wp-picker-default,
 149      .wp-customizer .wp-picker-input-wrap .button.wp-picker-clear {
 150          padding: 0 8px;
 151          font-size: 14px;
 152          line-height: 2.14285714; /* 30px */
 153          min-height: 32px;
 154      }
 155  
 156      .wp-picker-container .wp-color-result.button {
 157          padding: 0 0 0 40px;
 158          font-size: 14px;
 159          line-height: 2.14285714; /* 30px */
 160      }
 161  
 162      .wp-customizer .wp-picker-container .wp-color-result.button {
 163          font-size: 14px;
 164          line-height: 2.14285714; /* 30px */
 165      }
 166  
 167      .wp-picker-container .wp-color-result-text {
 168          padding: 0 14px;
 169          font-size: inherit;
 170          line-height: inherit;
 171      }
 172  
 173      .wp-customizer .wp-picker-container .wp-color-result-text {
 174          padding: 0 10px;
 175      }
 176  }