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

Update photo review styles: Adjust layout for mobile and tablet views, refine flex properties, and enhance button dimensions. Modify visibility rules for specific list items and ensure consistent aspect ratios across breakpoints.

Browse Source
This commit is contained in:
hyeonggil
2026-01-06 16:28:28 +09:00
parent 534015a521
commit 84858204e4
3 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5565,25 +5565,30 @@ body.scroll-up .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu {
.photoReviewList ul li { .photoReviewList ul li {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 7.2rem; flex: 1 0 calc((100% - 3rem) / 4);
width: calc((100% - 3rem) / 4);
min-width: 0;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 0.8rem; border-radius: 0.8rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.photoReviewList ul li { .photoReviewList ul li {
flex: 0 0 14.2857142857%;
width: 14.2857142857%; width: 14.2857142857%;
aspect-ratio: 16/16; aspect-ratio: 1/1;
} }
} }
.photoReviewList ul li:nth-child(n+5):nth-child(-n+6) { .photoReviewList ul li:nth-child(n+5):nth-child(-n+7) {
display: none; display: none;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.photoReviewList ul li:nth-child(n+5):nth-child(-n+6) { .photoReviewList ul li:nth-child(n+5):nth-child(-n+7) {
display: block; display: block;
} }
} }
.photoReviewList ul li button { .photoReviewList ul li button {
width: 100%;
height: 100%;
cursor: pointer; cursor: pointer;
} }
.photoReviewList ul li img { .photoReviewList ul li img {

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

File diff suppressed because one or more lines are too long

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

@@ -1496,6 +1496,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@include tablet { @include tablet {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@@ -1513,6 +1514,7 @@
.oneButton { .oneButton {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;
@include tablet { @include tablet {
width: auto; width: auto;
margin-top: 0; margin-top: 0;
@@ -1588,7 +1590,7 @@
} }
} }
.btn-select.on + .list-member { .btn-select.on+.list-member {
display: block; display: block;
} }
@@ -1624,14 +1626,18 @@
color: #9ea1a2; color: #9ea1a2;
background: #f3f3f3; background: #f3f3f3;
border-radius: 0.8rem; border-radius: 0.8rem;
@include tablet { @include tablet {
height: 16rem; height: 16rem;
font-size: 1.6rem; font-size: 1.6rem;
} }
P { P {
text-align: center; text-align: center;
br { br {
display: block; display: block;
@include tablet { @include tablet {
display: none; display: none;
} }
@@ -1692,25 +1698,30 @@
justify-content: flex-start; justify-content: flex-start;
margin-top: 0.5rem; margin-top: 0.5rem;
flex-direction: column; flex-direction: column;
@include tablet { @include tablet {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-top: 1rem; margin-top: 1rem;
} }
span { span {
position: relative; position: relative;
font-size: 1.4rem; font-size: 1.4rem;
color: #a6a6a6; color: #a6a6a6;
line-height: 1.5; line-height: 1.5;
@include tablet { @include tablet {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1; line-height: 1;
} }
+ span {
+span {
@include tablet { @include tablet {
padding-left: 1.6rem; padding-left: 1.6rem;
margin-left: 1.6rem; margin-left: 1.6rem;
} }
&::before { &::before {
content: ""; content: "";
display: none; display: none;
@@ -1721,6 +1732,7 @@
top: 50%; top: 50%;
left: 0; left: 0;
transform: translateY(-50%); transform: translateY(-50%);
@include tablet { @include tablet {
display: block; display: block;
} }
@@ -1733,6 +1745,7 @@
margin-top: 1rem; margin-top: 1rem;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.1; line-height: 1.1;
@include tablet { @include tablet {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 2.4rem; line-height: 2.4rem;
@@ -1752,27 +1765,32 @@
overflow: hidden; overflow: hidden;
} }
} }
.photoArea { .photoArea {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-top: 1rem; margin-top: 1rem;
gap: 1rem; gap: 1rem;
.photoItem { .photoItem {
width: 7.2rem; width: 7.2rem;
height: 7.2rem; height: 7.2rem;
border-radius: 0.8rem; border-radius: 0.8rem;
overflow: hidden; overflow: hidden;
@include tablet { @include tablet {
width: 16rem; width: 16rem;
height: 16rem; height: 16rem;
} }
button { button {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -1821,6 +1839,7 @@
margin-left: 0; margin-left: 0;
margin-top: 0.8rem; margin-top: 0.8rem;
background: url("/kr/assets/images/kia/contents/review_best.png") no-repeat center center / contain; background: url("/kr/assets/images/kia/contents/review_best.png") no-repeat center center / contain;
@include tablet { @include tablet {
margin-left: 1.6rem; margin-left: 1.6rem;
margin-top: 0; margin-top: 0;
@@ -1980,7 +1999,7 @@
font-size: 1.8rem; font-size: 1.8rem;
} }
> p { >p {
position: relative; position: relative;
width: 93%; width: 93%;
@@ -2056,7 +2075,7 @@
} }
} }
dt.active + dd { dt.active+dd {
display: block; display: block;
} }
@@ -2188,7 +2207,7 @@
} }
} }
button + button { button+button {
margin-top: 1rem; margin-top: 1rem;
@include tablet { @include tablet {
@@ -2200,7 +2219,7 @@
} }
} }
> .dd-padding { >.dd-padding {
padding-left: 6.5rem; padding-left: 6.5rem;
} }
} }
@@ -2221,10 +2240,9 @@
content: none; content: none;
} }
&:hover { &:hover {}
}
> p { >p {
span { span {
color: #9ea1a2; color: #9ea1a2;
} }
@@ -2232,7 +2250,7 @@
} }
} }
dl + dl { dl+dl {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@@ -2452,6 +2470,7 @@
} }
@include maxtablet { @include maxtablet {
&:before, &:before,
&:after { &:after {
display: none; display: none;
@@ -2520,6 +2539,7 @@
// height: 10rem; // height: 10rem;
.comp_body { .comp_body {
.text_area { .text_area {
// display: flex; // display: flex;
h3 { h3 {
font-size: 3rem; font-size: 3rem;
@@ -2530,7 +2550,7 @@
font-size: 1.6rem; font-size: 1.6rem;
} }
> * { >* {
flex: 1; flex: 1;
} }
} }
@@ -2606,7 +2626,7 @@
} }
} }
& + .item { &+.item {
margin-top: 8rem; margin-top: 8rem;
@include maxtablet { @include maxtablet {
@@ -2620,7 +2640,7 @@
} }
} }
& + .comp_1x_b_v_s_b { &+.comp_1x_b_v_s_b {
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 0; margin-top: 0;
@@ -2646,7 +2666,7 @@
margin-top: 8rem; margin-top: 8rem;
.comp_body { .comp_body {
& + .comp_body { &+.comp_body {
margin-top: 10rem; margin-top: 10rem;
} }
@@ -2663,7 +2683,7 @@
.displayThemeDtl { .displayThemeDtl {
.swiper-navigation { .swiper-navigation {
> * { >* {
top: 210px; top: 210px;
left: -65px; left: -65px;
width: 5rem; width: 5rem;
@@ -2898,6 +2918,7 @@
} }
@include maxtablet { @include maxtablet {
&:before, &:before,
&:after { &:after {
display: none; display: none;
@@ -2968,12 +2989,13 @@
.comp_body { .comp_body {
.text_area { .text_area {
// display: flex; // display: flex;
h3 { h3 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
> * { >* {
flex: 1; flex: 1;
} }
} }
@@ -3042,7 +3064,7 @@
} }
} }
& + .item { &+.item {
margin-top: 8rem; margin-top: 8rem;
@include maxtablet { @include maxtablet {
@@ -3056,7 +3078,7 @@
} }
} }
& + .comp_1x_b_v_s_b { &+.comp_1x_b_v_s_b {
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 2rem; margin-top: 2rem;
@@ -3329,7 +3351,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; height: auto;
padding: 2rem 2rem 2rem 0; padding: 2rem 2rem 2rem 0;
@@ -3525,12 +3547,13 @@
// } // }
.comp_body { .comp_body {
.text_area { .text_area {
// display: flex; // display: flex;
h3 { h3 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
> * { >* {
flex: 1; flex: 1;
} }
} }
@@ -3560,7 +3583,7 @@
.comp_wide { .comp_wide {
&.title-only { &.title-only {
& + .comp_wide { &+.comp_wide {
margin-top: 4rem; margin-top: 4rem;
} }
} }
@@ -3808,6 +3831,7 @@
} }
&.paused { &.paused {
.btn-play, .btn-play,
.btn-sound { .btn-sound {
display: block !important; display: block !important;
@@ -3939,6 +3963,7 @@
} }
&.playing { &.playing {
.comp_body.layer_up, .comp_body.layer_up,
.thumb-swiper, .thumb-swiper,
.pdpInCarGameSwiper, .pdpInCarGameSwiper,
@@ -4079,7 +4104,7 @@
.pdpDtl { .pdpDtl {
.swiper-navigation { .swiper-navigation {
> * { >* {
top: 210px; top: 210px;
left: -65px; left: -65px;
width: 5rem; width: 5rem;
@@ -4128,8 +4153,7 @@
} }
.scroll_area { .scroll_area {
@include maxtablet { @include maxtablet {}
}
.web { .web {
display: block; display: block;
@@ -4423,7 +4447,7 @@
display: block; display: block;
.swiper-slide { .swiper-slide {
& + .swiper-slide { &+.swiper-slide {
margin-top: 5rem; margin-top: 5rem;
} }
} }
@@ -4431,7 +4455,7 @@
} }
.swiper-navigation { .swiper-navigation {
> * { >* {
top: 210px; top: 210px;
left: -65px; left: -65px;
width: 5rem; width: 5rem;
@@ -4703,7 +4727,7 @@
font-size: 1.6rem; font-size: 1.6rem;
} }
> * { >* {
display: inline-block; display: inline-block;
} }
} }
@@ -4998,6 +5022,7 @@
padding-top: 0; padding-top: 0;
display: none; display: none;
&.box2 { &.box2 {
display: block; display: block;
} }
@@ -5012,7 +5037,7 @@
background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top / 192rem auto; background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top / 192rem auto;
} }
> .comp_top { >.comp_top {
padding-bottom: 0; padding-bottom: 0;
h3 { h3 {
@@ -5043,7 +5068,7 @@
background: url(../images/kia/pdp/display_theme_mickey/pixar/bg_design.jpg) no-repeat center top / 192rem auto; 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; padding-bottom: 0;
h3 { h3 {
@@ -5272,6 +5297,7 @@
.tab-box { .tab-box {
display: none; display: none;
padding-top: 2.2rem; padding-top: 2.2rem;
&.box1 { &.box1 {
display: block; display: block;
} }
@@ -5593,7 +5619,7 @@
.welcome-goodbye { .welcome-goodbye {
.image_area { .image_area {
& + .image_area { &+.image_area {
margin-top: 0.4rem; margin-top: 0.4rem;
@include tablet { @include tablet {
@@ -5616,11 +5642,14 @@
aspect-ratio: 1200 / 236; aspect-ratio: 1200 / 236;
padding: 1.8333333333333333vw; padding: 1.8333333333333333vw;
background: url("../images/kia/promotion/video_frame.png") no-repeat center center / contain; background: url("../images/kia/promotion/video_frame.png") no-repeat center center / contain;
@media (min-width: 1000px) { @media (min-width: 1000px) {
padding: 2.2rem; padding: 2.2rem;
} }
& + .video-area {
&+.video-area {
margin-top: 1.2rem; margin-top: 1.2rem;
@include tablet { @include tablet {
margin-top: 1.6rem; margin-top: 1.6rem;
} }
@@ -5750,7 +5779,7 @@
align-items: center; align-items: center;
} }
& + li { &+li {
margin-top: 3.7rem; margin-top: 3.7rem;
@include tablet { @include tablet {
@@ -6274,36 +6303,51 @@
// overflow-x: auto; // overflow-x: auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
ul { ul {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@include tablet { @include tablet {
gap: 1.3rem; gap: 1.3rem;
} }
li { li {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 7.2rem; flex: 1 0 calc((100% - 3rem) / 4);
width: calc((100% - 3rem) / 4);
min-width: 0;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
border-radius: 0.8rem; border-radius: 0.8rem;
@include tablet { @include tablet {
flex: 0 0 calc(100% / 7);
width: calc(100% / 7); width: calc(100% / 7);
aspect-ratio: 16 / 16; aspect-ratio: 1 / 1;
} }
// 4~6 번째 숨김 // 4~6 번째 숨김
&:nth-child(n + 5):nth-child(-n + 6) { &:nth-child(n + 5):nth-child(-n + 7) {
display: none; display: none;
@include tablet { @include tablet {
display: block; display: block;
} }
} }
button { button {
width: 100%;
height: 100%;
cursor: pointer; cursor: pointer;
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.count { .count {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -6341,6 +6385,7 @@
text-align: center; text-align: center;
background: linear-gradient(88.44deg, rgba(145, 145, 145, 0) 1.49%, rgba(0, 0, 0, 0.8) 62.8%); background: linear-gradient(88.44deg, rgba(145, 145, 145, 0) 1.49%, rgba(0, 0, 0, 0.8) 62.8%);
line-height: 1.5; line-height: 1.5;
@include tablet { @include tablet {
font-size: 2rem; font-size: 2rem;
} }
@@ -6350,6 +6395,7 @@
// 모바일용 전체 포토리뷰 버튼 (4번째에 표시) // 모바일용 전체 포토리뷰 버튼 (4번째에 표시)
.allPhotoReview-mobile { .allPhotoReview-mobile {
display: block; display: block;
@include tablet { @include tablet {
display: none; display: none;
} }
@@ -6358,6 +6404,7 @@
// PC용 전체 포토리뷰 버튼 (7번째에 표시) // PC용 전체 포토리뷰 버튼 (7번째에 표시)
.allPhotoReview-pc { .allPhotoReview-pc {
display: none; display: none;
@include tablet { @include tablet {
display: block; display: block;
} }
@@ -6367,6 +6414,7 @@
.reviewArea &:nth-child(5) { .reviewArea &:nth-child(5) {
button:not(.photoReviewAllPopup.allPhotoReview-mobile) { button:not(.photoReviewAllPopup.allPhotoReview-mobile) {
display: none; display: none;
@include tablet { @include tablet {
display: block; display: block;
} }
@@ -6383,13 +6431,17 @@
.popInner { .popInner {
.photoReviewList { .photoReviewList {
padding-top: 0; padding-top: 0;
ul { ul {
gap: 1rem; gap: 1rem;
li { li {
width: calc((100% - 2rem) / 3); width: calc((100% - 2rem) / 3);
@include tablet { @include tablet {
width: calc((100% - 5rem) / 6); width: calc((100% - 5rem) / 6);
} }
&:nth-child(7) { &:nth-child(7) {
&:before { &:before {
display: none; display: none;
@@ -6410,9 +6462,11 @@
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
cursor: pointer; cursor: pointer;
input[type="checkbox"]:disabled { input[type="checkbox"]:disabled {
cursor: not-allowed; cursor: not-allowed;
& + span {
&+span {
color: #ccc; color: #ccc;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -6424,4 +6478,4 @@
width: 15rem; width: 15rem;
} }
} }
} }