/* ========================================================= xp.css — 共通シェル / shared XP (Luna) shell index.html と contact.html の両方が読み込みます。 ここを直すと全ページに効きます。ページ固有のデザインは index.css / contact.css に置いてください。 読み込み順: xp.css → ページ固有CSS（後勝ち） 目次: 1. 変数 2. ベース（Bliss風壁紙・リンク・フォーカス） 3. ウィンドウ枠（Luna） 4. キャプションボタン（最小化・最大化・閉じる） 5. ボタン（.btn） 6. 左の青いペイン（.tasks = index / .folders = contact） 7. タスクバー（Start・タスク・通知領域・時計・言語） 8. レスポンシブ（共通分） ========================================================= */ /* ---- 1. 変数 ---- */ :root{ --face:#ece9d8; --text:#000; --link:#0033cc; /* Luna Blue：タイトルバー（上→下）。中央の明るさは .bar::before で重ねる */ --ttl-a:#0a5fd8; --ttl-b:#3a8ef5; --ttl-c:#2574ea; --ttl-d:#0f55d0; --ttl-e:#0843b3; /* 非アクティブ */ --ttli-a:#7a9ad8; --ttli-b:#a9c2ef; --ttli-c:#9ab6e8; --ttli-d:#88a6de; --ttli-e:#7c99d2; /* 外枠の3本線：濃青 / 明青 / 白 */ --frame-dark:#002d96; --frame:#1d63d8; --frame-light:#6aa1f5; --frame-i:#7d9ad6; --frame-i-dark:#6784c2; /* タスクバー（XP標準に近い 30px） */ --tb-h:30px; --tb-a:#3f8cf3; --tb-b:#245edb; --tb-c:#1f55cc; --tb-d:#1941a5; --tray-a:#1ea8f5; --tray-b:#0f8ae0; --tray-c:#0c74cf; --tray-d:#0a5fb3; --green-a:#58b547; --green-b:#3a9a31; --green-c:#2f8a2a; --green-d:#26791f; } /* ---- 2. ベース ---- */ *{box-sizing:border-box} html,body{height:100%} body{margin:0; color:var(--text); font:13px/1.5 Tahoma, "MS UI Gothic", "Meiryo", Verdana, sans-serif; /* 写真調のオリジナル壁紙。読み込めない場合は SVG → グラデーションの順で表示 */ background: url("assets/images/bliss-inspired.jpg") 50% 100% / cover no-repeat fixed, url("bliss.svg") 50% 100% / cover no-repeat fixed, linear-gradient(#1f6fd6, #6fb0ee 58%, #7cb836 60%, #3f7f1c); background-color:#3f8fe0} /* 画面比率に応じたトリミング：縦長では稜線（左寄り）が見えるように寄せる */ @media (max-aspect-ratio:4/5){ body{background-position:38% 100%, 38% 100%, 0 0} } @media (min-aspect-ratio:21/9){ body{background-position:50% 72%, 50% 72%, 0 0} } a{color:var(--link)} a:focus-visible{outline:2px dotted #000; outline-offset:2px} button:focus-visible{outline:2px dotted #fff; outline-offset:1px} input:focus-visible,textarea:focus-visible{outline:2px solid #2a5fdc; outline-offset:1px} /* ---- 3. ウィンドウ枠（Luna）---- 外側から：濃青 1px（outline 代わりの box-shadow）→ 明青の枠 3px → 内側の白 1px */ .win{background:var(--face); padding:0 4px 4px; border:3px solid var(--frame); border-top:0; border-radius:8px 8px 2px 2px; box-shadow: 0 0 0 1px var(--frame-dark), /* 濃青の外線 */ inset 1px 0 0 var(--frame-light), /* 明青の内線（左右・下） */ inset -1px 0 0 var(--frame-light), inset 0 -1px 0 var(--frame-light), 0 10px 28px rgba(0,0,0,.38)} /* 白の内線：クライアント領域のすぐ外側 */ .win::after{content:""; position:absolute; left:3px; right:3px; bottom:3px; top:28px; pointer-events:none; border:1px solid rgba(255,255,255,.75); border-top:0; border-radius:0 0 1px 1px} .win[hidden]{display:none} .bar{position:relative; color:#fff; font-weight:bold; font-size:13px; letter-spacing:.1px; margin:0 -7px; padding:0 5px 0 7px; height:29px; border-radius:8px 8px 0 0; display:flex; align-items:center; gap:6px; user-select:none; overflow:hidden; text-shadow:1px 1px 0 rgba(0,0,0,.45); background:linear-gradient(var(--ttl-a) 0%, var(--ttl-b) 9%, var(--ttl-c) 26%, var(--ttl-d) 78%, var(--ttl-e) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 1px 0 0 rgba(255,255,255,.25), inset -1px 0 0 rgba(0,0,0,.2), 0 0 0 1px var(--frame-dark)} /* 中央が明るい Luna Blue */ .bar::before{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 140% at 50% 20%, rgba(255,255,255,.20), transparent 55%), linear-gradient(90deg, rgba(0,0,40,.10), transparent 18%, transparent 82%, rgba(0,0,40,.12))} .bar > *{position:relative} .bar .ico{width:16px; height:16px; flex:none; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35))} .bar .ttl{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} /* 非アクティブ（.blur）：色を抜いて影も弱く */ .win.blur{border-color:var(--frame-i); box-shadow:0 0 0 1px var(--frame-i-dark), inset 1px 0 0 #a9bdea, inset -1px 0 0 #a9bdea, inset 0 -1px 0 #a9bdea, 0 4px 14px rgba(0,0,0,.25)} .win.blur .bar{color:#dfe8f8; text-shadow:none; background:linear-gradient(var(--ttli-a) 0%, var(--ttli-b) 9%, var(--ttli-c) 26%, var(--ttli-d) 78%, var(--ttli-e) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px var(--frame-i-dark)} .win.blur .bar .ico{opacity:.8; filter:none} .win.blur .cap{filter:saturate(.45) brightness(1.08)} .menu{display:flex; gap:14px; padding:3px 8px; background:#f4f3ee; border-bottom:1px solid #d5d2c6; user-select:none} .menu u{text-decoration:underline} .body{background:#fff; border:1px solid #7f9db9} .status{padding:3px 8px; font-size:11px; display:flex; gap:12px; border-top:1px solid #d5d2c6} .status span{flex:1} /* ---- 4. キャプションボタン ---- index は