fix mobile badge in timeline

This commit is contained in:
Henry Jameson 2024-02-27 00:16:22 +02:00
parent ef2c8f077d
commit 9a24d21bbd
3 changed files with 25 additions and 17 deletions

View File

@ -620,22 +620,38 @@ option {
overflow: hidden;
text-overflow: ellipsis;
&.-dot,
&.-counter {
margin: 0;
position: absolute;
}
&.-dot {
border-radius: 100%;
min-height: 8px;
max-height: 8px;
min-width: 8px;
max-width: 8px;
padding: 0;
line-height: 0;
margin: 0;
font-size: 0;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
}
&.-counter {
border-radius: var(--roundness);
font-size: 0.75em;
line-height: 1;
text-align: right;
padding: 0.2em;
min-width: 0;
left: calc(50% - 0.5em);
top: calc(50% - 0.4em);
margin-left: 0.7em;
margin-top: -1em;
}
}
.alert {

View File

@ -1,5 +1,3 @@
@import "../../variables";
// TODO Copypaste from Status, should unify it somehow
.Notification {
border-bottom: 1px solid;
@ -70,28 +68,22 @@
}
&.-type--repeat .type-icon {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
color: var(--cGreen);
}
&.-type--follow .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
color: var(--cBlue);
}
&.-type--follow-request .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
color: var(--cBlue);
}
&.-type--like .type-icon {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
color: var(--cOrange);
}
&.-type--move .type-icon {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
color: var(--cBlue);
}
}

View File

@ -38,7 +38,7 @@
fixed-width
icon="circle-plus"
/>
<div class="alert-badge">
<div class="badge -counter">
{{ mobileLoadButtonString }}
</div>
</button>