mertz-rich-text/dist/styles.css

A flexible rich text editor and viewer for React applications

@import url("https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:wght@400;700&display=swap");.rich-text-container{--primary-color:#024a43;--secondary-color:#db783e;--background-color:#f5f5f5;--text-color:#142d25;--body-background-color:#fbf5f0;box-sizing:border-box;color:var(--text-color);font-family:Gentium Book Plus,serif;font-size:16px;letter-spacing:.5px;line-height:1.6;margin:0 auto;max-width:800px;padding:.5rem;width:100%}.toolbar{background-color:var(--body-background-color);border-radius:8px;display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;padding:8px;position:sticky;top:0;z-index:100}.toolbar-button{align-items:center;background-color:var(--secondary-color);border:none;border-radius:4px;color:var(--primary-color);cursor:pointer;display:flex;flex:0 0 auto;font-size:14px;font-weight:700;justify-content:center;min-height:36px;min-width:36px;padding:8px;transition:background-color .2s ease}.toolbar-button.active,.toolbar-button:hover{background-color:var(--primary-color);color:var(--background-color)}.editor-container{display:flex;flex-direction:column;gap:12px}.editor,.preview{background-color:var(--background-color);border:2px solid var(--primary-color);border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);box-sizing:border-box;font-size:16px;line-height:1.5;min-height:150px;overflow-y:auto;padding:12px;width:100%}.preview h3{border-bottom:1px solid var(--primary-color);color:var(--primary-color);font-size:1.1em;margin-top:0;padding-bottom:8px}@media (max-width:480px){.rich-text-container{font-size:14px;padding:8px}.toolbar{gap:4px;padding:4px}.toolbar-button{font-size:13px;min-height:32px;min-width:32px;padding:6px}.editor,.preview{font-size:14px;min-height:120px;padding:8px}}@media (min-width:768px){.editor-container{flex-direction:row}.editor,.preview{flex:1}}