Add terminal blur and opacity settings

excalith · Dec 25, 2023 · b231183 · b231183 · vercel · Dec 25, 2023
1 parent 790086b
commit b231183
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -25,7 +25,16 @@ export default function Home() {
 		// Set Terminal
 		documentStyle.setProperty("--glow-color", settings.theme.glowColor)
 		documentStyle.setProperty("--background-color", settings.theme.backgroundColor)
-		documentStyle.setProperty("--window-color", settings.theme.windowColor)
+
+		if (settings.terminal.blur > 0) {
+			documentStyle.setProperty("--window-color", "transparent")
+			documentStyle.setProperty("--window-opacity", 1)
+			documentStyle.setProperty("--window-blur", settings.terminal.blur + "px")
+		} else {
+			documentStyle.setProperty("--window-color", settings.theme.windowColor)
+			documentStyle.setProperty("--window-opacity", settings.terminal.opacity)
+			documentStyle.setProperty("--window-blur", 0 + "px")
+		}
 
 		// Set Prompt Selection Color
 		documentStyle.setProperty("--selection-fg", "var(--" + settings.prompt.selectionFg + ")")

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -4,9 +4,11 @@
 
 :root {
 	--background-color: #121317;
-	--window-color: #1e212b;
 	--glow-color: transparent;
-
+	--window-opacity: 1;
+	--window-color: #1e212b;
+	--window-blur: 0px;
+
 	--white: #e2e2e2;
 	--gray: #97989d;
 	--black: #16161e;
@@ -81,6 +83,11 @@ a:hover {
 	text-shadow: 0px 0px 10px;
 }
 
+.bg-window-color {
+	opacity: var(--window-opacity);
+	backdrop-filter: blur(var(--window-blur));
+}
+
 .selected {
 	background-color: var(--selection-bg);
 	color: var(--selection-fg) !important;

diff --git a/startpage.config.js b/startpage.config.js
@@ -25,7 +25,9 @@ const defaultConfig = {
 	terminal: {
 		fixedHeight: true,
 		windowGlow: true,
-		textGlow: false
+		textGlow: false,
+		opacity: 1,
+		blur: 0
 	},
 	prompt: {
 		ctrlC: true,