From d6db79ef301a420927361d4984a8aba507b208ee Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Thu, 11 Jan 2024 09:30:02 +0100
Subject: [PATCH 1/2] initial commit

---
 mikupad.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 84 insertions(+), 3 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 2382a9d..1fc2574 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -67,6 +67,42 @@
 	color-scheme: dark;
 }
 
+html.nockoffAI {
+	---color-bg-dark: #191b31;
+	--color-bg: #191b31;
+	
+	--color-text: #fff;
+	--color-base-0: #fff;
+	--color-base-10: color-mix(in oklch, var(--color-base-100) 90%, var(--color-base-0));
+	--color-base-20: color-mix(in oklch, var(--color-base-100) 80%, var(--color-base-0));
+	--color-base-30: color-mix(in oklch, var(--color-base-100) 70%, var(--color-base-0));
+	--color-base-40: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-0));
+	--color-base-50: color-mix(in oklch, var(--color-base-100) 50%, var(--color-base-0));
+	--color-base-60: color-mix(in oklch, var(--color-base-100) 40%, var(--color-base-0));
+	--color-base-70: color-mix(in oklch, var(--color-base-100) 30%, var(--color-base-0));
+	--color-base-80: color-mix(in oklch, var(--color-base-100) 20%, var(--color-base-0));
+	--color-base-90: color-mix(in oklch, var(--color-base-100) 10%, var(--color-base-0));
+	--color-base-100: #13152c;
+	--color-dark: var(--color-base-100);
+	--color-light: #fff;
+	--color-input: #0e0f21;
+	--color-sidebar: var(--color-base-100);
+	--color-prompt-area: #191b31;
+
+	--token-prob-box: #4a4a4a;
+
+	font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
+	font-size: 15.5px;
+
+	accent-color: var(--color-base-30);
+	background: var(--color-bg-dark);
+	color: var(--color-base-0);
+	color-scheme: dark;
+}
+html.nockoffAI body {
+	background: var(--color-prompt-area)
+}
+
 html.monospace-dark {
 	---color-bg-dark: #282833;
 	--color-bg: #202020;
@@ -133,6 +169,17 @@
 	background: var(--color-bg);
 	color: var(--color-text);
 }
+html.nockoffAI #prompt-area {
+	background: var(--color-prompt-area);
+	color: var(--color-text);
+}
+html.nockoffAI #memory-area,
+html.nockoffAI #an-area,
+html.nockoffAI .expanded-text-area-settings,
+html.nockoffAI .wi-textarea {
+	background: var(--color-input);
+	color: var(--color-text);
+}
 .modal .wi-textarea {
 	resize:vertical;
 	background: var(--color-base-100);
@@ -228,7 +275,8 @@
 	/*transition: top 0.2s, left 0.2s;*/
 	z-index: 9999;
 }
-html.monospace-dark #probs {
+html.monospace-dark #probs,
+html.nockoffAI #probs {
 	background: var(--color-base-10);
 	border: 1px solid var(--token-prob-box);
 	border-radius: 4px;
@@ -407,6 +455,10 @@
 html.monospace-dark #sidebar {
 	background: #282833;
 }
+html.nockoffAI #sidebar {
+	background: var(--color-sidebar);
+	color: var(--color-base-50);
+}
 
 .hbox {
 	flex: none;
@@ -445,15 +497,29 @@
 	flex: none;
 }
 
-html.monospace-dark .InputBox > input, html.monospace-dark .SelectBox > select {
-	color: var(--color-base-0);
+html.monospace-dark .InputBox > input, html.monospace-dark .SelectBox > select,
+html.nockoffAI .InputBox > input, html.nockoffAI .SelectBox > select {
+	color: var(--color-light);
 }
+
 .InputBox > input:read-only {
 	background: var(--color-base-60);
 }
 html.monospace-dark .InputBox > input:read-only {
 	background: var(--color-base-30);
 }
+html.nockoffAI .InputBox > input:read-only {
+	background: var(--color-base-90);
+}
+html.nockoffAI .SelectBox > select,
+html.nockoffAI .collapsible-header,
+html.nockoffAI .InputBox > input {
+	background: var(--color-input);
+}
+html.nockoffAI .horz-separator {
+	border-top: 3px dotted color-mix(in oklch, var(--color-base-100) 90%, var(--color-light));
+}
+
 .InputBox > input:focus-visible {
 	outline: 1px solid var(--color-base-0);
 }
@@ -620,6 +686,9 @@
 html.monospace-dark .Sessions > ul {
 	background: var(--color-base-20);
 }
+html.nockoffAI .Sessions > ul {
+	background: var(--color-input);
+}
 .Sessions.disabled > ul {
 	background: var(--color-base-50);
 	pointer-events: auto;
@@ -642,6 +711,13 @@
 	word-break: break-word;
 	user-select: none;
 }
+html.nockoffAI .Session {
+	margin: 0.25rem;
+	padding: 0.25rem;
+}
+html.nockoffAI .Session.selected {
+	background-color: var(--color-sidebar)
+}
 .Session:hover {
 	background-color: var(--color-base-60);
 }
@@ -2370,6 +2446,7 @@
 	function switchTheme(value, force) {
 		document.documentElement.classList.remove('serif-dark');
 		document.documentElement.classList.remove('monospace-dark');
+		document.documentElement.classList.remove('nockoffAI');
 		switch (value) {
 		case 1:
 			document.documentElement.classList.add('serif-dark');
@@ -2377,6 +2454,9 @@
 		case 2:
 			document.documentElement.classList.add('monospace-dark');
 			break;
+		case 3:
+			document.documentElement.classList.add('nockoffAI');
+			break;
 		}
 		if (!force)
 			setTheme(value);
@@ -2436,6 +2516,7 @@
 					{ name: 'Serif Light', value: 0 },
 					{ name: 'Serif Dark', value: 1 },
 					{ name: 'Monospace Dark', value: 2 },
+					{ name: 'nockoffAI', value: 3 },
 				]}/>
 			<div class="horz-separator"/>
 			<${CollapsibleGroup} label="Sessions">

From 0ff1ec57b4a754ee049ed8d3b95531ac638fa074 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Thu, 11 Jan 2024 23:45:48 +0100
Subject: [PATCH 2/2] cleanup

---
 mikupad.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 1fc2574..f335e82 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -88,6 +88,10 @@
 	--color-input: #0e0f21;
 	--color-sidebar: var(--color-base-100);
 	--color-prompt-area: #191b31;
+	--color-hover: #13152c;
+	--color-button: #22253f;
+	--color-disabled: #161833;
+	--color-button-hover: #282b44;
 
 	--token-prob-box: #4a4a4a;
 
@@ -170,6 +174,7 @@
 	color: var(--color-text);
 }
 html.nockoffAI #prompt-area {
+	text-indent: 1em each-line;
 	background: var(--color-prompt-area);
 	color: var(--color-text);
 }
@@ -341,6 +346,17 @@
 	display: flex;
 	flex-direction: column;
 }
+html.nockoffAI .modal {
+	background: var(--color-sidebar);
+	color:var(--color-base-50);
+}
+html.nockoffAI .modal-title {
+	color:var(--color-text);
+}
+html.nockoffAI  #context-order-desc,
+html.nockoffAI .modal-desc {
+	color:var(--color-base-80);
+}
 .modal-content {
 	overflow-y: auto;
 }
@@ -408,10 +424,13 @@
 	margin-bottom:8px;
 }
 .wi-entry-name input {
-	background: var(--color-base-60) !important;
+	background: var(--color-base-60);
 	font-weight:bold !important;
 	font-size: 1.2rem !important;
 }
+html.nockoffAI .wi-entry-name input {
+	background: var(--color-base-10) !important;
+}
 
 .wi-entry-buttons {
 	grid-area: wi-entry-buttons;
@@ -509,7 +528,7 @@
 	background: var(--color-base-30);
 }
 html.nockoffAI .InputBox > input:read-only {
-	background: var(--color-base-90);
+	background: var(--color-disabled);
 }
 html.nockoffAI .SelectBox > select,
 html.nockoffAI .collapsible-header,
@@ -526,6 +545,9 @@
 .SelectBox > select:disabled {
 	background: var(--color-base-60);
 }
+html.nockoffAI .SelectBox > select:disabled {
+	background: var(--color-disabled);
+}
 
 .Checkbox {
 	user-select: none;
@@ -587,6 +609,14 @@
 	background: var(--color-base-30);
 	border-radius: 2px;
 }
+html.nockoffAI button {
+	background: var(--color-button);
+	color: var(--color-base-90);
+}
+html.nockoffAI .Session button:not(:hover),
+html.nockoffAI button.textAreaSettings:not(:hover) {
+	background: none;
+}
 button.textAreaSettings {
 	all: unset;
 	color: var(--color-base-50);
@@ -598,12 +628,18 @@
 button:hover {
 	background: var(--color-base-40);
 }
+html.nockoffAI button:hover {
+	background: var(--color-button-hover);
+}
 button:active {
 	background: var(--color-base-50);
 }
 button:disabled {
 	background: var(--color-base-60);
 }
+html.nockoffAI button:disabled {
+	background: var(--color-disabled);
+}
 button:focus-visible {
 	outline: 1px solid var(--color-base-0);
 }
@@ -693,6 +729,9 @@
 	background: var(--color-base-50);
 	pointer-events: auto;
 }
+html.nockoffAI .Sessions.disabled > ul {
+	background: var(--color-disabled);
+}
 
 .Sessions > ul > li {
 	display: flex;
@@ -714,9 +753,15 @@
 html.nockoffAI .Session {
 	margin: 0.25rem;
 	padding: 0.25rem;
+	color: var(--color-base-70);
+}
+html.nockoffAI .Session > input {
+	background-color: var(--color-input);
+	outline: none;
 }
 html.nockoffAI .Session.selected {
-	background-color: var(--color-sidebar)
+	color: var(--color-text);
+	background-color: var(--color-prompt-area)
 }
 .Session:hover {
 	background-color: var(--color-base-60);
@@ -724,6 +769,9 @@
 html.monospace-dark .Session:hover {
 	background-color: var(--color-base-40);
 }
+html.nockoffAI .Session:hover {
+	background-color: var(--color-hover);
+}
 .Session.selected {
 	background-color: var(--color-base-30);
 }
@@ -2751,7 +2799,7 @@
 			title="Context"
 			description="This is the prompt being sent to your large language model.">
 		<${CollapsibleGroup} label="Advanced Context Ordering">
-			<div>
+			<div id="context-order-desc">
 				You can use the following placeholders to order the context according to your needs:<br />
 				<div id="advancedContextPlaceholders">
 					<table border="1" frame="void" rules="all">