Spaces:
Sleeping
Sleeping
| .fc-app { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 16px 20px 60px; | |
| } | |
| /* ── Header ─────────────────────────────────────────────────────────────── */ | |
| .fc-header { | |
| background: linear-gradient(135deg, var(--fc-blue-dark) 0%, var(--fc-blue) 55%, var(--fc-blue-light) 100%); | |
| border-radius: 16px; | |
| padding: 18px 24px 16px; | |
| box-shadow: 0 4px 14px rgba(0, 35, 149, 0.22); | |
| } | |
| .fc-header-text h1 { | |
| color: #fff; | |
| font-size: 2.1rem; | |
| font-weight: 700; | |
| margin: 0; | |
| } | |
| .fc-header-text p { | |
| color: #d6e0ff; | |
| font-size: 0.92rem; | |
| margin: 4px 0 0; | |
| } | |
| .fc-tricolor-bar { | |
| height: 5px; | |
| border-radius: 0 0 6px 6px; | |
| margin: 0 0 18px; | |
| background: linear-gradient(90deg, var(--fc-blue) 0 33.33%, #ffffff 33.33% 66.66%, var(--fc-red) 66.66% 100%); | |
| } | |
| /* ── Tab nav ────────────────────────────────────────────────────────────── */ | |
| .fc-tabs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| border-bottom: 1px solid var(--fc-border); | |
| margin-bottom: 18px; | |
| } | |
| .fc-tab { | |
| background: none; | |
| border: none; | |
| border-bottom: 3px solid transparent; | |
| padding: 10px 16px; | |
| font-size: 0.95rem; | |
| letter-spacing: 0.01em; | |
| color: var(--fc-muted); | |
| cursor: pointer; | |
| transition: color 0.12s, border-color 0.12s; | |
| } | |
| .fc-tab:hover { | |
| color: var(--fc-blue); | |
| } | |
| .fc-tab-active { | |
| color: var(--fc-blue); | |
| border-bottom-color: var(--fc-red); | |
| font-weight: 700; | |
| } | |
| /* ── Shared building blocks ────────────────────────────────────────────── */ | |
| .fc-card { | |
| background: #fff; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| box-shadow: var(--fc-card-shadow); | |
| } | |
| .fc-muted { | |
| color: var(--fc-muted); | |
| } | |
| .fc-error { | |
| color: var(--fc-red); | |
| } | |
| .fc-pill { | |
| display: inline-block; | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| color: var(--fc-blue); | |
| background: rgba(0, 35, 149, 0.08); | |
| border-radius: 999px; | |
| padding: 2px 10px; | |
| } | |
| /* ── Lessons grid ───────────────────────────────────────────────────────── */ | |
| .fc-lesson-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); | |
| gap: 14px; | |
| } | |
| .fc-lesson-card { | |
| text-align: left; | |
| background: #fff; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 12px; | |
| padding: 14px 16px; | |
| cursor: pointer; | |
| font-family: inherit; | |
| box-shadow: var(--fc-card-shadow); | |
| transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .fc-lesson-card:hover { | |
| border-color: var(--fc-blue); | |
| box-shadow: 0 2px 10px rgba(0, 35, 149, 0.12); | |
| transform: translateY(-1px); | |
| } | |
| .fc-lesson-card-title { | |
| font-weight: 600; | |
| font-size: 0.96rem; | |
| color: var(--fc-ink); | |
| } | |
| .fc-lesson-card-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.78rem; | |
| color: var(--fc-muted); | |
| } | |
| .fc-lesson-card-preview { | |
| font-size: 0.82rem; | |
| color: #999; | |
| line-height: 1.4; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| } | |
| /* ── Form controls ──────────────────────────────────────────────────────── */ | |
| .fc-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| margin-bottom: 12px; | |
| } | |
| .fc-input, | |
| .fc-textarea { | |
| width: 100%; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| font-size: 0.95rem; | |
| background: #fff; | |
| color: var(--fc-ink); | |
| outline: none; | |
| transition: border-color 0.12s; | |
| } | |
| .fc-input { | |
| flex: 1 1 160px; | |
| } | |
| .fc-input:focus, | |
| .fc-textarea:focus { | |
| border-color: var(--fc-blue); | |
| } | |
| .fc-title-input { | |
| flex: 1; | |
| } | |
| .fc-textarea { | |
| resize: vertical; | |
| font-family: inherit; | |
| line-height: 1.5; | |
| margin-bottom: 12px; | |
| } | |
| .fc-btn { | |
| border: 1px solid var(--fc-border); | |
| background: #fff; | |
| border-radius: 8px; | |
| padding: 9px 16px; | |
| font-size: 0.92rem; | |
| font-weight: 500; | |
| color: var(--fc-ink); | |
| cursor: pointer; | |
| transition: border-color 0.12s, background 0.12s, color 0.12s; | |
| } | |
| .fc-btn:hover { | |
| border-color: var(--fc-blue); | |
| } | |
| .fc-btn-primary { | |
| background: var(--fc-blue); | |
| border-color: var(--fc-blue); | |
| color: #fff; | |
| } | |
| .fc-btn-primary:hover { | |
| background: var(--fc-blue-dark); | |
| border-color: var(--fc-blue-dark); | |
| } | |
| .fc-btn-secondary { | |
| background: #f5f5f5; | |
| } | |
| .fc-btn-danger-outline { | |
| color: var(--fc-red); | |
| border-color: rgba(237, 41, 57, 0.4); | |
| } | |
| .fc-btn-danger { | |
| background: var(--fc-red); | |
| border-color: var(--fc-red); | |
| color: #fff; | |
| } | |
| .fc-checkbox { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.9rem; | |
| color: var(--fc-ink); | |
| cursor: pointer; | |
| } | |
| .fc-status { | |
| font-size: 0.9rem; | |
| margin-bottom: 12px; | |
| color: var(--fc-blue); | |
| } | |
| .fc-status.fc-error { | |
| color: var(--fc-red); | |
| } | |
| .fc-confirm-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| background: #fff8e1; | |
| border: 1px solid #ffe082; | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| margin-bottom: 12px; | |
| font-size: 0.9rem; | |
| } | |
| /* ── Notebook ───────────────────────────────────────────────────────────── */ | |
| .fc-notebook { | |
| display: grid; | |
| grid-template-columns: 1fr 280px; | |
| gap: 20px; | |
| align-items: start; | |
| } | |
| .fc-annotated { | |
| margin-top: 4px; | |
| } | |
| .fc-notebook-side h3 { | |
| margin: 0 0 10px; | |
| font-size: 1rem; | |
| color: var(--fc-ink); | |
| } | |
| .fc-word-card-text { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .fc-word-card-table { | |
| font-size: 0.92rem; | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| .fc-word-card-table td { | |
| padding: 3px 8px 3px 0; | |
| vertical-align: top; | |
| } | |
| .fc-word-card-table td:first-child { | |
| color: var(--fc-muted); | |
| white-space: nowrap; | |
| } | |
| .fc-grammar { | |
| font-style: italic; | |
| } | |
| @media (max-width: 760px) { | |
| .fc-notebook { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ── Lessons sub-tabs + groups ──────────────────────────────────────────── */ | |
| .fc-subtabs { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 14px; | |
| } | |
| .fc-subtab { | |
| background: #fff; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 999px; | |
| padding: 6px 14px; | |
| font-size: 0.85rem; | |
| color: var(--fc-muted); | |
| cursor: pointer; | |
| transition: border-color 0.12s, color 0.12s; | |
| } | |
| .fc-subtab:hover { | |
| color: var(--fc-blue); | |
| } | |
| .fc-subtab-active { | |
| color: #fff; | |
| background: var(--fc-blue); | |
| border-color: var(--fc-blue); | |
| font-weight: 600; | |
| } | |
| .fc-group { | |
| margin-bottom: 16px; | |
| } | |
| .fc-group-summary { | |
| cursor: pointer; | |
| padding: 6px 2px; | |
| font-weight: 700; | |
| font-size: 0.84rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--fc-blue); | |
| list-style: none; | |
| user-select: none; | |
| } | |
| .fc-group-summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .fc-group .fc-lesson-grid { | |
| margin-top: 8px; | |
| } | |
| /* ── Resources ──────────────────────────────────────────────────────────── */ | |
| .fc-resources { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .fc-resource-title { | |
| margin: 0 0 12px; | |
| font-size: 1.05rem; | |
| color: var(--fc-blue); | |
| font-weight: 700; | |
| } | |
| .fc-link-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 10px; | |
| } | |
| .fc-link-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 8px; | |
| text-decoration: none; | |
| color: inherit; | |
| background: var(--fc-paper); | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| .fc-link-card:hover { | |
| border-color: var(--fc-blue); | |
| box-shadow: 0 2px 8px rgba(0, 35, 149, 0.1); | |
| } | |
| .fc-link-favicon { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 4px; | |
| flex-shrink: 0; | |
| } | |
| .fc-link-text { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| .fc-link-label { | |
| font-weight: 600; | |
| font-size: 0.86rem; | |
| color: var(--fc-ink); | |
| line-height: 1.3; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .fc-link-domain { | |
| font-size: 0.74rem; | |
| color: var(--fc-muted); | |
| margin-top: 1px; | |
| } | |
| .fc-book-list { | |
| margin-top: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .fc-book-row { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| background: var(--fc-paper); | |
| } | |
| .fc-book-icon { | |
| font-size: 1.05rem; | |
| line-height: 1.5; | |
| } | |
| .fc-book-title { | |
| font-weight: 600; | |
| font-size: 0.86rem; | |
| color: var(--fc-ink); | |
| display: block; | |
| } | |
| .fc-book-meta { | |
| font-size: 0.76rem; | |
| color: var(--fc-muted); | |
| display: block; | |
| margin-top: 1px; | |
| text-transform: capitalize; | |
| } | |
| /* ── Exercises ──────────────────────────────────────────────────────────── */ | |
| .fc-visual-preview { | |
| max-width: 100%; | |
| max-height: 320px; | |
| border-radius: 10px; | |
| border: 1px solid var(--fc-border); | |
| } | |
| .fc-visual-summary { | |
| font-style: italic; | |
| } | |
| .fc-exercises-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 320px; | |
| gap: 20px; | |
| align-items: start; | |
| } | |
| .fc-tools-panel { | |
| position: sticky; | |
| top: 16px; | |
| } | |
| @media (max-width: 900px) { | |
| .fc-exercises-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .fc-tools-panel { | |
| position: static; | |
| } | |
| } | |
| .fc-mic-btn.fc-mic-listening { | |
| border-color: var(--fc-blue); | |
| color: var(--fc-blue); | |
| font-weight: 600; | |
| animation: fc-pulse 1.1s ease-in-out infinite; | |
| } | |
| @keyframes fc-pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.55; } | |
| } | |
| /* ── Coach Agent exercise set ──────────────────────────────────────────── */ | |
| .fc-coach-item { | |
| margin-top: 4px; | |
| } | |
| .fc-coach-progress { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| } | |
| .fc-coach-instruction { | |
| font-size: 0.9rem; | |
| color: var(--fc-muted); | |
| margin: 0 0 6px; | |
| } | |
| .fc-coach-content { | |
| font-size: 1.2rem; | |
| font-family: Georgia, serif; | |
| margin: 0 0 10px; | |
| } | |
| .fc-coach-content-en { | |
| font-style: italic; | |
| color: var(--fc-ink); | |
| } | |
| .fc-coach-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 10px; | |
| } | |
| .fc-coach-option { | |
| text-align: left; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 8px; | |
| padding: 10px 14px; | |
| background: #fff; | |
| font-size: 0.95rem; | |
| font-family: Georgia, serif; | |
| cursor: pointer; | |
| transition: border-color 0.12s, background 0.12s; | |
| } | |
| .fc-coach-option:hover { | |
| border-color: var(--fc-blue); | |
| } | |
| .fc-coach-option-selected { | |
| border-color: var(--fc-blue); | |
| background: rgba(0, 35, 149, 0.06); | |
| font-weight: 600; | |
| } | |
| .fc-coach-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 10px; | |
| } | |
| .fc-coach-chips-answer { | |
| min-height: 42px; | |
| padding: 8px; | |
| border: 1px dashed var(--fc-border); | |
| border-radius: 8px; | |
| align-items: center; | |
| } | |
| .fc-coach-chip { | |
| border: 1px solid var(--fc-border); | |
| border-radius: 999px; | |
| padding: 6px 14px; | |
| background: #fff; | |
| font-size: 0.95rem; | |
| font-family: Georgia, serif; | |
| cursor: pointer; | |
| transition: border-color 0.12s, background 0.12s; | |
| } | |
| .fc-coach-chip-chosen { | |
| border-color: var(--fc-blue); | |
| background: rgba(0, 35, 149, 0.06); | |
| } | |
| .fc-coach-feedback { | |
| border-left: 4px solid var(--fc-blue); | |
| background: rgba(0, 35, 149, 0.06); | |
| border-radius: 0 8px 8px 0; | |
| padding: 12px 16px; | |
| font-size: 0.92rem; | |
| margin-top: 4px; | |
| } | |
| .fc-coach-feedback-correct { | |
| border-left-color: #2e7d32; | |
| background: rgba(46, 125, 50, 0.08); | |
| } | |
| .fc-coach-feedback-title { | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| } | |
| .fc-coach-feedback-answer { | |
| margin-top: 6px; | |
| font-size: 0.85rem; | |
| color: var(--fc-muted); | |
| } | |
| /* ── Chat coach ─────────────────────────────────────────────────────────── */ | |
| .fc-chat-messages { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| max-height: 50vh; | |
| overflow-y: auto; | |
| padding: 4px 2px 12px; | |
| margin-bottom: 4px; | |
| } | |
| .fc-chat-msg { | |
| max-width: 80%; | |
| padding: 10px 14px; | |
| border-radius: 12px; | |
| font-size: 0.95rem; | |
| line-height: 1.45; | |
| white-space: pre-wrap; | |
| } | |
| .fc-chat-msg-assistant { | |
| align-self: flex-start; | |
| background: var(--fc-paper); | |
| border: 1px solid var(--fc-border); | |
| border-bottom-left-radius: 2px; | |
| } | |
| .fc-chat-msg-user { | |
| align-self: flex-end; | |
| background: var(--fc-blue); | |
| color: #fff; | |
| border-bottom-right-radius: 2px; | |
| } | |
| .fc-chat-speak-btn { | |
| display: block; | |
| margin-top: 6px; | |
| border: none; | |
| background: none; | |
| padding: 0; | |
| font-size: 0.78rem; | |
| color: var(--fc-blue); | |
| cursor: pointer; | |
| transition: color 0.12s; | |
| } | |
| .fc-chat-speak-btn:hover { | |
| color: var(--fc-blue-dark); | |
| text-decoration: underline; | |
| } | |
| /* ── Summary ────────────────────────────────────────────────────────────── */ | |
| .fc-summary { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| max-width: 640px; | |
| } | |
| .fc-summary-points { | |
| text-align: center; | |
| background: linear-gradient(135deg, var(--fc-blue-dark) 0%, var(--fc-blue) 55%, var(--fc-blue-light) 100%); | |
| color: #fff; | |
| box-shadow: 0 4px 14px rgba(0, 35, 149, 0.18); | |
| } | |
| .fc-summary-points-value { | |
| font-size: 2.4rem; | |
| font-weight: 700; | |
| } | |
| .fc-summary-points-label { | |
| font-size: 0.9rem; | |
| opacity: 0.85; | |
| margin-top: 2px; | |
| } | |
| .fc-summary-text p { | |
| margin: 0 0 10px; | |
| line-height: 1.6; | |
| } | |
| .fc-summary-text p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .fc-summary-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); | |
| gap: 12px; | |
| } | |
| .fc-stat-card { | |
| text-align: center; | |
| padding: 12px 10px; | |
| } | |
| .fc-stat-value { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| color: var(--fc-blue); | |
| } | |
| .fc-stat-label { | |
| font-size: 0.78rem; | |
| color: var(--fc-muted); | |
| margin-top: 2px; | |
| } | |
| .fc-summary-progress { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .fc-progress-header { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: var(--fc-ink); | |
| } | |
| .fc-progress-bar { | |
| height: 10px; | |
| border-radius: 999px; | |
| background: var(--fc-border); | |
| overflow: hidden; | |
| } | |
| .fc-progress-fill { | |
| height: 100%; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg, var(--fc-blue) 0%, var(--fc-blue-light) 100%); | |
| transition: width 0.3s ease; | |
| } | |
| .fc-summary-pills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .fc-summary-next { | |
| font-size: 0.92rem; | |
| color: var(--fc-ink); | |
| } | |
| /* ── Loading / empty states ────────────────────────────────────────────── */ | |
| .fc-empty { | |
| text-align: center; | |
| padding: 28px 20px; | |
| border: 1px dashed var(--fc-border); | |
| border-radius: 12px; | |
| background: #fff; | |
| color: var(--fc-muted); | |
| font-size: 0.92rem; | |
| line-height: 1.5; | |
| } | |
| .fc-spinner { | |
| display: inline-block; | |
| width: 14px; | |
| height: 14px; | |
| margin-right: 8px; | |
| vertical-align: -2px; | |
| border: 2px solid var(--fc-border); | |
| border-top-color: var(--fc-blue); | |
| border-radius: 50%; | |
| animation: fc-spin 0.7s linear infinite; | |
| } | |
| @keyframes fc-spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ── Tools: small inline icon button (speak) ───────────────────────────── */ | |
| .fc-btn-icon { | |
| padding: 2px 8px; | |
| font-size: 0.85rem; | |
| margin-left: 8px; | |
| vertical-align: middle; | |
| } | |
| /* ── Gender Checker ─────────────────────────────────────────────────────── */ | |
| .fc-gender-result { | |
| max-width: 480px; | |
| } | |
| .fc-gender-headword { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| } | |
| .fc-gender-pills { | |
| margin-bottom: 12px; | |
| } | |
| .fc-gender-example { | |
| margin-bottom: 10px; | |
| } | |
| .fc-gender-example-fr { | |
| font-size: 1.05rem; | |
| margin-bottom: 2px; | |
| } | |
| .fc-gender-pattern { | |
| font-size: 0.9rem; | |
| color: var(--fc-blue); | |
| background: rgba(0, 35, 149, 0.06); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| } | |
| /* ── Translator ─────────────────────────────────────────────────────────── */ | |
| .fc-translate-result { | |
| max-width: 560px; | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--fc-border); | |
| } | |
| .fc-translator-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 14px; | |
| } | |
| .fc-translator-widget { | |
| position: relative; | |
| } | |
| .fc-translator-remove { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| } | |
| .fc-translate-main { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .fc-translate-alts { | |
| font-size: 0.92rem; | |
| margin-bottom: 10px; | |
| } | |
| .fc-translate-example { | |
| font-size: 0.95rem; | |
| border-top: 1px solid var(--fc-border); | |
| padding-top: 10px; | |
| line-height: 1.6; | |
| } | |
| /* ── Mobile ─────────────────────────────────────────────────────────────── */ | |
| @media (max-width: 600px) { | |
| .fc-app { | |
| padding: 12px 12px 48px; | |
| } | |
| .fc-header { | |
| padding: 14px 16px 12px; | |
| border-radius: 12px; | |
| } | |
| .fc-header-text h1 { | |
| font-size: 1.5rem; | |
| } | |
| .fc-header-text p { | |
| font-size: 0.84rem; | |
| } | |
| .fc-tab { | |
| padding: 8px 10px; | |
| font-size: 0.85rem; | |
| } | |
| .fc-card { | |
| padding: 14px 16px; | |
| } | |
| .fc-chat-msg { | |
| max-width: 92%; | |
| } | |
| } | |
| /* ── Block editor (Notion-style notebook) ──────────────────────────────── */ | |
| .fc-block-editor { | |
| position: relative; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 8px; | |
| background: #fff; | |
| padding: 12px 14px; | |
| margin-bottom: 12px; | |
| min-height: 160px; | |
| } | |
| .fc-block { | |
| outline: none; | |
| border-radius: 4px; | |
| padding: 2px 4px; | |
| margin: 2px 0; | |
| line-height: 1.6; | |
| } | |
| .fc-block:focus { | |
| background: rgba(0, 35, 149, 0.03); | |
| } | |
| .fc-block[data-placeholder]:empty::before { | |
| content: attr(data-placeholder); | |
| color: var(--fc-muted); | |
| pointer-events: none; | |
| } | |
| h1.fc-block { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| margin-top: 14px; | |
| } | |
| h2.fc-block { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| margin-top: 12px; | |
| } | |
| h3.fc-block { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-top: 10px; | |
| } | |
| blockquote.fc-block { | |
| border-left: 3px solid var(--fc-blue); | |
| background: rgba(0, 35, 149, 0.05); | |
| border-radius: 0 8px 8px 0; | |
| padding: 8px 12px; | |
| font-style: italic; | |
| } | |
| hr.fc-block-divider { | |
| border: none; | |
| border-top: 1px solid var(--fc-border); | |
| margin: 14px 4px; | |
| } | |
| .fc-block-list { | |
| margin: 2px 0; | |
| padding-left: 26px; | |
| } | |
| li.fc-block { | |
| padding: 1px 4px; | |
| } | |
| /* ── Slash command menu ─────────────────────────────────────────────────── */ | |
| .fc-slash-menu { | |
| position: absolute; | |
| z-index: 20; | |
| min-width: 190px; | |
| max-height: 260px; | |
| overflow-y: auto; | |
| background: #fff; | |
| border: 1px solid var(--fc-border); | |
| border-radius: 8px; | |
| box-shadow: var(--fc-card-shadow); | |
| padding: 4px; | |
| } | |
| .fc-slash-menu-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 6px 10px; | |
| border-radius: 6px; | |
| font-size: 0.88rem; | |
| color: var(--fc-ink); | |
| cursor: pointer; | |
| } | |
| .fc-slash-menu-item:hover, | |
| .fc-slash-menu-item-active { | |
| background: rgba(0, 35, 149, 0.06); | |
| color: var(--fc-blue); | |
| } | |
| .fc-slash-menu-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| font-weight: 700; | |
| font-size: 0.8rem; | |
| color: var(--fc-muted); | |
| } | |
| /* ── Floating selection toolbar ─────────────────────────────────────────── */ | |
| .fc-floating-toolbar { | |
| position: absolute; | |
| z-index: 20; | |
| display: flex; | |
| gap: 2px; | |
| background: var(--fc-ink); | |
| border-radius: 8px; | |
| padding: 4px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); | |
| transform: translateX(-50%); | |
| } | |
| .fc-floating-toolbar-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border: none; | |
| border-radius: 4px; | |
| background: none; | |
| color: #fff; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| } | |
| .fc-floating-toolbar-btn:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |