1580158
/
sd-webui-lobe-theme
mirror of https://github.com/canisminor1990/sd-webui-lobe-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

💄 style: Style fixes 

Remove some conflicting '!important' CSS flags.
Make commas in Prompt Highlighter more prominent.
Add txt2img/img2img Extra options group/accordion styling.
Aspect Ratio extension style fixes.
Popup max-height fix.
pull/493/head
kaalibro 2023-12-16 13:02:56 +06:00
parent 52c08974a1
commit 75b009d81d
No known key found for this signature in database
6 changed files with 220 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
javascript/main.js
View File

File diff suppressed because one or more lines are too long

11
src/features/Content/style.ts
View File

@ -285,8 +285,8 @@ export const useStyles = createStyles(
margin: 0 !important; margin: 0 !important;
padding: 16px !important; padding: 16px !important;
background-color: ${token.colorBgContainer}!important; background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px !important; border-radius: ${token.borderRadius}px;
} }
.gradio-tabitem:has(.gradio-image) { .gradio-tabitem:has(.gradio-image) {
@ -360,7 +360,12 @@ export const useStyles = createStyles(
background: transparent !important; background: transparent !important;
> div { > div {
background-color: ${token.colorBgContainer}!important; background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px !important;
}
span.icon {
margin-right: 0;
} }
} }

2
src/modules/PromptHighlight/features/promptTheme.ts
View File

@ -19,7 +19,7 @@ export const themeConfig: any = (isDarkMode: ThemeAppearance) => {
{ {
scope: 'comma', scope: 'comma',
settings: { settings: {
foreground: colorScales.gray[type][6], foreground: colorScales.gray[type][11],
}, },
}, },
{ {

44
src/styles/components/extensions.ts
View File

@ -87,9 +87,10 @@ export default (token: Theme) => {
/* Aspect Ratio selector */ /* Aspect Ratio selector */
[id$='2img_container_aspect_ratio'] { [id$='2img_container_aspect_ratio'] {
padding: var(--block-padding); padding: 16px;
background-color: ${token.colorBgContainer};
border: 1px solid var(--block-border-color); border: 1px solid var(--block-border-color);
border-radius: 8px; border-radius: ${token.borderRadius}px;
#arc_empty_space { #arc_empty_space {
display: none; display: none;
@ -106,10 +107,12 @@ export default (token: Theme) => {
font-weight: 500; font-weight: 500;
border: none; border: none;
border-radius: 0.5em; border-radius: ${token.borderRadius}px;
} }
#arc_panel { #arc_panel {
padding: 8px 0 0 !important;
.block.gradio-markdown.padded.hide-container { .block.gradio-markdown.padded.hide-container {
.hide, .hide,
.pending { .pending {
@ -139,6 +142,41 @@ export default (token: Theme) => {
align-self: end; align-self: end;
} }
} }
/* WebUI txt2img/img2img Extra options */
.gr-group:has([id^='extra_options_'].gradio-accordion) {
padding: 4px 0 !important;
}
.gr-group:has([id^='extra_options_'].gradio-group) {
padding: 0 0 4px !important;
}
.gr-group:has([id^='extra_options_']) {
background: transparent;
.styler {
flex-grow: 1;
}
[id^='extra_options_'] {
&.gradio-accordion {
background-color: ${token.colorBgContainer};
}
&.gradio-group {
padding: 16px;
background-color: ${token.colorBgContainer};
border-radius: ${token.borderRadius}px;
}
.styler,
.gap,
.form {
gap: 16px;
}
}
}
} }
`; `;
}; };

6
src/styles/components/input.ts
View File

@ -6,6 +6,12 @@ export default (token: Theme) => {
margin: 0 !important; margin: 0 !important;
} }
.block.gradio-slider {
input[type='number'] {
margin-left: 12px;
}
}
label:has(input[type='radio']), label:has(input[type='radio']),
label:has(input[type='checkbox']) { label:has(input[type='checkbox']) {
border-radius: ${token.borderRadius}px !important; border-radius: ${token.borderRadius}px !important;

90
src/styles/components/popup.ts
View File

@ -1,59 +1,63 @@
import { Theme, css } from 'antd-style'; import { Theme, css } from 'antd-style';
export default (token: Theme) => css` export default (token: Theme) => css`
.global-popup-close { .global-popup {
background-color: ${token.colorBgMask} !important; .global-popup-close {
backdrop-filter: blur(4px); background-color: ${token.colorBgMask} !important;
backdrop-filter: blur(4px);
&::before { &::before {
font-size: 24px !important; font-size: 24px !important;
line-height: 24px !important; line-height: 24px !important;
} }
}
.global-popup-inner {
> div {
border-radius: ${token.borderRadiusLG}px !important;
box-shadow: ${token.boxShadow} !important;
} }
.popup-metadata { .global-popup-inner {
overflow: auto; max-height: unset;
width: 75vw; > div {
max-height: 85vh; border-radius: ${token.borderRadiusLG}px !important;
padding: 32px; box-shadow: ${token.boxShadow} !important;
font-family: ${token.fontFamilyCode};
color: ${token.colorText};
word-break: break-word;
background: ${token.colorBgLayout};
border-radius: ${token.borderRadiusLG}px !important;
border-radius: ${token.borderRadius}px;
box-shadow: ${token.boxShadow} !important;
}
.edit-user-metadata {
> div:not(.edit-user-metadata-buttons):not(:last-child) {
margin: 0 0 8px;
} }
.standalone-card-preview { .popup-metadata {
cursor: default; overflow: auto;
display: contents;
width: 100%;
height: auto;
> img { width: 75vw;
position: relative; max-height: 85vh;
padding: 32px;
font-family: ${token.fontFamilyCode};
color: ${token.colorText};
word-break: break-word;
background: ${token.colorBgLayout};
border-radius: ${token.borderRadiusLG}px !important;
border-radius: ${token.borderRadius}px;
box-shadow: ${token.boxShadow} !important;
}
.edit-user-metadata {
> div:not(.edit-user-metadata-buttons):not(:last-child) {
margin: 0 0 8px;
}
.standalone-card-preview {
cursor: default;
display: contents;
width: 100%;
height: auto;
> img {
position: relative;
}
} }
} }
}
.popup-dialog, .popup-dialog,
.edit-user-metadata { .edit-user-metadata {
width: 50vw !important; width: 50vw !important;
}
} }
} }
`; `;