denys/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

<select> styling (abeit somewhat not pretty code-wise), default colors for

Browse source 
default schemes.
This commit is contained in:
Henry Jameson 2018-04-07 21:58:29 +03:00
parent 529643d35a
commit 65f82cf294
22 changed files with 193 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/App.scss
View file

@ -77,8 +77,12 @@ button{
} }
} }
label.select {
padding: 0;
input, textarea, select { }
input, textarea, .select {
border: none; border: none;
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius); border-radius: var(--btnRadius, $fallback--btnRadius);
@ -93,11 +97,35 @@ input, textarea, select {
font-size: 14px; font-size: 14px;
padding: 8px 7px 4px; padding: 8px 7px 4px;
box-sizing: border-box; box-sizing: border-box;
display: inline-block;
position: relative;
// TODO: Restyle <select> in a decent way. Needs different markup .icon-down-open {
// -webkit-appearance:none; position: absolute;
// -moz-appearance:none; top: 0;
// appearance:none; bottom: 0;
right: 5px;
height: 100%;
color: $fallback--fg;
color: var(--fg, $fallback--fg);
line-height: 29px;
z-index: 0;
pointer-events: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
margin: 0;
color: $fallback--fg;
color: var(--fg, $fallback--fg);
padding: 4px 3ch 3px 3px;
width: 100%;
z-index: 1;
}
&[type=radio], &[type=radio],
&[type=checkbox] { &[type=checkbox] {
@ -185,7 +213,7 @@ nav {
height: 50px; height: 50px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: auto 80%;
a i { a i {
color: $fallback--link; color: $fallback--link;

5
src/components/attachment/attachment.vue
View file

@ -41,6 +41,11 @@
flex: 0 0 auto; flex: 0 0 auto;
max-height: 300px; max-height: 300px;
max-width: 100%; max-width: 100%;
line-height: 0;
video {
max-height: 300px;
}
} }
.attachment { .attachment {

4
src/components/post_status_form/post_status_form.vue
View file

@ -103,8 +103,8 @@
.attachment { .attachment {
position: relative; position: relative;
border: $fallback--border; border: 1px solid $fallback--border;
border: var(--border, $fallback--border); border: 1px solid var(--border, $fallback--border);
margin: 0.5em 0.8em 0.2em 0; margin: 0.5em 0.8em 0.2em 0;
} }

82
src/components/still-image/still-image.vue
View file

@ -10,53 +10,55 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.still-image { .still-image {
position: relative; position: relative;
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%
&:hover canvas { &:hover canvas {
display: none; display: none;
} }
img {
width: 100%;
height: 100%
}
&.animated {
&:hover::before,
img { img {
width: 100%; visibility: hidden;
height: 100%
} }
&.animated { &:hover img {
&:hover::before, visibility: visible
img {
visibility: hidden;
}
&:hover img {
visibility: visible
}
&::before {
content: 'gif';
position: absolute;
line-height: 10px;
font-size: 10px;
top: 5px;
left: 5px;
background: rgba(127,127,127,.5);
color: #FFF;
display: block;
padding: 2px 4px;
border-radius: 3px;
z-index: 2;
}
} }
canvas { &::before {
position: absolute; content: 'gif';
top: 0; position: absolute;
bottom: 0; line-height: 10px;
left: 0; font-size: 10px;
right: 0; top: 5px;
width: 100%; left: 5px;
height: 100%; background: rgba(127,127,127,.5);
color: #FFF;
display: block;
padding: 2px 4px;
border-radius: 3px;
z-index: 2;
} }
}
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
} }
</style> </style>

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

@ -6,7 +6,7 @@ export default {
availableStyles: [], availableStyles: [],
selected: this.$store.state.config.theme, selected: this.$store.state.config.theme,
bgColorLocal: '', bgColorLocal: '',
fgColorLocal: '', btnColorLocal: '',
textColorLocal: '', textColorLocal: '',
linkColorLocal: '', linkColorLocal: '',
redColorLocal: '#ff0000', redColorLocal: '#ff0000',
@ -26,7 +26,7 @@ export default {
}, },
mounted () { mounted () {
this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg) this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg)
this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg) this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link) this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
@ -37,7 +37,7 @@ export default {
}, },
methods: { methods: {
setCustomTheme () { setCustomTheme () {
if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
// reset to picked themes // reset to picked themes
} }
const rgb = (hex) => { const rgb = (hex) => {
@ -49,7 +49,7 @@ export default {
} : null } : null
} }
const bgRgb = rgb(this.bgColorLocal) const bgRgb = rgb(this.bgColorLocal)
const fgRgb = rgb(this.fgColorLocal) const btnRgb = rgb(this.btnColorLocal)
const textRgb = rgb(this.textColorLocal) const textRgb = rgb(this.textColorLocal)
const linkRgb = rgb(this.linkColorLocal) const linkRgb = rgb(this.linkColorLocal)
@ -58,11 +58,11 @@ export default {
const greenRgb = rgb(this.greenColorLocal) const greenRgb = rgb(this.greenColorLocal)
const orangeRgb = rgb(this.orangeColorLocal) const orangeRgb = rgb(this.orangeColorLocal)
if (bgRgb && fgRgb && linkRgb) { if (bgRgb && btnRgb && linkRgb) {
this.$store.dispatch('setOption', { this.$store.dispatch('setOption', {
name: 'customTheme', name: 'customTheme',
value: { value: {
fg: fgRgb, fg: btnRgb,
bg: bgRgb, bg: bgRgb,
text: textRgb, text: textRgb,
link: linkRgb, link: linkRgb,
@ -77,12 +77,12 @@ export default {
watch: { watch: {
selected () { selected () {
this.bgColorLocal = this.selected[1] this.bgColorLocal = this.selected[1]
this.fgColorLocal = this.selected[2] this.btnColorLocal = this.selected[2]
this.textColorLocal = this.selected[3] this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4] this.linkColorLocal = this.selected[4]
this.redColorLocal = this.selected[5] this.redColorLocal = this.selected[5]
this.blueColorLocal = this.selected[6] this.greenColorLocal = this.selected[6]
this.greenColorLocal = this.selected[7] this.blueColorLocal = this.selected[7]
this.orangeColorLocal = this.selected[8] this.orangeColorLocal = this.selected[8]
} }
} }

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

@ -1,11 +1,15 @@
<template> <template>
<div> <div>
<p>{{$t('settings.presets')}}</p> <div>{{$t('settings.presets')}}
<select v-model="selected" class="style-switcher"> <label for="style-switcher" class='select'>
<option v-for="style in availableStyles" :value="style">{{style[0]}}</option> <select id="style-switcher" v-model="selected" class="style-switcher">
</select> <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
<p>{{$t('settings.theme_help')}}</p> </select>
<i class="icon-down-open"/>
</label>
</div>
<div class="color-container"> <div class="color-container">
<p>{{$t('settings.theme_help')}}</p>
<div class="color-item"> <div class="color-item">
<label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label> <label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
<input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal"> <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
@ -13,8 +17,8 @@
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label> <label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
<input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal"> <input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
<input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal"> <input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
</div> </div>
<div class="color-item"> <div class="color-item">
<label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label> <label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
@ -26,8 +30,6 @@
<input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal"> <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
</div> </div>
</div>
<div class="color-container additional colors">
<div class="color-item"> <div class="color-item">
<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label> <label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal"> <input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
@ -51,14 +53,20 @@
</div> </div>
<div> <div>
<div class="panel"> <div class="panel">
<div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div> <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }"> <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
<h4>Content</h4> <h4>Content</h4>
<br> <br>
A bunch of more content and A bunch of more content and
<a :style="{ 'color': linkColorLocal }">a nice lil' link</a> <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
<i :style="{ 'color': blueColorLocal }" class="icon-reply"/>
<i :style="{ 'color': greenColorLocal }" class="icon-retweet"/>
<i :style="{ 'color': redColorLocal }" class="icon-cancel"/>
<i :style="{ 'color': orangeColorLocal }" class="icon-star"/>
<br> <br>
<button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button> <br>
<div class="finder-error" :style="{ 'background-color': redColorLocal }">And a scary alert</div>
<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
</div> </div>
</div> </div>
</div> </div>

12
src/i18n/messages.js
View file

@ -46,7 +46,7 @@ const de = {
settings: 'Einstellungen', settings: 'Einstellungen',
theme: 'Farbschema', theme: 'Farbschema',
presets: 'Voreinstellungen', presets: 'Voreinstellungen',
theme_help: 'Benutze HTML Farbcodes (#aabbcc) um dein Farbschema anzupassen.', theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen.',
background: 'Hintergrund', background: 'Hintergrund',
foreground: 'Vordergrund', foreground: 'Vordergrund',
text: 'Text', text: 'Text',
@ -238,7 +238,7 @@ const en = {
settings: 'Settings', settings: 'Settings',
theme: 'Theme', theme: 'Theme',
presets: 'Presets', presets: 'Presets',
theme_help: 'Use hex color codes (#aabbcc) to customize your color theme.', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
background: 'Background', background: 'Background',
foreground: 'Foreground', foreground: 'Foreground',
text: 'Text', text: 'Text',
@ -812,7 +812,7 @@ const oc = {
settings: 'Paramètres', settings: 'Paramètres',
theme: 'Tèma', theme: 'Tèma',
presets: 'Pre-enregistrats', presets: 'Pre-enregistrats',
theme_help: 'Emplegatz los còdis de color hex (#aabbcc) per personalizar vòstre tèma de color.', theme_help: 'Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.',
background: 'Rèire plan', background: 'Rèire plan',
foreground: 'Endavant', foreground: 'Endavant',
text: 'Tèxte', text: 'Tèxte',
@ -998,7 +998,7 @@ const es = {
settings: 'Ajustes', settings: 'Ajustes',
theme: 'Tema', theme: 'Tema',
presets: 'Por defecto', presets: 'Por defecto',
theme_help: 'Use códigos de color hexadecimales (#aabbcc) para personalizar su tema de colores.', theme_help: 'Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.',
background: 'Segundo plano', background: 'Segundo plano',
foreground: 'Primer plano', foreground: 'Primer plano',
text: 'Texto', text: 'Texto',
@ -1098,7 +1098,7 @@ const pt = {
settings: 'Configurações', settings: 'Configurações',
theme: 'Tema', theme: 'Tema',
presets: 'Predefinições', presets: 'Predefinições',
theme_help: 'Use cores em código hexadecimal (#aabbcc) para personalizar seu esquema de cores.', theme_help: 'Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.',
background: 'Plano de Fundo', background: 'Plano de Fundo',
foreground: 'Primeiro Plano', foreground: 'Primeiro Plano',
text: 'Texto', text: 'Texto',
@ -1198,7 +1198,7 @@ const ru = {
settings: 'Настройки', settings: 'Настройки',
theme: 'Тема', theme: 'Тема',
presets: 'Пресеты', presets: 'Пресеты',
theme_help: 'Используйте шестнадцатеричные коды цветов (#aabbcc) для настройки темы.', theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.',
background: 'Фон', background: 'Фон',
foreground: 'Передний план', foreground: 'Передний план',
text: 'Текст', text: 'Текст',

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

@ -108,8 +108,8 @@ const setPreset = (val, commit) => {
const linkRgb = hex2rgb(theme[4]) const linkRgb = hex2rgb(theme[4])
const cRedRgb = hex2rgb(theme[5] || '#FF0000') const cRedRgb = hex2rgb(theme[5] || '#FF0000')
const cBlueRgb = hex2rgb(theme[6] || '#0000FF') const cGreenRgb = hex2rgb(theme[6] || '#00FF00')
const cGreenRgb = hex2rgb(theme[7] || '#00FF00') const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00') const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
const col = { const col = {

12
static/font/config.json
View file

@ -95,6 +95,18 @@
"css": "logout", "css": "logout",
"code": 59400, "code": 59400,
"src": "fontawesome" "src": "fontawesome"
},
{
"uid": "ccddff8e8670dcd130e3cb55fdfc2fd0",
"css": "down-open",
"code": 59401,
"src": "fontawesome"
},
{
"uid": "44b9e75612c5fad5505edd70d071651f",
"css": "attach",
"code": 59402,
"src": "entypo"
} }
] ]
} }

7
static/font/css/animation.css
View file

@ -8,13 +8,6 @@
animation: spin 2s infinite linear; animation: spin 2s infinite linear;
display: inline-block; display: inline-block;
} }
.animate-spin-slow {
-moz-animation: spin 4s infinite linear;
-o-animation: spin 4s infinite linear;
-webkit-animation: spin 4s infinite linear;
animation: spin 4s infinite linear;
display: inline-block;
}
@-moz-keyframes spin { @-moz-keyframes spin {
0% { 0% {
-moz-transform: rotate(0deg); -moz-transform: rotate(0deg);

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

@ -8,6 +8,8 @@
.icon-plus-squared:before { content: '\e806'; } /* '' */ .icon-plus-squared:before { content: '\e806'; } /* '' */
.icon-cog:before { content: '\e807'; } /* '' */ .icon-cog:before { content: '\e807'; } /* '' */
.icon-logout:before { content: '\e808'; } /* '' */ .icon-logout:before { content: '\e808'; } /* '' */
.icon-down-open:before { content: '\e809'; } /* '' */
.icon-attach:before { content: '\e80a'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */ .icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */ .icon-spin4:before { content: '\e834'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */ .icon-menu:before { content: '\f0c9'; } /* '' */

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

File diff suppressed because one or more lines are too long

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

@ -8,6 +8,8 @@
.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); } .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); } .icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); } .icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
.icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe809;&nbsp;'); }
.icon-attach { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80a;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&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-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); } .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }

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

@ -19,6 +19,8 @@
.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); } .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); } .icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); } .icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
.icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe809;&nbsp;'); }
.icon-attach { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80a;&nbsp;'); }
.icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe832;&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-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); } .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0c9;&nbsp;'); }

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

@ -1,11 +1,11 @@
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('../font/fontello.eot?64848116'); src: url('../font/fontello.eot?73580499');
src: url('../font/fontello.eot?64848116#iefix') format('embedded-opentype'), src: url('../font/fontello.eot?73580499#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?64848116') format('woff2'), url('../font/fontello.woff2?73580499') format('woff2'),
url('../font/fontello.woff?64848116') format('woff'), url('../font/fontello.woff?73580499') format('woff'),
url('../font/fontello.ttf?64848116') format('truetype'), url('../font/fontello.ttf?73580499') format('truetype'),
url('../font/fontello.svg?64848116#fontello') format('svg'); url('../font/fontello.svg?73580499#fontello') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('../font/fontello.svg?64848116#fontello') format('svg'); src: url('../font/fontello.svg?73580499#fontello') format('svg');
} }
} }
*/ */
@ -64,6 +64,8 @@
.icon-plus-squared:before { content: '\e806'; } /* '' */ .icon-plus-squared:before { content: '\e806'; } /* '' */
.icon-cog:before { content: '\e807'; } /* '' */ .icon-cog:before { content: '\e807'; } /* '' */
.icon-logout:before { content: '\e808'; } /* '' */ .icon-logout:before { content: '\e808'; } /* '' */
.icon-down-open:before { content: '\e809'; } /* '' */
.icon-attach:before { content: '\e80a'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */ .icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */ .icon-spin4:before { content: '\e834'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */ .icon-menu:before { content: '\f0c9'; } /* '' */

53
static/font/demo.html
View file

@ -229,11 +229,11 @@ body {
} }
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('./font/fontello.eot?1253892'); src: url('./font/fontello.eot?97388161');
src: url('./font/fontello.eot?1253892#iefix') format('embedded-opentype'), src: url('./font/fontello.eot?97388161#iefix') format('embedded-opentype'),
url('./font/fontello.woff?1253892') format('woff'), url('./font/fontello.woff?97388161') format('woff'),
url('./font/fontello.ttf?1253892') format('truetype'), url('./font/fontello.ttf?97388161') format('truetype'),
url('./font/fontello.svg?1253892#fontello') format('svg'); url('./font/fontello.svg?97388161#fontello') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -275,7 +275,7 @@ body {
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
} }
</style> </style>
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]--> <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
<script> <script>
function toggleCodes(on) { function toggleCodes(on) {
var obj = document.getElementById('icons'); var obj = document.getElementById('icons');
@ -291,37 +291,38 @@ body {
</head> </head>
<body> <body>
<div class="container header"> <div class="container header">
<h1> <h1>fontello <small>font demo</small></h1>
fontello
<small>font demo</small>
</h1>
<label class="switch"> <label class="switch">
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
</label> </label>
</div> </div>
<div id="icons" class="container"> <div class="container" id="icons">
<div class="row"> <div class="row">
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe800;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div> <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-cancel">&#xe800;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-upload">&#xe801;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe801</span></div> <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-upload">&#xe801;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe801</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div> <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div> <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
</div> </div>
<div class="row"> <div class="row">
<div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div> <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
<div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-eye-off">&#xe805;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe805</span></div> <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-eye-off">&#xe805;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe805</span></div>
<div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-plus-squared">&#xe806;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe806</span></div> <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-plus-squared">&#xe806;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe806</span></div>
<div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-cog">&#xe807;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe807</span></div> <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-cog">&#xe807;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe807</span></div>
</div> </div>
<div class="row"> <div class="row">
<div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-logout">&#xe808;</i> <span class="i-name">icon-logout</span><span class="i-code">0xe808</span></div> <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-logout">&#xe808;</i> <span class="i-name">icon-logout</span><span class="i-code">0xe808</span></div>
<div title="Code: 0xe832" class="the-icons span3"><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: 0xe809"><i class="demo-icon icon-down-open">&#xe809;</i> <span class="i-name">icon-down-open</span><span class="i-code">0xe809</span></div>
<div title="Code: 0xe834" class="the-icons span3"><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: 0xe80a"><i class="demo-icon icon-attach">&#xe80a;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe80a</span></div>
<div title="Code: 0xf0c9" class="the-icons span3"><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: 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> </div>
<div class="row"> <div class="row">
<div title="Code: 0xf112" class="the-icons span3"><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: 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 title="Code: 0xf1e5" class="the-icons span3"><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: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
<div title="Code: 0xf234" class="the-icons span3"><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 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: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
</div>
<div class="row">
<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> </div>
</div> </div>
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div> <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>

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

Binary file not shown.

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

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata> <metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
<defs> <defs>
<font id="fontello" horiz-adv-x="1000" > <font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" /> <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -24,6 +24,10 @@
<glyph glyph-name="logout" unicode="&#xe808;" d="M357 46q0-2 1-11t0-14-2-14-5-11-12-3h-178q-67 0-114 47t-47 114v392q0 67 47 114t114 47h178q8 0 13-5t5-13q0-2 1-11t0-15-2-13-5-11-12-3h-178q-37 0-63-26t-27-64v-392q0-37 27-63t63-27h174t6 0 7-2 4-3 4-5 1-8z m518 304q0-14-11-25l-303-304q-11-10-25-10t-25 10-11 25v161h-250q-14 0-25 11t-11 25v214q0 15 11 25t25 11h250v161q0 14 11 25t25 10 25-10l303-304q11-10 11-25z" horiz-adv-x="928.6" /> <glyph glyph-name="logout" unicode="&#xe808;" d="M357 46q0-2 1-11t0-14-2-14-5-11-12-3h-178q-67 0-114 47t-47 114v392q0 67 47 114t114 47h178q8 0 13-5t5-13q0-2 1-11t0-15-2-13-5-11-12-3h-178q-37 0-63-26t-27-64v-392q0-37 27-63t63-27h174t6 0 7-2 4-3 4-5 1-8z m518 304q0-14-11-25l-303-304q-11-10-25-10t-25 10-11 25v161h-250q-14 0-25 11t-11 25v214q0 15 11 25t25 11h250v161q0 14 11 25t25 10 25-10l303-304q11-10 11-25z" horiz-adv-x="928.6" />
<glyph glyph-name="down-open" unicode="&#xe809;" d="M939 399l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26t11 25l93 92q10 11 25 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26z" horiz-adv-x="1000" />
<glyph glyph-name="attach" unicode="&#xe80a;" d="M244-140q-102 0-170 72-72 70-74 166t84 190l496 496q80 80 174 54 44-12 79-47t47-79q26-96-54-176l-474-474q-40-40-88-46-48-4-80 28-30 24-27 74t47 92l332 334q24 26 50 0t0-50l-332-332q-44-44-20-70 12-8 24-6 24 4 46 26l474 474q50 50 34 108-16 60-76 76-54 14-108-36l-494-494q-66-76-64-143t52-117q50-48 117-50t141 62l496 494q24 24 50 0 26-22 0-48l-496-496q-82-82-186-82z" horiz-adv-x="939" />
<glyph glyph-name="spin3" unicode="&#xe832;" d="M494 850c-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="spin3" unicode="&#xe832;" d="M494 850c-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 850c-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" /> <glyph glyph-name="spin4" unicode="&#xe834;" d="M498 850c-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: 7 KiB

After

Width:  |  Height:  |  Size: 7.6 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.

14
static/styles.json
View file

@ -1,9 +1,9 @@
{ {
"pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ], "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f" ], "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c" ], "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8"], "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
"ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60" ], "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
"monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672" ], "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
"mammal": [ "Mammal", "#272c37", "#444b5d", "#f8f8f8", "#9bacc8" ] "mammal": [ "Mammal", "#272c37", "#444b5d", "#f8f8f8", "#9bacc8", "#7f3142", "#2bd850", "#2b90d9", "#ca8f04" ]
} }