diff --git a/assets/scss/components/_editor-new.scss b/assets/scss/components/_editor-new.scss index e42602490d..18eda5d372 100644 --- a/assets/scss/components/_editor-new.scss +++ b/assets/scss/components/_editor-new.scss @@ -8,23 +8,31 @@ .editor-toolbar { border: 0; + background-color: $color-body-background; + /* Let the toolbar stay on screen when writing long texts */ + /* Disabled on mobile or when the editor is fullscreen */ @include tablet { - position: sticky; - top: 0; - z-index: 2; - background-color: $color-body-background; - border-bottom: $length-1 solid $grey-200; - - @at-root body.has-top-banner & { - top: $length-24; - } + &:not(.fullscreen) { + position: sticky; + z-index: 2; + + top: 0; + @at-root body.has-top-banner & { + top: $length-24; + } - ~ .CodeMirror { - border-top: 0; + border-bottom: $length-1 solid $grey-200; + ~ .CodeMirror { + border-top: 0; + } } } + &.fullscreen { + z-index: 22; /* needs to be above #very-top-banner (_very-top-banner.scss) */ + } + &.disabled-for-textarea-mode { button { &.disable-for-textarea-mode { diff --git a/assets/scss/components/_very-top-banner.scss b/assets/scss/components/_very-top-banner.scss index 1467432f87..21c50552e2 100644 --- a/assets/scss/components/_very-top-banner.scss +++ b/assets/scss/components/_very-top-banner.scss @@ -20,7 +20,7 @@ border-color: var(--very-top-banner-border-color); color: var(--very-top-banner-color); - z-index: 21; + z-index: 21; /* needs to be below .editor-toolbar (_editor-new.scss) */ span { flex: 12;