use responsive gaps between note toolbar items
This commit is contained in:
parent
dc35731589
commit
4d024d1165
8 changed files with 27 additions and 151 deletions
|
|
@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
|
||||
</div>
|
||||
<footer :class="$style.footer">
|
||||
<footer :class="$style.footer" class="_gaps _h_gaps">
|
||||
<div :class="$style.noteFooterInfo">
|
||||
<MkTime :time="appearNote.createdAt" mode="detail"/>
|
||||
</div>
|
||||
|
|
@ -280,23 +280,11 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
|
|||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 350px) {
|
||||
.noteFooterButton {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
.root {
|
||||
font-size: 0.9em;
|
||||
|
|
@ -323,11 +311,5 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.noteFooterButton {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue