Mermutef/LMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vladislav Kopnin
2026-10-02 21:02:13 +03:00
parent f12943c462
commit df919507d7
31 changed files with 144 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/src/main/resources/static/css/app.css
View File

@@ -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 {

1
web/src/main/resources/static/icons/chevron-down.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 199 B

1
web/src/main/resources/static/icons/eye-closed.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/><line x1="3" y1="3" x2="21" y2="21"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 288 B

1
web/src/main/resources/static/icons/eye-open.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 251 B

1
web/src/main/resources/static/icons/hand.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 421 B

1
web/src/main/resources/static/icons/md-bold.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 5h5.2a3.4 3.4 0 0 1 0 6.8H7z"/><path d="M7 11.8h6a3.6 3.6 0 0 1 0 7.2H7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

1
web/src/main/resources/static/icons/md-code.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 104 B

1
web/src/main/resources/static/icons/md-codeblock.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M9.5 10l-2 2 2 2M14.5 10l2 2-2 2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 159 B

1
web/src/main/resources/static/icons/md-figure.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10" r="1.5"/><path d="M4 17l4.5-4.5 3 3 3-3L20 17"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 188 B

1
web/src/main/resources/static/icons/md-h2.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 6v12M11 6v12M4 12h7"/><text x="14.5" y="18.2" font-size="10" font-weight="700" fill="currentColor" stroke="none" font-family="system-ui, sans-serif">2</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 235 B

1
web/src/main/resources/static/icons/md-italic.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 5h6M7 19h6M15 5l-4 14"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 103 B

1
web/src/main/resources/static/icons/md-link.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 13.5a4 4 0 0 1 0-5.66l2.12-2.12a4 4 0 0 1 5.66 5.66l-1.2 1.2"/><path d="M13.5 10.5a4 4 0 0 1 0 5.66l-2.12 2.12a4 4 0 0 1-5.66-5.66l1.2-1.2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 222 B

1
web/src/main/resources/static/icons/md-ol.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 6h9M11 12h9M11 18h9"/><text x="3" y="8.4" font-size="7.5" fill="currentColor" stroke="none" font-family="system-ui, sans-serif">1</text><text x="3" y="14.4" font-size="7.5" fill="currentColor" stroke="none" font-family="system-ui, sans-serif">2</text><text x="3" y="20.4" font-size="7.5" fill="currentColor" stroke="none" font-family="system-ui, sans-serif">3</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 445 B

1
web/src/main/resources/static/icons/md-quote.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 6v12" stroke-width="3"/><path d="M10 8h9M10 12h9M10 16h6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 137 B

1
web/src/main/resources/static/icons/md-spoiler.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3l18 18"/><path d="M10.6 6.2A9.7 9.7 0 0 1 12 6c5 0 9 6 9 6a15.4 15.4 0 0 1-3.5 4M6.4 8.1A15.3 15.3 0 0 0 3 12s4 6 9 6a9.6 9.6 0 0 0 3.1-.5"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

1
web/src/main/resources/static/icons/md-table.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9.7h18M9 9.7V19M15 9.7V19M3 14.3h18"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 165 B

1
web/src/main/resources/static/icons/md-ul.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.6" cy="6" r="1.4" fill="currentColor" stroke="none"/><circle cx="4.6" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="4.6" cy="18" r="1.4" fill="currentColor" stroke="none"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

1
web/src/main/resources/static/icons/md-video.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5l5 2.5-5 2.5z" fill="currentColor" stroke="none"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 181 B

1
web/src/main/resources/static/icons/menu.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 199 B

1
web/src/main/resources/static/icons/pencil.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 222 B

1
web/src/main/resources/static/icons/theme.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="1.6"/><g stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><line x1="12" y1="1.4" x2="12" y2="3.2"/><line x1="12" y1="20.8" x2="12" y2="22.6"/><line x1="1.4" y1="12" x2="3.2" y2="12"/><line x1="20.8" y1="12" x2="22.6" y2="12"/><line x1="4.5" y1="4.5" x2="5.8" y2="5.8"/><line x1="18.2" y1="18.2" x2="19.5" y2="19.5"/><line x1="4.5" y1="19.5" x2="5.8" y2="18.2"/><line x1="18.2" y1="5.8" x2="19.5" y2="4.5"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 732 B

1
web/src/main/resources/static/icons/trash.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 344 B