/* ==UserStyle== @name Telegram Vanilla Dark Legacy @description Dark theme for web.telegram.org @namespace Telegram Vanilla Dark Legacy @version 1.4.0 @author VChet @homepageURL https://github.com/VChet/Telegram-Vanilla-Dark-Web-Legacy @updateURL https://raw.githubusercontent.com/VChet/Telegram-Vanilla-Dark-Web-Legacy/master/telegram-vanilla-dark.user.css @supportURL https://github.com/VChet/Telegram-Vanilla-Dark-Web-Legacy/issues @license CC-BY-SA-4.0 @advanced dropdown color-theme "Color Theme" { Cream "Cream" << li > a, .tg_head_peer_dropdown .dropdown-menu > li > a, a strong, a { color: var(--main); } a:focus, a:hover { color: var(--main-light); } .badge, .btn-link:hover, .btn-md:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-primary.active, .btn:hover .im_selected_count, .im_send_dropbox_wrap, .open .btn-primary.dropdown-toggle, .reply_markup_button:focus, .reply_markup_button:hover, a.tgme_action_button_new:focus, a.tgme_action_button_new:hover, a.tgme_action_button:focus, a.tgme_action_button:hover { color: var(--gray-dark); } .audio_player_duration, .audio_player_size, .btn, .composer_command_desc, .composer_command_option:hover .composer_command_desc, .composer_rich_textarea:empty:before, .dropdown-menu > li > a, .form-control, .form-control::placeholder, .im_message_date, .im_message_document_size, .im_message_views_cnt, .im_page_wrap, .im_selected_count, .inactive_description, .link_preview_description, .login_footer_wrap, .md_modal_list_peer_description .status_online, .md_modal_list_peer_description.status_online, .md-input-label, .media_modal_date, .peer_modal_profile_description, .reply_markup_button, .session_active_date_online, .settings_modal_username_link, .settings_modal_username_link:hover, .tg_head_connecting_text, .tg_head_peer_status, .tgme_page_embed_code, .tgme_page_wrap, .tgme_widget_message_author, .tgme_widget_message_contact_phone, .tgme_widget_message_document_extra, .tgme_widget_message_footer, .tgme_widget_message_forwarded_from, a.im_dialog .im_short_message_text, a.md_modal_action, a.media_modal_date:hover, a.tg_radio, a.tgme_action_button_new, a.tgme_action_button, body, body.body_widget_post, html, p.tg_checkbox, span.im_short_message_text { color: var(--text); } .countries_scrollable_wrap a.countries_modal_country:hover .countries_modal_country_code, .im_bot_intro_message_wrap, .im_dialog_peer, .im_history_select_active .im_message_outer_wrap:hover .im_message_audio_duration, .im_history_select_active .im_message_outer_wrap:hover .im_message_audio_size, .im_history_select_active .im_message_outer_wrap:hover .im_message_author_admin, .im_history_select_active .im_message_outer_wrap:hover .im_message_date, .im_history_select_active .im_message_outer_wrap:hover .im_message_document_size, .im_history_select_active .im_message_outer_wrap:hover .im_message_fwd_date, .im_history_select_active .im_message_outer_wrap:hover .im_message_views_cnt, .im_message_focus_active .audio_player_duration, .im_message_focus_active .audio_player_size, .im_message_focus_active .im_message_author_admin, .im_message_focus_active .im_message_date, .im_message_focus_active .im_message_document_size, .im_message_focus_active .im_message_edited, .im_message_focus_active .im_message_fwd_date, .im_message_focus_active .im_message_views_cnt, .im_message_selected .im_message_audio_duration, .im_message_selected .im_message_audio_size, .im_message_selected .im_message_author_admin, .im_message_selected .im_message_date, .im_message_selected .im_message_document_size, .im_message_selected .im_message_fwd_date, .im_message_selected .im_message_views_cnt, .im_message_unread_split, .im_service_message_pinned, .im_service_message, .inactive_title, .login_form_head, .md_modal_head, .md_modal_section_link, .md_modal_section_param_name, .md-input, .media_modal_author, .tg_checkbox.tg_checkbox_on span.icon-checkbox-outer, .tg_head_peer_media, .tg_head_peer_title, .tgme_page_title, a.contacts_modal_contact:hover .md_modal_list_peer_description, a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog_selected .im_short_message_text, a.im_dialog:hover .im_dialog_date, a.im_dialog:hover .im_short_message_text, a.md_modal_action:focus, a.md_modal_action:hover, a.tg_checkbox, h1, h2, h3, h4, h5 { color: var(--light); } .active .im_dialog_date, .active .im_dialog_peer, .active a.im_dialog .im_dialog_chat_from_wrap, .active a.im_dialog .im_short_message_media, .active a.im_dialog .im_short_message_service, .active a.im_dialog .im_short_message_text, .active a.im_dialog:hover .im_dialog_date { color: var(--white); } .user_color_1, .user_color_1:hover { color: #8365AB; } .user_color_2, .user_color_2:hover { color: #539E4F; } .user_color_3, .user_color_3:hover { color: #AE9661; } .user_color_4, .user_color_4:hover { color: #4979A3; } .user_color_5, .user_color_5:hover { color: #B7635D; } .user_color_6, .user_color_6:hover { color: #B3577A; } .user_color_7, .user_color_7:hover { color: #5397B4; } .user_color_8, .user_color_8:hover { color: #C07844; } /* Background-color */ .btn-link:hover, .btn-md:hover, .btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .composer_sticker_btn:hover, .contacts_modal_col .nano > .nano-pane > .nano-slider, .countries_modal_col .nano > .nano-pane > .nano-slider, .im_dialogs_col .nano > .nano-pane > .nano-slider, .im_dialogs_modal_col .nano > .nano-pane > .nano-slider, .im_dialogs_scrollable_wrap .active a.im_dialog, .im_dialogs_scrollable_wrap .active a.im_dialog:hover, .im_history_col .nano > .nano-pane > .nano-slider, .im_send_dropbox_wrap, .img_round_video_unread .img_round_meta, .nav-pills > li.active > a, .open .btn-primary.dropdown-toggle, .reply_markup_button:focus, .reply_markup_button:hover, .sessions_modal_col .nano > .nano-pane > .nano-slider, .stickerset_modal_col .nano > .nano-pane > .nano-slider, .stickerset_modal_sticker_wrap:hover, .tg_checkbox.tg_checkbox_on span.icon-checkbox-outer, a.composer_emoji_btn:hover, a.tgme_action_button_new:active, a.tgme_action_button_new:focus, a.tgme_action_button_new:hover, a.tgme_action_button:active, a.tgme_action_button:focus, a.tgme_action_button:hover { background-color: var(--main-dark); } .audio_player_seek_slider .tg_slider_track_fill, .audio_player_volume_slider .tg_slider_thumb, .audio_player_volume_slider .tg_slider_track_fill, .composer_emoji_tooltip_tab_shadow, .im_dialog_badge_muted, .im_dialog_unread, .im_message_reply_border, .im_send_reply_cancel:hover .icon-reply-bar, .tg_checkbox.tg_checkbox_on i.icon-checkbox-inner, .tg_down_progress .progress-bar, .tg_slider_thumb, .tg_slider_track_fill, .tg_up_progress .progress-bar, .tgme_head_wrap, .tgme_widget_message_game:before, .tgme_widget_message_link_preview:before, .tgme_widget_message_reply:before, a.tg_radio.tg_radio_on i.icon-radio { background-color: var(--main); } .icon-message-status, .im_history_pinned_hide:hover .icon-reply-bar, a.tg_radio.tg_radio_on:hover i.icon-radio { background-color: var(--main-light); } .tgme_page_widget_actions, body, body.body_widget_post, html { background-color: var(--gray-dark); } .composer_command_option, .composer_dropdown_wrap, .composer_emoji_tooltip, .contacts_modal_search_field, .contacts_modal_search_field:active, .contacts_modal_search_field:focus, .countries_modal_search_field, .countries_modal_search_field:active, .countries_modal_search_field:focus, .dropdown-menu, .error_modal_wrap, .icon-tooltip-tail, .im_bottom_panel_wrap, .im_dialogs_col_wrap, .im_dialogs_modal_col_wrap .im_dialogs_search_field, .im_dialogs_panel, .im_dialogs_scrollable_wrap a.im_dialog_searchpeer, .im_dialogs_search_field, .im_dialogs_search_field:active, .im_dialogs_search_field:focus, .im_history_empty_wrap, .im_history_messages, .im_history_not_selected, .im_history_pinned_wrap, .im_history_typing_wrap, .im_message_outer_wrap, .im_page_split, .im_page_wrap, .im_record_bg, .im_service_message_wrap, .login_footer_about_wrap, .login_form_wrap, .md_modal_body, .md_modal_footer, .md_simple_modal_wrap, .md-input, .media_modal_bottom_panel_wrap, .modal-content, .tg_head_split, a.im_dialog, a.tgme_head_dl_button, i.icon-radio { background-color: var(--gray); } .btn, .button, .composer_dropdown li a:hover, .composer_dropdown li a.composer_command_option:hover, .composer_dropdown li.composer_autocomplete_option_active a, .contacts_modal_col .nano > .nano-pane, .contacts_modal_members_list a.contacts_modal_contact:hover, .countries_modal_col .nano > .nano-pane, .countries_scrollable_wrap a.countries_modal_country:hover, .dropdown-menu .divider, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown.open .tg_head_btn, .im_dialogs_modal_col .nano > .nano-pane, .im_dialogs_scrollable_wrap a.im_dialog:hover, .im_history_col .nano > .nano-pane, .im_history_select_active .im_message_outer_wrap:hover, .im_message_selected .im_message_outer_wrap, .im_message_unread_split, .login_head_bg, .md_modal_head, .md_modal_section_splitter, .media_modal_wrap, .sessions_modal_col .nano > .nano-pane, .stickerset_modal_col .nano > .nano-pane, .tg_head_btn:hover, .tg_head_logo_dropdown .dropdown-menu > li > a:hover, .tg_head_peer_dropdown .dropdown-menu > li > a:hover, .tgme_page_embed_code, .tgme_widget_message_bubble, a.tgme_action_button_new, a.tgme_action_button, a.tgme_head_dl_button:active, a.tgme_head_dl_button:hover { background-color: var(--gray-light); } .im_message_file_button, .media_modal_action_btn:hover, .tg_down_progress, .tg_slider_track, .tg_up_progress, .tgme_widget_message_document_icon { background-color: var(--gray-selection); } .tg_head_peer_media_dropdown .dropdown-toggle .icon-bar, .tg_checkbox i.icon-checkbox-inner, a.tg_radio:hover i.icon-radio { background-color: var(--light); } .active .im_dialog_badge, .active .im_dialog_unread, .active .im_dialog:hover .im_dialog_unread { background-color: var(--white); } .btn.btn-link.dropdown-toggle, .im_submit_edit, .im_submit_edit:focus, .im_submit_edit:hover, .im_submit_send, .im_submit_send:focus, .im_submit_send:hover { background-color: transparent; } .im_message_mymention { background-color: #464C7B; } /* Borders */ .contacts_modal_search_field, .im_dialogs_modal_col_wrap .im_dialogs_search_field, .im_dialogs_search_field, .im_dialogs_search_field:active, .im_dialogs_search_field:focus, .im_edit_panel_border, .im_send_dropbox_wrap, .tg_radio.tg_radio_on .icon-radio-outer, .tg_radio.tg_radio_on i.icon-radio, i.icon-radio { border-color: var(--gray); } .form-control.no_outline:focus, .im_panel_peer_online, hr { border-color: var(--gray-light); } .im_message_webpage_wrap, .tg_radio.tg_radio_on .icon-radio-outer { border-color: var(--main); } .tg_checkbox i.icon-checkbox-inner, .tg_radio .icon-radio-outer { border-color: var(--light); } .composer_dropdown_wrap, .composer_emoji_tooltip, .countries_modal_search_field, .countries_modal_search_field:active, .countries_modal_search_field:focus, .icon-tooltip-tail, .im_page_wrap, .login_footer_about_wrap, .login_form_wrap, .tg_head_logo_dropdown.open .dropdown-menu, .tg_head_peer_dropdown .dropdown-menu, .tgme_page_embed_code, .tgme_widget_message_bubble { border: 1px solid var(--gray-light); } .tg_head_split { border-right: 1px solid var(--gray-light); border-left: 1px solid var(--gray-light); } .fixed_actions .tgme_page_widget_actions, .im_bottom_panel_wrap { border-top: 1px solid var(--gray-light); } .im_dialogs_col_wrap, .tg_head_logo_wrap { border-right: 1px solid var(--gray-light); } .im_history_col_wrap { border-left: 1px solid var(--gray-light); } .im_dialog_wrap, .im_dialogs_panel, .im_history_pinned_wrap, .md-input-group, .md_modal_iconed_section_wrap { border-bottom: 1px solid var(--gray-light); } .md_modal_section_splitter { border-top-color: var(--main-dark); } /* Box-shadows */ .composer_emoji_tooltip_tab_shadow { box-shadow: 0 1px 0 var(--main); } .composer_rich_textarea, .composer_textarea, .login_footer_about_wrap, .login_form_wrap { box-shadow: 0 1px 0 var(--gray-light); } .composer_rich_textarea:focus { box-shadow: 0 2px 0 0 var(--main-dark); } .composer_dropdown_wrap, .im_page_wrap, .md_modal_section_splitter, .tg_head_logo_dropdown .dropdown-menu, .tg_head_peer_dropdown .dropdown-menu { box-shadow: none; } .im_message_focus_active .im_message_outer_wrap { animation-duration: 2s; } @keyframes im_message_focus_fade { from { background-color: var(--gray-light); } } /* Selection */ ::-moz-selection { background-color: var(--main); color: var(--white); } ::selection { background-color: var(--main); color: var(--white); } /* Margin / Padding */ .im_service_message { margin: 0; padding: 9px 7px; } .im_dialogs_panel { padding: 8px; } /* Progress arc */ .progress-arc-intermediate .progress-arc .progress-arc-bar { stroke: var(--main); } .stop0, .stop60, .stop100 { stop-color: var(--main); } .composer_emoji_insert_btn:hover .icon-emoji, .inactive_image { opacity: 0.8; } .composer_emoji_insert_btn_on:hover .icon-emoji { opacity: 1; } /* Hue rotation */ .composer_emoji_tooltip_category i { filter: invert(100%); } .active .im_dialog_pinned, .tgme_widget_message_views:after { filter: brightness(250%); } .icon-filter-audio, .icon-filter-documents, .icon-filter-photos, .icon-filter-video, .icon-message-views { filter: brightness(75%); } .im_history_message_wrap.im_message_selected .icon-message-views { filter: saturate(0%); } /* Code blocks */ code, pre { background-color: #272822; border: none; color: #EFEBDA; } } @-moz-document domain("t.me"), domain("telegram.me") { a.tgme_widget_message_date { color: inherit; } .tgme_page_web_action a.tgme_action_button:active, .tgme_page_web_action a.tgme_action_button:hover { background-color: #5DC390; } .tgme_page_widget_actions a.tgme_action_web_button:hover { text-decoration: none; } .tgme_widget_message_bubble_tail .background, .tgme_widget_message_bubble_tail .border_1x { fill: var(--gray-light); } .tgme_widget_message_bubble_tail .border { stroke: var(--gray-light); } a.tgme_action_button.tgme_action_web_button { padding-top: 13px; padding-bottom: 11px; border: 2px solid #5DC390; } a.tgme_action_button_new:before { filter: saturate(0%); } a.tgme_action_button_new:hover:before { filter: brightness(0%); } }