source: trunk/themes/default/js/plugins/selectize.dark.css @ 28703

Last change on this file since 28703 was 28703, checked in by mistic100, 10 years ago

add dark selectize theme + "ternary" template modifier

File size: 11.1 KB
Line 
1/**
2 * selectize.dark.css (v0.9.1) - Dark Theme
3 * Copyright (c) 2013 Brian Reavis & contributors
4 *
5 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
6 * file except in compliance with the License. You may obtain a copy of the License at:
7 * http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software distributed under
10 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
11 * ANY KIND, either express or implied. See the License for the specific language
12 * governing permissions and limitations under the License.
13 *
14 * @author Brian Reavis <brian@thirdroute.com>
15 * @author Damien "Mistic" Sorel <http://www.strangeplanet.fr>
16 */
17.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
18  visibility: visible !important;
19  background: #f2f2f2 !important;
20  background: rgba(0, 0, 0, 0.06) !important;
21  border: 0 none !important;
22  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
23  box-shadow: inset 0 0 12px 4px #ffffff;
24}
25.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
26  content: '!';
27  visibility: hidden;
28}
29.selectize-control.plugin-drag_drop .ui-sortable-helper {
30  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
31  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
32}
33.selectize-dropdown-header {
34  position: relative;
35  padding: 5px 8px;
36  border-bottom: 1px solid #555555;
37  background: #383838;
38  -webkit-border-radius: 3px 3px 0 0;
39  -moz-border-radius: 3px 3px 0 0;
40  border-radius: 3px 3px 0 0;
41}
42.selectize-dropdown-header-close {
43  position: absolute;
44  right: 8px;
45  top: 50%;
46  color: #fefefe;
47  opacity: 0.4;
48  margin-top: -12px;
49  line-height: 20px;
50  font-size: 20px !important;
51}
52.selectize-dropdown-header-close:hover {
53  color: #bebebe;
54}
55.selectize-dropdown.plugin-optgroup_columns .optgroup {
56  border-right: 1px solid #f2f2f2;
57  border-top: 0 none;
58  float: left;
59  -webkit-box-sizing: border-box;
60  -moz-box-sizing: border-box;
61  box-sizing: border-box;
62}
63.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
64  border-right: 0 none;
65}
66.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
67  display: none;
68}
69.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
70  border-top: 0 none;
71}
72.selectize-control.plugin-remove_button [data-value] {
73  position: relative;
74  padding-right: 24px !important;
75}
76.selectize-control.plugin-remove_button [data-value] .remove {
77  z-index: 1;
78  /* fixes ie bug (see #392) */
79  position: absolute;
80  top: 0;
81  right: 0;
82  bottom: 0;
83  width: 17px;
84  text-align: center;
85  font-weight: bold;
86  font-size: 12px;
87  color: inherit;
88  text-decoration: none;
89  vertical-align: middle;
90  display: inline-block;
91  padding: 2px 0 0 0;
92  border-left: 1px solid #0073bb;
93  -webkit-border-radius: 0 2px 2px 0;
94  -moz-border-radius: 0 2px 2px 0;
95  border-radius: 0 2px 2px 0;
96  -webkit-box-sizing: border-box;
97  -moz-box-sizing: border-box;
98  box-sizing: border-box;
99}
100.selectize-control.plugin-remove_button [data-value] .remove:hover {
101  background: rgba(0, 0, 0, 0.05);
102}
103.selectize-control.plugin-remove_button [data-value].active .remove {
104  border-left-color: #00578d;
105}
106.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
107  background: none;
108}
109.selectize-control.plugin-remove_button .disabled [data-value] .remove {
110  border-left-color: #aaaaaa;
111}
112.selectize-control {
113  position: relative;
114}
115.selectize-dropdown,
116.selectize-input,
117.selectize-input input {
118  color: #fefefe;
119  font-family: inherit;
120  font-size: 13px;
121  line-height: 18px;
122  -webkit-font-smoothing: inherit;
123}
124.selectize-input,
125.selectize-control.single .selectize-input.input-active {
126  background: #333333;
127  cursor: text;
128  display: inline-block;
129}
130.selectize-input {
131  border: 1px solid #555555;
132  padding: 8px 8px;
133  display: inline-block;
134  width: 100%;
135  overflow: hidden;
136  position: relative;
137  z-index: 1;
138  -webkit-box-sizing: border-box;
139  -moz-box-sizing: border-box;
140  box-sizing: border-box;
141  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
142  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
143  -webkit-border-radius: 3px;
144  -moz-border-radius: 3px;
145  border-radius: 3px;
146}
147.selectize-control.multi .selectize-input.has-items {
148  padding: 5px 8px 2px;
149}
150.selectize-input.full {
151  background-color: #333333;
152}
153.selectize-input.disabled,
154.selectize-input.disabled * {
155  cursor: default !important;
156}
157.selectize-input.focus {
158  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
159  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.5);
160}
161.selectize-input.dropdown-active {
162  -webkit-border-radius: 3px 3px 0 0;
163  -moz-border-radius: 3px 3px 0 0;
164  border-radius: 3px 3px 0 0;
165}
166.selectize-input > * {
167  vertical-align: baseline;
168  display: -moz-inline-stack;
169  display: inline-block;
170  zoom: 1;
171  *display: inline;
172}
173.selectize-control.multi .selectize-input > div {
174  cursor: pointer;
175  margin: 0 3px 3px 0;
176  padding: 2px 6px;
177  background: #1da7ee;
178  color: #ffffff;
179  border: 1px solid #0073bb;
180}
181.selectize-control.multi .selectize-input > div.active {
182  background: #92c836;
183  color: #ffffff;
184  border: 1px solid #00578d;
185}
186.selectize-control.multi .selectize-input.disabled > div,
187.selectize-control.multi .selectize-input.disabled > div.active {
188  color: #ffffff;
189  background: #d2d2d2;
190  border: 1px solid #aaaaaa;
191}
192.selectize-input > input {
193  padding: 0 !important;
194  min-height: 0 !important;
195  max-height: none !important;
196  max-width: 100% !important;
197  margin: 0 1px !important;
198  text-indent: 0 !important;
199  border: 0 none !important;
200  background: none !important;
201  line-height: inherit !important;
202  -webkit-user-select: auto !important;
203  -webkit-box-shadow: none !important;
204  box-shadow: none !important;
205}
206.selectize-input > input::-ms-clear {
207  display: none;
208}
209.selectize-input > input:focus {
210  outline: none !important;
211}
212.selectize-input::after {
213  content: ' ';
214  display: block;
215  clear: left;
216}
217.selectize-input.dropdown-active::before {
218  content: ' ';
219  display: block;
220  position: absolute;
221  background: #555555;
222  height: 1px;
223  bottom: 0;
224  left: 0;
225  right: 0;
226}
227.selectize-dropdown {
228  position: absolute;
229  z-index: 10;
230  border: 1px solid #555555;
231  background: #333333;
232  margin: -1px 0 0 0;
233  border-top: 0 none;
234  -webkit-box-sizing: border-box;
235  -moz-box-sizing: border-box;
236  box-sizing: border-box;
237  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
238  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
239  -webkit-border-radius: 0 0 3px 3px;
240  -moz-border-radius: 0 0 3px 3px;
241  border-radius: 0 0 3px 3px;
242}
243.selectize-dropdown [data-selectable] {
244  cursor: pointer;
245  overflow: hidden;
246}
247.selectize-dropdown [data-selectable] .highlight {
248  background: rgba(125, 168, 208, 0.2);
249  -webkit-border-radius: 1px;
250  -moz-border-radius: 1px;
251  border-radius: 1px;
252}
253.selectize-dropdown [data-selectable],
254.selectize-dropdown .optgroup-header {
255  padding: 5px 8px;
256}
257.selectize-dropdown .optgroup:first-child .optgroup-header {
258  border-top: 0 none;
259}
260.selectize-dropdown .optgroup-header {
261  color: #fefefe;
262  background: #333333;
263  cursor: default;
264}
265.selectize-dropdown .active {
266  background-color: #4f5e6b;
267  color: #fefefe;
268}
269.selectize-dropdown .active.create {
270  color: #fefefe;
271}
272.selectize-dropdown .create {
273  color: rgba(254, 254, 254, 0.5);
274}
275.selectize-dropdown-content {
276  overflow-y: auto;
277  overflow-x: hidden;
278  max-height: 200px;
279}
280.selectize-control.single .selectize-input,
281.selectize-control.single .selectize-input input {
282  cursor: pointer;
283}
284.selectize-control.single .selectize-input.input-active,
285.selectize-control.single .selectize-input.input-active input {
286  cursor: text;
287}
288.selectize-control.single .selectize-input:after {
289  content: ' ';
290  display: block;
291  position: absolute;
292  top: 50%;
293  right: 15px;
294  margin-top: -3px;
295  width: 0;
296  height: 0;
297  border-style: solid;
298  border-width: 5px 5px 0 5px;
299  border-color: #808080 transparent transparent transparent;
300}
301.selectize-control.single .selectize-input.dropdown-active:after {
302  margin-top: -4px;
303  border-width: 0 5px 5px 5px;
304  border-color: transparent transparent #808080 transparent;
305}
306.selectize-control.rtl.single .selectize-input:after {
307  left: 15px;
308  right: auto;
309}
310.selectize-control.rtl .selectize-input > input {
311  margin: 0 4px 0 -2px !important;
312}
313.selectize-control .selectize-input.disabled {
314  opacity: 0.5;
315  background-color: #333333;
316}
317.selectize-control.multi .selectize-input.has-items {
318  padding-left: 5px;
319  padding-right: 5px;
320}
321.selectize-control.multi .selectize-input.disabled [data-value] {
322  color: #999;
323  text-shadow: none;
324  background: none;
325  -webkit-box-shadow: none;
326  box-shadow: none;
327}
328.selectize-control.multi .selectize-input.disabled [data-value],
329.selectize-control.multi .selectize-input.disabled [data-value] .remove {
330  border-color: #888;
331}
332.selectize-control.multi .selectize-input.disabled [data-value] .remove {
333  background: none;
334}
335.selectize-control.multi .selectize-input [data-value] {
336  opacity: 0.9;
337  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
338  -webkit-border-radius: 3px;
339  -moz-border-radius: 3px;
340  border-radius: 3px;
341  background-color: #1b9dec;
342  background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
343  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
344  background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
345  background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
346  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
347  background-repeat: repeat-x;
348  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
349  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
350  box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
351}
352.selectize-control.multi .selectize-input [data-value].active {
353  background-color: #0085d4;
354  background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
355  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
356  background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
357  background-image: -o-linear-gradient(top, #008fd8, #0075cf);
358  background-image: linear-gradient(to bottom, #008fd8, #0075cf);
359  background-repeat: repeat-x;
360  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0);
361}
362.selectize-control.single .selectize-input {
363  background-color: #343434;
364  background-image: -moz-linear-gradient(top, #363636, #303030);
365  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363636), to(#303030));
366  background-image: -webkit-linear-gradient(top, #363636, #303030);
367  background-image: -o-linear-gradient(top, #363636, #303030);
368  background-image: linear-gradient(to bottom, #363636, #303030);
369  background-repeat: repeat-x;
370  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363636', endColorstr='#ff303030', GradientType=0);
371}
372.selectize-input.focus {
373  background-color: #363636;
374}
375.selectize-dropdown .optgroup-header {
376  padding-top: 7px;
377  font-weight: bold;
378}
379.selectize-dropdown .optgroup {
380  border-top: 1px solid #555555;
381}
382.selectize-dropdown .optgroup:first-child {
383  border-top: 0 none;
384}
Note: See TracBrowser for help on using the repository browser.