diff --git a/obsidian.css b/obsidian.css index 5be441a..a5114f1 100644 --- a/obsidian.css +++ b/obsidian.css @@ -1043,16 +1043,6 @@ button, /* --------------- */ /* Icons */ -/* .nav-action-button svg { - width: 15px; -} -.workspace-ribbon-collapse-btn svg path { - stroke-width: 3px; -} -.nav-action-button svg path { - stroke-width: 2px; -} */ - .view-action svg, .workspace-tab-header-inner-icon svg, .nav-action-button svg { @@ -1082,6 +1072,7 @@ button, .view-header-icon, .workspace-tab-header, .nav-action-button, +.nav-action-button.is-active, .side-dock-ribbon-tab, .view-action { background: transparent; @@ -1145,7 +1136,9 @@ button, .nav-action-button:hover { background-color: var(--shade-plus-darker); } - +.collapse-icon svg { + transform: rotate(90deg); +} .is-collapsed .collapse-icon svg { transform: rotate(0); } @@ -2369,7 +2362,7 @@ input[type="checkbox"]:checked:before { } .nav-folder-children > .nav-folder { - padding: 0 10px; + padding: 0 0 0 10px; } .nav-file { @@ -2463,7 +2456,7 @@ body:not(.is-grabbing) .nav-folder-title:hover { } .tree-view-item-self:hover .tree-view-item-collapse, -.collapsible-item-self.is-clickable:hover { +.tree-item-self.is-clickable:hover { color: var(--text-normal); background: transparent; } @@ -2509,40 +2502,37 @@ body:not(.is-grabbing) .nav-folder-title:hover { padding: 0 0 0 15px; width: 100%; } -.outline .collapsible-item-self { + +.outline .tree-item-self { cursor: var(--cursor); font-size: var(--font-small); color: var(--text-normal); font-weight: 500; display: flex; - align-items: center; + align-items: flex-start; line-height: 1; padding: 0 5px; margin: 0; } -.collapsible-item-collapse { - opacity: 1; - left: -5px; - color: var(--text-faint); -} -.outline .collapsible-item-collapse { +.tree-item-self.is-clickable:hover .tree-item-collapse { color: var(--text-normal); - padding: 0; - position: static; - line-height: 1; - display: flex; } -.collapsible-item-self.is-clickable:hover .collapsible-item-collapse { - color: var(--text-normal); + +.outline .tree-item-self .collapse-icon { + position: relative; + top: 0.5em; } -.outline > .collapsible-item > .collapsible-item-self .right-triangle { +.outline > .tree-item > .tree-item-self .right-triangle { opacity: unset; } -.outline .collapsible-item-inner { +.outline .tree-item-inner { padding: 4px 6px; line-height: 1.4; } -.outline .collapsible-item-self.is-clickable .collapsible-item-inner:hover { +.outline .tree-item-inner:only-child { + padding-left: 20px; +} +.outline .tree-item-self.is-clickable .tree-item-inner:hover { background-color: var(--shade-plus-darker); border-radius: var(--radius-m); } @@ -2739,7 +2729,6 @@ input.search-input:focus { margin: 0; padding: 0; width: auto; - transform: rotate(90deg); } .tree-item-self .collapse-icon:after { @@ -2910,12 +2899,12 @@ input.search-input:focus { /* Tag pane */ .tag-container { - padding: 0; + padding: 0 10px; } .tag-pane-tag { cursor: var(--cursor); - padding: 0 10px; + padding: 0 10px 0 10px; display: flex; justify-content: space-between; align-items: center; @@ -2927,25 +2916,37 @@ input.search-input:focus { } .tag-pane-tag-text { - display: block; - padding: 6px 8px; + display: inline-block; + padding: 6px 0; border-radius: var(--radius-m); - margin: 0; + margin: 0; } -.tag-pane-tag-text:hover { +.tag-container .tree-item { + padding: 0; +} + +.tag-container .tree-item-self .collapse-icon { + padding-right: 4px; +} + +.tag-container .tree-item-self { + border-radius: var(--radius-m); +} +.tag-container .tree-item-self:hover { background-color: var(--shade-plus-darker); } .tag-pane-tag-count { padding: 0; - color: var(--text-muted); + color: var(--shade-30); display: block; position: static; font-size: inherit; } .tag-pane-tag:hover .tag-pane-tag-count { - color: var(--text-accent); + background-color: transparent; + color: var(--shade-30); } .pane-list-item-ending-flair { background: transparent; @@ -3428,7 +3429,7 @@ body:not(.plugin-sliding-panes-rotate-header) margin-left: -3px; } -.graph-controls .collapsible-item-self { +.graph-controls .tree-item-self { cursor: pointer; color: var(--text-normal); font-weight: 500; @@ -3439,11 +3440,11 @@ body:not(.plugin-sliding-panes-rotate-header) margin: 5px 0; } -.graph-control-section:not(:last-child) .collapsible-item-children { +.graph-control-section:not(:last-child) .tree-item-children { border-bottom: none; } -.graph-control-section .collapsible-item-children { +.graph-control-section .tree-item-children { margin: 0 !important; padding-bottom: 16px; } @@ -3453,7 +3454,7 @@ body:not(.plugin-sliding-panes-rotate-header) margin-bottom: 10px !important; } -.graph-controls .collapsible-item-collapse { +.graph-controls .tree-item-collapse { color: var(--text-normal); padding: 0; position: static; @@ -3461,7 +3462,7 @@ body:not(.plugin-sliding-panes-rotate-header) display: flex; } -.graph-controls > .collapsible-item > .collapsible-item-self .right-triangle { +.graph-controls > .tree-item > .tree-item-self .right-triangle { opacity: unset; } @@ -3514,6 +3515,11 @@ body:not(.plugin-sliding-panes-rotate-header) opacity: 1; } +/* Tree-Item */ +.tree-item-children { + margin-left: 18px; +} + input[type="range"] { background-color: rgba(0, 0, 0, 0.15); height: 16px; @@ -3744,6 +3750,7 @@ input[type="range"]::-webkit-slider-thumb:active { .titlebar-button.mod-forward > svg, .nav-action-button[aria-label="New note"] > svg, .nav-action-button[aria-label="New folder"] > svg, +.nav-action-button[aria-label="Show nested tags"] > svg, .side-dock-ribbon-action[aria-label="Open today's note"] > svg, .side-dock-ribbon-action[aria-label="Open another vault"] > svg, .side-dock-ribbon-action[aria-label="Help"] > svg, @@ -3769,6 +3776,7 @@ input[type="range"]::-webkit-slider-thumb:active { .side-dock-ribbon-action[aria-label="Open today's note"]:after, .nav-action-button[aria-label="New folder"]:after, .nav-action-button[aria-label="New note"]:after, +.nav-action-button[aria-label="Show nested tags"]:after, .workspace-tab-header[aria-label="File explorer"] .workspace-tab-header-inner-icon:after, .view-header-icon:after, @@ -3873,6 +3881,24 @@ input[type="range"]::-webkit-slider-thumb:active { content: url('data:image/svg+xml; utf8, '); } +.nav-action-button[aria-label="Show nested tags"]:after { + opacity: 0.5; + content: url('data:image/svg+xml; utf8, '); +} + +.theme-dark .nav-action-button[aria-label="Show nested tags"]:after { + content: url('data:image/svg+xml; utf8, '); +} + +.nav-action-button.is-active[aria-label="Show nested tags"]:after { + opacity: 0.5; + content: url('data:image/svg+xml; utf8, '); +} + +.theme-dark .nav-action-button.is-active[aria-label="Show nested tags"]:after { + content: url('data:image/svg+xml; utf8, '); +} + .side-dock-ribbon-action[aria-label="Open today's note"]:after { opacity: 0.5; content: url('data:image/svg+xml; utf8, '); @@ -3952,8 +3978,8 @@ input[type="range"]::-webkit-slider-thumb:active { } .outline - .collapsible-item.is-collapsed - > .collapsible-item-self + .tree-item.is-collapsed + > .tree-item-self > .collapse-icon:after { padding: 0; width: 14px; @@ -3963,8 +3989,8 @@ input[type="range"]::-webkit-slider-thumb:active { .theme-dark .outline - .collapsible-item.is-collapsed - > .collapsible-item-self + .tree-item.is-collapsed + > .tree-item-self > .collapse-icon:after { content: url('data:image/svg+xml; utf8, '); }