mirror of
https://github.com/openvk/openvk
synced 2024-12-23 09:01:15 +03:00
1047 lines
19 KiB
CSS
1047 lines
19 KiB
CSS
.noOverflow {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.audiosPaddingContainer {
|
|
padding: 8px;
|
|
}
|
|
|
|
.audiosSideContainer {
|
|
width: 74%;
|
|
}
|
|
|
|
.musicIcon {
|
|
background-image: url('/assets/packages/static/openvk/img/audios_controls.png?v=6');
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.musicIcon.pressed {
|
|
filter: brightness(150%);
|
|
}
|
|
|
|
/* Main music player */
|
|
|
|
.bigPlayer {
|
|
background-color: rgb(240, 241, 242);
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
width: 102.8%;
|
|
height: 46px;
|
|
border-bottom: 1px solid #d8d8d8;
|
|
box-shadow: 1px 0px 8px 0px rgba(34, 60, 80, 0.2);
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* for search */
|
|
.bigPlayer.tidy {
|
|
width: 100%;
|
|
margin-left: unset;
|
|
margin-top: unset;
|
|
}
|
|
|
|
.bigPlayer .bigPlayerWrapper {
|
|
padding: 0px 14px 0px 14px;
|
|
display: grid;
|
|
grid-template-columns: 0fr 3fr 1fr 0fr;
|
|
align-items: center;
|
|
height: 46px;
|
|
}
|
|
|
|
/* Play button and arrows */
|
|
.bigPlayer .playButtons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
width: 62px;
|
|
}
|
|
|
|
.bigPlayer .playButtons .playButton {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position-x: -72px;
|
|
}
|
|
|
|
.bigPlayer .playButtons .playButton.pause {
|
|
background-position-x: -168px;
|
|
}
|
|
|
|
.bigPlayer .playButtons .nextButton,
|
|
.bigPlayer .playButtons .backButton {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.bigPlayer .playButtons .nextButton {
|
|
background-position: -3px -51px;
|
|
}
|
|
|
|
.bigPlayer .playButtons .backButton {
|
|
background-position: -18px -51px;
|
|
}
|
|
|
|
.bigPlayer .playButtons .arrowsButtons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
height: 11px;
|
|
}
|
|
|
|
.broadcastButton {
|
|
width: 16px;
|
|
height: 12px;
|
|
background-position-y: -50px;
|
|
background-position-x: -64px;
|
|
margin-left: 6px;
|
|
float: left;
|
|
}
|
|
|
|
.broadcastButton.atProfile {
|
|
width: 13px;
|
|
height: 12px;
|
|
background-position-y: -50px;
|
|
background-position-x: -64px;
|
|
margin-left: 0px !important;
|
|
margin-right: 5px;
|
|
float: left;
|
|
}
|
|
|
|
/* Track panel and volume */
|
|
.bigPlayer .trackPanel {
|
|
position: relative;
|
|
margin-left: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 386px;
|
|
}
|
|
|
|
.bigPlayer .trackPanel .track {
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.tip_result {
|
|
width: max-content;
|
|
height: 11px;
|
|
padding: 4px;
|
|
top: -6px;
|
|
background: #f7f7f7;
|
|
border: 1px solid #d8d8d8;
|
|
position: absolute;
|
|
z-index: 10;
|
|
transition: all .1s ease-out;
|
|
user-select: none;
|
|
transform: translate(-20%, -15%);
|
|
}
|
|
|
|
.bigPlayer .volumePanel {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 12px;
|
|
width: 73px;
|
|
position: relative;
|
|
}
|
|
|
|
.bigPlayer .volumePanel .volumePanelTrack {
|
|
width: 100%;
|
|
}
|
|
|
|
.bigPlayer .slider, .audioEmbed .track .slider {
|
|
width: 15px;
|
|
height: 7px;
|
|
background: #606060;
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bigPlayer .trackInfo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 15px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.bigPlayer .trackPanel .trackInfo,
|
|
.bigPlayer .trackPanel .track,
|
|
.bigPlayer .volumePanel .volumePanelTrack {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.bigPlayer .trackInfo .trackName {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 81%;
|
|
height: 16px;
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.bigPlayer .trackInfo .timer span,
|
|
.bigPlayer .trackInfo .timer {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.bigPlayer .trackInfo a {
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
.bigPlayer .trackInfo .timer .elapsedTime {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Additional buttons */
|
|
.bigPlayer .additionalButtons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: relative;
|
|
gap: 7px;
|
|
height: 43px;
|
|
}
|
|
|
|
.bigPlayer .additionalButtons .repeatButton,
|
|
.bigPlayer .additionalButtons .shuffleButton,
|
|
.bigPlayer .additionalButtons .deviceButton {
|
|
width: 13px;
|
|
height: 14px;
|
|
}
|
|
|
|
.bigPlayer .additionalButtons .repeatButton {
|
|
background-position: -32px -49px;
|
|
}
|
|
|
|
.bigPlayer .additionalButtons .shuffleButton {
|
|
background-position: -50px -50px;
|
|
}
|
|
|
|
.bigPlayer .additionalButtons .deviceButton {
|
|
background-position: -201px -50px;
|
|
}
|
|
|
|
.bigPlayer .trackInfo a:hover {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bigPlayer .trackPanel .track .selectableTrack > div {
|
|
width: 96%;
|
|
position: relative;
|
|
}
|
|
|
|
.bigPlayer .volumePanel .selectableTrack > div {
|
|
position: relative;
|
|
width: 77%;
|
|
}
|
|
|
|
.audioEmbed .track > .selectableTrack, .bigPlayer .selectableTrack {
|
|
margin-top: 3px;
|
|
width: 100%;
|
|
border-top: #606060 1px solid;
|
|
height: 6px;
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Audio miniplayer */
|
|
#audioEmbed {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: #eee;
|
|
height: 40px;
|
|
width: 486px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-right: -50%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
border: 1px solid #8B8B8B;
|
|
}
|
|
|
|
/* Audio states */
|
|
.audioEntry {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.audioEntry .audioEntryWrapper {
|
|
padding: 9px 9px;
|
|
display: grid;
|
|
grid-template-columns: 0fr 10fr 1fr;
|
|
align-items: center;
|
|
gap: 9px;
|
|
height: 17px;
|
|
position: relative;
|
|
}
|
|
|
|
.audioEntry .audioEntryWrapper.compact {
|
|
padding: 10px 0px;
|
|
}
|
|
|
|
.audioEntry.nowPlaying {
|
|
background: #606060;
|
|
outline: 1px solid #4f4f4f;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .playIcon {
|
|
background-position-y: -16px !important;
|
|
}
|
|
|
|
.audioEntry.nowPlaying:hover {
|
|
background: #4e4e4e !important;
|
|
border-radius: inherit !important;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .performer a {
|
|
color: #f4f4f4 !important;
|
|
}
|
|
|
|
.audioEmbed.withdrawn .status > *, .audioEmbed.processed .playerButton > *, .audioEmbed.withdrawn .playerButton > * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.audioEmbed.withdrawn {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.audioEmbed.processed {
|
|
filter: opacity(0.6);
|
|
}
|
|
|
|
/* Audio subparts */
|
|
.audioEntry .playerButton {
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.audioEntry .nobold {
|
|
text-align: center;
|
|
min-width: 28px;
|
|
}
|
|
|
|
.audioEntry .performer a {
|
|
color: #4C4C4C;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .title {
|
|
color: #fff;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .status {
|
|
color: white;
|
|
}
|
|
|
|
.audioEntry .mini_timer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .mini_timer .nobold {
|
|
color: white !important;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .explicitMark path {
|
|
fill: #ffffff;
|
|
}
|
|
|
|
/* Audio icons */
|
|
.audioEntry.nowPlaying .buttons .musicIcon.edit-icon {
|
|
background-position: -152px -51px;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .buttons .musicIcon.download-icon {
|
|
background-position: -151px -67px;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .buttons .musicIcon.add-icon {
|
|
background-position: -94px -52px;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .buttons .musicIcon.report-icon {
|
|
background-position: -66px -67px;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .buttons .musicIcon.remove-icon-group {
|
|
background-position: -122px -67px;
|
|
}
|
|
|
|
.audioEntry.nowPlaying .buttons .musicIcon.remove-icon {
|
|
background-position: -108px -67px;
|
|
}
|
|
|
|
.audioEntry .subTracks {
|
|
display: none;
|
|
padding-bottom: 5px;
|
|
padding-left: 8px;
|
|
padding-right: 12px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.audioEntry .subTracks.shown {
|
|
display: flex;
|
|
}
|
|
|
|
.audioEntry .playerButton .playIcon {
|
|
background-image: url('/assets/packages/static/openvk/img/play_buttons.gif');
|
|
cursor: pointer;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.audioEntry .playerButton .playIcon.paused {
|
|
background-position-y: -16px;
|
|
}
|
|
|
|
.audioEntry .status {
|
|
/*position: relative;*/
|
|
height: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.audioEntry .status .mediaInfo {
|
|
cursor: pointer;
|
|
line-height: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.audioEntry .status .mediaInfo .info {
|
|
display: inline;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
from { left: -100%; }
|
|
to { left: 100%; }
|
|
}
|
|
|
|
.audioEntry .status:hover .mediaInfo {
|
|
position: absolute;
|
|
z-index: 2;
|
|
overflow: visible;
|
|
white-space: wrap;
|
|
text-overflow: unset;
|
|
width: 83%;
|
|
}
|
|
|
|
.audioEntry .status:hover .mediaInfo .info {
|
|
width: 100%;
|
|
}
|
|
|
|
.audioEntry .status strong {
|
|
color: #4C4C4C;
|
|
}
|
|
|
|
.audioEmbed .track {
|
|
padding: 0px 0;
|
|
}
|
|
|
|
.audioEmbed .track .selectableTrack {
|
|
width: 100%;
|
|
}
|
|
|
|
.selectableTrack .selectableTrackLoadProgress {
|
|
top: -13px;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
height: 7px;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.selectableTrack .selectableTrackLoadProgress .load_bar {
|
|
background: #e7e7e7;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
box-sizing: border-box;
|
|
height: 7px;
|
|
position: absolute;
|
|
}
|
|
|
|
.audioEmbed .selectableTrack .selectableTrackLoadProgress {
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
.audioEmbed .track .selectableTrack .selectableTrackSlider {
|
|
position: relative;
|
|
width: calc(100% - 18px);
|
|
}
|
|
|
|
.audioEmbed .subTracks .lengthTrackWrapper,
|
|
.audioEmbed .subTracks .volumeTrackWrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.audioEmbed .subTracks .lengthTrackWrapper .tip_result,
|
|
.audioEmbed .subTracks .volumeTrackWrapper .tip_result {
|
|
top: -20px;
|
|
}
|
|
|
|
.audioEmbed .subTracks .volumeTrackWrapper {
|
|
width: 81px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.audioEmbed.playing .track {
|
|
display: unset;
|
|
}
|
|
|
|
.audioEntry:hover {
|
|
background: #EEF0F2;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.audioEntry:hover .buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.audioEntry:hover .mini_timer .hideOnHover {
|
|
display: none;
|
|
}
|
|
|
|
.audioEntry .buttons {
|
|
display: none;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 5px;
|
|
position: absolute;
|
|
z-index: 9;
|
|
right: 10px;
|
|
top: 0;
|
|
/* чтоб избежать заедания во время ховера кнопки добавления */
|
|
clip-path: inset(0 0 0 0);
|
|
width: 62px;
|
|
height: 100%;
|
|
}
|
|
|
|
.audioEntry .buttons .edit-icon,
|
|
.audioEntry .buttons .download-icon,
|
|
.audioEntry .buttons .add-icon,
|
|
.audioEntry .buttons .add-icon-group,
|
|
.audioEntry .buttons .report-icon,
|
|
.add-icon-noaction,
|
|
.audioEntry .buttons .remove-icon,
|
|
.audioEntry .buttons .remove-icon-group {
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.audioEntry .buttons .edit-icon {
|
|
background-position: -137px -51px;
|
|
}
|
|
|
|
.audioEntry .buttons .download-icon {
|
|
background-position: -136px -67px;
|
|
}
|
|
|
|
.audioEntry .buttons .add-icon {
|
|
background-position: -80px -52px;
|
|
}
|
|
|
|
.audioEntry .buttons .add-icon-group {
|
|
background-position: -94px -52px;
|
|
transition: margin-right 0.1s ease-out, opacity 0.1s ease-out;
|
|
}
|
|
|
|
.audioEntry .buttons .report-icon {
|
|
background-position: -50px -67px;
|
|
}
|
|
|
|
.audioEntry .buttons .remove-icon {
|
|
background-position: -108px -52px;
|
|
}
|
|
|
|
.audioEntry .buttons .remove-icon-group {
|
|
width: 13px;
|
|
height: 11px;
|
|
background-position: -122px -52px;
|
|
}
|
|
|
|
/* Lyrics */
|
|
|
|
.audioEmbed .lyrics {
|
|
display: none;
|
|
padding: 6px 33px 10px 33px;
|
|
}
|
|
|
|
.audioEmbed .lyrics.showed {
|
|
display: block !important;
|
|
}
|
|
|
|
.audioEntry .withLyrics {
|
|
user-select: none;
|
|
color: #507597;
|
|
}
|
|
|
|
.audioEntry .withLyrics:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.playlistCover img {
|
|
max-width: 135px;
|
|
max-height: 135px;
|
|
}
|
|
|
|
.playlistBlock {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.playlistBlock .playlistWrapper {
|
|
float: left;
|
|
padding-left: 13px;
|
|
width:75%
|
|
}
|
|
|
|
.playlistCover .profile_links .profile_link {
|
|
width: 100%;
|
|
}
|
|
|
|
.PE_playlistEditPage {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.PE_playlistEditPage .PE_playlistInfo {
|
|
width: 76%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.PE_playlistEditPage textarea[name='description'] {
|
|
padding: 4px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.PE_end {
|
|
text-align: right;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* playlist listview */
|
|
|
|
.playlistListView {
|
|
display: flex;
|
|
padding: 7px;
|
|
gap: 9px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playlistListView:hover, .playlistListView .playlistCover {
|
|
background: #ebebeb;
|
|
}
|
|
|
|
.playlistListView .playlistCover img {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.playlistListView .playlistInfo, .playlistListView .playlistInfo .playlistInfoTopPart {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.playlistListView .playlistInfo {
|
|
gap: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.playlistListView .playlistInfo .playlistName {
|
|
font-weight: 600;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.playlistListView .playlistInfo .playlistMeta, .playlistListView .playlistInfo .playlistMeta span {
|
|
color: #676767;
|
|
}
|
|
|
|
/* other */
|
|
|
|
.ovk-diag-body .searchBox {
|
|
background: #e6e6e6;
|
|
padding-top: 10px;
|
|
height: 35px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
display: flex;
|
|
}
|
|
|
|
.ovk-diag-body .searchBox input {
|
|
height: 24px;
|
|
margin-right: -1px;
|
|
width: 77%;
|
|
}
|
|
|
|
.ovk-diag-body .searchBox select {
|
|
width: 29%;
|
|
padding-left: 8px;
|
|
height: 24px;
|
|
}
|
|
|
|
.ovk-diag-body .audiosInsert {
|
|
height: 82%;
|
|
padding: 9px 5px 9px 9px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.attachAudio {
|
|
width: 28%;
|
|
height: 26px;
|
|
padding-top: 11px;
|
|
text-align: center;
|
|
}
|
|
|
|
.attachAudio span {
|
|
user-select: none;
|
|
}
|
|
|
|
.attachAudio:hover {
|
|
background: rgb(236, 236, 236);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.explicitMark {
|
|
width: 13px;
|
|
height: 11px;
|
|
margin-bottom: -2px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.explicitMark path {
|
|
fill: #828a99;
|
|
fill-opacity: .7;
|
|
}
|
|
|
|
.audioStatus span {
|
|
color: #2B587A;
|
|
}
|
|
|
|
.audioStatus span:hover {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.audioStatus {
|
|
padding-top: 2px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.audiosDiv {
|
|
width: 103.1%;
|
|
display: flex;
|
|
margin: 0px 0px -10px -12px;
|
|
}
|
|
|
|
/* <center> 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣*/
|
|
.audiosDiv center span, .error_full_wrapper center span {
|
|
color: #707070;
|
|
margin: 120px 0px !important;
|
|
display: block;
|
|
}
|
|
|
|
.audiosDiv center {
|
|
margin-left: -10px;
|
|
}
|
|
|
|
.searchList.floating {
|
|
position: fixed;
|
|
z-index: 199;
|
|
width: 156px;
|
|
margin-top: -65px !important;
|
|
}
|
|
|
|
.audiosSearchBox input[type='search'] {
|
|
height: 25px;
|
|
width: 77%;
|
|
padding-left: 21px;
|
|
padding-top: 4px;
|
|
background: rgb(255, 255, 255) url("/assets/packages/static/openvk/img/search_icon.png") 5px 6px no-repeat;
|
|
}
|
|
|
|
.audiosSearchBox {
|
|
padding-bottom: 10px;
|
|
padding-top: 7px;
|
|
display: flex;
|
|
}
|
|
|
|
.audiosSearchBox select {
|
|
width: 30%;
|
|
padding-left: 7px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.audioStatus {
|
|
color: #2B587A;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.audioStatus::before {
|
|
background-image: url('/assets/packages/static/openvk/img/audios_controls.png');
|
|
background-repeat: no-repeat;
|
|
width: 11px;
|
|
height: 11px;
|
|
background-position: -66px -51px;
|
|
margin-top: 1px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
content: "";
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.friendsAudiosList {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.friendsAudiosList > a {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.friendsAudiosList .elem {
|
|
display: flex;
|
|
padding: 1px 1px;
|
|
width: 148px;
|
|
}
|
|
|
|
.friendsAudiosList .elem img {
|
|
width: 30px;
|
|
border-radius: 2px;
|
|
object-fit: cover;
|
|
height: 31px;
|
|
min-width: 30px;
|
|
}
|
|
|
|
.friendsAudiosList .elem .additionalInfo {
|
|
margin-left: 7px;
|
|
padding-top: 1px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.friendsAudiosList .elem .additionalInfo .name {
|
|
color: #2B587A;
|
|
}
|
|
|
|
.friendsAudiosList #used .elem .additionalInfo .name {
|
|
color: #F4F4F4;
|
|
}
|
|
|
|
.friendsAudiosList .elem .additionalInfo .desc {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
color: #878A8F;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.friendsAudiosList #used .elem .additionalInfo .desc {
|
|
color: #F4F4F4;
|
|
}
|
|
|
|
.friendsAudiosList .elem:hover {
|
|
background: #E8EBF0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.friendsAudiosList #used .elem:hover {
|
|
background: #787878;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.editContainer {
|
|
display:table;
|
|
clear:both;
|
|
width:100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.editContainer .playerContainer {
|
|
width: 78%;
|
|
float: left;
|
|
max-width: 78%;
|
|
min-width: 68%;
|
|
}
|
|
|
|
.addToPlaylist {
|
|
width: 22%;
|
|
float: left;
|
|
}
|
|
|
|
#_addAudioAdditional {
|
|
padding: 6px;
|
|
}
|
|
|
|
#_addAudioAdditional #_tabs {
|
|
margin: 0px -6px;
|
|
}
|
|
|
|
#_addAudioAdditional #_tabs .mb_tabs {
|
|
background-color: unset;
|
|
border-bottom: unset;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
#_addAudioAdditional #_tip {
|
|
margin: 5px 0px;
|
|
display: block;
|
|
}
|
|
|
|
#_addAudioAdditional #_content {
|
|
margin-top: 6px;
|
|
padding: 1px;
|
|
}
|
|
|
|
/* AJAX player */
|
|
#ajax_audio_player {
|
|
transition: background .1s ease-out;
|
|
background: rgba(44, 44, 44, 0.7);
|
|
padding: 1px;
|
|
width: 500px;
|
|
height: 37px;
|
|
position: fixed;
|
|
z-index: 1025;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#ajax_audio_player.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player #aj_player_internal_controls {
|
|
padding: 7px 8px;
|
|
display: flex;
|
|
gap: 7px;
|
|
}
|
|
|
|
#ajax_audio_player.ui-draggable-dragging {
|
|
background: rgba(20, 20, 20, 0.9);
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_close_btn, #ajax_audio_player #aj_player_play {
|
|
padding: 3px 0px;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_close_btn,
|
|
#ajax_audio_player #aj_player_play #aj_player_play_btn,
|
|
#ajax_audio_player #aj_player_buttons > div {
|
|
background: url('/assets/packages/static/openvk/img/audios_controls.png?v=6');
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_close_btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 10px;
|
|
height: 9px;
|
|
background-position: 0px -77px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_close_btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_play #aj_player_play_btn {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-position: -147px -28px;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_play #aj_player_play_btn.paused {
|
|
background-position: -165px -28px;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_track {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_track #aj_player_track_name {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_track #aj_player_track_name #aj_player_track_title,
|
|
#ajax_audio_player #aj_player_track #aj_player_track_name #aj_player_track_title b,
|
|
#ajax_audio_player #aj_player_track #aj_player_track_name #aj_player_track_title span,
|
|
#ajax_audio_player #aj_player_track #aj_player_track_name span {
|
|
color: white;
|
|
}
|
|
|
|
#ajax_audio_player #aj_time {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#ajax_audio_player #aj_time:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#ajax_audio_player .selectableTrack {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 6px;
|
|
border-top: #ffffff 1px solid;
|
|
user-select: none;
|
|
}
|
|
|
|
#ajax_audio_player .selectableTrack .slider {
|
|
width: 11px;
|
|
height: 6px;
|
|
background: #ffffff;
|
|
position: absolute;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_volume {
|
|
width: 60px;
|
|
padding-top: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_buttons #aj_player_previous {
|
|
width: 14px;
|
|
height: 12px;
|
|
background-position: -194px -5px;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_buttons #aj_player_repeat {
|
|
width: 14px;
|
|
height: 13px;
|
|
background-position: -233px -5px;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_buttons #aj_player_repeat.pressed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#ajax_audio_player #aj_player_buttons #aj_player_next {
|
|
width: 15px;
|
|
height: 12px;
|
|
background-position: -214px -5px;
|
|
}
|