820 lines
27 KiB
CSS
820 lines
27 KiB
CSS
|
||
.minimal-bg {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.hide-scrollbar {
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.hide-scrollbar::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari, Opera */
|
||
}
|
||
|
||
/* ============================================ */
|
||
/* FILE TRANSFER STYLES */
|
||
/* ============================================ */
|
||
|
||
.file-transfer-component {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
/* Используем dvh для динамической высоты на мобильных */
|
||
.mobile-chat-height {
|
||
height: calc(100dvh - 64px) !important;
|
||
}
|
||
|
||
/* Кнопка прокрутки на мобильном */
|
||
.scroll-to-bottom-mobile {
|
||
bottom: 140px !important;
|
||
inset-inline-end: 16px !important;
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.header-minimal {
|
||
/* Browser only. Installed, this fixed height is what left the brand row
|
||
hanging below the bar's own blurred background: box-sizing is border-box
|
||
globally, so the status-bar inset added as padding is subtracted from
|
||
this box rather than added to it. src/styles/pwa.css — the last
|
||
stylesheet in the document — replaces this with height:auto there. */
|
||
height: 56px;
|
||
}
|
||
|
||
.mobile-chat-height {
|
||
height: calc(100dvh - 56px) !important;
|
||
}
|
||
}
|
||
|
||
.file-drop-zone {
|
||
border: 2px dashed rgba(var(--sb-legacy-border-rgb), 1);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
background: rgba(var(--sb-legacy-slate-rgb), 0.1);
|
||
}
|
||
|
||
.file-drop-zone:hover {
|
||
border-color: var(--sb-legacy-blue-500);
|
||
background: rgba(var(--sb-legacy-blue-rgb), 0.1);
|
||
}
|
||
|
||
.file-drop-zone.drag-over {
|
||
border-color: var(--sb-legacy-emerald-500);
|
||
background: rgba(var(--sb-legacy-emerald-rgb), 0.1);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.drop-content {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.active-transfers {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.transfer-item {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.transfer-item:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.progress-bar {
|
||
position: relative;
|
||
height: 6px;
|
||
background: rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
transition: width 0.3s ease;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.progress-text {
|
||
position: absolute;
|
||
top: -20px;
|
||
inset-inline-end: 0;
|
||
color: var(--sb-legacy-gray);
|
||
}
|
||
|
||
.file-transfer-section {
|
||
border-top: 1px solid rgba(var(--sb-legacy-border-rgb), 0.1);
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.file-drop-zone {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.transfer-item {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
.header-minimal {
|
||
background: rgba(var(--sb-legacy-bar-rgb), 0.13);
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
flex-shrink: 0;
|
||
height: 64px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
}
|
||
|
||
.header-minimal .cursor-pointer:hover {
|
||
transform: scale(1.05);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.header-minimal .cursor-pointer:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* The main chat container takes up the rest of the height. */
|
||
.chat-container {
|
||
/* display: flex; */
|
||
flex-direction: column;
|
||
height: calc(100vh - 64px); /* 64px - header height */
|
||
min-height: 0;
|
||
/* flex: 1; */
|
||
}
|
||
|
||
.chat-messages-area {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chat-input-area {
|
||
flex-shrink: 0;
|
||
position: sticky;
|
||
bottom: 0;
|
||
background: rgba(var(--sb-legacy-fill-rgb), 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-top: 1px solid rgba(var(--sb-legacy-border-rgb), 0.2);
|
||
}
|
||
|
||
/* The message container must occupy the entire available height. */
|
||
.chat-messages-area > div:first-child {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
padding: 1rem;
|
||
scroll-behavior: smooth;
|
||
scroll-padding-bottom: 20px;
|
||
scroll-margin-bottom: 20px;
|
||
}
|
||
|
||
/* For mobile devices, take into account the height of the virtual keyboard */
|
||
@media (max-width: 768px) {
|
||
.chat-container {
|
||
height: calc(100vh - 64px);
|
||
height: calc(100dvh - 64px); /* dvh to support dynamic height on mobile */
|
||
}
|
||
}
|
||
|
||
/* Fix for main application container */
|
||
main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
.card-minimal {
|
||
background: rgba(var(--sb-legacy-fill-rgb), 0.8);
|
||
backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.2);
|
||
box-shadow: 0 4px 16px rgba(var(--sb-shadow-rgb), calc(0.1 * var(--sb-shadow-k)));
|
||
}
|
||
/* Selected state override (higher precedence than Tailwind bg-*) */
|
||
.card-minimal--selected {
|
||
background: rgba(var(--sb-legacy-orange-500-rgb), 0.15) !important; /* orange-500 @ 0.15 */
|
||
border-color: rgba(var(--sb-legacy-orange-500-rgb), 1) !important; /* border-orange-500 */
|
||
box-shadow: 0 0 0 2px rgba(var(--sb-legacy-orange-500-rgb), 0.3) !important; /* soft ring */
|
||
}
|
||
/* .card-minimal:hover {
|
||
border-color: rgba(var(--sb-legacy-orange-500-rgb), 0.3);
|
||
transform: translateY(-1px);
|
||
transition: all 0.2s ease;
|
||
} */
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
margin-inline-end: 8px;
|
||
}
|
||
.status-connected { background: var(--sb-legacy-emerald-500); }
|
||
.status-connecting { background: var(--sb-legacy-gray-500); }
|
||
.status-failed { background: var(--sb-legacy-red-500); }
|
||
.status-disconnected { background: var(--sb-legacy-gray-500); }
|
||
.status-verifying { background: var(--sb-legacy-gray); }
|
||
|
||
.security-shield {
|
||
background: linear-gradient(135deg, var(--sb-legacy-body) 0%, var(--sb-legacy-raise-1) 100%);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
}
|
||
|
||
.verification-code {
|
||
background: rgba(var(--sb-legacy-fill-rgb), 0.8);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
color: var(--sb-legacy-text);
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
letter-spacing: 0.1em;
|
||
font-size: 1.2em;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon-container {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(var(--sb-legacy-fill-rgb), 0.8);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.icon-container i {
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.icon-sm { font-size: 0.875rem; }
|
||
.icon-md { font-size: 1rem; }
|
||
.icon-lg { font-size: 1.125rem; }
|
||
.icon-xl { font-size: 1.25rem; }
|
||
.icon-2xl { font-size: 1.5rem; }
|
||
|
||
.step-number {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: linear-gradient(135deg, var(--sb-legacy-orange-500), var(--sb-legacy-orange-600));
|
||
color: white;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.icon-fallback {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.fas, .far, .fab {
|
||
display: inline-block;
|
||
font-style: normal;
|
||
font-variant: normal;
|
||
text-rendering: auto;
|
||
line-height: 1;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* Improve icon rendering */
|
||
.fas::before, .far::before, .fab::before {
|
||
display: inline-block;
|
||
font-style: normal;
|
||
font-variant: normal;
|
||
text-rendering: auto;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Icon loading fallback */
|
||
.icon-loading {
|
||
opacity: 0.7;
|
||
animation: iconPulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
/* Fallback icons content */
|
||
.fa-fallback .fas.fa-shield-halved::before { content: "🛡️"; }
|
||
.fa-fallback .fas.fa-shield-alt::before { content: "🛡️"; }
|
||
.fa-fallback .fas.fa-lock::before { content: "🔒"; }
|
||
.fa-fallback .fas.fa-unlock-alt::before { content: "🔓"; }
|
||
.fa-fallback .fas.fa-key::before { content: "🔑"; }
|
||
.fa-fallback .fas.fa-fingerprint::before { content: "👆"; }
|
||
.fa-fallback .fas.fa-exchange-alt::before { content: "🔄"; }
|
||
.fa-fallback .fas.fa-plus::before { content: "➕"; }
|
||
.fa-fallback .fas.fa-link::before { content: "🔗"; }
|
||
.fa-fallback .fas.fa-paste::before { content: "📋"; }
|
||
.fa-fallback .fas.fa-check-circle::before { content: "✅"; }
|
||
.fa-fallback .fas.fa-cogs::before { content: "⚙️"; }
|
||
.fa-fallback .fas.fa-rocket::before { content: "🚀"; }
|
||
.fa-fallback .fas.fa-copy::before { content: "📄"; }
|
||
.fa-fallback .fas.fa-check::before { content: "✓"; }
|
||
.fa-fallback .fas.fa-times::before { content: "✗"; }
|
||
.fa-fallback .fas.fa-exclamation-triangle::before { content: "⚠️"; }
|
||
.fa-fallback .fas.fa-info-circle::before { content: "ℹ️"; }
|
||
.fa-fallback .fas.fa-circle::before { content: "●"; }
|
||
.fa-fallback .fas.fa-paper-plane::before { content: "📤"; }
|
||
.fa-fallback .fas.fa-comments::before { content: "💬"; }
|
||
.fa-fallback .fas.fa-signature::before { content: "✍️"; }
|
||
.fa-fallback .fas.fa-power-off::before { content: "⏻"; }
|
||
.fa-fallback .fas.fa-arrow-left::before { content: "←"; }
|
||
.fa-fallback .fas.fa-chevron-down::before { content: "↓"; }
|
||
|
||
/* Ensure fallback icons are properly sized & use emoji font */
|
||
.fa-fallback .fas::before {
|
||
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
font-size: inherit;
|
||
}
|
||
|
||
/* Icon alignment in buttons */
|
||
button i {
|
||
vertical-align: middle;
|
||
margin-inline-end: 0.5rem;
|
||
}
|
||
|
||
/* Lightning button */
|
||
.lightning-button {
|
||
background: linear-gradient(135deg, var(--sb-legacy-amber-500) 0%, var(--sb-legacy-amber-600) 100%);
|
||
border: 1px solid rgba(var(--sb-legacy-amber-rgb), 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.lightning-button:hover {
|
||
background: linear-gradient(135deg, var(--sb-legacy-amber-600) 0%, var(--sb-legacy-amber-700) 100%);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--sb-legacy-orange-500) 0%, var(--sb-legacy-orange-600) 100%);
|
||
border: 1px solid rgba(var(--sb-legacy-orange-500-rgb), 0.3);
|
||
}
|
||
.btn-primary:hover {
|
||
background: linear-gradient(135deg, var(--sb-legacy-orange-600) 0%, var(--sb-legacy-red-600) 100%);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: linear-gradient(135deg, var(--sb-legacy-body) 0%, var(--sb-legacy-raise-1) 100%);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
}
|
||
.btn-secondary:hover {
|
||
background: linear-gradient(135deg, var(--sb-legacy-raise-1) 0%, var(--sb-legacy-raise-2) 100%);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-verify {
|
||
background: linear-gradient(135deg, var(--sb-legacy-body) 0%, var(--sb-legacy-raise-1) 100%);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
}
|
||
.btn-verify:hover {
|
||
background: linear-gradient(135deg, var(--sb-legacy-raise-1) 0%, var(--sb-legacy-raise-2) 100%);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Wallet logos container & per-wallet filters */
|
||
.wallet-logos-container {
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
position: relative;
|
||
height: 64px;
|
||
margin: 20px 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.wallet-logos-track {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
animation: walletLogosScroll 30s linear infinite;
|
||
width: max-content;
|
||
}
|
||
|
||
.wallet-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100px;
|
||
height: 48px;
|
||
background: rgba(var(--sb-legacy-fill-rgb), 0.8);
|
||
border: 1px solid rgba(var(--sb-legacy-border-rgb), 0.3);
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--sb-legacy-text);
|
||
flex-shrink: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.wallet-logo:hover {
|
||
border-color: rgba(var(--sb-legacy-orange-500-rgb), 0.3);
|
||
background: rgba(var(--sb-legacy-orange-500-rgb), 0.1);
|
||
transform: translateY(-2px) scale(1.05);
|
||
box-shadow: 0 4px 10px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k)));
|
||
}
|
||
|
||
.wallet-logo.bitcoin-lightning { background: transparent; padding: 4px; }
|
||
.wallet-logo.bitcoin-lightning img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.impervious { background: transparent; padding: 4px; }
|
||
.wallet-logo.impervious img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.strike { background: transparent; padding: 4px; }
|
||
.wallet-logo.strike img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.lnbits { background: transparent; padding: 4px; }
|
||
.wallet-logo.lnbits img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.lightning-labs { background: transparent; padding: 4px; }
|
||
.wallet-logo.lightning-labs img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.atomic { background: transparent; padding: 4px; }
|
||
.wallet-logo.atomic img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.breez { background: transparent; padding: 4px; }
|
||
.wallet-logo.breez img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.alby { background: transparent; padding: 4px; }
|
||
.wallet-logo.alby img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.phoenix { background: transparent; }
|
||
.wallet-logo.blixt { background: transparent; }
|
||
.wallet-logo.zeus { background: transparent; padding: 4px; }
|
||
.wallet-logo.zeus img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.wos { background: transparent; padding: 4px; }
|
||
.wallet-logo.wos img { width: 80px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
.wallet-logo.muun { background: transparent; padding: 4px; }
|
||
.wallet-logo.muun img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(670%) hue-rotate(202deg) brightness(97%) contrast(86%); }
|
||
|
||
/* Pause animation on hover for logos */
|
||
.wallet-logos-container:hover .wallet-logos-track {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.message-slide {
|
||
animation: messageSlideIn 0.3s ease-out;
|
||
}
|
||
|
||
.chat-messages-area .message:last-child {
|
||
scroll-margin-bottom: 20px;
|
||
}
|
||
|
||
.message {
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
white-space: normal;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.message span {
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
white-space: normal;
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.chat-messages-area {
|
||
scroll-behavior: smooth;
|
||
scroll-padding-bottom: 20px;
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes iconPulse {
|
||
0%, 100% { opacity: 0.7; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
@keyframes messageSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes walletLogosScroll {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(-50%); }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { transform: translateX(-100%) skewX(-15deg); }
|
||
100% { transform: translateX(200%) skewX(-15deg); }
|
||
}
|
||
|
||
/* Modern animated button */
|
||
.btn-partner-modern {
|
||
position: relative;
|
||
background: linear-gradient(135deg, var(--sb-legacy-orange-500) 0%, var(--sb-legacy-orange-600) 50%, var(--sb-legacy-red-600) 100%);
|
||
background-size: 200% 200%;
|
||
background-position: 0% 0;
|
||
box-shadow: 0 4px 15px rgba(var(--sb-legacy-orange-500-rgb), 0.3);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-partner-modern::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.btn-partner-modern:hover {
|
||
background-position: 100% 0;
|
||
transform: translateY(-2px) scale(1.02);
|
||
box-shadow: 0 8px 25px rgba(var(--sb-legacy-orange-500-rgb), 0.5), 0 0 30px rgba(var(--sb-legacy-orange-500-rgb), 0.3);
|
||
}
|
||
|
||
.btn-partner-modern:hover::before {
|
||
left: 100%;
|
||
animation: shimmer 1.5s ease-in-out;
|
||
}
|
||
|
||
.btn-partner-modern:active {
|
||
transform: translateY(0) scale(0.98);
|
||
box-shadow: 0 2px 10px rgba(var(--sb-legacy-orange-500-rgb), 0.4);
|
||
}
|
||
|
||
|
||
/* Custom scrollbar */
|
||
.custom-scrollbar {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(var(--sb-legacy-scroll-rgb), 0.5) transparent;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background-color: rgba(var(--sb-legacy-scroll-rgb), 0.5);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(var(--sb-legacy-scroll-rgb), 0.7);
|
||
}
|
||
|
||
.accent-orange { color: var(--sb-legacy-orange) !important; }
|
||
.accent-green { color: var(--sb-legacy-green) !important; }
|
||
.accent-red { color: var(--sb-legacy-red) !important; }
|
||
.accent-yellow { color: var(--sb-legacy-yellow) !important; }
|
||
.accent-purple { color: var(--sb-legacy-purple) !important; }
|
||
.accent-gray { color: var(--sb-legacy-gray) !important; }
|
||
.accent-cyan { color: var(--sb-legacy-cyan) !important; }
|
||
.accent-blue { color: var(--sb-legacy-blue) !important; }
|
||
|
||
/* Ensure icons visible in dark backgrounds */
|
||
.text-secondary i {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Container to enable 3D perspective */
|
||
.button-container {
|
||
perspective: 1000px;
|
||
}
|
||
|
||
/* Base button styles with capsule shape and glass effect */
|
||
.button {
|
||
width: 200px;
|
||
height: 60px;
|
||
border-radius: 30px; /* Creates the capsule shape */
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(255, 255, 255, 0.15),
|
||
rgba(255, 255, 255, 0.05)
|
||
); /* Transparent glass gradient */
|
||
box-shadow:
|
||
inset 0 1px 2px rgba(255, 255, 255, 0.4),
|
||
/* Top highlight */ inset 0 -1px 2px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
/* Bottom shadow */ 0 4px 8px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
/* Drop shadow */ 0 0 20px rgba(255, 255, 255, 0.1); /* Subtle glow */
|
||
transform: rotateX(15deg) translateZ(0); /* Initial 3D tilt */
|
||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Springy transition */
|
||
position: relative;
|
||
cursor: pointer;
|
||
animation: pulse 2s infinite ease-in-out; /* Pulsing glow animation */
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
display: block;
|
||
}
|
||
|
||
/* Moving shine effect for glass-like reflection */
|
||
.button::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: -50px;
|
||
width: 50px;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
to right,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.1),
|
||
rgba(255, 255, 255, 0.2),
|
||
rgba(255, 255, 255, 0.1),
|
||
transparent
|
||
); /* Shine gradient */
|
||
transform: skewX(-25deg); /* Tilted shine */
|
||
animation: shine 3s infinite linear; /* Continuous shine movement */
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Ground shadow to enhance 3D effect */
|
||
.button::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -10px;
|
||
left: 10%;
|
||
width: 80%;
|
||
height: 10px;
|
||
background: radial-gradient(
|
||
ellipse at center,
|
||
rgba(var(--sb-shadow-rgb), calc(0.3 * var(--sb-shadow-k))) 0%,
|
||
transparent 70%
|
||
); /* Soft shadow */
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Text inside the button */
|
||
.button span {
|
||
position: relative;
|
||
z-index: 2;
|
||
color: white;
|
||
font-size: 18px;
|
||
font-family: Arial, sans-serif;
|
||
text-shadow: 0 1px 2px rgba(var(--sb-shadow-rgb), calc(0.5 * var(--sb-shadow-k))); /* Depth for text */
|
||
display: block;
|
||
line-height: 60px; /* Center vertically */
|
||
text-align: center;
|
||
}
|
||
|
||
/* Hover state: Straighten, lift, and enhance glow */
|
||
.button:hover {
|
||
transform: rotateX(0deg) translateZ(15px) scale(1.05); /* Lift and scale */
|
||
box-shadow:
|
||
inset 0 1px 2px rgba(255, 255, 255, 0.4),
|
||
inset 0 -1px 2px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
0 8px 16px rgba(var(--sb-shadow-rgb), calc(0.3 * var(--sb-shadow-k))),
|
||
/* Stronger shadow */ 0 0 40px rgba(255, 255, 255, 0.25); /* Brighter glow */
|
||
}
|
||
|
||
/* Active state: Depress and dim glow */
|
||
.button:active {
|
||
transform: rotateX(0deg) translateZ(-5px) scale(0.95); /* Push down */
|
||
box-shadow:
|
||
inset 0 1px 2px rgba(255, 255, 255, 0.4),
|
||
inset 0 -1px 2px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
0 2px 4px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
/* Reduced shadow */ 0 0 10px rgba(255, 255, 255, 0.1); /* Dimmed glow */
|
||
}
|
||
|
||
/* Pulsing animation for idle state */
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
box-shadow:
|
||
inset 0 1px 2px rgba(255, 255, 255, 0.4),
|
||
inset 0 -1px 2px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
0 4px 8px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
0 0 20px rgba(255, 255, 255, 0.1);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
inset 0 1px 2px rgba(var(--sb-ink), 0.4),
|
||
inset 0 -1px 2px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
0 4px 8px rgba(var(--sb-shadow-rgb), calc(0.2 * var(--sb-shadow-k))),
|
||
0 0 30px rgba(var(--sb-ink), 0.2); /* Peak glow */
|
||
}
|
||
}
|
||
|
||
/* Shine animation for dynamic glass effect */
|
||
@keyframes shine {
|
||
0% {
|
||
left: -50px; /* Start off-screen */
|
||
}
|
||
100% {
|
||
left: 250px; /* Move past button width (200px + buffer) */
|
||
}
|
||
}
|
||
/* ============================================================
|
||
SecureBit Chat — redesigned chat surface (v4.8.21)
|
||
============================================================ */
|
||
/* Firefox has no ::-webkit-scrollbar, so without these two it ignored everything below
|
||
and drew its default slab — the chat and the language menu looked like different
|
||
applications depending on the browser. */
|
||
.sb-scroll {
|
||
scrollbar-gutter: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(var(--sb-ink), 0.13) transparent;
|
||
}
|
||
.sb-scroll::-webkit-scrollbar { width: 9px; }
|
||
.sb-scroll::-webkit-scrollbar-track { background: transparent; }
|
||
.sb-scroll::-webkit-scrollbar-thumb {
|
||
background: rgba(var(--sb-ink), 0.07);
|
||
border-radius: 99px;
|
||
border: 2px solid transparent;
|
||
background-clip: padding-box;
|
||
}
|
||
.sb-scroll::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(var(--sb-ink), 0.13);
|
||
background-clip: padding-box;
|
||
}
|
||
.sb-textarea::placeholder { color: var(--sb-text-faint); }
|
||
.sb-chip:hover { border-color: rgba(var(--sb-ink), 0.16) !important; color: var(--sb-text-2) !important; }
|
||
.sb-send:hover:not(:disabled) { filter: brightness(1.06); }
|
||
.sb-unsend:hover { color: var(--sb-red) !important; }
|
||
.sb-link:hover { color: var(--sb-text-2) !important; }
|
||
.sb-disconnect:hover { border-color: rgba(var(--sb-red-rgb), 0.4) !important; color: var(--sb-red) !important; background: rgba(var(--sb-red-rgb), 0.06) !important; }
|
||
@media (max-width: 560px) { .sb-hide-sm { display: none; } }
|
||
.sb-secpill:hover { border-color: rgba(var(--sb-ink), 0.16) !important; background: rgba(var(--sb-ink), 0.05) !important; }
|
||
|
||
/* ── Start Secure — new connection screen (design import) ───────────────── */
|
||
@keyframes sbFlowR { 0% { left: 4%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 96%; opacity: 0; } }
|
||
@keyframes sbFlowL { 0% { left: 96%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 4%; opacity: 0; } }
|
||
@keyframes sbPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; } }
|
||
@keyframes sbSpin { to { transform: rotate(360deg); } }
|
||
@keyframes sbUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||
@keyframes sbNode { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--sb-green-rgb), 0.0); } 50% { box-shadow: 0 0 0 6px rgba(var(--sb-green-rgb), 0.06); } }
|
||
@keyframes sbScan { 0% { top: 8%; } 100% { top: 88%; } }
|
||
@keyframes sbSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
|
||
|
||
/* Camera scan modal — make the Html5Qrcode-injected video fill the square viewfinder */
|
||
#qr-reader { width: 100%; height: 100%; border: none !important; }
|
||
#qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
|
||
#qr-reader img, #qr-reader__dashboard, #qr-reader__status_span { display: none !important; }
|
||
|
||
/* Connection screen footer — stack "Download desktop app" / "Advanced settings"
|
||
full-width on mobile and tablet instead of side-by-side. Inline styles win on
|
||
specificity, so the responsive overrides are marked !important. */
|
||
@media (max-width: 1024px) {
|
||
.sb-conn-footer { flex-direction: column !important; align-items: stretch !important; }
|
||
.sb-conn-footer > button { width: 100% !important; justify-content: center !important; }
|
||
.sb-conn-footer > .sb-platforms-menu { width: 100% !important; }
|
||
}
|
||
.sb-start textarea::placeholder, .sb-start input::placeholder { color: var(--sb-text-faint); }
|
||
.sb-start .sb-sc::-webkit-scrollbar { width: 8px; }
|
||
.sb-start .sb-sc::-webkit-scrollbar-thumb { background: rgba(var(--sb-ink), 0.1); border-radius: 99px; }
|
||
.sb-seg-btn { transition: color .2s; }
|
||
.sb-soft-btn { transition: all .15s; }
|
||
.sb-qr-row:hover { background: rgba(var(--sb-ink), 0.025) !important; }
|
||
.sb-soft-btn:hover { border-color: rgba(var(--sb-ink), 0.18) !important; color: var(--sb-text-2) !important; }
|
||
.sb-scan-btn:hover { border-color: rgba(var(--sb-green-rgb), 0.5) !important; background: rgba(var(--sb-green-rgb), 0.1) !important; }
|
||
.sb-gen-btn:hover { background: var(--sb-orange-hi) !important; }
|
||
.sb-start-card { transition: transform .26s cubic-bezier(.3,.8,.3,1); }
|
||
@media (max-width: 900px) { .sb-start-left { border-inline-end: none !important; } }
|
||
@media (max-width: 560px) { .sb-start-left { padding: 30px 22px !important; } }
|
||
/* PWA install pill belongs to the landing page only — hide it inside the chat. */
|
||
body.sb-in-chat #pwa-install-button { display: none !important; }
|
||
/* The online/offline toast is `fixed top-4 left-1/2`, which inside the chat puts it
|
||
squarely on top of the 64px header — it covered the peer name. Drop it below the
|
||
header there, and keep it clear of the notch. It stays where it is on the landing
|
||
page, which has no header of its own to collide with. */
|
||
body.sb-in-chat #pwa-connection-status {
|
||
top: calc(var(--sb-bar-h, 64px) + 12px + var(--sb-safe-top, 0px) + var(--sb-bar-extra, 0px)) !important;
|
||
}
|
||
/* The new design spaces icons with flex gap, not icon margins — neutralise the
|
||
global `button i { margin-inline-end: .5rem }` so icons stay centered in their tiles. */
|
||
.sb-start button i, .sb-ice-overlay button i { margin-inline-end: 0; vertical-align: baseline; }
|