Skip to content

Anilist modern rounded style by linked

Screenshot of Anilist modern rounded style

Details

Authorlinked

LicenseNo License

Categoryanilist

Created

Updated

Size6.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Anilist style where everything is rounded amd there is blur

Notes

use dark mode

Source code

/* ==UserStyle==
@name           AL modern rounded
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         linked
==/UserStyle== */
@-moz-document domain("anilist.co") {

    .cover,
    .avatar,
    .page-content .home *:not(.markdown, p, a),
    .page-content .forum-feed *:not(.markdown, p, a),
    .page-content .forum-thread *:not(.markdown, p, a),
    .page-content .media *:not(.markdown, p, a),
    .page-content .settings *:not(.markdown, p, a),
    .page-content > .container > .activity-entry *,
    .el-dialog.list-editor .body * {
        border-radius: 8px !important;
    }
    .page-content .media .header,
    .page-content .search *:not(.handle, .title),
    .quick-search.visible *,
    .page-content .media .cover-wrap-inner .cover,
    .el-dialog__body .header {
        border-radius: 16px !important;
    }
    .page-content .media .header .container {
        padding-top: 20px;
        
    }
    .page-content .media .banner + .header .container {
        margin-top: -20px;
    }

    #app .category,
    #app .tag,
    #app .filter {
        border-radius: 9999px !important;
    }


    .el-dialog__body {
        background: #131c28 !important;
    }
    .el-dialog__body {
        border-radius: 16px !important;
    }
    .media-preview-card:nth-child(-n+5) .content,
    .el-dialog__wrapper.list-editor-wrap {
        background: rgba(var(--color-foreground), 0.8) !important;
        backdrop-filter: blur(8px) !important;
    }
    .page-content .media .episode:nth-child(-n+12) .title{
        background: rgba(var(--color-foreground), 0.8) !important;
        backdrop-filter: blur(4px) !important;        
    }
    .media-preview-card:nth-child(-n+10) .image-text,
    .media-preview-card:nth-child(-n+10) .plus-progress,
    .review-card:nth-child(-n+4) .read-review {
        backdrop-filter: blur(4px) !important;
    }

    .site-theme-dark .overview .favourites .favourite.studio {
        background: rgb(var(--color-foreground)) !important;
    }
    .markdown, p, a {
        border-radius: 0 !important;
    }
    
    @media (min-width: 1040px) {
        .home.full-width:has(.media-preview-card:nth-child(10)) {
            display: block !important;
        }
        .home.full-width:has(.media-preview-card:nth-child(10)) .list-preview {
            grid-template-columns: repeat(auto-fill,85px) !important;
        }
    }
    

    /*===============================================
        Navigation bar modifications
    ===============================================*/
    .nav .wrap {
        display: grid;
        grid-template-columns: 70px auto auto 70px;
    }
    .nav .wrap .links {
        grid-column-start: 3;
        margin-left: -25px;
    }

    .nav .wrap .search {
        grid-column-start: 2;
        grid-row-start: 1;
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 35px;
        width: 100%;
        cursor: text;
    }
    
    .quick-search.visible > .input {
        padding: 0 16px;
        border-radius: 999px;
    }
    .nav .wrap .search:after {
        content: "Search AniList";
        margin-left: 10px;
        color: #777a9e;
    }

    .nav .wrap .user {
        grid-column-start: 4;
        grid-row-start: 1;
    }

    .list .dropdown.el-dropdown {
        background: none !important;
    }

    /*===============================================
        Homepage feed modifications
    ===============================================*/
    /* Text status full height on */
    
/*     .activity-entry.activity-text .wrap .text .markdown,
    .activity-entry.activity-text .wrap .activity-markdown {
        transform: scale(1) !important;
        max-height: none !important;
    } */

    /*===============================================
        Navigation bar and footer modifications
    ===============================================*/
    @media screen and (min-width: 1040px) {
        #app #nav {
            background: rgba(var(--color-foreground), 0.8) !important;
            backdrop-filter: blur(10px) !important;
        }
    }

    @media screen and (min-width: 1140px) {
        .wrap > .footer {
            max-width: 1320px;
            margin: 0 auto 20px;
            border-radius: 16px;
        }
        #app #nav {
            margin-top: 8px;
            max-width: 1320px;
            left: 50%;
            transform: translate(-50%, 0);
            border-radius: 16px;
        }
        .quick-search.visible {
            margin-top: -8px;
            left: 50%;
            transform: translate(-50%, 0);
        }
    }

    @media screen and (max-width: 1540px) and (min-width: 1140px) {
        .wrap .footer {
            max-width: 1040px !important;
        }
        #app #nav {
            max-width: 1040px !important;
        }
    }



    @media screen {
        .dropdown {
            box-shadow: none;
            border-radius: 8px !important;
            background-color: rgb(var(--color-background)) !important;
        }
        .dropdown .primary-links {
            background-color: rgb(var(--color-foreground)) !important;
            border-radius: 8px !important;
            margin-bottom: 0px;
            padding-bottom: 3px;
        }
        .dropdown .footer {
            background: none;
        }
    }


    /*===============================================
        Scrollbar modifications
    ===============================================*/
    body {
        overflow: scroll;
        overflow: overlay;
    }
    body::-webkit-scrollbar {
        background-color: rgba(255, 255, 255, 0);
        width: 20px;
    }
    body::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0);
    }
    body::-webkit-scrollbar-thumb {
        border: 8px solid rgba(0, 0, 0, 0);
        background-color: rgba(141, 178, 219, 0.75);
        background-clip: padding-box;
        border-radius: 9999px;
    }
    body::-webkit-scrollbar-thumb:hover {
        border: 6px solid rgba(0, 0, 0, 0);
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(141, 178, 219, 0.75) !important;
        border-radius: 15px;
        width: 4px
    }
    .about .content-wrap[data-v-5c30286e]::-webkit-scrollbar {
        background-color: rgba(255, 255, 255, 0);
        width: 4px
    }
    .about .content-wrap[data-v-5c30286e]::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0);
    }
    .about .content-wrap[data-v-5c30286e]::-webkit-scrollbar-thumb {
        background-color: rgba(141, 178, 219, 0.20) !important;
        border-radius: 10px;
    }
}

Reviews

No reviews yet.