Spaces:
Running
Running
File size: 1,543 Bytes
4633f70 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | .appheader {
position: sticky;
top: 0;
z-index: 40;
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(16px, 4vw, 32px);
background: color-mix(in srgb, var(--bg) 78%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid var(--hairline);
}
.appheader__brand {
display: inline-flex;
align-items: center;
gap: 10px;
background: none;
border: none;
padding: 6px 0;
}
.appheader__mark {
width: 26px;
height: 26px;
border-radius: 7px;
background: var(--accent-gradient);
display: grid;
place-items: center;
box-shadow: var(--glow-accent);
}
.appheader__mark-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.appheader__name {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.appheader__name-accent {
color: var(--accent-b);
}
.appheader__right {
display: flex;
align-items: center;
gap: 12px;
}
.appheader__theme {
width: 38px;
height: 38px;
border-radius: var(--r-control);
border: 1px solid var(--hairline-strong);
background: var(--panel-elevated);
color: var(--text-dim);
font-size: 16px;
display: grid;
place-items: center;
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.appheader__theme:hover {
color: var(--text);
border-color: var(--accent-a);
}
|