Halit Aksoy
6279b5a820
Ceviz, Gece and Yeşim themes as CSS variables on <html>, Bricolage Grotesque, shared styles, and one header for every page with theme swatches, the account menu and the page's main action. The lobby, privacy page and status panels use the new look.
245 lines
7.3 KiB
CSS
245 lines
7.3 KiB
CSS
/* Themes, base styles and the building blocks shared by the pages. The theme class is set on <html>. */
|
|
|
|
.t-ceviz {
|
|
--bg: #1f1712; --surface: #2a2019; --surface2: #382a20; --line: rgba(246, 234, 216, .10);
|
|
--ink: #f6ead8; --muted: #c4ad93; --accent: #f2b84b; --onAccent: #2a1a0a;
|
|
--accentSoft: rgba(242, 184, 75, .45); --accentGlow: rgba(242, 184, 75, .35); --lastRing: rgba(246, 234, 216, .55);
|
|
--chip: #1a110b; --chipInk: #f6ead8; --rim: #8a5d3b; --pit: #2c1d13; --live: #ff8a73;
|
|
--miniBg: #5b3d28; --miniPit: #2c1d13;
|
|
--boardBg: repeating-linear-gradient(94deg, rgba(255, 255, 255, .025) 0 3px, rgba(0, 0, 0, .04) 3px 9px, rgba(255, 255, 255, .015) 9px 14px), linear-gradient(180deg, #6e4a30, #573822);
|
|
--boardShadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 26px 50px rgba(0, 0, 0, .45), 0 0 0 1px #3a2516;
|
|
--pitShadow: inset 0 8px 16px rgba(0, 0, 0, .6), inset 0 -2px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .08);
|
|
--stoneShadow: 0 3px 4px rgba(0, 0, 0, .45);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.t-gece {
|
|
--bg: #0c1220; --surface: #141c30; --surface2: #1d2744; --line: rgba(238, 241, 248, .09);
|
|
--ink: #eef1f8; --muted: #9aa6c2; --accent: #e2b36a; --onAccent: #241707;
|
|
--accentSoft: rgba(226, 179, 106, .45); --accentGlow: rgba(226, 179, 106, .35); --lastRing: rgba(238, 241, 248, .5);
|
|
--chip: #0a0f1c; --chipInk: #eef1f8; --rim: #b8925a; --pit: #0b1020; --live: #ff8a7a;
|
|
--miniBg: #1d2a4d; --miniPit: #0b1020;
|
|
--boardBg: linear-gradient(180deg, #1d2a4d, #141d38);
|
|
--boardShadow: inset 0 0 0 2px #b8925a, inset 0 0 0 7px #18223f, inset 0 0 0 8px rgba(184, 146, 90, .35), 0 26px 50px rgba(0, 0, 0, .5);
|
|
--pitShadow: inset 0 8px 18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(184, 146, 90, .28), 0 1px 0 rgba(255, 255, 255, .06);
|
|
--stoneShadow: 0 3px 5px rgba(0, 0, 0, .55);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.t-yesim {
|
|
--bg: #e9ebe3; --surface: #f7f8f3; --surface2: #dde0d3; --line: rgba(29, 39, 33, .12);
|
|
--ink: #1d2721; --muted: #4f5d55; --accent: #2a7650; --onAccent: #ffffff;
|
|
--accentSoft: rgba(42, 118, 80, .4); --accentGlow: rgba(42, 118, 80, .28); --lastRing: rgba(29, 39, 33, .5);
|
|
--chip: #1d2721; --chipInk: #ffffff; --rim: #e9ebe3; --pit: #c3c7b6; --live: #b43a26;
|
|
--miniBg: #d3d6c8; --miniPit: #bcc0ae;
|
|
--boardBg: linear-gradient(180deg, #dcdfd2, #cfd2c3);
|
|
--boardShadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(0, 0, 0, .08), 0 22px 44px rgba(40, 50, 40, .2), 0 0 0 1px #bcc0ae;
|
|
--pitShadow: inset 0 7px 14px rgba(40, 50, 40, .38), inset 0 -2px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(255, 255, 255, .75);
|
|
--stoneShadow: 0 3px 4px rgba(30, 40, 30, .35);
|
|
color-scheme: light;
|
|
}
|
|
|
|
html, body, #main { min-height: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
|
|
transition: background .3s, color .3s;
|
|
}
|
|
|
|
#main { display: flex; flex-direction: column; min-height: 100vh; }
|
|
|
|
a { color: inherit; }
|
|
|
|
/* Page */
|
|
|
|
.page { display: flex; flex-direction: column; flex: 1; min-width: 0; }
|
|
|
|
.wrap {
|
|
width: 100%;
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 28px 32px 56px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 26px;
|
|
}
|
|
|
|
/* Header */
|
|
|
|
.hdr {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 32px;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--line);
|
|
transition: background .3s;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-right: auto;
|
|
min-width: 0;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-weight: 800;
|
|
font-size: 24px;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.logo svg { flex: none; }
|
|
|
|
.logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.themes { display: flex; gap: 2px; padding: 3px; border-radius: 26px; background: var(--surface); }
|
|
|
|
.sw {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sw span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
|
|
|
|
.sw.on { background: var(--surface2); box-shadow: inset 0 0 0 2px var(--accent); }
|
|
|
|
/* Buttons */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 44px;
|
|
padding: 0 18px;
|
|
border-radius: 22px;
|
|
border: none;
|
|
font: inherit;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn.pri { background: var(--accent); color: var(--onAccent); }
|
|
|
|
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
|
|
|
|
.btn.icon { width: 44px; padding: 0; }
|
|
|
|
.btn:disabled { opacity: .4; cursor: default; }
|
|
|
|
.sw:focus-visible, .btn:focus-visible, .card:focus-visible, .logo:focus-visible {
|
|
outline: 3px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Pills, cards */
|
|
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border-radius: 13px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
background: var(--surface2);
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pill.live, .pill.lose { color: var(--live); }
|
|
|
|
.pill.live::before {
|
|
content: '';
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
animation: kpulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.pill.win { background: var(--accent); color: var(--onAccent); }
|
|
|
|
.panel { border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
|
|
|
|
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; animation: kpulse 1.6s ease-in-out infinite; }
|
|
|
|
@keyframes kpulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: .35; transform: scale(.7); }
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Account menu (@szhsin/react-menu) */
|
|
|
|
.szh-menu {
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
border-radius: 16px;
|
|
padding: 6px;
|
|
box-shadow: inset 0 0 0 1px var(--line), 0 16px 30px rgba(0, 0, 0, .25);
|
|
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
|
|
}
|
|
|
|
.szh-menu__header { color: var(--muted); font-weight: 700; text-transform: none; font-size: 13px; }
|
|
|
|
.szh-menu__item { border-radius: 10px; min-height: 40px; font-weight: 600; color: var(--ink); }
|
|
|
|
.szh-menu__item--hover { background: var(--surface2); }
|
|
|
|
/* Dialogs (sweetalert) */
|
|
|
|
.swal-modal { background: var(--surface); border-radius: 24px; font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
|
|
|
|
.swal-title, .swal-text { color: var(--ink); }
|
|
|
|
.swal-button { border-radius: 22px; font-family: inherit; }
|
|
|
|
@media (max-width: 640px) {
|
|
.hdr { padding: 10px 16px; gap: 8px; }
|
|
.logo { font-size: 20px; gap: 8px; }
|
|
.logo svg { width: 28px; height: 28px; }
|
|
.themes .sw { width: 40px; height: 40px; }
|
|
.hide-m { display: none !important; }
|
|
.ic-m { width: 44px; padding: 0; }
|
|
.wrap { padding: 16px 16px 32px; gap: 16px; }
|
|
}
|
|
|
|
/* The account button makes the header too wide for the name on phones. */
|
|
@media (max-width: 420px) {
|
|
.hdr.has-account .logo span { display: none; }
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.logo span { display: none; }
|
|
}
|