Skip to content

Commit 740937a

Browse files
Danto7632Danto7632
committed
디자인 및 색상 통합
1 parent efc7bfe commit 740937a

22 files changed

Lines changed: 378 additions & 258 deletions

‎src/components/codecast/Codecast.css‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
.broadcast-icon {
1717
font-size: 48px;
18-
color: #7a52c6;
18+
color: var(--accent-primary);
1919
}
2020

2121
.broadcast-header h2 {
@@ -68,7 +68,7 @@
6868
}
6969

7070
.input-group button {
71-
background-color: #a78bfa;
71+
background-color: var(--accent-primary);
7272
color: white;
7373
border: none;
7474
padding: 10px 16px;
@@ -78,6 +78,11 @@
7878
align-items: center;
7979
gap: 6px;
8080
font-weight: bold;
81+
transition: background-color 0.2s ease;
82+
}
83+
84+
.input-group button:hover {
85+
background-color: var(--accent-hover);
8186
}
8287

8388
.error-text {
@@ -92,17 +97,18 @@
9297
border: none;
9398
padding: 10px 16px;
9499
border-radius: 8px;
95-
background-color: #7a52c6;
100+
background-color: var(--accent-secondary);
96101
display: flex;
97102
justify-content: center;
98103
gap: 6px;
99104
font-weight: bold;
100105
text-decoration: none;
101106
font-size: 15px;
107+
transition: background-color 0.2s ease;
102108
}
103109

104110
.start-btn:hover {
105-
background-color: #6b42bb;
111+
background-color: var(--accent-hover);
106112
}
107113

108114
.hr-with-text {
@@ -165,7 +171,7 @@
165171

166172
/* 🌙 아이콘 */
167173
.dark-mode .broadcast-icon {
168-
color: #6a0dad;
174+
color: var(--accent-primary);
169175
}
170176

171177
/* 🌙 설명 텍스트 */
@@ -194,22 +200,22 @@
194200

195201
/* 🌙 참여 버튼 */
196202
.dark-mode .input-group button {
197-
background-color: #6a0dad;
203+
background-color: var(--accent-secondary);
198204
color: white;
199205
}
200206

201207
.dark-mode .input-group button:hover {
202-
background-color: #5a0099;
208+
background-color: var(--accent-hover);
203209
}
204210

205211
/* 🌙 새 방송 시작 버튼 */
206212
.dark-mode .start-btn {
207-
background-color: #6a0dad;
213+
background-color: var(--accent-secondary);
208214
color: white;
209215
}
210216

211217
.dark-mode .start-btn:hover {
212-
background-color: #5a0099;
218+
background-color: var(--accent-hover);
213219
}
214220

215221
/* 🌙 구분선 */

‎src/components/codecast/codecastlive/ChatPanel.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,14 @@
6262
border: none;
6363
border-radius: 8px;
6464
padding: 0 14px;
65-
background: #6f42c1;
65+
background: var(--accent-secondary);
6666
color: #fff;
6767
cursor: pointer;
68+
transition: background-color 0.2s ease;
69+
}
70+
71+
.chat-input .send-btn:hover {
72+
background: var(--accent-hover);
6873
}
6974

7075
/* 다크 모드 */
@@ -99,5 +104,5 @@
99104
border-color: #2f2f40;
100105
}
101106
.dark-mode .chat-input .send-btn {
102-
background: #6a0dad;
107+
background: var(--accent-secondary);
103108
}

‎src/components/codecast/codecastlive/CodeEditor.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
/* 실행 버튼 */
4646
.run-button {
47-
background-color: #6a0dad;
47+
background-color: var(--accent-secondary);
4848
color: white;
4949
border: none;
5050
padding: 6px 12px;
@@ -56,7 +56,7 @@
5656
gap: 6px;
5757
transition: background-color 0.2s ease;
5858
}
59-
.run-button:hover { background-color: #8844dd; }
59+
.run-button:hover { background-color: var(--accent-hover); }
6060

6161
/* 시각화 버튼 */
6262
.viz-button {
@@ -74,8 +74,8 @@
7474
}
7575
.viz-button:hover {
7676
background-color: #ece9f7;
77-
border-color: #d7c7ff;
78-
color: #4f2aa3;
77+
border-color: var(--accent-primary);
78+
color: var(--accent-primary);
7979
}
8080

8181
/* ✅ [수정된 부분] 파일 선택 버튼 크기 조정 */
@@ -148,6 +148,6 @@
148148
}
149149
.dark-mode .viz-button:hover {
150150
background-color: #34343f;
151-
border-color: #6a0dad;
152-
color: #c9a7ff;
151+
border-color: var(--accent-primary);
152+
color: var(--accent-primary);
153153
}

‎src/components/codecast/codecastlive/CodePreviewList.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
.preview-card:hover {
2727
transform: translateY(-1px);
2828
box-shadow: 0 6px 14px rgba(0,0,0,0.08);
29-
border-color: #d7d7ec;
29+
border-color: var(--accent-border);
3030
}
3131
.preview-card.active {
32-
border-color: #6f42c1;
33-
box-shadow: 0 0 0 2px rgba(111,66,193,0.15) inset;
32+
border-color: var(--accent-secondary);
33+
box-shadow: 0 0 0 2px var(--accent-border) inset;
3434
}
3535

3636
.preview-header {
@@ -78,12 +78,12 @@
7878
border: 1px solid rgba(255,255,255,0.08);
7979
}
8080
.dark-mode .preview-card:hover {
81-
border-color: rgba(128,90,213,0.5);
81+
border-color: var(--accent-border);
8282
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
8383
}
8484
.dark-mode .preview-card.active {
85-
border-color: #6a0dad;
86-
box-shadow: 0 0 0 2px rgba(106,13,173,0.25) inset;
85+
border-color: var(--accent-secondary);
86+
box-shadow: 0 0 0 2px var(--accent-border) inset;
8787
}
8888

8989
.dark-mode .p-name { color: #eee; }

‎src/components/codecast/codecastlive/CodecastHeader.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
}
3636

3737
.title-input:focus {
38-
border-color: #6f42c1;
39-
box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.2);
38+
border-color: var(--accent-primary);
39+
box-shadow: 0 0 0 2px var(--accent-border);
4040
}
4141

4242
/* 수정 버튼 */
@@ -51,7 +51,7 @@
5151
}
5252

5353
.edit-title-btn:hover {
54-
color: #6f42c1;
54+
color: var(--accent-primary);
5555
}
5656

5757
.header-right {
@@ -108,9 +108,9 @@
108108
}
109109
.focus-button:hover { background-color: #e9e9ef; }
110110
.focus-button.active {
111-
background-color: #6f42c1;
111+
background-color: var(--accent-secondary);
112112
color: #fff;
113-
border-color: #6f42c1;
113+
border-color: var(--accent-secondary);
114114
}
115115

116116
.exit-button {
@@ -149,8 +149,8 @@
149149
}
150150
.dark-mode .focus-button:hover { background-color: #34343f; }
151151
.dark-mode .focus-button.active {
152-
background-color: #6a0dad;
153-
border-color: #6a0dad;
152+
background-color: var(--accent-secondary);
153+
border-color: var(--accent-secondary);
154154
color: #fff;
155155
}
156156

‎src/components/codecast/codecastlive/CodecastLive.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,17 @@
4949
height: 100px;
5050
border-radius: 50%;
5151
border: none;
52-
background: #6f42c1; /* 보라 */
52+
background: var(--accent-secondary);
5353
color: #fff;
5454
font-size: 50px;
5555
cursor: pointer;
56-
box-shadow: 0 6px 16px rgba(111,66,193,0.25);
56+
box-shadow: 0 6px 16px rgba(147, 123, 255, 0.25);
5757
transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease;
5858
}
5959
.plus-button:hover {
6060
transform: scale(1.06);
6161
filter: brightness(1.05);
62+
background: var(--accent-hover);
6263
}
6364

6465
.empty-help {
@@ -90,12 +91,13 @@
9091

9192

9293
.dark-mode .plus-button {
93-
background: #3a2a55;
94+
background: var(--accent-secondary);
9495
box-shadow: 0 6px 16px rgba(0,0,0,0.35);
9596
}
9697
.dark-mode .plus-button:hover {
9798
transform: scale(1.05);
9899
filter: brightness(1.05);
100+
background: var(--accent-hover);
99101
}
100102

101103
.dark-mode .empty-help {
@@ -272,13 +274,13 @@
272274
/* ⚠️ 수정: .share-toggle-btn이 기본 스타일을 사용하도록 추가 */
273275
.share-toggle-btn,
274276
.share-screen {
275-
background-color: #6a0dad; /* 디스코드 블루 (공유하기 기본 색상) */
277+
background-color: var(--accent-secondary);
276278
color: white;
277279
}
278280

279281
.share-toggle-btn:not(:disabled):hover,
280282
.share-screen:not(:disabled):hover {
281-
background-color: #c9a7ff;
283+
background-color: var(--accent-hover);
282284
}
283285

284286
/* 화면 공유 버튼 (활성 상태, 공유 중) */

‎src/components/codecast/codecastlive/CodecastSidebar.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@
119119
padding: 1px 6px;
120120
font-size: 10px;
121121
font-weight: 600;
122-
color: #4a2ecc;
123-
background: rgba(106, 13, 173, 0.12);
122+
color: var(--accent-secondary);
123+
background: var(--accent-soft);
124124
border-radius: 999px;
125125
}
126126

@@ -130,7 +130,7 @@
130130
}
131131

132132
.participant-main .stage.editing {
133-
color: #4a2ecc;
133+
color: var(--accent-secondary);
134134
font-weight: 600;
135135
}
136136

@@ -155,9 +155,9 @@
155155

156156
/* 현재 사용자 강조 (Light) */
157157
.participant-item.active-user {
158-
background-color: #ece9f7;
158+
background-color: var(--accent-soft);
159159
font-weight: 600;
160-
border-left: 3px solid #6a0dad;
160+
border-left: 3px solid var(--accent-secondary);
161161
}
162162

163163
/* 더보기 버튼 */
@@ -222,7 +222,7 @@
222222
background: #eee;
223223
margin: 6px 0;
224224
}
225-
.check { font-size: 12px; color: #6f42c1; }
225+
.check { font-size: 12px; color: var(--accent-secondary); }
226226

227227
/* ========== Dark Mode Overrides ========== */
228228

@@ -249,16 +249,16 @@
249249
}
250250

251251
.dark-mode .participant-item.active-user {
252-
background-color: #2a2a2a;
253-
border-left: 3px solid #6a0dad;
252+
background-color: rgba(255, 255, 255, 0.06);
253+
border-left: 3px solid var(--accent-secondary);
254254
}
255255

256256
.dark-mode .participant-main .stage {
257257
color: #b5b5c7;
258258
}
259259

260260
.dark-mode .participant-main .stage.editing {
261-
color: #bba3ff;
261+
color: var(--accent-primary);
262262
}
263263

264264
.dark-mode .participant-main .stage.disconnected {
@@ -270,8 +270,8 @@
270270
}
271271

272272
.dark-mode .participant-main .self-badge {
273-
color: #d5c4ff;
274-
background: rgba(136, 93, 255, 0.2);
273+
color: var(--accent-primary);
274+
background: var(--accent-soft);
275275
}
276276

277277
.dark-mode .avatar.placeholder {

0 commit comments

Comments
 (0)