UI fixes, minor refactoring
UI: • Added more SVG icons with the ability to specify their size (necessary in some cases). • Lightbox Modal redesigned, added as a new component 'lightboxModal'. • Extensions styles added: ADetailer, ControlNet, Aspect Ratio selector, Inpaint Anything, Model Toolkit. • Tools buttons now have proper width and do not take up extra space. • Generation infotext simplified layout to improve readability. • Extra Networks: removed unnecessary margin for tabnav items; background blur for card actions; fix for names word break. • Metadata info: max width limited to 80% for better readability and to fix inability to close popup in some cases; font set to monospace. • Theme Settings window: description line-height 1.3 for better readability. • Quicksettings: items aligned more neatly; removed unnecessary 8px gap with the main working area. • Styles editor popup: fix Styles dropdown label layout. • PNG Info: full height image display. • Global popup and Lightbox modal overlay unified look. • txt2img, img2img settings controls and accordions layout fix. • Token counters style slightly polished. • Button transition set to '0.12s cubic-bezier'. • Different colors for 'Skip' and 'Interrupt' buttons. • New hover effect for generated images gallery item. • Gallery min height increased to 470px. • 'ETA' value placed to start of Progress bar. • Increased WebUI Settings tab-nav width. Code: • Hardcoded buttons and font sizes replaced with vars for easier editing in 'tokens.ts' (if needed). • Minor styles refactoring. A couple of unused classes removed.pull/458/head
kaalibro
parent
2daeaa3772
commit
0a9cefa674
File diff suppressed because one or more lines are too long
|
|
@ -7,5 +7,9 @@ export const useStyles = createStyles(
|
|||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
`,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,12 +5,8 @@ export const useStyles = createStyles(({ css, token, cx, stylish, prefixCls }) =
|
|||
return {
|
||||
container: css`
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
overflow: hidden auto;
|
||||
padding: 8px;
|
||||
|
||||
pre {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,13 @@ export const useStyles = createStyles(
|
|||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.gap:has(#quicksettings):first-child {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.float {
|
||||
${stylish.blur};
|
||||
border: none;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
|
@ -29,28 +34,35 @@ export const useStyles = createStyles(
|
|||
|
||||
[id^='html_info_']:has(div.prose) {
|
||||
p {
|
||||
padding: 8px;
|
||||
|
||||
font-family: ${token.fontFamilyCode};
|
||||
font-size: 13px !important;
|
||||
color: ${token.colorInfo} !important;
|
||||
|
||||
background: ${token.colorInfoBg};
|
||||
border: 1px solid ${token.colorInfoBorder};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
color: ${token.colorTextDescription} !important;
|
||||
}
|
||||
}
|
||||
|
||||
#txt2img_styles_edit_button， #img2img_styles_edit_button {
|
||||
max-width: 36px !important;
|
||||
[id^='html_info_']:has(div.prose),
|
||||
[id^='html_log_']:has(div.prose) {
|
||||
.pending {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#txt2img_generate,
|
||||
#img2img_generate,
|
||||
#extras_generate {
|
||||
border-radius: ${token.borderRadius}px !important;
|
||||
}
|
||||
|
||||
[id$='img_styles_dialog'] {
|
||||
label {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.gradio-row:not(:first-child) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.block.border_focus {
|
||||
border-color: ${token.colorPrimary} !important;
|
||||
}
|
||||
|
||||
#txt2img_results,
|
||||
#img2img_results,
|
||||
#extras_results {
|
||||
|
|
@ -78,6 +90,16 @@ export const useStyles = createStyles(
|
|||
}
|
||||
}
|
||||
|
||||
#tab_pnginfo {
|
||||
#pnginfo_image {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.block.gradio-html:has(div.prose) p {
|
||||
color: ${token.colorText};
|
||||
}
|
||||
}
|
||||
|
||||
[id$='_override_settings_row']:has(div.hidden) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -91,6 +113,83 @@ export const useStyles = createStyles(
|
|||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-networks {
|
||||
.tab-nav [id*='_extra_'] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gradio-button {
|
||||
&[id$='_extra_sortorder'],
|
||||
&[id$='_extra_refresh'] {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.secondary.lg[id$='_extra_refresh'] {
|
||||
max-width: fit-content;
|
||||
height: var(--button-lg-tool-height) !important;
|
||||
min-height: var(--button-lg-tool-height) !important;
|
||||
max-height: var(--button-lg-tool-height) !important;
|
||||
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra-network-cards .card {
|
||||
box-shadow: 0 0 0 3px ${token.colorFillSecondary};
|
||||
transition: var(--button-transition);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 3px ${token.colorPrimary};
|
||||
}
|
||||
|
||||
.actions {
|
||||
background: rgb(0 0 0 / 30%);
|
||||
backdrop-filter: saturate(120%) blur(4px);
|
||||
box-shadow: none;
|
||||
|
||||
.name {
|
||||
font-size: var(--text-lg);
|
||||
word-break: break-word;
|
||||
line-break: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.description {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.global-popup-close {
|
||||
background-color: var(--popup-overlay) !important;
|
||||
background-image: var(--grain);
|
||||
backdrop-filter: saturate(120%) blur(80px);
|
||||
}
|
||||
|
||||
.global-popup-inner {
|
||||
max-width: 80%;
|
||||
|
||||
.popup-metadata {
|
||||
padding: 16px;
|
||||
|
||||
font-family: var(--font-mono);
|
||||
color: ${token.colorText};
|
||||
word-break: break-word;
|
||||
|
||||
background: ${token.colorBgLayout};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
box-shadow: var(--lightbox-img-shadow);
|
||||
}
|
||||
|
||||
.edit-user-metadata {
|
||||
> div:not(.edit-user-metadata-buttons):not(:last-child) {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
splitView: css`
|
||||
#txt2img_toprow,
|
||||
|
|
@ -102,25 +201,9 @@ export const useStyles = createStyles(
|
|||
`,
|
||||
text2img: css`
|
||||
button[id$='_generate'] {
|
||||
height: 44px !important;
|
||||
min-height: 44px !important;
|
||||
max-height: 44px !important;
|
||||
}
|
||||
|
||||
#txt2img_accordions,
|
||||
#img2img_accordions {
|
||||
flex-direction: column;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
|
||||
> div {
|
||||
background-color: ${token.colorBgContainer}!important;
|
||||
}
|
||||
}
|
||||
|
||||
#img2img_toprow .interrogate-col {
|
||||
flex-flow: row wrap;
|
||||
min-width: 100% !important;
|
||||
height: var(--button-lg-height) !important;
|
||||
min-height: var(--button-lg-height) !important;
|
||||
max-height: var(--button-lg-height) !important;
|
||||
}
|
||||
|
||||
[id$='img_settings'],
|
||||
|
|
@ -145,7 +228,7 @@ export const useStyles = createStyles(
|
|||
border-radius: ${token.borderRadius}px !important;
|
||||
}
|
||||
|
||||
.gradio-tabitem {
|
||||
.gradio-tabitem:has(.gradio-image) {
|
||||
background: ${token.colorFillTertiary} !important;
|
||||
}
|
||||
|
||||
|
|
@ -202,9 +285,29 @@ export const useStyles = createStyles(
|
|||
#script_list {
|
||||
padding: 8px 16px 12px !important;
|
||||
}
|
||||
|
||||
#axis_options {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#txt2img_accordions,
|
||||
#img2img_accordions {
|
||||
flex-direction: column;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
|
||||
> div {
|
||||
background-color: ${token.colorBgContainer}!important;
|
||||
}
|
||||
}
|
||||
|
||||
#img2img_toprow .interrogate-col {
|
||||
flex-flow: column wrap;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
#img2img_column_batch {
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
|
@ -214,9 +317,15 @@ export const useStyles = createStyles(
|
|||
[id$='_settings'] {
|
||||
min-width: 0 !important;
|
||||
|
||||
div.svelte-15lo0d8 > *,
|
||||
div.svelte-15lo0d8 > .form > * {
|
||||
flex: 1;
|
||||
[id^='img2img_tab_resize_'].tabitem.gradio-tabitem {
|
||||
padding: 16px 0 !important;
|
||||
}
|
||||
|
||||
[id$='img_seed_extras'],
|
||||
#inpaint_controls {
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -265,8 +374,7 @@ export const useStyles = createStyles(
|
|||
|
||||
padding: 8px !important;
|
||||
|
||||
font-family: ${token.fontFamilyCode};
|
||||
font-size: 13px !important;
|
||||
font-family: var(--font);
|
||||
line-height: 1.5 !important;
|
||||
word-wrap: break-word !important;
|
||||
white-space: pre-wrap !important;
|
||||
|
|
@ -295,11 +403,12 @@ export const useStyles = createStyles(
|
|||
|
||||
.block.token-counter {
|
||||
z-index: 10 !important;
|
||||
top: -12px;
|
||||
top: -14px;
|
||||
right: 4px;
|
||||
scale: 0.8;
|
||||
|
||||
background: ${token.colorBgContainer} !important;
|
||||
border-radius: 0.4em !important;
|
||||
|
||||
> .translucent {
|
||||
display: none;
|
||||
|
|
@ -307,7 +416,13 @@ export const useStyles = createStyles(
|
|||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: ${token.fontFamilyCode};
|
||||
font-family: var(--font-mono);
|
||||
border: 2px solid ${token.colorFillSecondary} !important;
|
||||
}
|
||||
|
||||
span,
|
||||
&.error span {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,6 @@ export const useStyles = createStyles(
|
|||
display: none;
|
||||
}
|
||||
|
||||
.extra-networks .tab-nav > button {
|
||||
&:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#txt2img_extra_search,
|
||||
#img2img_extra_search {
|
||||
width: 100% !important;
|
||||
|
|
@ -35,6 +29,11 @@ export const useStyles = createStyles(
|
|||
}
|
||||
|
||||
.extra-network-cards {
|
||||
overflow: unset;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(${size}px, 1fr));
|
||||
gap: 8px;
|
||||
|
||||
height: unset;
|
||||
min-height: unset;
|
||||
|
||||
|
|
@ -45,25 +44,6 @@ export const useStyles = createStyles(
|
|||
.additional {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-network-thumbs .name {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
font-size: 12px !important;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.extra-network-cards,
|
||||
.extra-network-thumbs {
|
||||
overflow: unset;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(${size}px, 1fr));
|
||||
gap: 8px;
|
||||
|
||||
&:has(.nocards) {
|
||||
display: flex;
|
||||
|
|
@ -78,7 +58,13 @@ export const useStyles = createStyles(
|
|||
> * {
|
||||
height: 40px !important;
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-size: var(--text-md) !important;
|
||||
}
|
||||
|
||||
> button {
|
||||
&:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,6 +90,10 @@ export const useStyles = createStyles(
|
|||
}
|
||||
|
||||
.actions {
|
||||
background: rgb(0 0 0 / 30%);
|
||||
backdrop-filter: saturate(120%) blur(4px);
|
||||
box-shadow: none !important;
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
|
@ -112,8 +102,6 @@ export const useStyles = createStyles(
|
|||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 1px rgb(0 0 0 / 90%);
|
||||
white-space: nowrap;
|
||||
|
||||
background: linear-gradient(0deg, rgb(0 0 0 / 80%), transparent);
|
||||
}
|
||||
|
||||
.additional {
|
||||
|
|
@ -132,7 +120,7 @@ export const useStyles = createStyles(
|
|||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
font-size: 15px !important;
|
||||
font-size: var(--text-md) !important;
|
||||
color: #fff;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 1px 1px black;
|
||||
|
|
@ -140,6 +128,12 @@ export const useStyles = createStyles(
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
a:hover {
|
||||
color: var(--link-text-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -159,7 +153,7 @@ export const useStyles = createStyles(
|
|||
scale 400ms ${token.motionEaseOut};
|
||||
|
||||
.name {
|
||||
font-size: 12px !important;
|
||||
font-size: var(--text-sm) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -171,6 +165,8 @@ export const useStyles = createStyles(
|
|||
}
|
||||
|
||||
.name {
|
||||
word-break: break-word;
|
||||
line-break: auto;
|
||||
white-space: unset;
|
||||
}
|
||||
}
|
||||
|
|
@ -186,7 +182,7 @@ export const useStyles = createStyles(
|
|||
border-bottom-left-radius: ${token.borderRadius}px;
|
||||
|
||||
> div {
|
||||
font-size: 15px !important;
|
||||
font-size: var(--text-md) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -211,7 +207,7 @@ export const useStyles = createStyles(
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 36px !important;
|
||||
max-height: var(--button-lg-tool-height) !important;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ export const useStyles = createStyles(
|
|||
`,
|
||||
quicksettings: css`
|
||||
#quicksettings {
|
||||
align-items: start;
|
||||
padding: 16px !important;
|
||||
}
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,37 +1,47 @@
|
|||
import {
|
||||
archiveRestore,
|
||||
arrowDown,
|
||||
arrowDownLeft,
|
||||
arrowDownWideNarrow,
|
||||
arrowLeft,
|
||||
arrowRight,
|
||||
arrowRightLeft,
|
||||
arrowUpDown,
|
||||
book,
|
||||
box,
|
||||
brush,
|
||||
clipboardList,
|
||||
cornerRightUp,
|
||||
dices,
|
||||
download,
|
||||
fileArchive,
|
||||
folderClosed,
|
||||
grid2x2,
|
||||
image,
|
||||
laptop2,
|
||||
maximize,
|
||||
panelRight,
|
||||
paperclip,
|
||||
penSquare,
|
||||
pencilRuler,
|
||||
pipette,
|
||||
play,
|
||||
refreshCcw,
|
||||
save,
|
||||
settings,
|
||||
trash,
|
||||
undo,
|
||||
wand2,
|
||||
webcam, // @ts-ignore
|
||||
webcam,
|
||||
x, // @ts-ignore
|
||||
} from 'lucide-static';
|
||||
|
||||
const replaceIcon = (button: HTMLButtonElement, emoji: string[], svg: string) => {
|
||||
if (!button?.textContent || !svg) return;
|
||||
const replaceIcon = (element: HTMLElement, emoji: string[], svg: string, size: number) => {
|
||||
if (!element?.textContent || !svg) return;
|
||||
for (const e of emoji) {
|
||||
if (button?.textContent?.includes(e)) {
|
||||
button.innerHTML = svg
|
||||
.replace(`width="24"`, `width="16"`)
|
||||
.replace(`height="24"`, `height="16"`);
|
||||
if (element?.textContent?.includes(e)) {
|
||||
element.innerHTML = svg
|
||||
.replace(`width="24"`, `width="${size}"`)
|
||||
.replace(`height="24"`, `height="${size}"`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -39,30 +49,47 @@ const replaceIcon = (button: HTMLButtonElement, emoji: string[], svg: string) =>
|
|||
export default () => {
|
||||
console.time('🤯 [svgIcon] replace');
|
||||
for (const button of document.querySelectorAll('button')) {
|
||||
replaceIcon(button, ['🖌️'], penSquare);
|
||||
replaceIcon(button, ['🗃️'], fileArchive);
|
||||
replaceIcon(button, ['🖼️'], pipette);
|
||||
replaceIcon(button, ['🎨️'], image);
|
||||
replaceIcon(button, ['📂'], folderClosed);
|
||||
replaceIcon(button, ['🔄', '🔁', '♻️'], refreshCcw);
|
||||
replaceIcon(button, ['↙️'], arrowDownLeft);
|
||||
replaceIcon(button, ['⤴'], cornerRightUp);
|
||||
replaceIcon(button, ['↕️'], arrowDownWideNarrow);
|
||||
replaceIcon(button, ['🗑️'], trash);
|
||||
replaceIcon(button, ['📋'], clipboardList);
|
||||
replaceIcon(button, ['💾'], save);
|
||||
replaceIcon(button, ['🎲️'], dices);
|
||||
replaceIcon(button, ['🪄'], wand2);
|
||||
replaceIcon(button, ['⚙️'], settings);
|
||||
replaceIcon(button, ['➡️'], arrowRight);
|
||||
replaceIcon(button, ['⇅'], arrowUpDown);
|
||||
replaceIcon(button, ['⇄'], arrowRightLeft);
|
||||
replaceIcon(button, ['🎴'], panelRight);
|
||||
replaceIcon(button, ['🌀'], archiveRestore);
|
||||
replaceIcon(button, ['💥'], play);
|
||||
replaceIcon(button, ['📷'], webcam);
|
||||
replaceIcon(button, ['📝'], laptop2);
|
||||
replaceIcon(button, ['📐'], pencilRuler);
|
||||
replaceIcon(button, ['🖌️'], penSquare, 16);
|
||||
replaceIcon(button, ['🗃️'], fileArchive, 16);
|
||||
replaceIcon(button, ['🖼️'], image, 16);
|
||||
replaceIcon(button, ['🎨️'], brush, 16);
|
||||
replaceIcon(button, ['📂'], folderClosed, 16);
|
||||
replaceIcon(button, ['🔄', '🔁', '♻️'], refreshCcw, 16);
|
||||
replaceIcon(button, ['↙️'], arrowDownLeft, 16);
|
||||
replaceIcon(button, ['⤴'], cornerRightUp, 16);
|
||||
replaceIcon(button, ['↕️'], arrowDownWideNarrow, 16);
|
||||
replaceIcon(button, ['🗑️'], trash, 16);
|
||||
replaceIcon(button, ['📋'], clipboardList, 16);
|
||||
replaceIcon(button, ['💾'], save, 16);
|
||||
replaceIcon(button, ['🎲️'], dices, 16);
|
||||
replaceIcon(button, ['🪄'], wand2, 16);
|
||||
replaceIcon(button, ['⚙️'], settings, 16);
|
||||
replaceIcon(button, ['➡️'], arrowRight, 16);
|
||||
replaceIcon(button, ['⇅'], arrowUpDown, 16);
|
||||
replaceIcon(button, ['⇄'], arrowRightLeft, 16);
|
||||
replaceIcon(button, ['🎴'], panelRight, 16);
|
||||
replaceIcon(button, ['🌀'], archiveRestore, 16);
|
||||
replaceIcon(button, ['💥'], play, 16);
|
||||
replaceIcon(button, ['📷'], webcam, 16);
|
||||
replaceIcon(button, ['📝'], laptop2, 16);
|
||||
replaceIcon(button, ['📐'], pencilRuler, 16);
|
||||
replaceIcon(button, ['⬇️'], arrowDown, 16);
|
||||
replaceIcon(button, ['↩'], undo, 16);
|
||||
replaceIcon(button, ['📒'], book, 16);
|
||||
replaceIcon(button, ['📎'], paperclip, 16);
|
||||
replaceIcon(button, ['📦'], box, 16);
|
||||
}
|
||||
|
||||
for (const span of document.querySelectorAll('span')) {
|
||||
replaceIcon(span, ['⤡'], maximize, 36);
|
||||
replaceIcon(span, ['⊞'], grid2x2, 36);
|
||||
replaceIcon(span, ['🖫'], download, 36);
|
||||
replaceIcon(span, ['×'], x, 36);
|
||||
}
|
||||
|
||||
for (const a of document.querySelectorAll('a')) {
|
||||
replaceIcon(a, ['❮'], arrowLeft, 36);
|
||||
replaceIcon(a, ['❯'], arrowRight, 36);
|
||||
}
|
||||
console.timeEnd('🤯 [svgIcon] replace');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default (token: Theme) => css`
|
|||
min-width: fit-content !important;
|
||||
|
||||
&.gradio-button {
|
||||
&.tool {
|
||||
&.tool:not(.hidden) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -14,12 +14,12 @@ export default (token: Theme) => css`
|
|||
width: 36px;
|
||||
min-width: 36px !important;
|
||||
max-width: 36px !important;
|
||||
height: 36px;
|
||||
min-height: 36px !important;
|
||||
max-height: 36px;
|
||||
height: var(--button-lg-tool-height);
|
||||
min-height: var(--button-lg-tool-height) !important;
|
||||
max-height: var(--button-lg-tool-height);
|
||||
padding: 0;
|
||||
|
||||
font-size: 14px;
|
||||
font-size: var(--text-md);
|
||||
line-height: 1;
|
||||
|
||||
background: ${token.colorFillSecondary};
|
||||
|
|
@ -30,22 +30,18 @@ export default (token: Theme) => css`
|
|||
background: ${token.colorFill};
|
||||
}
|
||||
|
||||
&.lg {
|
||||
max-width: max(36px, 100%) !important;
|
||||
}
|
||||
}
|
||||
&.secondary,
|
||||
&.primary {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
&.secondary,
|
||||
&.primary {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
font-size: var(--text-md);
|
||||
line-height: 1;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:active {
|
||||
box-shadow: ${token.boxShadowSecondary};
|
||||
&:active {
|
||||
box-shadow: ${token.boxShadowSecondary};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,61 +62,64 @@ export default (token: Theme) => css`
|
|||
&.primary,
|
||||
&.secondary {
|
||||
&.lg {
|
||||
height: 44px !important;
|
||||
min-height: 44px !important;
|
||||
max-height: 44px !important;
|
||||
height: var(--button-lg-height) !important;
|
||||
min-height: var(--button-lg-height) !important;
|
||||
max-height: var(--button-lg-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[id$='_generate'] {
|
||||
height: 44px !important;
|
||||
min-height: 44px !important;
|
||||
max-height: 44px !important;
|
||||
height: var(--button-lg-height) !important;
|
||||
min-height: var(--button-lg-height) !important;
|
||||
max-height: var(--button-lg-height) !important;
|
||||
}
|
||||
|
||||
&[id$='_interrupt'] {
|
||||
min-width: 0;
|
||||
|
||||
color: var(--button-cancel-text-color) !important;
|
||||
|
||||
background: ${token.colorError} !important;
|
||||
border: 1px solid ${token.colorError};
|
||||
border-right: none !important;
|
||||
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px !important;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: ${token.colorErrorHover} !important;
|
||||
border: 1px solid ${token.colorErrorHover};
|
||||
}
|
||||
}
|
||||
|
||||
&[id$='_skip'] {
|
||||
min-width: 0;
|
||||
background: ${token.colorBorderSecondary} !important;
|
||||
border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0 !important;
|
||||
}
|
||||
|
||||
&[id$='_interrupt'],
|
||||
&[id$='_skip'] {
|
||||
color: #fff !important;
|
||||
background: ${token.colorError} !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
background: ${token.colorErrorHover} !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #fff !important;
|
||||
background: ${token.colorErrorActive} !important;
|
||||
background: ${token.colorBorder} !important;
|
||||
}
|
||||
}
|
||||
|
||||
&#interrogate,
|
||||
&#deepbooru {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
max-height: fit-content !important;
|
||||
line-height: inherit;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[id^='image_buttons_'] {
|
||||
flex-wrap: wrap;
|
||||
gap: 4px !important;
|
||||
|
||||
> button {
|
||||
button.gradio-button.tool {
|
||||
flex: 1;
|
||||
min-width: min(30%, 56px);
|
||||
font-size: 12px !important;
|
||||
max-width: max(36px, 100%) !important;
|
||||
font-size: var(--text-md) !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default (token: Theme) => {
|
|||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
font-size: 14px;
|
||||
font-size: var(--text-md);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,19 +8,19 @@ export default (token: Theme) => {
|
|||
gap: 12px !important;
|
||||
}
|
||||
|
||||
&.gradio-box,
|
||||
&.gradio-accordion {
|
||||
&:not(.hidden):has(div) {
|
||||
margin: 0 !important;
|
||||
padding: 16px !important;
|
||||
border: 1px solid ${token.colorBorderSecondary} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.block.padded {
|
||||
&.gradio-box:not(.gradio-accordion) {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
&.gradio-box,
|
||||
&.gradio-accordion {
|
||||
&:not(.hidden):has(div) {
|
||||
margin: 0 !important;
|
||||
padding: 16px !important;
|
||||
border: 1px solid ${token.colorBorderSecondary} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
@ -45,7 +45,7 @@ export default (token: Theme) => {
|
|||
|
||||
#img2img_results,
|
||||
#txt2img_results,
|
||||
#extras_gallery_container {
|
||||
#extras_results {
|
||||
position: sticky;
|
||||
top: 80px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,92 @@ export default (token: Theme) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ADetailer */
|
||||
[id*='img_adetailer_ad_toprow_prompt'] {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
[id*='_adetailer_ad_detection_accordion'].block.padded.gradio-accordion,
|
||||
[id*='_adetailer_ad_mask_preprocessing_accordion'].block.padded.gradio-accordion,
|
||||
[id*='_adetailer_ad_inpainting_accordion'].block.padded.gradio-accordion {
|
||||
margin: var(--spacing-lg) 0 !important;
|
||||
|
||||
.label-wrap.open {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ControlNet */
|
||||
.cnet-badge.primary {
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.3;
|
||||
color: var(--body-background-fill);
|
||||
background-color: ${token.colorSuccess};
|
||||
}
|
||||
|
||||
.tab-nav button {
|
||||
&.cnet-unit-active,
|
||||
&.selected.cnet-unit-active {
|
||||
color: ${token.colorSuccess} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Aspect Ratio selector */
|
||||
[id$='2img_container_aspect_ratio'] {
|
||||
padding: var(--block-padding);
|
||||
border: 1px solid var(--block-border-color);
|
||||
border-radius: 8px;
|
||||
|
||||
#arc_empty_space {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button[id$='_calculator_button'] {
|
||||
max-width: fit-content !important;
|
||||
height: var(--button-lg-tool-height) !important;
|
||||
min-height: var(--button-lg-tool-height) !important;
|
||||
max-height: var(--button-lg-tool-height) !important;
|
||||
padding: 0 1.25em !important;
|
||||
|
||||
font-size: var(--text-md);
|
||||
font-weight: 500;
|
||||
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
#arc_panel {
|
||||
.block.gradio-markdown.padded.hide-container {
|
||||
.hide,
|
||||
.pending {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gradio-column:has([id$='_arc_tool_buttons']) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[id$='2img_container_aspect_ratio'],
|
||||
[id$='2img_row_resolutions'] {
|
||||
gap: 0.5em !important;
|
||||
}
|
||||
|
||||
/* Inpaint Anything */
|
||||
#padding_btn {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Model Toolkit */
|
||||
#tab_checkpoint_toolkit {
|
||||
button {
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -45,8 +45,52 @@ export default (token: Theme) => {
|
|||
}
|
||||
}
|
||||
|
||||
button.thumbnail-item {
|
||||
background: ${token.colorBgContainer} !important;
|
||||
.block.gradio-gallery {
|
||||
.thumbnail-item {
|
||||
position: unset;
|
||||
background: ${token.colorBgContainer} !important;
|
||||
box-shadow: none;
|
||||
|
||||
&.thumbnail-small {
|
||||
transform: none;
|
||||
border-radius: 4px;
|
||||
transition: var(--button-transition);
|
||||
}
|
||||
|
||||
&.thumbnail-lg {
|
||||
border-radius: 5px;
|
||||
transition: var(--button-transition);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 0 0 1px ${token.colorBorder},
|
||||
var(--thumbnail-shadow);
|
||||
}
|
||||
|
||||
&.thumbnail-small:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 0 0 1px ${token.colorBorder};
|
||||
}
|
||||
}
|
||||
|
||||
> .grid-wrap {
|
||||
margin: -52px;
|
||||
padding: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
[id$='_gallery_container'] {
|
||||
min-height: 470px;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
|
||||
[id$='_gallery'] {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ export default (token: Theme) => {
|
|||
margin: 0 !important;
|
||||
}
|
||||
|
||||
label:has(input[type='radio']),
|
||||
label:has(input[type='checkbox']) {
|
||||
border-radius: ${token.borderRadius}px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
&:not([type='range'], [type='checkbox'], [type='number'], [type='radio'], .border-none) {
|
||||
resize: none;
|
||||
|
|
@ -13,7 +18,7 @@ export default (token: Theme) => {
|
|||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 36px !important;
|
||||
height: var(--button-lg-tool-height) !important;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -56,7 +61,7 @@ export default (token: Theme) => {
|
|||
}
|
||||
|
||||
&[type='number'] {
|
||||
height: 28px !important;
|
||||
height: var(--button-lg-tool-height) !important;
|
||||
border-radius: ${token.borderRadius}px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import { Theme, css } from 'antd-style';
|
||||
|
||||
export default (token: Theme) => css`
|
||||
#lightboxModal {
|
||||
background-color: var(--popup-overlay) !important;
|
||||
background-image: var(--grain);
|
||||
backdrop-filter: saturate(120%) blur(80px);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modalControls {
|
||||
transition: var(--button-transition) !important;
|
||||
}
|
||||
|
||||
.modalControls:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.modalControls span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 32px !important;
|
||||
|
||||
font-size: 35px !important;
|
||||
color: ${token.colorTextDescription} !important;
|
||||
text-align: center;
|
||||
text-shadow: none !important;
|
||||
|
||||
transition: var(--button-transition);
|
||||
}
|
||||
|
||||
.modalControls span:hover,
|
||||
.modalControls span:focus {
|
||||
color: ${token.colorPrimary} !important;
|
||||
}
|
||||
|
||||
#lightboxModal > img:not(.modalImageFullscreen) {
|
||||
box-shadow: var(--lightbox-img-shadow);
|
||||
}
|
||||
|
||||
.modalPrev,
|
||||
.modalNext {
|
||||
top: 0 !important;
|
||||
transform: translate(0, calc(50% + 63px)) !important;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 48px !important;
|
||||
height: 50%;
|
||||
padding: 8px !important;
|
||||
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
color: ${token.colorTextDescription} !important;
|
||||
|
||||
background-color: ${token.colorFillTertiary};
|
||||
border-radius: 0 16px 16px 0 !important;
|
||||
|
||||
transition: var(--button-transition) !important;
|
||||
}
|
||||
|
||||
.modalNext {
|
||||
border-radius: 16px 0 0 16px !important;
|
||||
}
|
||||
|
||||
.modalPrev:hover,
|
||||
.modalNext:hover {
|
||||
color: ${token.colorPrimary} !important;
|
||||
background-color: ${token.colorFillSecondary} !important;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,6 +1,20 @@
|
|||
import { Theme, css } from 'antd-style';
|
||||
|
||||
export default (token: Theme) => css`
|
||||
.gradio-dropdown {
|
||||
.wrap,
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container .wrap {
|
||||
.wrap-inner input {
|
||||
font-size: var(--text-sm);
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,7 @@ export default (token: Theme) => css`
|
|||
overflow: hidden;
|
||||
|
||||
opacity: 1 !important;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
${token.colorFillQuaternary},
|
||||
${token.colorFill}
|
||||
) !important;
|
||||
background: ${token.colorFillQuaternary} !important;
|
||||
backdrop-filter: saturate(180%) blur(10px);
|
||||
border: 1px solid ${token.colorBorder};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
|
|
@ -48,7 +44,7 @@ export default (token: Theme) => css`
|
|||
position: relative !important;
|
||||
top: 0 !important;
|
||||
overflow: hidden;
|
||||
background: ${token.colorBgElevated} !important;
|
||||
background: ${token.colorFillSecondary} !important;
|
||||
|
||||
> .progress {
|
||||
position: relative;
|
||||
|
|
@ -56,10 +52,12 @@ export default (token: Theme) => css`
|
|||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 40%);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-md);
|
||||
font-weight: 600 !important;
|
||||
text-shadow: 0 1px 4px rgb(0 0 0 / 80%);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -12,28 +12,32 @@ export default (token: Theme) => css`
|
|||
border-radius: ${token.borderRadiusXS}px;
|
||||
outline: none;
|
||||
|
||||
transition: var(--button-transition);
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
width: 12px;
|
||||
height: 16px;
|
||||
|
||||
appearance: none;
|
||||
background: ${token.colorBgElevated};
|
||||
border: 1px solid ${token.colorTextQuaternary};
|
||||
background: ${token.colorPrimary};
|
||||
border: 1px solid ${token.colorPrimary};
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
|
||||
transition: var(--button-transition);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: ${token.colorPrimary};
|
||||
border-color: ${token.colorPrimary};
|
||||
background: ${token.colorPrimaryHover};
|
||||
border-color: ${token.colorPrimaryHover};
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${token.colorPrimaryBorderHover};
|
||||
background: ${token.colorPrimaryHover};
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: ${token.colorPrimary};
|
||||
background: ${token.colorPrimaryHover};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -29,13 +29,14 @@ export default (token: Theme) => css`
|
|||
min-width: 100px;
|
||||
padding: 8px !important;
|
||||
|
||||
font-size: 14px;
|
||||
font-size: var(--text-md);
|
||||
color: ${token.colorTextTertiary} !important;
|
||||
|
||||
background: ${token.colorFillTertiary} !important;
|
||||
border: none !important;
|
||||
border-radius: 4px !important;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition: var(--button-transition);
|
||||
|
||||
&:hover {
|
||||
color: ${token.colorText} !important;
|
||||
|
|
@ -56,22 +57,40 @@ export default (token: Theme) => css`
|
|||
}
|
||||
}
|
||||
|
||||
#tab_settings .tab-nav {
|
||||
button {
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
#tab_settings {
|
||||
#settings .tab-nav {
|
||||
width: 15%;
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
width: 100%;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&.selected {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-left: 2px solid var(--color-primary) !important;
|
||||
border-radius: 0 !important;
|
||||
#settings_show_all_pages {
|
||||
width: auto;
|
||||
background: ${token.colorFillTertiary} !important;
|
||||
border: 1px solid ${token.colorBorderSecondary};
|
||||
border-radius: ${token.borderRadius}px !important;
|
||||
|
||||
&:hover {
|
||||
background: ${token.colorFill} !important;
|
||||
border-color: ${token.colorBorder} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabitem {
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
#settings_search {
|
||||
margin: 0 0 var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import extensions from './components/extensions';
|
|||
import gallery from './components/gallery';
|
||||
import input from './components/input';
|
||||
import label from './components/label';
|
||||
import lightboxModal from './components/lightboxModal';
|
||||
import options from './components/options';
|
||||
import progress from './components/progress';
|
||||
import slider from './components/slider';
|
||||
|
|
@ -30,6 +31,7 @@ const GlobalStyle = createGlobalStyle(({ theme }) => [
|
|||
table(theme),
|
||||
tabs(theme),
|
||||
extensions(theme),
|
||||
lightboxModal(theme),
|
||||
]);
|
||||
|
||||
export default GlobalStyle;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default (token: Theme) => {
|
|||
--font-mono: ${token.fontFamilyCode};
|
||||
--body-background-fill: ${token.colorBgLayout};
|
||||
--body-text-color: ${token.colorText};
|
||||
--body-text-size: ${token.fontSize}px;
|
||||
--body-text-size: var(--text-md);
|
||||
--body-text-weight: 400;
|
||||
--embed-radius: ${token.borderRadius}px;
|
||||
--color-accent: ${token.colorPrimary};
|
||||
|
|
@ -95,7 +95,7 @@ export default (token: Theme) => {
|
|||
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
|
||||
--block-label-radius: ${token.borderRadius}px;
|
||||
--block-label-right-radius: ${token.borderRadius}px;
|
||||
--block-label-text-size: ${token.fontSizeSM}px;
|
||||
--block-label-text-size: var(--text-sm);
|
||||
--block-label-text-weight: 400;
|
||||
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
|
||||
--block-radius: ${token.borderRadius}px;
|
||||
|
|
@ -106,7 +106,7 @@ export default (token: Theme) => {
|
|||
--block-title-text-color: ${token.colorText};
|
||||
--block-title-padding: 0;
|
||||
--block-title-radius: none;
|
||||
--block-title-text-size: ${token.fontSize}px;
|
||||
--block-title-text-size: var(--text-md);
|
||||
--block-title-text-weight: 400;
|
||||
--container-radius: ${token.borderRadiusLG}px;
|
||||
--form-gap-width: 1px;
|
||||
|
|
@ -114,7 +114,7 @@ export default (token: Theme) => {
|
|||
--panel-background-fill: ${token.colorBgContainer};
|
||||
--panel-border-color: ${token.colorBorderSecondary};
|
||||
--panel-border-width: 0;
|
||||
--section-header-text-size: ${token.fontSize}px;
|
||||
--section-header-text-size: var(--text-md);
|
||||
--section-header-text-weight: 400;
|
||||
--chatbot-code-background-color: ${token.colorBgContainer};
|
||||
--checkbox-background-color: ${token.colorFillTertiary};
|
||||
|
|
@ -136,10 +136,10 @@ export default (token: Theme) => {
|
|||
--checkbox-label-gap: var(--spacing-lg);
|
||||
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
|
||||
--checkbox-label-shadow: none;
|
||||
--checkbox-label-text-size: ${token.fontSize}px;
|
||||
--checkbox-label-text-size: var(--text-md);
|
||||
--checkbox-label-text-weight: 400;
|
||||
--checkbox-shadow: none;
|
||||
--checkbox-label-text-color: ${token.colorTextDescription};
|
||||
--checkbox-label-text-color: ${token.colorText};
|
||||
--checkbox-label-text-color-selected: ${token.colorText};
|
||||
--error-background-fill: ${token.colorErrorBg};
|
||||
--error-border-color: ${token.colorErrorBorder};
|
||||
|
|
@ -157,10 +157,10 @@ export default (token: Theme) => {
|
|||
--input-radius: ${token.borderRadius}px;
|
||||
--input-shadow: none;
|
||||
--input-shadow-focus: none;
|
||||
--input-text-size: ${token.fontSize}px;
|
||||
--input-text-size: var(--text-md);
|
||||
--input-text-weight: 400;
|
||||
--loader-color: ${token.colorPrimary};
|
||||
--prose-text-size: ${token.fontSize}px;
|
||||
--prose-text-size: var(--text-md);
|
||||
--prose-text-weight: 400;
|
||||
--prose-header-text-weight: 600;
|
||||
--slider-color: ${token.colorPrimary};
|
||||
|
|
@ -179,7 +179,7 @@ export default (token: Theme) => {
|
|||
--button-cancel-text-color-hover: ${readableColor(token.colorError)};
|
||||
--button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
|
||||
--button-large-radius: ${token.borderRadius}px;
|
||||
--button-large-text-size: ${token.fontSizeLG}px;
|
||||
--button-large-text-size: var(--text-lg);
|
||||
--button-large-text-weight: 600;
|
||||
--button-primary-background-fill: ${token.colorPrimary};
|
||||
--button-primary-background-fill-hover: ${token.colorPrimaryHover};
|
||||
|
|
@ -198,14 +198,25 @@ export default (token: Theme) => {
|
|||
--button-shadow-hover: none;
|
||||
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
|
||||
--button-small-radius: ${token.borderRadiusSM}px;
|
||||
--button-small-text-size: ${token.fontSize}px;
|
||||
--button-small-text-size: var(--text-md);
|
||||
--button-small-text-weight: 400;
|
||||
--button-transition: none;
|
||||
--button-transition: all 0.12s cubic-bezier(0.35, 0.12, 0.17, 1);
|
||||
--button-lg-height: 44px;
|
||||
--button-lg-tool-height: 36px;
|
||||
--popup-overlay: rgb(180 187 190 / 70%);
|
||||
--thumbnail-shadow: 0 24px 16px -10px rgb(0 0 0 / 15%), 0 36px 40px -15px rgb(0 0 0 / 30%);
|
||||
--lightbox-img-shadow: 0 70px 80px -10px rgb(0 0 0 / 10%), 0 30px 60px -15px rgb(0 0 0 / 10%),
|
||||
0 50px 40px -30px rgb(0 0 0 / 8%);
|
||||
--grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.dark {
|
||||
--checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' 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='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
||||
--popup-overlay: rgb(39 45 47 / 80%);
|
||||
--thumbnail-shadow: 0 24px 16px -10px rgb(0 0 0 / 30%), 0 36px 40px -15px rgb(0 0 0 / 40%);
|
||||
--lightbox-img-shadow: 0 70px 80px -10px rgb(0 0 0 / 30%), 0 30px 60px -15px rgb(0 0 0 / 20%),
|
||||
0 50px 40px -30px rgb(0 0 0 / 30%);
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue