Updated video card settings panel

Refs https://github.com/TryGhost/Team/issues/1229

ghost/admin/app/styles/app-dark.css

@@ -735,6 +735,35 @@ input:focus,
     border-color: var(--green) !important;
 }
 
+.kg-settings-panel {
+    background-color: var(--lightgrey-d1);
+    box-shadow:
+        0px -1px 10px rgba(0, 0, 0, 0.2),
+        0px 2.8px 2.2px rgba(0, 0, 0, 0.1),
+        0px 6.7px 5.3px rgba(0, 0, 0, 0.1),
+        0px 12.5px 10px rgba(0, 0, 0, 0.12),
+        0px 22.3px 17.9px rgba(0, 0, 0, 0.12),
+        0px 41.8px 33.4px rgba(0, 0, 0, 0.16),
+        0px 100px 80px rgba(0, 0, 0, 0.2)
+    ;
+}
+
+.kg-settings-panel .for-switch .input-toggle-component {
+    background: var(--lightgrey-l2);
+}
+
+.kg-settings-panel .gh-btn-group {
+    background: var(--lightgrey);
+}
+
+.kg-settings-panel .gh-btn-group .gh-btn-group-selected span {
+    background: var(--lightgrey-l2) !important;
+}
+
+.kg-settings-panel .kg-upload-thumbnail-xl:hover {
+    background: var(--lightgrey) !important;
+}
+
 .emoji-picker__emoji:hover {
     background: var(--lightgrey) !important;
 }
@@ -747,6 +776,10 @@ input:focus,
     fill: var(--black);
 }
 
+.kg-video-thumbnail-xl-container {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23303e46' d='M0 0h24v24H0z'/%3E%3Cpath fill='%233e515b' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
 .image-overlay button {
     background: var(--whitegrey);
 }

ghost/admin/app/styles/components/koenig.css

@@ -2048,18 +2048,12 @@ button.emoji-picker__category-button.active {
     cursor: auto;
 }
 
-.kg-upload-button .koenig-audio-replace-icon,
+.kg-upload-button .kg-replace-icon {
-.kg-upload-button .koenig-audio-upload-icon {
     width: 18px;
     height: 18px;
     margin: .6rem .8rem;
 }
 
-.koenig-audio-upload-icon path {
-    stroke: var(--darkgrey);
-    stroke-width: 2;
-}
-
 .kg-upload-button .image-overlay {
     position: absolute;
     top: 0;
@@ -2337,20 +2331,20 @@ button.emoji-picker__category-button.active {
 }
 
 .kg-video-card .kg-player-container input[type="range"]::-moz-range-progress {
-    background: var(--lightgrey);
+    background: #CED4D9;
 }
 
 .kg-video-card .kg-audio-current-time {
-    color: var(--white);
+    color: #fff;
 }
 
 .kg-video-card .kg-audio-playback-rate {
-    color: var(--white);
+    color: #fff;
 }
 
 .kg-video-card .kg-audio-play-icon svg,
 .kg-video-card .kg-audio-unmute-icon svg {
-    fill: var(--white);
+    fill: #fff;
 }
 
 .kg-video-card .kg-large-play-icon {
@@ -2368,7 +2362,7 @@ button.emoji-picker__category-button.active {
     width: 20px;
     height: auto;
     margin-left: 2px;
-    fill: var(--white);
+    fill: #fff;
 }
 
 .kg-video-card .image-overlay {
@@ -2389,6 +2383,73 @@ button.emoji-picker__category-button.active {
     margin-top: -10px;
 }
 
+.kg-settings-panel .kg-upload-thumbnail-xl {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    border: 1px dashed var(--whitegrey-d2);
+    background: var(--white);
+}
+
+.kg-settings-panel .kg-upload-thumbnail-xl:hover {
+    background: var(--white);
+}
+
+.kg-settings-panel .kg-upload-thumbnail-xl svg {
+    width: 20px;
+    height: auto;
+    fill: var(--midgrey);
+    transition: var(--animation-speed-fast) ease-out;
+    transform: scale(1.0);
+}
+
+.kg-settings-panel .kg-upload-thumbnail-xl:hover svg {
+    transform: scale(1.08);
+}
+
+.kg-settings-panel .kg-thumbnail-xl-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E6EEF2' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23D8E2E8' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E");
+    border-radius: var(--border-radius);
+}
+
+.kg-settings-panel .kg-thumbnail-xl {
+    width: 100%;
+    height: auto;
+    max-height: 120px;
+    object-fit: cover;
+    border-radius: var(--border-radius);
+}
+
+.kg-settings-panel .kg-replace-icon {
+    width: 18px;
+    height: 18px;
+    margin: .6rem .8rem;
+}
+
+.kg-settings-panel .kg-thumbnail-xl-container .image-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 6px;
+    color: #fff;
+    background-image: linear-gradient(180deg,rgba(0,0,0,0.2) 0,transparent 70%,transparent 100%);
+    opacity: 0;
+    transition: all 0.15s ease-in-out;
+}
+
+.kg-settings-panel .kg-thumbnail-xl-container:hover .image-overlay {
+    opacity: 1;
+}
+
 /* Multimedia player UI
 /* --------------------------------------------------------------- */
 
@@ -2429,7 +2490,7 @@ button.emoji-picker__category-button.active {
     width: 100%;
     height: 4px;
     cursor: pointer;
-    background: rgba(124, 139, 154, 0.25);
+    background: rgba(124, 139, 154, 0.3);
     border-radius: 2px;
 }
 
@@ -2456,7 +2517,7 @@ button.emoji-picker__category-button.active {
     width: 100%;
     height: 4px;
     cursor: pointer;
-    background: rgba(124, 139, 154, 0.25);
+    background: rgba(124, 139, 154, 0.3);
     border-radius: 2px;
 }
 

ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs

@@ -73,7 +73,7 @@
                                 <div class="image-overlay">
                                     <div class="flex flex-row-reverse">
                                         <button class="bg-white-90 br3 pe-auto" {{on "click" this.deleteThumbnail}}>
-                                            {{svg-jar "koenig/kg-trash" class="koenig-audio-replace-icon fill-darkgrey"}}
+                                            {{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
                                         </button>
                                     </div>
                                 </div>

ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs

@@ -1,6 +1,6 @@
 <KoenigCard
     @env={{@env}}
-    @class={{concat "kg-card kg-video-card mih10 miw-100 relative " (kg-style "breakout" size=@payload.cardWidth)}}
+    @class={{concat "kg-card kg-video-card kg-card-hover mih10 miw-100 relative ba b--transparent" (kg-style "breakout" size=@payload.cardWidth)}}
     @headerOffset={{@headerOffset}}
     @toolbar={{this.toolbar}}
     @payload={{@payload}}
@@ -136,27 +136,31 @@
             @onComplete={{this.customThumbnailUploadCompleted}}
             as |uploader|
         >
-            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
+            <div class="kg-settings-panel-control">
                 <label class="kg-settings-panel-control-label">Custom thumbnail</label>
                 <div class="kg-settings-panel-control-input">
-                        <div class="relative">
+                        <div class="relative w-100">
-                            <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg">
+                            {{#if uploader.isUploading}}
-                                {{#if uploader.isUploading}}
+                                {{!-- {{uploader.progressBar}} --}}
-                                    {{!-- {{uploader.progressBar}} --}}
+                                <div class="kg-upload-thumbnail-xl">
-                                    <GhLoadingSpinner />
+                                    {{uploader.progressBar}}
-                                {{else if @payload.customThumbnailSrc}}
+                                </div>
-                                    <div class="gh-branding-image-container transparent-bg">
+                            {{else if @payload.customThumbnailSrc}}
-                                        <img class="blog-icon" src={{@payload.customThumbnailSrc}} {{on "click" uploader.triggerFileDialog}}>
+                                <div class="kg-thumbnail-xl-container">
-                                        <button type="button" class="gh-setting-action-smallimg-delete absolute top-0" {{on "click" this.deleteCustomThumbnail}}>
+                                    <img class="kg-thumbnail-xl" src={{@payload.customThumbnailSrc}} {{on "click" uploader.triggerFileDialog}}>
-                                            {{svg-jar "trash" class="w4 h4 fill-white"}}
+                                    <div class="image-overlay">
-                                        </button>
+                                        <div class="flex flex-row-reverse">
+                                            <button class="bg-white-90 br3 pe-auto" {{on "click" this.deleteCustomThumbnail}}>
+                                                {{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
+                                            </button>
+                                        </div>
                                     </div>
-                                {{else}}
+                                </div>
-                                    <button type="button" class="gh-btn gh-btn-icon gh-btn-white self-center" {{on "click" uploader.triggerFileDialog}}>
+                            {{else}}
-                                        <span>{{svg-jar "upload-fill"}}</span>
+                                <button type="button" class="gh-btn kg-upload-thumbnail-xl" {{on "click" uploader.triggerFileDialog}}>
-                                    </button>
+                                    {{svg-jar "upload-fill"}}
-                                {{/if}}
+                                </button>
-                            </div>
+                            {{/if}}
                         </div>
                         <div style="display:none">
                             <GhFileInput