Initial

resources/app/public/less2/exceptions/prosemirror.less

@@ -0,0 +1,269 @@
+@import (inline) "../../node_modules/prosemirror-view/style/prosemirror.css";
+@import (inline) "../../node_modules/prosemirror-gapcursor/style/gapcursor.css";
+
+.prosemirror {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  --color-control-bg: #d9d8c8;
+  --color-hover-bg: #f0f0e0;
+  --height-button: 28px;
+
+  menu {
+    display: flex;
+    flex-wrap: wrap;
+    flex: none;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem;
+    background: var(--color-cool-4);
+    border-radius: 6px;
+
+    > li {
+      margin: 0 2px;
+    }
+
+    .source-code {
+      margin-right: 4px;
+    }
+
+    .concurrent-users {
+      display: none;
+      justify-content: center;
+      align-items: center;
+      padding: 0 6px;
+      background: var(--color-control-bg);
+      border: 1px solid var(--color-shadow-highlight);
+      border-radius: 3px;
+      box-shadow: 0 0 4px var(--color-shadow-highlight);
+      i {
+        margin-right: 6px;
+      }
+    }
+
+    button {
+      background: transparent;
+      cursor: pointer;
+      padding: 0.5rem;
+      border: none;
+      border-radius: 4px;
+      i {
+        margin: 0;
+      }
+      &.source-code-action {
+        background: var(--color-control-bg);
+      }
+      &:hover, &.active {
+        box-shadow: none;
+        background: var(--color-hover-bg);
+        color: var(--color-cool-5);
+      }
+    }
+
+    .pm-dropdown {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-radius: 4px;
+      text-align: left;
+
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 5em;
+        font-size: var(--font-size-12);
+        align-self: end;
+      }
+
+      .html {
+        display: none;
+      }
+
+      i.fa-chevron-down {
+        color: var(--color-text-light-7);
+        font-size: var(--font-size-11);
+        margin-left: 10px;
+      }
+
+      ul {
+        display: none;
+      }
+    }
+  }
+
+  .editor-container {
+    flex: 1;
+    position: relative;
+    border: 1px dashed var(--color-light-4);
+    border-radius: 4px;
+    .editor-content {
+      outline: 0 solid transparent;
+      height: unset;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: 1rem 0.5rem 1rem 1rem;
+      padding: 0 0.5rem 0 0;
+      overflow: hidden scroll;
+    }
+  }
+}
+
+.collaborating menu {
+  .source-code-edit {
+    display: none;
+  }
+  .concurrent-users {
+    display: flex;
+
+    .scene-player {
+      width: 14px;
+      height: 15px;
+      border-radius: 50%;
+      margin-right: -3px;
+      line-height: var(--line-height-12);
+      font-size: .625rem;
+      text-align: center;
+      color: black;
+      font-weight: 700;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+  }
+}
+
+/* ----------------------------------------- */
+/*  Source Code Editing                      */
+/* ----------------------------------------- */
+
+.prosemirror.editing-source {
+  menu {
+    .text { display: none; }
+    .html { display: initial; }
+    .right { margin-left: auto; }
+    .right ~ .right { margin-left: unset; }
+  }
+
+  .editor-container {
+    display: none
+  }
+
+  textarea {
+    flex: 1;
+    border: 1px dashed var(--color-light-4);
+    border-radius: 4px;
+    white-space: pre-wrap;
+    tab-size: 4;
+    resize: none;
+  }
+}
+
+/* ----------------------------------------- */
+/*  Drop-downs                               */
+/* ----------------------------------------- */
+
+#prosemirror-dropdown {
+  --color-control-bg: var(--color-cool-4);
+  --color-hover-bg: #f0f0e0;
+  position: fixed;
+  z-index: var(--z-index-tooltip);
+  color: var(--color-light-3);
+
+  .html { display: none; }
+
+  ul {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 100%;
+    min-width: 90px;
+    padding: 6px;
+    margin: 0;
+    list-style: none;
+    background: var(--color-control-bg);
+    border-radius: 3px;
+    border: 1px solid var(--color-cool-3);
+    font-size: var(--font-size-12);
+    line-height: var(--font-size-24);
+    z-index: 1;
+  }
+
+  > ul { display: block; }
+
+  li {
+    padding: 1px 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 3px;
+    position: relative;
+    white-space: nowrap;
+
+    i { font-size: var(--font-size-14); }
+
+    &.divider {
+      pointer-events: none;
+      margin-bottom: 4px;
+      border-bottom: 1px solid #999;
+    }
+
+    &.level1 {
+      font-size: 2em;
+    }
+
+    &.level2 {
+      font-size: 1.5em;
+    }
+
+    &.level3 {
+      font-size: 1.25em;
+    }
+
+    &.level5 {
+      font-size: .83em;
+      font-weight: bold;
+    }
+
+    &.level6 {
+      font-size: .67em;
+      font-weight: bold;
+    }
+
+    &:hover {
+      background: var(--color-hover-bg);
+
+      ul { display: block; }
+      > :is(span, i) { color: black; }
+    }
+  }
+}
+
+/* ----------------------------------------- */
+/*  Insertion Dialogs                        */
+/* ----------------------------------------- */
+
+.prosemirror.menu-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+
+  form {
+    width: 400px;
+    position: fixed;
+    background: var(--color-control-bg);
+    border-radius: 4px;
+    padding: 8px;
+    box-shadow: 0 0 8px 0 var(--color-shadow-dark);
+  }
+}