/* app.unified.css - 1ファイルで「株=グリーン / 旅行=ネイビー」を切替 - HTML側で / を付けるだけ - レイアウトは既存どおり。色とスクロール挙動のみ制御。 */ /* ========================= テーマ変数 ========================= */ /* 株=グリーン */ body.theme-stock{ --bg:#0d1a16; --card:#142420; --text:#e6ecdf; --muted:#a7b3aa; --accent:#1ecf91; --border:#1c2d27; --up:#16a34a; --down:#dc2626; } /* 旅行=ネイビー（明示） */ body.theme-travel{ --bg:#0b1020; --card:#121a2b; --text:#e6ecff; --muted:#a7b3cc; --accent:#5ac8fa; --border:#1f2a44; --up:#16a34a; --down:#dc2626; } /* ========================= 共通（レイアウトは変更しない） ========================= */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font:14px/1.6 system-ui,Segoe UI,Roboto,Arial; } /* 行ごとの交互色（行→セルへ適用） */ body.theme-stock .nx-table tbody tr:nth-child(odd) > td, body.theme-travel .nx-table tbody tr:nth-child(odd) > td { background: color-mix(in oklab, var(--card) 91%, white); } body.theme-stock .nx-table tbody tr:nth-child(even) > td, body.theme-travel .nx-table tbody tr:nth-child(even) > td { background: var(--card); } /* ========================= 株 = グリーン（ライトモード） ========================= */ body.light-stock { --bg: #f7f9fc; /* 全体背景を明るいグレー */ --card: #ffffff; /* カードは白 */ --text: #0d1a16; /* テキストは濃いめの黒緑 */ --muted: #5f6b85; /* 補助テキストは落ち着いたグレー */ --accent:#16a34a; /* アクセントカラー（グリーン）はそのまま */ --border:#d7deea; /* 枠線は淡いグレー */ --up: #16a34a; /* 上昇はグリーン */ --down: #dc2626; /* 下落はレッド */ font-weight: 500; /* 標準よりやや太め */ } /* 行ごとの交互色（行→セルへ適用） */ body.light-stock .nx-table tbody tr:nth-child(odd) > td, body.light-travel .nx-table tbody tr:nth-child(odd) > td { background: #e8f5e9; /* 薄いグレー */ } body.light-stock .nx-table tbody tr:nth-child(even) > td, body.light-travel .nx-table tbody tr:nth-child(even) > td { background: var(--card); } /* ========================= 旅行 = ブルー（ライトモード） ========================= */ body.light-travel { --bg: #ffffff; --card: #ffffff; --text: #0d1b2a; --muted: #5f6b85; --border:#d7deea; } /* ================================ */ /* ヘッダ */ .nx-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); position: static !important; backdrop-filter: saturate(140%) blur(6px); } .nx-logo{font-weight:700;letter-spacing:.5px} /* .nx-topbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; font-size: 13px; border-bottom: 1px solid var(--border); background: rgba(11,16,32,.75); backdrop-filter: saturate(140%) blur(6px); } .nx-topbar-left { display: flex; gap: 12px; } */ .nx-header_right { display: flex; gap: 10px; /* ボタンやリンク間の余白 */ margin-left: auto; /* 右寄せを強制 */ } /* ナビ */ .nx-nav a{ color:var(--muted);margin-right:12px;text-decoration:none; padding:6px 10px;border-radius:8px } .nx-nav a.is-active{ background: color-mix(in oklab, var(--accent) 18%, transparent); color:var(--text) } /* セレクト等 */ .nx-lang select,#curSelect{ background:transparent;color:var(--text); border:1px solid var(--border);padding:6px 8px;border-radius:8px } /* 言語・通貨セレクトのドロップダウンも暗色に */ .nx-lang select, #curSelect { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } /* プルダウン内のオプション */ .nx-lang select option, #curSelect option { background: var(--card); color: var(--text); } /* コンテンツ幅 */ .nx-wrap { width: 100%; max-width: 2000px; /* 上限は広めに確保 */ margin: 0 auto; padding: 16px 3%; /* 左右余白 */ /* 画面が狭い場合（<= 900px）は余白なしに */ } /* ヒーロー（必要なら使う。無ければ削除OK） */ .nx-hero{ background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 20%, transparent), color-mix(in oklab, var(--accent) 12%, transparent)); border:1px solid var(--border);border-radius:16px;padding:16px;margin:8px 0 } .nx-hero h1{margin:0 0 8px 0;font-size:22px} .nx-hero__steps{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px} .nx-hero__steps-wrap { display: flex; justify-content: space-between; /* 左:ステップ / 右:ボタン */ align-items: flex-start; /* 上端を揃える */ } .nx-hero__buttons { display: flex; gap: 6px; /* ボタン間の余白 */ } span.step { font-weight: bold; } .step1 { color: #45a049; } .step2 { color: blue; } .step3 { color: orange; } /* === コントロール群 === */ .nx-controls { display: grid; grid-template-columns: 1fr auto; /* 左=伸びる / 右=自動幅 */ align-items: center; gap: 10px; margin: 12px 0; } /* 左側：エリアピル */ .nx-controls .nx-pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { background: #2f4d42; /* 深いグリーン背景 → ボタン感が出る */ border: 1px solid var(--accent); /* 枠をアクセント色で強調 */ color: #ffffff; /* 文字は白でコントラスト強化 */ /* border: 1px solid var(--border); */ padding: 6px 10px; border-radius: 999px; cursor: pointer; } .pill:hover { /* 背景色: ホバー時に少し暗くして、クリックできることを示唆 */ background: #45a049; /* ション: 影を少し大きくして、浮き上がっているように見せる */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 変形: わずかに上に移動して、インタラクティブ性を強調 */ transform: translateY(-2px); } .pill.is-active { /* background: rgba(96,215,255,.12); */ /* border-color: #2e4d7e; */ background: #3c6355; /* hover時少し明るめに */ } /* 右側：操作ボタン群 */ .nx-controls .nx-right { display: flex; gap: 8px; justify-self: end; /* 右列の右端へ */ } /* ボタン */ /* .nx-ghost { background: #2f4d42; border: 1px solid var(--accent); color: #ffffff; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s; } */ .nx-ghost { /* background: #2f4d42; */ background: #3c6355; border: 1px solid var(--accent); color: #ffffff; padding: 6px 12px; /* border-radius: 8px; */ border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; /* 外側の落ち影と内側ハイライト */ box-shadow: 0 4px 8px rgba(0,0,0,0.3), /* 外側影（下に落ちる） */ inset 0 2px 3px rgba(255,255,255,0.2), /* 内側上辺の光 */ inset 0 -2px 3px rgba(0,0,0,0.3); /* 内側下辺の影 */ } .nx-ghost:hover { /* 背景色: ホバー時に少し暗くして、クリックできることを示唆 */ background: #45a049; /* ション: 影を少し大きくして、浮き上がっているように見せる */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 変形: わずかに上に移動して、インタラクティブ性を強調 */ transform: translateY(-2px); } #search { flex: 1; min-width: 250px; border: 1px solid var(--accent); /* ← 白線枠からアクセント枠に */ border-radius: 10px; padding: 8px 12px; background: var(--text); color: var(--card); } #symbols { flex: 1; min-width: 250px; border: 1px solid var(--accent); /* ← 白線枠からアクセント枠に */ border-radius: 10px; padding: 8px 12px; background: var(--text); color: var(--card); /* background: var(--card); color: var(--text); */ } /* .nx-primary{ background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, white)); color:#001018;border:none;border-radius:10px; padding:8px 12px;font-weight:700;cursor:pointer } */ .nx-primary { background: linear-gradient( 135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, white) ); color: #001018; border: none; border-radius: 10px; padding: 10px 16px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,0.2); /* 立体感 */ transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; } .nx-primary:hover { background: linear-gradient( 135deg, color-mix(in oklab, var(--accent) 80%, white), color-mix(in oklab, var(--accent) 60%, white) ); box-shadow: 0 4px 10px rgba(0,0,0,0.25); /* 少し強く */ } .nx-primary:active { transform: translateY(2px); /* 押した感じ */ box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* シャドウ弱く */ } /* カード */ .nx-card{border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:visible} /* ========================= テーブル（内部スクロール無し + thead固定） ========================= */ .nx-tablewrap{ max-height:none !important; /* 内部スクロール撤廃 */ overflow:visible !important; /* ブラウザスクロールに任せる */ } table.nx-table{width:100%;border-collapse:separate;border-spacing:0} .nx-table thead th{ position:sticky !important; top: var(--site-header-height, 0px); /* サイトの固定ヘッダ高に応じて調整 */ z-index:5; background: color-mix(in oklab, var(--bg) 80%, var(--card)) !important; padding:9px;border-bottom:1px solid var(--border); text-align:left;font-size:12px;color:var(--muted); box-shadow: 0 1px 0 var(--border); /* 下線を明瞭に */ } .nx-table tbody td{ padding:9px; border-bottom:1px dashed color-mix(in oklab, var(--border) 70%, transparent) } .nx-table td.num{text-align:right} .nx-table td.up{color:var(--up)} .nx-table td.down{color:var(--down)} .spark{width:90px;height:26px;display:block} /* アクティブ行ホバーを少し強調 */ table#stock-prices.nx-table tbody tr:hover > td { background: color-mix(in oklab, var(--accent) 30%, var(--card)) !important; } /* hist 行は常時グレー */ table#stock-prices.nx-table tbody tr.hist > td { background: color-mix(in oklab, var(--muted) 20%, var(--card)); color: var(--muted); /* 文字も淡色にしたい場合 */ } /* hist 行の hover はグレーを維持 */ table#stock-prices.nx-table tbody tr.hist:hover > td { background: color-mix(in oklab, var(--muted) 35%, var(--card)) !important; } /* テーブルフッタ */ .nx-table__foot{ display:flex;justify-content:space-between;align-items:center; background: color-mix(in oklab, var(--bg) 80%, var(--card)) !important; padding:8px 10px;border-top:1px solid var(--border);font-size:13px } /* フッター */ .nx-foot__right{color:var(--muted)} .nx-footer{ display:flex;justify-content:space-between;align-items:center; padding:16px;border-top:1px solid var(--border);color:var(--muted);margin-top:16px } .nx-footer a{color:var(--muted);text-decoration:none;margin-left:10px} /* 未取得銘柄行は淡色に（histTにあるけどstockTにない銘柄） */ tr.hist{opacity:.55} /* 本文リンクはアクセントで統一 */ a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} /* スマホ最適化 */ @media (max-width:900px){ .nx-nav{display:none} .spark{width:64px} .nx-wrap { padding: 16px; /* 左右余白は消して上下だけ */ } }