sbrl-github/Pepperminty-Wiki
sbrl-github
/
Pepperminty-Wiki
mirror of https://github.com/sbrl/Pepperminty-Wiki.git
1
0
Fork 0
Code

Tweak more menu. There's more work to be done though 

ref 
https://www.reddit.com/r/UI_Design/comments/cvu3cy/what_can_i_do_to_improve_the_menu_on_the/
This commit is contained in:
Starbeamrainbowlabs 2019-08-28 16:32:22 +01:00
parent eb0b080b64
commit d19c8712db
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
themes/default/theme.css
View File

@ -58,13 +58,14 @@ nav { display: flex; background-color: var(--accent-a2); color: var(--accent-b1)
nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem var(--shadow); }
nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem var(--shadow); }
nav > span { flex: 1; text-align: center; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
nav > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
nav:not(.nav-more-menu) > span { text-align: center; }
nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: inherit; }
.nav-divider { color: transparent; }
.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; }
.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; font-weight: bold; }
label { cursor: pointer; }
.nav-more-menu { display: none; z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
.nav-more-menu { display: none; z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; text-align: left; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
.nav-more-menu span { min-width: 10rem; }