admin
9deb320cf6
Rename the global Sidebar route, UI, assets, analytics, and payment return context to Profile. Add accessible message-avatar navigation and preserve the source character across auth and logout flows. BREAKING CHANGE: /sidebar has been removed; use /profile instead.
241 lines
4.9 KiB
CSS
241 lines
4.9 KiB
CSS
.shell {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--page-section-gap, 14px);
|
|
overflow: hidden;
|
|
min-height: var(--app-viewport-height, 100dvh);
|
|
box-sizing: border-box;
|
|
padding:
|
|
var(--app-safe-top, 0px)
|
|
calc(var(--page-padding-x, 28px) + var(--app-safe-right, 0px))
|
|
calc(var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px))
|
|
calc(var(--page-padding-x, 28px) + var(--app-safe-left, 0px));
|
|
background:
|
|
radial-gradient(circle at 18% 6%, rgba(255, 206, 160, 0.22), transparent 28%),
|
|
radial-gradient(circle at 92% 0%, rgba(246, 87, 160, 0.22), transparent 30%),
|
|
linear-gradient(180deg, #fcf3f4 0%, #fffafa 44%, #ffffff 100%);
|
|
color: #191316;
|
|
}
|
|
|
|
.bgOrbOne,
|
|
.bgOrbTwo {
|
|
position: absolute;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
border-radius: 999px;
|
|
filter: blur(4px);
|
|
}
|
|
|
|
.bgOrbOne {
|
|
top: clamp(72px, 15.926vw, 86px);
|
|
right: clamp(-72px, -13.333vw, -58px);
|
|
width: clamp(140px, 31.111vw, 168px);
|
|
height: clamp(140px, 31.111vw, 168px);
|
|
background: rgba(246, 87, 160, 0.11);
|
|
}
|
|
|
|
.bgOrbTwo {
|
|
bottom: clamp(46px, 10.37vw, 56px);
|
|
left: clamp(-88px, -16.296vw, -70px);
|
|
width: clamp(148px, 33.333vw, 180px);
|
|
height: clamp(148px, 33.333vw, 180px);
|
|
background: rgba(248, 184, 62, 0.1);
|
|
}
|
|
|
|
.topBar,
|
|
.userSlot,
|
|
.cardSlot,
|
|
.settingsSlot {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.topBar {
|
|
margin: var(--page-padding-y, 18px) 0 -2px;
|
|
}
|
|
|
|
.userSlot {
|
|
padding: var(--responsive-card-padding, 18px);
|
|
border: 1px solid rgba(25, 19, 22, 0.06);
|
|
border-radius: var(--responsive-card-radius, 26px);
|
|
background: rgba(255, 255, 255, 0.84);
|
|
box-shadow: 0 16px 40px rgba(55, 36, 44, 0.08);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.cardSlot {
|
|
padding: 0;
|
|
}
|
|
|
|
.settingsSlot {
|
|
margin-top: 2px;
|
|
padding: 2px 0 0;
|
|
}
|
|
|
|
.settingsLabel {
|
|
margin: 0 0 clamp(7px, 1.667vw, 9px);
|
|
padding: 0 clamp(3px, 0.741vw, 4px);
|
|
color: #817076;
|
|
font-size: var(--responsive-caption, 13px);
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.settingsActions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(10px, 2.222vw, 12px);
|
|
}
|
|
|
|
.logoutCard {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: var(--spacing-md, 12px);
|
|
box-sizing: border-box;
|
|
padding: var(--responsive-card-padding, 16px);
|
|
border: 1px solid rgba(25, 19, 22, 0.06);
|
|
border-radius: var(--responsive-card-radius-sm, 22px);
|
|
background: rgba(255, 255, 255, 0.86);
|
|
color: #171114;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
text-align: left;
|
|
box-shadow: 0 12px 30px rgba(55, 36, 44, 0.06);
|
|
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
|
|
}
|
|
|
|
.installCard {
|
|
border-color: rgba(246, 87, 160, 0.14);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.feedbackCard {
|
|
border-color: rgba(208, 150, 91, 0.16);
|
|
background: rgba(255, 253, 250, 0.92);
|
|
}
|
|
|
|
.logoutCard:hover {
|
|
background: #ffffff;
|
|
box-shadow: 0 16px 34px rgba(55, 36, 44, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.logoutCard:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.logoutCard:focus-visible {
|
|
outline: 2px solid #f657a0;
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.logoutIcon {
|
|
display: inline-flex;
|
|
width: var(--responsive-icon-button-size, 40px);
|
|
height: var(--responsive-icon-button-size, 40px);
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: clamp(13px, 2.778vw, 15px);
|
|
background: rgba(255, 107, 107, 0.1);
|
|
color: #ef4d64;
|
|
}
|
|
|
|
.installIcon {
|
|
background: rgba(246, 87, 160, 0.12);
|
|
color: #f657a0;
|
|
}
|
|
|
|
.feedbackIcon {
|
|
background: rgba(208, 150, 91, 0.13);
|
|
color: #b8783f;
|
|
}
|
|
|
|
.logoutText {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.logoutTitle {
|
|
color: #ef4d64;
|
|
font-size: var(--responsive-body, 16px);
|
|
font-weight: 760;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.installTitle {
|
|
color: #171114;
|
|
font-size: var(--responsive-body, 16px);
|
|
font-weight: 760;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.feedbackTitle {
|
|
color: #171114;
|
|
font-size: var(--responsive-body, 16px);
|
|
font-weight: 760;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.logoutSubtitle {
|
|
color: #817076;
|
|
font-size: var(--responsive-caption, 13px);
|
|
font-weight: 620;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.installSubtitle {
|
|
color: #817076;
|
|
font-size: var(--responsive-caption, 13px);
|
|
font-weight: 620;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.revealOne,
|
|
.revealTwo,
|
|
.revealThree {
|
|
animation: revealUp 0.42s ease both;
|
|
}
|
|
|
|
.revealOne {
|
|
animation-delay: 40ms;
|
|
}
|
|
|
|
.revealTwo {
|
|
animation-delay: 95ms;
|
|
}
|
|
|
|
.revealThree {
|
|
animation-delay: 150ms;
|
|
}
|
|
|
|
@keyframes revealUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.shell {
|
|
gap: var(--page-section-gap, 12px);
|
|
padding-right: calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px));
|
|
padding-left: calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
|
|
}
|
|
|
|
.userSlot {
|
|
padding: var(--responsive-card-padding, 16px);
|
|
border-radius: var(--responsive-card-radius-sm, 22px);
|
|
}
|
|
}
|