Комментарий от animeshnik

Комментарий #9583509
animeshnik_ALT

в профиле пользователя animeshnik_ALT14 мая 2023

Код достижений

скрины

1186x838

1182x596

396x602

Сделано в основном для стиля e-design

Изменение расположения достижений

Альтернативы (для ПК) > /comments/9163678

/*Проценты достижений*/
#profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement:after, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement:after {
  transition: 0.5s ease;
    border: 1px solid var(--color-border);
    border-radius: 25px;
    margin: 7px 7px;
    background: rgba(17,34,51,0.7);
    color: #fff;
    content: attr(data-progress) "%";
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    opacity: 0;
    position: absolute;
    right: 3px;
    text-align: center;
    top: 3px;
    width: 34px;
    z-index: 1;
    clear: left;
    display: block;
    visibility: visible !important;
}
#profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement:hover:after, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement:hover:after {
  opacity: 1;
}
/* Изменение вида достижений */
#profiles_show .achievements .cc-2 > .c-column:nth-child(2) {
  margin-left: 0;
}
/*Добавляем 5 и 6 франшизы*/
#profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(5), #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(6) {
  display: inline-block;
}
/*7 и 8*/
@media screen and (min-width: 1200px) {
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(7), #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(8) {
    display: inline-block;
  }
}
/*Настраиваем Франшизы*/
/*Откат обновления в E-design*/
@media screen and (min-width: 1200px) {
  body#profiles_show .cc-franchises .b-badge img {
    position: relative;
  }
    #profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement, #profiles_show.p-profiles-show .achievements .cc-authors .b-achievement {
      margin-left: 0;
      margin-right: 1.3%;
      left: 0.1rem;
  }
    #profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement {
      width: 31.8%;
	}
}
/*Ширина блока*/
#profiles_show .achievements .cc-2 > .c-column:nth-child(3), #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge {
  width: 100%;
}
#profiles_show .cc-franchises {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /*количество изображений в строке*/
  grid-column-gap: 2.8%; /*Промежуток между изображениями*/
  width: 97%;
  position: relative;
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    #profiles_show .cc-franchises {
      grid-template-columns: repeat(6, 1fr);
      grid-column-gap: 2.1%;
      width: 98%;
  }
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge {
    margin-bottom: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(7), #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(8) {
      display: none;
	}
  #profiles_show .cc-franchises {
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 4.2%;
      width: 97%;
  }
}
@media screen and (max-width: 472px) {
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(5), #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(6) {
    	display: none;
	}
  #profiles_show .cc-franchises {
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 5.2%;
      width: 97%;
  }
}
/*Пустота между строками франшиз*/
#profiles_show.p-profiles-show .achievements .cc-franchises .b-badge {
  margin-bottom: -11%;
}

/* Общее и Жанровые */
#profiles_show .achievements .cc-2 > .c-column:nth-child(1), #profiles_show .achievements .cc-2 > .c-column:nth-child(2) {
  width: 100%;
}

#profiles_show .achievements .cc-achievements .b-badge {
  width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {#profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement {width: 21%;}}
@media screen and (max-width: 767px) {#profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement {width: 31%;}#profiles_show .achievements .cc-achievements .b-achievement:nth-child(3) {display: inline-flex;}}
@media screen and (max-width: 472px) {
  #profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement, #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement {
      width: 48%;
  }
  #profiles_show .achievements .cc-achievements .b-achievement:nth-child(3) {
    display: none;
  }
}

/* margin в обо мне */
@media screen and (min-width: 1200px) {
  #profiles_show .profile-content .about.block {
      margin-top: 16px;
  }
}
@media screen and (max-width: 960px) {
  body#profiles_show .about.block {
      margin-top: 0px;
  }
}
/*Авторы*/
#profiles_show .achievements .cc-2 > .c-column:nth-child(4) {width: 100%;margin-left: 0;}
#profiles_show .achievements .cc-2 > .c-column:nth-child(3) {margin-bottom: 7px;}
@media screen and (max-width: 1199px) {#profiles_show .achievements .cc-2 > .c-column:nth-child(4) {margin-bottom: 0;}
  #profiles_show .achievements .cc-2 > .c-column:nth-child(3) {margin-bottom: -1.6%;}}
@media screen and (max-width: 1023px) {#profiles_show .achievements .cc-2 > .c-column:nth-child(4) {margin-bottom: 14px;}
  #profiles_show .achievements .cc-2 > .c-column:nth-child(3) {margin-bottom: 7px;}}
@media screen and (min-width: 768px) and (max-width: 1023px) {.p-profiles-show .achievements .cc-authors .b-achievement {width: 31%;}}
@media screen and (max-width: 767px) {.p-profiles-show .achievements .cc-authors .b-achievement {width: 32%;}}
@media screen and (max-width: 480px) {.p-profiles-show .achievements .cc-authors .b-achievement {width: 48%;}
  .p-profiles-show .achievements .cc-authors .b-achievement:nth-child(5), .p-profiles-show .achievements .cc-authors .b-achievement:nth-child(6) {
    display: none;
  }
  #profiles_show .cc-franchises {
    left: 0;
  }
}

@animeshnik_ALT, @antidepressant, @ту́товый шелкопря́д, @animeshnik_ALT

Ответы

animeshnik_ALT 7 августа 2023#

@animeshnik_ALT,

хочу менять постер при наведении

/*Кликабельность постеров на телефоне*/
@media screen and (max-width: 1199px) {
  .b-achievement .c-image .inner a {
    pointer-events: none;
  }
}
/*Общие, Жанровые, Авторы*/
.p-profiles .b-achievement[data-hint^="200 просмотренных аниме"] .inner:after {
   background-image: url("https://avatars.mds.yandex.net/i?id=bfa436d5d88a8e054db3eadea875ec2a_l-5232412-images-thumbs&n=13"); /*Изначальный постер*/
}
.p-profiles .b-achievement[data-hint^="200 просмотренных аниме"]:hover .inner:after {
   background-image: url("https://media.tenor.com/YEdX9c2T2hIAAAAd/your-name-anime-kimi-no-na-wa.gif"); /*при наведении*/
}
/*Франшизы*/
#profiles_show .cc-franchises .b-badge[href$="/shingeki_no_kyojin"]::after,
.p-achievements-index .b-badge[href$="/shingeki_no_kyojin"],
.p-achievements-franchise .b-badge[href$="/shingeki_no_kyojin"] {
  background-image: url("https://avatars.mds.yandex.net/i?id=913167497ff79e538b8096dcf6495425-3911063-images-thumbs&n=13");
}
#profiles_show .cc-franchises .b-badge[href$="/shingeki_no_kyojin"]:hover::after,
.p-achievements-index .b-badge[href$="/shingeki_no_kyojin"]:hover,
.p-achievements-franchise .b-badge[href$="/shingeki_no_kyojin"]:hover {
  background-image: url("https://media.tenor.com/kz08-PWQR5kAAAAd/attack-on.gif");
}

Убрать авторов

#profiles_show .achievements .cc-2 > .c-column:nth-child(4) {
    display: none;
}
@media screen and (min-width: 1200px) {
  #profiles_show .achievements .cc-2 > .c-column:nth-child(3) {
    margin-bottom: -1.6%;
  }
}

antidepressant28 октября 2023#

@animeshnik_ALT,

582x445 Приветствую, а можно как то убрать рамку?

И можно ли скрыть родные постеры?

@animeshnik_ALT

ту́товый шелкопря́д25 декабря 2023#

@animeshnik_ALT, Привет, подскажи, а как ты на странице достижений сделал свой фон?

@animeshnik_ALT

animeshnik_ALT12 марта 2024#

@animeshnik_ALT,

Замена постеров достижений

Автор: /Cosmo+☭ Оригинал: /comments/9163680

/*Замена постеров*/
#profiles_show .cc-franchises .b-badge::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  background-size: cover;
  pointer-events: auto;
  box-shadow: none !important;
  width: calc(107% - 4px);
  height: calc(76% - 4px);
  pointer-events: none;
  border-radius: 0.5rem;
}
#profiles_show .cc-franchises .b-badge::before {
  content: "";
  position: absolute;
  height: 76%;
  width: 107%;
  left: 0;
  top: 0;
  border-radius: 0.5rem;
  transition: 0s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: auto;
  opacity: 1;
  font-size: 0;
  background: none;
  visibility: visible !important;
}
#profiles_show a.b-badge:hover::before {box-shadow: none;background: none;}
#profiles_show .cc-franchises .b-badge::before {box-shadow: 0 0 0 2px rgba(var(--block-color), 0.6);}
#profiles_show .cc-franchises .b-badge:hover::before {
  box-shadow: -20px 20px 0 -17px rgb(62 62 62 / 85%),
    20px -20px 0 -17px #383838, 20px 20px 0 -20px rgb(0 0 0 / 80%),
    0 0 0 2px rgb(0 0 0 / 80%);
}
#profiles_show .cc-franchises .b-badge[data-progress="100"] img, .p-achievements-index .b-badge[data-progress="100"] img, .p-achievements-franchise .b-badge[data-progress="100"] img, .b-achievement[data-progress="100"] .inner img, .p-profiles .cc-achievements .b-achievement img {
  visibility: hidden; /*Скрываем родные постеры*/
}
/*Картинка скоро*/
#profiles_show .cc-franchises .b-badge[data-progress="100"]::after, .p-achievements-index .b-badge[data-progress="100"], .p-achievements-franchise .b-badge[data-progress="100"], .p-profiles .b-achievement[data-progress="100"] .inner:after, .p-profiles .cc-achievements .b-achievement .inner:after {
  background-image: url("https://sun9-5.userapi.com/impg/ZGoZ3FGHL5-lYzMf3wFijHQIy2QHaT2fUMUfZA/K8gIb1rLqrc.jpg?size=1280x720&quality=96&sign=19ec4684493fd54b07729c68efd7ea87&c_uniq_tag=UKW5eFNhGxFOu1yeenUL3chtoMPhhAcaGKy3Bj_8CNA&type=album");
}
/*Пример франшизы*/
#profiles_show .cc-franchises .b-badge[href$="/one_punch_man"]::after,
.p-achievements-index .b-badge[href$="/one_punch_man"],
.p-achievements-franchise .b-badge[href$="/one_punch_man"]{
  background-image: url("https://media.tenor.com/YH-LbMCZTrEAAAAd/okay-onepunchman.gif");
}
/*Страница achievements*/
.p-achievements-index.p-achievements .b-badge,
.p-achievements-franchise.p-achievements .b-badge {border-radius: 9px;}
.p-achievements-index .b-badge,
.p-achievements-franchise .b-badge {background-repeat: no-repeat;background-position: center;background-size: cover;}

.p-profiles.p-achievements .b-achievement > .c-image > .inner:after {max-width: 105%;width: 104%;height: 106%;margin-left: -2%;border-radius: 11px;}
.p-profiles .b-achievement > .c-image > .inner:after {position: absolute;display: block;content: "";width: 100%;height: 100%;top: 0;left: 0;background-size: cover;background-repeat: no-repeat;background-position: center center;visibility: visible !important;z-index: auto;}
/*Общие, жанровые, авторы пример*/
.p-profiles .b-achievement[data-hint^="200 просмотренных аниме"] .inner:after {
  box-shadow: 0 0 2px 1px #e4ba54; /*Золотая рамка*/
  background-image: url("https://media.tenor.com/YEdX9c2T2hIAAAAd/your-name-anime-kimi-no-na-wa.gif");
}
.p-profiles .b-achievement[data-hint^="Безумие / Психологическое 1 уровня"] .inner:after {
  box-shadow: 0 0 2px 1px #54e454;
  background-image: url("https://media.tenor.com/iaq02aYAdWcAAAAd/neon-genesis.gif");
}
.p-profiles .b-achievement[data-hint^="Тэцуро Араки"] .inner:after {
   background-image: url("ссылка");
}
#profiles_show .achievements .cc-franchises .b-badge {border-radius: 0.375rem;}

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

Комментарий #9583509 animeshnik_ALT

Комментарий #9583509
animeshnik_ALT