%PDF- %PDF-
Direktori : /home/emergentqj/jugement/wp-content/themes/Newspaper/includes/less_files/ |
Current File : /home/emergentqj/jugement/wp-content/themes/Newspaper/includes/less_files/video-playlists.less |
/* video list player */ /* player size configuration variable */ // 1 column @video-wrapper-height-1 : 182px; // 2 columns @video-wrapper-height-2 : 391px; // 3 column @video-wrapper-3 : 728px; @video-wrapper-height-3 : 409px; @playlist-wrapper-3 : 341px; //mixin for chorme sidebar .MIXIN_chrome_sidebar { &::-webkit-scrollbar-track { background-color: #383838; } &::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } &::-webkit-scrollbar-thumb { background-color: #919191; border-radius: 10px; } } // player title .td_video_playlist_title { position: relative; z-index: 1; background-color: #222; .td_video_title_text { font-family: @font1; font-weight: bold; font-size: 15px; color:#ffffff; margin-left: 17px; margin-right: 17px; vertical-align: middle; line-height: 24px; padding: 10px 0 10px 0; /* responsive phone */ @media (max-width: 767px) { text-align: center; } } } .td_wrapper_video_playlist { z-index: 1; position: relative; .td_video_controls_playlist_wrapper { background-color: @td_theme_color; position: relative; &:before { content: ''; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAGBAMAAADwPukCAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlM9KRgMBADiSB2HAAAAFElEQVR4XmNgYBBgUGAwYHBgCAAAA3wA8fpXm6EAAAAASUVORK5CYII=) repeat-x; width: 100%; height: 6px; position: absolute; bottom: -6px; z-index: 1; } } .td_video_stop_play_control { position: relative; width: 65px; height: 65px; outline: 0 !important; &:after { content: ''; width: 1px; height: 37px; background-color: rgba(255, 255 ,255 ,0.2); position: absolute; top: 14px; right: 0; } } .td_youtube_control, .td_vimeo_control { position: relative; top: 12px; left: 11px; cursor: pointer; } .td_video_title_playing { position: absolute; top: 13px; left:80px; font-family: @font2; font-size: 13px; line-height: 19px; font-weight: bold; color: #ffffff; padding-right: 7px; max-height: 37px; overflow: hidden; @media (min-width: 481px) and (max-width: @responsive_p_tablet_max) { max-height: 20px; top: 23px; } @media (max-width: 480px) { max-height: 37px; top: 13px; } } .td_video_time_playing { position: absolute; bottom:0; right:5px; font-family: @font1; font-size: 10px; font-style: italic; color: #ffffff; line-height: 17px; padding-right: 1px } //this will be added from javascript for current video playing .td_video_currently_playing { background-color: #404040; &:after { content: ''; position: absolute; top: 0; left: 0; border-left: 3px solid @td_theme_color !important; width: 3px; height: inherit; } } .td_click_video { height: 60px; display: block; width: 100%; position: relative; &:hover { background-color: #333333; cursor: pointer; } } .td_video_thumb { position: relative; top:10px; width: 72px; height: 40px; overflow: hidden; margin-left: 16px; img { position: relative; top: -6px; } } .td_video_title_and_time { position: absolute; top: 10px; margin: 0 30px 0 103px; .td_video_title { font-family: @font1; font-size: 12px; color: #ffffff; line-height: 15px; max-height: 30px; overflow: hidden; } } .td_video_time { font-family: @font1; font-size: 10px; font-style: italic; color: #777777; line-height: 13px; } .td_wrapper_player { background-color: #000; overflow: hidden; /* responsive portrait phone */ @media (max-width: @responsive_p_phone_max) { margin-bottom: -5px; } iframe{ width: 100%; height: 100%; } } .td_container_video_playlist { background-color: #222; vertical-align: top; overflow: hidden; } .td_playlist_clickable { overflow-y: auto; overflow-x: hidden; height: 347px; } } //3 columns .td_video_playlist_column_3 { .td_wrapper_player { display: block; width: @video-wrapper-3; height: @video-wrapper-height-3; /* responsive landscape tablet */ @media (min-width: @responsive_l_tablet_min) and (max-width: @responsive_l_tablet_max) { height: 365px; width: 649px; } /* responsive portrait tablet */ @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { width: 100%; height: 416px; } @media (max-width: @responsive_p_phone_max) { width: 100%; height: auto; } } .td_container_video_playlist { display: block; position: absolute; top: 0; right: 0; width: @playlist-wrapper-3; height: @video-wrapper-height-3; /* responsive landscape tablet */ @media (min-width: @responsive_l_tablet_min) and (max-width: @responsive_l_tablet_max) { height: 365px; width: 331px; } @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { position: relative; width: 100%; height: 305px; right: 0; } @media (max-width: @responsive_p_phone_max) { position: relative; width: 100%; height: 305px; right: 0; } @media (max-width: 480px) { position: relative; width: 100%; height: 245px; right: 0; } } //add scroll bar for tablet portrait and mobile .td_playlist_clickable.td_add_scrollbar_to_playlist_for_mobile { height: 348px; @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { margin-right: 10px; } @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: @responsive_p_phone_max){ margin-right: 10px; } @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { height: 240px; overflow-x: hidden; overflow-y: auto; .MIXIN_chrome_sidebar; } @media (max-width: @responsive_p_phone_max) { height: 240px; overflow-x: hidden; overflow-y: auto; .MIXIN_chrome_sidebar; } @media (max-width: 480px) { height: 180px; } } //add scroll bar for desktop and tablet landscape .td_playlist_clickable.td_add_scrollbar_to_playlist { height: 348px; @media screen and (-webkit-min-device-pixel-ratio:0) { margin-right: 10px; } .MIXIN_chrome_sidebar; /* responsive landscape tablet */ @media (min-width: @responsive_l_tablet_min) and (max-width: @responsive_l_tablet_max) { height: 300px; } @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { height: 240px; } @media (max-width: @responsive_p_phone_max) { height: 240px; } @media (max-width: 480px) { height: 180px; } } } //2 columns .td_video_playlist_column_2 { .td_wrapper_video_playlist { /* responsive portrait phone */ @media (max-width: @responsive_p_phone_max) { left: 0; } } .td_video_title_playing { max-height: 20px; top: 23px; @media (max-width: 480px) { max-height: 37px; top: 13px; } } .td_wrapper_player { display: block; height: @video-wrapper-height-2; /* responsive landscape tablet */ @media (min-width: @responsive_l_tablet_min) and (max-width: @responsive_l_tablet_max) { height: 360px; } @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { height: 272px; } @media (max-width: @responsive_p_phone_max) { display: block; height: auto; } } .td_container_video_playlist { display: block; height: 305px; @media (max-width: 480px) { height: 245px; } .td_playlist_clickable { height: 240px; @media (max-width: 480px) { height: 180px; } } .td_playlist_clickable.td_add_scrollbar_to_playlist_for_mobile, .td_playlist_clickable.td_add_scrollbar_to_playlist { @media screen and (-webkit-min-device-pixel-ratio:0) { margin-right: 10px; } .MIXIN_chrome_sidebar; } } } //1 column .td_video_playlist_column_1 { .td_wrapper_player { display: block; height: @video-wrapper-height-1; /* responsive landscape tablet */ @media (min-width: @responsive_l_tablet_min) and (max-width: @responsive_l_tablet_max) { height: 169px; } /* responsive portrait tablet */ @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { height: 128px; } @media (max-width: @responsive_p_phone_max) { display: block; width: 100%; height: auto; } } .td_container_video_playlist { display: block; @media (max-width: 480px) { height: 245px; } .td_playlist_clickable.td_add_scrollbar_to_playlist_for_mobile, .td_playlist_clickable.td_add_scrollbar_to_playlist{ height: 301px; @media screen and (-webkit-min-device-pixel-ratio:0) { margin-right: 10px; } @media (max-width: 480px) { height: 180px; } .MIXIN_chrome_sidebar; } } } //wp embed video - remove blue outline .wp-video-shortcode:focus { outline: 0 !important; }