updated player buttons layout

suterma · Nov 24, 2023 · 83c2b2c · 83c2b2c
1 parent 79f4208
commit 83c2b2c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/public/css/replayer.css b/public/css/replayer.css
@@ -11,7 +11,7 @@
 **************************************************************
 */
 /* stronger shadow, for better visibility with the dark bulma slate theme*/
-/* Stack the navbar except on very wide screens
+/* Use mobile-style navbar always
 (navbar is currently only used for the player controls in the bottom nav bar)*/
 /* no hovering indication on the navbar*/
 /* The width for the surrounding border of tracks */
@@ -4497,7 +4497,7 @@ button.dropdown-item.is-active {
 .navbar.is-white .navbar-burger {
   color: hsl(0, 0%, 4%);
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-white .navbar-start > .navbar-item,
   .navbar.is-white .navbar-start .navbar-link,
   .navbar.is-white .navbar-end > .navbar-item,
@@ -4553,7 +4553,7 @@ button.dropdown-item.is-active {
 .navbar.is-black .navbar-burger {
   color: hsl(0, 0%, 100%);
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-black .navbar-start > .navbar-item,
   .navbar.is-black .navbar-start .navbar-link,
   .navbar.is-black .navbar-end > .navbar-item,
@@ -4609,7 +4609,7 @@ button.dropdown-item.is-active {
 .navbar.is-light .navbar-burger {
   color: rgba(0, 0, 0, 0.7);
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-light .navbar-start > .navbar-item,
   .navbar.is-light .navbar-start .navbar-link,
   .navbar.is-light .navbar-end > .navbar-item,
@@ -4665,7 +4665,7 @@ button.dropdown-item.is-active {
 .navbar.is-dark .navbar-burger {
   color: #fff;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-dark .navbar-start > .navbar-item,
   .navbar.is-dark .navbar-start .navbar-link,
   .navbar.is-dark .navbar-end > .navbar-item,
@@ -4721,7 +4721,7 @@ button.dropdown-item.is-active {
 .navbar.is-primary .navbar-burger {
   color: #fff;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-primary .navbar-start > .navbar-item,
   .navbar.is-primary .navbar-start .navbar-link,
   .navbar.is-primary .navbar-end > .navbar-item,
@@ -4777,7 +4777,7 @@ button.dropdown-item.is-active {
 .navbar.is-link .navbar-burger {
   color: #52575c;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-link .navbar-start > .navbar-item,
   .navbar.is-link .navbar-start .navbar-link,
   .navbar.is-link .navbar-end > .navbar-item,
@@ -4833,7 +4833,7 @@ button.dropdown-item.is-active {
 .navbar.is-info .navbar-burger {
   color: #fff;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-info .navbar-start > .navbar-item,
   .navbar.is-info .navbar-start .navbar-link,
   .navbar.is-info .navbar-end > .navbar-item,
@@ -4889,7 +4889,7 @@ button.dropdown-item.is-active {
 .navbar.is-success .navbar-burger {
   color: #fff;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-success .navbar-start > .navbar-item,
   .navbar.is-success .navbar-start .navbar-link,
   .navbar.is-success .navbar-end > .navbar-item,
@@ -4945,7 +4945,7 @@ button.dropdown-item.is-active {
 .navbar.is-warning .navbar-burger {
   color: #fff;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-warning .navbar-start > .navbar-item,
   .navbar.is-warning .navbar-start .navbar-link,
   .navbar.is-warning .navbar-end > .navbar-item,
@@ -5001,7 +5001,7 @@ button.dropdown-item.is-active {
 .navbar.is-danger .navbar-burger {
   color: #fff;
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar.is-danger .navbar-start > .navbar-item,
   .navbar.is-danger .navbar-start .navbar-link,
   .navbar.is-danger .navbar-end > .navbar-item,
@@ -5232,7 +5232,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   margin: 0.5rem 0;
 }
 
-@media screen and (max-width: 2559px) {
+@media screen and (max-width: 9999px) {
   .navbar > .container {
     display: block;
   }
@@ -5281,7 +5281,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
     padding-bottom: 4rem;
   }
 }
-@media screen and (min-width: 2560px) {
+@media screen and (min-width: 10000px) {
   .navbar,
   .navbar-menu,
   .navbar-start,

diff --git a/sass/_replayer-variables.scss b/sass/_replayer-variables.scss
@@ -10,9 +10,9 @@
 /* stronger shadow, for better visibility with the dark bulma slate theme*/
 $shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 100%), 0 0 0 1px rgb(10 10 10 / 2%);
 
-/* Stack the navbar except on very wide screens
+/* Use mobile-style navbar always
 (navbar is currently only used for the player controls in the bottom nav bar)*/
-$navbar-breakpoint: 2560px; //ultra-wide FHD
+$navbar-breakpoint: 10000px;
 
 /* no hovering indication on the navbar*/
 $navbar-item-hover-color: inherit;