Files
Grav-Admin-Plugin/themes/grav/scss/template/_editor.scss

239 lines
5.2 KiB
SCSS
Raw Normal View History

// Grav Editor
2016-02-26 15:54:06 -08:00
.grav-editor {
[data-grav-editor] {
height: 300px;
}
2015-08-05 18:50:45 -06:00
.CodeMirror-scroll {
margin-right: -36px;
padding-bottom: 36px;
}
}
2016-02-26 15:54:06 -08:00
.grav-editor-fullscreen {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
2015-11-24 17:21:32 -08:00
z-index: 99999;
2016-02-26 15:54:06 -08:00
padding: 0 !important;
margin: 0 !important;
2016-02-26 15:54:06 -08:00
.grav-editor-content, .CodeMirror-wrap, .grav-editor-preview {
height: 100% !important;
}
2016-02-26 15:54:06 -08:00
.grav-editor-toolbar, .grav-editor-toolbar ul li:first-child a, .grav-editor-toolbar-flip ul li:last-child a {
border-radius: 0;
}
}
2016-02-26 15:54:06 -08:00
.grav-editor-toolbar {
@include clearfix;
border: 1px solid $form-border;
border-top-right-radius: $form-border-radius;
border-top-left-radius: $form-border-radius;
2016-02-26 15:54:06 -08:00
background: lighten($content-bg, 5%);
ul {
list-style: none;
margin: 0;
padding: 0;
li {
&:first-child a {
border-top-left-radius: 4px;
}
2016-02-26 15:54:06 -08:00
display: inline-block;
}
2016-02-26 15:54:06 -08:00
.editor-active a {
background: white;
cursor: auto;
border-left: 1px solid $form-border;
border-right: 1px solid $form-border;
&:hover {
background: $white;
}
}
a {
2016-02-26 15:54:06 -08:00
display: inline-block;
cursor: pointer;
color: $content-fg;
2016-02-26 15:54:06 -08:00
background-color: transparent;
border-radius: 0;
padding: 0.4rem 0.8rem;
margin-top: -1px;
border: 1px solid transparent;
&, &:hover, &:active, &:focus {
outline: 0;
}
2016-02-26 15:54:06 -08:00
&:hover, &:focus {
background: lighten($content-bg, 2%);
color: darken($content-fg, 10%);
border-top: 1px solid darken($content-bg, 20%);
border-bottom: 1px solid darken($content-bg, 20%);
}
}
}
}
2016-02-26 15:54:06 -08:00
.grav-editor-actions {
&.left {
float: left;
}
&.right {
float: right;
}
}
2016-02-26 15:54:06 -08:00
.grav-editor-toolbar-flip {
float: right;
ul li:last-child a {
border-top-right-radius: 4px;
}
}
2016-02-26 15:54:06 -08:00
.grav-editor-content {
@include clearfix;
cursor: text;
border: 1px solid $form-border;
border-top: 0;
border-bottom-right-radius: $form-border-radius;
border-bottom-left-radius: $form-border-radius;
}
2016-02-26 15:54:06 -08:00
.grav-editor-content {
.CodeMirror {
padding: 10px 20px 20px 20px;
border-bottom-left-radius: $form-border-radius;
}
}
2016-02-26 15:54:06 -08:00
.grav-editor-preview {
padding: 20px;
overflow-y: scroll;
position: relative;
background: #fbfbfb;
border-bottom-right-radius: $form-border-radius;
}
2016-02-26 15:54:06 -08:00
.grav-editor-toolbar {
p {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
}
#admin-main {
2016-02-26 15:54:06 -08:00
.grav-editor-preview {
font-family: $font-family-default;
h1, h2, h3, h4, h5, h6 {
color: darken($content-fg, 10%);
}
h1 {
font-size: 2rem;
border: 0;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.4rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 1.1rem
}
p, h1 {
padding: 0;
}
}
}
[data-mode=tab] {
2016-02-26 15:54:06 -08:00
&[data-active-tab=code] .grav-editor-preview, &[data-active-tab=preview] .grav-editor-code {
display: none;
}
}
// CodeMirror Theme
.cm-s-paper {
$paper-fg: darken($content-fg,5%);
$tag: #349886;
&.CodeMirror {
color: $paper-fg;
font-size: 14px;
line-height: 1.4;
pre {
font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, Courier, monospace;
}
}
.cm-link {color: darken($core-accent, 10%);}
.cm-comment {color: lighten($paper-fg,10%);}
.cm-header {color: darken($paper-fg,10%);}
.cm-strong {color: darken($paper-fg,5%);}
.cm-em {color: darken($paper-fg, 10%);}
.cm-string {color: $core-accent;}
.cm-tag {color: $tag}
.cm-bracket {color: lighten($tag, 10%);}
.cm-variable {color: darken($paper-fg,10%);}
.cm-variable-2 {color: lighten($paper-fg,10%);}
.cm-variable-3 {color: lighten($paper-fg,15%);}
.cm-hr {color: lighten($paper-fg,40%);font-weight: bold;}
.cm-keyword {color: $core-accent;}
.cm-atom {color: $info-bg;}
.cm-meta {color: $paper-fg;}
.cm-number {color: #7f8c8d;}
.cm-def {color: #00f;}
.cm-variable {color: black;}
.cm-variable-2 {color: #555;}
.cm-variable-3 {color: #085;}
.cm-property {color: black;}
.cm-operator {color: black;}
.cm-string-2 {color: #f50;}
.cm-meta {color: #555;}
.cm-error {color: #f00;}
.cm-qualifier {color: #555;}
.cm-builtin {color: #555;}
.cm-attribute {color: #7f8c8d;}
.cm-quote {color: #888;}
.cm-header-1 {font-size: 140%;}
.cm-header-2 {font-size: 120%;}
.cm-header-3 {font-size: 110%;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-invalidchar {color: #f00;}
}