Fsg-Pp / style.css
Kyo-Kai's picture
Upload 18 files
f4d52c1 verified
@import url("https://fonts.googleapis.com/css2?family=Lexend&display=swap");
:root {
--font: "Lexend", sans-serif !important;
--dark-purple: #242038 !important;
--button-secondary-background-fill: #c5b0fc !important;
--button-secondary-background-fill-hover: #a288e3 !important;
--button-secondary-border-color: var(--dark-purple) !important;
--border-color-primary: #9067c6 !important;
--slider-color: #c5b0fc !important;
--block-title-text-color: #fafaff !important;
--input-background-fill: var(--dark-purple) !important;
--neutral-800: #fafaff !important;
--checkbox-label-background-fill: var(--dark-purple) !important;
--checkbox-label-background-fill-hover: var(--dark-purple) !important;
--checkbox-background-color: #a288e3 !important;
--checkbox-border-color: #a288e3 !important;
--checkbox-background-color-hover: #c5b0fc !important;
--checkbox-background-color-selected: var(--dark-purple) !important;
--checkbox-border-color-focus: var(--dark-purple) !important;
--checkbox-border-color-selected: #c5b0fc !important;
--shadow-spread: 3px !important;
--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset !important;
--shadow-drop: 0px !important;
--input-shadow-focus: 0 0 0 var(--shadow-spread) #c5b0fc, var(--shadow-inset) !important;
--input-border-color-focus: #c5b0fc !important;
--background-fill-primary: var(--dark-purple) !important;
--block-background-fill: var(--dark-purple) !important;
}
@-webkit-keyframes popUp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes popUp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.dark {
--font: "Lexend", sans-serif !important;
--dark-purple: #242038 !important;
--button-secondary-background-fill: #c5b0fc !important;
--button-secondary-background-fill-hover: #a288e3 !important;
--button-secondary-border-color: var(--dark-purple) !important;
--border-color-primary: #9067c6 !important;
--slider-color: #c5b0fc !important;
--block-title-text-color: #fafaff !important;
--input-background-fill: var(--dark-purple) !important;
--neutral-800: #fafaff !important;
--checkbox-label-background-fill: var(--dark-purple) !important;
--checkbox-label-background-fill-hover: var(--dark-purple) !important;
--checkbox-background-color: #a288e3 !important;
--checkbox-border-color: #a288e3 !important;
--checkbox-background-color-hover: #c5b0fc !important;
--checkbox-background-color-selected: var(--dark-purple) !important;
--checkbox-border-color-focus: var(--dark-purple) !important;
--checkbox-border-color-selected: #c5b0fc !important;
--shadow-spread: 3px !important;
--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset !important;
--shadow-drop: 0px !important;
--input-shadow-focus: 0 0 0 var(--shadow-spread) #c5b0fc, var(--shadow-inset) !important;
--input-border-color-focus: #c5b0fc !important;
--background-fill-primary: var(--dark-purple) !important;
--block-background-fill: var(--dark-purple) !important;
}
.gradio-container {
background-color: var(--dark-purple) !important;
}
.svelte-vt1mxs {
background-color: var(--dark-purple) !important;
}
.block.svelte-mppz8v {
background-color: var(--dark-purple) !important;
}
.selected.svelte-1g805jl {
background: var(--border-color-primary) !important;
}
.svelte-1g805jl button:focus {
background: var(--dark-purple) !important;
}
.svelte-1g805jl button {
background: #211a1d !important;
}
.svelte-1g805jl button:hover {
color: #ffff !important;
}
[class*="form"][class*="svelte"] {
border: none !important;
border-radius: 0px !important;
}
#filtering > span,
#pixiv > span,
#pixiv-filters > span,
#imageControl > span,
#zeroAIhover > span {
position: relative;
z-index: 0;
}
#filtering [data-testid="checkbox-group"] > label > span,
#pixiv [data-testid="checkbox-group"] > label > span,
#pixiv-filters [data-testid="checkbox-group"] > label > span,
#imageControl [data-testid="checkbox-group"] > label > span,
#zeroAIhover [data-testid="checkbox-group"] > label > span {
position: relative;
}
#filtering [data-testid="checkbox-group"] > label > span::after,
#pixiv [data-testid="checkbox-group"] > label > span::after,
#pixiv-filters [data-testid="checkbox-group"] > label > span::after,
#imageControl [data-testid="checkbox-group"] > label > span::after,
#zeroAIhover [data-testid="checkbox-group"] > label > span::after {
position: absolute;
z-index: 1;
visibility: hidden;
background-color: #c5b0fc;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
bottom: 150%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
#filtering [data-testid="checkbox-group"] > label > span::before,
#pixiv [data-testid="checkbox-group"] > label > span::before,
#pixiv-filters [data-testid="checkbox-group"] > label > span::before,
#imageControl [data-testid="checkbox-group"] > label > span::before,
#zeroAIhover [data-testid="checkbox-group"] > label > span::before {
content: "";
position: absolute;
visibility: hidden;
bottom: 105%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #c5b0fc transparent transparent transparent;
}
#filtering [data-testid="checkbox-group"] > label:nth-child(6) > span::after,
#zeroAIhover [data-testid="checkbox-group"] > label:nth-child(1) > span::after,
#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(4) > span::after {
content: "AI to download 'good' images";
}
#filtering [data-testid="checkbox-group"] > label:nth-child(5) > span::after {
content: "General (SFW) images only";
}
#filtering [data-testid="checkbox-group"] > label:nth-child(4) > span::after {
content: "Allows questionable images";
}
#filtering [data-testid="checkbox-group"] > label:nth-child(3) > span::after {
content: "Removes explicit images only";
}
#filtering [data-testid="checkbox-group"] > label:nth-child(2) > span::after {
content: "Images must include all tags given";
}
#filtering [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
content: "Order by score";
}
#filtering [data-testid="checkbox-group"] > label > span:hover::after,
#filtering [data-testid="checkbox-group"] > label > span:hover::before,
#pixiv [data-testid="checkbox-group"] > label > span:hover::after,
#pixiv [data-testid="checkbox-group"] > label > span:hover::before,
#pixiv-filters [data-testid="checkbox-group"] > label > span:hover::after,
#pixiv-filters [data-testid="checkbox-group"] > label > span:hover::before,
#imageControl [data-testid="checkbox-group"] > label > span:hover::after,
#imageControl [data-testid="checkbox-group"] > label > span:hover::before,
#zeroAIhover [data-testid="checkbox-group"] > label > span:hover::after,
#zeroAIhover [data-testid="checkbox-group"] > label > span:hover::before {
visibility: visible;
-webkit-animation: popUp 500ms;
animation: popUp 500ms;
}
#filtering [data-testid="checkbox-group"] > label:nth-child(3):hover > span {
color: #e71d36;
}
#filtering [data-testid="checkbox-group"] > label:nth-child(4):hover > span {
color: #ffd151;
}
#filtering [data-testid="checkbox-group"] > label:nth-child(5):hover > span {
color: #21fa90;
}
#pixiv [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
content: "Downloads the previews";
}
#pixiv [data-testid="checkbox-group"] > label:nth-child(2) > span::after {
content: "Downloads through the grid";
}
#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
content: "Downloads native image resolution";
font-size: 0.5rem;
}
#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(2) > span::after,
#imageControl [data-testid="checkbox-group"] > label:nth-child(1) > span::after {
content: "Continues Search if hangup occurs";
}
#pixiv-filters [data-testid="checkbox-group"] > label:nth-child(3) > span::after {
content: "Starts from the oldest images";
}
#viewing-restrictions [data-testid="checkbox-group"] > label:nth-child(1):hover span {
color: #21fa90;
}
#viewing-restrictions [data-testid="checkbox-group"] > label:nth-child(2):hover span {
color: #e71d36;
}
#button-row {
display: flex;
justify-content: center;
align-items: center;
}