devonthesofa_obsidian-note-.../styles/utils.css

106 lines
No EOL
2.2 KiB
CSS

/*
* Utility classes for Note Status Plugin
*/
.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;
}
/* Action buttons in modal */
.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 0.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(0.95);
}
/* Loading indicator */
.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 0.8s linear infinite;
}
@keyframes note-status-loading-spinner {
to { transform: rotate(360deg); }
}
/* Positioning classes for dropdowns */
.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);
}
/* Position adjustment classes */
.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);
}