新增 PPT 同頁 PDF 預覽抽屜

web/static/css/page-ppt-audit-history.css

@@ -199,6 +199,110 @@
   overflow-wrap: anywhere;
 }
 
+.ppt-preview-modal[hidden] {
+  display: none;
+}
+
+body.ppt-preview-open {
+  overflow: hidden;
+}
+
+.ppt-preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1080;
+  display: grid;
+  place-items: center;
+  padding: var(--momo-space-4, 16px);
+}
+
+.ppt-preview-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(42, 37, 32, 0.48);
+  backdrop-filter: blur(6px);
+}
+
+.ppt-preview-dialog {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(1180px, 100%);
+  height: min(82vh, 860px);
+  border: 1px solid var(--obs-line);
+  border-radius: var(--momo-radius-lg, 8px);
+  background:
+    radial-gradient(circle, rgba(45, 40, 32, 0.08) 1px, transparent 1.2px),
+    var(--obs-paper);
+  background-size: 10px 10px, auto;
+  box-shadow: 0 28px 80px rgba(42, 37, 32, 0.24);
+  overflow: hidden;
+}
+
+.ppt-preview-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--momo-space-3, 12px);
+  padding: var(--momo-space-4, 16px);
+  border-bottom: 1px solid var(--obs-line);
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.ppt-preview-head h2 {
+  margin: 0 0 var(--momo-space-1, 4px);
+  color: var(--obs-ink);
+  font-size: var(--momo-text-title, 18px);
+  font-weight: var(--momo-font-weight-black, 800);
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+.ppt-preview-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--momo-space-2, 8px);
+  flex-wrap: wrap;
+}
+
+.ppt-preview-frame-wrap {
+  position: relative;
+  min-height: 0;
+  background: rgba(255, 255, 255, 0.52);
+}
+
+.ppt-preview-frame-wrap iframe {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 560px;
+  border: 0;
+  background: var(--obs-paper);
+}
+
+.ppt-preview-loading {
+  position: absolute;
+  inset: var(--momo-space-4, 16px);
+  z-index: 0;
+  display: grid;
+  place-items: center;
+  border: 1px dashed var(--obs-line);
+  border-radius: var(--momo-radius-md, 6px);
+  color: var(--obs-muted);
+  font-family: var(--momo-font-mono);
+  background:
+    radial-gradient(circle, rgba(45, 40, 32, 0.08) 1px, transparent 1.2px),
+    rgba(255, 255, 255, 0.42);
+  background-size: 10px 10px, auto;
+}
+
+.ppt-preview-frame-wrap.is-loaded .ppt-preview-loading {
+  display: none;
+}
+
 .ppt-health-board {
   display: grid;
   grid-template-columns: minmax(280px, 0.36fr) minmax(0, 0.64fr);
@@ -800,10 +904,30 @@
   .ppt-table-title,
   .ppt-workbench-head,
   .ppt-workbench-actions,
+  .ppt-preview-head,
   .ppt-run-log-head,
   .ppt-run-row,
   .ppt-coverage-row {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .ppt-preview-modal {
+    padding: 0;
+  }
+
+  .ppt-preview-dialog {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border-radius: 0;
+  }
+
+  .ppt-preview-actions {
+    justify-content: flex-start;
+  }
+
+  .ppt-preview-frame-wrap iframe {
+    min-height: calc(100vh - 168px);
+  }
 }