add design to big player

src/assets/scss/5-modules/player-big.scss

@@ -4,7 +4,9 @@
 
 .playerBig__player {
   position: relative;
+  overflow: hidden;
   padding-bottom: calc(100% / (16/9));
+  border-radius: .4rem .4rem 0 0;
 }
 
 .playerBig__player > iframe {
@@ -19,7 +21,36 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
   width: 100%;
   height: 100%;
 }
+
+.playerBig__reduce,
+.playerBig__reduce:visited {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1;
+  display: inline-block;
+  align-items: center;
+  padding: .6rem 1rem;
+  border: none;
+  border-radius: .2rem;
+  background-color: $color-tertiary;
+  color: #fff;
+  font-weight: 500;
+  font-size: 1.1rem;
+  line-height: 1.27em;
+  opacity: .6;
+  transition: .15s opacity;
+}
+
+.playerBig__reduce:hover,
+.playerBig__reduce:active,
+.playerBig__reduce:focus {
+  opacity: 1;
+}
+
+.playerBig__reduce svg {
+  margin-left: .6rem;
+}

src/assets/scss/_colors.scss

@@ -6,8 +6,8 @@
 // --------------------------------------------------------------
 
 $color-primary: #635776;
-$color-secondary: #1abc9c;
-$color-tertiary: #34495e;
+$color-secondary: #453959;
+$color-tertiary: #312334;
 $color-info: #2185d0;
 
 // texts

src/components/Viewer.svelte

@@ -15,6 +15,7 @@
         ></YoutubePlayer>
 
         <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
+        <button class="playerBig__reduce">Reduce<IconReduce></IconReduce></button>
     </div>
 
     {#if !ready}
@@ -31,6 +32,7 @@
 
 <script>
     import { get } from 'svelte/store'
+    import IconReduce from '/components/icons/player/Reduce.svelte'
     import YoutubePlayer from '/components/YoutubePlayer'
     import Progress from '/components/player/Progress'
     import { paused, muted, volume, current, selectNext, loading } from '/store.js'

src/components/icons/player/Expand.svelte

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M12.4444 1.55555L1.55556 1.55555L1.55556 12.4444L7 12.4444L7 14L1.55556 14C0.692222 14 6.1196e-08 13.3 1.35991e-07 12.4444L1.08793e-06 1.55555C1.16272e-06 0.699998 0.692223 -1.84683e-06 1.55556 -1.77136e-06L12.4444 -8.19421e-07C13.3 -7.44626e-07 14 0.699999 14 1.55555L14 7L12.4444 7L12.4444 1.55555ZM8.55556 14L8.55556 12.4444L11.3478 12.4444L3.70222 4.79889L4.79889 3.70222L12.4444 11.3478L12.4444 8.55556L14 8.55556L14 14L8.55556 14Z"/>
+</svg>

src/components/icons/player/Reduce.svelte

@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M1 1L8 1L8 6.3H9V1C9 0.450001 8.55 1.98682e-06 8 1.98682e-06L1 0C0.445001 -4.85197e-08 0 0.45 0 1V8C0 8.55 0.445 9 1 9H6.3V8H1L1 1ZM5.29992 2.8V1.8L1.79992 1.8L1.79992 5.3L2.79992 5.3L2.79992 3.505L7.71492 8.42L8.41992 7.715L3.50492 2.8H5.29992Z"/>
+</svg>