X-Git-Url: https://jfr.im/git/irc/unrealircd/unrealircd-webpanel.git/blobdiff_plain/ef866d8c9503c717e53173655402b3769d529fec..7b1ba98c09418793d2bc46857b36ed27bc82f936:/css/unrealircd-admin.css

diff --git a/css/unrealircd-admin.css b/css/unrealircd-admin.css
index 899e027..d80b89e 100644
--- a/css/unrealircd-admin.css
+++ b/css/unrealircd-admin.css
@@ -1,19 +1,128 @@
 .unrealircd_overview {
     font-family: arial, sans-serif;
     border-collapse: collapse;
-    border-radius: 15px;
+    border-radius: 7px;
     width: 25%;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
+.tkl_add_boxheader {
+    font-weight: bold;
+    background-color: #4B86EE;
+    width: 24%;
+    color: white;
+    margin-top: 20px;
+    border: 10px solid #4B86EE;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.align_right {
+    width: 10px;
+    text-align: right;
+}
 
+.tkl_add_form {
+    background-color: lightgray;
+    padding: 10px;
+    width: 24%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+    line-height: 30px;
+}
+
+.tkl_add_form_contents {
+    margin-left: auto; 
+    margin-right: 0;
+}
 .users_overview {
     font-family: arial, sans-serif;
     border-collapse: collapse;
-    border-radius: 15px;
+    border-radius: 7px;
     width: 100%;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
+.input_text {
+    border-radius: 7px;
+}
+select {
+    border-radius: 7px;
+}
 
+a {
+    color: white;
+    text-decoration: none;
+}
+
+.thuf {
+    border-bottom-left-radius: 10px;
+}
+
+.thuffer {
+    border-bottom-right-radius: 10px;
+}
+.filter-fields {
+    height: 30px;
+    width: 400px;
+    padding: 5px 5px;
+    margin: 8px 0;
+    border-radius: 7px;
+}
+
+.secure-connection {
+    color: darkgreen;
+    border: 3px solid darkgreen;
+    background-color: rgba(0, 255, 0, 0.1);
+}
+
+.operclass-label {
+    color:brown;
+    border: 3px solid brown;
+    background-color: rgba(255, 166, 0, 0.247);
+}
+.bluelabel {
+    color: blue;
+    border: 3px solid darkblue;
+    background-color: rgba(131, 78, 255, 0.295);
+}
+.redlabel {
+    color: darkred;
+    border: 3px solid darkred;
+    background-color: rgba(255, 78, 78, 0.295);
+}
+
+.align_label {
+    width: 80px;
+    display: inline-block;
+    text-align: right;
+}
+
+.align_right_button_tkl_add {
+    width: 400px;
+    display: inline-block;
+    text-align: right;
+}
+
+.label {
+    white-space: nowrap;
+    font-family: 'Heebo', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 500;
+    letter-spacing: 0.025rem;
+    font-style: normal;
+    text-transform: uppercase;
+    border-radius: 7px;
+    -webkit-border-radius: 1rem;
+    -moz-border-radius: 1rem;
+    padding: 0.20rem 0.50rem;
+    border-style: solid;
+    
+    }
+textarea {
+    height: 30px;
+    width: 400px;
+    padding: 5px 5px;
+    margin: 8px 0;
+    border-radius: 7px;
+  }
 table {
     border-collapse: collapse;
     margin: 25px 0;
@@ -62,6 +171,30 @@ 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;
@@ -73,6 +206,7 @@ tr:nth-child(odd) {
     text-align: center;
 }
 
+
 .footer a {
     color: #4B86EE;
 }
@@ -165,6 +299,7 @@ tr:nth-child(odd) {
 #headerContainer h2 small {
     color: white !important;
     margin-bottom: 0px;
+
 }
 
 #headerContainer h2 small {
@@ -195,6 +330,206 @@ tr:nth-child(odd) {
     color: #bbb;
 }
 
+
 body {
     background-image: url("/img/linen.png");
-}
\ No newline at end of file
+    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: 7px;
+    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;
+}
+
+.cute_button2 {
+    align-items: center;
+    appearance: none;
+    height: 27px;
+    background-color: green;
+    border-radius: 7px;
+    font-weight: bold;
+    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;
+    justify-content: center;
+    line-height: 1.5;
+    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;
+    white-space: nowrap;
+}
+
+.cute_button2:active,
+.cute_button2:focus {
+    outline: none;
+}
+
+.cute_button2:hover {
+    background-position: -20px -20px;
+    background-color: #353c47;
+}
+
+.cute_button2: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 {
+    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;
+}
+
+
+.checkbox-dropdown {
+    width: 200px;
+    border: 1px solid #aaa;
+    padding: 10px;
+    position: relative;
+    margin: 0 auto;
+    
+    user-select: first;
+}
+
+/* Display CSS arrow to the right of the dropdown text */
+.checkbox-dropdown:after {
+    content:'';
+    height: 0;
+    position: absolute;
+    width: 0;
+    border: 6px solid transparent;
+    border-top-color: #000;
+    top: 50%;
+    right: 10px;
+    margin-top: -3px;
+}
+
+/* Reverse the CSS arrow when the dropdown is active */
+.checkbox-dropdown.is-active:after {
+    border-bottom-color: #000;
+    border-top-color: #fff;
+    margin-top: -9px;
+}
+
+.checkbox-dropdown-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 100%; /* align the dropdown right below the dropdown text */
+    border: inherit;
+    border-top: none;
+    left: -1px; /* align the dropdown to the left */
+    right: -1px; /* align the dropdown to the right */
+    opacity: 0; /* hide the dropdown */
+   
+    transition: opacity 0.4s ease-in-out;
+    height: 100px;
+    overflow: scroll;
+    overflow-x: hidden;
+    pointer-events: none; /* avoid mouse click events inside the dropdown */
+}
+.is-active .checkbox-dropdown-list {
+    opacity: 1; /* display the dropdown */
+    pointer-events: auto; /* make sure that the user still can select checkboxes */
+}
+
+.checkbox-dropdown-list li label {
+    display: block;
+    border-bottom: 1px solid silver;
+    padding: 10px;
+   
+    transition: all 0.2s ease-out;
+}
+
+.checkbox-dropdown-list li label:hover {
+    background-color: #555;
+    color: white;
+}