[Thème Liste Animes & Mangas] Pure Dark & Red Style (Responsive)

Salut les gens, j'ai fait un thème responsive pour votre liste d'animes et de mangas que j'ai nommé Pure Dark & Red Style, comme vous l'aurez probablement deviné par le nom, celui-ci est noir et rouge, mais pour ceux n'aimant pas le rouge vous pouvez changer la couleur facilement et rapidement.


PURE DARK & RED STYLE


Aperçu général du thème



Effet au survol, selon les différentes classifications : En cours, Terminé, A voir, En pause, Abandonné


Installation du thème :

  1. Aller dans les paramètres du compte
  2. Aller dans CSS dans ma liste d'animes ou CSS dans ma liste de mangas
  3. Copier/Coller le CSS disponible ci-dessous
  4. Optionnel : Possibilité de changer les couleurs en modifiant la valeur hexadécimale (Exemple changer #eb3333 de --couleur-principale par #3fa9f5 pour changer la couleur principale)
    Voici un site pour obtenir l'hexadécimale de la couleur désirée : https://htmlcolorcodes.com/fr/
  5. Optionnel : Supprimez la longue ligne indiquée au début si vous voulez avoir le logo de base en orange au lieu du rouge.
  1. Profitez du thème.
    Envoyez-moi un message sur Anime-Gate ou sur Discord si vous remarquez un bug.


CSS Pure Dark & Red Style :

:root {
 --couleur-principale: #eb3333;
 --couleur-principale-hover: #b31919;
 --couleur-en-cours: #3285bf;
 --couleur-termine: #33bf32;
 --couleur-a-voir: #e9ebed;
 --couleur-en-pause: #d8b934;
 --couleur-abandon: #c52929;
 --red-animegate-logo: url("https://www.anime-gate.net/images/anime-manga-download-animegate-logo-white.svg");
 /* Supprimez cette longue ligne si vous préférez le logo de base (utile si vous changez de couleur principale par exemple) */--red-animegate-logo: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 338 59.1' style='enable-background:new 0 0 338 59.1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23EB3333;} .st1{fill:%23FFFFFF;} %3C/style%3E%3Cpath class='st0' d='M33.7,11.8H22.8l-10.2,47h8.8l2.1-11l0,0H30l-0.9-7h-4.7l0,0l0,0l1.7-9.5c0.5-2.7,1.2-8.5,1.7-10.5H28 c0.4,2,1,7.6,1.5,10.5l1.4,9.2l1.1,8.6l1.8,9.8h8.8L33.7,11.8z'/%3E%3Cpath class='st1' d='M27.6,0.4C12.4,0.4,0,12.8,0,28.2c0,8.2,3.5,15.6,9.2,20.7l1.7-7.2c-3-3.7-4.7-8.4-4.7-13.5 c0-11.9,9.6-21.6,21.5-21.6s21.5,9.7,21.5,21.6c0,5-1.7,9.6-4.6,13.3l1.8,7.2c5.5-5.1,8.9-12.4,8.9-20.5 C55.3,12.8,42.9,0.4,27.6,0.4z'/%3E%3Cg transform='translate(0, 6) scale(1.1, 1.1)'%3E%3Cpath class='st0' d='M72.3,31.2l-1.8,9h-7.4l8.6-39.5h9.2l7.7,39.5h-7.4l-1.7-9H72.3z M78.7,25.2l-1.3-8.3c-0.4-2.4-0.9-6.3-1.3-9 h-0.2c-0.4,2.6-1,6.7-1.4,9L73,25.1L78.7,25.2L78.7,25.2z'/%3E%3Cpath class='st0' d='M92.9,40.2V0.7h7l6.1,15.5c1.2,3,3.1,8.1,4.2,11.6h0.1c-0.2-4.2-0.8-11-0.8-18.3V0.7h6.7v39.5h-7l-6-15 c-1.3-3.3-3.1-8.3-4-11.9h-0.1c0.2,4,0.5,10.1,0.5,18v8.9H92.9L92.9,40.2z'/%3E%3Cpath class='st0' d='M130.8,0.7v39.5h-7.7V0.7H130.8z'/%3E%3Cpath class='st0' d='M161.8,26.3c-0.2-3.8-0.5-8.9-0.4-13.1h-0.2c-0.7,4.2-1.8,9.1-2.5,12.1l-3.4,14.1h-5.5l-3.3-13.9 c-0.8-3.2-1.8-8.1-2.4-12.4h-0.2c-0.1,4.3-0.4,9.3-0.6,13.2L142.7,40h-6.6L139,0.5h8.1l3.2,14.3c1.1,5,2.1,9.4,2.8,13.8h0.1 c0.6-4.4,1.5-8.9,2.5-13.8l3.1-14.3h8.1l2.4,39.5h-6.9L161.8,26.3z'/%3E%3Cpath class='st0' d='M191.7,22.8h-9v10.7h10.2v6.7H175V0.7h17.2v6.7h-9.5v9.1h9V22.8L191.7,22.8z'/%3E%3Cpath class='st1' d='M208.1,21.2v5.5h-11.7v-5.5H208.1z'/%3E%3Cpath class='st1' d='M236.2,39.1c-1.7,0.7-5.3,1.4-8.2,1.4c-4.5,0-7.9-1.3-10.6-3.9c-3.4-3.3-5.2-9.1-5.1-15.9 c0.2-14.4,8.4-20.3,16.8-20.3c3,0,5.2,0.6,6.5,1.2l-1.4,6.6c-1.1-0.6-2.6-0.9-4.5-0.9c-5.2,0-9.4,3.6-9.4,13.9 c0,9.5,3.7,12.9,7.3,12.9c0.7,0,1.2-0.1,1.5-0.2v-9.6h-3.5V18h10.6L236.2,39.1L236.2,39.1z'/%3E%3Cpath class='st1' d='M248.2,31.2l-1.8,9H239l8.6-39.5h9.2l7.7,39.5H257l-1.7-9H248.2z M254.6,25.2l-1.3-8.3c-0.4-2.4-0.9-6.3-1.3-9 h-0.2c-0.4,2.6-1,6.7-1.4,9l-1.5,8.2C248.9,25.2,254.6,25.2,254.6,25.2z'/%3E%3Cpath class='st1' d='M270.1,7.8h-7V0.7h21.7v7.1h-7v32.4h-7.7V7.8L270.1,7.8z'/%3E%3Cpath class='st1' d='M305.6,22.8h-9v10.7h10.2v6.7h-17.9V0.7H306v6.7h-9.5v9.1h9L305.6,22.8L305.6,22.8z'/%3E%3C/g%3E%3C/svg%3E");
}
@\import "https://fonts.googleapis.com/css?family=Sarabun:400,700";
body {
 font-family: "Sarabun", "Segoe UI", "Arial", "FontAwesome", sans-serif; 
overflow-x: hidden; 

}
body header div div.clearfix:nth-child(1) {
 background: #232325;
 box-shadow: 0 1.68px 3.36px hsla(0, 0%, 0%, 50%);
 height: 42px;
}
body header div.container {
 padding: 0;
}
a.back-to-profil,
a.back-to-profil:hover {
 background: none;
}
header {
 width: 100%;
 max-width: initial;
 height: 420px;
 object-fit: cover;
}
.user-info {
 top: 55%;
}
.menu,
.menu li.active,
.menu li:focus,
.menu li:hover {
 background: none;
}
body {
 background: #161618;
}
.menu li.first,
.menu li {
 border: 0;
}
.menu .fa {
 display: none;
}
.visible-lg-inline {
 display: none!important;
}
.menu-text {
 font-size: 18px;
 text-shadow: -0.6px 0.84px 1.68px #000;
 color: #7e7e7e;
}
.text-primary {
 color: var(--couleur-principale);
}
.menu-text:hover {
 color: #a7a7a7;
}
.active .menu-text {
 color: white;
}
.menu li {
 width: inherit;
 float: none;
 padding: 0 12px;
}
.menu {
 text-align: center;
 padding-top: 8px;
 border-top: 3px solid var(--couleur-principale);
 background: #161618;
}
body div.container.clearfix div.col-lg-3.col-md-4.col-sm-5.nopadding.hidden-xs {
 display: inline-block;
 width: unset;
 margin-right: 10px;
 z-index: 100;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding {
 float: right;
 width: calc(169px + 0.07 * (100vw - 980px));
 z-index: 14;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .input-group {
 float: right;
}
body div.container.clearfix div.col-lg-3.col-md-2.col-sm-3.nopadding.hidden-xs.text-right {
 float: left;
 display: inline-block;
 text-align: initial;
 width: auto;
 z-index: 100;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .btn.btn-info {
 width: 30px;
 z-index: 30;
 left:10000px;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .btn.btn-info:after {
 visibility: visible;
 font-family: font-awesome-light-v5!important;
 content: "\F002";
 position: absolute;
 top: 6px;
 left: 8px;
 left: -9992px;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input::-webkit-input-placeholder {
 /* WebKit browsers */
 color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input:-moz-placeholder {
 /* Mozilla Firefox 4 to 18 */
 color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input::-moz-placeholder {
 /* Mozilla Firefox 19+ */
 color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input:-ms-input-placeholder {
 /* Internet Explorer 10+ */
 color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div span {
 position: absolute;
 left: 0;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div .form-control {
 background: #28282a;
 border: 0;
 border-radius: 3px;
 box-shadow: -0.5px 0.7px 2.1px hsla(0, 0%, 0%, 50%);
 padding-left: 30px;
 color: white;
}
body div.container.clearfix {
 position: relative;
 top: -64px;
 margin-bottom: -64px;
 display: table;
 padding: 0 30px;
}
.container {
 width: 100%;
 text-align: center;
}
.media-grid-6 .anime-cover {
 position: relative;
 z-index: 1;
 display: block;
 width: 210px;
 height: 300px;
 margin: calc((300px * -0.025) + 12px) calc((210px * -0.025) + 12px);
 flex: 0 0 auto;
 transform: scale(0.95);
 display: inline-block;
 box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 50%);
}
.back-to-profil {
 float: left;
}
.anime-cover .anime-image {
 border-radius: 6px;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 background-color: black;
}
.media-grid-6 .anime-cover:hover {
 transform: scale(1);
 text-align: center;
}
.medialist-status-title {
 display: none;
}
.anime-data.text-center {
 text-align: left;
 padding-bottom: 2px;
}
.anime-cover .anime-cover-progress,
.anime-cover .anime-cover-progress.done,
.anime-cover .anime-cover-progress.planned,
.anime-cover .anime-data {
 background: none;
}
.anime-cover-progress {
 text-align: right;
}
.anime-cover-progress.current.text-center span:nth-child(2) {
 float: right;
}
.anime-cover-progress span.fa {
 float: left;
}
.anime-cover {
 padding: 0;
}
.anime-cover:hover:after {
 content: "";
 bottom: -4px;
 width: 100%;
 height: 30px;
 left: 0;
 top: inherit;
 z-index: -16;
 border-radius: 6px;
 display: inline-block;
 position: absolute;
}
[data-target-status*="CURRENT"] .anime-cover:hover:after {
 background: var(--couleur-en-cours);
}
[data-target-status*="COMPLETED"] .anime-cover:hover:after {
 background: var(--couleur-termine);
}
[data-target-status*="PLANNING"] .anime-cover:hover:after {
 background: var(--couleur-a-voir);
}
[data-target-status*="PAUSED"] .anime-cover:hover:after {
 background: var(--couleur-en-pause);
}
[data-target-status*="DROPPED"] .anime-cover:hover:after {
 background: var(--couleur-abandon);
}
[data-target-status*="CURRENT"] .anime-cover-progress .fa:after {
 content: " En cours";
}
[data-target-status*="COMPLETED"] .anime-cover-progress .fa:after {
 content: " Terminé";
}
[data-target-status*="PLANNING"] .anime-cover-progress .fa:after {
 content: " A voir";
}
[data-target-status*="PAUSED"] .anime-cover-progress .fa:after {
 content: " En pause";
}
[data-target-status*="DROPPED"] .anime-cover-progress .fa:after {
 content: " Abandonné";
}
[data-target-status*="CURRENT"] .anime-cover-progress .fa:after,
[data-target-status*="COMPLETED"] .anime-cover-progress .fa:after,
[data-target-status*="PLANNING"] .anime-cover-progress .fa:after,
[data-target-status*="PAUSED"] .anime-cover-progress .fa:after,
[data-target-status*="DROPPED"] .anime-cover-progress .fa:after {
 font-family: "Sarabun", "Segoe UI", "Arial", "FontAwesome", sans-serif;
 margin-left: 3px;
 font-size: 13px;
}
.anime-image {
 filter: brightness(50%) opacity(100%);
}
.anime-cover .anime-cover-progress,
.anime-cover .anime-more-data {
 bottom: 2px;
 left: 15px;
 right: 15px;
}
.increment-progress {
 display: none;
}
.btn-primary {
 background-color: var(--couleur-principale);
 border-color: var(--couleur-principale);
}
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.btn-primary.dropdown-toggle.focus,
.open>.btn-primary.dropdown-toggle:focus,
.open>.btn-primary.dropdown-toggle:hover {
 background-color: var(--couleur-principale-hover);
 border-color: var(--couleur-principale-hover);
}
.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.open>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus {
 background-color: var(--couleur-principale-hover);
 border-color: var(--couleur-principale-hover);
}
.dropdown-menu>li>a.dropdown-selected {
 background-color: var(--couleur-principale);
}
.animegate-logo img {
 visibility: hidden;
}
a.animegate-logo {
 width: 149px;
 padding: 7px 0px;
 background: none;
 margin-right: 30px;
 background-repeat: no-repeat;
 background-position: center center;
 background-color: transparent;
 background-image: var(--red-animegate-logo);
}
.container.media-grid-6 {
 position: relative;
 top: -16px;
}
#medialist-options-menu {
 top: inherit;
 bottom: 0;
 z-index: 1000;
}
#medialist-options-menu .menu-text {
 font-size: 14px;
 color: white;
}
nav.mobile-menu li a .menu-text {
 color: white;
}
.mobile-menu-more-row.active,
.mobile-menu-more-row.dropdown-selected,
.mobile-menu-more-row.selected,
.mobile-menu-more-row.active .mobile-menu-more-row-icon,
.mobile-menu-more-row.dropdown-selected .mobile-menu-more-row-icon,
.mobile-menu-more-row.selected .mobile-menu-more-row-icon {
 background: var(--couleur-principale);
}
.btn-group>.btn:last-child:not(:first-child),
.btn-group>.dropdown-toggle:not(:first-child),
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
 display: none;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
 border-bottom-right-radius: 5px;
 border-top-right-radius: 5px;
}
@media screen and (max-width: 1340px) {
 body div.container.clearfix {
  top: -15px;
 }
 body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding,
 body div.container.clearfix div.col-lg-3.col-md-4.col-sm-5.nopadding.hidden-xs {
  float: none;
  display: inline-block;
  vertical-align: top;
 }
 body div.container.clearfix div.col-lg-3.col-md-2.col-sm-3.nopadding.hidden-xs.text-right {
  margin-left: 10px;
  float: none;
 }
 .container.media-grid-6 {
  top: 43px;
 }
}
@media (max-width: 767px) {
 body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding {
  width: 100%;
  margin: 15px 0;
 }
 body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .input-group {
  width: 100%;
 }
 body>header>div>div:nth-child(1)>div.hidden-xs.col-sm-6.nopadding.text-right {
  display: inline-block!important;
 }
}


C'est cool, merci ! Ma liste est déjà personnalisée mais il y a certaines choses que je vais piquer dans ton code (´・ω・`)


#NoriQuotes

En réponse à Norichii :

C'est cool, merci ! Ma liste est déjà personnalisée mais il y a certaines choses que je vais piquer dans ton code (´・ω・`)
De rien, j'espère que ça va t'aider à bien personnaliser ta liste (´・ω・)っ由

Merci beaucoup pour ton partage ! J'ai pu commencer à personnaliser ma liste, c'est intéressant tout ça ( ͡° ͜ʖ ͡°)


Même si j'arrive pas encore à trouver comment changer la couleur des titres d'animes, les notes et les étoiles... m'enfin, j'y arriverai bien un jour !!


uploaded_6914_1597068988_629.png

En réponse à Olho :

Merci beaucoup pour ton partage ! J'ai pu commencer à personnaliser ma liste, c'est intéressant tout ça ( ͡° ͜ʖ ͡°)


Même si j'arrive pas encore à trouver comment changer la couleur des titres d'animes, les notes et les étoiles... m'enfin, j'y arriverai bien un jour !!

Nice !


Pour la couleur des étoiles :

.anime-cover .anime-cover-score .fa {
color: #xxxxxx;
}


Pour la couleur des scores :

.anime-cover .anime-cover-comment, .anime-cover .anime-cover-score {
color: #xxxxxx;
}


Pour la couleur des titres :

span.anime-data.text-center {
color: #xxxxxx;
}



En réponse à Inaho :

Nice !


Pour la couleur des étoiles :

.anime-cover .anime-cover-score .fa {
color: #xxxxxx;
}


Pour la couleur des scores :

.anime-cover .anime-cover-comment, .anime-cover .anime-cover-score {
color: #xxxxxx;
}


Pour la couleur des titres :

span.anime-data.text-center {
color: #xxxxxx;
}


Ohhhh gros merci ! 


Edit ; saurais-tu par hasard quel serait le ''code'' pour changer la couleur pour le ''En cours''/''Terminé''/''Abandonné''/... et le nombre d'épisodes sur la fiche ?! :o (juste en dessous des titres)

J'ai finalement trouvé comment faire ! :3 


uploaded_6914_1597068988_629.png

En réponse à Olho :

Ohhhh gros merci ! 


Edit ; saurais-tu par hasard quel serait le ''code'' pour changer la couleur pour le ''En cours''/''Terminé''/''Abandonné''/... et le nombre d'épisodes sur la fiche ?! :o (juste en dessous des titres)

J'ai finalement trouvé comment faire ! :3 

Tout est dans le post justement ;)

Pour avoir de nouveau les chiffres a coter des catégorie , On dois retirer quoi ?

liste-anime-17806.jpgliste-manga-17806.jpg

Tu dois retirer ça :


.visible-lg-inline { 
 display: none!important; 


Je recherche de l'argent, si vous en avez, n'hésitez pas à en faire dons, ayez un peu de bons sens et aider les pauvres, s'il vous plait.

Collection de Figurine

Liste de jeu [incomplète]

liste-anime-33.jpg uploaded_33_1525094189_1920.png

Salut, je n'ai jamais fait de css et j'aimerais à partir du Thème Dark and Red zoomer un peu les animes sur la liste pour qu'ils soient plus gros, qu'est-ce que je dois changer ?
Dans les options CSS tu peux ajouter ça : 


.media-grid-6 .anime-cover {

width: 205px;

height: 310px;

}

En modifiant les chiffres à ta convenance évidemment (c'est la taille des cases sur ma liste)


Je recherche de l'argent, si vous en avez, n'hésitez pas à en faire dons, ayez un peu de bons sens et aider les pauvres, s'il vous plait.

Collection de Figurine

Liste de jeu [incomplète]

liste-anime-33.jpg uploaded_33_1525094189_1920.png

En réponse à Kurosagi :

Dans les options CSS tu peux ajouter ça : 


.media-grid-6 .anime-cover {

width: 205px;

height: 310px;

}

En modifiant les chiffres à ta convenance évidemment (c'est la taille des cases sur ma liste)

Merci beaucoup ! :D
Pour avoir de nouveau les "en cours", "termine etc on doit enlever quoi