|
0
|
1 |
/* -------------------------------------------------- |
|
|
2 |
:: Screen Meta & Menu Icon |
|
|
3 |
---------------------------------------------------*/ |
|
|
4 |
.appearance_page_ot-theme-options #screen-meta { margin-right: 20px; margin-left: 2px; min-width: 533px; } |
|
|
5 |
|
|
|
6 |
/* -------------------------------------------------- |
|
|
7 |
:: Messages |
|
|
8 |
---------------------------------------------------*/ |
|
|
9 |
.wrap.settings-wrap div.error, |
|
|
10 |
.wrap.settings-wrap div.updated { margin: 9px 5px 0px 2px !important; } |
|
|
11 |
|
|
|
12 |
/* -------------------------------------------------- |
|
|
13 |
:: OptionTree Wrappers |
|
|
14 |
---------------------------------------------------*/ |
|
|
15 |
#option-tree-settings-api .metabox-holder { overflow: hidden; } |
|
|
16 |
#option-tree-settings-api .postbox { background: #fff; border: none; margin: 0 20px; } |
|
|
17 |
#option-tree-settings-api .inside { margin: 0px !important; padding: 0px !important; } |
|
|
18 |
#option-tree-settings-api .ui-tabs { background: #fff url(../images/ot-menu-bg.png) repeat-y 0 0; border: 1px solid #ccc; border-top: none; margin: 0px 5px 0 2px; min-width: 533px; padding-bottom: 5px; position: relative; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.05); -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } |
|
|
19 |
|
|
|
20 |
/* -------------------------------------------------- |
|
|
21 |
:: Header |
|
|
22 |
---------------------------------------------------*/ |
|
|
23 |
#option-tree-header-wrap { position: relative; } |
|
|
24 |
#option-tree-header { background: #464646; color: #ccc; display: block; margin: 11px 5px 0 2px; min-width: 535px; overflow: hidden; position: relative; background-image:-webkit-linear-gradient(bottom, #373737, #464646 5px); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.05); -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } |
|
|
25 |
#option-tree-header li { display: block; float: left; margin: 0px; padding: 0px; } |
|
|
26 |
#option-tree-header li a { color: #ccc; text-decoration: none; } |
|
|
27 |
#option-tree-header li a:hover { color: #fafafa; } |
|
|
28 |
#option-tree-header #option-tree-logo a { background: transparent url(../images/ot-logo.png) no-repeat 13px center; border-right: 1px solid #333; display: block; float: left; height: 24px; line-height: 24px; padding: 3px 12px 3px 13px; text-indent: -9999px; width: 24px; } |
|
|
29 |
#option-tree-header li#option-tree-logo:hover { color: #fafafa; background-color: #3a3a3a; background-image: -ms-linear-gradient(bottom,#3a3a3a,#222); background-image: -moz-linear-gradient(bottom,#3a3a3a,#222); background-image: -o-linear-gradient(bottom,#3a3a3a,#222); background-image: -webkit-gradient(linear,left bottom,left top,from(#3a3a3a),to(#222)); background-image: -webkit-linear-gradient(bottom,#3a3a3a,#222); background-image: linear-gradient(bottom,#3a3a3a,#222);-webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; } |
|
|
30 |
|
|
|
31 |
#option-tree-header #option-tree-version { } |
|
|
32 |
#option-tree-header #option-tree-version span { border-left: 1px solid #555; display: block; float: left; height: 24px; line-height: 24px; padding: 3px 12px 3px 12px; } |
|
|
33 |
|
|
|
34 |
/* -------------------------------------------------- |
|
|
35 |
:: Sub Header |
|
|
36 |
---------------------------------------------------*/ |
|
|
37 |
#option-tree-sub-header { background: #fafafa url(../images/ot-sub-header-bg.png) repeat-x 0 0; border: 1px solid #ccc; border-top: none; display: block; margin: 0 5px 0 2px; min-width: 523px; overflow: hidden; padding: 5px; position: relative; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.05); } |
|
|
38 |
|
|
|
39 |
/* -------------------------------------------------- |
|
|
40 |
:: Tabs |
|
|
41 |
---------------------------------------------------*/ |
|
|
42 |
.wrap.settings-wrap .ui-tabs-nav { background: url(../images/ot-menu-top-bg.png) no-repeat right top; float: left; list-style: none; margin: 0 0 0 -4px; padding: 1em 0; width: 151px; } |
|
|
43 |
.wrap.settings-wrap .ui-tabs-nav li { border: 1px solid transparent; border-right-width: 0px; display: block; margin: 0; } |
|
|
44 |
.wrap.settings-wrap .ui-tabs-nav li.ui-state-active { background: #fff; border-color: #ccc; color: #000; } |
|
|
45 |
.wrap.settings-wrap .ui-tabs-nav li a { color: #21759b; display: block; line-height: 18px; padding: 5px 5px 5px 12px; text-decoration: none; } |
|
|
46 |
.wrap.settings-wrap .ui-tabs-nav li a:hover, |
|
|
47 |
.wrap.settings-wrap .ui-tabs-nav li.ui-state-active a { color: #000; } |
|
|
48 |
.wrap.settings-wrap .ui-tabs-panel { clear: both; } |
|
|
49 |
|
|
|
50 |
/* -------------------------------------------------- |
|
|
51 |
:: Format Settings |
|
|
52 |
---------------------------------------------------*/ |
|
|
53 |
.format-settings { padding: 10px 0 20px 0; position: relative; width: 100%; } |
|
|
54 |
|
|
|
55 |
/* -------------------------------------------------- |
|
|
56 |
:: Format Setting Label |
|
|
57 |
---------------------------------------------------*/ |
|
|
58 |
.format-setting-label { border-bottom: 1px dashed #ddd; margin: 0 0 14px 0; padding: 5px 0px 1px 0px; width: 100%; } |
|
|
59 |
|
|
|
60 |
#option-tree-settings-api .description h3, |
|
|
61 |
#option-tree-settings-api .format-setting-label .label, |
|
|
62 |
.metabox-holder .format-setting-label .label { background: none; border: none; color: #333; cursor: text; display: block; font-family: sans-serif !important; font-size: 1.2em !important; font-weight: bold !important; letter-spacing: 0; padding: 0 0 9px 0 !important; -webkit-user-select: text; text-shadow: none; } |
|
|
63 |
|
|
|
64 |
/* -------------------------------------------------- |
|
|
65 |
:: Format Setting |
|
|
66 |
---------------------------------------------------*/ |
|
|
67 |
.format-setting { overflow: hidden; position: relative; width: 100%; } |
|
|
68 |
.format-setting .format-setting-inner { float: left; position: relative; width: 63%; } |
|
|
69 |
|
|
|
70 |
.format-setting.no-desc .format-setting-inner, |
|
|
71 |
.format-setting.wide-desc .format-setting-inner, |
|
|
72 |
.option-tree-list-item .format-setting-inner { width: 100%; } |
|
|
73 |
.format-setting .description { float: right; padding: 5px 0; width: 35%; } |
|
|
74 |
|
|
|
75 |
.format-setting.no-desc .description, |
|
|
76 |
.format-setting.wide-desc .description, |
|
|
77 |
.option-tree-list-item .description { float: none; width: 100%; } |
|
|
78 |
|
|
|
79 |
.list-item-description { padding-top: 10px; } |
|
|
80 |
#option-tree-settings-api h4 { color: #333; font-size: 1.12em; font-weight: bold; margin: 1em 0 0.5em 0; padding: 0; } |
|
|
81 |
#option-tree-settings-api h5 { color: #444; font-size: 1em; font-weight: bold; margin: 1em 0 0.5em 0; padding: 0; } |
|
|
82 |
#option-tree-settings-api p { margin: 0 0 1.5em 0 !important; } |
|
|
83 |
#post .format-setting-inner p { float: left; width: 100%; margin: 0 0 1.05em 0 !important; } |
|
|
84 |
.aside { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; } |
|
|
85 |
.deprecated { border-bottom: 1px solid #eee; color: #b94029; padding-bottom: 15px; margin-bottom: 15px; } |
|
|
86 |
.warning { color: #b94029; } |
|
|
87 |
.docs-ul { line-height: 1.3em; margin: 0; padding: 0 0 1em 0; } |
|
|
88 |
.docs-ul li { list-style-type: square; margin-left: 20px; } |
|
|
89 |
#contextual-help-setting { float: left; padding: 10px 0 5px 0; width: 100%; } |
|
|
90 |
#contextual-help-label { float: left; padding-top: 20px; width: 100%; } |
|
|
91 |
#option_tree_settings_help { float: left; width: 100%; } |
|
|
92 |
#option-tree-settings-api blockquote { font-style: italic; padding-left: 15px; position: relative; } |
|
|
93 |
#option-tree-settings-api blockquote:before { color: #ccc; content: "\201C"; display: block; font-size: 400%; font-style: normal; left: -10px; position: absolute; top: 10px; } |
|
|
94 |
|
|
|
95 |
|
|
|
96 |
@media only screen and (max-width: 900px) { |
|
|
97 |
.format-setting .description, |
|
|
98 |
.format-setting .format-setting-inner { width: 100%; } |
|
|
99 |
.format-setting .description { padding-top: 0px; } |
|
|
100 |
} |
|
|
101 |
|
|
|
102 |
/* -------------------------------------------------- |
|
|
103 |
:: Code formatting |
|
|
104 |
---------------------------------------------------*/ |
|
|
105 |
#option-tree-settings-api code { background-color: #f1f1f1; color: #000; } |
|
|
106 |
#option-tree-settings-api pre { font-size: 13px; padding: 0; margin: 1.5em 0; line-height: 18px; overflow: auto; overflow-Y: hidden; padding-top: 18px; background: #f1f1f1; border-bottom: 1px solid #f1f1f1; margin-bottom: 20px; color: #000; white-space:pre-wrap; word-wrap:break-word; } |
|
|
107 |
#option-tree-settings-api pre code { padding: 0 18px 18px 18px; display: block; background: url(../images/ot-pre-bg.gif) repeat left top; } |
|
|
108 |
|
|
|
109 |
/* -------------------------------------------------- |
|
|
110 |
:: Input & Upload |
|
|
111 |
---------------------------------------------------*/ |
|
|
112 |
input.option-tree-ui-upload-input, |
|
|
113 |
input.option-tree-ui-input { background: #fff; border: 1px solid #ccc !important; line-height: 17px; font-size: 12px; margin-bottom: 5px; padding: 7px 6px; position: relative; width: 100%; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); } |
|
|
114 |
|
|
|
115 |
input:focus.option-tree-ui-upload-input, |
|
|
116 |
input:focus.option-tree-ui-input { border-color: #bbb !important; } |
|
|
117 |
|
|
|
118 |
@media screen and (-webkit-min-device-pixel-ratio:0) { |
|
|
119 |
.option-tree-ui-input, |
|
|
120 |
.option-tree-ui-upload-input { padding: 5px 6px !important; } |
|
|
121 |
} |
|
|
122 |
|
|
|
123 |
/* -------------------------------------------------- |
|
|
124 |
:: Upload |
|
|
125 |
---------------------------------------------------*/ |
|
|
126 |
div.option-tree-ui-media-wrap { margin: 5px 63px 0 0; min-height: 35px; position: relative; } |
|
|
127 |
.option-tree-ui-media-wrap img { background: #fafafa; border: 1px solid #ccc; padding: 4px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; display: block; float: left; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; } |
|
|
128 |
.option-tree-ui-upload-parent { width: auto !important; margin-right: 53px; padding: 0px; position: relative; } |
|
|
129 |
.format-setting .ot_upload_media { top: 0px; margin: 0px !important; position: absolute; right: -53px; } |
|
|
130 |
.option-tree-ui-media-wrap a.option-tree-ui-remove-media { float: none !important; margin: 0px !important; position: absolute !important; right: -63px; top: 1px; } |
|
|
131 |
|
|
|
132 |
/* -------------------------------------------------- |
|
|
133 |
:: Textarea |
|
|
134 |
---------------------------------------------------*/ |
|
|
135 |
.fill-area .description, |
|
|
136 |
.fill-area .format-setting-inner { width: 100% !important; } |
|
|
137 |
|
|
|
138 |
.wp-editor-area { display: block;} |
|
|
139 |
.textarea, |
|
|
140 |
.ot-metabox-wrapper textarea { width: 99.9%; border: 1px solid #ccc; font-family: Consolas, Monaco, monospace; line-height: 150%; outline: 0; padding: 10px; resize: vertical; } |
|
|
141 |
#contextual-help-setting .textarea { width: 99.75%; } |
|
|
142 |
.ot-metabox-wrapper .wp-editor-container { border: none; } |
|
|
143 |
.ot-metabox-wrapper textarea:focus { border-color: #bbb !important; } |
|
|
144 |
|
|
|
145 |
@media only screen and (max-width: 1105px) { .type-textarea .description, .type-textarea .format-setting-inner { width: 100%; } } |
|
|
146 |
|
|
|
147 |
/* -------------------------------------------------- |
|
|
148 |
:: Setting Item with Drag & Drop |
|
|
149 |
---------------------------------------------------*/ |
|
|
150 |
.option-tree-setting-wrap { margin-top: 0px; } |
|
|
151 |
.option-tree-setting-wrap li { margin: 4px 0px; } |
|
|
152 |
.option-tree-setting { border: 1px solid #ccc; overflow: hidden; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } |
|
|
153 |
.option-tree-setting a { text-decoration: none; } |
|
|
154 |
.option-tree-setting .open { background: #fafafa; cursor: move; line-height: 21px; height: 21px; padding: 10px 100px 10px 10px; display: block; } |
|
|
155 |
.ui-state-disabled .option-tree-setting .open { cursor: default; } |
|
|
156 |
.option-tree-setting .open:hover { background: #fafafa url(../images/ot-dots.png) no-repeat 4px 15px; } |
|
|
157 |
|
|
|
158 |
.button-section { position: absolute; right: 0px; top: 1px; } |
|
|
159 |
|
|
|
160 |
.option-tree-setting.is-section .open { background: #e9f2fb; } |
|
|
161 |
.option-tree-setting.is-section .open:hover { background: #e9f2fb url(../images/ot-dots.png) no-repeat 4px 15px; } |
|
|
162 |
|
|
|
163 |
.format-setting .ui-sortable-helper |
|
|
164 |
.option-tree-setting .open { background: #fff url(../images/ot-dots.png) no-repeat 4px 15px; } |
|
|
165 |
|
|
|
166 |
.ui-state-highlight { border: 1px dashed #ccc; display: block; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } |
|
|
167 |
|
|
|
168 |
.option-tree-setting-body { background: #fff; border-top: 1px solid #ccc; display: none; padding: 10px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } |
|
|
169 |
|
|
|
170 |
li ul .format-settings { padding: 0 0 10px 0; } |
|
|
171 |
li ul .format-setting-label { border: none; padding: 0px; margin: 0px; } |
|
|
172 |
|
|
|
173 |
/* -------------------------------------------------- |
|
|
174 |
:: Layouts |
|
|
175 |
---------------------------------------------------*/ |
|
|
176 |
#option_tree_layouts { display: none; padding-top: 12px; } |
|
|
177 |
#option-tree-options-layouts-form { left: 13px; position: absolute; top: 40px; z-index: 100; } |
|
|
178 |
.option-tree-save-layout { width: 250px; overflow: hidden; } |
|
|
179 |
.option-tree-save-layout .widefat { float: left; width: 128px !important; } |
|
|
180 |
.option-tree-save-layout button { margin: 0 0 0 10px; } |
|
|
181 |
.option-tree-active-layout { } |
|
|
182 |
|
|
|
183 |
/* -------------------------------------------------- |
|
|
184 |
:: Select |
|
|
185 |
---------------------------------------------------*/ |
|
|
186 |
.select-group { margin-right: 53px; overflow: hidden; width: auto; } |
|
|
187 |
.select-wrapper { background: #fff url(../images/ot-select.png) no-repeat right center; border: 1px solid #ccc; display: block; float: left; font-size: 12px; height: 27px; margin: 0 5px 5px 0; width: auto; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); } |
|
|
188 |
.select-wrapper:hover { background-image: url(../images/ot-select-hover.png); border-color: #bbb; } |
|
|
189 |
select.option-tree-ui-select { cursor: pointer; filter: alpha(opacity: 0); font-size: 14px; height: 29px; margin: 0; -moz-opacity: 0; opacity: 0; padding: 0 !important; position: relative; width: inherit; z-index: 4; min-width: 118px; } |
|
|
190 |
select.option-tree-ui-select option { padding: 3px 15px !important; } |
|
|
191 |
.select-wrapper span { height: 27px; line-height: 27px; padding-left: 7px; position: absolute; z-index: 2; } |
|
|
192 |
|
|
|
193 |
#option-tree-options-layouts-form .select-wrapper { left: 244px; position: absolute; top: 0; float: none; } |
|
|
194 |
|
|
|
195 |
.type-measurement select.option-tree-ui-select { min-width: 68px !important; } |
|
|
196 |
.type-measurement .select-wrapper { position: absolute; right: 0px; top: 0px; } |
|
|
197 |
|
|
|
198 |
/* FireFox */ |
|
|
199 |
@-moz-document url-prefix() { |
|
|
200 |
#option-tree-options-layouts-form .select-wrapper { left: 250px; } |
|
|
201 |
} |
|
|
202 |
|
|
|
203 |
/* Webkit */ |
|
|
204 |
@media screen and (-webkit-min-device-pixel-ratio:0) { |
|
|
205 |
.select-wrapper span { |
|
|
206 |
height: 26px; |
|
|
207 |
line-height: 26px; |
|
|
208 |
} |
|
|
209 |
} |
|
|
210 |
|
|
|
211 |
/* Opera 11 */ |
|
|
212 |
@media not screen and (1) { |
|
|
213 |
.select-wrapper { |
|
|
214 |
height: 26px; |
|
|
215 |
} |
|
|
216 |
} |
|
|
217 |
|
|
|
218 |
/* -------------------------------------------------- |
|
|
219 |
:: Measurement |
|
|
220 |
---------------------------------------------------*/ |
|
|
221 |
.option-tree-ui-measurement-input-wrap { margin-right: 80px; } |
|
|
222 |
|
|
|
223 |
/* -------------------------------------------------- |
|
|
224 |
:: Checkbox & Radio |
|
|
225 |
---------------------------------------------------*/ |
|
|
226 |
.format-setting.type-checkbox input, |
|
|
227 |
.format-setting.type-radio input { float: left; margin: 2px 5px 0 1px; } |
|
|
228 |
.format-setting.type-checkbox label, |
|
|
229 |
.format-setting.type-radio label { float: left; max-width: 90%; padding: 0px; } |
|
|
230 |
#option-tree-settings-api .format-setting.type-checkbox p, |
|
|
231 |
#option-tree-settings-api .format-setting.type-radio p { float: left; margin: 0.5em 0 !important; width: 100%; } |
|
|
232 |
|
|
|
233 |
/* -------------------------------------------------- |
|
|
234 |
:: Radio Images |
|
|
235 |
---------------------------------------------------*/ |
|
|
236 |
.type-radio-image .option-tree-ui-radio-images { float: left; margin: 0 10px 10px 0px; } |
|
|
237 |
.type-radio-image .option-tree-ui-radio-images img { background: #fff; border: 1px solid #ccc; cursor: pointer; padding: 5px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } |
|
|
238 |
.type-radio-image .option-tree-ui-radio-images img.option-tree-ui-radio-image-selected, |
|
|
239 |
.type-radio-image .option-tree-ui-radio-images img:hover { border-color: #464646; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.05); } |
|
|
240 |
|
|
|
241 |
/* -------------------------------------------------- |
|
|
242 |
:: Colorpicker |
|
|
243 |
---------------------------------------------------*/ |
|
|
244 |
.option-tree-ui-colorpicker-input-wrap{ margin-right: 53px; position: relative; width: auto; } |
|
|
245 |
.format-settings .cp_box { background: #f1f1f1; border: 1px solid #ccc; bottom: 5px; height: 27px; position: absolute; right: -53px; width: 46px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } |
|
|
246 |
.ot_colorpicker { width: 342px; height: 170px; overflow: hidden; position: absolute; background: #fafafa url(../images/colorpicker/color_bg.png); font-family: Arial, Helvetica, sans-serif; display: none; border: 1px solid #bbb; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.05); z-index: 100; } |
|
|
247 |
.ot_colorpicker .colorpicker_color { width: 150px; height: 150px; left: 10px; top: 10px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; } |
|
|
248 |
.ot_colorpicker .colorpicker_color div{ position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(../images/colorpicker/color_overlay.png); } |
|
|
249 |
.ot_colorpicker .colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url(../images/colorpicker/color_select.gif); margin: -5px 0 0 -5px; } |
|
|
250 |
.ot_colorpicker .colorpicker_hue { position: absolute; top: 10px; left: 164px; width: 35px; height: 150px; cursor: n-resize; } |
|
|
251 |
.ot_colorpicker .colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url(../images/colorpicker/color_indicator.png) left top; margin: -5px 0 0 0; } |
|
|
252 |
.ot_colorpicker .colorpicker_new_color { position: absolute; width: 60px; height: 30px; right: 80px; top: 10px; background: #f00; } |
|
|
253 |
.ot_colorpicker .colorpicker_current_color { position: absolute; width: 60px; height: 30px; right: 10px; top: 10px; background: #f00; } |
|
|
254 |
.ot_colorpicker input { background-color: transparent !important; border: 1px solid transparent !important; position: absolute !important; font-size: 10px !important; font-family: Arial, Helvetica, sans-serif !important; color: #666 !important; top: 0px !important; right: 12px !important; text-align: right !important; margin: 0 !important; padding: 0 !important; height: 22px !important;line-height: 22px !important; } |
|
|
255 |
.ot_colorpicker .colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(../images/colorpicker/color_hex.png) top; left: 201px; bottom: 9px; } |
|
|
256 |
.ot_colorpicker .colorpicker_hex input { left: 13px; height: 22px; line-height: 22px; padding: 10px; } |
|
|
257 |
.ot_colorpicker .colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; } |
|
|
258 |
.ot_colorpicker .colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; } |
|
|
259 |
.ot_colorpicker .colorpicker_rgb_r { background-image: url(../images/colorpicker/color_rgb_r.png); top: 49px; left: 201px; } |
|
|
260 |
.ot_colorpicker .colorpicker_rgb_g { background-image: url(../images/colorpicker/color_rgb_g.png); top: 79px; left: 201px; } |
|
|
261 |
.ot_colorpicker .colorpicker_rgb_b { background-image: url(../images/colorpicker/color_rgb_b.png); top: 109px; left: 201px; } |
|
|
262 |
.ot_colorpicker .colorpicker_hsb_h { background-image: url(../images/colorpicker/color_hsb_h.png); top: 49px; right: 9px; } |
|
|
263 |
.ot_colorpicker .colorpicker_hsb_s { background-image: url(../images/colorpicker/color_hsb_s.png); top: 79px; right: 9px } |
|
|
264 |
.ot_colorpicker .colorpicker_hsb_b { background-image: url(../images/colorpicker/color_hsb_b.png); top: 109px; right: 9px; } |
|
|
265 |
.ot_colorpicker .colorpicker_submit { position: absolute; width: 16px; height: 16px; background: url(../images/colorpicker/color_wheel.png) top; right: 10px; bottom: 10px; overflow: hidden; } |
|
|
266 |
.ot_colorpicker .colorpicker_focus { background-position: center; } |
|
|
267 |
.ot_colorpicker .colorpicker_hex.colorpicker_focus { background-position: bottom; } |
|
|
268 |
.ot_colorpicker .colorpicker_submit.colorpicker_focus { background-position: bottom; } |
|
|
269 |
.ot_colorpicker .colorpicker_slider { background-position: bottom; } |
|
|
270 |
|
|
|
271 |
@media not screen and (1) { |
|
|
272 |
.format-settings .cp_box { height: 26px; } |
|
|
273 |
} |
|
|
274 |
|
|
|
275 |
/* -------------------------------------------------- |
|
|
276 |
:: OptionTree UI Buttons |
|
|
277 |
---------------------------------------------------*/ |
|
|
278 |
.option-tree-ui-buttons { background: #fff; border: 1px solid #ccc; margin: 11px 5px 0 2px; min-width: 523px; overflow: hidden; padding: 5px; position: relative; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); box-shadow:0 1px 3px rgba(0,0,0,0.05); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } |
|
|
279 |
.option-tree-ui-buttons.alt { background: #f5f5f5; border-color: #dfdfdf;} |
|
|
280 |
.option-tree-ui-buttons:before, |
|
|
281 |
.option-tree-ui-buttons:after { content: "\0020"; display: block; height: 0; visibility: hidden; } |
|
|
282 |
.option-tree-ui-buttons:after { clear: both; } |
|
|
283 |
.option-tree-ui-buttons { zoom: 1; } |
|
|
284 |
.option-tree-ui-button { background: #f5f5f5; border: 1px solid #ccc; color: #444; cursor: pointer; display: inline-block; float: left; font-size: 11px; font-weight: bold; height: 27px; line-height: 27px; margin: 5px; padding: 0px 14px; position: relative; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,0.7); background: -moz-linear-gradient(top, #f5f5f5 0%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); background: -o-linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); background: -ms-linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); background: linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#f1f1f1',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: border-color .20s; -moz-transition: border-color .20s; -o-transition: border-color .20s; transition: border-color .20s; -webkit-user-select: none; z-index: 1; } |
|
|
285 |
button.option-tree-ui-button { height: 29px; line-height: 11px; padding: 7px 14px 9px 14px; } |
|
|
286 |
.option-tree-ui-button.right { float: right; } |
|
|
287 |
.option-tree-ui-button.hug-left { margin-left: 0px; } |
|
|
288 |
.option-tree-ui-button.hug-right { margin-right: 0px; } |
|
|
289 |
.option-tree-ui-button.pad { padding: 0px 21px; } |
|
|
290 |
.option-tree-ui-button.left-item { margin: 5px 0 5px 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } |
|
|
291 |
.option-tree-ui-button.center-item { margin: 5px 0 5px -1px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } |
|
|
292 |
.option-tree-ui-button.right-item { margin: 5px 5px 5px -1px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } |
|
|
293 |
.option-tree-ui-button:hover, |
|
|
294 |
.option-tree-ui-button:focus { background: #f8f8f8; border-color: #c6c6c6; color: #333; background: -moz-linear-gradient(top, #f8f8f8 0%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); background: -o-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); background: -ms-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); background: linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0 ); box-shadow: 0px 1px 1px rgba(0,0,0, 0.1); -moz-box-shadow: 0px 1px 1px rgba(0,0,0, 0.1); -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, 0.1); z-index: 2; } |
|
|
295 |
.option-tree-ui-button:active { box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.1); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.1); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.1); z-index: 3; } |
|
|
296 |
.option-tree-ui-button.active, |
|
|
297 |
.option-tree-ui-button.active:hover, |
|
|
298 |
.option-tree-ui-button.active:active { background: #eee; border-color: #c6c6c6; cursor: default; background: -moz-linear-gradient(top, #eee 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #eee 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #eee 0%,#e5e5e5 100%); background: -ms-linear-gradient(top, #eee 0%,#e5e5e5 100%); background: linear-gradient(top, #eee 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#e5e5e5',GradientType=0 ); box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.1); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.1); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0, 0.1); z-index: 3; } |
|
|
299 |
.option-tree-ui-button.disabled, |
|
|
300 |
.option-tree-ui-button.disabled:hover, |
|
|
301 |
.option-tree-ui-button.disabled:active{ background: #f5f5f5; border: 1px solid #dadada; color: #bbb; cursor: default; background: -moz-linear-gradient(top, #f5f5f5 0%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); background: -o-linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); background: -ms-linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); background: linear-gradient(top, #f5f5f5 0%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#f1f1f1',GradientType=0 ); box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } |
|
|
302 |
.option-tree-ui-button:focus { outline: none; } |
|
|
303 |
button.reset-settings { position: relative; top: -45px; left: 8px; } |
|
|
304 |
|
|
|
305 |
|
|
|
306 |
@media not screen and (1) { |
|
|
307 |
.option-tree-ui-button { height: 26px; } |
|
|
308 |
button.option-tree-ui-button { height: 28px !important; } |
|
|
309 |
} |
|
|
310 |
/* -------------------------------------------------- |
|
|
311 |
:: OptionTree UI Button Colors |
|
|
312 |
---------------------------------------------------*/ |
|
|
313 |
|
|
|
314 |
/* Blue */ |
|
|
315 |
.option-tree-ui-button.blue { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #0080f0; background: #2c95ff; background: -moz-linear-gradient(top, #2c95ff 0%, #288cef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c95ff), color-stop(100%,#288cef)); background: -webkit-linear-gradient(top, #2c95ff 0%,#288cef 100%); background: -o-linear-gradient(top, #2c95ff 0%,#288cef 100%); background: -ms-linear-gradient(top, #2c95ff 0%,#288cef 100%); background: linear-gradient(top, #2c95ff 0%,#288cef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c95ff', endColorstr='#288cef',GradientType=0 ); } |
|
|
316 |
.option-tree-ui-button.blue:hover { border-color: #1260b9; background: #2d95ff; background: -moz-linear-gradient(top, #2d95ff 0%, #0081eb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d95ff), color-stop(100%,#0081eb)); background: -webkit-linear-gradient(top, #2d95ff 0%,#0081eb 100%); background: -o-linear-gradient(top, #2d95ff 0%,#0081eb 100%); background: -ms-linear-gradient(top, #2d95ff 0%,#0081eb 100%); background: linear-gradient(top, #2d95ff 0%,#0081eb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d95ff', endColorstr='#0081eb',GradientType=0 ); } |
|
|
317 |
.option-tree-ui-button.blue:active { border-color: #0083dd; } |
|
|
318 |
|
|
|
319 |
/* Red */ |
|
|
320 |
.option-tree-ui-button.red { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #d94d30; background: #e55033; background: -moz-linear-gradient(top, #e55033 0%, #d94d30 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e55033), color-stop(100%,#d94d30)); background: -webkit-linear-gradient(top, #e55033 0%,#d94d30 100%); background: -o-linear-gradient(top, #e55033 0%,#d94d30 100%); background: -ms-linear-gradient(top, #e55033 0%,#d94d30 100%); background: linear-gradient(top, #e55033 0%,#d94d30 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55033', endColorstr='#d94d30',GradientType=0 ); } |
|
|
321 |
.option-tree-ui-button.red:hover { border-color: #b72f11; background: #e65033; background: -moz-linear-gradient(top, #e65033 0%, #cc3d1f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e65033), color-stop(100%,#cc3d1f)); background: -webkit-linear-gradient(top, #e65033 0%,#cc3d1f 100%); background: -o-linear-gradient(top, #e65033 0%,#cc3d1f 100%); background: -ms-linear-gradient(top, #e65033 0%,#cc3d1f 100%); background: linear-gradient(top, #e65033 0%,#cc3d1f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e65033', endColorstr='#cc3d1f',GradientType=0 ); } |
|
|
322 |
.option-tree-ui-button.red:active { border-color: #ce4925; } |
|
|
323 |
|
|
|
324 |
/* Green */ |
|
|
325 |
.option-tree-ui-button.green { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #29691d; background: #3c9300; background: -moz-linear-gradient(top, #3c9300 0%, #398a00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c9300), color-stop(100%,#398a00)); background: -webkit-linear-gradient(top, #3c9300 0%,#398a00 100%); background: -o-linear-gradient(top, #3c9300 0%,#398a00 100%); background: -ms-linear-gradient(top, #3c9300 0%,#398a00 100%); background: linear-gradient(top, #3c9300 0%,#398a00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c9300', endColorstr='#398a00',GradientType=0 ); } |
|
|
326 |
.option-tree-ui-button.green:hover { border-color: #275400; background: #3c9300; background: -moz-linear-gradient(top, #3c9300 0%, #347d00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c9300), color-stop(100%,#347d00)); background: -webkit-linear-gradient(top, #3c9300 0%,#347d00 100%); background: -o-linear-gradient(top, #3c9300 0%,#347d00 100%); background: -ms-linear-gradient(top, #3c9300 0%,#347d00 100%); background: linear-gradient(top, #3c9300 0%,#347d00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c9300', endColorstr='#347d00',GradientType=0 ); } |
|
|
327 |
.option-tree-ui-button.green:active { border-color: #2b7800; } |
|
|
328 |
|
|
|
329 |
/* Grey */ |
|
|
330 |
.option-tree-ui-button.grey { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,1); border-color: #333; background: #555; background: -moz-linear-gradient(top, #555 0%, #444 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#444)); background: -webkit-linear-gradient(top, #555 0%,#444 100%); background: -o-linear-gradient(top, #555 0%,#444 100%); background: -ms-linear-gradient(top, #555 0%,#444 100%); background: linear-gradient(top, #555 0%,#444 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#444',GradientType=0 ); } |
|
|
331 |
.option-tree-ui-button.grey:hover { border-color: #222; background: #444; background: -moz-linear-gradient(top, #444 0%, #333 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#333)); background: -webkit-linear-gradient(top, #444 0%,#333 100%); background: -o-linear-gradient(top, #444 0%,#333 100%); background: -ms-linear-gradient(top, #444 0%,#333 100%); background: linear-gradient(top, #444 0%,#333 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#333',GradientType=0 ); } |
|
|
332 |
.option-tree-ui-button.grey:active { border-color: #111; } |
|
|
333 |
|
|
|
334 |
/* All Active */ |
|
|
335 |
.option-tree-ui-button.blue:active, |
|
|
336 |
.option-tree-ui-button.red:active, |
|
|
337 |
.option-tree-ui-button.green:active, |
|
|
338 |
.option-tree-ui-button.grey:active { box-shadow: inset 1px 1px 3px rgba(0,0,0, 0.2); -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0, 0.2); -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0, 0.2); } |
|
|
339 |
|
|
|
340 |
/* -------------------------------------------------- |
|
|
341 |
:: OptionTree UI Button Icons |
|
|
342 |
---------------------------------------------------*/ |
|
|
343 |
.option-tree-ui-button .icon { background: url(../images/ot-ui-sprite.png) no-repeat; display: inline-block; float: left; height: 18px; margin-top: 4px; opacity: 0.65; overflow: hidden; text-indent: -9999px; width: 18px; } |
|
|
344 |
button.option-tree-ui-button .icon { margin-top: -3px; } |
|
|
345 |
.option-tree-ui-button.light .icon { background-image: url(../images/ot-ui-light-sprite.png); opacity: 0.9; } |
|
|
346 |
.option-tree-ui-button.active .icon, |
|
|
347 |
.option-tree-ui-button:hover .icon { opacity: 1; } |
|
|
348 |
.option-tree-ui-button .icon.right-label { margin-right: 10px; } |
|
|
349 |
.option-tree-ui-button .icon.left-label { margin-left: 10px; float: right; } |
|
|
350 |
.option-tree-ui-button .upload { background-position: -0px -0px; } |
|
|
351 |
.option-tree-ui-button .trash-can { background-position: -18px -0px; } |
|
|
352 |
.option-tree-ui-button .pencil { background-position: -36px -0px; } |
|
|
353 |
.option-tree-ui-button .check { background-position: -54px -0px; } |