style.css

:root,
*,
#context-menu {
  --rosewater: #f5e0dc;
  --flamingo: #f2cdcd;
  --pink: #f5c2e7;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --maroon: #eba0ac;
  --peach: #fab387;
  --yellow: #f9e2af;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --sky: #89dceb;
  --sapphire: #74c7ec;
  --lavender: #b4befe;
  --blue: #89b4fa;
  --text: #cdd6f4;
  --subtext1: #bac2de;
  --subtext0: #a6adc8;
  --overlay2: #9399b2;
  --overlay1: #7f849c;
  --overlay0: #6c7086;
  --surface2: #585b70;
  --surface1: #45475a;
  --surface0: #313244;
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --shadow: #010409;
  --accent: var(--yellow);
  color-scheme: dark;
}

select, option {
  background-color: var(--base);
}

#setting_sd_model_checkpoint > :first-child{
  background-color: var(--base);
}

#txt2img_prompt_container,
#img2img_prompt_container {
  background-color: var(--mantle);
}


.dark .bg-white\/90, .bg-white\/90 {
background-color: var(--base);
}

.dark fieldset span.text-gray-500, fieldset span.text-gray-500, 
.dark .gr-block.gr-box span.text-gray-500, .gr-block.gr-box span.text-gray-500, 
.dark label.block span, label.block span {
background-color: var(--base);
border: transparent;
}

.dark .dark\:text-gray-200, .\:text-gray-200{
color: var(--text);
}

.dark .dark\:bg-gray-950, .\:bg-gray-950 {
  background-color: var(--crust);
}

.dark .dark\:bg-gray-900, .\:bg-gray-900 {
  background-color: var(--base);
  border-radius: 10px;
}

.dark .dark\:border-gray-700, .\:border-gray-700 {
  border-color: var(--surface0);
}

.dark .gr-panel, .gr-panel {
  background-color: var(--mantle);
}


textarea, .gr-text-input {
  background-color: var(--base) !important;
}

.dark .bg-white, .bg-white {
  background-color: var(--mantle);
}

.dark .gr-compact, .gr-compact {
  background-color: var(--base);
}

.dark .gr-input, .gr-input {
  border-color: var(--surface0);
}
.dark .gr-form, .gr-form,
.dark .gr-box, .gr-box {
  background-color: transparent;
  color: var(--text);
}
.dark .gr-check-radio, .gr-check-radio {
  background-color: var(--base);
}

.dark .gr-check-radio:focus,  .gr-check-radio:focus,
.dark .gr-check-radio:checked, .gr-check-radio:checked {
  background-color: var(--accent);
}

.dark .gr-button-primary:hover, .gr-button-primary:hover {
filter: brightness(130%);
}
.dark .gr-button-primary, .gr-button-primary {
background-color: var(--accent) !important;
color: var(--shadow)
}


.dark .gr-button-secondary:hover, .gr-button-secondary:hover {
filter: brightness(120%);
}

button, input, optgroup, select, textarea {
color: var(--accent);
}

.dark .gr-input-label, .gr-input-label,
.dark .gr-button-secondary,.gr-button-secondary,
.gr-input-label,
.gr-button-secondary {
  --tw-gradient-from: none;
  --tw-gradient-to: none;
  --tw-gradient-stops: none;
  background-color: var(--base);
  color: var(--text)
}

.gr-button,
.dark .gr-button {
border-color:var(--surface0);
background-color: var(--base);
background-image: unset;
}


.livePreview {
  background-color: var(--base) !important;
  height: 60vh !important;
  width: 100% !important;
  border-radius: 10px !important;
}

.gr-padded {
padding: .825rem .75rem;
}


#mode_extras > :first-child > .bg-white {
background-color: var(--base);
}

#interrogate_col {
justify-content: center;
gap: 10px;
/* background: var(--base); */
/* border-top-left-radius: 10px !important; */
/* border-top-right-radius: 10px !important; */
/* padding-top: 20px; */
}

#txt2img_toprow,
#img2img_toprow {
background-color: unset;
}

#txt2img_actions_column, #img2img_actions_column {
padding: 10px;
margin: 5px;
border-radius: 10px !important;
background-color: var(--base);
}

#img_inpaint_mask > div:nth-child(3),
#img_inpaint_base > div:nth-child(3){
border-width: 1px;
border-color:var(--surface0);

}

#img2img_settings {
border-radius: 10px;
}

#mode_img2img > :not(:first-child) {
border-width: 0px;
}


#txt2img_gallery,
#img2img_gallery,
#extras_gallery {
background-color: var(--base) !important;
}

#img2img_copy_to_img2img > :not(:first-child) {
border-width: 1px !important;
border-color: var(--surface0) !important;
border-radius: 10px !important;
margin-left: 10px;
}

#txt2img_interrupt, #img2img_interrupt {
background-color: var(--red) !important;
color: var(--mantle);
}

#txt2img_skip, #img2img_skip {
background-color: var(--maroon) !important;
color: var(--mantle);
}

#txt2img_batch_count,
#txt2img_width {
  margin-bottom: 0.625vw;
}

#txt2img_script_container > div > div {
  margin: 0px 1vh 0.9vw 1vh;
}

#txt2img_script_container:last-child > div{
  margin: unset;
}

.boder,
.dark .border, .border, 
.dark .border-gray-100,  .border-gray-100, 
.dark .border-gray-200,  .border-gray-200, 
.dark .border-gray-300,  .border-gray-300, 
.dark .\!border, .\!border, 
.dark .\!border-gray-300, .\!border-gray-300 {
  border-color: var(--surface0);
}


.container {
background-color: var(--crust);
}

fieldset span.text-gray-500, 
.gr-block.gr-box span.text-gray-500, 
label.block span {
box-shadow: unset;
}

.dark .text-gray-500, .text-gray-500 {
color: var(--text);
}

.dark fieldset span.text-gray-500, fieldset span.text-gray-500, 
.dark .gr-block.gr-box, .gr-block.gr-box, 
span.text-gray-500, 
.dark label.block span, label.block span {
  background-color: transparent;
  border: transparent;
}

.dark .text-gray-700, .text-gray-700, 
.dark .text-gray-800, .text-gray-800, 
.dark .text-gray-900, .text-gray-900, 
.dark .\!text-gray-700, .\!text-gray-700, 
.dark .\!text-gray-800, .\!text-gray-800 {
color: var(--text);
}

#txt2img_settings > div {
  margin-top: 2vh;
  flex-grow: 0;
  min-width: 30%;
}

#tabs > :first-child {
  background-color: var(--crust);
}

#tabs{
  background-color: var(--mantle);
}

#tab_txt2img > div {
  background-color: var(--mantle);
}

#tabs > div{
  border-width: 0px !important;
  border-color:var(--surface0);
}

#tabs > div:nth-child(1) {
  flex-wrap: wrap-reverse;
  background-color: var(--crust);
}
.tabs > :first-child {
  border: none !important;
  margin-bottom: -1px;
  gap: 3px 0px;
  background-color: var(--mantle);
  padding-top: 5px;
  z-index: 10;
}

#img2img_img2img_tab {
border-width: 0px !important;
}

#mode_img2img > div:nth-child(1) > .bg-white {
background-color: var(--base);
}

#tab_extensions table td, #tab_extensions table th {
border: 1px solid var(--surface0);
}

#extras_resize_mode > :first-child {
background-color: var(--base);
}

#extras_resize_mode > :not(:first-child)  {
background-color: var(--mantle) !important;
padding-top: 20px;
border-color: transparent;
border-radius: 0px 10px 10px 10px;
margin-bottom: 20px;

}

.tabs > :first-child > button {
  border-radius: 8px 8px 0px 0px;
  /* outline: 1px solid var(--base) !important; */
  border-color: var(--surface0);
  border-width: 0px;
  border-bottom-width: 0px;
}


#quicksettings {
  background-color: transparent;
}

input[type="range"]::-ms-track {
  background: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: var(--accent);
  border-radius: 10px;
}
input[type="range"]::-ms-fill-upper {
  background: var(--overlay0);
  border-radius: 10px;
}

input[type="range"]:focus::-ms-fill-lower {
  background: var(--accent);
}
input[type="range"]:focus::-ms-fill-upper {
  background: var(--overlay0);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.gr-box > div > div > input.gr-text-input {
  width: 4em;
}

.progressDiv .progress {
  background: var(--accent);
  color: var(--shadow);
}

.dark .progressDiv, .progressDiv {
  background-color: var(--surface0);
}

input[type="range"] {
  font-size: 1.5rem;
}

input[type="range"] {
  color: var(--accent);
  --thumb-height: 0.5em;
  --track-height: 0.125em;
  --track-color: var(--surface0);
  --brightness-hover: 130%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
}

input[type="range"].win10-thumb {
  color: var(--accent);

  --thumb-height: 0.5em;
  --thumb-width: 0.5em;
  --clip-edges: 0.0125em;
}

@media (prefers-color-scheme: dark) {
  input[type="range"] {
    color: var(--accent);
    --track-color: var(--surface0);
  }

  input[type="range"].win10-thumb {
    color: var(--accent);
  }
}

/* === range commons === */
input[type="range"] {
  position: relative;
  background: #fff0;
  overflow: hidden;
}

input[type="range"]:active {
  cursor: grabbing;
}

input[type="range"]:disabled {
  filter: grayscale(1);
  opacity: 0.3;
  cursor: not-allowed;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  position: relative;
}

input[type="range"]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));

  filter: brightness(100%);
  clip-path: polygon(
    100% -1px,
    var(--clip-edges) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--clip-edges) 100%,
    var(--clip-further) var(--clip-further)
  );
}

input[type="range"]:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
  background: #fff0;
}

input[type="range"]::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
  filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

/* all of the input range stuff is from this guy*/
/* Shout out to them https://codepen.io/ShadowShahriar/pen/zYPPYrQ */
/* ------------------------------------------------------ 调整文生图部分界面 开始 */
/* 调整反向提示词框的默认高度 */
#txt2img_neg_prompt textarea {
  min-height: 87px;
}
/* ------------------------------------------------------ 调整文生图部分界面 结束 */

/* ------------------------------------------------------ 调整图生图部分界面 开始 */
/* 调整插件间的间距 */
#img2img_script_container {
  padding-left: 10px;
  padding-right: 10px;
}
#img2img_script_container > * {
  margin-top: 15px;
}
#img2img_script_container #script_list {
  margin-top: 20px;
}

/* 调整反推提示词部分的样式 */
#interrogate_col {
  white-space: pre-line;
}
#interrogate_col .bilingual__trans_wrapper em {
  margin-top: 4px;
}

/* 调整反向提示词框的默认高度 */
#img2img_neg_prompt textarea {
  min-height: 87px;
}
/* ------------------------------------------------------ 调整图生图部分界面 结束 */

/* ------------------------------------------------------ 调整部分TabItem Content Padding 开始 */
#tab_openpose_editor {
  padding-top: 25px;
}
#tab_ti {
  padding-top: 18px;
}
/* ------------------------------------------------------ 调整部分TabItem Content Padding 结束 */

/* ------------------------------------------------------ 调整顶部快捷选择的样式 开始 */
#setting_sd_model_checkpoint .bilingual__trans_wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
#setting_sd_model_checkpoint .bilingual__trans_wrapper em {
  margin-left: 6px;
}

#setting_sd_vae .bilingual__trans_wrapper em {
  display: none;
}
/* ------------------------------------------------------ 调整顶部快捷选择的样式 结束 */

/* ------------------------------------------------------ 调整顶部Tabs 开始 */
#tabs button.selected {
  border-bottom: 2px solid var(--accent) !important;
}
/* ------------------------------------------------------ 调整顶部Tabs 结束 */

/* ------------------------------------------------------ 调整模型展示部分 开始 */
.extra-network-cards .card {
  width: 12em;
  height: 17em;
}
.extra-network-cards .card .actions .name {
  font-size: 1.35em;
}
/* ------------------------------------------------------ 调整模型展示部分 结束 */

/* ------------------------------------------------------ 调整Civitai Helper 开始 */
.actions .additional ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.actions .additional ul > * {
  margin: 0 !important;
  padding: 0 5px !important;
  font-size: 14px !important;
}
/* ------------------------------------------------------ 调整Civitai Helper 结束 */

/* ------------------------------------------------------ 调整模型预览部分 开始 */
.extra-network-cards .card:hover {
  box-shadow: 0 0 0 2px var(--accent);
}
/* ------------------------------------------------------ 调整模型预览部分 结束 */

/* ------------------------------------------------------ 调整生成按钮下工具区域 开始 */
#txt2img_tools,
#img2img_tools {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
/* ------------------------------------------------------ 调整生成按钮下工具区域 结束 */

/* ------------------------------------------------------ 调整模板风格 开始 */
#txt2img_styles > label > div > div > div,
#img2img_styles > label > div > div > div {
  min-height: 40px !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

#txt2img_styles input,
#img2img_styles input {
  flex-grow: 1;
}

#txt2img_styles .bilingual__trans_wrapper,
#img2img_styles .bilingual__trans_wrapper {
    min-height: unset;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

#txt2img_styles .bilingual__trans_wrapper em,
#img2img_styles .bilingual__trans_wrapper em {
    margin-left: 6px;
}
/* ------------------------------------------------------ 调整模板风格 结束 */

/* ------------------------------------------------------ 调整设置样式 开始 */
#settings_show_all_pages {
  background: none;
}
/* ------------------------------------------------------ 调整设置风格 结束 */