63 lines
1.7 KiB
CSS
63 lines
1.7 KiB
CSS
:root{
|
|
--ink:#0b0b0c;
|
|
--line: rgba(11,11,12,.08);
|
|
--shadow: 0 18px 48px rgba(11,11,12,.10);
|
|
--shadow2: 0 10px 26px rgba(11,11,12,.10);
|
|
/* premium blue theme */
|
|
--blue:#2563eb;
|
|
--blue2:#60a5fa;
|
|
--ice:#eef6ff;
|
|
}
|
|
html, body { height: 100%; }
|
|
body{
|
|
font-family: 'Inter', sans-serif;
|
|
color: var(--ink);
|
|
background: radial-gradient(1400px 760px at 20% 10%, rgba(96,165,250,.28), rgba(255,255,255,0) 60%), radial-gradient(1200px 640px at 90% 20%, rgba(37,99,235,.20), rgba(255,255,255,0) 55%), linear-gradient(180deg, #f6fbff 0%, #ffffff 55%, #f7fbff 100%);
|
|
}
|
|
.appShell{
|
|
border-radius: 30px;
|
|
background: rgba(255,255,255,.80);
|
|
border: 1px solid rgba(11,11,12,.08);
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(10px);
|
|
overflow: hidden;
|
|
}
|
|
.card{
|
|
background: rgba(255,255,255,.92);
|
|
border: 1px solid rgba(11,11,12,.06);
|
|
border-radius: 18px;
|
|
box-shadow: var(--shadow2);
|
|
}
|
|
.chip{
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,.85);
|
|
border: 1px solid rgba(11,11,12,.08);
|
|
}
|
|
.btn{
|
|
border-radius: 14px;
|
|
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
|
|
}
|
|
.btn:hover{
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow2);
|
|
}
|
|
.softInput{
|
|
background: rgba(255,255,255,.92);
|
|
border: 1px solid rgba(11,11,12,.10);
|
|
border-radius: 18px;
|
|
padding: 10px 40px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
.softInput:focus{
|
|
border-color: rgba(37,99,235,.35);
|
|
box-shadow: 0 0 0 4px rgba(37,99,235,.10);
|
|
}
|
|
.divider{
|
|
border-color: rgba(11,11,12,.10);
|
|
}
|
|
/* Mobile sidebar behavior */
|
|
.sidebarHidden {
|
|
display: none;
|
|
} |