Update style.css

Author: Sentechtipsvn

css/style.css

@@ -1,16 +1,12 @@
-/* =========================================
-   CSS HOÀN CHỈNH V6.8 - NGĂN KÉO DỌC CHUẨN XÁC
-   ========================================= */
-
 :root {
-    --bg-gradient-1: #d4bbfc;
-    --bg-gradient-2: #8ec5fc;
-    --bg-container: rgba(255, 255, 255, 0.25);
-    --color-title: #0071e3;
-    --color-channel-name: #20b2aa;
+    --bg-gradient-1: #d4bbfc;                  
+    --bg-gradient-2: #8ec5fc;                  
+    --bg-container: rgba(255, 255, 255, 0.25); 
+    --color-title: #0071e3;                    
+    --color-channel-name: #20b2aa;             
     --color-input-bg: rgba(255, 255, 255, 0.8);
     --color-modal-bg: rgba(255, 255, 255, 0.85);
-    --shadow-box: 0 2px 8px rgba(0, 0, 0, 0.12);
+    --shadow-box: 0 2px 8px rgba(0, 0, 0, 0.12); 
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; }
@@ -50,29 +46,45 @@ body.hide-labels .app-info { display: none !important; }
 #settingsBtn img { width: 100%; height: 100%; object-fit: contain; }
 body.dock-active #settingsBtn { display: none !important; }
 
-/* Thanh Dock */
 .dock-container { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 20px)); left: 50%; transform: translateX(-50%); width: 90%; max-width: 380px; display: flex; justify-content: space-around; align-items: center; padding: 10px; border-radius: 24px; z-index: 997; }
 .dock-style-glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); }
 .dock-style-wood { background: linear-gradient(to bottom, #a16d3a, #7c4b21, #a16d3a); border: 1px solid #5a3517; }
 .dock-style-blur { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2); }
 
-/* KHU VỰC DRAWER (NGĂN KÉO) - LUÔN HIỂN THỊ DỌC */
+/* KHU VỰC DRAWER (NGĂN KÉO) CHUẨN XÁC */
 #drawerWrapper {
     position: fixed; z-index: 998; display: none; align-items: center; gap: 8px;
     background: rgba(255,255,255,0.25); backdrop-filter: blur(40px); border-radius: 50px; padding: 4px;
     border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-    flex-direction: column-reverse !important;
 }
-#drawerContent {
-    display: flex; gap: 6px; overflow: hidden; opacity: 0;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+#drawerContent { display: flex; gap: 6px; white-space: nowrap; align-items: center; }
+
+.drawer-btn {
+    width: 44px !important; height: 44px !important; border-radius: 50% !important; border: none;
+    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
+    background: rgba(255,255,255,0.4); box-shadow: var(--shadow-box); overflow: hidden;
+}
+.drawer-btn img { width: 100%; height: 100%; border-radius: 50% !important; object-fit: cover; }
+#drawerClose { width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 122, 255, 0.2); color: #007AFF; border: none; font-size: 18px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+
+/* TRẠNG THÁI 1: Tắt Dock (Nằm ngang góc dưới phải) */
+body:not(.dock-active) #drawerWrapper {
+    bottom: calc(30px + env(safe-area-inset-bottom, 20px)); right: 20px; flex-direction: row !important;
+}
+body:not(.dock-active) #drawerContent {
+    flex-direction: row !important;
+}
+
+/* TRẠNG THÁI 2: Bật Dock (Xổ thẳng đứng lên trên icon Setting của Dock) */
+body.dock-active #drawerWrapper {
     flex-direction: column-reverse !important;
-    max-height: 0; max-width: 50px;
+    background: rgba(255,255,255,0.6); backdrop-filter: blur(20px); border-radius: 20px; padding: 8px;
 }
-#drawerWrapper.open #drawerContent {
-    max-height: 400px; opacity: 1; padding-top: 4px;
+body.dock-active #drawerContent { 
+    flex-direction: column-reverse !important;
+    gap: 8px; 
 }
-#drawerClose { display: none !important; }
+body.dock-active #drawerClose { display: none !important; }
 
 .delete-icon {
     position: absolute; top: -4px; right: -4px; width: 22px; height: 22px;
@@ -84,12 +96,15 @@ body.dock-active #settingsBtn { display: none !important; }
 .modal-overlay.active { opacity: 1; pointer-events: auto; }
 .modal-content { background: var(--color-modal-bg); backdrop-filter: blur(30px); width: 85%; max-width: 380px; max-height: 70vh; border-radius: 28px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); overflow-y: auto; }
 .modal-content h3 { font-size: 18px; text-align: center; margin-bottom: 12px; }
+
 .modal-content label { color: var(--color-channel-name); font-weight: 600; display: block; margin-bottom: 6px; font-size: 14px; }
 .input-num, select, .search-box { width: 100%; padding: 10px; border-radius: 12px; border: none; background: var(--color-input-bg); box-shadow: var(--shadow-box); font-size: 14px; }
 .close-modal { display: block; width: 100%; margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.85); border: none; border-radius: 14px; font-weight: 600; font-size: 16px; cursor: pointer; text-align: center; }
+
 .direction-container { display: flex; gap: 8px; margin-bottom: 10px; }
 .dir-btn { flex: 1; padding: 10px 5px; background: var(--color-input-bg); border: 1px solid rgba(0,0,0,0.1); cursor: pointer; border-radius: 12px; }
 .dir-btn.active { background: #0071e3; color: #fff; }
+
 .switch { position: relative; display: inline-block; width: 50px; height: 30px; }
 .switch input { opacity: 0; width: 0; height: 0; }
 .slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .4s; border-radius: 30px; }
@@ -103,8 +118,7 @@ input:checked + .slider:before { transform: translateX(20px); }
 @media (prefers-color-scheme: dark) {
     :root { --bg-container: rgba(30, 27, 75, 0.3); --color-modal-bg: rgba(15, 23, 42, 0.9); --color-input-bg: rgba(255, 255, 255, 0.1); }
     body { background: linear-gradient(135deg, #1e1b4b, #0f172a, #2e1065, #1e3a8a); background-size: 300% 300%; }
-    .modal-content { background-color: #1c1c1e !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #e5e5ea !important; }
-    body.dock-active #drawerWrapper { background-color: rgba(28, 28, 30, 0.85) !important; border: 1px solid rgba(255,255,255,0.15) !important; }
+    .modal-content, #drawerWrapper { background-color: #1c1c1e !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #e5e5ea !important; }
     .modal-content h3 { color: #00bcd4 !important; }
     .app-name { color: #f1f5f9; }
     .close-modal { background: rgba(255,255,255,0.05); color: #fff; }