From 83af26d3fae3c3f9b11cb01ed88fb28af59e2396 Mon Sep 17 00:00:00 2001
From: Fei_Bam <feibam19690104@gmail.com>
Date: Tue, 27 Jun 2023 12:14:24 +0900
Subject: [PATCH] add scrollbar style, Optimize mobile phone layout (#3)

* add scrollbar style, Optimize mobile phone layout

* sync
---
 islands/Container.tsx     |  1 +
 static/common.css         | 43 +++++++++++++++++++++++++++++++--------
 static/hide-scrollbar.css |  3 ---
 static/scrollBar.css      | 16 +++++++++++++++
 4 files changed, 52 insertions(+), 11 deletions(-)
 delete mode 100644 static/hide-scrollbar.css
 create mode 100644 static/scrollBar.css

diff --git a/islands/Container.tsx b/islands/Container.tsx
index f52cf02..03471fe 100644
--- a/islands/Container.tsx
+++ b/islands/Container.tsx
@@ -40,6 +40,7 @@ export default class Container extends Component<ContainerProps> {
         const [display, set_display] = useState(false);
         const [state, set_state1] = useState("#/");
         const [darkmode, set_darkmode1] = useState(DarkMode.Auto);
+        const [scrollHide, set_ScrollHide] = useState(false);
         const set_darkmode: StateUpdater<DarkMode> = (u) => {
             const v = typeof u === "function" ? u(darkmode) : u;
             set_darkmode1(v);
diff --git a/static/common.css b/static/common.css
index 8213216..ffea69b 100644
--- a/static/common.css
+++ b/static/common.css
@@ -1,3 +1,19 @@
+::-webkit-scrollbar{ 
+    width: 6px; 
+    height: 1px; 
+  } 
+  ::-webkit-scrollbar-thumb{ 
+    border-radius: 100%; 
+  } 
+  ::-webkit-scrollbar-track{ 
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
+    border-radius: 10px; 
+    background: #EDEDED; 
+  } 
+  ::-webkit-scrollbar-thumb{ 
+    background: rgba(0, 0, 0, 0.45); 
+    border-radius: 6px; 
+  }
 body {
     min-width: 100vw;
     min-height: 100vh;
@@ -115,14 +131,6 @@ body {
     left: -10px;
 }
 
-@media (max-width:767px) {}
-
-@media (max-width:1280px) {
-    .settings {
-        margin: 0;
-    }
-}
-
 .task_manager {
     padding: 16px;
     display: flex;
@@ -266,3 +274,22 @@ div.new_task>div.container>div.bottom {
     line-height: 40px;
     min-height: 40px;
 }
+
+
+@media (max-width:767px) {
+    .settings .text-box .text{
+        flex-direction: column;
+        align-items: start;
+    }
+
+    .settings .text-box .mdc-text-field{
+        margin: 10px 0;
+        width: 100%;
+    }
+}
+
+@media (max-width:1280px) {
+    .settings {
+        margin: 0;
+    }
+}
\ No newline at end of file
diff --git a/static/hide-scrollbar.css b/static/hide-scrollbar.css
deleted file mode 100644
index 85df2e7..0000000
--- a/static/hide-scrollbar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-::-webkit-scrollbar {
-    display: none;
-}
diff --git a/static/scrollBar.css b/static/scrollBar.css
new file mode 100644
index 0000000..8cb2a1a
--- /dev/null
+++ b/static/scrollBar.css
@@ -0,0 +1,16 @@
+::-webkit-scrollbar{ 
+  width: 6px; 
+  height: 1px; 
+} 
+::-webkit-scrollbar-thumb{ 
+  border-radius: 100%; 
+} 
+::-webkit-scrollbar-track{ 
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
+  border-radius: 10px; 
+  background: #EDEDED; 
+} 
+::-webkit-scrollbar-thumb{ 
+  background: rgba(0, 0, 0, 0.45); 
+  border-radius: 6px; 
+}
\ No newline at end of file