styles.css

.supernote-settings-hidden {
    display: none;
}

.theme-dark img[alt*="supernote-invert-dark"] {
    filter: invert(1);
}

.theme-light img[alt*="supernote-invert-light"] {
    filter: invert(1);
}

.theme-dark img.supernote-invert-dark {
    filter: invert(1);
}

.theme-light img.supernote-invert-light {
    filter: invert(1);
}

.supernote-view-content button.mod-cta,
.supernote-import-modal button.mod-cta {
    display: block;
}

/* Same fix, same reason, as .internal-embed.supernote-embed further below
   (SupernoteEmbed's own <supernote-viewer> sizing) - confirmed via real
   headless-Obsidian testing to be the identical bug in this wrapper too:
   without a flex column here and flex: 1; min-height: 0 on the viewer
   itself, <supernote-viewer> rendered at its full (every-page) content
   height instead of being clipped/scrollable at the pane's own height, so
   nothing inside the component's shadow root ever needed to scroll
   internally - goToPage()'s own .pages.scrollTo() call (and everything
   built on real scroll/intersection behavior: lazy loading, eviction, the
   scroll-driven page indicator) silently did nothing, since .pages was
   never actually the container doing the scrolling. overflow: hidden, not
   auto - the actual scrolling happens inside <supernote-viewer>'s own
   shadow root; a second scrollbar here would just double up on the same
   content. */
.supernote-view-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.supernote-view-content supernote-viewer {
    flex: 1;
    min-height: 0;
}

.supernote-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em 0;
}

/* display: contents lets each button wrap individually within
   .supernote-toolbar's flex-wrap instead of the whole group wrapping as one
   block - otherwise a single-button group (e.g. the thumbnail toggle) can
   land alone on its own line while trailing space next to it goes unused
   (see issue #157). */
.supernote-toolbar-group {
    display: contents;
}

.supernote-zoom-label {
    min-width: 3.5em;
    text-align: center;
}

.supernote-toolbar-group button.is-active {
    color: var(--text-on-accent);
    background-color: var(--interactive-accent);
}

.supernote-file-list-toolbar {
    padding: 0.5em 0.75em 0;
    margin: 0;
}

/* `.internal-embed.supernote-embed`, not just `.supernote-embed` alone -
   *and* `!important` on `display` specifically - both needed to actually
   win against Obsidian's own core CSS, confirmed via a real headless-
   Obsidian inspection (issue #183/PR #185's SupernoteEmbed rewrite):
   without this, `display: flex` silently never took effect,
   `<supernote-viewer>` never actually became a flex item, so it rendered at
   full (all-pages) content height instead of being clipped/scrollable at
   this container's fixed height - and since nothing inside the component's
   shadow root ever needed to scroll internally as a result,
   scrollIntoView() calls (the toolbar's page-nav buttons) fell through to
   scroll the *note itself* instead.

   Two separate core rules were fighting this, at two different
   specificities, so a plain specificity bump wasn't a safe enough fix on
   its own:
   - `.internal-embed:not(.image-embed) { display: block; }` (specificity
     ties with a plain `.supernote-embed` alone; two classes beats it).
   - Live Preview's own content-reset, `.markdown-source-view.mod-cm6
     .cm-content > * { display: block; margin: 0 !important; }` - three
     classes, beating even the two-class fix above; only applies in Live
     Preview, not Reading view, which is exactly why this wasn't caught in
     the standalone web component's own testing (no Obsidian, no Live
     Preview). Matching *that* selector's exact specificity would work today
     but is fragile against Obsidian ever changing it - `!important` on just
     this one property is the narrower, more robust fix, not a general
     escape hatch used elsewhere in this stylesheet. */
.internal-embed.supernote-embed {
    display: flex !important;
    flex-direction: column;
    height: 800px;
    min-height: 200px;
    resize: vertical;
    /* Just `hidden`, not `auto`: the actual scrolling now happens inside
       <supernote-viewer>'s own shadow root (see below) - scrolling here too
       would just mean two nested scrollbars for the same content. */
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
}

/* SupernoteEmbed (main.ts) renders a <supernote-viewer> (src/webcomponent/)
   as this container's only child, with its own `bare` attribute set so its
   internal chrome doesn't double up with the border above - this is the
   classic flexbox "let a flex item actually shrink/scroll within a fixed-
   height parent" fix (a flex item's default min-height:auto otherwise wins
   over the resize-driven height here). Everything else about how a note
   renders (toolbar, page list, recognized-text toggle) lives inside that
   element's shadow root, out of this stylesheet's reach entirely - see
   src/webcomponent/SupernoteViewerElement.ts's own STYLE constant.
*/
.supernote-embed supernote-viewer {
    display: block;
    flex: 1;
    min-height: 0;
}

.supernote-embed-error {
    color: var(--text-error);
    font-size: var(--font-smaller);
    padding: 0.5em;
}

/* <supernote-atelier-viewer>'s own wrapper, see src/atelierView.ts and
   src/webcomponent/SupernoteAtelierViewerElement.ts - the .spd (Supernote
   Atelier) equivalent of .supernote-view-content above. Same flex-column +
   overflow: hidden fix, same reason: without it, the element renders at its
   own full content height instead of being clipped/scrollable at the
   pane's own height, since all of its actual scrolling now happens inside
   its own shadow root (.image-wrapper - see that file's own STYLE
   constant), not here. */
.supernote-atelier-view-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.supernote-atelier-view-content supernote-atelier-viewer {
    flex: 1;
    min-height: 0;
}

/* SupernoteAtelierEmbed (atelierView.ts) renders a <supernote-atelier-viewer>
   as this container's own only child, with its own `bare` attribute set so
   its internal chrome doesn't double up with the border/background here -
   same relationship .supernote-embed above has to <supernote-viewer>, but
   with a simpler fixed max-height/resize frame instead of that sibling's
   per-note "always show one full page" ResizeObserver tracking (see
   SupernoteAtelierEmbed's own comment for why: `.spd` files are usually one
   small canvas, not a multi-page document, so this was never a reported
   problem worth the extra machinery). */
.supernote-atelier-embed {
    display: flex;
    flex-direction: column;
    max-height: 800px;
    min-height: 200px;
    resize: vertical;
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
}

.supernote-atelier-embed supernote-atelier-viewer {
    display: block;
    flex: 1;
    min-height: 0;
}

/* Custom dictionary settings styles */
.supernote-settings-custom-dictionary-subtitle {
	padding: 0 0 0.75em;
}

.supernote-settings-custom-dictionary-entries {
	display: block;
}

.supernote-settings-custom-dictionary-entries.disabled {
	display: none;
}

.supernote-settings-custom-dictionary table {
	margin-block-start: var(--size-4-2);
    margin-block-end: var(--size-2-1);
	font-size: smaller;
}

.supernote-settings-custom-dictionary table, .supernote-settings-custom-dictionary table input {
	width: 100%;
}

.supernote-settings-custom-dictionary table th {
	text-align: start;
}

.supernote-settings-custom-dictionary-entry-options {
	display: grid;
	grid-gap: var(--size-4-1);
	grid-auto-flow: column;
}

.supernote-settings-custom-dictionary button {
	cursor: pointer;
}

.supernote-settings-custom-dictionary-entry-options button.active {
	color: var(--text-on-accent);
	--icon-color: var(--text-on-accent);
    background-color: var(--interactive-accent);
}

/* "Import Supernote pages" modal */
.supernote-import-date-row {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
    margin-bottom: var(--size-4-3);
}

.supernote-import-format-row {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
    margin-bottom: var(--size-4-3);
}

.supernote-import-controls {
    display: flex;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-2);
}

.supernote-import-list {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: var(--size-4-2);
}

.supernote-import-row {
    padding: var(--size-2-1) 0;
}

.supernote-import-row label {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
    cursor: pointer;
}