mirror of
https://github.com/hanblade67-cloud/media-layout.git
synced 2026-07-22 16:30:25 +00:00
Compare commits
14 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
366ed3eea1 | ||
|
|
02018ed216 | ||
|
|
d3558efb60 | ||
|
|
4109db5ba2 | ||
|
|
9900873b01 | ||
|
|
eba49c57ae | ||
|
|
f9ed93992a | ||
|
|
7ba495c36a | ||
|
|
fa1767d617 | ||
|
|
da22e7f575 | ||
|
|
4943998d97 | ||
|
|
9c941d52e2 | ||
|
|
401eaa416a | ||
|
|
2cd25c71e4 |
6 changed files with 8585 additions and 93 deletions
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2025 Hanblade
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
244
README.md
244
README.md
|
|
@ -1,93 +1,151 @@
|
|||
# Media Layout (Obsidian)
|
||||
### A plugin that lets you freely arrange videos, images, and audio — and save reusable presets
|
||||
|
||||
Break out of Markdown’s linear flow: **drag, resize, and position media anywhere on the page** in Live Preview. Build galleries, dashboards, and magazine-style layouts. Save the whole composition as a **preset**, or reuse the same media via **clones** with independent size/position/background.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
- **Free move & resize** for videos, images, and audio (stable, no “jitter”) in **Live Preview**.
|
||||
- **Clones** — place the same media multiple times with **independent**:
|
||||
- position (x/y), size (w/h),
|
||||
- background color & **opacity**,
|
||||
- lock state.
|
||||
- **Presets** — save the entire page layout (including clones, backgrounds, locks) and **restore in one click**.
|
||||
- **Backgrounds**:
|
||||
- **Global** background & opacity for all media,
|
||||
- **Local** per-item background, with **“Only for this file”** switch to limit styling to the current note.
|
||||
- **Lock / Unlock** any item to avoid accidental moves.
|
||||
- **Persistence** — layouts (including clones) are restored after reload.
|
||||
- **Localization** built-in: de, pl, es, fr, it, be, uk, uz, vi, zh-CN, zh-TW (and expandable).
|
||||
- **Audio UX** — resize/position works; handles are **invisible but active** (clean look).
|
||||
- **Safety** — designed to avoid text selection while dragging and to keep cursor behavior stable.
|
||||
|
||||
---
|
||||
|
||||
## Why this exists
|
||||
Plain Markdown keeps media glued to the text flow. *Media Layout* uses a dedicated floating layer and/or **clones** so you can **compose pages visually** while your note stays simple and portable.
|
||||
|
||||
---
|
||||
|
||||
## How to use
|
||||
1. **Enable** the plugin.
|
||||
2. Insert media into a note (video / image / audio).
|
||||
3. **Clone** (recommended) or **Detach** the item.
|
||||
4. **Drag & resize** the element to place it precisely.
|
||||
|
||||
|
||||
5. Open the item’s menu to set **Background** and **Opacity**; toggle **Only for this file** to keep styling local.
|
||||
|
||||
|
||||
6. **Lock** items when the layout looks right.
|
||||
7. **Save a Preset** to capture the whole page and **Apply** it later.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Core concepts
|
||||
### Detach vs Clone
|
||||
- **Detach** moves the *original* media into a floating layer for absolute positioning.
|
||||
- **Clone** creates an extra visual instance pointing to the same file, but with its **own** geometry and styling.
|
||||
|
||||
> **Recommendation:** Prefer **clones** for complex layouts. They’re robust and won’t disturb surrounding text or other plugins.
|
||||
|
||||
---
|
||||
|
||||
## Important notes & limitations
|
||||
- **Detaching originals** can sometimes lead to **incorrect placement or visual glitches** depending on surrounding content or other plugins.
|
||||
**Best practice:** use **clones** for production layouts — they are the most reliable.
|
||||
- Very heavy pages (many large videos/GIFs) can impact performance — keep file sizes reasonable.
|
||||
- Aggressive custom CSS or third-party media enhancers may affect overlays/backgrounds.
|
||||
|
||||
---
|
||||
|
||||
## Settings & options
|
||||
- Global background & opacity (defaults for all media).
|
||||
- Local (per-item) background & opacity with **Only for this file** switch.
|
||||
- Clone management (create/remove; each clone is independent).
|
||||
- Presets (save/apply; include clones and styling).
|
||||
- Reset & restore helpers for quick cleanup.
|
||||
- Language selection (localization).
|
||||
|
||||
---
|
||||
|
||||
## Where data is stored
|
||||
The plugin uses Obsidian’s standard plugin storage (inside your vault’s `.obsidian/plugins/media-layout/`), keeping:
|
||||
- page layouts (positions/sizes),
|
||||
- clone states,
|
||||
- per-item/local backgrounds & opacity,
|
||||
- preset definitions.
|
||||
|
||||
---
|
||||
|
||||
## FAQ
|
||||
**Do clones duplicate files?**
|
||||
No. Clones reference the same media file; only geometry/styling is duplicated.
|
||||
|
||||
**Will my layout persist after restart?**
|
||||
Yes. Layouts (including clones and presets) are restored automatically.
|
||||
|
||||
**Can I edit in Reading Mode?**
|
||||
Editing is meant for **Live Preview**. Reading Mode shows the arranged result; interactions are limited.
|
||||
# Media Layout
|
||||
|
||||
A plugin that allows you to freely arrange and resize media elements (videos, images, audio) and note boxes directly on the page. Create visual compositions while maintaining the simplicity and portability of your notes.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Features
|
||||
|
||||
### Working with Media
|
||||
- **Editing** — freely edit videos, images, and audio in Live Preview mode
|
||||
- **In-flow Files** — edit the size and shape of media directly in the text flow
|
||||
- **Clones** — create visual copies of media with their own size and position
|
||||
|
||||
---
|
||||
|
||||
## 👥 Clones
|
||||
## <sup>Files in the flow can be detached for free movement throughout the note, but instead it's recommended to clone the desired file and position it where needed. Clones are loaded directly from your disk, so after cloning you can delete the original element from the note—the clone will be independent of it, but the file itself must exist on disk in your vault.</sup>
|
||||
#### CLONE CAPABILITIES:
|
||||
- **📐 Sizing** — change the size of photos, videos, and audio by dragging special handles or set the desired size using the menu
|
||||
<img width="393" height="301" alt="screen for ML1" src="https://github.com/user-attachments/assets/4309cf3d-12e7-49bd-bac5-10a48f47ac68" />
|
||||
|
||||
- **✨ Transformation** — unlike audio and video, image files can be transformed by holding ctrl and dragging the handles
|
||||
- **🗺️ Movement** — unlike files in the flow, clones can be freely placed anywhere in the note
|
||||
- **📋 Presets** — by pressing a special button, you can save all clones and note boxes currently in the note to a preset
|
||||
<img width="356" height="225" alt="сохранение страницы" src="https://github.com/user-attachments/assets/7024dc7c-f935-4b5f-8951-50e4962f47ae" />
|
||||
|
||||
- **✅ Page Save** — after saving a page, you can insert it into any other (all clone and note box data is saved, including current position and all presets)
|
||||
- **🔄 Rotation** — clones and note boxes can not only be freely moved but also rotated (grid-snapped if holding shift)
|
||||
|
||||
|
||||
|
||||
- **🔗 Link** — insert a link into an image clone and it will open when clicked (just like a YouTube thumbnail)
|
||||
- **🎨 Customization** — customize clones and note boxes as you like, you can edit background color, text color, transparency, and more
|
||||
<img width="564" height="336" alt="Screenshot_5" src="https://github.com/user-attachments/assets/1d0f3003-9c8e-402d-b889-4b81a1a75f55" />
|
||||
|
||||
## <sub></sub>
|
||||
#### CLONE STYLING:
|
||||
|
||||
#### Backgrounds
|
||||
- **Global Background** — set background and opacity for all media
|
||||
- **Local Background ("Only for this file")** — customize background for individual elements
|
||||
- **Transparency** — make the background transparent, leaving only the content
|
||||
|
||||
### Element Management
|
||||
|
||||
#### Multi-Select and Selection
|
||||
- **Select Elements** — `Ctrl + Click` to select clones and tables
|
||||
- **Area Selection** — `Ctrl + Drag` to select multiple elements with a box
|
||||
- **Group Movement** — drag any selected element to move the entire group
|
||||
- **Bulk Delete** — delete all selected elements with one action
|
||||
|
||||
#### Locking
|
||||
- **Protection from Accidental Changes** — lock elements after configuration
|
||||
|
||||
## Note Boxes
|
||||
|
||||
Create a note box to add text anywhere in the note (background can be removed leaving only text)
|
||||
<img width="264" height="105" alt="добавление талички" src="https://github.com/user-attachments/assets/8186f6b2-e84a-4d80-a886-01de3ce52b95" />
|
||||
|
||||
- **Font Size on the Fly:**
|
||||
- `Ctrl + Mouse Wheel` — 10 px step
|
||||
- `Shift + Mouse Wheel` — precise 1 px adjustment
|
||||
- **Color Settings:**
|
||||
- Table background
|
||||
- Header color
|
||||
- Text color
|
||||
- Border color (uses the currently selected color)
|
||||
|
||||
## Presets
|
||||
- **Save Layouts** — save clones and note boxes together with all their data (positions, sizes, backgrounds, locks, etc.)
|
||||
- **Apply Presets** — quickly restore saved compositions
|
||||
- **Reliability** — originals remain in the text flow, avoiding conflicts and not interacting with presets at all
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Settings
|
||||
|
||||
Open via Command Palette: **`Media Layout: Settings`**
|
||||
|
||||
### List
|
||||
- **Detach Originals** (off by default) — allows moving original media outside the flow
|
||||
- **Handle Visibility** — make resize handles invisible but active
|
||||
- **Panel Hide Duration**
|
||||
- **Clone Restore Delay**
|
||||
- **Table Restore Delay**
|
||||
- **Modal Animation** — smooth open/close
|
||||
|
||||
---
|
||||
|
||||
### 🌍 Localization
|
||||
Built-in language support: de, pl, es, fr, it, be, uk, uz, vi, zh-CN, zh-TW
|
||||
|
||||
---
|
||||
|
||||
## 💾 Data Storage
|
||||
|
||||
**Location:** `.obsidian/plugins/media-layout/`
|
||||
|
||||
**What's Stored:**
|
||||
Absolutely all data, including sizes of original files in the flow, clones, settings, backgrounds, note boxes, text, etc.
|
||||
|
||||
### Automatic Backups
|
||||
- **Interval:** every 10 minutes (when changes are made)
|
||||
- **Retention:** up to 4 files with rotation
|
||||
- **Format:** `DD_MM_YYYY_HH꞉MM_data_backup.json`
|
||||
- **Recovery:** replace `data.json` with the desired backup (with Obsidian closed)
|
||||
|
||||
---
|
||||
|
||||
## 📖 How to Use the Plugin
|
||||
|
||||
1. **Enable the plugin** in Obsidian settings
|
||||
2. **Insert media** into a note (video/image/audio) or add a note box
|
||||
3. **Create a clone** (recommended for free placement) and work with it as you like
|
||||
4. **Adjust size and position** — drag and resize elements
|
||||
5. **Style** — set background, opacity, colors (via element menu)
|
||||
6. **Lock** — protect elements from accidental changes
|
||||
|
||||
<img width="298" height="146" alt="блокировка" src="https://github.com/user-attachments/assets/53d80f04-7a6a-4633-ae77-d1faa5042078" />
|
||||
|
||||
7. **Save a preset** — save the composition so you don't lose it if you accidentally delete any elements, or to try a different composition variant and have the ability to restore the previous one
|
||||
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Important to Know
|
||||
|
||||
### Originals vs Clones
|
||||
- **Originals** — located in the Markdown text flow; can be resized; repositioning requires detachment (not recommended)
|
||||
- **Clones** — independent visual copies with their own parameters; don't affect the text flow
|
||||
|
||||
**Recommendation:** use **clones** for creating layouts. It's safer and more stable, as detaching files from the flow can narrow the content display in the note—this happens due to Obsidian's CodeMirror 6 optimization system.
|
||||
|
||||
### Limitations and Features
|
||||
- **Detaching originals** may cause visual bugs due to CM6 specifics
|
||||
- **Reset all settings** removes clones and restores originals to the flow
|
||||
- Large amounts of heavy media (videos, GIFs) may reduce performance
|
||||
- Aggressive CSS or third-party plugins may affect display
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
**Do clones duplicate files?**
|
||||
No. Clones reference the same file — only display parameters are duplicated.
|
||||
|
||||
**Will the layout persist after restart?**
|
||||
Yes. Clones and presets are restored automatically.
|
||||
|
||||
**Can I edit in Reading Mode?**
|
||||
Editing is only available in **Live Preview**. Reading Mode shows the result with limited interaction.
|
||||
9
manifest.json
Normal file
9
manifest.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"id": "media-layout",
|
||||
"name": "Media Layout",
|
||||
"version": "5.6.1",
|
||||
"minAppVersion": "1.8.0",
|
||||
"author": "Hanblade",
|
||||
"description": "Drag, resize, and arrange media elements with floating notes and presets.",
|
||||
"isDesktopOnly": true
|
||||
}
|
||||
826
styles.css
Normal file
826
styles.css
Normal file
|
|
@ -0,0 +1,826 @@
|
|||
/* Media Layout Plugin Styles */
|
||||
|
||||
/* ========== Modal Styles ========== */
|
||||
|
||||
/* Background Color Modal */
|
||||
.ms-bgcolor-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin: 6px 0 12px;
|
||||
}
|
||||
|
||||
.ms-bgcolor-wrap input[type="color"] {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ms-bgcolor-wrap input[type="text"] {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* Width Preset Modal */
|
||||
.ms-width-preset-modal-content {}
|
||||
|
||||
.ms-width-preset-modal-content .modal-button-container {
|
||||
position: relative;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* Rename Modal */
|
||||
.ms-rename-modal .ms-rename-form {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ms-rename-modal .ms-rename-form input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ms-rename-modal .ms-rename-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Clone Settings Modal */
|
||||
.ms-clone-settings-modal .setting-item-control span {
|
||||
display: inline-block;
|
||||
width: 3.5em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Image Size Modal */
|
||||
.ms-imgsz-form .ms-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.ms-imgsz-form input[type="number"] {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* ========== Modal Width Classes ========== */
|
||||
.ms-modal-width-355 {
|
||||
width: 355px;
|
||||
}
|
||||
|
||||
/* ========== Input Size Classes ========== */
|
||||
.ms-input-width-300 {
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
/* ========== Position Classes ========== */
|
||||
.ms-position-relative-bottom-0 {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.ms-margin-bottom-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ms-margin-bottom-8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ms-margin-right-6 {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* ========== Display & Visibility Classes ========== */
|
||||
.ms-display-block {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ms-display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ========== Cursor Classes ========== */
|
||||
.ms-cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ========== Local Background ========== */
|
||||
.ms-local-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* ========== Media Background ========== */
|
||||
.ms-media-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* ========== Dynamic Media Background (uses CSS variables) ========== */
|
||||
.mx-media-embed .bg-slate-900,
|
||||
.media-extended .bg-slate-900,
|
||||
.media-embed .bg-slate-900,
|
||||
.ms-host[data-ms-kind="audio"] .ms-media-bg,
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key] .ms-media-bg {
|
||||
background-color: var(--ms-media-bg-color, #242424) !important;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-locked="1"] .ms-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-locked="1"] {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
/* Selection Marquee */
|
||||
#ms-marquee {
|
||||
position: fixed;
|
||||
border: 1px dashed var(--interactive-accent);
|
||||
background-color: rgba(128, 0, 128, 0.1);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ms-host.--selected {
|
||||
outline: 2px solid var(--interactive-accent) !important;
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 12px rgba(128, 0, 128, 0.5);
|
||||
}
|
||||
|
||||
.mx-media-embed,
|
||||
.media-extended,
|
||||
.media-embed {
|
||||
background-color: #0000 !important;
|
||||
}
|
||||
|
||||
.mx-media-embed .media-controls,
|
||||
.media-extended .media-controls {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.media-embed video,
|
||||
.mx-media-embed video,
|
||||
.media-extended video {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* ========== Clone Hide Delay (uses CSS variables) ========== */
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="popup"] .ms-clone-controls {
|
||||
transition: transform 0.2s ease-out var(--ms-clone-hide-delay, 2s), opacity 0.2s ease-out var(--ms-clone-hide-delay, 2s);
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="fade"] .ms-clone-controls {
|
||||
transition: opacity 0.2s ease-out var(--ms-clone-hide-delay, 2s);
|
||||
}
|
||||
|
||||
/* ========== Modal Animation (uses CSS variables) ========== */
|
||||
@keyframes ms-modal-bg-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 0.85; }
|
||||
}
|
||||
|
||||
html[style*="--ms-modal-animation: enabled"] .modal-bg {
|
||||
animation: ms-modal-bg-fade-in 0.5s ease forwards !important;
|
||||
}
|
||||
|
||||
@keyframes ms-modal-scale-in {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
html[style*="--ms-modal-animation: enabled"] .modal:has(.ms-clone-settings-modal),
|
||||
html[style*="--ms-modal-animation: enabled"] .modal:has(.ms-bgcolor-modal-content),
|
||||
html[style*="--ms-modal-animation: enabled"] .modal:has(.ms-layout-settings-modal),
|
||||
html[style*="--ms-modal-animation: enabled"] .modal:has(.ms-rename-modal) {
|
||||
animation: ms-modal-scale-in 0.15s cubic-bezier(0.25, 0.1, 0.25, 1.0);
|
||||
}
|
||||
|
||||
/* ========== Global Handle Styles (uses CSS variables) ========== */
|
||||
html[style*="--ms-handles-opacity: 0"] .ms-handle {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* ========== Main Plugin Styles ========== */
|
||||
|
||||
.ms-host {
|
||||
position: relative;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
isolation: isolate;
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-detached="1"] {
|
||||
z-index: 2500;
|
||||
}
|
||||
|
||||
.ms-float-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2000;
|
||||
transform: none;
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.workspace-leaf.is-readable .cm-sizer {
|
||||
visibility: visible !important;
|
||||
display: block !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markdown-preview-sizer,
|
||||
.cm-sizer {
|
||||
position: relative;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.markdown-source-view,
|
||||
.cm-scroller,
|
||||
.markdown-reading-view {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ms-float-layer .ms-host {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ========== Dock Styles ========== */
|
||||
|
||||
.ms-dock {
|
||||
position: absolute;
|
||||
z-index: 2001;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 320px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ms-dock .ms-host {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ms-dock.ms-dock--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ms-dock.ms-dock--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ms-dock.ms-dock--top {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 220px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* ========== Overlay Styles ========== */
|
||||
|
||||
.ms-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2600;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ms-overlay.--drag,
|
||||
.ms-overlay.--dragmove {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.ms-overlay .ms-handle {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ms-overlay .ms-handle,
|
||||
.ms-overlay .ms-header,
|
||||
.ms-overlay .ms-btn,
|
||||
.ms-clone-controls {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ms-noselect {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
/* ========== Link Overlay ========== */
|
||||
.ms-link-overlay {}
|
||||
|
||||
/* ========== Clone Styles ========== */
|
||||
|
||||
.ms-host[data-ms-parent-key] .mejs__controls,
|
||||
.ms-host[data-ms-parent-key] .plyr__controls,
|
||||
.ms-host[data-ms-parent-key] .vjs-control-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ms-host:fullscreen .ms-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key],
|
||||
.ms-host[data-ms-kind="audio"][data-ms-parent-key] {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-parent-key] > video,
|
||||
.ms-host[data-ms-parent-key] > audio,
|
||||
.ms-host[data-ms-parent-key] .ms-clone-controls {
|
||||
clip-path: inset(0 0 0 0 round 8px);
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="audio"][data-ms-parent-key] {
|
||||
height: 70px;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Clone Controls Animation - Popup */
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="popup"] .ms-clone-controls {
|
||||
opacity: 0;
|
||||
transform: translateY(5px) scaleY(0.1);
|
||||
transform-origin: bottom;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="popup"]:hover .ms-clone-controls {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key]:hover .ms-clone-controls:hover {
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* Clone Controls Animation - Fade */
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="fade"] .ms-clone-controls {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="fade"]:hover .ms-clone-controls {
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* Fullscreen Clone Controls */
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key]:fullscreen.ms-fs-inactive .ms-clone-controls {
|
||||
opacity: 0;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="video"][data-ms-parent-key][data-ms-animation="popup"]:fullscreen.ms-fs-inactive .ms-clone-controls {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
/* Audio Clone Controls */
|
||||
.ms-host[data-ms-kind="audio"][data-ms-parent-key] .ms-clone-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ms-clone-controls.ms-cc-compact .ms-cc-hide-compact {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ========== Proxy Control Styles ========== */
|
||||
|
||||
.ms-proxy-ctrl {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
||||
.ms-proxy-btn {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ========== Handle Styles ========== */
|
||||
|
||||
.ms-handle {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2.5px;
|
||||
background: var(--interactive-accent);
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
|
||||
display: none;
|
||||
pointer-events: auto;
|
||||
cursor: nwse-resize;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ms-handle--rb {
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.ms-handle--lb {
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.ms-handle--rt {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.ms-handle--lt {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.ms-handle--t {
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.ms-handle--b {
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.ms-handle--l {
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.ms-handle--r {
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Expanded touch areas for edge handles */
|
||||
.ms-host[data-ms-parent-key] .ms-handle--t::before,
|
||||
.ms-host[data-ms-parent-key] .ms-handle--b::before,
|
||||
.ms-host[data-ms-parent-key] .ms-handle--l::before,
|
||||
.ms-host[data-ms-parent-key] .ms-handle--r::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
.ms-note-host .ms-handle--t::before,
|
||||
.ms-note-host .ms-handle--b::before,
|
||||
.ms-note-host .ms-handle--l::before,
|
||||
.ms-note-host .ms-handle--r::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
/* Handle Cursors */
|
||||
.ms-handle--rb,
|
||||
.ms-handle--lt {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.ms-handle--lb,
|
||||
.ms-handle--rt {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
|
||||
.ms-handle--t,
|
||||
.ms-handle--b,
|
||||
.ms-handle--l,
|
||||
.ms-handle--r {
|
||||
cursor: grab !important;
|
||||
}
|
||||
|
||||
.ms-handle--t::before,
|
||||
.ms-handle--b::before,
|
||||
.ms-handle--l::before,
|
||||
.ms-handle--r::before {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
/* Handle Visibility */
|
||||
.workspace-leaf.mod-active .markdown-source-view .ms-host:hover .ms-handle {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.markdown-reading-view .ms-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.markdown-reading-view .ms-float-layer .ms-host {
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.markdown-reading-view .ms-note-host .ms-note {
|
||||
pointer-events: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.markdown-reading-view .ms-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Audio Handle Visibility */
|
||||
.ms-host[data-ms-kind="audio"][data-ms-show-handles="true"]:hover .ms-handle:not(.ms-handle--t):not(.ms-handle--b):not(.ms-handle--l):not(.ms-handle--r) {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="audio"] .ms-handle--t,
|
||||
.ms-host[data-ms-kind="audio"] .ms-handle--b,
|
||||
.ms-host[data-ms-kind="audio"] .ms-handle--l,
|
||||
.ms-host[data-ms-kind="audio"] .ms-handle--r {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.ms-host[data-ms-kind="audio"][data-ms-locked="1"] .ms-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ========== Menu Preset Item Styles ========== */
|
||||
|
||||
.menu .menu-item.ms-preset-item {
|
||||
position: relative;
|
||||
padding-right: 54px;
|
||||
}
|
||||
|
||||
.menu .menu-item.ms-preset-item .ms-preset-del {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: .6;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu .menu-item.ms-preset-item .ms-preset-del:hover {
|
||||
opacity: 1;
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.menu .menu-item.ms-preset-item .ms-preset-del::before {
|
||||
content: "×";
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.menu .menu-item.ms-preset-item .ms-preset-edit {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: .6;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 16px 16px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAydJREFUWIXVl09oHFUcxz+/+bMGnajRg3iRGEpFtBdF7EHQS5KiKO1l2N23GwiBxKIn679DoV6V1J4UEoQlu/uedgX1UpHaWkEk/sP6hwoWrIrgxWqUjQZ22/l56CyI2Ozsv4JfGGbezON9Pr8H82aecAXinNujqgeBHcC3wHPGmFMA3qjh9Xr9aVV9W0QmgXVV3QmctNY+DiCjhovI8yLy/tbW1iMLCwtNa+0EcAzYDcwIQKPRiNrt9kFgBrjucgOKyJvFYvHJXuBp87UwDEtxHF8EqFQq1+dyuTPAj561dqLdbp8GngGuAs5tc/zca+XAKpBvtVq1RqPhA8zPz/8OnALuCIAXgCkgNsa8ngWQFd5sNh9aXFzccs5dFJH9rVaLRqNRjqIo2NjYuBf4Tqy1vwKfGWNmhw1fWlr6C0BVxTn3ErBfVV/1PG9MVfepaj4AblDV70cFBxARVdXHnHMiIo+qKsByqVQ66nU6DAg/kMI/CILg4X/CO1ldXQ1E5Ka0+aIx5ikYwjqQwpdT+INxHG/+u8/Kyko4Pj5+VFX3pfADnWcDCQwKH0hgGPC+BYYF70tgmPCeBfqAH9kO3pOAc64gIsvAerPZ3NMNLiKHjTFPdBs3s4CqltPL26MounM7OHAk60crk0ClUhkD7gc+ARLgHWvt3f8Fz1p5J0GWTrlc7j7galVdEZHPgRPACWvt7Obm5ul+Ku8k0wyo6gyA7/vvGmO+8DxvmnQmoig61k/lnWSaARGZBb4pFAo/WWsnkiTZISJfqeoDwLSIHM5aebVavdX3/feSJNlbLpe/7CpQq9VuBnYBZ62168A9gK+qF4APRcQVi8WXs8ABPM+bAiY9z9sJdBcQkd1c+ne8DfhBVV8RkeNhGJ6M4/iPrODLpatAkiTHfd+f833/43w+f3ZQYM8Cc3NzfwK1YYM7Gfm+4P8hoKoj3aB0E/gt3TZdqUyl5/MAnoi8BUw75/aOmlytVm8RkWeB82EYfgQga2trNwZB8Ckwma5uv4yIPwbcxaU3r2CMeQPSzWm9Xr9WRA4B08A1IxK4ICJnkiQ5VCqVvu7c/BudLKDOrJMMjwAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.menu .menu-item.ms-preset-item .ms-preset-edit:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.menu .menu-item.ms-preset-item .ms-preset-del:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
/* ========== Note Box Styles ========== */
|
||||
|
||||
.ms-note-host {
|
||||
position: absolute;
|
||||
z-index: 3000;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ms-note {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.ms-note-top {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 6px;
|
||||
cursor: grab;
|
||||
background: var(--background-modifier-hover);
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.ms-note-top:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.ms-note-close {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.ms-note-close:hover {
|
||||
opacity: 1;
|
||||
background: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.ms-note-close::before {
|
||||
content: "×";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ms-note-body {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
outline: none;
|
||||
--note-stroke: 1px;
|
||||
--note-stroke-color: #000000;
|
||||
}
|
||||
|
||||
/* Transparent Note Box */
|
||||
.ms-note-host.ms-note-transparent .ms-note {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ms-note-host.ms-note-transparent .ms-note-top {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ms-note-host.ms-note-transparent .ms-note-close {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
.ms-note-host.ms-note-transparent:hover .ms-note {
|
||||
border-color: var(--background-modifier-border) !important;
|
||||
}
|
||||
|
||||
.ms-note-host.ms-note-transparent:hover .ms-note-close {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Text Stroke */
|
||||
.ms-note-body.ms-note-text-stroked {
|
||||
filter: drop-shadow(calc(-1 * var(--note-stroke) * .7071) calc(var(--note-stroke) * .7071) 0 var(--note-stroke-color)) drop-shadow(calc(var(--note-stroke) * .7071) calc(-1 * var(--note-stroke) * .7071) 0 var(--note-stroke-color)) drop-shadow(var(--note-stroke) 0 0 var(--note-stroke-color)) drop-shadow(0 var(--note-stroke) 0 var(--note-stroke-color));
|
||||
}
|
||||
|
||||
.workspace-leaf.mod-active .markdown-source-view .ms-note-host:hover .ms-handle {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ms-note-host .ms-overlay {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ms-note-host .ms-handle {
|
||||
opacity: 0 !important;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ========== Custom Control Button Styles (for Clone Controls) ========== */
|
||||
.ms-cc-btn {
|
||||
background: rgba(255, 255, 255, .15);
|
||||
}
|
||||
|
||||
.ms-cc-btn:hover {
|
||||
background: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
/* ========== Video Wrapper for Clones ========== */
|
||||
.ms-video-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ========== Clone Controls Positioning ========== */
|
||||
.ms-clone-controls-bottom-70 {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
/* ========== Flex & Alignment Utility Classes ========== */
|
||||
.ms-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ms-flex-align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ms-flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ms-margin-left-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ms-margin-right-15 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.ms-margin-right-8 {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ms-margin-right-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ms-margin-left-0 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
/* ========== Clone Controls Center Group ========== */
|
||||
.ms-cc-center-group {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ========== Clone Controls Time Label ========== */
|
||||
.ms-cc-time-label {
|
||||
color: rgba(255, 255, 255, .7);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
padding-right: 8px;
|
||||
}
|
||||
32
versions.json
Normal file
32
versions.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"1.0.0": "1.5.0",
|
||||
"1.1.0": "1.5.0",
|
||||
"1.2.0": "1.5.0",
|
||||
"2.0.0": "1.5.0",
|
||||
"2.1.0": "1.5.0",
|
||||
"2.2.0": "1.5.0",
|
||||
"2.3.0": "1.5.0",
|
||||
"2.4.0": "1.5.0",
|
||||
"2.5.0": "1.5.0",
|
||||
"3.0.0": "1.5.0",
|
||||
"3.1.0": "1.5.0",
|
||||
"3.2.0": "1.5.0",
|
||||
"3.3.0": "1.5.0",
|
||||
"3.4.0": "1.5.0",
|
||||
"3.5.0": "1.5.0",
|
||||
"4.0.0": "1.5.0",
|
||||
"4.1.0": "1.5.0",
|
||||
"4.2.0": "1.5.0",
|
||||
"4.3.0": "1.5.0",
|
||||
"4.4.0": "1.5.0",
|
||||
"4.5.0": "1.5.0",
|
||||
"5.0.0": "1.5.0",
|
||||
"5.1.0": "1.5.0",
|
||||
"5.2.0": "1.5.0",
|
||||
"5.3.0": "1.5.0",
|
||||
"5.4.0": "1.5.0",
|
||||
"5.5.0": "1.5.0",
|
||||
"5.6.0": "1.5.0",
|
||||
"5.6.1": "1.5.0"
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue