Keeper Yu

1206x683

/* Шапка-фон */
@media (min-width: 1025px) {
  #profiles_show::before {
    content: '';
    display: block;
    padding-top: 358px;
  }
  .p-profiles .profile-head[data-user-id="ВАШ ID"] .c-brief::before {
    display: none;
  }
  .p-profiles .profile-head[data-user-id="ВАШ ID"] .c-history {
    top: 112px;
  }
  .p-profiles .profile-head[data-user-id="ВАШ ID"] .c-brief {
    padding-bottom: 60px;
  }
}

1279x834

/* Шапка */
@media (min-width: 1025px) {
  #profiles_show::before {
    content: '';
    background-image: url(ПРЯМАЯ_ССЫЛКА_НА_КАРТИНКУ.png);
    background-color: hsla(0, 0%, 90%, 1); 
    background-position: center;
    background-size: cover;
    display: block;
    box-shadow: 0 -20px 10px -10px rgba(0, 0, 0, 0.2) inset; 
    margin-top: 54px; /* Отступ сверху, если используете полупрозрачное меню -
                              ставьте значение на 0px */
    margin-bottom: 28px;
    padding-top: 358px; /* Высотка шапки, рекомендуемый размер: от 200 до 500 пикселей */
  }
  .p-profiles .profile-head[data-user-id="ВАШ ID"] .c-brief::before {
    display: none;
  }
  .p-profiles .profile-head[data-user-id="ВАШ ID"] .c-history {
    top: 112px;
  }
  .p-profiles .profile-head[data-user-id="ВАШ ID"] .c-brief {
    padding-bottom: 74px;
  }
}

.l-top_menu-v2 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

/* Скроллбар */
/* Кнопки скроллбара */
::-webkit-scrollbar-button {
  background-image: url(''); 
  background-repeat: no-repeat;
  width: 0px;
  height: 0px
}

/* Серая полосочка на фоне скролла */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1)
}

/* Цвет скролла */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0px;
  background-color: #ЦВЕТ;
}

/* Цвет зажатого скролла */
::-webkit-scrollbar-thumb:hover {
  background-color: #ЦВЕТ;
}

/* Визуальный размер угла угол */
::-webkit-scrollbar-corner {
  background-repeat: no-repeat;
}

/* Уголки изменения размера */
::-webkit-resizer {
  background-image: url('');
  background-repeat: no-repeat;
  width: 6px;
  height: 6px;
}

/* Размеры горизонтальный и вертикальный скролл */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Спойлеры */
/* Оформление плашки спойлера */
.p-profiles .about.block .b-spoiler label {
  background: #e6e6e6;
  border: 0;
  border-radius: 3px;
  color: #666666;
}

.p-profiles .about.block .b-spoiler:hover label {
  background: #d9d9d9;
  color: #000;
}

.p-profiles .about.block .b-spoiler label[style*="none"] {
  background: linear-gradient(6deg, #40bf75, #eeff99);
  border: 0;
  border-radius: 3px;
  color: #fff;
}

/* Настройки размеров */
.p-profiles .about.block .b-spoiler label,
.p-profiles .about.block .b-spoiler .before {
  display: block !important;
  position: relative;
  width: 100%;
  height: 40px; /* Высота */
  padding: 10px 20px;
  font-size: 16px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}

/* Невидимая кнопка "Закрыть спойлер" */
.p-profiles .about.block .b-spoiler .before {
  margin-top: -40px; /* должно соответствовать высоте, указанной выше */
}

/* Содержимое спойлера */
.p-profiles .about.block .b-spoiler .content .inner {
  display: block !important;
  background: #fafafa;
  min-height: 0;
  padding: 10px 20px;
  margin-top: 10px;
  border: 1px solid #e8ebef;
  border-radius: 3px;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Надпись Открыть/Закрыть сбоку */
.p-profiles .about.block .b-spoiler label::after {
    content: 'Открыть';
    background: #eeeeee;
    border-radius: 3px;
    padding: 0px 8px;
    float: right;
    font-size: 8px;
    text-transform: uppercase;
}
.p-profiles .about.block .b-spoiler:hover label::after {
  background: #f2f2f2;
  color: #000;
}

.p-profiles .about.block .b-spoiler label[style*="none"]::after {
  content: 'Закрыть';
  background: #47d175;
  color: #fff;
}
.p-profiles .about.block .b-spoiler:hover label[style*="none"]::after {
  content: 'Закрыть';
  background: #39c668;
  color: #fff;
}

/* Скрываем лишнее */
.p-profiles .about.block .b-spoiler .content .before::before,
.p-profiles .about.block .b-spoiler .content .after {
  display: none;
}
/* Спойлеры */

994x780

/* Табы */
/* Фон */
.b-tabs_vertical {
  clear: both;
  display: flex;
  background: #fff; /* Цвет фона */
  border-radius: 3px; /* Скругление углов */
}

/* Фон табов слева */
.b-tabs_vertical .b-tabs_list {
  border: solid; /* Тип рамки */
  border-color: #e8ebef; /* Цвет рамки */
  border-width: 1px; /* Толщина рамки */
  border-radius: 2px 0 0 2px; /* Скругленеи углов */
  background: #fff; /* Цвет фона */
  flex-shrink: 0;
  width: 15%; /* Ширина */
}

/* Сами табы */
.b-tabs_vertical .b-tabs_switch {
  padding: .75em; /* Отступы между буквами и границами таба */
  margin-bottom: 1px; /* Отступы между табами снизу */
  margin-top: 0; /* Отступы между табами сверху */
  background: #fff; /* Цвет фона */
  border-right: 0px #e8ebef solid;
  box-shadow: 0 0 0 1px #e8ebef; /* Цвет линии между табами */
  color: #000; /* Цвет текста */
  line-height: 1;
  text-align: right;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

/* Наведение на таб */
.b-tabs_vertical .b-tabs_switch:hover {
  border-right: 6px solid #e8ebef; /* Толщина и цвет плашки справа */
}
.b-tabs_vertical .b-tabs_switch.active {
  cursor: default;
}

/* Выбранный таб */
.b-tabs_vertical .b-tabs_switch.active,
.b-tabs_vertical .b-tabs_switch.active:hover {
  font-weight: bold;
  color: #26d971; /* Цвет текста */
  background: #fff; /* Цвет фона */
  border-right: 6px solid #26d971; /* Толщина и цвет плашки справа */
}

/* Линия между табами и содержимым */
.b-tabs_vertical .b-tabs_panel {
  flex-grow: 1;
  padding: 1em;
  border: 1px solid #e8ebef; /* Толщина и цвет */
  border-radius: 0 2px 2px 0; /* Скругление углов */
}
/* Табы */

[div=b-tabs_vertical to-process data-dynamic=tabs][div=b-tabs_list]

[div=b-tabs_switch active data-tab-switch]
tab 1
[/div]

[div=b-tabs_switch data-tab-switch]
tab 2
[/div]

[/div][div=b-tabs_panel data-tab]
content 1
[/div]

[div=b-tabs_panel hidden data-tab]
content 2
[/div]

[/div]

274x191

/* Ссылки */
.button1 {
  position: fixed;
  text-transform: uppercase;
  text-decoration: none;
  top: 200px; /* Отступ сверху */
  width: 150px; /* Ширина */
  height: 50px; /* Высота */
  right: -90px; /* Прячет кнопку (должно торчать 60px (150 - 60 = -90) */
  text-align: right; /* "лепит" текст на правый бок */
  padding: .8rem 1.2rem; 
  background: url(ВАША_КАРТИНКА.png) no-repeat 5px center / 30%;
/* Картинка (Стима/ВК/Телеграма) / XX px - отступ слева / XX % - величина картинки */
  background-color: #fff; /* Цвет фона кнопки */
  border: 1px solid #ddd; /* Толщина и цвет рамки */
  border-width: 1px 0 1px 1px; /* Толщина отдельных сторон рамки */
  border-radius: 5px 0 0 5px; /* Скругление углов */
  z-index: 20;
  transition: 1s ease;
}

.button1:hover {
  right: 0;
  text-decoration: none;
}

/* Ссылки 2 */
.p-profiles-show .b-link[href*="ВАША_ССЫЛКА"] {
  position: fixed;
  text-transform: uppercase;
  text-decoration: none;
  top: 140px; /* Отступ сверху */
  width: 180px; /* Ширина */
  height: 50px; /* Высота */
  right: -120px; /* Прячет кнопку (должно торчать 60px (180 - 60 = -120) */
  text-align: right; /* "лепит" текст на правый бок */
  padding: .9rem 1.2rem; 
  background: url(ПРЯМАЯ_ССЫЛКА_НА_КАРТИНКУ.png) no-repeat 14px center / 16%;
/* Картинка (Стима/ВК/Телеграма) / XX px - отступ слева / XX % - величина картинки */
  background-color: #fff; /* Цвет фона кнопки */
  border: 1px solid #ddd; /* Толщина и цвет рамки */
  border-width: 1px 0 1px 1px;
  border-radius: 5px 0 0 5px; /* Скругление углов */
  z-index: 20;
  transition: 1s ease;
}

.p-profiles-show .b-link[href*="ВАША_ССЫЛКА"]:hover {
  right: 0;
  border-color: #26d971;
  text-decoration: none;
}

1065x646

/* Полоски аниме и манги */
.b-stats_bar .bar {
  border-radius: 0;
  margin-bottom: 2px;
  height: 10px;
}

/* Отсуп между полоской манги и аниме */
.p-profiles .profile-head .c-info .c-lists-info .b-stats_bar.manga {
  margin-top: 1.2rem;
}

/* Полоска активности */
.p-profiles-show .b-stats_bar.lifetime .bar {
  height: 8px;
  border-radius: 0;
}

/* Текст в полосках */
.b-stats_bar .bar .first,
.b-stats_bar .bar .second,
.b-stats_bar .bar .third {
  font-size: 0;
  line-height: 2.25rem;
}

/* Создаёт отступ снизу */
.p-profiles-show .b-stats_bar.anime .bar,
.p-profiles-show .b-stats_bar.manga .bar {
  display: initial;
}

/* Цвета полоски аниме */
.p-profiles-show .b-stats_bar.anime .bar .first {
    background-image: linear-gradient(22deg, #40bf75, #ccff99);
}
.p-profiles-show .b-stats_bar.anime .bar .second {
    background-image: linear-gradient(22deg, #ededed, #cccccc);
}
.p-profiles-show .b-stats_bar.anime .bar .third {
    background-image: linear-gradient(22deg, #cccccc, #e6e6e6);
}

/* Цвета полоски манги */
.p-profiles-show .b-stats_bar.manga .bar .first {
    background-image: linear-gradient(22deg, #ffd966, #fffa66);
}
.p-profiles-show .b-stats_bar.manga .bar .second {
    background-image: linear-gradient(22deg, #ededed, #cccccc);
}
.p-profiles-show .b-stats_bar.manga .bar .third {
    background-image: linear-gradient(22deg, #cccccc, #e6e6e6);
}

/* Цвета полоски активности */
.p-profiles-show .b-stats_bar.lifetime .bar .first {
    border-radius: 0;
    background-image: linear-gradient(22deg, #40bf75, #eeff99);
}
.b-stats_bar .bar .third {
    background-image: linear-gradient(22deg, #ededed, #cccccc);
}

/* Кнопки аниме и манги */
/* Кнопки над полосками аниме и манги */

/* Стиль кнопок */
.p-profiles-show .b-stats_bar.anime a.title,
.p-profiles-show .b-stats_bar.manga a.title {
  display: inline-block !important;
  vertical-align: top !important;
  min-width: 92px !important;
  padding: .375rem 1rem !important;
  margin-left: 0 !important;
  margin-bottom: .8rem !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #ddd !important;
  border-radius: 2px !important;
  font-size: .875rem !important;
  font-weight: bold !important;
  line-height: 1.5rem !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: 0.2s ease;
  user-select: none;
}

/* Наведение на кнопку */
.p-profiles-show .b-stats_bar.anime a.title:hover,
.p-profiles-show .b-stats_bar.manga a.title:hover {
  background: #fff !important;
  color: #26d971 !important;
  border-color: #26d971 !important;
}

/* Нажатие на кнопку */
.p-profiles-show .b-stats_bar.anime a.title:active,
.p-profiles-show .b-stats_bar.manga a.title:active {
  background: #fff !important;
  color: #3df58a !important;
  border-color: #3df58a !important;
}

/* Кнопки под полосками аниме и манги */

/* Стиль кнопок */
.b-stats_bar .stat_names .stat_name {
  background: #fff;
  border: 1px solid #ddd;
  padding: .1rem .6rem;
  margin: 0.2rem 0.5rem 0.2rem 0;
  border-radius: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  transition: 0.2s ease;
} 

/* Наведение на кнопку */
.b-stats_bar .stat_names:hover .stat_name:hover {
    border: 1px solid #26d971;
}

/* Убрать подчёркивание текста */
.b-stats_bar .stat_names .stat_name a {
  color: #000;
  text-decoration: none;
  transition: 0.2s ease;
}

/* Цвет текста при наведении */
.b-stats_bar .stat_names:hover .stat_name:hover a {
  color: #26d971;
  text-decoration: none;
}

/* Стиль цифр справа от текста */
.b-stats_bar .stat_names .stat_name .size {
  display: inline;
  white-space: normal;
  text-align: center;
  border-left: 1px solid #ddd;
  padding: 2px 0px 2px 6px;
  margin-left: 3px;
}

/* Убрать скобки вокруг цифр */
.b-stats_bar .stat_names .stat_name .size::before,
.b-stats_bar .stat_names .stat_name .size::after {
  color: #fff;
}

/* Небольшая адаптация под телефоны */
@media (max-width: 599px) {
  .b-stats_bar .stat_names .stat_name a {
    display: block;
    padding: 0;
    margin: 0;
    transition: 0.2s ease;
  }
  .b-stats_bar .stat_names .stat_name a:hover {
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
  }
  .b-stats_bar .stat_names .stat_name {
    margin: 0.2rem 0.5rem 0.2rem 0.5rem;
  }
}

/* Активность на сайте */
/* Отступ от полосок аниме и манги */
.p-profiles .profile-head .c-info .c-additionals {
    margin-top: 30px;
}

/* Делает весь текст заглавным */
.p-profiles .profile-head .c-info .c-additionals {
    display: inline-block;
    text-transform: uppercase;
}

/* Стиль кнопок */
.p-profiles .profile-head .c-info .c-additionals div a {
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 11px;
    padding: 8px 10px;
    margin: 0 8px 0 0;
    max-width: 150px;
    text-align: center;
    line-height: 1.45;
    color: #000;
    text-decoration: none;
    transition: 0.3s ease;
}

/* Наведение на кнопоку */
.p-profiles .profile-head .c-info .c-additionals div a:hover {
  border: 1px solid #26d971;
  color: #26d971;
  text-decoration: none;
}

/* Убрать запятую */
.p-profiles .profile-head .c-info .c-additionals div:after {
  display: none;
}
/* Активность на сайте */

/* График активности */
.graph.vertical.x34 .line {
  margin-right: calc(((100% - 8px) / 33) - 8px);
}

.graph.vertical .line .bar-container .bar {
  width: 8px;
  border-radius: 0;
}

.bar.vertical .line .bar-container .value,
.bar.vertical .line .bar-container .value.mini {
  font-size: 0;
}

/* Цвет колонок */
.line:nth-child(odd) > .bar-container > .bar,
.line:nth-child(odd) > .bar-container > .bar:hover,
.line:nth-child(even) > .bar-container > .bar,
.line:nth-child(even) > .bar-container > .bar:hover,
.graph.vertical:not(:hover) .line:last-child .bar-container .bar,
.graph.vertical:hover .line:last-child .bar-container .bar{
  background: linear-gradient(0deg, #40bf75, #eeff99);
}

1119x540

/* Список аниме и манги */
/* Убрать слэши */
.b-options-floated.mylist.mobile-desktop a::after,
.b-options-floated.mylist.mobile-desktop .link::after {
  display: none;
}

/* Убрать скобки */
.p-user_rates-index .l-content .b-options-floated span::before,
.p-user_rates-index .l-content .b-options-floated span::after {
  display: none;
}

/* Настройка родительского элемента */
.b-options-floated.mobile-desktop {
    position: inherit;
    text-align: center;
    z-index: 10;
}

/* Приспускает правое меню */
.block.avatar {
    margin-top: 4rem;
} 

/* Кнопки */
.b-options-floated.mobile-desktop a {
    display: initial;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
    padding: 0.5rem 0.6rem;
    margin: 0.2rem 0.6rem;
    border-radius: 2px;
    text-decoration: none;
    transition: 0.3s ease;
}

/* Наводка на кпонки */
.b-options-floated.mobile-desktop a:hover {
    border: 1px solid #e61953;
    color: #e61953;
}

/* Нажатая кнопка */
.b-options-floated.mobile-desktop a.selected {
    background: linear-gradient(180deg, #e33166, #b8194a);
    color: #fff;
    border: 1px solid #461623;
}

/* Наводка на нажатую кнопку */
.b-options-floated.mobile-desktop a.selected:hover {
    background: #fff;
    color: #e61953;
    border: 1px solid #e61953;
}

/* Цифры */
.p-user_rates-index .l-content .b-options-floated span {
    display: inline;
    border-left: 1px solid #ddd;
    padding: 2px 6px;
    white-space: normal;
}

/* Кнопка "свернуть" */
.p-user_rates-index .l-content .b-options-floated span[class*="action"] {
  color: #000;
  background: #fff;
  margin: 0;
  display: inline;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 8px 12px;
  white-space: normal;
  transition: 0.2s ease;
}

/* Наводка */
.p-user_rates-index .l-content .b-options-floated span[class*="action"]:hover {
  color: #e61953;
  border-color: #e61953;
}

/* Корректное отображение для телефонов */
@media (max-width: 860px) {
  .b-options-floated.mobile-desktop a {
    display: inline-block;
  }
}
/* Список аниме и манги */

• Новая цветовая схема. Теперь тут всё пестрит зелёными тонами. У меня такое ощущение что я открыл свой сайт с аптекой или контору для пожертвований, меня это пугает...
• Из-за смены цветов, так же пришлось заменить картинки в шапке профиля, сейчас там всего лишь 2 изображения. *хнык-хнык*
• Добрался до остальных кнопок сайта и изменил их оформление. Не думал, что это так сильно повлияет на восприятие и будет казаться что это другая тема. :о
• Прочие детали.

• Сделал небольшой редизайн полосок аниме и манги, а так же график активности. Спасибо рандомному челу, который косвенно напомнил мне что через css можно создавать градиенты, хе-хе. Оригинальный код оставил в своих плюшках, мэйби кому-то и пригодиться. Будущему мне — определённо.
• Совсем малость изменил внешний вид кнопок в самом списке аниме и манги, чтобы смотрелось колоритнее. Этот код тоже можно найти в моих плюшках. На здоровье, будущий я!
• Несколько приукрасил спойлеры. Точнее, добавил им красок, чтобы они не были такими унылыми и строгими. В конце концов, это просто стильно.
• Мы потеряли ещё одного! То есть, в списке фоновых картинок для шапки стало на один арт меньше... Теперь их 11.
• Прочие косметические доработки.

• В связи с тем что я олень которому приспичило сменить аватар, пришлось так же перейти на более новую версию и изменить цветовую схему.
• По той же причине убрал фон и заменил его шапкой.
• Почти все изображения были заменены новыми и сильно сокращены в количестве. Теперь их всего 12. *хнык-хнык*
• Прочие маловажные изменения.

• Верхнюю менюшку немного спрятал чтобы не мешалась.
• Фон пополнил целой горой артов и теперь они рандомно отображаются при каждом обновлении страницы. Это так круто! И мне ещё не скоро это надоест. Всего артов 46.
• Немного изменил оформление профиля. Теперь зайдя ко мне можно насладиться артами которые скорее-всего плохо отображаются на широких мониторах потому, что я подбирал их под свой, хе-хе.
• Вернул нормальное отображение своего ника и всей прилагающей к нему информацией. Хотя там всё равно нечего читать, разве что теперь люди могут видеть когда я слишком занят чтобы уделять время 2D богиням.
• Прочие детали, анимации и отображения которые влияют лишь на моё довольное чувство эстетики и ваше чувства комфорта перевёрнутое вверх дном.