X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/cc10d1ddfc652f6bcf3bbf61d5ec2e2861394c03..refs/pull/5681/head:/resources/sass/_pages.scss diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss index ca59c85ca..83aec46f0 100755 --- a/resources/sass/_pages.scss +++ b/resources/sass/_pages.scss @@ -1,14 +1,15 @@ +@use "mixins"; +@use "vars"; + .page-editor { display: flex; flex-direction: column; align-items: stretch; - overflow: hidden; .edit-area { flex: 1; flex-direction: column; z-index: 10; - overflow: hidden; border-radius: 0 0 8px 8px; } @@ -24,8 +25,9 @@ .page-editor-page-area { width: 100%; border-radius: 8px; - box-shadow: $bs-card; - @include lightDark(background-color, #FFF, #333) + box-shadow: vars.$bs-card; + min-width: 300px; + @include mixins.lightDark(background-color, #FFF, #333) } .page-edit-toolbar { @@ -36,18 +38,21 @@ align-items: center; } -@include larger-than($xxl) { +@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-wysiwyg .floating-toolbox, + .page-editor-wysiwyg2024 .floating-toolbox { position: absolute; } } -@include smaller-than($m) { +@include mixins.smaller-than(vars.$bp-m) { .page-edit-toolbar { display: flex; flex-direction: row; @@ -75,7 +80,7 @@ position: relative; outline-offset: -1px; outline: 1px dashed var(--color-primary); - box-shadow: $bs-card; + box-shadow: vars.$bs-card; z-index: 50; } } @@ -95,7 +100,7 @@ body.tox-fullscreen, body.markdown-fullscreen { } } -@include smaller-than($s) { +@include mixins.smaller-than(vars.$bp-s) { .page-edit-toolbar { overflow-x: scroll; overflow-y: visible; @@ -115,9 +120,9 @@ body.tox-fullscreen, body.markdown-fullscreen { width: 52px; height: 52px; font-size: 26px; - inset-inline-end: $-xs; - bottom: $-s; - box-shadow: $bs-hover; + inset-inline-end: vars.$xs; + bottom: vars.$s; + box-shadow: vars.$bs-hover; background-color: currentColor; text-align: center; svg { @@ -149,15 +154,11 @@ body.tox-fullscreen, body.markdown-fullscreen { } .pointer { border: 1px solid #CCC; - @include lightDark(border-color, #ccc, #000); + @include mixins.lightDark(border-color, #ccc, #000); border-radius: 4px; box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1); - @include lightDark(background-color, #fff, #333); - width: 275px; - - &.is-page-editable { - width: 328px; - } + @include mixins.lightDark(background-color, #fff, #333); + width: 328px; &:before { position: absolute; @@ -173,12 +174,11 @@ body.tox-fullscreen, body.markdown-fullscreen { border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; z-index: 56; - @include lightDark(background-color, #fff, #333); - @include lightDark(border-color, #ccc, #000); + @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; @@ -187,19 +187,23 @@ body.tox-fullscreen, body.markdown-fullscreen { input { background-color: #FFF; border: 1px solid #DDD; - @include lightDark(border-color, #ddd, #000); + @include mixins.lightDark(border-color, #ddd, #000); color: #666; - width: 160px; - z-index: 40; - padding: 5px 10px; + width: auto; + flex: 1; + z-index: 58; + padding: 5px; + border-radius: 0; } .text-button { - @include lightDark(color, #444, #AAA); + @include mixins.lightDark(color, #444, #AAA); } .input-group .button { line-height: 1; - margin: 0 0 0 -4px; + margin-inline-start: -1px; + margin-block: 0; box-shadow: none; + border-radius: 0; } a.button { margin: 0; @@ -209,22 +213,113 @@ body.tox-fullscreen, body.markdown-fullscreen { height: 1.2em; } .button { - @include lightDark(border-color, #ddd, #000); + @include mixins.lightDark(border-color, #ddd, #000); + } +} + +// Page inline comments +.content-comment-highlight { + position: absolute; + left: 0; + top: 0; + width: 0; + height: 0; + user-select: none; + pointer-events: none; + &:after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--color-primary); + opacity: 0.25; + } +} +.content-comment-window { + font-size: vars.$fs-m; + line-height: 1.4; + position: absolute; + top: calc(100% + 3px); + left: 0; + z-index: 92; + pointer-events: all; + min-width: min(340px, 80vw); + @include mixins.lightDark(background-color, #FFF, #222); + box-shadow: vars.$bs-hover; + border-radius: 4px; + overflow: hidden; +} +.content-comment-window-actions { + background-color: var(--color-primary); + color: #FFF; + display: flex; + align-items: center; + justify-content: end; + gap: vars.$xs; + button { + color: #FFF; + font-size: 12px; + padding: vars.$xs; + line-height: 1; + cursor: pointer; + } + button[data-action="jump"] { + text-decoration: underline; } + svg { + fill: currentColor; + width: 12px; + } +} +.content-comment-window-content { + padding: vars.$xs vars.$s vars.$xs vars.$xs; + max-height: 200px; + overflow-y: scroll; +} +.content-comment-window-content .comment-reference-indicator-wrap { + display: none; +} +.content-comment-marker { + position: absolute; + right: -16px; + top: -16px; + pointer-events: all; + width: min(1.5em, 32px); + height: min(1.5em, 32px); + border-radius: min(calc(1.5em / 2), 32px); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-primary); + box-shadow: vars.$bs-hover; + color: #FFF; + cursor: pointer; + z-index: 90; + transform: scale(1); + transition: transform ease-in-out 120ms; + svg { + fill: #FFF; + width: 80%; + } +} +.page-content [id^="bkmrk-"]:hover .content-comment-marker { + transform: scale(1.15); } // Page editor sidebar toolbox .floating-toolbox { - @include lightDark(background-color, #FFF, #222); + @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: $bs-card; + box-shadow: vars.$bs-card; margin-bottom: auto; - margin-inline-start: $-l; + margin-inline-start: vars.$l; position: relative; &.open { position: relative; @@ -253,23 +348,23 @@ body.tox-fullscreen, body.markdown-fullscreen { } .tabs { border-inline-end: 1px solid #DDD; - @include lightDark(border-inline-end-color, #DDD, #000); + @include mixins.lightDark(border-inline-end-color, #DDD, #000); width: 40px; flex: 0 1 auto; margin-inline-end: -1px; } .tabs-inner { - @include lightDark(background-color, #FFFFFF, #222); + @include mixins.lightDark(background-color, #FFFFFF, #222); } .tabs svg { padding: 0; margin: 0; } .tabs-inner > button { - @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5)); + @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5)); display: block; cursor: pointer; - padding: 10px $-xs; + padding: 10px vars.$xs; font-size: 18px; line-height: 1.6; } @@ -294,8 +389,8 @@ body.tox-fullscreen, body.markdown-fullscreen { } h4 { font-size: 24px; - margin: $-m 0 0 0; - padding: 0 $-l $-s $-l; + margin: vars.$m 0 0 0; + padding: 0 vars.$l vars.$s vars.$l; } .tags input { max-width: 100%; @@ -303,8 +398,8 @@ body.tox-fullscreen, body.markdown-fullscreen { min-width: 50px; } .tags td, .inline-start-table > div > div > div { - padding-inline-end: $-s; - padding-top: $-s; + padding-inline-end: vars.$s; + padding-top: vars.$s; position: relative; } .handle { @@ -323,13 +418,13 @@ body.tox-fullscreen, body.markdown-fullscreen { } } -@include smaller-than($xxl) { +@include mixins.smaller-than(vars.$bp-xxl) { .floating-toolbox { - margin-inline-start: $-s; + margin-inline-start: vars.$s; } } -@include smaller-than($s) { +@include mixins.smaller-than(vars.$bp-s) { .page-editor-page-area-wrap { margin: 4px !important; } @@ -428,7 +523,7 @@ body.tox-fullscreen, body.markdown-fullscreen { border-radius: 3px; position: relative; overflow: hidden; - padding: $-xs $-s; + padding: vars.$xs vars.$s; fill: currentColor; opacity: 0.85; transition: opacity ease-in-out 120ms;