Browse Source

Category styling

pull/5180/head
Ruud 10 years ago
parent
commit
82bea85cda
  1. 17
      couchpotato/core/plugins/category/static/category.scss
  2. 104
      couchpotato/static/scripts/page/settings.js
  3. 34
      couchpotato/static/style/combined.min.css
  4. 49
      couchpotato/static/style/settings.scss

17
couchpotato/core/plugins/category/static/category.scss

@ -1,13 +1,14 @@
@import "couchpotato/static/style/_mixins";
.add_new_category {
padding: 20px;
display: block;
text-align: center;
font-size: 20px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.category {
border-bottom: 1px solid rgba(255,255,255,0.2);
margin-bottom: 20px;
position: relative;
}
@ -28,8 +29,6 @@
}
.category .formHint {
width: 250px !important;
margin: 0 !important;
opacity: 0.1;
}
.category:hover .formHint {
@ -51,8 +50,9 @@
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 0 5px;
border-bottom: 1px solid $theme_off;
padding: 5px;
list-style: none;
}
#category_ordering li:last-child { border: 0; }
@ -69,14 +69,9 @@
}
#category_ordering li .handle {
background: url('../../images/handle.png') center;
width: 20px;
float: right;
}
#category_ordering .formHint {
clear: none;
float: right;
width: 250px;
margin: 0;
}

104
couchpotato/static/scripts/page/settings.js

@ -543,8 +543,6 @@ Option.Checkbox = new Class({
})
);
new Form.Check(self.input);
},
getValue: function(){
@ -759,67 +757,67 @@ Option.Directory = new Class({
if(!self.browser){
self.browser = new Element('div.directory_list').adopt(
new Element('div.pointer'),
new Element('div.actions').adopt(
self.back_button = new Element('a.back', {
'html': '',
new Element('div.wrapper').adopt(
new Element('div.actions').adopt(
self.back_button = new Element('a.back', {
'html': '',
'events': {
'click': self.previousDirectory.bind(self)
}
}),
new Element('label', {
'text': 'Hidden folders'
}).adopt(
self.show_hidden = new Element('input[type=checkbox]', {
'events': {
'change': function(){
self.getDirs();
}
}
})
)
),
self.dir_list = new Element('ul', {
'events': {
'click': self.previousDirectory.bind(self)
'click:relay(li:not(.empty))': function(e, el){
(e).preventDefault();
self.selectDirectory(el.get('data-value'));
},
'mousewheel': function(e){
(e).stopPropagation();
}
}
}),
new Element('label', {
'text': 'Hidden folders'
}).adopt(
self.show_hidden = new Element('input[type=checkbox]', {
new Element('div.actions').adopt(
new Element('a.clear.button', {
'text': 'Clear',
'events': {
'change': function(){
self.getDirs();
'click': function(e){
self.input.set('value', '');
self.hideBrowser(e, true);
}
}
})
)
),
self.dir_list = new Element('ul', {
'events': {
'click:relay(li:not(.empty))': function(e, el){
(e).preventDefault();
self.selectDirectory(el.get('data-value'));
},
'mousewheel': function(e){
(e).stopPropagation();
}
}
}),
new Element('div.actions').adopt(
new Element('a.clear.button', {
'text': 'Clear',
'events': {
'click': function(e){
self.input.set('value', '');
self.hideBrowser(e, true);
}),
new Element('a.cancel', {
'text': 'Cancel',
'events': {
'click': self.hideBrowser.bind(self)
}
}
}),
new Element('a.cancel', {
'text': 'Cancel',
'events': {
'click': self.hideBrowser.bind(self)
}
}),
new Element('span', {
'text': 'or'
}),
self.save_button = new Element('a.button.save', {
'text': 'Save',
'events': {
'click': function(e){
self.hideBrowser(e, true);
}),
new Element('span', {
'text': 'or'
}),
self.save_button = new Element('a.button.save', {
'text': 'Save',
'events': {
'click': function(e){
self.hideBrowser(e, true);
}
}
}
})
})
)
)
).inject(self.directory_inlay, 'before');
new Form.Check(self.show_hidden);
}
self.initial_directory = self.input.get('value');

34
couchpotato/static/style/combined.min.css

@ -283,20 +283,19 @@
.suggestions .media_result:hover .actions{display:block}
.suggestions .media_result:hover h2 .title{opacity:0}
.suggestions .media_result .data.open .actions{display:none}
.suggestions .media_result .actions a{margin-left:10px;vertical-align:middle}.add_new_category{padding:20px;display:block;text-align:center;font-size:20px;border-bottom:1px solid rgba(255,255,255,.2)}
.category{border-bottom:1px solid rgba(255,255,255,.2);position:relative}
.suggestions .media_result .actions a{margin-left:10px;vertical-align:middle}.add_new_category{padding:20px;display:block;text-align:center;font-size:20px}
.category{margin-bottom:20px;position:relative}
.category>.delete{position:absolute;padding:16px;right:0;cursor:pointer;opacity:.6;color:#fd5353}
.category>.delete:hover{opacity:1}
.category .ctrlHolder:hover{background:0 0}
.category .formHint{width:250px!important;margin:0!important;opacity:.1}
.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:-moz-grab;cursor:grab;border-bottom:1px solid rgba(255,255,255,.2);padding:0 5px}
#category_ordering li{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;border-bottom:1px solid #eaeaea;padding:5px;list-style:none}
#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}
#category_ordering li .handle{background:url(../../images/handle.png) center;width:20px;float:right}
#category_ordering .formHint{clear:none;float:right;width:250px;margin:0}.page.log .nav{text-align:right;padding:0;margin:0}
#category_ordering li .handle{width:20px;float:right}.page.log .nav{text-align:right;padding:0;margin:0}
.page.log .nav li{display:inline-block;padding:5px 10px;margin:0}
.page.log .nav li.clear,.page.log .nav li.select{cursor:pointer}
.page.log .nav li:hover:not(.active):not(.filter){background:rgba(255,255,255,.1)}
@ -637,20 +636,21 @@ input,select,textarea{font-size:1em;font-weight:300;padding:6.67px;background:#F
.page.settings .group_userscript .bookmarklet{display:block;float:left;padding:20px 15px 0 20px}
.page.settings .group_userscript .bookmarklet span{margin-left:10px;display:inline-block}
.page.settings .group_userscript img{display:block;clear:both;float:left;margin:20px;width:100%;max-width:680px}
.page.settings .directory_list{z-index:2;position:absolute;width:450px;margin:28px 0 20px 18.4%;background:#eaeaea;-webkit-box-shadow:0 20px 40px -20px rgba(0,0,0,.55);box-shadow:0 20px 40px -20px rgba(0,0,0,.55)}
.page.settings .directory_list .pointer{border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:6px solid #eaeaea;display:block;position:absolute;width:0;margin:-6px 0 0 45%}
.page.settings .directory_list ul{width:92%;height:300px;overflow:auto;margin:0 4%;font-size:16px}
.page.settings .directory_list li{padding:4px 30px 4px 10px;cursor:pointer;margin:0!important;border-top:1px solid rgba(255,255,255,.1);background:url(../images/right.arrow.png) 98% center no-repeat;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.page.settings .directory_list{z-index:2;position:absolute;width:450px;margin:28px 0 20px;background:#ac0000;-webkit-box-shadow:0 0 15px 2px rgba(0,0,0,.15);box-shadow:0 0 15px 2px rgba(0,0,0,.15);-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
.page.settings .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}
.page.settings .directory_list .wrapper{background:#FFF;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;margin-top:5px}
.page.settings .directory_list ul{width:92%;height:300px;overflow:auto;margin:0 20px}
.page.settings .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}
.page.settings .directory_list li.blur{opacity:.3}
.page.settings .directory_list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.page.settings .directory_list li:hover{color:#ac0000}
.page.settings .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}
.page.settings .directory_list .actions{clear:both;padding:4% 4% 2%;min-height:45px;position:relative;width:100%;text-align:right}
.page.settings .directory_list .actions{clear:both;padding:20px;min-height:45px;position:relative;width:100%;text-align:right}
.page.settings .directory_list .actions label{float:right;width:auto;padding:0}
.page.settings .directory_list .actions .inlay{margin:0 0 0 7px}
.page.settings .directory_list .actions .back{font-weight:700;width:160px;display:inline-block;padding:0;line-height:120%;vertical-align:top;position:absolute;text-align:left;left:4%}
.page.settings .directory_list .actions:last-child{float:right;padding:4%}
.page.settings .directory_list .actions label input{margin-left:10px}
.page.settings .directory_list .actions .back{font-weight:700;width:160px;display:inline-block;padding:0;line-height:120%;vertical-align:top;position:absolute;text-align:left;left:20px}
.page.settings .directory_list .actions:last-child{padding:20px}
.page.settings .directory_list .actions:last-child>span{padding:0 5px;text-shadow:none}
.page.settings .directory_list .actions:last-child>.clear{left:4%;position:absolute;background-color:#af3128}
.page.settings .directory_list .actions:last-child>.cancel{font-weight:700;color:#ddd}
.page.settings .directory_list .actions:last-child>.save{background:#9dc156}
.page.settings .directory_list .actions:last-child>.clear{left:20px;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin:0}
.page.settings .directory_list .actions:last-child>.cancel{color:rgba(0,0,0,.4)}
.page.settings .directory_list .actions:last-child>.save{margin-right:0}

49
couchpotato/static/style/settings.scss

@ -491,34 +491,39 @@
z-index: 2;
position: absolute;
width: 450px;
margin: 28px 0 20px 18.4%;
background: $theme_off;
box-shadow: 0 20px 40px -20px rgba(0,0,0,0.55);
margin: 28px 0 20px 0;
background: $primary_color;
box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
border-radius: $border_radius $border_radius 0 0;
.pointer {
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-bottom: 6px solid $theme_off;
border-bottom: 6px solid $primary_color;
display: block;
position: absolute;
width: 0;
margin: -6px 0 0 45%;
margin: -6px 0 0 100px;
}
.wrapper {
background: $background_color;
border-radius: $border_radius $border_radius 0 0;
margin-top: 5px;
}
ul {
width: 92%;
height: 300px;
overflow: auto;
margin: 0 4%;
font-size: 16px;
margin: 0 $padding;
}
li {
padding: 4px 30px 4px 10px;
padding: 4px $padding 4px 0;
cursor: pointer;
margin: 0 !important;
border-top: 1px solid rgba(255,255,255,0.1);
background: url('../images/right.arrow.png') no-repeat 98% center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -551,7 +556,7 @@
.actions {
clear: both;
padding: 4% 4% 2%;
padding: $padding;
min-height: 45px;
position: relative;
width: 100%;
@ -561,10 +566,10 @@
float: right;
width: auto;
padding: 0;
}
.inlay {
margin: 0 0 0 7px;
input {
margin-left: $padding/2;
}
}
.back {
@ -576,12 +581,11 @@
vertical-align: top;
position: absolute;
text-align: left;
left: 4%;
left: $padding;
}
&:last-child {
float: right;
padding: 4%;
padding: $padding;
> span {
padding: 0 5px;
@ -589,18 +593,19 @@
}
> .clear {
left: 4%;
left: $padding;
position: absolute;
background-color: #af3128;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
> .cancel {
font-weight: bold;
color: #ddd;
color: rgba(0,0,0,.4);
}
> .save {
background: #9dc156;
margin-right: 0;
}
}
}

Loading…
Cancel
Save