Offprint Eyecandy & Fixes by TheMajorTechie

/* ==UserStyle==
@name         offprint eyecandy and fix v1.0.0-beta9
@version      20231204.04.51
@namespace    ?
==/UserStyle== */

@-moz-document domain("offprint.cafe") {
/*Optional: style all scrollbars everywhere*/
body {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dark) var(--accent-light);
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--accent-dark); 
}

.blog-body flex-1 {
    overflow-y: hidden;
}

/*add a very short translate animation to make the site feel more fluid*/
nav a .link-icon {
    transition: all .125s;
}
nav a .link-name {
    transition: all .125s;
}
nav a:hover .link-icon {
    transform: translateY(-5px);
    transition: all .25s;
}
nav a:hover .link-name {
    transform: translateY(5px);
    transition: all .25s;
}
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px var(--accent);
    transition: all .25s;
}

/*make role badges do a little shimmy on hover*/
.role:hover {
    animation-name: role-ani;
    animation-duration: 2s;
}
@keyframes role-ani {
    10%, 30%, 70%, 90% {
        transform: rotate(3deg); 
    }
    20%, 40%, 60%, 80% {
        transform: rotate(-3deg);
    }
}
.stat-box:hover .remixicon {
    animation-name: icon-ani;
    animation-duration: 1s;
}

/*reusable animation for "jumping" icons*/
@keyframes icon-ani {
    0%, 10% {
        transform: translateY(0px);
    }
    10%, 50% {
        transform: translateY(-5px) rotate(5deg);
    }
    50%, 90% {
        transform: translateY(-5px) rotate(-5deg);
    }
    90%,100% {
        transform: translateY(0px);
    }
}

/*add some animation to the buttons on the dashboard*/
.panel-section .nav-button:hover .remixicon {
    color: var(--accent);
}
.feature-link:hover .remixicon {
    animation-name: icon-ani;
    animation-duration: 1s;   
}
.work-card .remixicon:hover {
    animation-name: icon-ani;
    animation-duration: 1s;   
}

/*gives the chapter list a nice scrollbar using the chosen accent color*/


ul.mt-4.w-full {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dark) var(--accent-light);
/*puts a border around the chapter list*/   
    border: 2px solid var(--accent-dark);
    border-radius: 5px;
}
ul.mt-4.w-full::-webkit-scrollbar {
    width: 10px;
}
ul.mt-4.w-full::-webkit-scrollbar-track {
    background: var(--accent-light);
    border-radius: 2px;
}
ul.mt-4.w-full::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: var(--accent-dark); 
}


/*chapter list quick-nav dropdown within chapters fix*/
.dropdown-items {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 250px;
    /*also need to remove "z-10" class from the button elements for "spoiler" and "post"*/
    scrollbar-width: thin;
    scrollbar-color: var(--accent-dark) var(--accent-light);
    border: 2px solid var(--accent-dark);
    border-radius: 5px;
}
.dropdown-items::-webkit-scrollbar {
    width: 10px;
}
.dropdown-items::-webkit-scrollbar-track {
    background: var(--accent-light);
    border-radius: 5px;
    /*this border has to be a little more rounded due to the smaller box, whereas the main chapter list has little issue*/
}
.dropdown-items::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: var(--accent-dark); 
}

/*puts some separation between the chapter link and the options button*/
ul.mt-4.w-full button {
    border: 1px var(--accent);
    border-style:none none none solid;
}

/*fix the links on the toolbar (overflows from the container div as-is)*/
.tool-bar .flex-col {
    max-height: 200px;
}

/*fix the spacing between cards on a grid view*/
/*non-CSS solution: the work cards list is missing "gap-4" on it*/
.mx-auto .mb-6 .grid {
    gap: 1rem;
    row-gap: 1rem;
    column-gap: 1rem;
}

/*make popup containers a little more visibly separated from background elements*/
.popup-container .rounded-xl {
    border: 2px var(--accent);
    border-style:solid solid solid solid;   
}

/*Add button-clicked feedback to genre buttons*/
.border-blue-300 button.tag-pill.genre {
    background-color: rgb(22 101 52 / var(--tw-bg-opacity));
    border: rgb(22 101 52 / var(--tw-bg-opacity));
    border-style:solid solid solid solid;   
}
}