mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-04 17:23:25 +00:00
Merge branch 'dev' into feature/funk
# Conflicts: # frontend/src/config/apps.test.ts # frontend/src/config/apps.ts # frontend/src/stores/phone.ts # frontend/testserver/index.cjs # sky_phone/config/locales/en.lua # sky_phone/source/html/index.html # sky_phone/source/server/db_migrate.lua
This commit is contained in:
DerEchteAlec
@@ -0,0 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="16" y1="8" x2="112" y2="120" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3b82f6"/>
|
||||
<stop offset="0.52" stop-color="#1857d9"/>
|
||||
<stop offset="1" stop-color="#081b55"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="shine" x1="26" y1="18" x2="99" y2="106" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#fff" stop-opacity=".95"/>
|
||||
<stop offset="1" stop-color="#cfe1ff" stop-opacity=".82"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="128" height="128" rx="29" fill="url(#bg)"/>
|
||||
<circle cx="103" cy="22" r="35" fill="#6aa4ff" opacity=".2"/>
|
||||
<path d="M26 52 64 29l38 23v8H26v-8Zm7 15h10v25H33V67Zm21 0h10v25H54V67Zm21 0h10v25H75V67Zm21 0h-1v25h-9V67h10ZM25 98h78v10H25V98Z" fill="url(#shine)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 846 B |
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="18" y1="12" x2="108" y2="116" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9f7aea"/>
|
||||
<stop offset="1" stop-color="#5b21b6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="128" height="128" rx="29" fill="#050507"/>
|
||||
<path d="M24 30c0-8 6-14 14-14h52c8 0 14 6 14 14v42c0 8-6 14-14 14H65L43 105c-3 3-8 1-8-4V86c-6-2-11-7-11-14V30Z" fill="url(#g)"/>
|
||||
<path d="M49 51a15 15 0 0 1 30 0v5h3c3 0 5 2 5 5v14c0 3-2 5-5 5H46c-3 0-5-2-5-5V61c0-3 2-5 5-5h3v-5Zm8 5h14v-5a7 7 0 0 0-14 0v5Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 622 B |
@@ -582,6 +582,418 @@ button {
|
||||
transition-duration: 0.18s;
|
||||
}
|
||||
}
|
||||
|
||||
/* DarkChat is intentionally independent from the phone appearance setting. */
|
||||
.phone-app:has(.darkchat-page),
|
||||
.phone-app:has(.darkchat-page) .phone-app-window,
|
||||
.phone-app:has(.darkchat-page) .phone-app-window__content {
|
||||
background: #000 !important;
|
||||
color-scheme: dark;
|
||||
}
|
||||
.phone-app:has(.darkchat-page) .phone-status-bar {
|
||||
color: #fff !important;
|
||||
--status-bar-color: #fff;
|
||||
}
|
||||
.app-icon--darkchat { background: #050507; }
|
||||
.darkchat-page {
|
||||
--dc-purple: #8b5cf6;
|
||||
--dc-purple-dark: #5b21b6;
|
||||
--dc-blue: #0a84ff;
|
||||
--dc-red: #ff453a;
|
||||
--dc-surface: #1c1c1e;
|
||||
--dc-surface-2: #29292c;
|
||||
--dc-border: #38383a;
|
||||
--dc-muted: #8e8e93;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
color: #f5f5f7;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
|
||||
}
|
||||
.darkchat-page button,
|
||||
.darkchat-page input,
|
||||
.darkchat-page textarea,
|
||||
.darkchat-page select { font: inherit; }
|
||||
.darkchat-page button { color: inherit; }
|
||||
.darkchat-page input,
|
||||
.darkchat-page textarea,
|
||||
.darkchat-page select { color: #f5f5f7; }
|
||||
.darkchat-page button:disabled { opacity: .34; }
|
||||
.darkchat-page button:active:not(:disabled) { transform: scale(.96); }
|
||||
.darkchat-round {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
flex: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid var(--dc-border);
|
||||
border-radius: 50%;
|
||||
background: var(--dc-surface);
|
||||
transition: transform .14s ease, background .2s ease;
|
||||
}
|
||||
.darkchat-round--large { width: 43px; height: 43px; }
|
||||
.darkchat-round.active { background: var(--dc-purple); border-color: var(--dc-purple); }
|
||||
.darkchat-back {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-color: #3a3a3c;
|
||||
background: linear-gradient(145deg, rgb(44 44 46 / 96%), rgb(28 28 30 / 92%));
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 5px 18px rgb(0 0 0 / 42%);
|
||||
color: #fff;
|
||||
line-height: 0;
|
||||
}
|
||||
.darkchat-back svg { display: block; margin: 0; }
|
||||
.darkchat-pill {
|
||||
width: 54px;
|
||||
min-width: 54px;
|
||||
height: 37px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid var(--dc-border);
|
||||
border-radius: 19px;
|
||||
background: var(--dc-surface);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.darkchat-gate {
|
||||
height: 100%;
|
||||
padding: 58px 27px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.darkchat-gate > span:not(.darkchat-loader) {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(145deg, var(--dc-purple), var(--dc-purple-dark));
|
||||
box-shadow: 0 18px 45px rgb(91 33 182 / 40%);
|
||||
}
|
||||
.darkchat-gate h1 { margin: 21px 0 8px; font-size: 27px; }
|
||||
.darkchat-gate p { margin: 0; color: #d1d1d6; font-size: 14px; line-height: 1.45; }
|
||||
.darkchat-gate small { margin-top: 13px; color: var(--dc-muted); font-size: 11px; }
|
||||
.darkchat-loader {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
display: block;
|
||||
border: 3px solid rgb(139 92 246 / 25%);
|
||||
border-top-color: var(--dc-purple);
|
||||
border-radius: 50%;
|
||||
animation: darkchat-spin .7s linear infinite;
|
||||
}
|
||||
.darkchat-loader--small { width: 17px; height: 17px; border-width: 2px; }
|
||||
.darkchat-inbox,
|
||||
.darkchat-sheet-page,
|
||||
.darkchat-thread { height: 100%; padding: 44px 0 25px; box-sizing: border-box; }
|
||||
.darkchat-inbox { display: flex; flex-direction: column; }
|
||||
.darkchat-inbox__header,
|
||||
.darkchat-sheet-page > header,
|
||||
.darkchat-thread__header {
|
||||
height: 62px;
|
||||
padding: 5px 15px 7px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
}
|
||||
.darkchat-inbox__header > strong,
|
||||
.darkchat-sheet-page > header > strong { font-size: 17px; font-weight: 720; letter-spacing: -.2px; }
|
||||
.darkchat-inbox__header > :last-child,
|
||||
.darkchat-sheet-page > header > :last-child { justify-self: end; }
|
||||
.darkchat-security-strip {
|
||||
height: 32px;
|
||||
margin: 0 15px 4px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid rgb(139 92 246 / 20%);
|
||||
border-radius: 9px;
|
||||
background: rgb(139 92 246 / 8%);
|
||||
color: #b9a3ff;
|
||||
font-size: 11px;
|
||||
}
|
||||
.darkchat-security-strip span { flex: 1; }
|
||||
.darkchat-security-strip button { padding: 0; border: 0; background: transparent; color: #b9a3ff; font-size: 10px; }
|
||||
.darkchat-conversations { min-height: 0; flex: 1; padding: 3px 12px 76px; overflow-y: auto; }
|
||||
.darkchat-conversation {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 67px;
|
||||
padding: 8px 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
}
|
||||
.darkchat-conversation::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 59px;
|
||||
height: 1px;
|
||||
background: #262628;
|
||||
}
|
||||
.darkchat-unread {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--dc-purple);
|
||||
box-shadow: 0 0 10px rgb(139 92 246 / 80%);
|
||||
}
|
||||
.darkchat-avatar {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
flex: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgb(255 255 255 / 17%);
|
||||
border-radius: 50%;
|
||||
color: rgb(255 255 255 / 90%);
|
||||
font-size: 23px;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 1px 7px rgb(0 0 0 / 35%);
|
||||
}
|
||||
.darkchat-avatar--small { width: 37px; height: 37px; font-size: 18px; }
|
||||
.darkchat-avatar--header { width: 39px; height: 39px; font-size: 18px; }
|
||||
.darkchat-conversation__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
|
||||
.darkchat-conversation__body > span { display: flex; align-items: center; gap: 4px; }
|
||||
.darkchat-conversation__body strong { min-width: 0; flex: 1; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.darkchat-conversation__body time { color: var(--dc-muted); font-size: 11px; }
|
||||
.darkchat-conversation__body svg { color: #636366; }
|
||||
.darkchat-conversation__body small { overflow: hidden; color: var(--dc-muted); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.darkchat-timer-icon { position: absolute; right: 4px; bottom: 7px; color: #a78bfa; }
|
||||
.darkchat-empty { flex: 1; padding: 15px 40px 80px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
|
||||
.darkchat-empty > span { width: 57px; height: 57px; display: grid; place-items: center; border-radius: 20px; background: var(--dc-surface); color: var(--dc-purple); }
|
||||
.darkchat-empty h2 { margin: 14px 0 5px; font-size: 18px; }
|
||||
.darkchat-empty p { margin: 0; color: var(--dc-muted); font-size: 12px; line-height: 1.4; }
|
||||
.darkchat-inbox__toolbar {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
right: 12px;
|
||||
bottom: 28px;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.darkchat-inbox__toolbar label {
|
||||
height: 43px;
|
||||
padding: 0 13px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--dc-border);
|
||||
border-radius: 23px;
|
||||
background: rgb(28 28 30 / 94%);
|
||||
backdrop-filter: blur(22px);
|
||||
}
|
||||
.darkchat-inbox__toolbar input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; }
|
||||
.darkchat-sheet-page { overflow-y: auto; padding-right: 15px; padding-left: 15px; }
|
||||
.darkchat-sheet-page > header { position: sticky; z-index: 4; top: -1px; margin: 0 -15px; }
|
||||
.darkchat-new-hero { padding: 14px 23px 19px; text-align: center; }
|
||||
.darkchat-new-hero > span { width: 59px; height: 59px; margin: auto; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(145deg, var(--dc-purple), var(--dc-purple-dark)); }
|
||||
.darkchat-new-hero h2 { margin: 12px 0 4px; font-size: 19px; }
|
||||
.darkchat-new-hero p { margin: 0; color: var(--dc-muted); font-size: 11px; line-height: 1.4; }
|
||||
.darkchat-input { margin: 9px 0; padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--dc-border); border-radius: 12px; background: var(--dc-surface); }
|
||||
.darkchat-input span { color: var(--dc-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
|
||||
.darkchat-input input { border: 0; outline: 0; background: transparent; font-size: 13px; }
|
||||
.darkchat-primary,
|
||||
.darkchat-danger {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
margin: 3px 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, var(--dc-purple), var(--dc-purple-dark));
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.darkchat-danger { background: rgb(255 69 58 / 14%); color: var(--dc-red) !important; }
|
||||
.darkchat-sheet-page h3 { margin: 17px 5px 5px; color: var(--dc-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
|
||||
.darkchat-contact-row {
|
||||
width: 100%;
|
||||
min-height: 54px;
|
||||
padding: 7px 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #272729;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
}
|
||||
.darkchat-contact-row > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
|
||||
.darkchat-contact-row strong { font-size: 13px; }
|
||||
.darkchat-contact-row small { color: var(--dc-muted); font-size: 9px; }
|
||||
.darkchat-contact-row svg { color: var(--dc-muted); }
|
||||
.darkchat-qr-card { margin: 18px 0 6px; padding: 15px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; border: 1px solid var(--dc-border); border-radius: 18px; background: var(--dc-surface); }
|
||||
.darkchat-faux-qr { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: #111; }
|
||||
.darkchat-qr-card > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
||||
.darkchat-qr-card > span strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
|
||||
.darkchat-qr-card > span small { color: var(--dc-muted); font-size: 9px; }
|
||||
.darkchat-qr-card > button { grid-column: 1 / -1; height: 35px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; background: rgb(139 92 246 / 16%); color: #c4b5fd; font-size: 11px; }
|
||||
.darkchat-thread { display: flex; flex-direction: column; padding-bottom: 79px; }
|
||||
.darkchat-thread--panel { padding-bottom: 342px; }
|
||||
.darkchat-thread__header { position: relative; flex: none; grid-template-columns: 50px 1fr 50px; }
|
||||
.darkchat-thread__identity { min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; }
|
||||
.darkchat-thread__identity > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
|
||||
.darkchat-thread__identity strong { max-width: 142px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.darkchat-thread__identity small { color: var(--dc-muted); font-size: 10px; }
|
||||
.darkchat-thread__identity svg { color: var(--dc-muted); }
|
||||
.darkchat-thread__meta { height: 25px; flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 1px solid #1b1b1d; color: var(--dc-muted); font-size: 10px; }
|
||||
.darkchat-thread__messages { min-height: 0; padding: 14px 15px 20px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; overflow-y: auto; }
|
||||
.darkchat-day { align-self: center; margin: 5px 0 9px; color: var(--dc-muted); font-size: 11px; font-weight: 600; }
|
||||
.darkchat-system { max-width: 86%; margin: 8px auto; display: flex; align-items: center; gap: 5px; color: var(--dc-muted); font-size: 10px; text-align: center; }
|
||||
.darkchat-message {
|
||||
position: relative;
|
||||
max-width: 86%;
|
||||
padding: 9px 12px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background: var(--dc-surface-2);
|
||||
font-size: 15px;
|
||||
line-height: 1.32;
|
||||
text-align: left;
|
||||
overflow-wrap: anywhere;
|
||||
animation: darkchat-message-in .28s cubic-bezier(.32,.72,0,1) both;
|
||||
}
|
||||
.darkchat-message--sent { align-self: flex-end; background: linear-gradient(145deg, #8b5cf6, #6d28d9); }
|
||||
.darkchat-message--received::before,
|
||||
.darkchat-message--sent::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 11px; }
|
||||
.darkchat-message--received::before { left: -5px; border-bottom-right-radius: 10px; background: var(--dc-surface-2); }
|
||||
.darkchat-message--sent::after { right: -5px; border-bottom-left-radius: 10px; background: #6d28d9; }
|
||||
.darkchat-message > small { align-self: flex-end; color: rgb(255 255 255 / 57%); font-size: 9px; white-space: nowrap; }
|
||||
.darkchat-message--received > small { color: var(--dc-muted); }
|
||||
.darkchat-message--failed { outline: 1px solid var(--dc-red); }
|
||||
.darkchat-message > img,
|
||||
.darkchat-message > video { width: min(228px, 74vw); max-height: 240px; margin: -7px -10px 2px; border-radius: 14px; object-fit: cover; }
|
||||
.darkchat-message > video { background: #000; }
|
||||
.darkchat-reply-preview { padding: 5px 7px; display: flex; align-items: center; gap: 5px; overflow: hidden; border-left: 2px solid #c4b5fd; border-radius: 5px; background: rgb(0 0 0 / 18%); color: rgb(255 255 255 / 72%); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.darkchat-reactions { position: absolute; right: 4px; bottom: -15px; z-index: 2; padding: 1px 5px; border: 2px solid #000; border-radius: 9px; background: #343438; font-size: 9px; white-space: nowrap; }
|
||||
.darkchat-message:has(.darkchat-reactions) { margin-bottom: 12px; }
|
||||
.darkchat-replying { position: absolute; z-index: 6; right: 55px; bottom: 72px; left: 55px; min-height: 39px; padding: 5px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--dc-border); border-radius: 11px; background: rgb(28 28 30 / 96%); color: #c4b5fd; }
|
||||
.darkchat-replying > span { min-width: 0; flex: 1; display: flex; flex-direction: column; }
|
||||
.darkchat-replying small { font-size: 9px; text-transform: uppercase; }
|
||||
.darkchat-replying strong { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.darkchat-replying button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #343438; }
|
||||
.darkchat-composer { position: absolute; z-index: 7; right: 12px; bottom: 28px; left: 12px; display: flex; align-items: flex-end; gap: 8px; }
|
||||
.darkchat-composer > label { min-height: 47px; padding: 7px 7px 7px 14px; flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid var(--dc-border); border-radius: 24px; background: var(--dc-surface); }
|
||||
.darkchat-composer textarea { min-height: 21px; max-height: 76px; min-width: 0; padding: 2px 0; flex: 1; resize: none; border: 0; outline: 0; background: transparent; font-size: 14px; line-height: 19px; }
|
||||
.darkchat-composer label button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #a78bfa; }
|
||||
.darkchat-actions-bubbles { position: absolute; z-index: 8; bottom: 76px; left: 14px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
|
||||
.darkchat-actions-bubbles button { min-height: 40px; padding: 4px 13px 4px 5px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--dc-border); border-radius: 20px; background: var(--dc-surface); font-size: 12px; box-shadow: 0 7px 19px rgb(0 0 0 / 45%); animation: darkchat-bubble-in .23s cubic-bezier(.32,.72,0,1) both; }
|
||||
.darkchat-actions-bubbles button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgb(139 92 246 / 18%); color: #c4b5fd; font-size: 18px; }
|
||||
.darkchat-gif-panel,
|
||||
.darkchat-page .messages-full-emoji-picker { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; height: 285px; border-top: 1px solid var(--dc-border); background: rgb(20 20 22 / 97%); color: #fff; backdrop-filter: blur(25px); }
|
||||
.darkchat-gif-panel > header { height: 37px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.darkchat-gif-panel > header strong { font-size: 13px; }
|
||||
.darkchat-gif-panel > header button { border: 0; background: transparent; color: #a78bfa; font-size: 11px; }
|
||||
.darkchat-gif-panel > label { height: 31px; margin: 0 9px 6px; padding: 0 9px; display: flex; align-items: center; gap: 6px; border-radius: 16px; background: #2c2c2e; color: var(--dc-muted); }
|
||||
.darkchat-gif-panel > label input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 10px; }
|
||||
.darkchat-gif-panel > div { height: 175px; padding: 0 9px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; overflow-y: auto; }
|
||||
.darkchat-gif-panel > div button { min-height: 80px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: #2c2c2e; }
|
||||
.darkchat-gif-panel > div img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.darkchat-load-more { width: calc(100% - 18px); height: 28px; margin: 4px 9px; border: 0; border-radius: 9px; background: #2c2c2e; color: #a78bfa !important; font-size: 10px; }
|
||||
.darkchat-page .messages-full-emoji-picker { animation: darkchat-panel-in .28s cubic-bezier(.32,.72,0,1) both; }
|
||||
.darkchat-page .messages-full-emoji-picker > header button,
|
||||
.darkchat-page .messages-full-emoji-picker__search,
|
||||
.darkchat-page .messages-full-emoji-picker nav button.active { background: #2c2c2e; color: #fff; }
|
||||
.darkchat-page .messages-full-emoji-picker__search input { color: #fff; }
|
||||
.darkchat-page .messages-full-emoji-picker nav { border-color: var(--dc-border); }
|
||||
.darkchat-recorder { position: absolute; z-index: 9; right: 12px; bottom: 28px; left: 12px; height: 43px; padding: 0 7px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--dc-border); border-radius: 22px; background: var(--dc-surface); }
|
||||
.darkchat-recorder > button { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #2c2c2e; }
|
||||
.darkchat-recorder > button:last-child { color: #a78bfa; }
|
||||
.darkchat-recorder > i { width: 7px; height: 7px; border-radius: 50%; background: var(--dc-red); animation: messages-record-pulse 1s ease infinite; }
|
||||
.darkchat-recorder time { font-size: 10px; }
|
||||
.darkchat-recorder > span { height: 26px; min-width: 0; flex: 1; display: flex; align-items: center; justify-content: center; gap: 1px; overflow: hidden; }
|
||||
.darkchat-recorder > span b { width: 2px; flex: none; border-radius: 2px; background: #a78bfa; }
|
||||
.darkchat-voice { min-width: 197px; display: flex; align-items: center; gap: 8px; }
|
||||
.darkchat-voice > button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; flex: none; border: 0; border-radius: 50%; background: rgb(255 255 255 / 17%); }
|
||||
.darkchat-voice > div { min-width: 0; flex: 1; }
|
||||
.darkchat-voice__wave { height: 27px; display: flex; align-items: center; gap: 1px; }
|
||||
.darkchat-voice__wave i { width: 2px; border-radius: 2px; background: rgb(255 255 255 / 38%); }
|
||||
.darkchat-voice__wave i.active { background: #fff; }
|
||||
.darkchat-voice > div small { display: block; font-size: 9px; }
|
||||
.darkchat-voice .darkchat-voice__speed { width: 30px; color: #fff; font-size: 9px; font-weight: 800; }
|
||||
.darkchat-profile-hero { padding: 15px 0 17px; display: flex; align-items: center; flex-direction: column; }
|
||||
.darkchat-profile-hero .darkchat-avatar { width: 67px; height: 67px; font-size: 30px; box-shadow: 0 13px 32px rgb(91 33 182 / 32%); }
|
||||
.darkchat-profile-hero h2 { margin: 10px 0 3px; font-size: 20px; }
|
||||
.darkchat-profile-hero button { padding: 5px 9px; display: flex; align-items: center; gap: 5px; border: 0; border-radius: 11px; background: var(--dc-surface); color: #c4b5fd; font-size: 11px; }
|
||||
.darkchat-profile-hero small { margin-top: 6px; color: var(--dc-muted); font-size: 10px; }
|
||||
.darkchat-settings-group,
|
||||
.darkchat-danger-group { margin: 10px 0; overflow: hidden; border: 1px solid var(--dc-border); border-radius: 13px; background: var(--dc-surface); }
|
||||
.darkchat-settings-group { overflow: visible; }
|
||||
.darkchat-settings-group label,
|
||||
.darkchat-settings-group .darkchat-select,
|
||||
.darkchat-danger-group button { width: 100%; min-height: 50px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border: 0; border-bottom: 1px solid var(--dc-border); background: transparent; font-size: 13px; }
|
||||
.darkchat-settings-group label:last-child,
|
||||
.darkchat-settings-group .darkchat-select:last-child,
|
||||
.darkchat-danger-group button:last-child { border-bottom: 0; }
|
||||
.darkchat-settings-group label > span,
|
||||
.darkchat-settings-group .darkchat-select > span,
|
||||
.darkchat-danger-group button { justify-content: flex-start; }
|
||||
.darkchat-settings-group label > span,
|
||||
.darkchat-settings-group .darkchat-select > span { display: flex; align-items: center; gap: 8px; }
|
||||
.darkchat-settings-group label > span svg,
|
||||
.darkchat-settings-group .darkchat-select > span svg { color: #a78bfa; }
|
||||
.darkchat-settings-group input[type="checkbox"] { width: 36px; height: 21px; accent-color: var(--dc-purple); }
|
||||
.darkchat-select { position: relative; z-index: 2; }
|
||||
.darkchat-danger-group button { color: var(--dc-red); text-align: left; }
|
||||
.darkchat-save { padding: 7px; border: 0; background: transparent; color: #a78bfa !important; font-size: 13px; }
|
||||
.darkchat-privacy-note { margin: 14px 4px 4px; display: flex; align-items: flex-start; gap: 7px; color: var(--dc-muted); font-size: 11px; line-height: 1.45; }
|
||||
.darkchat-privacy-note svg { flex: none; color: #a78bfa; }
|
||||
.darkchat-modal-backdrop { position: absolute; z-index: 40; inset: 0; padding: 44px 18px 27px; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 67%); backdrop-filter: blur(10px); }
|
||||
.darkchat-modal,
|
||||
.darkchat-message-menu { width: 100%; padding: 17px; display: flex; align-items: stretch; flex-direction: column; border: 1px solid var(--dc-border); border-radius: 21px; background: rgb(28 28 30 / 98%); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: darkchat-modal-in .3s cubic-bezier(.32,.72,0,1) both; }
|
||||
.darkchat-modal { text-align: center; }
|
||||
.darkchat-modal__icon { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border-radius: 17px; background: rgb(139 92 246 / 16%); color: #a78bfa; }
|
||||
.darkchat-modal__icon--danger { background: rgb(255 69 58 / 14%); color: var(--dc-red); }
|
||||
.darkchat-modal h2 { margin: 11px 0 6px; font-size: 18px; }
|
||||
.darkchat-modal p { margin: 0 0 10px; color: var(--dc-muted); font-size: 12px; line-height: 1.45; }
|
||||
.darkchat-modal > strong { margin-bottom: 12px; color: #c4b5fd; font-size: 12px; }
|
||||
.darkchat-modal > button:not(.darkchat-primary):not(.darkchat-danger) { min-height: 40px; border: 0; background: transparent; color: var(--dc-muted); font-size: 13px; }
|
||||
.darkchat-modal select,
|
||||
.darkchat-modal textarea { margin-bottom: 8px; padding: 9px; border: 1px solid var(--dc-border); border-radius: 10px; outline: 0; background: #2c2c2e; font-size: 11px; }
|
||||
.darkchat-report-select { width: 100%; margin-bottom: 8px; }
|
||||
.darkchat-report-select .darkchat-choice__trigger,
|
||||
.darkchat-report-select .darkchat-choice__menu { width: 100%; }
|
||||
.darkchat-modal textarea { min-height: 65px; resize: none; }
|
||||
.darkchat-message-menu { padding: 7px; }
|
||||
.darkchat-message-menu > button { min-height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--dc-border); background: transparent; font-size: 13px; text-align: left; }
|
||||
.darkchat-message-menu > button:last-child { justify-content: center; border-bottom: 0; color: var(--dc-muted); }
|
||||
.darkchat-message-menu > button.danger { color: var(--dc-red); }
|
||||
.darkchat-reaction-row { margin: -30px 4px 8px; padding: 8px 5px; display: flex; justify-content: space-around; border: 1px solid var(--dc-border); border-radius: 20px; background: #2c2c2e; box-shadow: 0 7px 20px rgb(0 0 0 / 35%); }
|
||||
.darkchat-reaction-row button { width: 34px; height: 31px; padding: 0; border: 0; border-radius: 13px; background: transparent; font-size: 18px; }
|
||||
.darkchat-toast { position: absolute; z-index: 60; bottom: 95px; left: 50%; max-width: 80%; padding: 8px 13px; transform: translateX(-50%); border: 1px solid var(--dc-border); border-radius: 14px; background: rgb(44 44 46 / 96%); box-shadow: 0 8px 30px rgb(0 0 0 / 45%); font-size: 10px; text-align: center; }
|
||||
.darkchat-toast-enter-active,
|
||||
.darkchat-toast-leave-active { transition: opacity .2s ease, transform .2s ease; }
|
||||
.darkchat-toast-enter-from,
|
||||
.darkchat-toast-leave-to { opacity: 0; transform: translate(-50%, 8px); }
|
||||
@keyframes darkchat-spin { to { transform: rotate(360deg); } }
|
||||
@keyframes darkchat-message-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }
|
||||
@keyframes darkchat-bubble-in { from { opacity: 0; transform: translate(-8px, 6px) scale(.8); } }
|
||||
@keyframes darkchat-panel-in { from { transform: translateY(100%); } }
|
||||
@keyframes darkchat-modal-in { from { opacity: 0; transform: translateY(18px) scale(.92); } }
|
||||
.springboard-track {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -605,6 +1017,15 @@ button {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 28px 15px;
|
||||
}
|
||||
.app-grid-slot {
|
||||
min-height: 73px;
|
||||
}
|
||||
.app-icon-item {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.app-icon-button {
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
@@ -618,6 +1039,52 @@ button {
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 4px #000b;
|
||||
}
|
||||
.app-icon-item--dragging {
|
||||
z-index: 20;
|
||||
opacity: 0.35;
|
||||
}
|
||||
.app-icon-remove {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: -8px;
|
||||
left: 1px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
color: black;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
text-shadow: none;
|
||||
}
|
||||
.app-icon-remove__badge {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
min-width: 22px;
|
||||
min-height: 22px;
|
||||
padding: 0;
|
||||
border: 1px solid #ffffff73;
|
||||
box-shadow: 0 1px 4px #0009;
|
||||
}
|
||||
.app-icon-item--editing:not(.app-icon-item--dragging) {
|
||||
animation: app-icon-wobble 0.15s ease-in-out infinite alternate;
|
||||
transform-origin: 50% 45%;
|
||||
}
|
||||
.app-icon-item--editing:nth-child(even):not(.app-icon-item--dragging) {
|
||||
animation-direction: alternate-reverse;
|
||||
animation-delay: -0.075s;
|
||||
}
|
||||
@keyframes app-icon-wobble {
|
||||
from {
|
||||
transform: rotate(-1.5deg) translateY(-0.4px);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1.5deg) translateY(0.4px);
|
||||
}
|
||||
}
|
||||
.app-icon-anchor {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
@@ -697,8 +1164,8 @@ button {
|
||||
right: 15px;
|
||||
height: 82px;
|
||||
padding: 13px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border: 1px solid #ffffff28;
|
||||
border-radius: 27px;
|
||||
background: #ffffff22;
|
||||
@@ -708,6 +1175,39 @@ button {
|
||||
backdrop-filter: blur(24px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(150%);
|
||||
}
|
||||
.app-dock-slot {
|
||||
min-width: 0;
|
||||
height: 56px;
|
||||
}
|
||||
.springboard-edit-done {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
top: 45px;
|
||||
right: 18px;
|
||||
min-width: 51px;
|
||||
min-height: 30px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid #ffffff38;
|
||||
border-radius: 999px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 3px #000a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.edit-done-enter-active,
|
||||
.edit-done-leave-active {
|
||||
transition:
|
||||
opacity 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
.edit-done-enter-from,
|
||||
.edit-done-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.88);
|
||||
}
|
||||
.page-indicator {
|
||||
position: absolute;
|
||||
bottom: 132px;
|
||||
@@ -1014,6 +1514,11 @@ button {
|
||||
height: 44px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.app-icon-item--editing:not(.app-icon-item--dragging) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
.app-library-group .app-icon-button--compact .app-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
@@ -1158,15 +1663,416 @@ button {
|
||||
linear-gradient(165deg, #7897b5 0%, #536d8b 48%, #283c58 100%);
|
||||
}
|
||||
.weather-navbar {
|
||||
--k-safe-area-top: 46px;
|
||||
--tw-bg-opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 46px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: transparent !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Banking */
|
||||
.banking-app {
|
||||
--bank-blue: #2d76ff;
|
||||
--bank-cyan: #57d5ff;
|
||||
--bank-green: #4ee6a4;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 92% 4%, rgb(45 118 255 / 28%), transparent 32%),
|
||||
linear-gradient(160deg, #0c1834 0%, #080d1d 44%, #050710 100%) !important;
|
||||
color: #fff;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.banking-app::before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgb(255 255 255 / 2.4%) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgb(255 255 255 / 2.4%) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
content: '';
|
||||
mask-image: linear-gradient(to bottom, #000, transparent 66%);
|
||||
}
|
||||
|
||||
.banking-app__aurora {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
top: 160px;
|
||||
left: -145px;
|
||||
border-radius: 50%;
|
||||
background: #215dea;
|
||||
filter: blur(78px);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.banking-navbar {
|
||||
--k-safe-area-top: 46px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banking-scroll {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 108px 17px 112px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.banking-scroll::-webkit-scrollbar { display: none; }
|
||||
|
||||
.banking-pull-refresh {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 78px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
opacity 0.16s ease,
|
||||
transform 0.16s ease;
|
||||
}
|
||||
|
||||
.banking-pull-refresh.is-visible { opacity: 1; }
|
||||
|
||||
.banking-loading,
|
||||
.banking-empty {
|
||||
position: absolute;
|
||||
inset: 100px 24px 82px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
color: rgb(226 235 255 / 72%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banking-empty p {
|
||||
margin: 0 0 8px;
|
||||
color: rgb(208 220 248 / 58%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banking-balance {
|
||||
padding: 22px 20px 20px;
|
||||
border-radius: 27px;
|
||||
}
|
||||
|
||||
.banking-balance__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: rgb(226 235 255 / 67%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.banking-balance__label small {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
border-radius: 99px;
|
||||
background: rgb(0 0 0 / 12%);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.banking-balance > strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
|
||||
.banking-balance__trend {
|
||||
margin-top: 8px;
|
||||
color: rgb(208 220 248 / 57%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.banking-balance__trend span {
|
||||
margin-right: 4px;
|
||||
color: var(--bank-green);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.banking-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 9px;
|
||||
margin: 13px 0 18px;
|
||||
}
|
||||
|
||||
.banking-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 64px;
|
||||
padding: 11px 12px;
|
||||
border-radius: 19px;
|
||||
color: rgb(237 243 255 / 82%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.banking-action__icon {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
background: linear-gradient(145deg, rgb(60 129 255 / 34%), rgb(25 54 115 / 25%));
|
||||
color: #8fb8ff;
|
||||
}
|
||||
|
||||
.banking-action b {
|
||||
font-size: 11px;
|
||||
font-weight: 610;
|
||||
}
|
||||
|
||||
.banking-action--primary {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-start;
|
||||
min-height: 58px;
|
||||
padding: 10px 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banking-action--primary .banking-action__icon {
|
||||
background: rgb(255 255 255 / 15%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banking-action--primary svg:last-child {
|
||||
margin-left: auto;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.banking-action--secondary {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.banking-card {
|
||||
margin: 0 0 18px !important;
|
||||
}
|
||||
|
||||
.banking-transaction-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banking-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.banking-section-title h2 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 630;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.banking-section-title > svg { color: rgb(220 232 255 / 43%); }
|
||||
|
||||
.banking-section-title button {
|
||||
color: #7ca8ff;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.banking-account-list,
|
||||
.banking-transaction-list {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.banking-transactions { padding: 0 3px; }
|
||||
.banking-transactions--all { margin-top: 18px; }
|
||||
|
||||
.banking-transaction-list b {
|
||||
flex: 0 0 auto;
|
||||
color: #f2a0a8;
|
||||
font-size: 11px;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.banking-transaction-list b.is-incoming { color: var(--bank-green); }
|
||||
|
||||
.banking-no-transactions {
|
||||
padding: 24px 12px;
|
||||
border: 1px solid rgb(255 255 255 / 8%);
|
||||
border-radius: 22px;
|
||||
background: rgb(255 255 255 / 3%);
|
||||
color: rgb(213 225 248 / 47%);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banking-activity-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 16px 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banking-activity-hero span {
|
||||
color: rgb(214 225 250 / 55%);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.banking-activity-hero strong {
|
||||
margin: 5px 0;
|
||||
color: var(--bank-green);
|
||||
font-size: 31px;
|
||||
font-weight: 590;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
|
||||
.banking-activity-hero small {
|
||||
color: rgb(214 225 250 / 38%);
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.banking-chart-card { padding: 18px 14px 15px !important; }
|
||||
|
||||
.banking-chart-legend {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
color: rgb(218 229 251 / 50%);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.banking-chart-legend span { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
.banking-chart-legend i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #58647f;
|
||||
}
|
||||
|
||||
.banking-chart-legend i.is-incoming { background: var(--bank-blue); }
|
||||
|
||||
.banking-chart {
|
||||
display: grid;
|
||||
height: 145px;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 5px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.banking-chart__day {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.banking-chart__day > div {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 116px;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.banking-chart__day i {
|
||||
width: 7px;
|
||||
min-height: 5px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(to top, #343e57, #65718d);
|
||||
transition: height 0.35s ease;
|
||||
}
|
||||
|
||||
.banking-chart__day i.is-incoming {
|
||||
background: linear-gradient(to top, #1d55d8, #3d87ff);
|
||||
box-shadow: 0 0 14px rgb(45 118 255 / 33%);
|
||||
}
|
||||
|
||||
.banking-chart__day span {
|
||||
color: rgb(217 227 249 / 45%);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.banking-sheet__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 22px 18px 18px;
|
||||
}
|
||||
|
||||
.banking-modal__close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
display: grid;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
color: rgb(226 235 255 / 65%);
|
||||
}
|
||||
|
||||
.banking-modal__icon {
|
||||
display: grid;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
place-items: center;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(145deg, #3c83ff, #1849b6);
|
||||
box-shadow: 0 12px 28px rgb(22 76 196 / 36%), inset 0 1px rgb(255 255 255 / 28%);
|
||||
}
|
||||
|
||||
.banking-sheet__content h2 {
|
||||
margin: 14px 0 4px;
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.banking-sheet__content > p {
|
||||
margin: 0 0 15px;
|
||||
color: rgb(213 225 248 / 52%);
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.banking-form-list { margin: 12px 0 0 !important; }
|
||||
|
||||
.banking-sheet__content .banking-form-error {
|
||||
margin: 10px 3px 0;
|
||||
color: #ff8b98;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.banking-sheet__content > button:last-child { margin-top: 15px; }
|
||||
|
||||
.banking-sheet__content > button:last-child > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.weather-navbar::after {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1914,13 +2820,21 @@ button {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.reference-store {
|
||||
padding: 0 0 79px;
|
||||
background: #0e0e0e;
|
||||
.app-store-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 44px 0 24px;
|
||||
background: #020202;
|
||||
color: #fff;
|
||||
}
|
||||
.phone-app--light .app-store-page {
|
||||
background: #f2f2f7;
|
||||
color: #000;
|
||||
}
|
||||
.store-scroll {
|
||||
height: 100%;
|
||||
padding: 52px 19px 26px;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
padding: 0 19px 26px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.store-title {
|
||||
@@ -2034,7 +2948,7 @@ button {
|
||||
.reference-store .store-feature {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.reference-store .store-list {
|
||||
.app-store-page .store-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user