Update _res/_custom.css

_res/_custom.css

@@ -1,275 +1,273 @@
-@import url("https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400..800&display=swap");
-
-@font-face {
-  font-family: "Geist Mono";
-  src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
-  font-weight: 100;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Geist Mono";
-  src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Geist Mono";
-  src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Geist Mono";
-  src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Geist Mono";
-  src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Qartella-Light";
-  src: url("file=_res/assets/webfonts/Qartella-Light.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Light.woff") format("woff");
-  font-weight: normal;
-  font-style: light;
-}
-
-@font-face {
-  font-family: "Qartella-Bold";
-  src: url("file=_res/assets/webfonts/Qartella-Bold.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Bold.woff") format("woff");
-  font-weight: normal;
-  font-style: bold;
-}
-
-::-webkit-scrollbar {
-  width: 0px;
-}
-
-body {
-  background: var(--background-fill-primary);
-  background: linear-gradient(180deg, var(--primary-800) 355px, var(--background-fill-primary) 355px);
-}
-
-.gradio-container-5-29-0 {
-  padding-top: 30px !important;
-  transition: opacity 0.4s linear;
-  position: relative;
-  font-family: "Geist Mono", sans-serif !important;
-  font-weight: 400;
-}
-
-.md-header-wrapper,
-.md-header > span > div {
-  width: 100%;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  position: relative;
-  background-image: url("gradio_api/file=_res/assets/Schaafe.png");
-  background-position: 70% bottom;
-  background-repeat: no-repeat;
-  padding: 0 10px;
-
-  h1 {
-    --sc: rgb(2, 44, 32);
-    font-family: "Baloo Tamma 2", system-ui;
-    font-optical-sizing: auto;
-    font-weight: 600;
-    font-style: normal;
-    font-size: 3.8rem;
-    padding: 8px;
-    text-shadow: 2px 2px 2px var(--sc), -2px 2px 2px var(--sc), -2px -2px 0 var(--sc), 2px -2px 0 var(--sc);
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-    margin-right: 45%;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-
-    & span {
-      font-weight: 400;
-      font-size: 2rem;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-  }
-
-  p {
-    margin-top: var(--spacing-xs);
-
-    #wink,
-    #heart {
-      display: inline;
-      width: 26px;
-      margin-bottom: 8px;
-    }
-
-    #wink {
-      animation: wink 3s ease-in-out infinite;
-    }
-
-    #heart {
-      animation: beat 2s ease-in-out infinite;
-    }
-  }
-}
-
-.row-main {
-  padding: 16px;
-  background-color: var(--neutral-900) !important;
-  border-right-width: 0px !important;
-  border-bottom-width: 0px !important;
-  border-left-width: 0px !important;
-  border-top: 8px solid var(--primary-600) !important;
-  border-radius: var(--container-radius) !important;
-}
-
-.primary.svelte-1ixn6qd,
-span.svelte-g2oxp3,
-.wrap.svelte-12ioyct,
-label.svelte-1to105q.svelte-1to105q,
-label.selected.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav,
-label.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav:hover,
-.md-header > span > div p {
-  color: var(--text-color-by-luminance, #fff);
-  transition: color 0.4s ease-in-out;
-}
-
-label.svelte-1bx8sav > .svelte-1bx8sav + .svelte-1bx8sav {
-  margin-left: 0;
-}
-
-.app.svelte-1y320eu.svelte-1y320eu {
-  position: relative;
-  margin: auto;
-  padding: var(--size-4) var(--size-8);
-  width: 100%;
-  height: 100%;
-}
-
-@media (min-width: 640px) {
-  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
-    max-width: 1536px;
-  }
-}
-
-@media (min-width: 1920px) {
-  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
-    max-width: 1536px !important;
-  }
-}
-
-.info.svelte-1y320eu.svelte-1y320eu {
-  display: flex;
-  position: absolute;
-  bottom: 0;
-  justify-content: flex-start;
-  border-top: 1px solid var(--button-secondary-border-color);
-  padding: var(--size-1) var(--size-5);
-  width: 100%;
-  color: var(--body-text-color-subdued);
-  font-size: var(--text-md);
-  white-space: nowrap;
-}
-
-.app.svelte-1y320eu.svelte-1y320eu {
-  max-width: 1536px !important;
-  position: relative;
-  margin: auto;
-  padding: var(--size-4) var(--size-8);
-  width: 100%;
-  height: 100%;
-}
-
-.input-image,
-.output-slider {
-  height: 800px;
-}
-
-.hidethis,
-input.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav {
-  display: none;
-}
-
-/* Keyframes */
-
-@keyframes wink {
-  0%,
-  60%,
-  100% {
-    transform: rotate(0deg);
-  }
-  10%,
-  30%,
-  70%,
-  90% {
-    transform: rotate(14deg);
-  }
-  20%,
-  80% {
-    transform: rotate(-8deg);
-  }
-  40% {
-    transform: rotate(-4deg);
-  }
-  50% {
-    transform: rotate(10deg);
-  }
-}
-
-@keyframes beat {
-  0% {
-    transform: scale(1);
-  }
-  5% {
-    transform: scale(0.75);
-  }
-  20% {
-    transform: scale(1);
-  }
-  30% {
-    transform: scale(1);
-  }
-  35% {
-    transform: scale(0.75);
-  }
-  50% {
-    transform: scale(1);
-  }
-  55% {
-    transform: scale(0.75);
-  }
-  70% {
-    transform: scale(1);
-  }
-}
+@import url("https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400..800&display=swap");
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Qartella-Light";
+  src: url("file=_res/assets/webfonts/Qartella-Light.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Light.woff") format("woff");
+  font-weight: normal;
+  font-style: light;
+}
+
+@font-face {
+  font-family: "Qartella-Bold";
+  src: url("file=_res/assets/webfonts/Qartella-Bold.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Bold.woff") format("woff");
+  font-weight: normal;
+  font-style: bold;
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+}
+
+body {
+  background: var(--background-fill-primary);
+  background: linear-gradient(180deg, var(--primary-800) 355px, var(--background-fill-primary) 355px);
+}
+
+.gradio-container-5-29-0 {
+  padding-top: 30px !important;
+  transition: opacity 0.4s linear;
+  position: relative;
+  font-family: "Geist Mono", sans-serif !important;
+  font-weight: 400;
+}
+
+.md-header-wrapper,
+.md-header > span > div {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+  background-position: 70% bottom;
+  background-repeat: no-repeat;
+  padding: 0 10px;
+
+  h1 {
+    --sc: rgb(2, 44, 32);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
+    font-size: 3rem;
+    padding: 8px;
+    text-shadow: 2px 2px 2px var(--sc), -2px 2px 2px var(--sc), -2px -2px 0 var(--sc), 2px -2px 0 var(--sc);
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+    margin-right: 45%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    & span {
+      font-weight: 400;
+      font-size: 2rem;
+      margin-top: -20px;
+      text-transform: uppercase;
+    }
+  }
+
+  p {
+    margin-top: var(--spacing-xs);
+
+    #wink,
+    #heart {
+      display: inline;
+      width: 26px;
+      margin-bottom: 8px;
+    }
+
+    #wink {
+      animation: wink 3s ease-in-out infinite;
+    }
+
+    #heart {
+      animation: beat 2s ease-in-out infinite;
+    }
+  }
+}
+
+.row-main {
+  padding: 16px;
+  background-color: var(--neutral-900) !important;
+  border-right-width: 0px !important;
+  border-bottom-width: 0px !important;
+  border-left-width: 0px !important;
+  border-top: 8px solid var(--primary-600) !important;
+  border-radius: var(--container-radius) !important;
+}
+
+.primary.svelte-1ixn6qd,
+span.svelte-g2oxp3,
+.wrap.svelte-12ioyct,
+label.svelte-1to105q.svelte-1to105q,
+label.selected.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav,
+label.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav:hover,
+.md-header > span > div p {
+  color: var(--text-color-by-luminance, #fff);
+  transition: color 0.4s ease-in-out;
+}
+
+label.svelte-1bx8sav > .svelte-1bx8sav + .svelte-1bx8sav {
+  margin-left: 0;
+}
+
+.app.svelte-1y320eu.svelte-1y320eu {
+  position: relative;
+  margin: auto;
+  padding: var(--size-4) var(--size-8);
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width: 640px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1536px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1536px !important;
+  }
+}
+
+.info.svelte-1y320eu.svelte-1y320eu {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  justify-content: flex-start;
+  border-top: 1px solid var(--button-secondary-border-color);
+  padding: var(--size-1) var(--size-5);
+  width: 100%;
+  color: var(--body-text-color-subdued);
+  font-size: var(--text-md);
+  white-space: nowrap;
+}
+
+.app.svelte-1y320eu.svelte-1y320eu {
+  max-width: 1536px !important;
+  position: relative;
+  margin: auto;
+  padding: var(--size-4) var(--size-8);
+  width: 100%;
+  height: 100%;
+}
+
+.input-image,
+.output-slider {
+  height: 800px;
+}
+
+.hidethis,
+input.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav {
+  display: none;
+}
+
+/* Keyframes */
+
+@keyframes wink {
+  0%,
+  60%,
+  100% {
+    transform: rotate(0deg);
+  }
+  10%,
+  30%,
+  70%,
+  90% {
+    transform: rotate(14deg);
+  }
+  20%,
+  80% {
+    transform: rotate(-8deg);
+  }
+  40% {
+    transform: rotate(-4deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes beat {
+  0% {
+    transform: scale(1);
+  }
+  5% {
+    transform: scale(0.75);
+  }
+  20% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1);
+  }
+  35% {
+    transform: scale(0.75);
+  }
+  50% {
+    transform: scale(1);
+  }
+  55% {
+    transform: scale(0.75);
+  }
+  70% {
+    transform: scale(1);
+  }
+}