Change colors to reflect Docusaurus theme colors; Fix icon padding

Author: ValentaTomas

src/theme/CodeBlock/VideoPlayer/CloseIconBig.tsx

@@ -6,7 +6,7 @@ export interface Props {
 
 function CloseIconBig({ className = '' }: Props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 26 23" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={`feather feather-x ${className}`}><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`feather feather-x ${className}`}><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
   )
 }
 

src/theme/CodeBlock/VideoPlayer/PlayButton.tsx

@@ -20,7 +20,7 @@ function PlayButton({
 }: Props) {
   return (
     <div
-      className={isPlaying ? `${styles['play-wrapper-selected']} ${styles['play-wrapper']}` : `${styles['play-wrapper-normal']} ${styles['play-wrapper']}`}
+      className={styles['play-wrapper']}
       onClick={isPlaying ? onClose : onOpen}
     >
       <img
@@ -29,7 +29,7 @@ function PlayButton({
         className={styles['play-thumbnail']}
       >
       </img>
-      {isPlaying ? <CloseIconBig className={styles['play']} /> : <PlayIcon className={styles['play']} />}
+      {isPlaying ? <CloseIconBig className={styles['close']} /> : <PlayIcon className={styles['play']} />}
     </div>
   )
 }

src/theme/CodeBlock/VideoPlayer/VideoModal/styles.module.css

@@ -14,24 +14,21 @@
 }
 
 .modal-header {
-  height: 30px;
+  padding: 5px 5px 4px 0px;
   display: flex;
+  flex: 1;
   flex-direction: row-reverse;
+  align-items: center;
 }
 
 .modal-close {
-  font-family: sans-serif;
-  font-size: 20px;
-  margin-top: auto;
-  display: flex;
-  margin-bottom: auto;
   color: gray;
-  cursor: pointer;
-  margin-right: 8px;
+  display: flex;
 }
 
 .modal-close:hover {
   color: white;
+  cursor: pointer;
 }
 
 .iframe {

src/theme/CodeBlock/VideoPlayer/styles.module.css

@@ -25,17 +25,14 @@
   height: 40px;
   overflow: hidden;
   border-radius: 50%;
-}
 
-.play-wrapper-normal {
-  color: #0ac069;
-  border: 2px solid #0ac069;
+  color: var(--ifm-color-primary);
+  border: 2px solid var(--ifm-color-primary);
 }
 
-.play-wrapper-selected,
 .play-wrapper:hover {
-  border: 2px solid #11df7b;
-  color: #11df7b;
+  border: 2px solid var(--ifm-color-primary-dark);
+  color: var(--ifm-color-primary-dark);
 }
 
 .play-thumbnail {
@@ -47,12 +44,15 @@
   -ms-user-select: none;
 
   height: 100%;
-  filter: brightness(0.9) blur(2px);
+  filter: brightness(0.83) blur(2px);
 }
 
 .play {
-  padding-left: 4px;
-  z-index: 50;
+  position: absolute;
+  margin-left: 4px;
+}
+
+.close {
   position: absolute;
 }
 

src/vite.css

@@ -9,4 +9,9 @@
   margin: 10px;
   margin-top: 20px;
   z-index: 90;
+}
+
+:root {
+  --ifm-color-primary: yellow;
+  --ifm-color-primary-dark: orange;
 }