add film details

This commit is contained in:
2019-02-24 22:06:40 +01:00
parent 2b8a9118b8
commit e3b59d1580
5 changed files with 156 additions and 87 deletions

View File

@@ -91,16 +91,23 @@ select {
.fa-director:before {
content: "\f007";
}
.fa-more:before {
content: "\f05a";
}
.fa-spinner {
color: $ugc_color;
font-size:2em;
}
.fa-spinner:before {
content: "\f110";
&:before {
content: "\f110";
}
}
.fa-cinema:before {
content: "\f017";
}
.fa-close:before {
content: "\f057";
}
.fa-date:before {
content: "\f133";
}
@@ -219,84 +226,113 @@ main {
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
}
* {
transform: translate(0px, 0px);
}
img.bg {
position:absolute;
top:50%;
margin-top:-25%;
left:$poster_size;
right:0;
bottom:0;
opacity:0.2;
width:calc(100% - #{$poster_size});
}
.poster-container {
display: inline-block;
img.poster {
width: $poster_size;
z-index: 2;
vertical-align: top;
}
}
.film * {
transform: translate(0px, 0px);
}
.film img.bg {
position:absolute;
top:50%;
margin-top:-25%;
left:$poster_size;
right:0;
bottom:0;
opacity:0.2;
width:calc(100% - #{$poster_size});
}
.film .poster-container {
display: inline-block;
}
.film img.poster {
width:$poster_size;
z-index:2;
vertical-align: top;
}
.film .info {
z-index:2;
display: inline-block;
vertical-align:top;
padding:1em;
width: calc(100% - 2em - #{$poster_size});
}
.film p {
margin:0.5em 0;
}
.film .title {
margin-top:0;
}
.film .title a.name {
font-weight: bold;
text-transform: uppercase;
}
.film .edito {
font-style: italic;
color:#777;
}
.film .director {
color: #555;
}
.film .timetable {
margin-top:1em;
font-size: 0.8em;
}
.film .timetable p {
line-height: 2.0;
margin: 0;
}
.film .timetable .cinema {
margin-right:0.5em;
}
.film .timetable .cinema .fa {
font-size: 1.25em;
line-height: 0.7656249414em;
vertical-align: -14.06250352%;
}
.film .timetable .lang {
margin-right:0.5em;
p {
margin: 0.5em 0;
}
.info {
z-index:2;
display: inline-block;
vertical-align:top;
padding:1em;
width: calc(100% - 2em - #{$poster_size});
.title {
margin: 0;
a.name {
font-weight: bold;
text-transform: uppercase;
}
}
.edito {
font-style: italic;
color:#777;
}
.film-info {
padding-left: calc((1.28571429em + 0.5em)/0.9);
font-size: 0.9em;
color: #555;
.director {
font-style: italic;
.more-info {
font-size: calc(1em/0.9);
margin-left: 0.5em;
vertical-align: -0.05em;
&:not(.fa-spin) {
cursor: pointer;
&:hover {
color: $ugc_color;
}
}
}
}
.film-details {
border-left: 2px solid #CCC;
padding-left: 0.5em;
p {
font-size: 0.8em;
color: #555;
}
}
}
.timetable {
margin-top:1em;
font-size: 0.8em;
p {
line-height: 2.0;
margin: 0;
}
.cinema {
margin-right:0.5em;
.fa {
font-size: 1.25em;
line-height: 0.7656249414em;
vertical-align: -14.06250352%;
}
}
.lang {
margin-right:0.5em;
}
}
}
}
/* Section - Feeback */