Update chess/public/styles.css
This commit is contained in:
+247
-110
@@ -1,113 +1,250 @@
|
||||
:root {
|
||||
--bg:#171512;
|
||||
--panel:#211e1a;
|
||||
--panel2:#28231e;
|
||||
--text:#f2eee7;
|
||||
--muted:#a9a197;
|
||||
--line:#3b342d;
|
||||
--accent:#c79a5b;
|
||||
--accent2:#e0bc84;
|
||||
--light:#e7d8c0;
|
||||
--dark:#8d6847;
|
||||
--danger:#b9685e;
|
||||
--shadow:0 18px 60px rgba(0,0,0,.28);
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
|
||||
button,input,select{font:inherit}
|
||||
button{cursor:pointer}
|
||||
body{padding:20px}
|
||||
.app{max-width:1180px;margin:auto}
|
||||
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
|
||||
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--accent2)}
|
||||
h1,h2,h3,p{margin:0}
|
||||
h1{font-size:25px;margin-top:4px}
|
||||
h2{font-size:clamp(36px,6vw,72px);line-height:.96;letter-spacing:-.045em;margin:20px 0}
|
||||
h3{font-size:20px}
|
||||
.top-actions,.controls,.form-row{display:flex;gap:10px;flex-wrap:wrap}
|
||||
.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:10px;min-height:42px}
|
||||
.btn:hover{border-color:#635548;background:var(--panel2)}
|
||||
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a1510}
|
||||
.btn.danger{background:transparent;border-color:#70423e;color:#e3aaa3}
|
||||
.panel,.hero{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:16px}
|
||||
.hero{padding:clamp(24px,5vw,54px);display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:end}
|
||||
.hero p{max-width:650px;color:var(--muted);font-size:16px;line-height:1.6}
|
||||
.pill{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--accent2);font-size:12px}
|
||||
.home-grid{display:grid;gap:10px}
|
||||
.mode-card{display:flex;flex-direction:column;text-align:left;gap:6px;padding:18px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px}
|
||||
.mode-card:hover{border-color:var(--accent)}
|
||||
.mode-card span{color:var(--muted);font-size:13px}
|
||||
.party-panel{margin-top:14px;padding:20px}
|
||||
.form-row{align-items:end;margin-top:14px}
|
||||
label{display:grid;gap:6px;color:var(--muted);font-size:12px;min-width:180px}
|
||||
input,select{height:42px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:#171512;color:var(--text);outline:none}
|
||||
input:focus,select:focus{border-color:var(--accent)}
|
||||
.error{color:#df9d95;margin-top:10px;min-height:18px}
|
||||
.game-layout{display:grid;grid-template-columns:minmax(0,760px) 330px;gap:18px;align-items:start}
|
||||
.left-panel{padding:14px}
|
||||
.right-column{display:grid;gap:12px}
|
||||
.player-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:7px 4px 12px}
|
||||
.player-row:last-child{padding:12px 4px 7px}
|
||||
.avatar{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;border-radius:9px;background:var(--panel2)}
|
||||
.player-row strong,.player-row span{display:block}
|
||||
.player-row span{font-size:12px;color:var(--muted);margin-top:2px}
|
||||
.clock{font-variant-numeric:tabular-nums;font-size:24px;font-weight:700}
|
||||
.board-wrap{width:100%;aspect-ratio:1;max-width:760px;margin:auto}
|
||||
.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;border-radius:8px;user-select:none;touch-action:manipulation}
|
||||
.square{position:relative;display:grid;place-items:center;font-size:clamp(27px,7vw,70px);line-height:1}
|
||||
.square.light{background:var(--light);color:#251e18}
|
||||
.square.dark{background:var(--dark);color:#17120f}
|
||||
.square.last-from::after,.square.last-to::after{content:"";position:absolute;inset:0;background:rgba(230,184,92,.26);pointer-events:none}
|
||||
.square.selected{box-shadow:inset 0 0 0 4px rgba(255,239,202,.75)}
|
||||
.square.legal::before{content:"";position:absolute;width:18%;height:18%;border-radius:50%;background:rgba(40,30,20,.35);z-index:1}
|
||||
.square.capture::before{content:"";position:absolute;inset:8%;border:5px solid rgba(70,40,20,.42);border-radius:50%;z-index:1}
|
||||
.square.trajectory{box-shadow:inset 0 0 0 3px rgba(255,245,210,.28)}
|
||||
.piece{position:relative;z-index:2;font-family:"DejaVu Sans","Segoe UI Symbol",serif;text-shadow:0 1px 0 rgba(0,0,0,.15)}
|
||||
.coord{position:absolute;font-size:9px;font-weight:700;opacity:.7;z-index:3;pointer-events:none}
|
||||
.coord.file{right:4px;bottom:2px}
|
||||
.coord.rank{left:4px;top:2px}
|
||||
.panel{padding:14px}
|
||||
.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
|
||||
.status{color:var(--muted);font-size:13px;line-height:1.5;margin-top:10px}
|
||||
.material{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:var(--muted);min-height:23px}
|
||||
.material span{letter-spacing:2px}
|
||||
.controls{display:grid;grid-template-columns:1fr 1fr}
|
||||
.controls .btn{width:100%}
|
||||
.moves-panel{min-height:180px}
|
||||
.moves-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:10px;max-height:260px;overflow:auto}
|
||||
.move{display:grid;grid-template-columns:32px 1fr 1fr;padding:6px 7px;border-radius:7px;color:var(--muted);font-size:13px}
|
||||
.move:nth-child(odd){background:#1a1714}
|
||||
.move-number{color:#70675e}
|
||||
.chat-messages{height:180px;overflow:auto;margin-top:10px;display:grid;align-content:start;gap:8px}
|
||||
.chat-message{font-size:13px}
|
||||
.chat-message b{color:var(--accent2)}
|
||||
.chat-message span{color:var(--muted)}
|
||||
.chat-form{display:flex;gap:7px;margin-top:10px}
|
||||
.chat-form input{min-width:0;flex:1}
|
||||
.hidden{display:none!important}
|
||||
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:20px;z-index:20}
|
||||
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(430px,100%)}
|
||||
.promotion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
|
||||
.promotion-grid button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:12px;font-size:34px}
|
||||
.promotion-grid span{display:block;font-size:11px;color:var(--muted)}
|
||||
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#2a251f;border:1px solid var(--line);padding:10px 14px;border-radius:9px;transition:.2s;z-index:30}
|
||||
.toast.show{opacity:1;transform:translate(-50%,0)}
|
||||
@media(max-width:920px){
|
||||
body{padding:10px}
|
||||
.hero{grid-template-columns:1fr}
|
||||
.game-layout{grid-template-columns:1fr}
|
||||
.right-column{grid-template-columns:1fr 1fr}
|
||||
.moves-panel,.chat-panel{grid-column:span 2}
|
||||
}
|
||||
@media(max-width:560px){
|
||||
.topbar{align-items:flex-start}
|
||||
.top-actions{justify-content:flex-end}
|
||||
.top-actions .btn{padding:8px 10px}
|
||||
.game-layout{gap:10px}
|
||||
.left-panel{padding:7px}
|
||||
.right-column{grid-template-columns:1fr}
|
||||
.moves-panel,.chat-panel{grid-column:auto}
|
||||
.controls{grid-template-columns:1fr 1fr}
|
||||
.square{font-size:clamp(24px,10vw,46px)}
|
||||
--bg-body: #0f172a;
|
||||
--bg-panel: rgba(30, 41, 59, 0.55);
|
||||
--bg-input: rgba(15, 23, 42, 0.6);
|
||||
--border-subtle: rgba(255, 255, 255, 0.12);
|
||||
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.08);
|
||||
|
||||
--border-focus: #10b981;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
--primary: #10b981;
|
||||
--primary-hover: #059669;
|
||||
|
||||
--secondary: rgba(255, 255, 255, 0.1);
|
||||
--secondary-hover: rgba(255, 255, 255, 0.2);
|
||||
|
||||
--board-light: #ebecd0;
|
||||
--board-dark: #739552;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-body);
|
||||
background-image: url('https://images.unsplash.com/photo-1529699211952-734e80c4d42b?q=80&w=2000&auto=format&fit=crop');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
color: var(--text-main);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
.page-shell { max-width: 1280px; margin: 0 auto; }
|
||||
|
||||
.main-header { margin-bottom: 24px; text-align: left; }
|
||||
.main-header h1 {
|
||||
font-size: 28px; font-weight: 800; color: #fff;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
.chess-icon { color: var(--primary); font-size: 32px; }
|
||||
|
||||
.app-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--glass-shadow);
|
||||
}
|
||||
.panel-head { margin-bottom: 20px; }
|
||||
|
||||
.label {
|
||||
font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
|
||||
font-weight: 700; color: var(--text-muted); margin-bottom: 4px;
|
||||
}
|
||||
h3 { font-size: 18px; font-weight: 600; color: #fff; }
|
||||
h2 { font-size: 20px; font-weight: 700; }
|
||||
|
||||
button {
|
||||
font-family: inherit; cursor: pointer; border: none; border-radius: var(--radius-sm);
|
||||
font-weight: 600; font-size: 14px; transition: all 0.2s ease;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
padding: 10px 16px; backdrop-filter: blur(4px);
|
||||
}
|
||||
.primary-button {
|
||||
background-color: var(--primary); color: #fff; width: 100%; padding: 12px;
|
||||
font-size: 15px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
.primary-button:hover {
|
||||
background-color: var(--primary-hover); transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
.secondary-button { background-color: var(--secondary); border: 1px solid var(--border-subtle); color: #fff; }
|
||||
.secondary-button:hover { background-color: var(--secondary-hover); }
|
||||
|
||||
.ghost-button { background: transparent; color: #ff5c5c; border: 1px solid rgba(255, 92, 92, 0.5); width: 100%; }
|
||||
.ghost-button:hover { background: rgba(255, 92, 92, 0.15); color: #ff7676; }
|
||||
|
||||
.icon-button { background-color: var(--secondary); border: 1px solid var(--border-subtle); color: #fff; padding: 10px; }
|
||||
.icon-button:hover { background-color: var(--secondary-hover); }
|
||||
|
||||
.mode-switcher {
|
||||
display: flex; background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm);
|
||||
padding: 4px; margin-bottom: 20px; border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.mode-button { flex: 1; background: transparent; color: var(--text-muted); padding: 8px; border: none; }
|
||||
.mode-button.active { background: var(--secondary-hover); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
|
||||
.field span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
|
||||
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
|
||||
input[type="text"], select {
|
||||
width: 100%; background: var(--bg-input); border: 1px solid var(--border-subtle);
|
||||
color: #fff; padding: 12px; border-radius: var(--radius-sm); font-family: inherit;
|
||||
font-size: 14px; outline: none; transition: all 0.2s;
|
||||
}
|
||||
input[type="text"]:focus, select:focus { border-color: var(--border-focus); background: rgba(15, 23, 42, 0.8); }
|
||||
input::placeholder { color: rgba(255,255,255,0.3); }
|
||||
|
||||
.join-row { display: flex; gap: 8px; }
|
||||
.join-row input { flex: 1; }
|
||||
.muted-copy { font-size: 12px; color: var(--text-muted); margin-top: 12px; text-align: center; }
|
||||
|
||||
.board-toolbar {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
.toolbar-actions { display: flex; gap: 8px; }
|
||||
|
||||
.board-stage {
|
||||
width: 100%; max-width: 640px; margin: 0 auto; background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(8px); padding: 12px; border-radius: var(--radius-md);
|
||||
box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.board {
|
||||
width: 100%; aspect-ratio: 1 / 1; display: grid;
|
||||
grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
|
||||
border: 4px solid rgba(15, 23, 42, 0.8); border-radius: var(--radius-sm); overflow: hidden;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
ИСПРАВЛЕННЫЕ СТИЛИ ДОСКИ И ФИГУР
|
||||
========================================= */
|
||||
.square {
|
||||
width: 100%; height: 100%; border: none; padding: 0; margin: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; position: relative;
|
||||
}
|
||||
|
||||
.square.light { background-color: var(--board-light); }
|
||||
.square.dark { background-color: var(--board-dark); }
|
||||
|
||||
.square.selected { background-color: rgba(234, 230, 93, 0.7); }
|
||||
.square.last-move { background-color: rgba(234, 230, 93, 0.4); }
|
||||
.square.check-square { background-color: rgba(239, 68, 68, 0.6); }
|
||||
|
||||
.square.legal-target::after {
|
||||
content: ''; width: 25%; height: 25%; border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.25); position: absolute;
|
||||
}
|
||||
.square.capture-target::after {
|
||||
content: ''; width: 80%; height: 80%; border-radius: 50%;
|
||||
border: 5px solid rgba(0, 0, 0, 0.25); position: absolute; background: transparent;
|
||||
}
|
||||
|
||||
.piece {
|
||||
font-size: clamp(28px, 6vw, 65px);
|
||||
user-select: none; z-index: 10;
|
||||
line-height: 1; pointer-events: none;
|
||||
}
|
||||
.piece.white { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
|
||||
.piece.black { color: #000; text-shadow: 0 2px 4px rgba(255,255,255,0.4); }
|
||||
|
||||
/* =========================================
|
||||
СТАТУС И ЧАСЫ
|
||||
========================================= */
|
||||
.status-strip {
|
||||
display: flex; justify-content: space-between; align-items: center; margin-top: 24px;
|
||||
padding: 16px; background: var(--bg-panel); border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.status-message { font-weight: 500; font-size: 15px; }
|
||||
.status-meta { display: flex; gap: 8px; }
|
||||
.status-chip {
|
||||
padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
|
||||
}
|
||||
.turn-white { background: rgba(255, 255, 255, 0.9); color: #000; }
|
||||
.turn-black { background: rgba(0, 0, 0, 0.8); color: #fff; border: 1px solid var(--border-subtle); }
|
||||
.connection-solo { background: var(--secondary); color: #fff; }
|
||||
.connection-party { background: var(--primary); color: #fff; }
|
||||
|
||||
.roster-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
|
||||
.roster-card {
|
||||
background: rgba(0, 0, 0, 0.2); padding: 12px 16px; border-radius: var(--radius-sm);
|
||||
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.roster-card.white-player { border-left: 4px solid rgba(255,255,255,0.8); }
|
||||
.roster-card.black-player { border-left: 4px solid rgba(0,0,0,0.8); }
|
||||
.roster-info { display: flex; flex-direction: column; gap: 2px; }
|
||||
.roster-role { font-size: 11px; text-transform: uppercase; color: var(--text-muted); }
|
||||
.roster-card strong { font-size: 14px; }
|
||||
|
||||
.player-clock {
|
||||
font-family: monospace, sans-serif; font-size: 20px; font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.4); color: var(--text-main); padding: 6px 12px;
|
||||
border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
|
||||
letter-spacing: 1px; transition: all 0.3s ease; min-width: 80px; text-align: center;
|
||||
}
|
||||
.player-clock.active {
|
||||
background: rgba(16, 185, 129, 0.2); border-color: var(--primary); color: var(--primary);
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
.player-clock.low { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.1); }
|
||||
|
||||
.spectator-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.badge { background: var(--bg-input); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
|
||||
.spectator-list { list-style: none; font-size: 13px; color: var(--text-muted); }
|
||||
.empty-state { font-style: italic; opacity: 0.7; }
|
||||
|
||||
.modal {
|
||||
position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px);
|
||||
display: flex; align-items: center; justify-content: center; z-index: 1000;
|
||||
}
|
||||
.modal-card {
|
||||
background: var(--bg-panel); backdrop-filter: blur(20px); padding: 32px;
|
||||
border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--glass-shadow); text-align: center; min-width: 300px;
|
||||
}
|
||||
.promotion-options { display: flex; gap: 16px; justify-content: center; margin-top: 24px; }
|
||||
.promotion-options button {
|
||||
font-size: 32px; padding: 16px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-subtle); color: #fff;
|
||||
}
|
||||
.promotion-options button:hover { background: var(--primary); border-color: var(--primary); }
|
||||
|
||||
.toast-host {
|
||||
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.toast {
|
||||
background: var(--bg-panel); backdrop-filter: blur(10px);
|
||||
padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
|
||||
color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
animation: slide-up 0.3s ease-out;
|
||||
}
|
||||
.toast.success { border-color: var(--primary); }
|
||||
.toast.error { border-color: #ef4444; }
|
||||
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.app-grid { grid-template-columns: 1fr; }
|
||||
.board-toolbar { flex-direction: column; gap: 16px; align-items: stretch; }
|
||||
.toolbar-actions { justify-content: stretch; }
|
||||
.toolbar-actions button { flex: 1; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user