Style: align last tweaks with B3 bordeaux design (neutral header, outline buttons, 8/10px radii)

2026-10-02 16:00:14 +03:00
parent 51d1b84297
commit c355190783
8 changed files with 32 additions and 37 deletions
--- a/web/src/main/resources/static/css/app.css
+++ b/web/src/main/resources/static/css/app.css
@@ -36,12 +36,10 @@ body {
    --c-tone-pos: #2f6b3a;
    --c-tone-neg: #9d2b3c;
    --c-tone-neu: #74747c;
-    --c-btn-secondary-bg: #f1f1f3;
-    --c-btn-secondary-bg-hover: #e6e6ea;
    --radius-xs: 0.125rem;
-    --radius-sm: 0.1875rem;
-    --radius: 0.25rem;
-    --radius-lg: 0.375rem;
+    --radius-sm: 0.25rem;
+    --radius: 0.5rem;
+    --radius-lg: 0.625rem;
 }

 [data-theme="dark"] {
@@ -65,8 +63,6 @@ body {
    --c-tone-pos: #6fcf8f;
    --c-tone-neg: #d98b98;
    --c-tone-neu: #9a9ba4;
-    --c-btn-secondary-bg: #26272e;
-    --c-btn-secondary-bg-hover: #2f3037;
 }

 a { color: var(--c-text-link); text-decoration: none; }
@@ -77,7 +73,7 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }

 /* Layout */
 .page { display: flex; flex-direction: column; min-height: 100vh; }
-.page-header { position: sticky; top: 0; z-index: 10; border-bottom: 2px solid var(--c-accent); background: var(--c-surface); }
+.page-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
 .page-header-inner { max-width: 1152px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.75rem 1.5rem; }
@media (max-width: 640px) {
    .page-header-inner { padding: 0.5rem 0.75rem; }
@@ -91,10 +87,10 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }
 /* Nav */
 .nav { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; }
 .nav-link { color: var(--c-text-muted); text-decoration: none; }
-.nav-link:hover { color: var(--c-accent); }
+.nav-link:hover { color: var(--c-text); }
 .nav-sep { color: var(--c-text-muted); }
-.logo { font-size: 1.25rem; font-weight: 700; color: var(--c-accent); text-decoration: none; letter-spacing: -0.01em; }
-.logo:hover { color: var(--c-accent-hover); }
+.logo { font-size: 1rem; font-weight: 700; color: var(--c-text); text-decoration: none; letter-spacing: -0.01em; }
+.logo b { color: var(--c-accent); }
 .nav-user { font-weight: 500; }
 .theme-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.5rem; }
 .theme-icon { width: 1.05rem; height: 1.05rem; display: block; }
@@ -115,11 +111,10 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }
 .btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
 .btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: #ffffff; }
 .btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
-.btn-secondary { background: var(--c-btn-secondary-bg); border-color: var(--c-btn-secondary-bg); color: var(--c-text); }
-.btn-secondary:hover { background: var(--c-btn-secondary-bg-hover); border-color: var(--c-btn-secondary-bg-hover); }
-/* Деструктивные действия — залиты мягким бордо, текст и рамка акцентные */
-.btn-danger { background: var(--c-accent-soft); border-color: #dcb9be; color: var(--c-accent); }
-.btn-danger:hover { background: var(--c-accent); border-color: var(--c-accent); color: #ffffff; }
+.btn-secondary { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
+.btn-secondary:hover { background: var(--c-bg); }
+.btn-danger { background: var(--c-surface); border-color: #dcb9be; color: var(--c-accent); }
+.btn-danger:hover { background: var(--c-accent-soft); border-color: var(--c-accent); }

 /* Forms */
 .input {
@@ -182,7 +177,7 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }
 /* Badges — «этикетки»: строгая рамка, разрядка капсом; только индикаторы статуса */
 .badge {
    display: inline-flex; align-items: center;
-    border-radius: var(--radius-sm); padding: 0.1rem 0.5rem;
+    border-radius: var(--radius-xs); padding: 0.1rem 0.5rem;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid transparent;
 }
--- a/web/src/main/resources/templates/admin/group.html
+++ b/web/src/main/resources/templates/admin/group.html
@@ -376,7 +376,7 @@
    <div class="modal-body" id="assign-modal-body"></div>
 </dialog>

-<script th:src="@{/js/admin-group.js(v='9')}" defer></script>
+<script th:src="@{/js/admin-group.js(v='10')}" defer></script>
 </div>
 </body>
 </html>
--- a/web/src/main/resources/templates/fragments/base.html
+++ b/web/src/main/resources/templates/fragments/base.html
@@ -15,15 +15,15 @@
    </noscript>
    <link rel="icon" type="image/svg+xml" th:href="@{/favicon.svg(v='2')}">
    <!-- v=4: сброс кэша стилей после редизайна; при изменении css поднимать версию -->
-    <link rel="stylesheet" th:href="@{/css/app.css(v='9')}">
-    <link id="hljs-light" rel="stylesheet" th:href="@{/css/hljs-github.css(v='9')}">
-    <link id="hljs-dark" rel="stylesheet" th:href="@{/css/hljs-github-dark.css(v='9')}" disabled>
-    <script th:src="@{/js/highlight.min.js(v='9')}" defer></script>
-    <script th:src="@{/js/table-scroll.js(v='9')}" defer></script>
-    <script th:src="@{/js/tablekit.js(v='9')}" defer></script>
-    <script th:src="@{/js/ui-state.js(v='9')}" defer></script>
-    <script th:src="@{/js/md-content.js(v='9')}" defer></script>
-    <script th:src="@{/js/submit-guard.js(v='9')}" defer></script>
+    <link rel="stylesheet" th:href="@{/css/app.css(v='10')}">
+    <link id="hljs-light" rel="stylesheet" th:href="@{/css/hljs-github.css(v='10')}">
+    <link id="hljs-dark" rel="stylesheet" th:href="@{/css/hljs-github-dark.css(v='10')}" disabled>
+    <script th:src="@{/js/highlight.min.js(v='10')}" defer></script>
+    <script th:src="@{/js/table-scroll.js(v='10')}" defer></script>
+    <script th:src="@{/js/tablekit.js(v='10')}" defer></script>
+    <script th:src="@{/js/ui-state.js(v='10')}" defer></script>
+    <script th:src="@{/js/md-content.js(v='10')}" defer></script>
+    <script th:src="@{/js/submit-guard.js(v='10')}" defer></script>
    <script>
        (function(){
            var t = localStorage.getItem('lms-theme') || 'light';
@@ -98,7 +98,7 @@
 <div class="page">
    <header class="page-header">
        <div class="page-header-inner">
-            <a th:href="@{/}" class="logo">LMS</a>
+            <a th:href="@{/}" class="logo">LMS<b>.</b></a>
            <nav class="nav">
                <th:block th:if="${currentUser != null}">
                    <a th:if="${currentUser.admin}" th:href="@{/admin/groups}" class="nav-link">Группы</a>
@@ -109,8 +109,8 @@
                    <a th:if="${currentUser.admin}" th:href="@{/admin}" class="nav-link nav-user" th:text="${currentUser.name}" title="Личный кабинет">—</a>
                    <a th:unless="${currentUser.admin}" th:href="@{/student}" class="nav-link nav-user" th:text="${currentUser.name}" title="Личный кабинет">—</a>
                </th:block>
-                <a th:if="${currentUser == null}" th:href="@{/login}" class="btn btn-primary">Войти</a>
-                <button type="button" onclick="toggleTheme()" class="btn btn-primary theme-btn"
+                <a th:if="${currentUser == null}" th:href="@{/login}" class="btn btn-secondary">Войти</a>
+                <button type="button" onclick="toggleTheme()" class="btn btn-secondary theme-btn"
                        aria-label="Сменить тему" title="Сменить тему">
                    <svg class="theme-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <circle cx="12" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="1.6"/>
@@ -128,7 +128,7 @@
                    </svg>
                </button>
                <form th:if="${currentUser != null}" th:action="@{/logout}" method="post">
-                    <button class="btn btn-primary" type="submit">Выйти</button>
+                    <button class="btn btn-secondary" type="submit">Выйти</button>
                <input type="hidden" name="_csrf" th:value="${csrfToken}">
                </form>
            </nav>
--- a/web/src/main/resources/templates/learn/article.html
+++ b/web/src/main/resources/templates/learn/article.html
@@ -126,7 +126,7 @@
        </div>


-    <script th:src="@{/js/mdeditor.js(v='9')}" defer></script>
+    <script th:src="@{/js/mdeditor.js(v='10')}" defer></script>
 </div>
 </body>
 </html>
--- a/web/src/main/resources/templates/learn/chapter.html
+++ b/web/src/main/resources/templates/learn/chapter.html
@@ -190,7 +190,7 @@
        </div>
    </dialog>

-    <script th:src="@{/js/content-sort.js(v='9')}" defer></script>
+    <script th:src="@{/js/content-sort.js(v='10')}" defer></script>
 </div>
 </body>
 </html>
--- a/web/src/main/resources/templates/learn/index.html
+++ b/web/src/main/resources/templates/learn/index.html
@@ -241,8 +241,8 @@
        </div>
    </dialog>

-<script th:src="@{/js/mdeditor.js(v='9')}" defer></script>
-<script th:src="@{/js/content-sort.js(v='9')}" defer></script>
+<script th:src="@{/js/mdeditor.js(v='10')}" defer></script>
+<script th:src="@{/js/content-sort.js(v='10')}" defer></script>
 </div>
 </body>
 </html>
--- a/web/src/main/resources/templates/learn/section.html
+++ b/web/src/main/resources/templates/learn/section.html
@@ -147,7 +147,7 @@
        </div>
    </dialog>

-    <script th:src="@{/js/content-sort.js(v='9')}" defer></script>
+    <script th:src="@{/js/content-sort.js(v='10')}" defer></script>
 </div>
 </body>
 </html>
--- a/web/src/main/resources/templates/student/lab.html
+++ b/web/src/main/resources/templates/student/lab.html
@@ -109,7 +109,7 @@
            <p class="text-sm text-muted">Ожидайте преподавателя с проверкой.</p>
        </div>
    </div>
-<script th:src="@{/js/defense-timer.js(v='9')}" defer></script>
+<script th:src="@{/js/defense-timer.js(v='10')}" defer></script>
 </div>
 </body>
 </html>