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

L-Cacahuète Nouveau ! 16Oct [L-Cachuète] Ask (...) Merci, c'est noté! La (...)
buthler Nouveau ! 16Oct comment ecrire un (...) Tu peux faire des notes (...)
kazamatsu Nouveau ! 15Oct [minoupower] Hero (...) De rien ;)
Azurio Nouveau ! 12Oct Mon projet "Dream (...) Salut, C'est Azurio. Je (...)
bob32 Nouveau ! 12Oct Bugs de notificat (...) Je me permet de faire re (...)
Crowey Nouveau ! 10Oct [Portfolio] Alone (...) Bonsoir :) Les première (...)
Sandymoon Nouveau ! 9Oct Lien mort vers le (...) Comme je l'ai dit, on pe (...)
buthler Nouveau ! 8Oct college talk Tous n'ont pas l'envie d (...)
UnMondeDeGeek Nouveau ! 8Oct Projet BD "Nobody (...) Bonsoir tout le monde ! (...)
buthler Nouveau ! 6Oct [J.E]:Impact (pre (...) Félicitations pour ta pu (...)

Commentaires

Pondy Pondy 04h42 ch11 p18 Le troisième oeil qu'ils (...)
Pondy Pondy 04h40 ch13 p15 Ah d'accord ! En fait Y (...)
ace4 ace4 01h03 ch8 p24 <=====To be continued
Ouv Ouv 00h53 ch11 p18 Corrigé ! Merci à toi :- (...)
buthler buthler 00h32 ch2 p2 C'est le robot, ça fait (...)
Tageule Tageule 00h25 ch3 p5 On se fait autant d'amis (...)
Hurleguerre Hurleguerre 00h16 ch8 p24 Le petit salopard qui gu (...)
Sanctionneur Sanctionneur 00h14 ch8 p24 Voilàààà il commence à c (...)
sebynosaure sebynosaure hier ch28 p44 En effet. XD
Sandymoon Sandymoon hier ch1 p42 Comme ça il pourra nager (...)
Login

Not registered yet?