テンプレートのスタイル設定

スタイリングとCSS変数— CSSのカスタムプロパティを使って待合室のテーマを設定する方法。

関連項目： テンプレートのマークアップと構造|Vueの状態とメソッド

スタイリング

CSSのアーキテクチャ

スタイルは2つのレイヤーに分かれています：

  • テーマ (_ch-theme-auto.scss) — 色、フォント、影、エフェクト。6つの入力変数から、完全なカラーパレットを自動的に生成します。 これをカスタマイズします。
  • ベース (_ch-base.scss) — レイアウト、サイズ設定、配置、アニメーション。カスタマイズが必要になることはめったにない。

テーマの入力変数

メインバンドルの後に読み込まれるスタイルシートで、これらを上書きしてください。テーマでは、その他の色はすべて自動的に導出されます。

:root {
  --ch-brand-primary:    #424242;  /* Title, accent, stock pill */
  --ch-brand-secondary:  #4b4b4b;  /* Buttons, focus rings */
  --ch-bg:               #FFFFFF;  /* Page background */
  --ch-text:             #1C1917;  /* Main text colour */
  --ch-surface:          #F0F4F8;  /* Card / panel backgrounds */
  --ch-progress-color:   #004f84;  /* Progress bar base colour (optional) */
  --ch-border-radius:    12px;    /* Base radius — all radii scale from this */
}

スタイルシート内のメインのスタイルの後に、オーバーライドを追加してください：

<link rel="stylesheet" href="crowdhandler-styles.css">
<link rel="stylesheet" href="my-overrides.css">

プログレッシブ・エンハンスメント

このテーマでは、2段階のアプローチを採用しています：

  1. 静的フォールバック— すべてのブラウザで動作する、あらかじめ計算済みの16進数値。
  2. 動的導出 — 以下の機能をサポートしているブラウザでは oklch（出典：...） (Chrome 119 以降、Firefox 128 以降、Safari 16.4 以降)、すべての派生色は入力内容に基づいて自動的に計算されます。

派生変数であっても、個別に上書きすることは可能です。

派生変数のリファレンス

すべての派生変数は個別に上書きすることができます。以下の機能をサポートするブラウザでは oklch（出典：...） これらは上記の入力値から自動的に計算されます。そうでない場合は、静的な16進数の代替値が使用されます。

タイポグラフィ

変数 デフォルト 説明
--ch-font-primary Plus Jakarta Sans 本文と見出しのフォント
--ch-font-secondary JetBrains Mono 位置番号とカウントダウンの数字

テキスト

変数 出典： 説明
--ch-text-primary --ch-text 本文
--ch-text-secondary --ch-text 80% 補助テキスト
--ch-text-muted --ch-text 70% 非表示／ヘルパーテキスト
--ch-on-bg --ch-bg ページの背景色に応じてテキストの色を自動で明暗切り替え
--ch-on-bg-secondary --ch-on-bg 65% ページの背景に表示される補助テキスト
--ch-on-surface --ch-surface カードやパネル上のテキストの自動明暗切り替え
--表面上の二次 --ch-on-surface 65% カード／パネル上の補助テキスト
--ch-on-surface-muted --ch-on-surface 52% カード／パネル上の文字がくすんでいる

背景

変数 出典： 説明
--ch-bg-page --ch-bg ページの背景
--ch-bg-card --ch-surface カードの背景
--ch-bg-inset --ch-surface 暗くなった インセットパネルの背景
--ch-bg-input --ch-surface 入力フィールドの背景色
--ch-bg-surface --ch-surface + --ch-bg 50/50 中間面

国境

変数 出典： 説明
--ch-border --ch-on-bg 12% デフォルトの枠線色
--ch-border-focus --ch-brand-secondary フォーカスリングの色

アクセント

変数 出典： 説明
--ch-アクセント --ch-brand-primary アクセントカラー（見出し、ストックピル）
--ch-accent-hover --ch-アクセント 暗くなった アクセントのホバー状態
--ch-アクセント・グロー --ch-brand-primary 不透明度25% アクセントのグロー効果
--ch-on-accent --ch-アクセント アクセント文字のテキストを自動的に明暗切り替え

ステータスカラー

変数 出典： 説明
--ch-status-green 入力 グリーンのステータス入力（点灯）
--ch-status-amber 入力 アンバーステータスの入力（明るい）
--ch-status-red 入力 赤ステータス入力（点灯中）
--ch-success --ch-status-green 暗くなった AA-safeの緑色のテキスト
--ch-warning --ch-status-amber 暗くなった AA-safeのアンバー色のテキスト
--ch-danger --ch-status-red 暗くなった AA-safeの赤いテキスト
--ch-success-glow --ch-status-green 不透明度30％ 緑色の輝き
--ch-warning-glow --ch-status-amber 不透明度20% 琥珀色の輝き
--ch-danger-glow --ch-status-red 不透明度20% 赤い輝き

ボタン

変数 出典： 説明
--ch-btn-bg --ch-brand-secondary メインボタンの背景
--ch-btn-text --ch-btn-bg 「自動（明るい/暗い）」ボタンのテキスト
--ch-btn-hover --ch-btn-bg 暗くなった メインボタンのホバー時
--ch-btn-disabled-bg --ch-btn-bg 軽量化された 無効なボタンの背景色
--ch-btn-secondary-bg 透明な セカンダリボタンの背景
--ch-btn-secondary-text --ch-text-secondary セカンダリボタンのテキスト
--ch-btn-secondary-border --ch-border セカンダリボタンの枠線
--ch-btn-secondary-hover-bg --ch-on-bg 4% セカンダリボタンのホバー時

進行状況バー

変数 出典： 説明
--ch-progress-bg --ch-on-bg 8% トラックの背景
--ch-progress-dark --ch-progress-color 暗くなった グラデーション・ダーク・ストップ
--ch-progress-light --ch-progress-color 軽量化された グラデーション・ライトストップ
--ch-progress-gradient 暗部と明部の露出調整 アニメーション付きグラデーション塗りつぶし

位置の近接度

変数 出典： 説明
--ch-position-far --ch-text-primary ポジション番号の色（遠方）
--ch-position-mid --ch-text-secondary ポジション番号の色（中央）
--ch-position-near --ch-brand-primary ポジション番号の色（近く）
--ch-position-soon --ch-success ポジション番号の色（あと少し）

メッセージボックス

変数 出典： 説明
--ch-message-warning-bg --ch-warning 8% 警告メッセージの背景
--ch-message-warning-border --ch-warning 20% 警告メッセージの枠
--ch-message-danger-bg --ch-danger 8% 危険メッセージの背景
--ch-message-danger-border --ch-danger 20% 危険メッセージの枠

ヘッダーとフッター

変数 出典： 説明
--ch-header-bg --ch-bg ヘッダーの背景
--ch-on-header-bg --ch-header-bg ヘッダーテキストの自動明暗切り替え
--ch-on-header-bg-secondary --ch-on-header-bg 65% サブ見出しのテキスト
--ch-footer-bg --ch-bg フッターの背景
--ch-on-footer-bg --ch-footer-bg フッターテキストの自動明暗切り替え
--ch-on-footer-bg-secondary --ch-on-footer-bg 65% セカンダリフッターのテキスト

カード＆カウントダウン

変数 出典： 説明
--ch-card-radius --ch-border-radius * 2 カードの角の半径
--ch-card-shadow --ch-brand-primary 着色された カードボックスの影
--ch-countdown-shadow --ch-brand-primary 着色された カウントダウンユニットの影

フッターのユーティリティ

変数 出典： 説明
--ch-token-bg --ch-on-bg 4% トークンバッジの背景
--ch-token-hover-bg --ch-on-bg 8% トークンバッジのホバー効果
--ch-poll-bg --ch-on-bg 4% 投票タイマーの経過状況
--ch-poll-gradient プログレス・ダーク＋カラー 投票タイマーの塗りつぶしグラデーション

主要なCSSクラスのリファレンス

クラス 目的
ch-card メインカードケース
ch-queue-states カウントダウンおよびアクティブなキューのコンテンツ用ラッパー
ch-state-message ステータスメッセージコンテナ（ブロック中／ルーム満員）
ch-state-message.ch-state-danger ブロック状態（赤）
ch-state-message.ch-state-warning ルームフル状態（アンバー）
ch-メッセージボックス カード上部のメッセージパネル
ch-form-section 上部に境界線セパレータのあるフォーム領域
ch-優先セクション 優先順位コードフォーム（背景にインセット）
ch-email-section メールフォーム（カード外）
ch-メール送信 メール送信中のスピナーコンテナ
ch-入力グループ 入力欄とボタン用のフレックスレイアウト
ch-input テキスト／メール入力欄
ch-btn メインボタン
ch-btn-sm 小さなボタンのバリエーション
ch-btn-secondary セカンダリボタン（枠線付き）
ch-btn-change 「メール」ボタンの間隔を変更する
ch-form-feedback フィードバックメッセージの行
ch-form-feedback.ch-success 成功に関するフィードバック
ch-form-feedback.ch-error エラーのフィードバック
ch-stock-badge 株価指標
ch-在庫数 在庫番号ピル
ch-stock-badge.ch-stock-low 在庫不足の状態
ch-stock-badge.ch-stock-zero 完売状態
ch-progress-container プログレスバーのラッパー（最大幅制限付き）
ch-progress-bar トラック（背景のバー）
ch-progress-fill 塗りつぶしバー（アニメーション付きグラデーション）
ch-progress-bar.ch-progress-mid 進行状況の中盤での輝き
ch-progress-bar.ch-progress-high 進行度が高いほど、輝きが強くなる
ch-progress-bar.ch-progress-almost 完成間近の脈動する輝き
ch-進捗情報 バーの下に表示される見積もりと到着予定時刻のテキスト
ch-spinner 読み込み中のスピナー
ch-text-shimmer テキストのきらめきアニメーション
ch-session-info セッション情報のテキスト

必須のCSSクラス

テンプレートには、以下の構造クラスを含める必要があります：

/* Screen reader only */
.ch-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden until loaded */
#crowdhandler-template {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#crowdhandler-template.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  opacity: 1;
}

エントランスアニメーション

要素には、以下の方法を用いて、ずらして表示されるエントランスアニメーションが使用されています。 ch-enter そして ch-stagger-N クラス。各スタッガーレベルごとに0.1秒の遅延が加わります。

<div class="ch-logo ch-enter ch-stagger-1">...</div>
<div class="ch-header-row ch-enter ch-stagger-4">...</div>
<div class="ch-footer ch-enter ch-stagger-5">...</div>
<div class="ch-message-box ch-enter ch-stagger-6">...</div>