Шапка одной высоты с админкой, ховер кнопок как у остальных
- на сайте логотип лежит внутри ссылки и как строчный элемент добавлял 7px: шапка была 70px против 63px в админке. Теперь логотип блочный, а ссылка — inline-flex: обе шапки 63px (и min-height layout сходится точно); - выход и «Админка» при наведении только меняют цвет (тёмно-красный и синий соответственно), без подъёма, тени и transform — как остальные кнопки проекта.
This commit is contained in:
@@ -157,7 +157,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin-actions">
|
<div class="admin-actions">
|
||||||
<a class="admin-ghost" href="/">← на сайт</a>
|
<a class="admin-ghost" href="/">Расписание</a>
|
||||||
<button class="theme-toggle" id="theme-toggle" title="Переключить тему">
|
<button class="theme-toggle" id="theme-toggle" title="Переключить тему">
|
||||||
<svg class="icon icon-sun" 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"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
<svg class="icon icon-sun" 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"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
||||||
<svg class="icon icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
<svg class="icon icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||||||
|
|||||||
@@ -112,7 +112,10 @@ a:hover { color: var(--accent-red); }
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topbar-brand > a { display: inline-flex; }
|
||||||
|
|
||||||
.topbar-logo {
|
.topbar-logo {
|
||||||
|
display: block;
|
||||||
width: 46px;
|
width: 46px;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -166,12 +169,11 @@ a:hover { color: var(--accent-red); }
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: filter .15s ease, transform .15s ease;
|
transition: background .15s ease, border-color .15s ease;
|
||||||
}
|
}
|
||||||
.topbar-admin:hover { filter: brightness(1.1); transform: translateY(-1px); }
|
.topbar-admin:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
|
||||||
.topbar-admin:active { transform: none; }
|
|
||||||
|
|
||||||
/* красная кнопка выхода: при наведении темнеет, приподнимается и даёт тень */
|
/* красная кнопка выхода: при наведении темнеет, как остальные кнопки */
|
||||||
.topbar-logout {
|
.topbar-logout {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -183,15 +185,9 @@ a:hover { color: var(--accent-red); }
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
|
transition: background .15s ease, border-color .15s ease;
|
||||||
}
|
}
|
||||||
.topbar-logout:hover {
|
.topbar-logout:hover { background: var(--accent-red); border-color: var(--accent-red); }
|
||||||
background: var(--accent-red);
|
|
||||||
border-color: var(--accent-red);
|
|
||||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-red-bright) 35%, transparent);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
.topbar-logout:active { transform: none; box-shadow: none; }
|
|
||||||
.theme-toggle .icon { width: 18px; height: 18px; }
|
.theme-toggle .icon { width: 18px; height: 18px; }
|
||||||
|
|
||||||
.icon-sun { display: none; }
|
.icon-sun { display: none; }
|
||||||
|
|||||||
Reference in New Issue
Block a user