From 299f47b1b3518a759c0d06e3d527296ce9f80fc1 Mon Sep 17 00:00:00 2001 From: admin01 Date: Sat, 22 Aug 2026 19:00:17 +0000 Subject: [PATCH] Update chess/public/styles.css --- chess/public/styles.css | 1734 +++------------------------------------ 1 file changed, 111 insertions(+), 1623 deletions(-) diff --git a/chess/public/styles.css b/chess/public/styles.css index a852bb4..442c3b1 100644 --- a/chess/public/styles.css +++ b/chess/public/styles.css @@ -1,1625 +1,113 @@ -/* ========================================================= - ROOT -========================================================= */ - -:root { - --bg-body: #171411; - - --bg-panel: rgba(35, 31, 27, 0.72); - --bg-panel-strong: rgba(28, 25, 22, 0.88); - --bg-input: rgba(15, 13, 11, 0.72); - - --border-subtle: rgba(255, 255, 255, 0.12); - - --text-main: #f7f2e9; - --text-muted: #b9b0a4; - - --primary: #c8955a; - --primary-hover: #d5a66d; - - --secondary: rgba(255, 255, 255, 0.08); - --secondary-hover: rgba(255, 255, 255, 0.14); - - /* - * Шахматные клетки. - * - * Они теперь задаются напрямую - * классами .light и .dark. - */ - --board-light: #f0d9b5; - --board-dark: #b58863; - - --board-border: #211c17; - - --piece-white: #fffaf0; - --piece-black: #17130f; - - --radius-sm: 6px; - --radius-md: 10px; - --radius-lg: 14px; - - --glass-shadow: - 0 12px 40px rgba(0, 0, 0, 0.34), - inset 0 1px 1px rgba(255, 255, 255, 0.08); -} - - -/* ========================================================= - RESET -========================================================= */ - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - - -html { - min-height: 100%; -} - - -body { - min-height: 100vh; - - background-color: var(--bg-body); - - background-image: - linear-gradient( - rgba(20, 16, 12, 0.48), - rgba(20, 16, 12, 0.58) - ), - 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", - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - sans-serif; - - line-height: 1.5; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - padding: 20px; -} - - -button, -input, -select { - font: inherit; -} - - -button { - -webkit-tap-highlight-color: transparent; -} - - -.hidden { - display: none !important; -} - - -/* ========================================================= - PAGE -========================================================= */ - -.page-shell { - width: 100%; - max-width: 1280px; - margin: 0 auto; -} - - -.main-header { - margin-bottom: 24px; -} - - -.main-header h1 { - display: flex; - align-items: center; - gap: 12px; - - font-size: 28px; - font-weight: 800; - - color: #fff; - - text-shadow: - 0 2px 12px rgba(0, 0, 0, 0.55); -} - - -.chess-icon { - color: var(--primary); - font-size: 34px; - line-height: 1; -} - - -/* ========================================================= - LAYOUT -========================================================= */ - -.app-grid { - display: grid; - - grid-template-columns: - minmax(0, 1fr) - 360px; - - gap: 24px; - - align-items: start; -} - - -.sidebar { - display: flex; - flex-direction: column; - gap: 24px; -} - - -/* ========================================================= - PANELS -========================================================= */ - -.panel { - background: var(--bg-panel); - - backdrop-filter: blur(18px); - -webkit-backdrop-filter: blur(18px); - - border: 1px solid var(--border-subtle); - - border-radius: var(--radius-lg); - - padding: 24px; - - box-shadow: var(--glass-shadow); -} - - -.panel-head { - margin-bottom: 20px; -} - - -.label { - margin-bottom: 5px; - - font-size: 12px; - line-height: 1.2; - - text-transform: uppercase; - letter-spacing: 0.07em; - - font-weight: 700; - - color: var(--text-muted); -} - - -h2 { - font-size: 20px; - font-weight: 700; -} - - -h3 { - font-size: 18px; - font-weight: 700; - color: #fff; -} - - -/* ========================================================= - BUTTONS -========================================================= */ - -button { - cursor: pointer; - - border: 0; - - border-radius: var(--radius-sm); - - font-weight: 600; - font-size: 14px; - - display: inline-flex; - align-items: center; - justify-content: center; - - padding: 10px 16px; - - color: #fff; - - transition: - background-color 0.18s ease, - border-color 0.18s ease, - transform 0.18s ease, - box-shadow 0.18s ease, - color 0.18s ease; - - user-select: none; -} - - -button:active { - transform: translateY(1px); -} - - -button:focus-visible { - outline: 2px solid var(--primary); - outline-offset: 2px; -} - - -.primary-button { - width: 100%; - - padding: 12px; - - background: var(--primary); - color: #fff; - - box-shadow: - 0 5px 18px rgba(200, 149, 90, 0.25); -} - - -.primary-button:hover { - background: var(--primary-hover); - - box-shadow: - 0 7px 22px rgba(200, 149, 90, 0.32); -} - - -.secondary-button { - background: var(--secondary); - - border: 1px solid var(--border-subtle); - - color: #fff; -} - - -.secondary-button:hover { - background: var(--secondary-hover); -} - - -.ghost-button { - width: 100%; - - background: transparent; - - color: #ff8c82; - - border: 1px solid rgba(255, 120, 110, 0.45); -} - - -.ghost-button:hover { - background: rgba(255, 100, 90, 0.12); -} - - -.icon-button { - width: 42px; - height: 42px; - - padding: 0; - - background: var(--secondary); - - border: 1px solid var(--border-subtle); - - color: #fff; -} - - -.icon-button:hover { - background: var(--secondary-hover); -} - - -/* ========================================================= - MODE SWITCHER -========================================================= */ - -.mode-switcher { - display: flex; - - padding: 4px; - margin-bottom: 20px; - - background: rgba(0, 0, 0, 0.25); - - border: 1px solid var(--border-subtle); - - border-radius: var(--radius-sm); -} - - -.mode-button { - flex: 1; - - padding: 9px 8px; - - background: transparent; - - color: var(--text-muted); - - border: 0; -} - - -.mode-button:hover { - color: #fff; -} - - -.mode-button.active { - background: var(--secondary-hover); - - color: #fff; - - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.18); -} - - -/* ========================================================= - FORMS -========================================================= */ - -.control-stack { - display: flex; - flex-direction: column; -} - - -.field { - display: flex; - flex-direction: column; - - gap: 8px; - - margin-bottom: 18px; -} - - -.field > span { - font-size: 13px; - font-weight: 500; - - color: var(--text-muted); -} - - -.field-grid { - display: grid; - - grid-template-columns: - repeat(2, minmax(0, 1fr)); - - gap: 12px; -} - - -input[type="text"], -select { - width: 100%; - - min-width: 0; - - background: var(--bg-input); - - border: 1px solid var(--border-subtle); - - color: #fff; - - padding: 12px; - - border-radius: var(--radius-sm); - - outline: none; - - font-size: 14px; - - transition: - border-color 0.2s ease, - background-color 0.2s ease, - box-shadow 0.2s ease; -} - - -input[type="text"]:focus, -select:focus { - border-color: var(--primary); - - background: rgba(15, 13, 11, 0.88); - - box-shadow: - 0 0 0 3px rgba(200, 149, 90, 0.1); -} - - -input::placeholder { - color: rgba(255, 255, 255, 0.32); -} - - -select option { - background: #211c18; - color: #fff; -} - - -.join-row { - display: flex; - gap: 8px; -} - - -.join-row input { - flex: 1; -} - - -.muted-copy { - margin-top: 10px; - - text-align: center; - - font-size: 12px; - - color: var(--text-muted); -} - - -/* ========================================================= - BOARD HEADER -========================================================= */ - -.board-toolbar { - display: flex; - - justify-content: space-between; - align-items: center; - - gap: 16px; - - margin-bottom: 24px; - - padding-bottom: 16px; - - border-bottom: - 1px solid var(--border-subtle); -} - - -.toolbar-actions { - display: flex; - gap: 8px; - align-items: center; -} - - -/* ========================================================= - BOARD STAGE -========================================================= */ - -.board-stage { - width: 100%; - - max-width: 700px; - - margin: 0 auto; - - padding: 12px; - - background: - rgba(0, 0, 0, 0.32); - - border: - 1px solid rgba(255, 255, 255, 0.1); - - border-radius: var(--radius-md); - - box-shadow: - inset 0 2px 12px rgba(0, 0, 0, 0.55), - 0 10px 30px rgba(0, 0, 0, 0.22); -} - - -/* ========================================================= - CHESS BOARD -========================================================= */ - -.board { - width: 100%; - - aspect-ratio: 1 / 1; - - display: grid; - - grid-template-columns: - repeat(8, minmax(0, 1fr)); - - grid-template-rows: - repeat(8, minmax(0, 1fr)); - - overflow: hidden; - - border: - 5px solid var(--board-border); - - border-radius: 5px; - - box-shadow: - 0 0 0 1px rgba(255, 255, 255, 0.08), - 0 10px 30px rgba(0, 0, 0, 0.3); - - /* - * Убираем любые промежутки между клетками. - */ - gap: 0; - - isolation: isolate; -} - - -/* ========================================================= - BOARD SQUARES -========================================================= */ - -/* - * ЭТО ГЛАВНОЕ ИСПРАВЛЕНИЕ. - * - * JS создаёт: - * - *