mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Editors: Tightened up new design, adjusted for MD editor
This commit is contained in:
Dan Brown
parent
45c7409092
commit
8c10959339
@ -148,10 +148,9 @@ html.markdown-editor-display.dark-mode {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid #DDD;
|
||||
background-color: #EEE;
|
||||
@include lightDark(background-color, #eee, #111);
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
border-bottom: 1px solid #CCC;
|
||||
//background-color: var(--color-primary-light);
|
||||
@include lightDark(border-color, #CCC, #000);
|
||||
flex: none;
|
||||
@include whenDark {
|
||||
button {
|
||||
@ -398,27 +397,6 @@ input[type=color] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.title-input.page-title {
|
||||
font-size: 0.8em;
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
.input {
|
||||
border: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
input[type="text"] {
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.description-input textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -428,11 +406,6 @@ input[type=color] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
|
||||
@ -21,21 +21,57 @@
|
||||
|
||||
.page-editor-page-area {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
border-radius: 8px;
|
||||
box-shadow: $bs-card;
|
||||
overflow: hidden;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-edit-toolbar {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-editor-wysiwyg .page-edit-toolbar,
|
||||
.page-editor-wysiwyg .page-editor-page-area {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.page-editor-markdown .floating-toolbox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-input.page-title {
|
||||
font-size: 0.8em;
|
||||
.input {
|
||||
border: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
input[type="text"] {
|
||||
max-width: 840px;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
height: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
position: relative;
|
||||
outline-offset: -1px;
|
||||
outline: 1px dashed var(--color-primary);
|
||||
box-shadow: $bs-card;
|
||||
z-index: 50;
|
||||
}
|
||||
}
|
||||
|
||||
.page-editor-markdown .title-input.page-title input[type="text"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.tox-fullscreen .page-editor .edit-area,
|
||||
body.markdown-fullscreen .page-editor .edit-area {
|
||||
z-index: 12;
|
||||
@ -176,12 +212,12 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: $bs-card;
|
||||
position: fixed;
|
||||
right: $-s;
|
||||
margin-bottom: auto;
|
||||
margin-left: $-l;
|
||||
position: absolute;
|
||||
&.open {
|
||||
right: 0;
|
||||
position: relative;
|
||||
right: 0;
|
||||
max-width: 480px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -195,7 +231,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
transition: background-color ease-in-out 180ms;
|
||||
}
|
||||
&.open .toolbox-toggle {
|
||||
background-color: rgba(255, 0, 0, 0.29);
|
||||
background-color: rgba(255, 0, 0, 0.20);
|
||||
}
|
||||
&.open .toolbox-toggle svg {
|
||||
transform: rotate(180deg);
|
||||
@ -211,28 +247,27 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.tabs-inner {
|
||||
//box-shadow: $bs-large;
|
||||
@include lightDark(background-color, #FFFFFF, #222);
|
||||
//border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tabs svg {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.tabs-inner > button {
|
||||
//border-block-end: 1px solid #CCC;
|
||||
//@include lightDark(border-color, #CCC, #000);
|
||||
@include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 10px $-xs;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
&.open .tabs-inner > button.active {
|
||||
.tabs-inner > button:hover, &.open .tabs-inner > button.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary)
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.open .tabs-inner > button.active {
|
||||
border-inline-end: 1px solid var(--color-primary);
|
||||
margin-inline-end: -1px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
// Editor wrapper edits
|
||||
.tox.tox-tinymce {
|
||||
border-inline: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// In editor body overrides
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div component="page-editor" class="page-editor flex-fill flex"
|
||||
<div component="page-editor" class="page-editor page-editor-{{ $editor }} flex-fill flex"
|
||||
option:page-editor:drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}"
|
||||
@if(config('services.drawio'))
|
||||
drawio-url="{{ is_string(config('services.drawio')) ? config('services.drawio') : 'https://embed.diagrams.net/?embed=1&proto=json&spin=1&configure=1' }}"
|
||||
@ -20,7 +20,7 @@
|
||||
{{--Header Toolbar--}}
|
||||
@include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
|
||||
|
||||
<div class="flex flex-fill mx-s mb-xs gap-m justify-center">
|
||||
<div class="flex flex-fill mx-s mb-s justify-center">
|
||||
<div class="page-editor-page-area flex-container-column flex flex-fill">
|
||||
{{--Title input--}}
|
||||
<div class="title-input page-title clearfix">
|
||||
@ -48,7 +48,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('pages.parts.editor-toolbox')
|
||||
<div class="relative flex-fill">
|
||||
@include('pages.parts.editor-toolbox')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{--Mobile Save Button--}}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<div class="markdown-editor-wrap active flex-container-column">
|
||||
<div class="editor-toolbar flex-container-row items-stretch justify-space-between">
|
||||
<div class="editor-toolbar-label text-mono px-m py-xs flex-container-row items-center flex">
|
||||
<div class="editor-toolbar-label text-mono bold px-m py-xs flex-container-row items-center flex">
|
||||
<span>{{ trans('entities.pages_md_editor') }}</span>
|
||||
</div>
|
||||
<div component="dropdown" class="buttons flex-container-row items-stretch">
|
||||
@ -44,7 +44,7 @@
|
||||
<div refs="markdown-editor@divider" class="markdown-panel-divider flex-fill"></div>
|
||||
<div class="flex-container-column flex flex-fill">
|
||||
<div class="editor-toolbar">
|
||||
<div class="editor-toolbar-label text-mono px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
|
||||
<div class="editor-toolbar-label text-mono bold px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
|
||||
</div>
|
||||
<iframe src="about:blank"
|
||||
refs="markdown-editor@display"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user