heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

merge: upd: shorten navbars to save space on mobile (!404)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/404

Approved-by: Amelia Yukii <amelia.yukii@shourai.de>
Approved-by: dakkar <dakkar@thenautilus.net>
This commit is contained in:
Amelia Yukii 2024-02-05 11:55:01 +00:00
commit 31a74dc591
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;
} }