extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-12-25 16:38:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

theme scaffold

Browse Source
This commit is contained in:
caranicas 2022-09-17 14:18:05 -04:00
parent 4fbc46b3b3
commit bca225e692
11 changed files with 87 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/frontend/build_src/index.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark light" />
<title>Stable Diffusion UI</title>
</head>
<body>
@ -16,12 +17,12 @@
<!-- THE STYLES ARE BEING USED IN THE REACT APP -->
<!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
<style>
body {
/* body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
background-color: rgb(32, 33, 36);
color: #eee;
}
} */
a {
color: rgb(0, 102, 204);
}

12
ui/frontend/build_src/src/App.tsx
View File

@ -1,17 +1,25 @@
import React, { useState } from "react";
import { ReactLocation, Router } from "@tanstack/react-location";
import Home from "./pages/Home";
import Settings from "./pages/Settings";
import { darkTheme, lightTheme } from "./styles/theme.css";
const location = new ReactLocation();
function App() {
// just check for the theme one 1 time
// var { matches } = window.matchMedia('(prefers-color-scheme: dark)')
const matches = true;
const themeClass = matches ? darkTheme : lightTheme;
return (
<Router
location={location}
routes={[
{ path: "/", element: <Home /> },
{ path: "settings", element: <Settings /> },
{ path: "/", element: <Home className={themeClass} /> },
{ path: "settings", element: <Settings className={themeClass} /> },
]}
></Router>
);

2
ui/frontend/build_src/src/main.tsx
View File

@ -9,7 +9,7 @@ import { enableMapSet } from "immer";
import App from "./app";
import "./styles.css.ts";
import "./styles/styles.css.ts";
const queryClient = new QueryClient({
defaultOptions: {

5
ui/frontend/build_src/src/pages/Home/home.css.ts
View File

@ -1,12 +1,15 @@
import { style } from "@vanilla-extract/css";
// @ts-ignore
import { vars } from "../../styles/theme.css.ts";
export const AppLayout = style({
position: "relative",
backgroundColor: vars.colors.background,
width: "100%",
height: "100%",
pointerEvents: "auto",
display: "grid",
backgroundColor: "rgb(32, 33, 36)",
// backgroundColor: "rgb(32, 33, 36)",
gridTemplateColumns: "400px 1fr",
gridTemplateRows: "100px 1fr 50px",
gridTemplateAreas: `

6
ui/frontend/build_src/src/pages/Home/index.tsx
View File

@ -20,7 +20,7 @@ import CreationPanel from "../../components/organisms/creationPanel";
import DisplayPanel from "../../components/organisms/displayPanel";
import FooterDisplay from "../../components/organisms/footerDisplay";
function Editor() {
function Home({ className }: { className: string }) {
// Get the original save directory
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
@ -51,7 +51,7 @@ function Editor() {
}, [setRequestOption, statusMods, dataMoads]);
return (
<div className={AppLayout}>
<div className={[AppLayout, className].join(" ")}>
<header className={HeaderLayout}>
<HeaderDisplay></HeaderDisplay>
</header>
@ -68,4 +68,4 @@ function Editor() {
);
}
export default Editor;
export default Home;

2
ui/frontend/build_src/src/pages/Settings/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
export default function Settings() {
export default function Settings({ className }: { className: string }) {
return (
<div>
<h1>Settings</h1>

0
ui/frontend/build_src/src/styles.css.ts → ui/frontend/build_src/src/styles/styles.css.ts
View File

60
ui/frontend/build_src/src/styles/theme.css.ts Normal file
View File

@ -0,0 +1,60 @@
import {
createGlobalThemeContract,
createGlobalTheme,
createThemeContract,
createTheme,
} from "@vanilla-extract/css";
const colors = createThemeContract({
primary: null,
secondary: null,
background: null,
warning: "yellow",
error: "red",
success: "green",
text: {
normal: null,
dimmed: null,
},
});
const app = createGlobalTheme(":root", {
spacing: {
small: "5px",
medium: "10px",
large: "25px",
},
fonts: {
heading: "Georgia, Times, Times New Roman, serif",
body: "system-ui",
},
colors: colors,
});
export const lightTheme = createTheme(colors, {
primary: "#1E40AF",
secondary: "#DB2777",
background: "#EFF6FF",
warning: "yellow",
error: "red",
success: "green",
text: {
normal: "#1F2937",
dimmed: "#6B7280",
},
});
export const darkTheme = createTheme(colors, {
primary: "#60A5FA",
secondary: "#F472B6",
background: "rgb(32, 33, 36)",
warning: "yellow",
error: "red",
success: "green",
text: {
normal: "#F9FAFB",
dimmed: "#D1D5DB",
},
});
export const vars = { ...app, colors };

2
ui/frontend/dist/index.css vendored
View File

@ -1 +1 @@
._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;position:relative}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.fma0ug0{position:relative}.fma0ug0>canvas{position:absolute;top:0;left:0;width:100%;height:100%}.fma0ug0>canvas:first-of-type{opacity:.7}.fma0ug0>img{top:0;left:0}._2yyo4x0{position:relative;width:100%;height:100%;padding:10px}._2yyo4x1{display:flex;flex-direction:row;width:100%;flex-wrap:wrap}._2yyo4x2{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%}._2yyo4x2:first-of-type{margin:10px 0}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px;overflow-y:auto}.cjcdm21{position:absolute;top:10px;left:400px;z-index:1;background-color:#00000080}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
:root{--ruay188: 5px;--ruay189: 10px;--ruay18a: 25px;--ruay18b: Georgia, Times, Times New Roman, serif;--ruay18c: system-ui;--ruay18d: var(--ruay180);--ruay18e: var(--ruay181);--ruay18f: var(--ruay182);--ruay18g: var(--ruay183);--ruay18h: var(--ruay184);--ruay18i: var(--ruay185);--ruay18j: var(--ruay186);--ruay18k: var(--ruay187)}.ruay18l{--ruay180: #1E40AF;--ruay181: #DB2777;--ruay182: #EFF6FF;--ruay183: yellow;--ruay184: red;--ruay185: green;--ruay186: #1F2937;--ruay187: #6B7280}.ruay18m{--ruay180: #60A5FA;--ruay181: #F472B6;--ruay182: rgb(32, 33, 36);--ruay183: yellow;--ruay184: red;--ruay185: green;--ruay186: #F9FAFB;--ruay187: #D1D5DB}._1qevocv0{position:relative;background-color:var(--ruay182);width:100%;height:100%;pointer-events:auto;display:grid;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;position:relative}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}._1jo75h0{color:#f0ad4e}._1jo75h1{color:#d9534f}._1jo75h2{color:#5cb85c}._1v2cc580{color:#fff;display:flex;align-items:center;justify-content:center}._1v2cc580>h1{font-size:1.5em;font-weight:700;margin-right:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.fma0ug0{position:relative}.fma0ug0>canvas{position:absolute;top:0;left:0;width:100%;height:100%}.fma0ug0>canvas:first-of-type{opacity:.7}.fma0ug0>img{top:0;left:0}._2yyo4x0{position:relative;width:100%;height:100%;padding:10px}._2yyo4x1{display:flex;flex-direction:row;width:100%;flex-wrap:wrap}._2yyo4x2{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%}._2yyo4x2:first-of-type{margin:10px 0}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px;overflow-y:auto}.cjcdm21{position:absolute;top:10px;left:400px;z-index:1;background-color:#00000080}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}

5
ui/frontend/dist/index.html vendored
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark light" />
<title>Stable Diffusion UI</title>
<script type="module" crossorigin src="/index.js"></script>
<link rel="stylesheet" href="/index.css">
@ -18,12 +19,12 @@
<!-- THE STYLES ARE BEING USED IN THE REACT APP -->
<!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
<style>
body {
/* body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
background-color: rgb(32, 33, 36);
color: #eee;
}
} */
a {
color: rgb(0, 102, 204);
}

2
ui/frontend/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long