Merge pull request #6 from reearth/style/update-style-for-page-2

airslice · web-flow · commit 1a672a005e5b · 2024-10-18T16:43:06.000+08:00
style: update for header sidebar and card
diff --git a/src/styles/page.css b/src/styles/page.css
@@ -1,7 +1,6 @@
 :root {
   --purple-hsl: 240, 61%, 52%;
   --overlay-blurple: hsla(var(--purple-hsl), 0.2);
-  --dark-purple-hsl: 240, 15%, 15%;
 }
 
 :root[data-theme="light"] {
@@ -19,7 +18,7 @@
   background-attachment: fixed;
 }
 
-.card {
+.page .card {
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 10px;
 }
@@ -29,10 +28,14 @@
 }
 
 .page header,
-.page .sidebar-pane {
-  background-color: hsla(var(--dark-purple-hsl), 0.95);
+:root[data-theme="light"] .page header {
+  background-color: transparent;
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
 }
-:root[data-theme="light"] .page header,
+
+.page .sidebar-pane,
 :root[data-theme="light"] .page .sidebar-pane {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: transparent;
+  border-inline-end: 1px solid var(--sl-color-gray-6);
 }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,6 @@`
`1`	`1`	`:root {`
`2`	`2`	`--purple-hsl: 240, 61%, 52%;`
`3`	`3`	`--overlay-blurple: hsla(var(--purple-hsl), 0.2);`
`4`		`- --dark-purple-hsl: 240, 15%, 15%;`
`5`	`4`	`}`
`6`	`5`
`7`	`6`	`:root[data-theme="light"] {`
`@@ -19,7 +18,7 @@`
`19`	`18`	`background-attachment: fixed;`
`20`	`19`	`}`
`21`	`20`
`22`		`-.card {`
	`21`	`+.page .card {`
`23`	`22`	`background-color: rgba(0, 0, 0, 0.3);`
`24`	`23`	`border-radius: 10px;`
`25`	`24`	`}`
`@@ -29,10 +28,14 @@`
`29`	`28`	`}`
`30`	`29`
`31`	`30`	`.page header,`
`32`		`-.page .sidebar-pane {`
`33`		`- background-color: hsla(var(--dark-purple-hsl), 0.95);`
	`31`	`+:root[data-theme="light"] .page header {`
	`32`	`+ background-color: transparent;`
	`33`	`+ -webkit-backdrop-filter: blur(3px);`
	`34`	`+ backdrop-filter: blur(3px);`
`34`	`35`	`}`
`35`		`-:root[data-theme="light"] .page header,`
	`36`	`+`
	`37`	`+.page .sidebar-pane,`
`36`	`38`	`:root[data-theme="light"] .page .sidebar-pane {`
`37`		`- background-color: rgba(255, 255, 255, 0.5);`
	`39`	`+ background-color: transparent;`
	`40`	`+ border-inline-end: 1px solid var(--sl-color-gray-6);`
`38`	`41`	`}`