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: Update popup style

pull/475/head
canisminor1990 2023-11-28 15:07:29 +08:00
parent 193ce95da9
commit eda0dd46b9
8 changed files with 285 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
javascript/main.js
View File

File diff suppressed because one or more lines are too long

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

@ -162,34 +162,6 @@ export const useStyles = createStyles(
}
}
}
.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,

25
src/features/ExtraNetworkSidebar/Inner.tsx
View File

@ -83,18 +83,23 @@ const Inner = memo(() => {
index2indexButton.click();
setExtraLoading(false);
const civitaiText2ImgButton = document.querySelector('#txt2img_extra_refresh')
?.nextSibling as HTMLButtonElement;
if (civitaiText2ImgButton) {
civitaiText2ImgButton.onclick = civitaiHelperFix;
}
const civitaiImg2ImgButton = document.querySelector('#img2img_extra_refresh')
?.nextSibling as HTMLButtonElement;
if (civitaiImg2ImgButton) {
civitaiImg2ImgButton.onclick = civitaiHelperFix;
const isCivitaiHelper = !!document.querySelector('#txt2img_extra_refresh');
if (isCivitaiHelper) {
const civitaiText2ImgButton = document.querySelector('#txt2img_extra_refresh')
?.nextSibling as HTMLButtonElement;
if (civitaiText2ImgButton) {
civitaiText2ImgButton.onclick = civitaiHelperFix;
}
const civitaiImg2ImgButton = document.querySelector('#img2img_extra_refresh')
?.nextSibling as HTMLButtonElement;
if (civitaiImg2ImgButton) {
civitaiImg2ImgButton.onclick = civitaiHelperFix;
}
civitaiHelperFix();
}
civitaiHelperFix();
consola.success('🤯 [extranetwork] force reload');
} catch (error) {
consola.error('🤯 [extranetwork] force reload', error);

4
src/styles/components/container.ts
View File

@ -72,5 +72,9 @@ export default (token: Theme) => {
}
}
}
#tabs_extensions > .tabitem > .gap > .gradio-row {
overflow: auto;
}
`;
};

77
src/styles/components/lightboxModal.ts
View File

@ -3,41 +3,63 @@ 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;
> img:not(.modalImageFullscreen) {
box-shadow: var(--lightbox-img-shadow);
}
}
.modalControls {
transition: var(--button-transition) !important;
}
.modalControls:hover {
background-color: transparent !important;
}
&:hover {
background-color: transparent !important;
}
.modalControls span {
display: flex;
align-items: center;
justify-content: center;
.cursor {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
width: 32px !important;
height: 32px !important;
font-size: 35px !important;
color: ${token.colorTextDescription} !important;
text-align: center;
text-shadow: none !important;
background-color: ${token.colorFillTertiary};
backdrop-filter: saturate(120%) blur(80px);
border-radius: ${token.borderRadius}px;
transition: var(--button-transition);
}
> svg {
width: 20px !important;
height: 20px !important;
}
.modalControls span:hover,
.modalControls span:focus {
color: ${token.colorPrimary} !important;
}
&:hover {
color: ${token.colorPrimary} !important;
background-color: ${token.colorFillSecondary} !important;
}
}
#lightboxModal > img:not(.modalImageFullscreen) {
box-shadow: var(--lightbox-img-shadow);
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);
&:hover,
&:focus {
color: ${token.colorPrimary} !important;
}
}
}
.modalPrev,
@ -49,7 +71,7 @@ export default (token: Theme) => css`
align-items: center;
justify-content: center;
width: 48px !important;
width: 44px !important;
height: 50%;
padding: 8px !important;
@ -58,13 +80,18 @@ export default (token: Theme) => css`
color: ${token.colorTextDescription} !important;
background-color: ${token.colorFillTertiary};
border-radius: 0 16px 16px 0 !important;
border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0 !important;
transition: var(--button-transition) !important;
svg {
width: 20px !important;
height: 20px !important;
}
}
.modalNext {
border-radius: 16px 0 0 16px !important;
border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px !important;
}
.modalPrev:hover,

66
src/styles/components/popup.ts Normal file
View File

@ -0,0 +1,66 @@
import { Theme, css } from 'antd-style';
export default (token: Theme) => css`
.global-popup {
backdrop-filter: saturate(120%) blur(4px) !important;
}
.global-popup-close {
position: relative;
top: 16px !important;
right: 16px !important;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: ${token.colorFillSecondary};
backdrop-filter: saturate(120%) blur(80px);
border-radius: ${token.borderRadius}px;
&::before {
font-size: 24px !important;
line-height: 24px !important;
}
&:hover {
color: ${token.colorPrimary} !important;
background-color: ${token.colorFillSecondary} !important;
}
}
.global-popup-inner {
max-width: 80%;
> div {
border-radius: ${token.borderRadiusLG}px !important;
box-shadow: ${token.boxShadow} !important;
}
.popup-metadata {
overflow: auto;
width: 75vw;
height: 75vh;
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;
}
}
}
`;

2
src/styles/index.ts
View File

@ -10,6 +10,7 @@ import input from './components/input';
import label from './components/label';
import lightboxModal from './components/lightboxModal';
import options from './components/options';
import popup from './components/popup';
import progress from './components/progress';
import slider from './components/slider';
import table from './components/table';
@ -30,6 +31,7 @@ const GlobalStyle = createGlobalStyle(({ theme }) => [
slider(theme),
table(theme),
tabs(theme),
popup(theme),
extensions(theme),
lightboxModal(theme),
]);

13
src/styles/tokens.ts
View File

@ -200,23 +200,18 @@ export default (token: Theme) => {
--button-small-radius: ${token.borderRadiusSM}px;
--button-small-text-size: var(--text-md);
--button-small-text-weight: 400;
--button-transition: all 0.12s cubic-bezier(0.35, 0.12, 0.17, 1);
--button-transition: all 0.12s ${token.motionEaseInOut};
--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%);
--popup-overlay: ${token.colorBgMask};
--thumbnail-shadow: ${token.boxShadow};
--lightbox-img-shadow: ${token.boxShadowSecondary};
--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%);
}
`;
};