From 2c417b3280bea67f45182d728e295eb7e9920ba5 Mon Sep 17 00:00:00 2001
From: P-Hellmann <phtijger@gmail.com>
Date: Thu, 28 Nov 2024 15:14:24 +0100
Subject: [PATCH] Create black-teal-reimagined.css

Modern look of black-teal theme in SD.NEXT
---
 javascript/black-teal-reimagined.css | 1105 ++++++++++++++++++++++++++
 1 file changed, 1105 insertions(+)
 create mode 100644 javascript/black-teal-reimagined.css

diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css
new file mode 100644
index 000000000..e5618c02c
--- /dev/null
+++ b/javascript/black-teal-reimagined.css
@@ -0,0 +1,1105 @@
+/* Generic HTML Tags */
+@font-face {
+  font-family: 'NotoSans';
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100;
+  src: local('NotoSans'), url('notosans-nerdfont-regular.ttf');
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+:root,
+.light,
+.dark {
+  --font: 'NotoSans';
+  --font-mono: 'ui-monospace', 'Consolas', monospace;
+  --font-size: 16px;
+
+  /* Primary Colors */
+  --primary-50: #7dffff;
+  --primary-100: #72e8e8;
+  --primary-200: #67d2d2;
+  --primary-300: #5dbcbc;
+  --primary-400: #52a7a7;
+  --primary-500: #489292;
+  --primary-600: #3e7d7d;
+  --primary-700: #356969;
+  --primary-800: #2b5656;
+  --primary-900: #224444;
+  --primary-950: #193232;
+
+  /* Neutral Colors */
+  --neutral-50: #f0f0f0;
+  --neutral-100: #e0e0e0;
+  --neutral-200: #d0d0d0;
+  --neutral-300: #b0b0b0;
+  --neutral-400: #909090;
+  --neutral-500: #707070;
+  --neutral-600: #606060;
+  --neutral-700: #404040;
+  --neutral-800: #303030;
+  --neutral-900: #202020;
+  --neutral-950: #101010;
+
+  /* Highlight and Inactive Colors */
+  --highlight-color: var(--primary-200);
+  --inactive-color: var(--primary-800);
+
+  /* Text Colors */
+  --body-text-color: var(--neutral-100);
+  --body-text-color-subdued: var(--neutral-300);
+
+  /* Background Colors */
+  --background-color: var(--neutral-950);
+  --background-fill-primary: var(--neutral-700);
+  --input-background-fill: var(--neutral-800);
+
+  /* Padding and Borders */
+  --input-padding: 4px;
+  --input-shadow: none;
+  --button-primary-text-color: var(--neutral-100);
+  --button-primary-background-fill: var(--primary-600);
+  --button-primary-background-fill-hover: var(--primary-800);
+  --button-secondary-text-color: var(--neutral-100);
+  --button-secondary-background-fill: var(--neutral-900);
+  --button-secondary-background-fill-hover: var(--neutral-600);
+
+  /* Border Radius */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-xxl: 15px;
+  --radius-xxxl: 20px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1);
+
+  /* Animation */
+  --transition: all 0.3s ease;
+
+  /* Scrollbar */
+  --scrollbar-bg: var(--neutral-800);
+  --scrollbar-thumb: var(--highlight-color);
+}
+
+html {
+  font-size: var(--font-size);
+  font-family: var(--font);
+}
+
+body,
+button,
+input,
+select,
+textarea {
+  font-family: var(--font);
+  color: var(--body-text-color);
+  transition: var(--transition);
+}
+
+button {
+  max-width: 400px;
+  white-space: nowrap;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-md);
+  background-color: var(--button-primary-background-fill);
+  color: var(--button-primary-text-color);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: var(--button-primary-background-fill-hover);
+  transform: scale(1.05);
+}
+
+/* Range Input Styles */
+.slider-container {
+  width: 100%;
+  /* Ensures the container takes full width */
+  max-width: 100%;
+  /* Prevents overflow */
+  padding: 0 10px;
+  /* Adds padding for aesthetic spacing */
+  box-sizing: border-box;
+  /* Ensures padding doesn't affect width */
+}
+
+input[type='range'] {
+  display: block;
+  margin: 0;
+  padding: 0;
+  height: 1em;
+  background-color: transparent;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: none;
+  -webkit-appearance: none;
+  opacity: 0.7;
+  appearance: none;
+  width: 100%;
+  /* Makes the slider responsive */
+}
+
+input[type='range'] {
+  opacity: 1;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  background-color: var(--highlight-color);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-md);
+  cursor: pointer;
+  /* Ensures the thumb is clickable */
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  height: 6px;
+  background: var(--input-background-fill);
+  border-radius: var(--radius-md);
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 1em;
+  width: 1em;
+  background-color: var(--highlight-color);
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-md);
+  cursor: pointer;
+  /* Ensures the thumb is clickable */
+}
+
+input[type='range']::-moz-range-track {
+  height: 6px;
+  background: var(--input-background-fill);
+  border-radius: var(--radius-md);
+}
+
+@media (max-width: 768px) {
+  .slider-container {
+    width: 100%;
+    /* Adjust width for smaller screens */
+  }
+
+  .networks-menu,
+  .styles-menu {
+    width: 100%;
+    /* Ensure menus are full width */
+    margin: 0;
+    /* Reset margins for smaller screens */
+  }
+}
+
+/* Scrollbar Styles */
+:root {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Tab Navigation Styles */
+.tab-nav {
+  display: flex;
+  /* Use flexbox for layout */
+  justify-content: space-around;
+  /* Space out the tabs evenly */
+  align-items: center;
+  /* Center items vertically */
+  background: var(--background-color);
+  /* Background color */
+  border-bottom: 1px solid var(--highlight-color) !important;
+  /* Bottom border for separation */
+  box-shadow: var(--shadow-md);
+  /* Shadow for depth */
+}
+
+/* Individual Tab Styles */
+.tab-nav>button {
+  background: var(--neutral-900);
+  /* No background for default state */
+  color: var(--text-color);
+  /* Text color */
+  border: none;
+  /* No border */
+  border-radius: var(--radius-xxxl);
+  /* Rounded corners */
+  cursor: pointer;
+  /* Pointer cursor */
+  transition: background 0.3s ease, color 0.3s ease;
+  /* Smooth transition */
+}
+
+/* Active Tab Style */
+.tab-nav>button.active {
+  background: var(--highlight-color);
+  /* Highlight active tab */
+  color: var(--background-color);
+  /* Change text color for active tab */
+}
+
+/* Hover State for Tabs */
+.tab-nav>button:hover {
+  background: var(--highlight-color);
+  /* Background on hover */
+  color: var(--background-color);
+  /* Change text color on hover */
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .tab-nav {
+    flex-direction: column;
+    /* Stack tabs vertically on smaller screens */
+    align-items: stretch;
+    /* Stretch tabs to full width */
+  }
+
+  .tab-nav>button {
+    width: 100%;
+    /* Full width for buttons */
+    text-align: left;
+    /* Align text to the left */
+  }
+}
+
+/* Quick Settings Panel Styles */
+#quicksettings {
+  background: var(--background-color);
+  /* Background color */
+  box-shadow: var(--shadow-lg);
+  /* Shadow for depth */
+  border-radius: var(--radius-lg);
+  /* Rounded corners */
+  padding: 1em;
+  /* Padding for spacing */
+  z-index: 200;
+  /* Ensure it stays on top */
+}
+
+/* Quick Settings Header */
+#quicksettings .header {
+  font-size: var(--text-lg);
+  /* Font size for header */
+  font-weight: bold;
+  /* Bold text */
+  margin-bottom: 0.5em;
+  /* Space below header */
+}
+
+/* Quick Settings Options */
+#quicksettings .option {
+  display: flex;
+  /* Flexbox for layout */
+  justify-content: space-between;
+  /* Space between label and toggle */
+  align-items: center;
+  /* Center items vertically */
+  padding: 0.5em 0;
+  /* Padding for each option */
+  border-bottom: 1px solid var(--neutral-600);
+  /* Separator line */
+}
+
+/* Option Label Styles */
+#quicksettings .option label {
+  color: var(--text-color);
+  /* Text color */
+}
+
+/* Toggle Switch Styles */
+#quicksettings .option input[type="checkbox"] {
+  cursor: pointer;
+  /* Pointer cursor */
+}
+
+/* Quick Settings Footer */
+#quicksettings .footer {
+  margin-top: 1em;
+  /* Space above footer */
+  text-align: right;
+  /* Align text to the right */
+}
+
+/* Close Button Styles */
+#quicksettings .footer button {
+  background: var(--button-primary-background-fill);
+  /* Button background */
+  color: var(--button-primary-text-color);
+  /* Button text color */
+  border: none;
+  /* No border */
+  border-radius: var(--radius-md);
+  /* Rounded corners */
+  padding: 0.5em 1em;
+  /* Padding for button */
+  cursor: pointer;
+  /* Pointer cursor */
+  transition: 0.3s ease;
+  /* Smooth transition */
+}
+
+/* Close Button Hover State */
+#quicksettings .footer button:hover {
+  background: var(--highlight-color);
+  /* Change background on hover */
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  #quicksettings {
+    right: 10px;
+    /* Adjust position for smaller screens */
+    width: 90%;
+    /* Full width on smaller screens */
+  }
+}
+
+/* Form Styles */
+div.form {
+  border-width: 0;
+  box-shadow: var(--shadow-md);
+  background: var(--background-fill-primary);
+  padding: 16px;
+  border-radius: var(--radius-md);
+}
+
+/* Gradio Style Classes */
+fieldset .gr-block.gr-box,
+label.block span {
+  padding: 0;
+  margin-top: -4px;
+}
+
+.border-2 {
+  border-width: 0;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+  border-color: var(--highlight-color) !important;
+  padding-bottom: 2px;
+  margin-bottom: 8px;
+}
+
+.bg-white {
+  color: lightyellow;
+  background-color: var(--inactive-color);
+}
+
+.gr-box {
+  border-radius: var(--radius-sm) !important;
+  background-color: var(--neutral-950) !important;
+  box-shadow: var(--shadow-md);
+  border-width: 0;
+  padding: 4px;
+  margin: 12px 0;
+}
+
+.gr-button {
+  font-weight: normal;
+  box-shadow: var(--shadow-sm);
+  font-size: 0.8rem;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 3px;
+  margin: 3px;
+  transition: var(--transition);
+}
+
+.gr-button:hover {
+  background-color: var(--highlight-color);
+}
+
+.gr-check-radio {
+  background-color: var(--inactive-color);
+  border-width: 0;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.gr-check-radio:checked {
+  background-color: var(--highlight-color);
+}
+
+.gr-compact {
+  background-color: var(--background-color);
+}
+
+.gr-form {
+  border-width: 0;
+}
+
+.gr-input {
+  background-color: var(--neutral-800) !important;
+  padding: 4px;
+  margin: 4px;
+  border-radius: var(--radius-md);
+  transition: var(--transition);
+}
+
+.gr-input:hover {
+  background-color: var(--neutral-700);
+}
+
+.gr-input-label {
+  color: lightyellow;
+  border-width: 0;
+  background: transparent;
+  padding: 2px !important;
+}
+
+.gr-panel {
+  background-color: var(--background-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.eta-bar {
+  display: none !important;
+}
+
+.gradio-slider {
+  max-width: 200px;
+}
+
+.gradio-slider input[type="number"] {
+  background: var(--neutral-950);
+  margin-top: 2px;
+}
+
+.gradio-image {
+  height: unset !important;
+}
+
+svg.feather.feather-image,
+.feather .feather-image {
+  display: none;
+}
+
+.gap-2 {
+  padding-top: 8px;
+}
+
+.gr-box>div>div>input.gr-text-input {
+  right: 0;
+  width: 4em;
+  padding: 0;
+  top: -12px;
+  border: none;
+  max-height: 20px;
+}
+
+.output-html {
+  line-height: 1.2 rem;
+  overflow-x: hidden;
+}
+
+.output-html>div {
+  margin-bottom: 8px;
+}
+
+.overflow-hidden .flex .flex-col .relative col .gap-4 {
+  min-width: var(--left-column);
+  max-width: var(--left-column);
+}
+
+.p-2 {
+  padding: 0;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-6 {
+  padding-bottom: 0;
+}
+
+.tabs {
+  background-color: var(--background-color);
+}
+
+.block.token-counter span {
+  background-color: var(--input-background-fill) !important;
+  box-shadow: 2px 2px 2px #111;
+  border: none !important;
+  font-size: 0.7rem;
+}
+
+.label-wrap {
+  margin: 8px 0px 4px 0px;
+}
+
+.gradio-button.tool {
+  border: none;
+  background: none;
+  box-shadow: none;
+  filter: hue-rotate(340deg) saturate(0.5);
+}
+
+#tab_extensions table td,
+#tab_extensions table th,
+#tab_config table td,
+#tab_config table th {
+  border: none;
+}
+
+#tab_extensions table tr:hover,
+#tab_config table tr:hover {
+  background-color: var(--neutral-500) !important;
+}
+
+#tab_extensions table,
+#tab_config table {
+  width: 96vw;
+}
+
+#tab_extensions table thead,
+#tab_config table thead {
+  background-color: var(--neutral-700);
+}
+
+#tab_extensions table,
+#tab_config table {
+  background-color: var(--neutral-900);
+}
+
+/* Automatic Style Classes */
+.progressDiv {
+  border-radius: var(--radius-sm) !important;
+  position: fixed;
+  top: 44px;
+  right: 26px;
+  max-width: 262px;
+  height: 48px;
+  z-index: 99;
+  box-shadow: var(--button-shadow);
+}
+
+.progressDiv .progress {
+  border-radius: var(--radius-lg) !important;
+  background: var(--highlight-color);
+  line-height: 3rem;
+  height: 48px;
+}
+
+.gallery-item {
+  box-shadow: none !important;
+}
+
+.performance {
+  color: #888;
+}
+
+.extra-networks {
+  border-left: 2px solid var(--highlight-color) !important;
+  padding-left: 4px;
+}
+
+.image-buttons {
+  justify-content: center;
+  gap: 0 !important;
+}
+
+.image-buttons>button {
+  max-width: 160px;
+}
+
+.tooltip {
+  background: var(--primary-300);
+  color: black;
+  border: none;
+  border-radius: var(--radius-lg);
+}
+
+#system_row>button,
+#settings_row>button,
+#config_row>button {
+  max-width: 10em;
+}
+
+/* Gradio Elements Overrides */
+#div.gradio-container {
+  overflow-x: hidden;
+}
+
+#img2img_label_copy_to_img2img {
+  font-weight: normal;
+}
+
+#txt2img_prompt,
+#txt2img_neg_prompt,
+#img2img_prompt,
+#img2img _neg_prompt,
+#control_prompt,
+#control_neg_prompt {
+  background-color: var(--background-color);
+  box-shadow: none !important;
+}
+
+#txt2img_prompt>label>textarea,
+#txt2img_neg_prompt>label>textarea,
+#img2img_prompt>label>textarea,
+#img2img_neg_prompt>label>textarea,
+#control_prompt>label>textarea,
+#control_neg_prompt>label>textarea {
+  font-size: 1.0em;
+  line-height: 1.4em;
+  border-radius: var(--radius-md);
+}
+
+#txt2img_styles,
+#img2img_styles,
+#control_styles {
+  padding: 0;
+  margin-top: 2px;
+}
+
+#txt2img_styles_refresh,
+#img2img_styles_refresh,
+#control_styles_refresh {
+  padding: 0;
+  margin-top: 1em;
+}
+
+#img2img_settings {
+  min-width: calc(2 * var(--left-column));
+  max-width: calc(2 * var(--left-column));
+  background-color: var(--neutral-950);
+  padding-top: 16px;
+}
+
+#interrogate,
+#deepbooru {
+  margin: 0 0px 10px 0px;
+  max-width: 80px;
+  max-height: 80px;
+  font-weight: normal;
+  font-size: 0.95em;
+}
+
+#quicksettings .gr-button-tool {
+  font-size: 1.6rem;
+  box-shadow: none;
+  margin-left: -20px;
+  margin-top: -2px;
+  height: 2.4em;
+}
+
+#footer,
+#style_pos_col,
+#style_neg_col,
+#roll_col,
+#extras_upscaler_2,
+#extras_upscaler_2_visibility,
+#txt2img_seed_resize_from_w,
+#txt2img_seed_resize_from_h {
+  display: none;
+}
+
+#save-animation {
+  border-radius: var(--radius-sm) !important;
+  margin-bottom: 16px;
+  background-color: var(--neutral-950);
+}
+
+#script_list {
+  padding: 4px;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+#settings>div.flex-wrap {
+  width: 15em;
+}
+
+#settings_search {
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
+#settings_search textarea {
+  padding: 0.5em;
+  height: 2.2em !important;
+}
+
+#txt2img_cfg_scale {
+  min-width: 200px;
+}
+
+#txt2img_checkboxes,
+#img2img_checkboxes,
+#control_checkboxes {
+  background-color: transparent;
+  margin-bottom: 0.2em;
+}
+
+textarea[rows="1"] {
+  height: 33px !important;
+  width: 99% !important;
+  padding: 8px !important;
+}
+
+#extras_upscale {
+  margin-top: 10px;
+}
+
+#txt2img_progress_row>div {
+  min-width: var(--left-column);
+  max-width: var(--left-column);
+}
+
+#txt2img_settings {
+  min-width: var(--left-column);
+  max-width: var(--left-column);
+  background-color: var(--neutral-950);
+  padding-top: 16px;
+}
+
+#pnginfo_html2_info {
+  margin-top: -18px;
+  background-color: var(--input-background-fill);
+  padding: var(--input-padding);
+}
+
+#txt2img_styles_row,
+#img2img_styles_row,
+#control_styles_row {
+  margin-top: -6px;
+}
+
+.block>span {
+  margin-bottom: 0 !important;
+  margin-top: var(--spacing-lg);
+}
+
+/* Extra Networks Container */
+#extra_networks_root {
+  width: 300px;
+  /* Set a fixed width for the sidebar */
+  position: absolute;
+  height: auto;
+  right: 0;
+  top: 13em;
+  z-index: 100;
+  background: var(--background-color);
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  /* Prevents overflow of content */
+}
+
+/* Extra Networks Styles */
+.extra-networks {
+  background: var(--background-color);
+  padding: var(--block-label-padding);
+  border-radius: var(--radius-lg);
+}
+
+/* Extra Networks Div Styles */
+.extra-networks>div {
+  margin: 0;
+  border-bottom: none !important;
+  gap: 0.3em 0;
+}
+
+.extra-networks .tab-nav>button:hover {
+  background: var(--highlight-color);
+}
+
+/* Network tab search and description important fix, dont remove */
+#txt2img_description,
+#txt2img_extra_search,
+#img2img_description,
+#img2img_extra_search,
+#control_description,
+#control_extra_search {
+  margin-top: 50px;
+}
+
+/* Individual Buttons */
+.extra-networks .buttons>button {
+  margin-left: -0.2em;
+  height: 1.4em;
+  color: var(--primary-300) !important;
+  font-size: 20px !important;
+  background: var(--button-primary-background-fill);
+  border: none;
+  border-radius: var(--radius-sm);
+  transition: var(--transition);
+}
+
+.extra-networks .buttons>button:hover {
+  background: var(--highlight-color);
+}
+
+/* Extra Networks Tab */
+.extra-networks-tab {
+  padding: 0 !important;
+}
+
+/* Subdirectories Styles */
+.extra-network-subdirs {
+  background: var(--input-background-fill);
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 120px;
+  padding-top: 0.5em;
+  margin-top: -4px !important;
+}
+
+/* Extra Networks Page */
+.extra-networks-page {
+  display: flex;
+}
+
+/* Network Cards Container */
+.extra-network-cards {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  overflow-x: hidden;
+  align-content: flex-start;
+  width: 100%;
+  /* Ensures it takes full width */
+}
+
+/* Individual Card Styles */
+.extra-network-cards .card {
+  height: fit-content;
+  margin: 0 0 0.5em 0.5em;
+  position: relative;
+  scroll-snap-align: start;
+  scroll-margin-top: 0;
+  background: var(--neutral-800);
+  /* Background for cards */
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  transition: var(--transition);
+}
+
+/* Overlay Styles */
+.extra-network-cards .card .overlay {
+  z-index: 10;
+  width: 100%;
+  background: none;
+  border-radius: var(--radius-md);
+}
+
+/* Overlay Name Styles */
+.extra-network-cards .card .overlay .name {
+  font-size: var(--text-lg);
+  font-weight: bold;
+  text-shadow: 1px 1px black;
+  color: white;
+  overflow-wrap: anywhere;
+  position: absolute;
+  bottom: 0;
+  padding: 0.2em;
+  z-index: 10;
+}
+
+/* Preview Styles */
+.extra-network-cards .card .preview {
+  box-shadow: var(--button-shadow);
+  min-height: 30px;
+  border-radius: var(--radius-md);
+}
+
+/* Hover Effects */
+.extra-network-cards .card:hover .overlay {
+  background: rgba(0, 0, 0, 0.70);
+}
+
+.extra-network-cards .card:hover .preview {
+  box-shadow: none;
+  filter: grayscale(100%);
+}
+
+/* Tags Styles */
+.extra-network-cards .card .overlay .tags {
+  display: none;
+  overflow-wrap: anywhere;
+  position: absolute;
+  top: 100%;
+  z-index: 20;
+  background: var(--body-background-fill);
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 333px;
+}
+
+/* Individual Tag Styles */
+.extra-network-cards .card .overlay .tag {
+  padding: 2px;
+  margin: 2px;
+  background: rgba(70, 70, 70, 0.60);
+  font-size: var(--text-md);
+  cursor: pointer;
+  display: inline-block;
+}
+
+/* Actions Styles */
+.extra-network-cards .card .actions>span {
+  padding: 4px;
+  font-size: 34px !important;
+}
+
+.extra-network-cards .card .actions>span:hover {
+  color: var(--highlight-color);
+}
+
+/* Version Styles */
+.extra-network-cards .card .version {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px;
+  font-weight: bolder;
+  text-shadow: 1px 1px black;
+  text-transform: uppercase;
+  background: gray;
+  opacity: 75%;
+  margin: 4px;
+  line-height: 0.9rem;
+}
+
+/* Hover Actions */
+.extra-network-cards .card:hover .actions {
+  display: block;
+}
+
+.extra-network-cards .card:hover .overlay .tags {
+  display: block;
+}
+
+/* No Preview Card Styles */
+.extra-network-cards .card:has(>img[src*="card-no-preview.png"])::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: multiply;
+  background-color: var(--data-color);
+}
+
+/* Card List Styles */
+.extra-network-cards .card-list {
+  display: flex;
+  margin: 0.3em;
+  padding: 0.3em;
+  background: var(--input-background-fill);
+  cursor: pointer;
+  border-radius: var(--button-large-radius);
+}
+
+.extra-network-cards .card-list .tag {
+  color: var(--primary-500);
+  margin-left: 0.8em;
+}
+
+/* Correction color picker styling */
+#txt2img_hdr_color_picker label input {
+  width: 100%;
+  height: 100%;
+}
+
+/* Based on Gradio Built-in Dark Theme */
+:root,
+.light,
+.dark {
+  --body-background-fill: var(--background-color);
+  --color-accent-soft: var(--neutral-700);
+  --background-fill-secondary: none;
+  --border-color-accent: var(--background-color);
+  --border-color-primary: var(--background-color);
+  --link-text-color-active: var(--primary-500);
+  --link-text-color: var(--secondary-500);
+  --link-text-color-hover: var(--secondary-400);
+  --link-text-color-visited: var(--secondary-600);
+  --shadow-spread: 1px;
+  --block-background-fill: none;
+  --block-border-color: var(--border-color-primary);
+  --block_border_width: none;
+  --block-info-text-color: var(--body-text-color-subdued);
+  --block-label-background-fill: var(--background-fill-secondary);
+  --block-label-border-color: var(--border-color-primary);
+  --block_label_border_width: none;
+  --block-label-text-color: var(--neutral-200);
+  --block-shadow: none;
+  --block-title-background-fill: none;
+  --block-title-border-color: none;
+  --block-title-border-width: 0px;
+  --block-title-padding: 0;
+  --block-title-radius: none;
+  --block-title-text-size: var(--text-md);
+  --block-title-text-weight: 400;
+  --container-radius: var(--radius-lg);
+  --form-gap-width: 1px;
+  --layout-gap: var(--spacing-xxl);
+  --panel-border-width: 0;
+  --section-header-text-size: var(--text-md);
+  --section-header-text-weight: 400;
+  --checkbox-border-radius: var(--radius-sm);
+  --checkbox-label-gap: 2px;
+  --checkbox-label-padding: var(--spacing-md);
+  --checkbox-label-shadow: var(--shadow-drop);
+  --checkbox-label-text-size: var(--text-md);
+  --checkbox-label-text-weight: 400;
+  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  --checkbox-shadow: var(--input-shadow);
+  --error-border-width: 1px;
+  --input-border-width: 0;
+  --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;
+  --slider-color: var(--neutral-900);
+  --table-radius: var(--radius-lg);
+  --button-large-padding: 2px 6px;
+  --button-large-radius: var(--radius-lg);
+  --button-large-text-size: var(--text-lg);
+  --button-large-text-weight: 400;
+  --button-shadow: none;
+  --button-shadow-active: none;
+  --button-shadow-hover: none;
+  --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
+  --button-small-radius: var(--radius-lg);
+  --button-small-text-size: var(--text-md);
+  --button-small-text-weight: 400;
+  --button-transition: none;
+  --size-9: 64px;
+  --size-14: 64px;
+}
\ No newline at end of file