Update Disney display themes: modify vehicle selection UI for mobile and PC, enhance theme options with new Disney and Pixar themes, and improve layout for better user experience. Adjust CSS for menu positioning and spacing.

This commit is contained in:
2025-10-22 00:40:27 +09:00
parent 4ea6ae6d24
commit f67fd2e7b8
6 changed files with 444 additions and 161 deletions

View File

@@ -137,7 +137,7 @@ video::-webkit-media-controls {
min-width: 2.2rem;
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -188,7 +188,8 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
@include desktopMin {}
@include desktopMin {
}
.boxBullet {
display: none;
@@ -233,7 +234,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -243,7 +244,7 @@ video::-webkit-media-controls {
display: block;
}
.carItem.on+.carlistItem {
.carItem.on + .carlistItem {
display: block;
}
}
@@ -356,7 +357,7 @@ video::-webkit-media-controls {
}
}
button+button {
button + button {
border-right: 0;
}
@@ -378,7 +379,7 @@ video::-webkit-media-controls {
padding: 0;
}
>a {
> a {
display: none;
@include desktopMin {
@@ -419,7 +420,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 2rem;
}
}
@@ -455,7 +456,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 3rem;
@include desktopMin {
@@ -484,7 +485,7 @@ video::-webkit-media-controls {
display: block;
}
>a {
> a {
display: none;
@include desktopMin {
@@ -532,7 +533,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -543,7 +544,7 @@ video::-webkit-media-controls {
}
}
.menu+.user {
.menu + .user {
margin-left: 2rem;
}
}
@@ -555,7 +556,7 @@ video::-webkit-media-controls {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.mMenuWarp+.cart {
.mMenuWarp + .cart {
margin-left: 0;
@include desktopMin {
@@ -564,7 +565,7 @@ video::-webkit-media-controls {
}
.cart {
>a {
> a {
display: flex;
align-items: center;
height: 5.6rem;
@@ -652,7 +653,7 @@ video::-webkit-media-controls {
}
}
.carlist+.gnbIcon {
.carlist + .gnbIcon {
margin-left: 0;
@include desktopMin {
@@ -693,7 +694,6 @@ video::-webkit-media-controls {
.moblieMenu {
.slide-open {
.burgur {
.top-line,
.bot-line {
background-color: #000;
@@ -742,11 +742,11 @@ video::-webkit-media-controls {
}
&.menu-open {
&~.pageTitle {
& ~ .pageTitle {
z-index: 0 !important;
}
&~.contentWarp {
& ~ .contentWarp {
z-index: 0 !important;
}
@@ -802,7 +802,7 @@ video::-webkit-media-controls {
}
.userLogin {
>a {
> a {
border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f;
transition: 0.3s;
@@ -1032,7 +1032,7 @@ video::-webkit-media-controls {
background-size: contain;
}
&+button {
& + button {
border-right: 0;
}
}
@@ -1081,7 +1081,7 @@ video::-webkit-media-controls {
font-size: 1.2rem;
}
span+span {
span + span {
color: #676767;
font-weight: 400;
@@ -1155,7 +1155,7 @@ video::-webkit-media-controls {
width: fit-content;
}
span+span {
span + span {
font-weight: 400;
&::before {
@@ -1171,7 +1171,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1215,7 +1215,7 @@ video::-webkit-media-controls {
li:nth-child(2) {
.menuDepth2Wrap {
@media (min-width: 1120px) {
left: 5.4rem;
left: 4.4rem;
}
}
}
@@ -1223,7 +1223,7 @@ video::-webkit-media-controls {
li:nth-child(3) {
.menuDepth2Wrap {
@media (min-width: 1120px) {
left: 13.6rem;
left: 14.6rem;
}
}
}
@@ -1302,7 +1302,7 @@ video::-webkit-media-controls {
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
}
&~.menuDepth2Wrap {
& ~ .menuDepth2Wrap {
padding-left: 1.2rem;
margin-bottom: 1rem;
}
@@ -1431,7 +1431,7 @@ video::-webkit-media-controls {
font-weight: 600;
color: #676767;
&+a {
& + a {
border-left: 1px solid #dedede;
}
}
@@ -1548,7 +1548,7 @@ video::-webkit-media-controls {
white-space: nowrap;
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -1582,7 +1582,7 @@ video::-webkit-media-controls {
display: block;
}
&.on+.carlistItem {
&.on + .carlistItem {
display: block;
}
@@ -1653,7 +1653,7 @@ video::-webkit-media-controls {
}
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -1679,7 +1679,7 @@ video::-webkit-media-controls {
position: relative;
padding-left: 2rem;
>span {
> span {
display: inline;
}
@@ -1732,7 +1732,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
@include desktopMin {
@@ -1752,7 +1752,7 @@ video::-webkit-media-controls {
display: none;
}
>a {
> a {
display: flex;
align-items: center;
padding: 0.3rem 0.6rem;
@@ -1777,7 +1777,7 @@ video::-webkit-media-controls {
display: none;
}
>a {
> a {
display: flex;
align-items: center;
height: 8rem;
@@ -1830,7 +1830,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1842,7 +1842,7 @@ video::-webkit-media-controls {
}
.cart {
>a {
> a {
display: flex;
align-items: center;
height: 5.6rem;
@@ -1952,7 +1952,7 @@ video::-webkit-media-controls {
}
.userLogin {
>a {
> a {
border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f;
transition: 0.3s;
@@ -2194,7 +2194,7 @@ video::-webkit-media-controls {
border-bottom: 1px solid #000;
}
a+a {
a + a {
margin-left: 2rem;
}
}
@@ -2277,7 +2277,7 @@ video::-webkit-media-controls {
}
}
.btn-select.on+.list-member {
.btn-select.on + .list-member {
display: block;
}
@@ -2670,7 +2670,8 @@ video::-webkit-media-controls {
margin-bottom: 0rem;
}
@include desktopMax {}
@include desktopMax {
}
dt {
color: #676767;
@@ -2693,7 +2694,7 @@ video::-webkit-media-controls {
}
}
dl+dl {
dl + dl {
border-bottom: 0;
margin-top: 0rem;
padding-bottom: 0rem;
@@ -2710,7 +2711,7 @@ video::-webkit-media-controls {
}
}
a+a {
a + a {
margin-top: 1.1rem;
}
}
@@ -2784,7 +2785,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 1.5rem;
@include tablet {
@@ -2883,7 +2884,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -3068,7 +3069,7 @@ video::-webkit-media-controls {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -3184,7 +3185,7 @@ video::-webkit-media-controls {
}
}
>div {
> div {
width: 100%;
display: flex;
flex-wrap: wrap;
@@ -3203,11 +3204,11 @@ video::-webkit-media-controls {
}
}
input[type="text"]+input[type="text"] {
input[type="text"] + input[type="text"] {
margin-left: 1rem;
}
input[type="text"]+select {
input[type="text"] + select {
width: 100%;
margin-top: 1rem;
@@ -3227,11 +3228,11 @@ video::-webkit-media-controls {
}
}
>div.phone {
> div.phone {
flex-wrap: nowrap;
}
>div.mail {
> div.mail {
input {
width: calc(100% / 2 - 4.5%);
}
@@ -3393,7 +3394,7 @@ video::-webkit-media-controls {
}
}
button+label {
button + label {
margin-left: 1rem;
}
}
@@ -3412,7 +3413,7 @@ video::-webkit-media-controls {
}
}
dl+dl {
dl + dl {
margin-top: 3rem;
}
@@ -3447,7 +3448,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 2rem;
}
}
@@ -3489,7 +3490,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -3629,12 +3630,12 @@ video::-webkit-media-controls {
}
.cartItemInfo {
>div {
> div {
display: flex;
align-items: center;
margin-top: 0;
>p {
> p {
margin-left: 0;
border-radius: 0;
overflow: hidden;
@@ -3708,7 +3709,7 @@ video::-webkit-media-controls {
}
}
dt+dd {
dt + dd {
margin-top: 0.5rem;
@include desktopMin {
@@ -3716,7 +3717,7 @@ video::-webkit-media-controls {
}
}
dd+dd {
dd + dd {
margin-top: 1.5rem;
font-size: 1.4rem;
@@ -3728,7 +3729,7 @@ video::-webkit-media-controls {
}
}
.cartItemInfo+dl {
.cartItemInfo + dl {
min-width: 20rem;
text-align: right;
@@ -3755,7 +3756,7 @@ video::-webkit-media-controls {
}
}
>dl {
> dl {
.couponBtn {
display: flex;
justify-content: flex-end;
@@ -3863,7 +3864,7 @@ video::-webkit-media-controls {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -3964,7 +3965,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -4023,7 +4024,7 @@ video::-webkit-media-controls {
padding: 0 3rem;
}
&+.content {
& + .content {
margin-top: 3rem;
padding-top: 6rem;
border-top: 1px solid #d9d9d9;
@@ -4083,7 +4084,7 @@ video::-webkit-media-controls {
margin-top: 4rem;
}
>p {
> p {
margin-top: 2rem;
line-height: 3rem;
font-size: 2.2rem;
@@ -4216,7 +4217,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
}
>span {
> span {
display: block;
@include maxtablet {
@@ -4233,7 +4234,7 @@ video::-webkit-media-controls {
font-size: 1.6rem;
}
&+.agree-area {
& + .agree-area {
margin-bottom: 4rem;
}
@@ -4374,7 +4375,7 @@ video::-webkit-media-controls {
padding: 0;
margin: 0 3rem;
&+.content {
& + .content {
padding: 6rem 0;
}
@@ -4447,7 +4448,7 @@ video::-webkit-media-controls {
margin-top: 4rem;
}
>p {
> p {
margin-top: 2rem;
line-height: 2.2rem;
font-size: 1.6rem;
@@ -4603,7 +4604,7 @@ video::-webkit-media-controls {
height: 40px;
}
.swiper-scrollbar-lock+.swiper-scrollbar-after-space {
.swiper-scrollbar-lock + .swiper-scrollbar-after-space {
display: none;
}
}
@@ -4647,7 +4648,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 1.5rem;
@include tablet {
@@ -4746,7 +4747,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -5180,4 +5181,4 @@ video::-webkit-media-controls {
max-width: 12.5rem;
}
}
}
}