FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

фикс дизайна

Browse Source
This commit is contained in:
grabic21
2025-08-20 19:35:39 +04:00
committed by denis0001-dev
Unverified
parent 3f2de17223
commit 9ff6fe3462
5 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+3 -3
View File
@@ -81,7 +81,7 @@
<header class="chat-sitting"> <header class="chat-sitting">
<div id="productname">Loading...</div> <div id="productname">Loading...</div>
<div class="profile"> <div class="profile">
<a href="#">Профиль</a> <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
</div> </div>
</header> </header>
<div class="chat-sortirovka"><nav><ul> <div class="chat-sortirovka"><nav><ul>
@@ -90,8 +90,8 @@
<li>контакты</li> <li>контакты</li>
</ul></nav></div> </ul></nav></div>
<div class="chats-chanel-kontarti"> <div class="chats-chanel-kontarti">
<a href="#" id="chat1but">Общий чат</a> <a href="#" id="chat1but"><img src="./src/images/default-avatar.png" alt=""> Общий чат</a>
<a href="#" id="chat1but2">Общий чат 2</a> <a href="#" id="chat1but2"><img src="./src/images/default-avatar.png" alt="">Общий чат 2</a>
</div> </div>
<div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div> <div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
<footer></footer> <footer></footer>
frontend/src/css/_chat.scss
+1 -1
View File
@@ -77,7 +77,7 @@
.chat-header-avatar { .chat-header-avatar {
width: 45px; width: 45px;
height: 45px; height: 45px;
border-radius: 50%; border-radius: 20%;
object-fit: cover; object-fit: cover;
margin-right: 1rem; margin-right: 1rem;
} }
frontend/src/css/_panelchat.scss
+29 -7
View File
@@ -12,21 +12,27 @@
flex-direction: column; flex-direction: column;
flex-grow: 0; flex-grow: 0;
width: 40%; width: 40%;
background-color: $color-light-primary-container; background-color: $color-dark-surface-container;
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
border-right: solid 2px black;
.chat-sitting{ .chat-sitting{
display: flex; display: flex;
color: $color-dark-on-primary-container; color: white;
font-size: 42px; font-size: 42px;
font-weight: bolder; font-weight: bolder;
background-color: rgb(159, 163, 165); background-color: $color-dark-surface-container;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
height: 85px;
border-block-end: solid 2px black;
gap: 110px;
align-items: center;
.profile{ .profile{
font-size: 24px; font-size: 24px;
display: flex; display: flex;
justify-content: end; justify-content: start;
a{ a{
display: flex; display: flex;
color: $color-dark-surface; color: $color-dark-surface;
@@ -36,6 +42,12 @@
font-size: 26px; font-size: 26px;
} }
} }
img{
display: flex;
border-radius: 100px;
width: 56px;
height: 56px;
}
} }
} }
.chats-chanel-kontarti{ .chats-chanel-kontarti{
@@ -47,12 +59,21 @@
display: flex; display: flex;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
border: solid 2px black; border: solid 2px $color-dark-surface;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
background-color: $gray; background-color: $color-dark-on-surface-variant;
color: $color-dark-shadow; color: $color-dark-shadow;
font-weight: 20px; font-weight: 20px;
border-radius: 20px;
align-items: center;
img{
width: 45px;
height: 45px;
border-radius: 20%;
object-fit: cover;
margin-right: 1rem;
}
} }
} }
.chat-sortirovka{ .chat-sortirovka{
@@ -69,6 +90,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
}
} }
.ponel{ .ponel{
@@ -82,4 +104,4 @@
color: $color-dark-surface; color: $color-dark-surface;
} }
} }
}
frontend/src/css/common/_material.scss
+5 -1
View File
@@ -50,7 +50,11 @@ $color-dark-surface-container-low: rgb(24 28 31);
$color-dark-surface-container: rgb(28 32 36); $color-dark-surface-container: rgb(28 32 36);
$color-dark-surface-container-high: rgb(38 43 46); $color-dark-surface-container-high: rgb(38 43 46);
$color-dark-surface-container-highest: rgb(49 53 57); $color-dark-surface-container-highest: rgb(49 53 57);
// custom colors
$color-1: rgb(82, 109, 246);
$color-2: rgb(65, 11, 113);
$color-4: rgb(95, 26, 198);
$color-3: rgb(49, 71, 179);
// Light // Light
$color-light-primary: rgb(31 101 134); $color-light-primary: rgb(31 101 134);
$color-light-surface-tint: rgb(31 101 134); $color-light-surface-tint: rgb(31 101 134);
frontend/src/css/style.scss
+1
View File
@@ -22,4 +22,5 @@ body {
line-height: 1.6; line-height: 1.6;
height: 100vh; height: 100vh;
position: relative; position: relative;
} }