Déjà 111108 membres !
1184 BDs & mangas !

Vous n'êtes pas identifié(e).

#1 01 Apr, 2018 13:52:47

Velkia

Hello !

Depuis quelques mois je m'entraîne en CSS en utilisant le site d'Amilova comme cobaye, en essayant de faire un design épuré et arrondi à la Twitter et Youtube. Et je me disais, pourquoi ne pas le partager avec vous ? Voilà ce que ça donne pour l'instant :

spoiler
accueil_bd_by_velkia-dc7kblu.png
accueil_page_by_velkia-dc7kbzp.png
auteur_page_by_velkia-dc7kc3n.png
post_blog_by_velkia-dc7kc8u.png
page_bd_by_velkia-dc7kcdf.png
page_commentaires_by_velkia-dc7kcgh.png

Ce style est évolutif, encore en expérimentation, donc il va évoluer ! Pour l'instant je me suis occupée de l'accueil, les pages artistes et les pages de BD, et je suis en train de m'attaquer au dashboard. :)

Si vous êtes branché vous pouvez l'utiliser sur votre navigateur ! La méthode est super simple, je vous explique un peu.

1- Il faut télécharger l'extension Stylish (disponible sur Chrome, Firefox & Opera).
2- Une fois celle-ci installée, cliquez sur le petit logo en haut à droite qui se sera rajouté auprès de vos autres extensions
3- Cliquez sur les trois points en haut à droite, puis "nvo style". Comme ça en gros :

spoilerscreen_by_velkia-dc7kdl4.png

4- Dans la fenêtre qui se sera ouverte, copiez-collez ce code dans la partie Code :

/*-------------------------------------------------------------------Body*/

html {
    max-width: 100%;
}
body {
    color: #212121;
    font: 12px Roboto, sans-serif;
    background: #e6ecf0 center center fixed no-repeat;
    max-width: 100%;
}
/*-------------------------------------------------------------------Header*/

#header h1 {
    display: none;
}
/*---------------------------------------------------------------Language*/

#header .flag {
    border: none;
    border-radius: 20px;
}
#header .dropbutton.opened {
    margin-top: 2px;
    border: none;
}
#header #header_language {
    padding: 20px;
    top: 36px;
    right: 0px;
    width: 120px;
    float: left;
    z-index: 5200;
    position: absolute;
    background: #ffffff;
    border: none;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
#header .flag_change {
    height: 25px;
    cursor: pointer;
    padding: 3px;
}
/*---------------------------------------------------------------Search*/

#header #search {
    width: 15px;
    background: #ffffff url("https://orig06.deviantart.net/6fd1/f/2017/180/d/3/searching_magnifying_glass_6__by_velkia-dbefq23.png") no-repeat 15px 7px;
    background-size: 15px;
}
#header #search.opened {
    background: #ffffff url("https://orig13.deviantart.net/e96f/f/2017/180/3/0/searching_magnifying_glass_7__by_velkia-dbefrbg.png") no-repeat 13px 9px;
    background-size: 15px;
    width: 15px;
}
#header #header_search {
    padding: 10px;
    top: 36px;
    right: 3px;
    width: 400px;
    float: left;
    z-index: 5200;
    position: absolute;
    background: #ffffff;
    border: none;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
#header_search .search_site .search_q {
    float: left;
    background-color: #e6ecf0;
    width: 360px;
    height: 16px;
    color: #66757F;
    font-size: 12px;
    padding: 7px;
    margin-right: 10px;
    border: 1px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
#header_search #search_results ul {
    float: left;
    width: 100%;
    padding: 0;
    padding-bottom: 0px;
    margin: 10px;
    list-style: none;
    padding-bottom: 0;
}
/*---------------------------------------------------------------Barre*/

#header .barre {
    display: none;
}
/*---------------------------------------------------------------Menu*/

#header .simplelink {
    padding: 10px 12px;
    color: #66757F;
    height: 16px;
    float: right;
    cursor: pointer;
}
#header .simplelink:hover {
    color: #9C27B0;
}
/*---------------------------------------------------------------Explorer*/

#header #explorer .explorer_bg {
    background: url("https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png") no-repeat 5px 1px;
    background-size: 10px;
    position: absolute;
}
#header .dropbutton {
    margin: 3px 0;
    padding: 7px 12px;
    padding-right: 12px;
    background: #ffffff;
    float: right;
    z-index: 5500;
    position: relative;
    height: 16px;
    color: #66757F;
    cursor: pointer;
}
#header .dropbutton:hover {
    color: #9C27B0;
}
#header #explorer.opened {
    padding: none;
}
#header #explorer.opened .explorer_bg {
    background: url("https://orig00.deviantart.net/68e2/f/2017/180/5/5/up_arrow_key_by_velkia-dbefu5z.png") no-repeat 5px 1px;
    background-size: 10px;
}
#header #header_browse {
    padding: 20px;
    top: 36px;
    right: 3px;
    width: 400px;
    float: left;
    z-index: 5200;
    position: absolute;
    background: #ffffff;
    border: none;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
#header_browse .column .linehead {
    width: 180px;
    float: left;
    margin: 0px 4px;
    padding: 10px 0px 10px 0px;
    color: #212121;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
}
#header_browse .column .linesep {
    width: 180px;
    float: left;
    height: 1px;
    margin: 4px 4px;
    padding: 0px 0px 0px 4px;
    background: #e6ecf0;
}
#header_browse .column .linelink {
    width: 180px;
    float: left;
    margin: 0px 4px;
    padding: 4px 0px 4px 4px;
    color: #212121;
    text-decoration: none;
}
#header_browse .column .linelink:hover {
    background-color: #e6ecf0;
}
/*---------------------------------------------------------------User*/

#header #profile .username .background {
    background: url("https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png") no-repeat 5px 1px;
    position: absolute;
    background-size: 10px;
}
#header #profile.opened .username .background {
    background: url("https://orig00.deviantart.net/68e2/f/2017/180/5/5/up_arrow_key_by_velkia-dbefu5z.png") no-repeat 5px 1px;
    background-size: 10px;
}
.user_avatar img {
    float: left;
    border: none;
    width: 80px;
    border-radius: 50px;
}
.user_avatar span {
    display: none;
}
#header #header_profile {
    margin-left: 0px;
    padding: 20px;
    top: 36px;
    left: -6px;
    width: 200px;
    float: left;
    z-index: 5200;
    position: absolute;
    background: #ffffff;
    border: none;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
#header_profile .linelink {
    width: 188px;
    float: left;
    margin: 0px 4px;
    padding: 4px 0px 4px 4px;
    color: #212121;
    text-decoration: none;
}
#header_profile .linesep {
    width: 188px;
    float: left;
    height: 1px;
    margin: 4px 4px;
    padding: 0px 0px 0px 4px;
    background: #e6ecf0;
}
#header_profile .linelink:hover {
    background-color: #e6ecf0;
}
/*---------------------------------------------------------------Icons*/
/*---------------------------------------------------------------Gold*/

#header #gold {
    padding-top: 7px;
}
#header #gold .icon {
    background: url("https://orig15.deviantart.net/e635/f/2017/180/e/4/credit_card_1__by_velkia-dbefzcx.png") no-repeat;
    background-size: 20px;
    height: 20px;
    width: 20px;
    padding: 0px;
    float: none;
    margin: 0px auto;
    display: block;
}
#header #gold p {
    display: none;
    padding-top: 0px;
    margin-top: -4px;
}
/*---------------------------------------------------------------Message*/

#header #message {
    float: right;
    border-left: none;
    margin: 4px 12px 0;
    padding: 0;
    background: url("https://orig00.deviantart.net/4057/f/2017/180/4/7/chat_bubbles_by_velkia-dbefzrw.png") no-repeat;
    background-size: 20px;
    margin-top: 8px;
}
/*---------------------------------------------------------------Notifactions*/

#header #notification {
    float: right;
    position: relative;
    border-left: none;
    margin: 0px 12px 0;
    padding: 0;
    top: 0;
    overflow: hidden;
    background: url("https://orig06.deviantart.net/e833/f/2017/180/8/8/notifications_button_1__by_velkia-dbeg080.png") no-repeat;
    background-size: 20px;
}
#header #header_notification {
    padding: 20px;
    top: 36px;
    left: -6px;
    width: 380px;
    float: left;
    z-index: 5200;
    position: absolute;
    background: #ffffff;
    border: none;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
#header_notification .list {
    float: left;
    width: 100%;
    min-height: 42px;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 11px;
    border-bottom: 1px solid #e6ecf0;
}
#header_notification .list div {
    float: left;
    width: 325px;
    text-align: left;
    padding-top: 5px;
    margin-left: 10px;
    color: #212121;
}
#header_notification .list a.read_comments {
    color: #9C27B0;
}
#header_notification .list:hover {
    background-color: #e6ecf0;
}
#header_notification .list .n_when {
    float: right;
    color: #66757F;
    padding-top: 5px;
    font-size: 10px;
    font-weight: 300;
}
#header_notification .footer {
    float: left;
    width: 100%;
    margin-top: 10px;
    bottom: 0;
    left: 0;
    height: 17px;
    font-weight: bold;
    padding-top: 3px;
    text-align: center;
}
#header_notification .footer a {
    font-size: 12px;
    font-weight: 500;
    color: #212121;
}
#header_notification .footer a:hover {
    color: #9C27B0;
}
#header #message b,
#header #notification b {
    position: relative;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
    font-weight: 500;
    display: inline;
    background: #9C27B0;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*---------------------------------------------------------------Carrousel*/

#header_rotating_container_mini {
    width: 100%;
    height: 20px;
    background: #E1BEE7;
    border-top: 1px solid #CE93D8;
    border-bottom: 1px solid #CE93D8;
    position: relative;
    margin-bottom: 10px;
    float: left;
    z-index: 5;
}
.ban_1 div {
    color: blue;
    float: left;
    font: 18px Arial;
    margin-left: 80px;
    margin-top: 3px;
}
.rotating_navi a,
.rotating_navi_mini a {
    float: left;
    margin: 3px;
    background: url(https://orig15.deviantart.net/5904/f/2017/182/6/e/filled_circle_by_velkia-dbeqnr6.png) no-repeat;
    background-size: 9px;
    display: block;
    font-size: 1px;
}
.rotating_navi a:hover,
.rotating_navi a.active,
.rotating_navi_mini a:hover,
.rotating_navi_mini a.active {
    background: url(https://orig10.deviantart.net/284b/f/2017/182/a/f/circle_outline_by_velkia-dbeqnk4.png) no-repeat;
    background-size: 9px;
}
#header_rotating .header_control_mini {
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: absolute;
    background: url(https://orig06.deviantart.net/dfe4/f/2017/182/6/c/expand_button_2__by_velkia-dbeqo5b.png)no-repeat;
    background-size: 14px;
    z-index: 4000;
    right: 10px;
    bottom: 3px;
    display: block;
}
#header_rotating .header_control {
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: absolute;
    background: url(https://orig07.deviantart.net/2a08/f/2017/182/1/c/expand_arrow_by_velkia-dbeqoet.png) no-repeat;
    background-size: 14px;
    z-index: 4000;
    right: 10px;
    bottom: 3px;
    display: block;
}
/*---------------------------------------------------------------Main container*/

.box_black,
.box_white {
    background: #E6ECF0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 5px;
}
.closeInfoBox {
    display: block;
    float: right;
    height: 20px;
    width: 20px;
    padding: 0;
    margin: 5px 5px 0 5px;
    background: url(https://orig00.deviantart.net/68e2/f/2017/180/5/5/up_arrow_key_by_velkia-dbefu5z.png) no-repeat center center;
    background-size: 14px;
    cursor: pointer;
}
.closeInfoBox.isClosed {
    background-image: url(https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png);
    background-size: 14px;
}
.box_black > h3,
.box_white > h3 {
    background: white;
    color: #212121;
    font: 16px sans-serif;
    font-weight: bold;
}
/*---------------------------------------------------------------Buttons*/

.btn_bgblack,
.btn_bgblack:link,
.btn_bgblack:visited {
    width: 76px;
    border: 1px solid #66757F;
    color: #66757F;
}
#box_bd h3 button,
#box_trending h3 button {
    font: 12px sans-serif;
    height: 28px;
    width: auto;
    vertical-align: bottom;
    margin: 0 0 -4px 0;
    margin-left: 0px;
    padding: 0 8px;
}
.btn_bgblack.sel {
    border: 1px solid #66757F;
    font-size: 12px;
    color: #66757F;
}
.btn_bgblack,
.btn_bgblack:link,
.btn_bgblack:visited,
.btn_bgwhite,
.btn_bgwhite:link,
.btn_bgwhite:visited {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin: 5px 5px 0 0;
    padding: 0 5px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-decoration: none;
    outline: 0 none;
    text-align: center;
    vertical-align: middle;
    background: transparent;
    cursor: pointer;
}
.btn_bgblack:hover,
.btn_bgblack:active,
.btn_bgblack.sel {
    border: 1px solid #66757F;
    color: #66757F;
}
/*---------------------------------------------------------------Filters*/

.sel_black > a {
    text-decoration: none;
    line-height: 36px;
    padding: 0 15px 0 0;
    margin: 0 15px 0 0;
    background: url("https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png") no-repeat right center;
    background-size: 10px;
    float: right;
    color: #66757F;
}
.sel_black > a:hover {
    background: url("https://orig12.deviantart.net/692f/f/2017/182/0/f/expand_button_3__by_velkia-dbeqr1g.png") no-repeat right center;
    background-size: 10px;
    color: #9C27B0;
}
.sel_black > a.sel {
    background: url("https://orig00.deviantart.net/68e2/f/2017/180/5/5/up_arrow_key_by_velkia-dbefu5z.png") no-repeat right center;
    background-size: 10px;
    color: #66757F;
}
.sel_black > div,
.sel_white > div {
    display: none;
    background: #ffffff;
    width: 100%;
    position: absolute;
    top: 36px;
    left: 0px;
    z-index: 5000;
    height: 350px;
    border: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
    overflow: auto;
    overflow-y: auto;
    padding-bottom: 10px;
}
.sel_black > div a,
.sel_white > div a {
    width: 80%;
    float: left;
    margin: 0px 4px;
    padding: 10px;
    color: #212121;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
}
.sel_black > div a:hover,
.sel_white > div a:hover {
    background-color: #E6ECF0;
}
/*---------------------------------------------------------------Comics box*/

.comic_cover_list {
    height: auto;
    width: 100%;
    padding: 5px 0;
    overflow: hidden;
    background: #E6ECF0;
    text-align: center;
}
.comic_cover_list .comic_block {
    border: none;
    padding: 1px;
}
.comic_block {
    display: inline-block;
    position: relative;
}
.comic_block img {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
}
.comic_block .comic_info {
    border-radius: 5px;
    background: rgba(33, 33, 33, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 176px;
    height: 276px;
    display: none;
    color: #ffffff;
    z-index: 5;
    padding: 0px 10px;
    display: none;
}
.comic_block .comic_info a.button,
.comic_big_cover .info_container a.button,
.mosaic-overlay .details a.button,
.thumbs_comics a.button {
    line-height: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid white;
    text-align: center;
    outline: 0;
    margin: 4px 4px 0 0;
    padding: 5px 10px;
    vertical-align: middle;
    text-decoration: none;
    color: white;
    background: transparent;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
}
.comic_block .comic_info a.button_i,
.comic_big_cover .info_container a.button_i,
.mosaic-overlay .details a.button_i,
.thumbs_comics a.button_i {
    display: inline-block;
    vertical-align: middle;
    height: 26px;
    width: 26px;
    margin: 4px 4px 0 0;
    background: url("https://orig13.deviantart.net/e615/f/2017/182/8/b/add_plus_button_by_velkia-dbequxb.png") no-repeat center;
    background-size: 10px;
    border: 1px solid white;
    border-radius: 20px;
}
.comic_block .comic_info a.button_i,
.comic_big_cover .info_container a.button_i,
.mosaic-overlay .details a.button_i:hover,
.thumbs_comics a.button_i:hover {
    background: url("https://orig13.deviantart.net/e615/f/2017/182/8/b/add_plus_button_by_velkia-dbequxb.png") no-repeat center;
    background-size: 10px;
    border: 1px solid white;
    border-radius: 20px;
}
.comic_block .comic_info a.button:hover,
.comic_big_cover .info_container a.button:hover,
.mosaic-overlay .details a.button:hover,
.thumbs_comics a.button:hover {
    border: 1px solid white;
    border-radius: 20px;
}
#box_bd_load_more {
    text-align: center;
    background: #E6ECF0;
}
.load_more,
#box_trending_load_more {
    color: #66757F;
}
.load_more:hover,
#box_trending_load_more:hover {
    color: #66757F;
}
.comic_cover_list .comic_block .ebook {
    background: rgba(33, 33, 33, 0.7);
    color: #FFFFFF;
    display: block;
    position: absolute;
    height: 30px;
    left: 0;
    bottom: 0;
    font-weight: 400;
    line-height: 30px;
    padding-left: 50px;
    width: 146px;
    z-index: 1;
}
.comic_cover_list .comic_block .ebook div.ebookicon {
    background: url("https://orig09.deviantart.net/ff31/f/2017/183/5/9/cell_phone_with_blank_screen_by_velkia-dbet8ou.png") no-repeat transparent center;
    background-size: 20px;
    bottom: 0px;
    display: block;
    height: 30px;
    left: 5px;
    position: absolute;
    width: 50px;
    z-index: 2;
}
.box_black,
.box_white {
    background: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 10px;
}
/*---------------------------------------------------------------Blogs left*/

.user_content_line span.moreinfo {
    display: block;
    color: #66757F;
    font-weight: 300;
}
#trend_blogs > div > h3 {
    margin-bottom: 0px;
    margin-left: 10px;
    padding-left: 0px;
    background: none;
}
#trend_blogs > div > h3 + div {
    background: white;
    padding: 5px;
    padding-top: 5px;
    padding-top: 0;
}
.user_content_line {
    margin: 0 5px;
    padding: 7px 0;
    border-top: 1px solid #E6ECF0;
    min-height: 30px;
}
.user_content_line > img:first-child {
    float: left;
    margin: 0 5px 0 0;
    width: 30px;
    height: 30px;
    border-radius: 20px;
}
.user_content_line span.when {
    color: #66757F;
    font-weight: 300;
}
.user_content_line span.where a {
    color: #9C27B0;
    text-decoration: none;
}
a,
a:link,
a:active,
a:visited {
    color: #66757F;
    text-decoration: none;
}
.user_content_line span.moreinfo a {
    color: #666;
    text-decoration: none;
}
/*---------------------------------------------------------------Pages*/

.comic_page_trending {
    padding: 3px;
    display: inline-block;
    background: #E6ECF0;
    margin-top: 5px;
}
.comic_page_trending .img_block {
    overflow: hidden;
    position: relative;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.comic_page_trending .img_block .mosaic-overlay {
    background-color: rgba(33, 33, 33, 0.7);
    position: absolute;
    width: 100%;
    height: 168px;
    opacity: 0.9;
    bottom: -140px;
    display: inline;
    left: 0;
    z-index: 5;
}
.comic_page_trending .box_trend .last_comment img {
    float: left;
    margin-right: 5px;
    border-radius: 20px;
}
.comic_page_trending .box_trend .when {
    color: #66757F;
    font-weight: 300;
}
.comic_page_trending .box_trend .last_comment {
    border-bottom: 1px solid #E6ECF0;
    padding: 3px 5px 3px 6px;
}
.comic_page_trending .box_trend .bottom {
    line-height: 39px;
    color: #66757F;
    font-weight: 300;
}
.comic_page_trending .box_trend .comment {
    height: 31px;
    width: 100%;
    border-bottom: none;
}
.comic_page_trending .box_trend .bottom {
    line-height: 39px;
    vertical-align: middle;
    width: 100%;
    border-top: none;
    color: #66757F;
}
.comic_page_trending .box_trend .bottom .sharefb {
    float: right;
    margin-top: -8.5px;
    margin-right: 5px;
    height: 39px;
}
.load_more,
#box_trending_load_more {
    color: #66757F;
    background: white;
}
/*---------------------------------------------------------------Feed*/

#index_feed .feed_options,
.right_boxes .news_title {
    background: #E1BEE7;
    color: white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: 25px;
    font-size: 12px;
    font-weight: 400;
    line-height: 25px;
    vertical-align: center;
    margin: 0 8px 4px 0;
    padding-left: 8px;
    text-transform: capitalize;
    border: 1px solid #CE93D8;
}
#index_feed .feed_options > ul.row_options,
#index_feed .feed_options > div.sel_black {
    padding: 0 10px;
    margin: 5px 0;
    color: white;
    line-height: 20px;
}
#index_feed ul.row_options li.current {
    color: #66757F;
}
#index_feed ul.row_options li.sep {
    margin: 0 8px 0 0;
    cursor: default;
    color: #CE93D8;
}
.right_boxes .stats_site {
    background: white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #CE93D8;
    margin-right: 8px;
    margin-bottom: 10px;
    padding: 8px;
    font-size: 24px;
    font-weight: 200;
    line-height: 34px;
    border: 1px solid #CE93D8;
}
.right_boxes .news .news_content {
    font-size: 12px;
    line-height: 30px;
    border-bottom: 1px solid #E6ECF0;
    margin-right: 16px;
}
.right_boxes .news .news_content .ndate {
    font-size: 12px;
    line-height: 30px;
    font-weight: 300;
    color: #66757F;
}
.news_content a,
.news_content a:link,
.news_content a:active,
.news_content a:visited {
    color: #212121;
    text-decoration: none;
    font-weight: 400;
}
.right_boxes .inner_box .seemore {
    text-align: center;
    margin-top: 7px;
}
.seemore a.link_grey,
.seemore a.link_grey:link,
.seemore a.link_grey:active,
.seemore a.link_grey:visited {
    color: #66757F;
    text-decoration: none;
    font-weight: 300;
}
.right_boxes .members a {
    display: block;
    float: left;
    overflow: hidden;
    margin-bottom: 3px;
    margin-right: 3px;
}
/*---------------------------------------------------------------Feed*/

.footer_stats {
    margin: 10px;
    font-weight: 400;
}
#footer_top_comics {
    float: left;
    width: 100%;
    clear: both;
    display: block;
    background: #ffffff;
    overflow: hidden;
    font-size: 10px;
}
.top_comics_n_genres .links a {
    color: #66757F;
    padding-right: 3px;
    border-right: 0.5px solid #66757F;
}
#footer_container {
    float: left;
    width: 100%;
    clear: both;
    display: block;
    background: #66757F;
    overflow: hidden;
}
#footer {
    float: left;
    width: 100%;
    margin-top: 7px;
    clear: both;
    display: block;
    background: #66757F;
    color: #e6ecf0;
    overflow: hidden;
}
.footer_center .f_column {
    float: left;
    width: 335px;
    color: #e6ecf0;
    margin-bottom: 20px;
}
.footer_center .f_column p {
    text-transform: none;
    font-size: 14px;
    font-weight: 300;
}
#footer a,
#footer a:visited,
#footer a:active {
    color: white;
    text-decoration: none;
    line-height: 1.5em;
}
.footer_center .f_column a.facebook {
    background: url("https://orig14.deviantart.net/f586/f/2017/199/f/1/facebook_logo_button_by_velkia-dbgsexn.png") no-repeat;
    background-size: 20px;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-left: 10px;
}
.footer_center .f_column a.twitter {
    background: url("https://orig02.deviantart.net/66aa/f/2017/199/e/3/twitter_logo_button_by_velkia-dbgsf5l.png") no-repeat;
    background-size: 20px;
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-left: 0px;
}
/*---------------------------------------------------------------Blogpost*/

#header_additional .breadcrumbs,
#header_additional_breadcrumbs .breadcrumbs {
    width: 708px;
    height: 12px;
    background: none;
    font-size: 10px;
    color: #66757F;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    bottom: 0;
    left: 0;
    padding: 2px 10px;
    text-transform: capitalize;
    font-weight: 300;
}
#header_additional .breadcrumbs a,
#header_additional_breadcrumbs .breadcrumbs.alone a {
    color: #66757F;
    text-decoration: none;
}
#member_header_img,
.box_white.header_small .header_grey {
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-top-left-radius: 0px;
    -moz-border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
#member_header .header_grey {
    height: 40px;
    background: white;
    position: relative;
    margin-top: 0px;
    padding-top: 0px;
}
#member_header .header_grey .pseudo {
    color: #212121;
    padding-left: 96px;
    font-size: 24px;
    line-height: 40px;
    font-weight: 500;
    vertical-align: middle;
    float: left;
    text-transform: capitalize;
}

#member_header .header_grey .feeds_container .feeds.feed_blogger {
    background: url("https://orig00.deviantart.net/a42e/f/2018/091/c/1/blogger_by_velkia-dc7kbc3.png") no-repeat;
    background-size:27px;
}

#member_header .header_grey .feeds_container .feeds.feed_deviant,
#member_header .header_grey .feeds_container .feeds.feed_deviant:hover {
    background: url("https://orig10.deviantart.net/a767/f/2017/199/d/c/deviantart_by_velkia-dbgsgi9.png") no-repeat;
    background-size: 27px;
}
#member_header .header_grey .feeds_container .feeds.feed_fb,
#member_header .header_grey .feeds_container .feeds.feed_fb:hover {
    background: url("https://orig04.deviantart.net/afe6/f/2017/199/0/7/facebook_by_velkia-dbgsgox.png") no-repeat;
    background-size: 27px;
}
#member_header .header_grey .feeds_container .feeds.feed_site,
#member_header .header_grey .feeds_container .feeds.feed_site:hover {
    background: url("https://orig15.deviantart.net/a8e5/f/2017/199/d/1/earth_grid_select_language_button_by_velkia-dbgsh57.png") no-repeat;
    background-size: 27px;
}
#member_header .header_grey .feeds_container .feeds.feed_tumblr,
#member_header .header_grey .feeds_container .feeds.feed_tumblr:hover {
    background: url("https://orig06.deviantart.net/1020/f/2017/199/4/3/tumblr_by_velkia-dbgshyj.png") no-repeat;
    background-size: 27px;
}
#member_header .header_grey .feeds_container .feeds.feed_twitter,
#member_header .header_grey .feeds_container .feeds.feed_twitter:hover {
    background: url("https://orig07.deviantart.net/19e9/f/2017/199/9/0/twitter_by_velkia-dbgsi78.png") no-repeat;
    background-size: 27px;
}
#member_header .header_grey .feeds_container .feeds.feed_gplus,
#member_header .header_grey .feeds_container .feeds.feed_gplus:hover {
    background: url("https://orig13.deviantart.net/00e1/f/2017/199/3/0/google_plus_by_velkia-dbgsiac.png") no-repeat;
    background-size: 27px;
}
.btn_bgwhite,
.btn_bgwhite:link,
.btn_bgwhite:visited {
    border: 1px solid #66757F;
    color: #66757F;
}
#member_header .btn_bgwhite .message,
#member_header .btn_bgwhite:hover .message {
    background: url("https://orig00.deviantart.net/4057/f/2017/180/4/7/chat_bubbles_by_velkia-dbefzrw.png") no-repeat;
    background-size: 15px;
    line-height: 24px;
    padding-left: 20px;
}
#member_header .btn_bgwhite .follow,
#member_header .btn_bgwhite:hover .follow {
    background: url("https://orig06.deviantart.net/e833/f/2017/180/8/8/notifications_button_1__by_velkia-dbeg080.png") no-repeat;
    background-size: 15px;
    line-height: 24px;
    padding-left: 23px;
}
#member_header .btn_bgwhite.dropdown,
#member_header .btn_bgwhite.dropdown:hover {
    background: url("https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png") no-repeat 7px 7px;
    background-size: 10px;
    padding-right: 20px;
    padding-left: 4px;
}
#member_header .btn_bgwhite.dropdown.sel {
    background: url("https://orig00.deviantart.net/68e2/f/2017/180/5/5/up_arrow_key_by_velkia-dbefu5z.png") no-repeat 7px 7px;
    background-size: 10px;
}
.btn_bgwhite:hover,
.btn_bgwhite:active,
.btn_bgwhite.sel {
    border: 1px solid #66757F;
    color: #212121;
}
#selectfavoptions,
#selectotheroptions {
    z-index: 5;
    position: absolute;
    background: none repeat scroll 0 0 #FFFFFF;
    border: none;
    width: 200px;
    right: 0px;
    padding: 5px;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
#member_header #selectotheroptions a {
    color: #212121;
    cursor: pointer;
    float: left;
    font-weight: normal;
    margin: 0 4px;
    padding: 0ox;
    text-decoration: none;
    width: 80%;
}
.member_wrapper .box_black,
.member_wrapper .box_white {
    background: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 10px;
}
#container_activity {
    margin: 0;
}
#container_activity .post {
    width: 368px;
    margin: none;
    float: left;
    display: inline-block;
}
#container_activity .block_author p {
    font-weight: 500;
    margin-top: 12px;
    margin-left: 50px;
}
#container_activity .post .main .balloon_arrow {
    display: none;
}
#container_activity .block_shadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: none;
    background: none;
}
#container_activity .post .main {
    width: 350px;
    padding: 8px;
    border-radius: 3px;
    border: none;
    background: #ffffff;
    display: inline-block;
    position: relative;
}
#member_info .member_wrapper.single_post .left_part #container_activity .post .main,
#member_info .member_wrapper.single_post .left_part #container_activity .post .balloon,
#member_info .member_wrapper.single_post .left_part #container_activity .post .balloon p,
#member_info .member_wrapper.single_post .left_part #container_activity .post .comment,
#member_info .member_wrapper.single_post .left_part #container_activity .post .comment_input {
    width: 630px;
    font-size: 14px;
    line-height: 1.5;
}
.post .balloon .btn_bgwhite .repost,
.post .balloon .btn_bgwhite .repost:hover {
    background: url("https://orig13.deviantart.net/2945/f/2017/203/3/7/swap_horizontal_orientation_arrows_by_velkia-dbh8gxv.png") no-repeat;
    background-size: 15px;
    line-height: 18px;
    padding-left: 18px;
}
.post .balloon .btn_bgwhite.repost {
    padding: 2px 10px;
    height: 18px;
    line-height: 18px;
}
#container_activity .post .balloon .when {
    font-size: 12px;
    font-weight: 300;
    float: right;
    color: #66757F;
    margin-top: 8px;
}
#container_activity .post .comment,
#container_activity .post .comment_input {
    font-size: 12px;
    width: 350px;
    padding: 8px;
    border: 1px solid #e6ecf0;
    border-radius: 0;
    display: inline-block;
    background: white;
    position: relative;
}
#container_activity .post .comment p {
    margin: 4px 4px 4px 36px;
    font-size: 12px;
}
#container_activity .post .comment_input .thought {
    display: none;
}
#member_info .member_wrapper.single_post .left_part #container_activity .post .comment_input textarea {
    width: 564px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    background: #e6ecf0;
    color: #212121;
}
#container_activity .post .comment_input textarea {
    width: 284px;
    height: 20px;
    margin-left: 13px;
    resize: none;
    outline: none;
    border: 0;
    border-top: none;
    border-left: none;
    padding: 20px;
    border-radius: 5px;
    line-height: 1.5;
    margin-top: 0px;
}
a.button_valid,
a.button_valid:hover {
    top: 10px;
    right: 25px;
    position: absolute;
    display: none;
    background: url("https://orig06.deviantart.net/0911/f/2017/203/5/0/forward_arrow_by_velkia-dbh8hzq.png") no-repeat;
    background-size: 20px;
}
.comment_input .user_avatar.px30 {
    display: none;
}
#member_info .member_wrapper.single_post .right_part #container_activity .post .main,
#member_info .member_wrapper.single_post .right_part #container_activity .post .balloon,
#member_info .member_wrapper.single_post .right_part #container_activity .post .balloon p,
#member_info .member_wrapper.single_post .right_part #container_activity .post .comment,
#member_info .member_wrapper.single_post .right_part #container_activity .post .comment_input {
    width: 285px;
}
#container_activity .post .main {
    width: 350px;
    padding: 8px;
    border-radius: 0px;
    border: none;
    background: #ffffff;
    display: inline-block;
    position: relative;
}
#member_info .member_wrapper.single_post .right_part #container_activity .post .balloon .opengraph img {
    max-width: 100px;
}
#member_info .member_wrapper.single_post .right_part #container_activity .post .balloon .opengraph,
#member_info .member_wrapper.single_post .right_part #container_activity .post .balloon .opengraph .title,
#member_info .member_wrapper.single_post .right_part #container_activity .post .balloon .opengraph .description {
    width: 280px;
}
#container_activity .post .balloon .opengraph {
    border: none;
    display: inline-block;
    padding: 4px;
    width: 340px;
    overflow: hidden;
}
#container_activity .post .balloon .opengraph img {
    float: left;
    max-width: 100px;
    border: none;
    margin-right: 4px;
}
#container_activity .post .balloon .opengraph .title {
    font-size: 14px;
    font-weight: bold;
    padding-top: 4px;
    width: 340px;
}
#container_activity .post .balloon .opengraph a {
    color: #66757F;
    width: 280px;
}
.member_wrapper.single_post .right_part #container_activity .post .balloon br {
    display: none;
}
/*---------------------------------------------------------------Présentation BD*/

#amilova_ads .bg_blue {
    background: #e6ecf0;
    width: 120px;
    height: 108px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-left: 160px;
}
#amilova_ads .share-vertical {
    position: absolute;
    top: 45px;
    left: 130px;
    width: 92px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #212121;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
#amilova_ads .sharebox {
    background: #ffffff;
    width: 75px;
    height: 79px;
    float: right;
    margin-top: 8px;
    margin-right: 8px;
    padding-top: 13px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: block;
    text-align: center;
}
#amilova_ads .sharebox .share .twitter_box,
#amilova_ads .sharebox #twitter-widget-0 {
    display: none;
}
.sharebox .share:nth-child(3) {
    display: none;
}
#amilova_ads .bg_turquoise {
    background: #e6ecf0;
    width: 276px;
    height: 108px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#amilova_ads .textbox {
    font-size: 14px;
    color: #212121;
    margin: 10px 8px 0px;
    display: block;
}
#amilova_ads .titlebox {
    background: #ffffff;
    width: 240px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    color: #66757F;
    margin: 8px;
    padding: 0px 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    text-align: center;
}
#amilova_ads .linkbox {
    font-size: 12px;
    color: #66757F;
    display: block;
    margin: 5px 8px 0px;
}
a.button_pink {
    text-decoration: none;
    display: inline-block;
    line-height: 28px;
    vertical-align: center;
    height: 28px;
    padding: 0px 16px;
    border: 1px solid;
    text-align: center;
    color: #66757F;
    font-size: 14px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin-right: 4px;
}
a.button_grey {
    text-decoration: none;
    display: inline-block;
    line-height: 28px;
    vertical-align: center;
    height: 28px;
    padding: 0px 16px;
    border: 1px solid #66757F;
    text-align: center;
    color: #66757F;
    font-size: 14px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin-right: 4px;
}
a.button_pink:hover,
a.button_grey:hover {
    border: 1px solid #66757F;
    color: #66757F;
}
.sel_white > a {
    text-decoration: none;
    padding: 0 15px 0 5px;
    margin: 0 15px 0 0;
    background: url("https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png") no-repeat right center;
    background-size: 10px;
    color: #66757F;
}
.comic_page .favourites #fav_on {
    background: url("https://orig00.deviantart.net/fc32/f/2017/205/7/2/rate_star_button_by_velkia-dbhin44.png") no-repeat 0px 2px;
    background-size: 23px;
}
.comic_page .favourites #fav_off {
    background: url("https://orig05.deviantart.net/0b3d/f/2017/205/c/9/bookmark_button_1__by_velkia-dbhilwj.png") no-repeat 0px 2px;
    background-size: 23px;
}
.sel_white > a:hover {
    background: url("https://orig02.deviantart.net/fd3b/f/2017/180/1/9/expand_button_1__by_velkia-dbefttj.png") no-repeat right center;
    background-size: 10px;
    color: #66757F;
}
#selectfavoptions,
#selectotheroptions {
    z-index: 5;
    position: absolute;
    background: none repeat scroll 0 0 #FFFFFF;
    border: none;
    width: 200px;
    right: 0px;
    padding: 5px;
    display: none;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
.comic_page .favourites .sel_white > div {
    width: 200px;
    top: 30px;
    height: 75px;
}
.comic_page .row.current_progress {
    margin-bottom: 10px;
    border-bottom: none;
}
.comic_page .comic_info_footer {
    width: 784px;
    height: 35px;
    display: block;
    margin-top: 8px;
    border-top: none;
}
.dialogue_edit {
    opacity: 0.25;
    margin-top: 10px;
}
.comic_page .comic_info .row .description_text {
    width: 536px;
    font-size: 14px;
    line-height: 17px;
}
#comic_info .icons #ranking,
#comic_stats .icons #ranking {
    background: url("https://orig13.deviantart.net/dba8/f/2017/205/4/c/burn_button_by_velkia-dbhiols.png") no-repeat 0px 2px;
    background-size: 20px;
    height: 35px;
}
#comic_stats .icons {
    float: left;
    padding: 0px;
    border-top: none;
    border-bottom: none;
    width: 188px;
}
#comic_info .icons p,
#comic_stats .icons p {
    padding-top: 0px;
    margin-top: -5px;
    color: #66757F;
    width: 23px;
    text-align: center;
}
#comic_info .icons #favorites,
#comic_stats .icons #favorites {
    background: url("https://orig00.deviantart.net/fc32/f/2017/205/7/2/rate_star_button_by_velkia-dbhin44.png") no-repeat 0px 2px;
    background-size: 20px;
    height: 35px;
}
#comic_info .icons #points,
#comic_stats .icons #points {
    background: url('https://orig08.deviantart.net/581b/f/2017/205/1/e/circle_outline_1__by_velkia-dbhiqlz.png') no-repeat 0px 2px;
    background-size: 20px;
    height: 35px;
}
#comic_stats .icons > div {
    float: left;
    padding: 10px 19px 0px;
}
.nav_slidedown_thumbs {
    background: white;
    border: none;
}
.jcarousel_thumb {
    width: 140px;
    height: 196px;
    border: none;
    margin: 2px 4px 0px 4px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal,
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 28px;
    height: 245px;
    cursor: pointer;
    background: transparent url("https://orig11.deviantart.net/71c9/f/2017/206/b/1/left_arrow_key_by_velkia-dbhmjko.png") no-repeat center;
    background-size: 20px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal,
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 28px;
    height: 245px;
    cursor: pointer;
    background: transparent url(https://orig11.deviantart.net/71c9/f/2017/206/b/1/left_arrow_key_by_velkia-dbhmjko.png) no-repeat center;
    background-size: 20px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: center;
}
.jcarousel-skin-tango .jcarousel-next-horizontal,
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 28px;
    height: 245px;
    cursor: pointer;
    background: transparent url("https://orig05.deviantart.net/6a24/f/2017/206/6/c/keyboard_right_arrow_button_by_velkia-dbhmk3b.png") no-repeat center;
    background-size: 20px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: center;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: center;
}
.left_navigation .chapter_navigation b {
    width: 16px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background: #E1BEE7;
    margin-right: 4px;
    font-weight: 300;
}
.right_navigation {
    float: right;
    width: 65%;
    padding-left: 10px;
    border-left: 1px solid #e6ecf0;
}
.box_white>h3 a {
    color: #66757F;
}
/*---------------------------------------------------------------Présentation BD*/

.reader_navigation .rnav_fav.favon,
.reader_navigation .rnav_fav.favon.sel {
    background: url('https://orig00.deviantart.net/fc32/f/2017/205/7/2/rate_star_button_by_velkia-dbhin44.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_fav {
    background: url('https://orig05.deviantart.net/0b3d/f/2017/205/c/9/bookmark_button_1__by_velkia-dbhilwj.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_fav:hover,
.reader_navigation .rnav_fav.sel {
    background: url('https://orig05.deviantart.net/0b3d/f/2017/205/c/9/bookmark_button_1__by_velkia-dbhilwj.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_share {
    background: url('https://orig05.deviantart.net/cfb5/f/2017/206/a/1/share_button_by_velkia-dbhn8f4.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_share:hover,
.reader_navigation .rnav_share.sel {
    background: url('https://orig05.deviantart.net/cfb5/f/2017/206/a/1/share_button_by_velkia-dbhn8f4.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_fullscreen {
    background: url('https://orig02.deviantart.net/d7be/f/2017/206/4/c/switch_to_full_screen_button_by_velkia-dbhn9h4.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_fullscreen:hover {
    background: url('https://orig02.deviantart.net/d7be/f/2017/206/4/c/switch_to_full_screen_button_by_velkia-dbhn9h4.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .rnav_thumbs,
.reader_navigation .rnav_thumbs:hover,
.reader_navigation .rnav_thumbs.sel {
    background: url('https://orig06.deviantart.net/73ad/f/2017/206/6/5/show_apps_button_by_velkia-dbhn9wl.png') no-repeat left;
    background-size: 20px;
    color: #66757F;
}
.reader_navigation .btn_bgblack .page_prev {
    line-height: 24px;
    background: url('https://orig00.deviantart.net/cf80/f/2017/206/f/9/left_arrow_key_by_velkia-dbhmjko.png') no-repeat left 1px;
    background-size: 10px;
    padding-left: 10px;
}
.reader_navigation .btn_bgblack .page_next {
    line-height: 24px;
    background: url('https://orig05.deviantart.net/6a24/f/2017/206/6/c/keyboard_right_arrow_button_by_velkia-dbhmk3b.png') no-repeat right 1px;
    background-size: 10px;
    padding-left: 10px;
}
.reader_navigation_bottom .nb_views {
    vertical-align: middle;
    line-height: 35px;
    font-weight: 300;
    color: #66757F;
    float: left;
    width: 200px;
}
#comments_top .comments_total {
    float: left;
    width: 90%;
    color: #66757F;
    font: 16px Roboto, sans-serif;
    text-transform: capitalize;
}
.reader_form .comments_subscribe:before {
    content: ' ';
    background: url('https://orig05.deviantart.net/028e/f/2017/226/2/6/black_envelope_email_symbol__1__by_velkia-dbk24pj.png') no-repeat;
    background-size: 15px;
    display: block;
    float: left;
    height: 20px;
    width: 20px;
}
.reader_form .comment_form_header {
    padding-left: 61px;
    padding-bottom: 5px;
    color: #66757F;
    float: left;
}
.reader_form .comments_subscribe {
    margin-bottom: 4px;
    height: 20px;
    width: 400px;
    line-height: 20px;
    margin-right: 10px;
    color: #66757F;
    text-decoration: none;
    float: right;
    background: transparent;
}
.reader_form .comments_rss {
    margin-bottom: 4px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    padding-left: 20px;
    display: inline-block;
    color: #66757F;
    text-decoration: none;
    float: right;
    background: url('https://orig02.deviantart.net/f15f/f/2017/206/2/2/rss_symbol_by_velkia-dbhnd4b.png') no-repeat;
    background-size: 15px;
}
.comment_text .left {
    float: left;
    width: 20px;
    height: 50px;
    margin: 6px 0px 0px -19px;
    position: relative;
    background: url(../images/comments_arrow_2.png) left 4px no-repeat;
    display: none;
}
#comic_comments .reader_form .comment_text .center {
    float: left;
    width: 710px;
    background: #e6ecf0;
    margin-left: -1px;
    border: none;
    border-radius: 20px;
}
.comment_text .center textarea {
    float: left;
    width: 690px;
    margin: 6px;
    min-height: 90px;
    border: none;
    border-bottom: none;
    background: #e6ecf0;
}
.reader_form .submit_comment {
    float: left;
    cursor: pointer;
    margin: 5px 0px 0px 61px;
    border: 1px solid #66757F;
    border-radius: 20px;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    outline: 0 none;
    text-align: center;
    vertical-align: middle;
    color: #66757F;
    text-decoration: none;
    padding: 0 10px;
    background: #ffffff;
    font-size: 12px;
}
.reader_form .post_comment_format,
.member_form .post_comment_format {
    float: right;
    padding: 2px;
    margin-right: 20px;
    border: none;
    border-top: none;
    background: none;
    cursor: pointer;
    line-height: 30px;
    margin-top: -1px;
    position: relative;
}
.reader_form .post_comment_format .format,
.member_form .post_comment_format .format {
    color: #66757F;
    float: left;
    font-weight: 500;
    margin-left: 10px;
}
#latest_comments .comment {
    float: left;
    margin-top: 20px;
}
#latest_comments .comment {
    float: left;
    margin-top: 20px;
    border-top: 1px solid #e6ecf0;
}
#latest_comments .inner {
    float: left;
    width: 100%;
    margin-top: 20px;
}
#latest_comments .comment_text,
#comments_queue .comment_text {
    float: left;
    width: 707px;
    padding: 7px;
    margin-left: 11px;
    border: none;
    background: none;
}
#latest_comments .comment_text p,
#comments_queue .comment_text p {
    margin-top: 0px;
    font-size: 14px;
    line-height: 1.3em;
}
#latest_comments .author .comment_text,
#comments_queue .author .comment_text {
    float: left;
    width: 703px;
    padding: 7px;
    margin-left: 11px;
    border: none;
    background: #e6ecf0;
    border-radius:10px;
}
#latest_comments .author_text,
#latest_comments .author_text {
    color: #66757F;
    font-weight: 400;
}
.related_comics li .comic_block {
    display: inline-block;
    position: relative;
    border: none;
}
#comic_comments.boxpink,
.boxpink {
    background: #fff;
}

/*---------------------------------------------------------------Page membre-----*/

.left_part .box_white .inner_box {
    padding: 10px;
    background: white;
}
.edit_insite_text {
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0.25;
}
.user_languages img {
    border-radius: 20px;
    margin-top: 10px;
}
#member_header .header_grey .stats {
    color: #66757F;
    float: right;
    font-size: 12px;
    line-height: 40px;
    vertical-align: center;
    padding-right: 8px;
}
#thumbnails_nav h3 span.sel {
    color: #212121;
}
.thumbs_comics {
    background: #fff;
    border: none;
}
#thumbnails_nav .mycarousel li.li_description {
    width: 520px;
}
#thumbnails_nav .mycarousel li.li_description .description h4 {
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 8px;
    color: #212121;
}
.jcarousel_thumb {
    width: 100px;
    height: 196px;
    border: none;
    margin: 2px 4px 0px 4px;
}
#thumbnails_nav .mycarousel li.li_description .description p {
    color: #212121;
}
.comic_block .comic_info a.button,
.comic_big_cover .info_container a.button,
.mosaic-overlay .details a.button,
.thumbs_comics a.button,
.comic_block .comic_info a.button,
.comic_big_cover .info_container a.button,
.mosaic-overlay .details a.button,
.thumbs_comics a.button:hover {
    line-height: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #66757F;
    text-align: center;
    outline: 0;
    margin: 4px 4px 0 0;
    padding: 5px 10px;
    vertical-align: middle;
    text-decoration: none;
    color: white;
    background: transparent;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
}
#thumbnails_nav .mycarousel li.li_description .description a,
#thumbnails_nav .mycarousel li.li_description .description a:hover {
    color: #66757F;
    text-decoration: none;
}
.comic_block .comic_info a.button_i,
.comic_big_cover .info_container a.button_i,
.mosaic-overlay .details a.button_i,
.thumbs_comics a.button_i {
    display: inline-block;
    vertical-align: middle;
    height: 26px;
    width: 26px;
    margin: 4px 4px 0 0;
    background: url(https://orig13.deviantart.net/e615/f/2017/182/8/b/add_plus_button_by_velkia-dbequxb.png) no-repeat center;
    background-size: 10px;
    border: 1px solid #66757F;
    border-radius: 20px;
}

#comic_info .cover img {
    border: none;
    border-radius: 5px;
}

.comment_text.highlighted_comment {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

.comic_block .comic_info a.button_i, .comic_big_cover .info_container a.button_i, .mosaic-overlay .details a.button_i, .thumbs_comics a.button_i, .comic_block .comic_info a.button_i, .comic_big_cover .info_container a.button_i, .mosaic-overlay .details a.button_i:hover, .thumbs_comics a.button_i:hover {
    display: inline-block;
    vertical-align: middle;
    height: 26px;
    width: 26px;
    margin: 4px 4px 0 0;
    background: url(https://orig06.deviantart.net/aaf3/f/2017/235/3/c/add_plus_button__1__by_velkia-dbl19rw.png) no-repeat center;
    background-size: 10px;
    border: 1px solid #66757F;
    border-radius: 20px;
}

#thumbnails_nav .mycarousel li.li_description {
 width: 470px;
}

#thumbnails_nav .mycarousel li.li_description .icons #ranking {
    background: url(https://orig13.deviantart.net/dba8/f/2017/205/4/c/burn_button_by_velkia-dbhiols.png) no-repeat scroll center center transparent;
    background-size:20px;
        margin-bottom:2px;
}

#thumbnails_nav .mycarousel li.li_description #favorites {
    background: url(https://orig00.deviantart.net/fc32/f/2017/205/7/2/rate_star_button_by_velkia-dbhin44.png) no-repeat scroll center center transparent;
    background-size:20px;
        margin-bottom:2px;
}

#thumbnails_nav .mycarousel li.li_description #points {
    background: url(https://orig08.deviantart.net/581b/f/2017/205/1/e/circle_outline_1__by_velkia-dbhiqlz.png) no-repeat scroll center center transparent;
    background-size:20px;
        margin-bottom:2px;
}

#thumbnails_nav .mycarousel li.li_description .icons {
    padding-top: 0px;
    padding-left: 10px;
    float: right;
    padding-right: 8px;
    margin-top: -5px;
}

.comic_block .comic_info {
    border-radius: 5px;
    background: rgba(33, 33, 33, 0.7);
    position: absolute;
    top: 0;
    left: 0;;
    display: none;
    color: #ffffff;
    z-index: 5;
    padding: 0px 10px;
    display: none;
}

#thumbnails_nav .mycarousel li.li_description .description {
    float: left;
    margin-left: 4px;
    width: 352px;
    border-right: 1px solid #e6ecf0;
}

.jcarousel_thumb {
    width: 100px;
    height: 143px;
    border: none;
    margin: 2px 4px 0px 4px;
}

.member_wrapper .box_black, .member_wrapper .box_white {
    background: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}


#tab_activity {
    padding-top:10px;
}
    
#tab_activity ul li span.comment {
    background: transparent url(https://orig00.deviantart.net/4f36/f/2018/034/c/3/black_bubble_speech_by_velkia-dc20q5u.png) no-repeat;
    background-size: 13px;
}

#tab_activity ul li span.forum {
    background: transparent url(https://orig00.deviantart.net/4057/f/2017/180/4/7/chat_bubbles_by_velkia-dbefzrw.png) no-repeat;
    background-size: 13px;
}

#tab_activity ul li:hover span.forum, #tab_activity ul li.sel span.forum {
   background: transparent url(https://orig00.deviantart.net/4057/f/2017/180/4/7/chat_bubbles_by_velkia-dbefzrw.png) no-repeat;
    background-size: 13px;
}

#tab_activity ul li:hover span.comment, #tab_activity ul li.sel span.comment {
     background: transparent url(https://orig00.deviantart.net/4f36/f/2018/034/c/3/black_bubble_speech_by_velkia-dc20q5u.png) no-repeat;
    background-size: 13px;
}

#tab_activity ul li span.deviant {
    background: transparent url(https://orig00.deviantart.net/d87a/f/2018/034/2/6/deviantart_by_velkia-dc20qi1.png) no-repeat;
    background-size: 13px;
}

#tab_activity ul li:hover span.deviant, #tab_activity ul li.sel span.deviant {
   background: transparent url(https://orig00.deviantart.net/d87a/f/2018/034/2/6/deviantart_by_velkia-dc20qi1.png) no-repeat;
    background-size: 13px;
}


/*---------------------------------------------------------------Gérer mes BDs-----*/

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: 0.5em;
}

.ui-widget-header {
    border: none;
    background: none;
    color: #212121;
    font-weight: 700;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0px;
    white-space: nowrap;
    margin-right: 0.5em;
    padding: 0;
    border-radius: 20px;
    border: 1px solid #66757F;
    border-bottom: 1px!important;

}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: white;
    font-weight: 400;
    color:  #66757F;
}

.comic_box {
    float: left;
    width: 99%;
    margin-top: 5px;
    padding: 10px;
    border: none;
    background:white;
    position: relative;
}

.comic_box .umanage_box {
    padding: 10px;
    margin-bottom: 10px;
    clear: left;
    float: left;
    width: 74%;
    background: white;
    border: 1px solid  #E6ECF0;
    border-radius:10px;
}


.member_form .row, .comic_box .row {
    float: left;
    width: 100%;
    margin-top: 5px;
    clear: left;
    font-size: 11px;
}

.comic_box .umanage_box h3 {
    margin:none;
    font-size: 14px;
    text-transform:none;
}

.comic_box .umanage_box h3 a {
    color: #E1BEE7;
    text-decoration: none;
    text-transform: none;
    font-size: 11px;
}

#projects .info {
    width: 11px;
    height: 11px;
    cursor: help;
    margin: 2px 0px 0px 3px;
    background: url(https://orig00.deviantart.net/8ff6/f/2018/034/6/5/help_round_button_by_velkia-dc20rtz.png) no-repeat;
    background-size:11px;
    float: none;
    display: inline-block;
}

.member_form .row label, .comic_box .row label {
    float: left;
    width: 285px;
    clear: left;
    margin-left: none;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: roboto;
    font-size: 11px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: roboto;
    font-size: 11px;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    background: none;
    border-width: 0;
    padding: 0em 1.4em;
}

.comic_box .umanage_box.chapters_administration {
    background: none;
}

.row .chapter {
    float: left;
    width: 80%;
    margin: 4px 0px 0px 14px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-size: 10px;
    background: #E6ECF0;
}

.row .chapter .ch_versions ul, #team ul {
    float: left;
    width: 93%;
    list-style: none;
    margin: 5px 14px;
    padding: 4px 10px;
    background: #E6ECF0;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.row .chapter .simple_view.empty_chapter {
    background: #E1BEE7;
}

.row .chapter .simple_view {
    float: left;
    width: 47%;
    background: #E9DFCC;
    border: none;
    border-radius: 20px;
    margin: 5px 0px 0px 10px;
}

.row .chapter .simple_view {
    float: left;
    width: 47%;
    background: white;
    border: none;
    border-radius: 20px;
    margin: 5px 0px 0px 10px;
}

.row .chapter .ch_versions .simple_view .edit_version, .row .chapter .ch_versions .simple_view .save_version {
    float: right;
    margin: 7px 15px 0 4px;
}

.comic_box .comic_chapters {
    float: right;
    right: 5px;
    clear: both;
    width: 450px;
    margin-left: 16px;
    z-index: 1;
    visibility: hidden;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 12px;
    -moz-box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    -webkit-box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    border: none;
    position: absolute;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    border-color: white;
}

.comic_chapters .row table .upload_page {
    float: left;
    width: 60px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    padding: 3px 0;
    margin: 3px;
    text-align: center;
    background: #667680;
    border: none;
    border-bottom: none;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
}

5- En dessous de la zone de code, choisissez "S'applique à URL commençant par http://www.amilova.com". Cliquez sur Ajouter.
6- Nommez votre thème en haut à gauche (moi je l'ai appelé Amilova light theme mais vous pouvez mettre ce que vous voulez), et appuyez sur enregister.
7- Profitez !

Si jamais vous voyez un bug, ou que vous même avez envie de contribuer (proposer un CSS avec d'autres couleurs par exemple), n'hésitez pas !
Si jamais je vais des mises à jour je vous les signalerai ici en recopiant le code, vous n'aurez plus qu'à le copier-coller en écrasant l'ancien.

Voilà, voilà, bon week-end, et n'hésitez pas à me faire des retours ! :D

PS : le but n'est pas de remplacer le thème officiel d'Amilova, mais juste avoir la possibilité de le personnaliser (ce que tous les artistes adorent faire, avouons le :D)

Dernière modification par Velkia (01 Apr, 2018 16:16:19)


Amoureux d'Heroic Fantasy ? Suivez Les Sentinelles Déchues !

#2 01 Apr, 2018 14:16:33

Erazade

C'est super cool ! J'avoue que j'utilise principalement mon téléphone alors je ne vais pas le mettre, mais je trouve ça super sympa!

#3 01 Apr, 2018 14:19:34

Velkia
Erazade a écrit :

C'est super cool ! J'avoue que j'utilise principalement mon téléphone alors je ne vais pas le mettre, mais je trouve ça super sympa!

Effectivement sur mobile j'ai pas pu toucher à grand chose hélas, le responsive ça impliquerait de toucher à trop de choses. Mais merci en tout cas ! smile


Amoureux d'Heroic Fantasy ? Suivez Les Sentinelles Déchues !

#4 01 Apr, 2018 14:22:47

JennyMiki

J'expérimente ça dès que j'ai un peu de temps !

Pied de page des forums

Propulsé par FluxBB

Sur le forum

Sandymoon Nouveau ! 16h31 [Mune] Projet Man (...) On a hâte d'en voir d'av (...)
Mune Nouveau ! 15h26 Mes projets BD (I (...) Ooooh le principe est co (...)
Skyjoe Nouveau ! hier [Portfolio] Boo T (...) Merci Kazamatsu, mais di (...)
kazamatsu Nouveau ! hier [Portfolio] Meteo (...) En lisant seulement les (...)
kazamatsu Nouveau ! hier [Aventure/Ecchii] (...) OMG ! j'ai juste regardé (...)
LaVengeancedeSeth Nouveau ! hier (Portofolio) La V (...) ok c'est fais , merci po (...)
Tezwin Nouveau ! 22Jun [Portfolio] Auteu (...) Mercii !
Tezwin Nouveau ! 21Jun Réseau de scénari (...) Hello, hello ! J'aimerai (...)
Tezwin Nouveau ! 21Jun Comment gérez-vou (...) Avant de créer un scénar (...)
elisawise Nouveau ! 21Jun Présentation de m (...) I like it. It's quite or (...)

Commentaires

Delta75 Delta75 17h49 ch6 p70 Oui plus de 300 pages dé (...)
Delta75 Delta75 17h45 ch5 p14 Non mais il impressionne (...)
L-Cacahuète L-Cacahuète 17h39 ch9 p20 C'est un mystère :D On (...)
Sandymoon Sandymoon 17h36 ch9 p20 Mais qu'est-ce qu'ils ma (...)
Sandymoon Sandymoon 17h34 ch7 p17 Bon, normalement, tu dev (...)
Sandymoon Sandymoon 17h32 ch6 p70 Ça commence à en faire d (...)
L-Cacahuète L-Cacahuète 17h27 ch9 p20 Oui ^^ désolé si c'est p (...)
Sandymoon Sandymoon 17h25 ch5 p14 Ce casque n'est pas prat (...)
le nuage le nuage 17h25 ch1 p15 "Ca sent le taureau, par (...)
Sandymoon Sandymoon 17h23 ch3 p52 Toi aussi tu as cette im (...)
Login

Not registered yet?