From c939e325275aa7daea218009995a112d169dbc9c Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Tue, 23 Aug 2022 20:00:39 -0300 Subject: [PATCH 1/2] Adjusting menu colors, active and hover effects - new menu button colors; - change sidebar background color; - small adjustments. Signed-off-by: RD WebDesign --- style/themes/lcars.css | 108 ++++++++++++++++++++++++----------------- 1 file changed, 63 insertions(+), 45 deletions(-) diff --git a/style/themes/lcars.css b/style/themes/lcars.css index 23f2cc1f0..b7894a1f7 100644 --- a/style/themes/lcars.css +++ b/style/themes/lcars.css @@ -463,7 +463,6 @@ p.login-box-msg, background-size: 304px 100%, 758px 100%; background-repeat: no-repeat; background-position: 0 0, 100% 0; - border-radius: 0 0 0 60px; border-radius: 0 0 0 min(75px, var(--sidebar-width)); font-weight: bold; text-transform: uppercase; @@ -711,21 +710,20 @@ p.login-box-msg, top: 150px; bottom: 20px; left: 5px; - background: #8bf; + background: #cce6ff; background-image: linear-gradient( to top, #cce6ff 200px, #000 200px, #000 204px, - #eda 204px, - #eda 270px, + #48f 204px, + #48f 270px, #000 270px, #000 274px, transparent 274px ); background-repeat: no-repeat; background-position: bottom; - border-radius: 0 0 0 75px; border-radius: 0 0 0 min(90px, var(--sidebar-width)); transition: all 0.3s ease-in-out; z-index: -1; @@ -748,6 +746,8 @@ p.login-box-msg, .sidebar-menu > li { text-align: right; + --hover-color: var(--backlit-color); + --active-color: #fff; } .sidebar-menu > li.header { @@ -757,24 +757,58 @@ p.login-box-msg, font-size: 0; } +/* Menu groups */ +.menu-main { + --normal-color: #26f; + --backlit-color: #8bf; + --darken-color: #59f; +} + +.menu-analysis { + --normal-color: #48f; + --backlit-color: #bdf; + --darken-color: #8bf; +} + +.menu-group { + --normal-color: #8bf; + --backlit-color: #bdf; + --darken-color: #8bf; +} + +.menu-dns { + --normal-color: #eca; + --backlit-color: #fdb; + --darken-color: #eca; +} + +.menu-system { + --normal-color: #e97; + --backlit-color: #fb9; + --darken-color: #e97; +} + +.menu-donate { + --normal-color: #d67; + --backlit-color: #e89; + --darken-color: #d67; +} + .sidebar-menu > li > a { margin: 4px 0 0; padding: 30px 15px 5px; - background: #8bf; + background: var(--normal-color); border-left: none; } .sidebar-menu > li.active > a { - background-color: #eda; -} - -.sidebar-menu > li > a.menu-support { - background-color: #26f; + background-color: var(--active-color); } .sidebar-menu > li:hover > a, .sidebar-menu > li > a:focus { - background-color: #cce6ff; + background-color: var(--backlit-color); + box-shadow: inset 0 0 20px var(--darken-color); } .sidebar-menu > li > .treeview-menu { @@ -791,52 +825,30 @@ p.login-box-msg, transform: scaleX(-1); } -.sidebar-menu > .menu-main a, -.sidebar-menu > .menu-system a { - background-color: #8bf; -} - -.sidebar-menu > .menu-analysis a { - background-color: #48f; -} - -.sidebar-menu > .menu-group a { - background-color: #aaf; -} - -.sidebar-menu > .menu-dns a { - background-color: #26f; -} - -/* Donate sidebar button */ -.sidebar-menu > li.menu-donate a { - background: #c78; -} -.sidebar-menu > li.menu-donate:hover a, -.sidebar-menu > li.menu-donate a:focus { - background: #e9a; - box-shadow: inset 0 0 18px #c78; -} - .treeview-menu > li > a { margin: 4px 0 0; padding: 23px 38px 4px 0; position: relative; overflow: hidden; color: #000; - background: #8bf; - background-image: linear-gradient(to right, #cce6ff 36px, #000 36px, #000 40px, transparent 40px); + background: var(--normal-color); + background-image: linear-gradient( + to right, + var(--backlit-color) 36px, + #000 36px, + #000 40px, + transparent 40px + ); border-radius: 22px; } .treeview-menu > li.active > a { - background-color: #cce6ff; + background-color: var(--active-color); } .treeview-menu > li > a:hover { - background-color: #cce6ff; - background-image: linear-gradient(to right, #cce6ff 36px, #000 36px, #000 40px, #cce6ff 40px); - box-shadow: inset 0 0 18px rgba(68, 136, 255, 0.4); + background-color: var(--hover-color); + box-shadow: inset 0 0 18px var(--darken-color); } #pihole-disable > a > span:not(.pull-right-container) { @@ -1578,6 +1590,12 @@ table.dataTable { /*--- Media - max-width ---*/ @media (max-width: 767px) { + h1 { + font-size: 1.8em; + } + h2 { + font-size: 1.4rem; + } .sidebar-collapse { --sidebar-width: 230px; } From 8b084a6ce030f3333540212d176d89845296445a Mon Sep 17 00:00:00 2001 From: RD WebDesign Date: Wed, 24 Aug 2022 22:45:20 -0300 Subject: [PATCH 2/2] Fix top background during animation (desktop and mobile) Signed-off-by: RD WebDesign --- style/themes/lcars.css | 28 ++++++---------------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/style/themes/lcars.css b/style/themes/lcars.css index b7894a1f7..6b7145604 100644 --- a/style/themes/lcars.css +++ b/style/themes/lcars.css @@ -3,7 +3,7 @@ /*** Main variables ***/ :root { --sidebar-width: 230px; - --gradient-pos: 300px; + --gradient-pos: 304px; --primary-color: #48f; --text-color: #9ab; --net-never-color: #000; @@ -18,7 +18,7 @@ } .sidebar-open { - --gradient-pos: 70px; + --gradient-pos: 74px; } /*** General ***/ @@ -661,11 +661,7 @@ p.login-box-msg, } .content-wrapper { - background-image: linear-gradient( - to right, - #cce6ff calc(300px - var(--sidebar-width)), - #000 calc(300px - var(--sidebar-width)) - ), + background-image: linear-gradient(to left, #000 4px, #cce6ff 4px), linear-gradient( to left, #48f 359.5px, @@ -1051,7 +1047,7 @@ footer a:focus { } .main-footer > div { - margin: 5px; + margin: 5px !important; } .main-footer > div div { @@ -1077,10 +1073,6 @@ footer a:focus { box-shadow: none; } -.sidebar-collapse .treeview-menu > li > a:hover { - background-color: #04f; -} - .sidebar-collapse .sidebar-menu svg { display: block; } @@ -1656,17 +1648,9 @@ table.dataTable { border-radius: 0; } .content-wrapper { - background-image: linear-gradient(to right, #000 4px, #48f 4px), - linear-gradient( - to right, - #cce6ff var(--gradient-pos), - #000 var(--gradient-pos), - #000 calc(4px + var(--gradient-pos)), - transparent - ); - background-size: 100% 50px, var(--gradient-pos) 50px; + background-image: linear-gradient(to left, #000 4px, #cce6ff 4px), linear-gradient(#48f, #48f); + background-size: var(--gradient-pos) 50px, 100% 50px; background-repeat: no-repeat; - background-position: calc(var(--gradient-pos)) 4px, 0 4px; } .content { padding: 20px;