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

Add glassmorphism effects

Browse Source
This commit is contained in:
denis0001-dev
2025-10-29 21:21:40 +03:00
Unverified
parent d20800b681
commit 1d4a46dff2
12 changed files with 869 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/chat/css/_chat-input.scss
+32 -40
View File
@@ -5,14 +5,18 @@
.chat-input-wrapper {
position: relative;
margin: 0 10px 10px 10px;
position: sticky;
bottom: 10px;
z-index: 1;
.input-group {
display: flex;
background: $color-dark-surface-container;
background: rgba($color-dark-surface-container, 0.7);
border-radius: 30px;
flex-direction: column;
border: 1px solid rgba($color-dark-outline-variant, 0.4);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
.contextual-preview {
padding: 12px 16px 0 16px;
@@ -143,83 +147,71 @@
}
.emoji-menu-header {
background: $color-dark-surface-container-high;
border-bottom: 1px solid rgba($color-dark-outline-variant, 0.2);
position: sticky;
top: 0;
z-index: 1;
.emoji-category-tabs {
$scrollbar-height: 2px;
display: flex;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding: 8px;
padding-bottom: 8px - $scrollbar-height;
&::-webkit-scrollbar {
height: 4px;
height: $scrollbar-height; // slightly taller to accommodate inner padding
}
&::-webkit-scrollbar-track {
background: transparent;
margin: 0 6px; // add space at both ends (left/right)
}
&::-webkit-scrollbar-thumb {
background-color: $color-dark-surface-container;
border-radius: 2px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: $color-dark-surface-container-high;
border-radius: 2px;
border: 0 solid transparent; // remove vertical padding
border-left: 2px solid transparent; // keep horizontal padding (left/right)
border-right: 2px solid transparent;
background-clip: padding-box; // keep color inside the border
}
.emoji-category-tab {
background: transparent;
background-color: transparent;
border: none;
border-radius: 10px;
padding: 8px;
padding: 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.2rem;
min-width: 40px;
height: 40px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
transform: scale(1);
&:hover {
background: $color-dark-surface-container;
background-color: $color-dark-surface-container-high;
}
&:active {
transform: scale(0.8);
}
&.active {
background: $color-dark-primary-container;
color: $color-dark-on-primary-container;
transform: scale(1.05);
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $color-dark-primary-container;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
}
&.active::before {
opacity: 1;
background-color: $color-dark-primary-container;
}
span {
position: relative;
z-index: 1;
display: flex;
}
}
}
@@ -248,17 +240,17 @@
.emoji-category-section {
.emoji-category-title {
position: sticky;
top: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 12px;
padding-right: 12px;
top: 5px;
padding: 5px 12px;
font-size: 0.85rem;
font-weight: 600;
color: $color-dark-on-surface-variant;
z-index: 2;
margin: 0;
backdrop-filter: blur(10px);
border-radius: 10px;
margin: 5px;
background-color: rgba($color-dark-surface-container-high, 0.7);
}
.emoji-category-grid {