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