app/assets/stylesheets/partials/anime-page.css.scss
@import 'mixins/block-grid';
@import 'modules/tooltip';
.series-header {
background: #4b5360;
background-size: cover;
margin-bottom: 30px;
@media (max-width: 1050px) {
background-position: inherit !important;
}
.container {
position: relative;
height: 350px;
@media (max-width: 820px) {
height: 200px;
}
}
.header-buttons {
position: absolute;
bottom: 25px;
left: 15px;
@media (max-width: 820px) {
width: 100%;
text-align: center;
}
}
.edit-button {
a {
background: rgba(255,255,255,0.2);
color: #fff;
border-radius: 3px;
padding: 10px 15px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
&:hover {
background: rgba(255,255,255,0.3);
}
}
}
.facebook-share, .twitter-share {
margin-left: 10px;
}
.twitter-share {
position: relative;
top: 5px;
}
.featured-quote {
display: inline-block;
color: #fff;
padding: 15px;
max-width: 500px;
position: absolute;
bottom: 0;
right: 15px;
background: rgba(0,0,0,.5);
@media (max-width: 820px) {
display: none;
}
.quote-text {
margin-bottom: 10px;
word-wrap: break-word;
}
.quote-author {
margin-bottom: 5px;
font-weight: bold;
word-wrap: break-word;
}
}
}
.series-column {
width: 69%;
float: left;
@media (max-width: 860px) {
width: 100%;
}
}
.community-column {
width: 31%;
padding-left: 15px;
float: left;
@media (max-width: 860px) {
width: 100%;
}
.trending-review-empty {
margin-top: 40px;
}
}
.series-panel {
@extend .clearfix;
@extend .panel;
@extend .rounded-panel;
padding: 10px;
.panel-title {
@extend .clearfix;
border-bottom: 1px solid #ddd;
h4 {
margin-top: 0;
font-weight: normal;
display: inline-block;
float: left;
}
&.has-button {
h4 {
margin-top: 10px;
}
}
}
.btn-group {
float: right;
}
}
.poster-container {
padding-right: 15px;
float: left;
width: 30%;
@media (max-width: 620px) {
display: none;
}
.poster-actions {
position: relative;
}
.series-poster {
width: 100%;
max-width: 100%;
border-radius: 3px;
}
.trailer-link, .favorite-link {
position: absolute;
left: 50%;
top: 50%;
margin-top: -27px;
background: #000;
padding: 16px 19px;
border-radius: 50%;
color: #fff;
margin-left: -27px;
opacity: .6;
&:hover {
opacity: 1;
}
}
.favorite-link {
top: 35px;
left: inherit;
right: 10px;
border-radius: 3px;
padding: 5px 10px;
z-index: 0;
.fa-heart {
color: #dc6767;
}
}
}
.series-info {
float: left;
width: 70%;
@media (max-width: 620px) {
width: 100%;
}
.synopsis {
max-width: 580px;
color: #838a91;
}
.small-label {
float: left;
margin: 5px 10px 5px 0;
@media (max-width: 960px) {
width: 100%;
}
}
.genres, .studios {
@extend .clearfix;
display: block;
@media (min-width: 961px) {
.inline-list {
padding-left: 54px;
}
}
li {
text-decoration: underline;
font-size: 15px;
position: relative;
padding-right: 10px;
color: #838a91;
&:last-child {
padding-right: 0;
}
}
}
}
.series-title {
margin-top: 5px;
margin-bottom: 5px;
color: #050609;
.alternate-title {
color: #BBBBBB;
}
}
.series-metadata {
color: #767676;
font-size: 14px;
margin-bottom: 5px;
font-family: $headerFontFamily;
li {
display: inline;
&:after {
content: " ยท ";
}
&:last-child {
&:after {
content: "";
}
}
}
}
.user-actions {
border: 2px solid #eee;
border-radius: 3px;
padding: 15px;
display: inline-block;
margin-top: 15px;
.btn-group {
float: left;
}
.library-button {
background: #16a085;
padding: 10px 30px;
font-size: 17px;
color: #fff;
border: none;
border-radius: 3px;
min-width: 200px;
}
.personal-rating {
width: auto;
border: none;
padding: 0;
float: left;
margin: 0;
margin-left: 15px;
position: relative;
top: 2px;
}
}
// Cast Panel
.series-cast {
.cast-image {
width: 60px;
height: 60px;
overflow: hidden;
float: left;
position: relative;
text-align: left;
.actor, .character {
width: 100%;
position: absolute;
}
.character {
opacity: 0;
transition: .2s ease-in;
}
}
.cast-name {
float: left;
padding-left: 10px;
text-align: left;
h4 {
margin-bottom: 0;
}
small {
font-family: $headerFontFamily;
color: #737373;
font-size: 15px;
}
}
.character-wrapper {
padding-left: 0;
display: inline-block;
min-width: 250px;
margin-top: 10px;
@media (max-width: 1160px) {
width: 49%;
}
@media (max-width: 790px) {
width: 100%;
}
&:hover {
.character {
opacity: 1;
}
}
}
}
.view-more {
text-align: center;
font-size: 12px;
margin-top: 10px;
}
// Quotes
.quote {
@extend .clearfix;
border: 1px solid #ddd;
padding: 10px;
margin-top: 10px;
word-wrap: break-word;
}
.quote-author {
font-weight: 400;
word-wrap: break-word;
}
.quote-like-box {
float: right;
position: relative;
font-size: 14px;
margin-top: 2px;
.like-button {
padding-right: 5px;
a {
color: #979797;
}
&.active, &:hover {
a {
color: #ec7c73;
}
}
}
.quote-divider {
position: absolute;
width: 1px;
background: #ddd;
top: 0;
bottom: -10px;
}
.total-likes {
padding-left: 10px;
color: #b4b4b4;
}
}
// Franchises
.franchise-show {
@extend .clearfix;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
padding-top: 10px;
&:last-child {
margin-bottom: 10px;
}
.franchise-poster {
width: 12%;
float: left;
padding: 0;
img {
max-width: 100%;
border-radius: 3px;
}
}
.franchise-info {
width: 88%;
padding-left: 10px;
float: left;
}
}
.series-header .no-cover-image {
.container {
height: 200px;
@media (max-width: 820px) {
height: 100px;
}
}
}
/* Condensed header shown on non-index anime pages. */
.series-header .condensed {
.series-title {
font-size: 38px;
margin-bottom: 4px;
}
.poster-container, .synopsis, .info-tabs, .series-ratings {
display: none;
}
.top-buttons {
@extend .clearfix;
.btn-group .top-button {
width: 50%;
margin: 0;
border-radius: 0 !important;
&:first-of-type {
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
&:last-of-type {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
}
}
.middle-column {
@extend .col-sm-8;
}
.right-column {
@extend .col-sm-4;
&.no-entry {
@extend .col-sm-3;
float: right;
.btn-group .top-button {
width: 100%;
}
}
}
}
.reviews-index {
h1 {
margin-left: 5px;
}
}
.reviews {
@extend .clearfix;
h4 {
float: left;
}
}
.review-links {
float: right;
margin-top: 10px;
}
.review-nag {
@extend .col-sm-12;
@extend .clearfix;
border: 1px solid #B8B8B8;
background: #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px 15px;
color: #777;
margin-top: -30px;
margin-bottom: 30px;
.nag-text {
line-height: 32px;
font-weight: 400;
@media (max-width: 760px) {
.extended-nag {
display: none;
}
}
}
a {
background: #16a085;
color: #fff;
padding: 5px 15px;
border-radius: 3px;
margin-left: 10px;
float: right;
&:hover {
background: darken(#16a085, 5);
}
}
@media (max-width: 450px) {
text-align: center;
width: 100%;
display: block;
margin-bottom: 10px;
.nag-text {
width: 100%;
display: block;
margin-bottom: 10px;
}
a {
display: block;
margin-bottom: 5px;
margin-left: 0;
width: 100%;
}
}
}
.series-reviews {
@extend .col-sm-6;
padding: 0 5px;
.review-listing {
@extend .col-xs-12;
border-radius: 3px;
overflow: hidden;
padding: 0px;
.review {
@extend .col-xs-12;
@extend .clearfix;
padding: 8px;
padding: 15px;
border-bottom: 1px solid #ccc;
transition: .2s ease-in;
&:hover {
background: lighten(#eee, 3);
}
}
.trending-review-empty {
text-align: center;
margin-bottom: 35px;
padding: 25px;
padding-bottom: 0;
.empty-icon {
font-size: 100px;
color: #aaa;
}
}
.reviewer-thumb-wrapper {
@extend .col-sm-2;
padding-left: 4px;
padding-top: 8px;
}
.reviewer-thumb {
border-radius: 3px;
width: 100%;
}
.reviewer-name-wrapper {
@extend .col-xs-12;
@extend .col-sm-10;
padding: 0;
}
.reviewer-name {
display: inline-block;
margin: 2px 0;
color: #444;
.subtext {
font-weight: normal;
color: #888;
font-size: 16px;
margin-right: 4px;
}
}
.review-summary {
font-size: 16px;
color: #444;
margin: 4px 0;
line-height: 20px;
}
.review-stars {
padding: 0;
margin: 0;
color: #777;
position: absolute;
top: 0;
right: 0;
}
}
}
.review-likes {
font-size: 12px;
color: #999;
margin: 2px 0;
}
.series-gallery {
@extend .col-sm-6;
padding-right: 0;
img {
width: 100%;
height: 150px;
}
}
// Review bubbles
.quote-bubble {
width: 100%;
max-width: 100%;
margin-bottom: 15px;
.review-quote {
position: relative;
width: 100%;
padding: 12px;
font-size: 15px;
background: #FFFFFF;
border-radius: 3px;
border: solid #fff 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
&:before {
content: '';
position: absolute;
border-style: solid;
border-width: 1px 26px 28px 1px;
border-color: transparent rgba(0, 0, 0, 0.02) transparent transparent;
display: block;
width: 0;
z-index: 0;
bottom: -29px;
left: 39px;
}
&:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 25px 25px 0;
border-color: transparent #FFFFFF transparent transparent;
display: block;
width: 0;
z-index: 1;
bottom: -25px;
left: 40px;
}
}
}
@media (min-width: 1460px) {
.review-listing {
.quote-bubble {
max-width: 49%;
&:nth-of-type(odd) {
float: right !important;
}
}
.media-body > p {
min-height: 84px;
}
}
}
.reviewer-avatar {
width: 40px;
}
.quick-rating {
float: left;
margin-right: 10px;
width: 24px;
height: 24px;
.fa {
font-size: 24px;
&.fa-smile-o {
color: #16a085;
}
&.fa-frown-o {
color: #c0392b;
}
}
}
.review-details {
@extend .clearfix;
font-size: 12px;
text-align: right;
.review-likes {
float: left;
}
.full-review {
float: right;
}
}
.review-source {
margin-left: 78px;
margin-top: 10px;
.reviewer-avatar {
float: left;
margin-right: 10px;
}
.reviewer-name {
color: #7f7f7f;
font-weight: 400;
line-height: 38px;
}
}