mirror
/
writefreely
mirror of https://github.com/writeas/writefreely
2
0
Fork 0
Code Issues Releases Wiki Activity

Reformat prose.less

Browse Source
pull/383/head
Matt Baer 5 years ago
parent d277e283d5
commit 9780f0bbb9
1 changed files with 215 additions and 169 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 384
      less/prose.less

384
less/prose.less
Unescape View File

@ -1,313 +1,333 @@
.ProseMirror { .ProseMirror {
position: relative; position: relative;
} }
.ProseMirror { .ProseMirror {
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
-webkit-font-variant-ligatures: none; -webkit-font-variant-ligatures: none;
font-variant-ligatures: none; font-variant-ligatures: none;
} }
.ProseMirror pre { .ProseMirror pre {
white-space: pre-wrap; white-space: pre-wrap;
} }
.ProseMirror li { .ProseMirror li {
position: relative; position: relative;
} }
.ProseMirror-hideselection *::selection { background: transparent; } .ProseMirror-hideselection *::selection {
.ProseMirror-hideselection *::-moz-selection { background: transparent; } background: transparent;
.ProseMirror-hideselection { caret-color: transparent; } }
.ProseMirror-hideselection *::-moz-selection {
background: transparent;
}
.ProseMirror-hideselection {
caret-color: transparent;
}
.ProseMirror-selectednode { .ProseMirror-selectednode {
outline: 2px solid #8cf; outline: 2px solid #8cf;
} }
/* Make sure li selections wrap around markers */ /* Make sure li selections wrap around markers */
li.ProseMirror-selectednode { li.ProseMirror-selectednode {
outline: none; outline: none;
} }
li.ProseMirror-selectednode:after { li.ProseMirror-selectednode:after {
content: ""; content: "";
position: absolute; position: absolute;
left: -32px; left: -32px;
right: -2px; top: -2px; bottom: -2px; right: -2px;
border: 2px solid #8cf; top: -2px;
pointer-events: none; bottom: -2px;
border: 2px solid #8cf;
pointer-events: none;
} }
.ProseMirror-textblock-dropdown { .ProseMirror-textblock-dropdown {
min-width: 3em; min-width: 3em;
} }
.ProseMirror-menu { .ProseMirror-menu {
margin: 0 -4px; margin: 0 -4px;
line-height: 1; line-height: 1;
} }
.ProseMirror-tooltip .ProseMirror-menu { .ProseMirror-tooltip .ProseMirror-menu {
width: -webkit-fit-content; width: -webkit-fit-content;
width: fit-content; width: fit-content;
white-space: pre; white-space: pre;
} }
.ProseMirror-menuitem { .ProseMirror-menuitem {
margin-right: 3px; margin-right: 3px;
display: inline-block; display: inline-block;
} }
.ProseMirror-menuseparator { .ProseMirror-menuseparator {
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
margin-right: 3px; margin-right: 3px;
} }
.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu { .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
font-size: 90%; font-size: 90%;
white-space: nowrap; white-space: nowrap;
} }
.ProseMirror-menu-dropdown { .ProseMirror-menu-dropdown {
vertical-align: 1px; vertical-align: 1px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding-right: 15px; padding-right: 15px;
} }
.ProseMirror-menu-dropdown-wrap { .ProseMirror-menu-dropdown-wrap {
padding: 1px 0 1px 4px; padding: 1px 0 1px 4px;
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.ProseMirror-menu-dropdown:after { .ProseMirror-menu-dropdown:after {
content: ""; content: "";
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid currentColor; border-top: 4px solid currentColor;
opacity: .6; opacity: .6;
position: absolute; position: absolute;
right: 4px; right: 4px;
top: calc(50% - 2px); top: calc(50% - 2px);
} }
.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
position: absolute; position: absolute;
background: white; background: white;
color: #666; color: #666;
border: 1px solid #aaa; border: 1px solid #aaa;
padding: 2px; padding: 2px;
} }
.ProseMirror-menu-dropdown-menu { .ProseMirror-menu-dropdown-menu {
z-index: 15; z-index: 15;
min-width: 6em; min-width: 6em;
} }
.ProseMirror-menu-dropdown-item { .ProseMirror-menu-dropdown-item {
cursor: pointer; cursor: pointer;
padding: 2px 8px 2px 4px; padding: 2px 8px 2px 4px;
} }
.ProseMirror-menu-dropdown-item:hover { .ProseMirror-menu-dropdown-item:hover {
background: #f2f2f2; background: #f2f2f2;
} }
.ProseMirror-menu-submenu-wrap { .ProseMirror-menu-submenu-wrap {
position: relative; position: relative;
margin-right: -4px; margin-right: -4px;
} }
.ProseMirror-menu-submenu-label:after { .ProseMirror-menu-submenu-label:after {
content: ""; content: "";
border-top: 4px solid transparent; border-top: 4px solid transparent;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
border-left: 4px solid currentColor; border-left: 4px solid currentColor;
opacity: .6; opacity: .6;
position: absolute; position: absolute;
right: 4px; right: 4px;
top: calc(50% - 4px); top: calc(50% - 4px);
} }
.ProseMirror-menu-submenu { .ProseMirror-menu-submenu {
display: none; display: none;
min-width: 4em; min-width: 4em;
left: 100%; left: 100%;
top: -3px; top: -3px;
} }
.ProseMirror-menu-active { .ProseMirror-menu-active {
background: #eee; background: #eee;
border-radius: 4px; border-radius: 4px;
} }
.ProseMirror-menu-active { .ProseMirror-menu-active {
background: #eee; background: #eee;
border-radius: 4px; border-radius: 4px;
} }
.ProseMirror-menu-disabled { .ProseMirror-menu-disabled {
opacity: .3; opacity: .3;
} }
.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu { .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
display: block; display: block;
} }
.ProseMirror-menubar { .ProseMirror-menubar {
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-top-right-radius: inherit; border-top-right-radius: inherit;
position: relative; position: relative;
min-height: 1em; min-height: 1em;
color: #666; color: #666;
padding: 1px 6px; padding: 1px 6px;
top: 0; left: 0; right: 0; top: 0;
border-bottom: 1px solid silver; left: 0;
background: white; right: 0;
z-index: 10; border-bottom: 1px solid silver;
-moz-box-sizing: border-box; background: white;
box-sizing: border-box; z-index: 10;
overflow: visible; -moz-box-sizing: border-box;
box-sizing: border-box;
overflow: visible;
} }
.ProseMirror-icon { .ProseMirror-icon {
display: inline-block; display: inline-block;
line-height: .8; line-height: .8;
vertical-align: -2px; /* Compensate for padding */ vertical-align: -2px; /* Compensate for padding */
padding: 2px 8px; padding: 2px 8px;
cursor: pointer; cursor: pointer;
} }
.ProseMirror-menu-disabled.ProseMirror-icon { .ProseMirror-menu-disabled.ProseMirror-icon {
cursor: default; cursor: default;
} }
.ProseMirror-icon svg { .ProseMirror-icon svg {
fill: currentColor; fill: currentColor;
height: 1em; height: 1em;
} }
.ProseMirror-icon span { .ProseMirror-icon span {
vertical-align: text-top; vertical-align: text-top;
} }
.ProseMirror-gapcursor { .ProseMirror-gapcursor {
display: none; display: none;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
} }
.ProseMirror-gapcursor:after { .ProseMirror-gapcursor:after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: -2px; top: -2px;
width: 20px; width: 20px;
border-top: 1px solid black; border-top: 1px solid black;
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
} }
@keyframes ProseMirror-cursor-blink { @keyframes ProseMirror-cursor-blink {
to { to {
visibility: hidden; visibility: hidden;
} }
} }
.ProseMirror-focused .ProseMirror-gapcursor { .ProseMirror-focused .ProseMirror-gapcursor {
display: block; display: block;
} }
/* Add space around the hr to make clicking it easier */ /* Add space around the hr to make clicking it easier */
.ProseMirror-example-setup-style hr { .ProseMirror-example-setup-style hr {
padding: 2px 10px; padding: 2px 10px;
border: none; border: none;
margin: 1em 0; margin: 1em 0;
} }
.ProseMirror-example-setup-style hr:after { .ProseMirror-example-setup-style hr:after {
content: ""; content: "";
display: block; display: block;
height: 1px; height: 1px;
background-color: silver; background-color: silver;
line-height: 2px; line-height: 2px;
} }
.ProseMirror ul, .ProseMirror ol { .ProseMirror ul, .ProseMirror ol {
padding-left: 30px; padding-left: 30px;
} }
.ProseMirror blockquote { .ProseMirror blockquote {
padding-left: 1em; padding-left: 1em;
border-left: 3px solid #eee; border-left: 3px solid #eee;
margin-left: 0; margin-right: 0; margin-left: 0;
margin-right: 0;
} }
.ProseMirror-example-setup-style img { .ProseMirror-example-setup-style img {
cursor: default; cursor: default;
} }
.ProseMirror-prompt { .ProseMirror-prompt {
background: white; background: white;
padding: 5px 10px 5px 15px; padding: 5px 10px 5px 15px;
border: 1px solid silver; border: 1px solid silver;
position: fixed; position: fixed;
border-radius: 3px; border-radius: 3px;
z-index: 11; z-index: 11;
box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2); box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
} }
.ProseMirror-prompt h5 { .ProseMirror-prompt h5 {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
font-size: 100%; font-size: 100%;
color: #444; color: #444;
} }
.ProseMirror-prompt input[type="text"], .ProseMirror-prompt input[type="text"],
.ProseMirror-prompt textarea { .ProseMirror-prompt textarea {
background: #eee; background: #eee;
border: none; border: none;
outline: none; outline: none;
} }
.ProseMirror-prompt input[type="text"] { .ProseMirror-prompt input[type="text"] {
padding: 0 4px; padding: 0 4px;
} }
.ProseMirror-prompt-close { .ProseMirror-prompt-close {
position: absolute; position: absolute;
left: 2px; top: 1px; left: 2px;
color: #666; top: 1px;
border: none; background: transparent; padding: 0; color: #666;
border: none;
background: transparent;
padding: 0;
} }
.ProseMirror-prompt-close:after { .ProseMirror-prompt-close:after {
content: "✕"; content: "✕";
font-size: 12px; font-size: 12px;
} }
.ProseMirror-invalid { .ProseMirror-invalid {
background: #ffc; background: #ffc;
border: 1px solid #cc7; border: 1px solid #cc7;
border-radius: 4px; border-radius: 4px;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
min-width: 10em; min-width: 10em;
} }
.ProseMirror-prompt-buttons { .ProseMirror-prompt-buttons {
margin-top: 5px; margin-top: 5px;
display: none; display: none;
} }
#editor, .editor { #editor, .editor {
background: white; background: white;
color: black; color: black;
background-clip: padding-box; background-clip: padding-box;
border-radius: 4px; border-radius: 4px;
border: 2px solid rgba(0, 0, 0, 0.2); border: 2px solid rgba(0, 0, 0, 0.2);
padding: 5px 0; padding: 5px 0;
margin: 4em auto 23px auto; margin: 4em auto 23px auto;
} }
.ProseMirror p:first-child, .ProseMirror p:first-child,
@ -317,21 +337,43 @@ li.ProseMirror-selectednode:after {
.ProseMirror h4:first-child, .ProseMirror h4:first-child,
.ProseMirror h5:first-child, .ProseMirror h5:first-child,
.ProseMirror h6:first-child { .ProseMirror h6:first-child {
margin-top: 10px; margin-top: 10px;
} }
.ProseMirror { .ProseMirror {
padding: 4px 8px 4px 14px; padding: 4px 8px 4px 14px;
line-height: 1.2; line-height: 1.2;
outline: none; outline: none;
} }
.ProseMirror p { margin-bottom: 1em } .ProseMirror p {
margin-bottom: 1em;
}
.ProseMirror { height: 120px; overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box } .ProseMirror {
textarea { width: 100%; height: 123px; border: 1px solid silver; box-sizing: border-box; -moz-box-sizing: border-box; padding: 3px 10px; height: 120px;
border: none; outline: none; font-family: inherit; font-size: inherit } overflow-y: auto;
.ProseMirror-menubar-wrapper, #markdown textarea { display: block; margin-bottom: 4px } box-sizing: border-box;
-moz-box-sizing: border-box;
}
textarea {
width: 100%;
height: 123px;
border: 1px solid silver;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px 10px;
border: none;
outline: none;
font-family: inherit;
font-size: inherit;
}
.ProseMirror-menubar-wrapper, #markdown textarea {
display: block;
margin-bottom: 4px;
}
@media all and (min-width: 50em) { @media all and (min-width: 50em) {
#editor { #editor {
@ -339,24 +381,28 @@ border: none; outline: none; font-family: inherit; font-size: inherit }
margin-right: 10%; margin-right: 10%;
} }
} }
@media all and (min-width: 60em) { @media all and (min-width: 60em) {
#editor { #editor {
margin-left: 15%; margin-left: 15%;
margin-right: 15%; margin-right: 15%;
} }
} }
@media all and (min-width: 70em) { @media all and (min-width: 70em) {
#editor { #editor {
margin-left: 20%; margin-left: 20%;
margin-right: 20%; margin-right: 20%;
} }
} }
@media all and (min-width: 85em) { @media all and (min-width: 85em) {
#editor { #editor {
margin-left: 25%; margin-left: 25%;
margin-right: 25%; margin-right: 25%;
} }
} }
@media all and (min-width: 105em) { @media all and (min-width: 105em) {
#editor { #editor {
margin-left: 30%; margin-left: 30%;

Write Preview
Loading…
Cancel
Save