/* ============================================ ユーザーごとの色設定（CSS変数） body の data-user 属性で色セットを切り替える仕組み。例：なら Aさんの色（ミント）に切り替わる。 ============================================ */ /* デフォルト（Ririka＝ピンク） */ :root, body[data-user="ririka"] { --accent: #ff9aa2; --accent-light: #ffd6da; --accent-bg: #fff0f3; --bg-gradient: linear-gradient(135deg, #fff5f7 0%, #fef3e7 100%); --shadow-color: rgba(255, 154, 162, 0.15); } /* Aさん（ミント） */ body[data-user="a"] { --accent: #5eead4; --accent-light: #99f6e4; --accent-bg: #f0fdfa; --bg-gradient: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%); --shadow-color: rgba(94, 234, 212, 0.18); } /* Bさん（ラベンダー） */ body[data-user="b"] { --accent: #a78bfa; --accent-light: #c4b5fd; --accent-bg: #f5f3ff; --bg-gradient: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); --shadow-color: rgba(167, 139, 250, 0.18); } /* モック（イエロー・デモ用） */ body[data-user="mock"] { --accent: #fbbf24; --accent-light: #fde68a; --accent-bg: #fffbeb; --bg-gradient: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); --shadow-color: rgba(251, 191, 36, 0.18); } /* 共通カラー（ユーザーが変わっても同じ） */ :root { --text-main: #5a4a3f; --text-sub: #8b7e72; --bg-card: #ffffff; } /* ============================================ 全体の基本スタイル ============================================ */ body { font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", -apple-system, sans-serif; max-width: 960px; margin: 0 auto; padding: 24px; color: var(--text-main); background: var(--bg-gradient); min-height: 100vh; line-height: 1.7; } /* ============================================ トップバー：ユーザー切替を独立した空間に（白枠の上、右寄せ） ============================================ */ .topbar { display: flex; justify-content: flex-end; margin-bottom: 12px; } .user-dropdown { position: relative; } .user-dropdown-trigger { background: var(--bg-card); border: 2px solid var(--accent); border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; font-size: 14px; color: var(--accent); display: flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: 0 2px 8px var(--shadow-color); transition: all 0.2s; } .user-dropdown-trigger:hover { transform: translateY(-1px); } /* 丸枠アイコン（あとで画像に差し替え可） */ .user-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .user-icon-mini { width: 24px; height: 24px; border-radius: 50%; color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .arrow { font-size: 10px; margin-left: 2px; } /* ドロップダウンメニュー */ .user-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-card); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); padding: 8px; list-style: none; margin: 0; min-width: 160px; display: none; /* 初期は非表示 */ z-index: 10; } /* .open クラスが付いたら表示 */ .user-dropdown.open .user-dropdown-menu { display: block; } .user-option { padding: 8px 12px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-main); transition: background 0.15s; } .user-option:hover { background: #f9f5f1; } .user-option.active { background: var(--accent-bg); font-weight: 600; } /* ============================================ ヘッダー（週ナビ・タブ） ============================================ */ header { background: var(--bg-card); padding: 20px 28px; border-radius: 20px; box-shadow: 0 4px 20px var(--shadow-color); margin-bottom: 20px; } /* 📅 週ナビゲーション */ .week-nav-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .week-nav-row h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--text-main); text-align: center; flex: 1; } .week-arrow { background: var(--bg-card); border: 2px solid var(--accent-light); padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text-main); transition: all 0.2s; white-space: nowrap; } .week-arrow:hover { background: var(--accent-light); border-color: var(--accent); } /* 「今週へ戻る」リンクボタン（過去/未来週でのみ表示） */ .today-link-row { display: none; justify-content: center; margin-bottom: 12px; } body.not-current-week .today-link-row { display: flex; } .today-link { background: transparent; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; transition: background 0.15s; } .today-link:hover { background: var(--accent-bg); } /* 🔒 過去週バナー */ .readonly-banner { display: none; background: #fff7ed; border-left: 4px solid #fbbf24; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; color: #92400e; font-size: 13px; font-weight: 500; } body.readonly .readonly-banner { display: block; } /* 📝 振り返り促進バナー（月〜火曜12時に表示） */ .review-banner { display: none; background: var(--accent-bg); border-left: 4px solid var(--accent); padding: 14px 18px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; box-shadow: 0 2px 8px var(--shadow-color); } body.review-window-open .review-banner { display: flex; } .review-banner-msg { font-size: 14px; font-weight: 600; color: var(--text-main); } .review-banner-btn { background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; } .review-banner-btn:hover { transform: translateY(-1px); } /* 振り返り画面の状態バナー */ .review-status-banner { display: none; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; font-weight: 500; } .review-status-banner.show { display: block; } .review-status-banner.editable { background: var(--accent-bg); border-left: 4px solid var(--accent); color: var(--text-main); } .review-status-banner.locked { background: #f3f4f6; border-left: 4px solid #9ca3af; color: #4b5563; } /* サブタブ（振り返り ↔ 今週のタスク）— アクティブ時のみ表示 */ .review-sub-tabs { display: none; gap: 8px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--accent-light); } #review-panel.active-review .review-sub-tabs { display: flex; } .review-sub-tab { background: var(--bg-card); border: 2px solid var(--accent-light); padding: 8px 18px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-main); transition: all 0.2s; } .review-sub-tab:hover { background: var(--accent-bg); } .review-sub-tab.active { background: var(--accent); color: white; border-color: var(--accent); } /* サブタブの内容：active のものだけ表示 */ .review-sub-content { display: none; } .review-sub-content.active { display: block; } /* 提出済み・ロック時はサブタブを隠し、振り返り内容のみ常時表示 */ #review-panel:not(.active-review) #review-content { display: block; } #review-panel:not(.active-review) #next-tasks-content { display: none; } /* 振り返り提出済み・期間外の見た目（入力不可） */ #review-panel.review-locked textarea, #review-panel.review-locked select, #review-panel.review-locked .star { pointer-events: none; opacity: 0.7; cursor: default; } #review-panel.review-locked textarea { background: #f9fafb; } /* 提出ボタンはアクティブな振り返りモードでだけ表示 */ #save-review-btn { display: none; } #review-panel.active-review #save-review-btn { display: block; } /* 今週のタスク入力（サブタブ内） */ .next-week-input-inner { padding: 16px; background: var(--accent-bg); border-radius: 16px; border: 2px dashed var(--accent); } .next-week-input-inner h3 { font-size: 15px; color: var(--accent); margin: 0 0 6px; } .next-week-input-inner .hint { font-size: 12px; color: var(--text-sub); margin: 0 0 14px; } .next-week-form { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } #next-week-task-input { flex: 1; border: 1px solid var(--accent-light); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-family: inherit; background: white; color: var(--text-main); } #next-week-task-input:focus { outline: none; border-color: var(--accent); } #next-week-add-btn { background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; } .next-week-task-list { list-style: none; padding: 0; margin: 0; } .next-week-task-list li { padding: 8px 12px; font-size: 13px; color: var(--text-main); background: white; border-radius: 8px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } /* 読み取り専用時の見た目 */ body.readonly #add-task-btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; } body.readonly .task-list input[type="checkbox"] { cursor: not-allowed; } body.readonly .memo-btn { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* 📑 タブ */ .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--accent-light); } .tab { background: transparent; border: none; padding: 12px 24px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-sub); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.2s; } .tab:hover { color: var(--accent); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* ============================================ パネル（タスク/振り返り）— .active のみ表示 ============================================ */ .panel { background: var(--bg-card); padding: 24px 28px; border-radius: 20px; box-shadow: 0 4px 20px var(--shadow-color); margin-bottom: 20px; display: none; /* デフォルト非表示 */ } .panel.active { display: block; /* .active のみ表示 */ } /* ============================================ タスクパネル ============================================ */ .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .panel-header h2 { margin: 0; } h2 { font-size: 15px; font-weight: 600; color: var(--accent); margin: 0 0 12px; } /* タスクリスト */ .task-list { list-style: none; padding: 0; margin: 0 0 12px; } .task-list li { padding: 12px 16px; margin-bottom: 8px; border-radius: 12px; background: #fff9fa; display: flex; flex-wrap: wrap; /* メモエリアが2段目に折り返せるように */ align-items: center; gap: 14px; transition: all 0.2s; } /* 追加タスク・前週繰り越しの小アイコン */ .additional-icon, .carried-over-icon { font-size: 14px; } /* タスクリスト内のグループ見出し（前週から / 予定 / 追加） */ .task-list .group-header { background: transparent !important; padding: 12px 4px 4px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-sub); border-bottom: 1px dashed var(--accent-light); border-radius: 0; cursor: default; pointer-events: none; /* ホバー反応・クリック無効 */ } .task-list .group-header:hover { background: transparent !important; } /* 1番目のグループ見出しは上の padding を減らす */ .task-list .group-header:first-child { padding-top: 0; } /* ============================================ 📊 サマリー（タスクパネル下部） ============================================ */ .summary { margin-top: 24px; padding-top: 16px; border-top: 2px dashed var(--accent-light); } .summary h3 { font-size: 14px; color: var(--accent); margin: 0 0 12px; font-weight: 600; } /* プログレスバー */ .progress-bar { width: 100%; height: 10px; background: var(--accent-bg); border-radius: 999px; overflow: hidden; margin-bottom: 14px; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent) 0%, #ffb88c 100%); border-radius: 999px; transition: width 0.4s ease; } .summary-stats { display: flex; gap: 12px; } .stat { flex: 1; background: var(--accent-bg); padding: 12px; border-radius: 12px; text-align: center; } .stat-label { font-size: 11px; color: var(--text-sub); display: block; } .stat-value { font-size: 18px; font-weight: 700; color: var(--accent); display: block; margin-top: 4px; } /* 空状態（タスクなし） */ #undone-empty { display: none; text-align: center; padding: 24px 16px; color: var(--text-sub); font-size: 13px; background: var(--accent-bg); border-radius: 12px; margin-bottom: 12px; } #task-panel.no-undone #undone-empty { display: block; } /* メモエリア（💬 ボタンで展開） */ .memo-area { display: none; flex-basis: 100%; /* 親の幅いっぱい */ margin-top: 4px; } .task-list li.memo-open .memo-area { display: block; } .memo-area textarea { width: 100%; min-height: 50px; border: 1px solid var(--accent-light); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text-main); background: var(--bg-card); resize: vertical; box-sizing: border-box; } .memo-area textarea:focus { outline: none; border-color: var(--accent); } /* メモがあるときの 💬 ボタン */ .memo-btn.has-memo { opacity: 1; background: var(--accent-bg); border-radius: 50%; width: 28px; height: 28px; } .task-list li:hover { background: #ffeef0; } .task-title { flex: 1; } input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--accent); } /* 完了済みの見た目 */ .task-list li:has(input:checked) { background: var(--accent-bg); } .task-list li:has(input:checked) .task-title { color: #c9a8a8; text-decoration: line-through; } /* メモボタン */ .memo-btn { background: transparent; border: none; cursor: pointer; font-size: 16px; opacity: 0.6; padding: 4px; transition: opacity 0.2s; } .memo-btn:hover { opacity: 1; } /* ピンクの区切り線 */ .divider { height: 4px; background: linear-gradient(90deg, var(--accent) 0%, #ffb88c 100%); border-radius: 999px; margin: 24px 0 20px; } /* ============================================ タスク追加フォーム（+ ボタンで表示する入力欄） ============================================ */ .add-task-form { display: none; /* 初期は非表示 */ gap: 8px; align-items: center; background: #fff9fa; padding: 12px; border-radius: 12px; border: 2px dashed var(--accent-light); margin-bottom: 12px; } /* .active が付いたら表示（横並び） */ .add-task-form.active { display: flex; } #new-task-input { flex: 1; border: 1px solid var(--accent-light); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-family: inherit; color: var(--text-main); background: var(--bg-card); } #new-task-input:focus { outline: none; border-color: var(--accent); } #confirm-add-btn { background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; } #confirm-add-btn:hover { background: #ff7f88; } #cancel-add-btn { background: transparent; border: none; cursor: pointer; font-size: 16px; color: var(--text-sub); padding: 4px 8px; } #cancel-add-btn:hover { color: var(--text-main); } /* タスク追加ボタン */ #add-task-btn { background: linear-gradient(135deg, var(--accent) 0%, #ffb88c 100%); color: white; border: none; padding: 10px 20px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; box-shadow: 0 2px 8px var(--shadow-color); } #add-task-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--shadow-color); } /* ============================================ 振り返りパネル ============================================ */ .review-block { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #f5e5e8; } .review-block:last-of-type { border-bottom: none; } .review-task { background: #fff9fa; padding: 16px; border-radius: 12px; margin-bottom: 12px; } .task-line { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } /* ⭐ ★評価 UI（クリックで設定） */ .star-rating { display: inline-flex; gap: 2px; margin-left: auto; user-select: none; } .star { color: var(--accent); font-size: 20px; cursor: pointer; transition: transform 0.1s; line-height: 1; } .star:hover { transform: scale(1.2); } /* 振り返り画面の空状態（タスクなし） */ .empty-state { display: none; text-align: center; padding: 32px 16px; color: var(--text-sub); font-size: 14px; } #review-panel.no-tasks .review-block { display: none; } #review-panel.no-tasks .empty-state { display: block; } /* タスクなしのブロックは非表示 */ .review-block.empty { display: none; } .status-select { border: 2px solid var(--accent-light); border-radius: 8px; padding: 4px 8px; font-size: 13px; background: var(--bg-card); color: var(--text-main); cursor: pointer; } textarea { width: 100%; border: 1px solid var(--accent-light); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; color: var(--text-main); background: var(--bg-card); resize: vertical; margin-bottom: 8px; box-sizing: border-box; } textarea:focus { outline: none; border-color: var(--accent); } /* 振り返りを保存ボタン */ #save-review-btn { background: linear-gradient(135deg, var(--accent) 0%, #ffb88c 100%); color: white; border: none; padding: 12px 32px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 600; box-shadow: 0 2px 8px var(--shadow-color); display: block; margin: 24px auto 0; } #save-review-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--shadow-color); } /* ============================================ ✨ アニメーション ============================================ */ /* パネル切替時のフェードイン */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .panel.active { animation: fadeInUp 0.25s ease-out; } /* 新規タスク追加時のアニメーション */ @keyframes taskAppear { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .task-list li { animation: taskAppear 0.2s ease-out; } /* ============================================ ♿ アクセシビリティ（キーボード操作時のフォーカス） ============================================ */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================ 📱 モバイル対応 ============================================ */ @media (max-width: 600px) { body { padding: 16px 12px; } header, .panel { padding: 16px; } .week-nav-row { flex-wrap: wrap; gap: 8px; } .week-nav-row h1 { font-size: 17px; width: 100%; order: -1; } .week-arrow { padding: 6px 12px; font-size: 12px; } /* ユーザードロップダウン：少し小さく */ .user-dropdown-trigger { font-size: 13px; } .user-icon { width: 28px; height: 28px; font-size: 13px; } /* タブ：詰め気味に */ .tab { padding: 10px 14px; font-size: 13px; } /* サマリー：縦並びに */ .summary-stats { flex-direction: column; gap: 8px; } .stat { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 10px 14px; } .stat-label { margin-bottom: 0; } .stat-value { margin-top: 0; font-size: 15px; } /* タスクの幅対策（長いタイトルが折り返せるように） */ .task-title { min-width: 0; word-break: break-word; } /* タスク追加フォーム：縦並びに */ .add-task-form { flex-wrap: wrap; } #new-task-input { width: 100%; box-sizing: border-box; } }