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; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.-dot,
&.-counter {
margin: 0;
position: absolute;
}
&.-dot { &.-dot {
border-radius: 100%;
min-height: 8px; min-height: 8px;
max-height: 8px; max-height: 8px;
min-width: 8px; min-width: 8px;
max-width: 8px; max-width: 8px;
padding: 0; padding: 0;
line-height: 0; line-height: 0;
margin: 0;
font-size: 0; font-size: 0;
position: absolute;
left: calc(50% - 4px); left: calc(50% - 4px);
top: calc(50% - 4px); top: calc(50% - 4px);
margin-left: 6px; margin-left: 6px;
margin-top: -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 { .alert {

View File

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

View File

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