Update style.css

style.css

@@ -277,7 +277,7 @@ body {
 .gradio-container .gr-button {
   padding: var(--space-sm) var(--space-lg) !important;
   font-size: 0.9375rem !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: var(--fg-primary) !important;
   background: rgba(255, 255, 255, 0.03) !important;
   border: 1px solid var(--border-medium) !important;
@@ -289,7 +289,7 @@ body {
 
 .gradio-container button:hover:not(.gr-tab-nav button),
 .gradio-container .gr-button:hover {
-  opacity: 1 !important;
+  opacity: 0.65 !important;
   background: rgba(255, 255, 255, 0.10) !important;
   border-color: var(--border-accent) !important;
   box-shadow: 0 0 16px var(--ultra-blue-glow) !important;
@@ -312,7 +312,7 @@ body {
   background: var(--ultra-blue) !important;
   border-color: var(--ultra-blue-bright) !important;
   box-shadow: 0 4px 12px var(--ultra-blue-glow) !important;
-  opacity: 1 !important;
+  opacity: 0.65 !important;
 }
 
 .gradio-container button.primary:hover,
@@ -339,7 +339,7 @@ body {
 
 .gradio-container .gr-gallery .gr-image:hover {
   border-color: var(--ultra-blue) !important;
-  box-shadow: 0 3px 10px var(--ultra-blue-glow) !important;
+  box-shadow: 0 10px 10px var(--ultra-blue-glow) !important;
   transform: translateY(-2px) !important;
 }
 
@@ -383,7 +383,7 @@ body {
 
 .tq-carousel__item {
   flex: 0 0 280px;
-  aspect-ratio: 16 / 10;
+  aspect-ratio: 10 / 10;
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--border-subtle);
@@ -393,7 +393,7 @@ body {
 
 .tq-carousel__item:hover {
   border-color: var(--ultra-blue);
-  box-shadow: 0 6px 14px var(--ultra-blue-glow);
+  box-shadow: 0 10px 10px var(--ultra-blue-glow);
   transform: translateY(-2px) scale(1.04);
 }
 
@@ -406,17 +406,17 @@ body {
 
 .tq-carousel__nav {
   position: absolute;
-  top: 50%;
+  top: 100%;
   transform: translateY(-50%);
-  width: 38px;
-  height: 38px;
+  width: 14px;
+  height: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(12px);
-  border: 1px solid var(--border-medium);
-  border-radius: 50%;
+  border: 0.5px solid var(--border-medium);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all var(--trans-base);
   z-index: var(--z-dropdown);
@@ -528,8 +528,8 @@ body {
   }
 
   .tq-carousel__nav {
-    width: 34px;
-    height: 34px;
+    width: 12px;
+    height: 12px;
   }
 }
 
@@ -585,21 +585,21 @@ footer,
 #strange_gallery [class*="gallery"] [role="list"] {
   display: flex !important;
   flex-wrap: nowrap !important;
-  gap: 12px !important;
+  gap: 10px !important;
 }
 
 #down_gallery [role="listitem"],
 #strange_gallery [role="listitem"] {
-  flex: 0 0 320px !important;
+  flex: 0 0 280px !important;
   scroll-snap-align: start !important;
-  border-radius: 14px !important;
+  border-radius: 10px !important;
   overflow: hidden !important;
   background: rgba(255,255,255,0.03) !important;
   border: 1px solid rgba(255,255,255,0.10) !important;
 }
 
 #down_gallery img, #strange_gallery img {
-  width: 100% !important;
+  width: 130% !important;
   height: 240px !important;
   object-fit: contain !important;
   display: block !important;