Mezha.Media by ukr

Details

Authorukr

LicenseMIT License

CategoryMezha.Media

Created3 years, 1 week ago

Updated6 months, 2 weeks ago

Size24 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Нові стилі для сайту Mezha.Media

Оскільки сайт зробили орієнтованим на мобільну аудиторію, цей стиль робить його більш зручним для ПК-користувачів.

Notes

Стилі підтримують як білу, так і темну тему сайту, та адаптують Disqus під темну тему, який тепер виконаний в єдиному стилі з темною темою сайту.

Як встановити:

Завантажте розширення для браузера типу Stylish або Stylus (рекомендовано, можна на цій сторінці натиснути на "Get Stylus");
Натисніть кнопку "Install" на цій сторінці;
За іконкою програми перейдіть в його налаштування та біля рядка стилів Mezha.Media увімкнути галочку, якщо вона у вас не увімкнена;
Готово.

P.S. За вашим бажанням включати та відключити стилі можна в один клік по цій галочці. Також не забувайте перевіряти оновлення стилів, натиснувши на дві стрілочки, що повертаються. Якщо щось у стилях зламається через розвиток сайту адміністрацією, незабаром має вийти виправлення.

Що змінено:

Тепер текст займає більшу кількість простору, ніж раніше. Якщо говорити про FullHD екрани, то близько 1000 пікселів, а не 666 як раніше, це приблизно стільки ж, як на старому сайті редакції. Скріншот;
Картинки не займають всю ширину стрічки новин. Тепер, крім першого постера, текст, картинки та відео займають однакову ширину. Скріншот;
Змінено колір та підкреслення гіперпосилань. Раніше гіперпосилання були звичайним чорним кольором тексту решти опису, а тепер у них темно-синій колір. Також змінено стиль підкреслення, підкреслення відбувається не поверх тексту гіперпосилання (що, суб'єктивно, погіршує видимість), а знизу його, як було на старому сайті редакції. Скріншот;
Таблиці стали компактнішими за рахунок зменшення висоти комірок. Скріншот;
Бали за огляд стали трохи жирнішими, так краще. Скріншот;
Прибрано затримку підсвічування гіперпосилань при наведенні на них мишкою;
Інтерфейс став не настільки закругленим, щоб, суб'єктивно, більше відповідати ПК-інтерфейсу, а не мобілці. Якщо вам більше подобається сильно закруглений, видаліть у коді всі рядки з "border-radius: 3px;", або закоментуйте їх. Скріншот;
Три вбудовані блоки в стрічку новин "Головне", "Огляди" та "Топ обговорень" стали трохи компактнішими за висотою (приблизно на 15%), щоб звільнити місце для найголовнішого - основної стрічки новин, при цьому зовнішній вигляд цих блоків не погіршується. Скріншот;
Додано іконки для авторів та часу публікації. Скріншот;
Вирівняна іконка до кількості коментарів, раніше вона була криво розміщена. Скріншот;
Виправлено відображення списку, раніше його пункти вилазили за межі лінії тексту. Скріншот. (✔ через деякий час адміністрація сайту також це виправила);
Тепер поле введення в пошук біле, а не під колір фону сайту, як зараз. Це загальноприйнятий стандарт, щоб зробити пошук більш помітним для ока відвідувача. Тим більше, поле введення в коментарях Дискуса теж біле, все сходиться. Скріншот;
Збільшив область гіперпосилання переходу на головну сторінку шляхом переробки рядка, де написано слово "mezha" в блок. Це зменшить кількість випадків, коли випадково промахуєшся мишкою повз гіперпосилання. Скріншот;
Більш компактні та рівні по відношенню до іншого тексту та заголовку списки без похилого тексту, що, суб'єктивно, погіршувало читабельність. Скріншот;
Тепер лайки та дізлайки під оглядами кольорові. Якщо вам це не подобається, можете видалити відповідальний за це код і вони не зміняться. Скріншот;
Розмір шрифту новин сайту зменшено з 18 до 17. Тепер розмір точно такий, який був на старому сайті редакції і який зараз у коментарях Дискус. Тобто, розмір шрифту новин та коментарів тепер однаковий. Повернути розмір шрифту назад можна видалив рядок "font-size: 17px;".Скріншот;
Смужка, яка розділяє основний текст новини і підвал стала довшою, раніше вона була занадто короткою і ледь помітною, а отже, погано виконувала свою функцію. Скріншот;
Вирівняні іконки до блоків "Головне", "Огляди" та "Топ обговорень". Скріншот;
Вирівняні іконки соціальних мереж, також вони всередині стали трохи більшими за розміром. Скріншот;
Фон тегів під новинами тепер білий, в колір стрічки новин, а не в колір фону сайту. Також вони стали трохи компактнішими. Скріншот;
Назва сайту біля логотипу тепер пишеться з великої літери, а не з маленької. Скріншот. (✔ через деякий час адміністрація сайту зробила так само);
Зовнішній вигляд змісту оглядів приведено до суб'єктивного ідеалу. Тепер список нумерований, а блок має рамки та власний колір всередині. Скріншот;
Вирівняно іконки навігації. Скріншот;
Виправлено баг сайту, коли в новині нема тегів, маленький блок запропонованих новин зліпався з основним блоком новин. Скріншот;
При наведенні мишкою на кнопку відкриття/закриття навігації сайту вона підсвічується кольором гіперпосилання, курсор також набуває вигляду наведення на гіперпосилання. Те ж саме і з лупою пошуку. Скріншот;
Колір блоку цитування став більш виразний, це зменшує напруження на мозок з здогадками, що це за блок та прибирає питання: "Це мені знається, чи у нього інший колір?". Скріншот;
Зовнішній вигляд таблиць для "ПК місяця" був трохи змінений: у клітинок таблиць з'явилися видимі межі, фон став злегка сірим, а на "зебрі" кольори Інтела стали більш синіми, а не блакитними, а АМД - червоні, а не зелені, щоб відповідати пізнаваним кольорам цих компаній. Суб'єктивно, так покращується сприйняття інформації з таблиці. Скріншот;
Блок закріпленої новини був зменшений до стандартного розміру, щоб не збільшувати кількість скролінгу сторінки. Але щоб зберегти "особливість" цього блоку, справа зверху у нього з'явився трикутник, або сіра рамка уздовж всього блока, на ваш вибір (або взагалі можете все прибрати, видалив відповідний код, в коді все зручно підписано). Скріншот.
З'явилася підтримка темної теми сайту. Всі зміни на скріншотах;
Disqus адаптовано під темну тему сайту. Він, як на мене, раніше був головною перепоною перед переходом на темну версію сайту. Тепер колір ніків/гіперпосилань не такий занадто контрастний, а в колір гіперпосилань новин сайту; поле введення коментаря більше не біле, а чорне, в колір сайту; був змінений колір інших білих спливаючих меню Дискуса. Єдине, якщо залишити ввімкнутим цей стиль, темний редизайн Дискуса буде застосовуватись на інших темних сайтах з увімкнутим темним Дискусом. Добре це чи погано вирішувати вам. Скріншот;
Списки стали компактнішими, також заголовок для їх став трохи меншим. Скріншот;
Блок цитування тепер має тіні, які придають йому об'єму. Скріншот;

Зміни v2.4:

Списки стали компактнішими, також заголовок для їх став трохи меншим. Скріншот;
Блок цитування тепер має тіні, які придають йому об'єму. Скріншот.

Зміни v2.3:

З'явилася підтримка темної теми сайту. Що змінено:
1.1. Змінено колір посилань та їх підсвітки при наведенні мишкою. Скріншот;
1.2. Інша стилізація поля пошуку. Скріншот;
1.3. Виправлена, як на мене, проблема темної версії сайту, коли підсвітка деяких елементів на сайті була виконана коліром з світлої, але який губиться на темній основі. Тепер такі елементи підсвічуються більш яскравим коліром гіперпосилань новин. Скріншот;
1.4. Перемикач з світлої на темну версію сайту тепер підсвічується іншим кольором при наведенні мишкою, раніше колір ніяк не змінювався. Скріншот;
1.5. Кольорові лайки та дізлайки адаптовано під темну тему. Скріншот;
1.6. Виправлено баг, коли назви категорій, а також джерела новини не підсвічувалися іншим кольором при наведенні мишкою, хоча в світлій темі підсвічуються. Скріншот;
Disqus адаптовано під темну тему сайту. Він, як на мене, раніше був головною перепоною перед переходом на темну версію сайту. Тепер колір ніків/гіперпосилань не такий занадто контрастний, а в колір гіперпосилань новин сайту; поле введення коментаря більше не біле, а чорне, в колір сайту; був змінений колір інших білих спливаючих меню Дискуса. Єдине, якщо залишити ввімкнутим цей стиль, темний редизайн Дискуса буде застосовуватись на інших темних сайтах з увімкнутим темним Дискусом. Добре це чи погано вирішувати вам. Скріншот.

Зміни v2.2:

Блок закріпленої новини був зменшений до стандартного розміру, щоб не збільшувати кількість скролінгу сторінки. Але щоб зберегти "особливість" цього блоку, справа зверху у нього з'явився трикутник, або сіра рамка уздовж всього блока, на ваш вибір (або взагалі можете все прибрати, видалив відповідний код, в коді все зручно підписано). Скріншот.

Зміни v2.1:

Зовнішній вигляд таблиць для "ПК місяця" був трохи змінений: у клітинок таблиць з'явилися видимі межі, фон став злегка сірим, а на "зебрі" кольори Інтела стали більш синіми, а не блакитними, а АМД - червоні, а не зелені, щоб відповідати пізнаваним кольорам цих компаній. Суб'єктивно, так покращується сприйняття інформації з таблиці. Скріншот.

Зміни v2.0:

Колір блоку цитування став більш виразний, це зменшує напруження на мозок з здогадками, що це за блок та прибирає питання: "Це мені знається, чи у нього інший колір?". Скріншот.

Зміни v1.9:

Зовнішній вигляд змісту оглядів приведено до суб'єктивного ідеалу. Тепер блок має рамки та власний колір всередині. Скріншот;
При наведенні мишкою на кнопку відкриття/закриття навігації сайту вона підсвічується кольором гіперпосилання, курсор також набуває вигляду наведення на гіперпосилання. Те ж саме і з лупою пошуку. Скріншот;
Виправлено старий баг цих стилів, коли таблиця займала меншу ширину екрану за текст новини.

Зміни v1.8:

Список змісту огляду тепер нумерований. Також він став трохи компактнішим. Скріншот;
Вирівняно іконки навігації. Скріншот;
Виправлено баг сайту, коли в новині нема тегів, маленький блок запропонованих новин зліпався з основним блоком новин. Скріншот.

Зміни v1.7:

Повернуто невеликі закруглення до інтерфейсу сайту, такі ж самі, як у Дискусі. Тепер Дискус і сайт виконані в єдиному стилі. Скріншот;
Фон тегів під новинами тепер білий, в колір стрічки новин, а не в колір фону сайту. Також вони стали трохи компактнішими. Скріншот;
Назва сайту біля логотипу тепер пишеться з великої літери, а не з маленької. Скріншот.

Зміни v1.6:

Ще більш компактні три вбудовані блоки в стрічку новин "Головне", "Огляди" та "Топ обговорень". Скріншот;
Вирівняні іконки до блоків "Головне", "Огляди" та "Топ обговорень". Скріншот;
Вирівняні іконки соціальних мереж, також вони всередині стали трохи більшими за розміром. Скріншот.

Зміни v1.5:

Смужка, яка розділяє основний текст новини і підвал стала довшою, раніше вона була занадто короткою і ледь помітною, а отже, погано виконувала свою функцію. Скріншот;
Прибрано похилий текст для списків. Суб'єктивно, він погіршував читабельність. Скріншот.

Зміни v1.4:

Розмір шрифту новин сайту зменшено з 18 до 17. Тепер розмір точно такий, який був на старому сайті редакції і який зараз у коментарях Дискус. Тобто, розмір шрифту новин та коментарів тепер однаковий. Повернути розмір шрифту назад можна видалив рядок "font-size: 17px;". Скріншот;
Ще більш компактні таблиці. Скріншот.

Зміни v1.3:

Більш компактні та рівні по відношенню до іншого тексту та заголовку списки. Скріншот;
Тепер лайки та дізлайки під оглядами кольорові. Якщо вам це не подобається, можете видалити відповідальний за це код і вони не зміняться. Скріншот.

Зміни v1.2:

Додано іконки для авторів та часу публікації. Скріншот;
Вирівняна іконка до кількості коментарів, раніше вона була криво розміщена. Скріншот;
Виправлено відображення списку, раніше його пункти вилазили за межі лінії тексту. Скріншот;
Тепер поле введення в пошук біле, а не під колір фону сайту, як зараз. Це загальноприйнятий стандарт, щоб зробити пошук більш помітним для ока відвідувача. Тим більше, поле введення в коментарях Дискуса теж біле, все сходиться. Скріншот;
Збільшив область гіперпосилання переходу на головну сторінку шляхом переробки рядка, де написано слово "mezha" в блок. Це зменшить кількість випадків, коли випадково промахуєшся мишкою повз гіперпосилання. Скріншот.

Зміни v1.1:

Виправлено відображення таблиць та оцінки за огляд після нещодавнього оновлення дизайну сайту;
Інтерфейс втратив заокруглення і став квадратним, щоб, суб'єктивно, більше відповідати ПК-інтерфейсу, а не мобілці. Якщо вам більше подобається закруглений, видаліть у коді всі рядки з "border-radius: 3px;", або закоментуйте їх. Скріншот;
Три вбудовані блоки в стрічку новин "Головне", "Огляди" та "Топ обговорень" стали трохи компактнішими за висотою (приблизно на 10%), щоб звільнити місце для найголовнішого - основної стрічки новин. Скріншот.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name         Mezha.Media
@version      v2.4.0.22
@namespace    userstyles.world/user/ukr
@description  Стилі для сайту Mezha.Media
@author       ukr
@license      MIT License
==/UserStyle== */

/* ==UserStyle==
@name         Disqus (Dark)
@version      v0.1.6.1
@namespace    userstyles.world/user/ukr
@description  Темний Disqus для сайту Mezha.Media
@author       ukr
@license      MIT License
==/UserStyle== */

@-moz-document domain("mezha.media"){
.post-content > :not(p:has(img.size-large), p:has(img.size-full), .p-with-img, .fotorama, .wp-video, .embed-responsive), .post-content .fb-post, .single-review-rating-and-summary, .text-below-post {
  max-width: calc(100% - 50px);
}
.post-content > :not(.p-with-img, .fotorama, .embed-responsive), .single-review-rating-and-summary, .text-below-post {
    max-width: 94.5%;
}
body.singular .post-content .a-not-img {
    color: #103861;
    border-bottom: 1px solid #00afea;
    background-image: none;
}
.theme-dark body.singular .post-content .a-not-img {
    color: #9bc0e5;
    border-bottom: 1px solid #00afea;
    background-image: none;
}
 .toc_toggle a:hover, .toc_list a:hover, .post-content p:not(.fullwidth-element) a:hover, .post-content table a:hover {
    text-decoration: none !important;
    color: #0068D7; 
    border-bottom: 1px solid #0068D7;
 }
 .toc_toggle a, .toc_list a, .post-content p:not(.fullwidth-element) a:not(.btn-mezha), .post-content table a {
    color: #2398FF;
    background-image: none !important;
 }
body.singular article .post-content img, body.singular article .post-content iframe{
    max-width: 100%;
}
.post-content img, body.singular article .post-content iframe {
    max-width: 100%;
}
a, .owl-nav > div, input, svg path, svg rect {
    transition: ease 0s all;
}
.fotorama--wp{
    width: 95%;
}
.table td, .table th {
    padding: .35rem;
}
.fotorama{
   padding-left: 5%;
}
.news-item-small {
    margin-bottom: 15px;
}
.news-frame-bx {
    padding: 20px 24px 0px 24px;
}
.num-bx .n span {
    font-weight: 400;
}
.news-frame-bx {
    border-radius: 3px;
}
.news-item-small .img {
    border-radius: 3px;
}
.news-item {
    border-radius: 3px;
}
.news-item .img img {
    border-radius: 3px;
}
.search-form {
    border-radius: 3px;
}
.theme-dark .search-form {
    background-color: #eee;
}
.theme-dark #wrapper #toc_container {
    background-color: #3b3b3b;
}
.theme-dark .search-form INPUT[type="text"] {
    caret-color: #000;
    color: #000 !important;
}
.entry-tags a {
    border-radius: 3px;
}
body.singular article {
    border-radius: 3px;
}
.sc-list li a {
    border-radius: 3px;
}
.pagination .page-numbers {
    border-radius: 3px;
}
.thumb-responsive.lazy-loaded {
    border-radius: 3px 0 0 3px;
}
.img-fluid :not(p-with-img) {
    border-radius: 3px;
}
.p-with-img {
    padding-left: 5%;
    padding-right: 5%;
}
.custom-logo{
    border-radius: 0px !important;
}
.search-form {
    background-color: white;
}
header .logo {
    display: block;
}
.post-content li{
    margin-left: 2%;
}
.vcard.author.part{
    vertical-align: baseline;
    background-position: left;
}
.date.part{
    vertical-align: baseline;
    background-position: left;
}
span.author {
    background: no-repeat url("https://i.imgur.com/XmB7yvV.png");
    padding-left: 22px;
    background-size: 16px;
}
span.date {
    background: no-repeat url("https://i.imgur.com/MuJ7qNc.png");
    padding-left: 22px;
    background-size: 16px;
}
.theme-dark span.author.part {
    background: no-repeat url("https://i.imgur.com/xMFeqYr.png") !important;
    padding-left: 22px;
    background-size: 16px !important;
}
.theme-dark .post-meta.clearfix span.author.part {
   background-position-y: 3px !important; 
}
.theme-dark span.date {
    background: no-repeat url("https://i.imgur.com/Nfj30ha.png") !important;
    padding-left: 22px;
    background-size: 16px !important;
}
.theme-dark .post-meta.clearfix > div >.vcard.author.part {
    vertical-align: baseline !important;
    background-position: left;
    background-position-y: 3px !important;
}
.theme-dark .date.part{
    vertical-align: baseline;
    background-position: left;
    background-position-y: 3px !important;
}
.theme-dark .inf-row .comments a:hover, .theme-dark .name-bx a:hover, .theme-dark .search-form .bt .icon:hover, .theme-dark .toggle .icon:hover, .theme-dark .text-uppercase:hover {
    color: #2E7EF3 !important;
}
.theme-dark .toc_toggle a:hover, .theme-dark .toc_list a:hover, .theme-dark .post-content p:not(.fullwidth-element) a:hover, .theme-dark .post-content table a:hover {
    text-decoration: none !important;
 }
.theme-dark .toc_toggle a, .theme-dark .toc_list a, .theme-dark .post-content p:not(.fullwidth-element) a:not(.btn-mezha), .theme-dark .post-content table a {
    color: #9bc0e5;
    background-image: none !important;
}
.theme-dark .toc_toggle a:hover, .theme-dark .toc_list a:hover, .theme-dark .post-content p:not(.fullwidth-element) a:not(.btn-mezha):hover, .theme-dark .post-content table a:hover {
    border-bottom: 1px solid #2E7EF3;
}
.news-item-small .name-bx .number, .news-item-small .name-bx .number a{
    vertical-align: middle;
}
span.name{
    vertical-align: middle;
}
.embed-responsive{
    margin-left: 5%;
    max-width: 90%;
}
a.a-not-img:hover{
    color: #0155B5 !important;
}
article ol li {
    margin-bottom: 8px;
    list-style-position: inside;
}
.post-content li {
    margin-left: 0px;
}
/*▼ Світла тема. Кольорові лайки та дізлайки. Можете видалити код, щоб повернути старі ▼*/
span.icon-dislike-black-24dp:not(.theme-dark) {
    content: none;
    background: no-repeat url("https://i.imgur.com/QOPXBDs.png");
}
span.icon-like-black-24dp{
    content: none;
    background: no-repeat url("https://i.imgur.com/MRWzG8h.png");
}
/*▲ Світла тема. Кольорові лайки та дізлайки. Можете видалити код, щоб повернути старі ▲*/
/*▼ Темна тема. Кольорові лайки та дізлайки. Можете видалити код, щоб повернути старі ▼*/
.theme-dark span.icon-dislike-black-24dp:not(.theme-dark) {
    content: none;
    background: none;
    color: #ff8989;
}
.theme-dark span.icon-like-black-24dp {
    content: none;
    background: none;
    color: #9effa1;
}
/*▲ Темна тема. Кольорові лайки та дізлайки. Можете видалити код, щоб повернути старі ▲*/
.a-not-img {
    background-image: none !important;
}
.theme-dark .a-not-img {
    background-image: none !important;
}
.inf-row .comments a {
    vertical-align: middle;
}
.content-bx{
    font-size: 17px;
}
.a-not-img i {
    font-style: normal;
}
.bwlistdecimal {
    margin-left: -5%;
}
div.sharedaddy h3.sd-title::before {
    border-top: none;
}
.robots-nocontent{
    border-top: 1px solid #e3e3e3;
    margin: 0% 5%;
}
table.table li{
    margin-left: -9%;
}
.post-content hr {
    margin: 5% 5% !important;
}
.news-frame-bx .h3 {
    margin-bottom: 15px;
}
.news-frame-bx .h3 .icon {
    margin-top: 0px;
}
.sc-list li a {
    line-height: 44px;
    font-size: 22px;
    padding-left: 1px;
}
.icon-telegram-black-24dp-copy::before {
    padding-right: 1px;
    font-size: 23px;
    line-height: 36px;
}
.icon-envelope::before {
    float: left;
    padding-top: 6.5px;
    padding-left: 6.2px;
}
.news-frame-bx {
    padding: 10px 24px 0px 24px;
}
.icon-twitter::before {
    padding-right: 1px;
}
.icon-rss::before {
    line-height: 38px;
}
.icon-facebook::before {
    line-height: 38px;
    padding-right: 1px;
}
.entry-tags a {
    padding: 4px 15px;
    margin: 20px 15px 0 0;
    background-color: white;
    color: #000;
}
.aside-mnu a .icon {
    top: -3.5px;
}
.search-form .bt {
    height: 33px;
}
#toc_container.no_bullets li, #toc_container.no_bullets ul, #toc_container.no_bullets ul li {
    list-style: decimal;
    list-style-position: inside;
}
.mezha-related-posts > #carousel-related-posts > .news-item {
    margin-top: 14.5px;
}
#wrapper #toc_container .toc_list {
    padding: 0;
}
#wrapper #toc_container .toc_list {
    padding-left: 2.7%;
}
button .icon:hover{
    color: #3C71BE;
}
.slider:hover {
    color: #3C71BE;
}
.theme-dark .slider:hover {
    color: #2E7EF3;
}
.search-form .bt .icon::before {
    font-size: 21px;
}
#wrapper #toc_container {
    width: 90% !important;
    border: 1px solid;
    background-color: #f6f6f6;
}
.toggle .icon:hover {
    color: #3C71BE;
}
.toggle, .toggle1{
    cursor: pointer;
}
#wrapper article .post-content blockquote:not(.tiktok-embed) {
    background-color: #fff9e6;
    border-radius: 3px;
    padding: 15px 15px 2px 60px !important;
    max-width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table-striped > tbody > tr > td {
    border: 1px solid #ddd;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table-striped > tbody > tr > td {
    background-color: #fafafa !important;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table-striped > tbody > tr:nth-child(1) > td:nth-child(2) {
    background: #cfecfc !important;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table-striped > tbody > tr:nth-child(3) > td:nth-child(2) {
    background: #cfecfc !important;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table-striped > tbody > tr:nth-child(2) > td:nth-child(1) {
    background: #FFCCCC !important;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table-striped > tbody > tr:nth-child(4) > td:nth-child(1) {
    background: #FFCCCC !important;
}
.tag-pk-misiatsia > .post-content.clearfix > .table-responsive > table.table.table...

Reviews

No reviews yet.