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

Use the same design for the app

Browse Source
This commit is contained in:
denis0001-dev
2025-10-02 20:18:37 +03:00
Unverified
parent 10c2aaa6ca
commit 1f6a8ec0b6
1 changed files with 162 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/app/resources/css/_chat.scss
+162 -31
View File
@@ -1,8 +1,26 @@
@use "common/colors" as *; @use "common/colors" as *;
@use "common/material" as *; @use "common/material" as *;
@use "sass:color";
#chat-interface { #chat-interface {
height: 100%; height: 100%;
background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 70%, rgba($color-dark-primary-container, 0.3) 100%);
position: relative;
&::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.header { .header {
display: flex; display: flex;
@@ -69,10 +87,13 @@
.chat-header { .chat-header {
padding: 16px; padding: 16px;
background: $color-dark-surface-container; background: rgba($color-dark-surface-container, 0.8);
backdrop-filter: blur(20px);
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: black 0 0 20px; box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
position: relative;
z-index: 1;
.chat-header-avatar { .chat-header-avatar {
width: 45px; width: 45px;
@@ -148,8 +169,10 @@
.chat-messages { .chat-messages {
flex: 1; flex: 1;
padding: 1rem; padding: 10px 20px;
overflow-y: auto; overflow-y: auto;
position: relative;
z-index: 1;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 7px; width: 7px;
@@ -337,9 +360,47 @@
} }
&.received .message-inner { &.received .message-inner {
background-color: $color-dark-surface-container; background: $color-dark-surface-container;
color: $color-dark-on-surface;
border-top-left-radius: 5px; border-top-left-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba($color-dark-outline-variant, 0.4);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba($color-dark-primary, 0.05), rgba($color-dark-tertiary, 0.03));
pointer-events: none;
z-index: 0;
}
> * {
position: relative;
z-index: 1;
}
}
&.received .message-time {
color: $color-dark-on-surface-variant;
font-weight: 500;
.message-status-indicator {
.success-icon {
color: $color-dark-on-surface-variant;
filter: brightness(1.1);
}
.error-icon {
color: #ff6b6b;
filter: brightness(1.1);
}
}
} }
&.sent { &.sent {
@@ -347,13 +408,47 @@
flex-direction: row-reverse; flex-direction: row-reverse;
.message-inner { .message-inner {
background-color: $color-dark-primary-container; background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
color: $color-dark-on-primary-container; color: $color-dark-on-primary;
border-top-right-radius: 5px; border-top-right-radius: 5px;
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
border: 1px solid rgba($color-dark-primary, 0.5);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
pointer-events: none;
z-index: 0;
}
> * {
position: relative;
z-index: 1;
}
} }
.message-time { .message-time {
color: $color-dark-on-primary-container; color: $color-dark-on-primary;
font-weight: 500;
.message-status-indicator {
.success-icon {
color: $color-dark-on-primary;
filter: brightness(1.2);
}
.error-icon {
color: #ff6b6b;
filter: brightness(1.2);
}
}
} }
} }
} }
@@ -401,30 +496,15 @@
.chat-input-wrapper { .chat-input-wrapper {
position: relative; position: relative;
margin: 0 20px 20px 20px; margin: 0 10px 10px 10px;
&::before {
$height: 20px;
content: '';
position: absolute;
top: -$height;
left: 0;
right: 0;
width: 100%;
height: $height;
background: linear-gradient(
0deg,
$color-dark-surface,
rgba(255, 255, 255, 0),
);
}
.input-group { .input-group {
display: flex; display: flex;
background-color: $color-dark-surface-container; background: $color-dark-surface-container;
border-radius: 30px; border-radius: 30px;
flex-direction: column; flex-direction: column;
border: 1px solid rgba($color-dark-outline-variant, 0.4);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
.contextual-preview { .contextual-preview {
padding: 12px 16px 0 16px; padding: 12px 16px 0 16px;
@@ -467,11 +547,17 @@
outline: none; outline: none;
caret-color: $color-dark-primary; caret-color: $color-dark-primary;
color: $color-dark-on-surface; color: $color-dark-on-surface;
background: transparent;
resize: none; resize: none;
font: inherit; font: inherit;
font-size: 13pt; font-size: 13pt;
height: 100%; height: 100%;
width: 100%; width: 100%;
&::placeholder {
color: $color-dark-on-surface-variant;
opacity: 0.7;
}
} }
.buttons { .buttons {
@@ -485,17 +571,20 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
background-color: $color-dark-primary; background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
color: $color-dark-on-primary; color: $color-dark-on-primary;
border: none; border: 1px solid rgba($color-dark-primary, 0.5);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background-color 0.25s ease; transition: all 0.25s ease;
align-self: flex-end; align-self: flex-end;
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
@include hoverStateLayer($background: $color-dark-primary); &:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba($color-dark-primary, 0.6);
} }
} }
} }
@@ -504,6 +593,48 @@
} }
} }
} }
}
// ChatHeader component styles
.chat-header-left {
.product-name {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
}
.profile {
a {
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.05);
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba($color-dark-primary, 0.4);
box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
transition: all 0.3s ease;
&:hover {
box-shadow: 0 0 25px rgba($color-dark-primary, 0.5);
border-color: rgba($color-dark-primary, 0.6);
}
}
}
}
}
.message-profile-pic { .message-profile-pic {
img { img {