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}
178