@einfach-excel/spreadsheet-ui-styles 0.0.0-stage → 0.2.0

package/styles/index.css

@@ -0,0 +1,26 @@
+@import './grid-frame.css';
+@import './grid-overlays.css';
+@import './formula-bar-row.css';
+@import './shared-format-toolbar.css';
+@import './shared-sheet-tabs.css';
+@import './shared-context-menu.css';
+@import './chrome-tokens.css';
+@import './menu-bar.css';
+@import './toolbar.css';
+@import './toolbar-popovers.css';
+@import './name-box.css';
+@import './status-bar.css';
+@import './sheet-tabs.css';
+@import './demo-two-column.css';
+@import './history-panel.css';
+@import './button-states.css';
+@import './dialog-skin.css';
+@import './grid-headers.css';
+@import './grid-cells.css';
+@import './demo-header.css';
+@import './help-overlay.css';
+@import './formula-autocomplete.css';
+@import './marching-ants.css';
+@import './diagnostics.css';
+@import './locked-edit-feedback.css';
+@import './presence-overlay.css';

package/styles/locked-edit-feedback.css

@@ -0,0 +1,45 @@
+.spreadsheet-locked-edit-feedback {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-top: 1px solid var(--border);
+  border-left: 3px solid var(--warning, #d68910);
+  background: var(--bg-chrome);
+  color: var(--text-default);
+  font-family: var(--excel-font);
+  font-size: 12px;
+}
+
+.spreadsheet-locked-edit-feedback-message {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.spreadsheet-locked-edit-feedback-actions {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.spreadsheet-locked-edit-feedback-unlock,
+.spreadsheet-locked-edit-feedback-dismiss {
+  border: 1px solid var(--border-strong, var(--border));
+  border-radius: 2px;
+  background: var(--bg-surface, #fff);
+  color: inherit;
+  font: inherit;
+  line-height: 1.35;
+  padding: 2px 6px;
+}
+
+.spreadsheet-locked-edit-feedback-unlock:hover,
+.spreadsheet-locked-edit-feedback-dismiss:hover {
+  background: var(--bg-hover, #f0f0f0);
+}
+
+.spreadsheet-locked-edit-feedback-unlock:focus-visible,
+.spreadsheet-locked-edit-feedback-dismiss:focus-visible {
+  outline: 2px solid var(--focus-ring, #1a73e8);
+  outline-offset: 1px;
+}

package/styles/marching-ants.css

@@ -0,0 +1,18 @@
+/* Marching-ants dashed border for clipboard source (copy / cut). Driven by a
+ * single CSS @keyframes so multiple ants rects share one timeline and never
+ * drift relative to each other. Period 4+3=7px matches the canvas overlay's
+ * setLineDash([4,3]) so visual parity is exact. */
+@keyframes spreadsheet-svg-marching-ants {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -7;
+  }
+}
+
+.spreadsheet-grid-overlay-svg .svg-marching-ants-dash {
+  /* 840ms = 7 dash-period units * 120ms/unit; matches the canvas overlay's
+   * scheduleAntsFrame tick exactly (1px per 120ms in lineDashOffset). */
+  animation: spreadsheet-svg-marching-ants 840ms linear infinite;
+}

package/styles/menu-bar.css

@@ -0,0 +1,97 @@
+/* === A. Top chrome ====================================================== */
+
+/* A.1 Menu bar — horizontal row, hover/open states, dropdown panel */
+.spreadsheet-menu-bar {
+  display: flex;
+  align-items: stretch;
+  height: 26px;
+  background: var(--bg-chrome);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--excel-font);
+  font-size: 12px;
+  user-select: none;
+  position: relative;
+  z-index: 100;
+}
+
+.spreadsheet-menu-bar .menu-bar-top {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.spreadsheet-menu-bar .menu-bar-button {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 10px;
+  border: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  cursor: pointer;
+  transition: background 100ms ease-out;
+}
+
+.spreadsheet-menu-bar .menu-bar-button:hover {
+  background: var(--hover);
+}
+
+.spreadsheet-menu-bar .menu-bar-button-open {
+  background: var(--active-bg);
+}
+
+.spreadsheet-menu-bar .menu-bar-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  padding: 4px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 2px;
+  box-shadow: var(--shadow-popover);
+  z-index: 200;
+}
+
+.spreadsheet-menu-bar .menu-bar-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 14px;
+  border: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.spreadsheet-menu-bar .menu-bar-item:hover {
+  background: var(--select-bg);
+}
+
+.spreadsheet-menu-bar .menu-bar-item-disabled,
+.spreadsheet-menu-bar .menu-bar-item-disabled:hover {
+  color: var(--text-disabled);
+  background: transparent;
+  cursor: default;
+}
+
+.spreadsheet-menu-bar .menu-bar-item-label {
+  flex: 1;
+}
+
+.spreadsheet-menu-bar .menu-bar-item-shortcut {
+  margin-left: 16px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.spreadsheet-menu-bar .menu-bar-separator {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--border);
+}
+

package/styles/name-box.css

@@ -0,0 +1,89 @@
+/* A.3 Name Box + Formula Bar row */
+.spreadsheet-formula-bar {
+  display: flex;
+  align-items: stretch;
+  height: var(--formula-row-h);
+  background: var(--bg-toolbar);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--excel-font);
+  font-size: 13px;
+}
+
+.spreadsheet-name-box {
+  display: inline-flex;
+  align-items: center;
+  min-width: 120px;
+  max-width: 160px;
+  padding: 0;
+  border-right: 1px solid var(--border);
+  background: var(--bg-toolbar);
+}
+
+.spreadsheet-name-box .spreadsheet-name-box-input {
+  width: 100%;
+  height: 100%;
+  padding: 0 8px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+}
+
+.spreadsheet-name-box .spreadsheet-name-box-input:focus {
+  background: var(--select-bg);
+}
+
+.spreadsheet-name-box[data-error='true'] .spreadsheet-name-box-input {
+  background: var(--error-bg);
+}
+
+.spreadsheet-name-box-error-message {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.spreadsheet-formula-bar-input {
+  flex: 1;
+  height: 100%;
+  padding: 0 8px 0 28px;
+  border: none;
+  outline: none;
+  background: var(--bg-toolbar)
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='serif' font-style='italic' font-size='14' fill='%236a6a6a'%3Efx%3C/text%3E%3C/svg%3E")
+    no-repeat 4px center;
+  background-size: 20px 20px;
+  color: var(--text-default);
+  font: inherit;
+}
+
+.spreadsheet-formula-bar-input:focus {
+  background-color: var(--bg-toolbar);
+  outline: 1px solid var(--office-blue);
+  outline-offset: -1px;
+}
+
+
+/* 公式栏提交被拒时的行内错误(role=alert)。 */
+.spreadsheet-formula-bar-error {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--error-text);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* data-uri 里的 fx 字形吃不到 CSS 变量,暗色下单独换亮灰填充的一份。 */
+[data-spreadsheet-theme='dark'] .spreadsheet-formula-bar-input {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='serif' font-style='italic' font-size='14' fill='%23a8a6a3'%3Efx%3C/text%3E%3C/svg%3E");
+}

package/styles/presence-overlay.css

@@ -0,0 +1,36 @@
+.spreadsheet-presence-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  pointer-events: none;
+}
+
+.presence-cursor {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--presence-color, #888888);
+  pointer-events: none;
+}
+
+.presence-selection {
+  position: absolute;
+  inset: 0;
+  background-color: var(--presence-color, #888888);
+  opacity: 0.15;
+}
+
+.presence-label {
+  position: absolute;
+  top: -1.5rem;
+  left: -2px;
+  max-width: 12rem;
+  overflow: hidden;
+  padding: 0.125rem 0.375rem;
+  color: var(--text-on-accent);
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: var(--presence-color, #888888);
+  border-radius: 0.125rem 0.125rem 0 0;
+}

package/styles/shared-context-menu.css

@@ -0,0 +1,50 @@
+/* === Context Menu ===
+ * Right-click menu for column headers, row headers, cells, and sheet tabs.
+ * Portaled to <body> so it escapes the table's overflow-scroll clipping.
+ */
+
+.context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 180px;
+  padding: 4px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: var(--shadow-popover);
+  font-family: var(--excel-font);
+  font-size: 13px;
+  user-select: none;
+}
+
+.context-menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  color: var(--text-default);
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.context-menu-item:hover,
+.context-menu-item-highlight {
+  background: var(--hover);
+  color: var(--text-default);
+}
+
+.context-menu-item:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+  background: transparent;
+}
+
+.context-menu-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 4px 0;
+}
+

package/styles/shared-format-toolbar.css

@@ -0,0 +1,82 @@
+/* === Format Toolbar (Phase 6) ===
+ * Excel ribbon-lite — light borders, gray hover, primary blue on active. */
+
+.format-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+  margin-bottom: 6px;
+  border: 1px solid #d0d7de;
+  background: #fafbfc;
+  border-radius: 4px;
+  font-family: -apple-system, sans-serif;
+  font-size: 13px;
+}
+
+.fmt-btn {
+  min-width: 28px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #333;
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fmt-btn:hover {
+  background: #eef1f4;
+  border-color: #d0d7de;
+}
+
+.fmt-btn-active {
+  background: #e8f0fe;
+  border-color: #1a73e8;
+  color: #1a73e8;
+}
+
+.fmt-sep {
+  width: 1px;
+  height: 20px;
+  background: #d0d7de;
+  margin: 0 4px;
+}
+
+.fmt-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #555;
+}
+
+.fmt-label-text {
+  user-select: none;
+}
+
+.fmt-select {
+  height: 24px;
+  padding: 0 4px;
+  border: 1px solid #d0d7de;
+  border-radius: 3px;
+  background: #fff;
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.fmt-color {
+  width: 28px;
+  height: 24px;
+  border: 1px solid #d0d7de;
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 0;
+  background: #fff;
+}
+

package/styles/shared-sheet-tabs.css

@@ -0,0 +1,138 @@
+/* === Sheet Tabs (bottom-of-grid, multi-sheet workbook) === */
+
+.sheet-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 6px;
+  padding: 4px 6px 0;
+  border-top: 1px solid #d0d7de;
+  background: #fafbfc;
+  overflow-x: auto;
+}
+
+.sheet-tab {
+  padding: 6px 14px;
+  border: 1px solid transparent;
+  border-bottom: none;
+  background: #eef1f4;
+  color: #555;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 4px 4px 0 0;
+  white-space: nowrap;
+  font-family: inherit;
+  transition: background 0.12s, color 0.12s;
+}
+
+.sheet-tab:hover {
+  background: #e0e6ec;
+  color: #333;
+}
+
+.sheet-tab-active {
+  background: #fff;
+  color: #1a73e8;
+  border-color: #d0d7de;
+  border-bottom-color: #fff;
+  margin-bottom: -1px;
+}
+
+.sheet-tab-add {
+  margin-left: 4px;
+  padding: 4px 10px;
+  border: 1px solid #d0d7de;
+  background: #fff;
+  color: #1a73e8;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 4px;
+  font-family: inherit;
+  line-height: 1;
+}
+
+.sheet-tab-add:hover {
+  background: #e8f0fe;
+}
+
+/* vnext 的 tab-item / 拖拽落点样式已迁往 sheet-tabs.css(单一皮肤);
+   重排把手随"拖页签本体"交互删除。 */
+
+.spreadsheet-sheet-tab-rename {
+  min-width: 72px;
+  max-width: 160px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--office-blue);
+  border-radius: 4px 4px 0 0;
+  background: var(--bg-surface);
+  color: var(--text-default);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.spreadsheet-sheet-tab-context-menu {
+  position: fixed;
+  z-index: 40;
+  min-width: 128px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-popover);
+}
+
+.spreadsheet-sheet-tab-context-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.spreadsheet-sheet-tab-context-menu button:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+.spreadsheet-sheet-tab-context-menu button:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.spreadsheet-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 28px;
+  padding: 4px 8px;
+  border: 1px solid #d0d7de;
+  border-top: none;
+  background: #fafbfc;
+  color: #444;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  line-height: 1.2;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.spreadsheet-status-bar-item {
+  display: inline-flex;
+  align-items: center;
+  min-width: max-content;
+}
+
+.spreadsheet-status-bar-item:first-child {
+  color: #0b57d0;
+  font-weight: 600;
+}
+

package/styles/sheet-tabs.css

@@ -0,0 +1,98 @@
+/* C.2 Sheet tabs — Excel-like rounded card with active raised */
+.spreadsheet-sheet-tabs {
+  display: flex;
+  align-items: stretch;
+  height: var(--bottom-strip-h);
+  padding: 0 4px;
+  background: var(--bg-chrome);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--excel-font);
+  font-size: 12px;
+}
+
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab-item {
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+}
+
+/* 拖拽中的页签压暗;插入位置画一道品牌绿细线(Excel 的落点指示)。 */
+.spreadsheet-sheet-tab-item[data-reorder-active='true'] .spreadsheet-sheet-tab {
+  opacity: 0.72;
+  cursor: grabbing;
+}
+
+.spreadsheet-sheet-tab-item[data-reorder-drop='before']::before,
+.spreadsheet-sheet-tab-item[data-reorder-drop='after']::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  width: 2px;
+  background: var(--excel-green);
+  border-radius: 1px;
+  z-index: 1;
+}
+
+.spreadsheet-sheet-tab-item[data-reorder-drop='before']::before {
+  left: -1px;
+}
+
+.spreadsheet-sheet-tab-item[data-reorder-drop='after']::after {
+  right: -1px;
+}
+
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-bottom: none;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  cursor: pointer;
+  transition: background 100ms ease-out;
+}
+
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab:hover {
+  background: var(--hover);
+}
+
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab[data-active='true'],
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab.is-active {
+  background: var(--bg-cell);
+  border-color: var(--border);
+  color: var(--excel-green-text);
+  font-weight: 600;
+  /* Excel for web:活动页签白底 + 底缘一道品牌绿 */
+  box-shadow: inset 0 -2px 0 0 var(--excel-green);
+}
+
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 100%;
+  margin-left: 4px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.spreadsheet-sheet-tabs .spreadsheet-sheet-tab-add:hover {
+  background: var(--hover);
+  border-color: var(--border);
+  color: var(--text-default);
+}
+
+
+
+
+