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