mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-27 14:28:14 +09:00
Code

Dynamic character counter

Browse Source
This commit is contained in:
Niléane 2023-12-22 02:17:52 +01:00
parent 3bdd6ea66a
commit 16ae1d7de6
No known key found for this signature in database
3 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
TangerineUI-cherry.css
View File

@ -1276,8 +1276,25 @@ body.app-body {
.app-body .character-counter {
color: var(--color-content-fg);
opacity: .6;
opacity: 0;
font-size: 15px;
font-weight: normal;
transition:
opacity .3s,
margin-right .3s;
transform-origin: right center;
margin-right: -10px;
}
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
opacity: 1;
margin-right: 0;
}
.app-body .character-counter--over {
color: #df405a;
font-weight: 500;
animation: bounce .3s 1;
}
.compose-form__footer {
gap: 6px;
}
@ -1335,6 +1352,7 @@ body.app-body {
border-radius: 8px;
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
color: var(--color-content-fg);
transition: all .2s;
}
.app-body .poll__option input[type=text]:focus {

20
TangerineUI-purple.css
View File

@ -1276,8 +1276,25 @@ body.app-body {
.app-body .character-counter {
color: var(--color-content-fg);
opacity: .6;
opacity: 0;
font-size: 15px;
font-weight: normal;
transition:
opacity .3s,
margin-right .3s;
transform-origin: right center;
margin-right: -10px;
}
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
opacity: 1;
margin-right: 0;
}
.app-body .character-counter--over {
color: #df405a;
font-weight: 500;
animation: bounce .3s 1;
}
.compose-form__footer {
gap: 6px;
}
@ -1335,6 +1352,7 @@ body.app-body {
border-radius: 8px;
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
color: var(--color-content-fg);
transition: all .2s;
}
.app-body .poll__option input[type=text]:focus {

20
TangerineUI.css
View File

@ -1276,8 +1276,25 @@ body.app-body {
.app-body .character-counter {
color: var(--color-content-fg);
opacity: .6;
opacity: 0;
font-size: 15px;
font-weight: normal;
transition:
opacity .3s,
margin-right .3s;
transform-origin: right center;
margin-right: -10px;
}
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
opacity: 1;
margin-right: 0;
}
.app-body .character-counter--over {
color: #df405a;
font-weight: 500;
animation: bounce .3s 1;
}
.compose-form__footer {
gap: 6px;
}
@ -1335,6 +1352,7 @@ body.app-body {
border-radius: 8px;
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
color: var(--color-content-fg);
transition: all .2s;
}
.app-body .poll__option input[type=text]:focus {