Ваши уникальные расцветки

EngiNierвE-club - поддержка стиля Edesign для shikimori

6 октября 2019

Собственно ниже вы можете публиковать свои уникальные расцветки из сборщика.
Требования:

скриншоты (2): Профиль + Страница произведения;
скриншот (1): Таблица с выбранными цветами в сборщике;
ссылка картинки на фон станицы;
ссылка картинки на шапку профиля, если таковая используется в стиле.

Пример:

Обсуждение

Комментарии

krios 6 октября 2019#

1024x768

Фон и цвета

фон - i.ibb.co/qmxj7wv/osman-rana-466971-unsplash.jpg

html:root {
  --white-color: 236, 220, 198;
  --light-color: 217, 185, 140;
  --dark-color: 165, 127, 74;
  --bright-color: 204, 162, 102;
  --dull-color: 117, 105, 87;
  --input-color: 138, 108, 66;
  --hover-bottoms-1: 48, 36, 18;
  --buttoms-color: 61, 35, 5;
  --hover-buttoms-2: 153, 89, 0;
  --very-high-rating: 150, 114, 64;
  --high-rating: 61, 35, 5;
  --average-rating: 84, 61, 28;
  --small-rating: 57, 41, 19;
  --time-filled: 125, 95, 54;
  --time-empty: 55, 42, 21;
  --anime-inprocess: 69, 146, 76;
  --anime-complete: 41, 107, 47;
  --manga-inprocess: 189, 15, 86;
  --manga-complete: 153, 0, 62;
  --hover-color: 210, 137, 45;
  --shadows-color: 132, 107, 72;
  --block-color: 61, 44, 20;
  --menu-back: 10, 6, 0;
  --nick-cover: 67, 54, 30;
  --popup-color: 37, 27, 14;
  --hundred: 1;
}

@EngiNier

krios 6 октября 2019#

Custom

1024x768

"On Battle" c тем же фоном - для сравнения

1024x768

Custom

1024x768

On Battle

1024x768

Фоны и цвета

фон - 1. cutt.ly/5euLqMv
2. i.ibb.co/YLkSmQ2/art-tylercreatesworlds-kosmos-714.jpg

html:root {
  --white-color: 198, 219, 241;
  --light-color: 164, 196, 229;
  --dark-color: 123, 156, 209;
  --bright-color: 117, 175, 245;
  --dull-color: 108, 125, 147;
  --input-color: 77, 113, 163;
  --hover-bottoms-1: 13, 21, 38;
  --buttoms-color: 13, 21, 38;
  --hover-buttoms-2: 154, 53, 25;
  --very-high-rating: 52, 75, 131;
  --high-rating: 42, 63, 116;
  --average-rating: 29, 44, 83;
  --small-rating: 18, 31, 59;
  --time-filled: 36, 58, 91;
  --time-empty: 15, 21, 36;
  --anime-inprocess: 69, 146, 76;
  --anime-complete: 41, 107, 47;
  --manga-inprocess: 189, 15, 86;
  --manga-complete: 153, 0, 62;
  --hover-color: 226, 71, 54;
  --shadows-color: 76, 115, 154;
  --block-color: 26, 38, 61;
  --menu-back: 6, 12, 24;
  --nick-cover: 23, 33, 54;
  --popup-color: 17, 24, 39;
  --hundred: 1;
}

@jsynth, @EngiNier

jsynth29 октября 2019#

@krios,

цвета blue_gray

html:root {
  --white-color: 198, 219, 241;
  --light-color: 164, 196, 229;
  --dark-color: 123, 156, 209;
  --bright-color: 117, 175, 245;
  --dull-color: 108, 125, 147;
  --input-color: 77, 113, 163;
  --hover-bottoms-1: 13, 21, 38;
  --buttoms-color: 13, 21, 38;
  --hover-buttoms-2: 154, 53, 25;
  --very-high-rating: 52, 75, 131;
  --high-rating: 42, 63, 116;
  --average-rating: 29, 44, 83;
  --small-rating: 18, 31, 59;
  --time-filled: 36, 58, 91;
  --time-empty: 15, 21, 36;
  --anime-inprocess: 69, 146, 76;
  --anime-complete: 41, 107, 47;
  --manga-inprocess: 189, 15, 86;
  --manga-complete: 153, 0, 62;
  --hover-color: 226, 71, 54;
  --shadows-color: 76, 115, 154;
  --block-color: 26, 38, 61;
  --menu-back: 6, 12, 24;
  --nick-cover: 23, 33, 54;
  --popup-color: 17, 24, 39;
  --hundred: 1;
}

@krios

krios14 ноября 2019#

@jsynth, изменил

krios14 ноября 2019#

1024x768

Фон и цвета

фон - i.ibb.co/K775PkH/dark-forest-29.jpg

html:root {
  --white-color: 194, 240, 234;
  --light-color: 146, 196, 183;
  --dark-color: 108, 172, 165;
  --bright-color: 52, 178, 146;
  --dull-color: 133, 224, 201;
  --input-color: 75, 155, 128;
  --hover-bottoms-1: 18, 43, 37;
  --buttoms-color: 31, 71, 61;
  --hover-buttoms-2: 81, 107, 6;
  --very-high-rating: 65, 164, 164;
  --high-rating: 58, 120, 120;
  --average-rating: 35, 92, 92;
  --small-rating: 21, 71, 71;
  --time-filled: 20, 61, 54;
  --time-empty: 13, 33, 30;
  --anime-inprocess: 69, 146, 76;
  --anime-complete: 41, 107, 47;
  --manga-inprocess: 189, 15, 86;
  --manga-complete: 153, 0, 62;
  --hover-color: 169, 210, 45;
  --shadows-color: 83, 172, 172;
  --block-color: 23, 54, 54;
  --menu-back: 0, 10, 10;
  --nick-cover: 32, 96, 85;
  --popup-color: 0, 20, 20;
  --hundred: 1;
}

@EngiNier

krios15 ноября 2019#

Черно-белый, акцентирующий оранжевый

1024x768

Фон и цвета

Фон - is.gd/xGPX1z

html:root {
  --white-color: 219, 219, 219;
  --light-color: 184, 184, 184;
  --dark-color: 155, 155, 155;
  --bright-color: 217, 217, 217;
  --dull-color: 116, 116, 116;
  --input-color: 120, 120, 120;
  --hover-bottoms-1: 43, 43, 43;
  --buttoms-color: 74, 74, 74;
  --hover-buttoms-2: 140, 140, 140;
  --very-high-rating: 156, 156, 156;
  --high-rating: 105, 105, 105;
  --average-rating: 82, 82, 82;
  --small-rating: 64, 64, 64;
  --time-filled: 92, 92, 92;
  --time-empty: 43, 43, 43;
  --anime-inprocess: 69, 146, 76;
  --anime-complete: 41, 107, 47;
  --manga-inprocess: 189, 15, 86;
  --manga-complete: 153, 0, 62;
  --hover-color: 255, 153, 51; /*оранжевый*/
  --shadows-color: 150, 150, 150;
  --block-color: 69, 69, 69;
  --menu-back: 21, 21, 21;
  --nick-cover: 69, 69, 69;
  --popup-color: 39, 39, 39;
  --hundred: 1;
}

@EngiNier

EngiNier 8 декабря 2019#

@krios,
@krios,
@krios,
@krios,
Добавлю как новые. Кидать скрин с цветами, т.к. мне нужны hex кода, а не rgb. Отписать название стилей - тогда добавлю.

animeshnik_ALT 5 мая 2023#

1920x1080

894x432

фон и код

Фон - avatars.mds.yandex.net

@media screen and (min-width: 1px) {
  html:root {
    --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;
  }
}

animeshnik_ALT20 мая 2023#

Классическая тема шикимори

фон и код

Фон - i.imgur.com/MjpSgar.png

@media screen and (min-width: 1px) {
  html:root {
    --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;
  }
}

Также я настоятельно рекомендую добавить эти настройки для лучшей контрастности:

/*На странице списка*/
.p-user_rates-index .list-lines tr .name a {
    color: rgba(var(--bright-color), 1);
}
.p-user_rates-index .list-lines tr td .rate-text, .b-user_rate .rate-show .note {
    color: #000000; /* более контрастный оранжевый - #dda45b */
}
/*Заголовки разных цветов*/
.fc-headlines .midheadline.red.linkheadline {
    color: #1b5039;
}
.fc-headlines .midheadline.blue.linkheadline {
    color: #6c164d;
}
.fc-headlines .midheadline.green.linkheadline {
    color: #205e70;
}
.orange {
    color: #6c3d20;
}
.skyblue {
    color: #1b4862;
}
.magenta {
    color: #621848;
}
.red {
    color: #661515;
}
.blue {
    color: #193e6a;
}
.purple {
    color: #481764;
}
.green {
    color: #186240;
}
.gray {
    color: #484848;
}
.brown {
    color: #78461a;
}
.powderblue {
    color: #175364;
}
.yellow {
    color: #5e5c14;
}
.pink {
    color: #5c1964;
}
/*Лого клуба на странице клуба*/
.b-menu_logo img, .p-clubs-show .l-content .logo img {
    background: none;
    box-shadow: none;
}
/*Изменяю прозрачность градиентовой надписи*/
body * .b-anime_status_tag.other:not([data-text]), body * .b-anime_status_tag.other:before {
    background: linear-gradient(45deg, #feda75db, #fa7e1edb, #d62976db, #962fbfdb, #4f5bd5db) !important;
}
/*Убираю прозрачность в похожих аниме*/
.b-catalog_entry.completed {
    background: rgb(23 76 23);
}
.b-catalog_entry.planned {
    background: rgb(18, 74, 132);
}
.b-catalog_entry.dropped {
    background: rgb(134, 45, 30);
}
.b-catalog_entry.on_hold {
    background: rgb(76, 75, 75);
}
.b-catalog_entry.watching {
    background: rgb(55, 49, 132);
}
/*Кнопки в клубе, выходящие подсказки, полоски оценок*/
.b-link_button, .tipsy-inner, .bar.horizontal .line .bar-container .value, .b-video .marker, .b-image .marker, .b-video .name {
    color: white !important;
}

@nessensis

nessensis 6 июля 2023#

@animeshnik_ALT, спасибо за белую тему, взяла поносить.
Добавление к коду - забыли про статус "Пересматриваю", где убирали прозрачность

.b-catalog_entry.rewatching {
    background: rgb(31, 111, 106);
}

@animeshnik_ALT

animeshnik_ALT 6 июля 2023#

@nessensis, Действительно забыл, вот ещё в паре мест поменял цвета

код

.b-catalog_entry.rewatching {
  background: rgb(17, 86, 82);
}
/* Своя надпись в логотипе */
.l-top_menu-v2 .logo-container .logo {
  display: none;
}
.l-top_menu-v2 .logo-container::after {
  content: 'Shikimori';
  color: rgba(var(--light-color), 1);
  font-size: 20px;
  font-weight: bold;
  width: 151px;
  height: 32px;
  margin-top: 8px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .l-top_menu-v2 .logo-container::after {
    width: 110px;
  }
}
/* Цвета под постерами на странице турнира и списков */
/*Фикс*/
#contests_show .results .b-catalog_entry:hover, #contests_show .results .b-catalog_entry {
  background: transparent !important;
  transform: scale(1);
  box-shadow: none;
}
/*Просмотренно*/
#contests_show .b-catalog_entry.completed .cover .title span, #user_rates_index .b-catalog_entry.completed .cover .title span {
    color: #37c75a;
}
/*Студия*/
#contests_show .b-catalog_entry.completed .cover .misc span, #user_rates_index .b-catalog_entry.completed .cover .misc span {
    color: #1b7e44;
}
/*Запланировано*/
#contests_show .b-catalog_entry.planned .cover .title span, #user_rates_index .b-catalog_entry.planned .cover .title span {
    color: #2785d5;
}
#contests_show .b-catalog_entry.planned .cover .misc span, #user_rates_index .b-catalog_entry.planned .cover .misc span {
    color: #274d81;
}
/*Смотрю*/
#contests_show .b-catalog_entry.watching .cover .title span, #user_rates_index .b-catalog_entry.watching .cover .title span {
    color: #8354db;
}
#contests_show .b-catalog_entry.watching .cover .misc span, #user_rates_index .b-catalog_entry.watching .cover .misc span {
    color: #383581;
}
/*Пересматриваю*/
#contests_show .b-catalog_entry.rewatching .cover .title span, #user_rates_index .b-catalog_entry.rewatching .cover .title span {
    color: #177655;
}
#contests_show .b-catalog_entry.rewatching .cover .misc span, #user_rates_index .b-catalog_entry.rewatching .cover .misc span {
    color: #466a5b;
}
/*Отложено*/
#contests_show .b-catalog_entry.on_hold .cover .title span, #user_rates_index .b-catalog_entry.on_hold .cover .title span {
    color: #7a5902;
}
#contests_show .b-catalog_entry.on_hold .cover .misc span, #user_rates_index .b-catalog_entry.on_hold .cover .misc span {
    color: #3a2808;
}
/*Брошено*/
#contests_show .b-catalog_entry.dropped .cover .title span, #user_rates_index .b-catalog_entry.dropped .cover .title span {
    color: #d72d2d;
}
#contests_show .b-catalog_entry.dropped .cover .misc span, #user_rates_index .b-catalog_entry.dropped .cover .misc span {
    color: #913625;
}
/*Текст при наведении на достижения*/
.b-achievement.is-badge:before {
  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;
}

animeshnik_ALT25 июля 2023#

Inferno Bloodlust
В таблице с цветами очепятка "Полоса запланирвоанной манги"

1920x1080

903x437

фон и код

Фон - avatars.mds.yandex.net

@media screen and (min-width: 1px) {
  html:root {
    --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;
  }
}

Твой комментарий