diff --git a/client/src/styles/theme.css b/client/src/styles/theme.css index 8948a0c..1b02e03 100644 --- a/client/src/styles/theme.css +++ b/client/src/styles/theme.css @@ -326,25 +326,38 @@ button[disabled] { display: flex; flex-wrap: wrap; align-items: center; - gap: 4px; - padding: 8px 10px; + gap: 6px; + padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-flat); } .rte-btn { - min-width: 30px; - height: 30px; - padding: 0 8px; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 38px; + height: 38px; + padding: 0 11px; border: 1px solid transparent; - border-radius: 6px; + border-radius: 7px; background: transparent; color: var(--muted); font-family: var(--sans); - font-size: 0.85rem; + font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } +/* Icon (glyph) buttons render larger so picture/link/etc. read clearly. */ +.rte-btn[title="Link"], +.rte-btn[title="Insert image"], +.rte-btn[title="Link to another wiki page"], +.rte-btn[title="Quote"], +.rte-btn[title="Divider"], +.rte-btn[title="Undo"], +.rte-btn[title="Redo"] { + font-size: 1.25rem; +} .rte-btn:hover:not([disabled]) { background: var(--blue); color: var(--ink); @@ -365,12 +378,13 @@ button[disabled] { background: var(--line); } .rte-content { - padding: 14px 16px; - max-height: 460px; - overflow-y: auto; + padding: 16px 18px; + max-height: min(640px, 65vh); + /* Scroll both vertically and sideways (wide images, code blocks, tables). */ + overflow: auto; } .rte-content .ProseMirror { - min-height: 220px; + min-height: 320px; outline: none; } .rte-content .ProseMirror p.is-editor-empty:first-child::before { @@ -384,8 +398,8 @@ button[disabled] { .rte-linkmenu { position: absolute; z-index: 20; - top: 50px; - left: 10px; + top: 60px; + left: 12px; width: min(360px, calc(100% - 20px)); padding: 10px; border: 1px solid var(--line);