Aggiunge i18n IT/EN/FR/DE/ES, pagine pubbliche squadre e UX archivio.
Il selettore lingua funziona sul web e sulle app native; su Android la preferenza è persistita e applicata al riavvio. Incluse anche eliminazione replay a scope e campi pagina pubblica squadra. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,162 @@
|
||||
.site-confirm {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10050;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.site-confirm[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.site-confirm__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.site-confirm__panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 420px);
|
||||
padding: 24px 24px 20px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #2a2a36;
|
||||
background: #16161e;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
|
||||
color: #f2f2f5;
|
||||
}
|
||||
.site-confirm__eyebrow {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #e53935;
|
||||
}
|
||||
.site-confirm__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
color: #fff;
|
||||
}
|
||||
.site-confirm__message {
|
||||
margin: 0 0 22px;
|
||||
color: #b8b8c4;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.site-confirm__panel--choices {
|
||||
width: min(100%, 460px);
|
||||
}
|
||||
.site-confirm__choices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.site-confirm__choices[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.site-confirm__choice {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #3a3a48;
|
||||
background: #1c1c26;
|
||||
color: #f2f2f5;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
.site-confirm__choice:hover,
|
||||
.site-confirm__choice:focus-visible {
|
||||
border-color: #6a6a7a;
|
||||
background: #22222e;
|
||||
outline: none;
|
||||
}
|
||||
.site-confirm__choice--danger {
|
||||
border-color: rgba(229, 57, 53, 0.45);
|
||||
background: rgba(229, 57, 53, 0.12);
|
||||
}
|
||||
.site-confirm__choice--danger:hover,
|
||||
.site-confirm__choice--danger:focus-visible {
|
||||
border-color: #e53935;
|
||||
background: rgba(229, 57, 53, 0.2);
|
||||
}
|
||||
.site-confirm__choice--disabled,
|
||||
.site-confirm__choice:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
.site-confirm__choice[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.site-confirm__choice-label {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.site-confirm__choice-hint {
|
||||
font-size: 0.8rem;
|
||||
color: #9a9aaa;
|
||||
}
|
||||
.site-confirm__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.site-confirm__btn[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.site-confirm__btn {
|
||||
min-width: 110px;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.site-confirm__btn.btn-secondary,
|
||||
.site-confirm__btn[data-confirm-cancel] {
|
||||
background: #22222c;
|
||||
border-color: #3a3a48;
|
||||
color: #eee;
|
||||
}
|
||||
.site-confirm__btn.btn-secondary:hover,
|
||||
.site-confirm__btn[data-confirm-cancel]:hover {
|
||||
border-color: #555;
|
||||
}
|
||||
.site-confirm__btn--danger {
|
||||
background: #e53935 !important;
|
||||
border-color: #e53935 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.site-confirm__btn--danger:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
body.site-confirm-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.site-confirm__actions {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.site-confirm__btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
(function () {
|
||||
var pendingForm = null;
|
||||
var pendingScope = null;
|
||||
var dialog = null;
|
||||
|
||||
function ensureDialog() {
|
||||
if (dialog) return dialog;
|
||||
|
||||
dialog = document.createElement("div");
|
||||
dialog.className = "site-confirm";
|
||||
dialog.setAttribute("role", "dialog");
|
||||
dialog.setAttribute("aria-modal", "true");
|
||||
dialog.setAttribute("aria-labelledby", "site-confirm-title");
|
||||
dialog.hidden = true;
|
||||
dialog.innerHTML =
|
||||
'<div class="site-confirm__backdrop" data-confirm-cancel></div>' +
|
||||
'<div class="site-confirm__panel site-confirm__panel--choices">' +
|
||||
' <p class="site-confirm__eyebrow">Conferma richiesta</p>' +
|
||||
' <h2 class="site-confirm__title" id="site-confirm-title">Sei sicuro?</h2>' +
|
||||
' <p class="site-confirm__message" id="site-confirm-message"></p>' +
|
||||
' <div class="site-confirm__choices" id="site-confirm-choices" hidden>' +
|
||||
' <button type="button" class="site-confirm__choice" data-confirm-scope="site">' +
|
||||
" <span class=\"site-confirm__choice-label\">Solo dal sito</span>" +
|
||||
" <span class=\"site-confirm__choice-hint\" data-hint-site>Il video resta su YouTube</span>" +
|
||||
" </button>" +
|
||||
' <button type="button" class="site-confirm__choice" data-confirm-scope="youtube">' +
|
||||
" <span class=\"site-confirm__choice-label\">Solo da YouTube</span>" +
|
||||
" <span class=\"site-confirm__choice-hint\" data-hint-youtube>Resta disponibile sul sito</span>" +
|
||||
" </button>" +
|
||||
' <button type="button" class="site-confirm__choice site-confirm__choice--danger" data-confirm-scope="both">' +
|
||||
" <span class=\"site-confirm__choice-label\">Da sito e YouTube</span>" +
|
||||
" <span class=\"site-confirm__choice-hint\" data-hint-both>Eliminazione completa</span>" +
|
||||
" </button>" +
|
||||
" </div>" +
|
||||
' <div class="site-confirm__actions">' +
|
||||
' <button type="button" class="btn btn-secondary site-confirm__btn" data-confirm-cancel>Annulla</button>' +
|
||||
' <button type="button" class="btn btn-primary site-confirm__btn site-confirm__btn--danger" data-confirm-ok>Elimina</button>' +
|
||||
" </div>" +
|
||||
"</div>";
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
dialog.addEventListener("click", function (event) {
|
||||
var target = event.target;
|
||||
if (!(target instanceof Element)) return;
|
||||
if (target.closest("[data-confirm-cancel]")) {
|
||||
closeDialog();
|
||||
return;
|
||||
}
|
||||
var scopeBtn = target.closest("[data-confirm-scope]");
|
||||
if (scopeBtn) {
|
||||
if (scopeBtn.disabled || scopeBtn.getAttribute("aria-disabled") === "true") return;
|
||||
submitPending(scopeBtn.getAttribute("data-confirm-scope"));
|
||||
return;
|
||||
}
|
||||
if (target.closest("[data-confirm-ok]")) {
|
||||
submitPending(pendingScope || "both");
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (!dialog || dialog.hidden) return;
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
closeDialog();
|
||||
}
|
||||
});
|
||||
|
||||
return dialog;
|
||||
}
|
||||
|
||||
function setChoiceVisible(btn, visible) {
|
||||
if (!(btn instanceof HTMLElement)) return;
|
||||
btn.hidden = !visible;
|
||||
if (!visible) {
|
||||
btn.disabled = true;
|
||||
btn.setAttribute("aria-disabled", "true");
|
||||
}
|
||||
}
|
||||
|
||||
function setChoiceEnabled(btn, enabled) {
|
||||
if (!(btn instanceof HTMLButtonElement)) return;
|
||||
btn.disabled = !enabled;
|
||||
btn.setAttribute("aria-disabled", enabled ? "false" : "true");
|
||||
btn.classList.toggle("site-confirm__choice--disabled", !enabled);
|
||||
}
|
||||
|
||||
function openDialog(message, options) {
|
||||
options = options || {};
|
||||
var hasSite = options.hasSite !== false;
|
||||
var hasYoutube = !!options.hasYoutube;
|
||||
var canSite = hasSite;
|
||||
var canYoutube = hasYoutube;
|
||||
var canBoth = hasSite && hasYoutube;
|
||||
var choiceCount = (canSite ? 1 : 0) + (canYoutube ? 1 : 0) + (canBoth ? 1 : 0);
|
||||
// Una sola destinazione disponibile → conferma semplice, senza elenco
|
||||
var multi = !!options.multi && choiceCount > 1;
|
||||
|
||||
if (canBoth) pendingScope = "both";
|
||||
else if (canSite) pendingScope = "site";
|
||||
else if (canYoutube) pendingScope = "youtube";
|
||||
else pendingScope = "both";
|
||||
|
||||
var el = ensureDialog();
|
||||
var titleEl = el.querySelector("#site-confirm-title");
|
||||
var messageEl = el.querySelector("#site-confirm-message");
|
||||
var okBtn = el.querySelector("[data-confirm-ok]");
|
||||
var choicesEl = el.querySelector("#site-confirm-choices");
|
||||
var siteBtn = el.querySelector('[data-confirm-scope="site"]');
|
||||
var youtubeBtn = el.querySelector('[data-confirm-scope="youtube"]');
|
||||
var bothBtn = el.querySelector('[data-confirm-scope="both"]');
|
||||
var hintSite = el.querySelector("[data-hint-site]");
|
||||
var hintYoutube = el.querySelector("[data-hint-youtube]");
|
||||
var hintBoth = el.querySelector("[data-hint-both]");
|
||||
var panel = el.querySelector(".site-confirm__panel");
|
||||
|
||||
if (titleEl) {
|
||||
if (multi) {
|
||||
titleEl.textContent = "Cosa vuoi eliminare?";
|
||||
} else if (pendingScope === "youtube") {
|
||||
titleEl.textContent = "Eliminare da YouTube?";
|
||||
} else if (pendingScope === "site") {
|
||||
titleEl.textContent = "Eliminare dal sito?";
|
||||
} else {
|
||||
titleEl.textContent = /elimin/i.test(message)
|
||||
? "Eliminare definitivamente?"
|
||||
: "Confermi questa operazione?";
|
||||
}
|
||||
}
|
||||
|
||||
if (messageEl) {
|
||||
if (multi) {
|
||||
messageEl.textContent =
|
||||
"Scegli dove rimuovere il replay. L'operazione è irreversibile.";
|
||||
} else if (pendingScope === "youtube") {
|
||||
messageEl.textContent =
|
||||
"Il video verrà rimosso da YouTube. Il replay resterà disponibile sul sito.";
|
||||
} else if (pendingScope === "site") {
|
||||
messageEl.textContent = hasYoutube
|
||||
? "Il replay verrà rimosso dal sito. Il video su YouTube resterà online."
|
||||
: "Stai per eliminare definitivamente questo replay dal sito. L'operazione è irreversibile.";
|
||||
} else {
|
||||
messageEl.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
if (choicesEl) choicesEl.hidden = !multi;
|
||||
if (panel) panel.classList.toggle("site-confirm__panel--choices", multi);
|
||||
|
||||
if (okBtn instanceof HTMLElement) {
|
||||
okBtn.hidden = multi;
|
||||
if (pendingScope === "youtube") okBtn.textContent = "Elimina da YouTube";
|
||||
else if (pendingScope === "site") okBtn.textContent = "Elimina dal sito";
|
||||
else okBtn.textContent = /elimin/i.test(message) ? "Elimina" : "Conferma";
|
||||
}
|
||||
|
||||
setChoiceVisible(siteBtn, canSite);
|
||||
setChoiceVisible(youtubeBtn, canYoutube);
|
||||
setChoiceVisible(bothBtn, canBoth);
|
||||
if (multi) {
|
||||
setChoiceEnabled(siteBtn, canSite);
|
||||
setChoiceEnabled(youtubeBtn, canYoutube);
|
||||
setChoiceEnabled(bothBtn, canBoth);
|
||||
if (hintSite) {
|
||||
hintSite.textContent = canYoutube
|
||||
? "Il video resta su YouTube"
|
||||
: "Rimuove i file dal sito";
|
||||
}
|
||||
if (hintYoutube) {
|
||||
hintYoutube.textContent = canSite
|
||||
? "Resta disponibile sul sito"
|
||||
: "Rimuove solo il video YouTube";
|
||||
}
|
||||
if (hintBoth) hintBoth.textContent = "Eliminazione completa";
|
||||
}
|
||||
|
||||
el.hidden = false;
|
||||
document.body.classList.add("site-confirm-open");
|
||||
|
||||
if (multi) {
|
||||
var focusBtn = canSite ? siteBtn : canYoutube ? youtubeBtn : bothBtn;
|
||||
if (focusBtn instanceof HTMLElement) focusBtn.focus();
|
||||
} else if (okBtn instanceof HTMLElement) {
|
||||
okBtn.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
if (!dialog) return;
|
||||
dialog.hidden = true;
|
||||
document.body.classList.remove("site-confirm-open");
|
||||
pendingForm = null;
|
||||
pendingScope = null;
|
||||
}
|
||||
|
||||
function ensureHiddenInput(form, name, value) {
|
||||
var input = form.querySelector('input[name="' + name + '"]');
|
||||
if (!(input instanceof HTMLInputElement)) {
|
||||
input = document.createElement("input");
|
||||
input.type = "hidden";
|
||||
input.name = name;
|
||||
form.appendChild(input);
|
||||
}
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
function submitPending(scope) {
|
||||
var form = pendingForm;
|
||||
if (form && form.closest(".replay-archive")) {
|
||||
saveArchiveScrollPosition();
|
||||
}
|
||||
closeDialog();
|
||||
if (!form) return;
|
||||
ensureHiddenInput(form, "delete_scope", scope || "both");
|
||||
form.dataset.confirmAccepted = "1";
|
||||
if (typeof form.requestSubmit === "function") {
|
||||
form.requestSubmit();
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener(
|
||||
"submit",
|
||||
function (event) {
|
||||
var form = event.target;
|
||||
if (!(form instanceof HTMLFormElement)) return;
|
||||
|
||||
if (form.dataset.confirmAccepted === "1") {
|
||||
delete form.dataset.confirmAccepted;
|
||||
return;
|
||||
}
|
||||
|
||||
var message =
|
||||
form.getAttribute("data-confirm") ||
|
||||
form.getAttribute("data-turbo-confirm");
|
||||
if (!message) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
pendingForm = form;
|
||||
pendingScope = "both";
|
||||
|
||||
var mode = form.getAttribute("data-confirm-mode") || "";
|
||||
var isReplayDelete =
|
||||
mode === "delete-replay" || mode === "delete-replay-youtube";
|
||||
var hasYoutube =
|
||||
form.getAttribute("data-has-youtube") === "1" ||
|
||||
mode === "delete-replay-youtube";
|
||||
var hasSiteAttr = form.getAttribute("data-has-site");
|
||||
var hasSite = hasSiteAttr == null ? true : hasSiteAttr === "1";
|
||||
|
||||
openDialog(message, {
|
||||
multi: isReplayDelete,
|
||||
hasYoutube: hasYoutube,
|
||||
hasSite: hasSite
|
||||
});
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Dopo submit nell'archivio replay, resta alla stessa altezza di scroll
|
||||
// (il redirect ricarica la pagina e altrimenti torna in cima).
|
||||
var SCROLL_KEY = "matchlivetv.replayArchive.scrollY";
|
||||
|
||||
function saveArchiveScrollPosition() {
|
||||
try {
|
||||
sessionStorage.setItem(
|
||||
SCROLL_KEY,
|
||||
String(window.scrollY || window.pageYOffset || 0)
|
||||
);
|
||||
} catch (err) {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
function saveArchiveScroll(event) {
|
||||
var form = event.target;
|
||||
if (!(form instanceof HTMLFormElement)) return;
|
||||
if (!form.closest(".replay-archive")) return;
|
||||
var needsConfirm =
|
||||
form.getAttribute("data-confirm") ||
|
||||
form.getAttribute("data-turbo-confirm");
|
||||
// Con confirm lo scroll si salva in submitPending, dopo la scelta nel dialog
|
||||
if (needsConfirm) return;
|
||||
saveArchiveScrollPosition();
|
||||
}
|
||||
|
||||
function restoreArchiveScroll() {
|
||||
try {
|
||||
var raw = sessionStorage.getItem(SCROLL_KEY);
|
||||
if (raw == null) return;
|
||||
sessionStorage.removeItem(SCROLL_KEY);
|
||||
var top = parseInt(raw, 10);
|
||||
if (isNaN(top)) return;
|
||||
window.scrollTo(0, top);
|
||||
requestAnimationFrame(function () {
|
||||
window.scrollTo(0, top);
|
||||
});
|
||||
} catch (err) {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("submit", saveArchiveScroll, true);
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", restoreArchiveScroll);
|
||||
} else {
|
||||
restoreArchiveScroll();
|
||||
}
|
||||
})();
|
||||
@@ -27,7 +27,98 @@ a:hover { text-decoration: underline; }
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.mast-inner .nav-toggle { margin-left: auto; }
|
||||
.mast-tools {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.mast-inner .nav-toggle { margin-left: 0; }
|
||||
.nav-lang {
|
||||
margin-left: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.lang-switcher {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.lang-switcher__toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-width: 42px;
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3a3a48;
|
||||
background: #1c1c26;
|
||||
color: #f0f0f5;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
.lang-switcher__toggle:hover,
|
||||
.lang-switcher.is-open .lang-switcher__toggle {
|
||||
border-color: #6a6a7a;
|
||||
background: #262632;
|
||||
}
|
||||
.lang-switcher__flag {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.lang-switcher__chevron {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid #9a9aaa;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.lang-switcher__menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
z-index: 1400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 48px;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #3a3a48;
|
||||
background: #16161e;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.lang-switcher__menu[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.lang-switcher__option-form {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
.lang-switcher__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.lang-switcher__option:hover {
|
||||
background: #22222e;
|
||||
border-color: #3a3a48;
|
||||
}
|
||||
.lang-switcher__option.is-active {
|
||||
background: rgba(229, 57, 53, 0.15);
|
||||
border-color: rgba(229, 57, 53, 0.4);
|
||||
}
|
||||
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: 0.03em; color: #fff; flex-shrink: 0; }
|
||||
.brand span { color: #e53935; }
|
||||
.mast-brand {
|
||||
@@ -197,6 +288,12 @@ body.nav-menu-open { overflow: hidden; }
|
||||
font-size: 1.05rem !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.nav-lang {
|
||||
margin-left: 0;
|
||||
margin-top: 4px;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
@@ -248,6 +345,10 @@ body.nav-menu-open { overflow: hidden; }
|
||||
.nav-actions {
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.nav-lang {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-backdrop { display: none !important; }
|
||||
}
|
||||
@@ -466,6 +567,251 @@ body.nav-menu-open { overflow: hidden; }
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.team-public-page { padding-top: 20px; padding-bottom: 48px; }
|
||||
.team-public-hero { margin-bottom: 28px; }
|
||||
.team-public-meta {
|
||||
margin: 0 0 12px;
|
||||
color: #aaa;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.team-public-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.team-public-section { margin-bottom: 32px; }
|
||||
.team-public-more { margin-top: 16px; }
|
||||
.team-public-more a { color: #e53935; text-decoration: none; }
|
||||
.team-public-more a:hover { text-decoration: underline; }
|
||||
.team-public-roster .roster-section { margin-bottom: 16px; }
|
||||
.team-public-empty { margin-top: 24px; }
|
||||
.team-public-empty { margin-top: 24px; }
|
||||
.team-directory { padding-top: 20px; padding-bottom: 48px; }
|
||||
.team-directory-filters { margin: 20px 0 16px; }
|
||||
.team-directory-filters__search { margin-bottom: 16px; }
|
||||
.team-directory-filters__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.team-directory-filters__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.team-directory-filters__field--chips {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.team-directory-filters__label {
|
||||
display: block;
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: #9a9aaa;
|
||||
line-height: 1.2;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
.team-directory-filters__label--spacer {
|
||||
visibility: hidden;
|
||||
}
|
||||
.team-directory-filters__select {
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 0 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #34344a;
|
||||
background: #14141c;
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.team-directory-filters__select:focus {
|
||||
outline: none;
|
||||
border-color: #e53935;
|
||||
box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.25);
|
||||
}
|
||||
.team-directory-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
.filter-chip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
}
|
||||
.filter-chip__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.filter-chip__face {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #34344a;
|
||||
background: #14141c;
|
||||
color: #b8b8c8;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01em;
|
||||
transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.filter-chip:hover .filter-chip__face {
|
||||
border-color: #4a4a62;
|
||||
color: #eee;
|
||||
}
|
||||
.filter-chip__input:focus-visible + .filter-chip__face {
|
||||
outline: 2px solid rgba(229, 57, 53, 0.55);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.filter-chip.is-active .filter-chip__face,
|
||||
.filter-chip__input:checked + .filter-chip__face {
|
||||
border-color: rgba(229, 57, 53, 0.75);
|
||||
background: rgba(229, 57, 53, 0.14);
|
||||
color: #fff;
|
||||
box-shadow: inset 0 0 0 1px rgba(229, 57, 53, 0.2);
|
||||
}
|
||||
.filter-chip__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.filter-chip__dot--live {
|
||||
background: #e53935;
|
||||
box-shadow: 0 0 8px rgba(229, 57, 53, 0.7);
|
||||
}
|
||||
.filter-chip.is-active .filter-chip__dot--live,
|
||||
.filter-chip__input:checked + .filter-chip__face .filter-chip__dot--live {
|
||||
animation: filter-chip-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
.filter-chip__icon {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.85;
|
||||
line-height: 1;
|
||||
}
|
||||
@keyframes filter-chip-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.55; transform: scale(0.85); }
|
||||
}
|
||||
.team-directory-filters__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.team-directory-filters__reset {
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
.team-directory-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.team-directory-card {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
background: #16161e;
|
||||
border: 1px solid #2a2a36;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
.team-directory-card:hover {
|
||||
border-color: #e53935;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.team-directory-card__media { flex-shrink: 0; }
|
||||
.team-directory-card__photo {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.team-directory-card__photo--logo {
|
||||
object-fit: contain;
|
||||
background: #111;
|
||||
padding: 8px;
|
||||
}
|
||||
.team-directory-card__photo--fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1f1f28;
|
||||
color: #e53935;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.team-directory-card__body { min-width: 0; }
|
||||
.team-directory-card__club {
|
||||
margin: 0 0 4px;
|
||||
font-size: 0.78rem;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.team-directory-card__name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.05rem;
|
||||
color: #fff;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.team-directory-card__meta {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.85rem;
|
||||
color: #999;
|
||||
}
|
||||
.team-directory-card__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.team-directory-footer {
|
||||
margin-top: 28px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.team-directory-footer a { color: #e53935; text-decoration: none; }
|
||||
.team-directory-footer a:hover { text-decoration: underline; }
|
||||
.roster-hero__photo--logo { object-fit: contain; background: #111; padding: 16px; }
|
||||
.team-public-logo-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--club-primary, #e53935);
|
||||
}
|
||||
.live-card__team-link {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(229, 57, 53, 0.45);
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.live-card__team-link:hover { color: #fff; text-decoration-color: #e53935; }
|
||||
.team-streaming-staff {
|
||||
margin-top: 36px;
|
||||
padding-top: 28px;
|
||||
@@ -1395,11 +1741,11 @@ body.cookie-banner-visible {
|
||||
}
|
||||
|
||||
.replay-archive-table__col-status {
|
||||
width: 18%;
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
.replay-archive-table__col-actions {
|
||||
width: 12%;
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.replay-archive__detail-line {
|
||||
@@ -1418,7 +1764,7 @@ body.cookie-banner-visible {
|
||||
}
|
||||
|
||||
.replay-archive-table__col-status .replay-archive__status {
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.replay-archive__thumb {
|
||||
@@ -1483,7 +1829,13 @@ a.replay-archive__thumb:hover {
|
||||
.replay-archive__privacy-form,
|
||||
.replay-archive__action-form {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.replay-archive__title-form {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.replay-archive__title-input {
|
||||
@@ -1493,11 +1845,50 @@ a.replay-archive__thumb:hover {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.replay-archive__privacy-select {
|
||||
width: 100%;
|
||||
.replay-archive__privacy-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 6px 8px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #3a3a48;
|
||||
background: #1c1c26;
|
||||
color: #c8c8d4;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.replay-archive__privacy-toggle:hover {
|
||||
border-color: #6a6a7a;
|
||||
background: #262632;
|
||||
color: #fff;
|
||||
}
|
||||
.replay-archive__privacy-toggle--public {
|
||||
color: #81c784;
|
||||
border-color: rgba(129, 199, 132, 0.35);
|
||||
background: rgba(76, 175, 80, 0.12);
|
||||
}
|
||||
.replay-archive__privacy-toggle--public:hover {
|
||||
border-color: #81c784;
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #a5d6a7;
|
||||
}
|
||||
.replay-archive__privacy-toggle--unlisted {
|
||||
color: #ffca28;
|
||||
border-color: rgba(255, 202, 40, 0.35);
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
}
|
||||
.replay-archive__privacy-toggle--unlisted:hover {
|
||||
border-color: #ffca28;
|
||||
background: rgba(255, 193, 7, 0.18);
|
||||
color: #ffe082;
|
||||
}
|
||||
.replay-archive__privacy-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.replay-archive__status {
|
||||
|
||||
Reference in New Issue
Block a user