feat(editor): redesign editor UI with 3DBevel theme and ribbon layout
Revamps editor.css to introduce a modern 3DBevel-inspired visual theme, adds structured variables, and implements new UI components including title bar, ribbon tabs, and quick access toolbar for improved usability and maintainability.
This commit is contained in:
parent
02eaac783f
commit
6c2a575887
2 changed files with 404 additions and 47 deletions
|
|
@ -1,66 +1,423 @@
|
|||
/* Editor specific styles */
|
||||
#editor-content {
|
||||
min-height: 100%;
|
||||
outline: none;
|
||||
padding: 1rem;
|
||||
: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;
|
||||
}
|
||||
|
||||
#editor-content h1,
|
||||
#editor-content h2,
|
||||
#editor-content h3,
|
||||
#editor-content p {
|
||||
margin: 0.5rem 0;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#editor-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
.word-clone {
|
||||
min-height: 100vh;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Ribbon button active state */
|
||||
.ribbon-button.active {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
/* 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 styling */
|
||||
.ribbon-group {
|
||||
padding: 0.5rem;
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
padding-right: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ribbon-group-title {
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
.ribbon-group:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.ribbon-group-content {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
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 simulation */
|
||||
.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);
|
||||
position: relative;
|
||||
margin: 1rem auto;
|
||||
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: -1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.8rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="main-content">
|
||||
<div id="main-content" x-data="paper">
|
||||
<div class="content-section active">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Paper Shadow Effect -->
|
||||
|
|
@ -52,4 +52,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue