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

Added styling for the circular loading indicator

Browse source
This commit is contained in:
Niléane 2024-02-11 21:36:29 +01:00
commit 74bad15198
No known key found for this signature in database
3 changed files with 57 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

23
TangerineUI-cherry.css
View file

@ -348,6 +348,22 @@ body.app-body {
.app-body .loading-bar { .app-body .loading-bar {
background-color: var(--color-accent); background-color: var(--color-accent);
} }
.app-body .circular-progress {
color: var(--color-accent);
}
.app-body .redirect__logo {
background-image: var(--logo);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.app-body .redirect__logo img {
opacity: 0;
}
.app-body .redirect__message a {
color: var(--color-accent);
}
.app-body .getting-started, .app-body .getting-started,
.app-body .regeneration-indicator, .app-body .regeneration-indicator,
@ -1922,7 +1938,7 @@ body.app-body {
.translate-button .link-button, .translate-button .link-button,
.status__content__translate-button .status__content__translate-button
) { ) {
bottom: 13px; bottom: 12px;
} }
.app-body .status__content__translate-button:hover, .app-body .status__content__translate-button:hover,
.app-body .translate-button .link-button:hover { .app-body .translate-button .link-button:hover {
@ -3695,14 +3711,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .account__header__bar .avatar .account__avatar { .app-body .account__header__bar .avatar .account__avatar {
border-radius: 50%; border-radius: 50%;
margin: 2px 2px 6px; margin: 0x;
outline: 1px solid var(--color-lines-translucent);
border-width: 4px; border-width: 4px;
border-color: var(--color-content-bg); border-color: var(--color-content-bg);
width: 100px !important; width: 100px !important;
height: 100px !important; height: 100px !important;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
} }
.app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1,
.app-body .account__header__tabs__name h1 small { .app-body .account__header__tabs__name h1 small {
@ -5413,6 +5427,7 @@ a:is(.active,
.app-body .sign-in-banner p { .app-body .sign-in-banner p {
color: var(--color-fg); color: var(--color-fg);
opacity: .5; opacity: .5;
padding: 0 10px;
} }

23
TangerineUI-purple.css
View file

@ -348,6 +348,22 @@ body.app-body {
.app-body .loading-bar { .app-body .loading-bar {
background-color: var(--color-accent); background-color: var(--color-accent);
} }
.app-body .circular-progress {
color: var(--color-accent);
}
.app-body .redirect__logo {
background-image: var(--logo);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.app-body .redirect__logo img {
opacity: 0;
}
.app-body .redirect__message a {
color: var(--color-accent);
}
.app-body .getting-started, .app-body .getting-started,
.app-body .regeneration-indicator, .app-body .regeneration-indicator,
@ -1922,7 +1938,7 @@ body.app-body {
.translate-button .link-button, .translate-button .link-button,
.status__content__translate-button .status__content__translate-button
) { ) {
bottom: 13px; bottom: 12px;
} }
.app-body .status__content__translate-button:hover, .app-body .status__content__translate-button:hover,
.app-body .translate-button .link-button:hover { .app-body .translate-button .link-button:hover {
@ -3695,14 +3711,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .account__header__bar .avatar .account__avatar { .app-body .account__header__bar .avatar .account__avatar {
border-radius: 50%; border-radius: 50%;
margin: 2px 2px 6px; margin: 0x;
outline: 1px solid var(--color-lines-translucent);
border-width: 4px; border-width: 4px;
border-color: var(--color-content-bg); border-color: var(--color-content-bg);
width: 100px !important; width: 100px !important;
height: 100px !important; height: 100px !important;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
} }
.app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1,
.app-body .account__header__tabs__name h1 small { .app-body .account__header__tabs__name h1 small {
@ -5413,6 +5427,7 @@ a:is(.active,
.app-body .sign-in-banner p { .app-body .sign-in-banner p {
color: var(--color-fg); color: var(--color-fg);
opacity: .5; opacity: .5;
padding: 0 10px;
} }

23
TangerineUI.css
View file

@ -348,6 +348,22 @@ body.app-body {
.app-body .loading-bar { .app-body .loading-bar {
background-color: var(--color-accent); background-color: var(--color-accent);
} }
.app-body .circular-progress {
color: var(--color-accent);
}
.app-body .redirect__logo {
background-image: var(--logo);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.app-body .redirect__logo img {
opacity: 0;
}
.app-body .redirect__message a {
color: var(--color-accent);
}
.app-body .getting-started, .app-body .getting-started,
.app-body .regeneration-indicator, .app-body .regeneration-indicator,
@ -1922,7 +1938,7 @@ body.app-body {
.translate-button .link-button, .translate-button .link-button,
.status__content__translate-button .status__content__translate-button
) { ) {
bottom: 13px; bottom: 12px;
} }
.app-body .status__content__translate-button:hover, .app-body .status__content__translate-button:hover,
.app-body .translate-button .link-button:hover { .app-body .translate-button .link-button:hover {
@ -3695,14 +3711,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .account__header__bar .avatar .account__avatar { .app-body .account__header__bar .avatar .account__avatar {
border-radius: 50%; border-radius: 50%;
margin: 2px 2px 6px; margin: 0x;
outline: 1px solid var(--color-lines-translucent);
border-width: 4px; border-width: 4px;
border-color: var(--color-content-bg); border-color: var(--color-content-bg);
width: 100px !important; width: 100px !important;
height: 100px !important; height: 100px !important;
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
} }
.app-body .account__header__tabs__name h1, .app-body .account__header__tabs__name h1,
.app-body .account__header__tabs__name h1 small { .app-body .account__header__tabs__name h1 small {
@ -5413,6 +5427,7 @@ a:is(.active,
.app-body .sign-in-banner p { .app-body .sign-in-banner p {
color: var(--color-fg); color: var(--color-fg);
opacity: .5; opacity: .5;
padding: 0 10px;
} }