Skip to content

Mezha.Media 2.0: Redesign by ukr

Screenshot of Mezha.Media 2.0: Redesign

Details

Authorukr

LicenseMIT License

Categorymezha.media

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Редизайн сайту Mezha.Media в дусі старого дизайну.

Після встановлення не забувайте оновлювати стилі в програмі або увімкніть автоматичне оновлення.

Notes

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 2.0: Redesign
@version      v0.5.4
@namespace    userstyles.world/user/ukr
@description  Редизайн Mezha.Media 2.0
@author       ukr
@license      MIT License
@preprocessor stylus

@var checkbox HideNewsBlock    "Приховати великий блок новин" 1
@var checkbox HideTopDiscussions    "Приховати топ обговорень" 1

==/UserStyle== */

@-moz-document domain("mezha.media") {
:root {
	--light-blue-color-dark: #303133;
	--light-green-color: #fffaf1;
	--light-color: #f1f1f1;
	--img-border-radius: 10px;
	--black-color: #212121;
	--light-blue-color: #e3f2fd;
	--link-border-color: #00afea;
	--medium-green-color: #00afea;
	--link-hover-color: #00afea;
	--light-link-hover-color: #54c3e9;
	--medium-green-color: #54c3e9;
	--medium-blue-color: #54c3e9;
}
[data-theme="dark"] {
	--link-border-color: #3C71BE;
	--medium-green-color: #3C71BE;
	--link-hover-color: #3C71BE;
	--light-link-hover-color: #3C71BE;
	--medium-blue-color: #3C71BE;
}
body {
	font-family: Roboto,sans-serif;
	font-size: 18px;
	color: #212121;
}
.post_social .facebook_icon, .post_social .x_icon, .post_social .telegram_icon, .post_social .link_icon {
	width: 36px;
	height: 36px;
}
.header_top, .main_page .header_top_wrapper .header_top {
	display: none;
}
.post_side_discussions {
	background: var(--light-green-color);
}
.section_side_list {
	background: #f8e9ec;
}
.post_side_news {
	background: #fff;
}
.post_text {
	font-weight: 400;
	line-height: 1.6;
	font-size: 1em;
}
.section_side_list, .article_news, .post_side_news {
	border: none;
}
.header_crumbs a:not(.breadcrumbs_item) {
    display: none;
}
.header_crumbs .breadcrumbs_item {
    margin: 0 auto;
	font-weight: 500;
	font-size: 14px;
}
.post_author_name, .post_author_name > span {
	font-size: 14px;
}
.post_author_name а {
	padding-bottom: 5px;
}
.post_author_name {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.section_news_side, .section_news_adv {
	padding: 30px 0px;
	max-width: 280px;
}
.section_news_wrapper {
	max-width: 1470px;
	grid-template-columns: 280px auto 280px;
}
.layout_wrapper, .section_article_wrapper {
	max-width: 1470px;
}
.section_article_adv {
	margin-top: 30px;
	max-width: 280px;
	padding: 0;
}
.post_article_body .post_text > :not(.back_top, .fullwidth_element), .post_article_body :is(.post_title, .header_crumbs, .post_author, .post_service, .post_tags, .post_social_wrapper, .post_article .article_label_adv) {
	max-width: 680px;
}
.post_article_body {
	max-width: 870px;
	margin-left: auto;
}
.post_title {
	font-size: 2em;
	font-weight: 500;
  	line-height: 1.2;
}
.post_date, .post_comments {
	font-size: 14px;
	text-transform: inherit;
}
.post_service {
	padding: 16px 20px 40px 20px;
}
.post_photo {
	padding-bottom: 30px;
}
.post_author_media {
	width: 60px;
	height: 60px;
	flex: 0 0 60px;
	margin-right: 10px;
}
.post_news_body .post_text > :not(.back_top, .fullwidth_element), .post_author, .post_service {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.side_sm_title {
	font-size: 14px;
	justify-content: center;
	padding: 20px 20px 16px 20px;
}
.article_news .article_title {
	line-height: 1.5em;
}
.post_tags, .post_social {
	justify-content: center;
}
.post_social_wrapper {
	text-align: center;
	margin-top: 2rem;
}
.post_tags {
	padding: 30px 20px 10px 20px;
	gap: 10px;
}
.post_tags a, .post_tags span {
	margin-right: 0;
}
.post_social_title {
	display: inline-block;
	font-size: 9pt;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1em;
	text-transform: inherit;
}
.post_social_title::before {
	border-top: 1px solid #dcdcde;
	content: "";
	display: block;
	margin-bottom: 1em;
	min-width: 30px;
	width: 100%;
}
#disqus_thread {
	margin-top: 50px;
}
.post_social > a {
	border: var(--black-color) 1px solid;
	margin-right: 0;
}
.post_social {
	gap: 15px;
}
.article_story_list {
	border: none;
	background: #fff;
	border-radius: var(--img-border-radius);
	padding: 0;
	width: 100%;
}
.article_story_list .article_media {
	margin: 0 20px 0 0;
}
.article_story_list .article_title {
	font-size: 20px;
	line-height: 1.5;
}
.section_articles_list_wrapper .article_story_list:first-child {
	padding-top: 0;
}
.article_story_list .article_content {
	padding: 10px 20px 10px 0;
	width: 100%;
	display: flex;
  	flex-direction: column;
  	justify-content: space-between;
  	min-height: 137.65px;
}
.article_story_list .article_media img {
	min-height: 137.65px;
	object-fit: cover;
}
.article_story_list:has(a[href*="/reviews/"]), .article_story_list:has(a[href*="/video/"]), .article_story_list:has(a[href*="/articles/"]) {
    background-color: #e3f2fd;
}
.article_story_list:has(a[href*="/special-project/"]) {
    background-color: #f8e9ec;
}
.article_story_list a[href*="/reviews/"], .article_story_list a[href*="/articles/"], .article_story_list_bold .article_title {
    font-weight: 700;
}
.article_story_list .article_date .comment_icon .disqus-comment-count, .article_story_list_sm .article_date .comment_icon .disqus-comment-count, .article_story_grid .article_date .comment_icon .disqus-comment-count {
	margin-right: 0;
	font-weight: 400;
}
.article_story_grid .article_date {
	font-size: 14px;
	line-height: 1.5em;
	text-transform: inherit;
}
.section_title {
	padding: 24px 0 13px 0;
}
.article_story_list_sm {
	border: none;
}
.article_story_list_sm .article_date, .article_story_grid .article_date {
	padding: 15px 0 5px 0;
}
.article_story_list_sm .article_date span:not(.comment_icon) {
	margin-right: 10px;
}
.article_story_grid .comment_icon *, .article_story_list .comment_icon *, .article_story_list_sm .comment_icon * {
	bottom: -2px;
}
.article_story_list .article_label {
	display: none;
}
.layout_n_wrapper {
	max-width: 1470px;
}
.section_list_content {
	max-width: calc(910px);
	padding: 0;
	margin-left: auto;
}
.section_side {
	max-width: 280px;
}
.section_list_wrapper {
	justify-content: center;
}
.article_story_list .article_date, .article_story_list_sm .article_date {
	text-transform: inherit;
	font-size: 14px;
}
.article_story_list .article_date, .article_story_list_sm .article_date {
	display: flex;
	flex-wrap: wrap;
}
.article_date .comment_icon {
	margin-left: auto;
}
.article_story_list .article_date span:not(.comment_icon) {
	margin-right: 10px;
}
.pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.footer_social_wrapper [class$="_icon"] {
	width: 50px;
	height: 50px;
}
.footer_social_wrapper .icon {
	border: var(--dark-color) 1px solid;
}
.post_side_discussions .article_news .comment_s_icon {
	bottom: -6px;
}
.post_side_discussions .article_news .comment_icon {
	font-size: 14px;
}
.search_field {
	border-radius: var(--img-border-radius);
}
.top_menu_topic a {
	border: var(--dark-color) 1px solid;
}
.main_menu > .special_tag a::before {
	background: var(--link-border-color);
}
.section_main_discussions_wide_list .article_story_grid .comment_icon {
	font-size: 14px;
}
.section_main_discussions_wide_list .article_story_grid .comment_s_icon {
	bottom: -5px;
}
.post_title {
	max-width: 100%;
}
.pagination .pagination_item_active a:hover, .pagination_item_active a, .lang_menu_item_active:hover span {
	color: var(--white-color);
}
.lang_menu_item_active:hover {
	background: var(--light-link-hover-color);
	color: var(---light-link-hover-color);
}
.pagination .pagination_item .arr_r_icon:hover, .pagination .pagination_item .arr_l_icon:hover {
	fill: var(--light-link-hover-color);
}
.post_contents_close_button .icon_arrow {
	top: -7px;
}
.post_contents {
	padding: 7px 20px 7px 20px;
}
.post_text :is(.post_contents, .post_rating) ul:not(.hidden) {
	padding-top: 15px;
}
.post_contents_title, .post_rating_title {
	font-size: 16px;
}
.post_text :is(.post_rating) ul li::before {
	top: 11px;
}
.post_text #mainNav ul li::before {
	top: 13px;
}
.post_rating_properties_title :is(.pros_icon, .cons_icon) {
	margin-right: 10px;
}
.section_article_wrapper #disqus_thread {
	max-width: 870px;
	margin-left: auto;
}
.table {
	background: #ebf9fe;
}
.table td, .table th {
	font-size: 16px;
}
.section_topic_b {
	margin: 13px 0 0px 0;
}
[data-theme="dark"] :is(.section_topic_b, .section_topic_c, .menu_popup, .search_form_wrapper .search_button, .post_side_discussions, .post_news_body, .post_article_body, .section_article_wide, .section_other_sp_list_wrapper .article_body, .post_side_news) {
	background: var(--light-blue-color-dark);
}
[data-theme="dark"] :is(.section_title, .section_title a, .section_list_wrapper .article_title a, .section_list_wrapper .article_date, .footer_info, .footer_copy, .footer_menu a, .pagination, .section_main_discussions_wide .article_story_grid, .section_main_discussions_wide .article_story_grid a, .top_menu a, .top_menu_proj a, .top_menu_topic a, .menu_title, .section_page_title, .main_menu > li a, .side_sm_title, .side_sm_title a, .comment_icon, .section_menu > li a, .section_author_info, .header_crumbs, .header_crumbs a, .article_author_list a, .ui_datepicker_title, .ui_datepicker_calendar td a, .ui_datepicker_calendar td, .post_news_body, .news_grid_wrapper a, .post_author_name a, .post_tags a, .section_title_sm, .section_other_news_wrapper a, .post_article_body, .post_gallery_source, .post_title, .post_photo_source, .button_more, .section_other_sp_list_wrapper .article_title a, .article_story_grid .article_date, .section_other_sp_wrapper .article_title a, .section_search_title, .post_comments){
	color: #cccccd;
}
[data-theme="dark"] .disqus-comment-count {
  color: #cccccd;
}
[data-theme="dark"] .section_side_list {
	background-color: #6b5458;
}
[data-theme="dark"] .article_story_list {
	background-color: #30313...

Reviews

No reviews yet.