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

Improve design

Browse Source
This commit is contained in:
denis0001-dev
2025-09-18 20:11:53 +03:00
Unverified
parent e77ba2421c
commit c5f976b4d6
8 changed files with 169 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/resources/css/_chat.scss
+23 -26
View File
@@ -192,15 +192,11 @@
white-space: pre-wrap;
}
.message-reply {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.5rem;
margin-bottom: 0.5rem;
border-left: 3px solid $color-dark-primary;
.quote.message-reply {
user-select: none;
margin-bottom: 10px;
.reply-content {
.quote-inner {
display: flex;
flex-direction: column;
gap: 0.2rem;
@@ -289,10 +285,11 @@
.input-group {
display: flex;
background-color: $color-dark-surface-container;
border-radius: 30px;
flex-direction: column;
.chat-input {
background-color: $color-dark-surface-container;
border-radius: 30px;
flex: 1;
display: flex;
flex-direction: row;
@@ -313,24 +310,24 @@
height: 100%;
width: 100%;
}
}
.send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
align-self: flex-end;
@include hoverStateLayer($background: $color-dark-primary);
.send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
align-self: flex-end;
@include hoverStateLayer($background: $color-dark-primary);
}
}
}
}
frontend/src/resources/css/common/_components.scss
+20
View File
@@ -1,4 +1,5 @@
@use "material" as *;
@use "sass:color";
.text-center {
text-align: center;
@@ -123,4 +124,23 @@ button, input {
overflow-y: hidden;
background-color: transparent;
display: block;
}
.quote {
background-color: $color-dark-surface-primary-container-lightened;
border-radius: 8px;
overflow: hidden;
&.bg-surfaceContainer {
background-color: $color-dark-secondary-container;
.quote-inner {
border-left: 3px solid $color-dark-secondary;
}
}
.quote-inner {
border-left: 3px solid $color-dark-primary;
padding: 0.5rem;
}
}
frontend/src/resources/css/common/_material.scss
+3
View File
@@ -50,6 +50,9 @@ $color-dark-surface-container-low: rgb(24 28 31);
$color-dark-surface-container: rgb(28 32 36);
$color-dark-surface-container-high: rgb(38 43 46);
$color-dark-surface-container-highest: rgb(49 53 57);
$color-dark-surface-primary-container-lightened: color.adjust($color-dark-primary-container, $lightness: 5%);
$color-dark-surface-container-lightened: color.adjust($color-dark-surface-container, $lightness: 5%);
// custom colors
$color-1: rgb(82, 109, 246);
$color-2: rgb(65, 11, 113);