.playlists-container { width: 100%; height: 100%; display: flex; flex-direction: column; } .playlists-header { min-height: 80px; max-height: 80px; box-sizing: border-box; width: 100%; display: flex; flex-direction: row; border-bottom: solid 1px #10101011; } .playlists-cover { width: 10%; height: 100%; border-right: solid 1px #10101011; } .playlists-info { height: 100%; width: 90%; padding-left: 10px; display: flex; align-items: center; } .pl-del { width: 50px; } .title-name { font-weight: bold; font-size: 2em; height: 100%; width: 30%; display: flex; align-items: center; margin: 0; } .playlists-songs { height: 85%; width: 100%; } .pl-songs-header { height: 8%; width: 100%; display: flex; flex-direction: row; border-bottom: solid 1px #10101011; } .pl-songs-hdn { width: 10%; text-align: center; display: flex; justify-content: center; align-items: center; border-right: solid 1px #10101011; } .pl-songs-hd-info { width: 90%; display: flex; flex-direction: row; align-items: end; } .pl-songs-hd-info span { display: inline-block; width: 13%; text-align: center; } .pl-songs-list { width: 90%; height: 92%; margin-left: 10%; border-left: solid 1px #10101011; overflow: auto; } .pl-songs-item { display: flex; flex-direction: row; width: 100%; height: 50px; } .pl-songs-item:hover { background-color: #10101011; } .pl-songs-item > div { display: flex; align-items: center; justify-content: center; width: 13%; position: relative; } .pl-songs-item span { display: inline-block; width: 100%; text-align: center; } .img64px img { width: 64px; height: 64px; } .img32px img { width: 32px; height: 32px; } .img24px img { width: 24px; height: 24px; } .img20px img { width: 20px; height: 20px; } .coversize img { width: 64px; height: 64px; } .flex-ct { display: flex; align-items: center; justify-content: center; } .centering span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* nav playlsits menu */ #playlists { position: relative; } .playlists-menu { display: none; position: absolute; /* transform: translate(-25%, -10%); */ background-color: #FFF5DA; border: solid 1px #10101011; border-radius: 5px; margin-top: 10px; width: 100px; left: 50%; top: 50%; transform: translate(-55%, 15%); max-height: 80px; overflow: auto; padding: 0 10px; box-sizing: border-box; max-height: 100px; z-index: 999; } .playlists-menu div { width: 100%; margin: 5px 0; } .playlists-menu a { display: inline-block; width: 100%; } /* more options */ .moreopt-container { display: inline-block; position: absolute; width: 100px; max-height: 100px; border: solid 1px #10101010; border-radius: 5px; z-index: 999; left: 0%; top: 0%; transform: translate(-50%, 0%); padding: 5px; background-color: #FFF5DA; overflow: auto; } .moreopt-container > div { text-align: center; width: 100%; } .moreopt-container a:hover { background-color: #10101011; } .added { color: gray; } /* new playlist */ .new-pl, .del-pl { display: flex; flex-direction: column; color: #000001; } .new-pl > div, .del-pl > div { display: flex; justify-content: center; } .new-pl-name { height: 40%; } .del-pl-msg { height: 40%; width: 100%; } .new-pl-name > input { width: 80%; height: 50%; max-height: 30px; background-color: #F2F2F211; border: solid 1px #000; border-radius: 5px; padding-left: 10px; } .new-pl-submit, .del-pl-submit { height: 20%; } .new-pl-submit > a, .del-pl-submit > a { text-align: center; font-size: 2em; }