diff --git a/src/app/editor.scss b/src/app/editor.scss index 57aa0f7..a327d0a 100644 --- a/src/app/editor.scss +++ b/src/app/editor.scss @@ -5,23 +5,11 @@ transition: var(--anim-duration-fast) ease-in-out; } -.markdown-preview-view { - scrollbar-gutter: auto; -} - .mod-root .workspace-leaf-content[data-mode="source"] .view-header .view-actions button:nth-last-child(2) { background-color: var(--interactive-accent) !important; color: var(--text-on-accent) !important; } -.workspace-leaf-content[data-mode="source"] .markdown-reading-view { - transform: scale(0.99); -} - -.workspace-leaf-content[data-mode="preview"] .markdown-source-view { - transform: scale(0.99); -} - .workspace-tabs { overflow: visible; } @@ -35,15 +23,17 @@ display: none; } - +// Image render img { border-radius: var(--radius-s); } +// Icons render svg.svg-icon { fill: none; } +// Inline code render .markdown-rendered code, .cm-s-obsidian .cm-inline-code:not(.cm-formatting) { border: var(--border-width) solid var(--background-modifier-border); @@ -69,6 +59,7 @@ svg.svg-icon { inset-inline-end: 36px; } +// Highlighter render .markdown-rendered mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight { diff --git a/src/app/new-tab.scss b/src/app/new-tab.scss index dbbe9cb..640582a 100644 --- a/src/app/new-tab.scss +++ b/src/app/new-tab.scss @@ -1,3 +1,4 @@ +// Change what's shown when on a empty tab "new tab" .view-header, .view-content, .workspace-tab-container { @@ -12,8 +13,7 @@ position: relative; justify-content: center; align-items: center; - margin: 0; - margin-top: var(--view-header-height); + margin: var(--view-header-height) 0 0; padding: var(--file-margins); width: 100%; max-width: 100%; diff --git a/src/app/labeled-nav.scss b/src/app/pc/labeled-nav.scss similarity index 97% rename from src/app/labeled-nav.scss rename to src/app/pc/labeled-nav.scss index 9be01b8..2187582 100644 --- a/src/app/labeled-nav.scss +++ b/src/app/pc/labeled-nav.scss @@ -3,7 +3,7 @@ body.is-fullscreen:not(.colorful-frame, .sei-disable-labeled-nav) { --labeled-nav-top-margin: 0; } -body:not(.sei-disable-labeled-nav) { +body:not(.sei-disable-labeled-nav, .is-mobile) { --labeled-nav-top-margin: var(--header-height); &.is-translucent { @@ -76,7 +76,6 @@ body:not(.sei-disable-labeled-nav) { display: inline-block; font-weight: 500; font-size: var(--font-ui-small); - margin-bottom: -3px; // to help vertically center text with icons } .workspace-tab-header-container { diff --git a/src/app/pc/tabs.scss b/src/app/pc/tabs.scss new file mode 100644 index 0000000..54e818d --- /dev/null +++ b/src/app/pc/tabs.scss @@ -0,0 +1,27 @@ +// Desktop tabs +body:not(.is-mobile) { + // Margin around editor tabs to get floaty design + .mod-root .workspace-tab-header-container-inner { + margin: 6px 0; + } + + // Cleaner margin around for icon tabs in sidedocks + .mod-sidedock .workspace-tab-header-container-inner { + margin: 6px 0; + } + + // Windows & Linux + body.mod-windows.is-hidden-frameless, + body.mod-linux.is-hidden-frameless { + &.show-ribbon { + .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container { + padding-left: 0; + } + + .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container-inner { + z-index: 11; + margin-left: 0; + } + } + } +} diff --git a/src/app/pc/workspace.scss b/src/app/pc/workspace.scss new file mode 100644 index 0000000..524a44f --- /dev/null +++ b/src/app/pc/workspace.scss @@ -0,0 +1,53 @@ +body:not(.is-mobile) { + // Background colors transparent everywhere except editors so main container bg color apply everywhere + background-color: var(--background-secondary); + + .workspace-ribbon, + .workspace-split.mod-root, + .workspace-split.mod-sidedock, + .workspace-tabs .workspace-leaf, + .workspace-split.mod-left-split .workspace-sidedock-vault-profile { + background-color: transparent; + } + + // feature: accented frame + .workspace { + background-color: hsla(var(--color-accent-hsl), calc(var(--sei-accented-frame-opacity) * 0.005)); + } + + // z-index same as side-docks so editor drop shadow goes above them + .workspace-split.mod-root { + z-index: var(--layer-sidedock); + } + + // Reduce window opacity when unfocused + &:not(.is-focused) { + + .workspace-ribbon, + .mod-sidedock>div, + .mod-root .workspace-tab-header-container { + opacity: 0.5; + transition: all 1s ease; + transition-delay: 5s; + } + } + + // Hide border between editors todo to remove? + .workspace-leaf-resize-handle { + border-inline-end-color: transparent; + } + + // Remove all borders except horizontal in sidedocks + .workspace { + --tab-outline-color: transparent; + --tab-outline-width: 0; + --divider-width: 0; + --tab-container-background: transparent; + --titlebar-background: transparent; + --titlebar-background-focused: transparent; + } + + .mod-sidedock > .workspace-tabs > .workspace-leaf-resize-handle { + --divider-width: 1px; + } +} diff --git a/src/app/tabs.scss b/src/app/tabs.scss index dcc3dfa..5361435 100644 --- a/src/app/tabs.scss +++ b/src/app/tabs.scss @@ -2,150 +2,141 @@ // Desktop & Tablet body:not(.is-phone) { - .workspace { - .workspace-tab-header-container-inner { - position: relative; - border-radius: var(--tab-radius); - padding: 0; - margin-right: var(--size-2-2); - } - - // + & sidear toggle buttons - .workspace-tab-header-new-tab .clickable-icon, - .sidebar-toggle-button .clickable-icon { - padding: 7px; // var(--size-4-2) - 1px to match tabs height - } + --tab-radius-active: var(--radius-m); + --tab-radius: var(--radius-m); - // Tab list button - .workspace-tab-header-tab-list .clickable-icon { - padding: 7px var(--size-2-1); - } + .workspace { + .workspace-tab-header-container-inner { + position: relative; + border-radius: var(--tab-radius); + padding: 0; + margin-right: var(--size-2-2); + } - // Remove padding and vertically center the sidebar toggle icon inside the div like + & tab icons - // Fixes hover area to match the actual icon like + & tab icons - .sidebar-toggle-button { - padding: 1px 0 0; - align-items: center; - } + // + & sidear toggle buttons + .workspace-tab-header-new-tab .clickable-icon, + .sidebar-toggle-button .clickable-icon { + padding: 7px; // var(--size-4-2) - 1px to match tabs height + } - .mod-root { - - .workspace-tab-header-container-inner { - flex-grow: 1; - gap: var(--size-2-2); - } - - .workspace-tab-header-spacer { - display: none; - } - - .workspace-tab-header { - opacity: 0.5; - border: none; - background-color: var(--background-modifier-hover); - padding: 0; - transition: 160ms ease-out, opacity 120ms ease-in-out; - flex-grow: 1; - - &::before, - &::after { - display: none; - } - } - - .workspace-tab-header.is-active { - --tab-max-width: 220px; - - opacity: 1; - box-shadow: none; - flex-grow: 1.25; - } - - .workspace-tab-header-inner { - padding-inline: 12px 8px; - } - - .workspace-tab-header-inner-title { - line-height: normal; - } - - .workspace-tab-header-status-container { - position: absolute; - right: 8px; - } - - .workspace-tab-header-new-tab, - .workspace-tab-header-tab-list { - margin: 0; - padding: unset; - } - - .workspace-tabs.mod-active { - z-index: var(--layer-sidedock); - } - } + // Tab list button + .workspace-tab-header-tab-list .clickable-icon { + padding: 7px var(--size-2-1); } - .workspace .mod-sidedock { - .workspace-tab-header-container-inner { - gap: 0; - transition: var(--anim-duration-fast); - } + // Remove padding and vertically center the sidebar toggle icon inside the div like + & tab icons + // Fixes hover area to match the actual icon like + & tab icons + .sidebar-toggle-button { + padding: 1px 0 0; + align-items: center; + } - .workspace-tab-header.is-active, - .workspace-tab-header-container-inner:hover { - background-color: var(--background-modifier-hover); - } - .workspace-tab-header-inner { - padding: 0 10px; + // Editor tabs styling + .mod-root { + // Gap between tabs + .workspace-tab-header-container-inner { + flex-grow: 1; + gap: var(--size-2-2); + } + + .workspace-tab-header-spacer { + display: none; + } + + // Tab styling + .workspace-tab-header { + opacity: 0.5; + border: none; + background-color: var(--background-modifier-hover); + padding: 0; + transition: 160ms ease-out, opacity 120ms ease-in-out; + flex-grow: 1; + + &::before, + &::after { + display: none; } + } + + // Active tab styling + .workspace-tab-header.is-active { + --tab-max-width: 220px; + + opacity: 1; + box-shadow: none; + flex-grow: 1.25; + } + + .workspace-tab-header-inner { + padding-inline: 12px 8px; + } + + .workspace-tab-header-inner-title { + line-height: normal; + } + + .workspace-tab-header-status-container { + position: absolute; + right: 8px; + } + + .workspace-tab-header-new-tab, + .workspace-tab-header-tab-list { + margin: 0; + padding: unset; + } + + // Active editor to be above other editor so backdrop shadow overflows nicely + .workspace-tabs.mod-active { + z-index: var(--layer-sidedock); + } + } + } - .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon { - opacity: 0.5; - } + .workspace .mod-sidedock { + // Align border radius for sidedocks tabs icons to be radius-m + .workspace-tab-header { + border-radius: var(--radius-m); } -} -// Desktop -body:not(.is-mobile) { .workspace-tab-header-container-inner { - margin: 6px 0; + gap: 2px; + transition: var(--anim-duration-fast); } -} -// Windows & Linux -body.mod-windows.is-hidden-frameless, -body.mod-linux.is-hidden-frameless { - &.show-ribbon { - .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container { - padding-left: 0; - } + .workspace-tab-header.is-active, + .workspace-tab-header-container-inner:hover { + background-color: var(--background-modifier-hover); + } - .mod-sidedock.mod-left-split .mod-top-left-space .workspace-tab-header-container-inner { - z-index: 11; - margin-left: 0; - } + .workspace-tab-header-inner { + padding: 0 7px; + } + + .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon { + opacity: 0.5; } + } } // Tablet body.is-tablet { - .workspace-tab-header-container { - padding: 0 16px !important; - } - - .workspace-tab-header-container-inner { - margin: 6px 0; - padding-left: 88px !important; - } + .workspace-tab-header-container { + padding: 0 16px !important; + } + + .workspace-tab-header-container-inner { + margin: 6px 0; + padding-left: 88px !important; + } } // Feature: Centered tabs (Desktop & Tablet) body:not(.sei-disable-centered-tabs, .is-phone) { - .workspace { - .workspace-tab-header-container-inner { - justify-content: center; - } + .workspace { + .workspace-tab-header-container-inner { + justify-content: center; } + } } \ No newline at end of file diff --git a/src/app/workspace.scss b/src/app/workspace.scss index cc0d4e3..3004d9e 100644 --- a/src/app/workspace.scss +++ b/src/app/workspace.scss @@ -1,56 +1,11 @@ // Every style related to the window style -body, -body .app-container, -body.is-mobile .app-container, -body.is-phone .app-container, -body.is-tablet .app-container { - align-items: center; - overflow: hidden; -} - body { &:not(.is-phone) { --header-height: 44px; // Apply on PC & Tablet } } -body:not(.is-mobile) { - - .workspace-ribbon, - .workspace-split.mod-root, - .workspace-split, - .workspace-tabs .workspace-leaf, - .workspace-split.mod-left-split .workspace-sidedock-vault-profile { - background-color: transparent; - } - - &:not(.is-translucent) .horizontal-main-container { - background-color: var(--background-secondary); - } - - .workspace { - background-color: hsla(var(--color-accent-hsl), calc(var(--sei-accented-frame-opacity) * 0.005)); - } - - // Reduce window opacity when unfocused - &:not(.is-focused) { - - .workspace-ribbon, - .mod-sidedock>div, - .mod-root .workspace-tab-header-container { - opacity: 0.5; - transition: all 1s ease; - transition-delay: 5s; - } - } - - // Hide border between editors - .workspace-leaf-resize-handle { - border-inline-end-color: transparent; - } -} - .titlebar { background-color: transparent !important; } \ No newline at end of file diff --git a/src/colors/dark.scss b/src/colors/dark.scss index 9430d8c..f298d3a 100644 --- a/src/colors/dark.scss +++ b/src/colors/dark.scss @@ -1,10 +1,10 @@ .theme-dark { color-scheme: dark; - --background-primary: hsl(220deg 2% 15%); + --background-primary: hsl(220deg 2% 15%); // bright dark for editors, popups etc... --background-primary-alt: hsl(220deg 2% 13%); - --background-secondary: hsl(220deg 2% 13%); + --background-secondary: hsl(220deg 2% 13%); // bright dark for editors, popups etc... --background-secondary-alt: hsl(220deg 2% 15%); --background-table-rows: hsl(220deg 2% 13%); diff --git a/src/theme.scss b/src/theme.scss index ad58e0a..9bf024b 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -8,6 +8,7 @@ // Theme @use "app/workspace"; +@use "app/pc/workspace" as workspacePC; @use "app/workspace-drawer-vault"; @use "app/general"; @@ -15,6 +16,7 @@ @use "app/sidebar"; @use "app/ribbon"; @use "app/tabs"; +@use "app/pc/tabs" as tabsPC; @use "app/editor"; @@ -38,7 +40,7 @@ // Features @use "app/new-tab"; -@use "app/labeled-nav"; +@use "app/pc/labeled-nav"; @use "app/settings"; @use "app/notice"; @use "app/status-bar";