From 8b6a805c36c551a9015a9d5c8f1da54bb3dc8827 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Wed, 24 May 2023 02:02:24 +0300
Subject: [PATCH] PlayerView: show separators on small screen

---
 src/components/Player/player.css    |  3 ++-
 src/themes/themes.css               |  1 +
 src/views/PlayerView/PlayerView.css | 11 ++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index 9e8a6b7..5bed7a3 100644
--- a/src/components/Player/player.css
+++ b/src/components/Player/player.css
@@ -18,6 +18,7 @@
 
   background-color: var(--bg-color);
   border: var(--border-width) solid var(--main-color);
+  border-top: var(--separator-width) solid var(--main-color);
   padding: var(--inner-padding);
   margin: 0;
   margin-top: var(--input-box-margin);
@@ -73,7 +74,7 @@
 .ifplayer .output .gridBuffer {
   flex-shrink: 0;
   max-height: 100%;
-  border-bottom: var(--border-width) solid var(--main-color);
+  border-bottom: var(--separator-width) solid var(--main-color);
 }
 
 .ifplayer .output .textBuffer {
diff --git a/src/themes/themes.css b/src/themes/themes.css
index 211cb74..0472b1a 100644
--- a/src/themes/themes.css
+++ b/src/themes/themes.css
@@ -1,6 +1,7 @@
 body {
   --outer-padding: 0px;
   --border-width: 0px;
+  --separator-width: 2px;
   --inner-padding: 8px;
   --input-box-margin: 0px;
 }
diff --git a/src/views/PlayerView/PlayerView.css b/src/views/PlayerView/PlayerView.css
index ac2c30b..9a3c95a 100644
--- a/src/views/PlayerView/PlayerView.css
+++ b/src/views/PlayerView/PlayerView.css
@@ -1,3 +1,12 @@
-.app.play, .app.focus {
+.app.play,
+.app.focus {
   height: 100%;
 }
+
+@media (min-width: 800px) {
+  .app.play main,
+  .app.focus main {
+    max-height: 90%;
+    margin: auto;
+  }
+}