e778c883db
Closes B-156 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
263 lines
3.8 KiB
CSS
263 lines
3.8 KiB
CSS
/* Canonical CSS owner: navigation. Historical layers consolidated 2026-08-02. */
|
|
.segment:last-child {
|
|
border-right: 0px;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.toolbar-controls {
|
|
width: 100%;
|
|
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.segmented {
|
|
width: 100%;
|
|
}
|
|
|
|
.segment {
|
|
min-width: 0px;
|
|
|
|
flex: 1 1 0%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.toolbar-controls {
|
|
width: 100%;
|
|
|
|
align-items: stretch;
|
|
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.segmented {
|
|
min-height: 42px;
|
|
}
|
|
|
|
.segment {
|
|
min-height: 40px;
|
|
|
|
padding: 0px 10px;
|
|
}
|
|
}
|
|
|
|
.toolbar-controls {
|
|
display: flex;
|
|
|
|
margin-left: auto;
|
|
|
|
gap: 7px;
|
|
}
|
|
|
|
.segmented {
|
|
height: var(--control-height);
|
|
|
|
display: flex;
|
|
|
|
overflow: hidden;
|
|
|
|
min-height: var(--control-height);
|
|
|
|
padding: 2px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.segment {
|
|
background: var(--surface);
|
|
|
|
cursor: pointer;
|
|
|
|
white-space: nowrap;
|
|
|
|
min-height: 28px;
|
|
|
|
padding: 0px 10px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: 6px;
|
|
|
|
color: var(--text-secondary);
|
|
|
|
font-size: var(--font-size-label);
|
|
}
|
|
|
|
.segment.active {
|
|
background: var(--surface-raised);
|
|
|
|
color: var(--text-primary);
|
|
|
|
box-shadow: rgba(16, 24, 40, 0.09) 0px 1px 2px;
|
|
}
|
|
|
|
.redesigned-page-head .toolbar-controls {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.redesigned-page-head .segmented {
|
|
min-height: 28px;
|
|
|
|
display: inline-flex;
|
|
|
|
gap: 2px;
|
|
|
|
padding: 2px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: 8px;
|
|
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.redesigned-page-head .segment {
|
|
min-height: 24px;
|
|
|
|
padding: 4px 12px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: 6px;
|
|
|
|
background: transparent;
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.redesigned-page-head .segment.active {
|
|
background: var(--surface);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-weight: 600;
|
|
|
|
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
|
|
}
|
|
|
|
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
|
.redesigned-page-head .toolbar-controls {
|
|
width: 100%;
|
|
|
|
margin-left: 0px;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 2px;
|
|
|
|
border-bottom: 1px solid var(--line-soft);
|
|
|
|
padding: 0px 14px;
|
|
}
|
|
|
|
.tabs .tab {
|
|
padding: 10px 14px;
|
|
|
|
font-size: 13px;
|
|
|
|
color: var(--sub);
|
|
|
|
border-bottom: 2px solid transparent;
|
|
|
|
margin-bottom: -1px;
|
|
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tabs .tab .n {
|
|
font-size: 11px;
|
|
|
|
color: var(--faint);
|
|
|
|
margin-left: 3px;
|
|
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tabs .tab.active {
|
|
color: var(--blue);
|
|
|
|
border-bottom-color: var(--blue);
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tabs .tab.active .n {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.seg {
|
|
display: inline-flex;
|
|
|
|
background: var(--surface-muted);
|
|
|
|
border-radius: 8px;
|
|
|
|
padding: 2px;
|
|
|
|
gap: 2px;
|
|
}
|
|
|
|
@media (min-width: 521px) {
|
|
.segment {
|
|
min-width: 52px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.toolbar-controls {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* Mobile navigation and filter contract. */
|
|
@media (max-width: 767px) {
|
|
body.mobile-shell .toolbar-controls,
|
|
body.mobile-shell .redesigned-page-head .toolbar-controls {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-8);
|
|
margin-left: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
body.mobile-shell .toolbar-controls::-webkit-scrollbar,
|
|
body.mobile-shell .redesigned-page-head .toolbar-controls::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
body.mobile-shell .segmented,
|
|
body.mobile-shell .redesigned-page-head .segmented {
|
|
width: max-content;
|
|
min-width: max-content;
|
|
min-height: var(--mobile-touch-size);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
body.mobile-shell .segment,
|
|
body.mobile-shell .redesigned-page-head .segment {
|
|
min-width: var(--mobile-touch-size);
|
|
min-height: calc(var(--mobile-touch-size) - var(--space-4));
|
|
padding: 0 var(--space-12);
|
|
}
|
|
}
|