From 6765f9632e933eefb433b74c097912beea520bf0 Mon Sep 17 00:00:00 2001 From: myunsyeya <myunsyeya@ajou.ac.kr> Date: Sun, 8 Dec 2024 04:03:53 +0900 Subject: [PATCH] =?UTF-8?q?style:=20rebase=20=EC=A4=91=20=EB=88=84?= =?UTF-8?q?=EB=9D=BD=EB=90=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyCombinationPage/MyCombinationPage.css | 158 +++++++++++++++++- 1 file changed, 155 insertions(+), 3 deletions(-) diff --git a/src/pages/MyCombinationPage/MyCombinationPage.css b/src/pages/MyCombinationPage/MyCombinationPage.css index ffc38c5..2d961c9 100644 --- a/src/pages/MyCombinationPage/MyCombinationPage.css +++ b/src/pages/MyCombinationPage/MyCombinationPage.css @@ -7,6 +7,8 @@ } .sidebar { + position: sticky; + top: 2rem; flex: 1; max-width: 300px; padding: 1.5rem; @@ -195,16 +197,17 @@ align-items: center; padding: 1.5rem; border-radius: 12px; - background-color: var(--background-white); + background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); box-shadow: var(--shadow-sm); transition: all 0.3s ease; - border: 1px solid transparent; + border: 1px solid rgba(var(--primary-rgb), 0.08); } .part-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); - border-color: var(--primary-light); + background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); + border-color: rgba(var(--primary-rgb), 0.15); } .part-image { @@ -261,6 +264,7 @@ } .sidebar { + position: static; max-width: 100%; } @@ -274,3 +278,151 @@ margin-right: 1rem; } } + +.pc-item-buttons { + display: flex; + gap: 8px; +} + +.edit-button, +.delete-button { + padding: 4px 12px; + font-size: 13px; + background-color: var(--primary-color); + border: 1px solid var(--primary-color); + border-radius: 8px; + color: white; + cursor: pointer; + transition: all 0.3s ease; +} + +.edit-button:hover, +.delete-button:hover { + background-color: var(--primary-color); + box-shadow: 0 0 0 3px var(--primary-light); + transform: translateY(-1px); +} + +.edit-button:disabled, +.delete-button:disabled { + background-color: var(--primary-light); + border-color: var(--primary-light); + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.part-list-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 2rem; + margin-bottom: 1.5rem; + background: linear-gradient(135deg, var(--background-white) 0%, var(--primary-light) 100%); + border-radius: 12px; + box-shadow: var(--shadow-sm); + border: 1px solid rgba(var(--primary-rgb), 0.1); + position: relative; + overflow: hidden; +} + +/* 배경에 부드러운 장식 효과 추가 */ +.part-list-header::before { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%); + transform: translate(30%, -30%); +} + +.part-list-header h2 { + margin: 0; + font-size: 1.8rem; + font-weight: 600; + color: var(--text-primary); + position: relative; /* 텍스트를 장식 위에 표시 */ +} + +.share-button { + padding: 0.75rem 1.5rem; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark, #0056b3) 100%); + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 1.1rem; + font-weight: 500; + transition: all 0.2s ease; + box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2); + position: relative; + overflow: hidden; +} + +/* 버튼에 빛나는 효과 추가 */ +.share-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 120deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: 0.5s; +} + +.share-button:hover { + background: linear-gradient(135deg, var(--primary-dark, #0056b3) 0%, var(--primary-color) 100%); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3); +} + +.share-button:hover::before { + left: 100%; +} + +.share-button:active { + transform: translateY(0); +} + +/* 부품 아이템 카드도 파스텔톤으로 개선 */ +.part-item { + display: flex; + align-items: center; + padding: 1.5rem; + border-radius: 12px; + background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); + box-shadow: var(--shadow-sm); + transition: all 0.3s ease; + border: 1px solid rgba(var(--primary-rgb), 0.08); +} + +.part-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); + border-color: rgba(var(--primary-rgb), 0.15); +} + +/* 모바일 대응 */ +@media (max-width: 768px) { + .part-list-header { + padding: 1.2rem; + } + + .part-list-header h2 { + font-size: 1.5rem; + } + + .share-button { + padding: 0.5rem 1rem; + font-size: 1rem; + } +} -- GitLab