Слегка допиленное обновление
Новое - это круто, однако довольно часто новое оказывается непривычным, из-за чего вызывает отторжение. А ещё новое - это эксперименты, к которым ты ещё не привык. Но, благо, у нас есть инструменты, позволяющие немного допилить сайт так, чтобы он субъективно стал приятнее глазу.
В одном из своих постов я уже писал каким образом с помощью браузерных расширений можно изменить практически любой сайт. Сегодня у нас будет ещё одно практическое применение этих знаний. Напоминаю как использовать: качаем расширение для правки CSS на строне браузера, например, Stylus, создаём правило (как правило, нужно кликнуть на иконку расширения при открытой странице нужного сайта и выбрать "+"), вставляем мой код, сохраняем.
Светлая тема
Немного подправлен базовый фон, чтобы контент лучше с ним контрастировал, оранжевые кнопки заменены на синие, фон элемента "развернуть" стал менее агрессивным, исправил баг с потерянной иконкой поиска (думаю, скоро его поправят и разработчики самого сайта, но пока так), слегка выделил тенью посты.
body {
background: #d0dadf;
}
.btn-primary {
background: #223363;
color: white;
}
.v2-tabs--pill .v2-tabs__item.active {
background: #223363;
border: none;
}
.post-collapse-toggle {
min-height: 42px;
background: linear-gradient(180deg,rgb(var(--bg-card-rgb)/0) 20%,rgb(var(--bg-card-rgb)/.7) 62%,var(--bg-card) 100%);
}
.v2-comment-rail__line {
background: #fff9;
}
.sidebar-quick-settings__input:checked ~ .sidebar-quick-settings__track {
background: #444864;
border-color: #fff0;
}
.header-search {
background: #223363;
border-radius: 10px;
}
.post-card {
box-shadow: 0px 1px 3px #b0b8bb;
}Тёмная
Изменён фон отдельных элементов (постов, плашек), оранжевые кнопки заменены на фиолетовые, фон элемента "развернуть" стал менее агрессивным.
.sidebar-profile {
background: #1f2131;
}
.sidebar-nav {
background: #1f2131;
}
.post-card-panel {
background: #1f2131;
}
.post-collapse-toggle {
min-height: 42px;
background: linear-gradient(180deg,rgb(var(--bg-card-rgb)/0) 20%,rgb(var(--bg-card-rgb)/.7) 62%,var(--bg-card) 100%);
}
.post-content-shell.is-collapsed::after {
display: none;
}
.btn-primary {
background: #444864;
}
.v2-tabs--pill .v2-tabs__item.active {
color: var(--text-bright);
background: #444864;
border: none;
}
.v2-comment__body {
background: #1f2131;
}
.sidebar-quick-settings__input:checked ~ .sidebar-quick-settings__track {
background: #444864;
border-color: #fff0;
}
.nav-menu-item.active {
background: #323548;
color: white;
}Это, хочу отдельно отметить, чисто моё видение - как приятнее мне. Не критикую текущий дизайн, никого ни к чему не призываю. Но если мои правки будут полезны вам, то welcome.
Бонус1: универсальное решение для изменения цвета ссылок с оранжевого на фиолетовый (в обеих темах):
:root {--accent: #6770B1;}Бонус2: убрать обводку у активной вкладки в верхнем меню:
.nav-tab.active {background: none;}
