Vero tweaks for PC by sergio9929

/* ==UserStyle==
@name         Vero tweaks for PC
@version      20230305.05.19
@namespace    userstyles.world/user/sergio9929
@description  Some tweaks to how posts are displayed in Vero for PC
@author       sergio9929
@license      No License
==/UserStyle== */

@-moz-document domain("vero.co") {
body {
    background-color: #171717;
}

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

.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: rgba(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!important;
        left: 0!important;
        width: 400px!important;
        height: 600px!important;
        max-height: 600px!important;
        display: flex!important;
        justify-content: center!important;
        align-items: center!important;
    }

    body .midview-bg .midview-dialog .mid-dialog-spinner.post-img img {
        display: block;
    }
}
}