glass effect for input box

psebastiani2021 · web-flow · commit 952c388161e6 · 2024-03-15T10:57:44.000-05:00
diff --git a/src/tools/calculator.css b/src/tools/calculator.css
@@ -4,8 +4,12 @@ body.calculator-body {
 }
 .inputbox {
   border-radius: 5px;
-  background-color: #3e2148;
   margin-left: 3.99em;
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
 }
 .page__header, .calculator-nav {
   background: #3a2840 !important;

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,12 @@ body.calculator-body {`
`4`	`4`	`}`
`5`	`5`	`.inputbox {`
`6`	`6`	`border-radius: 5px;`
`7`		`- background-color: #3e2148;`
`8`	`7`	`margin-left: 3.99em;`
	`8`	`+ background: rgba(255, 255, 255, 0.2);`
	`9`	`+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);`
	`10`	`+ backdrop-filter: blur(5px);`
	`11`	`+ -webkit-backdrop-filter: blur(5px);`
	`12`	`+ border: 1px solid rgba(255, 255, 255, 0.3);`
`9`	`13`	`}`
`10`	`14`	`.page__header, .calculator-nav {`
`11`	`15`	`background: #3a2840 !important;`