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 .wp-color-result { |
10 background-color: #f9f9f9; |
10 background-color: #f7f7f7; |
11 border: 1px solid #bbb; |
11 border: 1px solid #ccc; |
12 border-radius: 2px; |
12 -webkit-border-radius: 3px; |
|
13 border-radius: 3px; |
13 cursor: pointer; |
14 cursor: pointer; |
14 display: inline-block; |
15 display: inline-block; |
15 height: 22px; |
16 height: 22px; |
16 margin: 0 6px 6px 0px; |
17 margin: 0 6px 6px 0px; |
17 position: relative; |
18 position: relative; |
18 top: 1px; |
19 top: 1px; |
19 user-select: none; |
20 -webkit-user-select: none; |
20 -moz-user-select: none; |
21 -moz-user-select: none; |
21 -ms-user-select: none; |
22 -ms-user-select: none; |
22 -webkit-user-select: none; |
23 user-select: none; |
23 vertical-align: bottom; |
24 vertical-align: bottom; |
24 display: inline-block; |
25 display: inline-block; |
25 padding-left: 30px; |
26 padding-left: 30px; |
|
27 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); |
|
28 box-shadow: 0 1px 0 rgba(0,0,0,.08); |
26 } |
29 } |
27 |
30 |
28 .wp-color-result:after { |
31 .wp-color-result:after { |
29 background: #f3f3f3; |
32 background: #f7f7f7; |
30 background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); |
33 -webkit-border-radius: 0 2px 2px 0; |
31 background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); |
34 border-radius: 0 2px 2px 0; |
32 background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); |
35 border-left: 1px solid #ccc; |
33 background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); |
36 color: #555; |
34 background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); |
|
35 color: #333; |
|
36 text-shadow: 0 1px 0 #fff; |
|
37 border-radius: 0 1px 1px 0; |
|
38 border-left: 1px solid #bbb; |
|
39 content: attr( title ); |
37 content: attr( title ); |
40 display: block; |
38 display: block; |
41 font-size: 11px; |
39 font-size: 11px; |
42 line-height: 22px; |
40 line-height: 22px; |
43 padding: 0 6px; |
41 padding: 0 6px; |
44 position: relative; |
42 position: relative; |
45 right: 0; |
43 right: 0; |
46 text-align: center; |
44 text-align: center; |
47 top: 0; |
45 top: 0; |
|
46 -webkit-box-shadow: inset 0 1px 0 #fff; |
|
47 box-shadow: inset 0 1px 0 #fff; |
48 } |
48 } |
49 |
49 |
50 .wp-color-result:hover { |
50 .wp-color-result:hover, |
51 border-color: #aaa; |
51 .wp-color-result:focus { |
52 -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); |
52 background: #fafafa; |
53 box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 ); |
53 border-color: #999; |
|
54 color: #23282d; |
54 } |
55 } |
55 |
56 |
56 .wp-color-result:hover:after { |
57 .wp-color-result:hover:after, |
57 color: #222; |
58 .wp-color-result:focus:after { |
58 border-color: #aaa; |
59 color: #23282d; |
|
60 border-color: #a0a5aa; |
59 border-left: 1px solid #999; |
61 border-left: 1px solid #999; |
60 } |
62 } |
61 |
63 |
62 .wp-color-result.wp-picker-open { |
64 .wp-color-result { |
63 top: 0; |
65 top: 0; |
64 } |
66 } |
65 |
67 |
66 .wp-color-result.wp-picker-open:after { |
68 .wp-color-result.wp-picker-open:after { |
67 content: attr( data-current ); |
69 content: attr( data-current ); |
71 display: inline-block; |
73 display: inline-block; |
72 outline: 0; |
74 outline: 0; |
73 } |
75 } |
74 |
76 |
75 .wp-color-result:focus { |
77 .wp-color-result:focus { |
76 border-color: #888; |
78 -webkit-box-shadow: |
77 -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); |
79 0 0 0 1px #5b9dd9, |
78 box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 ); |
80 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); |
79 } |
81 box-shadow: |
80 |
82 0 0 0 1px #5b9dd9, |
81 .wp-color-result:focus:after { |
83 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); |
82 border-color: #888; |
|
83 } |
84 } |
84 |
85 |
85 .wp-picker-open + .wp-picker-input-wrap { |
86 .wp-picker-open + .wp-picker-input-wrap { |
86 display: inline-block; |
87 display: inline-block; |
87 vertical-align: top; |
88 vertical-align: top; |
94 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { |
95 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { |
95 background-color: #555 |
96 background-color: #555 |
96 } |
97 } |
97 |
98 |
98 .wp-picker-container .iris-picker { |
99 .wp-picker-container .iris-picker { |
|
100 -webkit-border-radius: 0; |
|
101 border-radius: 0; |
99 border-color: #dfdfdf; |
102 border-color: #dfdfdf; |
100 margin-top: 6px; |
103 margin-top: 6px; |
101 } |
104 } |
102 |
105 |
103 input[type="text"].iris-error { |
106 .wp-picker-container input[type="text"].wp-color-picker { |
|
107 width: 65px; |
|
108 font-size: 12px; |
|
109 font-family: monospace; |
|
110 text-align: center; |
|
111 line-height: 16px; |
|
112 margin: 0; |
|
113 } |
|
114 |
|
115 .wp-picker-container input[type="text"].wp-color-picker:focus::-webkit-input-placeholder { |
|
116 color: transparent; |
|
117 } |
|
118 |
|
119 .wp-picker-container input[type="text"].wp-color-picker:-moz-placeholder { |
|
120 color: #999; |
|
121 } |
|
122 |
|
123 .wp-picker-container input[type="text"].iris-error { |
104 background-color: #ffebe8; |
124 background-color: #ffebe8; |
105 border-color: #c00; |
125 border-color: #c00; |
106 color: #000; |
126 color: #000; |
107 } |
127 } |