picola
ENJA
はじめる
ドキュメント

スタイリングとテーマ設定

.pcl ルート上の CSS カスタムプロパティですべてのコントロールを調整。!important は不要で、グローバルリセットにも強い設計です。

.pcl ルート上の CSS カスタムプロパティで外観を調整できます。

.pcl {
  --pcl-z: 2000;
  --pcl-backdrop: rgba(10, 10, 16, 0.55);
  --pcl-backdrop-filter: blur(16px);
  --pcl-caption-lines: 3;
}

--pcl-backdrop-filter は背景のぼかしを有効にします(GPU コストがかかるため、デフォルトは none です)。スタイルシートには .pcl にスコープされた詳細度ゼロのミニリセットが同梱されているため、アプリがグローバルな CSS リセットを使用しているかどうかにかかわらず、クロームは同一にレンダリングされます。トランジションは prefers-reduced-motion を尊重します。

!important は不要

すべてのデフォルトルールは、フラットな単一クラスのセレクタ(.pcl__button など)を使用しています。そのため、通常のカスケード順で、あるいはクラス1つ分の詳細度を追加するだけで、スタイルシートから上書きできます。カスタムプロパティのデフォルト値は詳細度ゼロ(:where(.pcl))で宣言されているため、アプリ内でシンプルに .pcl { --pcl-z: … } と書けば、スタイルシートの順序に関係なく常に優先されます。

スタイルは意図的に @layer を避けています。レイヤー化されたライブラリのスタイルは、多くのアプリに存在するレイヤー化されていないグローバルリセットに負けてしまうためです。

カスタムプロパティ

プロパティ デフォルト 説明
--pcl-z 1000 ルートの重なりコンテキスト(z-index)。
--pcl-backdrop #000 背景色。
--pcl-backdrop-filter none 背景フィルタ。例: blur(16px)(オプトイン。GPU コストがかかります)。
--pcl-chrome-color #fff ボタン、カウンター、矢印の前景色。
--pcl-chrome-bg rgba(0, 0, 0, 0.35) クロームコントロールのホバー時/アクティブ時の背景。
--pcl-button-bg rgba(0, 0, 0, 0.2) ツールバーボタンのアイドル時の背景。
--pcl-button-size 44px ツールバーボタンのヒット領域。
--pcl-arrow-size 48px 前/次の矢印のヒット領域。
--pcl-caption-bg rgba(0, 0, 0, 0.55) キャプションの背景。
--pcl-caption-color #fff キャプションのテキスト色。
--pcl-caption-lines 2 キャプションが省略される前に表示される行数。
--pcl-dismiss (runtime) ドラッグで閉じる進捗。0–1 の値で、コアによって書き込まれます。カスタムクロームをフェードさせるために読み取ります。

ドラッグで閉じる操作への反応

ユーザーがドラッグで閉じる操作を行っている間、コアはルートに --pcl-dismiss(0–1 の進捗値)を書き込み、data-pcl-dismissing 属性を設定します。自分のクロームからこのいずれかを読み取れば、ジェスチャーと連動してフェードさせられます。フレームごとの JavaScript は不要です。

.my-chrome {
  opacity: calc(1 - var(--pcl-dismiss, 0));
}