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

인트로 사운드 버튼, 아케이드게임 레이아웃 수정 중

Browse Source
This commit is contained in:
hyeonggil
2024-07-30 16:55:25 +09:00
parent 1d6468b0e5
commit d54256da93
9 changed files with 262 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
assets/css/pdp_detail.scss
View File

@@ -2609,6 +2609,13 @@
}
}
.comp_top.title-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.visualBg {
position: absolute;
width: 100%;
@@ -2635,6 +2642,18 @@
}
&.swiper {
position: static;
.image_area {
height: 70rem;
img {
object-fit: cover;
}
}
}
// &:after {
// content:"";
// display: block;
@@ -3330,6 +3349,7 @@
}
}
.comp_wide {
&.title-only {
&+.comp_wide {
@@ -3395,7 +3415,7 @@
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 125rem;
max-width: 120rem;
padding-top: 43.5%;
.video {
@@ -3405,25 +3425,32 @@
transform: translate(-50%, -50%);
width: 100%;
background: #000;
aspect-ratio: 16/9;
// aspect-ratio: 16/9;
video {
display: block;
width: 100%;
height: 100%;
visibility: visible;
video[poster]{
height:100%;
width:100%;
&[poster] {
height: 100%;
width: 100%;
}
}
.btn-play {
display: none;
.video-ctrl {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 4rem;
}
.btn-play {
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_play.png) no-repeat center / 100% auto;
@@ -3439,12 +3466,34 @@
display: block;
}
@include maxmobile {
width: 4rem;
height: 4rem;
}
}
&:hover {
.btn-play.pause {
display: block;
.btn-sound {
display: none;
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center / 100% auto;
text-indent: -9999em;
cursor: pointer;
&.off {
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center / 100% auto;
}
&.on {
background: url(../images/kia/contents/ico_sound_on.png) no-repeat center / 100% auto;
}
@include maxmobile {
width: 4rem;
height: 4rem;
}
}
}
@@ -3519,6 +3568,39 @@
transform: translate(-50%, -50%) rotate(-45deg);
}
&.played {
&:hover {
.video-ctrl {
display: flex;
.btn-play,
.btn-sound {
display: block;
}
}
}
}
&.paused {
.btn-play,
.btn-sound {
display: block !important;
}
&:hover {
.video-ctrl {
display: flex;
.btn-play,
.btn-sound {
display: block;
}
}
}
}
// .btn-close {
// position: absolute;
// top: 2rem;
@@ -3541,7 +3623,7 @@
}
@include maxmobile {
height: 36rem;
height: 40rem;
}
}
@@ -3597,7 +3679,7 @@
}
@include maxmobile {
bottom: 4rem;
bottom: 3.5rem;
font-size: 1.2rem;
}
}
@@ -3660,4 +3742,16 @@
}
}
.srsPlus {
.close-today {
bottom: 13rem;
}
@media(max-width: 1920px) {
.close-today {
bottom: 2vw;
}
}
}
}