공통 베이스 스타일 구조 도입
This commit is contained in:
hyunho
@@ -1,8 +1,4 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f1f5f9;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
color: #1e293b;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -29,23 +25,23 @@ body {
|
||||
.dept-box {
|
||||
width: fit-content;
|
||||
min-width: 320px;
|
||||
background: white;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-soft);
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.dept-header {
|
||||
background: #1e293b;
|
||||
background: var(--color-header);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.dept-header.has-members {
|
||||
@@ -73,11 +69,11 @@ body {
|
||||
.box {
|
||||
width: fit-content;
|
||||
min-width: 112px;
|
||||
background: white;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--shadow-soft);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-bottom: 40px;
|
||||
@@ -86,9 +82,9 @@ body {
|
||||
.box-name {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #475569;
|
||||
color: var(--color-text-soft);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--color-bg);
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 6px;
|
||||
word-break: keep-all;
|
||||
@@ -99,7 +95,7 @@ body {
|
||||
}
|
||||
|
||||
.box-level-그룹 .box-name {
|
||||
background: #3f516a;
|
||||
background: var(--color-header-soft);
|
||||
color: #ffffff;
|
||||
padding: 8px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
@@ -112,7 +108,7 @@ body {
|
||||
}
|
||||
|
||||
.box-level-디비전 .box-name {
|
||||
background: #869fb7;
|
||||
background: #7b93ab;
|
||||
color: #ffffff;
|
||||
padding: 8px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
@@ -140,8 +136,8 @@ body {
|
||||
|
||||
.cell-label {
|
||||
grid-column: span 1;
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
background: var(--color-surface-strong);
|
||||
color: var(--color-text-soft);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
@@ -163,7 +159,7 @@ body {
|
||||
border-radius: 4px;
|
||||
font-size: 11.5px;
|
||||
text-align: left;
|
||||
border: 1px solid #f1f5f9;
|
||||
border: 1px solid var(--color-bg);
|
||||
border-left: 4px solid #94a3b8;
|
||||
background: #f8fafc;
|
||||
cursor: pointer;
|
||||
@@ -178,8 +174,8 @@ body {
|
||||
}
|
||||
|
||||
.member-card:hover {
|
||||
background: white;
|
||||
border-color: #4f46e5;
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
|
||||
transform: translateY(-2px);
|
||||
z-index: 50;
|
||||
@@ -192,7 +188,7 @@ body {
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #4f46e5;
|
||||
background: var(--color-accent);
|
||||
border-radius: 4px;
|
||||
z-index: 20;
|
||||
}
|
||||
@@ -204,7 +200,7 @@ body {
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #4f46e5;
|
||||
background: var(--color-accent);
|
||||
border-radius: 4px;
|
||||
z-index: 20;
|
||||
}
|
||||
@@ -577,11 +573,11 @@ body {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
left: 25px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12px;
|
||||
background: var(--color-surface-soft);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 18px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: var(--shadow-soft);
|
||||
border: 1px solid var(--color-border-soft);
|
||||
z-index: 1010;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -596,12 +592,12 @@ body {
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--color-text);
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: #64748b;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -611,11 +607,11 @@ body {
|
||||
top: 18px;
|
||||
right: 25px;
|
||||
width: 400px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12px;
|
||||
background: var(--color-surface-soft);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: var(--shadow-soft);
|
||||
border: 1px solid var(--color-border-soft);
|
||||
z-index: 1010;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s;
|
||||
@@ -633,7 +629,7 @@ body {
|
||||
|
||||
.stats-table th {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 800;
|
||||
padding: 8px 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
@@ -645,12 +641,12 @@ body {
|
||||
border: 1px solid #e2e8f0;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.stats-table .row-label {
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
color: var(--color-text-soft);
|
||||
font-weight: 800;
|
||||
width: 80px;
|
||||
}
|
||||
@@ -667,7 +663,7 @@ body {
|
||||
|
||||
.sum-row td {
|
||||
font-weight: 900 !important;
|
||||
color: #0f172a !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
@keyframes target-pulse {
|
||||
@@ -690,15 +686,15 @@ body {
|
||||
z-index: 5001;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: var(--color-surface-soft);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--color-border-soft);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-soft);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -726,8 +722,8 @@ body {
|
||||
}
|
||||
|
||||
.admin-mode-btn.is-admin {
|
||||
background: #4f46e5;
|
||||
border-color: #4f46e5;
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user