itepechi/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity

shadow control initial stuff. not done yet tho

Browse source
This commit is contained in:
Henry Jameson 2018-11-19 04:40:25 +03:00
parent edb429e307
commit a5b4f31c12
19 changed files with 424 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/color_input/color_input.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="color-control" :class="{ disabled: !present }">
<div class="color-control" :class="{ disabled: !present || disabled }">
<label :for="name" class="label">
{{label}}
</label>
@ -17,7 +17,7 @@
class="color-input"
type="color"
:value="value || fallback"
:disabled="!present"
:disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
>
<input
@ -25,7 +25,7 @@
class="text-input"
type="text"
:value="value || fallback"
:disabled="!present"
:disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
>
</div>
@ -34,7 +34,7 @@
<script>
export default {
props: [
'name', 'label', 'value', 'fallback'
'name', 'label', 'value', 'fallback', 'disabled'
],
computed: {
present () {

6
src/components/opacity_input/opacity_input.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="opacity-control" :class="{ disabled: !present }">
<div class="opacity-control" :class="{ disabled: !present || disabled }">
<label :for="name" class="label">
{{$t('settings.opacity')}}
</label>
@ -17,7 +17,7 @@
class="input-number"
type="number"
:value="value || fallback"
:disabled="!present"
:disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
max="1"
min="0"
@ -28,7 +28,7 @@
<script>
export default {
props: [
'name', 'value', 'fallback'
'name', 'value', 'fallback', 'disabled'
],
computed: {
present () {

76
src/components/shadow_control/shadow_control.js Normal file
View file

@ -0,0 +1,76 @@
import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import StyleSetter from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { set } from 'vue'
export default {
props: [
'value', 'fallback'
],
data () {
return {
selectedId: 0,
cValue: this.value || this.fallback
}
},
components: {
ColorInput,
OpacityInput
},
methods: {
add () {
this.cValue.push(Object.assign({}, this.selected))
this.selectedId = this.cValue.length - 1
},
del () {
this.cValue.splice(this.selectedId, 1)
this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
},
moveUp () {
const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId - 1, 0, movable)
this.selectedId -= 1
},
moveDn () {
const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId + 1, 0, movable)
this.selectedId += 1
}
},
computed: {
selected () {
return this.cValue[this.selectedId] || {
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1
}
},
moveUpValid () {
return this.selectedId > 0
},
moveDnValid () {
return this.selectedId < this.cValue.length - 1
},
present () {
return typeof this.cValue[this.selectedId] !== 'undefined' &&
!this.usingFallback
},
usingFallback () {
return typeof this.value === 'undefined'
},
rgb () {
return hex2rgb(this.selected.color)
},
style () {
console.log(StyleSetter.generateShadow(this.cValue))
return {
boxShadow: StyleSetter.generateShadow(this.cValue)
}
}
}
}

249
src/components/shadow_control/shadow_control.vue Normal file
View file

@ -0,0 +1,249 @@
<template>
<div class="shadow-control" :class="{ disabled: !present }">
<div class="shadow-preview-container">
<div :disabled="!present" class="y-shift-control">
<input
v-model="selected.y"
:disabled="!present"
class="input-number"
type="number">
<div class="wrap">
<input
v-model="selected.y"
:disabled="!present"
class="input-range"
type="range"
max="20"
min="-20">
</div>
</div>
<div class="preview-window">
<div class="preview-block" :style="style"></div>
</div>
<div :disabled="!present" class="x-shift-control">
<input
v-model="selected.x"
:disabled="!present"
class="input-number"
type="number">
<div class="wrap">
<input
v-model="selected.x"
:disabled="!present"
class="input-range"
type="range"
max="20"
min="-20">
</div>
</div>
</div>
<div class="shadow-tweak">
<div :disabled="usingFallback" class="id-control">
<label for="id" class="label">
Shadow id
</label>
<input
v-model="selectedId"
:disabled="usingFallback"
class="input-number"
type="number"
min="0"
:max="cValue.length - 1">
<button class="btn btn-default" :disabled="!present" @click="del">
<i class="icon-cancel"/>
</button>
<button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
<i class="icon-up-open"/>
</button>
<button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
<i class="icon-down-open"/>
</button>
<button class="btn btn-default" @click="add">
<i class="icon-plus"/>
</button>
</div>
<div :disabled="!present" class="inset-control">
<label for="inset" class="label">
Inset
</label>
<input
v-model="selected.inset"
:disabled="!present"
name="inset"
id="inset"
class="input-inset"
type="checkbox">
<label class="checkbox-label" for="inset"></label>
</div>
<div :disabled="!present" class="blur-control">
<label for="spread" class="label">
Blur
</label>
<input
v-model="selected.blur"
:disabled="!present"
name="blur"
id="blur"
class="input-range"
type="range"
max="20"
min="0">
<input
v-model="selected.blur"
:disabled="!present"
class="input-number"
type="number"
min="0">
</div>
<div :disabled="!present" class="spread-control">
<label for="spread" class="label">
Spread
</label>
<input
v-model="selected.spread"
:disabled="!present"
name="spread"
id="spread"
class="input-range"
type="range"
max="20"
min="-20">
<input
v-model="selected.spread"
:disabled="!present"
class="input-number"
type="number">
</div>
<ColorInput
v-model="selected.color"
:disabled="!present"
label="Color"
name="shadow"/>
<OpacityInput
v-model="selected.alpha"
:disabled="!present"/>
</div>
</div>
</template>
<script src="./shadow_control.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.shadow-control {
display: flex;
flex-wrap: wrap;
justify-content: center;
.shadow-preview-container {
flex: 0;
display: flex;
flex-wrap: wrap;
$side: 15em;
input[type=number] {
width: 5em;
min-width: 2em;
}
.x-shift-control,
.y-shift-control {
display: flex;
flex: 0;
&[disabled=disabled] *{
opacity: .5
}
}
.x-shift-control {
align-items: flex-start;
}
.x-shift-control .wrap,
input[type=range] {
margin: 0;
width: $side;
height: 2em;
}
.y-shift-control {
flex-direction: column;
align-items: flex-end;
.wrap {
width: 2em;
height: $side;
}
input[type=range] {
transform-origin: 1em 1em;
transform: rotate(90deg);
}
}
.preview-window {
flex: 1;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size: 20px 20px;
background-position:0 0, 0 10px, 10px -10px, -10px 0;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
.preview-block {
width: 33%;
height: 33%;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
}
}
}
.shadow-tweak {
.label {
flex: 1;
min-width: 3em;
}
.inset-control {
justify-content: flex-end;
label {
flex: 0
}
}
.blur-control,
.id-control,
.inset-control,
.spread-control {
display: flex;
align-items: baseline;
max-width: 100%;
&[disabled=disabled] *{
opacity: .5
}
.input-range {
flex: 1;
align-self: center;
}
.input-number {
width: 4em;
min-width: 4em;
flex: 0;
}
}
}
}
</style>

18
src/components/style_switcher/style_switcher.js
View file

@ -1,5 +1,6 @@
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
import ColorInput from '../color_input/color_input.vue'
import ShadowControl from '../shadow_control/shadow_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import StyleSetter from '../../services/style_setter/style_setter.js'
@ -51,6 +52,9 @@ export default {
faintOpacityLocal: undefined,
faintLinkColorLocal: undefined,
shadowSelected: undefined,
shadowsLocal: {},
cRedColorLocal: '',
cBlueColorLocal: '',
cGreenColorLocal: '',
@ -225,12 +229,23 @@ export default {
previewRules () {
if (!this.preview.colorRules) return ''
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
},
shadowsAvailable () {
return Object.keys(this.preview.theme.shadows)
},
currentShadow () {
const fallback = this.preview.theme.shadows[this.shadowSelected];
return fallback ? {
fallback,
value: this.shadowsLocal[this.shadowSelected]
} : undefined
}
},
components: {
ColorInput,
OpacityInput,
ContrastRatio,
ShadowControl,
TabSwitcher
},
methods: {
@ -340,6 +355,7 @@ export default {
const colors = input.colors || input
const radii = input.radii || input
const opacity = input.opacity || input
const shadows = input.shadows || {}
if (version === 0) {
if (input.version) version = input.version
@ -384,6 +400,8 @@ export default {
this.tooltipRadiusLocal = radii.tooltipRadius || 2
this.attachmentRadiusLocal = radii.attachmentRadius || 5
this.shadowsLocal = shadows
Object.entries(opacity).forEach(([k, v]) => {
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
this[k + 'OpacityLocal'] = v

11
src/components/style_switcher/style_switcher.vue
View file

@ -170,6 +170,17 @@
<input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
</div>
</div>
<div label="Shadow Realm" class="shadow-container">
<div class="shadow-selector">
<select id="style-switcher" v-model="shadowSelected" class="style-switcher">
<option v-for="shadow in shadowsAvailable"
:value="shadow">
{{shadow}}
</option>
</select>
</div>
<shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/>
</div>
</tab-switcher>
<div class="apply-container">

29
src/services/style_setter/style_setter.js
View file

@ -92,6 +92,19 @@ const setColors = (input, commit) => {
commit('setOption', { name: 'colors', value: theme.colors })
}
const generateShadow = (input) => {
// >shad
return input.map((shad) => [
shad.x,
shad.y,
shad.blur,
shad.spread
].map(_ => _ + 'px').concat([
rgb2rgba({...(hex2rgb(shad.color)), a: shad.alpha}),
shad.inset ? 'inset' : ''
]).join(' ')).join(', ')
}
const generatePreset = (input) => {
const radii = input.radii || {
btnRadius: input.btnRadius,
@ -102,6 +115,17 @@ const generatePreset = (input) => {
tooltipRadius: input.tooltipRadius,
attachmentRadius: input.attachmentRadius
}
const shadows = {
panel: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
...(input.shadows || {})
}
const colors = {}
const opacity = Object.assign({
alert: 0.5,
@ -194,8 +218,10 @@ const generatePreset = (input) => {
return {
colorRules: Object.entries(htmlColors.complete).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
shadowRules: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}-shadow: ${generateShadow(v)}`).join(';'),
theme: {
colors: htmlColors.solid,
shadows,
opacity,
radii
}
@ -245,7 +271,8 @@ const StyleSetter = {
setPreset,
setColors,
getTextColor,
generatePreset
generatePreset,
generateShadow
}
export default StyleSetter

7
static/font/config.json
View file

@ -1,5 +1,4 @@
{
"name": "",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
@ -209,6 +208,12 @@
"css": "plus-squared",
"code": 61694,
"src": "fontawesome"
},
{
"uid": "44e04715aecbca7f266a17d5a7863c68",
"css": "plus",
"code": 59413,
"src": "fontawesome"
}
]
}

1
static/font/css/fontello-codes.css vendored
View file

@ -20,6 +20,7 @@
.icon-globe:before { content: '\e812'; } /* '' */
.icon-brush:before { content: '\e813'; } /* '' */
.icon-attention:before { content: '\e814'; } /* '' */
.icon-plus:before { content: '\e815'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */

13
static/font/css/fontello-embedded.css vendored
View file

File diff suppressed because one or more lines are too long

1
static/font/css/fontello-ie7-codes.css vendored
View file

@ -20,6 +20,7 @@
.icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe812;&nbsp;'); }
.icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe813;&nbsp;'); }
.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe814;&nbsp;'); }
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe815;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }

1
static/font/css/fontello-ie7.css vendored
View file

@ -31,6 +31,7 @@
.icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe812;&nbsp;'); }
.icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe813;&nbsp;'); }
.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe814;&nbsp;'); }
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe815;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&nbsp;'); }
.icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }

15
static/font/css/fontello.css vendored
View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?13201279');
src: url('../font/fontello.eot?13201279#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?13201279') format('woff2'),
url('../font/fontello.woff?13201279') format('woff'),
url('../font/fontello.ttf?13201279') format('truetype'),
url('../font/fontello.svg?13201279#fontello') format('svg');
src: url('../font/fontello.eot?3996201');
src: url('../font/fontello.eot?3996201#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?3996201') format('woff2'),
url('../font/fontello.woff?3996201') format('woff'),
url('../font/fontello.ttf?3996201') format('truetype'),
url('../font/fontello.svg?3996201#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?13201279#fontello') format('svg');
src: url('../font/fontello.svg?3996201#fontello') format('svg');
}
}
*/
@ -76,6 +76,7 @@
.icon-globe:before { content: '\e812'; } /* '' */
.icon-brush:before { content: '\e813'; } /* '' */
.icon-attention:before { content: '\e814'; } /* '' */
.icon-plus:before { content: '\e815'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */

17
static/font/demo.html
View file

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?97354950');
src: url('./font/fontello.eot?97354950#iefix') format('embedded-opentype'),
url('./font/fontello.woff?97354950') format('woff'),
url('./font/fontello.ttf?97354950') format('truetype'),
url('./font/fontello.svg?97354950#fontello') format('svg');
src: url('./font/fontello.eot?15755415');
src: url('./font/fontello.eot?15755415#iefix') format('embedded-opentype'),
url('./font/fontello.woff?15755415') format('woff'),
url('./font/fontello.ttf?15755415') format('truetype'),
url('./font/fontello.svg?15755415#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -329,23 +329,24 @@ body {
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-attention">&#xe814;</i> <span class="i-name">icon-attention</span><span class="i-code">0xe814</span></div>
<div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-plus">&#xe815;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe815</span></div>
<div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
<div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
<div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
<div class="the-icons span3" title="Code: 0xf08f"><i class="demo-icon icon-link-ext-alt">&#xf08f;</i> <span class="i-name">icon-link-ext-alt</span><span class="i-code">0xf08f</span></div>
<div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
<div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
<div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
<div class="the-icons span3" title="Code: 0xf0fe"><i class="demo-icon icon-plus-squared">&#xf0fe;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span></div>
<div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
<div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
<div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
<div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
<div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
</div>

BIN
static/font/font/fontello.eot
View file

Binary file not shown.

2
static/font/font/fontello.svg
View file

@ -48,6 +48,8 @@
<glyph glyph-name="attention" unicode="&#xe814;" d="M571 90v106q0 8-5 13t-12 5h-108q-7 0-12-5t-5-13v-106q0-8 5-13t12-6h108q7 0 12 6t5 13z m-1 208l10 257q0 6-5 10-7 6-14 6h-122q-6 0-14-6-5-4-5-12l9-255q0-5 6-9t13-3h103q8 0 14 3t5 9z m-7 522l428-786q20-35-1-70-9-17-26-26t-35-10h-858q-18 0-35 10t-26 26q-21 35-1 70l429 786q9 17 26 27t36 10 36-10 27-27z" horiz-adv-x="1000" />
<glyph glyph-name="plus" unicode="&#xe815;" d="M786 446v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
<glyph glyph-name="spin3" unicode="&#xe832;" d="M494 857c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />
<glyph glyph-name="spin4" unicode="&#xe834;" d="M498 857c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/font/font/fontello.ttf
View file

Binary file not shown.

BIN
static/font/font/fontello.woff
View file

Binary file not shown.

BIN
static/font/font/fontello.woff2
View file

Binary file not shown.