Leahnaya/PhaseWeb3-Vue
1
0
Fork 0
mirror of https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue.git synced 2026-08-28 12:04:16 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Clean up scroll bars and timeline.
Some checks failed
Build / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Trenton Zimmer
2024-10-21 23:44:16 -04:00
parent 4640ec6567
commit b80765e6a4
2 changed files with 57 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/css/_scrollbars.css
View File

@@ -1,41 +1,57 @@
@layer base {
html {
scrollbar-width: thin;
scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251);
body {
--sb-track-color: #0f172a;
--sb-thumb-color: #1e293b;
--sb-size: 10px;
}
body::-webkit-scrollbar {
width: 8px;
height: 8px;
}
body::-webkit-scrollbar-track {
@apply bg-gray-50;
}
body::-webkit-scrollbar-thumb {
@apply bg-gray-400 rounded;
}
body::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
}
}
@layer utilities {
.dark-scrollbars-compat {
scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
body::-webkit-scrollbar {
width: var(--sb-size)
}
.dark-scrollbars::-webkit-scrollbar-track {
@apply bg-slate-800;
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 4px;
}
.dark-scrollbars::-webkit-scrollbar-thumb {
@apply bg-slate-600;
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 4px;
}
.dark-scrollbars::-webkit-scrollbar-thumb:hover {
@apply bg-slate-500;
@supports not selector(::-webkit-scrollbar) {
body {
scrollbar-color: var(--sb-thumb-color)
var(--sb-track-color);
}
}
.scrollbar {
--sb-track-color: #0f172a;
--sb-thumb-color: #1e293b;
--sb-size: 10px;
}
.scrollbar::-webkit-scrollbar {
width: var(--sb-size)
}
.scrollbar::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 4px;
}
.scrollbar::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 4px;
}
@supports not selector(::-webkit-scrollbar) {
.scrollbar {
scrollbar-color: var(--sb-thumb-color)
var(--sb-track-color);
}
}
}

13
src/views/Game/PlayerView.vue
View File

@@ -523,23 +523,26 @@ async function generateTimeline(myProfile) {
<div class="my-6">
<CardBox>
<ol
class="border-s border-neutral-300 md:flex md:justify-center md:gap-6 md:border-s-0 md:border-t"
class="border-s border-neutral-300 md:flex md:justify-start md:gap-10 md:border-s-0 md:border-t md:overflow-x-auto overflow-y-visible md:whitespace-nowrap scrollbar"
>
<li
v-for="playHistory of myProfile?.timeline"
v-for="playHistory of JSON.parse(
JSON.stringify(myProfile?.timeline)
).reverse()"
:key="playHistory.timestamp"
class="md:inline-block flex-shrink-0"
>
<div
class="flex-start flex items-center pt-2 md:block md:pt-0"
class="flex-start flex items-center pt-2 md:block md:pt-4"
>
<div
class="-ms-[5px] me-3 h-[9px] w-[9px] rounded-full bg-gray-300 md:-mt-[5px] md:me-0 md:ms-0"
class="-ms-[6px] me-3 h-[12px] w-[12px] md:w-0.5 md:h-4 rounded-full md:rounded-none bg-gray-300 md:-mt-6 md:me-0 md:ms-0"
></div>
<p class="mt-2 text-sm font-light">
{{ playHistory.timestamp }}
</p>
</div>
<div class="ms-4 pb-4 md:ms-0">
<div class="ms-4 pb-6 md:ms-0">
<h4 class="text-lg font-semibold">
{{ playHistory.arcade }}
</h4>