/* ==UserStyle==
@name         Webogram X
@description  Dark theme for Telegram Web
@namespace    d-Rickyy-b
@homepageURL  https://github.com/d-Rickyy-b/webogram-x
@updateURL    https://raw.githubusercontent.com/d-Rickyy-b/webogram-x/master/webogram-x.user.css
@version      1.0.0
@license      MIT
@author       d-Rickyy-b
==/UserStyle== */
@-moz-document url-prefix("https://web.telegram.org/?legacy=1") {
    :root {
    --bg-color: #1d2733;
    --text-light: #e9e9e9;
    --color-gray: #999;
    --color-lighter-blue: #59a8e1;
    --color-light-blue: #6490b1;
    --color-dark-cold-blue: #222e3c;
    --color-dark-hover: #151e27;
    --color-dropdown-hover: #1a2530;
    --color-blue-slider-bg: #124763;
    --color-header: var(--color-dark-hover);
    --color-blue-slider: #1b6189;
    --color-code-bg: #11171e;
    --color-code-text: #a3a3a3;
    --color-chat-hover-selected: #131a22;
    --color-badge-muted: #7d8e98;
    --color-badge-unmuted: var(--color-lighter-blue);
    --color-emoji-panel: #0e141a;
    --color-list-item-link: #3a6d99;
    --color-contact-list-bg: #1c242d;
    --color-contact-list-hover: ;
    }
    
    html {
        background: var(--bg-color) !important;
        background-color: var(--bg-color) !important;
    }

    body {
        background-color: var(--bg-color);
        color: var(--color-gray);
        scrollbar-width: none;
    }

    .im_dialogs_scrollable_wrap a.im_dialog_searchpeer,
    .im_dialogs_scrollable_wrap a.im_dialog_searchpeer:hover,
    .im_dialogs_scrollable_wrap a.im_dialog_searchpeer_selected {
        background: var(--color-light-blue);
    }

    a.im_dialog_searchpeer .im_dialog_message {
        color: var(--text-light);
    }

    a {
        color: var(--color-light-blue);
    }

    .im_dialogs_col_wrap {
        background-color: var(--bg-color);
    }

    .dialogMessage.peerID,
    .im_dialog_peer {
        color: var(--text-light);
    }

    /* Site header "Telegram" */
    .tg_head_split {
        background-color: var(--color-dark-cold-blue);
        max-width: 1500px;
    }

    /* Message send frame */
    .im_send_panel_wrap {
        max-width: 790px;
    }

    .im_send_form {
        max-width: 620px;
    }

    .dropdown.open .tg_head_btn,
    .tg_head_btn:hover {
        background-color: var(--color-dark-cold-blue);
    }

    /* Chatlist - chat hover */
    .im_dialog_wrap:hover,
    .im_dialog_wrap:active {
        background-color: var(--color-dark-hover);
    }

    .im_dialogs_scrollable_wrap a.im_dialog:hover,
    .im_dialogs_scrollable_wrap a.im_dialog_selected {
        border-radius: 0;
        background: var(--color-dark-hover);
    }

    /* Unread messages bubble text color */
    .im_dialog_badge,
    .badge,
    .im_dialog_badge_muted {
        background-color: var(--color-badge-unmuted);
        color: var(--text-light);
    }

    .im_dialog_badge_muted {
        background-color: var(--color-badge-muted);
        color: var(--text-light);
    }

    .im_page_wrap {
        background-color: var(--color-dark-hover);
        border-color: var(--color-dark-hover);
        box-shadow: none;
        border-left: 1px solid var(--color-dark-hover);
        border-right: 1px solid var(--color-dark-hover);
        border-bottom: 1px solid var(--color-dark-hover);
        max-width: 1500px;
    }

    .im_message_wrap {
        max-width: 800px;
    }

    .im_bot_intro_message_wrap {
        color: var(--text-light);
    }

    .im_dialogs_col_wrap {
        border-right: 1px solid var(--color-dark-hover);
    }

    .im_history_pinned_wrap {
        border-bottom: 1px solid var(--color-emoji-panel);
    }

    .im_message_text,
    .im_message_webpage_description {
        color: var(--text-light);
    }

    .im_message_reply_body {
        color: var(--text-light);
    }

    /* Caption text color */
    .im_message_document_caption,
    .im_message_photo_caption,
    .im_message_video_caption {
        color: var(--text-light);
    }

    /* Media */
    .im_message_body_media .im_message_document,
    .im_message_body_media .im_message_audio {
        background-color: var(--bg-color);
    }

    /* Scrollbar */
    .im_history_col .nano > .nano-pane > .nano-slider {
        background-color: var(--color-blue-slider);
    }

    .im_history_col .nano > .nano-pane {
        background-color: var(--color-blue-slider-bg);
    }

    /* Search bar color */
    .im_dialogs_search {
        background-color: var(--bg-color);
    }

    .btn-md-primary:focus,
    .btn-md-primary:hover,
    .btn-md:hover {
        background-color: var(--color-blue-slider-bg);
    }

    .im_dialogs_search_field,
    .im_dialogs_search,
    .im_dialogs_search_field:focus,
    .im_dialogs_search:focus,
    .im_dialogs_modal_col_wrap .im_dialogs_search_field {
        border-color: var(--bg-color) !important;
        border: 1px solid var(--bg-color);
        border-radius: 2px;
        padding: 6px 26px 6px 30px;
        margin: 0;
        background-color: var(--bg-color);
        color: var(--text-light);
    }

    /* Mobile version text field */
    .composer_rich_textarea,
    .composer_rich_textarea:empty,
    .composer_rich_textarea:active,
    .composer_rich_textarea:focus {
        background-color: var(--bg-composer);
        border-color: var(--color-dark-hover);
        color: var(--text-light);
    }

    /* Chat list chat item */
    .im_dialogs_scrollable_wrap a.im_dialog {
        border-color: var(--color-dark-hover);
    }

    /* Mobile version header color */
    .tg_page_head .navbar-inverse {
        background-color: var(--color-dark-cold-blue);
    }

    /* User profile color */
    .md_modal_head {
        background-color: var(--color-dark-cold-blue);
    }

    .md_modal_footer,
    .md_modal_footer_empty {
        background-color: var(--color-dark-cold-blue);
    }

    .md_modal_body,
    .md_modal_body .tg_checkbox_label {
        color: var(--text-light);
        background-color: var(--bg-color);
    }

    .md_modal_section_splitter,
    .divider {
        box-shadow: inset 0 1px 1px var(--color-dark-hover);
        border-top: 1px solid var(--color-dark-hover);
        background-color: var(--color-dark-hover);
    }

    .md_modal_iconed_section_wrap {
        border-bottom: 1px solid var(--color-dark-hover);
    }

    .md_modal_split_action {
        background-color: var(--color-lighter-blue);
        color: var(--text-light);
    }

    /* Icons */
    .md_modal_split_action > i {
        filter: invert(33%);
    }

    .tg_checkbox_label {
        color: var(--text-light);
    }

    .tg_radio > span {
        color: var(--text-light);
    }
    
    /* Contact search modal */
    .modal-content {
        background-color: var(--color-contact-list-bg);
    }

    .contacts_modal_members_list a.contacts_modal_contact {
        color: var(--text-light);
        background-color: var(--bg-color);
    }
    
    .contacts_modal_members_list a.contacts_modal_contact:hover {
        background-color: var(--color-dark-hover);
    }
   
    /* Contact search modal - search bar */
    .contacts_modal_search > input.form-control.contacts_modal_search_field {
        border: 1px solid var(--bg-color) !important;
        background-color: var(--bg-color) !important;
        color: var(--text-light);
    }

    /* Dropdown menus */
    .dropdown-menu,
    .tg_head_logo_dropdown .dropdown-menu,
    .dropdown-menu > li > a {
        background-color: var(--color-dark-cold-blue);
        border-left-color: var(--color-dropdown-hover);
        border-right-color: var(--color-dropdown-hover);
        color: var(--color-list-item-link);
    }

    .tg_head_logo_dropdown .dropdown-menu > li > a:hover,
    .tg_head_peer_dropdown .dropdown-menu > li > a:hover {
        background-color: var(--color-dropdown-hover);
        color: var(--text-light);
    }

    .nav .open > a,
    .nav-pills > li.active > a
    {
        background-color: var(--color-dropdown-hover);
        color: var(--text-light);
    }

    .nav > li > a:hover,
    .nav .open > a:hover,
    .nav-pills > li.active > a:hover,
    .dropdown-menu > li:hover,
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li.active > a {
        background-color: var(--color-dropdown-hover);
        color: var(--text-light);
    }


    /* Select messages */
    .im_message_selected > div.im_message_outer_wrap,
    .im_message_selected > div.im_message_outer_wrap:hover,
    .im_history_select_active .im_message_outer_wrap:hover {
        background-color: var(--color-chat-hover-selected);
    }

    .im_history_select_active .im_message_outer_wrap:hover .icon-document,
    .im_message_selected .icon-document {
        background-color: var(--color-chat-hover-selected);
    }

    .im_message_document_thumb_wrap {
        background-color: var(--color-chat-hover-selected);
    }

    .im_message_unread_split {
        background-color: var(--color-chat-hover-selected);
    }

    /* Textfield */
    .composer_rich_textarea {
        color: var(--text-light);
    }

    .im_send_dropbox_wrap {
        background-color: var(--color-dark-hover);
    }

    /* Voice recording button background */
    .im_record_bg {
        background-color: transparent;
    }

    /* Emoji Panel */
    .composer_emoji_tooltip_content,
    .composer_emoji_tooltip_content_emoji,
    .composer_emoji_tooltip_tabs,
    .composer_emoji_tooltip_tabs_wrap {
        background-color: var(--color-chat-hover-selected);
    }

    .icon-tooltip-tail {
        background-color: var(--color-chat-hover-selected);
        border: 1px solid var(--color-chat-hover-selected);
    }

    .composer_emoji_tooltip {
        background-color: var(--color-chat-hover-selected);
        border: none;
    }

    .composer_dropdown_wrap {
        background-color: var(--color-dark-hover);
    }

    [class="composer_emoji_tooltip_category"] i {
        filter: invert(100%);
    }

    a.composer_emoji_btn:hover {
        background-color: var(--color-emoji-panel);
    }

    .composer_dropdown li a:hover,
    .composer_dropdown li.composer_autocomplete_option_active a {
        background-color: var(--color-emoji-panel);
    }

    .footer_wrap {
        color: var(--bg-color);
    }

    .im_history_pinned_panel {
        border-bottom: 1px solid var(--color-dark-hover);
    }

    /* Modal window (e.g. Edit group name, delete message) */
    .md_simple_modal_wrap,
    .modal_simple_form > h4,
    .md_simple_modal_body > h4,
    .md_simple_modal_body .confirm_modal_description span p.tg_checkbox span,
    .md-input {
        background-color: var(--bg-color);
        color: var(--text-light);
    }

    .tgme_footer,
    .tgme_page_embed_code,
    .tgme_page_web_action a.tgme_action_button,
    .fixed_actions .tgme_page_widget_actions,
    .tgme_widget_message_bubble {
        border-color: var(--color-dark-hover) !important;
    }

    .im_edit_panel_border {
        border-bottom: 1px solid var(--color-emoji-panel);
    }

    .composer_stickerset_title {
        color: var(--text-light);
    }

    .composer_sticker_btn:hover {
        background-color: var(--color-emoji-panel);
    }

    .reply_markup_button {
        background-color: var(--bg-color);
        color: var(--text-light);
    }

    /*-------------------- fixes --------------------*/
    .im_page_wrap,
    .composer_rich_textarea:empty,
    .form-control {
        overflow: hidden;
    }

    .mobile_scrollable_wrap {
        overflow-y: hidden;
    }

    .im_dialogs_search_field {
        background-position: -6px -204px;
    }

    .page_wrap {
        background-size: cover !important;
    }

    .im_message_body {
        padding: 7px 10px;
    }

    .im_message_views {
        right: 7px;
    }
    .im_history_col .nano > .nano-pane {
        background-color: var(--color-blue-slider-bg);
    }

    .im_history_col .nano > .nano-pane > .nano-slider {
        background-color: var(--color-blue-slider);
    }

    /* Code/Monospace coloring */
    code {
        background-color: var(--color-code-bg);
        color: var(--color-code-text);
    }

    pre {
        margin-bottom: 0;
        overflow: auto;
        padding: 3px;
        border: 1px solid var(--color-code-bg);
        max-height: none;
        font-size: inherit;
        display: block;
        color: var(--color-code-text);
        background-color: var(--color-code-bg);
        border-radius: 4px;
    }

    /* Chat profile message bubble */
    .md_modal_split_action > i {
        filter: brightness(0) invert(1) !important;
    }

    .countries_scrollable_wrap a.countries_modal_country {
        color: var(--color-list-item-link);
    }

    /* Site background - also needed for login page */
    .login_form_wrap {
        background-color: var(--bg-color);
    }

    .login_form_head,
    .login_phone_head {
        color: var(--text-light);
    }

    /* Login panel country selection */
    .countries_scrollable_wrap a.countries_modal_country:hover {
        background: var(--color-dark-hover);
    }
}