styling refactor, player audio mode

1 files changed, 25 insertions, 25 deletions

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;
         }