Fixed css for movies.

8 years ago · 74b1c846a5
parent 76e6ebc63c
commit 74b1c846a5
7 changed files with 474 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.gitignore
+++ b/.gitignore
@ -130,6 +130,7 @@ output/*

 #OS X metadata files
 ._*
+.DS_Store

 _start
 _temp_*/**/*
--- a/gulp/less.js
+++ b/gulp/less.js
@ -27,6 +27,7 @@ gulp.task('less', function() {
        paths.src.root + 'System/Logs/logs.less',
        paths.src.root + 'System/Update/update.less',
        paths.src.root + 'System/Info/info.less',
+        paths.src.root + 'Movies/movies.less',

    ];

--- a/src/.DS_Store
+++ b/src/.DS_Store
--- a/src/UI/.DS_Store
+++ b/src/UI/.DS_Store
--- a/src/UI/Movies/movies.less
+++ b/src/UI/Movies/movies.less
@ -0,0 +1,471 @@
+@import "../Content/Bootstrap/variables";
+@import "../Shared/Styles/card.less";
+@import "../Shared/Styles/clickable.less";
+@import "../Content/prefixer";
+
+.series-poster {
+  min-width: 56px;
+  max-width: 100%;
+}
+
+.edit-movie-modal, .delete-movie-modal {
+  overflow : visible;
+
+  .series-poster {
+    padding-left : 20px;
+    width        : 168px;
+  }
+
+  .form-horizontal {
+    margin-top : 10px;
+  }
+
+  .twitter-typeahead {
+    .form-control[disabled] {
+      background-color: #ffffff;
+    }
+  }
+}
+
+.delete-movie-modal {
+  .path {
+    margin-left : 30px;
+  }
+
+  .delete-files-info {
+    margin-top : 10px;
+    display    : none;
+  }
+}
+
+.movie-item {
+  padding-bottom : 30px;
+
+  :hover {
+    text-decoration : none;
+  }
+
+  h2 {
+    margin-top : 0px;
+  }
+
+  a {
+    color : #000000;
+  }
+}
+
+.movie-page-header {
+  .card(black);
+  .opacity(0.9);
+  background : #000000;
+  color      : #ffffff;
+  padding    : 30px 15px;
+  margin     : 50px 10px;
+
+  .poster {
+    margin-top : 4px;
+  }
+
+  .header-text {
+    margin-top : 0px;
+  }
+}
+
+.movie-season {
+  .card;
+  .opacity(0.9);
+  margin  : 30px 10px;
+  padding : 10px 25px;
+
+  .show-hide-episodes {
+    .clickable();
+    text-align : center;
+
+    i {
+      .clickable();
+    }
+  }
+}
+
+.series-posters {
+  list-style-type: none;
+
+  @media (max-width: @screen-xs-max) {
+    padding        : 0px;
+  }
+
+  li {
+    display        : inline-block;
+    vertical-align : top;
+  }
+
+  .series-posters-item {
+
+    .card;
+    .clickable;
+    margin-bottom : 20px;
+    height        : 315px;
+
+    .center {
+      display      : block;
+      margin-left  : auto;
+      margin-right : auto;
+      text-align   : center;
+
+      .progress {
+        text-align : left;
+        margin-top : 5px;
+        left       : 0px;
+        width      : 170px;
+
+        .progressbar-front-text, .progressbar-back-text {
+          width : 170px;
+        }
+      }
+    }
+
+    .labels {
+      display : inline-block;
+      .opacity(0.75);
+      width   : 170px;
+
+      :hover {
+        cursor : default;
+      }
+
+      .label {
+        margin-top : 3px;
+        display    : block;
+      }
+
+      .tooltip {
+        .opacity(1);
+      }
+    }
+
+    @media (max-width: @screen-xs-max) {
+      height  : 235px;
+      margin  : 5px;
+      padding : 6px 5px;
+
+      .center {
+        .progress {
+          width : 125px;
+
+          .progressbar-front-text, .progressbar-back-text {
+            width : 125px
+          }
+        }
+      }
+
+      .labels {
+        width: 125px;
+      }
+    }
+  }
+
+  .series-poster-container {
+    position : relative;
+    overflow : hidden;
+    display  : inline-block;
+
+    .placeholder-image ~ .title {
+      opacity: 1.0;
+    }
+
+    .title {
+      position   : absolute;
+      top        : 25px;
+      color      : #f5f5f5;
+      width      : 100%;
+      font-size  : 22px;
+      line-height: 24px;
+      opacity    : 0.0;
+      font-weight: 100;
+    }
+
+    .ended-banner {
+      color                    : #eeeeee;
+      background-color         : #b94a48;
+      .box-shadow(2px 2px 20px #888888);
+      -moz-transform-origin    : 50% 50%;
+      -webkit-transform-origin : 50% 50%;
+      position                 : absolute;
+      width                    : 320px;
+      top                      : 200px;
+      left                     : -122px;
+      text-align               : center;
+      .opacity(0.9);
+
+      .transform(rotate(45deg));
+    }
+
+    .movie-controls {
+      position         : absolute;;
+      top              : 0px;
+      overflow         : hidden;
+      background-color : #eeeeee;
+      width            : 100%;
+      text-align       : right;
+      padding-right    : 10px;
+      display          : none;
+      .opacity(0.8);
+
+      i {
+        .clickable();
+      }
+    }
+
+    .hidden-title {
+      position         : absolute;;
+      bottom           : 0px;
+      overflow         : hidden;
+      background-color : #eeeeee;
+      width            : 100%;
+      text-align       : center;
+      .opacity(0.8);
+      display          : none;
+    }
+
+    .series-poster {
+      width       : 168px;
+      height      : 247px;
+      display     : block;
+      font-size   : 34px;
+      line-height : 34px;
+    }
+
+    @media (max-width: @screen-xs-max) {
+      .series-poster {
+        width       : 120px;
+        height      : 176px;
+      }
+
+      .ended-banner {
+        top  : 145px;
+        left : -137px;
+      }
+    }
+  }
+}
+
+.movie-detail-overview {
+  margin-bottom : 50px;
+}
+
+.movie-season {
+
+  .episode-number-cell {
+    width : 40px;
+    white-space: nowrap;
+  }
+  .episode-air-date-cell {
+    width : 150px;
+  }
+
+  .episode-status-cell {
+    width : 100px;
+  }
+
+  .episode-title-cell {
+    cursor : pointer;
+  }
+}
+
+.episode-detail-modal {
+
+  .episode-info {
+    margin-bottom : 10px;
+  }
+
+  .episode-overview {
+    font-style : italic;
+  }
+
+  .episode-file-info {
+    margin-top : 30px;
+    font-size  : 12px;
+  }
+
+  .episode-history-details-cell .popover {
+    max-width: 800px;
+  }
+
+  .hidden-movie-title {
+    display : none;
+  }
+}
+
+.season-grid {
+  .toggle-cell {
+    width         : 28px;
+    text-align    : center;
+    padding-left  : 0px;
+    padding-right : 0px;
+  }
+
+  .toggle-cell {
+    i {
+      .clickable;
+    }
+  }
+}
+
+.season-actions {
+  width: 100px;
+}
+
+.season-actions, .movie-actions {
+
+  div {
+    display : inline-block
+  }
+
+  text-transform : none;
+
+  i {
+    .clickable();
+    font-size    : 24px;
+    margin-left : 5px;
+  }
+}
+
+.movie-stats {
+  font-size : 11px;
+}
+
+.movie-legend {
+  padding-top : 5px;
+}
+
+.seasonpass-movie {
+  .card;
+  margin : 20px 0px;
+
+  .title {
+    font-weight : 300;
+    font-size   : 24px;
+    line-height : 30px;
+    margin-left : 5px;
+  }
+
+  .season-select {
+    margin-bottom : 0px;
+  }
+
+  .expander {
+    .clickable;
+    line-height : 30px;
+    margin-left : 8px;
+    width       : 16px;
+  }
+
+  .season-grid {
+    margin-top : 10px;
+  }
+
+  .season-pass-button {
+    display : inline-block;
+  }
+
+  .movie-monitor-toggle {
+    font-size  : 24px;
+    margin-top : 3px;
+  }
+
+  .help-inline {
+    margin-top : 7px;
+    display    : inline-block;
+  }
+}
+
+.season-status {
+  font-size      : 11px;
+  vertical-align : middle !important;
+}
+
+//Overview List
+.movie-overview-list-actions {
+  min-width: 56px;
+  max-width: 56px;
+
+  i {
+    .clickable();
+  }
+}
+
+//Editor
+
+.movie-editor-footer {
+  max-width: 1160px;
+  color: #f5f5f5;
+  margin-left: auto;
+  margin-right: auto;
+
+  .form-group {
+    padding-top: 0px;
+  }
+}
+
+.update-files-movie-modal {
+  .selected-movie {
+    margin-top: 15px;
+  }
+}
+
+//Series Details
+
+.movie-not-monitored {
+  .season-monitored, .episode-monitored {
+    color: #888888;
+    cursor: not-allowed;
+
+    i {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.movie-info {
+  .row {
+    margin-bottom : 3px;
+
+    .label {
+      display       : inline-block;
+      margin-bottom : 2px;
+      padding       : 4px 6px 3px 6px;
+      max-width     : 100%;
+      white-space   : normal;
+      word-wrap     : break-word;
+    }
+  }
+
+  .movie-info-links {
+    @media (max-width: @screen-sm-max) {
+      display    : inline-block;
+      margin-top : 5px;
+    }
+  }
+}
+
+.scene-info {
+  .key, .value {
+    display : inline-block;
+  }
+
+  .key {
+    width          : 80px;
+    margin-left    : 10px;
+    vertical-align : top;
+  }
+
+  .value {
+    margin-right : 10px;
+    max-width    : 170px;
+  }
+
+  ul {
+    padding-left    : 0px;
+    list-style-type : none;
+  }
+}
--- a/src/UI/index.html
+++ b/src/UI/index.html
@ -22,6 +22,7 @@
    <link href="/Content/theme.css" rel='stylesheet' type='text/css'/>
    <link href="/Content/cells.css" rel='stylesheet' type='text/css'>
    <link href="/Content/series.css" rel='stylesheet' type='text/css'/>
+        <link href="/Content/movies.css" rel='stylesheet' type='text/css'/>
    <link href="/Content/activity.css" rel='stylesheet' type='text/css'/>
    <link href="/Content/logs.css" rel='stylesheet' type='text/css'/>
    <link href="/Content/settings.css" rel='stylesheet' type='text/css'/>