app/assets/stylesheets/partials/media-anime-page.css.scss
.manga-page {
.gallery {
@extend .pull-right;
@extend .col-sm-3;
float: right;
padding-left: 0;
@media (max-width: 940px) {
width: 100%;
padding-left: 10px;
padding-right: 20px;
.col-sm-12 {
width: 25%
}
}
li {
@media (min-width: 941px) {
padding-right: 0;
}
}
}
.poster-container {
@extend .col-xs-5;
@extend .col-sm-12;
padding-bottom: 5px;
@media (min-width: 941px) {
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
}
.sidebar-copy {
@extend .col-xs-7;
@extend .clearfix;
@media (max-width: 941px) {
padding-bottom: 5px;
}
}
.trailer {
img {
width: 100%;
height: auto;
margin-bottom: 28px;
border-radius: 3px;
}
.play-icon {
width: 100%;
top: 80px;
text-align: center;
position: absolute;
color: #fff;
text-shadow: 0 0 2px #000;
opacity: 0.4;
}
&:hover .play-icon {
opacity: 0.8;
}
}
.gallery-images {
img {
width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 3px;
}
.gallery-image {
@extend .col-xs-2;
@extend .col-sm-12;
padding-left: 0;
padding-right: 0;
@media (max-width: 940px) {
padding-left: 10px;
width: 25%
}
}
}
.series-body {
@extend .col-xs-12;
@extend .col-sm-9;
padding-right: 10px;
@media (max-width: 480px) {
padding: 0;
}
@media (max-width: 940px) {
width: 100%;
}
}
.series-title-wrapper {
@extend .col-xs-12;
text-align: center;
}
h1.series-title {
font-size: 30px;
}
h4.series-title {
font-size: 18px;
}
.series-title {
font-weight: normal;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
@media (max-width: 941px) {
margin-bottom: 10px;
}
.fa {
margin: 0 4px 0 6px;
font-size: 17px;
}
> a {
color: #333;
}
}
.series-metadata {
color: #888;
font-size: 14px;
li {
display: inline;
&:after {
content: " ยท ";
}
&:last-child {
&:after {
content: "";
}
}
}
}
.top-buttons {
@extend .col-sm-12;
margin-bottom: 15px;
.top-button {
border: none;
background: #2f333b;
color: #fff;
font-family: $headerFontFamily;
font-size: 16px;
&.heart {
font-size: 20px;
padding-bottom: 1px;
padding-top: 4px;
&:hover {
opacity: .8;
}
}
&.active {
background: #f77d70;
color: #9f554e;
}
}
.left-buttons {
display: inline-block;
li {
display: inline;
}
}
.right-buttons {
display: inline-block;
float: right;
}
}
.series-description {
font-size: 18px;
}
.series-panel {
background: $eggshell;
@extend .clearfix;
@media (max-width: 768px) {
background: #fff;
}
}
.series-sidebar {
@extend .col-xs-12;
@extend .col-sm-3;
padding: 10px;
border-radius: 3px;
hr {
margin-top: 15px;
margin-bottom: 15px;
border: 0;
border-top: 1px solid #ddd;
}
}
.series-content {
@extend .col-xs-12;
@extend .col-sm-9;
background: #fff;
border-left: 1px solid #ddd;
border-top-right-radius: 4px;
@media (min-width: 768px) {
min-height: 1000px;
}
.user-cover-options {
.large-avatar {
@media (max-width: 760px) {
display: none;
}
}
.account-info {
@media (max-width: 760px) {
padding-left: 0 !important;
}
}
.follow-button {
@media (max-width: 500px) {
position: absolute;
top: -10px;
}
}
}
}
.series-poster {
width: 100%;
border-radius: 3px;
}
.sidebar-title {
margin-top: -5px;
text-align: center;
}
.buy-series, .watch-series {
@extend .col-xs-12;
@extend .col-sm-12;
float: left;
padding: 15px 0;
margin: 15px 0 0 0;
border-top: 1px solid #ddd;
img {
width: 100%;
}
}
.affiliate-button {
@extend .col-xs-6;
@extend .col-sm-12;
padding-left: 0;
padding-right: 0;
@media (max-width: 768px) {
text-align: center;
width: 100%;
float: none;
a {
display: inline-block;
width: auto;
}
}
}
#affiliate {
div {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
hr {
clear: left;
}
}
.watch-series {
margin-top: 15px;
border-top: 1px solid #ddd;
padding-top: 15px;
}
.current-watching {
@extend .col-xs-12;
@extend .col-sm-12;
margin-top: 15px;
border-top: 1px solid #ddd;
padding-top: 15px;
padding-left: 0;
padding-right: 0;
float: left;
}
.related-user-wrapper {
@extend .col-xs-12;
@extend .col-sm-12;
@extend .clearfix;
padding-left: 0;
padding-right: 0;
}
.related-user {
@extend .col-xs-3;
@extend .col-sm-3;
padding: 1px;
overflow: hidden;
border-radius: 3px;
img:hover {
transform: scale(1.5);
opacity: .6;
}
}
.nav-tabs {
border-bottom: none;
}
.tab-pane {
padding-top: 15px;
border: 1px solid #838c9a;
margin-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
border-radius: 3px;
border-top-left-radius: 0;
.rounded-block {
border: none;
border-bottom: 1px solid #ddd;
margin-bottom: 0;
border-radius: 0;
&:hover {
border: none;
border-bottom: 1px solid #ddd;
}
}
}
.series-infobar {
padding-left: 0;
padding-right: 0;
}
.info-tabs {
@extend .col-xs-12;
margin-top: 15px;
@media (max-width: 768px) {
float: left;
}
li > a {
padding: 5px 15px;
}
hr {
margin-top: 10px;
border-color: #ddd;
}
}
.rounded-block {
border: 1px solid #ddd;
border-radius: 3px;
padding-top: 15px;
padding-bottom: 8px;
margin-bottom: 15px;
&:hover {
border: 1px solid #777;
}
.resposive-image {
padding-bottom: 5px;
}
}
.review-listing {
@extend .col-xs-12;
.review {
@extend .col-xs-12;
@extend .clearfix;
padding: 8px;
background-color: #fff;
}
.trending-review-empty {
text-align: center;
margin-bottom: 35px;
.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;
overflow: hidden;
text-overflow: ellipsis;
}
.review-likes {
font-size: 12px;
color: #999;
margin: 2px 0;
}
.review-stars {
float: right;
padding: 0;
margin: 0;
color: #777;
}
}
.studio-name {
margin-bottom: 10px;
margin-top: -5px;
}
.cast {
overflow: hidden;
}
.language-select {
font-size: 14px;
margin-bottom: 0px;
dd {
a:hover {
color: #fd7532;
}
&.active {
a {
font-weight: normal;
&:hover {
color: #fff;
}
}
}
}
}
.casting {
margin-top: 5px;
.character {
background: #fff;
padding: 16px 0;
padding-right: 5px;
color: #222;
}
.voice-actor {
background: #fff;
padding: 16px 0;
padding-left: 5px;
}
img {
vertical-align: middle;
margin-right: 5px;
width: 30px;
height: 39px;
}
.va {
float: right;
img {
margin-right: 0px;
margin-left: 5px;
}
}
}
.actor {
&:before {
float: left;
width: 0;
margin-top: 11px;
white-space: nowrap;
content: ". . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . ";
}
}
.genre-tab {
@extend .clearfix;
.badge {
background: #eee;
border-radius: 3px;
padding-top: 5px;
margin-bottom: 5px;
margin-right: 6px;
font-size: 15px;
font-weight: normal;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
font-family: $headerFontFamily;
&:hover {
background: $orange;
a {
color: #fff;
}
}
}
.badge a {
font-weight: normal;
color: #666;
}
}
.favorite-count {
@media (max-width: 500px) {
display: none;
}
}
p img {
max-width: 100%;
}
}