From 83c2b2cb00c4c7bdf0f416bd44a186f621d5bd25 Mon Sep 17 00:00:00 2001
From: Marcel Suter <github@marcelsuter.ch>
Date: Fri, 24 Nov 2023 21:29:58 +0100
Subject: [PATCH] updated player buttons layout

---
 public/css/replayer.css       | 26 +++++++++++++-------------
 sass/_replayer-variables.scss |  4 ++--
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/public/css/replayer.css b/public/css/replayer.css
index 7bf45d00..4da814f3 100644
--- 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
index 081c26cb..0d393609 100644
--- 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;