centralize shared .cooked and #wmd-preview styles

This commit is contained in:
Jeff Atwood 2014-06-30 02:06:13 -07:00
parent 37df22eac6
commit d379012dbc
3 changed files with 23 additions and 60 deletions

View File

@ -20,18 +20,19 @@
} }
} }
/* global styles for the cooked HTML content in posts */ /* global styles for the cooked HTML content in posts (and preview) */
.cooked { .cooked, #wmd-preview {
word-wrap: break-word; word-wrap: break-word;
h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; } h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; }
h1 { line-height: 1em; } /* normalize.css sets h1 font size but not line height */ h1 { line-height: 1em; } /* normalize.css sets h1 font size but not line height */
a { word-wrap: break-word; } a { word-wrap: break-word; }
.highlight { }
.cooked .highlight {
background-color: scale-color($highlight, $lightness: 40%); background-color: scale-color($highlight, $lightness: 40%);
padding: 2px; padding: 2px;
margin: -2px; margin: -2px;
} }
}
.post-action { .post-action {
.undo-action, .act-action{ .undo-action, .act-action{

View File

@ -288,21 +288,19 @@
} }
#wmd-input, #wmd-preview { #wmd-input, #wmd-preview {
color: $primary; color: $primary;
video {
max-width: 100%;
height: auto;
} }
audio {
max-width: 100%;
}
}
#wmd-preview { #wmd-preview {
border: 1px dashed scale-color-diff(); border: 1px dashed scale-color-diff();
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;
video {
max-width: 100%;
height: auto;
}
audio {
max-width: 100%;
}
&.hidden { &.hidden {
width: 0; width: 0;
visibility: hidden; visibility: hidden;
@ -311,6 +309,7 @@
#wmd-input { #wmd-input {
bottom: 35px; bottom: 35px;
} }
.submit-panel { .submit-panel {
position: absolute; position: absolute;
display: block; display: block;
@ -393,34 +392,17 @@
margin: 0; margin: 0;
background-color: $secondary; background-color: $secondary;
word-wrap: break-word; word-wrap: break-word;
// set up proper header margins in post preview
h1, h2, h3, h4, h5, h6 {
margin: 30px 0 10px;
}
p {
margin-top: 19px;
}
blockquote p:first-of-type {margin-top: 0px;}
} }
#wmd-input, #wmd-preview-scroller { #wmd-input, #wmd-preview-scroller {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100%;
min-height: 100%;
@include box-sizing(border-box);
border: 0;
border-top: 30px solid transparent; border-top: 30px solid transparent;
box-shadow: none;
@include border-radius-all(0);
transition: none;
} }
#wmd-preview-scroller { #wmd-preview-scroller {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
overflow: scroll; overflow: scroll;
visibility: hidden; visibility: hidden;
.marker, .caret { .marker, .caret {

View File

@ -223,22 +223,17 @@ display: none;
} }
#wmd-input, #wmd-preview { #wmd-input, #wmd-preview {
color: darken($primary, 40%); color: darken($primary, 40%);
video {
max-width: 100%;
height: auto;
}
audio {
max-width: 100%;
}
} }
#wmd-preview { #wmd-preview {
border: 1px dashed scale-color-diff(); border: 1px dashed scale-color-diff();
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;
p { video {
margin-top: 0; max-width: 100%;
height: auto;
}
audio {
max-width: 100%;
} }
&.hidden { &.hidden {
width: 0; width: 0;
@ -318,30 +313,15 @@ display: none;
margin: 0; margin: 0;
background-color: $secondary; background-color: $secondary;
word-wrap: break-word; word-wrap: break-word;
// set up proper header margins in post preview
h1, h2, h3, h4, h5, h6 {
margin: 30px 0 10px;
}
p {
margin-top: 19px;
}
} }
#wmd-input, #wmd-preview-scroller { #wmd-input, #wmd-preview-scroller {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100%;
min-height: 100%;
@include box-sizing(border-box);
border: 0;
@include border-radius-all(0);
transition: none;
font-size: 16px; font-size: 16px;
} }
#wmd-preview-scroller { #wmd-preview-scroller {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
overflow: scroll; overflow: scroll;
visibility: hidden; visibility: hidden;
.marker, .caret { .marker, .caret {