/* ============================================================ RAKUTEN PROFIT DASHBOARD — style.css Theme: "Editorial Warm" — Pattern D Fonts: Be Vietnam Pro (UI) + IBM Plex Mono (numbers) Toggle: / ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@300;400;500&display=swap'); /* ── Light mode tokens (default) ───────────────────────────── */ :root, [data-theme="light"] { --bg: #fffcf7; --bg-surface: #ffffff; --bg-elevated: #faf7f2; --bg-hover: #f5f0e8; --bg-active: #ede5d8; --bg-subtle: #fdf6ee; --border: #ede5d8; --border-strong: #ddd0be; --border-muted: #f0e8de; --text: #1a1310; --text-secondary:#6b5c4e; --text-muted: #b8a898; --text-dim: #d9cfc4; --accent: #c85a20; --accent-hover: #b34d18; --accent-light: #d4622a; --accent-subtle: rgba(200,90,32,0.08); --accent-glow: rgba(200,90,32,0.15); --green: #0f7a4e; --green-bg: rgba(15,122,78,0.08); --red: #b83232; --red-bg: rgba(184,50,50,0.08); --amber: #a05c10; --card-border-l: #c85a20; --card-border-l-profit: #0f7a4e; --header-bg: #ffffff; --header-border: #ede5d8; --shadow-card: 0 1px 3px rgba(26,19,16,0.06), 0 4px 12px rgba(26,19,16,0.04); --shadow-pop: 0 8px 28px rgba(26,19,16,0.12), 0 2px 8px rgba(26,19,16,0.06); --shadow-header: 0 1px 0 #ede5d8; --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='%23b8a898' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); --date-scheme: light; --toggle-track-bg: #ede5d8; --toggle-thumb-bg: #b8a898; } /* ── Dark mode tokens ───────────────────────────────────────── */ [data-theme="dark"] { --bg: #16110d; --bg-surface: #1e1812; --bg-elevated: #261f17; --bg-hover: #2f2619; --bg-active: #382d1e; --bg-subtle: #221a11; --border: rgba(255,220,180,0.08); --border-strong: rgba(255,220,180,0.14); --border-muted: rgba(255,220,180,0.05); --text: #f0e8de; --text-secondary:#a8907c; --text-muted: #5c4a38; --text-dim: #3a2e22; --accent: #e07040; --accent-hover: #e88050; --accent-light: #e88050; --accent-subtle: rgba(224,112,64,0.12); --accent-glow: rgba(224,112,64,0.20); --green: #4abe8c; --green-bg: rgba(74,190,140,0.12); --red: #e06060; --red-bg: rgba(224,96,96,0.12); --amber: #d4903a; --card-border-l: #e07040; --card-border-l-profit: #4abe8c; --header-bg: #1a1410; --header-border: rgba(255,220,180,0.10); --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3); --shadow-pop: 0 8px 28px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-header: 0 1px 0 rgba(255,220,180,0.10); --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='%235c4a38' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); --date-scheme: dark; --toggle-track-bg: var(--accent); --toggle-thumb-bg: #fff; } /* ── Shared ─────────────────────────────────────────────────── */ :root { --font-body: 'Be Vietnam Pro', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 12px; --radius-xl: 16px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 180ms; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 14px; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color 0.35s var(--ease), color 0.35s var(--ease); } /* Fine linen texture via repeating pattern */ body::before { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(160,120,80,0.018) 3px, rgba(160,120,80,0.018) 4px ); pointer-events: none; z-index: 0; } /* ── Container ──────────────────────────────────────────────── */ .container { max-width: 1440px; margin: 0 auto; padding: 28px 20px; /* 左右パディングを32px → 20pxに削減 */ position: relative; z-index: 1; } /* ── Header ─────────────────────────────────────────────────── */ .header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); box-shadow: var(--shadow-header); position: sticky; top: 0; z-index: 100; padding: 0 32px; display: flex; align-items: center; gap: 0; height: 58px; transition: background 0.35s var(--ease), border-color 0.35s var(--ease); } .header h1 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); white-space: nowrap; flex-shrink: 0; margin-right: 36px; /* Accent dot */ display: flex; align-items: center; gap: 10px; } .header h1::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .header nav { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; flex: 1; height: 100%; } .header nav::-webkit-scrollbar { display: none; } .header nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; padding: 0 16px; white-space: nowrap; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .header nav a:hover { color: var(--text-secondary); border-bottom-color: var(--border-strong); } .header nav a.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); } /* ── Theme Toggle ───────────────────────────────────────────── */ .theme-toggle { flex-shrink: 0; margin-left: auto; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 12px 5px 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.74rem; font-weight: 500; color: var(--text-muted); transition: all var(--dur) var(--ease); user-select: none; white-space: nowrap; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text-secondary); background: var(--bg-hover); } .theme-toggle .toggle-track { width: 30px; height: 17px; background: var(--toggle-track-bg); border-radius: 99px; position: relative; transition: background 0.25s var(--ease); flex-shrink: 0; } .theme-toggle .toggle-thumb { position: absolute; top: 2.5px; left: 2.5px; width: 12px; height: 12px; background: var(--toggle-thumb-bg); border-radius: 50%; transition: transform 0.25s var(--ease), background 0.25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } [data-theme="dark"] .theme-toggle .toggle-thumb { transform: translateX(13px); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { font-size: 13px; line-height: 1; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; } .toggle-label { font-size: 0.73rem; } /* ── Filter Panel ───────────────────────────────────────────── */ .filter-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; box-shadow: var(--shadow-card); transition: background 0.35s var(--ease), border-color 0.35s var(--ease); } .filter-panel label { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .filter-panel label:has(input[type="radio"]), .filter-panel label:has(input[type="checkbox"]) { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; text-transform: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); transition: all var(--dur) var(--ease); } .filter-panel label:has(input[type="radio"]):hover, .filter-panel label:has(input[type="checkbox"]):hover { border-color: var(--border-strong); color: var(--text); } .filter-panel label:has(input[type="radio"]:checked), .filter-panel label:has(input[type="checkbox"]:checked) { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); } .filter-panel input[type="radio"], .filter-panel input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; } .filter-panel select { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 6px 28px 6px 10px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 10px center; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .filter-panel select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); outline: none; } .filter-panel input[type="date"] { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-mono); font-size: 0.8rem; outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); color-scheme: var(--date-scheme); } .filter-panel input[type="date"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .filter-panel input[type="text"], .filter-panel input[type="search"] { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-body); font-size: 0.82rem; outline: none; min-width: 180px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .filter-panel input[type="text"]:focus, .filter-panel input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .filter-panel button { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 18px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .filter-panel button:hover { background: var(--accent-hover); transform: translateY(-1px); } .filter-panel button:active { transform: translateY(0); } .filter-panel .divider { width: 1px; height: 20px; background: var(--border-strong); flex-shrink: 0; } .filter-label { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } /* ── Summary Cards ──────────────────────────────────────────── */ .summary-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; } .card { background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--card-border-l); border-radius: var(--radius-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background 0.35s var(--ease); position: relative; } .card:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); border-color: var(--border-strong); border-left-color: var(--card-border-l); } /* Profit/green cards get green left border */ .card:has(.value.profit) { border-left-color: var(--card-border-l-profit); } .card .label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; } .card .value { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 400; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; } .card .value.profit { color: var(--green); } .card .value.loss { color: var(--red); } /* ── Chart Container ────────────────────────────────────────── */ .chart-container { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 24px 18px; margin-bottom: 20px; box-shadow: var(--shadow-card); transition: background 0.35s var(--ease), border-color 0.35s var(--ease); } /* ── Table Wrapper ──────────────────────────────────────────── */ .table-wrapper { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 20px; transition: background 0.35s var(--ease), border-color 0.35s var(--ease); } .table-wrapper:has(table) { overflow-x: auto; } /* Scrollbar */ .table-wrapper::-webkit-scrollbar { height: 4px; } .table-wrapper::-webkit-scrollbar-track { background: var(--bg-elevated); } .table-wrapper::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; } table { width: 100%; border-collapse: collapse; font-size: 0.8rem; white-space: nowrap; } thead { position: sticky; top: 0; z-index: 2; } th { background: var(--bg-elevated); color: var(--text-muted); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--border-strong); white-space: nowrap; transition: background 0.35s var(--ease); } th:first-child { text-align: left; padding-left: 18px; } td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--border-muted); color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.79rem; font-weight: 300; letter-spacing: 0.01em; vertical-align: middle; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } td:first-child { text-align: left; padding-left: 18px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--text); letter-spacing: 0; } tbody tr { transition: background var(--dur) var(--ease); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--bg-hover); color: var(--text); } /* Total row */ .total-row td { background: var(--bg-active); color: var(--text); font-weight: 500; border-top: 1px solid var(--border-strong); border-bottom: none; } .total-row td:first-child { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* Profit / loss colors */ .profit-positive { color: var(--green) !important; } .profit-negative { color: var(--red) !important; } /* Product name cell */ td.product-name { text-align: left; font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.product-name a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } td.product-name a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-glow); } /* ── Editable cells ─────────────────────────────────────────── */ td.editable { cursor: pointer; position: relative; } td.editable:hover { background: var(--accent-subtle) !important; outline: 1px dashed var(--accent); outline-offset: -1px; } /* ── Pagination ─────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 18px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; text-decoration: none; color: var(--text-secondary); border: 1px solid var(--border); background: var(--bg-surface); transition: all var(--dur) var(--ease); } .pagination a:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); } .pagination .active, .pagination span.current { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Search bar ─────────────────────────────────────────────── */ input[type="search"], input[type="text"].search-input { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: 8px 14px; font-family: var(--font-body); font-size: 0.84rem; outline: none; width: 100%; max-width: 340px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } input[type="search"]:focus, input[type="text"].search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* ── Headings ───────────────────────────────────────────────── */ h2 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; margin-bottom: 14px; } h3 { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; } /* ── Page fade-in ───────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .container > * { animation: fadeUp 0.32s var(--ease) both; } .container > *:nth-child(1) { animation-delay: 0.04s; } .container > *:nth-child(2) { animation-delay: 0.09s; } .container > *:nth-child(3) { animation-delay: 0.14s; } .container > *:nth-child(4) { animation-delay: 0.19s; } .container > *:nth-child(5) { animation-delay: 0.24s; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1200px) { .summary-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .container { padding: 18px 12px; } .header { padding: 0 16px; height: 52px; } .summary-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; } .card .value { font-size: 1.2rem; } .filter-panel { padding: 12px 14px; gap: 6px 10px; } .toggle-label { display: none; } } @media (max-width: 600px) { .header { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; } .header h1 { margin-right: 0; } .header nav { width: 100%; order: 3; overflow-x: auto; } .theme-toggle { margin-left: auto; } .summary-cards { grid-template-columns: 1fr 1fr; } .card { padding: 14px 14px 12px; } .card .value { font-size: 1.1rem; } } /* ── Chart.js color reference ───────────────────────────────── */ /* LIGHT MODE: 売上 bar: rgba(200,90,32,0.70) border: #c85a20 利益 bar: rgba(15,122,78,0.65) border: #0f7a4e Grid: rgba(26,19,16,0.05) Ticks: #b8a898 Tooltip bg: #ffffff border: #ede5d8 DARK MODE: 売上 bar: rgba(224,112,64,0.72) border: #e07040 利益 bar: rgba(74,190,140,0.65) border: #4abe8c Grid: rgba(255,220,180,0.05) Ticks: #5c4a38 Tooltip bg: #1e1812 border: rgba(255,220,180,0.14) Read current mode in JS: const isDark = document.documentElement.dataset.theme === 'dark'; */ /* ── Orders Table Width Optimization ──────────────────────── */ /* 受注一覧テーブルの横幅最適化 */ /* 商品名列の幅最適化（既存スタイルを上書き） */ td.product-name { text-align: left; font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--text); width: 250px; /* 幅を明示的に指定 */ max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* テーブル内の数値セルの最適化 */ table td:nth-child(8), /* 単価 */ table td:nth-child(9), /* 個数 */ table td:nth-child(10), /* 売上 */ table td:nth-child(11), /* 原価 */ table td:nth-child(12), /* 送料 */ table td:nth-child(13), /* 利益 */ table td:nth-child(14) /* 配送 */ { padding: 10px 8px; /* 左右パディングを14px → 8pxに削減 */ } /* 注文番号・ステータス・管理系の列幅最適化 */ table td:nth-child(2), /* 注文番号 */ table td:nth-child(3), /* ステータス */ table td:nth-child(5), /* 親管理 */ table td:nth-child(6) /* 管理No */ { padding: 10px 6px; /* さらに詰める */ }