/* Ribbon (P7.A) — Office-familiar toolbar rendered by ribbon.js. Desktop-only (≥900px); mobile keeps the existing toolbars untouched. Var scoping: SKIN vars live on .ribbon-skin-* and APP-accent vars on .ribbon-app-*. The host carries both classes; so do the detached popups (menus/palettes/panels appended to ), which is why every var resolves for them too. Components read only these --rb-* vars — never raw hex — so a skin flip changes one block. */ /* ── skin palette (office only — theme picker removed 2026-07-12) ── */ .ribbon-skin-office { --rb-bg: #ffffff; --rb-bg-alt: #f5f5f5; --rb-hover: #e6e6e6; --rb-active-bg: #dcdcdc; --rb-border: #e2e2e2; --rb-text: #303030; --rb-text-muted: #6b6b6b; --rb-tab-active: #ffffff; } /* ── app accent (Office switches ribbon accent per document type) ── */ .ribbon-app-sheet { --rb-accent: #107C41; } /* Excel green */ .ribbon-app-doc { --rb-accent: #185ABD; } /* Word blue */ .ribbon-app-slide { --rb-accent: #C43E1C; } /* PowerPoint orange */ /* ── host (docked in #ribbon-slot, full width above both panels) ── */ #ribbon-slot { flex: 0 0 auto; } #ribbon-host.ribbon { position: relative; z-index: 30; background: var(--rb-bg); color: var(--rb-text); border-bottom: 1px solid var(--rb-border); font-family: var(--font-sans, system-ui, sans-serif); user-select: none; } /* ── tabs row ── */ /* Flat strip on the shared ribbon background (design mockup frontend/design): the active tab is an accent UNDERLINE (inset shadow, no layout shift, no fill, no weight jump); hover only tints the text. */ .ribbon-tabs { display: flex; align-items: stretch; height: 34px; padding: 0 12px; background: var(--rb-bg); border-bottom: 1px solid var(--rb-border); } .ribbon-tab { appearance: none; border: 0; background: transparent; padding: 0 14px; font-size: 13px; color: var(--rb-text-muted); cursor: pointer; } .ribbon-tab:hover { color: var(--rb-accent); } .ribbon-tab-active { color: var(--rb-accent); box-shadow: inset 0 -2px 0 var(--rb-accent); } .ribbon-tabs-right { margin-left: auto; display: flex; align-items: center; } /* ── body / groups ── */ .ribbon-body { display: flex; align-items: stretch; height: 96px; padding: 5px 14px 0; overflow: hidden; } .ribbon-group { display: flex; flex-direction: column; height: 92px; padding: 0 14px; flex: 0 0 auto; } .ribbon-group + .ribbon-group { border-left: 1px solid var(--rb-border); } /* Column-wrap needs a DEFINITE height for the wrap to break into 3 rows — a flex-derived height doesn't count in every engine (it collapses to one tall column). So the controls area is a fixed 72px: small controls flow into columns of three (the Office look); a sep or large button fills a column. */ .ribbon-group-controls { height: 76px; display: flex; flex-flow: column wrap; align-content: flex-start; gap: 2px 6px; min-width: 0; } /* Row-based group (design mockup: Font/Paragraph read as stacked horizontal rows, not 3-per-column flow). Rows centre vertically in the same 76px. */ .ribbon-group-controls.rb-rows { flex-flow: column nowrap; justify-content: center; align-content: unset; align-items: flex-start; gap: 4px; } .rb-row { display: flex; align-items: center; gap: 2px; } .rb-row .rb-sep { height: 22px; align-self: center; margin: 0 4px; } /* Breathing room per the design source (.btn-icon is 34×34 around a 15px glyph): row buttons grow to 32px boxes; the icon stays 16px. */ .rb-row .rb-btn-small { height: 32px; min-width: 32px; padding: 0 8px; justify-content: center; } .rb-row .rb-seg { height: 30px; } .rb-row .rb-seg-btn { min-width: 32px; padding: 0 8px; } .rb-row .rb-combo { height: 28px; } .rb-row .rb-color { height: 30px; } .rb-row .rb-color-main .rb-icon { width: 18px; height: 16px; } .rb-row .rb-split-small { height: 30px; } /* Vertical pair (undo/redo inside Clipboard — mockup anatomy). */ .rb-stack { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; } /* Group caption under the controls — small uppercase tag (mockup: 9.5px, letter-spacing .14em, 50% ink). */ .ribbon-group-label { height: 16px; line-height: 16px; text-align: center; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rb-text-muted); opacity: 0.85; white-space: nowrap; } /* ── generic button ── */ .rb-btn { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--rb-text); border-radius: 4px; font-family: inherit; display: inline-flex; align-items: center; } .rb-btn:hover { background: var(--rb-hover); } .rb-btn.rb-active { background: var(--rb-active-bg); border-color: var(--rb-border); color: var(--rb-accent); } .rb-btn.rb-disabled, .rb-btn:disabled { opacity: 0.4; cursor: default; } .rb-btn.rb-disabled:hover, .rb-btn:disabled:hover { background: transparent; } .rb-hidden { display: none !important; } /* state.hidden — e.g. book-only tools */ .rb-btn-small { height: 24px; min-width: 26px; padding: 0 6px; gap: 6px; justify-content: flex-start; } .rb-btn-large { height: 100%; flex-direction: column; justify-content: center; gap: 4px; padding: 2px 10px; min-width: 52px; max-width: 96px; } .rb-label { font-size: 12px; white-space: nowrap; } .rb-btn-large .rb-label { font-size: 11px; line-height: 1.15; text-align: center; white-space: normal; max-width: 66px; } /* Icon scale follows the design mockup (small ~15px, large ~20-24px) — the old 19/30px read heavy next to the thin group captions. */ .rb-ic-wrap { display: inline-flex; align-items: center; justify-content: center; } .rb-icon { width: 16px; height: 16px; display: block; } .rb-btn-large .rb-icon { width: 24px; height: 24px; } /* ── separator: full-height vertical rule; under column-wrap it fills its own column and so also breaks the control flow to the next sub-column ── */ .rb-sep { width: 1px; height: 100%; flex-shrink: 0; margin: 0 3px; background: var(--rb-border); } /* ── caret on dropdown buttons ── */ .rb-dropdown .rb-caret { display: inline-flex; align-items: center; margin-left: 2px; } .rb-caret .rb-icon { width: 12px; height: 12px; } /* ── split button ── */ .rb-split { display: inline-flex; border-radius: 4px; } .rb-split-main, .rb-split-arrow { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--rb-text); display: inline-flex; align-items: center; justify-content: center; } .rb-split-main:hover, .rb-split-arrow:hover { background: var(--rb-hover); border-radius: 4px; } .rb-split-main.rb-active { color: var(--rb-accent); } .rb-split-arrow .rb-icon { width: 12px; height: 12px; } .rb-split-small { height: 23px; } .rb-split-small .rb-split-main { padding: 0 4px; gap: 4px; } .rb-split-small .rb-split-arrow { width: 16px; padding: 0; } .rb-split-large { flex-direction: column; height: 100%; } .rb-split-large .rb-split-main { flex-direction: column; flex: 1; gap: 4px; padding: 3px 8px; min-width: 46px; } .rb-split-large .rb-split-main .rb-icon { width: 24px; height: 24px; } .rb-split-large .rb-split-arrow { height: 16px; gap: 3px; } .rb-split-arrow-label { font-size: 11px; white-space: nowrap; } /* ── segmented control (design mockup: align buttons share one hairline frame, inner buttons square, active = tint + accent ink) ── */ .rb-seg { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--rb-border); border-radius: 4px; overflow: hidden; background: var(--rb-bg); } .rb-seg-btn { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--rb-text); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; min-width: 26px; } .rb-seg-btn + .rb-seg-btn { border-left: 1px solid var(--rb-border); } .rb-seg-btn:hover { background: var(--rb-hover); } .rb-seg-btn.rb-active { background: var(--rb-active-bg); color: var(--rb-accent); } .rb-seg-btn.rb-disabled, .rb-seg-btn:disabled { opacity: 0.4; cursor: default; } /* ── combo (input + dropdown) ── */ .rb-combo { display: inline-flex; align-items: center; height: 23px; border: 1px solid var(--rb-border); border-radius: 4px; background: var(--rb-bg); overflow: hidden; } .rb-combo-input { border: 0; background: transparent; color: var(--rb-text); font-family: inherit; font-size: 12px; height: 100%; width: 100%; min-width: 0; padding: 0 4px; } .rb-combo-input:focus { outline: none; } .rb-combo-arrow { appearance: none; border: 0; border-left: 1px solid var(--rb-border); background: transparent; cursor: pointer; height: 100%; width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--rb-text-muted); } .rb-combo-arrow:hover { background: var(--rb-hover); } .rb-combo-arrow .rb-icon { width: 12px; height: 12px; } /* ── color split ── */ .rb-color { display: inline-flex; align-items: stretch; height: 23px; border-radius: 4px; } .rb-color:hover { background: var(--rb-hover); } .rb-color-main { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--rb-text); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4px; border-radius: 4px 0 0 4px; } .rb-color-main .rb-icon { width: 17px; height: 15px; } .rb-color-main.rb-active { color: var(--rb-accent); } .rb-color-bar { width: 16px; height: 3px; border-radius: 1px; background: var(--rb-accent); margin-top: 1px; } .rb-color-arrow { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--rb-text-muted); width: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0 4px 4px 0; } .rb-color-arrow:hover { background: var(--rb-hover); } .rb-color-arrow .rb-icon { width: 12px; height: 12px; } /* ── gallery (inline grid) ── */ .rb-gallery { display: grid; gap: 3px; align-content: center; } .rb-gallery-item { appearance: none; border: 1px solid var(--rb-border); background: var(--rb-bg); cursor: pointer; color: var(--rb-text); border-radius: 4px; padding: 3px 6px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-height: 22px; } .rb-gallery-item:hover { border-color: var(--rb-accent); background: var(--rb-hover); } .rb-gallery-item.rb-active { border-color: var(--rb-accent); color: var(--rb-accent); background: var(--rb-active-bg); } .rb-gallery-preview { display: inline-flex; align-items: center; } .rb-gallery-label { font-size: 11.5px; } /* Card variant (design mockup Styles gallery): live "Aa" specimen stacked over a tiny uppercase caption. Type sizes echo the editor's own styles; fonts/colors stay the app's — only the geometry is the mockup's. */ .rb-gallery-cards { align-content: center; } .rb-gallery-cards .rb-gallery-item { flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 54px; min-height: 52px; padding: 6px 8px 4px; } .rb-gallery-cards .rb-gallery-label { font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65; } .rb-pv { display: block; line-height: 1; } .rb-pv-h1 { font-size: 20px; font-weight: 700; } .rb-pv-h2 { font-size: 16px; font-weight: 700; } .rb-pv-h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .rb-pv-body { font-size: 13px; font-weight: 400; } .rb-pv-quote { font-size: 15px; font-style: italic; } .rb-pv-code { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } /* ── collapsed group (overflow) — design mockup "cách đóng mở nhóm": the whole group shrinks to one large button (representative icon over "Label ▾"); the caption row below STAYS, like every expanded group. ── */ .ribbon-group.rb-collapsed .ribbon-group-controls { display: none; } /* A collapsed group is already the compact form — shed the wide gutters so six collapsed groups still fit a narrow window instead of clipping. */ .ribbon-group.rb-collapsed { padding: 0 2px; } .rb-collapsed-btn { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--rb-text); border-radius: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 76px; padding: 2px 10px; min-width: 52px; align-self: center; } .rb-collapsed-btn:hover { background: var(--rb-hover); } .rb-collapsed-btn > .rb-ic-wrap .rb-icon { width: 22px; height: 22px; } .rb-collapsed-tag { display: inline-flex; align-items: center; gap: 4px; } .rb-collapsed-tag .rb-icon { width: 10px; height: 10px; opacity: 0.6; } .rb-collapsed-label { font-size: 11px; white-space: nowrap; } /* Flyout panel of a collapsed group: the borrowed controls re-flow into a loose wrap (the fixed 3-row column grid only makes sense inside the ribbon); separators turn into full-width hairlines. */ .rb-collapsed-panel .ribbon-group-controls { height: auto; max-width: 340px; flex-flow: row wrap; align-items: center; align-content: flex-start; gap: 4px 6px; } .rb-collapsed-panel .rb-sep { width: 100%; height: 1px; margin: 3px 0; } /* A rows-group keeps its row shape inside the flyout (and row seps stay vertical there — the full-width rule above is for the column-flow case). */ .rb-collapsed-panel .ribbon-group-controls.rb-rows { flex-flow: column nowrap; } .rb-collapsed-panel .rb-rows .rb-sep { width: 1px; height: 20px; margin: 0 3px; } .rb-collapsed-panel .rb-btn-large, .rb-collapsed-panel .rb-split-large, .rb-collapsed-panel .rb-collapsed-btn { height: auto; } /* ── popups: menu / palette / panel (fixed, appended to ) ── */ .rb-menu, .rb-palette, .rb-panel { position: fixed; z-index: 1200; background: var(--rb-bg); border: 1px solid var(--rb-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); color: var(--rb-text); font-family: var(--font-sans, system-ui, sans-serif); padding: 4px; } .rb-menu { min-width: 150px; display: flex; flex-direction: column; max-height: min(420px, 70vh); /* font roster is ~27 items */ overflow-y: auto; } .rb-menu-item { appearance: none; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--rb-text); font-size: 12.5px; padding: 6px 10px; border-radius: 4px; white-space: nowrap; } .rb-menu-item:hover { background: var(--rb-hover); } /* Visual pick lists (borders/freeze) — glyph + label in one row */ .rb-menu-item--icon { display: flex; align-items: center; gap: 9px; } .rb-menu-item--icon .rb-ic-wrap { display: inline-flex; flex-shrink: 0; } .rb-menu-item--icon .rb-icon { width: 17px; height: 17px; } .rb-menu-item.rb-active { color: var(--rb-accent); font-weight: 600; } .rb-menu-item.rb-dis { opacity: 0.4; cursor: default; } .rb-menu-item.rb-dis:hover { background: transparent; } .rb-menu-sep { height: 1px; background: var(--rb-border); margin: 4px 6px; } .rb-palette { display: grid; grid-template-columns: repeat(6, 20px); gap: 5px; padding: 8px; } .rb-swatch { width: 20px; height: 20px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px; cursor: pointer; padding: 0; } .rb-swatch:hover { transform: scale(1.12); } .rb-swatch-none { background: var(--rb-bg); color: var(--rb-text-muted); font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .rb-panel { padding: 8px; } .rb-panel .rb-gallery-item { min-height: 26px; } /* ── desktop-only ── */ @media (max-width: 899px) { #ribbon-host { display: none !important; } }