css/unrealircd-admin.css

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