.ProseMirror { position: relative; } .ProseMirror { word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */ } .ProseMirror pre { white-space: pre-wrap; } .ProseMirror li { position: relative; } .ProseMirror-hideselection *::selection { background: transparent; } .ProseMirror-hideselection *::-moz-selection { background: transparent; } .ProseMirror-hideselection { caret-color: transparent; } .ProseMirror-selectednode { outline: 2px solid #8cf; } /* Make sure li selections wrap around markers */ li.ProseMirror-selectednode { outline: none; } li.ProseMirror-selectednode:after { content: ""; position: absolute; left: -32px; right: -2px; top: -2px; bottom: -2px; border: 2px solid #8cf; pointer-events: none; } .ProseMirror-textblock-dropdown { min-width: 3em; } .ProseMirror-menu { margin: 0 -4px; line-height: 1; } .ProseMirror-tooltip .ProseMirror-menu { width: -webkit-fit-content; width: fit-content; white-space: pre; } .ProseMirror-menuitem { margin-right: 3px; display: inline-block; } .ProseMirror-menuseparator { border-right: 1px solid #ddd; margin-right: 3px; } .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu { font-size: 90%; white-space: nowrap; } .ProseMirror-menu-dropdown { vertical-align: 1px; cursor: pointer; position: relative; padding-right: 15px; } .ProseMirror-menu-dropdown-wrap { padding: 1px 0 1px 4px; display: inline-block; position: relative; } .ProseMirror-menu-dropdown:after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .6; position: absolute; right: 4px; top: calc(50% - 2px); } .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { position: absolute; background: white; color: #666; border: 1px solid #aaa; padding: 2px; } .ProseMirror-menu-dropdown-menu { z-index: 15; min-width: 6em; } .ProseMirror-menu-dropdown-item { cursor: pointer; padding: 2px 8px 2px 4px; } .ProseMirror-menu-dropdown-item:hover { background: #f2f2f2; } .ProseMirror-menu-submenu-wrap { position: relative; margin-right: -4px; } .ProseMirror-menu-submenu-label:after { content: ""; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; opacity: .6; position: absolute; right: 4px; top: calc(50% - 4px); } .ProseMirror-menu-submenu { display: none; min-width: 4em; left: 100%; top: -3px; } .ProseMirror-menu-active { background: #eee; border-radius: 4px; } .ProseMirror-menu-disabled { opacity: .3; } .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu { display: block; } .ProseMirror-menubar { border-top-left-radius: inherit; border-top-right-radius: inherit; position: relative; min-height: 1em; color: #666; padding: 1px 6px; top: 0; left: 0; right: 0; border-bottom: 1px solid silver; background: white; z-index: 10; -moz-box-sizing: border-box; box-sizing: border-box; overflow: visible; } .ProseMirror-icon { display: inline-block; line-height: .8; vertical-align: -2px; /* Compensate for padding */ padding: 2px 8px; cursor: pointer; } .ProseMirror-menu-disabled.ProseMirror-icon { cursor: default; } .ProseMirror-icon svg { fill: currentColor; height: 1em; } .ProseMirror-icon span { vertical-align: text-top; } .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; } .ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid black; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; } @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } /* Add space around the hr to make clicking it easier */ .ProseMirror-example-setup-style hr { padding: 2px 10px; border: none; margin: 1em 0; } .ProseMirror-example-setup-style hr:after { content: ""; display: block; height: 1px; background-color: silver; line-height: 2px; } .ProseMirror ul, .ProseMirror ol { padding-left: 30px; } .ProseMirror blockquote { padding-left: 1em; border-left: 3px solid #eee; margin-left: 0; margin-right: 0; } .ProseMirror-example-setup-style img { cursor: default; } .ProseMirror-prompt { background: white; padding: 5px 10px 5px 15px; border: 1px solid silver; position: fixed; border-radius: 3px; z-index: 11; box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2); } .ProseMirror-prompt h5 { margin: 0; font-weight: normal; font-size: 100%; color: #444; } .ProseMirror-prompt input[type="text"], .ProseMirror-prompt textarea { background: #eee; border: none; outline: none; } .ProseMirror-prompt input[type="text"] { padding: 0 4px; } .ProseMirror-prompt-close { position: absolute; left: 2px; top: 1px; color: #666; border: none; background: transparent; padding: 0; } .ProseMirror-prompt-close:after { content: "✕"; font-size: 12px; } .ProseMirror-invalid { background: #ffc; border: 1px solid #cc7; border-radius: 4px; padding: 5px 10px; position: absolute; min-width: 10em; } .ProseMirror-prompt-buttons { margin-top: 5px; display: none; } #editor, .editor { background: white; color: black; background-clip: padding-box; border-radius: 4px; border: 2px solid rgba(0, 0, 0, 0.2); padding: 5px 0; margin-bottom: 23px; } .ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child { margin-top: 10px; } .ProseMirror { padding: 4px 8px 4px 14px; line-height: 1.2; outline: none; } .ProseMirror p { margin-bottom: 1em } .editor [contenteditable="true"] em::before, .editor [contenteditable="true"] em::after { content: "__" } .editor [contenteditable="true"] blockquote p::before { content: "> " } .editor [contenteditable="true"] strong::before, .editor [contenteditable="true"] strong::after { content: "**"; display: inline-block; pointer-events: none; } .editor [contenteditable="true"] h1::before { content: "# " } .editor [contenteditable="true"] h2::before { content: "## " } .editor [contenteditable="true"] h3::before { content: "### " } .editor [contenteditable="true"] h4::before { content: "#### " } .editor [contenteditable="true"] h5::before { content: "##### " } .editor [contenteditable="true"] h6::before { content: "###### " } #title { font-size:2.4em; font-weight:300; line-height:1.1; font-family:Source Sans Pro,Roboto,Open Sans,Liberation Sans,DejaVu Sans,Verdana,Helvetica,Arial,sans-serif; width: 100%; box-sizing: border-box; border: 0px; } .editor a[href] { position: relative; } .popin button { color: white; background-color:#2e3440; border: 0px; } .popin { position: absolute; border: 1px #3b4252 solid; border-radius: 10px; background-color: #2e3440; padding: 12px; color: #eceff4; font-size: 14px; z-index: 99; } .popin a[contenteditable="true"] { color: #eceff4; } .ProseMirror { counter-reset: prosemirror-footnote; } footnote { display: inline-block; position: relative; cursor: pointer; } footnote::after { content: counter(prosemirror-footnote); vertical-align: super; font-size: 75%; counter-increment: prosemirror-footnote; } .ProseMirror-hideselection .footnote-tooltip *::selection { background-color: transparent; } .ProseMirror-hideselection .footnote-tooltip *::-moz-selection { background-color: transparent; } .footnote-tooltip { cursor: auto; position: absolute; left: -30px; top: calc(100% + 10px); background: silver; padding: 3px; border-radius: 2px; width: 500px; } .footnote-tooltip::before { border: 5px solid silver; border-top-width: 0px; border-left-color: transparent; border-right-color: transparent; position: absolute; top: -5px; left: 27px; content: " "; height: 0; width: 0; } .action-button { background-color: unset; color: unset; border: 0px } .action-button:disabled { color: grey; } .action-button:enabled:hover { border-bottom: 1px solid white; } .action-button:enabled:active { transform: translateY(1px); } aside ul { text-align: left; } main article { margin: 0 10px 10px; }