]>
Commit | Line | Data |
---|---|---|
709b97f3 | 1 | .unrealircd_overview { |
371aa651 VP |
2 | font-family: arial, sans-serif; |
3 | border-collapse: collapse; | |
4 | border-radius: 7px; | |
5 | width: 25%; | |
6 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
82f5bcbf | 7 | } |
5cc8ca4a VP |
8 | |
9 | .navbar-nav li> { | |
10 | border-radius: 4px; | |
11 | } | |
12 | .navbar-nav li>a:hover,.navbar-nav li.active { | |
13 | color: white; | |
14 | background-color: #4B86EE; | |
15 | border-radius: 4px; | |
16 | } | |
17 | .navbar-nav li>a:hover,.navbar-nav li>a:focus { | |
18 | color: white; | |
19 | background-color: #6ca0f8; | |
20 | border-radius: 4px; | |
21 | } | |
22 | ||
35ccb286 | 23 | .tkl_add_boxheader { |
5cc8ca4a | 24 | |
371aa651 VP |
25 | font-weight: bold; |
26 | background-color: #4B86EE; | |
27 | width: 24%; | |
28 | color: white; | |
29 | margin-top: 20px; | |
30 | border: 10px solid #4B86EE; | |
31 | border-top-left-radius: 10px; | |
32 | border-top-right-radius: 10px; | |
35ccb286 | 33 | } |
82f5bcbf | 34 | |
35ccb286 | 35 | .align_right { |
371aa651 VP |
36 | width: 10px; |
37 | text-align: right; | |
35ccb286 VP |
38 | } |
39 | ||
40 | .tkl_add_form { | |
371aa651 VP |
41 | background-color: lightgray; |
42 | padding: 10px; | |
43 | width: 24%; | |
44 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
45 | line-height: 30px; | |
35ccb286 VP |
46 | } |
47 | ||
48 | .tkl_add_form_contents { | |
371aa651 VP |
49 | margin-left: auto; |
50 | margin-right: 0; | |
35ccb286 | 51 | } |
ef866d8c | 52 | .users_overview { |
371aa651 VP |
53 | font-family: arial, sans-serif; |
54 | border-collapse: collapse; | |
55 | border-radius: 7px; | |
56 | width: 100%; | |
57 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
82f5bcbf | 58 | } |
35ccb286 | 59 | .input_text { |
371aa651 | 60 | border-radius: 7px; |
35ccb286 | 61 | } |
1d7e7ff8 | 62 | select { |
371aa651 | 63 | border-radius: 7px; |
1d7e7ff8 VP |
64 | } |
65 | ||
4d834e71 | 66 | .thuf { |
371aa651 | 67 | border-bottom-left-radius: 10px; |
4d834e71 VP |
68 | } |
69 | ||
70 | .thuffer { | |
371aa651 | 71 | border-bottom-right-radius: 10px; |
4d834e71 VP |
72 | } |
73 | .filter-fields { | |
371aa651 VP |
74 | height: 30px; |
75 | width: 400px; | |
76 | padding: 5px 5px; | |
77 | margin: 8px 0; | |
78 | border-radius: 7px; | |
4d834e71 VP |
79 | } |
80 | ||
1a28c5b0 | 81 | .secure-connection { |
371aa651 VP |
82 | color: darkgreen; |
83 | border: 3px solid darkgreen; | |
84 | background-color: rgba(0, 255, 0, 0.1); | |
d4a2999b VP |
85 | } |
86 | ||
87 | .operclass-label { | |
371aa651 VP |
88 | color:brown; |
89 | border: 3px solid brown; | |
90 | background-color: rgba(255, 166, 0, 0.247); | |
1a28c5b0 | 91 | } |
3f487ee1 | 92 | .bluelabel { |
371aa651 VP |
93 | color: blue; |
94 | border: 3px solid darkblue; | |
95 | background-color: rgba(131, 78, 255, 0.295); | |
3f487ee1 VP |
96 | } |
97 | .redlabel { | |
371aa651 VP |
98 | color: darkred; |
99 | border: 3px solid darkred; | |
100 | background-color: rgba(255, 78, 78, 0.295); | |
1a28c5b0 | 101 | } |
35ccb286 VP |
102 | |
103 | .align_label { | |
371aa651 VP |
104 | width: 80px; |
105 | display: inline-block; | |
106 | text-align: right; | |
35ccb286 VP |
107 | } |
108 | ||
109 | .align_right_button_tkl_add { | |
371aa651 VP |
110 | width: 400px; |
111 | display: inline-block; | |
112 | text-align: right; | |
35ccb286 VP |
113 | } |
114 | ||
1a28c5b0 | 115 | .label { |
371aa651 VP |
116 | white-space: nowrap; |
117 | font-family: 'Heebo', sans-serif; | |
118 | font-size: 0.65rem; | |
119 | font-weight: 500; | |
120 | letter-spacing: 0.025rem; | |
121 | font-style: normal; | |
122 | text-transform: uppercase; | |
123 | border-radius: 7px; | |
124 | -webkit-border-radius: 1rem; | |
125 | -moz-border-radius: 1rem; | |
126 | padding: 0.20rem 0.50rem; | |
127 | border-style: solid; | |
128 | ||
129 | } | |
1d7e7ff8 | 130 | textarea { |
371aa651 VP |
131 | height: 30px; |
132 | width: 400px; | |
133 | padding: 5px 5px; | |
134 | margin: 8px 0; | |
135 | border-radius: 7px; | |
1d7e7ff8 | 136 | } |
82f5bcbf | 137 | table { |
371aa651 VP |
138 | border-collapse: collapse; |
139 | margin: 25px 0; | |
140 | font-size: 0.9em; | |
141 | font-family: sans-serif; | |
142 | min-width: 400px; | |
143 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); | |
709b97f3 VP |
144 | } |
145 | ||
ef866d8c | 146 | td { |
371aa651 VP |
147 | text-align: left; |
148 | padding: 8px; | |
ef866d8c VP |
149 | } |
150 | ||
709b97f3 | 151 | th { |
371aa651 VP |
152 | text-align: left; |
153 | padding: 8px; | |
154 | background-color: #4B86EE; | |
155 | color: white; | |
709b97f3 VP |
156 | } |
157 | ||
82f5bcbf | 158 | th:first-of-type { |
371aa651 VP |
159 | border-top-left-radius: 10px; |
160 | color: white; | |
82f5bcbf VP |
161 | } |
162 | ||
163 | th:last-of-type { | |
371aa651 VP |
164 | border-top-right-radius: 10px; |
165 | color: white; | |
82f5bcbf VP |
166 | } |
167 | ||
168 | tr:last-of-type td:first-of-type { | |
371aa651 | 169 | border-bottom-left-radius: 10px; |
82f5bcbf VP |
170 | |
171 | } | |
172 | ||
173 | tr:last-of-type td:last-of-type { | |
371aa651 | 174 | border-bottom-right-radius: 10px; |
82f5bcbf VP |
175 | } |
176 | ||
709b97f3 | 177 | tr:nth-child(even) { |
371aa651 | 178 | background-color: #bec8d3; |
709b97f3 VP |
179 | } |
180 | ||
82f5bcbf | 181 | tr:nth-child(odd) { |
371aa651 | 182 | background-color: whitesmoke; |
709b97f3 VP |
183 | } |
184 | ||
26971737 | 185 | html { |
371aa651 VP |
186 | height: 100%; |
187 | /* for the page to take full window height */ | |
188 | box-sizing: border-box; | |
26971737 | 189 | |
371aa651 VP |
190 | /* to have the footer displayed at the bottom of the page without scrolling */ |
191 | font-family: arial, sans-serif; | |
26971737 VP |
192 | |
193 | } | |
194 | ||
195 | *, | |
196 | *:before, | |
197 | *:after { | |
371aa651 VP |
198 | box-sizing: inherit; |
199 | /* enable the "border-box effect" everywhere */ | |
26971737 VP |
200 | } |
201 | ||
202 | .body-for-sticky { | |
371aa651 VP |
203 | position: relative; |
204 | /* for the footer to move with the page size */ | |
205 | min-height: 100%; | |
206 | /* for the footer to be at the bottom */ | |
26971737 VP |
207 | } |
208 | ||
ef866d8c | 209 | .footer { |
371aa651 VP |
210 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; |
211 | position: fixed; | |
212 | left: 0; | |
213 | bottom: 0; | |
214 | width: 100%; | |
215 | background-color: #333; | |
216 | color: white; | |
217 | text-align: center; | |
ef866d8c VP |
218 | } |
219 | ||
26971737 | 220 | |
ef866d8c | 221 | .footer a { |
371aa651 | 222 | color: #4B86EE; |
ef866d8c | 223 | } |
82f5bcbf | 224 | |
709b97f3 | 225 | .row { |
371aa651 | 226 | display: flex; |
709b97f3 VP |
227 | } |
228 | ||
229 | .column { | |
371aa651 VP |
230 | flex: 50%; |
231 | padding: 5px; | |
709b97f3 VP |
232 | } |
233 | ||
234 | .topnav { | |
371aa651 VP |
235 | background-color: #333; |
236 | overflow: hidden; | |
237 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
c8ac611d | 238 | |
709b97f3 VP |
239 | } |
240 | ||
241 | /* Style the links inside the navigation bar */ | |
242 | .topnav a { | |
371aa651 VP |
243 | float: left; |
244 | color: #f2f2f2; | |
245 | text-align: center; | |
246 | padding: 14px 16px; | |
247 | text-decoration: none; | |
248 | font-size: 17px; | |
709b97f3 VP |
249 | } |
250 | ||
251 | /* Change the color of links on hover */ | |
252 | .topnav a:hover { | |
371aa651 VP |
253 | background-color: #ddd; |
254 | color: black; | |
709b97f3 VP |
255 | } |
256 | ||
257 | /* Add a color to the active/current link */ | |
258 | .topnav a.active { | |
371aa651 VP |
259 | background-color: #4B86EE; |
260 | color: white; | |
709b97f3 VP |
261 | } |
262 | ||
263 | ||
264 | [data-tab-content] { | |
371aa651 | 265 | display: none; |
709b97f3 VP |
266 | } |
267 | ||
268 | .active[data-tab-content] { | |
371aa651 | 269 | display: block; |
709b97f3 VP |
270 | } |
271 | ||
272 | .tab.active { | |
371aa651 | 273 | background-color: #AAA; |
709b97f3 VP |
274 | } |
275 | ||
276 | .tab:hover { | |
371aa651 | 277 | background-color: #AAA; |
82f5bcbf VP |
278 | } |
279 | ||
280 | #headerContainer, | |
281 | #headerTitle { | |
371aa651 VP |
282 | background-color: #4B86EE; |
283 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
284 | height: 62px; | |
285 | margin-top: -10px; | |
286 | padding: 10px 25px; | |
287 | position: relative; | |
82f5bcbf VP |
288 | } |
289 | ||
290 | #headerContainer { | |
371aa651 VP |
291 | margin-left: -15px; |
292 | z-index: 10; | |
82f5bcbf | 293 | |
371aa651 VP |
294 | -webkit-box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2); |
295 | box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2); | |
82f5bcbf VP |
296 | } |
297 | ||
298 | #headerContainer:before { | |
371aa651 VP |
299 | border-color: #034FD5 transparent; |
300 | border-style: solid; | |
301 | border-width: 1em 0 0 1em; | |
302 | bottom: -1em; | |
303 | content: ''; | |
304 | display: block; | |
305 | left: 0; | |
306 | position: absolute; | |
82f5bcbf VP |
307 | } |
308 | ||
309 | #headerContainer h2, | |
310 | #headerContainer h2 small { | |
371aa651 VP |
311 | color: white !important; |
312 | margin-bottom: 0px; | |
26971737 | 313 | |
82f5bcbf VP |
314 | } |
315 | ||
316 | #headerContainer h2 small { | |
371aa651 | 317 | font-weight: lighter; |
82f5bcbf VP |
318 | } |
319 | ||
320 | #headerTitle { | |
371aa651 VP |
321 | background-color: white; |
322 | margin-right: 15px; | |
323 | z-index: 9; | |
82f5bcbf VP |
324 | } |
325 | ||
326 | #headerTitle h2 { | |
371aa651 VP |
327 | line-height: 1.5; |
328 | margin-bottom: 0px; | |
82f5bcbf VP |
329 | } |
330 | ||
331 | #headerTitle h2 i { | |
371aa651 VP |
332 | color: #f2f2f2; |
333 | font-size: 80px; | |
334 | position: absolute; | |
335 | right: 0; | |
336 | top: -30px; | |
337 | z-index: -1; | |
82f5bcbf VP |
338 | } |
339 | ||
340 | #headerTitle h2 small { | |
371aa651 | 341 | color: #bbb; |
82f5bcbf VP |
342 | } |
343 | ||
26971737 | 344 | |
82f5bcbf | 345 | body { |
911a6472 | 346 | padding-top: 45px; |
371aa651 VP |
347 | background-image: url("/img/linen.png"); |
348 | display: flex; | |
349 | flex-direction: column; | |
76200e36 VP |
350 | } |
351 | ||
911a6472 | 352 | @media screen and (max-width: 768px) { |
5cc8ca4a | 353 | body { padding-top: 0px; } |
911a6472 BM |
354 | } |
355 | ||
76200e36 VP |
356 | /* CSS */ |
357 | .cute_button { | |
371aa651 VP |
358 | align-items: center; |
359 | appearance: none; | |
360 | background-color: #4B86EE; | |
361 | background-size: calc(100% + 20px) calc(100% + 20px); | |
362 | border-radius: 7px; | |
363 | border-width: 0; | |
364 | box-shadow: none; | |
365 | box-sizing: border-box; | |
366 | color: #FFFFFF; | |
367 | cursor: pointer; | |
368 | display: inline-flex; | |
369 | font-family: CircularStd, sans-serif; | |
370 | font-size: 1rem; | |
371 | height: auto; | |
372 | justify-content: center; | |
373 | line-height: 1.5; | |
374 | padding: 6px 20px; | |
375 | position: relative; | |
376 | text-align: center; | |
377 | text-decoration: none; | |
378 | transition: background-color .2s, background-position .2s; | |
379 | user-select: none; | |
380 | -webkit-user-select: none; | |
381 | touch-action: manipulation; | |
382 | vertical-align: top; | |
383 | white-space: nowrap; | |
76200e36 VP |
384 | } |
385 | ||
26971737 VP |
386 | .cute_button:active, |
387 | .cute_button:focus { | |
371aa651 | 388 | outline: none; |
76200e36 VP |
389 | } |
390 | ||
26971737 | 391 | .cute_button:hover { |
371aa651 VP |
392 | background-position: -20px -20px; |
393 | background-color: #034FD5; | |
76200e36 VP |
394 | } |
395 | ||
26971737 | 396 | .cute_button:focus:not(:active) { |
371aa651 | 397 | box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em; |
26971737 VP |
398 | } |
399 | ||
4d834e71 | 400 | .cute_button2 { |
371aa651 VP |
401 | align-items: center; |
402 | appearance: none; | |
403 | height: 27px; | |
404 | background-color: green; | |
405 | border-radius: 7px; | |
406 | font-weight: bold; | |
407 | border-width: 0; | |
408 | box-shadow: none; | |
409 | box-sizing: border-box; | |
410 | color: #FFFFFF; | |
411 | cursor: pointer; | |
412 | display: inline-flex; | |
413 | font-family: CircularStd, sans-serif; | |
414 | font-size: 1rem; | |
415 | justify-content: center; | |
416 | line-height: 1.5; | |
417 | position: relative; | |
418 | text-align: center; | |
419 | text-decoration: none; | |
420 | transition: background-color .2s, background-position .2s; | |
421 | user-select: none; | |
422 | -webkit-user-select: none; | |
423 | touch-action: manipulation; | |
424 | white-space: nowrap; | |
4d834e71 VP |
425 | } |
426 | ||
427 | .cute_button2:active, | |
428 | .cute_button2:focus { | |
371aa651 | 429 | outline: none; |
4d834e71 VP |
430 | } |
431 | ||
432 | .cute_button2:hover { | |
371aa651 VP |
433 | background-position: -20px -20px; |
434 | background-color: #353c47; | |
4d834e71 VP |
435 | } |
436 | ||
437 | .cute_button2:focus:not(:active) { | |
371aa651 | 438 | box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em; |
4d834e71 VP |
439 | } |
440 | ||
26971737 | 441 | .alert { |
371aa651 VP |
442 | padding: 10px; |
443 | background-color: #b62c22; | |
444 | /* Red */ | |
445 | color: white; | |
446 | margin-bottom: 15px; | |
447 | margin-top: 15px; | |
448 | border-radius: 7px; | |
449 | width: 100%; | |
26971737 VP |
450 | } |
451 | ||
452 | .success { | |
371aa651 VP |
453 | padding: 10px; |
454 | background-color: #208120; | |
455 | /* Red */ | |
456 | color: white; | |
457 | margin-bottom: 15px; | |
458 | margin-top: 15px; | |
459 | border-radius: 7px; | |
460 | width: 100%; | |
26971737 VP |
461 | } |
462 | ||
3f487ee1 | 463 | .information { |
371aa651 VP |
464 | padding: 10px; |
465 | background-color: #245788; | |
466 | /* Red */ | |
467 | color: white; | |
468 | margin-bottom: 15px; | |
469 | margin-top: 15px; | |
470 | border-radius: 7px; | |
471 | width: 100%; | |
26971737 VP |
472 | } |
473 | ||
474 | /* The close button */ | |
475 | .closebtn { | |
371aa651 VP |
476 | margin-left: 15px; |
477 | color: white; | |
478 | font-weight: bold; | |
479 | float: right; | |
480 | font-size: 22px; | |
481 | line-height: 20px; | |
482 | cursor: pointer; | |
483 | transition: 0.3s; | |
2fba9a82 VP |
484 | } |
485 | ||
486 | ||
487 | .checkbox-dropdown { | |
371aa651 VP |
488 | width: 200px; |
489 | border: 1px solid #aaa; | |
490 | padding: 10px; | |
491 | position: relative; | |
492 | margin: 0 auto; | |
493 | ||
494 | user-select: first; | |
2fba9a82 VP |
495 | } |
496 | ||
497 | /* Display CSS arrow to the right of the dropdown text */ | |
498 | .checkbox-dropdown:after { | |
371aa651 VP |
499 | content:''; |
500 | height: 0; | |
501 | position: absolute; | |
502 | width: 0; | |
503 | border: 6px solid transparent; | |
504 | border-top-color: #000; | |
505 | top: 50%; | |
506 | right: 10px; | |
507 | margin-top: -3px; | |
2fba9a82 VP |
508 | } |
509 | ||
510 | /* Reverse the CSS arrow when the dropdown is active */ | |
511 | .checkbox-dropdown.is-active:after { | |
371aa651 VP |
512 | border-bottom-color: #000; |
513 | border-top-color: #fff; | |
514 | margin-top: -9px; | |
2fba9a82 VP |
515 | } |
516 | ||
517 | .checkbox-dropdown-list { | |
371aa651 VP |
518 | list-style: none; |
519 | margin: 0; | |
520 | padding: 0; | |
521 | position: absolute; | |
522 | top: 100%; /* align the dropdown right below the dropdown text */ | |
523 | border: inherit; | |
524 | border-top: none; | |
525 | left: -1px; /* align the dropdown to the left */ | |
526 | right: -1px; /* align the dropdown to the right */ | |
527 | opacity: 0; /* hide the dropdown */ | |
2fba9a82 | 528 | |
371aa651 VP |
529 | transition: opacity 0.4s ease-in-out; |
530 | height: 100px; | |
531 | overflow: scroll; | |
532 | overflow-x: hidden; | |
533 | pointer-events: none; /* avoid mouse click events inside the dropdown */ | |
2fba9a82 VP |
534 | } |
535 | .is-active .checkbox-dropdown-list { | |
371aa651 VP |
536 | opacity: 1; /* display the dropdown */ |
537 | pointer-events: auto; /* make sure that the user still can select checkboxes */ | |
2fba9a82 VP |
538 | } |
539 | ||
540 | .checkbox-dropdown-list li label { | |
371aa651 VP |
541 | display: block; |
542 | border-bottom: 1px solid silver; | |
543 | padding: 10px; | |
2fba9a82 | 544 | |
371aa651 | 545 | transition: all 0.2s ease-out; |
2fba9a82 VP |
546 | } |
547 | ||
548 | .checkbox-dropdown-list li label:hover { | |
371aa651 VP |
549 | background-color: #555; |
550 | color: white; | |
2fba9a82 | 551 | } |