diff --git a/couchpotato/core/_base/_core.py b/couchpotato/core/_base/_core.py
index eeaf96d..169cb30 100644
--- a/couchpotato/core/_base/_core.py
+++ b/couchpotato/core/_base/_core.py
@@ -272,6 +272,13 @@ config = [{
'description': 'Launch the browser when I start.',
'wizard': True,
},
+ {
+ 'name': 'dark_theme',
+ 'default': False,
+ 'type': 'bool',
+ 'description': 'For people with sensitive skin',
+ 'wizard': True,
+ },
],
},
{
diff --git a/couchpotato/core/_base/updater/static/updater.scss b/couchpotato/core/_base/updater/static/updater.scss
index 289aefa..b83c1bb 100644
--- a/couchpotato/core/_base/updater/static/updater.scss
+++ b/couchpotato/core/_base/updater/static/updater.scss
@@ -1,7 +1,7 @@
@import "_mixins";
.update.message {
- background: $background_color;
+ @include theme(background, background);
padding: $padding;
text-align: center;
font-size: 1.25em;
@@ -11,7 +11,7 @@
}
a {
- color: $primary_color;
+ @include theme(color, primary);
padding: $padding/4;
}
}
diff --git a/couchpotato/core/media/_base/search/static/search.scss b/couchpotato/core/media/_base/search/static/search.scss
index d14067f..b4696f4 100644
--- a/couchpotato/core/media/_base/search/static/search.scss
+++ b/couchpotato/core/media/_base/search/static/search.scss
@@ -26,11 +26,15 @@
position: absolute;
left: 44px;
bottom: 0;
- background: $primary_color;
+ @include theme(background, primary);
border-radius: $border_radius 0 0 $border_radius;
display: none;
box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
+ @include theme-dark {
+ box-shadow: 0 5px 15px 2px rgba(0,0,0,.4);
+ }
+
&:before {
transform: rotate(45deg);
content: '';
@@ -38,7 +42,7 @@
position: absolute;
height: 10px;
width: 10px;
- background: $primary_color;
+ @include theme(background, primary);
left: -6px;
bottom: 16px;
z-index: 1;
@@ -46,7 +50,7 @@
}
.input {
- background: $background_color;
+ @include theme(background, background);
border-radius: $border_radius 0 0 $border_radius;
position: relative;
left: 4px;
@@ -68,18 +72,19 @@
}
&:focus {
- background: rgba($theme_off, .2);
+ background: rgba(255,255,255, .2);
+
+ @include theme-dark {
+ background: rgba(0,0,0, .2);
+ }
&::-webkit-input-placeholder {
- color: $text_color;
opacity: .7;
}
&::-moz-placeholder {
- color: $text_color;
opacity: .7;
}
&:-ms-input-placeholder {
- color: $text_color;
opacity: .7;
}
}
@@ -93,7 +98,11 @@
}
.input input {
- background: rgba($theme_off, .4);
+ background: rgba(255,255,255,.3);
+
+ @include theme-dark {
+ background: rgba(0,0,0,.3);
+ }
}
}
@@ -126,7 +135,7 @@
position: relative;
left: 4px;
display: none;
- background: $background_color;
+ @include theme(background, background);
border-radius: $border_radius 0 0 0;
overflow: hidden;
@@ -149,9 +158,13 @@
top: 0;
left: 30px;
right: 0;
- background: rgba(0,0,0,.3);
display: flex;
align-items: center;
+ background: get-theme(off);
+
+ @include theme-dark {
+ background: get-theme-dark(off);
+ }
@include media-phablet {
left: 0;
@@ -213,7 +226,7 @@
.button {
display: block;
- background: $primary_color;
+ @include theme(background, primary);
text-align: center;
margin: 0;
}
@@ -248,7 +261,11 @@
transition: all .4s cubic-bezier(0.9,0,0.1,1);
will-change: transform;
transform: translateX(0) rotateZ(360deg);
- background: $background_color;
+ @include theme(background, background);
+
+ @include theme-dark {
+ border-color: rgba(255,255,255, 0.08);
+ }
@include media-phablet {
left: 0;
@@ -299,7 +316,7 @@
top: 15px;
left: 0;
font-size: 11px;
- color: $primary_color;
+ @include theme(color, primary);
}
&.in_library_wanted {
@@ -354,7 +371,7 @@
.icon-search {
display: block;
- color: #000;
+ @include theme(color, text);
right: $padding;
top: $padding;
width: $input_height;
@@ -412,6 +429,7 @@
font-size: 2em;
font-weight: 400;
padding-right: $input_height;
+ @include theme(background, background);
@include media-phablet {
padding-right: $input_height_mobile;
@@ -426,9 +444,13 @@
top: $input_height;
left: 0;
right: 0;
- border: 1px solid #b7b7b7;
+ border: 1px solid get-theme(off);
border-top: 0;
+ @include theme-dark {
+ border-color: get-theme-dark(off);
+ }
+
@include media-phablet {
top: $input_height_mobile;
min-height: $input_height_mobile;
@@ -501,5 +523,5 @@
}
.big_search {
- background: $theme_off;
+ @include theme(background, off);
}
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index 4b0a030..3f445e7 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/couchpotato/core/media/movie/_base/static/movie.scss
@@ -90,16 +90,27 @@ $mass_edit_height: 44px;
span {
display: inline-block;
- background: rgba(0,0,0,.25);
+ background: get-theme(off);
border: 1px solid transparent;
- color: #FFF;
+ color: rgba(get-theme(text), .5);
border-radius: 1px;
padding: 1px 3px;
- &.failed { background: #993619; }
- &.available { color: #009902; border-color: #009902; background: #FFF }
- &.snatched { background: #568f99; color: #FFF }
+ @include theme-dark {
+ color: rgba(get-theme-dark(text), .5);
+ background: get-theme-dark(off);
+ }
+
+ &.failed { background: #993619; color: #FFF; }
+ &.available { color: #009902; border-color: #009902; background: get-theme(background);}
+ &.snatched { background: #548399; color: #FFF }
&.downloaded, &.done { background: #009902; color: #FFF }
+
+ @include theme-dark {
+ &.available { border-color: transparent; background: get-theme-dark(off);}
+ &.snatched { background: #548399; }
+ &.downloaded, &.done { background: #009902; color: #FFF; }
+ }
}
}
@@ -130,7 +141,7 @@ $mass_edit_height: 44px;
}
a {
- color: $primary_color;
+ @include theme(color, primary);
}
}
@@ -139,7 +150,7 @@ $mass_edit_height: 44px;
text-align: center;
a {
- color: $primary_color;
+ @include theme(color, primary);
}
}
@@ -159,13 +170,14 @@ $mass_edit_height: 44px;
right: $padding;
width: auto;
line-height: $header_height;
+ opacity: .7;
@include media-tablet {
display: none;
}
a {
- color: $primary_color;
+ @include theme(color, primary);
display: inline;
&:hover {
@@ -175,14 +187,14 @@ $mass_edit_height: 44px;
}
> .loading {
- background: #FFF;
+ @include theme(background, background);
.message {
- color: #000;
+ @include theme(color, text);
}
.spinner {
- background-color: #000;
+ @include theme(background-color, background);
}
}
@@ -226,7 +238,9 @@ $mass_edit_height: 44px;
.movie {
display: block;
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
+
position: relative;
cursor: pointer;
@@ -235,7 +249,11 @@ $mass_edit_height: 44px;
}
&:hover {
- background: rgba(0,0,0,.1);
+ background: get-theme(off);
+
+ @include theme-dark {
+ background: get-theme-dark(off);
+ }
}
input[type=checkbox] {
@@ -330,18 +348,19 @@ $mass_edit_height: 44px;
a {
height: 100%;
display: block;
- background: $background_color;
+ @include theme(background, background);
+ @include theme(color, text);
padding: $padding / 2;
width: auto;
float: right;
- color: $text_color;
+ @include theme(text, text);
&:before {
display: none;
}
&:hover {
- color: $primary_color;
+ @include theme(color, primary);
}
.icon {
@@ -434,7 +453,8 @@ $mass_edit_height: 44px;
.poster {
position: absolute;
- background: $theme_off center no-repeat;
+ background: center no-repeat;
+ @include theme(background-color, off);
background-size: cover;
overflow: hidden;
height: 100%;
@@ -443,7 +463,7 @@ $mass_edit_height: 44px;
.info {
clear: both;
- font-size: .85em;
+ font-size: .9em;
.title {
display: flex;
@@ -472,6 +492,7 @@ $mass_edit_height: 44px;
.quality {
white-space: nowrap;
overflow: hidden;
+ font-size: .9em;
span {
font-size: .8em;
@@ -481,7 +502,11 @@ $mass_edit_height: 44px;
}
.actions {
- background-image: linear-gradient(25deg, rgba($primary_color,0) 0%, rgba($primary_color,1) 80%);
+ background-image: linear-gradient(25deg, rgba(get-theme(primary),0) 0%, rgba(get-theme(primary),1) 80%);
+ @include theme-dark {
+ background-image: linear-gradient(25deg, rgba(get-theme-dark(primary),0) 0%, rgba(get-theme-dark(primary),1) 80%);
+ }
+
will-change: opacity, visibility;
transition: all 400ms;
transition-property: opacity, visibility;
@@ -511,12 +536,13 @@ $mass_edit_height: 44px;
display: block;
width: auto;
padding: $padding / 3;
- color: #FFF;
+ @include theme(color, background);
border-radius: $border_radius - 1px;
+ font-weight: 400;
&:hover {
- background: #FFF;
- color: $primary_color;
+ @include theme(background, background);
+ @include theme(color, primary);
}
}
}
@@ -546,7 +572,6 @@ $mass_edit_height: 44px;
}
.page.movie_details {
-
pointer-events: none;
$gab-width: $header_width/3;
@@ -575,6 +600,7 @@ $mass_edit_height: 44px;
@include media-phablet {
left: 0;
border-radius: 0;
+ transition: none;
}
.close {
@@ -607,7 +633,7 @@ $mass_edit_height: 44px;
bottom: 0;
right: 0;
left: $header_width + $gab-width;
- background: $background_color;
+ @include theme(background, background);
border-radius: $border_radius 0 0 $border_radius;
overflow-y: auto;
will-change: transform;
@@ -621,7 +647,7 @@ $mass_edit_height: 44px;
> .head {
display: flex;
flex-flow: row wrap;
- padding: 0 $padding;
+ padding: 0 $padding 0 $padding/2;
position: relative;
z-index: 2;
will-change: transform, opacity;
@@ -636,7 +662,6 @@ $mass_edit_height: 44px;
flex: 1 auto;
margin: 0;
font-size: 24px;
- color: rgba(0,0,0,.5);
font-weight: 300;
max-width: 100%;
@@ -672,6 +697,11 @@ $mass_edit_height: 44px;
> a {
line-height: $header_height;
+ @include theme(color, primary);
+
+ &:hover {
+ @include theme(color, text);
+ }
@include media-phablet {
line-height: $header_width_mobile;
@@ -725,7 +755,7 @@ $mass_edit_height: 44px;
}
&:hover, &.icon-ok {
- color: $primary_color;
+ @include theme(color, primary);
}
}
}
@@ -768,7 +798,7 @@ $mass_edit_height: 44px;
> a {
display: inline-block;
padding: 0 10px;
- color: $primary_color;
+ @include theme(color, primary);
line-height: $header_height;
@include media-phablet {
@@ -776,7 +806,7 @@ $mass_edit_height: 44px;
}
&:hover {
- color: #000;
+ @include theme(color, text);
}
}
@@ -789,6 +819,10 @@ $mass_edit_height: 44px;
will-change: transform, opacity;
transform: rotateZ(360deg);
+ @include theme-dark {
+ border-color: rgba(255,255,255,.1);
+ }
+
@include media-phablet {
padding: $padding/2;
}
@@ -832,7 +866,7 @@ $mass_edit_height: 44px;
}
.section_add {
- background: $theme_off;
+ @include theme(background, off);
.options > div {
display: flex;
@@ -867,7 +901,7 @@ $mass_edit_height: 44px;
margin: 0;
&:hover {
- background: $primary_color;
+ @include theme(background, primary);
}
}
@@ -907,19 +941,12 @@ $mass_edit_height: 44px;
a {
display: inline;
+ @include theme(color, primary);
&:hover {
text-decoration: underline;
}
}
-
- .orange {
- color: #ffa500;
- }
-
- .green {
- color: #008000;
- }
}
.item {
@@ -928,7 +955,8 @@ $mass_edit_height: 44px;
}
&:not(.head):hover {
- background: $theme_off;
+ @include theme(background, off);
+ @include theme(text, text);
}
span {
@@ -1004,10 +1032,10 @@ $mass_edit_height: 44px;
vertical-align: top;
padding: $padding/3;
min-width: 26px;
- color: $text_color;
+ @include theme(color, text);
&:hover {
- color: $primary_color;
+ @include theme(color, primary);
}
@include media-phablet {
@@ -1141,7 +1169,7 @@ $mass_edit_height: 44px;
}
&:hover {
- color: $primary_color;
+ @include theme(color, primary);
.icon-play {
opacity: 1;
@@ -1173,7 +1201,7 @@ $mass_edit_height: 44px;
.mass_edit_form {
display: flex;
- background: $background_color;
+ @include theme(background, background);
position: fixed;
top: $header_height;
right: 0;
@@ -1213,7 +1241,6 @@ $mass_edit_height: 44px;
.button {
padding: 0 $padding/2;
line-height: $header_height;
- color: rgba(0, 0, 0, 0.5);
}
.counter, .more_menu, .actions {
@@ -1231,7 +1258,7 @@ $mass_edit_height: 44px;
text-align: center;
&:hover {
- color: $primary_color;
+ @include theme(color, primary);
}
}
}
@@ -1289,9 +1316,10 @@ $mass_edit_height: 44px;
input {
width: 100%;
padding: $padding/2 $padding/2 $padding/2 $padding*1.5;
- background: $background_color;
+ @include theme(background, background);
border: none;
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
@include media-phablet {
font-size: 1.2em;
@@ -1308,20 +1336,20 @@ $mass_edit_height: 44px;
height: 30px;
line-height: 30px;
text-align: center;
- color: rgba(0,0,0,.2);
+ opacity: .2;
cursor: default;
border: 0;
&.active {
- background: $theme_off;
+ @include theme(background, off);
}
&.available {
- color: rgba(0,0,0,1);
+ opacity: 1;
cursor: pointer;
&:hover {
- background: $theme_off;
+ @include theme(background, off);
}
}
}
@@ -1330,9 +1358,9 @@ $mass_edit_height: 44px;
.more_menu {
- &.show .button {
- color: rgba(0, 0, 0, 1);
- }
+ //&.show .button {
+ // color: rgba(0, 0, 0, 1);
+ //}
.wrapper {
top: $header_height - 10px;
diff --git a/couchpotato/core/media/movie/charts/static/charts.scss b/couchpotato/core/media/movie/charts/static/charts.scss
deleted file mode 100644
index 0084ed9..0000000
--- a/couchpotato/core/media/movie/charts/static/charts.scss
+++ /dev/null
@@ -1,274 +0,0 @@
-.charts {
- clear: both;
- margin-bottom: 30px;
-}
-
- .charts > h2 {
- height: 40px;
- }
-
- .charts .chart {
- display: inline-block;
- width: 50%;
- vertical-align: top;
- max-height: 510px;
- scrollbar-base-color: #4e5969;
- }
-
- .charts .chart .media_result.hidden {
- display: none;
- }
-
-.charts .refresh {
- clear:both;
- position: relative;
-}
-
- .charts .refresh .refreshing {
- display: block;
- padding: 20px;
- font-size: 20px;
- text-align:center;
- }
-
- .charts .refresh a {
- text-align: center;
- padding: 0;
- display: none;
- width: 30px;
- height: 30px;
- position: absolute;
- right: 10px;
- top: -40px;
- opacity: .7;
- }
-
- .charts .refresh a:hover {
- opacity: 1;
- }
-
- .charts p.no_charts_enabled {
- padding: 0.7em 1em;
- display: none;
- }
-
- .charts .chart h3 a {
- color: #fff;
- }
-
-
-.charts .chart .media_result {
- display: inline-block;
- width: 100%;
- height: 150px;
-}
-
-@media all and (max-width: 960px) {
- .charts .chart {
- width: 50%;
- }
-}
-
-@media all and (max-width: 600px) {
- .charts .chart {
- width: 100%;
- }
-}
-
-.charts .chart .media_result .data {
- left: 150px;
- background: #4e5969;
- border: none;
-}
-
- .charts .chart .media_result .data .info {
- top: 10px;
- left: 15px;
- right: 15px;
- bottom: 10px;
- overflow: hidden;
- }
-
- .charts .chart .media_result .data .info h2 {
- white-space: normal;
- max-height: 120px;
- font-size: 18px;
- line-height: 18px;
- }
-
- .charts .chart .media_result .data .info .rating,
- .charts .chart .media_result .data .info .genres,
- .charts .chart .media_result .data .info .year {
- position: static;
- display: block;
- padding: 0;
- opacity: .6;
- }
-
- .charts .chart .media_result .data .info .year {
- margin: 10px 0 0;
- }
-
- .charts .chart .media_result .data .info .rating {
- font-size: 20px;
- float: right;
- margin-top: -20px;
- }
- .charts .chart .media_result .data .info .rating:before {
- content: "\e031";
- font-family: 'Elusive-Icons';
- font-size: 14px;
- margin: 0 5px 0 0;
- vertical-align: bottom;
- }
-
- .charts .chart .media_result .data .info .genres {
- font-size: 11px;
- font-style: italic;
- text-align: right;
- }
-
- .charts .chart .media_result .data .info .plot {
- display: block;
- font-size: 11px;
- overflow: hidden;
- text-align: justify;
- height: 100%;
- z-index: 2;
- top: 64px;
- position: absolute;
- background: #4e5969;
- cursor: pointer;
- transition: all .4s ease-in-out;
- padding: 0 3px 10px 0;
- }
- .charts .chart .media_result .data:before {
- content: '';
- display: block;
- height: 10px;
- right: 0;
- left: 0;
- bottom: 10px;
- position: absolute;
- background: linear-gradient(
- 0deg,
- rgba(78, 89, 105, 1) 0%,
- rgba(78, 89, 105, 0) 100%
- );
- z-index: 3;
- pointer-events: none;
- }
-
- .charts .chart .media_result .data .info .plot.full {
- top: 0;
- overflow: auto;
- }
-
-.charts .chart .media_result .data {
- cursor: default;
-}
-
-.charts .chart .media_result .options {
- left: 150px;
-}
- .charts .chart .media_result .options select[name=title] { width: 100%; }
- .charts .chart .media_result .options select[name=profile] { width: 100%; }
- .charts .chart .media_result .options select[name=category] { width: 100%; }
-
- .charts .chart .media_result .button {
- position: absolute;
- margin: 2px 0 0 0;
- right: 15px;
- bottom: 15px;
- }
-
-
-.charts .chart .media_result .thumbnail {
- width: 100px;
- position: absolute;
- left: 50px;
-}
-
-.charts .chart .media_result .chart_number {
- color: white;
- position: absolute;
- top: 0;
- padding: 10px;
- font: bold 2em/1em Helvetica, Sans-Serif;
- width: 50px;
- height: 100%;
- text-align: center;
- border-left: 8px solid transparent;
-}
-
- .charts .chart .media_result.chart_in_wanted .chart_number {
- border-color: rgba(0, 255, 40, 0.3);
- }
-
- .charts .chart .media_result.chart_in_library .chart_number {
- border-color: rgba(0, 202, 32, 0.3);
- }
-
-
-.charts .chart .media_result .actions {
- position: absolute;
- top: 10px;
- right: 10px;
- display: none;
- width: 90px;
-}
- .charts .chart .media_result:hover .actions {
- display: block;
- }
- .charts .chart .media_result:hover h2 .title {
- opacity: 0;
- }
- .charts .chart .media_result .data.open .actions {
- display: none;
- }
-
- .charts .chart .media_result .actions a {
- margin-left: 10px;
- vertical-align: middle;
- }
-
-
-.toggle_menu {
- height: 50px;
-}
-
-.toggle_menu a {
- display: block;
- width: 50%;
- float: left;
- color: rgba(255,255,255,.6);
- border-bottom: 1px solid rgba(255, 255, 255, 0.0666667);
-}
-
-.toggle_menu a:hover {
- border-color: #047792;
- border-width: 4px;
- color: #fff;
-}
-
-.toggle_menu a.active {
- border-bottom: 4px solid #04bce6;
- color: #fff;
-}
-
-.toggle_menu a:last-child {
- float: right;
-}
-
-.toggle_menu h2 {
- height: 40px;
-}
-
-@media all and (max-width: 480px) {
- .toggle_menu h2 {
- font-size: 16px;
- text-align: center;
- height: 30px;
- }
-}
-
diff --git a/couchpotato/core/plugins/category/static/category.scss b/couchpotato/core/plugins/category/static/category.scss
index decf842..f1568f0 100644
--- a/couchpotato/core/plugins/category/static/category.scss
+++ b/couchpotato/core/plugins/category/static/category.scss
@@ -50,7 +50,8 @@
li {
cursor: grab;
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
padding: 5px;
list-style: none;
diff --git a/couchpotato/core/plugins/log/static/log.js b/couchpotato/core/plugins/log/static/log.js
index e52bc56..39e5f6e 100644
--- a/couchpotato/core/plugins/log/static/log.js
+++ b/couchpotato/core/plugins/log/static/log.js
@@ -40,7 +40,7 @@ Page.Log = new Class({
'events': {
'mouseup:relay(.time)': function(e){
requestTimeout(function(){
- self.showSelectionButton(2);
+ self.showSelectionButton(e);
}, 100);
}
}
diff --git a/couchpotato/core/plugins/log/static/log.scss b/couchpotato/core/plugins/log/static/log.scss
index fd5edac..e366780 100644
--- a/couchpotato/core/plugins/log/static/log.scss
+++ b/couchpotato/core/plugins/log/static/log.scss
@@ -27,7 +27,7 @@
}
&:hover:not(.active):not(.filter) {
- background: rgba(255, 255, 255, 0.1);
+ background: rgba(255,255,255,.1);
}
&.active {
@@ -70,7 +70,7 @@
.time {
clear: both;
font-size: .75em;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
+ border-top: 1px solid rgba(255,255,255,.1);
overflow: hidden;
padding: 0 3px;
font-family: Lucida Console, Monaco, Nimbus Mono L, monospace, serif;
@@ -81,7 +81,7 @@
}
&.highlight {
- background: $theme_off;
+ @include theme(background, off);
}
span {
@@ -105,8 +105,8 @@
}
::selection {
- background-color: #000;
- color: #FFF;
+ @include theme(background-color, background);
+ @include theme(color, text);
}
}
@@ -150,8 +150,8 @@
.button {
margin: 10px 0;
padding: 10px;
- color: $background_color;
- background: $primary_color;
+ color: #FFF;
+ @include theme(background, primary);
}
.bug {
@@ -184,6 +184,6 @@
z-index: 10000;
position: absolute;
padding: 10px;
- background: $primary_color;
- color: #FFF;
+ @include theme(background, primary);
+ color: #FFF !important;
}
diff --git a/couchpotato/core/plugins/profile/static/profile.scss b/couchpotato/core/plugins/profile/static/profile.scss
index 702de78..a48f09a 100644
--- a/couchpotato/core/plugins/profile/static/profile.scss
+++ b/couchpotato/core/plugins/profile/static/profile.scss
@@ -5,7 +5,8 @@
display: block;
text-align: center;
font-size: 20px;
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
}
.profile {
@@ -94,7 +95,7 @@
.advanced {
display: none;
- color: $primary_color;
+ @include theme(color, primary);
.show_advanced & {
display: inline;
@@ -118,13 +119,14 @@
}
li {
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
padding: 5px;
display: flex;
align-items: center;
&:hover {
- background: $theme_off;
+ @include theme(background, off);
}
&:last-child { border: 0; }
diff --git a/couchpotato/static/scripts/combined.base.min.js b/couchpotato/static/scripts/combined.base.min.js
index 53cd100..54d19f8 100644
--- a/couchpotato/static/scripts/combined.base.min.js
+++ b/couchpotato/static/scripts/combined.base.min.js
@@ -266,6 +266,9 @@ var CouchPotato = new Class({
setting_links.each(function(a) {
self.block.more.addLink(a);
});
+ self.addEvent("setting.save.core.dark_theme", function(enabled) {
+ document.html[enabled ? "addClass" : "removeClass"]("dark");
+ });
},
createPages: function() {
var self = this;
@@ -1377,12 +1380,13 @@ var OptionBase = new Class({
}
},
save: function() {
- var self = this;
+ var self = this, value = self.getValue();
+ App.fireEvent("setting.save." + self.section + "." + self.name, value);
Api.request("settings.save", {
data: {
section: self.section,
name: self.name,
- value: self.getValue()
+ value: value
},
useSpinner: true,
spinnerOptions: {
diff --git a/couchpotato/static/scripts/combined.plugins.min.js b/couchpotato/static/scripts/combined.plugins.min.js
index 48b18ce..0d9191a 100644
--- a/couchpotato/static/scripts/combined.plugins.min.js
+++ b/couchpotato/static/scripts/combined.plugins.min.js
@@ -2929,7 +2929,7 @@ Page.Log = new Class({
events: {
"mouseup:relay(.time)": function(e) {
requestTimeout(function() {
- self.showSelectionButton(2);
+ self.showSelectionButton(e);
}, 100);
}
}
diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js
index 12175e4..4c0fdae 100644
--- a/couchpotato/static/scripts/couchpotato.js
+++ b/couchpotato/static/scripts/couchpotato.js
@@ -167,6 +167,11 @@
self.block.more.addLink(a);
});
+ // Set theme
+ self.addEvent('setting.save.core.dark_theme', function(enabled){
+ document.html[enabled ? 'addClass' : 'removeClass']('dark');
+ });
+
},
createPages: function(){
diff --git a/couchpotato/static/scripts/page/settings.js b/couchpotato/static/scripts/page/settings.js
index c255279..c4a9fe7 100644
--- a/couchpotato/static/scripts/page/settings.js
+++ b/couchpotato/static/scripts/page/settings.js
@@ -417,13 +417,16 @@ var OptionBase = new Class({
},
save: function(){
- var self = this;
+ var self = this,
+ value = self.getValue();
+
+ App.fireEvent('setting.save.'+self.section+'.'+self.name, value)
Api.request('settings.save', {
'data': {
'section': self.section,
'name': self.name,
- 'value': self.getValue()
+ 'value': value
},
'useSpinner': true,
'spinnerOptions': {
diff --git a/couchpotato/static/style/_mixins.scss b/couchpotato/static/style/_mixins.scss
index 26d03cb..c178526 100644
--- a/couchpotato/static/style/_mixins.scss
+++ b/couchpotato/static/style/_mixins.scss
@@ -1,9 +1,13 @@
-$primary_color: #ac0000;
-$secondary_color: #00d2c2;
-$background_color: #FFF;
$menu_color: #111;
-$theme_off: #eaeaea;
-$text_color: #000;
+
+$vars: 'primary', 'background', 'off', 'text';
+$theme_light: #ac0000, #FFF, darken(#FFF, 8), #000;
+$theme_dark: #39c29f, #2d2d2d, lighten(#2d2d2d, 5), #FFF;
+
+//$primary_color: nth($theme_light, 1);
+//$theme_off: nth($theme_light, 2);
+//$background_color:nth($theme_light, 3);
+//$text_color: nth($theme_light, 4);
$font_size: 14px;
$header_height: 80px;
@@ -12,6 +16,28 @@ $header_width_mobile: 44px;
$padding: 20px;
$border_radius: 3px;
+@mixin theme($property, $value) {
+ #{$property}: nth($theme_light, index($vars, $value));
+
+ .dark & {
+ #{$property}: nth($theme_dark, index($vars, $value));
+ }
+}
+
+@mixin theme-dark {
+ .dark & {
+ @content;
+ }
+}
+
+@function get-theme($property){
+ @return nth($theme_light, index($vars, $property));
+}
+
+@function get-theme-dark($property){
+ @return nth($theme_dark, index($vars, $property));
+}
+
$cubic: cubic-bezier(0.9,0,0.1,1);
$mq-phone: 320px !default;
diff --git a/couchpotato/static/style/combined.min.css b/couchpotato/static/style/combined.min.css
index d3da08c..1c8e060 100644
--- a/couchpotato/static/style/combined.min.css
+++ b/couchpotato/static/style/combined.min.css
@@ -1,30 +1,39 @@
.page.movie_details,.thumb_list .movie.hover_start .actions{pointer-events:none}
.movies>.description a:hover,.page.movie_details .releases .buttons a:hover{text-decoration:underline}
.update.message{background:#FFF;padding:20px;text-align:center;font-size:1.25em}
+.dark .update.message{background:#2d2d2d}
@media (max-width:768px){.update.message{font-size:1em}
}
.update.message a{color:#ac0000;padding:5px}
+.dark .update.message a{color:#39c29f}
.search_form{display:inline-block;z-index:11;width:44px;position:relative}
.search_form *{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
.search_form .icon-search{position:absolute;z-index:2;top:50%;left:0;height:100%;text-align:center;color:#FFF;font-size:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.search_form .wrapper{position:absolute;left:44px;bottom:0;background:#ac0000;border-radius:3px 0 0 3px;display:none;box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
+.dark .search_form .wrapper{background:#39c29f;box-shadow:0 5px 15px 2px rgba(0,0,0,.4)}
.search_form .wrapper:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';display:block;position:absolute;height:10px;width:10px;background:#ac0000;left:-6px;bottom:16px;z-index:1}
+.dark .search_form .wrapper:before{background:#39c29f}
.search_form .input{background:#FFF;border-radius:3px 0 0 3px;position:relative;left:4px;height:44px;overflow:hidden;width:100%}
+.dark .search_form .input{background:#2d2d2d}
.search_form .input input{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1}
.search_form .input input::-ms-clear{width:0;height:0}
-.search_form .input input:focus{background:rgba(234,234,234,.2)}
-.search_form .input input:focus::-webkit-input-placeholder{color:#000;opacity:.7}
-.search_form .input input:focus::-moz-placeholder{color:#000;opacity:.7}
-.search_form .input input:focus:-ms-input-placeholder{color:#000;opacity:.7}
+.search_form .input input:focus{background:rgba(255,255,255,.2)}
+.dark .search_form .input input:focus{background:rgba(0,0,0,.2)}
+.search_form .input input:focus::-webkit-input-placeholder{opacity:.7}
+.search_form .input input:focus::-moz-placeholder{opacity:.7}
+.search_form .input input:focus:-ms-input-placeholder{opacity:.7}
.page.home .search_form.filled .icon-search:before,.search_form.filled.focused .icon-search:before{content:'\e80e'}
-.search_form.filled .input input{background:rgba(234,234,234,.4)}
+.search_form.filled .input input{background:rgba(255,255,255,.3)}
+.dark .search_form.filled .input input{background:rgba(0,0,0,.3)}
.page.home .search_form,.search_form.focused,.search_form.shown{border-color:#04bce6}
.page.home .search_form .wrapper,.search_form.focused .wrapper,.search_form.shown .wrapper{display:block;width:380px;-webkit-transform-origin:0 90%;transform-origin:0 90%}
.page.home .search_form .input input,.search_form.focused .input input,.search_form.shown .input input{opacity:1}
.search_form .results_container{min-height:50px;text-align:left;position:relative;left:4px;display:none;background:#FFF;border-radius:3px 0 0;overflow:hidden}
+.dark .search_form .results_container{background:#2d2d2d}
.search_form .results_container .results{max-height:280px;overflow-x:hidden}
.search_form .results_container .results .media_result{overflow:hidden;height:50px;position:relative}
-.search_form .results_container .results .media_result .options{position:absolute;height:100%;top:0;left:30px;right:0;background:rgba(0,0,0,.3);display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
+.search_form .results_container .results .media_result .options{position:absolute;height:100%;top:0;left:30px;right:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background:#ebebeb}
+.dark .search_form .results_container .results .media_result .options{background:#3a3a3a}
.search_form .results_container .results .media_result .options>.in_library_wanted{margin-top:-7px}
.search_form .results_container .results .media_result .options>div{border:0;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
@media (max-width:480px){.page.home .search_form .wrapper,.search_form.focused .wrapper,.search_form.shown .wrapper{width:260px}
@@ -44,9 +53,11 @@
.search_form .results_container .results .media_result .options .add{width:42px;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto}
.search_form .results_container .results .media_result .options .add a{color:#FFF}
.search_form .results_container .results .media_result .options .button{display:block;background:#ac0000;text-align:center;margin:0}
+.dark .search_form .results_container .results .media_result .options .button{background:#39c29f}
.search_form .results_container .results .media_result .options .message{font-size:20px;color:#fff}
.search_form .results_container .results .media_result .thumbnail{width:30px;min-height:100%;display:block;margin:0;vertical-align:top}
.search_form .results_container .results .media_result .data{position:absolute;height:100%;top:0;left:30px;right:0;cursor:pointer;border-top:1px solid rgba(255,255,255,.08);transition:all .4s cubic-bezier(.9,0,.1,1);will-change:transform;-webkit-transform:translateX(0) rotateZ(360deg);transform:translateX(0) rotateZ(360deg);background:#FFF}
+.dark .search_form .results_container .results .media_result .data{background:#2d2d2d;border-color:rgba(255,255,255,.08)}
@media (max-width:480px){.search_form .results_container .results .media_result .thumbnail{display:none}
.search_form .results_container .results .media_result .data{left:0}
}
@@ -57,6 +68,7 @@
.search_form .results_container .results .media_result .data .info h2 .title{display:inline-block;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto}
.search_form .results_container .results .media_result .data .info h2 .year{opacity:.4;padding:0 5px;width:auto}
.search_form .results_container .results .media_result .data .info h2 .in_library,.search_form .results_container .results .media_result .data .info h2 .in_wanted{position:absolute;top:15px;left:0;font-size:11px;color:#ac0000}
+.dark .search_form .results_container .results .media_result .data .info h2 .in_library,.dark .search_form .results_container .results .media_result .data .info h2 .in_wanted{color:#39c29f}
.search_form .results_container .results .media_result .data .info h2.in_library_wanted .title{margin-top:-7px}
.search_form .results_container .results .media_result:hover .info h2 .year{display:inline-block}
.search_form .results_container .results .media_result:last-child .data{border-bottom:0}
@@ -67,15 +79,17 @@
}
.page.home .search_form .icon-search{display:block;color:#000;right:20px;top:20px;width:66px;height:66px;line-height:66px;left:auto;-webkit-transform:none;transform:none;font-size:2em;opacity:.5}
.page.home .search_form .wrapper:before,.page.movies .scroll_content{display:none}
+.dark .page.home .search_form .icon-search{color:#FFF}
@media (max-width:480px){.page.home .search_form .icon-search{width:44px;height:44px;line-height:44px;right:10px;top:10px;font-size:1.5em}
}
.page.home .search_form .wrapper{border-radius:0;box-shadow:none;bottom:auto;top:20px;left:20px;right:20px;position:absolute;width:auto}
@media (max-width:480px){.page.home .search_form .wrapper{right:10px;top:10px;left:10px}
}
.page.home .search_form .wrapper .input{border-radius:0;left:0;position:absolute;top:0;height:66px}
-.page.home .search_form .wrapper .input input{box-shadow:0;font-size:2em;font-weight:400;padding-right:66px}
-.directory_list,.messages .message,.more_menu .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
-.page.home .search_form .wrapper .results_container{min-height:66px;position:absolute;top:66px;left:0;right:0;border:1px solid #b7b7b7;border-top:0}
+.page.home .search_form .wrapper .input input{box-shadow:0;font-size:2em;font-weight:400;padding-right:66px;background:#FFF}
+.dark .page.home .search_form .wrapper .input input{background:#2d2d2d}
+.page.home .search_form .wrapper .results_container{min-height:66px;position:absolute;top:66px;left:0;right:0;border:1px solid #ebebeb;border-top:0}
+.dark .page.home .search_form .wrapper .results_container{border-color:#3a3a3a}
@media (max-width:480px){.page.home .search_form .wrapper .input{height:44px}
.page.home .search_form .wrapper .input input{padding-right:44px;font-size:1em}
.page.home .search_form .wrapper .results_container{top:44px;min-height:44px}
@@ -95,7 +109,8 @@
@media (max-width:480px){.page.home .search_form .wrapper .results_container .results .media_result{height:44px}
.page.home .search_form .wrapper .results_container .results .media_result .options .title{width:140px;margin-right:2px}
}
-.big_search{background:#eaeaea}
+.big_search{background:#ebebeb}
+.dark .big_search{background:#3a3a3a}
.page.movies{bottom:auto;z-index:21;height:80px}
.page.movies_manage,.page.movies_wanted{top:80px;padding:0;will-change:top;transition:top 300ms cubic-bezier(.9,0,.1,1)}
@media (max-width:480px){.page.movies{height:44px}
@@ -113,37 +128,50 @@
.with_navigation .movie:hover input[type=checkbox]{opacity:.5}
.with_navigation .movie.checked input[type=checkbox]{opacity:1}
.movie .quality{font-weight:400}
-.movie .quality span{display:inline-block;background:rgba(0,0,0,.25);border:1px solid transparent;color:#FFF;border-radius:1px;padding:1px 3px}
-.movie .quality span.failed{background:#993619}
+.movie .quality span{display:inline-block;background:#ebebeb;border:1px solid transparent;color:rgba(0,0,0,.5);border-radius:1px;padding:1px 3px}
+.dark .movie .quality span{color:rgba(255,255,255,.5);background:#3a3a3a}
+.movie .quality span.failed{background:#993619;color:#FFF}
.movie .quality span.available{color:#009902;border-color:#009902;background:#FFF}
-.movie .quality span.snatched{background:#568f99;color:#FFF}
+.movie .quality span.snatched{background:#548399;color:#FFF}
.movie .quality span.done,.movie .quality span.downloaded{background:#009902;color:#FFF}
-.movies .message a,.movies .no_movies a{color:#ac0000}
+.dark .movie .quality span.available{border-color:transparent;background:#3a3a3a}
+.dark .movie .quality span.snatched{background:#548399}
+.dark .movie .quality span.done,.dark .movie .quality span.downloaded{background:#009902;color:#FFF}
.movie .rating .votes{opacity:.7;margin-left:4px}
.movie.status_suggested .quality{display:none}
.movies{position:relative}
.movies .no_movies{display:block;padding:20px}
@media (max-width:768px){.movies .no_movies{padding:10px}
}
+.movies .no_movies a{color:#ac0000}
+.dark .movies .no_movies a{color:#39c29f}
.movies .message{padding:20px 0;text-align:center}
+.movies .message a{color:#ac0000}
+.dark .movies .message a{color:#39c29f}
.movies.movies>h2{padding:0 20px;line-height:80px}
@media (max-width:480px){.movies.movies>h2{line-height:44px;padding:0 10px}
}
-.movies>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px}
+.movies>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px;opacity:.7}
@media (max-width:768px){.movies>.description{display:none}
}
.movies>.description a{color:#ac0000;display:inline}
+.dark .movies>.description a{color:#39c29f}
.movies>.loading{background:#FFF}
+.dark .movies>.loading{background:#2d2d2d}
.movies>.loading .message{color:#000}
-.movies>.loading .spinner{background-color:#000}
+.dark .movies>.loading .message{color:#FFF}
+.movies>.loading .spinner{background-color:#FFF}
+.dark .movies>.loading .spinner{background-color:#2d2d2d}
.movies .movie .actions{will-change:transform,opacity;-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
.movies .progress div{width:50%;padding:5px 10px;display:-webkit-flex;display:-ms-flexbox;display:flex}
.movies .progress div .folder{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px}
.movies .progress div .percentage{font-weight:700}
.list_list{font-weight:300}
-.list_list .movie{display:block;border-bottom:1px solid #eaeaea;position:relative;cursor:pointer}
+.list_list .movie{display:block;border-bottom:1px solid transparent;border-color:#ebebeb;position:relative;cursor:pointer}
+.dark .list_list .movie{border-color:#3a3a3a}
.list_list .movie:last-child{border-bottom:none}
-.list_list .movie:hover{background:rgba(0,0,0,.1)}
+.list_list .movie:hover{background:#ebebeb}
+.dark .list_list .movie:hover{background:#3a3a3a}
.list_list .movie input[type=checkbox]{left:20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.list_list .movie .poster{display:none}
.list_list .movie .info{padding:10px 20px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
@@ -161,9 +189,11 @@
.list_list .movie .info .rating .vote{display:inline-block;min-width:60px;text-align:right}
.list_list .movie .actions{position:absolute;right:10px;top:0;bottom:0;display:none;z-index:10}
.list_list .movie .actions .action{display:inline-block}
-.list_list .movie .actions a{height:100%;display:block;background:#FFF;padding:10px;width:auto;float:right;color:#000}
+.list_list .movie .actions a{height:100%;display:block;background:#FFF;color:#000;padding:10px;width:auto;float:right;text:#000}
.list_list .movie .actions a .icon,.list_list .movie .actions a:before{display:none}
+.dark .list_list .movie .actions a{background:#2d2d2d;color:#FFF;text:#FFF}
.list_list .movie .actions a:hover{color:#ac0000}
+.dark .list_list .movie .actions a:hover{color:#39c29f}
.list_list .movie:hover .actions{display:block}
@media (max-width:768px){.list_list .movie .info .quality span{margin:2px 2px 0 0}
.list_list .movie:hover .actions{display:none}
@@ -222,19 +252,23 @@
}
.thumb_list .movie input[type=checkbox]{top:10px;left:10px}
.thumb_list .movie .poster_container{border-radius:3px;position:relative;width:100%;padding-bottom:150%;overflow:hidden}
-.thumb_list .movie .poster{position:absolute;background:center no-repeat #eaeaea;background-size:cover;overflow:hidden;height:100%;width:100%}
-.thumb_list .movie .info{clear:both;font-size:.85em}
+.thumb_list .movie .poster{position:absolute;background:center no-repeat #ebebeb;background-size:cover;overflow:hidden;height:100%;width:100%}
+.dark .thumb_list .movie .poster{background-color:#3a3a3a}
+.thumb_list .movie .info{clear:both;font-size:.9em}
.thumb_list .movie .info .title{display:-webkit-flex;display:-ms-flexbox;display:flex;padding:3px 0}
.thumb_list .movie .info .title span{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb_list .movie .info .title .year{display:inline-block;margin-left:5px;opacity:.5}
.thumb_list .movie .info .eta{opacity:.5;float:right;margin-left:4px}
-.thumb_list .movie .info .quality{white-space:nowrap;overflow:hidden}
+.thumb_list .movie .info .quality{white-space:nowrap;overflow:hidden;font-size:.9em}
.thumb_list .movie .info .quality span{font-size:.8em;margin-right:2px}
.thumb_list .movie .actions{background-image:linear-gradient(25deg,rgba(172,0,0,0) 0,#ac0000 80%);will-change:opacity,visibility;transition:all 400ms;transition-property:opacity,visibility;opacity:0;visibility:hidden;position:absolute;top:0;right:0;bottom:0;left:0;text-align:right}
+.dark .thumb_list .movie .actions{background-image:linear-gradient(25deg,rgba(57,194,159,0) 0,#39c29f 80%)}
.thumb_list .movie .actions .action{position:relative;margin-right:10px;float:right;clear:both}
.thumb_list .movie .actions .action:first-child{margin-top:10px}
-.thumb_list .movie .actions .action a{transition:all 150ms cubic-bezier(.9,0,.1,1);will-change:color,background;transition-property:color,background;display:block;width:auto;padding:6.67px;color:#FFF;border-radius:2px}
+.thumb_list .movie .actions .action a{transition:all 150ms cubic-bezier(.9,0,.1,1);will-change:color,background;transition-property:color,background;display:block;width:auto;padding:6.67px;color:#FFF;border-radius:2px;font-weight:400}
+.dark .thumb_list .movie .actions .action a{color:#2d2d2d}
.thumb_list .movie .actions .action a:hover{background:#FFF;color:#ac0000}
+.dark .thumb_list .movie .actions .action a:hover{background:#2d2d2d;color:#39c29f}
.thumb_list .movie:hover .actions{opacity:1;visibility:visible}
.thumb_list .movie .mask{bottom:44px;border-radius:3px;will-change:opacity;transition:opacity 30ms}
@media (max-width:480px){.thumb_list .movie:hover .actions{display:none}
@@ -242,22 +276,26 @@
}
.page.movie_details .overlay{position:fixed;top:0;bottom:0;right:0;left:132px;background:rgba(0,0,0,.6);border-radius:3px 0 0 3px;opacity:0;will-change:opacity;-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg);transition:opacity 300ms ease 400ms;z-index:1}
.page.movie_details .overlay .ripple{background:#FFF}
+@media (max-width:480px){.page.movie_details .overlay{left:0;border-radius:0;transition:none}
+}
.page.movie_details .overlay .close{display:inline-block;text-align:center;font-size:60px;line-height:80px;color:#FFF;width:100%;height:100%;opacity:0;will-change:opacity;transition:opacity 300ms ease 200ms}
.page.movie_details .overlay .close:before{display:block;width:44px}
-@media (max-width:480px){.page.movie_details .overlay{left:0;border-radius:0}
-.page.movie_details .overlay .close{width:44px}
-}
.page.movie_details .scroll_content{position:fixed;z-index:2;top:0;bottom:0;right:0;left:176px;background:#FFF;border-radius:3px 0 0 3px;overflow-y:auto;will-change:transform;-webkit-transform:translateX(100%) rotateZ(360deg);transform:translateX(100%) rotateZ(360deg);transition:-webkit-transform 450ms cubic-bezier(.9,0,.1,1);transition:transform 450ms cubic-bezier(.9,0,.1,1)}
-.page.movie_details .scroll_content>.head{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:0 20px;position:relative;z-index:2;will-change:transform,opacity;-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
-.page.movie_details .scroll_content>.head h1{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin:0;font-size:24px;color:rgba(0,0,0,.5);font-weight:300;max-width:100%}
-@media (max-width:480px){.page.movie_details .scroll_content{left:44px}
+.dark .page.movie_details .scroll_content{background:#2d2d2d}
+.page.movie_details .scroll_content>.head{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:0 20px 0 10px;position:relative;z-index:2;will-change:transform,opacity;-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
+.page.movie_details .scroll_content>.head h1{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin:0;font-size:24px;font-weight:300;max-width:100%}
+@media (max-width:480px){.page.movie_details .overlay .close{width:44px}
+.page.movie_details .scroll_content{left:44px}
.page.movie_details .scroll_content>.head{padding:0;line-height:44px}
.page.movie_details .scroll_content>.head h1{min-width:100%;line-height:44px}
.page.movie_details .scroll_content>.head h1 .more_menu{width:100%}
}
.page.movie_details .scroll_content>.head h1 .more_menu .icon-dropdown{padding-right:20px}
.page.movie_details .scroll_content>.head .more_menu{display:inline-block;vertical-align:top;max-width:100%;margin-bottom:0}
-.page.movie_details .scroll_content>.head .more_menu>a{line-height:80px}
+.page.movie_details .scroll_content>.head .more_menu>a{line-height:80px;color:#ac0000}
+.dark .page.movie_details .scroll_content>.head .more_menu>a{color:#39c29f}
+.page.movie_details .scroll_content>.head .more_menu>a:hover{color:#000}
+.dark .page.movie_details .scroll_content>.head .more_menu>a:hover{color:#FFF}
@media (max-width:480px){.page.movie_details .scroll_content>.head h1 .more_menu .icon-dropdown:before{right:10px}
.page.movie_details .scroll_content>.head .more_menu>a{line-height:44px}
}
@@ -272,13 +310,17 @@
.page.movie_details .scroll_content>.head .more_menu .wrapper a{padding-right:30px}
.page.movie_details .scroll_content>.head .more_menu .wrapper a:before{position:absolute;right:10px}
.page.movie_details .scroll_content>.head .more_menu .wrapper a.icon-ok,.page.movie_details .scroll_content>.head .more_menu .wrapper a:hover{color:#ac0000}
+.dark .page.movie_details .scroll_content>.head .more_menu .wrapper a.icon-ok,.dark .page.movie_details .scroll_content>.head .more_menu .wrapper a:hover{color:#39c29f}
.page.movie_details .scroll_content>.head .more_menu.title>a{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}
.page.movie_details .scroll_content>.head .more_menu.title .wrapper{-webkit-transform-origin:0 0;transform-origin:0 0;left:0;right:auto}
.page.movie_details .scroll_content>.head .more_menu.title .wrapper:before{left:22px;right:auto}
.page.movie_details .scroll_content>.head .buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.page.movie_details .scroll_content>.head .buttons>a{display:inline-block;padding:0 10px;color:#ac0000;line-height:80px}
+.dark .page.movie_details .scroll_content>.head .buttons>a{color:#39c29f}
.page.movie_details .scroll_content>.head .buttons>a:hover{color:#000}
+.dark .page.movie_details .scroll_content>.head .buttons>a:hover{color:#FFF}
.page.movie_details .scroll_content .section{padding:20px;border-top:1px solid rgba(0,0,0,.1);will-change:transform,opacity;-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
+.dark .page.movie_details .scroll_content .section{border-color:rgba(255,255,255,.1)}
@media (max-width:480px){.page.movie_details .scroll_content>.head .more_menu.title .wrapper{top:30px;max-width:240px}
.page.movie_details .scroll_content>.head .buttons{margin:0}
.page.movie_details .scroll_content>.head .buttons>a{line-height:44px}
@@ -292,7 +334,8 @@
.page.movie_details .section_description .meta{text-align:right;font-style:italic;font-size:.9em}
.page.movie_details .section_description .meta span{display:inline-block;margin:10px 10px 0}
.page.movie_details .section_description .meta span:last-child{margin-right:0}
-.page.movie_details .section_add{background:#eaeaea}
+.page.movie_details .section_add{background:#ebebeb}
+.dark .page.movie_details .section_add{background:#3a3a3a}
.page.movie_details .section_add .options>div{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.page.movie_details .section_add .options>div select{display:block;width:100%}
.page.movie_details .section_add .options>div .title{min-width:75px;width:2000px;margin:0 10px 0 0}
@@ -300,17 +343,18 @@
.page.movie_details .section_add .options>div .add{width:200px}
.page.movie_details .section_add .options>div .add .button{background:#FFF;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;display:block;text-align:center;width:100%;margin:0}
.page.movie_details .section_add .options>div .add .button:hover{background:#ac0000}
+.dark .page.movie_details .section_add .options>div .add .button:hover{background:#39c29f}
.page.movie_details .section_add .data,.page.movie_details .section_add .thumbnail{display:none}
.page.movie_details .files span{text-align:center}
.page.movie_details .files .name{text-align:left;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}
.page.movie_details .files .type{min-width:80px}
.page.movie_details .releases .buttons{margin-bottom:10px}
-.page.movie_details .releases .buttons a{display:inline}
-.page.movie_details .releases .buttons .orange{color:orange}
-.page.movie_details .releases .buttons .green{color:green}
+.page.movie_details .releases .buttons a{display:inline;color:#ac0000}
+.dark .page.movie_details .releases .buttons a{color:#39c29f}
@media (max-width:480px){.page.movie_details .releases .item{display:block}
}
-.page.movie_details .releases .item:not(.head):hover{background:#eaeaea}
+.page.movie_details .releases .item:not(.head):hover{background:#ebebeb;text:#000}
+.dark .page.movie_details .releases .item:not(.head):hover{background:#3a3a3a;text:#FFF}
.page.movie_details .releases .item span{text-align:center}
.page.movie_details .releases .item span:before{display:none;font-style:italic;opacity:.6;margin-right:3px;width:100%;font-size:.9em}
.page.movie_details .releases .item .name{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;text-align:left}
@@ -324,7 +368,9 @@
.page.movie_details .releases .item .actions{width:100%;text-align:center}
}
.page.movie_details .releases .item .actions a{display:inline-block;vertical-align:top;padding:6.67px;min-width:26px;color:#000}
+.dark .page.movie_details .releases .item .actions a{color:#FFF}
.page.movie_details .releases .item .actions a:hover{color:#ac0000}
+.dark .page.movie_details .releases .item .actions a:hover{color:#39c29f}
.page.movie_details .releases .item .actions a:after{margin-left:3px;font-size:.9em}
@media (max-width:480px){.page.movie_details .releases .item .actions a{text-align:center}
.page.movie_details .releases .item .actions a.icon-info:after{content:"more info"}
@@ -368,21 +414,23 @@
@media (max-width:480px){.page.movie_details .section_trailer.section_trailer .trailer_container .icon-play span:first-child{margin-left:-15.71px}
}
.page.movie_details .section_trailer.section_trailer .trailer_container:hover{color:#ac0000}
+.dark .page.movie_details .section_trailer.section_trailer .trailer_container:hover{color:#39c29f}
.page.movie_details .section_trailer.section_trailer .trailer_container:hover .icon-play,.page.movie_details .section_trailer.section_trailer .trailer_container:hover .icon-play span{opacity:1}
.page.movie_details .section_trailer.section_trailer .trailer_container iframe{position:absolute;width:100%;height:100%;border:0;top:0;left:0;max-height:450px;z-index:10}
.alph_nav{position:relative}
.alph_nav .mass_edit_form{display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFF;position:fixed;top:80px;right:0;left:132px;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center;will-change:max-height;transition:max-height 300ms cubic-bezier(.9,0,.1,1);max-height:0;overflow:hidden}
+.dark .alph_nav .mass_edit_form{background:#2d2d2d}
.mass_editing .alph_nav .mass_edit_form{max-height:44px}
.alph_nav .mass_edit_form>*{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.alph_nav .mass_edit_form .select{margin:0 10px 0 20px}
@media (max-width:480px){.alph_nav .mass_edit_form .select{margin:0 5px 0 10px}
}
.alph_nav .mass_edit_form .select .count,.alph_nav .mass_edit_form .select input{margin-right:5px}
-.alph_nav .menus .button{color:rgba(0,0,0,.5)}
.alph_nav .menus .actions,.alph_nav .menus .counter,.alph_nav .menus .more_menu{float:left}
.alph_nav .menus .actions .wrapper,.alph_nav .menus .counter .wrapper,.alph_nav .menus .more_menu .wrapper{-webkit-transform-origin:92% 0;transform-origin:92% 0;right:-7px}
.alph_nav .menus .actions>a,.alph_nav .menus .counter>a,.alph_nav .menus .more_menu>a{display:inline-block;width:30px;line-height:80px;text-align:center}
.alph_nav .menus .actions>a:hover,.alph_nav .menus .counter>a:hover,.alph_nav .menus .more_menu>a:hover{color:#ac0000}
+.dark .alph_nav .menus .actions>a:hover,.dark .alph_nav .menus .counter>a:hover,.dark .alph_nav .menus .more_menu>a:hover{color:#39c29f}
@media (max-width:768px){.alph_nav .menus .counter{display:none}
}
.alph_nav .menus .actions a{display:inline-block}
@@ -391,16 +439,19 @@
.alph_nav .menus .filter .button{margin-top:-2px}
.alph_nav .menus .filter .search{position:relative}
.alph_nav .menus .filter .search:before{position:absolute;height:100%;line-height:38px;padding-left:10px;font-size:16px;opacity:.5}
-.alph_nav .menus .filter .search input{width:100%;padding:10px 10px 10px 30px;background:#FFF;border:none;border-bottom:1px solid #eaeaea}
-.alph_nav .menus .filter .numbers li.active,.alph_nav .menus .filter .numbers li.available:hover{background:#eaeaea}
+.alph_nav .menus .filter .search input{width:100%;padding:10px 10px 10px 30px;background:#FFF;border:none #ebebeb;border-bottom:1px solid transparent}
+.dark .alph_nav .menus .filter .search input{background:#2d2d2d;border-color:#3a3a3a}
@media (max-width:480px){.alph_nav .menus .filter .wrapper{right:-70px;-webkit-transform-origin:75% 0;transform-origin:75% 0}
.alph_nav .menus .filter .wrapper:before{right:83px!important}
.alph_nav .menus .filter .search input{font-size:1.2em}
}
.alph_nav .menus .filter .numbers{padding:10px}
-.alph_nav .menus .filter .numbers li{float:left;width:10%;height:30px;line-height:30px;text-align:center;color:rgba(0,0,0,.2);cursor:default;border:0}
-.alph_nav .menus .filter .numbers li.available{color:#000;cursor:pointer}
-.alph_nav .menus .more_menu.show .button{color:#000}
+.alph_nav .menus .filter .numbers li{float:left;width:10%;height:30px;line-height:30px;text-align:center;opacity:.2;cursor:default;border:0}
+.alph_nav .menus .filter .numbers li.active{background:#ebebeb}
+.dark .alph_nav .menus .filter .numbers li.active{background:#3a3a3a}
+.alph_nav .menus .filter .numbers li.available{opacity:1;cursor:pointer}
+.alph_nav .menus .filter .numbers li.available:hover{background:#ebebeb}
+.dark .alph_nav .menus .filter .numbers li.available:hover{background:#3a3a3a}
.alph_nav .menus .more_menu .wrapper{top:70px;padding-top:4px;border-radius:3px 3px 0 0;min-width:140px}
.alph_nav .menus .more_menu .wrapper:before{top:0;left:auto;right:22px}
.alph_nav .menus .more_menu .wrapper ul{border-radius:3px 3px 0 0}
@@ -460,7 +511,8 @@
.category .formHint{opacity:.1}
.category:hover .formHint{opacity:1}
#category_ordering ul{float:left;margin:0;width:275px;padding:0}
-#category_ordering li{cursor:-webkit-grab;cursor:grab;border-bottom:1px solid #eaeaea;padding:5px;list-style:none}
+#category_ordering li{cursor:-webkit-grab;cursor:grab;border-bottom:1px solid transparent;border-color:#ebebeb;padding:5px;list-style:none}
+.dark #category_ordering li{border-color:#3a3a3a}
#category_ordering li:last-child{border:0}
#category_ordering li .check{margin:2px 10px 0 0;vertical-align:top}
#category_ordering li>span{display:inline-block;height:20px;vertical-align:top;line-height:20px}
@@ -482,13 +534,16 @@
.page.log .container .time{clear:both;font-size:.75em;border-top:1px solid rgba(255,255,255,.1);overflow:hidden;padding:0 3px;font-family:Lucida Console,Monaco,Nimbus Mono L,monospace,serif;display:-webkit-flex;display:-ms-flexbox;display:flex}
@media (max-width:480px){.page.log .container .time{-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}
}
-.page.log .container .time.highlight{background:#eaeaea}
+.page.log .container .time.highlight{background:#ebebeb}
+.dark .page.log .container .time.highlight{background:#3a3a3a}
.page.log .container .time span{padding:5px 0 3px;display:inline-block;vertical-align:middle;width:95px}
.page.log .container .time .message{white-space:pre-wrap;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto}
@media (max-width:480px){.page.log .container .time .message{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin-top:-5px;padding:0;display:block;width:100%}
}
-.page.log .container .time ::-moz-selection{background-color:#000;color:#FFF}
-.page.log .container .time ::selection{background-color:#000;color:#FFF}
+.page.log .container .time ::-moz-selection{background-color:#FFF;color:#000}
+.page.log .container .time ::selection{background-color:#FFF;color:#000}
+.dark .page.log .container .time ::-moz-selection{background-color:#2d2d2d;color:#FFF}
+.dark .page.log .container .time ::selection{background-color:#2d2d2d;color:#FFF}
.page.log .container .type.type{margin-left:6.67px;width:40px}
.page.log .container .error{color:#FFA4A4}
.page.log .container .debug span{opacity:.6}
@@ -496,11 +551,14 @@
.report_popup.report_popup{position:fixed;left:0;right:0;bottom:0;top:0;z-index:99999;font-size:14px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;opacity:1;color:#FFF;pointer-events:auto}
.disable_hover .scroll_content>*,.mask,.ripple{pointer-events:none}
.report_popup.report_popup .button{margin:10px 0;padding:10px;color:#FFF;background:#ac0000}
+.dark .report_popup.report_popup .button{background:#39c29f}
.report_popup.report_popup .bug{width:80%;height:80%;max-height:800px;max-width:800px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap}
.report_popup.report_popup .bug>span{margin:10px 0 20px}
.report_popup.report_popup .bug textarea{display:block;width:100%;background:#FFF;padding:20px;overflow:auto;color:#666;height:70%;font-size:12px}
-.do_report.do_report{z-index:10000;position:absolute;padding:10px;background:#ac0000;color:#FFF}
-.add_new_profile{padding:20px;display:block;text-align:center;font-size:20px;border-bottom:1px solid #eaeaea}
+.do_report.do_report{z-index:10000;position:absolute;padding:10px;background:#ac0000;color:#FFF!important}
+.dark .do_report.do_report{background:#39c29f}
+.add_new_profile{padding:20px;display:block;text-align:center;font-size:20px;border-bottom:1px solid transparent;border-color:#ebebeb}
+.dark .add_new_profile{border-color:#3a3a3a}
.profile{margin-bottom:20px}
.profile .quality_label input{font-weight:700}
.profile>.delete{position:absolute;padding:6.67px 20px;right:0;cursor:pointer;opacity:.6;color:#fd5353;font-size:1.5em;z-index:2}
@@ -517,10 +575,13 @@
.profile .ctrlHolder.wait_for.wait_for{display:block}
.profile .ctrlHolder.wait_for.wait_for input{min-width:0;width:40px;text-align:center;margin:0 2px}
.profile .ctrlHolder.wait_for.wait_for .advanced{display:none;color:#ac0000}
+.dark .profile .ctrlHolder.wait_for.wait_for .advanced{color:#39c29f}
.show_advanced .profile .ctrlHolder.wait_for.wait_for .advanced{display:inline}
#profile_ordering ul{list-style:none;margin:0;width:275px;padding:0}
-#profile_ordering li{border-bottom:1px solid #eaeaea;padding:5px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
-#profile_ordering li:hover{background:#eaeaea}
+#profile_ordering li{border-bottom:1px solid transparent;border-color:#ebebeb;padding:5px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
+.dark #profile_ordering li{border-color:#3a3a3a}
+#profile_ordering li:hover{background:#ebebeb}
+.dark #profile_ordering li:hover{background:#3a3a3a}
#profile_ordering li:last-child{border:0}
#profile_ordering li input[type=checkbox]{margin:2px 10px 0 0;vertical-align:top}
#profile_ordering li>span{display:inline-block;height:20px;vertical-align:top;line-height:20px}
@@ -595,7 +656,9 @@
.api_docs .database table textarea{font-size:12px;width:100%;height:200px}
.api_docs .database table input[type=submit]{display:block}
.page.login{background:#FFF;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:1.25em}
+.dark .page.login{background:#2d2d2d}
.page.login h1{padding:0 0 10px;font-size:60px;font-family:Lobster;font-weight:400;color:#ac0000;text-align:center}
+.dark .page.login h1{color:#39c29f}
.page.login form{padding:0;width:300px}
.page.login .ctrlHolder{padding:0;margin:0 0 20px}
.page.login .ctrlHolder:hover{background:0 0}
@@ -641,14 +704,20 @@
@font-face{font-family:OpenSans;src:url(../fonts/OpenSans-BoldItalic-webfont.eot);src:url(../fonts/OpenSans-BoldItalic-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/OpenSans-BoldItalic-webfont.woff) format("woff"),url(../fonts/OpenSans-BoldItalic-webfont.ttf) format("truetype"),url(../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic) format("svg");font-weight:700;font-style:italic}
@font-face{font-family:Lobster;src:url(../fonts/Lobster-webfont.eot);src:url(../fonts/Lobster-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/Lobster-webfont.woff2) format("woff2"),url(../fonts/Lobster-webfont.woff) format("woff"),url(../fonts/Lobster-webfont.ttf) format("truetype"),url(../fonts/Lobster-webfont.svg#lobster_14regular) format("svg");font-weight:400;font-style:normal}
*{margin:0;padding:0;box-sizing:border-box;text-rendering:optimizeSpeed;-webkit-backface-visibility:hidden;backface-visibility:hidden}
-body,html{font-size:14px;line-height:1.5;font-family:OpenSans,"Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;font-weight:300;height:100%;margin:0;padding:0;background:#111;overflow:hidden}
+body,html{font-size:14px;line-height:1.5;font-family:OpenSans,"Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;font-weight:300;height:100%;margin:0;padding:0;background:#111;color:#000;overflow:hidden}
+.dark body,.dark html{color:#FFF}
body{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap}
a{position:relative;overflow:hidden;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
-input,select,textarea{font-size:1em;font-weight:300;padding:6.67px;background:#FFF;border:1px solid #b7b7b7;border-radius:0}
+a:active,a:visited{color:inherit}
+input,select,textarea{font-size:1em;font-weight:300;padding:6.67px;border-radius:0;border:1px solid #b8b8b8;background:#ebebeb;color:#000}
+.dark input,.dark select,.dark textarea{border-color:#202020;background:#3a3a3a;color:#FFF}
input[type=text],textarea{-webkit-appearance:none}
.button{color:#ac0000;font-weight:300;padding:5px;cursor:pointer;border:1px solid #ac0000;border-radius:3px;margin:0 5px;transition:all 150ms}
+.dark .button{color:#39c29f;border-color:#39c29f}
.button:hover{background:#ac0000;color:#FFF}
+.dark .button:hover{background:#39c29f}
.ripple{position:absolute;height:10px;width:10px;border-radius:50%;background:#ac0000;will-change:transform,opacity;-webkit-transform:translate(-50%,-50%) scale(1) rotateZ(360deg);transform:translate(-50%,-50%) scale(1) rotateZ(360deg);opacity:.2;transition:all 1.5s ease;transition-property:opacity,-webkit-transform;transition-property:opacity,transform}
+.dark .ripple{background:#39c29f}
.ripple.animate{-webkit-transform:translate(-50%,-50%) scale(100) rotateZ(360deg);transform:translate(-50%,-50%) scale(100) rotateZ(360deg);opacity:0}
.header{width:132px;min-width:132px;position:relative;z-index:100}
@media (max-width:480px){.header{width:44px;min-width:44px;z-index:21}
@@ -656,6 +725,7 @@ input[type=text],textarea{-webkit-appearance:none}
.header a{color:#FFF;letter-spacing:1px}
.header .ripple{background:#FFF}
.header .navigation .logo{background:#ac0000;display:block;text-align:center;position:relative;overflow:hidden;font-family:Lobster,serif;color:#FFF;font-size:38px;line-height:80px;height:80px}
+.dark .header .navigation .logo{background:#39c29f}
.header .navigation .logo span{position:absolute;display:block;height:100%;width:100%;text-align:center;left:0}
.header .navigation .logo span:nth-child(even){-webkit-transform:translateX(100%);transform:translateX(100%)}
@media (max-width:480px){.header .navigation .logo{font-size:28px;line-height:44px;height:44px}
@@ -684,6 +754,7 @@ input[type=text],textarea{-webkit-appearance:none}
.header .notification_menu{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.header .notification_menu .button:before{font-size:20px;top:-2px}
.header .notification_menu .badge{position:absolute;color:#FFF;top:5px;right:0;background:#ac0000;border-radius:50%;width:18px;height:18px;line-height:16px;text-align:center;font-size:10px;font-weight:lighter}
+.dark .header .notification_menu .badge{background:#39c29f}
.header .notification_menu .wrapper{width:320px}
@media (max-width:480px){.header .menu,.header .notification_menu,.header .search_form{bottom:0}
.header .notification_menu{bottom:44px}
@@ -702,9 +773,11 @@ input[type=text],textarea{-webkit-appearance:none}
}
.header .more_menu .wrapper{bottom:0;left:44px;right:auto;padding-left:4px}
.corner_background{display:block;position:absolute;height:10px;width:10px;background:#ac0000;top:0;left:132px}
+.dark .corner_background{background:#39c29f}
@media (max-width:480px){.corner_background{left:44px}
}
.content{position:relative;height:100%;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;background:#FFF;border-radius:3px 0 0 3px}
+.dark .content{background:#2d2d2d}
.content h1,.content h2,.content h3{padding:0;margin:0}
.content .pages{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;width:100%;position:relative}
.content .footer{width:100%}
@@ -717,12 +790,14 @@ input[type=text],textarea{-webkit-appearance:none}
.page .navigation{z-index:2;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:fixed;top:0;height:80px;left:152px;right:20px;background:#FFF;border-radius:3px 0 0}
.more_menu .button,.more_menu a,.page .navigation ul li{display:inline-block}
.more_menu,.more_menu .button:before{position:relative}
+.dark .page .navigation{background:#2d2d2d}
@media (max-width:480px){.page h2{font-size:18px}
.page .navigation{height:44px;left:54px;right:10px}
}
.page .navigation ul{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;list-style:none}
-.page .navigation ul li a{display:inline-block;font-size:24px;line-height:80px;padding:0 20px;color:rgba(0,0,0,.5);vertical-align:bottom}
-.page .navigation ul .active a{color:#000}
+.page .navigation ul li a{display:inline-block;font-size:24px;line-height:80px;padding:0 20px;color:#000;opacity:.5;vertical-align:bottom}
+.page .navigation ul .active a,.question.show{opacity:1}
+.dark .page .navigation ul li a{color:#FFF}
.page .navigation>ul>li:first-child{margin-left:-20px}
@media (max-width:480px){.page .navigation ul li a{font-size:18px;line-height:44px;padding:0 10px}
.page .navigation>ul>li:first-child{margin-left:-10px}
@@ -734,30 +809,38 @@ input[type=text],textarea{-webkit-appearance:none}
.level_4{z-index:40}
.more_menu{line-height:1em}
.more_menu .button{font-size:24px;cursor:pointer}
-.more_menu .wrapper{display:none;position:absolute;right:0;background:#ac0000;z-index:5000;border-radius:3px 0 0 3px;-webkit-transform-origin:80% 0;transform-origin:80% 0}
+.more_menu .wrapper{display:none;position:absolute;right:0;background:#ac0000;z-index:5000;box-shadow:0 0 15px 2px rgba(0,0,0,.15);border-radius:3px 0 0 3px;-webkit-transform-origin:80% 0;transform-origin:80% 0}
+.dark .more_menu .wrapper{background:#39c29f;box-shadow:0 5px 15px 2px rgba(0,0,0,.4)}
.more_menu .wrapper:before{-webkit-transform:rotate(45deg) translateY(-60%);transform:rotate(45deg) translateY(-60%);content:'';display:block;position:absolute;background:#ac0000;height:10px;width:10px;left:-9px;bottom:11px;z-index:1;opacity:1;border-radius:3px}
+.dark .more_menu .wrapper:before{background:#39c29f}
.more_menu .wrapper ul{background:#FFF;position:relative;z-index:2;overflow:hidden;border-radius:3px 0 0 3px}
-.more_menu .wrapper ul li{display:block;line-height:1em;border-top:1px solid #eaeaea}
+.dark .more_menu .wrapper ul{background:#2d2d2d}
+.more_menu .wrapper ul li{display:block;line-height:1em;border-top:1px solid transparent;border-color:#ebebeb}
+.dark .more_menu .wrapper ul li{border-color:#3a3a3a}
.more_menu .wrapper ul li:first-child{border-top:0}
.more_menu .wrapper ul li a{display:block;color:#000;padding:5px 10px;font-size:1em;line-height:22px}
.question,.table .item{display:-webkit-flex;display:-ms-flexbox}
+.dark .more_menu .wrapper ul li a,.question,.question a{color:#FFF}
.more_menu .wrapper ul li:first-child a{padding-top:10px}
.more_menu .wrapper ul li:last-child a{padding-bottom:10px}
.messages{position:fixed;right:0;bottom:0;width:320px;z-index:2000;overflow:hidden;font-size:14px;font-weight:700;padding:5px}
-.messages .message{overflow:hidden;transition:all .6s cubic-bezier(.9,0,.1,1);width:100%;position:relative;max-height:0;font-size:1.1em;font-weight:400;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;background:#ac0000;margin-bottom:4px;border-radius:3px}
+.messages .message{overflow:hidden;transition:all .6s cubic-bezier(.9,0,.1,1);width:100%;position:relative;max-height:0;font-size:1.1em;font-weight:400;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;background:#ac0000;margin-bottom:4px;border-radius:3px;box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
.mask,.messages .close{position:absolute;top:0;right:0}
+.dark .messages .message{background:#39c29f;box-shadow:0 5px 15px 2px rgba(0,0,0,.4)}
.messages .message .inner{padding:15px 30px 15px 20px;background:#FFF;margin-bottom:4px;border-radius:3px}
+.dark .messages .message .inner{background:#2d2d2d}
.messages .message.sticky{background-color:#ac0000}
+.dark .messages .message.sticky{background-color:#39c29f}
.messages .message.show{max-height:100px;-webkit-transform:scale(1);transform:scale(1)}
.messages .message.hide{max-height:0;padding:0 20px;margin:0;-webkit-transform:scale(0);transform:scale(0)}
.messages .close{padding:10px 8px;color:#FFF}
-.question{position:fixed;z-index:20000;color:#FFF;padding:20px;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
-.question.show{opacity:1}
+.question{position:fixed;z-index:20000;padding:20px;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.question .inner{width:100%;max-width:500px}
.question h3{display:block;margin-bottom:20px;font-size:1.4em;font-weight:lighter}
.question .hint{margin:-20px 0 20px}
-.question a{border-color:#FFF;color:#FFF;transition:none}
+.question a{border-color:#FFF;transition:none}
.question a:hover{background:#FFF;color:#ac0000}
+.dark .question a:hover{color:#39c29f}
.mask{background:rgba(0,0,0,.8);z-index:1000;text-align:center;bottom:0;left:0;opacity:0;transition:opacity 500ms}
.mask .message,.mask .spinner{position:absolute;top:50%;left:50%}
.mask .message{color:#FFF;text-align:center;width:320px;margin:-49px 0 0 -160px;font-size:16px}
@@ -778,6 +861,7 @@ input[type=text],textarea{-webkit-appearance:none}
}
.table .head{font-weight:700}
.table .item{display:flex;border-bottom:1px solid rgba(0,0,0,.2)}
+.dark .table .item{border-color:rgba(255,255,255,.2)}
.table .item:last-child{border-bottom:none}
.table .item span{padding:1px 2px}
.table .item span:first-child{padding-left:0}
@@ -797,7 +881,9 @@ input[type=text],textarea{-webkit-appearance:none}
}
.page.settings .tabs ul{list-style:none;font-size:14px}
.page.settings .tabs li a{color:rgba(0,0,0,.5)}
+.dark .page.settings .tabs li a{color:rgba(255,255,255,.5)}
.page.settings .tabs li.active a{color:#000}
+.dark .page.settings .tabs li.active a{color:#FFF}
.page.settings form.containers{margin:0 20px 0 0;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}
@media (max-width:480px){.page.settings form.containers{margin:0 10px 0 0}
}
@@ -810,12 +896,16 @@ input[type=text],textarea{-webkit-appearance:none}
.page.settings fieldset h2 .hint{margin:0;display:block}
}
.page.settings fieldset h2 .hint a{font-weight:400;color:#ac0000;text-decoration:underline;display:inline}
+.dark .page.settings fieldset h2 .hint a{color:#39c29f}
.page.settings fieldset .more_hint{position:relative}
.page.settings fieldset .more_hint .tooltip{display:inline;padding:10px}
.page.settings fieldset .more_hint .tooltip .icon-info{vertical-align:middle;display:inline-block;text-align:center;border:1px solid #ac0000;border-radius:50%;width:18px;height:18px;line-height:16px;font-size:.8em;text-decoration:none}
-.page.settings fieldset .more_hint .tooltip .tip{bottom:100%;left:0;right:0;position:absolute;background:#eaeaea;z-index:20;display:none;padding:10px;margin-left:-10px}
+.dark .page.settings fieldset .more_hint .tooltip .icon-info{border-color:#39c29f}
+.page.settings fieldset .more_hint .tooltip .tip{bottom:100%;left:0;right:0;position:absolute;background:#ebebeb;z-index:20;display:none;padding:10px;margin-left:-10px}
+.dark .page.settings fieldset .more_hint .tooltip .tip{background:#3a3a3a}
.page.settings fieldset .more_hint .tooltip:hover .tip{display:block}
-.page.settings fieldset .ctrlHolder{padding:6.67px 20px;border-bottom:1px solid #eaeaea;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
+.page.settings fieldset .ctrlHolder{padding:6.67px 20px;border-bottom:1px solid transparent;border-color:#ebebeb;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
+.dark .page.settings fieldset .ctrlHolder{border-color:#3a3a3a}
.page.settings fieldset .ctrlHolder:last-child{border-bottom:0}
.page.settings fieldset .ctrlHolder:nth-child(2){margin-top:10px}
.page.settings fieldset .ctrlHolder label{display:inline-block;min-width:150px}
@@ -831,6 +921,7 @@ input[type=text],textarea{-webkit-appearance:none}
.page.settings fieldset .ctrlHolder .select_wrapper:before{vertical-align:top;pointer-events:none;position:absolute;top:0;line-height:2em;right:10px;height:100%}
.page.settings fieldset .ctrlHolder .formHint{-webkit-flex:1;-ms-flex:1;flex:1;opacity:.8;margin-left:20px}
.page.settings fieldset .ctrlHolder .formHint a{font-weight:400;color:#ac0000;text-decoration:underline}
+.dark .page.settings fieldset .ctrlHolder .formHint a{color:#39c29f}
@media (max-width:480px){.page.settings fieldset .ctrlHolder .select_wrapper{width:100%}
.page.settings fieldset .ctrlHolder .formHint{min-width:100%;margin-left:0}
}
@@ -839,7 +930,8 @@ input[type=text],textarea{-webkit-appearance:none}
.page.settings fieldset.disabled .ctrlHolder{display:none}
.page.settings fieldset.disabled>.ctrlHolder:first-child{display:-webkit-flex;display:-ms-flexbox;display:flex}
.page.settings fieldset.enabler{display:block}
-.page.settings fieldset.enabler.disabled:hover{background:rgba(234,234,234,.2)}
+.page.settings fieldset.enabler.disabled:hover{background:rgba(255,255,255,.1)}
+.dark .page.settings fieldset.enabler.disabled:hover{background:rgba(0,0,0,.1)}
.page.settings fieldset.enabler>:first-child{position:absolute;right:0;border:0;padding:0}
.page.settings fieldset.enabler>:first-child~h2{margin-right:86px}
@media (max-width:480px){.page.settings fieldset.enabler>:first-child~h2{margin-right:0}
@@ -847,19 +939,26 @@ input[type=text],textarea{-webkit-appearance:none}
.page.settings fieldset.enabler>:nth-child(2){margin-top:0}
.page.settings fieldset.enabler>:nth-child(3){margin-top:10px}
.page.settings fieldset .ctrlHolder.advanced,.page.settings fieldset.advanced{display:none;color:#ac0000}
+.dark .page.settings fieldset .ctrlHolder.advanced,.dark .page.settings fieldset.advanced{color:#39c29f}
.page.settings.show_advanced fieldset.advanced{display:block}
.page.settings.show_advanced fieldset:not(.disabled)>.ctrlHolder.advanced{display:-webkit-flex;display:-ms-flexbox;display:flex}
.page.settings .switch{display:inline-block;background:#ac0000;height:20px;width:50px;min-width:0!important;transition:all 250ms;cursor:pointer;border-radius:20px}
+.dark .page.settings .switch{background:#39c29f}
.page.settings .switch input{display:none}
.page.settings .switch .toggle{background:#FFF;margin:1px;height:18px;width:18px;transition:-webkit-transform 250ms;transition:transform 250ms;-webkit-transform:translateX(30px);transform:translateX(30px);border-radius:20px}
-.page.settings fieldset.enabler.disabled .switch,.page.settings:not(.show_advanced) .advanced_toggle .switch{background:#eaeaea;border-color:#eaeaea}
+.dark .page.settings .switch .toggle{background:#2d2d2d}
+.page.settings fieldset.enabler.disabled .switch,.page.settings:not(.show_advanced) .advanced_toggle .switch{background:#ebebeb;border-color:#ebebeb}
+.dark .page.settings fieldset.enabler.disabled .switch,.dark .page.settings:not(.show_advanced) .advanced_toggle .switch{background:#3a3a3a;border-color:#3a3a3a}
.page.settings fieldset.enabler.disabled .switch .toggle,.page.settings:not(.show_advanced) .advanced_toggle .switch .toggle{-webkit-transform:translateX(0);transform:translateX(0)}
-.page.settings fieldset.enabler.disabled .switch:hover,.page.settings:not(.show_advanced) .advanced_toggle .switch:hover{background:#b7b7b7;border-color:#b7b7b7}
+.page.settings fieldset.enabler.disabled .switch:hover,.page.settings:not(.show_advanced) .advanced_toggle .switch:hover{background:#b8b8b8;border-color:#b8b8b8}
+.dark .page.settings fieldset.enabler.disabled .switch:hover,.dark .page.settings:not(.show_advanced) .advanced_toggle .switch:hover{background:#070707;border-color:#070707}
.page.settings .option_list{background:#FFF;margin-top:10px}
+.dark .page.settings .option_list{background:#2d2d2d}
.page.settings .option_list fieldset{position:relative}
.page.settings .option_list fieldset h2 .group_label{min-width:100px}
.page.settings .option_list fieldset.disabled h2{padding:0 20px}
-.page.settings .option_list fieldset:after{position:absolute;content:'';display:block;width:100%;border-bottom:1px solid #eaeaea;bottom:0}
+.page.settings .option_list fieldset:after{position:absolute;content:'';display:block;width:100%;border-bottom:1px solid transparent;border-color:#ebebeb;bottom:0}
+.dark .page.settings .option_list fieldset:after{border-color:#3a3a3a}
.page.settings .option_list fieldset:after:last-child{border-bottom:0}
.page.settings .option_list h2{font-size:1em;font-weight:400}
.page.settings .option_list h2 .hint{font-weight:300}
@@ -879,10 +978,12 @@ input[type=text],textarea{-webkit-appearance:none}
.page.settings .combined_table .ctrlHolder.is_empty .delete,.page.settings .combined_table .ctrlHolder.is_empty input[type=checkbox]{visibility:hidden}
.page.settings .tab_about .usenet{padding:20px 20px 0;font-size:1.5em;line-height:1.3em}
.page.settings .tab_about .usenet a{color:#ac0000;padding:0 5px}
+.dark .page.settings .tab_about .usenet a{color:#39c29f}
.page.settings .tab_about .usenet ul{list-style:none;float:left;width:50%;margin:10px 0;padding:0}
.page.settings .tab_about .usenet li{font-size:.8em}
.page.settings .tab_about .usenet li:before{margin-right:10px}
.page.settings .tab_about .donate{float:left;width:42%;text-align:center;font-size:17px;padding:0 0 0 4%;margin:20px 0 0;border-left:1px solid rgba(0,0,0,.2)}
+.dark .page.settings .tab_about .donate{border-color:rgba(255,255,255,.2)}
.page.settings .tab_about .donate form{padding:10px 0 0}
.page.settings .tab_about .info{padding:20px;margin:0;overflow:hidden}
.page.settings .tab_about .info dt{clear:both;float:left;width:17%;font-weight:700}
@@ -894,6 +995,7 @@ input[type=text],textarea{-webkit-appearance:none}
}
.page.settings .directory input{width:100%}
.page.settings .multi_directory .delete{color:#ac0000;padding:0 10px;opacity:.6;font-size:1.5em}
+.dark .page.settings .multi_directory .delete{color:#39c29f}
.page.settings .multi_directory .delete:hover{opacity:1}
.page.settings .choice .select_wrapper{margin-left:20px;width:120px;min-width:120px}
@media (max-width:480px){.page.settings .choice .select_wrapper{margin:10px 0 0}
@@ -901,14 +1003,18 @@ input[type=text],textarea{-webkit-appearance:none}
.page.settings .choice .select_wrapper select{min-width:0!important}
.page.settings .renamer_to.renamer_to{-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}
.page.settings .renamer_to.renamer_to .ctrlHolder{width:100%}
-.directory_list{z-index:2;position:absolute;width:450px;margin:28px 0 20px;background:#ac0000;border-radius:3px 3px 0 0}
-.directory_list .pointer{border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:6px solid #ac0000;display:block;position:absolute;width:0;margin:-6px 0 0 100px}
+.directory_list{z-index:2;position:absolute;width:450px;margin:28px 0 20px;background:#ac0000;box-shadow:0 0 15px 2px rgba(0,0,0,.15);border-radius:3px 3px 0 0}
+.dark .directory_list{background:#39c29f;box-shadow:0 5px 15px 2px rgba(0,0,0,.4)}
+.directory_list .pointer{border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:6px solid transparent;border-bottom-color:#ac0000;display:block;position:absolute;width:0;margin:-6px 0 0 100px}
+.dark .directory_list .pointer{border-bottom-color:#39c29f}
.directory_list .wrapper{background:#FFF;border-radius:3px 3px 0 0;margin-top:5px}
+.dark .directory_list .wrapper{background:#2d2d2d}
.directory_list ul{width:92%;height:300px;overflow:auto;margin:0 20px}
.directory_list li{padding:4px 20px 4px 0;cursor:pointer;margin:0!important;border-top:1px solid rgba(255,255,255,.1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.directory_list li.blur{opacity:.3}
.directory_list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.directory_list li:hover{color:#ac0000}
+.dark .directory_list li:hover{color:#39c29f}
.directory_list li.empty{background:0 0;height:100px;text-align:center;font-style:italic;border:none;line-height:100px;cursor:default;color:#BBB;text-shadow:none;font-size:12px}
.directory_list .actions{clear:both;padding:20px;min-height:45px;position:relative;width:100%;text-align:right}
.directory_list .actions label{float:right;width:auto;padding:0}
@@ -917,5 +1023,5 @@ input[type=text],textarea{-webkit-appearance:none}
.directory_list .actions:last-child{padding:20px}
.directory_list .actions:last-child>span{padding:0 5px;text-shadow:none}
.directory_list .actions:last-child>.clear{left:20px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);margin:0}
-.directory_list .actions:last-child>.cancel{color:rgba(0,0,0,.4)}
+.directory_list .actions:last-child>.cancel{opacity:.7}
.directory_list .actions:last-child>.save{margin-right:0}
\ No newline at end of file
diff --git a/couchpotato/static/style/login.scss b/couchpotato/static/style/login.scss
index d8682d4..5f077c1 100644
--- a/couchpotato/static/style/login.scss
+++ b/couchpotato/static/style/login.scss
@@ -2,7 +2,7 @@
/*** Login ***/
.page.login {
- background: $background_color;
+ @include theme(background, background);
display: flex;
justify-content: center;
align-items: center;
@@ -13,7 +13,7 @@
font-size: 60px;
font-family: Lobster;
font-weight: normal;
- color: $primary_color;
+ @include theme(color, primary);
text-align: center;
}
diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss
index ff1c330..1dda849 100644
--- a/couchpotato/static/style/main.scss
+++ b/couchpotato/static/style/main.scss
@@ -18,6 +18,7 @@ body, html {
margin: 0;
padding: 0;
background: $menu_color;
+ @include theme(color, text);
overflow: hidden;
}
@@ -32,15 +33,25 @@ a {
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+ &:visited, &:active {
+ color: inherit;
+ }
}
input, textarea, select {
font-size: 1em;
font-weight: 300;
padding: $padding/3;
- background: $background_color;
- border: 1px solid darken($theme_off, 20);
border-radius: 0;
+ border: 1px solid darken(get-theme(off), 20);
+
+ @include theme-dark {
+ border-color: darken(get-theme-dark(off), 10);
+ }
+
+ @include theme(background, off);
+ @include theme(color, text);
}
input[type=text], textarea {
@@ -48,18 +59,19 @@ input[type=text], textarea {
}
.button {
- color: $primary_color;
+ @include theme(color, primary);
font-weight: 300;
padding: $padding/4;
cursor: pointer;
- border: 1px solid $primary_color;
+ border: 1px solid transparent;
+ @include theme(border-color, primary);
border-radius: $border_radius;
margin: 0 $padding/4;
transition: all 150ms;
&:hover {
- background: $primary_color;
- color: $background_color;
+ @include theme(background, primary);
+ color: #FFF;
}
}
@@ -68,7 +80,7 @@ input[type=text], textarea {
height: 10px;
width: 10px;
border-radius: 50%;
- background: $primary_color;
+ @include theme(background, primary);
will-change: transform, opacity;
transform: translate(-50%, -50%) scale(1) rotateZ(360deg);
opacity: 0.2;
@@ -111,7 +123,7 @@ input[type=text], textarea {
.navigation {
.logo {
- background: $primary_color;
+ @include theme(background, primary);
display: block;
text-align: center;
position: relative;
@@ -271,7 +283,7 @@ input[type=text], textarea {
color: #FFF;
top: 5px;
right: 0;
- background: $primary_color;
+ @include theme(background, primary);
border-radius: 50%;
width: 18px;
height: 18px;
@@ -371,7 +383,7 @@ input[type=text], textarea {
position: absolute;
height: 10px;
width: 10px;
- background: $primary_color;
+ @include theme(background, primary);
top: 0;
left: $header_width;
@@ -389,9 +401,8 @@ input[type=text], textarea {
display: flex;
flex-flow: column nowrap;
- background: $background_color;
+ @include theme(background, background);
border-radius: $border_radius 0 0 $border_radius;
- //overflow: hidden;
h1, h2, h3 {
padding: 0;
@@ -456,7 +467,7 @@ input[type=text], textarea {
height: $header_height;
left: $header_width + $padding;
right: $padding;
- background: $background_color;
+ @include theme(background, background);
border-radius: $border_radius 0 0 0;
@include media-phablet {
@@ -477,7 +488,8 @@ input[type=text], textarea {
font-size: 24px;
line-height: $header_height;
padding: 0 $padding;
- color: rgba(0,0,0,.5);
+ @include theme(color, text);
+ opacity: .5;
vertical-align: bottom;
@include media-phablet {
@@ -489,7 +501,7 @@ input[type=text], textarea {
}
.active a {
- color: #000;
+ opacity: 1;
}
}
@@ -540,18 +552,22 @@ input[type=text], textarea {
display: none;
position: absolute;
right: 0;
- background: $primary_color;
+ @include theme(background, primary);
z-index: 5000;
box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
border-radius: $border_radius 0 0 $border_radius;
transform-origin: 80% 0;
+ @include theme-dark {
+ box-shadow: 0 5px 15px 2px rgba(0,0,0,.4);
+ }
+
&:before {
transform: rotate(45deg) translateY(-60%);
content: '';
display: block;
position: absolute;
- background: $primary_color;
+ @include theme(background, primary);
height: 10px;
width: 10px;
left: -9px;
@@ -559,12 +575,10 @@ input[type=text], textarea {
z-index: 1;
opacity: 1;
border-radius: $border_radius;
-// border: 8px solid $primary_color;
-// border-color: transparent $primary_color transparent transparent;
}
ul {
- background: $background_color;
+ @include theme(background, background);
position: relative;
z-index: 2;
overflow: hidden;
@@ -574,7 +588,8 @@ input[type=text], textarea {
ul li {
display: block;
line-height: 1em;
- border-top: 1px solid $theme_off;
+ border-top: 1px solid transparent;
+ @include theme(border-color, off);
&:first-child {
border-top: 0;
@@ -582,7 +597,7 @@ input[type=text], textarea {
a {
display: block;
- color: $text_color;
+ @include theme(color, text);
padding: $padding/4 $padding/2;
font-size: 1em;
line-height: 22px;
@@ -636,20 +651,24 @@ input[type=text], textarea {
font-weight: normal;
transform: scale(0);
transform-origin: 100% 50%;
- background: $primary_color;
+ @include theme(background, primary);
margin-bottom: 4px;
border-radius: $border_radius;
box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
+ @include theme-dark {
+ box-shadow: 0 5px 15px 2px rgba(0,0,0,.4);
+ }
+
.inner {
padding: 15px 30px 15px 20px;
- background: $background_color;
+ @include theme(background, background);
margin-bottom: 4px;
border-radius: $border_radius;
}
&.sticky {
- background-color: $primary_color;
+ @include theme(background-color, primary);
}
&.show {
@@ -711,7 +730,7 @@ input[type=text], textarea {
&:hover {
background: #FFF;
- color: $primary_color;
+ @include theme(color, primary);
}
}
}
@@ -812,6 +831,10 @@ input[type=text], textarea {
display: flex;
border-bottom: 1px solid rgba(0,0,0,.2);
+ @include theme-dark {
+ border-color: rgba(255,255,255,.2);
+ }
+
&:last-child {
border-bottom: none;
}
diff --git a/couchpotato/static/style/settings.scss b/couchpotato/static/style/settings.scss
index e8c5c9f..73748f1 100644
--- a/couchpotato/static/style/settings.scss
+++ b/couchpotato/static/style/settings.scss
@@ -54,11 +54,15 @@
li {
a {
color: rgba(0,0,0,.5);
+
+ @include theme-dark {
+ color: rgba(255,255,255,.5);
+ }
}
&.active {
a {
- color: #000;
+ @include theme(color, text);
}
}
}
@@ -115,7 +119,7 @@
a {
font-weight: 400;
- color: $primary_color;
+ @include theme(color, primary);
text-decoration: underline;
display: inline;
}
@@ -135,7 +139,8 @@
vertical-align: middle;
display: inline-block;
text-align: center;
- border: 1px solid $primary_color;
+ border: 1px solid transparent;
+ @include theme(border-color, primary);
border-radius: 50%;
width: 18px;
height: 18px;
@@ -149,7 +154,7 @@
left: 0;
right: 0;
position: absolute;
- background: $theme_off;
+ @include theme(background, off);
z-index: 20;
display: none;
padding: $padding/2;
@@ -166,7 +171,8 @@
.ctrlHolder {
padding: $padding/3 $padding;
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
display: flex;
flex-flow: row nowrap;
align-items: center;
@@ -250,7 +256,7 @@
a {
font-weight: 400;
- color: $primary_color;
+ @include theme(color, primary);
text-decoration: underline;
}
@@ -286,7 +292,11 @@
display: block;
&.disabled:hover {
- background: rgba($theme_off, .2);
+ background: rgba(255,255,255,.1);
+
+ @include theme-dark {
+ background: rgba(0,0,0,.1);
+ }
}
> :first-child {
@@ -318,7 +328,7 @@
fieldset.advanced,
fieldset .ctrlHolder.advanced {
display: none;
- color: $primary_color;
+ @include theme(color, primary);
}
&.show_advanced {
@@ -332,9 +342,8 @@
.switch {
$switch_height: 20px;
- $switch_active: $primary_color;
display: inline-block;
- background: $switch_active;
+ @include theme(background, primary);
height: $switch_height;
width: $switch_height * 2.5;
min-width: 0 !important;
@@ -347,7 +356,7 @@
}
.toggle {
- background: #FFF;
+ @include theme(background, background);
margin: 1px;
height: $switch_height - 2px;
width: $switch_height - 2px;
@@ -360,8 +369,8 @@
fieldset.enabler.disabled .switch,
&:not(.show_advanced) .advanced_toggle .switch {
- background: $theme_off;
- border-color: $theme_off;
+ @include theme(background, off);
+ @include theme(border-color, off);
.toggle {
transform: translateX(0);
@@ -369,14 +378,19 @@
&:hover {
- background: darken($theme_off, 20);
- border-color: darken($theme_off, 20);
+ background: darken(get-theme(off), 20);
+ border-color: darken(get-theme(off), 20);
+
+ @include theme-dark {
+ background: darken(get-theme-dark(off), 20);
+ border-color: darken(get-theme-dark(off), 20);
+ }
}
}
/** Options list **/
.option_list {
- background: #FFF;
+ @include theme(background, background);
margin-top: $padding/2;
fieldset {
@@ -400,7 +414,8 @@
content: '';
display: block;
width: 100%;
- border-bottom: 1px solid $theme_off;
+ border-bottom: 1px solid transparent;
+ @include theme(border-color, off);
bottom: 0;
&:last-child {
@@ -489,7 +504,7 @@
line-height: 1.3em;
a {
- color: $primary_color;
+ @include theme(color, primary);
padding: 0 5px;
}
@@ -519,6 +534,10 @@
margin: 20px 0 0;
border-left: 1px solid rgba(0,0,0,.2);
+ @include theme-dark {
+ border-color: rgba(255,255,255,.2);
+ }
+
form {
padding: 10px 0 0;
}
@@ -575,7 +594,7 @@
.multi_directory {
.delete {
- color: $primary_color;
+ @include theme(color, primary);
padding: 0 $padding/2;
opacity: .6;
font-size: 1.5em;
@@ -622,14 +641,19 @@
position: absolute;
width: 450px;
margin: 28px 0 20px 0;
- background: $primary_color;
+ @include theme(background, primary);
box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
border-radius: $border_radius $border_radius 0 0;
+ @include theme-dark {
+ box-shadow: 0 5px 15px 2px rgba(0,0,0,.4);
+ }
+
.pointer {
border-right: 6px solid transparent;
border-left: 6px solid transparent;
- border-bottom: 6px solid $primary_color;
+ border-bottom: 6px solid transparent;
+ @include theme(border-bottom-color, primary);
display: block;
position: absolute;
width: 0;
@@ -637,7 +661,7 @@
}
.wrapper {
- background: $background_color;
+ @include theme(background, background);
border-radius: $border_radius $border_radius 0 0;
margin-top: 5px;
}
@@ -667,7 +691,7 @@
}
&:hover {
- color: $primary_color;
+ @include theme(color, primary);
}
&.empty {
@@ -731,7 +755,7 @@
}
> .cancel {
- color: rgba(0,0,0,.4);
+ opacity: .7;
}
> .save {
diff --git a/couchpotato/templates/index.html b/couchpotato/templates/index.html
index a89fec0..cd60a77 100644
--- a/couchpotato/templates/index.html
+++ b/couchpotato/templates/index.html
@@ -1,6 +1,6 @@
{% autoescape None %}
-
+