System CLI: Updated to 126de5599c state

[bookstack] / resources / sass / _pages.scss

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index bc36c93ddd155203b7377c8c8c7a660d53c1ef15..426f7961c727896414cc65caa8aa26371ba8b313 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -2,12 +2,12 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  overflow: hidden;
 
   .edit-area {
     flex: 1;
     flex-direction: column;
     z-index: 10;
+    border-radius: 0 0 8px 8px;
   }
 
   .mce-tinymce {
@@ -35,12 +35,15 @@
 }
 
 @include larger-than($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;
   }
 }
@@ -67,7 +70,7 @@
     display: block;
     width: 100%;
     font-size: 20px;
-    border-radius: 4px;
+    border-radius: 8px;
   }
   input[type="text"]:focus {
     position: relative;
@@ -113,7 +116,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   width: 52px;
   height: 52px;
   font-size: 26px;
-  right: $-xs;
+  inset-inline-end: $-xs;
   bottom: $-s;
   box-shadow: $bs-hover;
   background-color: currentColor;
@@ -168,8 +171,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
     display: block;
     transform: rotate(45deg);
     transform-origin: 50% 50%;
-    border-block-end: 1px solid #CCC;
-    border-inline-end: 1px solid #CCC;
+    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);
@@ -222,7 +225,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   border-radius: 8px;
   box-shadow: $bs-card;
   margin-bottom: auto;
-  margin-left: $-l;
+  margin-inline-start: $-l;
   position: relative;
   &.open {
     position: relative;
@@ -250,11 +253,11 @@ body.tox-fullscreen, body.markdown-fullscreen {
     position: relative;
   }
   .tabs {
-    border-right: 1px solid #DDD;
-    @include lightDark(border-right-color, #DDD, #000);
+    border-inline-end: 1px solid #DDD;
+    @include lightDark(border-inline-end-color, #DDD, #000);
     width: 40px;
     flex: 0 1 auto;
-    margin-right: -1px;
+    margin-inline-end: -1px;
   }
   .tabs-inner {
     @include lightDark(background-color, #FFFFFF, #222);
@@ -272,11 +275,22 @@ body.tox-fullscreen, body.markdown-fullscreen {
     line-height: 1.6;
   }
   .tabs-inner > button:hover,  &.open .tabs-inner > button.active {
-    background-color: var(--color-primary-light);
-    color: var(--color-primary);
+    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-primary);
+    border-inline-end: 1px solid var(--color-link);
     margin-inline-end: -1px;
   }
   h4 {
@@ -312,7 +326,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
 
 @include smaller-than($xxl) {
   .floating-toolbox {
-    margin-left: $-s;
+    margin-inline-start: $-s;
   }
 }
 
@@ -321,7 +335,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
     margin: 4px !important;
   }
   .floating-toolbox {
-    margin-left: 4px;
+    margin-inline-start: 4px;
   }
   .floating-toolbox .tabs {
     width: 32px;