mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-12-18 20:04:17 +01:00
500 lines
9.7 KiB
CSS
500 lines
9.7 KiB
CSS
/* =========================
|
|
FileEditor Card UI Styles
|
|
========================= */
|
|
|
|
.card {
|
|
background: var(--file-card-bg);
|
|
border-radius: 0.0625rem;
|
|
cursor: pointer;
|
|
transition: box-shadow 0.18s ease, outline-color 0.18s ease, transform 0.18s ease;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
overflow: hidden;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card[data-selected="true"] {
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* While dragging */
|
|
.card.dragging,
|
|
.card:global(.dragging) {
|
|
outline: 1px solid var(--border-strong);
|
|
box-shadow: var(--shadow-md);
|
|
transform: none !important;
|
|
}
|
|
|
|
/* -------- Header -------- */
|
|
.header {
|
|
height: 2.25rem;
|
|
border-radius: 0.0625rem 0.0625rem 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 6px;
|
|
user-select: none;
|
|
background: var(--bg-toolbar);
|
|
color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border-default);
|
|
}
|
|
|
|
.headerResting {
|
|
background: #3B4B6E; /* dark blue for unselected in light mode */
|
|
color: #FFFFFF;
|
|
border-bottom: 1px solid var(--border-default);
|
|
}
|
|
|
|
.headerSelected {
|
|
background: var(--header-selected-bg);
|
|
color: var(--header-selected-fg);
|
|
border-bottom: 1px solid var(--header-selected-bg);
|
|
}
|
|
|
|
/* Error highlight (transient) */
|
|
.headerError {
|
|
background: var(--color-red-200);
|
|
color: var(--text-primary);
|
|
border-bottom: 2px solid var(--color-red-500);
|
|
}
|
|
|
|
/* Unsupported (but not errored) header appearance */
|
|
.headerUnsupported {
|
|
background: var(--unsupported-bar-bg); /* neutral gray */
|
|
color: #FFFFFF;
|
|
border-bottom: 1px solid var(--unsupported-bar-border);
|
|
}
|
|
|
|
/* Selected border color in light mode */
|
|
:global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
|
|
outline-color: var(--card-selected-border);
|
|
}
|
|
|
|
/* Reserve space for checkbox instead of logo */
|
|
.logoMark {
|
|
margin-left: 8px;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.headerIndex {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.headerActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.headerIconButton {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
/* Menu dropdown */
|
|
.menuDropdown {
|
|
min-width: 210px;
|
|
}
|
|
|
|
/* -------- Title / Meta -------- */
|
|
.title {
|
|
line-height: 1.2;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.meta {
|
|
margin-top: 2px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* -------- Preview area -------- */
|
|
.previewBox {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--file-card-bg);
|
|
}
|
|
|
|
.previewPaper {
|
|
width: 100%;
|
|
height: calc(100% - 6px);
|
|
min-height: 9rem;
|
|
justify-content: center;
|
|
display: grid;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--file-card-bg);
|
|
}
|
|
|
|
/* Thumbnail fallback */
|
|
.previewPaper[data-thumb-missing="true"]::after {
|
|
content: "No preview";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Drag handle grip */
|
|
.dragHandle {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
right: 6px;
|
|
color: var(--text-secondary);
|
|
z-index: 1;
|
|
cursor: grab;
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Actions Overlay */
|
|
.actionsOverlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 44px; /* just below header */
|
|
background: var(--bg-toolbar);
|
|
border-bottom: 1px solid var(--border-default);
|
|
z-index: 20;
|
|
overflow: hidden;
|
|
animation: slideDown 140ms ease-out;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
transform: translateY(-8px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.actionRow {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.actionRow:hover {
|
|
background: var(--hover-bg);
|
|
}
|
|
|
|
.actionDanger {
|
|
color: var(--text-brand-accent);
|
|
}
|
|
|
|
.actionsDivider {
|
|
height: 1px;
|
|
background: var(--border-default);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* Pin indicator */
|
|
.pinIndicator {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: 4px;
|
|
z-index: 1;
|
|
color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.pinned {
|
|
color: #FFC107 !important;
|
|
}
|
|
|
|
|
|
/* Unsupported file indicator */
|
|
.unsupportedPill {
|
|
margin-left: 1.75rem;
|
|
background: #6B7280;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 80px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Error pill shown when a file failed processing */
|
|
.errorPill {
|
|
margin-left: 1.75rem;
|
|
background: var(--color-red-500);
|
|
color: #ffffff;
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 56px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 1s infinite;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.card,
|
|
.menuDropdown {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* =========================
|
|
DARK MODE OVERRIDES
|
|
========================= */
|
|
:global([data-mantine-color-scheme="dark"]) .card {
|
|
outline-color: #3A4047; /* deselected stroke */
|
|
}
|
|
|
|
:global([data-mantine-color-scheme="dark"]) .card[data-selected="true"] {
|
|
outline-color: #4B525A; /* selected stroke (subtle grey) */
|
|
}
|
|
|
|
:global([data-mantine-color-scheme="dark"]) .headerResting {
|
|
background: #1F2329; /* requested default unselected color */
|
|
color: var(--tool-header-text); /* #D0D6DC */
|
|
border-bottom-color: var(--tool-header-border); /* #3A4047 */
|
|
}
|
|
|
|
:global([data-mantine-color-scheme="dark"]) .headerSelected {
|
|
background: var(--tool-header-border); /* #3A4047 */
|
|
color: var(--tool-header-text); /* #D0D6DC */
|
|
border-bottom-color: var(--tool-header-border);
|
|
}
|
|
|
|
:global([data-mantine-color-scheme="dark"]) .title {
|
|
color: #D0D6DC; /* title text */
|
|
}
|
|
|
|
:global([data-mantine-color-scheme="dark"]) .meta {
|
|
color: #6B7280; /* subtitle text */
|
|
}
|
|
|
|
/* Light mode selected header stroke override */
|
|
:global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
|
|
outline-color: #3B4B6E;
|
|
}
|
|
|
|
/* =========================
|
|
Add File Card Styles
|
|
========================= */
|
|
|
|
.addFileCard {
|
|
background: var(--file-card-bg);
|
|
border: 2px dashed var(--border-default);
|
|
border-radius: 0.0625rem;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
overflow: hidden;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.addFileCard:hover {
|
|
opacity: 1;
|
|
border-color: var(--color-blue-500);
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.addFileCard:focus {
|
|
outline: 2px solid var(--color-blue-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.addFileHeader {
|
|
background: var(--bg-subtle);
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--border-default);
|
|
}
|
|
|
|
.addFileCard:hover .addFileHeader {
|
|
background: var(--color-blue-500);
|
|
color: white;
|
|
}
|
|
|
|
.addFileContent {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.5rem 1rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.addFileIcon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border-radius: 50%;
|
|
background: var(--bg-subtle);
|
|
transition: background-color 0.18s ease;
|
|
}
|
|
|
|
.addFileCard:hover .addFileIcon {
|
|
background: var(--color-blue-50);
|
|
}
|
|
|
|
.addFileText {
|
|
font-weight: 500;
|
|
transition: color 0.18s ease;
|
|
}
|
|
|
|
.addFileCard:hover .addFileText {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.addFileSubtext {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* -----------------------
|
|
Async Job Progress HUD
|
|
----------------------- */
|
|
.jobProgressContainer {
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
z-index: 6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.jobProgressRow {
|
|
pointer-events: auto;
|
|
border-radius: 12px;
|
|
padding: 10px 14px 12px;
|
|
background: rgba(18, 26, 44, 0.88);
|
|
box-shadow: 0 18px 36px rgba(11, 16, 28, 0.25);
|
|
backdrop-filter: blur(12px);
|
|
color: #f1f6ff;
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
.jobProgressRow[data-status='failed'] {
|
|
background: rgba(128, 28, 38, 0.9);
|
|
}
|
|
|
|
:global([data-mantine-color-scheme='dark']) .jobProgressRow {
|
|
background: rgba(28, 39, 58, 0.9);
|
|
color: var(--mantine-color-gray-2);
|
|
}
|
|
|
|
:global([data-mantine-color-scheme='dark']) .jobProgressRow[data-status='failed'] {
|
|
background: rgba(138, 34, 43, 0.92);
|
|
}
|
|
|
|
.jobProgressHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.jobProgressLabel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.jobProgressValue {
|
|
font-variant-numeric: tabular-nums;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.jobProgressTrack {
|
|
position: relative;
|
|
margin-top: 8px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: rgba(241, 246, 255, 0.25);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.jobProgressRow[data-status='failed'] .jobProgressTrack {
|
|
background: rgba(255, 255, 255, 0.23);
|
|
}
|
|
|
|
.jobProgressFill {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #5aa5ff 0%, #206de5 100%);
|
|
transition: width 160ms ease;
|
|
}
|
|
|
|
.jobProgressRow[data-status='queued'] .jobProgressFill {
|
|
background: linear-gradient(90deg, #cfd8dc 0%, #a7b6bf 100%);
|
|
}
|
|
|
|
.jobProgressRow[data-status='failed'] .jobProgressFill {
|
|
background: linear-gradient(90deg, #ff8a80 0%, #e53935 100%);
|
|
}
|
|
|
|
.jobProgressError {
|
|
margin-top: 8px;
|
|
font-size: 0.72rem;
|
|
line-height: 1.3;
|
|
opacity: 0.92;
|
|
}
|