/* ---------- Reset / Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { /* Colors */ --bg: #ffffff; --text: #000000; --primary: #2563eb; /* used for links / accents */ --button-bg: #7ab5b3; --card-bg: #e4e4e4; --muted: #999999; /* Modal / overlay */ --overlay: rgba(0,0,0,0.2); /* Banner */ --banner-bg: rgba(37, 99, 235, 0.92); --banner-color: #ffffff; /* Transitions */ --ease: 0.3s; } /* Night-mode variables are toggled by adding the class `night-mode` to or */ .night-mode, body.night-mode{ --bg: #111111; --text: #ffffff; --primary: #4800cf; --button-bg: linear-gradient(135deg, #39018ee3 0%, #6936b5e3 45%); --card-bg: #111111; --muted: #444444; --overlay: rgba(0,0,0,0.45); } /* ---------- Announcement Banner ---------- */ #announcementBanner { position: fixed; top: 0; left: 0; width: 100%; padding: 1em; font-weight: bold; font-size: 1.1em; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); background-color: var(--banner-bg); color: var(--banner-color); z-index: 9999; display: none; /* hidden by default, JS shows it */ transition: all var(--ease) ease; } /* ---------- Night Mode Toggle (switch) ---------- */ .switch { font-size: 17px; position: fixed; /* stay in place */ top: 20px; /* JS may adjust dynamically */ right: 20px; z-index: 10000; /* above banner */ display: inline-block; width: 3.5em; height: 2em; } .switch input { /* hide native checkbox */ opacity: 0; width: 0; height: 0; } .slider { --background: #28096b; position: absolute; cursor: pointer; inset: 0; background-color: var(--background); transition: .5s; border-radius: 30px; } .slider:before { position: absolute; content: ""; height: 1.4em; width: 1.4em; border-radius: 50%; left: 10%; bottom: 15%; box-shadow: inset 8px -4px 0px 0px #fff000; background: var(--background); transition: .5s; } input:checked + .slider { background-color: #522ba7; } input:checked + .slider:before { transform: translateX(100%); box-shadow: inset 15px -4px 0px 15px #fff000; } /* ---------- Page Layout / Typography ---------- */ body { background-color: var(--bg); color: var(--text); line-height: 1.6; padding: 20px; text-align: center; transition: padding-top var(--ease) ease, background-color var(--ease) ease, color var(--ease) ease; } h1, h2, h3 { margin-bottom: 15px; color: #313131; } p { margin-bottom: 15px; font-size: 16px; } button { background: var(--button-bg); color: white; outline: none; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; transition: transform 0.12s ease, box-shadow var(--ease) ease; } button:focus-visible { outline: none; border-color: rgba(72, 59, 255, 0.8); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30), 0 0 0 4px rgba(107, 97, 255, 0.18); } button:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30); } /* ---------- Modal ---------- */ .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: var(--overlay); z-index: 0; } .modal-panel { position: relative; z-index: 1; max-height: 90vh; overflow: auto; } .modal:not([hidden]) .modal-form { transform: translateY(0) scale(1); opacity: 1; } body.no-scroll { overflow: hidden; } #tournamentForm label { display: block; margin-bottom: 8px; font-weight: bold; text-align: left; } .form-row { color: var(--text); display: flex; flex-direction: column; margin-bottom: 15px; text-align: left; } .modal-form { background: var(--card-bg); padding: 20px; border-radius: 8px; width: 480px; max-width: 95%; transform: translateY(10px) scale(0.98); opacity: 0; transition: transform 180ms ease, opacity 180ms ease; color: #111; border: 1px solid rgba(255, 255, 255, 0.06); } .modal-form input, .modal-form textarea, .modal-form select { background: #ffffff; color: #000000; border: 1px solid rgba(255, 255, 255, 0.06); padding: 10px; border-radius: 6px; width: 100%; font: inherit; } .modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus { outline: none; border-color: #FFF7DD; box-shadow: 0 0 0 4px rgba(227, 254, 139, 0.12); } .modal-form input:disabled, .modal-form textarea:disabled, .modal-form select:disabled { background: #222; opacity: 0.7; } /* When night-mode variables are active, tune form fields for contrast */ .night-mode .modal-form, body.night-mode .modal-form { background: var(--card-bg); color: var(--text); } .night-mode .modal-form input, body.night-mode .modal-form input, .night-mode .modal-form textarea, body.night-mode .modal-form textarea, .night-mode .modal-form select, body.night-mode .modal-form select { background: #242424; color: #ffffff; } /* ---------- Spacer / Footer ---------- */ .spacer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 1; text-align: center; color: #333; padding: 4px 6px; background: transparent; } .spacer svg { width: 12px; height: 12px; vertical-align: middle; margin-left: 3px; } .spacer a { color: var(--primary); text-decoration: none; font-size: 10px; } .spacer a:hover { text-decoration: underline; } /* ---------- Tournament Tables / Forms ---------- */ .tournament-list { display: flex; flex-direction: column; align-items: center; margin: 30px 0; } .match-table { margin: 20px auto; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); padding: 10px; border-radius: 8px; } .stats-table { margin: 20px auto; border-collapse: collapse; width: 90%; max-width: 600px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); padding: 10px; } input[type="number"] { border-radius: 8px; background-color: #f3f3f3; } /* ---------- Guide / Helper blocks ---------- */ .guide { max-width: 900px; margin: 20px auto; text-align: center; } .guide .guide-meta { color: var(--muted); font-size: 0.95rem; margin-bottom: 8px; } .guide .guide-lead { color: #222; margin-bottom: 12px; } .guide-block { background-color: var(--muted); color: #fff; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: left; } .guide-block ul, .guide-block ol { margin: 0 0 0.75rem 1.25rem; /* top/right/bottom/left */ padding-left: 0.25rem; list-style-position: outside; } .guide-block ul ul, .guide-block ol ol, .guide-block ul ol, .guide-block ol ul { margin-left: 1rem; } .guide-block li { margin-bottom: 0.35rem; } .guide-block h3 { margin-top: 0; } /* Night-mode: guide block adjustments (works whether `night-mode` is on or ) */ .night-mode .guide, body.night-mode .guide { color: #e6eef8; } .night-mode .guide .guide-lead, body.night-mode .guide .guide-lead { color: #d1d5db; } .night-mode .guide-block, body.night-mode .guide-block { background-color: #0b1220; /* darker card background */ color: #e6eef8; box-shadow: 0 6px 18px rgba(0,0,0,0.6); } /* keep selectors for small nuances from original file */ .night-mode .guide-block ul, body.night-mode .guide-block ul, .night-mode .guide-block ol, body.night-mode .guide-block ol { color: inherit; } .night-mode .guide-block li, body.night-mode .guide-block li { color: inherit; } .night-mode .guide-block h3, body.night-mode .guide-block h3 { color: #fff; } .night-mode #guideTitle {color: #fff;} .night-mode #title {color: #fff;} .night-mode #guide-version {color:#a2a1a3} /* ----------------------------------------------------- End of organized stylesheet ----------------------------------------------------- */