James BruntonandGitHub
d714a1617f
# Description of Changes Add shortcut icons for Pin and Download, and rename Delete to Close for consistency with the rest of the tool.
402 lines
7.7 KiB
CSS
402 lines
7.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;
|
|
}
|