limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-25 19:37:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(client): tweak style

Browse source
This commit is contained in:
syuilo 2022-07-04 01:12:36 +09:00
parent ad4d2cec91
commit 284aa8b8ca
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/client/src/ui/_common_/statusbar-user-list.vue
View file

@ -6,7 +6,7 @@
<span v-for="note in notes" :key="note.id" class="item"> <span v-for="note in notes" :key="note.id" class="item">
<img class="avatar" :src="note.user.avatarUrl" decoding="async"/> <img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
<MkA class="text" :to="notePage(note)"> <MkA class="text" :to="notePage(note)">
<Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/> <Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
</MkA> </MkA>
<span class="divider"></span> <span class="divider"></span>
</span> </span>
@ -91,11 +91,18 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
margin-right: 8px; margin-right: 8px;
} }
> .text {
> .text {
display: inline-block;
vertical-align: bottom;
}
}
> .divider { > .divider {
display: inline-block; display: inline-block;
width: 0.5px; width: 0.5px;
height: 16px; height: 16px;
margin: 0 1em; margin: 0 2em;
background: currentColor; background: currentColor;
opacity: 0; opacity: 0;
} }

7
packages/client/src/ui/_common_/statusbars.vue
View file

@ -29,25 +29,30 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
<style lang="scss" scoped> <style lang="scss" scoped>
.dlrsnxqu { .dlrsnxqu {
--height: 24px; --height: 24px;
--nameMargin: 10px;
background: var(--panel); background: var(--panel);
font-size: 0.85em; font-size: 0.85em;
&.verySmall { &.verySmall {
--nameMargin: 7px;
--height: 16px; --height: 16px;
font-size: 0.75em; font-size: 0.75em;
} }
&.small { &.small {
--nameMargin: 8px;
--height: 20px; --height: 20px;
font-size: 0.8em; font-size: 0.8em;
} }
&.large { &.large {
--nameMargin: 12px;
--height: 26px; --height: 26px;
font-size: 0.875em; font-size: 0.875em;
} }
&.veryLarge { &.veryLarge {
--nameMargin: 14px;
--height: 30px; --height: 30px;
font-size: 0.9em; font-size: 0.9em;
} }
@ -62,7 +67,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
contain: strict; contain: strict;
> .name { > .name {
padding: 0 6px; padding: 0 var(--nameMargin);
font-weight: bold; font-weight: bold;
color: var(--accent); color: var(--accent);
} }