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

180)         display: block;

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

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

487) 

488) span.buttonset input[type="radio"] {
489)     position: absolute;
490)     display: none;
491) }

492) 

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