Works on some more

[irc/unrealircd/unrealircd-webpanel.git] / css / unrealircd-admin.css

diff --git a/css/unrealircd-admin.css b/css/unrealircd-admin.css
index 5aa44b65aa3b6e5d00b16e99ac73daf98b342ab9..fdddcd9ca7393544ba54aa4547394ab0317e7842 100644 (file)
--- a/css/unrealircd-admin.css
+++ b/css/unrealircd-admin.css
@@ -3,21 +3,108 @@
     border-collapse: collapse;
     border-radius: 15px;
     width: 25%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+.users_overview {
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    border-radius: 15px;
+    width: 100%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+a {
+    color: white;
+    text-decoration: none;
+}
+
+table {
+    border-collapse: collapse;
+    margin: 25px 0;
+    font-size: 0.9em;
+    font-family: sans-serif;
+    min-width: 400px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+td {
+    text-align: left;
+    padding: 8px;
 }
 
-td,
 th {
-    border: 1px solid #000;
     text-align: left;
     padding: 8px;
+    background-color: #4B86EE;
+    color: white;
+}
+
+th:first-of-type {
+    border-top-left-radius: 10px;
+    color: white;
+}
+
+th:last-of-type {
+    border-top-right-radius: 10px;
+    color: white;
+}
+
+tr:last-of-type td:first-of-type {
+    border-bottom-left-radius: 10px;
+
+}
+
+tr:last-of-type td:last-of-type {
+    border-bottom-right-radius: 10px;
 }
 
 tr:nth-child(even) {
     background-color: #bec8d3;
 }
 
-* {
+tr:nth-child(odd) {
+    background-color: whitesmoke;
+}
+
+html {
+    height: 100%;
+    /* for the page to take full window height */
     box-sizing: border-box;
+
+    /* to have the footer displayed at the bottom of the page without scrolling */
+    font-family: arial, sans-serif;
+
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+    /* enable the "border-box effect" everywhere */
+}
+
+.body-for-sticky {
+    position: relative;
+    /* for the footer to move with the page size */
+    min-height: 100%;
+    /* for the footer to be at the bottom */
+}
+
+.footer {
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #333;
+    color: white;
+    text-align: center;
+}
+
+
+.footer a {
+    color: #4B86EE;
 }
 
 .row {
@@ -32,6 +119,8 @@ tr:nth-child(even) {
 .topnav {
     background-color: #333;
     overflow: hidden;
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+
 }
 
 /* Style the links inside the navigation bar */
@@ -52,7 +141,7 @@ tr:nth-child(even) {
 
 /* Add a color to the active/current link */
 .topnav a.active {
-    background-color: #4e50c2;
+    background-color: #4B86EE;
     color: white;
 }
 
@@ -71,4 +160,164 @@ tr:nth-child(even) {
 
 .tab:hover {
     background-color: #AAA;
+}
+
+#headerContainer,
+#headerTitle {
+    background-color: #4B86EE;
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    height: 62px;
+    margin-top: -10px;
+    padding: 10px 25px;
+    position: relative;
+}
+
+#headerContainer {
+    margin-left: -15px;
+    z-index: 10;
+
+    -webkit-box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2);
+}
+
+#headerContainer:before {
+    border-color: #034FD5 transparent;
+    border-style: solid;
+    border-width: 1em 0 0 1em;
+    bottom: -1em;
+    content: '';
+    display: block;
+    left: 0;
+    position: absolute;
+}
+
+#headerContainer h2,
+#headerContainer h2 small {
+    color: white !important;
+    margin-bottom: 0px;
+
+}
+
+#headerContainer h2 small {
+    font-weight: lighter;
+}
+
+#headerTitle {
+    background-color: white;
+    margin-right: 15px;
+    z-index: 9;
+}
+
+#headerTitle h2 {
+    line-height: 1.5;
+    margin-bottom: 0px;
+}
+
+#headerTitle h2 i {
+    color: #f2f2f2;
+    font-size: 80px;
+    position: absolute;
+    right: 0;
+    top: -30px;
+    z-index: -1;
+}
+
+#headerTitle h2 small {
+    color: #bbb;
+}
+
+
+body {
+    background-image: url("/img/linen.png");
+    display: flex;
+    flex-direction: column;
+}
+
+/* CSS */
+.cute_button {
+    align-items: center;
+    appearance: none;
+    background-color: #4B86EE;
+    background-size: calc(100% + 20px) calc(100% + 20px);
+    border-radius: 100px;
+    border-width: 0;
+    box-shadow: none;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: CircularStd, sans-serif;
+    font-size: 1rem;
+    height: auto;
+    justify-content: center;
+    line-height: 1.5;
+    padding: 6px 20px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color .2s, background-position .2s;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    vertical-align: top;
+    white-space: nowrap;
+}
+
+.cute_button:active,
+.cute_button:focus {
+    outline: none;
+}
+
+.cute_button:hover {
+    background-position: -20px -20px;
+    background-color: #034FD5;
+}
+
+.cute_button:focus:not(:active) {
+    box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
+}
+
+.alert {
+    padding: 10px;
+    background-color: #b62c22;
+    /* Red */
+    color: white;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    border-radius: 7px;
+    width: 100%;
+}
+
+.success {
+    padding: 10px;
+    background-color: #208120;
+    /* Red */
+    color: white;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    border-radius: 7px;
+    width: 100%;
+}
+
+.information-bar {
+    padding: 10px;
+    background-color: #245788;
+    /* Red */
+    color: white;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    border-radius: 7px;
+    width: 100%;
+}
+
+/* The close button */
+.closebtn {
+    margin-left: 15px;
+    color: white;
+    font-weight: bold;
+    float: right;
+    font-size: 22px;
+    line-height: 20px;
+    cursor: pointer;
+    transition: 0.3s;
 }
\ No newline at end of file