Update style.css
Browse files
style.css
CHANGED
@@ -165,6 +165,67 @@ p {
|
|
165 |
flex-shrink: 0;
|
166 |
}
|
167 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
168 |
/* 레이어 목록 스타일 */
|
169 |
.layers-list {
|
170 |
width: 100%;
|
|
|
165 |
flex-shrink: 0;
|
166 |
}
|
167 |
|
168 |
+
/* 삭제 버튼 스타일 */
|
169 |
+
.delete-button {
|
170 |
+
background-color: #e74c3c;
|
171 |
+
color: white;
|
172 |
+
border: none;
|
173 |
+
border-radius: 50%;
|
174 |
+
width: 22px;
|
175 |
+
height: 22px;
|
176 |
+
font-size: 14px;
|
177 |
+
line-height: 1;
|
178 |
+
cursor: pointer;
|
179 |
+
margin-left: 5px;
|
180 |
+
display: flex;
|
181 |
+
align-items: center;
|
182 |
+
justify-content: center;
|
183 |
+
transition: background-color 0.2s;
|
184 |
+
}
|
185 |
+
|
186 |
+
.delete-button:hover {
|
187 |
+
background-color: #c0392b;
|
188 |
+
}
|
189 |
+
|
190 |
+
.layer-option {
|
191 |
+
margin-bottom: 10px;
|
192 |
+
display: flex;
|
193 |
+
justify-content: space-between;
|
194 |
+
}
|
195 |
+
|
196 |
+
#delete-layer-btn {
|
197 |
+
width: 100%;
|
198 |
+
margin-bottom: 8px;
|
199 |
+
padding: 8px;
|
200 |
+
font-size: 14px;
|
201 |
+
}
|
202 |
+
|
203 |
+
.delete-button:disabled,
|
204 |
+
#delete-layer-btn:disabled {
|
205 |
+
background-color: #ccc;
|
206 |
+
cursor: not-allowed;
|
207 |
+
}
|
208 |
+
|
209 |
+
/* 레이어 항목 스타일 개선 */
|
210 |
+
.layer-item {
|
211 |
+
display: flex;
|
212 |
+
justify-content: space-between;
|
213 |
+
align-items: center;
|
214 |
+
padding: 8px 10px;
|
215 |
+
border-bottom: 1px solid #eee;
|
216 |
+
cursor: pointer;
|
217 |
+
transition: background-color 0.2s;
|
218 |
+
}
|
219 |
+
|
220 |
+
.layer-item:hover {
|
221 |
+
background-color: #f5f5f5;
|
222 |
+
}
|
223 |
+
|
224 |
+
.layer-item.active {
|
225 |
+
background-color: #e3f2fd;
|
226 |
+
border-left: 3px solid #2196F3;
|
227 |
+
}
|
228 |
+
|
229 |
/* 레이어 목록 스타일 */
|
230 |
.layers-list {
|
231 |
width: 100%;
|