vk.user.css

/* ==UserStyle==
@name           VK style fixes
@version        1.0.13
@description    Small stylesheets for new VK interface.
@author         sergskokow (https://vk.com/sergskokow)
@namespace      https://github.com/sergskokow/VK_style_fixes
@homepageURL    https://github.com/sergskokow/VK_style_fixes
@updateURL      https://raw.githubusercontent.com/sergskokow/VK_style_fixes/master/vk.user.css
@preprocessor   stylus
@var            checkbox    colored_bar           'Colored bar'                         1
@var            color       bar_color             'Bar color'                           #b0c4de
@var            checkbox    links                 'Custom link color'                   0
@var            color       link_color            'Link color'                          #2a5885
@var            checkbox    show_call_buttons     'Show call buttons 📞'                1
@var            checkbox    highlight_editable    'Highlight editable messages'         1
@var            checkbox    reactions             'Show reactions ❤️😂😮😍😥🤬'        1
@var            checkbox    services              'Show VK services'                    1
@var            text        background_url        'Background image URL with quotes'    none
@var            checkbox    panels                'Translucent panels'                  0
@var            color       panel_color           'Panels color'                        #ffff
==/UserStyle== */
@-moz-document domain("vk.com") { /* Colored icons */
    #l_pr .LeftMenu__icon { /* Profile page */
        color: MediumPurple;
    }
    #l_nwsf .LeftMenu__icon { /* News feed */
        color: BurlyWood;
    }
    #l_msg .LeftMenu__icon { /* Messenger */
        color: DeepSkyBlue;
    }
    #l_ca .LeftMenu__icon { /* Calls */
        color: LimeGreen;
    }
    #l_fr .LeftMenu__icon { /* Friends */
        color: Green;
    }
    #l_gr .LeftMenu__icon { /* Groups */
        color: LightSeaGreen;
    }
    #l_ph .LeftMenu__icon { /* Photos */
        color: Coral;
    }
    #l_aud .LeftMenu__icon { /* Music */
        color: Fuchsia;
    }
    #l_vid .LeftMenu__icon { /* Video */
        color: Red;
    }
    #l_mini_apps .LeftMenu__icon { /* Mini-apps */
        color: SteelBlue;
    }
    #l_mk .LeftMenu__icon { /* Market */
        color: DarkOrchid;
    }
    #l_fav .LeftMenu__icon { /* Favorites */
        color: Gold;
    }
    #l_doc .LeftMenu__icon { /* Files */
        color: DarkGray;
    }
    #l_svd .LeftMenu__icon { /* Clips */
        color: Black;
    }
    body[scheme='vkcom_dark'] #l_svd .LeftMenu__icon { /* Clips (dark theme) */
        color: White;
    }
    #l_ap .LeftMenu__icon { /* Games */
        color: DarkGray;
    }
    #l_stickers .LeftMenu__icon { /* Stickers */
        color: SandyBrown;
    }
    #l_vkp .LeftMenu__icon { /* VK Pay */
        color: Goldenrod;
    }
    #l_job .LeftMenu__icon { /* Job */
        color: CadetBlue;
    }
    #l_ads .LeftMenu__icon { /* Ads */
        color: LightCoral;
    }
    #l_mini_apps .LeftMenu__icon { /* Mini apps */
        color: MediumTurquoise;
    }
    #l_apm .LeftMenu__icon { /* Manage */
        color: FireBrick;
    }
}
@-moz-document domain("vk.com") { /* Fixed sidebar */
    #side_bar {
        position: sticky;
        top: 0 !important;
    }
}
@-moz-document domain("vk.com") { /* Colored bar */
    #page_header_cont { /* Bar color */
        if colored_bar {
            background-color: bar_color !important;
        }
    }
    .TopNavBtn svg,
    .top_audio_player_btn svg { /* Bar buttons & text */
        color: Black;
    }
    body[scheme='vkcom_dark'] .TopNavBtn svg,
    body[scheme='vkcom_dark'] .top_audio_player_btn svg { /* Bar buttons & text (dark theme) */
        color: White;
    }
    .top_audio_player_title {
        color: Black !important;
    }
    body[scheme='vkcom_dark'] .top_audio_player_title {
        color: White !important;
    }
}
@-moz-document domain("vk.com") { /* Hide call buttons */
    if !show_call_buttons {
        ._im_create_call,
        .im-page--header-call,
        .FCWindow__actions button[class=FCIconButton] {
            display: none;
        }
    }
}
@-moz-document domain("vk.com") { /* Highlight messages */
    .im-mess_unread { /* Unread messages */
        background: LightBlue !important;
    }
    body[scheme='vkcom_dark'] .im-mess_unread { /* Unread messages (dark theme) */
        background: DarkSlateGray !important;
    }
    if highlight_editable {
        .im-mess_editable { /* Editable messages */
            border: 2px dashed LightGray;
            border-radius: 10px;
        }
        body[scheme='vkcom_dark'] .im-mess_editable { /* Editable messages (dark theme) */
            border: 2px dashed #494949;
        }
    }
    .nim-dialog_unread { /* Unread by owner */
        background: LightBlue !important;
    }
    body[scheme='vkcom_dark'] .nim-dialog_unread { /* Unread by owner (dark theme) */
        background: #494949 !important;
    }
    .nim-dialog_unread-out { /* Unread by other users */
        background: LightSteelBlue !important;
    }
    body[scheme='vkcom_dark'] .nim-dialog_unread-out { /* Unread by other users (dark theme) */
        background: #2e2e2e !important;
    }
    .nim-dialog--unread { /* Unread dialog sign and message counter */
        background: SteelBlue !important;
    }
    body[scheme='vkcom_dark'] .nim-dialog--unread { /* Unread dialog sign and message counter (dark theme) */
        background: #b3a592 !important;
    }
}
@-moz-document domain("vk.com") { /* Highlight users online */
    ._online.online:not(.fc_contact_photo) {
        border-radius: 50%/50%;
        box-shadow: 0 0 1px 3px LimeGreen;
    }
}
@-moz-document domain("vk.com") { /* Reactions */
    if !reactions {
        .ReactionsMenu {
            display: none;
        }
    }
}
@-moz-document domain("vk.com") { /* Background image and interface */
    body {
        background-image: url(background_url) !important;
        background-attachment: fixed !important;
        background-size: cover !important;
    }
    .page_block,
    #side_bar_inner,
    .chat_onl_inner { /* All panels */
        if panels {
            background-color: panel_color !important;
        }
    }
    ._im_bar_date,
    ._im_unread_bar_row { /* Transparent message separators */
        background: #0000 !important;
    }
    #side_bar_inner { /* Opaque sidebar for better view with background image */
        if panels {
            width: 100%;
            padding-left: 10px;
            margin-top: 63px;
            padding-top: 10px;
            border-radius: 4px;
            box-shadow: var(--page-block-shadow);
        }
    }
    a.left_row {
        if panels {
            width: 100% !important;
        }
    }
    #page_layout {
        if panels {
            width: calc(var(--layout-width) + 10px);
        }
    }
    #page_header_cont { /* Bar bottom border */
        border-bottom: 0 !important;
    }
    a {
        if links {
            color: link_color;
        }
    }
    .label:hover {
        if links {
            color: link_color !important;
        }
    }
}
@-moz-document domain("vk.com") { /* Display VK ecosystem services */
    #react_rootEcosystemServicesNavigationEntry {
        if !services {
            display: none;
        }
    }
}