375d702b19
All checks were successful
GBCI / build (push) Successful in 14m45s
- Added a new navigation style with responsive design in client-nav.css. - Created a comprehensive editor style in editor/style.css for better user experience. - Introduced paper style for ProseMirror editor with enhanced text formatting options. - Developed a media player component with waveform visualization and media library in player/page.tsx. - Styled media player controls and sliders for improved usability in player/style.css. - Implemented media type detection for audio, video, and slides. - Added keyboard shortcuts for media control and navigation.
423 lines
No EOL
7.8 KiB
CSS
423 lines
No EOL
7.8 KiB
CSS
:root {
|
|
/* 3DBevel Theme */
|
|
--background: 0 0% 80%;
|
|
--foreground: 0 0% 10%;
|
|
--card: 0 0% 75%;
|
|
--card-foreground: 0 0% 10%;
|
|
--popover: 0 0% 80%;
|
|
--popover-foreground: 0 0% 10%;
|
|
--primary: 210 80% 40%;
|
|
--primary-foreground: 0 0% 80%;
|
|
--secondary: 0 0% 70%;
|
|
--secondary-foreground: 0 0% 10%;
|
|
--muted: 0 0% 65%;
|
|
--muted-foreground: 0 0% 30%;
|
|
--accent: 30 80% 40%;
|
|
--accent-foreground: 0 0% 80%;
|
|
--destructive: 0 85% 60%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 0 0% 70%;
|
|
--input: 0 0% 70%;
|
|
--ring: 210 80% 40%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.word-clone {
|
|
min-height: 100vh;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Title Bar */
|
|
.title-bar {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 2px solid hsl(var(--border));
|
|
}
|
|
|
|
.title-bar h1 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.title-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.title-input {
|
|
background: hsl(var(--input));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Quick Access Toolbar */
|
|
.quick-access {
|
|
background: hsl(var(--card));
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
padding: 4px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.quick-access-btn {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
color: hsl(var(--foreground));
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.quick-access-btn:hover {
|
|
background: hsl(var(--muted));
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
/* Ribbon */
|
|
.ribbon {
|
|
background: hsl(var(--card));
|
|
border-bottom: 2px solid hsl(var(--border));
|
|
}
|
|
|
|
.ribbon-tabs {
|
|
display: flex;
|
|
background: hsl(var(--muted));
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.ribbon-tab-button {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: hsl(var(--muted-foreground));
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ribbon-tab-button:hover {
|
|
background: hsl(var(--secondary));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.ribbon-tab-button.active {
|
|
background: hsl(var(--card));
|
|
color: hsl(var(--foreground));
|
|
border-bottom-color: hsl(var(--primary));
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ribbon-content {
|
|
display: flex;
|
|
padding: 8px;
|
|
gap: 2px;
|
|
min-height: 80px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ribbon-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid hsl(var(--border));
|
|
padding-right: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.ribbon-group:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.ribbon-group-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
flex: 1;
|
|
align-items: flex-start;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.ribbon-group-title {
|
|
font-size: 10px;
|
|
color: hsl(var(--muted-foreground));
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
border-top: 1px solid hsl(var(--border));
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.ribbon-button {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
color: hsl(var(--foreground));
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.ribbon-button:hover {
|
|
background: hsl(var(--muted));
|
|
border-color: hsl(var(--border));
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.ribbon-button.active {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.ribbon-button.medium {
|
|
padding: 6px;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.ribbon-button.large {
|
|
padding: 8px;
|
|
min-width: 48px;
|
|
min-height: 48px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ribbon-button-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.ribbon-button-label {
|
|
font-size: 10px;
|
|
text-align: center;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.dropdown-arrow {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
}
|
|
|
|
/* Format Controls */
|
|
.format-select {
|
|
background: hsl(var(--input));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 3px;
|
|
padding: 4px 6px;
|
|
font-size: 11px;
|
|
color: hsl(var(--foreground));
|
|
margin: 2px;
|
|
}
|
|
|
|
.color-picker-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.color-picker {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.color-indicator {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 16px;
|
|
height: 3px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* Editor Area */
|
|
.editor-container {
|
|
display: flex;
|
|
flex: 1;
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
.editor-sidebar {
|
|
width: 200px;
|
|
background: hsl(var(--card));
|
|
border-right: 1px solid hsl(var(--border));
|
|
padding: 16px;
|
|
}
|
|
|
|
.editor-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 200px);
|
|
}
|
|
|
|
.pages-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
/* Example: Use a CSS variable for zoom, set --zoom: 1 for 100% */
|
|
transform: scale(var(--zoom, 1));
|
|
transform-origin: top center;
|
|
}
|
|
|
|
.page {
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
background: white;
|
|
box-shadow:
|
|
0 0 0 1px hsl(var(--border)),
|
|
0 4px 8px rgba(0, 0, 0, 0.1),
|
|
0 8px 16px rgba(0, 0, 0, 0.05);
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-number {
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 12px;
|
|
color: hsl(var(--muted-foreground));
|
|
background: hsl(var(--background));
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.page-content {
|
|
padding: 25mm;
|
|
min-height: 247mm;
|
|
}
|
|
|
|
.ProseMirror {
|
|
outline: none;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ProseMirror img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ProseMirror a {
|
|
color: hsl(var(--primary));
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Table styles */
|
|
.editor-table {
|
|
border-collapse: collapse;
|
|
margin: 16px 0;
|
|
width: 100%;
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.editor-table td,
|
|
.editor-table th {
|
|
border: 1px solid hsl(var(--border));
|
|
padding: 8px 12px;
|
|
min-width: 50px;
|
|
position: relative;
|
|
}
|
|
|
|
.editor-table th {
|
|
background: hsl(var(--muted));
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Bubble Menu */
|
|
.bubble-menu {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
padding: 4px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.bubble-menu .ribbon-button {
|
|
min-width: 28px;
|
|
min-height: 28px;
|
|
padding: 4px;
|
|
}
|
|
|
|
/* Status Bar */
|
|
.status-bar {
|
|
background: hsl(var(--card));
|
|
border-top: 1px solid hsl(var(--border));
|
|
padding: 4px 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.zoom-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoom-slider {
|
|
width: 100px;
|
|
}
|
|
|
|
@media print {
|
|
|
|
.title-bar,
|
|
.quick-access,
|
|
.ribbon,
|
|
.editor-sidebar,
|
|
.status-bar {
|
|
display: none !important;
|
|
}
|
|
|
|
.editor-main {
|
|
padding: 0;
|
|
max-height: none;
|
|
}
|
|
|
|
.pages-container {
|
|
transform: none;
|
|
gap: 0;
|
|
}
|
|
|
|
.page {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
break-after: page;
|
|
}
|
|
|
|
.page-number {
|
|
display: none;
|
|
}
|
|
} |