@sanguo-dev/calendar-ui 0.0.2 → 0.0.3

package/src/style.css

@@ -1,388 +1,388 @@
-/* calendar-ui 的默认皮肤：所有颜色/尺寸都走 CSS 变量，外部改 .cui 即可换主题 */
-.cui {
-  --cui-bg: #ffffff;
-  --cui-fg: #1f2328;
-  --cui-muted: #8b949e;
-  --cui-border: #e6e8eb;
-  --cui-accent: #2563eb;
-  --cui-accent-fg: #ffffff;
-  --cui-rest: #e5484d;
-  --cui-hover: #f3f4f6;
-  --cui-radius: 10px;
-
-  color-scheme: light;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 420px;
-  overflow: hidden;
-  padding: 12px;
-  border: 1px solid var(--cui-border);
-  border-radius: var(--cui-radius);
-  background: var(--cui-bg);
-  color: var(--cui-fg);
-  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-/* 双月范围视图 */
-.cui--range {
-  max-width: 900px;
-}
-
-.cui__months {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.cui__month {
-  min-width: 0;
-}
-
-@media (max-width: 720px) {
-  .cui__months {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-/* 显式深色 */
-.cui[data-theme="dark"] {
-  --cui-bg: #161b22;
-  --cui-fg: #e6edf3;
-  --cui-muted: #8b949e;
-  --cui-border: #30363d;
-  --cui-accent: #1f6feb;
-  --cui-accent-fg: #ffffff;
-  --cui-rest: #ff7b72;
-  --cui-hover: #21262d;
-
-  color-scheme: dark;
-}
-
-/* auto：优先跟随最近的 data-theme="dark" */
-[data-theme="dark"] .cui[data-theme="auto"] {
-  --cui-bg: #161b22;
-  --cui-fg: #e6edf3;
-  --cui-muted: #8b949e;
-  --cui-border: #30363d;
-  --cui-accent: #1f6feb;
-  --cui-accent-fg: #ffffff;
-  --cui-rest: #ff7b72;
-  --cui-hover: #21262d;
-
-  color-scheme: dark;
-}
-
-/* auto 且没有 data-theme 时跟随系统 */
-@media (prefers-color-scheme: dark) {
-  .cui[data-theme="auto"] {
-    --cui-bg: #161b22;
-    --cui-fg: #e6edf3;
-    --cui-muted: #8b949e;
-    --cui-border: #30363d;
-    --cui-accent: #1f6feb;
-    --cui-accent-fg: #ffffff;
-    --cui-rest: #ff7b72;
-    --cui-hover: #21262d;
-
-    color-scheme: dark;
-  }
-
-  /* 外层明确 light 时，系统深色不覆盖 */
-  [data-theme="light"] .cui[data-theme="auto"] {
-    --cui-bg: #ffffff;
-    --cui-fg: #1f2328;
-    --cui-muted: #8b949e;
-    --cui-border: #e6e8eb;
-    --cui-accent: #2563eb;
-    --cui-accent-fg: #ffffff;
-    --cui-rest: #e5484d;
-    --cui-hover: #f3f4f6;
-
-    color-scheme: light;
-  }
-}
-
-.cui *,
-.cui *::before,
-.cui *::after {
-  box-sizing: border-box;
-}
-
-/* 头部：上个月 / 年月标题 / 下个月 */
-.cui__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 4px 2px 10px;
-}
-
-.cui__title {
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.cui__nav {
-  width: 30px;
-  height: 30px;
-  border: 1px solid var(--cui-border);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--cui-fg);
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.cui__nav:hover {
-  background: var(--cui-hover);
-}
-
-.cui__nav:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.cui__nav:disabled:hover {
-  background: transparent;
-}
-
-.cui__nav:focus-visible,
-.cui__day:focus-visible {
-  outline: 2px solid var(--cui-accent);
-  outline-offset: 1px;
-}
-
-/* 星期表头 */
-.cui__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  gap: 4px;
-}
-
-/* 6 行日期；折叠时按行收起，节点仍然复用 */
-.cui__grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  contain: layout paint;
-}
-
-.cui__week {
-  display: grid;
-  min-height: 0;
-  margin-bottom: 4px;
-  overflow: hidden;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  gap: 4px;
-  opacity: 1;
-}
-
-.cui__week:last-child {
-  margin-bottom: 0;
-}
-
-/* 折叠动画由 JS 按真实行高驱动（见 components/grid.ts），这里只负责最终状态 */
-.cui__week.is-collapsed-hidden {
-  height: 0;
-  margin-bottom: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.cui__week[hidden] {
-  display: none;
-}
-
-.cui__viewport {
-  position: relative;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.cui__grid.is-month-clone {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-/* 只在动画期间提升为合成层，动画结束后随类名一起移除 */
-.cui__grid.is-month-clone,
-.cui__grid.is-month-in-next,
-.cui__grid.is-month-in-prev {
-  will-change: transform;
-}
-
-.cui--no-animation .cui__grid,
-.cui--no-animation .cui__week {
-  transition: none;
-  animation: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cui__grid,
-  .cui__week {
-    transition: none;
-    animation: none;
-  }
-}
-
-.cui__weekday {
-  padding: 4px 0;
-  color: var(--cui-muted);
-  font-size: 12px;
-  text-align: center;
-}
-
-/* 日期格 */
-.cui__day {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  min-height: 46px;
-  padding: 4px 2px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-}
-
-.cui__day:hover {
-  background: var(--cui-hover);
-}
-
-.cui__day-num {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 1.1;
-}
-
-/* 周末：日期数字固定用节假日红（--cui-rest），不由节假日数据决定 */
-.cui__day.is-weekend .cui__day-num {
-  color: var(--cui-rest);
-}
-
-/* 选中时数字跟随反白色，避免红底红字 */
-.cui__day.is-selected .cui__day-num {
-  color: currentColor;
-}
-
-.cui__day-sub {
-  max-width: 100%;
-  overflow: hidden;
-  color: var(--cui-muted);
-  font-size: 11px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* 左上角的休 / 班标记 */
-.cui__day-tag {
-  position: absolute;
-  top: 3px;
-  left: 4px;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1;
-  pointer-events: none;
-}
-
-.cui__day-tag[hidden] {
-  display: none;
-}
-
-.cui__day-tag[data-tone="rest"] {
-  color: var(--cui-rest);
-}
-
-.cui__day-tag[data-tone="work"] {
-  color: var(--cui-accent);
-}
-
-.cui__day.is-selected .cui__day-tag {
-  color: currentColor;
-  opacity: 0.9;
-}
-
-/* 状态 */
-.cui__day.is-outside {
-  opacity: 0.35;
-}
-
-.cui__day.is-disabled,
-.cui__day:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-.cui__day.is-disabled:hover,
-.cui__day:disabled:hover {
-  background: transparent;
-}
-
-.cui__day[data-tone="rest"] .cui__day-sub {
-  color: var(--cui-rest);
-}
-
-.cui__day.is-today {
-  border-color: var(--cui-accent);
-}
-
-.cui__day.is-selected {
-  background: var(--cui-accent);
-  color: var(--cui-accent-fg);
-}
-
-.cui__day.is-in-range:not(.is-selected) {
-  background: color-mix(in srgb, var(--cui-accent) 14%, transparent);
-}
-
-.cui__day.is-in-range:hover:not(.is-selected) {
-  background: color-mix(in srgb, var(--cui-accent) 22%, transparent);
-}
-
-.cui__day.is-selected .cui__day-sub {
-  color: currentColor;
-  opacity: 0.85;
-}
-
-/* 折叠开关：始终只有一个按钮，箭头随状态切换 */
-.cui__collapse {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  margin-top: 8px;
-  padding: 2px 0;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--cui-muted);
-  font: inherit;
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.cui__collapse:hover {
-  color: var(--cui-fg);
-  background: var(--cui-hover);
-}
-
-.cui__collapse:focus-visible {
-  outline: 2px solid var(--cui-accent);
-  outline-offset: 1px;
-}
-
-/* 隐藏状态：类选择器里的 display 会盖掉 [hidden] 的默认样式，这里显式补上 */
-.cui[hidden],
-.cui__header[hidden] {
-  display: none;
-}
+/* calendar-ui 的默认皮肤：所有颜色/尺寸都走 CSS 变量，外部改 .cui 即可换主题 */
+.cui {
+  --cui-bg: #ffffff;
+  --cui-fg: #1f2328;
+  --cui-muted: #8b949e;
+  --cui-border: #e6e8eb;
+  --cui-accent: #2563eb;
+  --cui-accent-fg: #ffffff;
+  --cui-rest: #e5484d;
+  --cui-hover: #f3f4f6;
+  --cui-radius: 10px;
+
+  color-scheme: light;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 420px;
+  overflow: hidden;
+  padding: 12px;
+  border: 1px solid var(--cui-border);
+  border-radius: var(--cui-radius);
+  background: var(--cui-bg);
+  color: var(--cui-fg);
+  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+/* 双月范围视图 */
+.cui--range {
+  max-width: 900px;
+}
+
+.cui__months {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.cui__month {
+  min-width: 0;
+}
+
+@media (max-width: 720px) {
+  .cui__months {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* 显式深色 */
+.cui[data-theme="dark"] {
+  --cui-bg: #161b22;
+  --cui-fg: #e6edf3;
+  --cui-muted: #8b949e;
+  --cui-border: #30363d;
+  --cui-accent: #1f6feb;
+  --cui-accent-fg: #ffffff;
+  --cui-rest: #ff7b72;
+  --cui-hover: #21262d;
+
+  color-scheme: dark;
+}
+
+/* auto：优先跟随最近的 data-theme="dark" */
+[data-theme="dark"] .cui[data-theme="auto"] {
+  --cui-bg: #161b22;
+  --cui-fg: #e6edf3;
+  --cui-muted: #8b949e;
+  --cui-border: #30363d;
+  --cui-accent: #1f6feb;
+  --cui-accent-fg: #ffffff;
+  --cui-rest: #ff7b72;
+  --cui-hover: #21262d;
+
+  color-scheme: dark;
+}
+
+/* auto 且没有 data-theme 时跟随系统 */
+@media (prefers-color-scheme: dark) {
+  .cui[data-theme="auto"] {
+    --cui-bg: #161b22;
+    --cui-fg: #e6edf3;
+    --cui-muted: #8b949e;
+    --cui-border: #30363d;
+    --cui-accent: #1f6feb;
+    --cui-accent-fg: #ffffff;
+    --cui-rest: #ff7b72;
+    --cui-hover: #21262d;
+
+    color-scheme: dark;
+  }
+
+  /* 外层明确 light 时，系统深色不覆盖 */
+  [data-theme="light"] .cui[data-theme="auto"] {
+    --cui-bg: #ffffff;
+    --cui-fg: #1f2328;
+    --cui-muted: #8b949e;
+    --cui-border: #e6e8eb;
+    --cui-accent: #2563eb;
+    --cui-accent-fg: #ffffff;
+    --cui-rest: #e5484d;
+    --cui-hover: #f3f4f6;
+
+    color-scheme: light;
+  }
+}
+
+.cui *,
+.cui *::before,
+.cui *::after {
+  box-sizing: border-box;
+}
+
+/* 头部：上个月 / 年月标题 / 下个月 */
+.cui__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 2px 10px;
+}
+
+.cui__title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.cui__nav {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--cui-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--cui-fg);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.cui__nav:hover {
+  background: var(--cui-hover);
+}
+
+.cui__nav:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.cui__nav:disabled:hover {
+  background: transparent;
+}
+
+.cui__nav:focus-visible,
+.cui__day:focus-visible {
+  outline: 2px solid var(--cui-accent);
+  outline-offset: 1px;
+}
+
+/* 星期表头 */
+.cui__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+
+/* 6 行日期；折叠时按行收起，节点仍然复用 */
+.cui__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  contain: layout paint;
+}
+
+.cui__week {
+  display: grid;
+  min-height: 0;
+  margin-bottom: 4px;
+  overflow: hidden;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+  opacity: 1;
+}
+
+.cui__week:last-child {
+  margin-bottom: 0;
+}
+
+/* 折叠动画由 JS 按真实行高驱动（见 components/grid.ts），这里只负责最终状态 */
+.cui__week.is-collapsed-hidden {
+  height: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cui__week[hidden] {
+  display: none;
+}
+
+.cui__viewport {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cui__grid.is-month-clone {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* 只在动画期间提升为合成层，动画结束后随类名一起移除 */
+.cui__grid.is-month-clone,
+.cui__grid.is-month-in-next,
+.cui__grid.is-month-in-prev {
+  will-change: transform;
+}
+
+.cui--no-animation .cui__grid,
+.cui--no-animation .cui__week {
+  transition: none;
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cui__grid,
+  .cui__week {
+    transition: none;
+    animation: none;
+  }
+}
+
+.cui__weekday {
+  padding: 4px 0;
+  color: var(--cui-muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+/* 日期格 */
+.cui__day {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  min-height: 46px;
+  padding: 4px 2px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.cui__day:hover {
+  background: var(--cui-hover);
+}
+
+.cui__day-num {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+/* 周末：日期数字固定用节假日红（--cui-rest），不由节假日数据决定 */
+.cui__day.is-weekend .cui__day-num {
+  color: var(--cui-rest);
+}
+
+/* 选中时数字跟随反白色，避免红底红字 */
+.cui__day.is-selected .cui__day-num {
+  color: currentColor;
+}
+
+.cui__day-sub {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--cui-muted);
+  font-size: 11px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 左上角的休 / 班标记 */
+.cui__day-tag {
+  position: absolute;
+  top: 3px;
+  left: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.cui__day-tag[hidden] {
+  display: none;
+}
+
+.cui__day-tag[data-tone="rest"] {
+  color: var(--cui-rest);
+}
+
+.cui__day-tag[data-tone="work"] {
+  color: var(--cui-accent);
+}
+
+.cui__day.is-selected .cui__day-tag {
+  color: currentColor;
+  opacity: 0.9;
+}
+
+/* 状态 */
+.cui__day.is-outside {
+  opacity: 0.35;
+}
+
+.cui__day.is-disabled,
+.cui__day:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.cui__day.is-disabled:hover,
+.cui__day:disabled:hover {
+  background: transparent;
+}
+
+.cui__day[data-tone="rest"] .cui__day-sub {
+  color: var(--cui-rest);
+}
+
+.cui__day.is-today {
+  border-color: var(--cui-accent);
+}
+
+.cui__day.is-selected {
+  background: var(--cui-accent);
+  color: var(--cui-accent-fg);
+}
+
+.cui__day.is-in-range:not(.is-selected) {
+  background: color-mix(in srgb, var(--cui-accent) 14%, transparent);
+}
+
+.cui__day.is-in-range:hover:not(.is-selected) {
+  background: color-mix(in srgb, var(--cui-accent) 22%, transparent);
+}
+
+.cui__day.is-selected .cui__day-sub {
+  color: currentColor;
+  opacity: 0.85;
+}
+
+/* 折叠开关：始终只有一个按钮，箭头随状态切换 */
+.cui__collapse {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  padding: 2px 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--cui-muted);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.cui__collapse:hover {
+  color: var(--cui-fg);
+  background: var(--cui-hover);
+}
+
+.cui__collapse:focus-visible {
+  outline: 2px solid var(--cui-accent);
+  outline-offset: 1px;
+}
+
+/* 隐藏状态：类选择器里的 display 会盖掉 [hidden] 的默认样式，这里显式补上 */
+.cui[hidden],
+.cui__header[hidden] {
+  display: none;
+}