updates

src/App.scss

@@ -479,8 +479,8 @@ nav {
   line-height: 28px;
 
   &.error {
-    background-color: $fallback--cAlertRed;
+    background-color: $fallback--alertError;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: var(--alertError, $fallback--alertError);
   }
 }
 

src/_variables.scss

@@ -16,7 +16,7 @@ $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;
 
-$fallback--cAlertRed: rgba(211,16,20,.5);
+$fallback--alertError: rgba(211,16,20,.5);
 
 $fallback--panelRadius: 10px;
 $fallback--checkBoxRadius: 2px;

src/components/contrast_ratio/contrast_ratio.vue

@@ -1,41 +1,28 @@
 <template>
-<div class="contrast-ratio">
+<span class="contrast-ratio">
-  <span class="label">
+  <span :title="`Contrast is ${contrast.text}`" class="rating">
-    Contrast:
-  </span>
-  <span>
-    <span>
-      {{contrast.text}}
-    </span>
-    <span class="rating">
     <span v-if="contrast.aaa">
-        AAA
+      <i class="icon-thumbs-up-alt"/>
     </span>
     <span v-if="!contrast.aaa && contrast.aa">
-        AA
+      <i class="icon-adjust"/>
     </span>
     <span v-if="!contrast.aaa && !contrast.aa">
-        bad
+      <i class="icon-attention"/>
     </span>
   </span>
-  </span>
+  <span class="rating" v-if="large" :title="`Contrast is ${contrast.text} (18pt+)`">
-  <span v-if="large">
-    <span>
-      18pt+:
-    </span>
-    <span class="rating">
     <span v-if="contrast.aaa">
-        AAA
+      <i class="icon-thumbs-up-alt"/>
     </span>
     <span v-if="!contrast.aaa && contrast.aa">
-        AA
+      <i class="icon-adjust"/>
     </span>
     <span v-if="!contrast.aaa && !contrast.aa">
-        bad
+      <i class="icon-attention"/>
     </span>
   </span>
 </span>
-</div>
 </template>
 
 <script>
@@ -57,7 +44,6 @@ export default {
 
   .rating {
     display: inline-block;
-    min-width: 3em;
     text-align: center;
   }
 }

src/components/notifications/notifications.scss

@@ -7,7 +7,7 @@
   .unseen-count {
     display: inline-block;
     background-color: $fallback--cRed;
-    background-color: var(--cRed, $fallback--cRed);
+    background-color: var(--badgeNotification, $fallback--cRed);
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
     border-radius: 99px;
     min-width: 22px;
@@ -27,7 +27,7 @@
   }
 
   .unseen {
-    box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
+    box-shadow: inset 4px 0 0 var(--badgeNotification, $fallback--cRed);
     padding-left: 0;
   }
 }
@@ -44,8 +44,8 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     color: $fallback--faint;
     color: var(--faint, $fallback--faint);
-    background-color: $fallback--cAlertRed;
+    background-color: $fallback--alertError;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: var(--alertError, $fallback--alertError);
     padding: 2px .5em
   }
 

src/components/opacity_input/opacity_input.vue

@@ -12,16 +12,6 @@
            @input="$emit('input', !present ? fallback : undefined)"
            >
   <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
-  <input
-    :id="name"
-    class="input-range"
-    type="range"
-    :value="value || fallback"
-    :disabled="!present"
-    @input="$emit('input', $event.target.value)"
-    max="1"
-    min="0"
-    step=".05">
   <input
     :id="name"
     class="input-number"

src/components/style_switcher/style_switcher.js

@@ -39,6 +39,10 @@ export default {
       topBarLinkColorLocal: undefined,
 
       alertOpacityLocal: undefined,
+      alertErrorColorLocal: undefined,
+
+      badgeOpacityLocal: undefined,
+      badgeNotificationColorLocal: undefined,
 
       borderColorLocal: undefined,
       borderOpacityLocal: undefined,
@@ -102,6 +106,9 @@ export default {
           btn: this.btnColorLocal,
           btnText: this.btnTextColorLocal,
 
+          alertError: this.alertErrorColorLocal,
+          badgeNotification: this.badgeNotificationColorLocal,
+
           faint: this.faintColorLocal,
           faintLink: this.faintLinkColorLocal,
           border: this.borderColorLocal,
@@ -116,6 +123,8 @@ export default {
           btn: this.btnOpacityLocal,
           input: this.inputOpacityLocal,
           panel: this.panelOpacityLocal,
+          alert: this.alertOpacityLocal,
+          badge: this.badgeOpacityLocal,
           topBar: this.topBarOpacityLocal,
           border: this.borderOpacityLocal,
           faint: this.faintOpacityLocal
@@ -167,6 +176,7 @@ export default {
         panelText: hex2rgb(colors.panelText),
         btnText: hex2rgb(colors.btnText),
         topBarText: hex2rgb(colors.topBarText),
+        inputText: hex2rgb(colors.inputText),
 
         link: hex2rgb(colors.link),
         topBarLink: hex2rgb(colors.topBarLink),
@@ -181,7 +191,10 @@ export default {
         bg: hex2rgb(colors.bg),
         btn: hex2rgb(colors.btn),
         panel: hex2rgb(colors.panel),
-        topBar: hex2rgb(colors.topBar)
+        topBar: hex2rgb(colors.topBar),
+        input: hex2rgb(colors.input),
+        alertError: hex2rgb(colors.alertError),
+        badgeNotification: hex2rgb(colors.badgeNotification)
       }
 
       const ratios = {
@@ -198,6 +211,10 @@ export default {
 
         btnText: getContrastRatio(worstCase(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
 
+        inputText: getContrastRatio(worstCase(bgs.input, opacity.input, fgs.inputText), fgs.inputText),
+
+        badgeNotification: getContrastRatio(worstCase(bgs.badgeNotification, opacity.badge, fgs.text), fgs.text),
+
         topBarText: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
         topBarLink: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
       }
@@ -317,6 +334,10 @@ export default {
       this.faintColorLocal = undefined
       this.faintOpacityLocal = undefined
       this.faintLinkColorLocal = undefined
+
+      this.alertErrorColorLocal = undefined
+
+      this.badgeNotificationColorLocal = undefined
     },
 
     /**
@@ -348,6 +369,7 @@ export default {
       }
 
       const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+      console.log(keys)
       if (version === 1) {
         // V1 ignores the rest
         this.clearV1()

src/components/style_switcher/style_switcher.vue

@@ -74,21 +74,27 @@
         <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
         <ContrastRatio :contrast="previewContrast.bgOrange"/>
       </div>
-      <div class="color-item wide">
-        <h4>Alert opacity</h4>
-        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="previewTheme.opacity.alert || 1"/>
-      </div>
     </div>
 
     <h3>More customs!</h3>
     <div>
+      <div class="color-item">
+        <h4>Alerts</h4>
+        <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/>
+        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" :fallback="previewTheme.opacity.alert || 1"/>
+      </div>
+      <div class="color-item">
+        <h4>Alerts</h4>
+        <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/>
+        <ContrastRatio :contrast="previewContrast.badgeNotification"/>
+        <OpacityInput name="badgeOpacity" v-model="badgeOpacityLocal" :fallback="previewTheme.opacity.badge || 1"/>
+      </div>
       <div class="color-item">
         <h4>Panel header</h4>
         <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
         <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
         <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
-        <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
       </div>
       <div class="color-item">
         <h4>Top bar</h4>
@@ -99,10 +105,11 @@
         <ContrastRatio :contrast="previewContrast.topBarLink"/>
       </div>
       <div class="color-item">
-        <h4>Inputs</h4>
+        <h4>Text fields</h4>
         <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
         <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
+        <ContrastRatio :contrast="previewContrast.inputText"/>
       </div>
       <div class="color-item">
         <h4>Buttons</h4>
@@ -120,7 +127,8 @@
         <h4>Faint text</h4>
         <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
         <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
-        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="previewTheme.opacity.faint"/>
+        <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.panel')"/>
+        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
       </div>
     </div>
   </div>
@@ -259,10 +267,6 @@
   h4 {
     margin-top: 1em;
   }
-
-  label {
-    color: var(--faint, $fallback--faint);
-  }
 }
 
 .radius-item {

src/services/color_convert/color_convert.js

@@ -81,29 +81,27 @@ const getContrastRatio = (a, b) => {
 
 /**
  * This generates what "worst case" color would look like for transparent
- * segments. I.e. black with .2 alpha and pure-white background image
+ * segments. I.e. transparent black with yellow text over yellow background.
- * could make white text unreadable
  *
  * @param {Object} srgb - transparent color
  * @param {Number} alpha - color's opacity/alpha channel
- * @param {Boolean} white - use white "background" if true, black otherwise
+ * @param {Object} textSrgb - text color (considered as worst case scenario for transparent background)
  * @returns {Object} sRGB of resulting color
  */
-const transparentWorstCase = (srgb, alpha, white = false) => {
+const transparentWorstCase = (srgb, alpha, textSrgb) => {
-  const bg = 'rgb'.split('').reduce((acc, c) => { acc[c] = Number(white) * 255; return acc }, {})
   return 'rgb'.split('').reduce((acc, c) => {
     // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
     // for opaque bg and transparent fg
-    acc[c] = (srgb[c] * alpha + bg[c] * (1 - alpha))
+    acc[c] = (srgb[c] * alpha + textSrgb[c] * (1 - alpha))
     return acc
   }, {})
 }
 
 const worstCase = (bg, bga, text) => {
+  console.log(bg)
+  console.log(text)
   if (bga === 1 || typeof bga === 'undefined') return bg
-  // taken from https://github.com/toish/chromatism/blob/master/src/operations/contrastRatio.js
+  return transparentWorstCase(bg, bga, text)
-  const blackWorse = ((text.r * 299) + (text.g * 587) + (text.b * 114)) / 1000 <= 128
-  return transparentWorstCase(bg, bga, !blackWorse)
 }
 
 const hex2rgb = (hex) => {

src/services/style_setter/style_setter.js

@@ -155,12 +155,14 @@ const generatePreset = (input) => {
   colors.cGreen = col.cGreen
   colors.cOrange = col.cOrange
 
-  colors.cAlertRed = col.cAlertRed || Object.assign({}, col.cRed)
+  colors.alertError = col.alertError || Object.assign({}, col.cRed)
+  colors.badgeNotification = col.badgeNotification || Object.assign({}, col.cRed)
+  colors.badgeNotificationText = col.badgeNotification || Object.assign({}, col.cRed)
 
   Object.entries(opacity).forEach(([ k, v ]) => {
     if (typeof v === 'undefined') return
     if (k === 'alert') {
-      colors.cAlertRed.a = v
+      colors.alertError.a = v
       return
     }
     if (k === 'faint') {

static/font/config.json

@@ -51,7 +51,7 @@
     {
       "uid": "09feb4465d9bd1364f4e301c9ddbaa92",
       "css": "retweet",
-      "code": 59396,
+      "code": 59398,
       "src": "fontawesome"
     },
     {
@@ -66,12 +66,6 @@
       "code": 61925,
       "src": "fontawesome"
     },
-    {
-      "uid": "1a5cfa186647e8c929c2b17b9fc4dac1",
-      "css": "plus-squared",
-      "code": 59398,
-      "src": "font-awesome"
-    },
     {
       "uid": "e99461abfef3923546da8d745372c995",
       "css": "cog",
@@ -191,6 +185,24 @@
       "css": "brush",
       "code": 59411,
       "src": "iconic"
+    },
+    {
+      "uid": "ca90da02d2c6a3183f2458e4dc416285",
+      "css": "adjust",
+      "code": 59396,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5e2ab018e3044337bcef5f7e94098ea1",
+      "css": "thumbs-up-alt",
+      "code": 61796,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c76b7947c957c9b78b11741173c8349b",
+      "css": "attention",
+      "code": 59412,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -3,9 +3,9 @@
 .icon-upload:before { content: '\e801'; } /* '' */
 .icon-star:before { content: '\e802'; } /* '' */
 .icon-star-empty:before { content: '\e803'; } /* '' */
-.icon-retweet:before { content: '\e804'; } /* '' */
+.icon-adjust:before { content: '\e804'; } /* '' */
 .icon-eye-off:before { content: '\e805'; } /* '' */
-.icon-plus-squared:before { content: '\e806'; } /* '' */
+.icon-retweet:before { content: '\e806'; } /* '' */
 .icon-cog:before { content: '\e807'; } /* '' */
 .icon-logout:before { content: '\e808'; } /* '' */
 .icon-down-open:before { content: '\e809'; } /* '' */
@@ -19,6 +19,7 @@
 .icon-lock:before { content: '\e811'; } /* '' */
 .icon-globe:before { content: '\e812'; } /* '' */
 .icon-brush:before { content: '\e813'; } /* '' */
+.icon-attention:before { content: '\e814'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
@@ -28,5 +29,6 @@
 .icon-comment-empty:before { content: '\f0e5'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */
+.icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
 .icon-binoculars:before { content: '\f1e5'; } /* '' */
 .icon-user-plus:before { content: '\f234'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -3,9 +3,9 @@
 .icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -19,6 +19,7 @@
 .icon-lock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -28,5 +29,6 @@
 .icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -14,9 +14,9 @@
 .icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-eye-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-logout { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -30,6 +30,7 @@
 .icon-lock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -39,5 +40,6 @@
 .icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?60305294');
+  src: url('../font/fontello.eot?91338570');
-  src: url('../font/fontello.eot?60305294#iefix') format('embedded-opentype'),
+  src: url('../font/fontello.eot?91338570#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?60305294') format('woff2'),
+       url('../font/fontello.woff2?91338570') format('woff2'),
-       url('../font/fontello.woff?60305294') format('woff'),
+       url('../font/fontello.woff?91338570') format('woff'),
-       url('../font/fontello.ttf?60305294') format('truetype'),
+       url('../font/fontello.ttf?91338570') format('truetype'),
-       url('../font/fontello.svg?60305294#fontello') format('svg');
+       url('../font/fontello.svg?91338570#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?60305294#fontello') format('svg');
+    src: url('../font/fontello.svg?91338570#fontello') format('svg');
   }
 }
 */
@@ -59,9 +59,9 @@
 .icon-upload:before { content: '\e801'; } /* '' */
 .icon-star:before { content: '\e802'; } /* '' */
 .icon-star-empty:before { content: '\e803'; } /* '' */
-.icon-retweet:before { content: '\e804'; } /* '' */
+.icon-adjust:before { content: '\e804'; } /* '' */
 .icon-eye-off:before { content: '\e805'; } /* '' */
-.icon-plus-squared:before { content: '\e806'; } /* '' */
+.icon-retweet:before { content: '\e806'; } /* '' */
 .icon-cog:before { content: '\e807'; } /* '' */
 .icon-logout:before { content: '\e808'; } /* '' */
 .icon-down-open:before { content: '\e809'; } /* '' */
@@ -75,6 +75,7 @@
 .icon-lock:before { content: '\e811'; } /* '' */
 .icon-globe:before { content: '\e812'; } /* '' */
 .icon-brush:before { content: '\e813'; } /* '' */
+.icon-attention:before { content: '\e814'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
@@ -84,5 +85,6 @@
 .icon-comment-empty:before { content: '\f0e5'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */
+.icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
 .icon-binoculars:before { content: '\f1e5'; } /* '' */
 .icon-user-plus:before { content: '\f234'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?32487936');
+      src: url('./font/fontello.eot?93659852');
-      src: url('./font/fontello.eot?32487936#iefix') format('embedded-opentype'),
+      src: url('./font/fontello.eot?93659852#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?32487936') format('woff'),
+           url('./font/fontello.woff?93659852') format('woff'),
-           url('./font/fontello.ttf?32487936') format('truetype'),
+           url('./font/fontello.ttf?93659852') format('truetype'),
-           url('./font/fontello.svg?32487936#fontello') format('svg');
+           url('./font/fontello.svg?93659852#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -304,9 +304,9 @@ body {
         <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 class="row">
-        <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 class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-adjust">&#xe804;</i> <span class="i-name">icon-adjust</span><span class="i-code">0xe804</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 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 class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-retweet">&#xe806;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe806</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 class="row">
@@ -328,20 +328,24 @@ body {
         <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-brush">&#xe813;</i> <span class="i-name">icon-brush</span><span class="i-code">0xe813</span></div>
       </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: 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 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>
       <div class="row">
+        <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 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>
       <div class="row">
+        <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 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>

static/font/font/fontello.svg

@@ -14,11 +14,11 @@
 
 <glyph glyph-name="star-empty" unicode="&#xe803;" d="M635 297l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
 
-<glyph glyph-name="retweet" unicode="&#xe804;" d="M714 18q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
+<glyph glyph-name="adjust" unicode="&#xe804;" d="M429 53v608q-83 0-153-41t-110-111-41-152 41-152 110-111 153-41z m428 304q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
 
 <glyph glyph-name="eye-off" unicode="&#xe805;" d="M310 112l43 79q-48 35-76 88t-27 114q0 67 34 125-128-65-213-197 94-144 239-209z m217 424q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m202 106q0-4 0-5-59-105-176-316t-176-316l-28-50q-5-9-15-9-7 0-75 39-9 6-9 16 0 7 25 49-80 36-147 96t-117 137q-11 17-11 38t11 39q86 131 212 207t277 76q50 0 100-10l31 54q5 9 15 9 3 0 10-3t18-9 18-10 18-10 10-7q9-5 9-15z m21-249q0-78-44-142t-117-91l157 280q4-25 4-47z m250-72q0-19-11-38-22-36-61-81-84-96-194-149t-234-53l41 74q119 10 219 76t169 171q-65 100-158 164l35 63q53-36 102-85t81-103q11-19 11-39z" horiz-adv-x="1000" />
 
-<glyph glyph-name="plus-squared" unicode="&#xe806;" d="M714 321v72q0 14-10 25t-25 10h-179v179q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-179h-178q-15 0-25-10t-11-25v-72q0-14 11-25t25-10h178v-179q0-14 11-25t25-11h71q15 0 25 11t11 25v179h179q14 0 25 10t10 25z m143 304v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
+<glyph glyph-name="retweet" unicode="&#xe806;" d="M714 18q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
 
 <glyph glyph-name="cog" unicode="&#xe807;" d="M571 357q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 16 20 16h124q7 0 13-5t7-12l15-103q28-9 51-20l79 59q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-12 0-7-4-13-9-12-29-37t-30-40q15-28 23-54l102-16q7-1 12-7t4-13z" horiz-adv-x="857.1" />
 
@@ -46,6 +46,8 @@
 
 <glyph glyph-name="brush" unicode="&#xe813;" d="M464 209q0-124-87-212t-210-87q-81 0-149 40 68 39 109 108t40 151q0 61 44 105t105 44 105-44 43-105z m415 562q32-32 32-79t-33-79l-318-318q-20 55-61 97t-97 62l318 318q32 32 79 32t80-33z" horiz-adv-x="928" />
 
+<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="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" />
@@ -64,6 +66,8 @@
 
 <glyph glyph-name="lock-open-alt" unicode="&#xf13e;" d="M589 428q23 0 38-15t16-38v-322q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v322q0 22 16 38t38 15h17v179q0 103 74 177t176 73 177-73 73-177q0-14-10-25t-25-11h-36q-14 0-25 11t-11 25q0 59-42 101t-101 42-101-42-41-101v-179h410z" horiz-adv-x="642.9" />
 
+<glyph glyph-name="thumbs-up-alt" unicode="&#xf164;" d="M143 107q0 15-11 25t-25 11q-15 0-25-11t-11-25q0-15 11-25t25-11q15 0 25 11t11 25z m89 286v-357q0-15-10-25t-26-11h-160q-15 0-25 11t-11 25v357q0 14 11 25t25 10h160q15 0 26-10t10-25z m661 0q0-48-31-83 9-25 9-43 1-42-24-76 9-31 0-66-9-31-31-52 5-62-27-101-36-43-110-44h-72q-37 0-80 9t-68 16-67 22q-69 24-88 25-15 0-25 11t-11 25v357q0 14 10 25t24 11q13 1 42 33t57 67q38 49 56 67 10 10 17 27t10 27 8 34q4 22 7 34t11 29 19 28q10 11 25 11 25 0 46-6t33-15 22-22 14-25 7-28 2-25 1-22q0-21-6-43t-10-33-16-31q-1-4-5-10t-6-13-5-13h155q43 0 75-32t32-75z" horiz-adv-x="928.6" />
+
 <glyph glyph-name="binoculars" unicode="&#xf1e5;" d="M393 678v-428q0-15-11-25t-25-11v-321q0-15-10-25t-26-11h-285q-15 0-25 11t-11 25v285l139 488q4 12 17 12h237z m178 0v-392h-142v392h142z m429-500v-285q0-15-11-25t-25-11h-285q-15 0-25 11t-11 25v321q-15 0-25 11t-11 25v428h237q13 0 17-12z m-589 661v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z m375 0v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z" horiz-adv-x="1000" />
 
 <glyph glyph-name="user-plus" unicode="&#xf234;" d="M393 357q-89 0-152 63t-62 151 62 152 152 63 151-63 63-152-63-151-151-63z m536-71h196q7 0 13-6t5-12v-107q0-8-5-13t-13-5h-196v-197q0-7-6-12t-12-6h-107q-8 0-13 6t-5 12v197h-197q-7 0-12 5t-6 13v107q0 7 6 12t12 6h197v196q0 7 5 13t13 5h107q7 0 12-5t6-13v-196z m-411-125q0-29 21-51t50-21h143v-133q-38-28-95-28h-488q-67 0-108 39t-41 106q0 30 2 58t8 61 15 60 24 55 34 45 48 30 62 11q11 0 22-10 44-34 86-51t92-17 92 17 86 51q11 10 22 10 73 0 121-54h-125q-29 0-50-21t-21-50v-107z" horiz-adv-x="1142.9" />