diff --git a/resources/styles.css b/resources/styles.css
index 60c661f..78b41fe 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -26,22 +26,106 @@ h1 {
font-style:italic;
text-align:center;
}
- textarea {
- width:100%;
- height:600px;
- padding:12px;
- font-size:16px;
- resize:vertical;
- box-sizing:border-box;
- border:1px solid #ccc;
- border-radius:4px;
- font-family:Arial, sans-serif;
- background-color:#fff1e5;
+ .content-column {
+ flex:1;
+ padding:40px;
+ max-width:1000px;
+ margin:0 auto;
}
- textarea:focus {
- outline:none;
- border:1px solid #aaa;
- box-shadow:0 0 4px rgba(0,0,0,0.05);
+ .editor-wrapper {
+ position: relative;
+ width: 100%;
+ background-color: #fff1e5;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow: hidden;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+ }
+ .editor-wrapper:focus-within {
+ border-color: #aaa;
+ box-shadow: 0 0 4px rgba(0,0,0,0.05);
+ }
+ #spellCanvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+ display: block;
+ }
+ #editor {
+ position: relative;
+ z-index: 2;
+ background: transparent;
+ font-family: Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.4;
+ padding: 16px;
+ border: none;
+ outline: none;
+ height: 700px;
+ overflow-y: auto;
+ color: #222;
+ caret-color: #0f8e99;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ -webkit-font-smoothing: antialiased;
+ }
+ #editor:empty::before {
+ content: attr(data-placeholder);
+ color: #aaa;
+ pointer-events: none;
+ }
+ #spellMenu {
+ display: none;
+ position: fixed;
+ z-index: 9999;
+ background: #ffffff;
+ border: 1px solid #d0c8c0;
+ border-radius: 5px;
+ box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+ min-width: 180px;
+ max-width: 260px;
+ padding: 4px 0;
+ font-family: Arial, sans-serif;
+ font-size: 14px;
+ }
+ #spellMenu.visible {
+ display: block;
+ }
+ .spell-menu-item {
+ padding: 7px 14px;
+ cursor: pointer;
+ color: #222;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ user-select: none;
+ }
+ .spell-menu-item:hover,
+ .spell-menu-item:focus {
+ background: #f0e8df;
+ outline: none;
+ }
+ .spell-menu-no-suggestions {
+ padding: 7px 14px;
+ color: #999;
+ font-style: italic;
+ user-select: none;
+ }
+ .spell-menu-sep {
+ border-top: 1px solid #e0d8d0;
+ margin: 4px 0;
+ }
+ .spell-menu-add {
+ color: #0f8e99;
+ }
+ .spell-menu-add:hover,
+ .spell-menu-add:focus {
+ background: #e8f6f7;
}
.link-btn {
background:none;
@@ -168,9 +252,3 @@ textarea:focus {
.small-link-btn:hover {
color:#0a6b75;
}
- .content-column {
- flex:1;
- padding:40px;
- max-width:900px;
- margin:0 auto;
- }