|
1 .wp-color-picker { |
|
2 width: 80px; |
|
3 } |
|
4 |
|
5 .wp-picker-container .hidden { |
|
6 display: none; |
|
7 } |
|
8 |
1 .wp-color-result { |
9 .wp-color-result { |
2 margin: 0 0 6px 6px; |
10 background-color: #f7f7f7; |
3 padding-left: 0; |
11 border: 1px solid #ccc; |
|
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; |
|
18 position: relative; |
|
19 top: 1px; |
|
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; |
4 padding-right: 30px; |
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); |
5 } |
29 } |
6 |
30 |
7 .wp-color-result:after { |
31 .wp-color-result:after { |
8 border-radius: 0 0 1px 1px; |
32 background: #f7f7f7; |
9 border-left: 0; |
33 -webkit-border-radius: 2px 0 0 2px; |
10 border-right: 1px solid #bbb; |
34 border-radius: 2px 0 0 2px; |
11 left: auto; |
35 border-right: 1px solid #ccc; |
12 right: 0; |
36 color: #555; |
|
37 content: attr( title ); |
|
38 display: block; |
|
39 font-size: 11px; |
|
40 line-height: 22px; |
|
41 padding: 0 6px; |
|
42 position: relative; |
|
43 left: 0; |
|
44 text-align: center; |
|
45 top: 0; |
|
46 -webkit-box-shadow: inset 0 1px 0 #fff; |
|
47 box-shadow: inset 0 1px 0 #fff; |
13 } |
48 } |
14 |
49 |
15 .wp-color-result:hover { |
50 .wp-color-result:hover, |
16 border-color: #aaa; |
51 .wp-color-result:focus { |
|
52 background: #fafafa; |
|
53 border-color: #999; |
|
54 color: #23282d; |
17 } |
55 } |
18 |
56 |
19 .wp-color-result:hover:after { |
57 .wp-color-result:hover:after, |
20 border-left: 0; |
58 .wp-color-result:focus:after { |
|
59 color: #23282d; |
|
60 border-color: #a0a5aa; |
21 border-right: 1px solid #999; |
61 border-right: 1px solid #999; |
22 } |
62 } |
23 |
63 |
|
64 .wp-color-result { |
|
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; |
|
74 outline: 0; |
|
75 } |
|
76 |
|
77 .wp-color-result:focus { |
|
78 -webkit-box-shadow: |
|
79 0 0 0 1px #5b9dd9, |
|
80 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); |
|
81 box-shadow: |
|
82 0 0 0 1px #5b9dd9, |
|
83 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); |
|
84 } |
|
85 |
|
86 .wp-picker-open + .wp-picker-input-wrap { |
|
87 display: inline-block; |
|
88 vertical-align: top; |
|
89 } |
|
90 |
24 .wp-picker-container .button { |
91 .wp-picker-container .button { |
25 margin-left: 0; |
|
26 margin-right: 6px; |
92 margin-right: 6px; |
27 } |
93 } |
|
94 |
|
95 .wp-picker-container .iris-square-slider .ui-slider-handle:focus { |
|
96 background-color: #555 |
|
97 } |
|
98 |
|
99 .wp-picker-container .iris-picker { |
|
100 -webkit-border-radius: 0; |
|
101 border-radius: 0; |
|
102 border-color: #dfdfdf; |
|
103 margin-top: 6px; |
|
104 } |
|
105 |
|
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 { |
|
124 background-color: #ffebe8; |
|
125 border-color: #c00; |
|
126 color: #000; |
|
127 } |