gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. 공통 스크롤바 스타일 적용

Browse Source
This commit is contained in:
clkim
2025-11-14 16:05:00 +09:00
parent a9d34f0a38
commit fef21d87fd
5 changed files with 24 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layers/assets/css/app.css
View File

@@ -3,6 +3,7 @@
@import './base/_font.css';
@import './base/_transition.css';
@import './components/_scrollbar.css';
@import './components/_button.css';
@import './components/_layout.css';
@import './components/_modal.css';

14
layers/assets/css/components/_scrollbar.css Normal file
View File

@@ -0,0 +1,14 @@
body ::-webkit-scrollbar-track {
@apply bg-transparent;
}
body ::-webkit-scrollbar {
@apply w-5;
}
body ::-webkit-scrollbar-thumb {
@apply w-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-8;
}
.custom-theme-scrollbar::-webkit-scrollbar-thumb {
@apply bg-[var(--foreground-reversal-15)];
}

9
layers/components/blocks/modal/Content.vue
View File

@@ -153,13 +153,4 @@ watch(isOpen, newVal => {
.content-tex {
@apply overflow-y-auto mb-4 px-6 sm:mb-6 sm:px-8;
}
.content-tex::-webkit-scrollbar-track {
@apply bg-transparent;
}
.content-tex::-webkit-scrollbar {
@apply w-5;
}
.content-tex::-webkit-scrollbar-thumb {
@apply w-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-8;
}
</style>

8
layers/components/layouts/Header.vue
View File

@@ -252,7 +252,7 @@ onMounted(() => {
</AtomsLocaleLink>
</div>
<nav class="nav-list">
<div v-if="gnbData?.menus" class="official">
<div v-if="gnbData?.menus" class="official custom-theme-scrollbar">
<div
v-for="(gnbItem, key) in gnbData?.menus"
:key="key"
@@ -515,6 +515,12 @@ onMounted(() => {
.official {
@apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0 md:overflow-visible;
}
.custom-theme-scrollbar::-webkit-scrollbar {
@apply w-1;
}
.custom-theme-scrollbar::-webkit-scrollbar-thumb {
@apply border-0;
}
.more {
@apply relative hidden ml-[32px] pt-[11px] md:block;

27
layers/components/widgets/modal/Preregist.vue
View File

@@ -280,7 +280,7 @@ defineExpose({
class="absolute left-0 right-0 top-0 bg-gradient-to-b from-[#292929] to-transparent z-[1] h-[24px] md:h-[32px]"
></div>
<div
class="overflow-y-auto h-full py-[24px] px-5 md:py-[32px] md:px-10"
class="overflow-y-auto h-full py-[24px] px-5 md:py-[32px] md:px-10 custom-theme-scrollbar"
>
<div class="px-3 py-4 md:px-6">
<div class="flex cursor-pointer items-center gap-3 md:gap-4">
@@ -308,7 +308,7 @@ defineExpose({
<!-- Marketing Detail Content -->
<div
v-if="isExpandedMarketing"
class="mt-4 max-h-[160px] overflow-y-auto rounded-lg bg-white/[0.04] px-4 py-3"
class="mt-4 max-h-[160px] overflow-y-auto rounded-lg bg-white/[0.04] px-4 py-3 custom-theme-scrollbar"
>
<p
v-dompurify-html="tmWithGameName('Preregist_Agree_News_Info')"
@@ -426,27 +426,4 @@ defineExpose({
.modal-wrap:deep(.modal-close) svg {
@apply fill-white;
}
/* Custom scrollbar for accordion content */
:deep(.overflow-y-auto) {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
:deep(.overflow-y-auto::-webkit-scrollbar) {
width: 4px;
}
:deep(.overflow-y-auto::-webkit-scrollbar-track) {
background: transparent;
}
:deep(.overflow-y-auto::-webkit-scrollbar-thumb) {
background: rgba(255, 255, 255, 0.15);
border-radius: 999px;
}
:deep(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
background: rgba(255, 255, 255, 0.25);
}
</style>