Update styles

app.css

@@ -4,58 +4,94 @@
 }
 .accordion > button {
   justify-content: flex-start;
+  color: var(--body-text-color-subdued);
+}
+.accordion > button:hover {
+  color: var(--body-text-color);
 }
 .accordion > button > span:first-child {
   width: auto;
   margin-right: 4px;
 }
 .accordion .tabs {
-  margin-top: 12px;
+  margin-top: 8px;
 }
 .accordion .tabitem > div {
   --block-border-width: 1px;
 }
 
-.tabs, .tabitem, .tab-nav, .tab-nav > .selected {
-  border-width: 0px;
-}
-.tabitem {
-  max-height: 600px;
-  overflow-y: auto;
+.gallery {
+  background-color: var(--bg);
 }
-.tabitem .markdown {
-  margin-top: 4px;
-  margin-left: 8px;
+.gallery:is(.dark *) {
+  background-color: var(--bg-dark);
 }
 
-.gallery {
-  --block-border-width: 0px;
-  background-color: transparent;
+.icon-button {
+  max-width: 42px;
+  position: relative;
+}
+.icon-button:hover::after {
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: var(--button-secondary-border-color-hover);
+  background: var(--button-secondary-background-fill-hover);
+  color: var(--button-secondary-text-color-hover);
+  font-weight: var(--section-header-text-weight);
+  font-size: var(--section-header-text-size);
+}
+.icon-button#clear:hover::after {
+  content: 'Clear gallery';
+}
+.icon-button#random:hover::after {
+  content: 'Roll seed';
 }
 
 #intro {
+  margin-bottom: 8px !important;
+}
+#intro > div {
   display: flex;
-  align-items: center;
 }
-#intro > h1 > span {
-  color: #047857 !important;
+#intro > div > h1 > span {
   font-style: italic;
+  color: #047857 !important;
 }
-#intro > h1 > span:is(.dark *) {
+#intro > div > h1 > span:is(.dark *) {
   color: #10b981 !important;
 }
-#intro > svg {
-  display: inline-block;
+#intro > div > svg {
   width: 1.5rem;
   height: 1.5rem;
   margin-top: 0.25rem;
   margin-left: 0.5rem;
+  align-self: center;
   fill: #047857 !important;
   animation: spin 3s linear infinite reverse;
 }
-#intro > svg:is(.dark *) {
+#intro > div > svg:is(.dark *) {
   fill: #10b981 !important;
 }
 @keyframes spin {
   100% { transform: rotate(360deg); }
 }
+
+.tabs, .tabitem, .tab-nav, .tab-nav > .selected {
+  border-width: 0px;
+}
+.tabitem {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.tabitem .markdown {
+  margin-left: 8px;
+}
+.tab-nav > button {
+  padding-bottom: 8px;
+}

partials/intro.html

@@ -1,7 +1,11 @@
 <div id="intro">
-  <h1>Stable Diffusion <span>Zero</span></h1>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15">
-    <path d="M7.48877 6.75C7.29015 6.75 7.09967 6.82902 6.95923 6.96967C6.81879 7.11032 6.73989 7.30109 6.73989 7.5C6.73989 7.69891 6.81879 7.88968 6.95923 8.03033C7.09967 8.17098 7.29015 8.25 7.48877 8.25C7.68738 8.25 7.87786 8.17098 8.0183 8.03033C8.15874 7.88968 8.23764 7.69891 8.23764 7.5C8.23764 7.30109 8.15874 7.11032 8.0183 6.96967C7.87786 6.82902 7.68738 6.75 7.48877 6.75ZM7.8632 0C11.2331 0 11.3155 2.6775 9.54818 3.5625C8.80679 3.93 8.47728 4.7175 8.335 5.415C8.69446 5.565 9.00899 5.7975 9.24863 6.0975C12.0195 4.5975 15 5.19 15 7.875C15 11.25 12.3265 11.325 11.4428 9.5475C11.0684 8.805 10.2746 8.475 9.57813 8.3325C9.42836 8.6925 9.19621 9 8.89665 9.255C10.3869 12.0225 9.79531 15 7.11433 15C3.74438 15 3.67698 12.315 5.44433 11.43C6.17823 11.0625 6.50774 10.2825 6.65751 9.5925C6.29056 9.4425 5.96855 9.2025 5.72891 8.9025C2.96555 10.3875 0 9.8025 0 7.125C0 3.75 2.666 3.6675 3.54967 5.445C3.92411 6.1875 4.71043 6.51 5.40689 6.6525C5.54918 6.2925 5.78882 5.9775 6.09586 5.7375C4.60559 2.97 5.1972 0 7.8632 0Z"></path>
-  </svg>
+  <div>
+    <h1>
+      Stable Diffusion&nbsp;<span>Zero</span>
+    </h1>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15">
+      <path d="M7.48877 6.75C7.29015 6.75 7.09967 6.82902 6.95923 6.96967C6.81879 7.11032 6.73989 7.30109 6.73989 7.5C6.73989 7.69891 6.81879 7.88968 6.95923 8.03033C7.09967 8.17098 7.29015 8.25 7.48877 8.25C7.68738 8.25 7.87786 8.17098 8.0183 8.03033C8.15874 7.88968 8.23764 7.69891 8.23764 7.5C8.23764 7.30109 8.15874 7.11032 8.0183 6.96967C7.87786 6.82902 7.68738 6.75 7.48877 6.75ZM7.8632 0C11.2331 0 11.3155 2.6775 9.54818 3.5625C8.80679 3.93 8.47728 4.7175 8.335 5.415C8.69446 5.565 9.00899 5.7975 9.24863 6.0975C12.0195 4.5975 15 5.19 15 7.875C15 11.25 12.3265 11.325 11.4428 9.5475C11.0684 8.805 10.2746 8.475 9.57813 8.3325C9.42836 8.6925 9.19621 9 8.89665 9.255C10.3869 12.0225 9.79531 15 7.11433 15C3.74438 15 3.67698 12.315 5.44433 11.43C6.17823 11.0625 6.50774 10.2825 6.65751 9.5925C6.29056 9.4425 5.96855 9.2025 5.72891 8.9025C2.96555 10.3875 0 9.8025 0 7.125C0 3.75 2.666 3.6675 3.54967 5.445C3.92411 6.1875 4.71043 6.51 5.40689 6.6525C5.54918 6.2925 5.78882 5.9775 6.09586 5.7375C4.60559 2.97 5.1972 0 7.8632 0Z"></path>
+    </svg>
+  </div>
+  <p>Stable Diffusion 1.5 powered by 🤗 <a href="https://huggingface.co/spaces/zero-gpu-explorers/README" target="_blank" rel="noopener noreferrer">ZeroGPU</a>.</p>
 </div>
-<p>Stable Diffusion 1.5 powered by 🤗 <a href="https://huggingface.co/spaces/zero-gpu-explorers/README" target="_blank" rel="noopener noreferrer">ZeroGPU</a>.</p>