modify blur-origin

cirisus · Feb 23, 2024 · d3f284c · d3f284c
1 parent e58fc9b
commit d3f284c
Show file tree

Hide file tree

Showing 47 changed files with 14,426 additions and 5,132 deletions.
diff --git a/.history/component/collapsible-sidebar_20240205200737.css b/.history/component/collapsible-sidebar_20240205200737.css
@@ -0,0 +1,180 @@
+@media (min-width: 767px) {
+    div#extra-div-5::after {
+        content: " ";
+        position: fixed;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -moz-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -moz-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        width: 1rem;
+        height: 100%;
+        max-height: 100%;
+        top: 0%;
+            -webkit-transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            -o-transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            -moz-transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            left: 1rem;
+            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
+            background-repeat: no-repeat;
+            background-position: center left 1rem;
+            background-attachment: fixed;
+            -webkit-background-size: 1rem 12.875rem;
+               -moz-background-size: 1rem 12.875rem;
+                 -o-background-size: 1rem 12.875rem;
+                    background-size: 1rem 12.875rem;
+            pointer-events: none;
+        }
+
+    div#extra-div-5::before {
+        content: " ";
+        background-color: rgb(var(--scale-0));
+        position: fixed;
+        top: 0%;
+        left: 0rem;
+        -webkit-transform: translateX(-12.6rem);
+        -moz-transform: translateX(-12.6rem);
+        -ms-transform: translateX(-12.6rem);
+         -o-transform: translateX(-12.6rem);
+         transform: translateX(-12.6rem);
+         -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         width: 17em;
+         width: var(--sidebar-width-on-desktop, 17em);
+         height: 100vh;
+            -webkit-transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+            transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+            -o-transition:
+                opacity .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+            -moz-transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve);
+            transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+            opacity: 0.5;
+        pointer-events: none;
+        z-index: 9;
+        overflow-y: hidden !important;
+        margin-bottom: 0;
+
+        -webkit-backdrop-filter: blur(1em);
+        backdrop-filter: blur(1em);
+    }
+       div#extra-div-4:hover ~ div#extra-div-5::before,
+       div#extra-div-4:active ~ div#extra-div-5::before {
+            -webkit-transform: translateX(0);
+               -moz-transform: translateX(0);
+                -ms-transform: translateX(0);
+                 -o-transform: translateX(0);
+                    transform: translateX(0);
+            opacity: 0;
+        }
+
+        div#extra-div-4:focus-within ~ div#extra-div-5::before {
+            -webkit-transform: translateX(0);
+               -moz-transform: translateX(0);
+                -ms-transform: translateX(0);
+                 -o-transform: translateX(0);
+                    transform: translateX(0);
+            opacity: 0;
+        }
+
+    /* Generally sidebar collapses. */
+    #side-bar, div#extra-div-4 {
+        opacity: 0;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        -webkit-transform: translateX(-90%) !important;
+        -moz-transform: translateX(-90%) !important;
+        -ms-transform: translateX(-90%) !important;
+        -o-transform: translateX(-90%) !important;
+        transform: translateX(-90%) !important;
+       -webkit-transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+        transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+        -o-transition:
+                opacity .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+        -moz-transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve);
+        transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+        transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+        -webkit-backdrop-filter: blur(1em);
+        backdrop-filter: blur(1em);
+    }
+    /* When outbounded sidebar stays still. */
+    #side-bar:hover,
+    #side-bar:active,
+    div#extra-div-4:hover,
+    div#extra-div-4:active {
+        overflow-y: auto;
+        -webkit-transform: translateX(0) !important;
+        -moz-transform: translateX(0) !important;
+        -ms-transform: translateX(0) !important;
+        -o-transform: translateX(0) !important;
+        transform: translateX(0) !important;
+        margin-left: 0rem;
+        opacity: 1;
+    }
+    #side-bar:focus-within {
+        overflow-y: auto;
+        -webkit-transform: translateX(0) !important;
+        -moz-transform: translateX(0) !important;
+        -ms-transform: translateX(0) !important;
+        -o-transform: translateX(0) !important;
+        transform: translateX(0) !important;
+        margin-left: 0rem;
+        opacity: 1;
+    }
+}
diff --git a/.history/component/collapsible-sidebar_20240223171423.css b/.history/component/collapsible-sidebar_20240223171423.css
@@ -0,0 +1,178 @@
+@media (min-width: 767px) {
+    div#extra-div-5::after {
+        content: " ";
+        position: fixed;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -moz-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -moz-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        width: 1rem;
+        height: 100%;
+        max-height: 100%;
+        top: 0%;
+            -webkit-transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            -o-transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            -moz-transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            transition:
+                left .3s var(--standard-curve),
+                background-position .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            left: 1rem;
+            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
+            background-repeat: no-repeat;
+            background-position: center left 1rem;
+            background-attachment: fixed;
+            -webkit-background-size: 1rem 12.875rem;
+               -moz-background-size: 1rem 12.875rem;
+                 -o-background-size: 1rem 12.875rem;
+                    background-size: 1rem 12.875rem;
+            pointer-events: none;
+        }
+
+    div#extra-div-5::before {
+        content: " ";
+        background-color: rgb(var(--scale-0));
+        position: fixed;
+        top: 0%;
+        left: 0rem;
+        -webkit-transform: translateX(-12.6rem);
+        -moz-transform: translateX(-12.6rem);
+        -ms-transform: translateX(-12.6rem);
+         -o-transform: translateX(-12.6rem);
+         transform: translateX(-12.6rem);
+         -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
+         width: 17em;
+         width: var(--sidebar-width-on-desktop, 17em);
+         height: 100vh;
+            -webkit-transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+            transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+            -o-transition:
+                opacity .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+            -moz-transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve);
+            transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+            transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+            opacity: 0.5;
+        pointer-events: none;
+        z-index: 9;
+        overflow-y: hidden !important;
+        margin-bottom: 0;
+
+        -webkit-backdrop-filter: blur(1em);
+        backdrop-filter: blur(1em);
+    }
+       div#extra-div-4:hover ~ div#extra-div-5::before,
+       div#extra-div-4:active ~ div#extra-div-5::before {
+            -webkit-transform: translateX(0);
+               -moz-transform: translateX(0);
+                -ms-transform: translateX(0);
+                 -o-transform: translateX(0);
+                    transform: translateX(0);
+            opacity: 0;
+        }
+
+        div#extra-div-4:focus-within ~ div#extra-div-5::before {
+            -webkit-transform: translateX(0);
+               -moz-transform: translateX(0);
+                -ms-transform: translateX(0);
+                 -o-transform: translateX(0);
+                    transform: translateX(0);
+            opacity: 0;
+        }
+
+    /* Generally sidebar collapses. */
+    #side-bar, div#extra-div-4 {
+        opacity: 0;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        -webkit-transform: translateX(-90%) !important;
+        -moz-transform: translateX(-90%) !important;
+        -ms-transform: translateX(-90%) !important;
+        -o-transform: translateX(-90%) !important;
+        transform: translateX(-90%) !important;
+       -webkit-transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+        transition:
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve);
+        -o-transition:
+                opacity .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+        -moz-transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve);
+        transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve);
+        transition:
+                transform .3s var(--standard-curve),
+                opacity .3s var(--standard-curve),
+                -webkit-transform .3s var(--standard-curve),
+                -moz-transform .3s var(--standard-curve),
+                -o-transform .3s var(--standard-curve);
+    }
+    /* When outbounded sidebar stays still. */
+    #side-bar:hover,
+    #side-bar:active,
+    div#extra-div-4:hover,
+    div#extra-div-4:active {
+        overflow-y: auto;
+        -webkit-transform: translateX(0) !important;
+        -moz-transform: translateX(0) !important;
+        -ms-transform: translateX(0) !important;
+        -o-transform: translateX(0) !important;
+        transform: translateX(0) !important;
+        margin-left: 0rem;
+        opacity: 1;
+    }
+    #side-bar:focus-within {
+        overflow-y: auto;
+        -webkit-transform: translateX(0) !important;
+        -moz-transform: translateX(0) !important;
+        -ms-transform: translateX(0) !important;
+        -o-transform: translateX(0) !important;
+        transform: translateX(0) !important;
+        margin-left: 0rem;
+        opacity: 1;
+    }
+}