/* ==========================================================================
Sendy 7.x – poprawki własne (Moonwise)
Ładowany w includes/header.php jako ostatni arkusz, po all.css i all2.css,
więc wygrywa bez podnoszenia specyficzności. Plików Sendy nie ruszamy:
kolejna aktualizacja nadpisze all2.css i wszystko z niego zniknie, a ten
plik zostanie. Do odtworzenia po aktualizacji jest tylko jedna linia
w header.php.
Działa dla obu motywów. Sendy przełącza tryb ciemny podmianą katalogu
(css/ na css/dark/), a nie klasą na , więc ten plik ładuje się
w obu przypadkach i musi wyglądać poprawnie na jasnym i ciemnym tle.
========================================================================== */
/* --------------------------------------------------------------------------
1. Kolor akcentu: #007AFF zamiast fioletu
Sendy 7 wprowadziło fiolet w dwóch miejscach naraz: w zmiennych --bf-accent-*
(paginacja, elementy aktywne) i w zahardkodowanych gradientach (przyciski,
badge). Trzeba pokryć oba, samo nadpisanie zmiennych nie wystarczy.
-------------------------------------------------------------------------- */
:root {
--mw-accent: #007AFF;
--mw-accent-hover: #0062CC;
--mw-accent-dark: #0051A8;
--mw-accent-soft: #EAF3FF;
--mw-accent-border: #BBD9FF;
/* Zmienne Sendy przestawione na nasz akcent */
--bf-accent-strong: #0057B8;
--bf-accent-soft: #EAF3FF;
}
.btn-primary,
.btn-inverse {
background: var(--mw-accent);
border-color: var(--mw-accent);
color: #FFFFFF;
box-shadow: 0 6px 16px rgba(0, 122, 255, .18);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-inverse:hover,
.btn-inverse:focus,
.btn-primary:active,
.btn-inverse:active {
background: var(--mw-accent-hover);
border-color: var(--mw-accent-hover);
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(0, 122, 255, .24);
}
.label-info,
.badge-info {
background: var(--mw-accent);
color: #FFFFFF;
}
/* Widoczny focus dla klawiatury. Sendy gasi obrys, a sam cień koloru
akcentu nie wystarcza osobom nawigującym tabem. */
.btn-primary:focus-visible,
.btn-inverse:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--mw-accent);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
2. Panel „Status Amazon SES” w lewej kolumnie
Kolumna ma 220 px, a Sendy daje w niej nagłówki 18 px i wiersze 15 px.
Efekt: „Pojemność Amazon SES” łamie się na dwie linie, a przy dłuższych
etykietach wartość ucieka do kolejnego wiersza. Robimy z tego zwartą
listę par etykieta-wartość: nagłówek schodzi do roli nadlinii, wiersz
jest flexem, więc wartość trzyma się prawej krawędzi zamiast zawijać.
-------------------------------------------------------------------------- */
.dashboard-ses-panel h3 {
margin: 0 0 10px;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bf-muted, #66758c);
}
/* Sendy rozdziela sekcje znacznikami . Odstępy robimy marginesami,
żeby rytm pionowy dało się kontrolować. */
.dashboard-ses-panel br {
display: none;
}
/* Odstep miedzy sekcjami liczymy od nagłówka, a nie selektorem sasiedztwa
„p + h3”: Sendy wstawia miedzy akapit a nagłówek znacznik , wiec
bezposredniego sasiedztwa tam nie ma, mimo ze wizualnie sa obok siebie. */
.dashboard-ses-panel h3:not(:first-child) {
margin-top: 18px;
}
.dashboard-ses-panel p {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 6px;
font-size: 12px;
line-height: 1.5;
}
.dashboard-ses-panel p strong {
font-weight: 500;
color: var(--bf-muted, #66758c);
white-space: nowrap;
}
.dashboard-ses-panel p .label {
flex: 0 0 auto;
font-size: 11px;
font-weight: 600;
line-height: 1.6;
padding: 1px 8px;
white-space: nowrap;
}
.dashboard-ses-panel {
padding: 16px 14px;
}
/* Bardzo długie wartości (np. nazwa regionu) mogą nie zmieścić się obok
etykiety. Wtedy wiersz łamie się świadomie, a nie przypadkiem. */
@media (max-width: 1200px) {
.dashboard-ses-panel p {
flex-wrap: wrap;
justify-content: flex-start;
gap: 4px;
}
}
/* --------------------------------------------------------------------------
3. Karta klucza dostępu w ustawieniach
-------------------------------------------------------------------------- */
.passkey-card,
.passkey-item {
border-radius: 12px;
}
.passkey-card .passkey-meta,
.passkey-item small {
font-size: 11px;
line-height: 1.6;
color: var(--bf-muted, #66758c);
}