Aqua.css

OSの設定

このウィンドウはOSの設定によって変わるウィンドウです

<div class="mac-window">
    <div class="mac-titlebar">
      <div class="mac-buttons">
        <span class="mac-btn close"></span>
        <span class="mac-btn minimize"></span>
        <span class="mac-btn maximize"></span>
      </div>
      <div class="mac-title">OSの設定</div>
    </div>
    <div class="mac-content">
      <p>このウィンドウはOSの設定によって変わるウィンドウです</p>
    </div>
</div>

ライトモード

このウィンドウはライトモードのウィンドウです

このような形で表示され、MacOSに似ています。

サンプルコードは次のとおりです

<div class="mac-window light">
    <div class="mac-titlebar">
      <div class="mac-buttons">
        <span class="mac-btn close"></span>
        <span class="mac-btn minimize"></span>
        <span class="mac-btn maximize"></span>
      </div>
      <div class="mac-title">ライトモード</div>
    </div>
    <div class="mac-content">
      <p>このウィンドウはライトモードのウィンドウです</p>
    </div>
</div>

ダークモード

このウィンドウはダークモードのウィンドウです

<div class="mac-window dark">
    <div class="mac-titlebar">
      <div class="mac-buttons">
        <span class="mac-btn close"></span>
        <span class="mac-btn minimize"></span>
        <span class="mac-btn maximize"></span>
      </div>
      <div class="mac-title">ダークモード</div>
    </div>
    <div class="mac-content">
      <p>このウィンドウはダークモードのウィンドウです</p>
    </div>
</div>

使用するにはをしたを使います

<link rel="stylesheet" href="https://sakuzyokun.github.io/Aqua.css/Aqua.css">