Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-18 16:54:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fancy loader

Browse Source
This commit is contained in:
Pablo Hellmann
2024-12-01 02:39:56 +01:00
parent 04c82501d5
commit 75462dd21e
1 changed files with 109 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/black-teal-reimagined.css
+109 -2
View File
@@ -994,8 +994,116 @@ svg.feather.feather-image,
height: 100%;
}
/* Token counters styling */
/* loader */
.splash {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.8);
}
.motd {
margin-top: 1em;
color: var(--body-text-color-subdued);
font-family: monospace;
font-variant: all-petite-caps;
font-size: 1.2em;
}
.splash-img {
margin: 0;
width: 512px;
height: 512px;
background-repeat: no-repeat;
animation: color 8s infinite alternate, move 3s infinite alternate;
}
.loading {
color: white;
position: border-box;
top: 85%;
font-size: 1.5em;
}
.loader {
width: 100px;
height: 100px;
border: var(--spacing-md) solid transparent;
border-radius: 50%;
border-top: var(--spacing-md) solid var(--primary-600);
animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite;
position: border-box;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
top: 6px;
bottom: 6px;
left: 6px;
right: 6px;
border-radius: 50%;
border: var(--spacing-md) solid transparent;
}
.loader::before {
border-top-color: var(--primary-900);
animation: spin 3s linear infinite;
}
.loader::after {
border-top-color: var(--primary-300);
animation: spin 1.5s linear infinite;
}
@keyframes move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes color {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
/* Token counters styling */
#txt2img_token_counter, #txt2img_negative_token_counter {
display: flex;
flex-direction: row;
@@ -1063,7 +1171,6 @@ svg.feather.feather-image,
--input-radius: var(--radius-lg);
--input-text-size: var(--text-md);
--input-text-weight: 400;
--loader-color: var(--color-accent);
--prose-text-size: var(--text-md);
--prose-text-weight: 400;
--prose-header-text-weight: 400;