wiki-grav/plugins/admin/themes/grav/scss/template/_editor.scss
2022-04-24 14:32:58 +02:00

316 lines
5.7 KiB
SCSS

// Grav Editor
.grav-editor-content {
position: relative;
}
.grav-editor {
[data-grav-editor] {
height: 300px;
&.code-mirrored {
padding: 0;
border: 0;
position: absolute;
z-index: -1;
display: block !important;
}
}
.CodeMirror {
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
z-index: 1;
&:focus {
outline: none;
}
}
}
.CodeMirror-scroll {
//margin-right: -36px;
position: static;
// hide native scrollbar at the bottom
padding-bottom: 15px;
}
.grav-editor-resizer {
height: 6px;
cursor: row-resize;
border-radius: 0 0 3px 3px;
position: relative;
z-index: 1;
}
.CodeMirror-selected {
background: #D6E8FF;
}
.CodeMirror-gutters {
height: 100%!important;
}
}
.grav-editor-fullscreen {
position: fixed;
top: 4.2rem;
left: 0;
bottom: 0;
right: 0;
z-index: 3;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
.grav-editor-content {
display: flex;
flex-direction: column;
flex: 1 0 0;
overflow-y: auto;
}
.grav-editor-content, .CodeMirror-wrap, .grav-editor-preview {
height: 100% !important;
}
.grav-editor-toolbar {
flex: 0 0 auto;
}
.grav-editor-toolbar, .grav-editor-toolbar ul li:first-child a, .grav-editor-toolbar-flip ul li:last-child a {
border-radius: 0 !important;
}
.grav-editor-resizer {
display: none;
}
.grav-editor-content.is-active {
display: flex;
}
}
.grav-editor-toolbar {
@include align-items(stretch);
@include display(flex);
@include flex-direction(row);
.grav-editor-actions {
@include flex(1);
}
.grav-editor-modes {
flex-shrink: 0;
margin-right: 2px;
ul {
float: right;
}
}
}
.grav-editor-toolbar {
@include clearfix;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
&:first-child a {
border-top-left-radius: 4px;
}
display: inline-block;
}
a {
display: inline-block;
cursor: pointer;
background-color: transparent;
border-radius: 0;
padding: 0.4rem;
margin-top: -1px;
border: 1px solid transparent;
&, &:hover, &:active, &:focus {
outline: 0;
}
}
}
.dropdown-menu li {
width: 50%;
}
}
.grav-editor-hide-toolbar {
display: none;
}
.grav-editor-toolbar .grav-editor-modes {
li {
&:first-child a {
border-top-left-radius: 0;
}
&:last-child a {
border-top-right-radius: 4px;
}
}
a {
&:hover {
/*border: 1px solid transparent;
border-bottom: 1px solid darken($content-bg, 20%);*/
}
}
}
.grav-editor-toolbar-flip {
float: right;
ul li:last-child a {
border-top-right-radius: 4px;
}
}
.grav-editor-content, .grav-editor-preview {
@include clearfix;
cursor: text;
display: none;
&.is-active {
display: block;
}
}
.grav-editor-content {
/* PADDING */
.CodeMirror-lines {
padding: 10px 0; /* Vertical padding around content */
}
&.fontsize-lg {
font-size: 16px;
&.fontfamily-sans {
font-size: 18px;
}
}
&.fontsize-md {
font-size: 14px;
&.fontfamily-sans {
font-size: 16px;
}
}
&.font-size-sm {
font-size: 12px;
&.fontfamily-sans {
font-size: 14px;
}
}
}
#admin-main .admin-block {
.grav-editor-preview {
padding: 20px;
overflow-y: scroll;
position: relative;
line-height: 1.5;
background: #fff !important;
color: #555 !important;
//shortcode {
// background: #ffc;
// font-size: 90%;
//}
//
//twig {
// background: #cfc;
// font-size: 90%;
//}
a {
color: #1c90fb !important;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0.5rem 0;
border-bottom: 0 !important;
color: #333 !important;
font-weight: bold;
}
p {
padding: 0;
margin: 0.5rem 0 1rem;
}
pre {
code {
color: #1c90fb;
font-size: 14px;
}
}
blockquote {
border-color: #ccc !important;
background-color: #f0f0f0 !important;
p {
color: #444 !important;
}
}
hr {
border-color: #eee !important;
}
table {
td, th, tr {
border-color: #eee !important;
}
}
}
}
.grav-editor-toolbar {
[data-hint]:after {
white-space: nowrap !important;
max-width: 300px;
width: auto !important;
}
p {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
}