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

Refine CSS styles for Disney Pixar theme: adjust spacing and positioning for various elements, enhance layout consistency, and improve HTML structure for better readability. Update CSS map for accurate source mapping.

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-10-22 20:28:37 +09:00
parent f1aa7d8777
commit afa6e761c2
4 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
kr/assets/css/pdp_detail.css
View File

@@ -4271,6 +4271,7 @@
padding-top: 0;
}
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area {
position: relative;
padding: 4rem 0 0;
background: url(../images/kia/pdp/display_theme_mickey/bg_design_m.jpg) no-repeat center top/100% auto;
}

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

File diff suppressed because one or more lines are too long

68
kr/assets/css/pdp_detail.scss
View File

@@ -1575,7 +1575,7 @@
}
}
.btn-select.on+.list-member {
.btn-select.on + .list-member {
display: block;
}
@@ -1846,7 +1846,7 @@
font-size: 1.8rem;
}
>p {
> p {
position: relative;
width: 93%;
@@ -1922,7 +1922,7 @@
}
}
dt.active+dd {
dt.active + dd {
display: block;
}
@@ -2054,7 +2054,7 @@
}
}
button+button {
button + button {
margin-top: 1rem;
@include tablet {
@@ -2066,7 +2066,7 @@
}
}
>.dd-padding {
> .dd-padding {
padding-left: 6.5rem;
}
}
@@ -2087,9 +2087,10 @@
content: none;
}
&:hover {}
&:hover {
}
>p {
> p {
span {
color: #9ea1a2;
}
@@ -2097,7 +2098,7 @@
}
}
dl+dl {
dl + dl {
margin-top: 1rem;
}
}
@@ -2317,7 +2318,6 @@
}
@include maxtablet {
&:before,
&:after {
display: none;
@@ -2386,7 +2386,6 @@
// height: 10rem;
.comp_body {
.text_area {
// display: flex;
h3 {
font-size: 3rem;
@@ -2397,7 +2396,7 @@
font-size: 1.6rem;
}
>* {
> * {
flex: 1;
}
}
@@ -2473,7 +2472,7 @@
}
}
&+.item {
& + .item {
margin-top: 8rem;
@include maxtablet {
@@ -2487,7 +2486,7 @@
}
}
&+.comp_1x_b_v_s_b {
& + .comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 0;
@@ -2513,7 +2512,7 @@
margin-top: 8rem;
.comp_body {
&+.comp_body {
& + .comp_body {
margin-top: 10rem;
}
@@ -2530,7 +2529,7 @@
.displayThemeDtl {
.swiper-navigation {
>* {
> * {
top: 210px;
left: -65px;
width: 5rem;
@@ -2765,7 +2764,6 @@
}
@include maxtablet {
&:before,
&:after {
display: none;
@@ -2836,13 +2834,12 @@
.comp_body {
.text_area {
// display: flex;
h3 {
margin-bottom: 2rem;
}
>* {
> * {
flex: 1;
}
}
@@ -2911,7 +2908,7 @@
}
}
&+.item {
& + .item {
margin-top: 8rem;
@include maxtablet {
@@ -2925,7 +2922,7 @@
}
}
&+.comp_1x_b_v_s_b {
& + .comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 2rem;
@@ -3198,7 +3195,7 @@
}
}
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"]+label {
.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"] + label {
height: auto;
padding: 2rem 2rem 2rem 0;
@@ -3394,13 +3391,12 @@
// }
.comp_body {
.text_area {
// display: flex;
h3 {
margin-bottom: 2rem;
}
>* {
> * {
flex: 1;
}
}
@@ -3430,7 +3426,7 @@
.comp_wide {
&.title-only {
&+.comp_wide {
& + .comp_wide {
margin-top: 4rem;
}
}
@@ -3678,7 +3674,6 @@
}
&.paused {
.btn-play,
.btn-sound {
display: block !important;
@@ -3810,7 +3805,6 @@
}
&.playing {
.comp_body.layer_up,
.thumb-swiper,
.pdpInCarGameSwiper,
@@ -3951,7 +3945,7 @@
.pdpDtl {
.swiper-navigation {
>* {
> * {
top: 210px;
left: -65px;
width: 5rem;
@@ -4000,7 +3994,8 @@
}
.scroll_area {
@include maxtablet {}
@include maxtablet {
}
.web {
display: block;
@@ -4294,7 +4289,7 @@
display: block;
.swiper-slide {
&+.swiper-slide {
& + .swiper-slide {
margin-top: 5rem;
}
}
@@ -4302,7 +4297,7 @@
}
.swiper-navigation {
>* {
> * {
top: 210px;
left: -65px;
width: 5rem;
@@ -4574,7 +4569,7 @@
font-size: 1.6rem;
}
>* {
> * {
display: inline-block;
}
}
@@ -4869,6 +4864,7 @@
padding-top: 0;
.discover-area {
position: relative;
padding: 4rem 0 0;
background: url(../images/kia/pdp/display_theme_mickey/bg_design_m.jpg) no-repeat center top / 100% auto;
@@ -4877,7 +4873,7 @@
background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top / 192rem auto;
}
>.comp_top {
> .comp_top {
padding-bottom: 0;
h3 {
@@ -4908,7 +4904,7 @@
background: url(../images/kia/pdp/display_theme_mickey/pixar/bg_design.jpg) no-repeat center top / 192rem auto;
}
>.comp_top {
> .comp_top {
padding-bottom: 0;
h3 {
@@ -5449,7 +5445,7 @@
.welcome-goodbye {
.image_area {
&+.image_area {
& + .image_area {
margin-top: 0.4rem;
@include tablet {
@@ -5585,7 +5581,7 @@
align-items: center;
}
&+li {
& + li {
margin-top: 3.7rem;
@include tablet {
@@ -6099,4 +6095,4 @@
text-indent: -9999em;
background: url(../images/kia/pdp/display_theme_disney/btn_zoom_close.png) no-repeat 0 0 / 100% auto;
cursor: pointer;
}
}

16
kr/product/pdp_display_theme_disney_pixar.html
View File

@@ -570,7 +570,7 @@
</div>
<div class="discover">
<div class="inner">
<div class="item welcome-goodbye aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="image_area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.mov" type="video/quicktime" />
@@ -590,7 +590,7 @@
<p class="color-000">디즈니 픽사 컨셉의 모션 그래픽 Video가 차량 Sleep 모드 동작 이후 차량을 켤 때, 끌 때 적용 됩니다.</p>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/pixar/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
@@ -600,7 +600,7 @@
<p><span class="add">※ 차종에 따라 클러스터 화면 디자인이 상기 이미지와 다를 수 있습니다.</span></p>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/pixar/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
@@ -609,7 +609,7 @@
<p class="color-000">목적지까지의 길 안내 기능을 이용할 때마다 디즈니 픽사의 특별한 아트워크가 현재 위치를 표시해줍니다.</p>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/pixar/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
@@ -618,7 +618,7 @@
<p class="color-000">각 메뉴 화면을 넘길 때마다 디즈니 픽사 캐릭터와 로고, 다양한 일러스트가 나타납니다.</p>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/pixar/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
@@ -632,7 +632,11 @@
<div class="three-reasons">
<div class="tit-area">
<div class="inner aos-init" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<p>디즈니 픽사 테마를<br class="br-m" /> 놓쳐서는 안 될<br class="br-pc"> 세 가지 이유</p>
<p>
디즈니 픽사 테마를<br class="br-m" />
놓쳐서는 안 될<br class="br-pc" />
세 가지 이유
</p>
</div>
</div>
<div class="reasons">