From 3e6b377bb29c661b36329de5f18f69cb3ee6e01a Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 2 Oct 2021 21:27:08 +0200
Subject: styling refactor, player audio mode

---
 styles/global.scss         | 39 ++++++++++++++++--------------------
 styles/global/_window.scss | 50 +++++++++++++++++++++++-----------------------
 styles/main/_header.scss   |  1 +
 styles/main/_layout.scss   |  8 +++-----
 4 files changed, 46 insertions(+), 52 deletions(-)

(limited to 'styles')

diff --git a/styles/global.scss b/styles/global.scss
index 7fcdb41..0b63e98 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -2,31 +2,18 @@
 @import "global/themes";
 @import "global/window";
 
-main {
+html,
+body {
   position: fixed;
-  top: 2em;
-  left: 0;
-  bottom: 0;
+  top: 0;
   right: 0;
-
-  &.noHeader {
-    top: 0;
-  }
-}
-
-html {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  overscroll-behavior-y: none;
 }
 
 body {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-  margin: 0;
-
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@@ -39,23 +26,31 @@ textarea, input {
 }
 
 .container {
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
   margin: 1.5rem auto;
   padding-left: 1rem;
   padding-right: 1rem;
+  overflow: hidden;
 }
 
 .fixed {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
 
-.hidden {
+.hide {
   display: none;
 }
 
+.noHeader {
+  height: 100%;
+}
+
 .mobile-only {
   display: none!important;
 
diff --git a/styles/global/_window.scss b/styles/global/_window.scss
index d05ff7c..5594ba5 100644
--- a/styles/global/_window.scss
+++ b/styles/global/_window.scss
@@ -35,11 +35,7 @@
   }
 
   &__title {
-    position: absolute;
     background-color: var(--color-glass);
-    top: 0;
-    left: 0;
-    right: 0;
     height: 2em;
     text-align: center;
     padding: .5em;
@@ -65,6 +61,7 @@
 
   &__title-buttons {
     position: absolute;
+    transition: .3s top;
     top: .5em;
     right: .5em;
     // cursor: pointer;
@@ -88,20 +85,15 @@
   }
 
   &__content {
-    position: absolute;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
     background-color: var(--color-window-content);
-    top: 2em;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    height: calc(100% - 2em);
 
-    & > div:nth-of-type(2) {
-      top: 5em;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      position: fixed;
+    & > *:nth-child(2) {
+      flex-grow: 1;
+      height: calc(100% - 2em);
     }
   }
 
@@ -154,24 +146,27 @@
     }
 
     @media(max-width: 40em) {
-      height: 3em;
-      overflow-x: scroll;
+      height: 2.5em;
+      overflow-x: auto;
 
       & > div {
         display: flex;
       }
 
       & > div > div {
-        padding: 1em;
+        padding: .75em 1em;
       }
     }
   }
 
   &__scroll {
-    height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
+
+    @media (pointer: coarse) {
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
   }
 
   &__buttons--popup {
@@ -220,23 +215,28 @@
     opacity: 0;
     visibility: hidden;
     transform: translateY(-100vh);
-    z-index: -1;
   }
 
   &.maximized {
-    top:0!important;
+    top:2em!important;
     right: 0!important;
     bottom: 0!important;
     left: 0!important;
     width: 100%!important;
     height: 100%!important;
 
+    .window__title-buttons {
+      top: 2.5em;
+    }
+
     & > .window__content {
       top: 0;
     }
 
-    .window__submenu > div {
-      @media(min-width: 40em) {
+    @media(min-width: 40em) {
+      top:0!important;
+
+      .window__submenu > div {
         &:last-of-type {
           margin-right: 5.5em;
         }
diff --git a/styles/main/_header.scss b/styles/main/_header.scss
index ea75f5e..903b0cc 100644
--- a/styles/main/_header.scss
+++ b/styles/main/_header.scss
@@ -2,6 +2,7 @@
   height: 2em;
   background-color: var(--color-glass);
   border-bottom: 1px solid  var(--color-window-border-bottom);
+  z-index: 2;
 
   nav {
     display: flex;
diff --git a/styles/main/_layout.scss b/styles/main/_layout.scss
index abdd845..6bde0f1 100644
--- a/styles/main/_layout.scss
+++ b/styles/main/_layout.scss
@@ -1,12 +1,10 @@
 .layout {
+  display: flex;
+  flex-direction: column;
   color: var(--color-text);
   height: 100vh;
+  width: 100%;
   background: var(--color-bg);
   background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   overflow: hidden;
 }
-- 
cgit v1.2.3