Michael Mainguy
3864de28e7
- Add PresentationMode component for fullscreen slide viewing - Support keyboard navigation: arrows/space for slides, escape to exit - Integrate with existing theme rendering and CSS loading system - Update PresentationsList Present button to use fullscreen mode - Add new route /presentations/:presentationId/present - Fix TypeScript errors in presentation components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
176 lines
3.3 KiB
CSS
176 lines
3.3 KiB
CSS
/* Fullscreen presentation mode styles */
|
|
.presentation-mode {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #000;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.presentation-mode.loading,
|
|
.presentation-mode.error {
|
|
flex-direction: column;
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
}
|
|
|
|
.presentation-mode .loading-spinner {
|
|
font-size: 1.2rem;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.presentation-mode .error-content {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.presentation-mode .error-content h2 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.presentation-mode .error-content p {
|
|
margin: 0 0 2rem 0;
|
|
font-size: 1.1rem;
|
|
opacity: 0.8;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.presentation-mode .exit-button {
|
|
background: #fff;
|
|
color: #000;
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.presentation-mode .exit-button:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
/* Fullscreen slide container */
|
|
.presentation-mode.fullscreen {
|
|
background: #000;
|
|
}
|
|
|
|
.presentation-mode .slide-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.presentation-mode .slide-content {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
background: #fff;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Aspect ratio classes for slides */
|
|
.presentation-mode .slide-content.aspect-16-9 {
|
|
aspect-ratio: 16/9;
|
|
width: min(90vw, calc(90vh * 16/9));
|
|
}
|
|
|
|
.presentation-mode .slide-content.aspect-4-3 {
|
|
aspect-ratio: 4/3;
|
|
width: min(90vw, calc(90vh * 4/3));
|
|
}
|
|
|
|
.presentation-mode .slide-content.aspect-16-10 {
|
|
aspect-ratio: 16/10;
|
|
width: min(90vw, calc(90vh * 16/10));
|
|
}
|
|
|
|
/* Navigation indicator */
|
|
.presentation-mode .navigation-indicator {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
color: #fff;
|
|
padding: 1rem 2rem;
|
|
border-radius: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.presentation-mode:hover .navigation-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.presentation-mode .slide-counter {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.presentation-mode .navigation-hints {
|
|
display: flex;
|
|
gap: 1rem;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.presentation-mode .navigation-hints span {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.presentation-mode .navigation-indicator {
|
|
bottom: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.presentation-mode .navigation-hints {
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.presentation-mode .slide-content {
|
|
max-width: 95vw;
|
|
max-height: 95vh;
|
|
}
|
|
}
|
|
|
|
/* Hide scrollbars in presentation mode */
|
|
.presentation-mode * {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
.presentation-mode *::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari */
|
|
}
|
|
|
|
/* Ensure theme styles work in fullscreen */
|
|
.presentation-mode .slide-content > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
} |