Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
sintonia/airtime_mvc/public/css/playlist_builder.css
Yuchen Wang 36c36d2a97 CC-1976: Auto-expand the playlist box as the list grows 
Fixing issue introduced by my last commit, which made the click and drop area very small.
Also removed the wasted space at the bottom of the click and drop area.
2011-10-12 17:14:03 -04:00

445 lines
No EOL
9.2 KiB
CSS
Raw Blame History

#side_playlist {
width: 40%;
min-height: 475px;
padding: 8px;
padding-bottom: 0px;
font-size: 16px;
}
#side_playlist,
#side_playlist ul,
#side_playlist li {
float: left;
}
#spl_sortable,
#spl_sortable > li,
#side_playlist > div,
#spl_editor,
.spl_artist,
.spl_cue_in,
.spl_fade_in,
.spl_cue_out,
.spl_fade_out {
clear: left;
}
#side_playlist button {
font-size: 12px;
}
#side_playlist input,
#side_playlist textarea {
width: 200px;
}
#side_playlist textarea {
height: 100px;
}
#spl_sortable {
list-style: none;
padding:0;
padding-bottom:50px;
width:100%;
min-height: 320px;
margin-top:0;
margin-bottom:0;
}
#side_playlist li {
width: 99.5%;
margin-bottom:-1px;
position:relative;
}
#side_playlist li div.list-item-container, #side_playlist li div.list-item-container.ui-state-active {
height:56px;
border: none;
}
#spl_name {
}
.ui-icon-closethick {
margin-top: 7px;
}
.spl_title {
font-size:14px;
}
.spl_playlength {
float:right;
font-size:14px;
padding:0 5px 0 0;
width:100px;
text-align:right;
}
.spl_artist {
font-size:12px;
color:#d5d5d5;
}
.spl_offset {
float: right;
text-align: right;
padding: 0 5px 0 0;
color: #D5D5D5;
}
/*#spl_editor {
height: 50px;
}*/
#spl_editor > div > span {
/* display: inline-block;
width: 150px;*/
}
.ui-icon-closethick,
.ui-icon-play,
.spl_fade_control,
.spl_text_input {
cursor: pointer;
}
.spl_text_input input {
cursor: text;
}
#spl_error {
font-size: 14px;
padding: 0.3em;
/*width: 440px;*/
text-align: center;
}
#side_playlist h3 {
font-size:20px;
margin:9px 0 3px 0;
padding:0;
color:#444444;
font-weight:normal;
clear:both;
float:left;
}
#side_playlist h4 {
font-size:15px;
margin:8px 0 10px 0;
padding:0;
color:#4f4f4f;
font-weight:normal;
clear:both;
float:left;
}
#side_playlist h3 + h4 {
margin:0 0 11px 0;
}
#spl_sortable a.big_play {
display:block;
width:20px;
height:50px;
margin:2px 0 0 2px;
text-align:center;
border:1px solid #5b5b5b;
float:left;
background-color: #707070;
background: -moz-linear-gradient(top, #707070 0, #666666 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(100%, #666666));
}
#spl_sortable a.big_play:hover {
border:1px solid #282828;
background-color: #3b3b3b;
background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929));
}
#spl_sortable a.big_play .ui-icon-play {
margin: 17px 0 0 1px;
}
#spl_sortable a.big_play .ui-icon-pause {
margin: 17px 0 0 1px;
}
#spl_sortable a.big_play:hover .ui-icon-play, #spl_sortable a.big_play:hover .ui-icon-pause {
background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png);
}
#spl_sortable .ui-icon-closethick {
position:absolute;
top:3px;
right:6px;
z-index:3;
}
#spl_sortable .ui-icon-closethick:hover {
background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png)
}
#spl_sortable .spl_fade_control {
position:absolute;
right:35px;
z-index: 6;
height:15px;
width:33px;
font-size:9px;
background-color:transparent;
}
#spl_sortable li .container {
}
#spl_sortable .text-row {
height: 20px;
line-height: 19px;
overflow: hidden;
padding: 0 30px 0 10px;
text-indent: 2px;
margin:-1px 0 0 0;
float:none;
}
#spl_sortable .top {
padding-top:9px;
}
#spl_sortable li .spl_fade_control.ui-state-default {
background: transparent url(images/crossfade_playlist.png) no-repeat 0 0;
border:none;
}
#spl_sortable li .spl_fade_control.ui-state-active {
background: transparent url(images/crossfade_playlist.png) no-repeat 0 -30px;
border:none;
}
#spl_sortable li .crossfade, #spl_sortable li .cue-edit {
background:#debc9e url(images/crossfade_bg.png) repeat-x 0 0 !important;
border:1px solid #5d5d5d;
border-width: 1px 0 0 0;
min-height:35px;
}
#spl_sortable li .cue-edit {
background:#b6d1d5 url(images/cue-editor_bg.png) repeat-x 0 0 !important;
}
#spl_sortable dl.inline-list {
margin:10px 0 0 37px;
}
#spl_sortable li .spl_fade_start, #spl_sortable li .spl_fade_end {
background-color: transparent;
float:right;
font-size: 9px;
height: 15px;
right: 35px;
width: 33px;
margin-top:2px;
}
#spl_sortable li .spl_fade_start.ui-state-default {
background: transparent url(images/fade_in.png) no-repeat 0 0;
border:none;
}
#spl_sortable li .spl_fade_start.ui-state-active {
background: transparent url(images/fade_in.png) no-repeat 0 -30px;
border:none;
}
#spl_sortable li .spl_fade_end.ui-state-default {
background: transparent url(images/fade_out.png) no-repeat 0 0;
border:none;
}
#spl_sortable li .spl_fade_end.ui-state-active {
background: transparent url(images/fade_out.png) no-repeat 0 -30px;
border:none;
}
.crossfade dl.inline-list, .cue-edit dl.inline-list, .crossfade-main dl.inline-list {
padding-bottom:5px;
clear:left;
}
.crossfade dl.inline-list dt, .cue-edit dl.inline-list dt, .crossfade-main dl.inline-list dt {
min-width: 90px;
}
.crossfade dl.inline-list dd, .cue-edit dl.inline-list dd, .crossfade-main dl.inline-list dd {
float: left;
font-size: 12px;
margin: 0;
}
.edit-error {
color:#b80000;
margin:0;
padding-bottom:0;
font-size:12px;
display:none;
}
/*.edit-error:last-child {
padding-bottom:10px;
}*/
.spl_text_input {
color:#fff;
}
.crossfade-main {
background:#debc9e;
border:1px solid #5b5b5b;
padding:10px 10px 0 10px;
margin:0 1px 16px 0;
position:relative;
}
.crossfade-main .edit-error {
padding-bottom:4px;
margin:0;
}
.crossfade-main .edit-error:last-child {
padding-bottom:2px;
}
.crossfade-main .ui-icon-closethick {
position: absolute;
right: 6px;
top: 3px;
z-index: 3;
}
#spl_sortable li .spl_cue {
background-color: transparent;
float:right;
font-size: 9px;
height: 15px;
right: 35px;
width: 33px;
margin-top:2px;
cursor:pointer;
}
#spl_sortable li .spl_cue.ui-state-default {
background: transparent url(images/cue_playlist.png) no-repeat 0 0;
border:none;
}
#spl_sortable li .spl_cue.ui-state-default:hover {
background: transparent url(images/cue_playlist.png) no-repeat 0 -15px;
border:none;
}
#spl_sortable li .spl_cue.ui-state-active, #spl_sortable li .spl_cue.ui-state-active:hover {
background: transparent url(images/cue_playlist.png) no-repeat 0 -30px;
border:none;
}
/*--/////////////// Changes 16.05.2011 ////////////--*/
.playlist_title {
margin: 16px 0 10px 0;
height:26px;
clear:both;
}
#side_playlist .playlist_title h3, #side_playlist .playlist_title h4 {
margin: 0;
padding: 0;
}
#side_playlist .playlist_title h3 {
float:left;
width:84%;
}
#side_playlist .playlist_title h4 {
float:right;
clear:none;
font-size: 16px;
padding-top:4px;
}
#side_playlist .playlist_title h3 a {
padding: 0 22px 0 2px;
background:url(images/icon_edit_l.png) no-repeat right center;
text-decoration:none;
}
#side_playlist .playlist_title h3 a:hover {
background-color:#D8D8D8;
}
.element_hidden {
display: none;
}
#side_playlist .playlist_title h3 input[type="text"] {
background-color: #dddddd;
border: 1px solid #8F8F8F;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
height: 23px;
margin: 0;
padding: 0;
text-indent: 3px;
-moz-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
width:95%;
}
#side_playlist .zend_form {
margin: 0;
padding: 0;
}
#side_playlist .zend_form dt, #side_playlist .zend_form dd {
display: block;
float: none;
margin: 4px 0 0;
padding: 0;
width:100%;
}
#side_playlist .zend_form dd.buttons {
margin-top: 8px;
text-align:right;
}
#side_playlist .zend_form dd.buttons .ui-button {
margin: 0 0 0 10px;
}
#side_playlist .zend_form dt {
color:#5B5B5B;
font-weight: bold;
margin: 9px 0 0;
padding: 0 2px;
}
#side_playlist .zend_form dt:first-child {
margin-top: 0;
}
#side_playlist .zend_form dd textarea {
background-color: #dddddd;
border: 1px solid #5B5B5B;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
margin: 0;
padding: 2px 0 0 0;
-moz-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
width:99.7%;
}
#side_playlist fieldset {
border: 1px solid #9a9a9a;
margin: 0 0 8px 0;
padding: 8px;
}
#side_playlist fieldset.closed .zend_form{
display:none;
}
#side_playlist fieldset.closed {
border-width: 1px 0 0;
margin-bottom: -6px;
margin-left:1px;
}
fieldset > legend {
color: #4f4f4f;
font-size: 12px;
line-height: 140%;
}
.ui-widget-content fieldset legend .ui-icon {
float: left;
background-image:url(redmond/images/ui-icons_454545_256x240.png);
}
#side_playlist .zend_form input, #side_playlist .zend_form textarea {
width: auto;
}
Reference in a new issue View git blame Copy permalink