ncue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten header quick login layout

Browse Source 
Shrink SNS circular buttons, move '간편로그인' label to the left, and hide the user/status badge until authenticated.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dsyoon
2026-02-07 18:17:21 +09:00
parent e6a8e23217
commit 3370ca562e
3 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
styles.css
View File

@@ -182,34 +182,34 @@ html[data-theme="light"] .topbar {
.sns-login {
display: inline-flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 18px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03);
padding: 0;
border-radius: 12px;
border: 0;
background: transparent;
}
.sns-row {
display: inline-flex;
align-items: center;
gap: 14px;
gap: 10px;
}
.sns-label {
font-size: 15px;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
color: var(--muted2);
white-space: nowrap;
}
.sns-btn {
width: 56px;
height: 56px;
width: 36px;
height: 36px;
border-radius: 999px;
border: 2px solid rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.10);
display: grid;
place-items: center;
cursor: pointer;
@@ -244,7 +244,7 @@ html[data-theme="light"] .topbar {
.sns-letter {
font-weight: 900;
font-size: 24px;
font-size: 16px;
color: #fff;
letter-spacing: -0.02em;
}
@@ -255,21 +255,21 @@ html[data-theme="light"] .topbar {
}
.sns-kakao-bubble {
width: 20px;
height: 16px;
width: 14px;
height: 11px;
background: rgba(0, 0, 0, 0.82);
border-radius: 8px;
border-radius: 6px;
position: relative;
}
.sns-kakao-bubble::after {
content: "";
position: absolute;
bottom: -5px;
left: 6px;
bottom: -4px;
left: 4px;
width: 0;
height: 0;
border: 5px solid transparent;
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.82);
}
@@ -280,7 +280,7 @@ html[data-theme="light"] .topbar {
.sns-google-g {
font-weight: 900;
font-size: 24px;
font-size: 16px;
background: conic-gradient(from 210deg, #ea4335 0 25%, #fbbc05 25% 50%, #34a853 50% 75%, #4285f4 75% 100%);
-webkit-background-clip: text;
background-clip: text;