Skip to content

Vero tweaks for PC by sergio9929

Screenshot of Vero tweaks for PC

Details

Authorsergio9929

LicenseNo License

Categoryvero

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Vero tweaks for PC
@homepageURL  https://sergio9929.github.io/vero-userstyle/
@supportURL   https://github.com/sergio9929/userstyles/issues
@version      20241022.0.1
@namespace    userstyles.world/user/sergio9929
@description  Some tweaks to how posts are displayed in Vero for PC
@author       sergio9929 (https://sergio-rodriguez.web.app/)
@license      No License

@preprocessor   stylus
@var    checkbox    wide    "Wide container"    1
@var    checkbox    square  "Square tile"       1
==/UserStyle== */
@-moz-document domain("vero.co") {
    body {
        background-color: #171717;
    }

    body footer,
    body header {
        background-color: #111;
    }

    ._profile-page-container_5n5yl_1 {
        background-color: transparent;

        ._blurred-image-background_18ar0_1 {
            opacity: .1 !important;
            filter: blur(100px) !important;
        }

        if wide {
            ._top-bar-row_5n5yl_46 {
                max-width: 1920px !important;
                width: 100% !important;
                padding: 0 calc(100vw * .02666667);
                box-sizing: border-box;
            }

            @media (min-width: 769px) {
                ._user-profile-header-columns-wrapper_d2qyt_13 {
                    grid-template-columns: minmax(224px, auto) 1fr;
                    gap: 16px 48px;
                    min-height: auto;
                    padding-bottom: 36px;
                }

                ._left-column_d2qyt_20 {
                    grid-row: span 2;
                }

                ._middle-column_d2qyt_24 {
                    padding: 0;
                }

                ._right-column_d2qyt_27 {
                    grid-column: 2 / -1 !important;
                    display: flex;
                    gap: 48px;
                }

                ._user-profile-header-container_d2qyt_10 ._connections-metrics-container_d2qyt_117 ._connections-number_d2qyt_120,
                ._user-profile-header-container_d2qyt_10 ._connections-metrics-container_d2qyt_117 ._connections-subtitle_d2qyt_127 {
                    text-align: inherit;
                }
            }

            ._posts-menu-row_5n5yl_15 {
                display: grid;
                justify-content: left;
            }

            ._tabs-bar-anchor_5n5yl_135 {
                grid-column: 1;
                grid-row: 1;
                width: 100%;
            }

            ._tabs-bar-container_5n5yl_93 {
                grid-column: 1;
                grid-row: 1;
                width: auto;
                max-width: 100%;
                overflow: hidden;
                position: static;
            }

            ._tabs-bar-sticked-top_5n5yl_122 {
                position: absolute;
                left: calc(100vw * .02666667);
                right: calc(100vw * .02666667);
            }

            ._profile-page-scrollable-centered-child_5n5yl_158 {
                max-width: 1920px !important;
                width: 100% !important;
                padding: 0 calc(100vw * .02666667);
            }

            ._profile-page-scrollable_5n5yl_139 {
                padding: 0;
            }

            ._posts-grid-wrapper_13isk_13 {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
                width: 100% !important;
            }

            @media (max-width: 980px) {
                ._posts-grid-wrapper_13isk_13 {
                    grid-template-columns: repeat(3, 1fr) !important;
                }
            }

            @media (max-width: 768px) {
                ._posts-grid-wrapper_13isk_13 {
                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
                }
            }

            ._webview-footer-wrapper_ktriw_10 {
                display: flex;
                justify-content: center;
            }

            ._webview-footer_ktriw_10 {
                position: static;
                transform: none;
                max-width: 1920px !important;
                width: 100% !important;
                padding-inline: calc(100vw * .02666667);
            }
        }


        ._user-profile-post-container_tl1o6_10,
        ._user-profile-post-container-placeholder_tl1o6_181 {
            if square {
                aspect-ratio: 1;
            }
            else {
                aspect-ratio: 2 / 3;
            }
            position: relative;
            z-index: 0;
            overflow: hidden;
            box-shadow: 0px 0px 0px 0px rgb(0 204 204 / 0%),
            0px 10px 30px -10px rgb(0 0 0 / 75%);
            border-radius: 10px;
            padding: 0;
            transition: transform .25s ease-out,
            box-shadow .25s;
        }

        ._user-profile-post-container_tl1o6_10:hover {
            transform: scale(1.05);
            box-shadow: 0px 0px 0px 4px rgb(0 204 204), 0px 10px 45px -10px rgb(0 0 0 / 90%);
            z-index: 1;
        }

        ._user-profile-post-container_tl1o6_10:active {
            transition: transform .1s ease-out, box-shadow .25s;
            transform: scale(1);
        }

        ._user-profile-post-content_tl1o6_98 {
            padding-top: 0;
            position: absolute;
            inset: 0;
            z-index: -1;
            transform: scale(1.03);
            transition: transform .25s ease-out;
        }

        ._user-profile-post-container_tl1o6_10:hover ._user-profile-post-content_tl1o6_98 {
            transform: scale(1);
        }

        ._user-profile-post-footer_tl1o6_135 {
            background: linear-gradient(rgb(0 0 0 / 75%) 0%, transparent 50%);
            padding: 15px;
            width: 100%;
            box-sizing: border-box;
        }
    }



    /* BACKWARD COMPATIBILITY */
    .background canvas {
        opacity: .1
    }

    .content-inner {
        max-width: 1920px;
        width: 100%;
    }

    body view.profile .profile-header .user-details {
        vertical-align: middle;
    }

    body view.profile .grid-filters-container .grid-filters {
        justify-content: flex-start;
    }

    .user-posts {
        float: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px;
        margin-top: 40px;
    }

    li.post-preview {
        margin: 0 !important;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        background: rgb(255 255 255 / 5%);
        box-shadow: 0px 0px 0px 0px rgb(0 204 204 / 0%), 0px 10px 30px -10px rgb(0 0 0 / 75%);
        border-radius: 10px;
        transition: transform .25s ease-out, box-shadow .25s;
    }

    li.post-preview:hover {
        transform: scale(1.05);
        box-shadow: 0px 0px 0px 4px rgb(0 204 204), 0px 10px 45px -10px rgb(0 0 0 / 90%);
        z-index: 1;
    }

    li.post-preview:active {
        transition: transform .1s ease-out, box-shadow .25s;
        transform: scale(1);
    }

    li.post-preview a .preview-content {
        position: absolute;
        height: 100%;
        z-index: 0;
        transform: scale(1.03);
        transition: transform .25s ease-out;
    }

    li.post-preview:hover a .preview-content {
        transform: scale(1);
    }

    li.post-preview a .preview-footer {
        --padding: 15px;
        background: linear-gradient(rgb(0 0 0 / 75%) 0%, transparent 50%);
        padding: var(--padding);
        width: calc(100% - (var(--padding) * 2));
        max-height: calc(100% - (var(--padding) * 2));
        height: calc(100% - (var(--padding) * 2));
    }

    li.post-preview,
    li.post-preview a .preview-content {
        float: none !important;
    }

    li.post-preview a .preview-footer,
    li.post-preview a .preview-footer .post-type {
        float: none !important;
    }

    /* ventana emergente */
    @media (min-width: 736px) {
        body.modal-opened.modal-options-menu.modal-options-profile .profile {
            filter: blur(20px);
        }

        .post-container {
            opacity: 0;
        }

        body.midview-opened .post-container {
            transition: transform .5s, opacity .5s;
            transform: scale(1);
            opacity: 1;
        }

        .midview-bg {
            transition: opacity .3s;
        }

        body.midview-opened .midview-bg .midview-dialog .mid-btn {
            transition: transform .5s .1s;
            transform: translateX(0px);
        }

        body .midview-bg .midview-dialog .prev-btn {
            transform: translateX(50px);
        }

        body .midview-bg .midview-dialog .next-btn {
            transform: translateX(-50px);
        }

        body .midview-bg .midview-dialog .midview-post {
            border-radius: 10px;
        }

        .post-container {
            border-radius: 10px;
            background-color: rgb(34 34 34 / 90%);
            box-shadow: 0 7px 20px 0 rgb(0 0 0 / 30%);
            transform: scale(.8);
        }

        .post-container .post-visual-content.desktop {
            border-radius: 10px;
        }

        /* fondo borroso de la ventana emergente */
        body .midview-bg .midview-dialog .post-container {
            overflow: hidden;
        }

        body .midview-bg .midview-dialog .post-visual-content,
        body .midview-bg .midview-dialog .content-background {
            display: contents!important;
            position: static!important;
            transform: none!important;
        }

        body .midview-bg .midview-dialog .content-wrapper.portrait {
            position: static!important;
            transform: none!important;
        }

        body .midview-bg .midview-dialog .content-background > canvas {
            width: 100%!important;
            height: auto!important;
            opacity: .2;
        }

        body .midview-bg .midview-dialog .mid-dialog-spinner.post-img {
            top: 0!importan...

Reviews

No reviews yet.