mediacms/static/css/playlist.css

3 wiersze
21 KiB
CSS

.playlist-form-field.playlist-title.focused:after,.playlist-form-field.playlist-description.focused:after{background-color:var(--playlist-form-title-focused-bg-color)}.playlist-privacy{border-color:var(--playlist-privacy-border-color)}.playlist-form-wrap .playlist-form-actions button.cancel-btn{color:var(--playlist-form-cancel-button-text-color)}.playlist-form-wrap .playlist-form-actions button.cancel-btn:hover,.playlist-form-wrap .playlist-form-actions button.cancel-btn:focus{color:var(--playlist-form-cancel-button-hover-text-color)}.playlist-form-wrap textarea,.playlist-form-wrap input[type=text]{color:var(--playlist-form-field-text-color);border-color:var(--playlist-form-field-border-color)}.playlist-form-wrap textarea:focus,.playlist-form-wrap input[type=text]:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.playlist-form-field.playlist-title,.playlist-form-field.playlist-description{position:relative}.playlist-form-field.playlist-title.focused:after,.playlist-form-field.playlist-description.focused:after{content:"";position:absolute;bottom:-1px;width:100%;height:2px;display:block}.playlist-form-field.playlist-title.invalid:after,.playlist-form-field.playlist-description.invalid:after{content:"";position:absolute;bottom:-1px;width:100%;height:2px;display:block;background-color:rgba(255,0,0,.8)}.playlist-privacy{padding-bottom:12px;border-style:solid;border-width:0 0 1px}.playlist-form-wrap .playlist-form-field{position:relative;margin:0 24px;margin-top:16px}.playlist-form-wrap .playlist-form-label{display:block;font-size:12px;line-height:20px;letter-spacing:.132px}.playlist-form-wrap .playlist-form-actions{position:relative;display:inline-block;width:100%;float:left;margin-top:4px;padding:8px}.playlist-form-wrap .playlist-form-actions button{height:40px;padding:10px 16px;font-size:14px;line-height:20px;letter-spacing:.007px;font-weight:500;border-width:0;background:none;position:relative;width:auto;float:left}.playlist-form-wrap .playlist-form-actions button.create-btn{float:right;color:var(--theme-color, var(--default-theme-color))}.playlist-form-wrap label,.playlist-form-wrap textarea,.playlist-form-wrap input[type=text]{display:block;width:100%}.playlist-form-wrap textarea{min-width:100%;max-width:100%;min-height:21px;height:24px;line-height:21px;overflow-y:hidden;overflow-wrap:break-word;vertical-align:baseline;resize:none}.playlist-form-wrap textarea,.playlist-form-wrap input[type=text]{padding:0px 0 2px 0;font-size:14px;line-height:20px;border-width:0 0 1px;background:none;outline:0}.playlist-form-wrap textarea::-webkit-input-placeholder, .playlist-form-wrap input[type=text]::-webkit-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea:-moz-placeholder, .playlist-form-wrap input[type=text]:-moz-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea::-moz-placeholder, .playlist-form-wrap input[type=text]::-moz-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea:-ms-input-placeholder, .playlist-form-wrap input[type=text]:-ms-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea::-ms-input-placeholder, .playlist-form-wrap input[type=text]::-ms-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea::placeholder,.playlist-form-wrap input[type=text]::placeholder{color:#909090;opacity:1}.playlist-form-wrap textarea:-ms-input-placeholder,.playlist-form-wrap input[type=text]:-ms-input-placeholder{color:#909090}.playlist-form-wrap textarea::-ms-input-placeholder,.playlist-form-wrap input[type=text]::-ms-input-placeholder{color:#909090}.playlist-form-wrap input[type=radio]{margin-right:16px;vertical-align:middle}.playlist-form-wrap label{padding:4px 0;font-size:14px;line-height:21px;cursor:pointer}
#page-playlist{background-color:var(--playlist-page-bg-color)}.playlist-details{color:var(--playlist-page-details-text-color)}.playlist-details .playlist-thumb{background-color:var(--playlist-page-thumb-bg-color)}.playlist-details .playlist-title h1{color:var(--playlist-page-title-link-text-color)}.playlist-details .playlist-title h1 a{color:inherit}.playlist-details .playlist-actions .circle-icon-button{background-color:var(--playlist-page-actions-circle-icon-bg-color)}.playlist-details .playlist-actions .playlist-options-wrap .popup-main .nav-menu ul li button{color:var(--playlist-page-actions-nav-item-button-text-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal{color:var(--playlist-page-actions-popup-message-bottom-cancel-button-text-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:hover,.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:focus{color:var(--playlist-page-actions-popup-message-bottom-cancel-button-hover-text-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:hover .material-icons,.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:focus .material-icons{color:var(--playlist-page-actions-popup-message-bottom-cancel-button-icon-hover-text-color)}.playlist-details .playlist-status{color:var(--playlist-page-status-text-color);background-color:var(--playlist-page-status-bg-color)}.playlist-details .playlist-status .material-icons{color:var(--playlist-page-status-icon-text-color)}.playlist-details .playlist-description a{text-decoration:none}.playlist-details .playlist-author{border-top-color:var(--playlist-page-author-border-top-color)}.playlist-details .playlist-author .playlist-author-name a{color:var(--playlist-page-author-name-link-color)}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button{color:var(--playlist-page-author-edit-playlist-icon-button-text-color);background-color:var(--playlist-page-author-edit-playlist-icon-button-bg-color)}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button:active{color:var(--playlist-page-author-edit-playlist-icon-button-active-text-color)}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap{color:var(--playlist-page-author-edit-playlist-form-wrap-text-color);background-color:var(--playlist-page-author-edit-playlist-form-wrap-bg-color)}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .playlist-form-wrap{border-color:var(--playlist-page-author-edit-playlist-form-wrap-border-color)}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button:hover,.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button:focus,.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button:active{color:var(--playlist-page-author-edit-playlist-form-wrap-title-circle-icon-hover-text-color)}.playlist-details .playlist-author .playlist-author-thumb span{color:var(--playlist-page-author-edit-playlist-author-thumb-text-color);background-color:var(--playlist-page-author-edit-playlist-author-thumb-bg-color)}.playlist-details{background:var(--playlist-page-details-bg-color)}.playlist-videos-list>*{background:var(--playlist-page-video-list-bg-color)}@media screen and (min-width: 1008px){.playlist-videos-list{background:var(--playlist-page-video-list-bg-color)}.playlist-videos-list>*{background:none}}.playlist-videos-list .item .item-content h3 span{background-color:var(--playlist-page-video-list-item-title-bg-color)}.playlist-videos-list .item:hover{background-color:var(--playlist-page-video-list-item-title-hover-bg-color)}.playlist-videos-list .item:hover .item-content h3 span{background-color:var(--playlist-page-video-list-item-title-hover-bg-color)}.playlist-videos-list .item:after{border-top-color:var(--playlist-page-video-list-item-after-bg-color)}.playlist-videos-list .item-thumb,.playlist-videos-list a.item-thumb{background-color:var(--playlist-page-details-bg-color)}.playlist-videos-list .item-order-number{color:var(--playlist-page-video-list-item-order-text-color)}.playlist-videos-list .item-playlist-options-wrap .circle-icon-button:hover,.playlist-videos-list .item-playlist-options-wrap .circle-icon-button:focus,.playlist-videos-list .item-playlist-options-wrap .circle-icon-button:active{color:var(--playlist-page-video-list-item-options-icon-hover-color)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal{color:var(--playlist-page-video-list-item-options-popup-cancel-removal-button-text-color)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:hover,.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:focus{color:var(--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-text-color)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:hover .material-icons,.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:focus .material-icons{color:var(--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-icon-text-color)}.playlist-videos-list .item-playlist-drag .circle-icon-button{background-color:transparent;background-color:rgba(0,0,0,0)}.playlist-videos-list .item-playlist-drag .circle-icon-button:hover,.playlist-videos-list .item-playlist-drag .circle-icon-button:focus,.playlist-videos-list .item-playlist-drag .circle-icon-button:active{color:var(--playlist-page-video-list-item-options-icon-hover-color)}@media screen and (min-width: 1008px){#page-playlist{position:absolute;top:0;left:0;right:0;bottom:0;display:block;height:100%}#page-playlist>*,#page-playlist .page-main-wrap,#page-playlist .page-main{height:100%}}#page-playlist .page-main{padding-bottom:0 !important}@media screen and (min-width: 1008px){#page-playlist .page-main{min-height:-webkit-calc(100vh - 56px);min-height:-moz-calc(100vh - 56px);min-height:calc(100vh - 56px)}}@media screen and (min-width: 492px){#page-playlist .item-content{padding-right:48px}#page-playlist .item-main{display:block;width:auto}#page-playlist .item-main a{display:inline-block}#page-playlist .item-main h3{margin-top:12px;margin-bottom:8px}}@media screen and (min-width: 492px)and (max-width: 1008px){#page-playlist .item-main h3{margin-top:6px}}#page-playlist .items-list{max-width:100%}@media screen and (min-width: 1008px){.page-main-wrap #page-playlist{position:relative;top:auto;left:auto;right:auto;bottom:auto}.page-main-wrap #page-playlist>*,.page-main-wrap #page-playlist .page-main-wrap,.page-main-wrap #page-playlist .page-main{height:100%}}.playlist-details{position:relative;display:block;width:100%;padding:24px 32px;font-size:14px;line-height:21px;overflow-wrap:break-word;white-space:pre-wrap}@media screen and (min-width: 1008px){.playlist-details{width:420px;min-height:100%;max-height:100%;overflow:auto;min-height:-webkit-calc(100vh - 56px);min-height:-moz-calc(100vh - 56px);min-height:calc(100vh - 56px)}}.playlist-details .playlist-thumb{position:relative;margin-bottom:16px;background-position:center;-moz-background-size:cover;background-size:cover}.playlist-details .playlist-thumb.no-thumb:before{position:absolute;top:50%;left:50%;margin:0;margin-top:-2.25rem;margin-left:-1.5rem;font-size:48px;line-height:1;padding:0;font-family:"Material Icons";text-decoration:none;content:""}.playlist-details .playlist-thumb>*{position:relative;display:block;width:100%;padding-bottom:56%}.playlist-details .playlist-thumb>*>*{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.playlist-details .playlist-thumb>*>* img{max-width:100%;height:auto;visibility:hidden}.playlist-details .playlist-thumb>*>* .play-all{position:absolute;bottom:0;left:0;right:0;display:block;text-align:center;color:rgba(255,255,255,.8);background-color:rgba(17,17,17,.8)}.playlist-details .playlist-thumb>*>* .play-all>*{display:table;width:100%;height:40px}.playlist-details .playlist-thumb>*>* .play-all>*>*{display:table-cell;vertical-align:middle;padding-top:2px}.playlist-details .playlist-thumb>*>* .play-all .material-icons{margin-right:8px;margin-bottom:2px}.playlist-details .playlist-thumb>*>* .play-all .play-all-label{margin-right:8px}.playlist-details .playlist-title h1{font-size:24px;font-weight:400;line-height:30px;margin:0 0 8px}.playlist-details .playlist-title h1 a{text-decoration:none}.playlist-details .playlist-meta{margin-bottom:4px}.playlist-details .playlist-meta>div{display:inline}.playlist-details .playlist-meta>div:before{content:"•";margin:0 6px}.playlist-details .playlist-meta>div:first-child:before{content:"";margin:0}.playlist-details .playlist-actions{position:relative}.playlist-details .playlist-actions a.circle-icon-button,.playlist-details .playlist-actions button.circle-icon-button{vertical-align:top;display:inline-block;margin-left:8px}.playlist-details .playlist-actions a.circle-icon-button:first-child,.playlist-details .playlist-actions button.circle-icon-button:first-child{margin-left:-8px}.playlist-details .playlist-actions .playlist-options-wrap .popup{position:absolute;top:100%;left:-8px;margin-bottom:32px;top:auto;bottom:100%;margin-bottom:4px}.playlist-details .playlist-actions .playlist-options-wrap.playlist-options-main .popup{width:180px}.playlist-details .playlist-actions .playlist-options-wrap .popup-main .nav-menu{padding:8px 0}.playlist-details .playlist-actions .playlist-options-wrap .popup-main .nav-menu ul li button{font-size:13px}.playlist-details .playlist-actions .popup-message-bottom button{position:relative;width:auto;padding:0;border:0}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal,.playlist-details .playlist-actions .popup-message-bottom button.proceed-playlist-removal{background-color:transparent;background-color:rgba(0,0,0,0)}.playlist-details .playlist-actions .popup-message-bottom button.proceed-playlist-removal{float:right;color:var(--theme-color, var(--default-theme-color))}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal{float:left}.playlist-details .playlist-status{position:relative;display:inline-block;margin:8px 0 4px;padding:2px 4px 1px 4px;font-size:12px;font-weight:500;line-height:12px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.playlist-details .playlist-status .material-icons{font-size:13px;display:inline-block;margin:0 3px 1px 0}.playlist-details .playlist-status div{position:relative;display:inline-block}.playlist-details .playlist-status div:first-letter{text-transform:capitalize}.playlist-details .playlist-description{display:block;padding-top:8px;padding-bottom:0px}.playlist-details .playlist-author{display:block;margin-top:16px;padding:16px 0;border-top-width:1px;border-top-style:solid}.playlist-details .playlist-author>*{display:table;width:100%}.playlist-details .playlist-author>*>*{display:table-cell;vertical-align:top}.playlist-details .playlist-author a{text-decoration:none}.playlist-details .playlist-author .playlist-author-thumb{width:48px}.playlist-details .playlist-author .playlist-author-thumb span{display:block;width:48px;height:48px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;overflow:hidden;margin-right:16px;background-position:center;-moz-background-size:cover;background-size:cover;background-repeat:no-repeats}.playlist-details .playlist-author .playlist-author-thumb span img{width:100%;height:100%;visibility:hidden}.playlist-details .playlist-author .playlist-author-thumb span .material-icons{width:100%;height:100%;line-height:48px;text-align:center}.playlist-details .playlist-author .playlist-author-name{min-height:48px;vertical-align:middle}.playlist-details .playlist-author .playlist-author-name a{font-size:14px;font-weight:500}.playlist-details .playlist-author .edit-playlist{padding-left:16px;padding-top:4px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button{position:relative;float:right;width:auto;height:auto;display:inline-block;font-size:14px;font-weight:500;letter-spacing:.007px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button>*{-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button>*>*{display:table;padding:6px 16px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button>*>*>*{display:table-cell;vertical-align:bottom;line-height:1.5}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button .material-icons{line-height:1;padding-right:8px;vertical-align:bottom}.playlist-details .playlist-author .edit-playlist .popup{position:absolute}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap{position:relative;width:100%;max-width:280px;display:inline-block;text-align:initial}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title{height:52px;padding:16px 52px 15px 24px;line-height:20px;font-size:16px}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button{position:absolute;top:6px;right:6px;background:none}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .playlist-form-wrap{border-width:1px 0 0;border-style:solid}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .playlist-description{margin-top:16px}.playlist-videos-list{padding:0 32px 32px}@media screen and (min-width: 1008px){.playlist-videos-list{position:absolute;top:0;right:0;left:0;display:block;height:100%;overflow:auto;padding:0}}@media screen and (min-width: 1008px){.playlist-videos-list{margin:0 0 0 420px}}.playlist-videos-list .item{position:relative;max-width:100%;padding:16px 0 16px 36px;margin-bottom:0 !important}.playlist-videos-list .item:after{content:"";position:absolute;display:block;bottom:0;left:36px;right:24px;border-top-width:1px;border-top-style:solid}.playlist-videos-list .item:first-child{margin-top:1px;padding-top:23px}@media screen and (max-width: 1007px){.playlist-videos-list .item:last-child{margin-bottom:1px !important}.playlist-videos-list .item:last-child:after{border-top-width:0}}.playlist-videos-list .item-order-number{position:absolute;top:0;left:0;bottom:0;display:block;width:36px;font-size:14px;font-weight:500;line-height:16px;padding-top:4px}.playlist-videos-list .item-order-number>div{display:table;width:100%;height:100%}.playlist-videos-list .item-order-number>div>div{display:table-cell;text-align:center;vertical-align:middle}@media screen and (min-width: 492px){.playlist-videos-list .items-list-wrap{min-height:67px}.playlist-videos-list .item-content{min-height:67px !important}.playlist-videos-list .item-thumb{position:absolute !important;top:0 !important;left:0 !important;width:120px !important;height:67px !important;min-height:67px !important;padding-bottom:0}.playlist-videos-list .item-main{margin-left:128px !important}}.playlist-videos-list .item-playlist-options-wrap{position:relative;width:auto;height:auto;text-align:right}.playlist-videos-list .item-playlist-options-wrap .circle-icon-button{display:inline-block;background-color:transparent;background-color:rgba(0,0,0,0)}.playlist-videos-list .item-playlist-options-wrap .popup{position:absolute;bottom:100%;right:0}.playlist-videos-list .item-playlist-options-wrap.item-playlist-options-main .popup{width:16rem}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button{position:relative;width:auto;padding:0;border:0}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal,.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.proceed-playlist-removal{background-color:transparent;background-color:rgba(0,0,0,0)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.proceed-playlist-removal{float:right;color:var(--theme-color, var(--default-theme-color))}@media screen and (min-width: 492px){.playlist-videos-list .item-playlist-options-wrap{position:absolute;top:50%;right:24px;margin-top:-20px;text-align:initial}.playlist-videos-list .item-playlist-options-wrap .popup{bottom:auto;top:-12px;right:100%;margin-right:4px;margin-bottom:32px}}@media screen and (min-width: 492px){.playlist-videos-list .item:last-child .item-playlist-options-wrap .popup,.playlist-videos-list .item:nth-last-child(2) .item-playlist-options-wrap .popup{top:auto;bottom:-40px}}@media screen and (min-width: 492px){.playlist-videos-list .item:first-child .item-playlist-options-wrap .popup{top:-12px;bottom:auto}}.playlist-videos-list.draggable .item-content{overflow:visible}.playlist-videos-list.draggable .item:hover .item-order-number:after{content:"drag_handle";position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-12px;font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;cursor:move}.playlist-videos-list.draggable .item:hover .item-order-number div div{visibility:hidden}.playlist-videos-list.draggable .items-list.on-dragging .item{background-color:var(--playlist-page-video-list-bg-color)}.playlist-videos-list.draggable .items-list.on-dragging .item .item-content h3 span{background-color:var(--playlist-page-video-list-bg-color)}.playlist-videos-list.draggable .items-list.on-dragging .item .item-order-number:after{display:none !important}.playlist-videos-list.draggable .items-list.on-dragging .item .item-order-number div div{visibility:visible !important}