food-market/src/food-market.pos/Styles/PosStyles.axaml
nns 6ae79e37fb feat(pos-ui): вёрстка кассы 1:1 по эталон-макету
Перенёс макет Mac-Claude (docs/pos-design/pos-mockup.html) в Avalonia по
размерам, а не на глаз:

- Оплата: модалка 880px поверх затемнённого экрана продажи (как в макете);
  сегменты Нал/Карта/Смешанная с векторными иконками (активный зелёный —
  иконка белая через стиль Button.seg.on Path); быстрые суммы 3×2
  (без сдачи/4000/5000/10000/20000/своя сумма); клавиатура 3×4 по 72px.
- Продажа: исправлена подсветка выбранной строки — локальные
  Background/IsVisible перекрывали сеттеры стиля :selected; теперь зелёный
  акцент слева + светло-зелёный фон работают. Бейдж «Отложенные · N».
  Чип связи «На связи · очередь пуста».
- Демо: --demo-pay открывает модалку оплаты для скриншота на Windows;
  PayScrim в скриншотере рендерит оплату поверх реальной оболочки продажи.
- Инструмент сверки: CompareRunner (--compare, SkiaSharp) складывает
  «макет | касса» рядом → docs/pos-design/compare-*.png.

Скорость не ухудшена (старт 74мс, скан 13.7мс). --uitest OK, 82 unit зелёные.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-10-08 14:35:18 +05:00

214 lines
11 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- ── Карточки ─────────────────────────────────────────────────── -->
<Style Selector="Border.card">
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="14"/>
<Setter Property="BoxShadow" Value="0 1 3 0 #14000000, 0 6 16 0 #0D000000"/>
</Style>
<!-- ── Чипы статуса (капсулы) ───────────────────────────────────── -->
<Style Selector="Border.chip">
<Setter Property="CornerRadius" Value="999"/>
<Setter Property="Padding" Value="12,6"/>
<Setter Property="Background" Value="{DynamicResource PosSubtle}"/>
</Style>
<Style Selector="Border.chip TextBlock">
<Setter Property="Foreground" Value="{DynamicResource PosTextMuted}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style Selector="Border.chip.ok">
<Setter Property="Background" Value="{DynamicResource PosBrandSoft}"/>
</Style>
<Style Selector="Border.chip.ok TextBlock"><Setter Property="Foreground" Value="{DynamicResource PosBrandDark}"/></Style>
<Style Selector="Border.chip.net"><Setter Property="Background" Value="{DynamicResource PosChipNet}"/></Style>
<Style Selector="Border.chip.warn">
<Setter Property="Background" Value="{DynamicResource PosWarnSoft}"/>
</Style>
<Style Selector="Border.chip.warn TextBlock"><Setter Property="Foreground" Value="{DynamicResource PosWarn}"/></Style>
<!-- ── Кнопки ───────────────────────────────────────────────────── -->
<Style Selector="Button.pos">
<Setter Property="Height" Value="50"/>
<Setter Property="MinHeight" Value="48"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Padding" Value="16,0"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
<Style Selector="Button.pos /template/ ContentPresenter">
<Setter Property="Transitions">
<Transitions><BrushTransition Property="Background" Duration="0:0:0.08"/></Transitions>
</Setter>
</Style>
<Style Selector="Button.pos TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
<!-- Главная зелёная -->
<Style Selector="Button.primary">
<Setter Property="Background" Value="{DynamicResource PosBrand}"/>
<Setter Property="Foreground" Value="{DynamicResource PosBrandText}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
<Style Selector="Button.primary:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource PosBrandHover}"/>
<Setter Property="TextElement.Foreground" Value="{DynamicResource PosBrandText}"/>
</Style>
<Style Selector="Button.primary:pressed /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource PosBrandPressed}"/>
</Style>
<!-- Вторичная (контур) -->
<Style Selector="Button.ghost">
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
</Style>
<Style Selector="Button.ghost:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource PosSubtle}"/>
<Setter Property="TextElement.Foreground" Value="{DynamicResource PosText}"/>
</Style>
<!-- Опасная (красный контур, без заливки) -->
<Style Selector="Button.danger">
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosDanger}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosDangerBorder}"/>
</Style>
<Style Selector="Button.danger TextBlock"><Setter Property="Foreground" Value="{DynamicResource PosDanger}"/></Style>
<Style Selector="Button.danger:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource PosDangerSoft}"/>
<Setter Property="TextElement.Foreground" Value="{DynamicResource PosDanger}"/>
</Style>
<!-- Клавиша клавиатуры/степпер -->
<Style Selector="Button.key">
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Button.key /template/ ContentPresenter">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Button.key:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource PosSubtle}"/>
</Style>
<!-- Сегмент переключателя (выбранный — зелёный) -->
<Style Selector="Button.seg">
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
<Setter Property="Height" Value="52"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Button.seg /template/ ContentPresenter">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Button.seg.on">
<Setter Property="Background" Value="{DynamicResource PosBrand}"/>
<Setter Property="Foreground" Value="{DynamicResource PosBrandText}"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
<Style Selector="Button.seg.on /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource PosBrand}"/>
</Style>
<Style Selector="Button.seg Path"><Setter Property="Stroke" Value="{DynamicResource PosTextMuted}"/></Style>
<Style Selector="Button.seg.on Path"><Setter Property="Stroke" Value="{DynamicResource PosBrandText}"/></Style>
<!-- ── Поля ввода ──────────────────────────────────────────────── -->
<Style Selector="TextBox.pos">
<Setter Property="FontSize" Value="17"/>
<Setter Property="Height" Value="52"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
</Style>
<Style Selector="TextBox.search">
<Setter Property="FontSize" Value="19"/>
<Setter Property="Height" Value="58"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="CornerRadius" Value="14"/>
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
</Style>
<!-- Капсулы горячих клавиш -->
<Style Selector="Border.hotkey">
<Setter Property="Background" Value="{DynamicResource PosSubtle}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="9,4"/>
</Style>
<!-- kbd-капсула (как <kbd> в макете) -->
<Style Selector="Border.kbd">
<Setter Property="MinWidth" Value="30"/>
<Setter Property="Height" Value="24"/>
<Setter Property="Padding" Value="7,0"/>
<Setter Property="CornerRadius" Value="6"/>
<Setter Property="Background" Value="{DynamicResource PosCard}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PosBorder}"/>
<Setter Property="BorderThickness" Value="1,1,1,2"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style Selector="Border.kbd > TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{DynamicResource PosTextMuted}"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style Selector="Border.kbd.onbrand"><Setter Property="Background" Value="#33FFFFFF"/><Setter Property="BorderThickness" Value="0"/></Style>
<Style Selector="Border.kbd.onbrand > TextBlock"><Setter Property="Foreground" Value="White"/></Style>
<!-- Грань степпера (− / +) — слитный блок -->
<Style Selector="Button.stepbtn">
<Setter Property="Background" Value="{DynamicResource PosStepBg}"/>
<Setter Property="Foreground" Value="{DynamicResource PosText}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="CornerRadius" Value="0"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Button.stepbtn /template/ ContentPresenter">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Button.stepbtn:pointerover /template/ ContentPresenter"><Setter Property="Background" Value="{DynamicResource PosSubtle}"/></Style>
</Styles>