css/unrealircd-admin.css

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