/* ===================================================== * themes.css - カラーテーマ & 壁紙パターン定義 * テーマ適用: * 壁紙適用: * JS: theme-switcher.js が localStorage から自動適用 * ===================================================== */ /* ===================================================== * カラーテーマ定義 * ===================================================== */ /* ---- Teal / Custom（custom 実値は main.php インライン style で上書き） ---- */ [data-theme="teal"], [data-theme="custom"] { --main: #29809c; --main-dark: #1e5f73; --main-light: #d6edf3; --main-rgb: 41, 128, 156; --sub: #5ca2b3; --sub2: #92d5dc; --primary-color: var(--main); } /* ---- Forest / Navy / Plum / Ember ---- */ [data-theme="forest"] { --main: #2e7d52; --main-dark: #1a5c35; --main-light: #d4ede0; --main-rgb: 46, 125, 82; --sub: #4a9e6e; --sub2: #86c9a3; --primary-color: var(--main); } [data-theme="navy"] { --main: #1e4d8c; --main-dark: #143769; --main-light: #d0dcf4; --main-rgb: 30, 77, 140; --sub: #3668b8; --sub2: #7da3d8; --primary-color: var(--main); } [data-theme="plum"] { --main: #6b3fa0; --main-dark: #4e2d78; --main-light: #e8dbf7; --main-rgb: 107, 63, 160; --sub: #8a5cbe; --sub2: #b89dd9; --primary-color: var(--main); } [data-theme="ember"] { --main: #b5441a; --main-dark: #8a3212; --main-light: #fce4da; --main-rgb: 181, 68, 26; --sub: #d4643c; --sub2: #e8a08a; --primary-color: var(--main); } /* ---- Dark: ダークモード ---- */ /* * 背景 z-depth: * #0d1117 → ページ背景（最深） * #161b22 → メインカード・ナビ * #21262d → サブカード・入力フィールド * #2d333b → ホバー・三次背景 * テキスト: #e6edf3（主） / #c9d1d9（本文） / #8b949e（副） * アクセント: #4da6c0（リンク/フォーカス） #1f6d84（btn-primary） */ [data-theme="dark"] { /* ── ナビ・ブランドカラー ── */ --main: #161b22; --main-dark: #0d1117; --main-light: #21262d; --main-rgb: 22, 27, 34; --sub: #21262d; --sub2: #2d333b; --primary-color: #161b22; /* ── 背景階調 ── */ --gray-BG: #0d1117; --gray-lightest: #161b22; --gray-light: #21262d; --gray-medium: #2d333b; --gray-right: #373e47; --gray: #6e7681; --gray-dark: #c9d1d9; --gray-darkest: #e6edf3; --white: #c9d1d9; /* ── テキスト ── */ --text-body: #c9d1d9; --text-muted: #8b949e; /* アクセント色テキスト: ダークでは --main が背景同色(#161b22)のため可読アクセントを使う。 ユーザーのカスタムアクセント生値(--color-link)は暗い色だと暗背景に埋もれて潰れるため、 見出し・ラベルには暗背景で確実に読める固定アクセント(#4da6c0)を使う（旧 255 行の スポット修正が個別に使っていた色を、このトークン 1 箇所へ集約）。 */ --text-accent: #4da6c0; /* ── ボーダー ── */ --border-color: #30363d; --table-border: #444c56; /* ── リンク ── */ --color-link: #4da6c0; --color-link-hover: #66bcd1; /* ── シャドウ ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.65); --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.75); /* ── 追加セマンティック変数のダーク上書き ── */ --gray-disabled: #2d333b; --gray-ultra-light: #161b22; --text-secondary: #8b949e; --table-hover-bg: #21262d; --list-hover-bg: var(--table-hover-bg); --list-hover-accent-bg: rgba(77, 166, 192, 0.16); --list-action-btn-hover-bg: rgba(255, 255, 255, 0.08); --list-action-btn-active-bg: rgba(255, 255, 255, 0.14); --list-action-btn-hover-bg-primary: rgba(77, 166, 192, 0.18); --list-action-btn-hover-bg-wt: rgba(255, 255, 255, 0.08); --list-action-btn-hover-bg-secondary: rgba(255, 255, 255, 0.08); --list-action-btn-hover-bg-thirdary: rgba(250, 124, 73, 0.16); --list-action-btn-hover-bg-danger: rgba(255, 123, 114, 0.14); --list-interactive-hover-bg: rgba(77, 166, 192, 0.12); --list-interactive-hover-fg: #4da6c0; --list-interactive-hover-border: rgba(77, 166, 192, 0.3); --summary-row-hover-bg: rgba(77, 166, 192, 0.06); --list-approval-actionable-bg: rgba(227, 179, 65, 0.12); --list-approval-hover-bg: rgba(227, 179, 65, 0.18); --tfoot-bg: #1a1f26; --warning-bg: #2d2500; --warning-text: #e3b341; --list-row-payment-amount-diff-accent: rgba(227, 179, 65, 0.18); /* ── アラート・バッジ色変数のダーク上書き ── */ --alert-success-bg: #0d2e1a; --alert-success-text: #56d364; --alert-success-border: #196c2e; --alert-warning-bg: #2d2500; --alert-warning-text: #e3b341; --alert-warning-border: #6e5500; --alert-danger-bg: #2d0f12; --alert-danger-text: #ff7b72; --alert-danger-border: #7a1c22; --alert-info-bg: #0d2030; --alert-info-text: #79c0ff; --alert-info-border: #1d4a6e; --table-hover-color: #4da6c0; --color-material: #df79ba; /* ── セマンティックカラーのダーク上書き ── */ --color-success: #56d364; --color-danger: #ff7b72; --color-warning: #e3b341; --color-info: #79c0ff; /* ── ボタンコンポーネントのダーク上書き ── */ --btn-primary-bg: #1f6d84; --btn-primary-text: #e6edf3; --btn-primary-border: #1f6d84; --btn-primary-hover-bg: #175e73; --btn-primary-hover-border: #175e73; --btn-secondary-bg: #21262d; --btn-secondary-text: #c9d1d9; --btn-secondary-border: #30363d; --btn-secondary-hover-bg: #2d333b; --btn-secondary-hover-border: #4da6c0; --btn-secondary-hover-text: #c9d1d9; --btn-thirdary-bg: #5c2e00; --btn-thirdary-text: #ffa657; --btn-thirdary-border: #7a3e00; --btn-thirdary-hover-bg: #7a3e00; --btn-thirdary-hover-border: #a05200; --btn-thirdary-shadow: none; --btn-danger-bg: #2d0f12; --btn-danger-text: #ff7b72; --btn-danger-border: #7a1c22; --btn-danger-hover-bg: #3d1519; --btn-danger-hover-border: #c0444d; --btn-cancel-bg: #21262d; --btn-cancel-text: #c9d1d9; --btn-cancel-border: #30363d; --btn-cancel-hover-bg: #2d333b; --btn-wt-bg: #21262d; --btn-wt-text: #8b949e; --btn-wt-border: #30363d; --btn-wt-hover-bg: #2d333b; --btn-wt-hover-text: #c9d1d9; --btn-wt-hover-border: #373e47; /* ── フォーム入力フィールドのダーク上書き ── */ --field-bg: #21262d; --field-text: #c9d1d9; --field-border: #30363d; --field-placeholder: #6e7681; --field-focus-border: #4da6c0; --field-focus-shadow: 0 0 0 2px rgba(77, 166, 192, 0.25); --field-disabled-bg: #161b22; --field-scrollbar-track: #161b22; --field-scrollbar-thumb: #30363d; --field-scrollbar-thumb-hover: #444c56; --field-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9d1d9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ── テーブル（.common）のダーク上書き ── */ --table-bg: #161b22; --table-shadow: 0 0 10px rgba(0, 0, 0, 0.5); --table-th-bg: #2d333b; --table-th-color: #e6edf3; /* th 罫線色（ダーク）: 暗いヘッダには明るい中立線でコントラスト確保。alpha で調整可。 */ --table-line: rgba(255, 255, 255, 0.18); --table-th-border-v: var(--table-line); --table-th-border-h: var(--table-line); --table-td-bg: #161b22; --table-td-color: #c9d1d9; /* td 罫線色: 従来どおり本文色由来 */ --table-td-border-h: color-mix(in srgb, var(--table-td-color) 12%, transparent); --table-td-border-v: color-mix(in srgb, var(--table-td-color) 15%, transparent); --table-stripe-bg: #1a1f26; --table-tfoot-border-top: #373e47; --table-sorted-bg: #1f6d84; --table-link-color: #4da6c0; --table-hover-bg: #21262d; --tfoot-bg: #21262d; --table-hover-color: #66bcd1; /* ── sec-card / master-form / page tokens ── */ --sec-card-bg: #161b22; --sec-card-border: #30363d; --sec-card-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); --sec-card-head-tab-color: #8b949e; --sec-card-head-tab-hover-bg: rgba(255, 255, 255, 0.18); --sec-card-head-tab-hover-color: #fff; --sec-card-head-tab-hover-border: rgba(255, 255, 255, 0.5); --sec-card-head-tab-active-bg: #0d1117; --sec-card-head-tab-active-color: #c9d1d9; --master-form-td-bg: #161b22; --master-form-section-border: #30363d; --unified-tab-content-bg: #0d1117; --unified-form-section-bg: #161b22; --unified-btn-ghost-bg: rgba(255, 255, 255, 0.1); --unified-btn-ghost-border: rgba(255, 255, 255, 0.28); --unified-btn-ghost-color: rgba(255, 255, 255, 0.92); --unified-btn-ghost-hover-bg: rgba(255, 255, 255, 0.18); --unified-btn-ghost-hover-border: rgba(255, 255, 255, 0.4); --approval-meta-body-bg: #161b22; --approval-meta-asb-bg: #0d1117; --approval-meta-asb-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); --approval-meta-asb-color: #79c0ff; --approval-meta-asb-success-color: #3fb950; --approval-meta-asb-warn-color: #f85149; --ar-stage-bg: #161b22; --ar-stage-header-bg: #21262d; --ar-chip-bg: #21262d; --profile-avatar-bg: #3d444d; --profile-appearance-bg: #161b22; --profile-appearance-sep-bg: rgba(255, 255, 255, 0.15); --profile-head-btn-bg: rgba(255, 255, 255, 0.12); --profile-head-btn-color: #fff; --profile-head-btn-border: rgba(255, 255, 255, 0.35); --profile-toggle-bg: var(--gray-BG); --profile-toggle-border: var(--border-color); --profile-toggle-color: var(--text-body); --profile-toggle-checked-color: var(--color-link); --profile-toggle-checked-border: rgba(88, 166, 255, 0.4); --profile-toggle-checked-bg: rgba(88, 166, 255, 0.12); --tm-table-bg: #161b22; --tm-cell-bg: #161b22; --tm-sticky-bg: #161b22; --tm-settings-bg: #161b22; --tm-slot-icon-slot1: #79c0ff; --tm-slot-icon-slot2: #7ee787; --tm-slot-icon-none: #8b949e; --tm-slot-icon-inactive: #484f58; --movement-chip-bg: #1c3a5c; --movement-chip-scrollbar: #2b2d30; --pp-form-section-bg: #21262d; --pp-date-bg: rgba(77, 166, 192, 0.08); --pp-date-label-color: #e6edf3; --pp-date-note-color: #8b949e; --pp-select-all-bg: #21262d; --pp-footer-bg: #161b22; --lmm-summary-bg: rgba(77, 166, 192, 0.08); --lmm-summary-title-color: #e6edf3; --lmm-summary-note-color: #8b949e; --lmm-field-label-color: #8b949e; --lmm-bulk-item-bg: #161b22; --lmm-bulk-head-bg: rgba(77, 166, 192, 0.1); --lmm-footer-bg: #21262d; --lmm-option-bg: #161b22; --lmm-option-active-bg: rgba(77, 166, 192, 0.12); --lmm-option-active-border: #4da6c0; --lmm-switch-color: #8b949e; --lmm-switch-active-color: #9cd4e8; --lmm-doc-status-bg: #161b22; --lmm-doc-status-label-color: #8b949e; --lmm-doc-status-item-bg: #21262d; --lmm-doc-status-created-bg: rgba(77, 166, 192, 0.12); --cam-chip-bg: var(--gray-lightest); --cam-chip-color: var(--text-body); --list-footer-bg: #21262d; --table-hover-color: #66bcd1; /* ── タブのダーク上書き ── */ --tab-btn-bg: #161b22; --tab-btn-text: #8b949e; --tab-btn-border: #30363d; --tab-active-bg: #21262d; --tab-active-text: #e6edf3; --tab-active-border: #4da6c0; --tab-hover-bg: #21262d; --tab-content-bg: #161b22; /* ── ページネーションのダーク上書き ── */ --pager-bg: #21262d; --pager-text: #c9d1d9; --pager-border: #30363d; --pager-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --pager-hover-bg: #2d333b; --pager-hover-text: #4da6c0; --pager-hover-border: #4da6c0; --pager-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); --pager-active-bg: #1f6d84; --pager-active-text: #e6edf3; --pager-active-border: #1f6d84; --pager-active-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --pager-dots-text: #6e7681; --pager-info-text: #8b949e; /* ── 行ステータス系（wash は tokens の state-* 由来を継承。必要分のみ上書き）── */ --inactive-row-bg: #1a1f26; --inactive-row-color: #6e7681; --la-detail-block-top: rgba(255, 255, 255, 0.18); --la-detail-block-bottom: rgba(255, 255, 255, 0.18); --la-detail-row-divider: rgba(255, 255, 255, 0.06); --la-group-boundary: rgba(255, 255, 255, 0.14); --la-detail-flat-bg: #1c2128; --la-detail-flat-hover-bg: #252b33; --lat-clone-group-rail: var(--state-transport-in-fg, #56d364); --list-detail-header-bg: #3d4650; --list-detail-header-fg: #adb5bd; --list-detail-header-border: #565f68; --list-detail-header-border-bottom: rgba(255, 255, 255, 0.14); --list-row-theme-bg: linear-gradient( to right, rgba(77, 166, 192, 0.16) 0%, rgba(77, 166, 192, 0.05) 40%, transparent 70% ); --list-row-theme-hover-bg: rgba(77, 166, 192, 0.14); --list-row-theme-strong-bg: linear-gradient( to right, rgba(77, 166, 192, 0.22) 0%, rgba(77, 166, 192, 0.08) 40%, transparent 70% ); --la-history-shell-bg: linear-gradient( to right, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 65% ); --la-history-indent-bg: rgba(255, 255, 255, 0.04); --la-history-group-border: rgba(255, 255, 255, 0.18); --la-history-inner-border: rgba(255, 255, 255, 0.1); --la-accent-rent: #56d364; --la-accent-history-other: #8b949e; --la-accent-transport-in: #56d364; --la-accent-transport-out: #ffa657; --la-accent-loss: #ff7b72; --state-active-fg: #56d364; --state-completed-fg: #ffa94d; --state-pending-fg: #8b949e; --state-transport-in-fg: #56d364; --state-transport-out-fg: #ffa657; --state-expense-other-fg: #8b949e; --state-loss-fg: #ff7b72; --state-loss-bg: rgba(255, 123, 114, 0.18); --detail-row-td-bg: #1a1f26; /* ── アラート・バッジ色変数の値を個別ルールと統一（変数が自動適用）── */ --alert-success-bg: #0f2e1a; --alert-info-border: #1158a7; /* ── form.css 専用のダーク上書き ── */ --form-row-even-bg: #1a1f26; --lease-pair-separator: color-mix(in srgb, var(--table-td-color) 22%, transparent); --input-readonly-bg: #161b22; --input-readonly-border: #30363d; --input-readonly-color: #6e7681; --color-profit: #56d364; --color-amber: #ffa657; --manual-input-bg: #0d2030; --manual-input-border: #4da6c0; --input-bg: #0d1117; --input-border: #444c56; --code-badge-bg: #0d2030; --code-badge-text: #79c0ff; --badge-material-center-bg: #2d1b45; --badge-material-center-text: #c9b8f1; /* ── project-detail.css 変数の上書き ── */ --pd-profit-light: #0d2e1a; --pd-profit-dark: #56d364; --pd-loss-light: #2d0f12; --pd-loss-dark: #ff7b72; --pd-warning-light: #2d2500; --pd-warning-dark: #e3b341; --pd-badge-billing: rgba(21, 101, 192, 0.18); --pd-badge-billing-text: #79c0ff; --pd-badge-payment: rgba(198, 40, 40, 0.18); --pd-badge-payment-text: #ff7b72; --pd-badge-construction: rgba(46, 125, 82, 0.18); --pd-badge-construction-text: #56d364; --pd-badge-expense: rgba(230, 81, 0, 0.18); --pd-badge-expense-text: #ffa657; /* ── バッジ系変数 ── */ --badge-success-bg: rgba(86, 211, 100, 0.12); --badge-success-color: #56d364; --badge-danger-bg: rgba(255, 123, 114, 0.12); --badge-danger-color: #ff7b72; --badge-danger-hover-bg: rgba(255, 123, 114, 0.22); --badge-danger-hover-color: #ff9990; --badge-warning-bg: rgba(227, 179, 65, 0.12); --badge-warning-color: #e3b341; --badge-warning-hover-bg: rgba(227, 179, 65, 0.22); --badge-warning-hover-color: #e3b341; --badge-info-bg: rgba(77, 166, 192, 0.15); --badge-info-color: #4da6c0; --badge-muted-bg: #2d333b; --badge-muted-color: #8b949e; --badge-lease-bg: rgba(77, 166, 192, 0.12); --badge-lease-color: #4da6c0; --badge-expense-bg: rgba(255, 166, 87, 0.12); --badge-expense-color: #ffa657; --list-badge-doc-purchase-order-bg: rgba(184, 134, 11, 0.18); --list-badge-doc-purchase-order-fg: #e3b341; --badge-material-bg: rgba(247, 120, 186, 0.12); --badge-material-color: #f778ba; --badge-sub-bg: rgba(77, 166, 192, 0.1); --badge-sub-color: #79c0ff; --status-badge-bg: rgba(77, 166, 192, 0.12); --status-badge-color: #4da6c0; /* ── 承認UI変数 ── */ --approval-surface-bg: #161b22; --approval-head-color: #5ca2b3; --approval-action-head-bg: #1a2530; --approval-action-head-color: #5ca2b3; --approval-hero-target-color: #c9d1d9; --approval-hero-comment-bg: #21262d; /* ── マスター管理カード変数 ── */ --masters-card-bg: #21262d; --masters-card-color: #c9d1d9; --masters-card-hover-bg: #1e3040; --masters-card-hover-border: #5ca2b3; --masters-accent: #5ca2b3; --masters-icon-color: #5ca2b3; /* ── 確認モーダル変数 ── */ --confirm-modal-bg: #21262d; --confirm-modal-h3-color: #4da6c0; --confirm-modal-actions-border: #30363d; --confirm-modal-info-bg: #1a2d4a; --confirm-modal-impact-bg: #1a1f26; --confirm-modal-safe-bg: #0d2030; --confirm-modal-safe-border: #4da6c0; /* ── プロフィールページ背景 ── */ --pf-page-bg: #0d1117; /* ── Phase 4: surface / chrome / remaining component tokens ── */ color-scheme: dark; --form-section-bg: #161b22; --form-section-border: #30363d; --form-section-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); --card-bg: #161b22; --card-border: #30363d; --app-header-bg: #161b22; --app-header-border: #30363d; --app-header-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); --app-footer-bg: #161b22; --app-footer-border: #30363d; --app-footer-color: #8b949e; --scrollbar-size: 8px; --scrollbar-track: #161b22; --scrollbar-thumb: #373e47; --scrollbar-thumb-hover: #4a535e; --btn-info-bg: #0d2e1a; --btn-info-text: #56d364; --btn-info-border: #196c2e; --btn-info-shadow: none; --btn-info-hover-bg: #163b22; --btn-info-hover-border: #2ea043; --btn-info-hover-text: #7ee09b; --btn-add-bg: #1f6d84; --btn-add-text: #e6edf3; --btn-add-hover-bg: #175e73; --control-btn-bg: #21262d; --control-btn-text: #c9d1d9; --control-btn-border: #30363d; --control-btn-hover-bg: #2d333b; --dropdown-bg: #21262d; --dropdown-border: #30363d; --dropdown-color: #c9d1d9; --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); --dropdown-item-color: #c9d1d9; --dropdown-item-border: #30363d; --dropdown-item-hover-bg: #2d333b; --inline-radio-label-color: #c9d1d9; --inline-radio-hover-bg: #21262d; --inline-radio-checked-bg: rgba(77, 166, 192, 0.15); --inline-radio-checked-border: #4da6c0; --inline-radio-checked-color: #4da6c0; --inline-radio-accent: #4da6c0; --month-nav-bg: #161b22; --month-nav-border: #30363d; --month-nav-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); --month-nav-btn-color: #4da6c0; --month-nav-current-color: #e6edf3; --month-nav-all-period-bg: #1f6d84; --month-nav-all-period-color: #e6edf3; --qty-lent-color: #56d364; --qty-returned-color: #ffa94d; --qty-zero-color: #6e7681; --lat-unit-color: #6e7681; --lat-badge-accent-bg: rgba(255, 167, 96, 0.18); --lat-badge-accent-color: #ffa657; --period-date-color: #6e7681; --state-active-bg: rgba(86, 211, 100, 0.12); --state-completed-bg: rgba(255, 169, 77, 0.12); --state-pending-bg: rgba(139, 148, 158, 0.12); --state-transport-in-bg: rgba(86, 211, 100, 0.15); --state-transport-out-bg: rgba(255, 167, 96, 0.15); --state-expense-other-bg: rgba(139, 148, 158, 0.15); --state-loss-bg: rgba(255, 123, 114, 0.18); --info-summary-bg: rgba(77, 166, 192, 0.08); --info-summary-border: rgba(77, 166, 192, 0.25); --bsr-item-color: #8b949e; --bsr-item-strong-color: #e6edf3; --bsr-period-color: #4da6c0; --bsr-period-cum-color: #56d364; --bsr-total-bg: #1f6d84; --bsr-total-cum-bg: #1a5c35; --bsr-divider-bg: rgba(77, 166, 192, 0.35); --lat-bill-row-total-bg: rgba(255, 255, 255, 0.03); --lat-bill-amount-color: #e6edf3; --lat-bill-muted-color: #6e7681; --lat-bill-period-color: #8b949e; --lat-bill-cell-muted: #373e47; --lat-bill-badge-info-bg: rgba(121, 192, 255, 0.12); --lat-bill-badge-info-color: #79c0ff; --lat-bill-footer-bg: #21262d; --lat-bill-footer-border: #30363d; --lat-bill-footer-value: #e6edf3; --lat-bill-footer-tax: #8b949e; --lat-bill-footer-grand-border: #373e47; --lat-bill-footer-grand-value: #4da6c0; --summary-item-bg: #161b22; --summary-item-border: #30363d; --summary-item-label-color: #8b949e; --pd-profit-border: #196c2e; --pd-loss-border: #7a1c22; --pd-warning-border: #6e5500; --status-badge-confirmed-bg: #0d2e1a; --status-badge-confirmed-color: #56d364; --status-badge-confirmed-border: #196c2e; --status-badge-pending-bg: #2d2500; --status-badge-pending-color: #e3b341; --status-badge-pending-border: #6e5500; --segment-btn-bg: #161b22; --segment-btn-fg: #8b949e; --segment-btn-hover-bg: #21262d; --segment-btn-hover-fg: #c9d1d9; --accordion-section-border: #30363d; --payment-summary-row-bg: #21262d; --payment-summary-row-border: #4da6c0; --form-header-row-bg: #2d333b; --form-subtotal-row-bg: #3d3520; --form-subtotal-label-color: #8b949e; --form-tfoot-bg: #1a1f26; --form-adjust-row-bg: #1a1f26; --form-locked-bg: #1a1f26; --form-locked-color: #6e7681; --form-lock-hover-bg: #21262d; --form-action-hover-bg: rgba(255, 255, 255, 0.08); --summary-card-bg: #1a1f26; --summary-card-border: #30363d; --summary-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); --summary-card-title-color: #4da6c0; --summary-card-title-border: #30363d; --summary-card-title-accent: #4da6c0; --summary-card-title-warning: #d29922; --summary-card-body-bg: #161b22; --detail-label-color: #6e7681; --detail-value-color: #c9d1d9; --summary-row-field-bg: #1a1f26; --summary-head-color: #6e7681; --summary-head-border: #30363d; --summary-table-expense-bg: #161b22; --summary-table-expense-rail: #30363d; --summary-table-expense-rail-hover: #4da6c0; --summary-table-label-color: #e6edf3; --summary-table-num-color: #c9d1d9; --summary-row-warn-bg: rgba(255, 255, 255, 0.04); --summary-row-hero-bg: linear-gradient(90deg, rgba(77, 166, 192, 0.14) 0%, rgba(77, 166, 192, 0.05) 100%); --summary-row-hero-border: #4da6c0; --summary-row-hero-color: #4da6c0; --summary-row-highlight-bg: linear-gradient(90deg, rgba(86, 211, 100, 0.12) 0%, rgba(86, 211, 100, 0.04) 100%); --summary-row-highlight-border: #56d364; --summary-row-highlight-color: #56d364; --customer-code-badge-bg: rgba(77, 166, 192, 0.15); --customer-code-badge-color: #4da6c0; --section-accent-border: #4da6c0; --section-header-site-color: #4da6c0; --section-toggle-border: #4da6c0; --section-toggle-color: #4da6c0; --section-toggle-active-bg: #1f6d84; --section-toggle-active-color: #e6edf3; --back-btn-bg: #1a2332; --back-btn-border: #30363d; --back-btn-color: #4da6c0; --back-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --back-btn-hover-bg: #1f3a4a; --back-btn-hover-border: #4da6c0; --back-btn-hover-shadow: 0 2px 6px rgba(77, 166, 192, 0.2); --search-secondary-color: #4da6c0; --search-secondary-border: #4da6c0; --search-secondary-hover-bg: rgba(77, 166, 192, 0.12); --form-label-color: #c9d1d9; --info-text-color: #6e7681; --modal-note-color: #8b949e; --modal-note-icon-color: #6e7681; --modal-loading-color: #8b949e; --modal-info-bg: linear-gradient(135deg, #0d1f38, #0a1a30); --modal-info-border: rgba(77, 166, 192, 0.35); --modal-info-color: #c9d1d9; --modal-info-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); --modal-info-rent-bg: linear-gradient(135deg, #1e1200, #241500); --modal-info-rent-border: rgba(255, 166, 87, 0.35); --modal-info-rent-shadow: 0 1px 4px rgba(255, 166, 87, 0.08); --modal-info-return-bg: linear-gradient(135deg, #1e1a00, #231f00); --modal-info-return-border: rgba(227, 179, 65, 0.35); --modal-info-return-shadow: 0 1px 4px rgba(227, 179, 65, 0.08); --modal-info-name-color: #e6edf3; --modal-info-name-icon: #4da6c0; --modal-info-status-color: #c9d1d9; --modal-info-number-color: #4da6c0; --modal-info-label-color: #8b949e; --modal-info-text-color: #8b949e; --modal-alert-warning-bg: #2d2500; --modal-alert-warning-border: #e3b341; --modal-alert-warning-color: #e3b341; --sort-changed-bg: #1f6d84; --sort-changed-text: #e6edf3; --sort-changed-border: #2d8a9e; --sort-changed-shadow: 0 0 0 2px rgba(77, 166, 192, 0.3); --sort-ghost-td-bg: #2d333b; --sort-handle-color: #4da6c0; --sort-handle-hover-color: #66bcd1; --toast-bg: #1e2329; --toast-border: rgba(255, 255, 255, 0.07); --toast-color: #e6edf3; --toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --toast-success-icon-bg: rgba(46, 160, 67, 0.18); --toast-success-icon-color: #56d364; --toast-error-icon-bg: rgba(218, 54, 51, 0.18); --toast-error-icon-color: #ff7b72; --toast-warning-icon-bg: rgba(158, 106, 3, 0.22); --toast-warning-icon-color: #e3b341; --toast-info-icon-bg: rgba(31, 111, 235, 0.2); --toast-info-icon-color: #79c0ff; --toast-close-hover-bg: rgba(255, 255, 255, 0.08); --tag-bulk-bar-bg: #21262d; --tag-bulk-bar-border: #4da6c0; --tag-bulk-bar-shadow: 0 -2px 20px rgba(0, 0, 0, 0.4); --tag-bulk-pill-bg: #4da6c0; --tag-bulk-btn-bg: #4da6c0; --tag-bulk-btn-border: #4da6c0; --tag-bulk-btn-hover-bg: #3a8fa8; --sip-panel-border: rgba(77, 166, 192, 0.25); --sip-title-color: #93c5fd; --sip-row-bg: rgba(22, 27, 34, 0.85); --sip-row-border: rgba(77, 166, 192, 0.35); --sip-row-hover-border: rgba(77, 166, 192, 0.55); --sip-row-hover-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --sip-code-color: #4da6c0; --sip-name-color: #e6edf3; --sip-supplier-color: #8b949e; --sip-field-color: #8b949e; --sip-field-input-bg: #0d1117; --sip-field-input-border: rgba(255, 255, 255, 0.15); --sip-field-input-color: #e6edf3; --sip-remove-color: #4da6c0; --sip-remove-hover-bg: rgba(255, 123, 114, 0.2); --sip-remove-hover-color: #ff7b72; --sip-clear-color: #ff7b72; --sip-clear-hover-bg: rgba(255, 123, 114, 0.15); --sip-clear-hover-border: rgba(255, 123, 114, 0.35); --sales-kpi-tile-bg: var(--gray-light); --sales-kpi-total-border: #4da6c0; --sales-kpi-total-bg: rgba(77, 166, 192, 0.12); --sales-kpi-total-value: #4da6c0; --sales-kpi-construction-border: #56d364; --sales-kpi-construction-bg: rgba(86, 211, 100, 0.1); --sales-kpi-construction-value: #56d364; --sales-kpi-lease-border: #4da6c0; --sales-kpi-lease-bg: rgba(77, 166, 192, 0.1); --sales-kpi-lease-value: #4da6c0; --sales-kpi-meta-border: var(--gray); --sales-kpi-meta-bg: var(--gray-lightest); --theme-picker-dropdown-bg: #1c2128; --theme-picker-dropdown-border: #30363d; --theme-picker-dropdown-accent: #4da6c0; --theme-picker-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.7); --theme-picker-label-color: #6e7681; } /* ────────────────────────────────────── Phase 4: component dark overrides removed. Components use semantic tokens; dark values live in the [data-theme="dark"] block above. Exception: .theme-picker* UI (below) may keep chrome rules in this file. List td transparency is SSOT in list/tables.css (.common.data-list-table tbody td). ────────────────────────────────────── */ /* ===================================================== * テーマ切替 UI スタイル * ===================================================== */ .theme-picker { position: relative; flex-shrink: 0; } /* ===================================================== * @media print — ダークモードを印刷時に無効化 * 印刷時は常にライトモードの値を適用 * ===================================================== */ @media print { [data-theme="dark"] { --main: #29809c; --main-dark: #1e5f73; --main-light: #d6edf3; --bg-body: #ffffff; --bg-card: #ffffff; --bg-sidebar: #ffffff; --text-body: #555555; --text-muted: #999999; --white: #ffffff; --gray: #707070; --gray-medium: #dddddd; --gray-dark: #4b5160; --gray-darkest: #222222; --gray-ultra-light: #f8f9fa; --border-color: #cccccc; --table-header-bg: #f0f0f0; --alert-success-bg: #d4edda; --alert-success-text: #155724; --alert-warning-bg: #fff3cd; --alert-warning-text: #856404; --alert-danger-bg: #f8d7da; --alert-danger-text: #721c24; --alert-info-bg: #d1ecf1; --alert-info-text: #0c5460; --color-success: #28a745; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #17a2b8; } } /* ===================================================== * ユーザー壁紙（--wallpaper-image は main.php が #user-theme :root に注入） * ===================================================== */ /* オーバーレイは html に一本化（ページ全体で均一に見せる） */ html.has-wallpaper { background-image: linear-gradient(rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.78)), var(--wallpaper-image); background-size: cover; background-attachment: fixed; background-position: center; } html.has-wallpaper body { background-color: transparent !important; } html.has-wallpaper[data-theme="dark"] { background-image: linear-gradient(rgba(22, 27, 34, 0.8), rgba(22, 27, 34, 0.8)), var(--wallpaper-image); } html.has-wallpaper[data-theme="dark"] body { background-color: transparent !important; }