WebUI: migrate to fetch API
[qBittorrent.git] / src / webui / www / private / css / Window.css
blob2546a9dcb7332b4217eead8dac8c00b3e365b5cd
1 /*
3 Window.css for Mocha UI
5 Theme: Default
7 Copyright:
8 Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
10 License:
11 MIT-style license.
13 Required by:
14 Window.js and Modal.css
18 /* Windows
19 ---------------------------------------------------------------- */
21 .mocha {
22 background-color: var(--color-background-default);
23 display: none;
24 overflow: hidden;
27 .mochaOverlay {
28 background-color: var(--color-background-default);
29 border-radius: 5px;
30 height: auto !important; /* also fixes out of block issue */
31 left: 0;
32 position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */
33 top: 0;
38 We get a little creative here in order to define a gradient in the CSS using a query
39 string appended to a background image.
41 "from" is the top color of the gradient. "to" is the bottom color of the gradient.
43 Both must be hex values without the leading # sign.
47 .mochaTitlebar {
48 background-color: var(--color-background-default);
49 border-radius: 5px;
50 overflow: hidden;
51 width: 100%;
54 .mochaTitlebar h3 {
55 background-size: 16px !important; /* override mocha titlebar logo inline style */
56 font-size: 12px;
57 font-weight: bold;
58 line-height: 15px;
59 overflow: hidden;
60 padding: 5px 10px 4px 12px;
61 text-overflow: ellipsis;
62 white-space: nowrap;
65 .mochaToolbarWrapper {
66 background-color: var(--color-background-popup);
67 height: auto !important;
68 overflow: hidden;
69 position: relative;
70 width: 100%; /* For IE */
73 div.mochaToolbarWrapper.bottom {
74 border: 0;
75 border-bottom: 1px solid var(--color-border-default);
78 .mochaToolbar {
79 border-top: 1px solid var(--color-border-default);
80 height: auto !important;
81 padding-top: 4px;
82 width: 100%; /* For IE */
85 .mochaContentBorder {
86 border-bottom: 1px solid var(--color-border-default);
87 border-top: 1px solid var(--color-border-default);
90 /* Has a fixed height and scrollbars if required. */
91 .mochaContentWrapper {
92 background-color: var(--color-background-popup);
93 font-size: 12px;
94 overflow: auto;
97 .mochaContent {
98 padding: 10px 12px;
101 .mocha .handle {
102 background: #0f0;
103 font-size: 1px; /* For IE6 */
104 height: 3px;
105 opacity: 0;
106 overflow: hidden;
107 position: absolute;
108 width: 3px;
109 z-index: 2;
112 /* Corner resize handles */
113 .mocha .corner {
114 background: #f00;
115 height: 10px;
116 width: 10px;
119 /* Bottom right resize handle */
120 .mocha .cornerSE {
121 background-color: var(--color-background-default);
122 height: 20px;
123 width: 20px;
126 .mochaCanvasHeader {
127 left: 0;
128 overflow: hidden;
129 position: absolute;
130 top: 0;
131 visibility: hidden;
132 z-index: -1;
135 .mochaControls {
136 height: 14px;
137 position: absolute;
138 right: 8px;
139 top: 8px;
140 width: 52px;
141 z-index: 4;
144 .mochaCanvasControls {
145 position: absolute;
146 right: 8px;
147 top: 8px;
148 z-index: 3;
152 To use images for these buttons:
153 1. Set the useCanvasControls window option to false.
154 2. If you use a different button size you may need to reposition the controls.
155 Modify the controlsOffset window option.
156 2. Replcac the background-color with a background-image for each button.
159 .mochaMinimizeButton,
160 .mochaMaximizeButton,
161 .mochaCloseButton {
162 background-color: var(--color-background-default);
163 color: var(--color-text-default);
164 cursor: pointer;
165 float: right;
166 font-size: 1px;
167 height: 14px;
168 margin-left: 5px;
169 width: 14px;
170 z-index: 4;
173 .mochaMinimizeButton {
174 margin-left: 0;
177 .mochaSpinner {
178 background: url("../images/spinner.gif") no-repeat;
179 bottom: 7px;
180 display: none;
181 height: 16px;
182 left: 6px;
183 position: absolute;
184 width: 16px;
187 .mochaIframe {
188 width: 100%;
191 /* Fix for IE6 select z-index issue */
192 .zIndexFix {
193 border: 1px solid transparent;
194 display: block;
195 /*filter: mask();*/
196 height: 100px;
197 left: 0;
198 position: absolute;
199 top: 0;
200 width: 100px;
201 z-index: -1;
204 /* Viewport overlays
205 ---------------------------------------------------------------- */
207 #modalOverlay {
208 background: hsla(0deg 0 0 / 30%);
209 display: none;
210 left: 0;
211 opacity: 0;
212 position: fixed;
213 top: 0;
214 width: 100%;
215 z-index: 10000;
218 /* Fix for IE6 select z-index issue */
219 #modalFix {
220 display: none;
221 left: 0;
222 opacity: 0;
223 position: absolute;
224 top: 0;
225 width: 100%;
226 z-index: 9999;
229 /* Underlay */
231 #windowUnderlay {
232 background: #fff;
233 left: 0;
234 position: fixed;
235 top: 0;
236 width: 100%;
239 * html #windowUnderlay {
240 position: absolute;
243 /* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */
245 .mocha.replaced,
246 .mochaTitlebar.replaced,
247 .mochaMinimizeButton.replaced,
248 .mochaMaximizeButton.replaced,
249 .mochaCloseButton.replaced {
250 background-color: transparent !important;
253 .windowClosed {
254 display: none;
255 left: -20000px;
256 overflow: hidden;
257 position: absolute;
258 top: -20000px;
259 visibility: hidden;
260 z-index: -1;
263 .windowClosed .mochaContentBorder,
264 .windowClosed .mochaToolbarWrapper,
265 .windowClosed .mochaTitlebar,
266 .windowClosed .mochaControls,
267 .windowClosed .mochaCanvasControls {
268 display: none;
269 left: 0;
270 position: absolute;
271 top: 0;
272 visibility: hidden;
273 z-index: -1;
276 /* Modals */
278 .modal2 {
279 border: 8px solid #fff;
282 .modal2 .mochaContentBorder {
283 border-width: 0px;
286 /* Window Themes */
288 .mocha.no-canvas {
289 background: #e5e5e5;
290 border: 1px solid #555;
293 .mocha.no-canvas .mochaTitlebar {
294 background: #e5e5e5;
297 .mocha.transparent .mochaTitlebar h3 {
298 color: #fff;
299 display: none;
302 .mocha.transparent .mochaContentWrapper {
303 background: transparent;
306 .mocha.notification {
307 background: #cedff2;
310 .mocha.notification .mochaTitlebar {
311 opacity: 0;
314 .mocha.notification .mochaContentBorder {
315 border-width: 0px;
318 .mocha.notification .mochaContentWrapper {
319 background: transparent;
320 font-size: 12px;
321 font-weight: bold;
322 text-align: center;
325 /* Example Window Themes */
327 #about_contentWrapper {
328 background: #e5e5e5 url("../images/logo2.gif") 3px 3px no-repeat;
331 #builder_contentWrapper {
332 background: #f5f5f7;
335 #json01 .mochaTitlebar {
336 background: #6dd2db;
339 #json02 .mochaTitlebar {
340 background: #6db6db;
343 #json03 .mochaTitlebar {
344 background: #6d92db;
347 .jsonExample .mochaTitlebar h3 {
348 color: #ddd;
351 /* This does not work in IE6. */
352 .isFocused.jsonExample .mochaTitlebar h3 {
353 color: #fff;
356 #fxmorpherExample .mochaContentWrapper {
357 background: #577a9e;
360 #clock {
361 background: #fff;
364 /* Workaround to make invisible buttons clickable */
366 .mochaMinimizeButton.replaced,
367 .mochaMaximizeButton.replaced,
368 .mochaCloseButton.replaced {
369 background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
372 /* iOS iframe scrolling */
373 .windowFrame .mochaContentWrapper {
374 /* scroll the Window content. !important required. */
375 overflow: auto !important;
376 -webkit-overflow-scrolling: touch;
379 .windowFrame .mochaContent {
380 height: 100%;
383 .windowFrame iframe {
384 /* fix double scroll bar by reducing frame height. !important required. */
385 height: calc(100% - 5px) !important;