Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjusting menu colors, active and hover effects on LCARS theme #2309

Merged
merged 2 commits into from
Aug 25, 2022
+69 −67
Merged

Adjusting menu colors, active and hover effects on LCARS theme #2309

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c939e32
Adjusting menu colors, active and hover effects
rdwebdesign Aug 23, 2022
8b084a6
Fix top background during animation (desktop and mobile)
rdwebdesign Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 69 additions & 67 deletions style/themes/lcars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -18,7 +18,7 @@
}

.sidebar-open {
--gradient-pos: 70px;
--gradient-pos: 74px;
}

/*** General ***/
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -662,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,
Expand Down Expand Up @@ -711,21 +706,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;
Expand All @@ -748,6 +742,8 @@ p.login-box-msg,

.sidebar-menu > li {
text-align: right;
--hover-color: var(--backlit-color);
--active-color: #fff;
}

.sidebar-menu > li.header {
Expand All @@ -757,24 +753,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 {
Expand All @@ -791,52 +821,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) {
Expand Down Expand Up @@ -1039,7 +1047,7 @@ footer a:focus {
}

.main-footer > div {
margin: 5px;
margin: 5px !important;
}

.main-footer > div div {
Expand All @@ -1065,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;
}
Expand Down Expand Up @@ -1578,6 +1582,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;
}
Expand Down Expand Up @@ -1638,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;
Expand Down