1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
.colourpicker {
position: relative;
}
.cp-clearfix:after {
content: "";
display: table;
clear: both;
}
.colourpicker.input-group .colourpicker-input {
float: none;
}
.colourpicker-input-container {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAElBMVEXs7Ozt7e3u7u79/f3+/v7////P4ouPAAAAI0lEQVQIW2NkAAJGZkYQSZAJIcAkC5D4//8/iMkKYv4ligkAoE4PJIKs1ewAAAAASUVORK5CYII=);
border-radius: 4px;
}
.colourpicker.istransparent .input-group .colourpicker-input {
color: transparent !important;
background-color: transparent !important;
}
.colourpicker .colourpicker-input[disabled] {
background-color: #EEEEEE !important;
}
.colourpicker .colourpicker-input[readonly] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.colourpicker-panel {
position: absolute;
background: #fff;
border: 1px solid #CCC;
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
z-index: 99999;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: none;
left: 0;
top: auto;
}
.palette-square .colourpicker-panel {
width: 173px;
height: 152px;
}
.palette-square.colourpicker-with-alpha .colourpicker-panel {
width: 194px;
}
.palette-limited .colourpicker-panel {
width: 184px;
height: auto;
padding: 1px 4px 4px 1px;
background-color: #F8F8F8;
}
.colourpicker .cp-list-col {
height: 100%;
width: 100%;
display: block;
}
.colourpicker .cp-list-col-outer {
width: 20px;
height: 20px;
margin-top: 3px;
float: left;
margin-left: 3px;
border: 1px solid #DDD;
cursor: pointer;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAElBMVEXs7Ozt7e3u7u79/f3+/v7////P4ouPAAAAI0lEQVQIW2NkAAJGZkYQSZAJIcAkC5D4//8/iMkKYv4ligkAoE4PJIKs1ewAAAAASUVORK5CYII=);
}
.colourpicker .cp-list-col-outer:hover {
border-color: #444;
}
.colourpicker .cp-list-col.selected-col.light {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}
.colourpicker .cp-list-col.selected-col.dark {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}
.colourpicker .colourpicker-grid {
position: absolute;
top: 1px;
left: 1px;
width: 150px;
height: 150px;
cursor: crosshair;
}
.colourpicker .colourpicker-grid-inner {
width: 100%;
height: 100%;
background: linear-gradient(to right,#FFF,rgba(255,255,255,0));
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorstr=#FFFFFFFF,endColorstr=#00000000);
}
.colourpicker .colourpicker-grid-inner-2 {
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0),#000);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#00000000,endColorstr=#FF000000);
}
.colourpicker-grid .colourpicker-picker {
position: absolute;
top: 70px;
left: 70px;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
}
.colourpicker-grid .colourpicker-picker > div {
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 8px;
border: 1px solid #fff;
background-color: #111;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.colourpicker-slider {
position: absolute;
top: 1px;
left: 152px;
width: 20px;
height: 150px;
background: linear-gradient(red 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%);
cursor: row-resize;
}
.colourpicker-slider-picker {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 2px;
background: #fff;
border: 1px solid #000;
margin-top: -2px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.colourpicker-alpha-slider {
position: absolute;
top: 1px;
left: 173px;
width: 20px;
height: 150px;
display: none;
cursor: row-resize;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAElBMVEXs7Ozt7e3u7u79/f3+/v7////P4ouPAAAAI0lEQVQIW2NkAAJGZkYQSZAJIcAkC5D4//8/iMkKYv4ligkAoE4PJIKs1ewAAAAASUVORK5CYII=);
}
.colourpicker-with-alpha .colourpicker-alpha-slider {
display: block;
}
.colourpicker-alpha-inner-slider {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(255,255,255,1) 0, rgba(255,255,255,0) 100%);
cursor: row-resize;
}
.colourpicker-with-alpha .colourpicker-alpha-inner-slider {
display: block;
}
.colourpicker-istransparent,
.colourpicker-transparent-text {
vertical-align: middle;
}
@media screen\0 {
.colourpicker-slider {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAACWCAYAAAAWnUIIAAAAAXNSR0IArs4c6QAAA6tJREFUSA11lmF2FDkMhN2Nkw2EPHgsv/jDWfb+V9gz7L5lgYQk0019ZcmjHoKS8dilUkl22+5Z9tb0f7ZN3eUSxL2eOefei2Bv7fZMce+qCfwc4DKdAj/MweisMN8WcFQn8I3ADD2ASca5E36Z3eBrebNcJmnwLmPj+0Q4TOycrGiOJK1tMCmp2m/Bq9QM9hPZ38Y0H5kNH7JfB/MapsBHNF8r0fOYM2nbFcxVoFkQ5ewwlxvihrl+wFe1TjE3wmF6PWJGi5kR7lxqVkAPUlTfClC4WicQQHaZSvK3m02E0760/l2snQWXLSJshD9osFe2FPoDmmGKbBsg4WkGlfUIyot8/560+N6k379FnVaRnplfiybAhubXGh6EXpn4vc4HpkL3lXA1mJZRtulPj/gLfcxTXezs3wbklhlhk+mVpFHd/UupExZ4/7eAlLPq0//BVYxi+t8CTuHoAv7QuD+X8Cf1nwSuvzximPPxapCmvaRuPjhPFSbKF6adXDJFAoGFxqOh+JZ71gE0mvs8WwZF01zPTFSCfQRDXkcmemaKylZst44Jj6r/RTOex8iea0qQdu1RExEpDHAyRTWzHjgzKf5QUmpWJjKukwVJzRfDcTpRLh0sbJY0hgaGZl15wk9ZfDID5NiO3LR8rJnPfLJ9Vd7ncFJ1PXG4c6EVvz9r7gaH7HBysRhEIR3W5BwngHOCDGT4dKEovGbHc9AEwAxKk7BZFZr7S+GLiue2cgGi+1bcdWTzbuJS0v/InseXPC5pZ+6yTOTsixKxpNbEyWag+GThGOFRUjqE6xiG5gx3duqMRA635g8hsgBIoGk+DvCoybGXHZnPAyyt6tRiHGyfx/8AixlWEp03jRMNwup5FxbwxVsGuqc5Oh7RaBl1WRXQfeaOXjro6yNNMTMRD04mZgkHEUnF7+068Bv1Cep/sTwRvovlS/WTwLUkots/JmC53Xn7n1q6xFHxG+HdQZO0yv7OP7hGepgG37MNp+1+Dv0uwFxYHeLW78qMdk3T783bYPqSlaiz32k7uyTlIp3fxTc1kdAT5/2N843pwzxJYoJZlTWXR4oIE/WVPr09xK4zLgTN9kNvzjxHFuVsPpT3IbWZeV+2Ikx9essX/FiiYMbh8HOCOcJHiJPTOLzkscPMqgl6AE37HWjNyyvkUGeGT1DiNp6er9/Lq054b5d1Gjz+5igzYjEwJcF6+3903JLIM5o/RMIpR2//acDrvJg3Yhm7m5vtgL8I/gQWR3mPqBzLfwAAAABJRU5ErkJggg==);
}
.input-group {
border: 1px solid #ccc;
}
}
|
