Refresh assets

mini_fiction/frontend/package.json

@@ -49,11 +49,15 @@
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^1.6.0",
     "postcss": "^8.2.13",
+    "postcss-custom-properties": "^11.0.0",
     "postcss-loader": "^5.2.0",
     "postcss-mixins": "^7.0.3",
+    "postcss-move-props-to-bg-image-query": "^4.0.0",
     "postcss-nesting": "^8.0.0",
     "source-map-loader": "^2.0.1",
     "style-loader": "^2.0.0",
+    "svg-transform-loader": "^2.0.13",
+    "svg-url-loader": "^7.1.1",
     "terser-webpack-plugin": "^5.1.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.36.2",

mini_fiction/frontend/src/css/icons.css

@@ -0,0 +1,148 @@
+.scon {
+    background-repeat: no-repeat;
+    background-position: center;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+
+    &.inactive {
+        filter: saturate(0) brightness(85%) drop-shadow(0 0 .05em rgba(0, 0, 0, .4));
+    }
+
+    &, &.active, &.inactive:hover {
+        filter: drop-shadow(0 0 .05em rgba(0, 0, 0, .4));
+    }
+
+    &:hover {
+        filter: saturate(105%) brightness(110%) drop-shadow(0 0 .05em rgba(0, 0, 0, .2));;
+    }
+
+    &.disabled {
+        opacity: 0.2;
+        cursor: default;
+    }
+
+}
+
+.icon-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &.disabled {
+        opacity: 0.2;
+        cursor: default;
+    }
+}
+
+.icon-metagroup {
+    float: right;
+    display: inline-flex;
+    gap: 1.25rem;
+
+    &.small .scon {
+        width: 1rem;
+        height: 1rem;
+    }
+}
+
+.favorite {
+    background-image: url(../images/assets/favorite.svg);
+    -svg-mixer-fill: var(--color-yellow);
+}
+
+.bookmark {
+    background-image: url(../images/assets/bookmark.svg);
+    -svg-mixer-fill: var(--color-green);
+}
+
+.html {
+    background-image: url(../images/assets/html.svg);
+    -svg-mixer-fill: var(--color-blue);
+}
+
+.fb2 {
+    background-image: url(../images/assets/fb2.svg);
+    -svg-mixer-fill: var(--color-blue);
+}
+
+.abuse {
+    background-image: url(../images/assets/abuse.svg);
+    -svg-mixer-fill: var(--color-red);
+}
+
+.vote-up {
+    background-image: url(../images/assets/upvote.svg);
+    -svg-mixer-fill: var(--color-green);
+}
+
+.up {
+    background-image: url(../images/assets/upvote.svg);
+    -svg-mixer-fill: var(--formatting-color);
+}
+
+.vote-down {
+    background-image: url(../images/assets/downvote.svg);
+    -svg-mixer-fill: var(--color-red);
+}
+
+.down {
+    background-image: url(../images/assets/downvote.svg);
+    -svg-mixer-fill: var(--formatting-color);
+}
+
+.formatting {
+    background-image: url(../images/assets/formatting.svg);
+    -svg-mixer-fill: var(--formatting-color);
+}
+
+.entity-abuse {
+    background-image: url(../images/assets/abuse.svg);
+    -svg-mixer-fill: var(--color-red);
+}
+
+.entity-edit {
+    background-image: url(../images/assets/edit.svg);
+    -svg-mixer-fill: var(--color-yellow);
+}
+
+.entity-delete {
+    background-image: url(../images/assets/delete.svg);
+    -svg-mixer-fill: var(--color-red);
+}
+
+.entity-restore {
+    background-image: url(../images/assets/restore.svg);
+    -svg-mixer-fill: var(--color-green);
+}
+
+.entity-draft {
+    background-image: url(../images/assets/draft.svg);
+    -svg-mixer-fill: var(--color-yellow);
+}
+
+.entity-approve {
+    background-image: url(../images/assets/approve.svg);
+    -svg-mixer-fill: var(--color-violet);
+}
+
+.entity-revoke {
+    background-image: url(../images/assets/revoke.svg);
+    -svg-mixer-fill: var(--color-violet);
+}
+
+.entity-publish {
+    background-image: url(../images/assets/publish.svg);
+    -svg-mixer-fill: var(--color-green);
+}
+
+.entity-pin {
+    background-image: url(../images/assets/pin.svg);
+    -svg-mixer-fill: var(--color-violet);
+}
+
+.entity-journal {
+    background-image: url(../images/assets/journal.svg);
+    -svg-mixer-fill: var(--color-blue);
+}