@veltra/desktop 1.0.10 → 1.0.11

package/dist/components/file-viewer/style2.css

@@ -16,16 +16,20 @@
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
 .u-file-viewer {
+  --u-file-viewer-canvas: #101114;
+  --u-file-viewer-canvas-soft: #17191f;
+  --u-file-viewer-page-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
   position: relative;
   display: flex;
   width: 100%;
   height: 100%;
-  min-height: 480px;
+  min-height: 520px;
   color: var(--u-text-color-main);
   background: var(--u-bg-color-top);
-  border-radius: 12px;
-  overflow: hidden;
   border: 1px solid var(--u-border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
 }
 .u-file-viewer__inner {
   display: contents;
@@ -35,9 +39,9 @@
   inset: 0;
   z-index: 2000;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: clamp(16px, 3vw, 48px);
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 0;
   min-height: 0;
   max-height: none;
   background: transparent;
@@ -45,56 +49,70 @@
   border-radius: 0;
   overflow: visible;
   outline: none;
+  box-shadow: none;
 }
 .u-file-viewer.is-modal .u-file-viewer__backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 23, 42, 0.52);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  background: linear-gradient(180deg, rgba(5, 7, 11, 0.78), rgba(4, 5, 8, 0.94)), linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.035));
+  backdrop-filter: blur(18px) saturate(1.16);
+  -webkit-backdrop-filter: blur(18px) saturate(1.16);
 }
 .u-file-viewer.is-modal .u-file-viewer__inner {
+  display: contents;
+}
+.u-file-viewer.is-modal .u-file-viewer__sidebar, .u-file-viewer.is-modal .u-file-viewer__stage {
   position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  max-width: 1440px;
-  background: var(--u-bg-color-top);
-  border: 1px solid var(--u-border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32), 0 2px 8px rgba(15, 23, 42, 0.18);
   z-index: 1;
+  pointer-events: auto;
 }
 .u-file-viewer__sidebar {
   display: flex;
   flex-direction: column;
-  border-right: 1px solid var(--u-border-color);
-  background: var(--u-bg-color-middle);
   flex-shrink: 0;
-  min-width: 0;
+  min-width: 220px;
+  max-width: 380px;
+  min-height: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%), var(--u-bg-color-middle);
+  border-right: 1px solid var(--u-border-color);
+}
+.u-file-viewer.is-modal .u-file-viewer__sidebar {
+  color: rgba(255, 255, 255, 0.82);
+  background: linear-gradient(90deg, rgba(8, 10, 15, 0.76), rgba(8, 10, 15, 0.58) 78%, rgba(8, 10, 15, 0.34));
+  border-right: 1px solid rgba(255, 255, 255, 0.055);
+  box-shadow: none;
+  backdrop-filter: blur(18px) saturate(1.08);
+  -webkit-backdrop-filter: blur(18px) saturate(1.08);
 }
 .u-file-viewer__sidebar-head {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  align-items: baseline;
-  padding: 18px 20px 10px;
+  gap: 12px;
+  padding: 14px 12px 6px;
   color: var(--u-text-color-title);
 }
+.u-file-viewer.is-modal .u-file-viewer__sidebar-head {
+  color: rgba(255, 255, 255, 0.68);
+}
 .u-file-viewer__sidebar-title {
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 620;
+  line-height: 1.2;
 }
 .u-file-viewer__sidebar-count {
-  font-size: 12px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
   color: var(--u-text-color-second);
 }
+.u-file-viewer.is-modal .u-file-viewer__sidebar-count, .u-file-viewer.is-modal .u-file-viewer__item-size {
+  color: rgba(255, 255, 255, 0.48);
+}
 .u-file-viewer__list {
   flex: 1;
   min-height: 0;
-  padding: 4px 10px 16px;
+  padding: 4px 8px 12px;
 }
 .u-file-viewer__list-empty {
   display: flex;
@@ -104,160 +122,334 @@
   color: var(--u-text-color-second);
 }
 .u-file-viewer__item {
+  position: relative;
   display: flex;
-  gap: 12px;
   align-items: center;
-  padding: 10px 12px;
-  margin: 2px 0;
-  border-radius: 8px;
+  gap: 12px;
+  min-height: 42px;
+  padding: 7px 8px 7px 12px;
+  margin: 0;
+  border-radius: 6px;
   cursor: pointer;
-  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
+  transition: background 0.18s ease, color 0.18s ease;
+}
+.u-file-viewer__item::before {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--u-color-primary);
+  content: "";
+  opacity: 0;
+  transform: scaleY(0.45);
+  transition: opacity 0.18s ease, transform 0.18s ease;
 }
 .u-file-viewer__item:hover {
   background: var(--u-bg-color-hover);
 }
 .u-file-viewer__item.is-active {
-  background: color-mix(in srgb, var(--u-color-primary) 14%, transparent);
-  color: var(--u-color-primary);
+  background: color-mix(in srgb, var(--u-color-primary) 8%, transparent);
+}
+.u-file-viewer__item.is-active::before {
+  opacity: 1;
+  transform: scaleY(1);
+}
+.u-file-viewer.is-modal .u-file-viewer__item {
+  color: rgba(255, 255, 255, 0.78);
+}
+.u-file-viewer.is-modal .u-file-viewer__item:hover {
+  background: rgba(255, 255, 255, 0.055);
+}
+.u-file-viewer.is-modal .u-file-viewer__item.is-active {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.07);
+}
+.u-file-viewer.is-modal .u-file-viewer__item.is-active::before {
+  background: rgba(255, 255, 255, 0.82);
 }
 .u-file-viewer__item-meta {
   display: flex;
+  flex: 1;
   flex-direction: column;
+  gap: 4px;
   min-width: 0;
-  gap: 2px;
-  flex: 1;
 }
 .u-file-viewer__item-name {
+  color: var(--u-text-color-title);
   font-size: 13px;
-  line-height: 1.4;
+  font-weight: 520;
+  line-height: 1.35;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.u-file-viewer.is-modal .u-file-viewer__item-name {
+  color: rgba(255, 255, 255, 0.86);
+}
 .u-file-viewer__item-size {
   font-size: 11px;
+  line-height: 1;
   color: var(--u-text-color-second);
 }
-.u-file-viewer__badge {
+.u-file-viewer__item-kind {
   flex-shrink: 0;
+  min-width: 30px;
+  color: var(--u-text-color-placeholder);
+  font-size: 10px;
+  font-weight: 720;
+  line-height: 1;
+  text-align: right;
+}
+.u-file-viewer.is-modal .u-file-viewer__item-kind {
+  color: rgba(255, 255, 255, 0.38);
+}
+.u-file-viewer.is-modal .u-file-viewer__item.is-active .u-file-viewer__item-kind {
+  color: rgba(255, 255, 255, 0.68);
+}
+.u-file-viewer__badge {
+  --u-file-viewer-kind: var(--u-text-color-second);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 42px;
-  height: 28px;
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  color: #fff;
-  background: var(--u-text-color-placeholder);
+  flex-shrink: 0;
+  width: 40px;
+  height: 26px;
+  border: 1px solid color-mix(in srgb, var(--u-file-viewer-kind) 28%, transparent);
+  border-radius: 7px;
+  color: var(--u-file-viewer-kind);
+  background: color-mix(in srgb, var(--u-file-viewer-kind) 10%, transparent);
+  font-size: 10px;
+  font-weight: 760;
+  line-height: 1;
 }
-.u-file-viewer__badge__badge--image {
-  background: #0ea5e9;
+.u-file-viewer__badge--image {
+  --u-file-viewer-kind: #0891b2;
 }
-.u-file-viewer__badge__badge--video {
-  background: #ef4444;
+.u-file-viewer__badge--video {
+  --u-file-viewer-kind: #db2777;
 }
-.u-file-viewer__badge__badge--pdf {
-  background: #dc2626;
+.u-file-viewer__badge--pdf {
+  --u-file-viewer-kind: #dc2626;
 }
-.u-file-viewer__badge__badge--sheet {
-  background: #16a34a;
+.u-file-viewer__badge--sheet {
+  --u-file-viewer-kind: #15803d;
 }
-.u-file-viewer__badge__badge--docx {
-  background: #2563eb;
+.u-file-viewer__badge--docx {
+  --u-file-viewer-kind: #2563eb;
 }
-.u-file-viewer__badge__badge--text {
-  background: #64748b;
+.u-file-viewer__badge--text {
+  --u-file-viewer-kind: #64748b;
 }
 .u-file-viewer__stage {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
+  background: var(--u-bg-color-top);
+}
+.u-file-viewer.is-modal .u-file-viewer__stage {
+  position: relative;
+  color: rgba(255, 255, 255, 0.86);
+  background: transparent;
 }
 .u-file-viewer__stage-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 14px 22px;
+  min-height: 66px;
+  padding: 12px 14px 12px 18px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--u-bg-color-top);
   border-bottom: 1px solid var(--u-border-color);
-  background: var(--u-bg-color-top);
   flex-shrink: 0;
 }
+.u-file-viewer.is-modal .u-file-viewer__stage-head {
+  min-height: 64px;
+  color: rgba(255, 255, 255, 0.9);
+  background: linear-gradient(180deg, rgba(9, 11, 16, 0.72), rgba(9, 11, 16, 0.28) 72%, transparent);
+  border-bottom-color: transparent;
+  box-shadow: none;
+  backdrop-filter: blur(16px) saturate(1.08);
+  -webkit-backdrop-filter: blur(16px) saturate(1.08);
+}
 .u-file-viewer__stage-title {
   display: flex;
   align-items: center;
+  min-width: 0;
   gap: 12px;
+}
+.u-file-viewer__stage-copy {
+  display: flex;
+  flex-direction: column;
   min-width: 0;
+  gap: 5px;
 }
 .u-file-viewer__stage-name {
-  font-size: 14px;
-  font-weight: 600;
   color: var(--u-text-color-title);
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.u-file-viewer.is-modal .u-file-viewer__stage-name {
+  color: rgba(255, 255, 255, 0.94);
+}
 .u-file-viewer__stage-sub {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
   color: var(--u-text-color-second);
-  flex-shrink: 0;
+  font-size: 12px;
+  line-height: 1;
+}
+.u-file-viewer__stage-sub span + span {
+  position: relative;
+  padding-left: 8px;
+}
+.u-file-viewer__stage-sub span + span::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.55;
+  content: "";
+  transform: translateY(-50%);
+}
+.u-file-viewer.is-modal .u-file-viewer__stage-sub {
+  color: rgba(255, 255, 255, 0.52);
 }
 .u-file-viewer__stage-actions {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
   flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.u-file-viewer__action-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 34px;
+  padding: 2px;
+  border: 1px solid color-mix(in srgb, var(--u-border-color) 86%, transparent);
+  border-radius: 8px;
+  background: var(--u-bg-color-middle);
+}
+.u-file-viewer.is-modal .u-file-viewer__action-group {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055) inset;
 }
 .u-file-viewer__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: 30px;
-  padding: 0 14px;
+  padding: 0 12px;
+  border: 1px solid transparent;
   border-radius: 6px;
-  border: 1px solid var(--u-border-color);
   background: transparent;
-  color: inherit;
+  color: var(--u-text-color-second);
   font-size: 12px;
+  line-height: 1;
   cursor: pointer;
-  transition: background 0.18s, border-color 0.18s, color 0.18s;
+  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
 }
 .u-file-viewer__action:not(:disabled):hover {
-  border-color: var(--u-color-primary);
   color: var(--u-color-primary);
+  background: color-mix(in srgb, var(--u-color-primary) 10%, transparent);
+}
+.u-file-viewer__action:not(:disabled):active {
+  transform: translateY(1px);
 }
 .u-file-viewer__action:disabled {
-  opacity: 0.45;
+  opacity: 0.38;
   cursor: not-allowed;
 }
-.u-file-viewer__action__action--primary {
-  background: var(--u-color-primary);
-  border-color: var(--u-color-primary);
-  color: #fff;
+.u-file-viewer.is-modal .u-file-viewer__action {
+  color: rgba(255, 255, 255, 0.68);
 }
-.u-file-viewer__action__action--primary:not(:disabled):hover {
+.u-file-viewer.is-modal .u-file-viewer__action:not(:disabled):hover {
   color: #fff;
-  filter: brightness(1.05);
+  background: rgba(255, 255, 255, 0.1);
 }
-.u-file-viewer__action__action--icon {
+.u-file-viewer__action--icon {
   width: 30px;
   padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 4px;
-  color: var(--u-text-color-second);
 }
-.u-file-viewer__action__action--icon:not(:disabled):hover {
-  border-color: var(--u-color-danger);
-  color: var(--u-color-danger);
+.u-file-viewer__action--primary {
+  color: #fff;
+  background: var(--u-color-primary);
+  border-color: var(--u-color-primary);
+}
+.u-file-viewer__action--primary:not(:disabled):hover {
+  color: #fff;
+  background: color-mix(in srgb, var(--u-color-primary) 88%, #fff);
+}
+.u-file-viewer.is-modal .u-file-viewer__action--primary {
+  color: #06111d;
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(255, 255, 255, 0.92);
+}
+.u-file-viewer.is-modal .u-file-viewer__action--primary:not(:disabled):hover {
+  color: #06111d;
+  background: #fff;
+}
+.u-file-viewer__zoom-value {
+  min-width: 48px;
+  color: var(--u-text-color-title);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  user-select: none;
+}
+.u-file-viewer.is-modal .u-file-viewer__zoom-value {
+  color: rgba(255, 255, 255, 0.84);
 }
 .u-file-viewer__body {
   position: relative;
   flex: 1;
   min-height: 0;
-  background: var(--u-bg-color-bottom);
   overflow: hidden;
+  background: linear-gradient(180deg, var(--u-file-viewer-canvas-soft), var(--u-file-viewer-canvas)), var(--u-file-viewer-canvas);
+}
+.u-file-viewer.is-modal .u-file-viewer__body {
+  background: linear-gradient(180deg, rgba(13, 16, 23, 0.58), rgba(5, 6, 10, 0.82)), linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.025));
+  box-shadow: none;
+}
+.u-file-viewer__viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.u-file-viewer__previewer {
+  transform-origin: center center;
+  transition: transform 0.18s ease;
+  will-change: transform;
+}
+.u-file-viewer__viewport.is-pannable {
+  cursor: grab;
+  touch-action: none;
+}
+.u-file-viewer__viewport.is-dragging {
+  cursor: grabbing;
+}
+.u-file-viewer__viewport.is-dragging .u-file-viewer__previewer {
+  transition: none;
+  pointer-events: none;
 }
 .u-file-viewer__empty {
   width: 100%;
@@ -265,7 +457,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--u-text-color-second);
+  color: rgba(255, 255, 255, 0.68);
 }
 .u-file-viewer__image {
   position: absolute;
@@ -273,22 +465,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: clamp(20px, 3vw, 44px);
   user-select: none;
 }
 .u-file-viewer__image img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  transition: transform 0.3s ease;
   border-radius: 6px;
-  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
+  background: #fff;
+  box-shadow: var(--u-file-viewer-page-shadow);
 }
-.u-file-viewer__image.is-actual img {
-  max-width: none;
-  max-height: none;
-  object-fit: none;
-  cursor: zoom-out;
+.u-file-viewer.is-modal .u-file-viewer__image {
+  padding: clamp(18px, 4vw, 64px);
+}
+.u-file-viewer.is-modal .u-file-viewer__image img {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 4px;
+  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 .u-file-viewer__video {
   position: absolute;
@@ -303,19 +497,27 @@
   max-height: 100%;
   outline: none;
 }
+.u-file-viewer.is-modal .u-file-viewer__video {
+  background: transparent;
+}
 .u-file-viewer__text {
   position: absolute;
   inset: 0;
+  background: #111318;
+}
+.u-file-viewer.is-modal .u-file-viewer__text {
+  background: rgba(5, 7, 10, 0.76);
 }
 .u-file-viewer__text-pre {
+  min-width: max-content;
   margin: 0;
-  padding: 20px 24px;
+  padding: 22px 26px;
+  color: rgba(255, 255, 255, 0.86);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre;
+  line-height: 1.65;
   tab-size: 2;
-  color: var(--u-text-color-main);
+  white-space: pre;
 }
 .u-file-viewer__pdf {
   position: absolute;
@@ -325,46 +527,66 @@
 .u-file-viewer__pdf-viewport {
   width: 100%;
   height: 100%;
-  background: var(--u-bg-color-middle);
+  background: transparent;
 }
 .u-file-viewer__pdf-page {
-  margin: 16px auto;
+  margin: 24px auto;
   background: #fff;
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+  box-shadow: var(--u-file-viewer-page-shadow);
+}
+.u-file-viewer.is-modal .u-file-viewer__pdf-page {
+  margin: clamp(24px, 3vw, 44px) auto;
+  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 .u-file-viewer__docx {
   position: absolute;
   inset: 0;
-  background: var(--u-bg-color-middle);
+  background: transparent;
 }
 .u-file-viewer__docx-body {
-  padding: 24px;
+  min-height: 100%;
+  padding: clamp(22px, 3vw, 44px);
 }
 .u-file-viewer__docx-body :deep(.u-file-viewer__docx-doc) {
   margin: 0 auto;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
   color: #222;
+  background: #fff;
+  box-shadow: var(--u-file-viewer-page-shadow);
+}
+.u-file-viewer.is-modal .u-file-viewer__docx-body {
+  padding: clamp(24px, 4vw, 64px);
+}
+.u-file-viewer.is-modal .u-file-viewer__docx-body :deep(.u-file-viewer__docx-doc) {
+  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 .u-file-viewer__sheet {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
-  background: var(--u-bg-color-middle);
+  background: var(--u-bg-color-top);
+}
+.u-file-viewer.is-modal .u-file-viewer__sheet {
+  background: rgba(8, 10, 14, 0.82);
 }
 .u-file-viewer__sheet-note {
   padding: 8px 16px;
-  font-size: 12px;
   color: var(--u-text-color-second);
   background: var(--u-bg-color-top);
   border-bottom: 1px solid var(--u-border-color);
+  font-size: 12px;
+  line-height: 1.4;
   flex-shrink: 0;
 }
+.u-file-viewer.is-modal .u-file-viewer__sheet-note, .u-file-viewer.is-modal .u-file-viewer__sheet-tabs {
+  color: rgba(255, 255, 255, 0.62);
+  background: rgba(10, 12, 18, 0.78);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
 .u-file-viewer__sheet-tabs {
   display: flex;
-  gap: 4px;
-  padding: 8px 12px;
+  gap: 6px;
+  padding: 9px 12px;
   border-bottom: 1px solid var(--u-border-color);
   background: var(--u-bg-color-top);
   flex-shrink: 0;
@@ -374,21 +596,34 @@
   flex-shrink: 0;
   height: 28px;
   padding: 0 12px;
-  border-radius: 6px;
   border: 1px solid transparent;
+  border-radius: 6px;
   background: transparent;
   color: var(--u-text-color-second);
   font-size: 12px;
   cursor: pointer;
-  transition: background 0.18s, color 0.18s;
+  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
 }
 .u-file-viewer__sheet-tab:hover {
   background: var(--u-bg-color-hover);
   color: var(--u-text-color-main);
 }
 .u-file-viewer__sheet-tab.is-active {
-  background: color-mix(in srgb, var(--u-color-primary) 14%, transparent);
   color: var(--u-color-primary);
+  background: color-mix(in srgb, var(--u-color-primary) 11%, transparent);
+  border-color: color-mix(in srgb, var(--u-color-primary) 22%, transparent);
+}
+.u-file-viewer.is-modal .u-file-viewer__sheet-tab {
+  color: rgba(255, 255, 255, 0.58);
+}
+.u-file-viewer.is-modal .u-file-viewer__sheet-tab:hover {
+  color: rgba(255, 255, 255, 0.88);
+  background: rgba(255, 255, 255, 0.07);
+}
+.u-file-viewer.is-modal .u-file-viewer__sheet-tab.is-active {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.13);
 }
 .u-file-viewer__sheet-stage {
   flex: 1;
@@ -401,14 +636,42 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--u-text-color-second);
+  color: rgba(255, 255, 255, 0.72);
+  background: color-mix(in srgb, var(--u-file-viewer-canvas) 74%, transparent);
   font-size: 13px;
   pointer-events: none;
 }
+@media (max-width: 720px) {
+  .u-file-viewer:not(.is-modal) {
+    flex-direction: column;
+  }
+  .u-file-viewer.is-modal {
+    flex-direction: column;
+  }
+  .u-file-viewer__sidebar {
+    width: 100% !important;
+    max-width: none;
+    height: 164px;
+    border-right: none;
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .u-file-viewer.is-modal .u-file-viewer__sidebar {
+    border-bottom-color: rgba(255, 255, 255, 0.08);
+    border-right: none;
+  }
+  .u-file-viewer__stage-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .u-file-viewer__stage-actions {
+    justify-content: flex-start;
+    width: 100%;
+  }
+}
 
 .u-file-viewer-fade-enter-active,
 .u-file-viewer-fade-leave-active {
-  transition: opacity 0.22s ease, transform 0.22s ease;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .u-file-viewer-fade-enter-from,
@@ -419,27 +682,15 @@
 
 .u-file-viewer-modal-enter-active,
 .u-file-viewer-modal-leave-active {
-  transition: opacity 0.22s ease;
+  transition: opacity 0.18s ease;
+  will-change: opacity;
 }
-.u-file-viewer-modal-enter-active .u-file-viewer__inner,
-.u-file-viewer-modal-leave-active .u-file-viewer__inner {
-  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-.u-file-viewer-modal-enter-active .u-file-viewer__backdrop,
-.u-file-viewer-modal-leave-active .u-file-viewer__backdrop {
-  transition: opacity 0.22s ease;
+
+.u-file-viewer-modal-leave-active {
+  pointer-events: none;
 }
 
 .u-file-viewer-modal-enter-from,
 .u-file-viewer-modal-leave-to {
-  opacity: 1;
-}
-.u-file-viewer-modal-enter-from .u-file-viewer__inner,
-.u-file-viewer-modal-leave-to .u-file-viewer__inner {
-  opacity: 0;
-  transform: translateY(12px) scale(0.985);
-}
-.u-file-viewer-modal-enter-from .u-file-viewer__backdrop,
-.u-file-viewer-modal-leave-to .u-file-viewer__backdrop {
   opacity: 0;
 }