SHA256
channels ux cleanup and create-flow recovery
This commit is contained in:
DrygMira
@@ -1216,6 +1216,10 @@ textarea.input {
|
||||
color: #f5daa0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-row-description {
|
||||
@@ -1231,6 +1235,10 @@ textarea.input {
|
||||
line-height: 1.35;
|
||||
word-break: break-word;
|
||||
min-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-row-owner {
|
||||
@@ -1519,3 +1527,371 @@ textarea.input {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Channels UX Stabilization ===== */
|
||||
.toast-host {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(18px + env(safe-area-inset-bottom));
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 8px;
|
||||
z-index: 60;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
min-width: min(88vw, 320px);
|
||||
max-width: min(92vw, 420px);
|
||||
border-radius: 14px;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid rgba(223, 188, 110, 0.45);
|
||||
color: #f2dca8;
|
||||
background: rgba(10, 14, 23, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 16px 30px rgba(1, 6, 12, 0.55);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
|
||||
.toast.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.toast.is-hiding {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.toast.toast--error {
|
||||
color: #ffd8e0;
|
||||
border-color: rgba(234, 122, 150, 0.45);
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(100deg, rgba(180, 151, 80, 0.16), rgba(228, 192, 109, 0.45), rgba(180, 151, 80, 0.16));
|
||||
background-size: 220% 100%;
|
||||
animation: channels-shimmer 1.2s linear infinite;
|
||||
}
|
||||
|
||||
.skeleton-line.w-40 { width: 40%; }
|
||||
.skeleton-line.w-70 { width: 70%; }
|
||||
.skeleton-line.w-90 { width: 90%; }
|
||||
|
||||
@keyframes channels-shimmer {
|
||||
0% { background-position: 210% 0; }
|
||||
100% { background-position: -10% 0; }
|
||||
}
|
||||
|
||||
.channels-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(188, 152, 79, 0.34);
|
||||
background: linear-gradient(165deg, rgba(12, 24, 46, 0.92), rgba(9, 17, 34, 0.96));
|
||||
}
|
||||
|
||||
.channels-tab-btn {
|
||||
min-height: 38px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(122, 151, 210, 0.26);
|
||||
background: rgba(18, 33, 62, 0.55);
|
||||
color: #b8c9ec;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.channels-tab-btn.is-active {
|
||||
border-color: rgba(218, 183, 100, 0.48);
|
||||
color: #f4d99e;
|
||||
background: linear-gradient(160deg, rgba(193, 154, 76, 0.22), rgba(18, 33, 62, 0.64));
|
||||
}
|
||||
|
||||
.channels-empty-state {
|
||||
border: 1px dashed rgba(199, 164, 90, 0.36);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
color: #b7c6e8;
|
||||
background: rgba(10, 18, 34, 0.52);
|
||||
}
|
||||
|
||||
.channels-empty-icon {
|
||||
font-size: 20px;
|
||||
color: #d9b56d;
|
||||
}
|
||||
|
||||
.channel-row {
|
||||
position: relative;
|
||||
grid-template-columns: 46px minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.channel-row-main {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.channel-row-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channel-row-controls {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.channel-menu-trigger {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(185, 154, 83, 0.42);
|
||||
background: rgba(14, 25, 48, 0.82);
|
||||
color: #efd9a4;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.channel-menu-wrap {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
right: 12px;
|
||||
z-index: 25;
|
||||
width: min(240px, 70vw);
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(206, 170, 90, 0.38);
|
||||
background: rgba(10, 14, 23, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 16px 32px rgba(1, 5, 12, 0.62);
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.channel-menu-item {
|
||||
border: 1px solid rgba(125, 154, 212, 0.34);
|
||||
border-radius: 10px;
|
||||
background: rgba(17, 31, 56, 0.72);
|
||||
color: #e6efff;
|
||||
min-height: 36px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.channel-menu-item.destructive {
|
||||
border-color: rgba(235, 120, 147, 0.46);
|
||||
color: #ffdfe7;
|
||||
background: rgba(84, 20, 38, 0.52);
|
||||
}
|
||||
|
||||
.channel-menu-item:disabled {
|
||||
opacity: 0.68;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.channel-menu-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: #d9e6ff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.channel-toggle-btn {
|
||||
width: 48px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(146, 171, 225, 0.45);
|
||||
background: rgba(27, 43, 75, 0.84);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.channel-toggle-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #d9e6ff;
|
||||
transition: transform 0.24s cubic-bezier(.2,.9,.3,1.15), background 0.2s ease;
|
||||
}
|
||||
|
||||
.channel-toggle-btn.is-on {
|
||||
background: rgba(211, 173, 92, 0.34);
|
||||
border-color: rgba(219, 182, 101, 0.6);
|
||||
}
|
||||
|
||||
.channel-toggle-btn.is-on::after {
|
||||
transform: translateX(20px);
|
||||
background: #f4dca6;
|
||||
}
|
||||
|
||||
.channel-head-description {
|
||||
margin: 0;
|
||||
color: #c8d7f6;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-head-description.is-expanded {
|
||||
-webkit-line-clamp: unset;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.channel-head-more {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #efcf8b;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.author-line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.author-line-login {
|
||||
font-weight: 500;
|
||||
color: #f3dbab;
|
||||
}
|
||||
|
||||
.author-line-num {
|
||||
font-weight: 400;
|
||||
color: #95a8d2;
|
||||
}
|
||||
|
||||
.channel-message-card.is-own-new,
|
||||
.thread-node-card.is-own-new {
|
||||
box-shadow: 0 0 0 1px rgba(217, 180, 97, 0.5), 0 12px 24px rgba(2, 8, 16, 0.46);
|
||||
}
|
||||
|
||||
.is-springing {
|
||||
animation: spring-tap 0.28s ease;
|
||||
}
|
||||
|
||||
@keyframes spring-tap {
|
||||
0% { transform: scale(1); }
|
||||
30% { transform: scale(0.95); }
|
||||
60% { transform: scale(1.06); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.channel-message-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.thread-node-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.channels-action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Channels cleanup overrides ===== */
|
||||
.screen-content.channels-scroll-clean {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.screen-content.channels-scroll-clean::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channels-tabs--sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 8;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.channels-list-content {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 42vh;
|
||||
}
|
||||
|
||||
.channels-list-body-fade {
|
||||
animation: channels-fade-in 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes channels-fade-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.channels-menu-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 45;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.channel-menu-wrap--portal {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
top: auto;
|
||||
z-index: 46;
|
||||
}
|
||||
|
||||
.channels-search-suggest {
|
||||
max-height: 172px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid rgba(150, 174, 224, 0.3);
|
||||
border-radius: 12px;
|
||||
background: rgba(9, 18, 35, 0.94);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.channel-search-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 1px solid rgba(132, 162, 224, 0.28);
|
||||
border-radius: 9px;
|
||||
background: rgba(16, 30, 56, 0.78);
|
||||
color: #e5eeff;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.channel-search-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.channel-search-item:hover {
|
||||
border-color: rgba(216, 178, 95, 0.52);
|
||||
color: #f3dca8;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user