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

🚀 chore: update

pull/55/head
canisminor1990 2023-04-25 01:34:52 +08:00
parent e4f2ca78fc
commit ebaaecc234
38 changed files with 576 additions and 695 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.husky/commit-msg Normal file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit ${1}

24
.stylelintrc.js
View File

@ -1,13 +1,21 @@
module.exports = {
extends: ['stylelint-config-recommended', 'stylelint-config-prettier'],
plugins: ['stylelint-less', 'stylelint-order'],
customSyntax: 'postcss-less',
extends: ['stylelint-config-recommended', 'stylelint-config-clean-order'],
rules: {
'selector-id-pattern': null,
'selector-class-pattern': null,
'number-max-precision': null,
'font-family-no-duplicate-names': null,
'no-descending-specificity': null,
'declaration-block-no-duplicate-properties': null,
},
overrides: [
{
files: ['*.less', '*.css'],
plugins: ['stylelint-order'],
customSyntax: 'postcss-less',
rules: {
'no-descending-specificity': null,
},
},
{
files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
plugins: ['stylelint-order'],
customSyntax: 'postcss-styled-syntax',
},
],
}

11
.umirc.ts
View File

@ -23,6 +23,17 @@ export default defineConfig({
define: {
'process.env': process.env,
},
extraBabelPlugins: [
[
'babel-plugin-styled-components',
{
minify: true,
transpileTemplateLiterals: true,
displayName: process.env.NODE_ENV === 'development',
pure: true,
},
],
],
chainWebpack(memo) {
memo.plugin('shell').use(WebpackShellPlugin, [
{

3
commitlint.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
extends: ['gitmoji'],
}

520
javascript/index.js
View File

File diff suppressed because one or more lines are too long

12
package.json
View File

@ -19,7 +19,7 @@
"sd-debug": "cd ../../ && ./webui.sh",
"setup": "umi setup",
"start": "umi build",
"stylelint": "stylelint \"src/**/*.less\" --fix",
"stylelint": "stylelint \"src/**/*.{css,less,js,jsx,ts,tsx}\" --fix",
"test": "npm run lint",
"type-check": "tsc -p tsconfig-check.json"
},
@ -28,6 +28,9 @@
"stylelint --fix",
"prettier --write"
],
"*.{md,json}": [
"prettier --write --no-error-on-unmatched-pattern"
],
"*.json": [
"prettier --write --no-error-on-unmatched-pattern"
],
@ -55,6 +58,9 @@
"ahooks": "^3.7.6",
"antd": "^5.4.2",
"antd-style": "^3.0.0",
"babel-plugin-styled-components": "^2.1.1",
"commitlint": "^17",
"commitlint-config-gitmoji": "^2",
"concurrently": "^8.0.1",
"eslint": "^8",
"eslint-import-resolver-alias": "^1.1.2",
@ -64,6 +70,7 @@
"object-to-css-variables": "^0.2.1",
"polished": "^4.2.2",
"postcss-less": "^6.0.0",
"postcss-styled-syntax": "^0.4.0",
"prettier": "^2",
"prettier-plugin-organize-imports": "^3",
"prettier-plugin-packagejson": "^2",
@ -80,9 +87,8 @@
"semantic-release-config-gitmoji": "^1",
"styled-components": "^5.3.9",
"stylelint": "^15.4.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-clean-order": "^5.0.1",
"stylelint-config-recommended": "^12.0.0",
"stylelint-less": "^1.0.6",
"stylelint-order": "^6.0.3",
"typescript": "^5.0.0",
"umi": "^4.0.64",

73
src/components/DraggablePanel/style.ts
View File

@ -6,10 +6,10 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
const commonHandle = css`
position: relative;
&::before {
content: '';
position: absolute;
z-index: 50;
transition: all 0.3s ease-in-out;
content: '';
}
&:hover,
&:active {
@ -20,17 +20,21 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
`
const commonToggle = css`
position: absolute;
opacity: 0;
z-index: 1001;
transition: opacity 0.1s;
border-radius: 4px;
cursor: pointer;
background: ${token.colorBgElevated};
border-width: 1px;
border-style: solid;
position: absolute;
z-index: 1001;
color: ${token.colorTextTertiary};
opacity: 0;
background: ${token.colorBgElevated};
border-color: ${token.colorBorder};
border-style: solid;
border-width: 1px;
border-radius: 4px;
transition: opacity 0.1s;
&:hover {
color: ${token.colorTextSecondary};
background: ${token.colorFillQuaternary};
@ -45,8 +49,8 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
container: cx(
prefix,
css`
flex-shrink: 0;
position: relative;
flex-shrink: 0;
border: 0 solid ${token.colorSplit};
&:hover {
.${prefix}-toggle {
@ -60,13 +64,15 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
`${prefix}-toggle-left`,
commonToggle,
css`
top: 50%;
left: -${offset}px;
width: ${toggleShort}px;
height: ${toggleLength}px;
left: -${offset}px;
top: 50%;
margin-top: -20px;
border-radius: 4px 0 0 4px;
border-right-width: 0;
border-radius: 4px 0 0 4px;
`
),
toggleRight: cx(
@ -74,13 +80,15 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
`${prefix}-toggle-right`,
commonToggle,
css`
top: 50%;
right: -${offset}px;
width: ${toggleShort}px;
height: ${toggleLength}px;
right: -${offset}px;
top: 50%;
margin-top: -20px;
border-radius: 0 4px 4px 0;
border-left-width: 0;
border-radius: 0 4px 4px 0;
`
),
toggleTop: cx(
@ -88,13 +96,15 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
`${prefix}-toggle-top`,
commonToggle,
css`
height: ${toggleShort}px;
width: ${toggleLength}px;
top: -${offset}px;
left: 50%;
width: ${toggleLength}px;
height: ${toggleShort}px;
margin-left: -20px;
border-radius: 4px 4px 0 0;
border-bottom-width: 0;
border-radius: 4px 4px 0 0;
`
),
toggleBottom: cx(
@ -102,35 +112,40 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
`${prefix}-toggle-bottom`,
commonToggle,
css`
height: 16px;
width: ${toggleLength}px;
bottom: -${offset}px;
left: 50%;
width: ${toggleLength}px;
height: 16px;
margin-left: -20px;
border-radius: 0 0 4px 4px;
border-top-width: 0;
border-radius: 0 0 4px 4px;
`
),
fixed: cx(
`${prefix}-fixed`,
css`
position: relative;
overflow: hidden;
background: ${rgba(token.colorBgContainer, 0.75)};
backdrop-filter: blur(40px);
overflow: hidden;
position: relative;
${maxHeight ? 'height: 100% !important;' : ''}
`
),
float: cx(
`${prefix}-float`,
css`
position: relative;
z-index: 2000;
overflow: hidden;
border-radius: 8px;
background: ${rgba(token.colorBgElevated, 0.75)};
backdrop-filter: blur(40px);
border-radius: 8px;
box-shadow: ${token.boxShadowSecondary};
z-index: 2000;
position: relative;
`
),
leftHandle: cx(
@ -161,8 +176,8 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
${commonHandle};
&::before {
top: 50%;
height: 2px;
width: 100%;
height: 2px;
}
`
),
@ -172,8 +187,8 @@ export const useStyle = createStyles(({ token }, props: { prefix?: string; maxHe
${commonHandle};
&::before {
bottom: 50%;
height: 2px;
width: 100%;
height: 2px;
}
`
),

14
src/components/ExtraNetworkSidebar/index.tsx
View File

@ -15,17 +15,17 @@ const GlobalStyle = createGlobalStyle`
`
const View = styled.div`
overflow: hidden;
display: flex;
flex-direction: column;
height: -webkit-fill-available;
overflow: hidden;
`
const SidebarView = styled.div<{ size: number }>`
padding: 16px;
overflow-x: hidden;
overflow-y: auto;
flex: 1;
padding: 16px;
#txt2img_extra_networks,
#img2img_extra_networks {
@ -36,24 +36,26 @@ const SidebarView = styled.div<{ size: number }>`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(${({ size }) => size}px, 1fr));
> .card {
height: ${({ size }) => size * 1.5}px !important;
width: -webkit-fill-available !important;
height: ${({ size }) => size * 1.5}px !important;
}
}
`
const Footer = styled.div`
flex: 0;
padding: 8px 16px;
display: flex;
flex: 0;
align-items: center;
justify-content: flex-start;
padding: 8px 16px;
border-top: 1px solid var(--color-border);
`
const ZoomSlider = styled(Slider)`
margin-left: 16px;
flex: 1;
margin-left: 16px;
`
interface SidebarProps {

2
src/components/Header/Setting.tsx
View File

@ -26,9 +26,9 @@ const Title = styled.div`
`
const SubTitle = styled.div`
margin-bottom: 4px;
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
`
/******************************************************

35
src/components/Header/index.tsx
View File

@ -17,41 +17,48 @@ import { civitaiLogo, themeIcon } from './style'
******************************************************/
const HeaderView = styled.div`
padding: 16px 24px;
display: flex;
flex-wrap: nowrap;
gap: 12px;
align-items: center;
justify-content: space-between;
gap: 12px;
height: -webkit-fill-available;
padding: 16px 24px;
#tabs.header {
.tab-nav {
border: none !important;
margin: 0 !important;
border: none !important;
}
button {
cursor: pointer;
border: none !important;
background: transparent !important;
flex: none;
transition: all 0.2s ease-in-out;
padding: 8px !important;
border-radius: 4px !important;
margin: 0 !important;
flex: 0 !important;
margin: 0 !important;
padding: 8px !important;
background: transparent !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.2s ease-in-out;
&:hover {
border: none !important;
flex: none;
color: var(--color-text) !important;
background: var(--color-fill-tertiary) !important;
flex: none;
border: none !important;
}
&.selected {
border: none !important;
background: transparent !important;
color: var(--color-text) !important;
flex: none;
font-weight: 600;
color: var(--color-text) !important;
background: transparent !important;
border: none !important;
}
}
}

21
src/components/Sidebar/Prompt.tsx
View File

@ -15,19 +15,24 @@ const BtnGroup = styled.div`
`
const Btn = styled.button`
cursor: pointer;
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: var(--input-padding);
font-size: var(--input-text-size);
font-weight: var(--input-text-weight);
line-height: var(--line-sm);
background: var(--button-secondary-background-fill);
border: var(--button-border-width) solid var(--button-secondary-border-color);
border-radius: var(--input-radius);
background: var(--button-secondary-background-fill);
position: relative;
font-weight: var(--input-text-weight);
font-size: var(--input-text-size);
line-height: var(--line-sm);
padding: var(--input-padding);
cursor: pointer;
flex: 1;
`
interface PromptProps {

17
src/components/Sidebar/PromptGroup.tsx
View File

@ -12,15 +12,18 @@ const View = styled.div`
const Desc = styled.div`
position: relative;
z-index: var(--layer-4);
margin-bottom: -10px;
padding: var(--block-title-padding);
font-size: var(--block-title-text-size);
font-weight: var(--block-title-text-weight);
line-height: var(--line-sm);
color: var(--block-title-text-color);
background: var(--block-title-background-fill);
border: solid var(--block-title-border-width) var(--block-title-border-color);
border-radius: var(--block-title-radius);
background: var(--block-title-background-fill);
padding: var(--block-title-padding);
color: var(--block-title-text-color);
font-weight: var(--block-title-text-weight);
font-size: var(--block-title-text-size);
line-height: var(--line-sm);
margin-bottom: -10px;
`
const PromptGroup: React.FC = () => {

69
src/components/Sidebar/TagList.tsx
View File

@ -24,22 +24,26 @@ const View = styled.div<{ type: PromptType }>`
.ReactTags__editTagInput,
.ReactTags__tagInput {
display: inline-block;
margin: 0;
width: -webkit-fill-available;
margin: 0;
input,
input:focus {
display: block;
position: relative;
margin: 0;
display: block;
width: -webkit-fill-available;
margin: 0;
padding: var(--input-padding);
font-size: var(--input-text-size);
font-weight: var(--input-text-weight);
line-height: var(--line-sm);
color: var(--body-text-color);
background: var(--input-background-fill);
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
background: var(--input-background-fill);
padding: var(--input-padding);
color: var(--body-text-color);
font-weight: var(--input-text-weight);
font-size: var(--input-text-size);
line-height: var(--line-sm);
outline: none;
}
}
@ -56,25 +60,29 @@ const View = styled.div<{ type: PromptType }>`
flex-wrap: wrap;
gap: 4px;
span.ReactTags__tag {
position: relative;
display: flex;
align-items: center;
padding: var(--input-padding);
font-size: var(--text-sm);
font-weight: var(--input-text-weight);
line-height: var(--line-sm);
color: ${({ type }) => (type === 'positive' ? 'var(--green-9)' : 'var(--magenta-9)')};
background: var(--button-secondary-background-fill);
border: var(--button-border-width) solid var(--button-secondary-border-color);
border-radius: var(--input-radius);
background: var(--button-secondary-background-fill);
color: ${({ type }) => (type === 'positive' ? 'var(--green-9)' : 'var(--magenta-9)')};
position: relative;
font-weight: var(--input-text-weight);
font-size: var(--text-sm);
line-height: var(--line-sm);
padding: var(--input-padding);
&:hover {
color: ${({ type }) => (type === 'positive' ? 'var(--green-10)' : 'var(--magenta-10)')};
}
}
a.ReactTags__remove {
color: #aaa;
margin-left: 5px;
cursor: pointer;
margin-left: 5px;
color: #aaa;
}
}
@ -84,23 +92,26 @@ const View = styled.div<{ type: PromptType }>`
z-index: 1000;
}
ul {
list-style-type: none;
box-shadow: var(--box-shadow);
background: var(--color-bg-container);
width: 248px;
max-height: 480px;
overflow-x: hidden;
overflow-y: auto;
width: 248px;
max-height: 480px;
padding: 0;
list-style-type: none;
background: var(--color-bg-container);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
li {
font-size: 12px;
padding: 4px 8px;
margin: 0;
padding: 4px 8px;
font-size: 12px;
&.ReactTags__activeSuggestion {
background: var(--color-primary);
color: #fff;
cursor: pointer;
color: #fff;
background: var(--color-primary);
}
mark {
font-weight: 600;
@ -112,10 +123,10 @@ const View = styled.div<{ type: PromptType }>`
}
.ReactTags__remove {
border: none;
cursor: pointer;
background: none;
color: var(--color-text);
background: none;
border: none;
}
.ReactTags__lora {

2
src/components/Sidebar/index.tsx
View File

@ -7,10 +7,10 @@ import { shallow } from 'zustand/shallow'
import PromptGroup from './PromptGroup'
const SidebarView = styled.div`
padding: 16px;
overflow-x: hidden;
overflow-y: auto;
height: -webkit-fill-available;
padding: 16px;
`
interface SidebarProps {

24
src/pages/index/App.tsx
View File

@ -6,29 +6,33 @@ import styled from 'styled-components'
import { shallow } from 'zustand/shallow'
const View = styled.div`
display: flex;
flex-direction: row !important;
flex: 1;
overflow: hidden;
position: relative;
overflow: hidden;
display: flex;
flex: 1;
flex-direction: row !important;
`
const MainView = styled.div`
position: relative;
overflow: hidden;
display: flex;
flex: 1;
flex-direction: column;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
`
const LoadingBox = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
`
const App: React.FC = () => {

34
src/theme/components/button.less
View File

@ -1,27 +1,33 @@
.gradio-button {
border-radius: var(--border-radius) !important;
overflow: hidden;
min-width: 36px;
min-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
border-radius: var(--border-radius) !important;
&.tool {
padding: 0 !important;
max-width: 36px !important;
display: flex;
align-items: center;
align-self: end;
justify-content: center;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
align-self: end;
line-height: 1;
border: var(--button-border-width) solid var(--button-secondary-border-color);
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
background: var(--button-secondary-background-fill);
border: var(--button-border-width) solid var(--button-secondary-border-color);
}
&.secondary-down,
@ -32,8 +38,8 @@
#txt2img_interrupt,
#img2img_interrupt {
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
border-right: 1px solid var(--color-error-bg);
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}
#txt2img_skip,
@ -45,17 +51,17 @@
#txt2img_skip,
#img2img_interrupt,
#img2img_skip {
background: var(--color-error) !important;
color: #fff !important;
background: var(--color-error) !important;
&:hover {
background: var(--color-error-hover) !important;
color: #fff !important;
background: var(--color-error-hover) !important;
}
&:active {
background: var(--color-error-active) !important;
color: #fff !important;
background: var(--color-error-active) !important;
}
}

12
src/theme/components/container.less
View File

@ -7,9 +7,9 @@
}
.gradio-container {
margin: 0 !important;
font-size: var(--font-size);
color: var(--color-text);
margin: 0 !important;
background: transparent !important;
}
@ -36,13 +36,15 @@
}
.block.gradio-accordion.svelte-mppz8v.padded {
margin-top: 0 !important;
margin-bottom: var(--size-ms) !important;
padding: 12px !important;
background-color: var(--color-fill-tertiary) !important;
border-color: transparent !important;
transition: all 0.3s ease-in-out !important;
margin-bottom: var(--size-ms) !important;
margin-top: 0 !important;
padding: 12px !important;
border-radius: var(--border-radius) !important;
transition: all 0.3s ease-in-out !important;
}
div.svelte-1oo81b7 > *:not(.absolute) {

66
src/theme/components/extra-network.less
View File

@ -6,10 +6,10 @@
}
.search {
max-width: -webkit-fill-available;
width: -webkit-fill-available;
max-height: 36px !important;
box-sizing: border-box;
width: -webkit-fill-available;
max-width: -webkit-fill-available;
max-height: 36px !important;
padding: 8px;
}
@ -33,57 +33,67 @@
flex-wrap: wrap;
gap: 4px;
align-items: center;
margin-bottom: 12px;
padding: 0 !important;
> button {
cursor: pointer;
zoom: 0.8;
flex: 1;
min-width: 100px;
margin: 0;
cursor: pointer;
zoom: 0.8;
}
}
.actions {
.name {
background: linear-gradient(0deg, rgb(0 0 0 / 80%), transparent);
font-weight: bold;
text-shadow: 0 1px 1px rgb(0 0 0 / 90%);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
font-weight: bold;
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 {
display: none;
> ul {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
a {
font-size: 15px !important;
margin: 0 !important;
text-shadow: 1px 1px black;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 !important;
font-size: 15px !important;
color: #fff;
text-overflow: ellipsis;
text-shadow: 1px 1px black;
white-space: nowrap;
}
}
}
}
.card {
border-radius: var(--border-radius-xs);
background-size: cover;
box-shadow: var(--box-shadow);
outline: 1px solid rgb(0 0 0 / 50%);
transition: all 0.2s ease-in-out;
overflow: hidden;
background-size: cover;
border-radius: var(--border-radius-xs);
outline: 1px solid rgb(0 0 0 / 50%);
box-shadow: var(--box-shadow);
transition: all 0.2s ease-in-out;
.name {
font-size: 12px !important;
}
@ -100,9 +110,9 @@
}
.metadata-button {
font-size: 10px !important;
right: 4px;
top: 24px;
right: 4px;
font-size: 10px !important;
opacity: 0;
&:hover {
@ -113,11 +123,13 @@
.extra-network-thumbs {
.name {
font-size: 12px !important;
background: transparent;
white-space: nowrap;
overflow: hidden;
display: block;
font-size: 12px !important;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent;
}
}

12
src/theme/components/options.less
View File

@ -1,18 +1,20 @@
ul.options {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-border) !important;
border-radius: var(--border-radius) !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
background: var(--color-bg-elevated) !important;
li {
display: block !important;
margin: 0 !important;
&.selected {
background: var(--color-primary) !important;
color: #fff !important;
background: var(--color-primary) !important;
}
}
}

10
src/theme/components/prompt-textarea.less
View File

@ -1,8 +1,8 @@
[id$='2img_prompt'] textarea {
color: var(--green-9) !important;
max-height: 84px;
overflow-y: auto;
max-height: 84px;
padding: 12px;
color: var(--green-9) !important;
&:focus {
color: var(--green-10) !important;
@ -10,10 +10,10 @@
}
[id$='2img_neg_prompt'] textarea {
color: var(--magenta-9) !important;
max-height: 84px;
overflow-y: auto;
max-height: 84px;
padding: 12px;
color: var(--magenta-9) !important;
&:focus {
color: var(--magenta-10) !important;
@ -21,6 +21,6 @@
}
.block.token-counter span {
backdrop-filter: blur(24px);
display: inline-block;
backdrop-filter: blur(24px);
}

11
src/theme/components/prose.less
View File

@ -1,8 +1,8 @@
.prose {
> p {
border-radius: var(--container-radius);
background: var(--panel-background-fill);
padding: 12px;
background: var(--panel-background-fill);
border-radius: var(--container-radius);
}
}
@ -10,10 +10,11 @@
color: var(--color-primary) !important;
span {
margin: 0 4px;
padding: 4px 8px;
background: var(--color-primary-bg);
border: var(--input-border-width) solid var(--color-primary-border);
border-radius: var(--input-radius);
background: var(--color-primary-bg);
padding: 4px 8px;
margin: 0 4px;
}
}

16
src/theme/components/quicksetting.less
View File

@ -1,15 +1,17 @@
#quicksettings {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
width: 100%;
> * {
flex: 1;
max-width: unset !important;
min-width: unset !important;
width: -webkit-fill-available !important;
min-width: unset !important;
max-width: unset !important;
margin: 0;
padding: 0;
}
@ -26,17 +28,17 @@
input[type='number'],
textarea {
box-sizing: border-box;
width: -webkit-fill-available;
height: 28px !important;
padding: 4px !important;
width: -webkit-fill-available;
box-sizing: border-box;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-arrow {

125
src/theme/components/sliders.less
View File

@ -2,42 +2,83 @@ input[type='range'] {
appearance: none !important;
background: transparent !important;
&:focus {
outline: none !important;
}
&::-webkit-slider-runnable-track {
cursor: pointer !important;
height: 6px !important;
border-radius: 3px !important;
background: var(--color-fill) !important;
opacity: 0.6 !important;
}
&:hover::-webkit-slider-runnable-track {
background: var(--color-primary) !important;
opacity: 1 !important;
transition: all 0.2s ease-in-out;
height: 6px !important;
opacity: 0.6 !important;
background: var(--color-fill) !important;
border-radius: 3px !important;
}
&::-moz-range-track {
cursor: pointer !important;
height: 6px !important;
background: var(--color-primary) !important;
border-radius: 3px !important;
background: var(--color-primary) !important;
}
&:hover::-moz-range-track {
background: var(--color-primary) !important;
transition: all 0.2s ease-in-out;
}
&::-ms-fill-upper,
&::-ms-fill-lower {
cursor: pointer !important;
height: 6px !important;
border-radius: 3px !important;
background: var(--color-primary) !important;
border-radius: 3px !important;
}
&::-webkit-slider-thumb {
cursor: pointer !important;
width: 16px !important;
height: 16px !important;
margin-top: -5px !important;
appearance: none !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-text) !important;
border-radius: 16px !important;
}
&::-moz-range-thumb {
cursor: pointer !important;
z-index: 999;
width: 16px !important;
height: 16px !important;
margin-top: -5px !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-text) !important;
border-radius: 16px !important;
}
&::-ms-thumb {
cursor: pointer !important;
width: 16px !important;
height: 16px !important;
margin-top: -5px !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-text) !important;
border-radius: 16px !important;
}
&:focus {
outline: none !important;
}
&:hover::-webkit-slider-runnable-track {
opacity: 1 !important;
background: var(--color-primary) !important;
transition: all 0.2s ease-in-out;
}
&:hover::-moz-range-track {
background: var(--color-primary) !important;
transition: all 0.2s ease-in-out;
}
&:hover::-ms-fill-upper,
@ -46,54 +87,22 @@ input[type='range'] {
transition: all 0.2s ease-in-out;
}
&::-webkit-slider-thumb {
border: 2px solid var(--color-text) !important;
height: 16px !important;
width: 16px !important;
border-radius: 16px !important;
background: var(--color-bg-elevated) !important;
cursor: pointer !important;
appearance: none !important;
margin-top: -5px !important;
}
&:active::-webkit-slider-thumb {
box-shadow: 0 0 3px var(--color-primary) !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-primary) !important;
background: var(--color-bg-elevated) !important;
}
&::-moz-range-thumb {
border: 2px solid var(--color-text) !important;
height: 16px !important;
width: 16px !important;
border-radius: 16px !important;
background: var(--color-bg-elevated) !important;
cursor: pointer !important;
margin-top: -5px !important;
z-index: 999;
box-shadow: 0 0 3px var(--color-primary) !important;
}
&:active::-moz-range-thumb {
box-shadow: 0 0 3px var(--color-primary) !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-primary) !important;
background: var(--color-bg-elevated) !important;
}
&::-ms-thumb {
border: 2px solid var(--color-text) !important;
height: 16px !important;
width: 16px !important;
border-radius: 16px !important;
background: var(--color-bg-elevated) !important;
cursor: pointer !important;
margin-top: -5px !important;
box-shadow: 0 0 3px var(--color-primary) !important;
}
&:active::-ms-thumb {
box-shadow: 0 0 3px var(--color-primary) !important;
border: 2px solid var(--color-primary) !important;
background: var(--color-bg-elevated) !important;
border: 2px solid var(--color-primary) !important;
box-shadow: 0 0 3px var(--color-primary) !important;
}
}

2
src/theme/components/table.less
View File

@ -4,8 +4,8 @@ table {
th,
td {
border: 1px solid var(--color-border) !important;
padding: 12px !important;
border: 1px solid var(--color-border) !important;
}
th {

4
src/theme/extensions/additional-networks.less
View File

@ -1,8 +1,8 @@
#tab_additional_networks {
> div > div > div {
border-radius: var(--container-radius) !important;
background: var(--panel-background-fill) !important;
padding: 12px !important;
background: var(--panel-background-fill) !important;
border-radius: var(--container-radius) !important;
}
.padded.svelte-mppz8v {
border: none !important;

30
src/theme/extensions/aspect-ratio.less
View File

@ -2,11 +2,12 @@
[id$='_row_resolutions'],
[id$='_container_aspect_ratio'] {
display: flex !important;
margin: 0;
padding: 0;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: flex-start !important;
margin: 0;
padding: 0;
}
#arc_show_calculator_button {
@ -14,23 +15,26 @@
}
[id$='_container_aspect_ratio'] {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 4px !important;
margin-top: 0 !important;
margin-bottom: var(--size-ms) !important;
padding: 12px !important;
background-color: var(--color-fill-tertiary) !important;
border-color: transparent !important;
transition: all 0.3s ease-in-out !important;
margin-bottom: var(--size-ms) !important;
margin-top: 0 !important;
padding: 12px !important;
border-radius: var(--border-radius) !important;
gap: 4px !important;
display: flex !important;
flex-wrap: wrap !important;
flex-direction: row !important;
transition: all 0.3s ease-in-out !important;
[id$='_row_aspect_ratio'],
[id$='_row_resolutions'] {
max-width: unset;
width: unset;
flex: 1;
display: flex !important;
flex: 1;
width: unset;
max-width: unset;
}
button {
position: relative !important;

4
src/theme/extensions/civitai-helper.less
View File

@ -1,7 +1,7 @@
#tab_civitai_helper {
.block.padded.ch_box {
border-radius: var(--container-radius) !important;
background: var(--panel-background-fill) !important;
padding: 12px !important;
background: var(--panel-background-fill) !important;
border-radius: var(--container-radius) !important;
}
}

2
src/theme/extensions/dreambooth.less
View File

@ -2,8 +2,8 @@
#SettingsPanel {
.tabitem,
.gradio-tabitem {
background: transparent !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}

4
src/theme/extensions/open-outpaint.less
View File

@ -1,7 +1,7 @@
#tab_openOutpaint {
padding: 0 !important;
height: 100vh;
position: relative;
height: 100vh;
padding: 0 !important;
#openoutpaint-iframe {
width: -webkit-fill-available !important;
}

2
src/theme/extensions/system-info.less
View File

@ -1,6 +1,6 @@
#tab_system_info_tab {
#system_info_tab > div > div {
border: none !important;
padding: 0 !important;
border: none !important;
}
}

6
src/theme/style.less
View File

@ -44,11 +44,13 @@ body {
font-family: var(--font-family);
font-size: var(--font-size);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-size-adjust: 100%;
background-image: var(--color-body-background);
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
pre,

6
src/theme/tabs/tab-extra.less
View File

@ -2,10 +2,10 @@
> div > div > div {
gap: 8px;
> .gradio-row {
border-radius: var(--container-radius) !important;
background: var(--panel-background-fill) !important;
padding: 12px !important;
margin: 0 !important;
padding: 12px !important;
background: var(--panel-background-fill) !important;
border-radius: var(--container-radius) !important;
}
}
#extras_scale_by_tab {

2
src/theme/tabs/tab-setting.less
View File

@ -9,8 +9,8 @@
}
&.selected {
border: none !important;
background: transparent !important;
border: none !important;
border-left: 2px solid var(--color-primary) !important;
border-radius: 0 !important;
}

26
src/theme/tabs/tab-to-img.less
View File

@ -6,19 +6,21 @@
margin: 0 !important;
}
span.svelte-1gfkn6j:not(.has-info) {
margin-bottom: var(--spacing-lg);
white-space: nowrap;
width: -webkit-fill-available;
overflow: hidden;
text-overflow: ellipsis;
width: -webkit-fill-available;
margin-right: 12px;
margin-bottom: var(--spacing-lg);
text-overflow: ellipsis;
white-space: nowrap;
}
> *:not([id$='_script_container']) {
border-radius: var(--container-radius) !important;
background: var(--panel-background-fill) !important;
padding: 12px !important;
margin: 0 !important;
padding: 12px !important;
background: var(--panel-background-fill) !important;
border-radius: var(--container-radius) !important;
}
> *:not([id$='_script_container'], #txt2img_seed_row, #mode_img2img) {
@ -63,13 +65,15 @@
}
#script_list {
margin-top: 0 !important;
margin-bottom: var(--size-ms) !important;
padding: 12px !important;
background-color: var(--color-fill-tertiary) !important;
border-color: transparent !important;
transition: all 0.3s ease-in-out !important;
margin-bottom: var(--size-ms) !important;
margin-top: 0 !important;
padding: 12px !important;
border-radius: var(--border-radius) !important;
transition: all 0.3s ease-in-out !important;
}
[id$='_script_container'] {

34
src/theme/tabs/tabs.less
View File

@ -1,45 +1,51 @@
.tabitem,
.gradio-tabitem {
padding: var(--spacing-lg);
background: var(--panel-background-fill);
border: none !important;
border-radius: var(--container-radius);
background: var(--panel-background-fill);
padding: var(--spacing-lg);
}
#tabs {
> .tabitem.gradio-tabitem {
background: transparent !important;
padding: 24px;
background: transparent !important;
}
}
.tab-nav {
border: none !important;
gap: 8px;
margin-bottom: 8px;
border: none !important;
button {
cursor: pointer;
border: none !important;
background: var(--color-fill-quaternary) !important;
transition: all 0.2s ease-in-out;
padding: 8px !important;
border-radius: 4px !important;
flex: 1 !important;
padding: 8px !important;
background: var(--color-fill-quaternary) !important;
border: none !important;
border-radius: 4px !important;
transition: all 0.2s ease-in-out;
&:hover {
border: none !important;
flex: none;
color: var(--color-text) !important;
background: var(--color-fill-tertiary) !important;
flex: none;
border: none !important;
}
&.selected {
border: none !important;
background: var(--color-fill-secondary) !important;
color: var(--color-text) !important;
flex: none;
font-weight: 600;
color: var(--color-text) !important;
background: var(--color-fill-secondary) !important;
border: none !important;
border-bottom: 2px solid var(--color-primary) !important;
}
}

24
src/theme/utils/normalize.less vendored
View File

@ -38,8 +38,8 @@ main {
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
font-size: 2em;
}
/* Grouping content
@ -51,9 +51,9 @@ h1 {
*/
hr {
overflow: visible; /* 2 */
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
@ -62,7 +62,7 @@ hr {
*/
pre {
font-family: monospace, monospace; /* 1 */
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
@ -83,9 +83,9 @@ a {
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
border-bottom: none; /* 1 */
}
/**
@ -105,7 +105,7 @@ strong {
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
@ -124,9 +124,9 @@ small {
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
@ -162,10 +162,10 @@ input,
optgroup,
select,
textarea {
margin: 0; /* 2 */
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
@ -209,8 +209,8 @@ button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
border-style: none;
}
/**
@ -240,11 +240,13 @@ fieldset {
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
box-sizing: border-box; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
color: inherit; /* 2 */
white-space: normal; /* 1 */
}
@ -308,8 +310,8 @@ textarea {
*/
::-webkit-file-upload-button {
appearance: button; /* 1 */
font: inherit; /* 2 */
appearance: button; /* 1 */
}
/* Interactive

6
src/types/index.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
import { Theme as AntdStyleTheme } from 'antd-style'
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface DefaultTheme extends AntdStyleTheme {}
}

2
style.css
View File

File diff suppressed because one or more lines are too long