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