X-Git-Url: https://jfr.im/git/irc/unrealircd/unrealircd-webpanel.git/blobdiff_plain/0d8467316c521d71508ef99c1e7e366fb03a04e9..462bd7231d893710a96ac01a0b9ebdd43a4cac64:/css/unrealircd-admin.css diff --git a/css/unrealircd-admin.css b/css/unrealircd-admin.css index 18a0c20..0650f68 100644 --- a/css/unrealircd-admin.css +++ b/css/unrealircd-admin.css @@ -1,7 +1,3 @@ -table { - font-size: 96%; -} - .unrealircd_overview { font-family: arial, sans-serif; border-collapse: collapse; @@ -19,73 +15,16 @@ table { margin: 2px; } -.alert { - width: 90%; -} - -.form-control { - height: 10px; - margin: 5px; -} - .short-form-control { width: 70%; } -.nav-item { - margin-left: 2px; - margin-right: 2px; -} -.navbar-nav li> { - border-radius: 4px; -} -.navbar-nav li>a:hover,.navbar-nav li.active { - color: white; - background-color: #4B86EE; - border-radius: 4px; -} -.navbar-nav li>a:hover,.navbar-nav li>a:focus { - color: white; - background-color: #6ca0f8; - border-radius: 4px; -} - -.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: 7px; - width: 100%; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); -} .input_text { border-radius: 7px; } @@ -105,53 +44,16 @@ table { text-align: right; } -.align_right_button_tkl_add { - width: 400px; - display: inline-block; - text-align: right; -} - -textarea { - height: 30px; - width: 400px; - padding: 5px 5px; - margin: 8px 0; - border-radius: 7px; - } - - - - - -*, -*: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; -} + height: 55px; + } .topnav { background-color: #333; @@ -170,202 +72,22 @@ textarea { 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; +.alert-short { + width: 40%; } -.cute_button2:focus:not(:active) { - box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em; -} - - - /* The close button */ .closebtn { - margin-left: 15px; - color: white; + color: black; font-weight: bold; float: right; font-size: 22px; @@ -440,3 +162,63 @@ 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 .badge { + top:-10px; + left:20px; +} + +.card-header i.fa { + line-height: 74px; +}