body { background: linear-gradient(135deg, #02050b 0%, #000205 100%); color: #ffffff; font-family: 'Noto Serif JP', serif; margin: 0; height: 100vh; box-sizing: border-box; overflow: hidden; /* 水面からゆっくり浮上する：描画完了まで暗闇に沈める */ opacity: 0; transition: opacity 0.75s ease-in; } /* 全描画が完了したら浮上 */ body.is-ready { opacity: 1; } .view-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s; opacity: 1; visibility: visible; pointer-events: auto; } .view-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); } /* * 【認証フラッシュ防止】 * インラインスクリプトが に .is-authed を付与した瞬間から * このルールが適用される。ブラウザが body を描画し始める前に * #view-login は display:none（存在しない扱い）になる。 */ html.is-authed #view-login { display: none !important; } html.is-authed #view-dashboard { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition: none !important; } /* --- Sukuロゴ --- */ .suku-logo-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; } .suku-logo-line { width: 100%; height: 1.5px; background: linear-gradient(135deg, #18448E 0%, #005EA7 100%); border-radius: 2px; animation: sukuBreathe 4s ease-in-out infinite; } @keyframes sukuBreathe { 0% { opacity: 0.4; } 50% { opacity: 1.0; } 100% { opacity: 0.4; } } .suku-logo-text { font-family: 'SUSE', sans-serif; font-weight: 300; font-size: 0.9rem; letter-spacing: 0.2em; color: #ffffff; line-height: 1; } /* --- ログイン「呼吸する」ボタン --- */ .login-dive-btn { width: 120px; text-align: center; justify-content: center; padding: 12px 0; cursor: pointer; color: #ffffff; font-family: 'Noto Serif JP', serif; font-size: 0.9rem; letter-spacing: 0.2em; border-radius: 8px; /* ロゴ下線と同じグラデーション＋呼吸アニメーション */ border: 1.5px solid transparent; background-image: linear-gradient(#08080e, #08080e), linear-gradient(135deg, #18448E 0%, #005EA7 100%); background-origin: border-box; background-clip: padding-box, border-box; animation: sukuBreathe 4s ease-in-out infinite; transition: filter 0.2s ease; } .login-dive-btn:hover { filter: brightness(1.4); cursor: pointer; } /* --- ログイン画面リーガルフッター --- */ .legal-link { font-family: 'SUSE', sans-serif; font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.18); text-decoration: none; transition: color 0.2s ease; } .legal-link:hover { color: rgba(255, 255, 255, 0.5); } /* --- 共通のラッパー --- */ .dashboard-wrapper { width: 100%; max-width: 650px; padding-top: 8vh; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } /* --- ヘッダーアクション --- */ .header-actions { position: absolute; top: 25px; display: flex; align-items: center; gap: 20px; z-index: 10; } .header-actions.left-actions { left: 30px; gap: 15px; } .header-actions.right-actions { right: 30px; transform: translateY(7px); } #view-editor .header-actions.right-actions { transform: translateY(5px); } .text-button { color: #aaaaaa; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.1em; transition: color 0.2s ease; cursor: pointer; display: flex; align-items: center; } .header-actions.right-actions .text-button { color: #9a9a9a; } .text-button:hover { color: #ffffff !important; } .delete-button:hover { color: #990011 !important; } /* --- トップ画面 固有スタイル --- */ .status-board-top { border: 1px solid rgba(0, 76, 255, 0.8); border-radius: 20px; padding: 45px 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; width: 100%; } .today-count-top { display: flex; justify-content: center; align-items: baseline; width: 100%; margin: 0 0 15px 0; } .text-label-top { font-size: 1.2rem; color: #aaaaaa; letter-spacing: 0.1em; margin-right: 15px; } .today-number-top { font-size: 3.8rem; font-weight: 700; color: #ffffff; margin: 0; line-height: 1; letter-spacing: 0.05em; } .unit-top { font-size: 1.2rem; color: #aaaaaa; letter-spacing: 0.1em; margin-left: 15px; } .remain-count-top { font-size: 1.2rem; color: #aaaaaa; margin: 0; letter-spacing: 0.1em; } /* テキストリスト共通 */ .project-list { display: flex; flex-direction: column; gap: 12px; width: calc(100% - 6px); margin: 0 auto; overflow-y: auto; max-height: 50vh; padding-bottom: 80px; } .project-list::-webkit-scrollbar { display: none; } .project-card { display: flex; justify-content: space-between; align-items: center; padding: 22px 30px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .project-card:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } .project-name { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.05em; color: #ffffff; } .project-progress { font-size: 1rem; color: #aaaaaa; } .project-progress span { color: #ffffff; font-weight: 700; font-size: 1.3rem; margin: 0 5px; } /* フォルダリスト 固有スタイル */ .folder-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 25px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s; cursor: pointer; } .folder-item:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } .folder-item.dragging { opacity: 0.4; transform: scale(0.98); box-shadow: none; } .folder-item.over { border-top: 2px solid #004cff; } .folder-info { display: flex; align-items: center; gap: 20px; flex-grow: 1; } .folder-color-line { width: 5px; height: 22px; border-radius: 3px; flex-shrink: 0; } .folder-drag-handle { cursor: grab; color: rgba(255, 255, 255, 0.2); padding: 5px; transition: color 0.2s ease; } .folder-drag-handle:hover { color: #ffffff; } .fab-button { position: fixed; bottom: 40px; right: 40px; width: 65px; height: 65px; border-radius: 50%; background-color: #004cff; color: #ffffff; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 20px rgba(0, 76, 255, 0.4); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: 100; } .fab-button:hover { transform: scale(1.05); box-shadow: 0 6px 25px rgba(0, 76, 255, 0.6); } /* --- 分析画面 固有スタイル --- */ .heatmap-section { width: 100%; margin-bottom: 25px; padding: 25px 30px; border-radius: 20px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); box-sizing: border-box; } .heatmap-title { font-size: 0.9rem; color: #aaaaaa; letter-spacing: 0.1em; margin: 0 0 15px 0; display: flex; justify-content: space-between; } .heatmap-total { color: #ffffff; font-weight: 700; } .heatmap-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; } .heatmap-column { display: flex; flex-direction: column; align-items: center; gap: 6px; } .heatmap-cell { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; background-color: rgba(255, 255, 255, 0.03); transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; cursor: pointer; position: relative; box-sizing: border-box; } .heatmap-cell:hover { transform: scale(1.1); box-shadow: 0 0 10px rgba(0, 76, 255, 0.5); z-index: 2; } .heatmap-cell.selected-cell { border: 2px solid #ffffff; transform: scale(1.15); box-shadow: 0 0 15px rgba(0, 76, 255, 0.8); z-index: 3; } .heatmap-cell::after { content: attr(data-count) "字"; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .heatmap-cell:hover::after { opacity: 1; } .heatmap-label { font-size: 0.65rem; color: #666666; letter-spacing: 0.05em; white-space: nowrap; } .level-1 { background-color: rgba(0, 76, 255, 0.3); } .level-2 { background-color: rgba(0, 76, 255, 0.6); } .level-3 { background-color: rgba(0, 76, 255, 0.9); box-shadow: 0 0 8px rgba(0, 76, 255, 0.4); } .level-4 { background-color: #5c8dff; box-shadow: 0 0 12px rgba(92, 141, 255, 0.8); } /* --- 設定画面 固有スタイル --- */ #view-settings { overflow-y: auto; justify-content: flex-start; } #view-settings::-webkit-scrollbar { display: none; } .settings-section { width: 100%; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 30px; box-sizing: border-box; display: flex; flex-direction: column; gap: 30px; margin-bottom: 20px; } .settings-title { font-size: 1.2rem; color: #ffffff; letter-spacing: 0.1em; margin: 0 0 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; } .settings-group { display: flex; flex-direction: column; gap: 15px; } .settings-label { font-size: 0.9rem; color: #aaaaaa; letter-spacing: 0.05em; } .settings-input { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; padding: 12px 15px; border-radius: 8px; font-family: 'Noto Serif JP', serif; font-size: 1rem; outline: none; transition: border-color 0.2s; } .settings-input:focus { border-color: #004cff; } .setting-row { display: flex; justify-content: space-between; align-items: center; } .time-input { width: 120px; } .app-info { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; color: #666666; text-align: center; gap: 8px; } .app-info a { color: #888888; text-decoration: none; transition: color 0.2s; } .app-info a:hover { color: #ffffff; } /* --- エディタ画面 --- */ .editor-wrapper { width: 100%; padding-top: 8vh; display: flex; justify-content: center; position: relative; } .editor-container { width: 100%; max-width: 800px; height: calc(100vh - 12vh); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.02); position: relative; } .session-timer { position: absolute; top: 20px; right: 30px; display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: #888888; letter-spacing: 0.05em; font-family: monospace; transition: color 0.3s ease; z-index: 10; } .session-input { background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #888888; font-family: monospace; font-size: 0.9rem; width: 45px; text-align: center; outline: none; transition: border-color 0.2s, color 0.2s; } .session-input::-webkit-outer-spin-button, .session-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .session-input[type=number] { -moz-appearance: textfield; appearance: textfield; } .session-input:focus { border-bottom-color: #004cff; color: #ffffff; } .session-btn { cursor: pointer; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; } .session-btn:hover { opacity: 1; transform: scale(1.1); } .timer-time { font-size: 1.1rem; color: #888888; transition: color 0.3s ease; } .timer-target { font-size: 0.85rem; color: #888888; } .doc-title-input { background: rgba(0, 0, 0, 0.2); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #ffffff; font-size: 1.1rem; letter-spacing: 0.05em; font-weight: 700; font-family: 'Noto Serif JP', serif; padding: 25px 30px 15px; outline: none; transition: background 0.2s ease; } .doc-title-input:focus { background: rgba(0, 0, 0, 0.4); } .editor-header { position: relative; display: flex; justify-content: center; gap: 30px; align-items: flex-end; padding: 40px 30px 15px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-shrink: 0; } .history-actions { position: absolute; right: 30px; bottom: 15px; display: flex; align-items: flex-end; gap: 15px; } .history-actions .action-icon { color: #ffffff; transition: opacity 0.1s ease; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; } .history-actions .action-icon:active { opacity: 1 !important; } .status-item { display: flex; align-items: baseline; } .value-wrapper { position: relative; display: inline-flex; justify-content: center; } .status-label { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 0.85rem; color: #aaaaaa; letter-spacing: 0.1em; white-space: nowrap; } .status-value { font-size: 2.2rem; font-weight: 700; color: #ffffff; margin: 0; letter-spacing: 0.05em; line-height: 1; border-bottom: 1px solid transparent; padding-bottom: 2px; } .target-input { border-bottom: 1px solid rgba(255, 255, 255, 0.3); min-width: 80px; min-height: 2.2rem; text-align: center; outline: none; transition: border-color 0.2s ease; cursor: text; display: inline-block; } .target-input:empty:before { content: "0"; color: rgba(255, 255, 255, 0.15); pointer-events: none; display: block; } .target-input:focus { border-bottom: 1px solid #004cff; } .target-input:focus:empty:before { content: ""; } .unit { font-size: 1rem; font-weight: 400; color: #aaaaaa; margin-left: 8px; } .progress-container { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; } .progress-bar { width: 0%; height: 100%; background-color: #004cff; box-shadow: 0 0 12px rgba(0, 76, 255, 0.8); transition: width 0.1s ease-out; } .editor-main { flex-grow: 1; display: flex; overflow: hidden; } .text-area { width: 100%; height: 100%; background-color: #CBFFD1; color: #1a1a1a; border: none; padding: 40px 50px; font-size: 1.2rem; line-height: 1.8; font-family: 'Noto Serif JP', serif; resize: none; outline: none; box-sizing: border-box; overflow-y: auto; scroll-behavior: smooth; } .text-area::-webkit-scrollbar { width: 8px; } .text-area::-webkit-scrollbar-track { background: transparent; } .text-area::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 4px; } .text-area::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); } .text-area::placeholder { color: rgba(26, 26, 26, 0.4); } /* --- モーダル (ポップアップ) 共通 --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 1; transition: opacity 0.3s ease; } .modal-hidden { opacity: 0; pointer-events: none; } .modal-content { background: linear-gradient(135deg, #02050b 0%, #000205 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; width: 90%; max-width: 500px; max-height: 80vh; padding: 30px; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .modal-title { margin: 0 0 20px 20px; font-size: 1.1rem; color: #ffffff; letter-spacing: 0.1em; text-align: left; } .modal-list { overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .modal-list::-webkit-scrollbar { display: none; } .modal-item { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 15px 20px; border-radius: 16px; transition: background 0.2s ease; } .modal-item.selected { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(255, 255, 255, 0.2); } .modal-item:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); } .modal-item-title { font-size: 1rem; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex-grow: 1; } .modal-action-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #ffffff; padding: 8px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; letter-spacing: 0.05em; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .modal-action-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .modal-close-btn { align-self: flex-end; margin-right: 20px; color: #aaaaaa; cursor: pointer; font-size: 0.9rem; transition: color 0.2s; letter-spacing: 0.1em; } .modal-close-btn:hover { color: #ffffff; } /* 色選択ドロップダウン用 */ .color-dropdown { position: absolute; top: 30px; right: 0; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 15px; display: flex; gap: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 1; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .color-dropdown.hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; } .color-circle { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s, border 0.2s, box-shadow 0.2s; } .color-circle:hover { transform: scale(1.1); } .color-circle.selected { border: 2px solid #ffffff; transform: scale(1.2); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .folder-check-icon { display: none; color: #ffffff; transform: translateY(6.5px); } .modal-item.selected .folder-check-icon { display: block; } #select-folder-list { margin-left: 2.5px; margin-top: 2.5px; } /* --- カスタム確認ダイアログ --- */ #confirm-modal .modal-content { max-width: 400px; gap: 0; } #confirm-modal-message { font-size: 1rem; color: #dddddd; line-height: 1.7; margin: 0 0 28px 0; letter-spacing: 0.03em; } .confirm-modal-buttons { display: flex; justify-content: flex-end; gap: 12px; } .confirm-cancel-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #aaaaaa; padding: 10px 22px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; font-family: 'Noto Serif JP', serif; letter-spacing: 0.05em; transition: color 0.2s, border-color 0.2s; } .confirm-cancel-btn:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); } .confirm-ok-btn { background: #990011; border: none; color: #ffffff; padding: 10px 22px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: 'Noto Serif JP', serif; letter-spacing: 0.05em; transition: opacity 0.2s, transform 0.2s; } .confirm-ok-btn:hover { opacity: 0.85; transform: scale(1.03); } /* プロジェクト専用背景（全体統一したため削除または維持・微調整） */ #view-folder-detail.is-project-mode { /* 全体背景と同じため背景指定は不要、ただし固有の明滅などは今後追加可能 */ } #view-folder-detail.is-project-mode .status-board-top { border-color: rgba(0, 76, 255, 0.15) !important; background: rgba(0, 76, 255, 0.01) !important; } #view-folder-detail.is-project-mode .project-card { background: linear-gradient(135deg, rgba(0, 76, 255, 0.02) 0%, rgba(0, 0, 0, 0) 100%); border-color: rgba(0, 76, 255, 0.05); } #view-folder-detail.is-project-mode .project-card:hover { background: linear-gradient(135deg, rgba(0, 76, 255, 0.05) 0%, rgba(0, 0, 0, 0) 100%); border-color: rgba(0, 76, 255, 0.1); } @keyframes waterPulse { 0% { opacity: 0.1; } 50% { opacity: 0.8; box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); } 100% { opacity: 0.1; } } #view-project-analytics { /* より深い底（分析領域）の表現としてさらに暗くする */ background: linear-gradient(135deg, #010205 0%, #000000 100%); } #view-project-analytics .dashboard-wrapper { overflow-y: auto; height: 100vh; } #view-project-analytics .dashboard-wrapper::-webkit-scrollbar { display: none; } .settings-input[type="date"] { padding: 10px 12px; border-radius: 8px; font-family: monospace; font-size: 0.95rem; cursor: pointer; } .settings-input[type="date"]::-webkit-calendar-picker-indicator { background-color: rgba(255, 255, 255, 0.1); padding: 6px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .settings-input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: rgba(255, 255, 255, 0.2); }