emma/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

more minor padding, spacing, and link styling tweaks

Browse source
This commit is contained in:
emma 2022-12-11 06:47:38 +00:00
parent 9b75ca414f
commit 427e63cfc3
7 changed files with 45 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.scss
View file

@ -55,7 +55,7 @@ nav {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--topBarShadow);
box-sizing: border-box;
height: calc(var(--navbar-height) + 1px);
height: var(--navbar-height);
position: fixed;
backdrop-filter: blur(12px) saturate(1.2);
}
@ -121,6 +121,7 @@ nav {
justify-content: center;
min-height: 100vh;
overflow-x: clip;
padding: 0 calc(var(--columnGap) / 2);
.column {
--___columnMargin: var(--columnGap);

2
src/components/checkbox/checkbox.vue
View file

@ -52,7 +52,7 @@ export default {
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow);
box-shadow: 0 0 0 1px var(--icon, $fallback--icon) inset;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;

3
src/components/conversation/conversation.vue
View file

@ -281,8 +281,7 @@
.thread-ancestor-has-other-replies .conversation-status,
.thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box,
&:last-child .conversation-status,
&.-expanded .thread-tree .conversation-status {
& .conversation-status:last-child {
border-bottom: none;
}

18
src/components/desktop_nav/desktop_nav.scss
View file

@ -89,13 +89,25 @@
width: 2em;
height: 100%;
text-align: center;
display: inline-block;
&.router-link-active {
font-size: 1.2em;
margin-top: 0.05em;
// box-shadow: 0 -2px 0 var(--selectedMenuText, $fallback--text) inset;
position: relative;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
}
.svg-inline--fa {
font-weight: bolder;
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--lightText: var(--selectedMenuLightText, $fallback--lightText);

9
src/components/status/status.scss
View file

@ -287,6 +287,15 @@
vertical-align: middle;
object-fit: contain;
}
a {
color: $fallback--text;
color: var(--text, $fallback--text);
&:hover {
text-decoration: underline;
}
}
}
.status-fadein {

19
src/components/timeline_menu_tabs/timeline_menu_tabs.vue
View file

@ -64,13 +64,26 @@
width: 2em;
height: 100%;
text-align: center;
display: inline-block;
&.router-link-active {
border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
padding-bottom: 0.8em;
padding-bottom: 0.6em;
position: relative;
&:after {
content: '';
position: absolute;
bottom: 1px;
left: 0;
width: 100%;
height: 4px;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
}
.svg-inline--fa {
font-weight: bolder;
// font-weight: bolder;
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--lightText: var(--selectedMenuLightText, $fallback--lightText);

2
src/panel.scss
View file

@ -83,7 +83,7 @@
&.-sticky {
position: sticky;
top: var(--navbar-height);
top: calc(var(--navbar-height) + 1px);
}
&::after,