Redesign VK Dark Theme by suvorov-m

/* ==UserStyle==
@name				VK Dark Theme
@namespace			https://github.com/Suvorov-m/vk-dark-theme
@version			2.0.3
@description		Customisable dark theme for vk.com
@author				Suvorov Mikhail
@homepageURL		https://vk.com/vk.darktheme
@preprocessor		stylus

@var select TopBar "Стиль верхней панели" {
		"Blue": "top_blue",
		"Dark": "top_dark"
}

@var checkbox fixNav			"Зафиксировать положение бокового меню" 1
@var checkbox stickerOutline	"Обводка стикеров" 1
@var checkbox giftsCrutch		"Костыль для подарков" 1

@var color _c_bg				"description"	#282B2F
@var color _c_fg				"description"	#373B3E
@var color _c_border			"description"	#484B4E
@var color _c_hover				"description"	#5B5E61

@var color _c_text_white		"description"	#fff
@var color _c_text_main			"description"	#eee
@var color _c_text_gray			"description"	#818c99

@var color _c_blue				"description"	#4A76A8
@var color _c_blue_link			"description"	#8EC5FF
@var color _c_blue_light		"description"	#B4C8E0

@var color _c_red				"description"	#F05C44
@var color _c_green				"description"	#ABD99A

@var color _c_notification_red	"description"	#F05C44
@var color _c_active_dialog		"description"	#7293B6

@var color _c_yellow			"description"	#FAEFD21F

@var color _c_black				"description"	#000

@var color _c_shadow_light		"description"	#0003
@var color _c_shadow			"description"	#0006
@var color _c_shadow_dark		"description"	#0009

@var color _c_scroll			"description"	#54595d
@var color _c_select			"description"	#8EC5FF33

==/UserStyle== */


/*=========================================
			DEVELOPMENT
=========================================*/
bg(background = _c_fg){
	background-color: background
}
br(border = _c_border){
	border-color: border
}
brt(border_t = _c_border){
	border-top-color: border_t
}
brb(border_b = _c_border){
	border-bottom-color: border_b
}

@-moz-document domain('vk.com') {

/*=========================================
			ОСНОВНАЯ ПАЛИТРА
=========================================*/

:root {
	// ---------- Основные ----------
	// Фон страницы
	--background_page: _c_bg
	// Фон блоков
	--white: _c_fg
	--background_content: _c_fg
	--background_light: _c_fg
	--steel_gray_10: _c_fg
	--steel_gray_20: _c_fg
	// Бордеры
	--separator_common: _c_border
	--separator_alternate: _c_border
	--steel_gray_100: _c_border
	--steel_gray_80: _c_border
	--steel_gray_60: _c_border
	--separator_alpha: _c_border
	--separator_common: _c_border
	--landing_snippet_border: _c_border
	// Инпуты
	--input_border: _c_border
	--steel_gray_120: _c_border
	--field_background: _c_border
	// Выпадающее меню
	--modal_card_background: _c_fg

	// ---------- Текст ----------
	// Основной цвет
	--text_primary: _c_text_main
	// Ссылки
	--text_link: _c_blue_link
	// Второстепенный текст
	--text_subhead: _c_text_gray
	// Заголовки окон
	--counter_prominent_text: _c_text_main
	// Текст на синих кнопках
	--button-text-color: _c_text_white
	--button_primary_foreground: _c_text_white
	// Всплывающие подсказки
	--gray_900: _c_text_gray
	// Список друзей на странице с музыкой
	--gray_800: _c_text_main
	// Пункты в настройках
	--gray_600: _c_text_gray
	// ---------- Мини чат в правом углу ----------
	// Фон
	--light_blue_100: _c_fg
	// :hover
	--steel_gray_140: _c_border

	// ---------- Серые кнопки ----------
	// Фон
	--button-secondary-background-color: _c_border
	--steel_gray_40: _c_border
	// Фон:hover
	--button-secondary-background-color-hover: _c_hover
	--button_secondary_background_highlighted: _c_hover
	// Нажатие
	--button-secondary-background-color-active: _c_hover
	// Цвет текста
	--button-secondary-text-color: _c_text_white
	--steel_gray_A540: _c_text_white

	// ---------- Тени ----------
	--black_alpha12: _c_shadow
	--black_alpha8: _c_shadow_light

	
	// ---------- Разное ----------
	// Цвет ников в некоторых меню
	--blue_600: _c_blue_link
	// Текст меню смены языка
	--light_blue_700: _c_blue_link
	// Кнопки без фона:hover
	--light_blue_40: _c_border
	// Обводка переключателя интересный постов
	--steel_gray_200: _c_border
	// Подарок в диалоге, фон
	--yellow_light: _c_yellow
	// Ссылки
	--snippet_border: _c_border
	--snippet_background: _c_border
	// Пересланные сообщения и посты, бордер слева
	--im_forward_line_tint: _c_border
	// Текст в индикаторе сообщений
	--counter_primary_text: _c_text_white
	--counter_secondary_text: _c_text_white
	// Фон индикатора сообщений
	--counter_primary_background: _c_notification_red
	--counter_secondary_background: _c_notification_red
	// Выпадающее меню сортировки:hover
	--light_blue_80: _c_border
	// Акцентные цвета в тексте
	--accent: _c_blue_light
	// Текст в некоторых местах
	--black: _c_text_white
	// Фон диалогов в левом нижнем углу
	--im_bubble_outgoing: _c_blue
	// :hover
	--background_hover: #ffffff1f
	// Цвет небольших иконок
	--icon_tertiary: #fff9
}

/*=========================================
			СТИЛИ ВНЕ ПАЛИТРЫ
=========================================*/

body {
	bg(_c_bg)
	color: _c_text_main
}
hr {
	br(_c_border)
}

// ---------- Индикатор онлайн статуса у аватарки ----------

[dir] .online.mobile::after,
[dir] .ts_contact_photo.online.mobile::after,
[dir] .wddi_thumb.online.mobile::after,
[dir] .friends_user_row .online.mobile::after,
[dir] span.fc_contact_photo.online.mobile::after{
	bg()
}

[dir] .online::after,
[dir] .nim-dialog .nim-dialog--photo,
[dir] .ts_contact_photo.online::after,
[dir] .wddi_thumb.online::after,
[dir] .friends_user_row .online::after,
[dir] span.fc_contact_photo.online::after{
	br(_c_fg)
}

// ---------- Индикатор сообщений ----------
[dir] body.new_header_design .left_count_wrap {
	bg(_c_hover)
	color: _c_text_white
}
// :hover
[dir] #side_bar_inner .left_row:hover .left_count_wrap {
	background-color: _c_notification_red
}

// ----- Эмоджи -----
[dir] .emoji_shop:hover .emoji_shop_icon_badge,
.emoji_shop_icon_badge{
	color: _c_text_white
}
[dir] .emoji_tabs {
	bg(_c_bg)
}
[dir] .emoji_sprite{
	background-image: url(https://raw.githubusercontent.com/Suvorov-m/vk-dark-theme/main/img/emoji_sprite.png)
}
[dir] .ui_scroll_default_theme.ui_scroll_emoji_theme .ui_scroll_shadow_bottom,
[dir] .ui_scroll_default_theme.ui_scroll_emoji_theme .ui_scroll_shadow_top,
[dir] .ui_scroll_emoji_theme .ui_scroll_shadow_bottom,
[dir] .ui_scroll_emoji_theme [dir] .ui_scroll_shadow_top,
[dir] .ui_scroll_default_theme.ui_scroll_emoji_theme>.ui_scroll_overflow>.ui_scroll_shadow_bottom,
[dir] .ui_scroll_default_theme.ui_scroll_emoji_theme>.ui_scroll_overflow>.ui_scroll_shadow_top,
[dir] .emoji_cats_title_helper:after{
	background:url(https://raw.githubusercontent.com/Suvorov-m/vk-dark-theme/main/img/emoji_sprite.png) 0 -29px
}
[dir] .emoji_tab_icon_favorite {
	background-image: url(https://raw.githubusercontent.com/Suvorov-m/vk-dark-theme/main/img/favorite.svg)
}
[dir] .emoji_tt_wrap.tt_down:after {
	brt(_c_bg)
}
[dir] .emoji_tabs_l_s, [dir] .emoji_tabs_r_s{
	bg(_c_bg)
}

// ----- Диалоги -----
// Дата в диалогах при прокрутке
[dir] .im-page .im-page--top-date-bar.im-page--date-bar-transition.im-page--date-bar-transition-inverse {
	bg()
}
// Прокрутка вниз
[dir] .im-navigation--to-end .im-navigation__button {
	bg()
}
[dir] .im-navigation:hover .im-navigation__button {
	bg(lightness(_c_fg, 30%)) 
}
// Добавить в диалог
[dir] .im-create,
[dir] .im-create.im-create_classic .im-create--footer{
	bg()
}
[dir] .ui_search_filters_pane .token, [dir] .ui_multiselect_cnt .token {
	bg(_c_blue)
}
[dir] .ui_search_filters_pane .token .token_del, [dir] .ui_multiselect_cnt .token .token_del {
	filter: grayscale(1) brightness(2);
}


// ----- Музыка -----
[dir] .audio_page_player2.audio_page_player_fixed,
[dir] .audio_page_layout .audio_friends_list{
	bg()
}
.audio_page__shuffle_all .audio_page__shuffle_all_button,
.audio_pl_snippet2 .audio_shuffle_all_button{
	color: _c_text_white
}
.CatalogSection.CatalogSection--divided.CatalogSection__for_you,
.CatalogSection.CatalogSection--divided.CatalogSection__explore
.CatalogSection.CatalogSection--divided.CatalogSection__curator{
	bg(_c_bg)
	z-index: 0
}
.CatalogSection__for_you > .CatalogBlock--divided:first-child::before,
.CatalogSection__curator > .CatalogBlock--divided:first-child::before,
.CatalogSection__explore > .CatalogBlock--divided:first-child::before {
	box-shadow: -1px 1px 0px 0px _c_border, 1px 0px 0px 0px _c_border;
}
[dir] .CatalogBlock--divided::before {
	box-shadow: 0 1px 0 0 _c_border,0 0 0 1px _c_border
}
[dir] .audio_page_player2.audio_page_player_fixed {
	box-shadow: 0 1px 0 0 _c_border
}
//Уголок на выподающем меню
[dir] .eltt.eltt_bottom.eltt_arrow_size_normal>.eltt_arrow_back .eltt_arrow {
	brb(_c_fg)
}
//Выпадающее меню сортировки
[dir] .idd_popup .idd_items_content{
	bg()
}
[dir] .idd_popup .idd_item.idd_hl{
	bg(_c_bg)
}

[dir] .idd_popup .idd_item:active{
	bg(_c_bg!important)
}
// Фон трека при перетаскивании
[dir] .ui_gridsorter_cont .ui_gridsorter_moveable,
[dir] .audio_w_covers .audio_row.ui_gridsorter_moveable .audio_row_content{
	bg(_c_border)
}

// ---------- Изображения ----------
// Фон чата
[dir] .pv_cont .narrow_column {
	bg()
}
// Фон блока
[dir] #pv_box,
[dir] .pv_cont .pv_reply_form_wrap{
	bg(_c_bg)
}
// Выпадающее меню
[dir] #pv_more_acts_tt {
	bg()
	br()
}
[dir] #pv_more_acts_tt .eltt_arrow, [dir] #pv_more_acts_tt .eltt_arrow_back{
	brt(_c_fg)
}
// Редактор изображения
[dir] .pv_narrow_column_wrap {
	bg()
}
[dir] .StickersPanel__header {
	bg(_c_bg)
}
[dir=ltr] .StickersPanel__arrow--right {
	background: linear-gradient(to right,transparent 0,_c_bg 22%,_c_bg 37%,_c_bg 100%)
}
[dir=ltr] .StickersPanel__arrow--left {
	background: linear-gradient(to right,_c_bg 0,_c_bg 63%,_c_bg 78%,transparent 100%)
}
[dir] .UndoRedo__button--...