.bsdn-player { width: 100%; position: relative; display: inline-flex; font-family: Tahoma, sans-serif; user-select: none; background-color: black; } .bsdn-player > .bsdn_controls, .bsdn-player > .bsdn_teaserWrap, .bsdn-player > .bsdn_contextMenu { position: absolute; } .bsdn_controls { display: flex; width: 100%; bottom: 0; background-color: hsl(0deg 0% 0% / 59%); border-top: 1px solid hsl(0deg 0% 100% / 70%); padding: 7px 12px; color: #fff; align-items: center; box-sizing: border-box; gap: 6px; z-index: 2; opacity: 0; } .bsdn-player.bsdn-dirty > .bsdn_controls { opacity: 1; } .bsdn_video { width: 100%; display: inline-flex; justify-content: center; } .bsdn_terebilkaUpperWrap { display: flex; justify-content: space-between; align-items: center; } .bsdn_terebilkaWrap { flex-grow: 1; display: flex; flex-direction: column; } .bsdn_logo { height: 8px; } p.bsdn_timeWrap { display: inline; margin: 0; font-size: 7pt; font-weight: bold; } .bsdn_terebilkaLowerWrap, .bsdn_soundControlSubWrap { position: relative; height: 6px; border-top: 1px solid white; } .bsdn_terebilkaBrick, .bsdn_soundControlBrick { position: absolute; height: 100%; width: 15px; background-color: #fff; pointer-events: none; } .bsdn_soundIcon { cursor: pointer; } .bsdn_soundControl { width: 64px; } .bsdn_soundControlBrick { width: 10px; } .bsdn_soundControlPadding { height: 8px; } button.bsdn_playButton { appearance: none; background: none; border: none; color: #fff; padding: 0 8px; padding-left: 0; font-size: 22px; cursor: pointer; } .bsdn_fullScreenButton { cursor: pointer; } .bsdn_fullScreenButton > img:hover { background: url("/assets/packages/static/openvk/img/bsdn/fullscreen_hover.gif"); object-fit: none; object-position: -64px 0; } .bsdn_teaserWrap { width: 100%; height: 100%; z-index: 1; color: #fff; display: flex; justify-content: center; align-items: center; background-color: hsl(0deg 0% 0% / 10%); } .bsdn_teaser { display: flex; padding: 10px 20px; width: 266px; background-color: hsl(0deg 0% 14.17% / 74.12%); border-radius: 10px; align-items: stretch; justify-content: space-between; box-sizing: border-box; } .bsdn_teaserTitleBox { display: flex; flex-direction: column; justify-content: space-around; } .bsdn_teaserButton { cursor: pointer; } time.bsdn_timeFull { margin-left: 10px; color: #b1b1b1; } .bsdn-player._bsdn_playing .bsdn_controls { opacity: 0; pointer-events: none; transition: 1s opacity ease-in-out; transition-delay: 2s; } .bsdn-player._bsdn_playing:hover .bsdn_controls { opacity: 1; pointer-events: unset; transition: .2s opacity ease-in-out; transition-delay: 0; } .bsdn_video > video { height: 100%; max-width: 100%; } .bsdn_contextMenu { z-index: 3; background-color: #f4f4f4; padding: 6px; border: 1px solid #908f90; width: 232px; height: 169px; font-size: 15px; box-sizing: border-box; } .bsdn_contextMenuElement { display: block; color: #666294; cursor: pointer; padding: 3px 0 3px 20px; } .bsdn_contextMenu hr { margin: 5px 0; border-color: #878f8e; border-bottom: none; } .bsdn_contextMenuElement:hover, .bsdn_contextMenuElement:active { color: #fff; } .bsdn_contextMenuElement:hover { background-color: #9797c8; } .bsdn_contextMenuElement:active { background-color: #5a5a8f; } .bsdn_teaserWrap span { color: #fff; } .bsdn_teaserButton > img { max-height: 50px; margin: 10px 0; } .bsdn_fullScreenButton > img, .bsdn_soundIcon { vertical-align: middle; }