dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Category styling

pull/5180/head
Ruud 10 years ago
parent
6c605c5e79
commit
82bea85cda
4 changed files with 101 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

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

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

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

@ -283,20 +283,19 @@
.suggestions .media_result:hover .actions{display:block} .suggestions .media_result:hover .actions{display:block}
.suggestions .media_result:hover h2 .title{opacity:0} .suggestions .media_result:hover h2 .title{opacity:0}
.suggestions .media_result .data.open .actions{display:none} .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)} .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{border-bottom:1px solid rgba(255,255,255,.2);position:relative} .category{margin-bottom:20px;position:relative}
.category>.delete{position:absolute;padding:16px;right:0;cursor:pointer;opacity:.6;color:#fd5353} .category>.delete{position:absolute;padding:16px;right:0;cursor:pointer;opacity:.6;color:#fd5353}
.category>.delete:hover{opacity:1} .category>.delete:hover{opacity:1}
.category .ctrlHolder:hover{background:0 0} .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:hover .formHint{opacity:1}
#category_ordering ul{float:left;margin:0;width:275px;padding:0} #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:last-child{border:0}
#category_ordering li .check{margin:2px 10px 0 0;vertical-align:top} #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>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 li .handle{width:20px;float:right}.page.log .nav{text-align:right;padding:0;margin:0}
#category_ordering .formHint{clear:none;float:right;width:250px;margin:0}.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{display:inline-block;padding:5px 10px;margin:0}
.page.log .nav li.clear,.page.log .nav li.select{cursor:pointer} .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)} .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{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 .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 .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{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 #eaeaea;display:block;position:absolute;width:0;margin:-6px 0 0 45%} .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 ul{width:92%;height:300px;overflow:auto;margin:0 4%;font-size:16px} .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 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 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.blur{opacity:.3}
.page.settings .directory_list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)} .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: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 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 label{float:right;width:auto;padding:0}
.page.settings .directory_list .actions .inlay{margin:0 0 0 7px} .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:4%} .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{float:right;padding:4%} .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>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>.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{font-weight:700;color:#ddd} .page.settings .directory_list .actions:last-child>.cancel{color:rgba(0,0,0,.4)}
.page.settings .directory_list .actions:last-child>.save{background:#9dc156} .page.settings .directory_list .actions:last-child>.save{margin-right:0}

49
couchpotato/static/style/settings.scss
View File

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

Write Preview
Loading…
Cancel
Save