Modularize chat styles

2026-09-22 19:15:08 +03:00 · 2025-10-08 18:41:47 +03:00
parent 737974dfa8
commit 4d0e969461
14 changed files with 1907 additions and 1898 deletions
@@ -0,0 +1,131 @@
+@use "../../../css/common/colors" as *;
+@use "../../../css/common/material" as *;
+@use "sass:color";
+
+.chat-main {
+    .chat-header {
+        padding: 16px;
+        background: rgba($color-dark-surface-container, 0.8);
+        backdrop-filter: blur(20px);
+        display: flex;
+        align-items: center;
+        box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
+        position: relative;
+        z-index: 1;
+
+        .chat-header-avatar {
+            width: 45px;
+            height: 45px;
+            border-radius: 20%;
+            object-fit: cover;
+            margin-right: 1rem;
+        }
+
+        .chat-header-info {
+            display: flex;
+
+            .info-chat {
+                display: flex;
+                flex-direction: column;
+
+                h4 {
+                    font-size: 1.1rem;
+                    margin: 0 0 0.2rem;
+                }
+
+                p {
+                    margin: 0;
+                    font-size: 0.8rem;
+                    color: #718096;
+                }
+            }
+
+            .online-status {
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background-color: $success;
+                margin-right: 5px;
+            }
+
+            a {
+                display: flex;
+                flex-direction: row;
+                text-decoration: none;
+                color: white;
+                justify-content: end;
+                padding: 0;
+                margin: 0;
+                position: absolute;
+                right: 2%;
+                top: 2%;
+
+                &:hover {
+                    border: none;
+                }
+            }
+        }
+    }
+
+    .chat-messages {
+        flex: 1;
+        padding: 10px 20px;
+        overflow-y: auto;
+        position: relative;
+        z-index: 1;
+
+        &::-webkit-scrollbar {
+            width: 7px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: $color-dark-surface-container-high;
+            border-radius: 20px;
+        }
+    }
+
+    .file-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        
+        background: rgba(0, 0, 0, 0.5);
+        
+        z-index: 100;
+        
+        backdrop-filter: blur(20px);
+
+        .file-overlay-wrapper {
+            border-radius: 30px;
+            outline: 3px dashed $color-dark-primary;
+            outline-offset: -20px;
+            height: 100%;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .file-overlay-inner {
+                display: flex;
+                gap: 12px;
+                align-items: center;
+                padding: 12px 16px;
+                background: rgba(18, 18, 18, 0.8);
+                border: 1px solid $color-dark-surface-container-high;
+                border-radius: 12px;
+                color: $color-dark-on-surface;
+
+                mdui-icon {
+                    color: $color-dark-primary;
+                }
+            }
+        }
+    }
+}