devonthesofa_obsidian-note-.../styles/components/change-status-modal.css

54 lines
1.4 KiB
CSS

/* ==========================================================================
Change Status Modal
========================================================================== */
.status-selector-group {
display: flex;
flex-direction: column;
gap: var(--size-4-2);
outline: none;
}
.status-selector-group:focus-visible {
outline: 2px solid var(--background-modifier-border-hover);
outline-offset: 4px;
}
.note-status-template-tabs {
display: inline-flex;
align-items: center;
gap: var(--size-2-1);
padding: var(--size-2-2);
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
background: var(--background-secondary);
margin-bottom: var(--size-2-2);
}
.note-status-template-tab {
border: none;
background: transparent;
color: var(--text-muted);
padding: var(--size-2-2) var(--size-3-1);
border-radius: var(--radius-s);
cursor: pointer;
transition:
background var(--anim-duration-fast) ease,
color var(--anim-duration-fast) ease,
box-shadow var(--anim-duration-fast) ease;
}
.note-status-template-tab:not(.is-active):hover {
background: var(--background-modifier-hover);
color: var(--text-normal);
}
.note-status-template-tab.is-active {
background: var(--interactive-accent);
color: var(--text-on-accent);
box-shadow: 0 0 0 1px var(--background-modifier-border);
}
.note-status-template-tab:focus-visible {
outline: 2px solid var(--background-modifier-border);
}