mobile breakpoint

duckduckgo · Oct 29, 2024 · f64dcd1 · f64dcd1
1 parent c662fc6
commit f64dcd1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/special-pages/pages/duckplayer/app/components/Button.module.css b/special-pages/pages/duckplayer/app/components/Button.module.css
@@ -4,13 +4,13 @@
     display: flex;
     height: 44px;
     line-height: 44px;
-    font-size: 16px;
+    font-size: 15px;
+    font-weight: bold;
     padding: 0 20px;
     flex-shrink: 0;
     box-shadow: none;
     background: rgba(255, 255, 255, 0.12);
     border-radius: var(--inner-radius);
-    font-weight: bold;
     color: rgba(255, 255, 255, 1);
     text-decoration: none;
 }

diff --git a/special-pages/pages/duckplayer/app/components/MobileApp.module.css b/special-pages/pages/duckplayer/app/components/MobileApp.module.css
@@ -1,5 +1,6 @@
 body[data-display="app"] {
     padding: 8px;
+    /*background: black;*/
 }
 html[data-focus-mode="on"]:root .main {
     --bg-color: transparent;
@@ -47,7 +48,7 @@ html[data-focus-mode="on"] .hideInFocus {
     --row-2: auto;
     --row-3: max-content;
     --row-4: max-content;
-    --row-5: 12px;
+    --row-5: 16px;
     --row-6: max-content;
     --row-7: auto;
     grid-template-rows:
@@ -107,9 +108,9 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
 
 .switch {
     grid-area: switch;
-    height: 50px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 16px;
+    height: 44px;
+    /*background: rgba(255, 255, 255, 0.03);*/
+    /*border-radius: 16px;*/
 }
 
 @media screen and (min-width: 425px) and (max-height: 600px) {

diff --git a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css
@@ -1,22 +1,22 @@
 .switchBar {
     display: grid;
-    border-radius: 16px;
+    border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
     padding-inline: 16px;
     height: 100%;
     line-height: 1.1;
 }
 
-@media screen and (min-width: 900px) {
-    .switchBar {
-        border-radius: 8px;
-    }
-}
-@media screen and (min-width: 667px) and (max-height: 450px) {
-    .switchBar {
-        border-radius: 8px;
-    }
-}
+/*@media screen and (min-width: 900px) {*/
+/*    .switchBar {*/
+/*        border-radius: 8px;*/
+/*    }*/
+/*}*/
+/*@media screen and (min-width: 667px) and (max-height: 450px) {*/
+/*    .switchBar {*/
+/*        border-radius: 8px;*/
+/*    }*/
+/*}*/
 
 .stateExiting {
     transition: all .3s ease-in-out;