KDE Plasma CSS Reference

このドキュメントは、KDE PlasmaのBreezeテーマを模倣したCSSライブラリ kde-plasma.css のリファレンスです。各UIコンポーネントの基本的な思想、デザインガイドライン、HTML構造例、および適用されるCSSスニペットを提供します。

1. UI哲学（Plasma Breezeテーマの本質）

KDE Plasma の Breeze UI は以下の思想で構成される：

透明感（半透明＋ぼかし）
柔らかい影（ふわっと広がる）
控えめな角丸（4〜6px）
青系アクセント（#3daee9）
薄い境界線（1px、明度差の小さいグレー）
フラットだけど立体感のあるボタン

CSSでは「透明・影・境界線の階層」を正確に再現することが重要です。

2. CSS変数（デザイン・トークン）

主要な色、角丸、影の値はCSS変数として定義されており、テーマの一貫性を保ち、変更を容易にしています。

:root {
    /* Colors */
    --plasma-blue: #3daee9;
    --plasma-bg-window: rgba(255, 255, 255, 0.85);
    --plasma-bg-titlebar: rgba(255, 255, 255, 0.6);
    --plasma-bg-button: #eff0f1;
    --plasma-bg-panel: rgba(255, 255, 255, 0.5);
    --plasma-border-light: #cfd3d6;
    --plasma-border-titlebar: #d7dbde;
    --plasma-border-button: #bfc4c6;
    --plasma-border-btn-control: rgba(0, 0, 0, 0.2);
    --plasma-text-dark: #232629;
    --plasma-shadow-color: rgba(0, 0, 0, 0.25);

    /* Radii */
    --plasma-radius-window: 6px;
    --plasma-radius-button: 4px;
    --plasma-radius-input: 4px;
    --plasma-radius-checkbox: 3px;

    /* Shadows */
    --plasma-box-shadow: 0 8px 24px var(--plasma-shadow-color);
}

3. ウィンドウ本体 (`.window`)

KDE Plasmaのウィンドウは、透明感、柔らかい影、控えめな角丸が特徴です。

Reference Window

ウィンドウコンテンツの例。

HTML Structure

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">Window Title</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <!-- UI content -->
  </div>
</div>

CSS Snippet

.window {
    background: var(--plasma-bg-window);
    border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window);
    box-shadow: var(--plasma-box-shadow);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

4. パネル (`.panel`)

画面下部に固定されるタスクバーを模倣したパネルです。半透明とぼかしが特徴です。

Active App

Another App

12:34 PM

HTML Structure (Simplified)

<div class="panel bottom">
  <div class="start-menu-button">...</div>
  <div class="task-manager">...</div>
  <div class="system-tray">...</div>
</div>

CSS Snippet

.panel {
    background: var(--plasma-bg-panel);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--plasma-border-titlebar);
    padding: 6px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
}

5. ボタン (`.button`)

フラットながらも薄い影と淡い境界線を持つBreezeテーマのボタンです。

HTML Structure

<button>Default Button</button>
<button class="default">Primary Button</button>
<button disabled>Disabled Button</button>

CSS Snippet

.button {
    background: var(--plasma-bg-button);
    border: 1px solid var(--plasma-border-button);
    border-radius: var(--plasma-radius-button);
    padding: 6px 12px;
    color: var(--plasma-text-dark);
}
.button:hover { background: #f7f8f9; }
.button:active { background: #e5e6e7; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }
.button.primary {
    background: var(--plasma-blue);
    color: white;
    border-color: var(--plasma-blue);
}

6. 入力欄 (`.input`)

Breezeテーマに合わせた清潔感のある入力欄です。フォーカス時に青いシャドウが表示されます。

HTML Structure

<input type="text" class="input" placeholder="Type something...">

CSS Snippet

.input {
  background: #ffffff;
  border: 1px solid var(--plasma-border-button);
  border-radius: var(--plasma-radius-input);
  padding: 6px;
  color: var(--plasma-text-dark);
}
.input:focus {
  border-color: var(--plasma-blue);
  box-shadow: 0 0 0 2px rgba(61,174,233,0.3);
}

7. チェックボックス (`.checkbox-container`)

カスタムスタイリングされたチェックボックスです。Breezeテーマの色と角丸を反映しています。

Checked Unchecked

HTML Structure

<label class="checkbox-container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span> Checked
</label>

CSS Snippet

.checkbox-container { display: block; position: relative; padding-left: 25px; cursor: pointer; }
.checkbox-container input { opacity: 0; position: absolute; }
.checkmark {
    position: absolute; top: 0; left: 0; height: 16px; width: 16px;
    background: #fff; border: 1px solid var(--plasma-border-button);
    border-radius: var(--plasma-radius-checkbox);
}
.checkbox-container input:checked ~ .checkmark { background: var(--plasma-blue); border-color: var(--plasma-blue); }
.checkmark:after { /* Checkmark icon */ }
.checkbox-container input:checked ~ .checkmark:after { display: block; }

8. ラジオボタン (`.radio-container`)

カスタムスタイリングされたラジオボタンです。チェックボックスと同様の美学に従います。

Selected Not Selected

HTML Structure

<label class="radio-container">
  <input type="radio" checked="checked" name="my-radio-group">
  <span class="radiomark"></span> Option
</label>

CSS Snippet

.radio-container { display: block; position: relative; padding-left: 25px; cursor: pointer; }
.radio-container input { opacity: 0; position: absolute; }
.radiomark {
    position: absolute; top: 0; left: 0; height: 16px; width: 16px;
    background: #fff; border: 1px solid var(--plasma-border-button);
    border-radius: 50%;
}
.radio-container input:checked ~ .radiomark { background: var(--plasma-blue); border-color: var(--plasma-blue); }
.radiomark:after { /* Inner circle */ }
.radio-container input:checked ~ .radiomark:after { display: block; }

9. スライダー (`.slider`)

Breezeテーマのシンプルな横型スライダーです。

HTML Structure

<input type="range" min="0" max="100" value="50" class="slider">

CSS Snippet

.slider { -webkit-appearance: none; width: 100%; height: 8px; background: #d3d3d3; }
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: var(--plasma-blue); cursor: pointer;
}

10. メニュー (`.menu-container`)

透明感と影を持つドロップダウンメニューです。通常はホバーで表示されますが、リファレンスでは常時表示しています。

HTML Structure

<div class="menu-container">
  <button class="button primary">Menu</button>
  <div class="menu">
    <a href="#" class="menu-item">Item 1</a>
    <a href="#" class="menu-item">Item 2</a>
    <div class="menu-separator"></div>
    <a href="#" class="menu-item">Item 3</a>
  </div>
</div>

CSS Snippet

.menu-container { position: relative; display: inline-block; }
.menu {
    display: none; position: absolute; background: var(--plasma-bg-window);
    box-shadow: var(--plasma-box-shadow); border-radius: var(--plasma-radius-button);
    border: 1px solid var(--plasma-border-light); backdrop-filter: blur(8px);
}
.menu-container:hover .menu { display: block; }
.menu-item { color: var(--plasma-text-dark); padding: 8px 12px; }
.menu-item:hover { background-color: var(--plasma-blue); color: white; }
.menu-separator { background-color: var(--plasma-border-light); }

11. ツールチップ (`.tooltip-container`)

ホバー時に表示されるシンプルなツールチップです。

HTML Structure

<span class="tooltip-container">Hover over me
  <span class="tooltip-text">This is a tooltip!</span>
</span>

CSS Snippet

.tooltip-container { position: relative; display: inline-block; cursor: help; }
.tooltip-text {
    visibility: hidden; width: 160px; background-color: rgba(50, 50, 50, 0.9);
    color: #fff; text-align: center; border-radius: var(--plasma-radius-button);
    padding: 5px 0; position: absolute; opacity: 0;
}
.tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; }

12. タブ (`.tab-container`)

シンプルなタブインターフェースです。アクティブなタブが強調表示されます。

Content for Tab 1

HTML Structure

<div class="tab-container">
  <div class="tab-bar">
    <button class="tab-item active">Tab 1</button>
    <button class="tab-item">Tab 2</button>
  </div>
  <div class="tab-content">
    <p>Content for Tab 1</p>
  </div>
</div>

CSS Snippet

.tab-container { border: 1px solid var(--plasma-border-light); border-radius: var(--plasma-radius-window); }
.tab-bar { display: flex; border-bottom: 1px solid var(--plasma-border-light); }
.tab-item { padding: 8px 15px; cursor: pointer; background: transparent; border: none; }
.tab-item.active { background: var(--plasma-blue); color: white; border-bottom: 2px solid var(--plasma-blue); }

13. リストビュー (`.list-view`)

シンプルなリスト表示コンポーネントです。アクティブなアイテムが青色で強調表示されます。

List Item 1

List Item 2

List Item 3

HTML Structure

<div class="list-view">
  <div class="list-item active">List Item 1</div>
  <div class="list-item">List Item 2</div>
</div>

CSS Snippet

.list-view { border: 1px solid var(--plasma-border-light); border-radius: var(--plasma-radius-window); }
.list-item { padding: 8px 12px; color: var(--plasma-text-dark); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.list-item:hover { background-color: rgba(0, 0, 0, 0.05); }
.list-item.active { background: var(--plasma-blue); color: white; }

14. スクロールバー

WebKitブラウザ向けのカスタムスクロールバーです。

Scrollable content example...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML Structure (for scrollable content)

<div style="height: 100px; overflow-y: scroll;">
  <p>Scrollable content...</p>
</div>

CSS Snippet

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 5px; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3); border-radius: 5px;
    border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.5); }

15. ダイアログボックス (`.dialog-overlay`)

KDE Plasma風のモーダルダイアログボックスです。半透明のオーバーレイとぼかしが特徴です。

これはKDE Plasma風のダイアログボックスです。

ここに重要なメッセージや設定内容が表示されます。

HTML Structure

<div class="dialog-overlay">
  <div class="dialog-box">
    <div class="dialog-header">
      <span class="dialog-title">System Message</span>
      <span class="btn close dialog-close"></span>
    </div>
    <div class="dialog-content">
      <p>これはKDE Plasma風のダイアログボックスです。</p>
    </div>
    <div class="dialog-footer buttons">
      <button class="button">Cancel</button>
      <button class="button primary">OK</button>
    </div>
  </div>
</div>

CSS Snippet

.dialog-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); display: flex;
    justify-content: center; align-items: center; z-index: 2000;
}
.dialog-box {
    background: var(--plasma-bg-window); border: 1px solid var(--plasma-border-light);
    border-radius: var(--plasma-radius-window); box-shadow: var(--plasma-box-shadow);
    backdrop-filter: blur(12px); width: 400px; overflow: hidden;
}
.dialog-header {
    background: var(--plasma-bg-titlebar); border-bottom: 1px solid var(--plasma-border-titlebar);
    padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;
}
.dialog-footer {
    border-top: 1px solid var(--plasma-border-light); padding: 10px 15px;
    display: flex; justify-content: flex-end; gap: 10px;
}

16. 通知トースト (`.toast-container`)

システム通知などに使用される、画面端に表示される一時的なメッセージです。

これはKDE Plasma風の通知です！

HTML Structure

<div class="toast-container top-right">
  <div class="toast-message">
    <p>これはKDE Plasma風の通知です！</p>
    <span class="btn close toast-close"></span>
  </div>
</div>

CSS Snippet

.toast-container { position: fixed; z-index: 3000; padding: 15px; display: flex; }
.toast-container.top-right { top: 0; right: 0; align-items: flex-end; }
.toast-message {
    background: rgba(50, 50, 50, 0.9); color: white; border-radius: var(--plasma-radius-button);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 10px 15px; display: flex;
}
.toast-message .btn.close {
    background: transparent; border: none; color: white; width: 20px; height: 20px;
}

17. スピナー (`.spinner`)

処理中であることを示すローディングインジケーターです。

HTML Structure

<div class="spinner"></div>

CSS Snippet

.spinner {
    display: inline-block; width: 30px; height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.3); border-radius: 50%;
    border-top-color: var(--plasma-blue);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

KDE Plasma CSS Reference

1. UI哲学（Plasma Breezeテーマの本質）

2. CSS変数（デザイン・トークン）

3. ウィンドウ本体 (.window)

HTML Structure

CSS Snippet

4. パネル (.panel)

HTML Structure (Simplified)

CSS Snippet

5. ボタン (.button)

HTML Structure

CSS Snippet

6. 入力欄 (.input)

HTML Structure

CSS Snippet

7. チェックボックス (.checkbox-container)

HTML Structure

CSS Snippet

8. ラジオボタン (.radio-container)

HTML Structure

CSS Snippet

9. スライダー (.slider)

HTML Structure

CSS Snippet

10. メニュー (.menu-container)

HTML Structure

CSS Snippet

11. ツールチップ (.tooltip-container)

HTML Structure

CSS Snippet

12. タブ (.tab-container)

HTML Structure

CSS Snippet

13. リストビュー (.list-view)

HTML Structure

CSS Snippet

14. スクロールバー

HTML Structure (for scrollable content)

CSS Snippet

15. ダイアログボックス (.dialog-overlay)

HTML Structure

CSS Snippet

16. 通知トースト (.toast-container)

HTML Structure

CSS Snippet

17. スピナー (.spinner)

HTML Structure

CSS Snippet

3. ウィンドウ本体 (`.window`)

4. パネル (`.panel`)

5. ボタン (`.button`)

6. 入力欄 (`.input`)

7. チェックボックス (`.checkbox-container`)

8. ラジオボタン (`.radio-container`)

9. スライダー (`.slider`)

10. メニュー (`.menu-container`)

11. ツールチップ (`.tooltip-container`)

12. タブ (`.tab-container`)

13. リストビュー (`.list-view`)

15. ダイアログボックス (`.dialog-overlay`)

16. 通知トースト (`.toast-container`)

17. スピナー (`.spinner`)