Obsidian 样式 - Thino 伪悬浮编辑框

Obsidian Style - Thino Pseudo-floating Editor Box

Code

To add css, see: Obsidian的CSS代码片段

Requires using the obsidian-style-settings plugin. After enabling the Floating Editor option in Style Settings, add a custom shortcut in the hotkeys. Then you can use the shortcut in Thino to summon the editor. Similarly, closing the editor also requires using the same shortcut.

/* @settings

name: Thino Style
id: thino-theme-floating-editor
settings:
  -
    id: floating-editor
    title: Floating Editor
    type: class-toggle
  -
    id: show-editor
    title: Show Editor
    type: class-toggle
    addCommand: true
*/

.style-settings-container .setting-item[data-id='show-editor'] {
  display: none;
}

.floating-editor .memo-editor-wrapper {
  display: none !important;
}

/* Floating Editor */

.floating-editor.show-editor:not(.collapse-editor) .workspace-leaf-content[data-type="thino_view"] .section-header-container.memos-header-container,
.floating-editor.show-editor:not(.collapse-editor) .workspace-leaf-content[data-type="thino_view"] .memos-sidebar-wrapper,
.floating-editor.show-editor:not(.collapse-editor) .workspace-leaf-content[data-type="thino_view"] .memolist-wrapper {
  opacity: .3;
  pointer-events: none;
  animation-name: hide;
  animation-duration: .2s;
}

.floating-editor.show-editor .memo-editor-wrapper {
  z-index: 1000;
  position: absolute !important;
  display: block !important;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
  /* opacity: 1; */
  contain: none !important;
  max-width: 100%;
  top: calc(30%);
  transform: scale(1) translate3d(0px, 0px, 0px);
  animation-name: show;
  animation-duration: .2s;
  animation-timing-function: ease;
}

@keyframes show {
  0% {
    opacity: 0;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
}