/* ===================================================================== console.css — 業務画面（管理画面・設定）だけを「シンプルなB2B管理コンソール」風に上書き。配色（ダーク＋ホロ・シアン）は踏襲しつつ、PUNK RECORDS の演出（格子背景・走査線・グロー・装飾フォント）を抑えて落ち着いた業務画面にする。 portal.css の後に読み込み、すべて .console-ui 配下にスコープして他ページに影響させない。適用: dashboard.html / settings.html の。 ===================================================================== */ /* 背景演出（格子グリッド・走査線・上部グロー）をオフ → フラットなダーク地 */ body.console-ui { background: #0a0e17; } body.console-ui::before, body.console-ui::after { display: none; } /* ヘッダー：半透明ブラー＋ロゴのグロー/回転をやめてソリッドな業務ヘッダーに */ .console-ui .portal-header { background: #0c111c; backdrop-filter: none; border-bottom: 1px solid var(--line); } /* ロゴ（菱形マーク＋ブランド名）はホームと統一＝portal.css のまま上書きしない（グロー／Orbitron／ホバー回転を維持） */ .console-ui .portal-nav a { font-family: var(--font-body); font-size: 0.85rem; border-bottom: none; } .console-ui .portal-nav a:hover { color: var(--accent); border-color: transparent; } /* レイアウト：サイドバー＋コンテンツ（コンテンツはカード化） */ .console-ui .dashboard, .console-ui .settings { padding-top: 2rem; gap: 1.5rem; } /* サイドバーを少し広げ、親グループ見出し（「PUNK RECORDS ランキング」）が1行に収まるように */ .console-ui .dashboard { grid-template-columns: 248px 1fr; } /* 左サブナビ（管理画面・設定共通）：装飾を抑えたプレーンなメニュー */ .console-ui .dashboard-nav, .console-ui .settings-nav { gap: 0; } /* 親グループ＝大きく明るく・上に区切り線でセクションを分離（子よりも目立たせる） */ .console-ui .dashboard-nav__group { font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; padding: 0.3rem 0.8rem 0.5rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .console-ui .dashboard-nav__group:first-child { margin-top: 0; padding-top: 0.3rem; border-top: none; } .console-ui .dashboard-nav a, .console-ui .settings-nav a { font-family: var(--font-body); font-size: 0.88rem; color: var(--ink-2); padding: 0.6rem 0.9rem; border-left: 2px solid transparent; border-radius: 0; letter-spacing: 0; } /* 子項目＝親より小さめ＋インデントして従属を明確にする（管理画面のみ） */ .console-ui .dashboard-nav a { font-size: 0.84rem; padding-left: 1.5rem; } .console-ui .dashboard-nav a:hover, .console-ui .settings-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.03); } .console-ui .dashboard-nav a.is-active, .console-ui .settings-nav a.is-active { color: var(--accent); border-left-color: var(--accent); background: rgba(46, 217, 255, 0.08); font-weight: 600; } /* コンテンツをパネル（カード）に：SaaS の管理画面らしい面 */ .console-ui .dashboard-main, .console-ui .settings-main { background: #0e1320; border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.25rem, 3vw, 2rem); min-width: 0; } .console-ui .settings-heading { font-family: var(--font-body); font-weight: 600; font-size: 1.3rem; letter-spacing: 0; color: var(--ink); text-shadow: none; margin: 0 0 1.25rem; } .console-ui .page-subtitle { font-family: var(--font-body); font-weight: 600; font-size: 1rem; } .console-ui .muted { color: var(--ink-2); } /* 期間セレクタ（管理画面）：落ち着いたトグル（グローなし・角丸） */ .console-ui .period-chip { font-family: var(--font-body); font-size: 0.8rem; border-radius: 6px; border-color: var(--line); padding: 0.4rem 0.85rem; } .console-ui .period-chip:hover { border-color: var(--accent-dk); color: var(--ink); } .console-ui .period-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--void); box-shadow: none; font-weight: 600; } .console-ui .period-custom input[type="date"] { font-family: var(--font-body); border-radius: 6px; border-color: var(--line); } /* ランキング（管理画面）：クリーンな表行（グローなし・薄いホバー） */ .console-ui .rank-list { border-top: 1px solid var(--line); } .console-ui .rank-item { padding: 0.8rem 0.5rem; } .console-ui .rank-item:hover { background: rgba(255, 255, 255, 0.025); } .console-ui .rank-item__pos { font-family: var(--font-mono); color: var(--ink-3); text-shadow: none; } .console-ui .rank-item:nth-child(1) .rank-item__pos, .console-ui .rank-item:nth-child(2) .rank-item__pos, .console-ui .rank-item:nth-child(3) .rank-item__pos { color: var(--accent); text-shadow: none; } .console-ui .rank-item__name { font-family: var(--font-body); } .console-ui .rank-item__val { color: var(--ink); } /* テーブル（設定：履歴・ユーザー管理）：罫線ベースのクリーンな業務表に */ .console-ui .tbl { background: transparent; border: 1px solid var(--line); margin-bottom: 1.5rem; } .console-ui .tbl th { font-family: var(--font-body); font-weight: 600; font-size: 0.74rem; text-transform: none; letter-spacing: 0.02em; color: var(--ink-2); background: #0b101b; border-bottom: 1px solid var(--line); } .console-ui .tbl td { color: var(--ink); } .console-ui .tbl tr:hover td { background: rgba(255, 255, 255, 0.025); } /* セレクト・ボタン：角丸でグローなしの落ち着いた操作系 */ /* セレクトはダーク地＋カスタム矢印で統一（ブラウザ既定の白いプルダウンを上書き） */ .console-ui select { appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); background-color: var(--abyss); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6f8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; border: 1px solid var(--line); border-radius: 6px; padding: 0.55rem 2rem 0.55rem 0.7rem; outline: none; cursor: pointer; color-scheme: dark; } .console-ui select:hover { border-color: var(--accent-dk); } .console-ui select:focus { border-color: var(--accent); } .console-ui select option { background: var(--abyss); color: var(--ink); } .console-ui .role-select { border-radius: 6px; border-color: var(--line); } .console-ui .btn { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0; white-space: nowrap; border-radius: 6px; border-color: var(--accent-dk); color: var(--accent); } .console-ui .btn:hover { background: var(--accent); color: var(--void); box-shadow: none; } /* 主ボタン（保存など）はシアン面に void 文字（.console-ui .btn の文字色上書きに勝たせる） */ .console-ui .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--void); } .console-ui .btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--void); } /* 受講コース管理（→ docs/specs/90-courses.md）：一覧＋エディタ */ .console-ui .course-admin__head { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .console-ui .course-cards { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .console-ui .course-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--line); } .console-ui .course-card__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .console-ui .course-card__title { font-weight: 600; color: var(--ink); } .console-ui .course-card__meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); } .console-ui .course-card__actions { display: flex; gap: 0.4rem; flex: none; } .console-ui .course-editor { display: flex; flex-direction: column; gap: 1.1rem; } .console-ui .ce-field { display: flex; flex-direction: column; gap: 0.4rem; } .console-ui .ce-label { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: var(--ink-2); } .console-ui .ce-field input, .console-ui .ce-field textarea, .console-ui .ce-add input, .console-ui .ma-search input { font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); padding: 0.55rem 0.7rem; background: var(--abyss); border: 1px solid var(--line); border-radius: 6px; outline: none; width: 100%; } .console-ui .ce-field input:focus, .console-ui .ce-field textarea:focus, .console-ui .ce-add input:focus, .console-ui .ma-search input:focus { border-color: var(--accent); } .console-ui .ce-field select { width: 100%; } .console-ui .ce-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; } .console-ui .ce-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); } .console-ui .ce-item:last-child { border-bottom: none; } .console-ui .ce-item__pos { font-family: var(--font-mono); color: var(--accent); width: 1.4rem; flex: none; } .console-ui .ce-item__title { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .console-ui .ce-item__ctrl { display: flex; gap: 0.3rem; flex: none; } .console-ui .ce-empty { padding: 0.7rem; color: var(--ink-3); } .console-ui .ce-mini { padding: 0.25rem 0.55rem; font-size: 0.85rem; line-height: 1; } .console-ui .ce-mini[disabled] { opacity: 0.4; cursor: default; } /* 講座の追加＝検索コンボボックス（検索入力＋クリックで追加できる結果リスト） */ .console-ui .ce-add { margin-top: 0.6rem; } .console-ui .ce-add input { width: 100%; } .console-ui .ce-results { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; max-height: 13rem; overflow-y: auto; } .console-ui .ce-results > li { border-bottom: 1px solid var(--line); } .console-ui .ce-results > li:last-child { border-bottom: none; } .console-ui .ce-result { display: block; width: 100%; text-align: left; padding: 0.55rem 0.8rem; background: transparent; border: 0; color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; } .console-ui .ce-result:hover { background: rgba(46, 217, 255, 0.08); color: var(--accent); } .console-ui .ce-result--empty, .console-ui .ce-result--more { padding: 0.55rem 0.8rem; font-size: 0.82rem; cursor: default; } .console-ui .ce-actions { display: flex; gap: 0.6rem; margin-top: 0.4rem; } /* 講座メタ編集（material-admin） */ .console-ui .ma-note { padding: 0 0 1rem; font-size: 0.82rem; } .console-ui .ma-editing { color: var(--ink-2); font-size: 0.85rem; margin: 0 0 0.25rem; } .console-ui .ma-badge { font-family: var(--font-mono); font-size: 0.66rem; color: var(--void); background: var(--accent); padding: 0.1rem 0.4rem; border-radius: 4px; vertical-align: middle; margin-left: 0.4rem; } .console-ui .ma-search { margin: 0 0 1rem; } .console-ui .ma-no { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); margin-right: 0.6rem; } /* モバイル：サブナビ横並びの下線スタイルを維持（コンテンツのカードはそのまま） */ @media (max-width: 720px) { .console-ui .dashboard-nav a, .console-ui .settings-nav a { border-left: none; border-bottom: 2px solid transparent; padding-left: 0.7rem; } .console-ui .dashboard-nav a.is-active, .console-ui .settings-nav a.is-active { border-left: none; border-bottom-color: var(--accent); } /* 横並びになるモバイルでは親グループの上区切り・インデントは控えめに */ .console-ui .dashboard-nav__group { width: 100%; margin-top: 0.7rem; padding: 0.2rem 0 0.1rem; border-top: none; } .console-ui .dashboard-nav__group:first-child { margin-top: 0; } }