From b774f92d404ab33fd46715c82f3330f6e457ec0d Mon Sep 17 00:00:00 2001 From: min Date: Fri, 5 Jun 2026 01:38:34 +0300 Subject: [PATCH] =?UTF-8?q?fix(studio):=20Toolbox=20UI=20=E2=80=94=20?= =?UTF-8?q?=D1=87=D0=B8=D1=82=D0=B0=D0=B5=D0=BC=D1=8B=D0=B9=20=D1=82=D0=B5?= =?UTF-8?q?=D0=BA=D1=81=D1=82,=20=D0=BA=D1=80=D1=83=D0=BF=D0=BD=D0=B5?= =?UTF-8?q?=D0=B5=20=D1=88=D1=80=D0=B8=D1=84=D1=82=D1=8B,=20=D0=B8=D0=BA?= =?UTF-8?q?=D0=BE=D0=BD=D0=BA=D0=B0+=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=B2=20=D1=81=D1=82=D1=80=D0=BE=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Плитки категорий: убрал зависимость от CSS-переменных --text/--text-dim (не заданы в модалке → текст был тёмный на тёмном). Явные светлые цвета. Иконка теперь слева в одну линию с названием (grid 2 колонки), название 18px, описание 13px. Верхние вкладки 15px. Советы/«скоро» крупнее. Trending-карточки читаемее. --- src/editor/ToolboxModal.module.css | 152 +++++++++++++++++------------ 1 file changed, 87 insertions(+), 65 deletions(-) diff --git a/src/editor/ToolboxModal.module.css b/src/editor/ToolboxModal.module.css index 40b2c5f..3a70b63 100644 --- a/src/editor/ToolboxModal.module.css +++ b/src/editor/ToolboxModal.module.css @@ -448,133 +448,155 @@ color: var(--text-dim); } -/* ====================== Roblox-style Toolbox (задача 17) ====================== */ +/* ====================== Roblox-style Toolbox (задача 17) ====================== + Явные светлые цвета (не --text-переменные — они в этой модалке не заданы и + давали тёмный текст на тёмном фоне). Крупнее шрифты. */ .topTabs { display: flex; - gap: 2px; - padding: 0 14px; - border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); + gap: 4px; + padding: 0 16px; + border-bottom: 1px solid rgba(255,255,255,0.10); flex: 0 0 auto; } .topTab { flex: 1; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - gap: 3px; - padding: 10px 4px 8px; + justify-content: center; + gap: 8px; + padding: 14px 4px 12px; background: none; border: none; border-bottom: 2px solid transparent; - color: var(--text-dim, #9aa3b2); - font-size: 12px; + color: #aab2c0; + font-size: 15px; + font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; } -.topTab:hover { color: var(--text, #e8ecf2); } +.topTab:hover { color: #ffffff; } .topTabActive { - color: var(--accent, #4d6bff); - border-bottom-color: var(--accent, #4d6bff); + color: #6f8bff; + border-bottom-color: #6f8bff; } .breadcrumb { display: flex; align-items: center; - gap: 10px; - padding: 8px 16px 4px; + gap: 12px; + padding: 12px 18px 6px; flex: 0 0 auto; } .backBtn { display: inline-flex; align-items: center; - gap: 4px; - background: rgba(255,255,255,0.06); - border: 1px solid rgba(255,255,255,0.1); - color: var(--text, #e8ecf2); - padding: 5px 10px; - border-radius: 8px; - font-size: 13px; + gap: 6px; + background: rgba(255,255,255,0.08); + border: 1px solid rgba(255,255,255,0.14); + color: #e8ecf2; + padding: 7px 14px; + border-radius: 9px; + font-size: 14px; + font-weight: 600; cursor: pointer; } -.backBtn:hover { background: rgba(255,255,255,0.12); } -.crumbCurrent { font-weight: 700; color: var(--text, #e8ecf2); } +.backBtn:hover { background: rgba(255,255,255,0.15); } +.crumbCurrent { font-weight: 700; font-size: 15px; color: #ffffff; } -.storeHome { overflow-y: auto; padding: 12px 16px 18px; flex: 1; } +.storeHome { overflow-y: auto; padding: 16px 20px 22px; flex: 1; } .sectionLabel { - display: flex; align-items: center; gap: 6px; - font-weight: 700; font-size: 14px; color: var(--text, #e8ecf2); - margin-bottom: 10px; + display: flex; align-items: center; gap: 8px; + font-weight: 700; font-size: 17px; color: #ffffff; + margin-bottom: 14px; } +.sectionLabel svg { color: #6f8bff; } + .catGrid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 12px; + gap: 14px; } .catTile { - display: flex; flex-direction: column; align-items: flex-start; gap: 4px; - padding: 16px; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.09); - border-radius: 12px; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + column-gap: 14px; + row-gap: 4px; + align-items: center; + padding: 18px 20px; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.10); + border-radius: 14px; cursor: pointer; text-align: left; transition: transform .1s, background .12s, border-color .12s; } .catTile:hover { - background: rgba(77,107,255,0.12); - border-color: var(--accent, #4d6bff); + background: rgba(111,139,255,0.16); + border-color: #6f8bff; transform: translateY(-2px); } -.catTileIcon { color: var(--accent, #4d6bff); margin-bottom: 4px; } -.catTileLabel { font-weight: 700; font-size: 15px; color: var(--text, #e8ecf2); } -.catTileDesc { font-size: 11px; opacity: 0.7; line-height: 1.3; } +/* Иконка — слева, занимает обе строки (в одну линию с названием). */ +.catTileIcon { + grid-row: 1 / 3; + display: flex; align-items: center; justify-content: center; + width: 52px; height: 52px; + background: rgba(111,139,255,0.16); + border-radius: 12px; + color: #8aa0ff; +} +.catTileLabel { font-weight: 800; font-size: 18px; color: #ffffff; align-self: end; } +.catTileDesc { font-size: 13px; color: #aab2c0; line-height: 1.35; align-self: start; } .trendRow { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 12px; + gap: 14px; } .trendCard { position: relative; - display: flex; flex-direction: column; align-items: center; gap: 8px; - padding: 14px 8px; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.09); - border-radius: 12px; + display: flex; flex-direction: column; align-items: center; gap: 10px; + padding: 14px 10px 16px; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.10); + border-radius: 14px; cursor: pointer; transition: transform .1s, border-color .12s; } -.trendCard:hover { transform: translateY(-2px); border-color: var(--accent, #4d6bff); } +.trendCard:hover { transform: translateY(-2px); border-color: #6f8bff; } .trendIcon { - width: 100%; height: 70px; + width: 100%; height: 78px; display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, rgba(77,107,255,0.22), rgba(54,213,122,0.16)); - border-radius: 8px; - color: var(--text, #e8ecf2); + background: linear-gradient(135deg, rgba(111,139,255,0.28), rgba(54,213,122,0.18)); + border-radius: 10px; + color: #ffffff; } -.trendName { font-size: 12px; font-weight: 600; text-align: center; color: var(--text, #e8ecf2); } +.trendName { font-size: 14px; font-weight: 700; text-align: center; color: #ffffff; } .freeBadge { - position: absolute; top: 8px; right: 8px; - font-size: 9px; font-weight: 800; letter-spacing: 0.5px; - color: #36d57a; - background: rgba(54,213,122,0.14); - padding: 2px 6px; border-radius: 6px; + position: absolute; top: 10px; right: 10px; + font-size: 10px; font-weight: 800; letter-spacing: 0.5px; + color: #3ce087; + background: rgba(54,213,122,0.18); + padding: 3px 7px; border-radius: 6px; } .soon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 10px; padding: 40px; - color: var(--text-dim, #9aa3b2); text-align: center; + gap: 12px; padding: 50px; + color: #aab2c0; text-align: center; } -.soonTitle { font-size: 18px; font-weight: 700; color: var(--text, #e8ecf2); } -.soonText { font-size: 13px; max-width: 360px; opacity: 0.75; } +.soon svg { color: #6f8bff; } +.soonTitle { font-size: 22px; font-weight: 800; color: #ffffff; } +.soonText { font-size: 15px; max-width: 400px; color: #aab2c0; line-height: 1.5; } .tips { - overflow-y: auto; padding: 16px 22px; flex: 1; - color: var(--text, #e8ecf2); line-height: 1.55; + overflow-y: auto; padding: 22px 28px; flex: 1; + color: #e8ecf2; line-height: 1.6; } -.tips h3 { margin: 4px 0 12px; font-size: 17px; } -.tips ul { margin: 0 0 14px; padding-left: 18px; } -.tips li { margin-bottom: 9px; font-size: 13px; } -.tips b { color: var(--accent, #6f8bff); } +.tips h3 { margin: 4px 0 16px; font-size: 21px; color: #ffffff; } +.tips ul { margin: 0 0 18px; padding-left: 22px; } +.tips li { margin-bottom: 12px; font-size: 15px; color: #d4dae4; } +.tips b { color: #8aa0ff; } +.tips p { font-size: 14px; }