squash!

Signed-off-by: Nikola Hristov <[email protected]>

Source/Variable/ESBuild.js

@@ -33,10 +33,16 @@ export default {
         },
         (await import("esbuild-plugin-copy")).copy({
             resolveFrom: "out",
-            assets: {
-                from: ["./Source/Script/Monaco/Theme/*.json"],
-                to: ["./Script/Monaco/Theme/"],
-            },
+            assets: [
+                {
+                    from: ["./Source/Script/Monaco/Theme/*.json"],
+                    to: ["./Script/Monaco/Theme/"],
+                },
+                {
+                    from: ["./Source/Stylesheet/**/*.scss"],
+                    to: ["./Stylesheet/"],
+                },
+            ],
         }),
     ],
 };

Source/Variable/ESBuild.ts

@@ -35,11 +35,17 @@ export default {
 		},
 		(await import("esbuild-plugin-copy")).copy({
 			resolveFrom: "out",
-			assets: {
-				from: ["./Source/Script/Monaco/Theme/*.json"],
-				to: ["./Script/Monaco/Theme/"],
-			},
-			}),
+			assets: [
+				{
+					from: ["./Source/Script/Monaco/Theme/*.json"],
+					to: ["./Script/Monaco/Theme/"],
+				},
+				{
+					from: ["./Source/Stylesheet/**/*.scss"],
+					to: ["./Stylesheet/"],
+				},
+			],
+		}),
 	],
 } satisfies BuildOptions as BuildOptions;
 

Target/Stylesheet/Element/Action.scss

@@ -0,0 +1,13 @@
+.Action {
+	button {
+		@apply rounded-none bg-white text-black shadow-none outline-0 ring-0 hover:z-20 hover:bg-black/5 focus:z-10 active:z-10 active:animate-pulse active:bg-white/5 dark:bg-black dark:text-white hover:dark:bg-white/5;
+
+		&:first-child {
+			@apply rounded-bl-lg;
+		}
+
+		&:last-child {
+			@apply rounded-br-lg;
+		}
+	}
+}

Target/Stylesheet/Element/Anchor.scss

@@ -0,0 +1,5 @@
+@import "../Mixin/Anchor.scss";
+
+.Anchor {
+	@include Anchor();
+}

Target/Stylesheet/Element/Button.scss

@@ -0,0 +1,5 @@
+@import "../Mixin/Button.scss";
+
+.Button {
+	@include Button();
+}

Target/Stylesheet/Element/Editor.scss

@@ -0,0 +1,144 @@
+@import "../Mixin/Input.scss";
+@import "../Mixin/Anchor.scss";
+
+.Editor {
+	@include Input();
+
+	@apply relative block w-full overflow-hidden rounded-2xl p-0 font-normal outline-4 outline-white hover:shadow-xl hover:shadow-orange-500/50 sm:max-w-full dark:outline-black dark:hover:shadow-blue-500/50;
+
+	.Help {
+		@apply ease-Land relative z-10 flex border-b border-b-slate-300 bg-black/5 px-6 py-4 text-center leading-8 transition-all duration-150 dark:border-b-black dark:bg-white/5 dark:text-white;
+
+		.Tip {
+			@apply inline-block;
+		}
+
+		kbd {
+			@apply cursor-pointer select-none;
+
+			&:hover {
+				span {
+					animation-direction: alternate-reverse;
+				}
+			}
+		}
+
+		span {
+			@apply select-auto text-amber-600;
+		}
+
+		+ .Monaco {
+			@apply h-80;
+		}
+	}
+
+	.Monaco {
+		@apply block h-96 w-full overflow-hidden rounded-2xl;
+	}
+
+	.Error {
+		@apply ease-Land absolute left-0 top-0 z-30 w-full cursor-pointer bg-stone-50 px-4 py-3 text-base font-normal leading-10 text-black transition-all duration-150 hover:bg-stone-100 dark:bg-red-700 dark:text-white hover:dark:bg-black/95 hover:dark:text-blue-300;
+
+		span {
+			@apply align-middle;
+		}
+	}
+
+	.monaco-editor {
+		@apply font-sans;
+
+		--vscode-menu-background: theme("colors.white");
+		--vscode-editorGutter-background: theme("colors.white");
+		--vscode-editor-background: theme("colors.white");
+		--vscode-quickInput-background: theme("colors.white");
+
+		@media (prefers-color-scheme: dark) {
+			--vscode-menu-background: theme("colors.black");
+			--vscode-editorGutter-background: theme("colors.black");
+			--vscode-editor-background: theme("colors.black");
+			--vscode-quickInput-background: theme("colors.black");
+		}
+
+		.view-overlays .current-line {
+			@apply rounded-sm;
+		}
+
+		.monaco-scrollable-element > .scrollbar > .slider {
+			--vscode-scrollbarSlider-background: rgba(0, 0, 0, 0.3);
+			--vscode-scrollbarSlider-hoverBackground: black;
+
+			transform: scale3d(1, 0.8, 1) !important;
+
+			@apply cursor-grab rounded-sm;
+
+			@media (prefers-color-scheme: dark) {
+				--vscode-scrollbarSlider-background: rgba(255, 255, 255, 0.3);
+				--vscode-scrollbarSlider-hoverBackground: theme("colors.white");
+			}
+		}
+
+		.monaco-scrollable-element > .scrollbar {
+			width: 16px !important;
+			@apply ease-Land transition-opacity;
+		}
+
+		.quick-input-widget {
+			@apply ease-Land rounded-t-none hover:shadow-xl hover:shadow-orange-500/50 dark:hover:shadow-blue-500/50;
+
+			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+				var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+
+			border-top: none !important;
+
+			--vscode-widget-border: theme("colors.stone.200");
+
+			@media (prefers-color-scheme: dark) {
+				--vscode-widget-border: theme("colors.slate.900");
+			}
+
+			&:hover {
+				--vscode-widget-border: theme("colors.orange.400");
+				@media (prefers-color-scheme: dark) {
+					--vscode-widget-border: theme("colors.blue.500");
+				}
+			}
+		}
+
+		.cursors-layer .cursor {
+			transform: scale3d(1, 0.9, 1);
+
+			@apply mx-0.5 rounded-sm bg-black;
+
+			&[style*="left: 0px"] {
+				@apply mx-0;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				@apply bg-white;
+			}
+		}
+
+		.monaco-hover {
+			@apply rounded-lg px-3 py-2;
+
+			&:hover {
+				@apply border-orange-400;
+			}
+
+			@media (prefers-color-scheme: dark) {
+				@apply border-slate-900;
+
+				--vscode-editorHoverWidget-background: theme("colors.black");
+				--vscode-editorHoverWidget-foreground: theme("colors.white");
+
+				&:hover {
+					@apply border-blue-500;
+				}
+			}
+		}
+	}
+
+	.decorationsOverviewRuler {
+		@apply opacity-0;
+	}
+}

Target/Stylesheet/Element/Preview.scss

@@ -0,0 +1,13 @@
+@import "../Mixin/Anchor.scss";
+
+.Preview {
+	a {
+		@include Anchor();
+		@apply italic leading-8 dark:text-stone-400;
+		font-family: "Source Code Pro";
+	}
+
+	iframe {
+		@apply h-full w-full rounded-full bg-green-600/50;
+	}
+}

Target/Stylesheet/Mixin/Anchor.scss

@@ -0,0 +1,27 @@
+@mixin Anchor() {
+	text-underline-position: under;
+	--text-shadow-color: theme("colors.white");
+	text-shadow:
+		-1px 1px var(--text-shadow-color),
+		-1px 2px var(--text-shadow-color),
+		-2px 1px var(--text-shadow-color),
+		-2px 2px var(--text-shadow-color),
+		-3px 1px var(--text-shadow-color),
+		-3px 2px var(--text-shadow-color),
+		0 1px var(--text-shadow-color),
+		0 2px var(--text-shadow-color),
+		1px 1px var(--text-shadow-color),
+		1px 2px var(--text-shadow-color),
+		2px 1px var(--text-shadow-color),
+		2px 2px var(--text-shadow-color),
+		3px 1px var(--text-shadow-color),
+		3px 2px var(--text-shadow-color);
+
+	@apply ease-Land dark:decoration-backgroundDark relative cursor-pointer rounded-sm underline decoration-stone-300 outline-none outline outline-offset-8 transition-all duration-150 hover:text-blue-600 hover:decoration-orange-400 focus-visible:z-10 focus-visible:decoration-transparent focus-visible:outline-4 focus-visible:outline-blue-500 hover:dark:text-neutral-200;
+
+	@media (prefers-color-scheme: dark) {
+		& {
+			--text-shadow-color: var(--background-dark);
+		}
+	}
+}

Target/Stylesheet/Mixin/Button.scss

@@ -0,0 +1,25 @@
+@import "./Status.scss";
+
+@mixin Button() {
+	@apply ease-Land focus:ring-5 hover:ring-5 inline-block w-full max-w-fit select-none rounded-2xl border-none bg-black px-6 py-3 text-center font-medium tracking-wide text-white outline outline-1 outline-offset-0 outline-white transition-all duration-150 hover:shadow-xl hover:shadow-blue-500/50 hover:outline-blue-600 hover:ring-blue-500 focus:shadow-xl focus:shadow-blue-500/50 focus:outline-1 focus:outline-offset-0 focus:outline-blue-600 focus:ring-blue-500 sm:h-auto sm:w-auto dark:bg-white dark:text-black dark:outline-neutral-700;
+
+	&.Small {
+		@apply px-4 py-1 text-base;
+
+		.Icon {
+			@apply my-2 h-5;
+		}
+	}
+
+	&.Status {
+		@include Status();
+	}
+
+	.Icon {
+		@apply inline-block h-6 align-top;
+	}
+
+	span {
+		@apply align-top;
+	}
+}

Target/Stylesheet/Mixin/Input.scss

@@ -0,0 +1,3 @@
+@mixin Input() {
+	@apply ease-Land focus:ring-5 block max-w-4xl select-none resize-none rounded-xl border-none bg-white px-4 py-3 font-medium placeholder-slate-500 outline outline-1 outline-offset-0 outline-slate-400 transition-all duration-150 hover:outline-orange-400 focus:shadow-xl focus:shadow-blue-500/50 focus:outline-1 focus:outline-offset-0 focus:outline-blue-600 focus:ring-blue-500 sm:max-w-xs dark:bg-black dark:placeholder-slate-500 dark:outline-slate-700 dark:hover:outline-blue-500;
+}

Target/Stylesheet/Mixin/Status.scss

@@ -0,0 +1,24 @@
+@mixin Status() {
+	@apply mx-2 -mt-1 inline-block h-3 w-3 max-w-full cursor-pointer rounded-full bg-white p-0 align-middle;
+
+	&.Connecting,
+	&.Disconnecting {
+		@apply animate-pulse border border-solid border-black/50 dark:border-none;
+	}
+
+	&.Connected {
+		@apply bg-green-500 outline-green-600 ring-green-500;
+	}
+
+	&.Disconnected {
+		@apply bg-red-500 outline-red-600 ring-red-500;
+	}
+
+	&:hover {
+		@apply opacity-90;
+	}
+
+	&:active {
+		@apply opacity-100;
+	}
+}