devonthesofa_obsidian-note-.../styles/components/status-bar.css

74 lines
1.4 KiB
CSS

/* ==========================================================================
Status Bar Components
========================================================================== */
/* Status Bar Container */
.status-bar-item {
/* Uses Obsidian's built-in status bar item styles */
}
.status-bar-no-status {
display: inline-flex;
align-items: center;
gap: var(--size-2-2);
color: var(--status-empty-color, var(--text-muted));
}
.status-bar-no-status:hover {
color: var(--text-normal);
}
.status-bar-no-status__icon {
opacity: 0.9;
}
.status-bar-no-status__label {
font-weight: var(--font-medium);
}
/* Enable Button */
.status-bar-enable-button {
cursor: pointer;
opacity: var(--icon-opacity);
transition: opacity var(--anim-duration-fast) ease;
}
.status-bar-enable-button:hover {
opacity: var(--icon-opacity-hover);
}
/* Status Bar Group */
.status-bar-group-row {
display: flex;
align-items: center;
gap: var(--size-4-2);
}
.status-bar-group-container {
display: flex;
gap: var(--size-2-1);
flex-wrap: wrap;
align-items: center;
}
.status-bar-status-item {
display: inline-flex;
align-items: center;
}
.status-bar-status-item--animated {
animation: status-slide-in var(--anim-duration-fast) ease-out
var(--status-anim-delay, 0s) both;
}
/* Animation for expanding status items */
@keyframes status-slide-in {
from {
opacity: 0;
transform: scale(0.8) translateY(4px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}