css/unrealircd-admin.css

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