styles.css

/* =====================================================================
   Ultra Zen Mode — styles.css
   All rules are scoped to body classes set by the plugin, so nothing
   leaks outside of zen mode.
   ===================================================================== */

/* ─── Sidebars (ribbon + panels, both sides) ─────────────────────── */
/* desktop: .workspace-split  |  mobile: .workspace-drawer             */
html body.uzm-hide-sidebars .workspace-ribbon.mod-left,
html body.uzm-hide-sidebars .workspace-split.mod-left-split,
html body.uzm-hide-sidebars .workspace-drawer.mod-left,
html body.uzm-hide-sidebars .sidebar-toggle-button.mod-left,
html body.uzm-hide-sidebars .workspace-split.mod-right-split,
html body.uzm-hide-sidebars .workspace-drawer.mod-right,
html body.uzm-hide-sidebars .sidebar-toggle-button.mod-right {
  display: none;
}

/* ─── Note properties / frontmatter ───────────────────────────────── */
/* Double class on body boosts specificity to override mobile themes.  */
html body.uzm-active.uzm-hide-properties .metadata-container {
  display: none;
}

/* ─── Inline note title ────────────────────────────────────────────── */
html body.uzm-hide-note-title .inline-title {
  display: none;
}

/* ─── Status bar (desktop) + bottom nav bar (mobile) ──────────────── */
html body.uzm-hide-status-bar .status-bar,
html body.uzm-hide-status-bar .mobile-navbar {
  display: none;
}

/* ─── Tab bar ──────────────────────────────────────────────────────── */
html body.uzm-hide-tab-bar .workspace-tab-header-container {
  display: none;
}

/* Frameless window (Windows / Linux with custom frame): the tab-header  */
/* container doubles as the titlebar drag area and is the element that   */
/* Obsidian / Electron samples to set the window-control button colour.  */
/* Keep it visible as an empty strip; hide only the tab content inside.  */
html
  body.uzm-active.uzm-hide-tab-bar.is-frameless
  .workspace-tab-header-container {
  display: block;
  overflow: hidden;
  min-height: unset;
  height: var(--header-height, 2.5rem);
  padding: 0;
}
html
  body.uzm-active.uzm-hide-tab-bar.is-frameless
  .workspace-tab-header-container-inner {
  display: none;
}

/* ─── Bases toolbar (.base view name, sorting, filters, ordering) ──── */
/* The toolbar sits inside a .bases-header band; hiding only the toolbar */
/* leaves that band's height behind as a gap, so hide the whole header.  */
/* .bases-toolbar is kept as a fallback for layouts without the wrapper. */
html body.uzm-active.uzm-hide-base-toolbar .bases-header,
html body.uzm-active.uzm-hide-base-toolbar .bases-toolbar {
  display: none;
}

/* ─── Header bar (title + back/forward nav buttons, desktop) ─────── */
/* Fully hides the per-view header. On frameless windows the titlebar   */
/* drag area lives in the tab-header strip (handled above), not here,   */
/* so removing the view header does not affect window controls.         */
html body.uzm-active.uzm-hide-view-header .view-header {
  display: none;
}

/* ─── PDF viewer toolbar (zoom, page navigation, etc.) ────────────── */
html body.uzm-active.uzm-hide-pdf-toolbar .pdf-toolbar {
  display: none;
}

/* ─── View action buttons (edit toggle, ⋮ more options) ───────────── */
/* Always hidden in zen mode — reading needs no toolbar clutter.       */
html body.uzm-active .view-actions {
  display: none;
}

/* ─── Lock note: source editor invisible while lock is active ──────── */
/* CSS failsafe: even if the mode switch fires before JS intercepts it, */
/* the editor is never rendered visibly. layout-change reverts state.   */
html body.uzm-active.uzm-lock-note .markdown-source-view {
  opacity: 0;
  pointer-events: none;
}

/* While the layout-change handler is reverting the mode switch, blank  */
/* the entire view area so neither the source editor nor the momentary  */
/* empty state is ever visible.  Removed after two rAF cycles (painted).*/
html body.uzm-active.uzm-lock-note.uzm-reverting .view-content {
  opacity: 0;
  pointer-events: none;
}

/* Disable double-tap-to-zoom on the reading view so the browser never  */
/* generates a dblclick event from two taps (avoids flicker on mobile). */
html body.uzm-active.uzm-lock-note .markdown-preview-view {
  touch-action: manipulation;
}

/* Reduce the header bar height left behind by the hidden buttons.     */
/* Controlled by the "Header bar padding" setting.                     */
html body.uzm-active.uzm-header-small .view-header,
html body.uzm-active.uzm-header-medium .view-header {
  min-height: unset;
}

html body.uzm-active.uzm-header-small .view-header {
  padding-block: 0.05rem;
}

html body.uzm-active.uzm-header-medium .view-header {
  padding-block: 0.2rem;
}

/* "original" leaves Obsidian's default padding in place — no rule. */

/* ─── Sidebar swipe overlay (mobile) ─────────────────────────── */
/* Obsidian JS toggles display on this element directly; using          */
/* visibility + pointer-events wins without needing !important.         */
html body.uzm-active .workspace-drawer-backdrop {
  visibility: hidden;
  pointer-events: none;
}

/* ─── Hide other open documents (non-active leaves in the root split) ── */
html
  body.uzm-active.uzm-hide-open-documents
  .workspace-split.mod-root
  .workspace-leaf:not(.mod-active) {
  display: none;
}
html
  body.uzm-active.uzm-hide-open-documents
  .workspace-split.mod-root
  > .workspace-leaf-resize-handle {
  display: none;
}

/* ─── Floating exit button ─────────────────────────────────────────── */
.uzm-exit-btn {
  /* Always visible, fixed to bottom-right of the viewport.             */
  /* env() accounts for iOS notch / Android home-indicator safe areas.  */
  position: fixed;
  bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.75rem + env(safe-area-inset-right, 0px));
  z-index: 9999;

  /* Size & shape */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;

  /* Semi-transparent dark glass look (dark theme default) */
  background: rgba(20, 20, 20, 0.45);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Subtle by default, visible on hover */
  opacity: 0.55;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    transform 0.2s ease,
    background 0.2s ease;

  /* Remove default button styles */
  padding: 0;
  outline: none;
}

.uzm-exit-btn:hover,
.uzm-exit-btn:focus-visible {
  opacity: 1;
  transform: scale(1.1);
  background: rgba(40, 40, 40, 0.75);
}

.uzm-exit-btn:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

/* Light theme adjustment */
.theme-light .uzm-exit-btn {
  background: rgba(245, 245, 245, 0.55);
  color: rgba(20, 20, 20, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

.theme-light .uzm-exit-btn:hover,
.theme-light .uzm-exit-btn:focus-visible {
  background: rgba(230, 230, 230, 0.85);
}

/* Touch devices: larger tap target and always-visible (no hover state) */
@media (hover: none) {
  .uzm-exit-btn {
    width: 3.25rem;
    height: 3.25rem;
    opacity: 0.8;
  }
}