preview-stack

frontend/src/styles.css

@@ -109,6 +109,17 @@ button.icon-button.ghost:hover:not([disabled]) {
   justify-content: center;
 }
 
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 .icon path {
   stroke: currentColor;
   stroke-width: 1.6;
@@ -125,9 +136,9 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .app-bar {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.6rem 1.5rem;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.6rem 1.5rem 0.4rem;
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   position: sticky;
@@ -135,6 +146,12 @@ button.icon-button.ghost:hover:not([disabled]) {
   z-index: 10;
 }
 
+.app-bar__main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .app-bar__meta {
   display: flex;
   flex-direction: column;
@@ -158,9 +175,13 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.5rem;
 }
 
-.status-container {
-  padding: 0.4rem 1.5rem 0;
-  flex-shrink: 0;
+.app-bar__status {
+  margin: 0 1rem;
+  min-width: 220px;
+}
+
+.app-bar__status .status-banner {
+  margin: 0;
 }
 
 .app-main {
@@ -469,12 +490,9 @@ button.icon-button.ghost:hover:not([disabled]) {
   margin-top: 0.4rem;
 }
 
-.documents-panel thead {
-  background: transparent;
-  border-bottom: 1px solid var(--border);
-}
-
 .documents-panel thead th {
+  border-bottom: 1px solid var(--border);
+  background-color: var(--bg);
   position: sticky;
   top: 0;
   z-index: 1;
@@ -565,6 +583,33 @@ button.icon-button.ghost:hover:not([disabled]) {
   box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.9);
 }
 
+.documents-panel tbody tr.document,
+.documents-panel tbody tr.document * {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+.documents-panel tbody tr.document.focused:not(.selected) {
+  box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.45);
+}
+
+.doc-name {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.doc-name__title {
+  font-weight: 600;
+}
+
+.doc-name__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
 .documents-panel tbody tr.document.dragging {
   opacity: 0.4;
 }
@@ -660,21 +705,14 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .preview-pane {
   margin-top: 0.4rem;
-  border: 1px solid var(--border);
-  border-radius: 2px;
-  background: var(--surface-subtle);
+  border: none;
+  border-radius: 0;
+  background: transparent;
   min-height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
-}
-
-.preview-object {
-  width: 100%;
-  height: 320px;
-  border: none;
-  background: var(--surface);
+  overflow: visible;
 }
 
 .thumbnail-preview {
@@ -695,6 +733,84 @@ button.icon-button.ghost:hover:not([disabled]) {
   color: var(--muted);
 }
 
+.bulk-detail-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0.6rem 0;
+}
+
+.bulk-detail-actions .inline {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.bulk-move {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin: 0.6rem 0;
+}
+
+.bulk-move select {
+  max-width: 100%;
+}
+
+.preview-stack {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-stack--stacked {
+  width: 100%;
+  min-height: 420px;
+  flex-shrink: 0;
+}
+
+.preview-stack__item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transition: transform 120ms ease;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
+  transform-origin: center;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+
+.preview-stack .preview-stack__item.orientation-portrait {
+  width: 80%;
+  height: 100%;
+}
+
+.preview-stack .preview-stack__item.orientation-landscape {
+  width: 100%;
+  height: 80%;
+}
+
+.preview-stack__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: transparent;
+}
+
+.preview-pane--stack {
+  min-height: 260px;
+}
+
+.bulk-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin: 0.4rem 0 0.6rem;
+}
+
 .detail-panel dl {
   margin: 0;
 }