DEV: CSS-only mask

javascripts/discourse/components/experimental-screen.gjs

@@ -1,57 +1,11 @@
-import Component from "@glimmer/component";
+const ExperimentalScreen = <template>
-import { tracked } from "@glimmer/tracking";
+  <ul class="experimental-screen">
-import { action } from "@ember/object";
-import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { htmlSafe } from "@ember/template";
-import { bind } from "discourse/lib/decorators";
-
-export default class ExperimentalScreen extends Component {
-  @tracked left = 0;
-  @tracked right = 0;
-  resizeObserver;
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.resizeObserver.disconnect();
-  }
-
-  @bind
-  calculateDistance(element) {
-    const distance = element.getBoundingClientRect();
-    this.left = distance.left;
-    this.right = distance.right;
-  }
-
-  get distanceStyles() {
-    return htmlSafe(
-      `--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
-    );
-  }
-
-  @action
-  onInsert(element) {
-    this.calculateDistance(element);
-
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.calculateDistance(entry.target);
-      }
-    });
-
-    this.resizeObserver.observe(element);
-  }
-
-  <template>
-    <ul
-      class="experimental-screen"
-      {{didInsert this.onInsert}}
-      style={{this.distanceStyles}}
-    >
     <li class="experimental-screen__top-left"></li>
     <li class="experimental-screen__top-right"></li>
     <li class="experimental-screen__bottom-left"></li>
     <li class="experimental-screen__bottom-right"></li>
     <li class="experimental-screen__bottom-bar"></li>
   </ul>
-  </template>
+</template>;
-}
+
+export default ExperimentalScreen;

scss/box-view.scss

@@ -61,17 +61,15 @@
   }
   &__top-left {
     top: var(--header-offset);
-    left: var(--left-distance);
   }
   &__top-right {
     top: var(--header-offset);
     transform: rotate(90deg);
-    left: calc(var(--right-distance) - var(--d-border-radius-large));
+    right: var(--d-border-radius-large);
   }
   &__bottom-left {
     transform: rotate(-90deg);
     bottom: var(--d-border-radius-large);
-    left: var(--left-distance);
     @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
@@ -79,7 +77,7 @@
   &__bottom-right {
     transform: rotate(180deg);
     bottom: var(--d-border-radius-large);
-    left: calc(var(--right-distance) - var(--d-border-radius-large));
+    right: var(--d-border-radius-large);
     @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
@@ -90,7 +88,6 @@
     z-index: 399;
     background-color: var(--background-color);
     bottom: 0;
-    left: var(--left-distance);
     height: var(--d-border-radius-large);
     @media screen and (max-width: 768px) {
       height: calc(var(--d-border-radius-large) * 2);