mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
feat: implement Custom Preview CSS, Reveal.js options, Large File Mode, and Interactive PDF Thumbnail Sidebar
This commit is contained in:
@@ -2372,3 +2372,254 @@ body[class*="dark"] .breadcrumb-bar {
|
||||
@keyframes analyticsSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
|
||||
body[class*="dark"] .analytics-modal { background:var(--gray-800,#1f2937); }
|
||||
body[class*="dark"] .word-tag { background:var(--gray-700,#374151); }
|
||||
|
||||
/* ========================================
|
||||
Interactive PDF Thumbnail Sidebar Styles
|
||||
======================================== */
|
||||
.pdf-editor-body.side-by-side {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
height: 550px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdf-editor-left-panel {
|
||||
flex: 1.2;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pdf-editor-right-panel {
|
||||
flex: 0.8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid var(--border-color, #e5e7eb);
|
||||
padding-left: 16px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdf-editor-right-panel h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.pdf-editor-right-panel .sidebar-help {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary, #ffffff);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 8px;
|
||||
transition: all var(--transition-speed, 0.3s) var(--transition-ease);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--primary-light, #8b9aff);
|
||||
}
|
||||
|
||||
.pdf-thumbnail-card.marked-delete {
|
||||
border-color: var(--error, #ef4444);
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
.pdf-thumbnail-card.marked-delete::after {
|
||||
content: "DELETE";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-15deg);
|
||||
background: rgba(239, 68, 68, 0.95);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-header .badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-tertiary, #f3f4f6);
|
||||
color: var(--text-primary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--bg-secondary, #f9fafb);
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* CSS Rotations */
|
||||
.rot90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.rot180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.rot270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.pdf-thumbnail-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-controls button,
|
||||
.pdf-thumbnail-controls label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.btn-rotate-thumbnail {
|
||||
background: var(--bg-tertiary, #f3f4f6);
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
color: var(--text-primary);
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-rotate-thumbnail:hover {
|
||||
background: var(--primary-light, #8b9aff);
|
||||
color: #fff;
|
||||
border-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.delete-thumbnail-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.delete-thumbnail-checkbox input {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pdf-thumbnail-reorder {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.btn-reorder-left,
|
||||
.btn-reorder-right {
|
||||
flex: 1;
|
||||
background: var(--bg-tertiary, #f3f4f6);
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
color: var(--text-primary);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-reorder-left:hover:not(:disabled),
|
||||
.btn-reorder-right:hover:not(:disabled) {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-reorder-left:disabled,
|
||||
.btn-reorder-right:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading-thumbnails,
|
||||
.thumbnail-error {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.thumbnail-error {
|
||||
color: var(--error, #ef4444);
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
body[class*="dark"] .pdf-thumbnail-card {
|
||||
background: var(--gray-800, #1f2937);
|
||||
border-color: var(--gray-700, #374151);
|
||||
}
|
||||
body[class*="dark"] .pdf-thumbnail-header .badge {
|
||||
background: var(--gray-700, #374151);
|
||||
color: var(--gray-200);
|
||||
}
|
||||
body[class*="dark"] .canvas-container {
|
||||
background: var(--gray-900, #111827);
|
||||
border-color: var(--gray-700);
|
||||
}
|
||||
body[class*="dark"] .btn-rotate-thumbnail,
|
||||
body[class*="dark"] .btn-reorder-left,
|
||||
body[class*="dark"] .btn-reorder-right {
|
||||
background: var(--gray-700, #374151);
|
||||
border-color: var(--gray-600);
|
||||
color: var(--gray-200);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user