4 |
4 |
5 .wp-picker-container .hidden { |
5 .wp-picker-container .hidden { |
6 display: none; |
6 display: none; |
7 } |
7 } |
8 |
8 |
9 .wp-color-result { |
9 /* Needs higher specificiity. */ |
10 background-color: #f7f7f7; |
10 .wp-picker-container .wp-color-result.button { |
11 border: 1px solid #ccc; |
11 height: 24px; |
12 -webkit-border-radius: 3px; |
|
13 border-radius: 3px; |
|
14 cursor: pointer; |
|
15 display: inline-block; |
|
16 height: 22px; |
|
17 margin: 0 0px 6px 6px; |
12 margin: 0 0px 6px 6px; |
18 position: relative; |
13 padding: 0 30px 0 0; |
19 top: 1px; |
14 font-size: 11px; |
20 -webkit-user-select: none; |
|
21 -moz-user-select: none; |
|
22 -ms-user-select: none; |
|
23 user-select: none; |
|
24 vertical-align: bottom; |
|
25 display: inline-block; |
|
26 padding-right: 30px; |
|
27 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); |
|
28 box-shadow: 0 1px 0 rgba(0,0,0,.08); |
|
29 } |
15 } |
30 |
16 |
31 .wp-color-result:after { |
17 .wp-color-result-text { |
32 background: #f7f7f7; |
18 background: #f7f7f7; |
33 -webkit-border-radius: 2px 0 0 2px; |
|
34 border-radius: 2px 0 0 2px; |
19 border-radius: 2px 0 0 2px; |
35 border-right: 1px solid #ccc; |
20 border-right: 1px solid #ccc; |
36 color: #555; |
21 color: #555; |
37 content: attr( title ); |
|
38 display: block; |
22 display: block; |
39 font-size: 11px; |
|
40 line-height: 22px; |
23 line-height: 22px; |
41 padding: 0 6px; |
24 padding: 0 6px; |
42 position: relative; |
|
43 left: 0; |
|
44 text-align: center; |
25 text-align: center; |
45 top: 0; |
|
46 -webkit-box-shadow: inset 0 1px 0 #fff; |
|
47 box-shadow: inset 0 1px 0 #fff; |
|
48 } |
26 } |
49 |
27 |
50 .wp-color-result:hover, |
28 .wp-color-result:hover, |
51 .wp-color-result:focus { |
29 .wp-color-result:focus { |
52 background: #fafafa; |
30 background: #fafafa; |
59 color: #23282d; |
37 color: #23282d; |
60 border-color: #a0a5aa; |
38 border-color: #a0a5aa; |
61 border-right: 1px solid #999; |
39 border-right: 1px solid #999; |
62 } |
40 } |
63 |
41 |
64 .wp-color-result { |
42 .wp-picker-containers { |
65 top: 0; |
|
66 } |
|
67 |
|
68 .wp-color-result.wp-picker-open:after { |
|
69 content: attr( data-current ); |
|
70 } |
|
71 |
|
72 .wp-picker-container, .wp-picker-container:active { |
|
73 display: inline-block; |
43 display: inline-block; |
74 outline: 0; |
|
75 } |
44 } |
76 |
45 |
77 .wp-color-result:focus { |
46 .wp-color-result:focus { |
78 -webkit-box-shadow: |
47 border-color: #5b9dd9; |
79 0 0 0 1px #5b9dd9, |
48 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); |
80 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); |
49 } |
81 box-shadow: |
50 |
82 0 0 0 1px #5b9dd9, |
51 .wp-color-result:active { |
83 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); |
52 /* See Trac ticket #39662 */ |
|
53 -webkit-transform: none !important; |
|
54 transform: none !important; |
84 } |
55 } |
85 |
56 |
86 .wp-picker-open + .wp-picker-input-wrap { |
57 .wp-picker-open + .wp-picker-input-wrap { |
87 display: inline-block; |
58 display: inline-block; |
88 vertical-align: top; |
59 vertical-align: top; |
89 } |
60 } |
90 |
61 |
91 .wp-picker-container .button { |
62 .wp-picker-input-wrap label { |
92 margin-right: 6px; |
63 display: inline-block; |
|
64 vertical-align: top; |
|
65 } |
|
66 |
|
67 /* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */ |
|
68 .form-table .wp-picker-input-wrap label { |
|
69 margin: 0 !important; |
|
70 } |
|
71 |
|
72 .wp-picker-input-wrap .button, |
|
73 .wp-customizer .wp-picker-input-wrap .button { |
|
74 margin-right: 6px; |
93 } |
75 } |
94 |
76 |
95 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { |
77 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { |
96 background-color: #555 |
78 background-color: #555 |
97 } |
79 } |
98 |
80 |
99 .wp-picker-container .iris-picker { |
81 .wp-picker-container .iris-picker { |
100 -webkit-border-radius: 0; |
|
101 border-radius: 0; |
82 border-radius: 0; |
102 border-color: #dfdfdf; |
83 border-color: #ddd; |
103 margin-top: 6px; |
84 margin-top: 6px; |
104 } |
85 } |
105 |
86 |
106 .wp-picker-container input[type="text"].wp-color-picker { |
87 .wp-picker-container input[type="text"].wp-color-picker { |
107 width: 65px; |
88 width: 65px; |
108 font-size: 12px; |
89 font-size: 12px; |
109 font-family: monospace; |
90 font-family: monospace; |
110 text-align: center; |
|
111 line-height: 16px; |
91 line-height: 16px; |
112 margin: 0; |
92 margin: 0; |
|
93 vertical-align: top; |
113 } |
94 } |
114 |
95 |
115 .wp-picker-container input[type="text"].wp-color-picker:focus::-webkit-input-placeholder { |
96 .wp-color-picker::-webkit-input-placeholder { |
116 color: transparent; |
97 color: #72777c; |
117 } |
98 } |
118 |
99 |
119 .wp-picker-container input[type="text"].wp-color-picker:-moz-placeholder { |
100 .wp-color-picker::-moz-placeholder { |
120 color: #999; |
101 color: #72777c; |
|
102 opacity: 1; |
|
103 } |
|
104 |
|
105 .wp-color-picker:-ms-input-placeholder { |
|
106 color: #72777c; |
121 } |
107 } |
122 |
108 |
123 .wp-picker-container input[type="text"].iris-error { |
109 .wp-picker-container input[type="text"].iris-error { |
124 background-color: #ffebe8; |
110 background-color: #ffebe8; |
125 border-color: #c00; |
111 border-color: #c00; |
126 color: #000; |
112 color: #000; |
127 } |
113 } |
|
114 |
|
115 .iris-picker .ui-square-handle:focus, |
|
116 .iris-picker .iris-strip .ui-slider-handle:focus { |
|
117 box-shadow: |
|
118 0 0 0 1px #5b9dd9, |
|
119 0 0 2px 1px rgba(30, 140, 190, .8); |
|
120 } |
|
121 |
|
122 .iris-picker .iris-palette:focus { |
|
123 box-shadow: |
|
124 inset 0 0 5px rgba(0,0,0,.4), |
|
125 0 0 0 1px #5b9dd9, |
|
126 0 0 2px 1px rgba(30, 140, 190, .8); |
|
127 } |
|
128 |
|
129 @media screen and ( max-width: 782px ) { |
|
130 .wp-picker-container input[type="text"].wp-color-picker { |
|
131 width: 80px; |
|
132 padding: 6px 5px 5px; |
|
133 font-size: 16px; |
|
134 line-height: 18px; |
|
135 } |
|
136 |
|
137 .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { |
|
138 padding: 5px 5px 4px; |
|
139 } |
|
140 |
|
141 .wp-picker-container .wp-color-result.button { |
|
142 height: auto; |
|
143 padding: 0 40px 0 0; |
|
144 font-size: 14px; |
|
145 line-height: 29px; |
|
146 } |
|
147 |
|
148 .wp-customizer .wp-picker-container .wp-color-result.button { |
|
149 font-size: 13px; |
|
150 line-height: 26px; |
|
151 } |
|
152 |
|
153 .wp-picker-container .wp-color-result-text { |
|
154 padding: 0 14px; |
|
155 font-size: inherit; |
|
156 line-height: inherit; |
|
157 } |
|
158 |
|
159 .wp-customizer .wp-picker-container .wp-color-result-text { |
|
160 padding: 0 10px; |
|
161 } |
|
162 } |
|
163 |
|
164 @media screen and ( max-width: 640px ) { |
|
165 .wp-customizer .wp-picker-container .wp-color-result.button { |
|
166 font-size: 14px; |
|
167 line-height: 29px; |
|
168 } |
|
169 |
|
170 .wp-customizer .wp-picker-container input[type="text"].wp-color-picker { |
|
171 padding: 6px 5px; |
|
172 } |
|
173 } |