webamp/css/playlist-window.css
Jordan Eldredge 2a1d819a3d Fix playlist scolling
Fixes #401
2017-09-30 01:15:11 -07:00

167 lines
2.7 KiB
CSS

/* Styles */
#winamp2-js #playlist-window {
height: 116px;
width: 275px;
display: flex;
flex-direction: column;
}
#winamp2-js .playlist-top {
width: 100%;
min-height: 20px;
max-height: 20px;
position: relative;
}
#winamp2-js .playlist-top-left {
width: 25px;
height: 20px;
position: absolute;
}
#winamp2-js .playlist-top-title {
width: 100px;
height: 20px;
margin: 0 auto;
position: absolute;
/* Giving left and right 0 seems to center */
left: 0;
right: 0;
}
#winamp2-js .playlist-top-right {
width: 25px;
height: 20px;
position: absolute;
right: 0;
}
#winamp2-js .playlist-middle {
flex-grow: 1;
display: flex;
flex-direction: row;
overflow: hidden;
}
#winamp2-js .playlist-middle-left {
background-repeat: repeat-y;
width: 12px;
min-width: 12px;
}
#winamp2-js .playlist-middle-center {
flex-grow: 1;
padding: 3px 0;
}
#winamp2-js .playlist-tracks {
overflow: hidden;
height: 100%;
}
#winamp2-js .playlist-tracks > div {
width: 100%;
display: table;
}
#winamp2-js .playlist-track {
font-size: 9px;
display: table-row;
line-height: 13px;
letter-spacing: 0.5px;
user-select: none;
}
#winamp2-js .playlist-track-number {
text-align: right;
padding-right: 3px;
display: table-cell;
width: 1%;
white-space: nowrap;
}
#winamp2-js .playlist-track-title {
flex-grow: 1;
display: table-cell;
width: auto;
}
#winamp2-js .playlist-track-title > span {
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
position: relative;
}
#winamp2-js .playlist-track-duration {
padding-right: 3px;
display: table-cell;
width: 1%;
white-space: nowrap;
}
#winamp2-js .playlist-middle-right {
background-repeat: repeat-y;
background-position: top right;
width: 20px;
min-width: 20px;
position: relative;
padding-bottom: 18px;
}
#winamp2-js .playlist-scrollbar {
height: 100%;
width: 8px;
margin-left: 5px;
}
#winamp2-js .playlist-scrollbar-handle {
width: 8x;
height: 18px;
}
#winamp2-js .playlist-bottom {
width: 100%;
height: 38px;
min-height: 38px;
max-height: 38px;
position: relative;
}
#winamp2-js .playlist-bottom-left {
width: 125px;
height: 100%;
position: absolute;
}
#winamp2-js .playlist-bottom-right {
width: 150px;
height: 100%;
position: absolute;
right: 0;
}
#winamp2-js .playlist-action-buttons {
position: absolute;
top: 22px;
left: 3px;
display: flex;
}
#winamp2-js .playlist-action-buttons > div {
height: 10px;
width: 10px;
}
#winamp2-js .playlist-visualizer {
width: 75px;
height: 100%;
position: absolute;
right: 150px;
display: none; /* Only show if the window is wide enough */
}
#winamp2-js #playlist-window .mini-time {
position: absolute;
top: 23px;
left: 66px;
}