@v1hz/md2docx 1.6.0 → 2.1.0

package/src/web/app.css

@@ -1,921 +0,0 @@
-:root {
-  --canvas: #eef1f5;
-  --paper: #ffffff;
-  --ink: #172235;
-  --muted: #687386;
-  --line: #d8dee8;
-  --line-soft: #e9edf3;
-  --navy: #173f72;
-  --navy-deep: #102e55;
-  --blue-soft: #e7eef8;
-  --cyan: #68b7c7;
-  --red: #b33b43;
-  --shadow: 0 20px 50px rgb(25 42 67 / 10%);
-  --fs-body: 15px;
-  --fs-small: 13px;
-  --fs-label: 14px;
-  --fs-heading: 18px;
-  --fs-meta: 12px;
-  font-size: 16px;
-  font-family: "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;
-  color: var(--ink);
-  background: var(--canvas);
-}
-
-* {
-  box-sizing: border-box;
-}
-html {
-  scroll-behavior: smooth;
-}
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-  padding-bottom: 82px;
-}
-body[data-view="styles"] {
-  overflow: hidden;
-  padding-bottom: 0;
-}
-body[data-view="styles"] .config-index {
-  display: none;
-}
-main {
-  display: contents;
-}
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-button {
-  cursor: pointer;
-}
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.46;
-}
-[hidden] {
-  display: none !important;
-}
-
-.masthead {
-  position: sticky;
-  z-index: 20;
-  top: 0;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  min-height: 72px;
-  padding: 0 28px;
-  color: white;
-  background: var(--navy-deep);
-  border-bottom: 3px solid var(--cyan);
-}
-.brand {
-  display: inline-flex;
-  gap: 11px;
-  align-items: center;
-  width: max-content;
-  color: white;
-  text-decoration: none;
-}
-.brand-mark {
-  display: grid;
-  place-items: center;
-  width: 38px;
-  height: 38px;
-  color: var(--navy-deep);
-  background: #d9f0f2;
-  border-radius: 3px;
-  font-family: Consolas, monospace;
-  font-weight: 800;
-}
-.brand strong,
-.brand small {
-  display: block;
-}
-.brand strong {
-  font-size: 20px;
-  letter-spacing: 0.02em;
-}
-.brand small {
-  margin-top: 2px;
-  color: #afc4df;
-  font-size: 13px;
-  letter-spacing: 0.16em;
-}
-.masthead-note {
-  justify-self: end;
-  margin: 0;
-  color: #afc4df;
-  font-family: "Microsoft YaHei UI", sans-serif;
-  font-size: 14px;
-}
-.mode-tabs {
-  display: flex;
-  align-self: stretch;
-}
-.mode-tab {
-  position: relative;
-  min-width: 112px;
-  padding: 0 20px;
-  color: #b7c8dc;
-  background: transparent;
-  border: 0;
-  font-weight: 650;
-}
-.mode-tab::after {
-  position: absolute;
-  right: 18px;
-  bottom: -3px;
-  left: 18px;
-  height: 3px;
-  background: transparent;
-  content: "";
-}
-.mode-tab:hover,
-.mode-tab.active {
-  color: white;
-  background: rgb(255 255 255 / 5%);
-}
-.mode-tab.active::after {
-  background: #d9f0f2;
-}
-
-.view {
-  animation: view-in 0.22s ease-out;
-}
-@keyframes view-in {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-}
-.loading {
-  padding: 54px;
-  color: var(--muted);
-}
-.error-copy {
-  color: var(--red) !important;
-}
-.eyebrow {
-  margin: 0 0 8px;
-  color: var(--navy);
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-
-/* 转换配置 */
-.config-workspace {
-  position: relative;
-  max-width: 1140px;
-  margin: 0 auto;
-  padding: 36px 28px;
-}
-.config-index {
-  position: fixed;
-  top: 108px;
-  left: max(28px, calc((100vw - 1140px) / 2));
-  width: 190px;
-  display: grid;
-  gap: 3px;
-}
-.config-sheet {
-  overflow: hidden;
-  width: 100%;
-  max-width: 820px;
-  margin: 0 auto;
-  background: var(--paper);
-  border: 1px solid var(--line);
-  box-shadow: var(--shadow);
-}
-.config-index a {
-  padding: 9px 12px;
-  color: var(--muted);
-  border-left: 2px solid transparent;
-  text-decoration: none;
-  font-size: 15px;
-}
-.config-index a:hover,
-.config-index a:focus-visible {
-  color: var(--navy);
-  background: var(--blue-soft);
-  border-left-color: var(--navy);
-  outline: 0;
-}
-.config-group {
-  display: grid;
-  grid-template-columns: 205px 1fr;
-  border-bottom: 1px solid var(--line);
-  scroll-margin-top: 100px;
-}
-.config-group:last-child {
-  border-bottom: 0;
-}
-.config-group > header {
-  padding: 28px;
-  background: #f8fafc;
-  border-right: 1px solid var(--line);
-}
-.config-group > header p {
-  margin: 0 0 8px;
-  color: #8490a1;
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 0.15em;
-}
-.config-group h2 {
-  margin: 0;
-  font-size: 20px;
-  line-height: 1.4;
-}
-.config-fields {
-  padding: 12px 28px;
-}
-.config-field {
-  display: grid;
-  grid-template-columns: 1fr minmax(180px, 250px);
-  gap: 24px;
-  align-items: center;
-  min-height: 60px;
-  border-bottom: 1px solid var(--line-soft);
-}
-.config-field:last-child {
-  border-bottom: 0;
-}
-.config-field > label {
-  font-weight: 650;
-  line-height: 1.45;
-}
-
-/* 样式工作区 */
-.style-workspace {
-  display: grid;
-  grid-template-columns: 210px minmax(470px, 650px) minmax(350px, 470px);
-  gap: 16px;
-  height: calc(100vh - 132px);
-  max-width: 1460px;
-  margin: 0 auto;
-  padding: 16px 24px;
-  align-items: stretch;
-}
-.style-rail,
-.style-editor,
-.proof-panel {
-  background: var(--paper);
-  border: 1px solid var(--line);
-  box-shadow: 0 8px 24px rgb(25 42 67 / 6%);
-}
-.style-rail {
-  display: flex;
-  min-height: 0;
-  overflow: hidden;
-  flex-direction: column;
-}
-.style-rail > header {
-  flex: 0 0 auto;
-  padding: 22px 20px 16px;
-  background: #f8fafc;
-  border-bottom: 1px solid var(--line);
-}
-.style-rail h1 {
-  margin: 0;
-  font-family: Georgia, "Songti SC", serif;
-  font-size: 25px;
-  font-weight: 600;
-}
-.style-rail > header > p:last-child {
-  margin: 10px 0 0;
-  color: var(--muted);
-  font-size: 14px;
-  line-height: 1.55;
-}
-.style-search {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-height: 38px;
-  margin-top: 12px;
-  padding: 0 10px;
-  color: #8691a1;
-  background: white;
-  border: 1px solid #b8c1cd;
-  border-radius: 3px;
-}
-.style-search:focus-within {
-  border-color: var(--navy);
-  box-shadow: 0 0 0 3px rgb(23 63 114 / 15%);
-}
-.style-search span {
-  font-size: 18px;
-  line-height: 1;
-}
-.style-search input {
-  min-width: 0;
-  min-height: 38px;
-  padding: 0;
-  border: 0;
-  box-shadow: none;
-  font-size: 14px;
-}
-.style-search input:focus {
-  outline: 0;
-}
-#style-index {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
-.style-nav-group {
-  padding: 14px 10px 9px;
-  border-bottom: 1px solid var(--line-soft);
-}
-.style-nav-group:last-child {
-  border-bottom: 0;
-}
-.style-nav-group h2 {
-  margin: 0 10px 7px;
-  color: #8691a1;
-  font-size: 13px;
-  letter-spacing: 0.12em;
-}
-.style-nav-group div {
-  display: grid;
-  gap: 2px;
-}
-.style-nav-group button {
-  width: 100%;
-  padding: 8px 10px;
-  color: #4e5b6d;
-  text-align: left;
-  background: transparent;
-  border: 0;
-  border-radius: 3px;
-  font-size: 15px;
-}
-.style-nav-group button:hover {
-  background: #f1f4f8;
-}
-.style-nav-group button.active {
-  color: var(--navy-deep);
-  background: var(--blue-soft);
-  box-shadow: inset 3px 0 var(--navy);
-  font-weight: 700;
-}
-.advanced-nav {
-  border-bottom: 0;
-}
-.style-editor {
-  min-height: 700px;
-  overflow: auto;
-}
-.editor-heading {
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-  align-items: start;
-  padding: 28px 30px;
-  color: white;
-  background: var(--navy);
-  border-bottom: 3px solid var(--cyan);
-}
-.editor-heading .eyebrow {
-  color: #b9dce2;
-}
-.editor-heading h1 {
-  margin: 0;
-  font-family: Georgia, "Songti SC", serif;
-  font-size: 28px;
-  font-weight: 600;
-}
-.editor-heading p:last-child {
-  max-width: 450px;
-  margin: 7px 0 0;
-  color: #c7d4e4;
-  font-size: 14px;
-  line-height: 1.6;
-}
-.inherit-chip {
-  flex: 0 0 auto;
-  padding: 6px 9px;
-  color: #d9f0f2;
-  border: 1px solid rgb(217 240 242 / 35%);
-  border-radius: 3px;
-  font-size: 13px;
-}
-.property-group {
-  margin: 0;
-  padding: 20px 30px 24px;
-  border: 0;
-  border-bottom: 1px solid var(--line);
-}
-.property-group:last-child {
-  border-bottom: 0;
-}
-.property-group-heading {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-.property-group-heading h2 {
-  margin: 0;
-  color: var(--ink);
-  font-size: 15px;
-  font-weight: 750;
-  letter-spacing: 0;
-}
-.property-group-heading p {
-  margin: 0;
-  color: #929baa;
-  font-size: 13px;
-}
-.group-note {
-  margin: 9px 0 2px;
-  color: var(--muted);
-  font-size: 14px;
-  line-height: 1.6;
-}
-.property-row {
-  display: grid;
-  grid-template-columns: minmax(130px, 1fr) minmax(180px, 260px) 32px;
-  gap: 12px;
-  align-items: center;
-  min-height: 60px;
-  border-bottom: 1px solid var(--line-soft);
-}
-.property-row:last-child {
-  border-bottom: 0;
-}
-.property-label label {
-  display: block;
-  font-size: 15px;
-  font-weight: 680;
-}
-.property-label small {
-  display: block;
-  margin-top: 3px;
-  color: #929baa;
-  font-size: 13px;
-}
-.property-control {
-  min-width: 0;
-}
-.property-control > input,
-.property-control > select,
-.unit-control,
-.color-control {
-  width: 100%;
-}
-.unit-control,
-.color-control {
-  display: flex;
-}
-.unit-control input {
-  min-width: 0;
-  border-radius: 3px 0 0 3px;
-}
-.unit-control span {
-  display: grid;
-  place-items: center;
-  min-width: 52px;
-  padding: 0 9px;
-  color: var(--muted);
-  background: #f3f5f8;
-  border: 1px solid #bcc5d1;
-  border-left: 0;
-  border-radius: 0 3px 3px 0;
-  font-size: 13px;
-}
-.color-control input[type="color"] {
-  flex: 0 0 44px;
-  min-height: 40px;
-  padding: 4px;
-  border-radius: 3px 0 0 3px;
-}
-.color-control input[type="text"] {
-  min-width: 0;
-  border-left: 0;
-  border-radius: 0 3px 3px 0;
-  font-family: Consolas, monospace;
-}
-.reset-property {
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  color: var(--muted);
-  background: white;
-  border: 1px solid var(--line);
-  border-radius: 3px;
-}
-.reset-property:hover:not(:disabled) {
-  color: var(--navy);
-  border-color: var(--navy);
-}
-.check-control {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: max-content;
-  font-size: 13px;
-}
-.check-control input {
-  width: 17px;
-  height: 17px;
-  accent-color: var(--navy);
-}
-
-.proof-panel {
-  position: sticky;
-  top: 96px;
-  overflow: hidden;
-  background: #dfe4eb;
-}
-.proof-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 45px;
-  padding: 0 16px;
-  color: #d9e2ed;
-  background: #2b394d;
-  font-size: 13px;
-  font-weight: 700;
-}
-.proof-header small {
-  color: #9faebe;
-  font-weight: 400;
-}
-.proof-dot {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  margin-right: 7px;
-  background: #73c7bc;
-  border-radius: 50%;
-  box-shadow: 0 0 0 3px rgb(115 199 188 / 14%);
-}
-.proof-page {
-  aspect-ratio: 210 / 297;
-  max-height: calc(100vh - 186px);
-  margin: 22px auto;
-  overflow: auto;
-  width: calc(100% - 44px);
-  padding: 9% 10%;
-  color: #202020;
-  background: white;
-  box-shadow: 0 12px 28px rgb(30 43 60 / 18%);
-  font-family: "Times New Roman", SimSun, serif;
-  font-size: 9pt;
-}
-.proof-cover {
-  margin-bottom: 13%;
-  text-align: center;
-}
-.proof-cover h1 {
-  margin: 0 0 8px;
-}
-.proof-cover p {
-  margin: 0;
-}
-.proof-page h2,
-.proof-page h3 {
-  margin: 0;
-}
-.proof-page p {
-  margin: 0;
-}
-.proof-page a {
-  text-decoration: underline;
-  cursor: default;
-}
-.proof-page blockquote {
-  margin-right: 0;
-  margin-left: 0;
-  padding-left: 12px;
-  border-left: 2px solid #9eabba;
-}
-.proof-caption {
-  text-align: center;
-}
-.proof-page table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.proof-page th,
-.proof-page td {
-  padding: 4px 7px;
-  border-top: 1px solid currentColor;
-  border-bottom: 1px solid currentColor;
-}
-.proof-page pre {
-  overflow: hidden;
-  padding: 10px;
-  background: #f3f4f4;
-  border: 1px solid #c8cdd3;
-  white-space: pre-wrap;
-}
-
-.raw-editor {
-  padding: 24px 30px;
-}
-.raw-editor textarea {
-  width: 100%;
-  min-height: 560px;
-  resize: vertical;
-  padding: 16px;
-  color: #d7e3ef;
-  background: #172235;
-  border: 1px solid #0b1729;
-  border-radius: 3px;
-  font-family: Consolas, monospace;
-  font-size: 14px;
-  line-height: 1.55;
-  tab-size: 2;
-}
-.raw-editor > div {
-  display: flex;
-  justify-content: end;
-  gap: 8px;
-  margin-top: 12px;
-}
-.raw-editor p {
-  min-height: 20px;
-  color: var(--muted);
-  font-size: 14px;
-}
-
-/* 通用控件与底部操作 */
-input[type="text"],
-input[type="number"],
-select,
-textarea {
-  min-height: 40px;
-  padding: 8px 10px;
-  color: var(--ink);
-  background: white;
-  border: 1px solid #bcc5d1;
-  border-radius: 3px;
-  outline: 0;
-}
-input:focus,
-select:focus,
-textarea:focus,
-button:focus-visible {
-  border-color: var(--navy);
-  box-shadow: 0 0 0 3px rgb(23 63 114 / 15%);
-  outline: 0;
-}
-.switch {
-  position: relative;
-  width: 48px;
-  height: 27px;
-  justify-self: end;
-}
-.switch input {
-  position: absolute;
-  opacity: 0;
-}
-.switch-track {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: #b5beca;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: 0.16s ease;
-}
-.switch-track::after {
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  width: 19px;
-  height: 19px;
-  background: white;
-  border-radius: 50%;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 22%);
-  content: "";
-  transition: 0.16s ease;
-}
-.switch input:checked + .switch-track {
-  background: var(--navy);
-}
-.switch input:checked + .switch-track::after {
-  transform: translateX(21px);
-}
-.switch input:disabled + .switch-track {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.action-bar {
-  position: fixed;
-  z-index: 30;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 68px;
-  padding: 10px max(28px, calc((100vw - 1404px) / 2));
-  background: rgb(255 255 255 / 96%);
-  border-top: 1px solid var(--line);
-  box-shadow: 0 -8px 24px rgb(30 45 68 / 7%);
-  backdrop-filter: blur(12px);
-}
-.status-copy {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-#status-indicator {
-  width: 7px;
-  height: 7px;
-  background: #718098;
-  border-radius: 50%;
-}
-#status-indicator.error {
-  background: var(--red);
-}
-.action-bar p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 14px;
-}
-.actions {
-  display: flex;
-  gap: 8px;
-}
-.actions button,
-.raw-editor button {
-  min-height: 40px;
-  padding: 0 17px;
-  color: white;
-  background: var(--navy);
-  border: 1px solid var(--navy);
-  border-radius: 3px;
-  font-size: 14px;
-  font-weight: 700;
-}
-button.secondary {
-  color: var(--ink);
-  background: white;
-  border-color: #b8c1cd;
-}
-
-@media (max-width: 1180px) {
-  .style-workspace {
-    grid-template-columns: 205px minmax(440px, 1fr);
-  }
-  .proof-panel {
-    position: relative;
-    top: 0;
-    grid-column: 2;
-  }
-  .proof-page {
-    max-height: none;
-  }
-  .masthead-note {
-    display: none;
-  }
-  .masthead {
-    grid-template-columns: 1fr auto;
-  }
-}
-@media (max-width: 820px) {
-  body {
-    padding-bottom: 112px;
-  }
-  .masthead {
-    position: relative;
-    grid-template-columns: 1fr;
-    gap: 12px;
-    padding: 14px 18px 0;
-  }
-  .brand {
-    justify-self: center;
-  }
-  .mode-tabs {
-    width: 100%;
-    min-height: 48px;
-  }
-  .mode-tab {
-    flex: 1;
-  }
-  .config-workspace,
-  .style-workspace {
-    grid-template-columns: 1fr;
-    padding: 18px;
-  }
-  .config-index {
-    position: static;
-    left: auto;
-    display: flex;
-    overflow-x: auto;
-    padding-bottom: 8px;
-  }
-  .config-index a {
-    flex: 0 0 auto;
-    border-bottom: 2px solid transparent;
-    border-left: 0;
-  }
-  .style-rail {
-    position: static;
-    max-height: none;
-  }
-  .style-rail > header {
-    display: none;
-  }
-  #style-index {
-    display: flex;
-    overflow-x: auto;
-  }
-  .style-nav-group {
-    flex: 0 0 auto;
-    border-right: 1px solid var(--line-soft);
-    border-bottom: 0;
-  }
-  .style-nav-group div {
-    display: flex;
-  }
-  .style-nav-group h2 {
-    margin-left: 3px;
-  }
-  .style-nav-group button {
-    width: auto;
-    white-space: nowrap;
-  }
-  .proof-panel {
-    grid-column: 1;
-  }
-  .action-bar {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 8px;
-    padding: 10px 18px;
-  }
-  .actions {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media (max-width: 560px) {
-  .config-group {
-    grid-template-columns: 1fr;
-  }
-  .config-group > header {
-    padding: 20px;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
-  }
-  .config-field,
-  .property-row {
-    grid-template-columns: 1fr 32px;
-    gap: 8px;
-    padding: 12px 0;
-  }
-  .config-field > label,
-  .property-label {
-    grid-column: 1 / -1;
-  }
-  .switch {
-    justify-self: start;
-  }
-  .editor-heading {
-    padding: 22px;
-  }
-  .inherit-chip {
-    display: none;
-  }
-  .property-group,
-  .raw-editor {
-    padding-right: 20px;
-    padding-left: 20px;
-  }
-  .actions button {
-    padding: 0 8px;
-  }
-  .proof-page {
-    width: calc(100% - 24px);
-    margin: 12px auto;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-  *,
-  *::before,
-  *::after {
-    animation: none !important;
-    transition: none !important;
-  }
-}