install symfony demo with installer

app/assets/js/admin.js

@@ -0,0 +1,64 @@
+import '../scss/admin.scss';
+import 'eonasdan-bootstrap-datetimepicker';
+import 'typeahead.js';
+import Bloodhound from "bloodhound-js";
+import 'bootstrap-tagsinput';
+
+$(function() {
+    // Datetime picker initialization.
+    // See https://eonasdan.github.io/bootstrap-datetimepicker/
+    $('[data-toggle="datetimepicker"]').datetimepicker({
+        icons: {
+            time: 'fa fa-clock-o',
+            date: 'fa fa-calendar',
+            up: 'fa fa-chevron-up',
+            down: 'fa fa-chevron-down',
+            previous: 'fa fa-chevron-left',
+            next: 'fa fa-chevron-right',
+            today: 'fa fa-check-circle-o',
+            clear: 'fa fa-trash',
+            close: 'fa fa-remove'
+        }
+    });
+
+    // Bootstrap-tagsinput initialization
+    // https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
+    var $input = $('input[data-toggle="tagsinput"]');
+    if ($input.length) {
+        var source = new Bloodhound({
+            local: $input.data('tags'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            datumTokenizer: Bloodhound.tokenizers.whitespace
+        });
+        source.initialize();
+
+        $input.tagsinput({
+            trimValue: true,
+            focusClass: 'focus',
+            typeaheadjs: {
+                name: 'tags',
+                source: source.ttAdapter()
+            }
+        });
+    }
+});
+
+// Handling the modal confirmation message.
+$(document).on('submit', 'form[data-confirmation]', function (event) {
+    var $form = $(this),
+        $confirm = $('#confirmationModal');
+
+    if ($confirm.data('result') !== 'yes') {
+        //cancel submit event
+        event.preventDefault();
+
+        $confirm
+            .off('click', '#btnYes')
+            .on('click', '#btnYes', function () {
+                $confirm.data('result', 'yes');
+                $form.find('input[type="submit"]').attr('disabled', 'disabled');
+                $form.submit();
+            })
+            .modal('show');
+    }
+});

app/assets/js/app.js

@@ -0,0 +1,15 @@
+import '../scss/app.scss';
+
+// loads the Bootstrap jQuery plugins
+import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/alert.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/collapse.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js';
+import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js';
+import 'jquery'
+
+// loads the code syntax highlighting library
+import './highlight.js';
+
+// Creates links to the Symfony documentation
+import './doclinks.js';

app/assets/js/doclinks.js

@@ -0,0 +1,58 @@
+'use strict';
+
+// Wraps some elements in anchor tags referencing to the Symfony documentation
+$(function() {
+    var $modal = $('#sourceCodeModal');
+    var $controllerCode = $modal.find('code.php');
+    var $templateCode = $modal.find('code.twig');
+
+    function anchor(url, content) {
+        return '<a class="doclink" target="_blank" href="' + url + '">' + content + '</a>';
+    };
+
+    // Wraps links to the Symfony documentation
+    $modal.find('.hljs-comment').each(function() {
+        $(this).html($(this).html().replace(/https:\/\/symfony.com\/doc\/[\w/.#-]+/g, function(url) {
+            return anchor(url, url);
+        }));
+    });
+
+    // Wraps Symfony's annotations
+    var annotations = {
+        '@Cache': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/cache.html',
+        '@IsGranted': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/security.html#isgranted',
+        '@ParamConverter': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/converters.html',
+        '@Route': 'https://symfony.com/doc/current/routing.html#creating-routes-as-annotations',
+        '@Security': 'https://symfony.com/doc/current/bundles/SensioFrameworkExtraBundle/annotations/security.html#security'
+    };
+
+    $controllerCode.find('.hljs-doctag').each(function() {
+        var annotation = $(this).text();
+
+        if (annotations[annotation]) {
+            $(this).html(anchor(annotations[annotation], annotation));
+        }
+    });
+
+    // Wraps Twig's tags
+    $templateCode.find('.hljs-template-tag > .hljs-name').each(function() {
+        var tag = $(this).text();
+
+        if ('else' === tag || tag.match(/^end/)) {
+            return;
+        }
+
+        var url = 'https://twig.symfony.com/doc/3.x/tags/' + tag + '.html#' + tag;
+
+        $(this).html(anchor(url, tag));
+    });
+
+    // Wraps Twig's functions
+    $templateCode.find('.hljs-template-variable > .hljs-name').each(function() {
+        var func = $(this).text();
+
+        var url = 'https://twig.symfony.com/doc/3.x/functions/' + func + '.html#' + func;
+
+        $(this).html(anchor(url, func));
+    });
+});

app/assets/js/highlight.js

@@ -0,0 +1,8 @@
+import hljs from 'highlight.js/lib/highlight';
+import php from 'highlight.js/lib/languages/php';
+import twig from 'highlight.js/lib/languages/twig';
+
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('twig', twig);
+
+hljs.initHighlightingOnLoad();

app/assets/js/jquery.instantSearch.js

@@ -0,0 +1,106 @@
+/**
+ * jQuery plugin for an instant searching.
+ *
+ * @author Oleg Voronkovich <oleg-voronkovich@yandex.ru>
+ * @author Yonel Ceruto <yonelceruto@gmail.com>
+ */
+(function ($) {
+    'use strict';
+
+    String.prototype.render = function (parameters) {
+        return this.replace(/({{ (\w+) }})/g, function (match, pattern, name) {
+            return parameters[name];
+        })
+    };
+
+    // INSTANTS SEARCH PUBLIC CLASS DEFINITION
+    // =======================================
+
+    var InstantSearch = function (element, options) {
+        this.$input = $(element);
+        this.$form = this.$input.closest('form');
+        this.$preview = $('<ul class="search-preview list-group">').appendTo(this.$form);
+        this.options = $.extend({}, InstantSearch.DEFAULTS, this.$input.data(), options);
+
+        this.$input.keyup(this.debounce());
+    };
+
+    InstantSearch.DEFAULTS = {
+        minQueryLength: 2,
+        limit: 10,
+        delay: 500,
+        noResultsMessage: 'No results found',
+        itemTemplate: '\
+                <article class="post">\
+                    <h2><a href="{{ url }}">{{ title }}</a></h2>\
+                    <p class="post-metadata">\
+                       <span class="metadata"><i class="fa fa-calendar"></i> {{ date }}</span>\
+                       <span class="metadata"><i class="fa fa-user"></i> {{ author }}</span>\
+                    </p>\
+                    <p>{{ summary }}</p>\
+                </article>'
+    };
+
+    InstantSearch.prototype.debounce = function () {
+        var delay = this.options.delay;
+        var search = this.search;
+        var timer = null;
+        var self = this;
+
+        return function () {
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                search.apply(self);
+            }, delay);
+        };
+    };
+
+    InstantSearch.prototype.search = function () {
+        var query = $.trim(this.$input.val()).replace(/\s{2,}/g, ' ');
+        if (query.length < this.options.minQueryLength) {
+            this.$preview.empty();
+            return;
+        }
+
+        var self = this;
+        var data = this.$form.serializeArray();
+        data['l'] = this.limit;
+
+        $.getJSON(this.$form.attr('action'), data, function (items) {
+            self.show(items);
+        });
+    };
+
+    InstantSearch.prototype.show = function (items) {
+        var $preview = this.$preview;
+        var itemTemplate = this.options.itemTemplate;
+
+        if (0 === items.length) {
+            $preview.html(this.options.noResultsMessage);
+        } else {
+            $preview.empty();
+            $.each(items, function (index, item) {
+                $preview.append(itemTemplate.render(item));
+            });
+        }
+    };
+
+    // INSTANTS SEARCH PLUGIN DEFINITION
+    // =================================
+
+    function Plugin(option) {
+        return this.each(function () {
+            var $this = $(this);
+            var instance = $this.data('instantSearch');
+            var options = typeof option === 'object' && option;
+
+            if (!instance) $this.data('instantSearch', (instance = new InstantSearch(this, options)));
+
+            if (option === 'search') instance.search();
+        })
+    }
+
+    $.fn.instantSearch = Plugin;
+    $.fn.instantSearch.Constructor = InstantSearch;
+
+})(window.jQuery);

app/assets/js/login.js

@@ -0,0 +1,11 @@
+$(function() {
+    var usernameEl = $('#username');
+    var passwordEl = $('#password');
+
+    // in a real application, the user/password should never be hardcoded
+    // but for the demo application it's very convenient to do so
+    if (!usernameEl.val() || 'jane_admin' === usernameEl.val()) {
+        usernameEl.val('jane_admin');
+        passwordEl.val('kitten');
+    }
+});

app/assets/js/search.js

@@ -0,0 +1,9 @@
+import './jquery.instantSearch.js';
+
+$(function() {
+    $('.search-field')
+        .instantSearch({
+            delay: 100,
+        })
+        .keyup();
+});

app/assets/scss/admin.scss

@@ -0,0 +1,26 @@
+@import "~bootswatch/flatly/variables";
+@import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
+@import "bootstrap-tagsinput.scss";
+
+/* Page: 'Backend post index'
+   ------------------------------------------------------------------------- */
+body#admin_post_index .item-actions {
+  white-space: nowrap
+}
+
+body#admin_post_index .item-actions a.btn + a.btn {
+  margin-left: 4px
+}
+
+/* Page: 'Backend post show'
+   ------------------------------------------------------------------------- */
+body#admin_post_show .post-tags .label-default {
+  background-color: #e9ecec;
+  color: #6D8283;
+  font-size: 16px;
+  margin-right: 10px;
+  padding: .4em 1em .5em;
+}
+body#admin_post_show .post-tags .label-default i {
+  color: #95A6A7;
+}

app/assets/scss/app.scss

@@ -0,0 +1,360 @@
+// setting the value of this variable to an empty data URL is the only working solution
+// to load the Bootswatch web fonts locally and avoid loading them from Google servers
+// see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
+$web-font-path: 'data:text/css;base64,';
+
+// Make sure the bootstrap-sass and lato fonts are resolved correctly
+$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
+$lato-font-path: '~lato-font/fonts';
+
+@import "~bootswatch/flatly/variables";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+@import "~bootswatch/flatly/bootswatch";
+@import "~@fortawesome/fontawesome-free/css/all.css";
+@import "~@fortawesome/fontawesome-free/css/v4-shims.css";
+@import "~highlight.js/styles/solarized-light.css";
+
+// pick the Lato fonts individually to avoid importing the entire font family
+@import '~lato-font/scss/public-api';
+@include lato-include-font('normal');
+@include lato-include-font('bold');
+
+/* Basic styles
+   ------------------------------------------------------------------------- */
+p, ul, ol {
+  font-size: 19px;
+  margin-bottom: 1.5em
+}
+
+li {
+  margin-bottom: 0.5em
+}
+
+code {
+  background: #ecf0f1;
+  color: #2c3e50
+}
+
+.text-danger, .text-danger:hover {
+  color: #e74c3c
+}
+
+i {
+  margin-right: 0.25em
+}
+
+.table.table-middle-aligned th,
+.table.table-middle-aligned td {
+  vertical-align: middle;
+}
+
+.doclink {
+    color: inherit
+}
+
+/* Utilities
+   ------------------------------------------------------------------------- */
+.m-b-0 { margin-bottom: 0 }
+
+/* Page elements
+   ------------------------------------------------------------------------- */
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh
+}
+
+header {
+  margin-bottom: 2em
+}
+
+header ul.nav li {
+  margin-bottom: 0
+}
+
+header .locales {
+  min-width: 190px;
+}
+header .locales a {
+  color: #212529;
+  padding: 3px 15px;
+}
+header .locales a small {
+  border-radius: 4px;
+  border: 2px solid #dee2e6;
+  color: #7b8a8b;
+  float: left;
+  font-size: 12px;
+  line-height: 1.1;
+  margin: 2px 10px 0 0;
+  min-width: 26px;
+  padding: 0px 3px;
+  text-align: center;
+  text-transform: uppercase;
+}
+header .locales .active small,
+header .locales a:hover small {
+  color: inherit;
+}
+
+.body-container {
+  flex: 1;
+  /* needed to prevent pages with a very small height and browsers not supporting flex */
+  min-height: 600px
+}
+
+.body-container #main h1, .body-container #main h2 {
+  margin-top: 0
+}
+
+#sidebar .section {
+  margin-bottom: 2em
+}
+
+#sidebar p {
+  font-size: 15px
+}
+
+#sidebar p + p {
+  margin: 1.5em 0 0
+}
+
+footer {
+  background: #ecf0f1;
+  margin-top: 2em;
+  padding-top: 2em;
+  padding-bottom: 2em
+}
+
+footer p {
+  color: #7b8a8b;
+  font-size: 13px;
+  margin-bottom: 0.25em
+}
+
+footer #footer-resources {
+  text-align: right
+}
+
+footer #footer-resources i {
+  color: #7b8a8b;
+  font-size: 28.5px;
+  margin-left: 0.5em
+}
+
+#sourceCodeModal h3 {
+  font-size: 19px;
+  margin-top: 0
+}
+
+#sourceCodeModal h3 small {
+  color: #7b8a8b;
+  font-size: 80%
+}
+
+#sourceCodeModal pre {
+  margin-bottom: 2em;
+  padding: 0
+}
+
+#confirmationModal .modal-dialog {
+  width: 500px
+}
+
+#confirmationModal .modal-footer button {
+  min-width: 75px
+}
+
+/* Misc. elements
+   ------------------------------------------------------------------------- */
+.section.rss a {
+  color: #f39c12;
+  font-size: 21px;
+}
+
+/* Forms
+   ------------------------------------------------------------------------- */
+.form-group.has-error .form-control {
+  border-color: #e74c3c
+}
+
+.form-group.has-error .control-label {
+  color: #e74c3c
+}
+
+.form-group.has-error .help-block {
+  background-color: #e74c3c;
+  color: #fff;
+  font-size: 15px;
+  padding: 1em
+}
+
+.form-group.has-error .help-block ul,
+.form-group.has-error .help-block li {
+  margin-bottom: 0
+}
+.form-group.has-error .help-block li + li {
+  margin-top: 0.5em;
+}
+
+textarea {
+  max-width: 100%
+}
+
+/* Page: 'Technical Requirements Checker'
+   ------------------------------------------------------------------------- */
+body#requirements_checker header h1 {
+  margin-bottom: 0;
+  margin-top: 0
+}
+
+body#requirements_checker header h1 span {
+  font-size: 120%;
+  opacity: 0.7;
+  padding: 0 5px
+}
+
+body#requirements_checker .panel li {
+  margin-bottom: 1em
+}
+
+/* Page: 'Homepage'
+   ------------------------------------------------------------------------- */
+body#homepage {
+  text-align: center
+}
+
+/* Page: 'Login'
+   ------------------------------------------------------------------------- */
+body#login #login-users-help p {
+  font-size: 15px;
+  line-height: 1.42857
+}
+
+body#login #login-users-help p:last-child {
+  margin-bottom: 0
+}
+
+body#login #login-users-help p .label {
+  margin-right: 5px
+}
+
+body#login #login-users-help p .console {
+  display: block;
+  margin: 5px 0;
+  padding: 10px
+}
+
+/* Common Blog page elements
+   ------------------------------------------------------------------------- */
+.post-metadata {
+  color: #b4bcc2;
+  font-size: 19px;
+  margin-bottom: 16px;
+}
+.post-metadata .metadata {
+  margin-right: 1.5em;
+}
+
+.post-tags .label {
+  margin-right: 5px;
+}
+
+/* Page: 'Blog index'
+   ------------------------------------------------------------------------- */
+body#blog_index #main h1,
+body#blog_index #main p {
+  margin-bottom: 0.5em
+}
+
+body#blog_index article.post {
+  margin-bottom: 3em;
+}
+
+body#blog_index .post-metadata {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+body#blog_index .post-tags .label-default {
+  background-color: #e9ecec;
+  color: #6d8283;
+}
+body#blog_index .post-tags .label-default i {
+  color: #a3b2b2;
+}
+
+/* Page: 'Blog post show'
+   ------------------------------------------------------------------------- */
+body#blog_post_show #main h3 {
+  margin-bottom: 0.75em
+}
+
+body#blog_post_show .post-tags .label-default {
+  background-color: #e9ecec;
+  color: #6D8283;
+  font-size: 16px;
+  margin-right: 10px;
+  padding: .4em 1em .5em;
+}
+body#blog_post_show .post-tags .label-default i {
+  color: #95A6A7;
+}
+
+body#blog_post_show #post-add-comment {
+  margin: 2em 0
+}
+
+body#blog_post_show #post-add-comment p {
+  margin-bottom: 0
+}
+
+body#blog_post_show #post-add-comment p a.btn {
+  margin-right: 0.5em
+}
+
+body#blog_post_show .post-comment {
+  margin-bottom: 2em
+}
+
+body#blog_post_show .post-comment h4 {
+  font-size: 13px;
+  line-height: 1.42857;
+  margin-top: 0
+}
+
+body#blog_post_show .post-comment h4 strong {
+  display: block
+}
+
+/* Page: 'Comment form error'
+   ------------------------------------------------------------------------- */
+body#comment_form_error h1.text-danger {
+  margin-bottom: 1em
+}
+
+@media (min-width: 768px) and (max-width: 1200px) {
+  .container {
+    width: 98%;
+  }
+}
+
+/* Page: 'Blog search'
+   ------------------------------------------------------------------------- */
+body#blog_search #main h1,
+body#blog_search #main p {
+  margin-bottom: 0.5em
+}
+
+body#blog_search article.post:first-child {
+  margin-top: 2em;
+}
+
+body#blog_search article.post {
+  margin-bottom: 2em;
+}
+
+body#blog_search .post-metadata {
+  font-size: 16px;
+  margin-bottom: 8px;
+}

app/assets/scss/bootstrap-tagsinput.scss

@@ -0,0 +1,194 @@
+/* ------------------------------------------------------------------------------
+ *
+ *  # Twiter Typeahead
+ *
+ *  Styles for tagsinput.js - input suggestion engine
+ *
+ * ---------------------------------------------------------------------------- */
+.twitter-typeahead {
+  width: 100%;
+}
+.typeahead,
+.tt-query,
+.tt-hint {
+  outline: 0;
+}
+.tt-hint {
+  color: #999;
+}
+.tt-menu{
+  width: 100%;
+  margin-top: 1px;
+  min-width: 180px;
+  padding: 7px 0;
+  background-color: #fff;
+  border: 1px solid rgba(0,0,0,0.15);
+  border-radius: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.typeahead-scrollable .tt-menu{
+  max-height: 250px;
+}
+.typeahead-rtl .tt-menu{
+  text-align: right;
+}
+.tt-suggestion {
+  padding: 8px 15px;
+  cursor: pointer;
+}
+.tt-suggestion.tt-cursor {
+  background-color: #f5f5f5;
+}
+.tt-suggestion p {
+  margin: 0;
+}
+.tt-suggestion.tt-selectable:before {
+  content: '\f02b';
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  display: inline-block;
+  font-size: 15px;
+  margin-right: 0.5em;
+  color: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.tt-dataset-group .tt-suggestion {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.tt-heading {
+  font-size: 11px;
+  line-height: 1.82;
+  padding: 8px 15px;
+  text-transform: uppercase;
+  display: block;
+  font-weight: 700;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.tt-suggestion:hover,
+.tt-suggestion:focus {
+  color: #ffffff;
+  text-decoration: none;
+  outline: 0;
+  background-color: #18bc9c;
+}
+/* ------------------------------------------------------------------------------
+*
+*  # Bootstrap tags input
+*
+*  Styles for tagsinput.js - tags input for Bootstrap
+*
+* ---------------------------------------------------------------------------- */
+.bootstrap-tagsinput {
+  display: table-cell;
+  vertical-align: middle;
+  width: 100%;
+  height: 45px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1.42857143;
+  color: #2c3e50;
+  background-color: #ffffff;
+  background-image: none;
+  border: 2px solid #dce4ec;
+  border-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+.has-error .bootstrap-tagsinput {
+  border-color: #e74c3c !important;
+}
+.bootstrap-tagsinput.focus {
+  border-color: #2c3e50;
+  outline: 0;
+  box-shadow: none;
+}
+.bootstrap-tagsinput input {
+  border: 0;
+  outline: 0;
+  background-color: transparent;
+  padding: 5px 11px;
+  margin-top: 2px;
+  margin-left: 2px;
+  width: auto !important;
+  min-width: 100px;
+  font-size: 15px;
+  line-height: 1.6666667;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput input:focus {
+  border: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput .twitter-typeahead {
+  width: auto;
+}
+.bootstrap-tagsinput .tt-menu {
+  margin-top: 5px;
+  min-width: 200px;
+}
+.bootstrap-tagsinput .tag {
+  margin: 1px 0 0 3px;
+  border: 0;
+  border-radius: .25em;
+  padding: 5px 11px;
+  padding-right: 30px;
+  float: left;
+  font-size: 15px;
+  line-height: 1.6666667;
+  font-weight: 400;
+  text-transform: none;
+  position: relative;
+  background-color: #18bc9c;
+  color: #fff;
+}
+.has-error .bootstrap-tagsinput .tag {
+  background-color: #e74c3c !important;
+}
+.bootstrap-tagsinput .tag [data-role="remove"] {
+  cursor: pointer;
+  color: inherit;
+  position: absolute;
+  top: 50%;
+  right: 11px;
+  line-height: 1;
+  margin-top: -5.5px;
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.bootstrap-tagsinput .tag:before {
+  content: '\f02b';
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  display: inline-block;
+  font-size: 15px;
+  margin-right: 0.5em;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+  content: '\f00d';
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  display: block;
+  font-size: 13px;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}