diff --git a/editor.css b/editor.css index 98a7a91..7449092 100644 --- a/editor.css +++ b/editor.css @@ -20,11 +20,13 @@ body { position: fixed; /* padding: 8 8 8 8; */ padding-left: 10px; - background-color: rgb(230, 230, 230); - opacity: 0.95; - z-index: 2; + background-color: rgba(230, 230, 230, 0.8); + /* opacity: 0.95; */ + z-index: 5; float: left; - overflow: auto; + /* overflow: auto; */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .menuitem { @@ -89,11 +91,13 @@ body { .submenu, #sidepanel, #filepanel { position:fixed; - background-color: rgb(230, 230, 230); + background-color: rgba(230, 230, 230, 0.8); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - opacity: 0.95; + /* opacity: 0.95; */ padding: 20px; border-radius: 15px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } #sidepanel { @@ -106,6 +110,10 @@ body { display: none; } +#sidepanel * { + background: none; +} + #sideheader, #fileheader { width: 100%; } @@ -168,12 +176,14 @@ body { line-height: 2; position: absolute; z-index: 15; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .contextmenu div, #filemenu div { padding: 5px; - background-color: rgb(230, 230, 230); - opacity: 0.95; + background-color: rgba(230, 230, 230, 0.8); + /* opacity: 0.95; */ transition: all 100ms ease-out 50ms; -webkit-user-select: none; -ms-user-select: none; @@ -192,11 +202,11 @@ body { } .contextmenu div:hover, #filemenu div:hover { - background-color: rgb(240, 240, 240); + background-color: rgb(240, 240, 240, 0.8); } .contextmenu div:active, #filemenu div:active { - background-color: rgb(250, 250, 250); + background-color: rgb(250, 250, 250, 0.8); } #filemenu .menutop { @@ -213,6 +223,7 @@ body { #filemenu { padding: 0 0 0 0; + background-color: transparent; } #filemenu div { @@ -366,11 +377,24 @@ label { display: none; } +#submenu-backdrop { + position: fixed; + top: 60px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 15px; + background: transparent; + display: none; + z-index: 3; +} + .force-graph-container .graph-tooltip { color: black; - background-color: rgb(230, 230, 230); + background-color: rgba(230, 230, 230, 0.8); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - opacity: 0.95; + /* opacity: 0.95; */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); font-family: 'Inter'; font-size: .75em; border-radius: 5px; diff --git a/editor.html b/editor.html index c35d5ba..19ae6c2 100644 --- a/editor.html +++ b/editor.html @@ -10,7 +10,8 @@
-
+
+