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