88 lines
2.2 KiB
CSS
88 lines
2.2 KiB
CSS
.story-intelligence-global-strip {
|
|
margin: -0.65rem 0 0.85rem;
|
|
border-bottom: 1px solid rgba(84, 68, 48, 0.14);
|
|
background: rgba(251, 248, 240, 0.96);
|
|
box-shadow: 0 8px 20px rgba(62, 45, 28, 0.05);
|
|
}
|
|
|
|
.story-intelligence-global-strip__inner {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(180px, 320px) auto;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
min-height: 44px;
|
|
padding: 0.45rem max(0.75rem, env(safe-area-inset-left)) 0.45rem max(0.75rem, env(safe-area-inset-right));
|
|
}
|
|
|
|
.story-intelligence-global-strip__copy {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 0.55rem;
|
|
color: var(--plotline-text);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.story-intelligence-global-strip__copy strong,
|
|
.story-intelligence-global-strip__copy span:not(.story-intelligence-global-strip__dot) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.story-intelligence-global-strip__copy strong {
|
|
flex: 0 1 auto;
|
|
max-width: min(34vw, 28rem);
|
|
}
|
|
|
|
.story-intelligence-global-strip__copy span:not(.story-intelligence-global-strip__dot) {
|
|
color: var(--plotline-text-muted);
|
|
}
|
|
|
|
.story-intelligence-global-strip__dot {
|
|
flex: 0 0 auto;
|
|
width: 0.62rem;
|
|
height: 0.62rem;
|
|
border-radius: 50%;
|
|
background: var(--plotline-secondary);
|
|
box-shadow: 0 0 0 0.22rem rgba(49, 95, 103, 0.14);
|
|
}
|
|
|
|
.story-intelligence-global-strip__meter {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 0.44rem;
|
|
border-radius: 999px;
|
|
background: rgba(84, 68, 48, 0.14);
|
|
}
|
|
|
|
.story-intelligence-global-strip__meter span {
|
|
display: block;
|
|
width: 0;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, var(--plotline-secondary), var(--plotline-accent));
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.story-intelligence-global-strip__inner {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.story-intelligence-global-strip__meter {
|
|
grid-column: 1 / -1;
|
|
order: 3;
|
|
}
|
|
|
|
.story-intelligence-global-strip__copy {
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem 0.55rem;
|
|
}
|
|
|
|
.story-intelligence-global-strip__copy strong,
|
|
.story-intelligence-global-strip__copy span:not(.story-intelligence-global-strip__dot) {
|
|
max-width: calc(100vw - 7rem);
|
|
}
|
|
}
|