Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Updated video card frontend rendering

Browse source 
Refs https://github.com/TryGhost/Team/issues/1229
This commit is contained in:
Sanne de Vries 2021-12-14 11:48:28 +01:00
parent 845ed665f0
commit 5a798c35ba
1 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
core/frontend/src/cards/css/video.css
View file

@ -40,16 +40,29 @@
background: transparent; background: transparent;
} }
.kg-video-player-container {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
z-index: 999;
}
.kg-video-player { .kg-video-player {
position: absolute;
bottom: 0;
display: flex; display: flex;
flex-grow: 1;
align-items: center; align-items: center;
padding: 8px 12px; width: 100%;
z-index: 9999;
padding: 12px 16px;
} }
.kg-video-current-time { .kg-video-current-time {
min-width: 38px; min-width: 38px;
padding: 0 4px; padding: 0 4px;
color: #fff;
font-family: inherit; font-family: inherit;
font-size: .85em; font-size: .85em;
font-weight: 500; font-weight: 500;
@ -58,7 +71,7 @@
} }
.kg-video-time { .kg-video-time {
color: #ababab; color: rgba(255, 255, 255, 0.6);
font-family: inherit; font-family: inherit;
font-size: .85em; font-size: .85em;
font-weight: 500; font-weight: 500;
@ -73,7 +86,6 @@
.kg-video-play-icon, .kg-video-play-icon,
.kg-video-pause-icon { .kg-video-pause-icon {
position: relative; position: relative;
bottom: 1px;
padding: 0px 4px 0 0; padding: 0px 4px 0 0;
font-size: 0; font-size: 0;
background: transparent; background: transparent;
@ -87,7 +99,7 @@
.kg-video-pause-icon svg { .kg-video-pause-icon svg {
width: 14px; width: 14px;
height: 14px; height: 14px;
fill: currentColor; fill: #fff;
} }
.kg-video-seek-slider { .kg-video-seek-slider {
@ -98,6 +110,7 @@
.kg-video-playback-rate { .kg-video-playback-rate {
min-width: 37px; min-width: 37px;
padding: 0 4px; padding: 0 4px;
color: #fff;
font-family: inherit; font-family: inherit;
font-size: .85em; font-size: .85em;
font-weight: 600; font-weight: 600;
@ -110,7 +123,7 @@
.kg-video-mute-icon, .kg-video-mute-icon,
.kg-video-unmute-icon { .kg-video-unmute-icon {
position: relative; position: relative;
bottom: 1px; bottom: -1px;
padding: 0 4px; padding: 0 4px;
font-size: 0; font-size: 0;
background: transparent; background: transparent;
@ -120,7 +133,7 @@
.kg-video-unmute-icon svg { .kg-video-unmute-icon svg {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: currentColor; fill: #fff;
} }
.kg-video-volume-slider { .kg-video-volume-slider {
@ -134,7 +147,7 @@
width: var(--seek-before-width) !important; width: var(--seek-before-width) !important;
height: 4px; height: 4px;
cursor: pointer; cursor: pointer;
background-color: currentColor; background-color: #EBEEF0;
border-radius: 2px; border-radius: 2px;
} }
@ -145,7 +158,7 @@
width: var(--volume-before-width) !important; width: var(--volume-before-width) !important;
height: 4px; height: 4px;
cursor: pointer; cursor: pointer;
background-color: currentColor; background-color: #EBEEF0;
border-radius: 2px; border-radius: 2px;
} }
@ -192,15 +205,15 @@
width: 100%; width: 100%;
height: 4px; height: 4px;
cursor: pointer; cursor: pointer;
background: rgba(124, 139, 154, 0.25); background: rgba(255, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
} }
.kg-video-card input[type="range"]::-webkit-slider-thumb { .kg-video-card input[type="range"]::-webkit-slider-thumb {
position: relative; position: relative;
box-sizing: content-box; box-sizing: content-box;
width: 12px; width: 13px;
height: 12px; height: 13px;
margin: -5px 0 0 0; margin: -5px 0 0 0;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
@ -220,19 +233,19 @@
width: 100%; width: 100%;
height: 4px; height: 4px;
cursor: pointer; cursor: pointer;
background: rgba(124, 139, 154, 0.25); background: rgba(255, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
} }
.kg-video-card input[type="range"]::-moz-range-progress { .kg-video-card input[type="range"]::-moz-range-progress {
background: currentColor; background: #EBEEF0;
border-radius: 2px; border-radius: 2px;
} }
.kg-video-card input[type="range"]::-moz-range-thumb { .kg-video-card input[type="range"]::-moz-range-thumb {
box-sizing: content-box; box-sizing: content-box;
width: 12px; width: 13px;
height: 12px; height: 13px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
@ -261,13 +274,13 @@
} }
.kg-video-card input[type="range"]::-ms-fill-upper { .kg-video-card input[type="range"]::-ms-fill-upper {
background: currentColor; background: #EBEEF0;
} }
.kg-video-card input[type="range"]::-ms-thumb { .kg-video-card input[type="range"]::-ms-thumb {
box-sizing: content-box; box-sizing: content-box;
width: 12px; width: 13px;
height: 12px; height: 13px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;