Icons as SVG assets via CSS masks; bordeaux links without underline; pencil for article edit

web/src/main/resources/static/css/app.css

@@ -20,8 +20,8 @@ body {
     --c-surface: #ffffff;
     --c-text: #131316;
     --c-text-muted: #74747c;
-    --c-text-link: #131316;
-    --c-text-link-hover: #7a2333;
+    --c-text-link: #7a2333;
+    --c-text-link-hover: #9d2b3c;
     --c-border: #e6e6e9;
     --c-border-strong: #d4d4da;
     --c-accent: #7a2333;
@@ -47,8 +47,8 @@ body {
     --c-surface: #17181d;
     --c-text: #e8e9ec;
     --c-text-muted: #9a9ba4;
-    --c-text-link: #e8e9ec;
-    --c-text-link-hover: #d98b98;
+    --c-text-link: #d98b98;
+    --c-text-link-hover: #f0b9c2;
     --c-border: #26272e;
     --c-border-strong: #34353d;
     --c-accent: #a64d5f;
@@ -65,8 +65,8 @@ body {
     --c-tone-neu: #9a9ba4;
 }
 
-a { color: var(--c-text-link); text-decoration: none; }
-a:not(.btn):hover { color: var(--c-text-link-hover); }
+a { color: var(--c-accent); text-decoration: none; }
+a:not(.btn):hover { color: var(--c-accent-hover); }
 
 /* Атрибут hidden должен скрывать элемент даже если у него display из класса */
 [hidden] { display: none !important; }
@@ -87,9 +87,9 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }
 
 /* Nav */
 .nav { display: flex; align-items: center; gap: 1.125rem; flex: 1 1 auto; flex-wrap: wrap; font-size: 0.84375rem; }
-.nav-link { color: var(--c-text-muted); text-decoration: none; font-weight: 500; }
-.nav-link:hover { color: var(--c-text); }
-.nav-link.active { color: var(--c-accent); }
+.nav-link { color: var(--c-accent); text-decoration: none; font-weight: 500; }
+.nav-link:hover { color: var(--c-accent-hover); }
+.nav-link.active { color: var(--c-accent); font-weight: 700; }
 .nav-sep { color: var(--c-text-muted); }
 .logo { font-size: 1rem; font-weight: 700; color: var(--c-text); text-decoration: none; letter-spacing: -0.01em; }
 .logo b { color: var(--c-accent); }
@@ -139,6 +139,37 @@ p { margin-top: 0; }
 .label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 500; }
 .hint { margin-top: 0.25rem; font-size: 0.75rem; color: var(--c-text-muted); }
 
+
+/* ---- Icons: SVG-файлы из /icons, подключаются CSS-масками (цвет = currentColor) ---- */
+.ico {
+    display: inline-block; flex: 0 0 auto;
+    background-color: currentColor;
+    -webkit-mask-position: center; mask-position: center;
+    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
+    -webkit-mask-size: contain; mask-size: contain;
+}
+.ico-eye-open { -webkit-mask-image: url('../icons/eye-open.svg'); mask-image: url('../icons/eye-open.svg'); }
+.ico-eye-closed { -webkit-mask-image: url('../icons/eye-closed.svg'); mask-image: url('../icons/eye-closed.svg'); }
+.ico-pencil { -webkit-mask-image: url('../icons/pencil.svg'); mask-image: url('../icons/pencil.svg'); }
+.ico-hand { -webkit-mask-image: url('../icons/hand.svg'); mask-image: url('../icons/hand.svg'); }
+.ico-trash { -webkit-mask-image: url('../icons/trash.svg'); mask-image: url('../icons/trash.svg'); }
+.ico-menu { -webkit-mask-image: url('../icons/menu.svg'); mask-image: url('../icons/menu.svg'); }
+.ico-chevron-down { -webkit-mask-image: url('../icons/chevron-down.svg'); mask-image: url('../icons/chevron-down.svg'); }
+.ico-theme { -webkit-mask-image: url('../icons/theme.svg'); mask-image: url('../icons/theme.svg'); }
+.ico-md-bold { -webkit-mask-image: url('../icons/md-bold.svg'); mask-image: url('../icons/md-bold.svg'); }
+.ico-md-italic { -webkit-mask-image: url('../icons/md-italic.svg'); mask-image: url('../icons/md-italic.svg'); }
+.ico-md-h2 { -webkit-mask-image: url('../icons/md-h2.svg'); mask-image: url('../icons/md-h2.svg'); }
+.ico-md-ul { -webkit-mask-image: url('../icons/md-ul.svg'); mask-image: url('../icons/md-ul.svg'); }
+.ico-md-ol { -webkit-mask-image: url('../icons/md-ol.svg'); mask-image: url('../icons/md-ol.svg'); }
+.ico-md-quote { -webkit-mask-image: url('../icons/md-quote.svg'); mask-image: url('../icons/md-quote.svg'); }
+.ico-md-link { -webkit-mask-image: url('../icons/md-link.svg'); mask-image: url('../icons/md-link.svg'); }
+.ico-md-code { -webkit-mask-image: url('../icons/md-code.svg'); mask-image: url('../icons/md-code.svg'); }
+.ico-md-codeblock { -webkit-mask-image: url('../icons/md-codeblock.svg'); mask-image: url('../icons/md-codeblock.svg'); }
+.ico-md-table { -webkit-mask-image: url('../icons/md-table.svg'); mask-image: url('../icons/md-table.svg'); }
+.ico-md-figure { -webkit-mask-image: url('../icons/md-figure.svg'); mask-image: url('../icons/md-figure.svg'); }
+.ico-md-video { -webkit-mask-image: url('../icons/md-video.svg'); mask-image: url('../icons/md-video.svg'); }
+.ico-md-spoiler { -webkit-mask-image: url('../icons/md-spoiler.svg'); mask-image: url('../icons/md-spoiler.svg'); }
+
 /* Cards */
 .card { border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
 .card-flush { border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); padding: 0; overflow: hidden; }
@@ -342,7 +373,7 @@ html.modal-open body {
 .md-body pre { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.75rem 1rem; overflow-x: auto; font-size: 0.8125rem; }
 .md-body code { font-family: monospace; }
 /* Ссылки в учебных материалах — акцентные, с подчёркиванием: их видно в тексте */
-.md-body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
+.md-body a { color: var(--c-accent); text-decoration: none; }
 .md-body a:hover { color: var(--c-accent-hover); }
 .md-body details.spoiler { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
 .md-body details.spoiler summary { cursor: pointer; font-weight: 500; color: var(--c-accent); }
@@ -504,12 +535,10 @@ dialog.modal.modal-lg .modal-body { max-height: 88vh; min-height: 62vh; }
     background: none; cursor: pointer; color: var(--c-text-muted);
 }
 .sub-toggle:hover { color: var(--c-text); }
-.sub-arrow {
-    display: block; flex: 0 0 auto; width: 8px; height: 8px;
-    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
-    transform: rotate(-135deg); transition: transform 0.2s;
-}
-.sub-acc.collapsed .sub-arrow { transform: rotate(45deg); }
+.sub-arrow .ico { width: 0.75rem; height: 0.75rem; }
+.sub-arrow { transform: rotate(0deg); transition: transform 0.2s; }
+.sub-acc.collapsed .sub-arrow { transform: rotate(0deg); }
+.sub-acc:not(.collapsed) .sub-arrow { transform: rotate(180deg); }
 .section-body { padding-bottom: 0.4rem; }
 
 /* ---- Матрица группы и карточки защиты ---- */
@@ -596,11 +625,9 @@ dialog.modal.modal-lg .modal-body { max-height: 88vh; min-height: 62vh; }
 .actions-col { display: inline-flex; flex-direction: column; gap: 0.35rem; align-items: stretch; min-width: 6.5rem; }
 .actions-col .inline-form { display: block; width: 100%; }
 .actions-col .btn { display: block; width: 100%; text-align: center; }
-/* Монохромные SVG-иконки в ячейках матрицы (защита, оценка) */
+/* Иконки — SVG-файлы из /icons через CSS-маски: цвет наследуется от текста */
 .cell-ico {
     width: 0.95rem; height: 0.95rem; display: block;
-    fill: none; stroke: currentColor; stroke-width: 2;
-    stroke-linecap: round; stroke-linejoin: round;
 }
 
 /* tablekit: сортируемые таблицы и поиск */
@@ -683,8 +710,7 @@ th.th-filterable { padding-bottom: 0.35rem; }
 .md-btn:active { transform: translateY(1px); }
 .md-btn:focus-visible { outline: 2px solid var(--c-text-link); outline-offset: 1px; }
 .md-ico {
-    width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
-    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+    width: 1.15rem; height: 1.15rem;
 }
 .md-sep { width: 1px; align-self: stretch; margin: 0.2rem 0.3rem; background: var(--c-border); }
 .md-editor-head {