Rodrigo Rodriguez (Pragmatismo)
6c2a575887
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.
55 lines
2.3 KiB
HTML
55 lines
2.3 KiB
HTML
<div id="main-content" x-data="paper">
|
|
<div class="content-section active">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Paper Shadow Effect -->
|
|
<div class="mx-4 my-8 bg-card rounded-lg shadow-2xl shadow-black/20 border border-border">
|
|
<div class="editor-content" x-ref="editor" contenteditable="true" x-init="initEditor()"
|
|
class="min-h-[calc(100vh-12rem)] p-8 prose max-w-none focus:outline-none">
|
|
Start writing your thoughts here...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Toolbar -->
|
|
<div class="floating-toolbar" x-show="showToolbar" x-transition>
|
|
<div class="flex items-center bg-card border border-border rounded-lg shadow-lg p-1">
|
|
<!-- Text Formatting -->
|
|
<button @click="formatText('bold')" class="p-2 rounded hover:bg-accent transition-colors"
|
|
:class="{'bg-primary text-primary-foreground': isActive('bold')}">
|
|
B
|
|
</button>
|
|
<button @click="formatText('italic')" class="p-2 rounded hover:bg-accent transition-colors"
|
|
:class="{'bg-primary text-primary-foreground': isActive('italic')}">
|
|
I
|
|
</button>
|
|
<button @click="formatText('underline')" class="p-2 rounded hover:bg-accent transition-colors"
|
|
:class="{'bg-primary text-primary-foreground': isActive('underline')}">
|
|
U
|
|
</button>
|
|
|
|
<div class="w-px h-6 bg-border mx-1"></div>
|
|
|
|
<!-- Text Alignment -->
|
|
<button @click="alignText('left')" class="p-2 rounded hover:bg-accent transition-colors"
|
|
:class="{'bg-primary text-primary-foreground': isAligned('left')}">
|
|
Left
|
|
</button>
|
|
<button @click="alignText('center')" class="p-2 rounded hover:bg-accent transition-colors"
|
|
:class="{'bg-primary text-primary-foreground': isAligned('center')}">
|
|
Center
|
|
</button>
|
|
<button @click="alignText('right')" class="p-2 rounded hover:bg-accent transition-colors"
|
|
:class="{'bg-primary text-primary-foreground': isAligned('right')}">
|
|
Right
|
|
</button>
|
|
|
|
<div class="w-px h-6 bg-border mx-1"></div>
|
|
|
|
<!-- Link -->
|
|
<button @click="addLink" class="p-2 rounded hover:bg-accent transition-colors">
|
|
Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|