webinterface.git

1) /*
2)  * -------------------------------------------------------------------------------
3)  * This file belongs to the Webinterface of schokokeks.org Hosting
4)  * 

5)  * Written by schokokeks.org Hosting, namely

6)  *    Bernd Wurst <bernd@schokokeks.org>
7)  *    Hanno Böck <hanno@schokokeks.org>
8)  *

9)  * This code is published under a 0BSD license.

10)  *
11)  * Nevertheless, in case you use a significant part of this code, we ask (but 
12)  * not require, see the license) that you keep the authors' names in place and 
13)  * return your changes to the public. We would be especially happy if you tell 
14)  * us what you're going to do with this code.
15)  * -------------------------------------------------------------------------------
16)  */
17) 
18) html {
19)         font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
20)         font-size: 14px;
21)         color: #000000;
22)         background-color: #fff;
23) }
24) 
25) 
26) body {
27)         font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, Helvetica, sans-serif;
28)         font-size: 14px;
29)         color: #000000;
30)         background-color: #fff;
31) }
32) 
33) 
34) div.error {
35)         color: #FF0000;
36)         border: 2px solid #000000;
37)         background-color: #FFFFFF;
38)         margin: 10px;
39)         padding: 10px;
40) }
41) 
42) div.success {
43)         color: #282;
44)         border: 2px solid #282;
45)         background-color: #FFFFFF;
46)         margin: 5px;
47)         padding: 5px;
48)         font-weight: bold;
49) }
50) 

51) div.warning {

52)     color: #EE7300;
53)     border: 2px solid #EE7300;

54)     border-radius: 1em;
55)     background-color: #FFEBCC;
56)     margin: 10px;
57)     padding: 10px;
58) }
59) 
60) div.warning li:before {
61)     content: "⚠";
62)     font-size: 200%;
63)     font-weight: bold;

64)     float: left;
65)     margin-left: -1.5em;

66) }
67) div.warning ul {
68)     padding: 0 1em;
69) }
70) 
71) div.warning li {
72)     font-weight: bold;
73)     list-style-type: none;
74)     padding-left: 3em;
75) }
76) 

77) p.warning {
78)         padding: 4px;
79)         color: #000000;
80)         border: 1px solid #FF0000;
81)         background-color: #FFFFFF;
82) }
83) 
84) span.warning {
85) 	color:#FF0000;
86) }
87) 
88) a img {
89)   border: 0px;
90) }
91) 
92) p.admininfo {
93)   margin: 3px;
94)   margin-bottom: 1.5em;
95)   padding: 0.5em;
96)   border: 1px solid red;
97)   background-color: #fdd;
98) }
99) 
100) p.addnew,p.delete {
101)   margin-top: 1.5em;
102)   margin-bottom: 2em;
103) }
104) 
105) p.addnew a {
106)   color: #257f00;
107)   font-size: 110%;
108)   font-weight: bold;
109)   padding: 5px;
110)   min-height: 18px;
111)   padding-left: 25px;
112)   background-image: url('../../images/add.png');
113)   background-position: 0 5px;
114)   background-repeat: no-repeat;
115) }
116) 
117) p.addnew a:hover {
118)   text-decoration: none;
119)   padding-bottom: 0;
120)   border-bottom: 2px solid #257f00;
121) }
122) 

123) p.addnew a.grey {
124)     color: #555;
125) }

126) 
127) p.delete a {
128)   color: #b22;
129)   font-size: 110%;
130)   font-weight: bold;
131)   padding: 5px;
132)   min-height: 18px;
133)   padding-left: 25px;
134)   background-image: url('../../images/delete.png');
135)   background-position: 0 5px;
136)   background-repeat: no-repeat;
137) }
138) 
139) p.delete a:hover {
140)   text-decoration: none;
141)   padding-bottom: 0;
142)   border-bottom: 2px solid #b22;
143) }
144) 
145) 
146) p.userinfo {
147)   margin: 3px;
148)   margin-top: 1.5em;
149)   margin-bottom: 1.5em;
150)   padding: 0.5em;
151)   border: 1px solid black;
152)   background-color: #b2c2cb;
153)   /*padding-left: 40px;
154)   background-image: url('../images/user.png');
155)   background-position: left;
156)   background-repeat: no-repeat;
157)   background-position: 0.5em 0.5em;*/
158)   min-height: 36px;
159) }
160) 
161) input.usageoption {
162) 	margin-top: 1em;
163) }
164) 
165) div.confirmation {
166) }
167) 
168) div.confirmation div.question {
169)         padding: 10px;
170)         color: #000000;
171)         border: 1px solid #FF0000;
172)         background-color: #FFFFFF;
173)         font-weight: bold;
174)         margin-bottom: 1em;
175) }
176) 
177) div.confirmation p.buttons input {
178)         width: 10em;
179) }
180) 
181) 
182) .login_label {

183)         display: block;

184) }
185) 
186) input[type=text],input[type=password],textarea,select {
187)         border: 1px solid black;
188)         padding: 3px;
189)         background-color: #FFFFFF;
190)         }
191) 
192) input[type=text]:focus,input[type=password]:focus,textarea:focus {
193)         border: 1px solid red;
194)         background-color: #FFFFFF;
195)         }
196) 
197) 
198) div.vhostsidebyside {
199)   max-width: 55em;
200) }
201) 
202) div.vhostoptions {
203)   margin: 0;
204)   padding: 0;
205)   margin-left: 1em;
206)   float: right;
207)   width: 30em;
208)   /*margin-left: 2em; position: absolute; left: 45em; */
209) }
210) 
211) 
212) a.logo img {
213)     position: absolute;
214)     top: 5px;
215)     left: 5px;
216) }
217) 
218) div.sidebar {
219)         padding-top: 160px;
220)         width: 190px;
221)         float: left;
222) 
223) }
224) 
225) div.menu img {
226)   margin-bottom: 1em;
227) }
228) 
229) a.menuitem {
230)   font-weight: normal;
231)         display: block;
232)         padding: 4px;
233)         margin: 3px;
234)         text-decoration: none;
235)         color: #000000;
236) }
237) 
238) a.submenuitem {
239)   margin-left: 2em;
240) }
241) 
242) a.active {
243)   text-decoration: underline;
244)   font-weight: bold;
245)   color: #425d6c;
246) }
247) 
248) a.menuitem:hover {
249)   text-decoration: underline;
250)   color: #425d6c;
251) }
252) 
253) a.menuicon {
254)     display: none;
255) }
256) 
257) 
258) div#beta {
259)   clear: both;
260)         padding: 4px;
261)         color: #000000;
262)         border: 1px solid #FF0000;
263)         background-color: #FFFFFF;
264)         margin-bottom: 1em;
265) }
266) 
267) div#beta p {
268)   padding: 0;
269)   margin: 0;
270)   margin-top: 0.3em;
271) }
272) 
273) div#beta h3 {
274)   padding: 0;
275)   margin: 0;
276) }
277) 
278) div.vmail-forward {
279)   width: 40em;
280)   border: 1px solid black;
281)   padding: 0.5em;
282)   margin-bottom: 0.5em;
283)   display: table;
284) }
285) div.vmail-forward p {
286)   display: block;
287)   margin: 0;
288)   margin-bottom: 0.5em;
289)   padding: 0;
290) }
291) 
292) div.vmail-forward input {
293)   width: 20em;
294) }
295) 
296) div.content {
297)         margin-left: 200px;
298)         padding-left: 40px;
299)         /*border-left: 1px solid #000000;*/
300) }
301) /*        overflow: hidden; */
302) 
303) div.vmailoverview {
304) }
305) 
306) .overview {
307)   margin: 2em;
308)   overflow: auto;
309)   width: 100%;
310)   max-width: 50em;
311) }
312) .overview div.block {
313)   float: left;
314)   margin: 1em;
315)   padding: 1em;
316)   /*background-color: #b2c2cb;*/
317)   width: 10em;
318)   min-height: 7em;
319)   text-align: center;
320)   background-color: #eee;
321) }
322) 
323) .overview div.block img {
324)   display: block;
325)   margin: 0 auto;
326)   margin-bottom: 1em;
327)   height: 16px;
328) }
329) 
330) /*
331) .overview div.block a {
332)   color: #000;
333) }
334) */
335) 
336) div.foot {
337)   clear: both;
338)         border-top: 1px solid #425d6c;
339)   color: #425d6c;
340)         font-size: 90%;
341) }
342) 
343) h3 {
344)   color: #425d6c;
345)   margin-top: 2em;
346)   padding-bottom: 2px;
347)   border-bottom: 1px solid #425d6c;
348) }
349) 
350) h3.headline {
351)   margin-top: 0;
352) }
353) 
354) ul {
355)         margin-bottom: 10px;
356) }
357) 
358) table {
359)         border-collapse: collapse;
360) }
361) 
362) tr.odd td,
363) tr.even td {
364)   border: none;
365)   padding: 0.5em 0.5em;
366) }
367) 
368) tr.odd {
369)   background: #eee;
370) }
371) 
372) td {
373)         border: 1px solid black;
374)         padding: 0.5em;
375) }
376) 
377) td.number {
378)   text-align: right;
379) }
380) 
381) th {
382)   padding: 0px 1em;
383) }
384) 
385) 
386) dt {
387)   font-weight: bold;
388) }
389) 
390) 
391) a {
392)   text-decoration: none;
393)   /*font-weight: bold;*/
394)   color: #425d6c;
395) 
396) }
397) 
398) a:hover {
399)   text-decoration: underline;
400) }
401) 
402) div.freewvs {
403)   width: 80%; 
404)   padding: 0.5em; 
405)   margin-bottom: 0.5em; 
406) }
407) 
408) div.freewvs-ok {
409)   background-color: #bcfd8b; 
410)   border: 2px solid #3c8e00;
411) }
412) 
413) div.freewvs-vulnerable {
414)   background-color: #ff7070;
415)   border: 2px solid red;
416) }
417) 
418) div.freewvs img {
419)   float: right;
420)   margin: 1em;
421) }
422) 
423) div.freewvs p {
424)   margin: 0;
425)   padding: 0;
426) }
427) 
428) 
429) tr.unpaid td {
430)   padding-top: 1em;
431)   padding-bottom: 1em;
432)   font-weight: bold;
433)   background-color: #fdd;
434) }
435) 
436) .ui-button {
437)   border: 1px solid #425d6c;
438)   background-color: #fff;
439)   color: #000;
440) }
441) 
442) .ui-state-active,
443) .ui-widget-content .ui-state-active,
444) .ui-widget-header .ui-state-active {
445)   border: 1px solid #425d6c;
446)   background: #425d6c;
447)   color: #fff;
448) }
449) 
450) div.beta {
451)   color: #000;
452)   font-size: 110%;
453)   font-weight: bold;
454)   padding: 10px;
455)   border: 3px solid #ffb000;
456)   background-color: #fffee9;
457) }
458) div.beta h4 {
459)   color: #ffb000;
460)   padding-left: 26px;
461)   min-height: 18px;
462)   background-image: url('../../images/warning.png');
463)   background-position: 0 0;
464)   background-repeat: no-repeat;
465) }
466) 
467) div.tile-container {
468)     display: flex;
469)     flex-direction: row;
470)     flex-wrap: wrap;
471) }
472) 
473) .tile {
474)     width: 25em;
475)     border-left: 5px solid #0a0;
476)     background-color: #dfd;
477)     padding: 4px;
478)     margin: 10px;
479) }
480) 
481) 

482) span.buttonset input[type="radio"]+label {
483)     display: inline-block;
484)     /*width: 8em;*/
485)     border: 1px solid #425d6c;
486)     border-radius: 4px;
487)     background-color: #fff;
488)     padding: 5px 20px;
489) }

490) 

491) span.buttonset input[type="radio"] {
492)     position: absolute;
493)     display: none;
494) }

495) 

496) span.buttonset input[type="radio"]:checked+label {
497)     background-color: #425d6c;
498)     color: #fff;
499) }
500) 
501) span.buttonset.disabled {
502)     color: #444;
503)     background-color: #eee;
504) }
505) 
506) span.buttonset.disabled input[type="radio"]:checked+label {
507)     color: #eee;
508)     background-color: #777;
509) }