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 18:05:46 +04:00
committed by denis0001-dev
Unverified
parent 906e691fd2
commit 3f2de17223
6 changed files with 204 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/css/_chat.scss
+43 -17
View File
@@ -4,13 +4,18 @@
#chat-interface {
/* Header */
.header {
display: flex;
background-color: $color-dark-surface-container;
color: white;
padding: 16px 16px;
position: fixed;
width: 100%;
top: 0;
position: static;
justify-content: end;
width: fit-content;
z-index: 1000;
position: absolute;
top: 0;
right: 0;
.header-content {
display: flex;
@@ -24,11 +29,10 @@
align-items: center;
}
.nav-links {
display: flex;
#logouts {
display: none;
list-style: none;
gap: 10px;
li {
a {
color: white;
@@ -53,13 +57,15 @@
.chat-container {
display: flex;
height: calc(100vh - 70px);
margin-top: 70px;
width: 100%;
flex-direction: column;
.chat-main {
flex: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
.chat-header {
padding: 16px;
@@ -77,16 +83,20 @@
}
.chat-header-info {
h4 {
font-size: 1.1rem;
margin-bottom: 0.2rem;
}
display: flex;
.info-chat{
display: flex;
flex-direction: column;
h4 {
font-size: 1.1rem;
margin-bottom: 0.2rem;
}
p {
font-size: 0.8rem;
color: #718096;
p {
font-size: 0.8rem;
color: #718096;
}
}
.online-status {
display: inline-block;
width: 10px;
@@ -95,6 +105,21 @@
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;
}
}
}
}
@@ -225,4 +250,5 @@
}
}
}
}
frontend/src/css/_panelchat.scss
+85
View File
@@ -0,0 +1,85 @@
@use "common/colors" as *;
@use "common/material" as *;
// контейнер чата и панели с чатами
.all-conteiner{
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
#chat-list{
display: flex;
flex-direction: column;
flex-grow: 0;
width: 40%;
background-color: $color-light-primary-container;
height: 100%;
z-index: 1000;
.chat-sitting{
display: flex;
color: $color-dark-on-primary-container;
font-size: 42px;
font-weight: bolder;
background-color: rgb(159, 163, 165);
width: 100%;
justify-content: center;
.profile{
font-size: 24px;
display: flex;
justify-content: end;
a{
display: flex;
color: $color-dark-surface;
text-decoration: none;
width: 100%;
&:hover{
font-size: 26px;
}
}
}
}
.chats-chanel-kontarti{
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 5px;
a{
display: flex;
text-decoration: none;
padding: 10px;
border: solid 2px black;
margin-left: 20px;
margin-right: 20px;
background-color: $gray;
color: $color-dark-shadow;
font-weight: 20px;
}
}
.chat-sortirovka{
display: flex;
flex-direction: row;
font-size: 24px;
justify-content: center;
ul{
display: flex;
flex-direction: row;
gap: 5px;
}
li{
display: flex;
flex-direction: row;
}
}
.ponel{
display: flex;
position: fixed;
top: 95%;
left: 2%;
gap: 10px;
a{
text-decoration: none;
color: $color-dark-surface;
}
}
}
frontend/src/css/style.scss
+3
View File
@@ -1,5 +1,6 @@
@use "auth";
@use "chat";
@use "panelchat";
@use "common/animations";
@use "common/components";
@use "common/colors" as *;
@@ -19,4 +20,6 @@ body {
background-color: $color-dark-surface;
color: $color-dark-on-surface;
line-height: 1.6;
height: 100vh;
position: relative;
}