octo
/
mastoradio
forked from Mastodon/mastoradio-la-radio-di-mastodon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add design to big player

This commit is contained in:
Tixie 2020-02-16 19:04:47 +01:00
parent 71f302e0cf
commit 0a00572539
5 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/assets/scss/5-modules/player-big.scss
View File

@ -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;
}

4
src/assets/scss/_colors.scss
View File

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

2
src/components/Viewer.svelte
View File

@ -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'

3
src/components/icons/player/Expand.svelte Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 576 B

3
src/components/icons/player/Reduce.svelte Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 421 B