Темный вариант редизайна в стиле старого сайта Myshows.me
Все (статичные) изменения можно увидеть на этих скриншотах
Old Myshows.me (Dark) by Shows
Details
AuthorShows
LicenseMIT
Categorymyshows.me
Created
Updated
Size229 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Скриншоты в темном цвете.
Как установить:
- Зайдите в магазин расширений для вашего браузера или через поисковик наберите "stylus extension" и по желанию допишите название вашего браузера (Хром, Файрфокс, Опера и т.д.), чтобы искомая страница была на первой строчке поиска. Либо перейдите по ссылкам в этом пункте;
- Установите расширение;
- Нажмите на странице редизайна кнопку "Install";
- Дальше нажмите на кнопку "Установить стиль";
- Готово. Не забывайте заходить в ваше расширение и нажимать (два раза) на крутящуюся стрелочку, чтобы обновлять стили по мере выхода новых версий, чтобы исправлять возникающие баги.
Это же на скриншотах
Что сделано/изменено:
- Избавление от гигантизма: элементы на сайте более компактные, почти как на старом сайте: списки, кнопки и т. д.;
- Добавлены забытые разработчиками ховеры (изменение цвета/другие эффекты при наведении мышки на кнопки);
- В профиле сериалов информация о нем теперь снова пишется справа от постера, а не снизу;
- Аватарки стали такого же размера как на старом сайте, на новом они слишком маленькие;
- Возвращены старые кнопки изменения репутации;
- Значки сериалов "Dead", "On Air", "Pause" снова в тех же самых цветах, что и на старом сайте, а также более компактные по сравнению с новым сайтом;
- Возвращен старый эффект при наведении мышкой на главное вертикальное меню сайта;
- Кнопки типа отметки о просмотре серии и позитивной репутации теперь приятного зеленого цвета из старого сайта, а не непонятного салатового;
- В разделе фильмы их названия теперь не пишутся жирным шрифтом, непонятно зачем так сделали, сериалы-то пишутся обычным в аналогичных списках;
- "Зебра" списков такого же цвета как на старом сайте, более серого. На новом сайте на некоторых мониторах её едва видно, настолько она светлая;
- В календаре даты и название сериала + его англоязычное название теперь пишутся в одну строку, как на старом сайте, а не в две, как на новом;
- И ещё много всего по мелочи.
Также рекомендуется установить скрипты другого энтузиаста тут, которые:
- Возвращают старый вариант отображения серии с 12 х 8 на s12e08;
- В профиле вместо округленных чисел вроде 19к будет написано 19 481.
Известные ошибки:
- Эти стили не работают в браузере Сафари.
Опциональные (включаемые) возможности:
- Статусбар сериалов под постером, как на старом сайте. Уже активировано.
- Возможность изменить стиль статусов сериалов на классический, как на старом сайте. Скриншот;
- Возможность включить отображение избранных сериалов/фильмов/серий плиткой, как на старом сайте, а не списком. Скриншот;
- Старый, ещё более компактный вид списков по всему сайту; Скриншот
- Возможность отключить всё связанное с фильмами, даже новости и уведомления о просмотре фильма друзьями. Важно, чтобы настройка на странице профиля в боковом меню "С фильмами" была включена, иначе исчезнет из статистики отображение общего количества времени просмотра; Скриншот
- Возможность отключить отображение репутации на сайте, как в комментариях, так и в профиле. Скриншот
- Возможность отключить появление окна с выбором эмоций на месте постера.
- Возможность отключить полностью все эмоции на сайте.
... по какой-то причине, в редких случаях, некоторые из этих опций могут не включатся. Исправляется удалением и установкой стилей заново. Скорее всего, эта ошибка может появится, если вы когда-то давно установили стиль, а потом его обновили, кто только что установил стили первый раз, подобной проблемы не должно быть.
Как включить:
- Во время установки стиля появится панель с переключателями, переключив которые альтернативные стили будут активированы;
- Или если стиль уже установлен, кликнуть на иконку расширения, а дальше на иконку шестерни рядом с названием стиля, и появится та же панель с переключателями. Скриншот.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Old Myshows.me (Dark)
@namespace github.com/openstyles/stylus
@version 2.0.0
@description Темный вариант редизайна в стиле старого сайта Myshows.me
@author Shows
@preprocessor stylus
@var checkbox StatusbarOfSeries "Статусбар сериалов под постером" 1
@var checkbox TheClassicStatus "Классический вид статусов" 0
@var checkbox TilesForFavouriteShows "Плитка для избранных сериалов" 0
@var checkbox OldViewOfSeriesProfileLists "Старый компактный вид списков" 0
@var checkbox BoldFontForHeaders "Жирный шрифт для заголовков на странице Мои сериалы" 0
@var checkbox hideFilms "Скрыть отображение фильмов" 0
@var checkbox HideReputationDisplay "Скрыть отображение репутации" 0
@var checkbox HideEmotion "Скрыть окно эмоций на месте постера" 0
@var checkbox HideAllEmotion "Скрыть все эмоции" 0
==/UserStyle== */
@-moz-document domain("myshows.me") {
.TopNavigation__link {
padding: 3.7px 10px;
}
.Breadcrumbs__arrow {
margin: 0 8px -3px 8px;
}
.comment-rating-voters__rating {
min-width: 38px;
text-align: right;
}
.UnwatchedEpisodeItem__actions {
justify-content: flex-end;
}
.Note__content {
padding: 12px 10px;
}
.MovieStatusLabel__text {
cursor: help;
}
.EpisodeWatchLabel {
transform: scale(1);
}
.episodes-by-season__status .SvgSpriteIcon, .RowEpisodeBySeason__status .EpisodeWatchLabel .SvgSpriteIcon, .UnwatchedEpisodeItem .EpisodeWatchLabel .SvgSpriteIcon {
transform: scale(0.85);
}
.ShowCatalogCard__status-icon .SvgSpriteIcon {
width: 16px;
}
.achievement-users .UserAvatar {
height: 56.4px;
width: 56.4px;
}
.Rating-tabs .TabsItem:first-child .TabsItem-container, .CommunityComments__tabs .TabsItem:first-child .TabsItem-container, .community-comments-movies__tabs .TabsItem:first-child .TabsItem-container {
border-radius: 4px 0 0 4px;
}
.Rating-tabs .TabsItem:last-child .TabsItem-container, .CommunityComments__tabs .TabsItem:last-child .TabsItem-container, .community-comments-movies__tabs .TabsItem:last-child .TabsItem-container {
border-radius: 0 4px 4px 0;
}
.Tabs.compact .TabsItem {
margin-right: .8px;
}
.CommentRating {
width: auto;
}
.Comment__text {
margin-bottom: 4px;
}
.Comment__actions {
margin-top: 0;
}
.Emotions__reactions.Reactions--full {
grid-template-columns: repeat(4,1fr);
}
.Emotions {
padding: 20px;
}
.Reactions--full {
gap: 16px;
}
.Emotions {
border: 1px solid transparent;
}
@media (max-width: 1150px) and (min-width: 767px) {
.Emotions__reactions.Reactions--full {
grid-template-columns: repeat(3,1fr);
}
}
@media (min-width: 992px) {
.episode-col {
display: flex;
}
}
@media (max-width: 480px) {
.UnwatchedEpisodeItem__actions-rating {
display: none;
}
}
@media (min-width: 1240px) {
#episodes .RowEpisodeBySeason .episode-col__meta {
display: grid;
grid-template-columns: repeat(3, auto);
}
.episode-col__meta .episode-col__label {
grid-area: 1/3/2/4;
min-width: 32px;
justify-content: flex-end;
}
.episode-col__meta .episode-col__date {
grid-area: 1/2/2/3;
margin-left: 8px;
}
.episode-col__meta .special {
grid-area: 1/1/2/2;
}
}
.UserShowItem_mode_compact {
padding: 7px 0;
}
.UserCommentsBlock__title {
font-weight: 400;
}
.calendar-day:not(.calendar-day--selected) .router-link-active:hover, .calendar-day--selected .router-link-active {
text-decoration: none;
}
.calendar-day .router-link-active {
display: block;
}
.UserVotes-list .UserItem:not(.vertical) {
align-items: center;
}
.UserVotes-list .UserAvatar.medium {
height: 60px;
width: 60px;
}
.Radio {
cursor: pointer;
}
.Radio-icon {
transition: border .2s;
}
.movie-watch-label, .EpisodeWatchLabel {
border: none;
}
.movie-watch-label svg {
transform: scale(.9);
}
.movie-watch-label:not(.checked):hover svg {
color: #acacac;
}
.Container:not(.Comments-formContainer) .comment-form.Comments-form:first-of-type {
padding-bottom: 11px;
}
.CommentRating--placeholder::before {
transform: scale(1);
}
.WatchSoon-left.WatchSoon-left {
max-width: 70px !important;
}
.MyHome-shows .Col.right.all.condensed {
max-width: 0 !important;
}
.UnwatchedEpisodeItem__actions {
justify-content: flex-end;
}
.CommentList__separator {
padding-left: var(--container-padding);
}
.title-aside {
margin-left: 25px;
}
.ShowRatingTable__cell {
height: 33px;
line-height: 33px;
}
.ShowStatusLabel.ShowStatusLabel--paused::before {
line-height: .40rem;
}
.ShowCatalogCard__title {
font-weight: 400;
}
.CommentRating.CommentRating--placeholder {
margin-right: 0;
width: auto;
}
.ShowStatusLabel.ShowStatusLabel--dead::before {
background: var(--black-color);
}
.ShowStatusBar__option, .movie-status-bar__option {
transition: background .2s, color .2s;
}
.ShowStatusBar__option:not(.ShowStatusBar__option--active), .movie-status-bar__option:not(.movie-status-bar__option.active) {
color: #999;
}
.ShowStatusBar__option:hover:not(.ShowStatusBar__option--active), .movie-status-bar__option:hover:not(.movie-status-bar__option.active), .AwardYears__button:hover, .AwardYears__link:not(.router-link-exact-active):hover {
color: #666;
background: #e0e1e3;
}
.AwardYears__dropdown-link {
padding: 7.1px 18px;
}
.info-table td {
font-size: 15px;
}
.EpisodeWatchLabel:not(.episode-details-watchLabel), .movie-watch-label {
height: 21px;
width: 21px;
}
@media (min-width: 768px) {
.PicturePoster {
margin-right: 0;
}
}
.episodes-by-season__season-row {
cursor: default;
}
.episodes-by-season__season-row:has(.episodes-by-season__season-row_toggle-icon) {
cursor: pointer;
}
.HeaderMenu__dropdown .text-menu-item a:hover {
color: #ccc;
text-decoration: underline;
}
@media screen and (min-width: 767px) {
.PicturePoster {
margin-left: 20px;
}
.ShowDetails {
display: grid;
grid-template-columns: repeat(1, 1.05fr .95fr);
grid-template-rows: repeat(4, auto);
row-gap: 0px;
margin-bottom: 5px;
}
.ShowDetails .Container {
margin: 0;
}
.ShowDetails .Container {
grid-area: 2 / 2 / 3 / 4;
}
.ShowDetails .Container:first-child {
grid-area: 1 / 1 / 2 / 4;
}
.ShowDetails-poster {
grid-area: 2 / 1 / 3 / 2;
}
.ShowDetails-status {
grid-area: 3 / 1 / 4 / 4;
}
.ShowDetails .Container:last-child {
grid-area: 4 / 1 / 5 / 4;
}
.ShowDetails-status {
margin-right: 0;
}
.ShowStatusBar__option {
padding: 8px 0 10px;
width: auto;
}
.ShowDetails__section:first-child {
margin: 0 0 11px;
}
.ShowDetails .ShowRating-info, .ShowDetails .ShowRating {
gap: 10px 0;
flex-wrap: wrap;
}
.ShowStatusBar__list {
margin-bottom: 25px;
}
}
@media (max-width: 560px) {
.ShowRating-title {
margin-bottom: 0;
}
}
.ShowDetails .ShowRating-info {
width: auto;
}
.ShowDetails__section:last-child {
border-bottom: none;
}
.Unwatched-season:hover, .TabsItem:not(.active, .router-link-active):hover, .WatchSoon-header:hover {
background: #f7f7f7;
}
.Tabs.compact .router-link-active .TabsItem-container {
transition: background .2s;
background: #aeaeae;
}
.Tabs.compact .router-link-active:not(.active) .TabsItem-container:hover {
background: #666;
}
.Unwatched-season {
cursor: pointer;
}
.WatchSoon-item:not(:first-child) {
margin-top: 0;
}
.WatchSoon-header {
padding: .6px 10px;
}
.TabsItem:not(.active) {
cursor: pointer;
}
.TabsItem.active {
background: #f7f7f7;
}
.movie-poster-info__info {
margin-left: 0;
}
.Page__aside .ads-info svg {
margin-top: 1px;
}
.Row-container .MyLabel, .episode-col__meta .MyLabel {
font-size: 11px;
}
.ShowStatusLabel.ShowStatusLabel--onair::before {
background: #390;
}
.RowEpisodeBySeason__number {
font-size: 14px;
}
.ShowStatusLabel.ShowStatusLabel--paused::before {
background: #666;
border: none;
color: #fff;
}
.EpisodeWatchLabel.checked {
background: #339900;
}
#eye-watching path:not(:first-child) {
fill: #339900;
}
.episodes-by-season__season-row_column {
padding-left: 10px;
}
.Col {
padding-top: 7.1px;
padding-bottom: 7.1px;
}
.RowEpisodeBySeason__status {
height: 35px;
padding-left: 8.5px;
}
.episodes-by-season__episode:nth-child(2n), .UnwatchedEpisodeItem:nth-child(2n), .unwatched-movies__item:nth-child(2n), .WatchSoon-episodes .Row:nth-child(2n) {
background: #f0f0f0;
}
.RowEpisodeBySeason__number {
padding-right: 9px;
}
.ShowStatusLabel::before {
font-size: .40rem;
line-height: .30rem;
}
.Sidebar__item:not(.muted):hover .Sidebar__item-icon {
filter: grayscale(1) contrast(2) invert(.83);
transform: translatex(-100px);
}
.Sidebar__item {
overflow: hidden;
}
.Sidebar__item .Sidebar__item-before::before {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
transition: .25s;
}
.Sidebar__item[href*="/"] .Sidebar__item-before::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 57'%3E%3Cpath fill='%23c00' d='M107.016 23.153 91.251 0h-7.935c-.209 0-.313 0-.522.104-.313 0-.626.104-.94.207-.626.208-1.252.52-1.775 1.039-.521.519-.94 1.038-1.252 1.66-.314.624-.418 1.247-.522 1.766 0 .311-.105.623-.105.83v5.192c0 .104.731.207 1.566.207s1.566-.103 1.566-.207V5.814c0-.207 0-.415.105-.519.104-.727.313-1.246.73-1.557.21-.208.418-.312.731-.416.105 0 .314-.103.418-.103h6.369l13.573 20.038H5.743L19.314 3.219h6.369c.104 0 .313.103.418.103.313.104.522.208.73.416.418.311.627.83.731 1.557 0 .208 0 .312.105.52v4.983c0 .104.73.207 1.566.207.835 0 1.566-.103 1.566-.207V5.607c0-.312 0-.623-.105-.831-.104-.623-.208-1.246-.522-1.765-.313-.623-.73-1.142-1.252-1.661-.522-.52-1.148-.83-1.774-1.04-.314-.103-.627-.207-.94-.207-.209 0-.313 0-....