chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dynamic character counter

Browse source
This commit is contained in:
Niléane 2023-12-22 02:17:52 +01:00
commit 16ae1d7de6
No known key found for this signature in database
3 changed files with 57 additions and 3 deletions
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 { .app-body .character-counter {
color: var(--color-content-fg); 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 { .compose-form__footer {
gap: 6px; gap: 6px;
} }
@ -1335,6 +1352,7 @@ body.app-body {
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg);
transition: all .2s; transition: all .2s;
} }
.app-body .poll__option input[type=text]:focus { .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 { .app-body .character-counter {
color: var(--color-content-fg); 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 { .compose-form__footer {
gap: 6px; gap: 6px;
} }
@ -1335,6 +1352,7 @@ body.app-body {
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg);
transition: all .2s; transition: all .2s;
} }
.app-body .poll__option input[type=text]:focus { .app-body .poll__option input[type=text]:focus {

20
TangerineUI.css
View file

@ -1276,8 +1276,25 @@ body.app-body {
.app-body .character-counter { .app-body .character-counter {
color: var(--color-content-fg); 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 { .compose-form__footer {
gap: 6px; gap: 6px;
} }
@ -1335,6 +1352,7 @@ body.app-body {
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
color: var(--color-content-fg);
transition: all .2s; transition: all .2s;
} }
.app-body .poll__option input[type=text]:focus { .app-body .poll__option input[type=text]:focus {