From 7278270bff2cb3d3c12e3582ebc55cba6500cd38 Mon Sep 17 00:00:00 2001
From: Sida Liu <learner.sida.liu@gmail.com>
Date: Tue, 27 Aug 2024 16:48:22 +0800
Subject: [PATCH] expose old css

---
 login.html        |   2 +-
 old_css/style.css | 559 ++++++++++++++++++++++++++++++++++++++++++++++
 password.py       |   3 +
 3 files changed, 563 insertions(+), 1 deletion(-)
 create mode 100644 old_css/style.css

diff --git a/login.html b/login.html
index d0de5eb..c7a8b09 100644
--- a/login.html
+++ b/login.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>ComfyUI Login</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <link rel="stylesheet" type="text/css" href="./old_css/style.css" />
     <style>
         body {text-align: center;}
         .comfy-modal { display: block; }
diff --git a/old_css/style.css b/old_css/style.css
new file mode 100644
index 0000000..cf7a8b9
--- /dev/null
+++ b/old_css/style.css
@@ -0,0 +1,559 @@
+:root {
+	--fg-color: #000;
+	--bg-color: #fff;
+	--comfy-menu-bg: #353535;
+	--comfy-input-bg: #222;
+	--input-text: #ddd;
+	--descrip-text: #999;
+	--drag-text: #ccc;
+	--error-text: #ff4444;
+	--border-color: #4e4e4e;
+	--tr-even-bg-color: #222;
+	--tr-odd-bg-color: #353535;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--fg-color: #fff;
+		--bg-color: #202020;
+	}
+}
+
+body {
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	overflow: hidden;
+	background-color: var(--bg-color);
+	color: var(--fg-color);
+}
+
+#graph-canvas {
+	width: 100%;
+	height: 100%;
+}
+
+.comfy-multiline-input {
+	background-color: var(--comfy-input-bg);
+	color: var(--input-text);
+	overflow: hidden;
+	overflow-y: auto;
+	padding: 2px;
+	resize: none;
+	border: none;
+	box-sizing: border-box;
+	font-size: 10px;
+}
+
+.comfy-modal {
+	display: none; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 100; /* Sit on top */
+	padding: 30px 30px 10px 30px;
+	background-color: var(--comfy-menu-bg); /* Modal background */
+	color: var(--error-text);
+	box-shadow: 0 0 20px #888888;
+	border-radius: 10px;
+	top: 50%;
+	left: 50%;
+	max-width: 80vw;
+	max-height: 80vh;
+	transform: translate(-50%, -50%);
+	overflow: hidden;
+	justify-content: center;
+	font-family: monospace;
+	font-size: 15px;
+}
+
+.comfy-modal-content {
+	display: flex;
+	flex-direction: column;
+}
+
+.comfy-modal p {
+	overflow: auto;
+	white-space: pre-line; /* This will respect line breaks */
+	margin-bottom: 20px; /* Add some margin between the text and the close button*/
+}
+
+.comfy-modal select,
+.comfy-modal input[type=button],
+.comfy-modal input[type=checkbox] {
+	margin: 3px 3px 3px 4px;
+}
+
+.comfy-menu-hamburger {
+	position: fixed;
+	top: 10px;
+	z-index: 9999;
+	right: 10px;
+	width: 30px;
+	display: none;
+	gap: 8px;
+	flex-direction: column;
+	cursor: pointer;
+}
+.comfy-menu-hamburger div {
+	height: 3px;
+	width: 100%;
+	border-radius: 20px;
+	background-color: white;
+}
+
+.comfy-menu {
+	font-size: 15px;
+	position: absolute;
+	top: 50%;
+	right: 0;
+	text-align: center;
+	z-index: 999;
+	width: 170px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: var(--descrip-text);
+	background-color: var(--comfy-menu-bg);
+	font-family: sans-serif;
+	padding: 10px;
+	border-radius: 0 8px 8px 8px;
+	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
+}
+
+.comfy-menu-header {
+	display: flex;
+}
+
+.comfy-menu-actions {
+	display: flex;
+	gap: 3px;
+	align-items: center;
+	height: 20px;
+	position: relative;
+	top: -1px;
+	font-size: 22px;
+}
+
+.comfy-menu .comfy-menu-actions button {
+	background-color: rgba(0, 0, 0, 0);
+	padding: 0;
+	border: none;
+	cursor: pointer;
+	font-size: inherit;
+}
+
+.comfy-menu .comfy-menu-actions .comfy-settings-btn {
+	font-size: 0.6em;
+}
+
+button.comfy-close-menu-btn {
+	font-size: 1em;
+	line-height: 12px;
+	color: #ccc;
+	position: relative;
+	top: -1px;
+}
+
+.comfy-menu-queue-size {
+	flex: auto;
+}
+
+.comfy-menu button,
+.comfy-modal button {
+	font-size: 20px;
+}
+
+.comfy-menu-btns {
+	margin-bottom: 10px;
+	width: 100%;
+}
+
+.comfy-menu-btns button {
+	font-size: 10px;
+	width: 50%;
+	color: var(--descrip-text) !important;
+}
+
+.comfy-menu > button {
+	width: 100%;
+}
+
+.comfy-btn,
+.comfy-menu > button,
+.comfy-menu-btns button,
+.comfy-menu .comfy-list button,
+.comfy-modal button {
+	color: var(--input-text);
+	background-color: var(--comfy-input-bg);
+	border-radius: 8px;
+	border-color: var(--border-color);
+	border-style: solid;
+	margin-top: 2px;
+}
+
+.comfy-btn:hover:not(:disabled),
+.comfy-menu > button:hover,
+.comfy-menu-btns button:hover,
+.comfy-menu .comfy-list button:hover,
+.comfy-modal button:hover,
+.comfy-menu-actions button:hover {
+	filter: brightness(1.2);
+	will-change: transform;
+	cursor: pointer;
+}
+
+span.drag-handle {
+	width: 10px;
+	height: 20px;
+	display: inline-block;
+	overflow: hidden;
+	line-height: 5px;
+	padding: 3px 4px;
+	cursor: move;
+	vertical-align: middle;
+	margin-top: -.4em;
+	margin-left: -.2em;
+	font-size: 12px;
+	font-family: sans-serif;
+	letter-spacing: 2px;
+	color: var(--drag-text);
+	text-shadow: 1px 0 1px black;
+}
+
+span.drag-handle::after {
+	content: '.. .. ..';
+}
+
+.comfy-queue-btn {
+	width: 100%;
+}
+
+.comfy-list {
+	color: var(--descrip-text);
+	background-color: var(--comfy-menu-bg);
+	margin-bottom: 10px;
+	border-color: var(--border-color);
+	border-style: solid;
+}
+
+.comfy-list-items {
+	overflow-y: scroll;
+	max-height: 100px;
+	min-height: 25px;
+	background-color: var(--comfy-input-bg);
+	padding: 5px;
+}
+
+.comfy-list h4 {
+	min-width: 160px;
+	margin: 0;
+	padding: 3px;
+	font-weight: normal;
+}
+
+.comfy-list-items button {
+	font-size: 10px;
+}
+
+.comfy-list-actions {
+	margin: 5px;
+	display: flex;
+	gap: 5px;
+	justify-content: center;
+}
+
+.comfy-list-actions button {
+	font-size: 12px;
+}
+
+button.comfy-queue-btn {
+	margin: 6px 0 !important;
+}
+
+.comfy-modal.comfy-settings,
+.comfy-modal.comfy-manage-templates {
+	text-align: center;
+	font-family: sans-serif;
+	color: var(--descrip-text);
+	z-index: 99;
+}
+
+.comfy-modal.comfy-settings input[type="range"] {
+	vertical-align: middle;
+}
+
+.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
+	width: 3.5em;
+}
+
+.comfy-modal input,
+.comfy-modal select {
+	color: var(--input-text);
+	background-color: var(--comfy-input-bg);
+	border-radius: 8px;
+	border-color: var(--border-color);
+	border-style: solid;
+	font-size: inherit;
+}
+
+.comfy-tooltip-indicator {
+	text-decoration: underline;
+	text-decoration-style: dashed;
+}
+
+@media only screen and (max-height: 850px) {
+	.comfy-menu {
+		top: 0 !important;
+		bottom: 0 !important;
+		left: auto !important;
+		right: 0 !important;
+		border-radius: 0;
+	}
+
+	.comfy-menu span.drag-handle {
+		display: none;
+	}
+	
+	.comfy-menu-queue-size {
+		flex: unset;
+	}
+
+	.comfy-menu-header {
+		justify-content: space-between;
+	}
+	.comfy-menu-actions {
+		gap: 10px;
+		font-size: 28px;
+	}
+}
+
+/* Input popup */
+
+.graphdialog {
+	min-height: 1em;
+	background-color: var(--comfy-menu-bg);
+}
+
+.graphdialog .name {
+	font-size: 14px;
+	font-family: sans-serif;
+	color: var(--descrip-text);
+}
+
+.graphdialog button {
+	margin-top: unset;
+	vertical-align: unset;
+	height: 1.6em;
+	padding-right: 8px;
+}
+
+.graphdialog input, .graphdialog textarea, .graphdialog select {
+	background-color: var(--comfy-input-bg);
+	border: 2px solid;
+	border-color: var(--border-color);
+	color: var(--input-text);
+	border-radius: 12px 0 0 12px;
+}
+
+/* Dialogs */
+
+dialog {
+	box-shadow: 0 0 20px #888888;
+}
+
+dialog::backdrop {
+	background: rgba(0, 0, 0, 0.5);
+}
+
+#comfy-settings-dialog {
+	padding: 0;
+	width: 41rem;
+}
+
+#comfy-settings-dialog tr > td:first-child {
+	text-align: right;
+}
+
+#comfy-settings-dialog tbody button, #comfy-settings-dialog table > button {
+	background-color: var(--bg-color);
+	border: 1px var(--border-color) solid;
+	border-radius: 0;
+	color: var(--input-text);
+	font-size: 1rem;
+	padding: 0.5rem;
+}
+
+#comfy-settings-dialog button:hover {
+	background-color: var(--tr-odd-bg-color);
+}
+
+/* General CSS for tables */
+
+.comfy-table {
+	border-collapse: collapse;
+	color: var(--input-text);
+	font-family: Arial, sans-serif;
+	width: 100%;
+}
+
+.comfy-table caption {
+	position: sticky;
+	top: 0;
+	background-color: var(--bg-color);
+	color: var(--input-text);
+	font-size: 1rem;
+	font-weight: bold;
+	padding: 8px;
+	text-align: center;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.comfy-table caption .comfy-btn {
+	position: absolute;
+	top: -2px;
+	right: 0;
+	bottom: 0;
+	cursor: pointer;
+	border: none;
+	height: 100%;
+	border-radius: 0;
+	aspect-ratio: 1/1;
+	user-select: none;
+	font-size: 20px;
+}
+
+.comfy-table caption .comfy-btn:focus {
+	outline: none;
+}
+
+.comfy-table tr:nth-child(even) {
+	background-color: var(--tr-even-bg-color);
+}
+
+.comfy-table tr:nth-child(odd) {
+	background-color: var(--tr-odd-bg-color);
+}
+
+.comfy-table td,
+.comfy-table th {
+	border: 1px solid var(--border-color);
+	padding: 8px;
+}
+
+/* Context menu */
+
+.litegraph .dialog {
+	z-index: 1;
+	font-family: Arial, sans-serif;
+}
+
+.litegraph .litemenu-entry.has_submenu {
+	position: relative;
+	padding-right: 20px;
+}
+
+.litemenu-entry.has_submenu::after {
+	content: ">";
+	position: absolute;
+	top: 0;
+	right: 2px;
+}
+
+.litegraph.litecontextmenu,
+.litegraph.litecontextmenu.dark {
+	z-index: 9999 !important;
+	background-color: var(--comfy-menu-bg) !important;
+	filter: brightness(95%);
+	will-change: transform;
+}
+
+.litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator) {
+	background-color: var(--comfy-menu-bg) !important;
+	filter: brightness(155%);
+	will-change: transform;
+	color: var(--input-text);
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu,
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+	background-color: var(--comfy-menu-bg) !important;
+	color: var(--input-text);
+}
+
+.litegraph.litecontextmenu input {
+	background-color: var(--comfy-input-bg) !important;
+	color: var(--input-text) !important;
+}
+
+.comfy-context-menu-filter {
+	box-sizing: border-box;
+	border: 1px solid #999;
+	margin: 0 0 5px 5px;
+	width: calc(100% - 10px);
+}
+
+.comfy-img-preview {
+	pointer-events: none;
+	overflow: hidden;
+	display: flex;
+	flex-wrap: wrap;
+ 	align-content: flex-start;
+	justify-content: center;
+}
+
+.comfy-img-preview img {
+	object-fit: contain;
+	width: var(--comfy-img-preview-width);
+	height: var(--comfy-img-preview-height);
+}
+
+.comfy-missing-nodes li button {
+	font-size: 12px;
+	margin-left: 5px;
+}
+
+/* Search box */
+
+.litegraph.litesearchbox {
+	z-index: 9999 !important;
+	background-color: var(--comfy-menu-bg) !important;
+	overflow: hidden;
+	display: block;
+}
+
+.litegraph.litesearchbox input,
+.litegraph.litesearchbox select {
+	background-color: var(--comfy-input-bg) !important;
+	color: var(--input-text);
+}
+
+.litegraph.lite-search-item {
+	color: var(--input-text);
+	background-color: var(--comfy-input-bg);
+	filter: brightness(80%);
+	will-change: transform;
+	padding-left: 0.2em;
+}
+
+.litegraph.lite-search-item.generic_type {
+	color: var(--input-text);
+	filter: brightness(50%);
+	will-change: transform;
+}
+
+@media only screen and (max-width: 450px) {
+	#comfy-settings-dialog .comfy-table tbody {
+		display: grid;
+	}
+	#comfy-settings-dialog .comfy-table tr {
+		display: grid;
+	}
+	#comfy-settings-dialog tr > td:first-child {
+		text-align: center;
+		border-bottom: none;
+		padding-bottom: 0;
+	}
+	#comfy-settings-dialog tr > td:not(:first-child) {
+		text-align: center;
+		border-top: none;
+	}
+}
diff --git a/password.py b/password.py
index f79bd7b..d84d2d9 100644
--- a/password.py
+++ b/password.py
@@ -244,4 +244,7 @@ async def check_login_status(request: web.Request, handler):
 
 app.middlewares.append(check_login_status)
 
+old_css_path = os.path.join(node_dir, "old_css")
+app.router.add_static('/old_css/', old_css_path)
+
 NODE_CLASS_MAPPINGS = {}