X-Git-Url: https://jfr.im/git/irc/unrealircd/unrealircd-webpanel.git/blobdiff_plain/911a64720683d31ac1c33f4834199425efce05e0..180b8ec1d4d2b3d4e930f57b9850348159510b27:/css/unrealircd-admin.css diff --git a/css/unrealircd-admin.css b/css/unrealircd-admin.css index 1a77ee2..cc4e550 100644 --- a/css/unrealircd-admin.css +++ b/css/unrealircd-admin.css @@ -5,55 +5,31 @@ 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%; +.badge-pill { 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: 7px; - width: 100%; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); -} -.input_text { +.curvy { border-radius: 7px; + margin: 2px; } -select { - border-radius: 7px; + + +.short-form-control { + width: 70%; } -.thuf { - border-bottom-left-radius: 10px; + +.align_right { + width: 10px; + text-align: right; } -.thuffer { - border-bottom-right-radius: 10px; +.input_text { + border-radius: 7px; } + .filter-fields { height: 30px; width: 400px; @@ -62,27 +38,6 @@ select { 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; @@ -90,130 +45,16 @@ select { 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; - 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; -} - -th { - 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 */ +body { + padding-bottom: 120px; } - -.footer { +footer { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - position: fixed; - left: 0; + position: absolute; bottom: 0; width: 100%; - background-color: #333; - color: white; - text-align: center; -} - - -.footer a { - color: #4B86EE; -} - -.row { - display: flex; -} - -.column { - flex: 50%; - padding: 5px; -} + height: 55px; + } .topnav { background-color: #333; @@ -232,233 +73,22 @@ html { font-size: 17px; } -/* Change the color of links on hover */ -.topnav a:hover { - background-color: #ddd; - color: black; -} - -/* Add a color to the active/current link */ -.topnav a.active { - background-color: #4B86EE; - color: white; -} - - -[data-tab-content] { - display: none; -} - -.active[data-tab-content] { - display: block; -} - -.tab.active { - background-color: #AAA; -} - -.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 { padding-top: 45px; - background-image: url("/img/linen.png"); + background-image: url("../img/background.jpg"); display: flex; flex-direction: column; } -@media screen and (max-width: 768px) { - body { padding-top: 0px; } -} - -/* 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%; +.alert-short { + width: 40%; } /* The close button */ .closebtn { - margin-left: 15px; - color: white; + color: black; font-weight: bold; float: right; font-size: 22px; @@ -533,3 +163,58 @@ body { background-color: #555; color: white; } + +.table-striped>tbody>tr:nth-child(even)>td, +.table-striped>tbody>tr:nth-child(even)>th { + background-color: #a5a5a549; + } + .table-striped>tbody>tr:nth-child(odd)>td, + .table-striped>tbody>tr:nth-child(odd)>th { + background-color: #ffffff; + } + + /* Small screens (max-width: 576px) */ +@media (max-width: 576px) { + /* Change the font size for all headings */ + h1, h2, h3, h4, h5, h6 { + font-size: 18px; + } + + /* Hide the sidebar */ + .sidebar { + display: none; + } + + /* Make the main content take up the full width of the screen */ + .main-content { + width: 100%; + } +} + +/* Medium screens (min-width: 577px) and (max-width: 768px) */ +@media (min-width: 577px) and (max-width: 768px) { + /* Change the font size for all headings */ + +} + +/* Large screens (min-width: 769px) */ +@media (min-width: 769px) { + /* CSS rules for large screens go here */ +} +/* Portrait screens (max-width: 576px) */ +@media (max-width: 576px) and (max-height: 812px) { + /* CSS rules for portrait screens go here */ +} + +/* Landscape screens (min-width: 577px) and (max-height: 812px) */ +@media (min-width: 577px) and (max-height: 812px) { + /* CSS rules for landscape screens go here */ +} + +.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { + width: inherit; +} + +.card-header i.fa { + line-height: 74px; +}