Use CSS Container Queries instead of Media Queries

mistic100 · Jul 18, 2024 · 763bf55 · 763bf55
1 parent 2877cdd
commit 763bf55
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 5 deletions.
diff --git a/packages/core/src/styles/overlay.scss b/packages/core/src/styles/overlay.scss
@@ -17,7 +17,7 @@
         svg {
             width: map.get($psv-overlay-image-size, portrait);
 
-            @media (orientation: landscape) {
+            @container psv-container (orientation: landscape) {
                 width: map.get($psv-overlay-image-size, landscape);
             }
         }

diff --git a/packages/core/src/styles/panel.scss b/packages/core/src/styles/panel.scss
@@ -122,7 +122,7 @@
         }
     }
 
-    @media screen and (max-width: #{$psv-panel-width}) {
+    @container psv-container (max-width: #{$psv-panel-width}) {
         width: 100% !important;
         max-width: none;
 

diff --git a/packages/core/src/styles/viewer.scss b/packages/core/src/styles/viewer.scss
@@ -1,5 +1,7 @@
 .psv-container {
     --psv-core-loaded: true;
+    container-name: psv-container;
+    container-type: size;
 
     width: 100%;
     height: 100%;

diff --git a/packages/gallery-plugin/src/style.scss b/packages/gallery-plugin/src/style.scss
@@ -121,7 +121,7 @@ $psv-gallery-breakpoint: 500px !default;
         }
     }
 
-    @media screen and (width <= #{$psv-gallery-breakpoint}) {
+    @container psv-container (max-width: #{$psv-gallery-breakpoint}) {
         top: 0;
 
         &-container {

diff --git a/packages/plan-plugin/src/style.scss b/packages/plan-plugin/src/style.scss
@@ -88,7 +88,7 @@ $psv-plan-transition: ease-in-out 0.3s !default;
             height: calc(100% - #{$psv-navbar-height} - #{$psv-plan-margin * 2}) !important;
         }
 
-        @media screen and (width < 500px) {
+        @container psv-container (max-width: 500px) {
             margin: 0;
             width: 100% !important;
             height: 100% !important;

diff --git a/packages/video-plugin/src/style.scss b/packages/video-plugin/src/style.scss
@@ -203,7 +203,7 @@ $psv-video-bigbutton-color: $psv-buttons-color !default;
             opacity: 1;
             transition-timing-function: linear, step-start;
 
-            @media (orientation: landscape) {
+            @container psv-container (orientation: landscape) {
                 width: map.get($psv-video-bigbutton-size, landscape);
             }
         }
-Original file line number
+Diff line change
@@ Expand Up / @@ -121,7 +121,7 @@ $psv-gallery-breakpoint: 500px !default; @@
             }
         }
-        @media screen and (width <= #{$psv-gallery-breakpoint}) {
+        @container psv-container (max-width: #{$psv-gallery-breakpoint}) {
             top: 0;
             &-container {
@@ Expand Down @@