.extra-wiki {
display:flex;
align-items:stretch;
justify-content:flex-start;
width:100%;
max-width:1200px;
padding:80px 10px 70px;
margin:0 auto;
}
.extra-wiki-header-wrapper {
position:relative;
width:100%;
max-width:440px;
flex:0 0 auto;
}
.extra-wiki-header {
width:100%;
background-color:#ffffff;
padding:50px 50px 50px 50px;
border-bottom:5px solid #dcdcde;
}
.extra-wiki-header.sticky {
position:fixed;
top:70px;
}
.extra-wiki-header #item-buttons {
padding:20px 0 0;
margin:0 0 11px;
}
.extra-wiki-header .full-width-button {
width:100%;
display:block;
margin-top:10px;
overflow:hidden;
white-space:nowrap;
padding-right:0;
padding-left:0;
}
.extra-wiki-header .buttons-wrapper {
margin:10px 0 0;
display:flex;
justify-content:flex-end;
overflow:hidden;
}
.extra-wiki-header .buttons-wrapper .goto-comments-button {
flex:1 1 auto;
width:100%;
}
.extra-wiki-header .buttons-wrapper .share-button-wrapper {
flex:0 0 auto;
margin-left:10px;
}
.extra-wiki-header-slider {
height:340px;
width:100%;
max-width:340px;
position:relative;
overflow:hidden;
}
.extra-wiki-header-slider > .wrapper {
height:100%;
width:100%;
position:relative;
visibility:hidden;
}
.extra-wiki-header-slider > .wrapper.extra-slider-processed { visibility:visible; }
.extra-wiki-header-slider li {
display:block;
list-style:none;
width:340px;
height:340px;
}
.extra-wiki-header-slider li img {
display:block;
margin:0 auto;
}
.extra-wiki-header-slider .navigation {
display:block;
width:70px;
position:absolute;
top:0;
right:0;
z-index:2;
opacity:0;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.extra-wiki-header-slider:hover .navigation { opacity:1; }
.extra-wiki-content-column {
width:100%;
flex:1 1 auto;
margin-left:60px;
}
.extra-wiki-content-column .extra-wiki-content {
width:100%;
background-color:#ffffff;
padding:42px 50px 50px 50px;
border-bottom:5px solid #dcdcde;
margin:0 0 70px;
}
.extra-wiki-content-column .extra-wiki-content .extra-wiki-title {
font-size:30px;
line-height:35px;
color:#040418;
margin-bottom:19px;
}
.extra-wiki-content-column .extra-wiki-content .content { margin-bottom:30px; }
.extra-wiki-content-column .extra-wiki-content .wiki-item-infos { display:table; }
.extra-wiki-content-column .extra-wiki-content .wiki-item-infos .wiki-item-info {
display:table-row;
height:auto;
border-bottom:none;
}
.extra-wiki-content-column .extra-wiki-content .wiki-item-infos .wiki-item-info > * {
display:table-cell;
min-height:35px;
border-bottom:1px solid rgba(4,4,24,0.3);
line-height:25px;
padding:5px 0 5px;
}
.extra-wiki-content-column .extra-wiki-content .wiki-item-infos .wiki-item-info .wiki-item-info-title { white-space:nowrap; }
.extra-wiki-content-column .extra-wiki-content .wiki-item-infos .wiki-item-info .wiki-item-info-value {
width:100%;
max-width:760px;
padding-left:30px;
text-align:right;
}
.extra-wiki-content-column .extra-wiki-content .wiki-more-detail {
margin:0;
height:0;
overflow:hidden;
}
.extra-wiki-content-column .extra-wiki-content .wiki-more-detail.opened { height:auto; }
.extra-wiki-content-column .extra-wiki-content .wiki-more-button {
width:100%;
margin:40px 0 0;
}
.extra-wiki-content-column .extra-wiki-content .wiki-more-button .text { display:block; }
.extra-wiki-content-column .extra-wiki-content .wiki-more-button .text-no-more { display:none; }
.extra-wiki-content-column .extra-wiki-content .wiki-more-button.close .text-more { display:none; }
.extra-wiki-content-column .extra-wiki-content .wiki-more-button.close .text-no-more { display:block; }
.ranking-detail-wrapper {
margin:40px 0 0;
padding:39px 0 0;
border-top:5px solid #dcdcde;
}
.ranking-detail-wrapper .ranking-detail-wrapper-title {
font-size:30px;
line-height:30px;
font-weight:900;
margin:0 0 4px;
}
.ranking-detail-wrapper .ranking-detail-wrapper-subtitle {
font-size:20px;
line-height:30px;
font-weight:300;
}
.ranking-detail-wrapper > .inner {
display:flex;
justify-content:space-between;
align-items:center;
margin:42px 0 9px;
}
.ranking-detail-wrapper .ranking-current {
text-align:center;
padding:0 70px;
margin:0 0 10px 8px;
}
.ranking-detail-wrapper .ranking-current .ranking-current-title {
font-size:70px;
line-height:80px;
font-weight:300;
margin:0 0 14px;
}
.ranking-detail-wrapper .ranking-current .ranking { margin:0 auto; }
.ranking-detail-wrapper .ranking-detail {
width:100%;
max-width:300px;
}
.ranking-detail-wrapper .ranking-detail .line {
position:relative;
height:30px;
display:flex;
align-items:center;
}
.ranking-detail-wrapper .ranking-detail .line .ranking { margin:0 15px 0 10px; }
.ranking-detail-wrapper .ranking-detail .line .progress {
display:block;
width:120px;
height:10px;
}
.ranking-detail-wrapper .ranking-detail .line .progress .bar {
display:block;
height:100%;
width:0;
border-radius:5px;
background-color:#dcdcde;
}
.ranking-detail-wrapper .ranking-detail .line .text {
margin:0 0 0 13px;
display:block;
}
.comment .ranking {
position:absolute;
top:46px;
right:50px;
}
.comment .edit-button { display:none; }
.comment.comment-by-logged-user .edit-button {
display:block;
width:50px;
height:50px;
overflow:hidden;
position:absolute;
top:30px;
right:145px;
}
.comment.comment-by-logged-user .edit-button .text {
position:absolute;
left:100%;
}
.comment.comment-by-logged-user .edit-button .icon {
width:23px;
height:20px;
position:absolute;
top:50%;
left:50%;
margin-top:-10px;
margin-left:-11px;
}
.comment.comment-by-logged-user .edit-button .icon * {
fill:#040418;
-webkit-transition:fill 0.3s ease-out;
transition:fill 0.3s ease-out;
}
.comment.comment-by-logged-user .edit-button:hover .icon * {
fill:#f50057;
-webkit-transition:fill 0.2s ease-out;
transition:fill 0.2s ease-out;
}
.comment .comment-wiki-review-details-wrapper {
border-top:5px solid #f5f5f5;
margin-top:20px;
margin-bottom:-10px;
}
.comment .comment-wiki-review-details {
font-size:18px;
line-height:25px;
font-weight:300;
display:table;
padding-top:21px;
padding-bottom:4px;
}
.comment .comment-wiki-review-details .comment-wiki-review-detail { display:table-row; }
.comment .comment-wiki-review-details .comment-wiki-review-detail .comment-wiki-review-detail-title {
font-weight:500;
white-space:nowrap;
}
.comment .comment-wiki-review-details .comment-wiki-review-detail .comment-wiki-review-detail-title, .comment .comment-wiki-review-details .comment-wiki-review-detail .comment-wiki-review-detail-value {
display:table-cell;
padding-bottom:10px;
padding-right:10px;
}
.comment .comment-content {
padding-right:30px;
padding-bottom:30px;
}
.comment .comment-content .comment-inner {
border-top:5px solid #f5f5f5;
margin-top:20px;
padding-top:22px;
line-height:25px;
}
.extra-wiki-header .full-width-button.compare-button { display:none; }
.extra-wiki-header .collection-button.do-like .text {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:21px 0 17px;
transition:0.3s transform ease-out;
}
.extra-wiki-header .collection-button.do-like .text-remove { transform:translate3d(0,-100%,0); }
.extra-wiki-header .collection-button.do-like .text-add { transform:translate3d(0,0,0); }
.extra-wiki-header .collection-button.do-like.liked .text-remove { transform:translate3d(0,0,0); }
.extra-wiki-header .collection-button.do-like.liked .text-add { transform:translate3d(0,100%,0); }
@media only screen and (max-width: 1200px) {
.extra-wiki-content-column { margin-left:25px; }
.ranking-detail-wrapper > .inner { display:block; }
.ranking-detail-wrapper .ranking-detail, .ranking-detail-wrapper .ranking-current { margin:0 auto; }
.extra-wiki-header-slider .navigation { opacity:1; }
}
@media only screen and (max-width: 925px) {
.extra-wiki { display:block; }
.extra-wiki-content-column, .extra-wiki-header {
margin:0 auto 20px;
max-width:770px;
}
.extra-wiki-header > .inner {
position:relative;
overflow:hidden;
}
.extra-wiki-header-slider { max-width:none; }
.extra-wiki-header-slider .wrapper {
max-width:340px;
margin:0 auto;
overflow:visible;
}
}
@media only screen and (max-width: 540px) {
.extra-wiki-header {
padding-right:10px;
padding-left:10px;
}
.extra-wiki-header-slider li {
width:100%;
max-width:340px;
}
.extra-wiki-header-slider .navigation { display:none; }
}