devonthesofa_obsidian-note-status/styles.css

:root{--status-transition-time: .22s;--status-border-radius: var(--radius-s, 4px);--status-box-shadow: var(--shadow-s, 0 2px 8px rgba(0, 0, 0, .15));--status-hover-shadow: var(--shadow-m, 0 4px 12px rgba(0, 0, 0, .2));--status-icon-size: 16px;--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1)}@keyframes note-status-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes note-status-slide-in-fade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes note-status-fade-in-slide-down{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes note-status-pulse{0%{transform:scale(1)}50%{transform:scale(.98)}to{transform:scale(1)}}.theme-dark .note-status-popover{box-shadow:var(--shadow-l)}.theme-dark .note-status-option-selecting{box-shadow:0 0 0 1px var(--interactive-accent)}@media (forced-colors: active){.note-status-chip,.note-status-option.is-selected{border:1px solid currentColor}.note-status-action-button:focus-visible,.note-status-chip:focus-visible,.note-status-option:focus-visible{outline:2px solid currentColor;outline-offset:2px}}@media print{.note-status-unified-dropdown,.note-status-bar,.note-status-pane{display:none!important}}.note-status-empty-indicator{color:var(--text-muted);font-style:italic;padding:var(--size-4-1, 4px);display:flex;align-items:center;justify-content:center;color:var(--text-accent);font-size:1.2em}.note-status-action-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-s);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s ease;border:none;padding:0}.note-status-action-button:hover{background-color:var(--background-modifier-hover);color:var(--text-normal)}.note-status-action-button.note-status-button-active{background-color:var(--interactive-accent);color:var(--text-on-accent);transform:scale(.95)}.note-status-loading{display:flex;justify-content:center;align-items:center;padding:20px;color:var(--text-muted);font-style:italic}.note-status-loading span{position:relative;padding-left:24px}.note-status-loading span:before{content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid var(--background-modifier-border);border-top-color:var(--text-accent);border-radius:50%;animation:note-status-loading-spinner .8s linear infinite}@keyframes note-status-loading-spinner{to{transform:rotate(360deg)}}.note-status-dummy-target{position:fixed;z-index:1000;width:0;height:0;left:var(--pos-x-px, 0);top:var(--pos-y-px, 0);pointer-events:none}.note-status-popover-fixed{position:fixed;z-index:999;--pos-x: 0;--pos-y: 0;--max-height: 300px;left:var(--pos-x-px, 0);top:var(--pos-y-px, 0);max-height:var(--max-height-px, 300px)}.note-status-popover-right{left:auto!important;right:var(--right-offset-px, 10px)}.note-status-popover-bottom{top:auto!important;bottom:var(--bottom-offset-px, 10px)}.note-status-bar{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--radius-s);transition:all .2s var(--ease-out);cursor:pointer;height:22px}.note-status-bar:hover{background-color:var(--background-modifier-hover)}.note-status-badges{display:flex;align-items:center;gap:4px}.note-status-badge{display:flex;align-items:center;padding:2px 6px;border-radius:10px;background:var(--background-secondary-alt);font-size:var(--font-ui-smaller);max-width:100px;margin-right:2px}.note-status-badge-icon{margin-right:2px}.note-status-badge-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-bar .note-status-icon:after{bottom:auto;top:-30px}.note-status-bar.hidden{display:none}.note-status-bar.auto-hide{opacity:.5;transition:opacity .2s var(--ease-out)}.note-status-bar.visible{opacity:1}.note-status-pane{padding:var(--size-4-2, 8px);background:var(--background-secondary);color:var(--text-normal);font-family:var(--font-interface);overflow-y:auto;height:100%;display:flex;flex-direction:column}.note-status-header{position:sticky;top:0;z-index:10;background:var(--background-secondary);padding-bottom:var(--size-4-2, 8px);border-bottom:1px solid var(--background-modifier-border);margin-bottom:var(--size-4-2, 8px);display:flex;flex-direction:column;gap:var(--size-4-2, 8px)}.note-status-search{width:100%;position:relative}.search-input-wrapper,.note-status-search-wrapper{position:relative;display:flex;align-items:center}.search-input-icon,.note-status-search-icon{position:absolute;left:var(--size-4-1, 4px);color:var(--text-muted);display:flex;align-items:center;pointer-events:none;padding:4px}.note-status-search-input,.note-status-popover-search-input{width:100%;padding:var(--input-padding);padding-left:calc(var(--size-4-1, 4px) * 3 + 18px);border:var(--input-border-width) solid var(--background-modifier-border);border-radius:var(--input-radius);background:var(--background-primary);color:var(--text-normal);outline:none;transition:all var(--status-transition-time) var(--ease-out)}.note-status-search-input:focus,.note-status-popover-search-input:focus{border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--interactive-accent-hover)}.search-input-clear-button,.note-status-search-clear-button{opacity:0;position:absolute;right:var(--size-4-1, 4px);cursor:pointer;color:var(--text-muted);display:flex;align-items:center;transition:opacity var(--status-transition-time) var(--ease-out);padding:4px;border-radius:50%}.search-input-clear-button.is-visible,.note-status-search-clear-button.is-visible{opacity:1}.search-input-clear-button:hover,.note-status-search-clear-button:hover{color:var(--text-normal);background-color:var(--background-modifier-hover)}.status-pane-actions-container{display:flex;gap:var(--size-4-2, 8px);justify-content:flex-end;margin-top:var(--size-4-1, 4px)}.note-status-view-toggle,.note-status-actions-refresh{padding:var(--size-4-1, 4px) var(--size-4-2, 8px);border:var(--input-border-width) solid var(--background-modifier-border);border-radius:var(--button-radius);background:var(--background-primary);color:var(--text-normal);cursor:pointer;transition:all var(--status-transition-time) var(--ease-out);display:flex;align-items:center;justify-content:center}.note-status-view-toggle:hover,.note-status-actions-refresh:hover{background:var(--background-modifier-hover);box-shadow:var(--shadow-s)}.note-status-view-toggle:active,.note-status-actions-refresh:active{transform:translateY(1px);box-shadow:none}.note-status-groups-container{flex:1;overflow-y:auto;padding-right:2px}.note-status-group{margin-bottom:var(--size-4-3, 12px);border-radius:var(--radius-s);background:var(--background-primary-alt);box-shadow:var(--shadow-xs);overflow:hidden;animation:note-status-fade-in-slide-down .3s var(--ease-out)}.note-status-group .nav-folder-title{cursor:pointer;padding:var(--size-4-1, 4px) var(--size-4-2, 8px);background:var(--background-secondary-alt);transition:background var(--status-transition-time) var(--ease-out)}.note-status-group .nav-folder-title:hover{background:var(--background-modifier-hover)}.note-status-group .nav-folder-title-content{font-weight:var(--font-semibold);display:flex;align-items:center;gap:var(--size-4-1, 4px)}.note-status-collapse-indicator{margin-right:var(--size-4-2, 8px);display:flex;align-items:center;color:var(--text-muted);transition:transform var(--status-transition-time) var(--ease-in-out);opacity:1}.note-status-is-collapsed .note-status-collapse-indicator{transform:rotate(-90deg)}.note-status-group .nav-folder-children{padding:var(--size-4-1, 4px);background:var(--background-primary);transition:height var(--status-transition-time) var(--ease-out)}.note-status-group.nav-folder.note-status-is-collapsed .nav-folder-children{display:none}.nav-file{border-radius:var(--radius-s);transition:background var(--status-transition-time) var(--ease-out);margin-bottom:2px;position:relative}.nav-file:hover{background:var(--background-modifier-hover)}.nav-file-title{display:flex;align-items:center;padding:var(--size-4-1, 4px) var(--size-4-2, 8px);flex-wrap:nowrap}.nav-file-icon{color:var(--text-muted);margin-right:var(--size-4-2, 8px);display:flex;align-items:center;flex-shrink:0}.nav-file-title-content{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-status-compact-view .nav-file-title{padding:2px var(--size-4-2, 8px);font-size:var(--font-smaller)}.note-status-compact-view .nav-folder-children{padding:0}.note-status-compact-view .nav-file{margin-bottom:0;border-radius:0;border-bottom:1px solid var(--background-modifier-border)}.note-status-compact-view .nav-file:last-child{border-bottom:none}.note-status-empty-message{margin-bottom:12px;text-align:center;color:var(--text-muted);font-style:italic}.note-status-button-container{display:flex;justify-content:center;margin-top:16px}.note-status-show-unassigned-button{background-color:var(--interactive-accent);color:var(--text-on-accent);padding:8px 16px;border-radius:var(--radius-s, 4px);border:none;cursor:pointer;font-size:var(--font-ui-small);transition:all .2s var(--ease-out);box-shadow:var(--shadow-s)}.note-status-show-unassigned-button:hover{background-color:var(--interactive-accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-m)}.note-status-show-unassigned-button:active{transform:translateY(0);box-shadow:var(--shadow-xs)}.note-status-pagination{display:flex;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid var(--background-modifier-border);margin-top:8px}.note-status-pagination-button{padding:4px 8px;border-radius:var(--radius-s);background:var(--background-secondary);border:var(--input-border-width) solid var(--background-modifier-border);color:var(--text-normal);cursor:pointer;transition:all .15s var(--ease-out);font-size:var(--font-smaller)}.note-status-pagination-button:hover{background:var(--background-modifier-hover);box-shadow:var(--shadow-s)}.note-status-pagination-info{font-size:var(--font-smaller);color:var(--text-muted)}.note-status-popover{position:absolute;background:var(--background-primary);border-radius:var(--radius-m);box-shadow:var(--status-box-shadow);z-index:calc(var(--layer-popover) + 10);max-height:300px;display:flex;flex-direction:column;border:1px solid var(--background-modifier-border);min-width:200px;overflow:hidden;width:auto!important;opacity:0;transform:scale(.95);transition:opacity var(--status-transition-time) var(--ease-out),transform var(--status-transition-time) var(--ease-out);transform-origin:top left;pointer-events:all!important}.note-status-popover.note-status-popover-animate-in{opacity:1;transform:scale(1)}.note-status-popover.note-status-popover-animate-out{opacity:0;transform:scale(.95);pointer-events:none}.note-status-popover-search{padding:8px;position:sticky;top:0;background:var(--background-primary);z-index:3;border-bottom:1px solid var(--background-modifier-border)}.note-status-options-container{overflow-y:auto;overflow-x:hidden;max-height:250px;padding:var(--size-4-1, 4px);scrollbar-width:thin;scrollbar-color:var(--background-modifier-border) transparent}.note-status-options-container::-webkit-scrollbar{width:6px}.note-status-options-container::-webkit-scrollbar-thumb{background-color:var(--background-modifier-border);border-radius:3px}.note-status-options-container::-webkit-scrollbar-track{background-color:transparent}.note-status-empty-options{padding:16px 12px;text-align:center;color:var(--text-muted);font-style:italic;font-size:var(--font-smaller)}.note-status-option{display:flex;align-items:center;padding:8px 12px;margin:2px 4px;border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);cursor:pointer!important;transition:background-color .15s ease}.note-status-option:hover{background:var(--background-modifier-hover)}.note-status-option.is-selected{background:var(--background-secondary-alt);font-weight:var(--font-medium)}.note-status-option-selecting{background-color:var(--interactive-accent)!important;color:var(--text-on-accent)!important;animation:note-status-pulse .3s var(--ease-out)}.note-status-option-icon{margin-right:8px;font-size:1.1em}.note-status-option-text{flex:1;font-size:var(--font-smaller);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-status-option-check{margin-left:auto;color:var(--text-accent)}.note-status-unified-dropdown{width:280px;max-width:90vw;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-m);border:1px solid var(--background-modifier-border);background:var(--background-primary);z-index:9999!important;pointer-events:all!important}.note-status-popover-animate-in{animation:note-status-dropdown-fade-in .22s var(--ease-out) forwards}@keyframes note-status-dropdown-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes note-status-dropdown-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.note-status-popover-header{padding:12px;border-bottom:1px solid var(--background-modifier-border);background:var(--background-secondary-alt);display:flex;align-items:center;position:sticky;top:0;z-index:2}.note-status-popover-title{display:flex;align-items:center;gap:8px;font-weight:var(--font-semibold);color:var(--text-normal)}.note-status-popover-icon{display:flex;align-items:center;justify-content:center;color:var(--text-accent)}.note-status-popover-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:var(--background-primary-alt);max-height:120px;overflow-y:auto;border-bottom:1px solid var(--background-modifier-border)}.note-status-chip{display:inline-flex;align-items:center;padding:4px 10px;background:var(--background-secondary);border-radius:16px;box-shadow:var(--shadow-xs);font-size:var(--font-smaller);transition:all .15s var(--ease-out);border:1px solid var(--background-modifier-border);max-width:180px;animation:note-status-scale-in .2s var(--ease-out)}.note-status-chip.clickable{cursor:pointer}.note-status-chip.clickable:hover{background:var(--background-modifier-hover);transform:translateY(-1px);box-shadow:var(--status-hover-shadow)}.note-status-chip-removing{transform:scale(.8);opacity:0;pointer-events:none;transition:all .15s ease-out}.note-status-chip-icon{margin-right:6px}.note-status-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-status-chip-remove{margin-left:6px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--background-modifier-border);color:var(--text-muted);cursor:pointer;transition:all .15s var(--ease-out)}.note-status-chip-remove:hover{background:var(--text-accent);color:var(--text-on-accent);transform:scale(1.1)}.note-status-toolbar-badge-container{display:flex;align-items:center;justify-content:center;position:relative}.note-status-toolbar-icon{color:var(--text-normal)!important;display:flex!important;align-items:center!important;justify-content:center!important}.note-status-count-badge{position:absolute;top:-5px;right:-8px;background-color:var(--interactive-accent);color:var(--text-on-accent);border-radius:10px;font-size:10px;min-width:14px;height:14px;padding:0 3px;display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold)}.note-status-icon-container{display:inline-flex;margin-left:var(--size-4-1, 4px);gap:2px;align-items:center;flex-shrink:0}.note-status-icon{font-size:var(--font-ui-smaller);display:inline-flex;align-items:center;justify-content:center;width:var(--status-icon-size);height:var(--status-icon-size);position:relative;z-index:500}.nav-file-title .note-status-icon:after{bottom:150%}.status-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--dot-color, #ffffff);margin-right:4px}.template-buttons{margin-top:15px;display:flex;gap:10px}.template-item{border:1px solid var(--background-modifier-border);border-radius:var(--status-border-radius);margin-bottom:10px;padding:10px;background:var(--background-primary-alt)}.template-header{display:flex;align-items:center;margin-bottom:5px}.template-checkbox{margin-right:10px}.template-name{font-weight:700}.template-description{font-size:.9em;color:var(--text-muted);margin-bottom:8px}.template-statuses{display:flex;flex-wrap:wrap;gap:5px}.template-status-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;background:var(--background-secondary);font-size:.85em}