♾️ Finity

[Rethgash]

Beautiful theme.

Just one change:

- Add a scroll menu for Subtitles and Audio.

Code:

html {
  box-sizing: border-box;
  font-family: var(--font-family-base) !important;
  margin: 0;
  padding: 0;
  background-color: var(--theme-background-color);
  <div class="scroll-menu">
    <button class="scroll-menu-item">Option 1</button>
    <button class="scroll-menu-item">Option 2</button>
    <button class="scroll-menu-item">Option 3</button>
    <button class="scroll-menu-item">Option 4</button>
    <button class="scroll-menu-item">Option 5</button>
    <!-- Add more items as needed; scrolling will activate if content exceeds max-height -->
</div>
}

Code:

/* Center specific context menus (e.g., Cast, SyncPlay) and adjust their width */
.dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.centeredDialog:not(:has(button[data-id="edit"], button[data-id="delete"], button[data-id="addtocollection"], button[data-id="refresh"], button[data-id="download"])),
.dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.syncPlayGroupMenu {
    position: fixed !important;
    top: 77% !important;
    left: 85% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-sizing: border-box;
    border-radius: var(--theme-roundness-large) !important;
    background-color: var(--header-bg) !important;

    height: auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: 8px 0; /* Padding for menu items */

    /* --- Responsive Width --- */
    /* Default for larger screens (tablets and desktops) */
    width: clamp(340px, 30vw, 600px) !important;

    /* Custom scrollbar styling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.5)) var(--scrollbar-track, transparent); /* Firefox */

    /* Webkit browsers (Chrome, Safari, Edge) */
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: var(--scrollbar-track, transparent);
    }

    &::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.5));
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.7));
    }

    /* Scroll menu container */
    .scroll-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Scroll menu items */
    .scroll-menu-item {
        display: block;
        padding: 12px 16px;
        color: var(--text-color, #fff);
        text-decoration: none;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 1rem;
    }

    .scroll-menu-item:hover {
        background-color: var(--hover-bg, rgba(255, 255, 255, 0.1));
    }

    /* Optional: Active/selected state */
    .scroll-menu-item.active {
        background-color: var(--active-bg, rgba(255, 255, 255, 0.2));
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.centeredDialog,
    .dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.syncPlayGroupMenu {
        width: clamp(280px, 80vw, 400px) !important;
        top: 50% !important;
        left: 50% !important;
    }

    .scroll-menu-item {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}