/*My code*/ /*reset section*/ * { font-family: Helvetica, Verdana, sans-serif; /* margin:0px; */ /* padding:0px; */ } /*sample to adjust/center content in browser window*/ .container { width:90%; margin:auto; } /* =========================================================== Theme tokens -- light is the default/unchanged look (:root). [data-theme="dark"] and [data-theme="space"] override just the color tokens; every rule below reads colors through var(...) so switching the attribute on re-themes the whole page. Space reuses dark's tokens almost entirely ("a deviation on the dark profile") and adds a background image + translucent surfaces on top. =========================================================== */ :root { --bg: #ffffff; --nav-bg: #2f3542; --nav-text: #cfd3da; --nav-link: #ffffff; --nav-link-hover: #70a1ff; --title-bg: #ffffff; --title-text: #000000; --errormsg-bg: #fdecea; --errormsg-border: #f3b4b0; --errormsg-text: #b3261e; --successmsg-bg: #e8f5e9; --successmsg-border: #a8d8ab; --successmsg-text: #1e7e34; /* card-like surfaces (profile/auth cards) -- translucent only in space, opaque everywhere else */ --surface: #ffffff; --surface-border: #dde2ea; --card-blur: none; --shadow-card: 0 2px 10px rgba(0,0,0,0.1); --sidebar-bg: #eef1f6; --row-hover: #dde2ea; --text-primary: #1b2130; --text-muted: #6b7385; --label-color: #555555; --input-border: #d5d8dc; --input-focus: #70a1ff; --btn-primary-bg: #2f3542; --btn-primary-hover: #1e2530; --btn-primary-text: #ffffff; --btn-secondary-bg: #ffffff; --btn-secondary-border: #d5d8dc; --btn-secondary-hover-border: #70a1ff; --btn-secondary-text: #2f3542; --accent: #2f6fed; --accent-bg: #e9f0ff; --accent-contrast: #ffffff; --danger: #d1495b; --space-bg-image: none; } [data-theme="dark"], [data-theme="space"] { --bg: #10131a; --nav-bg: #1a1e27; --nav-text: #aab0bd; --nav-link: #e7eaf0; --nav-link-hover: #8fb4ff; --title-bg: #10131a; --title-text: #e7eaf0; --errormsg-bg: #3a2226; --errormsg-border: #6b3238; --errormsg-text: #f28b8b; --successmsg-bg: #1e3324; --successmsg-border: #2f5c3c; --successmsg-text: #7fd99a; --surface: #1c212c; --surface-border: #2a3040; --card-blur: none; --shadow-card: 0 2px 10px rgba(0,0,0,0.4); --sidebar-bg: #171b24; --row-hover: #262c3a; --text-primary: #e7eaf0; --text-muted: #8891a3; --label-color: #aab0bd; --input-border: #2a3040; --input-focus: #8fb4ff; --btn-primary-bg: #4a7dfd; --btn-primary-hover: #6d97ff; --btn-primary-text: #ffffff; --btn-secondary-bg: #1c212c; --btn-secondary-border: #2a3040; --btn-secondary-hover-border: #8fb4ff; --btn-secondary-text: #e7eaf0; --accent: #8fb4ff; --accent-bg: #232c42; --accent-contrast: #10131a; --danger: #e5677c; } /* space = dark, plus a full-page background image and translucent surfaces so it shows through. --space-bg-image is set inline, per page, in PHP (this week's rotating image). */ [data-theme="space"] { --surface: rgba(24,28,38,.58); --sidebar-bg: rgba(15,18,25,.42); --row-hover: rgba(255,255,255,.08); --card-blur: blur(14px) saturate(140%); } body[data-theme="space"] { background-image: var(--space-bg-image); background-size: cover; background-position: center 35%; background-attachment: fixed; } .space-credit { position: fixed; right: 14px; bottom: 10px; font-size: 10.5px; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.7); z-index: 1; } /* ----------------------------------------- */ body { background-color: var(--bg); transition: background-color 0.15s ease-in-out; } /* Navigation Bar (id=navbar) customization */ #navbar { background-color: var(--nav-bg); color: var(--nav-text); line-height: 20px; padding: 4px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } #navbar .container { display: flex; align-items: center; justify-content: space-between; } #navbar ul{ padding: 0px; list-style:none; } #navbar li{ display:inline; } #navbar a{ color: var(--nav-link); text-decoration: none; font-size: 18px; padding-right: 15px; transition: color 0.15s ease-in-out; } #navbar a:hover { color: var(--nav-link-hover); } /* ----------------------------------------- */ /* Title (class=title) customization */ .title { background-color: var(--title-bg); line-height: 20px; } .title h1{ color: var(--title-text); text-decoration: none; font-size: 25px; text-align: center; /* padding-right: 10px; */ } /* ----------------------------------------- */ /* Error Message (class=errormsg) customization -- applied either as a div wrapping a

(most pages) or directly on a

(signup.php), so the color/alignment lives on .errormsg itself (works either way) rather than relying on a nested "p" always being there */ .errormsg { max-width: 900px; margin: 12px auto; padding: 10px 16px; background-color: var(--errormsg-bg); border: 1px solid var(--errormsg-border); border-radius: 8px; color: var(--errormsg-text); font-size: 15px; text-align: center; box-sizing: border-box; } .errormsg p { margin: 0; color: inherit; text-decoration: none; } /* ----------------------------------------- */ /* Success Message (class=successmsg) */ .successmsg { display: block; max-width: 900px; margin: 12px auto; padding: 10px 16px; background-color: var(--successmsg-bg); border: 1px solid var(--successmsg-border); border-radius: 8px; color: var(--successmsg-text); font-size: 15px; text-align: center; box-sizing: border-box; } /* ----------------------------------------- */ /* Profile page (class=profile-page) and Auth pages (class=auth-page, login/logout/signup/forgot-password/reset-password) share the same card visual language, so their rules live together. */ .profile-page { display: flex; flex-wrap: wrap; gap: 24px; max-width: 900px; margin: 20px auto; padding: 0 5%; } .auth-page { max-width: 380px; margin: 40px auto; padding: 0 5%; } .profile-page .card, .auth-page .card { flex: 1 1 320px; background-color: var(--surface); border-radius: 10px; box-shadow: var(--shadow-card); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); padding: 24px 28px; box-sizing: border-box; } .profile-page .card h2 { margin: 0 0 20px 0; font-size: 20px; color: var(--text-primary); border-bottom: 2px solid var(--surface-border); padding-bottom: 10px; } .profile-page .card .hint { margin: -12px 0 16px; font-size: 12.5px; color: var(--text-muted); } .profile-page label, .auth-page label { display: block; font-size: 13px; font-weight: bold; color: var(--label-color); margin: 16px 0 6px 0; } .profile-page label:first-of-type, .auth-page label:first-of-type { margin-top: 0; } .profile-page input, .auth-page input { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 15px; background-color: var(--surface); color: var(--text-primary); transition: border-color 0.15s ease-in-out; } .profile-page input:focus, .auth-page input:focus { outline: none; border-color: var(--input-focus); } .profile-page button[type="submit"], .auth-page button[type="submit"] { margin-top: 22px; width: 100%; padding: 11px; background-color: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; border-radius: 6px; font-size: 15px; cursor: pointer; transition: background-color 0.15s ease-in-out; } .profile-page button[type="submit"]:hover, .auth-page button[type="submit"]:hover { background-color: var(--btn-primary-hover); } .auth-page p { margin: 16px 0 0; font-size: 13.5px; text-align: center; color: var(--text-muted); } .auth-page p a { color: var(--accent); text-decoration: none; } .auth-page p a:hover { text-decoration: underline; } /* the "Appearance" theme picker on profile.php */ .theme-options { display: flex; gap: 8px; } .theme-opt { position: relative; flex: 1; border: 1.5px solid var(--input-border); border-radius: 8px; padding: 10px 6px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); background: none; transition: all .15s ease-in-out; } .theme-opt input[type="radio"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .theme-opt .swatch-row { display: flex; gap: 3px; justify-content: center; margin-bottom: 8px; } .theme-opt .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(127,127,127,.3); } .theme-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } /* ----------------------------------------- */ /* the "resend verification" form sits above the auth card (attached to the error banner, not a login attempt itself), so it gets its own lighter, secondary button style */ .resend-form { max-width: 380px; margin: 0 auto 16px; padding: 0 5%; text-align: center; } .resend-form button { padding: 8px 16px; background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); border-radius: 6px; font-size: 13.5px; cursor: pointer; transition: border-color 0.15s ease-in-out; } .resend-form button:hover { border-color: var(--btn-secondary-hover-border); } /* ----------------------------------------- */ /* Hand page (class=hand-page) -- hole cards + board display for a dealt Texas Hold'em hand */ .hand-page { max-width: 700px; margin: 20px auto; padding: 0 5%; } .hand-page h2 { font-size: 16px; color: var(--text-primary); margin: 24px 0 10px; } .hole-cards { list-style: none; margin: 0; padding: 0; } .hole-cards li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--surface-border); } .player-label { min-width: 32px; font-weight: bold; color: var(--text-muted); } .board { display: flex; gap: 24px; flex-wrap: wrap; } .board-slot { display: flex; align-items: center; gap: 8px; } .board-label { font-size: 12.5px; font-weight: bold; color: var(--text-muted); min-width: 40px; } .board-empty { color: var(--text-muted); } .playing-card { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 46px; padding: 0 6px; background-color: var(--surface); border: 1px solid var(--surface-border); border-radius: 6px; font-size: 16px; font-weight: bold; box-shadow: var(--shadow-card); } .playing-card.card-red { color: var(--danger); } .playing-card.card-black { color: var(--text-primary); } .hand-action { margin-top: 24px; } .hand-action button { padding: 11px 24px; background-color: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; border-radius: 6px; font-size: 15px; cursor: pointer; transition: background-color 0.15s ease-in-out; } .hand-action button:hover { background-color: var(--btn-primary-hover); } /* ----------------------------------------- */