gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS and HTML for improved styling and readability

Browse Source 
- Updated common.scss to enhance spacing and formatting for better consistency.
- Added a new class for responsive design in common.scss.
- Modified coupon-list_new.html to include a comment for expired coupons.
- Improved text formatting in event-view.html for better readability and user experience.
This commit is contained in:
hyeonggil
2025-07-15 14:10:28 +09:00
parent 025ba529dd
commit 4c87d4ccc6
5 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
kr/assets/css/common.css
View File

@@ -4384,4 +4384,13 @@ video::-webkit-media-controls {
display: block;
}
}
.br-pc {
display: none;
}
@media (min-width: 768px) {
.br-pc {
display: block;
}
}
/*# sourceMappingURL=common.css.map */

2
kr/assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

54
kr/assets/css/common.scss
View File

@@ -6,7 +6,7 @@ pre {
font-family: "KiaSignature";
}
/*비디오 콘트롤러 없앰*/
/*비디오 콘트롤러 없앰*/
video::-webkit-media-controls {
display: none !important;
}
@@ -56,7 +56,7 @@ video::-webkit-media-controls {
width: 100%;
padding-left: 2rem;
padding-right: 2rem;
@include desktopMin {
width: 100%;
}
@@ -717,6 +717,7 @@ video::-webkit-media-controls {
//보더가 있는 헤더
.hederWarp.hBoder {
border-bottom: 1px solid #dedede;
&.menu-open {
.user .icon-user {
background-image: url(../images/common/icon-user.svg);
@@ -739,20 +740,23 @@ video::-webkit-media-controls {
@media (max-width: 1120px) {
// height: 5.6rem;
}
&.menu-open {
&~.pageTitle {
z-index: 0 !important;
}
&~.contentWarp {
z-index: 0 !important;
}
.user .icon-user {
background-image: url(../images/common/icon-user.svg) !important;
}
.headerInner {
.gnb {
.logoWrap {
a {
@@ -826,7 +830,7 @@ video::-webkit-media-controls {
.menuBg {
@media (min-width: 1120px) {
&::after{
&::after {
opacity: 1;
}
}
@@ -834,7 +838,7 @@ video::-webkit-media-controls {
}
}
@@ -845,7 +849,7 @@ video::-webkit-media-controls {
max-width: 120rem;
height: 8rem;
margin: 0 auto;
@media (max-width: 1120px) {
height: 5.6rem;
@@ -853,6 +857,7 @@ video::-webkit-media-controls {
.menuBg {
display: none;
@media (min-width: 1120px) {
display: block;
position: absolute;
@@ -862,10 +867,11 @@ video::-webkit-media-controls {
z-index: 1;
background-color: #fff;
transition: height 0.2s;
&::after{
content:"";
&::after {
content: "";
position: absolute;
top:80px;
top: 80px;
left: 0;
right: 0;
border-top: 1px solid #dedede;
@@ -884,6 +890,7 @@ video::-webkit-media-controls {
.logoWrap {
position: relative;
z-index: 2;
@media (min-width: 1120px) {
display: flex;
align-items: center;
@@ -1142,9 +1149,11 @@ video::-webkit-media-controls {
display: flex;
margin-left: 4.5rem;
transition: margin-left 0.2s ease-in-out;
@media (max-width: 1220px) {
margin-left: 2rem;
}
&.open {
li {
.menuDepth2Wrap {
@@ -1247,7 +1256,8 @@ video::-webkit-media-controls {
}
&.on {
margin-bottom:.3rem;
margin-bottom: .3rem;
&::after {
content: "";
position: absolute;
@@ -1257,8 +1267,9 @@ video::-webkit-media-controls {
transform: rotate(270deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
}
& ~ .menuDepth2Wrap {
margin-bottom:1rem;
&~.menuDepth2Wrap {
margin-bottom: 1rem;
}
}
}
@@ -1274,6 +1285,7 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
padding: 4rem 2rem 5rem;
// opacity: 0;
// transition: opacity 0.2s ease-in .1s;
// transition-delay: 2s;
@@ -1363,7 +1375,7 @@ video::-webkit-media-controls {
@media (max-width: 1120px) {
display: flex;
position: absolute;
bottom:3.2rem;
bottom: 3.2rem;
left: 0;
right: 0;
// padding: 0 2rem;
@@ -1376,6 +1388,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 600;
color: #676767;
&+a {
border-left: 1px solid #dedede;
}
@@ -1407,10 +1420,11 @@ video::-webkit-media-controls {
position: relative;
margin-right: 2rem;
transition: all 0.2s ease-in-out;
@media (max-width: 1220px) {
margin-right: 1.5rem;
}
@media (max-width: 1120px) {
display: none;
}
@@ -1451,6 +1465,7 @@ video::-webkit-media-controls {
transform: rotate(-180deg);
background-position-x: left;
}
.carlistItem {
display: block;
}
@@ -1743,6 +1758,7 @@ video::-webkit-media-controls {
background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
&.on {
&::after {
transform: rotate(-180deg);
@@ -4862,4 +4878,12 @@ video::-webkit-media-controls {
@include maxtablet {
display: block;
}
}
.br-pc {
display: none;
@include tablet {
display: block;
}
}

1
kr/mypage/coupon-list_new.html
View File

@@ -336,6 +336,7 @@
<div class="cost">7일 무료 체험</div>
</div>
</li>
<!-- [D] 만료 시 li에 coupon-expired 클래스 추가 -->
<li class="item coupon-expired">
<div class="itemTop">
<div class="info">

8
kr/service/event-view.html
View File

@@ -439,7 +439,7 @@
<div class="popInner">
<div class="content">
<p>
<span>안녕하세요!<br>쿠폰을 다운로드하시려면 로그인이 필요합니다.<br>먼저 로그인을 해 주세요!</span>
<span>안녕하세요!<br>쿠폰을 다운로드하시려면 <br class="br-m">로그인이 필요합니다.<br>먼저 로그인을 해 주세요!</span>
</p>
<div class="carswBtn">
<div class="towButton">
@@ -454,7 +454,7 @@
<div class="popInner">
<div class="content">
<p>
<span>축하합니다!<br>쿠폰 다운로드가 완료되었습니다.<br>마이페이지에서 확인하실 수 있으니 즐거운 혜택을 누리세요!</span>
<span>축하합니다!<br>쿠폰 다운로드가 완료되었습니다.<br>마이페이지에서 확인하실 수 있으니 <br>즐거운 혜택을 누리세요!</span>
</p>
<div class="carswBtn">
<div class="towButton">
@@ -470,7 +470,7 @@
<div class="popInner">
<div class="content">
<p>
<span>다운로드 가능한 쿠폰 개수를 초과했습니다.<br>추후 더 많은 혜택이 있는 이벤트를 준비할 예정이니 기대해 주세요!</span>
<span>다운로드 가능한 쿠폰 개수를 <br class="br-m">초과했습니다.<br>추후 더 많은 혜택이 있는 이벤트를 <br class="br-m">준비할 예정이니 <br class="br-pc">기대해 주세요!</span>
</p>
<div class="carswBtn">
@@ -486,7 +486,7 @@
<div class="content">
<p>
<span>안타깝게도 쿠폰의 유효 기간이 만료되어 다운로드가 불가능합니다.<br>추후 더 많은 혜택이 있는 이벤트를 준비할 예정이니 기대해 주세요!</span>
<span>안타깝게도 쿠폰의 유효 기간이 만료되어<br> 다운로드가 불가능합니다.<br>추후 더 많은 혜택이 있는 이벤트를 <br class="br-m">준비할 예정이니 <br class="br-pc">기대해 주세요!</span>
</p>
<div class="carswBtn">
<div class="oneButton">