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

Clean up

Browse Source
This commit is contained in:
denis0001-dev
2025-10-19 20:31:29 +03:00
Unverified
parent 66f0b756a0
commit f5527ca14e
67 changed files with 891 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/chat/css/_callWindow.scss
+18 -18
View File
@@ -9,10 +9,10 @@
display: flex;
flex-direction: column;
user-select: none;
// Base transition for all properties
transition: all 0.4s $transition;
// Disable all transitions while dragging for immediate feedback
&.dragging {
transition: none !important;
@@ -100,7 +100,7 @@
.call-header {
padding: 12px;
min-height: auto;
.call-header-info {
.username {
font-size: 14px;
@@ -170,7 +170,7 @@
// Dynamic gradients based on call state
&.gradient-calling {
border-color: rgba(255, 193, 7, 0.5);
&::before {
content: '';
position: absolute;
@@ -178,9 +178,9 @@
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 193, 7, 0.12) 0%,
rgba(255, 152, 0, 0.12) 50%,
background: linear-gradient(135deg,
rgba(255, 193, 7, 0.12) 0%,
rgba(255, 152, 0, 0.12) 50%,
rgba(255, 193, 7, 0.12) 100%);
border-radius: inherit;
animation: pulse-gradient 2s ease-in-out infinite;
@@ -190,7 +190,7 @@
&.gradient-connecting {
border-color: rgba(33, 150, 243, 0.5);
&::before {
content: '';
position: absolute;
@@ -198,9 +198,9 @@
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(33, 150, 243, 0.12) 0%,
rgba(63, 81, 181, 0.12) 50%,
background: linear-gradient(135deg,
rgba(33, 150, 243, 0.12) 0%,
rgba(63, 81, 181, 0.12) 50%,
rgba(33, 150, 243, 0.12) 100%);
border-radius: inherit;
animation: connecting-gradient 1.5s ease-in-out infinite;
@@ -210,7 +210,7 @@
&.gradient-active {
border-color: rgba(76, 175, 80, 0.5);
&::before {
content: '';
position: absolute;
@@ -218,9 +218,9 @@
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(76, 175, 80, 0.12) 0%,
rgba(56, 142, 60, 0.12) 50%,
background: linear-gradient(135deg,
rgba(76, 175, 80, 0.12) 0%,
rgba(56, 142, 60, 0.12) 50%,
rgba(76, 175, 80, 0.12) 100%);
border-radius: inherit;
animation: active-gradient 3s ease-in-out infinite;
@@ -288,7 +288,7 @@
font-size: 24px;
display: inline-block;
animation: emoji-pulse 2s ease-in-out infinite;
&:nth-child(1) { animation-delay: 0s; }
&:nth-child(2) { animation-delay: 0.2s; }
&:nth-child(3) { animation-delay: 0.4s; }
@@ -355,7 +355,7 @@
overflow-y: auto;
overflow-x: hidden;
padding: 5px;
// Custom scrollbar
&::-webkit-scrollbar {
width: 6px;
@@ -369,7 +369,7 @@
&::-webkit-scrollbar-thumb {
background: rgba($color-dark-primary, 0.5);
border-radius: 3px;
&:hover {
background: rgba($color-dark-primary, 0.7);
}
frontend/src/pages/chat/css/_chat-input.scss
+10 -10
View File
@@ -19,12 +19,12 @@
display: flex;
align-items: flex-start;
gap: 16px;
mdui-icon {
align-self: center;
box-sizing: content-box;
}
.reply-cancel {
margin-left: auto;
}
@@ -45,13 +45,13 @@
display: flex;
flex-direction: row;
align-items: center;
.buttons, .left-buttons {
display: flex;
flex-direction: row;
align-items: center;
}
.left-buttons {
.emoji-btn {
margin: 10px;
@@ -59,13 +59,13 @@
transition: color 0.2s ease;
flex-shrink: 0;
align-self: flex-end;
&:hover {
color: $color-dark-primary;
}
}
}
.message-input {
flex: 1;
padding: 20px 0;
@@ -81,7 +81,7 @@
font-size: 13pt;
height: 100%;
width: 100%;
&::placeholder {
color: $color-dark-on-surface-variant;
opacity: 0.7;
@@ -104,7 +104,7 @@
transition: all 0.25s ease;
align-self: flex-end;
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
&:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba($color-dark-primary, 0.6);
@@ -156,7 +156,7 @@
overflow-y: hidden;
scroll-behavior: smooth;
padding: 8px;
&::-webkit-scrollbar {
height: 4px;
}
@@ -231,7 +231,7 @@
flex: 1;
overflow-y: auto;
scroll-behavior: smooth;
&::-webkit-scrollbar {
width: 6px;
}
frontend/src/pages/chat/css/_context-menu.scss
+32 -32
View File
@@ -12,7 +12,7 @@
transition: all 0.15s ease;
backdrop-filter: blur(8px);
transform: translateY(0);
&.closing {
opacity: 0;
transform: scale(0.8);
@@ -32,50 +32,50 @@
.context-menu-wrapper {
position: relative;
display: block;
// Animation states
&.entering {
opacity: 0;
transform: scale(0.8);
animation: contextMenuEnter 0.2s ease forwards;
}
&.entering-left {
opacity: 0;
transform: translateX(-20px) scale(0.8);
animation: contextMenuEnterLeft 0.2s ease forwards;
}
&.entering-up {
opacity: 0;
transform: translateY(20px) scale(0.8);
animation: contextMenuEnterUp 0.2s ease forwards;
}
&.entering-up-left {
opacity: 0;
transform: translateX(-20px) translateY(20px) scale(0.8);
animation: contextMenuEnterUpLeft 0.2s ease forwards;
}
&.closing {
opacity: 1;
transform: scale(1);
animation: contextMenuClose 0.2s ease forwards;
}
&.closing-left {
opacity: 1;
transform: translateX(0) scale(1);
animation: contextMenuCloseLeft 0.2s ease forwards;
}
&.closing-up {
opacity: 1;
transform: translateY(0) scale(1);
animation: contextMenuCloseUp 0.2s ease forwards;
}
&.closing-up-left {
opacity: 1;
transform: translateX(0) translateY(0) scale(1);
@@ -90,39 +90,39 @@
padding: 0.5rem 0;
min-width: 160px;
z-index: 1000;
&.entering {
animation: fadeInDown 0.2s ease forwards;
}
&.entering-left {
animation: fadeInLeft 0.2s ease forwards;
}
&.entering-up {
animation: fadeInUp 0.2s ease forwards;
}
&.entering-up-left {
animation: fadeInUpLeft 0.2s ease forwards;
}
&.closing {
animation: fadeOutUp 0.2s ease forwards;
}
&.closing-left {
animation: fadeOutRight 0.2s ease forwards;
}
&.closing-up {
animation: fadeOutDown 0.2s ease forwards;
}
&.closing-up-left {
animation: fadeOutDownRight 0.2s ease forwards;
}
.context-menu-item {
display: flex;
align-items: center;
@@ -132,11 +132,11 @@
color: $color-dark-on-surface;
font-size: 0.9rem;
transition: background-color 0.2s ease;
&:hover {
background-color: $color-dark-surface-container;
}
.material-symbols {
font-size: 1.1rem;
color: $color-dark-on-surface-variant;
@@ -158,31 +158,31 @@
justify-content: center;
margin-bottom: 10px;
transition: width 0.3s ease-out, height 0.3s ease-out;
&.left {
left: 0;
transform: translateX(0);
}
&.right {
right: 0;
transform: translateX(0);
}
&.expanded {
padding: 0;
overflow: hidden;
width: 320px;
height: 400px;
border-radius: 16px;
// Default: expand downward from the reaction bar's bottom edge
position: absolute;
bottom: auto;
top: 0;
left: 0;
transform: translateY(0);
&.expand-upward {
// Expand upward from the reaction bar's top edge
bottom: 100%;
@@ -203,7 +203,7 @@
align-items: center;
gap: 4px;
transition: opacity 0.3s ease-out;
&.faded {
opacity: 0;
}
@@ -221,13 +221,13 @@
cursor: pointer;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 18px;
&:hover {
background: var(--mdui-color-surface-container-high);
transform: scale(1.3);
box-shadow: var(--mdui-elevation-1);
}
&:active {
transform: scale(0.95);
transition: transform 0.1s ease;
@@ -245,25 +245,25 @@
background: var(--mdui-color-surface);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
&:hover {
background: var(--mdui-color-surface-container-high);
border-color: var(--mdui-color-primary);
transform: scale(1.1);
box-shadow: var(--mdui-elevation-1);
}
&:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
.material-symbols {
font-size: 18px;
color: var(--mdui-color-on-surface);
transition: transform 0.2s ease;
}
&:hover .material-symbols {
transform: rotate(90deg);
}
frontend/src/pages/chat/css/_layout.scss
+2 -2
View File
@@ -6,7 +6,7 @@
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;
@@ -14,7 +14,7 @@
left: 0;
right: 0;
bottom: 0;
background:
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%);
frontend/src/pages/chat/css/_left-panel.scss
+6 -6
View File
@@ -111,7 +111,7 @@
.product-name {
flex-grow: 1;
}
.profile {
font-size: 24px;
display: flex;
@@ -125,7 +125,7 @@
border: solid 2px $color-dark-on-surface-variant;
padding: 5px;
border-radius: 10px;
&:hover {
background-color: rgba(255, 255, 255, 0.241);
}
@@ -209,18 +209,18 @@
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;
@@ -229,7 +229,7 @@
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);
frontend/src/pages/chat/css/_message-reactions.scss
+4 -4
View File
@@ -26,21 +26,21 @@
font-size: 1px;
min-height: 28px;
animation: reactionFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
&.removing {
animation: reactionFadeOut 0.2s ease forwards;
}
&:hover {
background-color: $color-dark-surface-container-high;
transform: scale(1.05);
}
&.reacted {
background-color: $color-dark-primary-container;
border-color: $color-dark-primary;
color: $color-dark-on-primary-container;
&:hover {
background-color: color.adjust($color-dark-primary-container, $lightness: 20%);
}
frontend/src/pages/chat/css/_message.scss
+9 -9
View File
@@ -37,11 +37,11 @@
flex-shrink: 0;
cursor: pointer;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.05);
}
img {
width: 100%;
height: 100%;
@@ -69,7 +69,7 @@
margin: 10px;
cursor: pointer;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.05);
}
@@ -102,7 +102,7 @@
a {
text-decoration: none;
}
.attachement-image {
max-width: 200px;
border-radius: 8px;
@@ -199,7 +199,7 @@
border: 1px solid rgba($color-dark-outline-variant, 0.4);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
@@ -211,13 +211,13 @@
pointer-events: none;
z-index: 0;
}
> * {
position: relative;
z-index: 1;
}
}
.message-time {
color: $color-dark-on-surface-variant;
font-weight: 500;
@@ -236,7 +236,7 @@
border: 1px solid rgba($color-dark-primary, 0.5);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
@@ -248,7 +248,7 @@
pointer-events: none;
z-index: 0;
}
> * {
position: relative;
z-index: 1;
frontend/src/pages/chat/css/_profile-dialog.scss
+16 -16
View File
@@ -20,7 +20,7 @@
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
&.open {
opacity: 1;
visibility: visible;
@@ -42,26 +42,26 @@
transform: scale(0.9);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
&.open {
transform: scale(1);
opacity: 1;
}
.profile-dialog-content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
.profile-picture-section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 16px;
.profile-picture {
width: 120px;
height: 120px;
@@ -69,7 +69,7 @@
object-fit: cover;
border: 3px solid $color-dark-outline;
}
.profile-picture-edit-overlay {
position: absolute;
top: 0;
@@ -84,16 +84,16 @@
opacity: 0;
transition: opacity 0.2s ease;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
.username-section {
text-align: center;
.username-input {
background: none;
border: none;
@@ -114,24 +114,24 @@
align-items: center;
justify-content: center;
gap: 8px;
.online-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: $color-dark-primary;
&.offline {
background: $color-dark-on-surface-variant;
}
}
.status-text {
font-size: 0.875rem;
color: $color-dark-on-surface;
}
}
.profile-sections {
margin: 16px;
border-radius: 24px;
@@ -161,7 +161,7 @@
font-size: small;
color: $color-dark-on-surface-variant;
}
.value {
color: $color-dark-on-surface;
font-size: medium;
@@ -182,7 +182,7 @@
}
}
}
.profile-dialog-fab {
position: absolute;
bottom: 24px;
@@ -190,7 +190,7 @@
z-index: 1002;
transform: translateY(100px);
transition: transform 0.3s ease;
&.visible {
transform: translateY(0);
}
frontend/src/pages/chat/css/_right-panel.scss
+3 -3
View File
@@ -89,11 +89,11 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
backdrop-filter: blur(20px);
.file-overlay-wrapper {
frontend/src/pages/chat/css/_settings-dialog.scss
+8 -8
View File
@@ -40,7 +40,7 @@
flex: 1;
overflow-y: auto;
position: relative;
.settings-panel {
display: flex;
flex-direction: column;
@@ -53,43 +53,43 @@
top: 0;
left: 0;
width: 100%;
&.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
position: relative;
}
h3 {
margin: 0 0 16px 0;
color: $color-dark-on-surface;
}
mdui-text-field,
mdui-select,
mdui-switch,
mdui-button {
margin-bottom: 8px;
}
mdui-switch {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid $color-dark-outline;
&:last-child {
border-bottom: none;
}
}
p {
margin: 8px 0;
color: $color-dark-on-surface-variant;
}
mdui-linear-progress {
margin: 16px 0;
}