0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update icons for mute and unmute

Browse source
This commit is contained in:
imohkay 2021-10-26 15:56:07 +05:30
commit eab1b1b4f2
15 changed files with 120 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/static/css/partials/_about.scss
View file

@ -51,13 +51,13 @@
}
}
.about-phantasma-block {
//.about-phantasma-block {
@media screen and (min-width: 800px) {
background: rgba(255, 255, 255, 0.04);
padding: var(--spacing-2);
}
}
//@media screen and (min-width: 800px) {
//background: rgba(255, 255, 255, 0.04);
//padding: var(--spacing-2);
//}
//}
.accordion-checkbox {
position: absolute;

27
app/static/css/partials/_ascroll.scss
View file

@ -56,8 +56,8 @@
max-width: var(--container-width);
margin: auto;
padding: 20px 20px;
font-size: 22px;
line-height: 26px;
font-size: 20px;
line-height: 24px;
figure {
width: 100%;
@ -70,4 +70,27 @@
}
}
}
.annotation-icon-wrapper {
border: 3px solid rgba(#fff, 0.8);
border-radius: 50%;
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
background-size: 300% 100%;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
animation: background_animation 30s ease-in-out infinite;
opacity: 0.9;
&:hover, &:focus {
opacity: 1;
}
}
.annotation-icon {
color: rgba(#fff, 1);
font-size: 38px;
}
}

2
app/static/css/partials/_film.scss
View file

@ -186,4 +186,4 @@ main > .film {
video.player.fullscreen:-webkit-full-screen {
width: 100%;
height: 100%;
}
}

15
app/static/css/partials/_icomoon.scss
View file

@ -1,9 +1,9 @@
@font-face {
font-family: 'icomoon';
src:
url('/static/fonts/icomoon/icomoon.ttf?ru5m2') format('truetype'),
url('/static/fonts/icomoon/fonts/icomoon.woff?ru5m2') format('woff'),
url('/static/fonts/icomoon/icomoon.svg?ru5m2#icomoon') format('svg');
url('/static/fonts/icomoon/icomoon.ttf?5ydswh') format('truetype'),
url('/static/fonts/icomoon/fonts/icomoon.woff?5ydswh') format('woff'),
url('/static/fonts/icomoon/icomoon.svg?5ydswh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -36,3 +36,12 @@
.f-icon-triangle-down:before {
content: "\e903";
}
.f-icon-volume_down:before {
content: "\e906";
}
.f-icon-volume_up:before {
content: "\e905";
}
.f-icon-volume_off:before {
content: "\e904";
}

4
app/static/css/partials/_text.scss
View file

@ -62,6 +62,8 @@ em {
}
main > .texts {
max-width: var(--container-width);
padding: var(--spacing-2);
box-sizing: border-box;
a {
@ -70,7 +72,7 @@ main > .texts {
}
.text {
margin: var(--spacing);
margin: 0 0 var(--spacing-2) 0;
h1 {
font-weight: bold;
font-size: 20px;

3
app/static/fonts/icomoon/demo-files/demo.css
View file

@ -149,4 +149,7 @@ p {
.fs1 {
font-size: 20px;
}
.fs2 {
font-size: 24px;
}

47
app/static/fonts/icomoon/demo.html
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;4)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;7)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 20</h1>
@ -70,6 +70,51 @@
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="f-icon-volume_down"></span>
<span class="mls"> f-icon-volume_down</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e906" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe906;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="f-icon-volume_up"></span>
<span class="mls"> f-icon-volume_up</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e905" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe905;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs2">
<div class="clearfix bshadow0 pbs">
<span class="f-icon-volume_off"></span>
<span class="mls"> f-icon-volume_off</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e904" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe904;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
</div>
<!--[if gt IE 8]><!-->
<div class="mhl clearfix mbl">

3
app/static/fonts/icomoon/fonts/icomoon.svg
View file

@ -11,4 +11,7 @@
<glyph unicode="&#xe901;" glyph-name="triangle-right" d="M768 460.8l-460.8-256v512l460.8-256z" />
<glyph unicode="&#xe902;" glyph-name="triangle-left" d="M716.8 716.8v-512l-460.8 256 460.8 256z" />
<glyph unicode="&#xe903;" glyph-name="triangle-down" d="M256 665.6h512l-256-460.8-256 460.8z" />
<glyph unicode="&#xe904;" glyph-name="volume_off" d="M512 768.667v-180l-90 90zM182 810.667l714-714-54-54-88 88q-66-56-156-78v88q50 14 96 50l-182 182v-288l-214 214h-170v256h202l-202 202zM810 426.667q0 102-59 180t-153 106v88q130-28 214-133t84-241q0-94-44-178l-64 66q22 54 22 112zM704 426.667q0-18-2-26l-104 104v94q44-22 75-72t31-100z" />
<glyph unicode="&#xe905;" glyph-name="volume_up" d="M598 800.667q130-28 214-133t84-241-84-241-214-133v88q94 28 153 106t59 180-59 180-153 106v88zM704 426.667q0-120-106-172v344q44-22 75-72t31-100zM128 554.667h170l214 214v-684l-214 214h-170v256z" />
<glyph unicode="&#xe906;" glyph-name="volume_down" d="M214 554.667h170l214 214v-684l-214 214h-170v256zM790 426.667q0-118-108-172v344q44-22 76-73t32-99z" />
</font></defs></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 823 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Before After
Before After

BIN
app/static/fonts/icomoon/fonts/icomoon.ttf
View file

Binary file not shown.

BIN
app/static/fonts/icomoon/fonts/icomoon.woff
View file

Binary file not shown.

2
app/static/fonts/icomoon/selection.json
View file

@ -1 +1 @@
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M768 716.8h-512l256-460.8 256 460.8z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-up"],"grid":20},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":20,"code":59648,"name":"triangle-up"},"setIdx":0,"setId":16,"iconIdx":0},{"icon":{"paths":["M768 512l-460.8 256v-512l460.8 256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-right"],"grid":20},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":20,"code":59649,"name":"triangle-right"},"setIdx":0,"setId":16,"iconIdx":1},{"icon":{"paths":["M716.8 256v512l-460.8-256 460.8-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-left"],"grid":20},"attrs":[{}],"properties":{"order":3,"id":1,"prevSize":20,"code":59650,"name":"triangle-left"},"setIdx":0,"setId":16,"iconIdx":2},{"icon":{"paths":["M256 307.2h512l-256 460.8-256-460.8z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-down"],"grid":20},"attrs":[{}],"properties":{"order":4,"id":0,"prevSize":20,"code":59651,"name":"triangle-down"},"setIdx":0,"setId":16,"iconIdx":3}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"f-icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"showSelector":true},"imagePref":{"prefix":"icon-","png":false,"useClassSelector":true,"color":16777215,"bgColor":16777215,"classSelector":".icon","name":"icomoon","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16}}
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M768 716.8h-512l256-460.8 256 460.8z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-up"],"grid":20},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":20,"code":59648,"name":"triangle-up"},"setIdx":0,"setId":16,"iconIdx":0},{"icon":{"paths":["M768 512l-460.8 256v-512l460.8 256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-right"],"grid":20},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":20,"code":59649,"name":"triangle-right"},"setIdx":0,"setId":16,"iconIdx":1},{"icon":{"paths":["M716.8 256v512l-460.8-256 460.8-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-left"],"grid":20},"attrs":[{}],"properties":{"order":3,"id":1,"prevSize":20,"code":59650,"name":"triangle-left"},"setIdx":0,"setId":16,"iconIdx":2},{"icon":{"paths":["M256 307.2h512l-256 460.8-256-460.8z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["triangle-down"],"grid":20},"attrs":[{}],"properties":{"order":4,"id":0,"prevSize":20,"code":59651,"name":"triangle-down"},"setIdx":0,"setId":16,"iconIdx":3},{"icon":{"paths":["M214 384h170l214-214v684l-214-214h-170v-256zM790 512q0 118-108 172v-344q44 22 76 73t32 99z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume_down"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59654,"name":"volume_down"},"setIdx":9,"setId":7,"iconIdx":0},{"icon":{"paths":["M598 138q130 28 214 133t84 241-84 241-214 133v-88q94-28 153-106t59-180-59-180-153-106v-88zM704 512q0 120-106 172v-344q44 22 75 72t31 100zM128 384h170l214-214v684l-214-214h-170v-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume_up"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":24,"code":59653,"name":"volume_up"},"setIdx":9,"setId":7,"iconIdx":1},{"icon":{"paths":["M512 170v180l-90-90zM182 128l714 714-54 54-88-88q-66 56-156 78v-88q50-14 96-50l-182-182v288l-214-214h-170v-256h202l-202-202zM810 512q0-102-59-180t-153-106v-88q130 28 214 133t84 241q0 94-44 178l-64-66q22-54 22-112zM704 512q0 18-2 26l-104-104v-94q44 22 75 72t31 100z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume_off"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59652,"name":"volume_off"},"setIdx":9,"setId":7,"iconIdx":2}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"f-icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"showSelector":true},"imagePref":{"prefix":"icon-","png":false,"useClassSelector":true,"color":16777215,"bgColor":16777215,"classSelector":".icon","name":"icomoon","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16}}

15
app/static/fonts/icomoon/style.css
View file

@ -1,9 +1,9 @@
@font-face {
font-family: 'icomoon';
src:
url('fonts/icomoon.ttf?ru5m2') format('truetype'),
url('fonts/icomoon.woff?ru5m2') format('woff'),
url('fonts/icomoon.svg?ru5m2#icomoon') format('svg');
url('fonts/icomoon.ttf?5ydswh') format('truetype'),
url('fonts/icomoon.woff?5ydswh') format('woff'),
url('fonts/icomoon.svg?5ydswh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -36,3 +36,12 @@
.f-icon-triangle-down:before {
content: "\e903";
}
.f-icon-volume_down:before {
content: "\e906";
}
.f-icon-volume_up:before {
content: "\e905";
}
.f-icon-volume_off:before {
content: "\e904";
}

6
app/static/js/ascroll.js Normal file → Executable file
View file

@ -170,11 +170,11 @@ function showOverlay(event) {
overlay.style.display = 'flex'
overlay.style.alignItems = 'center'
overlay.style.justifyContent = 'center'
overlay.style.fontSize = '45px'
//overlay.style.fontSize = '45px'
video.controls = false
var off = `🔇`
var on = `🔊`
var off = `<span class="annotation-icon-wrapper animated"><span class="text f-icon-volume_off annotation-icon"></span>`
var on = `<span class="annotation-icon-wrapper"><span class="f-icon-volume_down annotation-icon"></span></span>`
if (video.muted) {
overlay.innerHTML = off