change logo and add splash screen

This commit is contained in:
Vladimir Mandic
2023-07-19 14:07:54 -04:00
parent 19d176ea3d
commit 2b0def1192
23 changed files with 46 additions and 72 deletions
+13 -10
View File
@@ -501,19 +501,22 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
#train_tab { flex-flow: row-reverse; }
#models_tab { flex-flow: row-reverse; }
.log-monitor {
display: none;
justify-content: unset !important;
overflow: hidden;
padding: 0;
margin-top: auto;
font-family: monospace;
font-size: 0.85em;
}
.log-monitor { display: none; justify-content: unset !important; overflow: hidden; padding: 0; margin-top: auto; font-family: monospace; font-size: 0.85em; }
.log-monitor td, .log-monitor th { padding-left: 1em; }
.logo { background-image: url("logo.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; }
/* Workaround for Gradio dropdowns capturing clicks during and after fadeout */
.gradio-dropdown > label > div > div:first-child:not(.showOptions) ~ ul.options {
pointer-events: none;
}
.splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; display: block; text-align: center; }
.splash-img { margin: 10% auto 0 auto; width: 512px; background-repeat: no-repeat; height: 512px; animation: move 5s infinite alternate; }
@keyframes move {
from { background-position-x: 0, -40px; }
to { background-position-x: 0, 40px; }
}
.loading { color: white; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); }
.loader { width: 300px; height: 300px; border: var(--spacing-md) solid transparent; border-radius: 50%; border-top: var(--spacing-md) solid var(--primary-600); animation: spin 4s linear infinite; position: relative; }
.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: 3s spin linear infinite; }
.loader::after { border-top-color: var(--primary-300); animation: spin 1.5s linear infinite; }