graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-09-19 06:01:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

upd: shorten navbars to save space on mobile

Browse source
This commit is contained in:
blueb 2024-02-05 06:27:29 -05:00
parent e3525b82f9
commit 327d4b3e88
2 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/ui/deck.vue
View file

@ -325,7 +325,7 @@ body {
} }
.rootIsMobile { .rootIsMobile {
padding-bottom: 100px; padding-bottom: 58px;
} }
.main { .main {
@ -446,20 +446,20 @@ body {
.navButton { .navButton {
position: relative; position: relative;
padding: 0; padding: 0;
aspect-ratio: 1; height: 32px;
width: 100%; width: 100%;
max-width: 60px; max-width: 60px;
margin: auto; margin: auto;
border-radius: var(--radius-full); border-radius: var(--radius-lg);
background: var(--panel); background: transparent;
color: var(--fg); color: var(--fg);
&:hover { &:hover {
background: var(--panelHighlight); color: var(--accent);
} }
&:active { &:active {
background: var(--X2); color: var(--accent);
} }
} }
@ -470,15 +470,17 @@ body {
&:hover { &:hover {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
color: var(--fgOnAccent);
} }
&:active { &:active {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
color: var(--fgOnAccent);
} }
} }
.navButtonIcon { .navButtonIcon {
font-size: 18px; font-size: 16px;
vertical-align: middle; vertical-align: middle;
} }

14
packages/frontend/src/ui/universal.vue
View file

@ -406,20 +406,20 @@ $widgets-hide-threshold: 1090px;
.navButton { .navButton {
position: relative; position: relative;
padding: 0; padding: 0;
aspect-ratio: 1; height: 32px;
width: 100%; width: 100%;
max-width: 60px; max-width: 60px;
margin: auto; margin: auto;
border-radius: var(--radius-full); border-radius: var(--radius-lg);
background: var(--panel); background: transparent;
color: var(--fg); color: var(--fg);
&:hover { &:hover {
background: var(--panelHighlight); color: var(--accent);
} }
&:active { &:active {
background: var(--X2); color: var(--accent);
} }
} }
@ -430,15 +430,17 @@ $widgets-hide-threshold: 1090px;
&:hover { &:hover {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
color: var(--fgOnAccent);
} }
&:active { &:active {
background: linear-gradient(90deg, var(--X8), var(--X8)); background: linear-gradient(90deg, var(--X8), var(--X8));
color: var(--fgOnAccent);
} }
} }
.navButtonIcon { .navButtonIcon {
font-size: 18px; font-size: 16px;
vertical-align: middle; vertical-align: middle;
} }