mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-01-09 10:25:40 +00:00
5f07f31c9f
Adds dynamic and fixed (out of DOM order) positioning with location adjustment depending on space. Also adds smarter hiding to prevent disappearing when mouse leaves but within the same space as the toggle.
457 lines
8.8 KiB
SCSS
Executable file
457 lines
8.8 KiB
SCSS
Executable file
@use "mixins";
|
|
@use "vars";
|
|
|
|
.page-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.edit-area {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
z-index: 10;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
.mce-tinymce {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mce-top-part::before {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.page-editor-page-area {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
box-shadow: vars.$bs-card;
|
|
min-width: 300px;
|
|
@include mixins.lightDark(background-color, #FFF, #333)
|
|
}
|
|
|
|
.page-edit-toolbar {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
|
|
align-items: center;
|
|
}
|
|
|
|
@include mixins.larger-than(vars.$bp-xxl) {
|
|
.page-editor-wysiwyg2024 .page-edit-toolbar,
|
|
.page-editor-wysiwyg2024 .page-editor-page-area,
|
|
.page-editor-wysiwyg .page-edit-toolbar,
|
|
.page-editor-wysiwyg .page-editor-page-area {
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.page-editor-wysiwyg .floating-toolbox,
|
|
.page-editor-wysiwyg2024 .floating-toolbox {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
@include mixins.smaller-than(vars.$bp-m) {
|
|
.page-edit-toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.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: 8px;
|
|
}
|
|
input[type="text"]:focus {
|
|
position: relative;
|
|
outline-offset: -1px;
|
|
outline: 1px dashed var(--color-primary);
|
|
box-shadow: vars.$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;
|
|
}
|
|
|
|
body.tox-fullscreen, body.markdown-fullscreen {
|
|
.page-editor, .flex-fill {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
@include mixins.smaller-than(vars.$bp-s) {
|
|
.page-edit-toolbar {
|
|
overflow-x: scroll;
|
|
overflow-y: visible;
|
|
}
|
|
.page-edit-toolbar {
|
|
white-space: nowrap;
|
|
> div {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-save-mobile-button {
|
|
position: fixed;
|
|
z-index: 30;
|
|
border-radius: 50%;
|
|
width: 52px;
|
|
height: 52px;
|
|
font-size: 26px;
|
|
inset-inline-end: vars.$xs;
|
|
bottom: vars.$s;
|
|
box-shadow: vars.$bs-hover;
|
|
background-color: currentColor;
|
|
text-align: center;
|
|
svg {
|
|
fill: #FFF;
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
.draft-notification {
|
|
pointer-events: none;
|
|
transform: scale(0);
|
|
transition: transform ease-in-out 120ms;
|
|
transform-origin: 50% 50%;
|
|
&.visible {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.page-style.editor {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
// Page content pointers
|
|
.pointer-container {
|
|
position: fixed;
|
|
display: none;
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
.pointer {
|
|
border: 1px solid #CCC;
|
|
@include mixins.lightDark(border-color, #ccc, #000);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
|
|
@include mixins.lightDark(background-color, #fff, #333);
|
|
width: 275px;
|
|
|
|
&.is-page-editable {
|
|
width: 328px;
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -9px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-start: -8px;
|
|
content: '';
|
|
display: block;
|
|
transform: rotate(45deg);
|
|
transform-origin: 50% 50%;
|
|
border-right: 1px solid #CCC;
|
|
border-bottom: 1px solid #CCC;
|
|
z-index: 56;
|
|
@include mixins.lightDark(background-color, #fff, #333);
|
|
@include mixins.lightDark(border-color, #ccc, #000);
|
|
}
|
|
input, button, a {
|
|
position: relative;
|
|
border-radius: 0;
|
|
height: 28px;
|
|
font-size: 12px;
|
|
vertical-align: top;
|
|
padding: 5px 16px;
|
|
}
|
|
input {
|
|
background-color: #FFF;
|
|
border: 1px solid #DDD;
|
|
@include mixins.lightDark(border-color, #ddd, #000);
|
|
color: #666;
|
|
width: 160px;
|
|
z-index: 40;
|
|
padding: 5px 10px;
|
|
}
|
|
.text-button {
|
|
@include mixins.lightDark(color, #444, #AAA);
|
|
}
|
|
.input-group .button {
|
|
line-height: 1;
|
|
margin: 0 0 0 -4px;
|
|
box-shadow: none;
|
|
}
|
|
a.button {
|
|
margin: 0;
|
|
}
|
|
.svg-icon {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
.button {
|
|
@include mixins.lightDark(border-color, #ddd, #000);
|
|
}
|
|
}
|
|
|
|
// Page editor sidebar toolbox
|
|
.floating-toolbox {
|
|
@include mixins.lightDark(background-color, #FFF, #222);
|
|
overflow: hidden;
|
|
align-items: stretch;
|
|
flex-direction: row;
|
|
display: flex;
|
|
max-height: 100%;
|
|
border-radius: 8px;
|
|
box-shadow: vars.$bs-card;
|
|
margin-bottom: auto;
|
|
margin-inline-start: vars.$l;
|
|
position: relative;
|
|
&.open {
|
|
position: relative;
|
|
right: 0;
|
|
max-width: 480px;
|
|
margin-bottom: 0;
|
|
}
|
|
&:not(.open) .toolbox-tab-content {
|
|
display: none !important;
|
|
}
|
|
.toolbox-toggle svg {
|
|
transition: transform ease-in-out 180ms;
|
|
}
|
|
.toolbox-toggle {
|
|
transition: background-color ease-in-out 180ms;
|
|
}
|
|
&.open .toolbox-toggle {
|
|
background-color: rgba(255, 0, 0, 0.20);
|
|
}
|
|
&.open .toolbox-toggle svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
> div {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
.tabs {
|
|
border-inline-end: 1px solid #DDD;
|
|
@include mixins.lightDark(border-inline-end-color, #DDD, #000);
|
|
width: 40px;
|
|
flex: 0 1 auto;
|
|
margin-inline-end: -1px;
|
|
}
|
|
.tabs-inner {
|
|
@include mixins.lightDark(background-color, #FFFFFF, #222);
|
|
}
|
|
.tabs svg {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.tabs-inner > button {
|
|
@include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 10px vars.$xs;
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
}
|
|
.tabs-inner > button:hover, &.open .tabs-inner > button.active {
|
|
color: var(--color-link) !important;
|
|
position: relative;
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
top: 0;
|
|
height: 100%;
|
|
background-color: currentColor;
|
|
opacity: .075;
|
|
}
|
|
}
|
|
&.open .tabs-inner > button.active {
|
|
border-inline-end: 1px solid var(--color-link);
|
|
margin-inline-end: -1px;
|
|
}
|
|
h4 {
|
|
font-size: 24px;
|
|
margin: vars.$m 0 0 0;
|
|
padding: 0 vars.$l vars.$s vars.$l;
|
|
}
|
|
.tags input {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
min-width: 50px;
|
|
}
|
|
.tags td, .inline-start-table > div > div > div {
|
|
padding-inline-end: vars.$s;
|
|
padding-top: vars.$s;
|
|
position: relative;
|
|
}
|
|
.handle {
|
|
user-select: none;
|
|
cursor: move;
|
|
fill: #999;
|
|
}
|
|
form {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow-y: scroll;
|
|
}
|
|
table td, table th {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
@include mixins.smaller-than(vars.$bp-xxl) {
|
|
.floating-toolbox {
|
|
margin-inline-start: vars.$s;
|
|
}
|
|
}
|
|
|
|
@include mixins.smaller-than(vars.$bp-s) {
|
|
.page-editor-page-area-wrap {
|
|
margin: 4px !important;
|
|
}
|
|
.floating-toolbox {
|
|
margin-inline-start: 4px;
|
|
}
|
|
.floating-toolbox .tabs {
|
|
width: 32px;
|
|
}
|
|
.floating-toolbox .tabs-inner > button {
|
|
font-size: 12px;
|
|
}
|
|
.page-edit-toolbar {
|
|
padding-block: 0 !important;
|
|
}
|
|
.page-editor.toolbox-open .page-editor-page-area {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.toolbox-tab-content {
|
|
display: none;
|
|
overflow-y: auto;
|
|
padding-bottom: 45px;
|
|
}
|
|
|
|
.suggestion-box {
|
|
top: auto;
|
|
margin: -4px 0 0;
|
|
right: auto;
|
|
left: 0;
|
|
padding: 0;
|
|
li {
|
|
display: block;
|
|
border-bottom: 1px solid #DDD;
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comments-container h5 {
|
|
color: #888;
|
|
font-weight: normal;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
|
|
min-height: 175px;
|
|
}
|
|
|
|
/* FIXME - Ugly hack to modify the media plugin for TinyMCE */
|
|
.mce-floatpanel[aria-label="Insert/edit media"] {
|
|
.mce-open {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.entity-list-item > span:first-child,
|
|
.icon-list-item > span:first-child,
|
|
.split-icon-list-item > a > .icon,
|
|
.chapter-expansion > .icon {
|
|
font-size: 0.8rem;
|
|
width: 1.88em;
|
|
height: 1.88em;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 1em;
|
|
position: relative;
|
|
overflow: hidden;
|
|
svg {
|
|
margin: 0;
|
|
bottom: 0;
|
|
}
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: currentColor;
|
|
opacity: 0.2;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.entity-chip {
|
|
display: inline-block;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: vars.$xs vars.$s;
|
|
fill: currentColor;
|
|
opacity: 0.85;
|
|
transition: opacity ease-in-out 120ms;
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: currentColor;
|
|
opacity: 0.15;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
opacity: 1;
|
|
}
|
|
@media (prefers-contrast: more) {
|
|
opacity: 1;
|
|
}
|
|
}
|