Комментарий #9827220
animeshnik_ALTanimeshnik_ALT

animeshnik_ALT
в профиле пользователя animeshnik_ALT
Автосмена расцветки
Часть 1
html:after {content: "";width: 100vw;height: 100%;position: fixed;top: 0;left: 0;z-index: 0;background-repeat: no-repeat;background-position-x: center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-color: rgba(var(--menu-back), 0.5);
  
  animation-name: background-animation;
  animation-fill-mode: forwards;animation-iteration-count: infinite;animation-timing-function: steps(1, end);
  animation-duration: 90s;
}


@media screen and (min-width: 1px) {
  html:root {
    animation-name: color-change;
    animation-fill-mode: forwards;animation-iteration-count: infinite;animation-timing-function: steps(1, end);
    animation-duration: 90s;
  }
}
/*Фикс для страницы достижений*/
html:has(.p-achievements):after {z-index: -1;}

@keyframes color-change {
  0% {
    --white-color: 251, 244, 244;
    --light-color: 244, 230, 230;
    --dark-color: 207, 170, 170;
    --bright-color: 251, 143, 143;
    --dull-color: 146, 119, 119;
    --input-color: 154, 132, 132;
    --hover-bottoms-1: 110, 33, 33;
    --buttoms-color: 129, 27, 27;
    --hover-buttoms-2: 157, 6, 6;
    --very-high-rating: 203, 87, 99;
    --high-rating: 247, 98, 98;
    --average-rating: 169, 81, 81;
    --small-rating: 120, 48, 48;
    --time-filled: 199, 77, 93;
    --time-empty: 73, 24, 32;
    --anime-inprocess: 143, 15, 66;
    --anime-complete: 224, 6, 93;
    --manga-inprocess: 8, 135, 110;
    --manga-complete: 0, 240, 200;
    --hover-color: 210, 137, 45;
    --shadows-color: 172, 119, 123;
    --block-color: 98, 29, 29;
    --menu-back: 49, 2, 11;
    --nick-cover: 139, 4, 4;
    --popup-color: 84, 3, 18;
    --hundred: 1;
  }
  33.33% {
    --white-color: 255, 255, 255;
    --light-color: 255, 255, 255;
    --dark-color: 163, 163, 163;
    --bright-color: 201, 201, 201;
    --dull-color: 110, 110, 110;
    --input-color: 255, 255, 255;
    --hover-bottoms-1: 79, 79, 79;
    --buttoms-color: 20, 20, 20;
    --hover-buttoms-2: 41, 41, 41;
    --very-high-rating: 171, 171, 171;
    --high-rating: 135, 135, 135;
    --average-rating: 64, 64, 64;
    --small-rating: 43, 43, 43;
    --time-filled: 186, 186, 186;
    --time-empty: 41, 41, 41;
    --anime-inprocess: 64, 64, 64;
    --anime-complete: 156, 156, 156;
    --manga-inprocess: 64, 64, 64;
    --manga-complete: 156, 156, 156;
    --hover-color: 128, 128, 128;
    --shadows-color: 110, 110, 110;
    --block-color: 31, 31, 31;
    --menu-back: 0, 0, 0;
    --nick-cover: 0, 0, 0;
    --popup-color: 0, 0, 0;
    --hundred: 1;
  }
  66.66% {
    --white-color: 17, 34, 51;
    --light-color: 0, 0, 0;
    --dark-color: 17, 34, 51;
    --bright-color: 23, 96, 147;
    --dull-color: 17, 34, 51;
    --input-color: 157, 162, 168;
    --hover-bottoms-1: 238, 238, 238;
    --buttoms-color: 68, 85, 102;
    --hover-buttoms-2: 29, 120, 183;
    --very-high-rating: 70, 130, 180;
    --high-rating: 98, 149, 189;
    --average-rating: 121, 169, 207;
    --small-rating: 152, 194, 227;
    --time-filled: 244, 81, 81;
    --time-empty: 170, 170, 170;
    --anime-inprocess: 121, 169, 207;
    --anime-complete: 70, 130, 180;
    --manga-inprocess: 183, 139, 199;
    --manga-complete: 237, 172, 217;
    --hover-color: 221, 82, 2;
    --shadows-color: 157, 162, 168;
    --block-color: 232, 235, 239;
    --menu-back: 255, 255, 255;
    --nick-cover: 242, 242, 242;
    --popup-color: 255, 255, 255;
    --hundred: 1;
    
    /*Цвета светлой темы*/
    --list: rgba(var(--bright-color), 1);
    --000000: #000000;
    --1b5039: #1b5039;
    --6c164d: #6c164d;
    --205e70: #205e70;
    --6c3d20: #6c3d20;
    --1b4862: #1b4862;
    --621848: #621848;
    --661515: #661515;
    --193e6a: #193e6a;
    --481764: #481764;
    --186240: #186240;
    --484848: #484848;
    --78461a: #78461a;
    --175364: #175364;
    --5e5c14: #5e5c14;
    --5c1964: #5c1964;
    --none: none;
    --linear-gradient: linear-gradient(45deg, #feda75db, #fa7e1edb, #d62976db, #962fbfdb, #4f5bd5db);
    --rgb1: rgb(23 76 23);
    --rgb2: rgb(18, 74, 132);
    --rgb3: rgb(134, 45, 30);
    --rgb4: rgb(76, 75, 75);
    --rgb5: rgb(55, 49, 132);
    --rgb6: rgb(17, 86, 82);
    --white: white;
    --Shikimori: 'Shikimori';
    --logo-rgba: rgba(var(--light-color), 1);
    --20px: 20px;
    --bold: bold;
    --151px: 151px;
    --32px: 32px;
    --8px: 8px;
    --center: center;
    --110px: 110px;
    --transparent: transparent;
    --scale1: scale(1);
    --37c75a: #37c75a;
    --1b7e44: #1b7e44;
    --2785d5: #2785d5;
    --274d81: #274d81;
    --8354db: #8354db;
    --383581: #383581;
    --177655: #177655;
    --466a5b: #466a5b;
    --7a5902: #7a5902;
    --3a2808: #3a2808;
    --d72d2d: #d72d2d;
    --913625: #913625;
    --text-shadow: 1px 0 2px #000000bf, -1px 0 2px #000000bf, 0 1px 2px #000000bf, 0 -1px 2px #000000bf, 1px 0 2px #000000bf, -1px 0 2px #000000bf, 0 1px 2px #000000bf, 0 -1px 2px #000000bf;
    --black: black;
    --0: 0;
  }
}

@keyframes background-animation {
  0% {
    background-image: url(https://avatars.mds.yandex.net/i?id=459a182a281af4bc8ab0fd8b476334e0_l-4502683-images-thumbs&n=13);
  }

  33.33% {
    background-image: url(https://avatars.mds.yandex.net/i?id=3032644ee6f07806d28a5f4889e4e628_l-5263029-images-thumbs&ref=rim&n=13&w=2560&h=1600);
  }

  66.66% {
    background-image: url(https://i.imgur.com/MjpSgar.png);
  }
}
@animeshnik_ALT
Ответы
animeshnik_ALT
animeshnik_ALT#
@animeshnik_ALT,
Часть 2
/*Цвета светлой темы*/
/*На странице списка*/
.p-user_rates-index .list-lines tr .name a {color: var(--list, rgba(var(--white-color), 1));}
.p-user_rates-index .list-lines tr td .rate-text, .b-user_rate .rate-show .note {color: var(--000000, #d6c2a9); /* более контрастный оранжевый - #dda45b */
}
/*Заголовки разных цветов*/
.fc-headlines .midheadline.red.linkheadline {color: var(--1b5039, #90c7ae);}
.fc-headlines .midheadline.blue.linkheadline {color: var(--6c164d, #c7a0b9);}
.fc-headlines .midheadline.green.linkheadline {color: var(--205e70, #79bfd4);}
.orange {color: var(--6c3d20, #deb8a1);}
.skyblue {color: var(--1b4862, #97c5e0);}
.magenta {color: var(--621848, #c7a0b9);}
.red {color: var(--661515);}
.blue {color: var(--193e6a);}
.purple {color: var(--481764);}
.green {color: var(--186240);}
.gray {color: var(--484848);}
.brown {color: var(--78461a);}
.powderblue {color: var(--175364);}
.yellow {color: var(--5e5c14);}
.pink {color: var(--5c1964);}
/*Лого клуба на странице клуба*/
.b-menu_logo img, .p-clubs-show .l-content .logo img {
  background: var(--none);
  box-shadow: var(--none);
}
/*Изменяю прозрачность градиентовой надписи*/
body * .b-anime_status_tag.other:not([data-text]), body * .b-anime_status_tag.other:before {    background: var(--linear-gradient, linear-gradient(45deg, #feda754d, #fa7e1e4d, #d629764d, #962fbf4d, #4f5bd54d)) !important;}
/*Убираю прозрачность в похожих аниме*/
.b-catalog_entry.completed {background: var(--rgb1, rgba(23, 76, 23, 0.62));}
.b-catalog_entry.planned {background: var(--rgb2, rgba(18, 74, 132, 0.62));}
.b-catalog_entry.dropped {background: var(--rgb3, rgba(134, 45, 30, 0.62));}
.b-catalog_entry.on_hold {background: var(--rgb4, rgba(76, 75, 75, 0.62));}
.b-catalog_entry.watching {background: var(--rgb5, rgba(55, 49, 132, 0.62));}
.b-catalog_entry.rewatching {background: var(--rgb6, rgba(17, 86, 82, 0.62));}
/*Кнопки в клубе, выходящие подсказки, полоски оценок, маркеры видео и изображений, кол-во уведомлений*/
.b-link_button, .tipsy-inner, .bar.horizontal .line .bar-container .value, .b-video .marker, .b-image .marker, .b-video .name, .l-top_menu-v2 .submenu > a.icon-mail span.unread span {color: var(--white, rgba(var(--white-color), 1)) !important;}
/* Своя надпись в логотипе */
@media screen and (min-width: 768px) {
  .l-top_menu-v2 .logo-container .logo {  width: var(--0, 151px);}
}
@media screen and (max-width: 767px) {
  .l-top_menu-v2 .logo-container .logo {  width: var(--0, 110px);}
}
.l-top_menu-v2 .logo-container::after {
  content: var(--Shikimori);
  color: var(--logo-rgba);
  font-size: var(--20px);
  font-weight: var(--bold);
  width: var(--151px);
  height: var(--32px);
  margin-top: var(--8px);
  text-align: var(--center);
}
@media screen and (max-width: 767px) {
  .l-top_menu-v2 .logo-container::after {    width: var(--110px);  }
}
/* Цвета под постерами на странице турнира, списков и избранного */
/*Фикс*/
#contests_show .results .b-catalog_entry:hover, #contests_show .results .b-catalog_entry {
  background: var(--transparent, transparent) !important;
  transform: var(--scale1);
  box-shadow: var(--none);
}
/*Просмотренно*/
#contests_show .b-catalog_entry.completed .cover .title span, #user_rates_index .b-catalog_entry.completed .cover .title span, #profiles_favorites .b-catalog_entry.completed .cover .title span {color: var(--37c75a, #cce0d1);}
/*Студия*/
#contests_show .b-catalog_entry.completed .cover .misc span, #user_rates_index .b-catalog_entry.completed .cover .misc span {color: var(--1b7e44, #99bba7);}
/*Запланировано*/
#contests_show .b-catalog_entry.planned .cover .title span, #user_rates_index .b-catalog_entry.planned .cover .title span, #profiles_favorites .b-catalog_entry.planned .cover .title span {color: var(--2785d5, #cad8e4);}
#contests_show .b-catalog_entry.planned .cover .misc span, #user_rates_index .b-catalog_entry.planned .cover .misc span {color: var(--274d81, #91aacc);}
/*Смотрю*/
#contests_show .b-catalog_entry.watching .cover .title span, #user_rates_index .b-catalog_entry.watching .cover .title span, #profiles_favorites .b-catalog_entry.watching .cover .title span {color:var( --8354db, #d3cce0);}
#contests_show .b-catalog_entry.watching .cover .misc span, #user_rates_index .b-catalog_entry.watching .cover .misc span {color: var(--383581, #9b99c1);}
/*Пересматриваю*/
#contests_show .b-catalog_entry.rewatching .cover .title span, #user_rates_index .b-catalog_entry.rewatching .cover .title span, #profiles_favorites .b-catalog_entry.rewatching .cover .title span {color: var(--177655);}
#contests_show .b-catalog_entry.rewatching .cover .misc span, #user_rates_index .b-catalog_entry.rewatching .cover .misc span {color: var(--466a5b);}
/*Отложено*/
#contests_show .b-catalog_entry.on_hold .cover .title span, #user_rates_index .b-catalog_entry.on_hold .cover .title span, #profiles_favorites .b-catalog_entry.on_hold .cover .title span {color: var(--7a5902, #d4d2cd);}
#contests_show .b-catalog_entry.on_hold .cover .misc span, #user_rates_index .b-catalog_entry.on_hold .cover .misc span {color: var(--3a2808, #a79e8e);}
/*Брошено*/
#contests_show .b-catalog_entry.dropped .cover .title span, #user_rates_index .b-catalog_entry.dropped .cover .title span, #profiles_favorites .b-catalog_entry.dropped .cover .title span {color: var(--d72d2d, #e4d7d7);}
#contests_show .b-catalog_entry.dropped .cover .misc span, #user_rates_index .b-catalog_entry.dropped .cover .misc span {color: var(--913625, #c7a7a1);}
/*Текст при наведении на достижения*/
.b-achievement.is-badge:before {text-shadow: var(--text-shadow);}
/*Для over*/
#profiles_show .c-column.c-left::before, #profiles_show .cc-2 .c-column .cc-2a.m30::before, #profiles_show .c-history::before, #profiles_show .c-info .c-lists-info::before {background-color: var(--black, transparent);}
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode