feat: refine database discovery and ISAC interactions
This commit is contained in:
JB
+361
@@ -5,6 +5,7 @@
|
||||
--shd-surface-active:#15191a;
|
||||
--shd-border:#303536;
|
||||
--shd-border-soft:#272c2d;
|
||||
--shd-border-strong:#424849;
|
||||
--shd-text:#ecebe5;
|
||||
--shd-text-muted:#858b8d;
|
||||
--shd-text-dim:#5d6567;
|
||||
@@ -431,3 +432,363 @@
|
||||
.mutation-consequence{align-items:flex-start;flex-direction:column;gap:5px}
|
||||
}
|
||||
|
||||
/* Public database prioritizes registry lookup over gateway spectacle. */
|
||||
.community-index-page{padding-top:20px}
|
||||
.community-index-hero{
|
||||
min-height:138px;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
gap:28px;
|
||||
align-items:center;
|
||||
margin-bottom:8px;
|
||||
padding:18px 24px;
|
||||
}
|
||||
.community-index-hero h1{
|
||||
margin:7px 0 5px;
|
||||
font-size:clamp(34px,4vw,56px);
|
||||
line-height:.9;
|
||||
letter-spacing:-.025em;
|
||||
}
|
||||
.community-index-hero>div>p:last-child{
|
||||
max-width:720px;
|
||||
margin:0;
|
||||
font-size:var(--shd-type-supporting);
|
||||
line-height:1.5;
|
||||
}
|
||||
.community-index-hero .catalogue-count{
|
||||
min-width:230px;
|
||||
justify-items:end;
|
||||
text-align:right;
|
||||
}
|
||||
.community-index-hero .catalogue-count strong{
|
||||
color:var(--shd-text);
|
||||
font-size:var(--shd-type-supporting);
|
||||
letter-spacing:.5px;
|
||||
}
|
||||
.community-index-hero .catalogue-count span{margin:4px 0 10px}
|
||||
.community-index-hero .catalogue-count .secondary{
|
||||
min-height:36px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
padding:0 12px;
|
||||
border:1px solid var(--shd-border);
|
||||
color:var(--shd-text-muted);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-weight:900;
|
||||
letter-spacing:.7px;
|
||||
}
|
||||
.community-index-hero .catalogue-count .secondary:hover,
|
||||
.community-index-hero .catalogue-count .secondary:focus-visible{
|
||||
border-color:var(--shd-orange);
|
||||
color:var(--shd-orange);
|
||||
}
|
||||
.community-index-page .database-registry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
|
||||
.community-index-page .database-registry-grid>a{min-height:165px}
|
||||
.community-index-page .database-registry-grid>a>header{
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
min-height:52px;
|
||||
padding:6px 10px 10px;
|
||||
border-bottom:1px solid var(--shd-border);
|
||||
border-left:2px solid var(--shd-orange);
|
||||
}
|
||||
.community-index-page .database-registry-grid h2{
|
||||
margin:0;
|
||||
color:var(--shd-text);
|
||||
font-size:clamp(20px,1.35vw,24px);
|
||||
line-height:1;
|
||||
letter-spacing:.3px;
|
||||
}
|
||||
.community-index-page .database-registry-grid header b{
|
||||
flex:none;
|
||||
color:var(--shd-text-muted);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
line-height:1;
|
||||
}
|
||||
.community-index-page .database-registry-grid p{margin:12px 0}
|
||||
.community-index-page .database-registry-grid>a>footer{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
margin-top:auto;
|
||||
padding-top:12px;
|
||||
}
|
||||
.community-index-page .database-registry-grid footer small{
|
||||
color:var(--shd-text-muted);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
letter-spacing:.7px;
|
||||
}
|
||||
.community-index-page .database-registry-grid footer span{
|
||||
color:var(--shd-orange);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-weight:900;
|
||||
letter-spacing:.7px;
|
||||
}
|
||||
.database-global-search{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(220px,.45fr) minmax(0,1fr);
|
||||
align-items:center;
|
||||
gap:18px;
|
||||
margin-bottom:8px;
|
||||
padding:12px;
|
||||
border:1px solid var(--shd-border);
|
||||
border-left:2px solid var(--shd-orange);
|
||||
background:var(--shd-terminal);
|
||||
}
|
||||
.database-global-search>div{display:grid;gap:3px}
|
||||
.database-global-search>div span,
|
||||
.database-global-search>div strong{
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-weight:900;
|
||||
letter-spacing:.8px;
|
||||
}
|
||||
.database-global-search>div span{color:var(--shd-orange)}
|
||||
.database-global-search>div strong{color:var(--shd-text)}
|
||||
.database-global-search form{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto auto;
|
||||
gap:6px;
|
||||
}
|
||||
.database-global-search input{
|
||||
min-width:0;
|
||||
min-height:40px;
|
||||
padding:0 12px;
|
||||
border:1px solid var(--shd-border-strong);
|
||||
background:#090b0c;
|
||||
color:var(--shd-text);
|
||||
font:700 var(--shd-type-supporting)/1 var(--shd-font-ui);
|
||||
letter-spacing:.35px;
|
||||
}
|
||||
.database-global-search input:focus-visible{
|
||||
outline:1px solid var(--shd-orange);
|
||||
outline-offset:1px;
|
||||
border-color:var(--shd-orange);
|
||||
}
|
||||
.database-global-search :is(button,a){
|
||||
min-height:40px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
padding:0 14px;
|
||||
border:1px solid var(--shd-orange);
|
||||
background:var(--shd-orange);
|
||||
color:#101010;
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-weight:900;
|
||||
letter-spacing:.7px;
|
||||
}
|
||||
.database-global-search a{
|
||||
border-color:var(--shd-border-strong);
|
||||
background:transparent;
|
||||
color:var(--shd-text-muted);
|
||||
}
|
||||
.database-global-search :is(button,a):hover,
|
||||
.database-global-search :is(button,a):focus-visible{filter:brightness(1.12)}
|
||||
.database-global-search :is(button,a):active{transform:translateY(1px);filter:brightness(.86)}
|
||||
.database-global-results{
|
||||
margin-bottom:8px;
|
||||
border:1px solid var(--shd-border);
|
||||
background:#0e1112;
|
||||
}
|
||||
.database-global-results>header{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:16px;
|
||||
min-height:42px;
|
||||
padding:7px 12px;
|
||||
border-bottom:1px solid var(--shd-border);
|
||||
}
|
||||
.database-global-results>header>div{display:flex;align-items:center;gap:10px}
|
||||
.database-global-results>header span,
|
||||
.database-global-results>header strong,
|
||||
.database-global-results>header b{
|
||||
font-size:var(--shd-type-telemetry);
|
||||
letter-spacing:.7px;
|
||||
}
|
||||
.database-global-results>header span{color:var(--shd-orange);font-weight:900}
|
||||
.database-global-results>header strong{color:var(--shd-text)}
|
||||
.database-global-results>header b{color:var(--shd-text-muted)}
|
||||
.database-global-results>div{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.database-global-results>div>a{
|
||||
display:grid;
|
||||
grid-template-columns:110px minmax(0,1fr) minmax(100px,.7fr) auto;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
min-height:48px;
|
||||
padding:7px 12px;
|
||||
border-top:1px solid var(--shd-border);
|
||||
color:var(--shd-text);
|
||||
}
|
||||
.database-global-results>div>a:nth-child(-n+2){border-top:0}
|
||||
.database-global-results>div>a:nth-child(even){border-left:1px solid var(--shd-border)}
|
||||
.database-global-results>div>a:hover,
|
||||
.database-global-results>div>a:focus-visible{background:#171b1c;box-shadow:inset 2px 0 var(--shd-orange)}
|
||||
.database-global-results>div>a:active{filter:brightness(.86)}
|
||||
.database-global-results>div small,
|
||||
.database-global-results>div span,
|
||||
.database-global-results>div b{font-size:var(--shd-type-telemetry);letter-spacing:.5px}
|
||||
.database-global-results>div small{color:var(--shd-orange);font-weight:900}
|
||||
.database-global-results>div strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--shd-type-supporting)}
|
||||
.database-global-results>div span{overflow:hidden;color:var(--shd-text-muted);text-overflow:ellipsis;white-space:nowrap}
|
||||
.database-global-results>div b{color:var(--shd-orange)}
|
||||
.database-global-results>p{margin:0;padding:16px;color:var(--shd-text-muted);font:var(--shd-type-supporting)/1.5 var(--shd-font-editorial)}
|
||||
.database-category-nav>a{grid-template-columns:minmax(0,1fr) auto}
|
||||
@media(max-width:1100px){
|
||||
.community-index-page .database-registry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
|
||||
.database-global-results>div{grid-template-columns:1fr}
|
||||
.database-global-results>div>a:nth-child(n){border-top:1px solid var(--shd-border);border-left:0}
|
||||
.database-global-results>div>a:first-child{border-top:0}
|
||||
}
|
||||
@media(max-width:750px){
|
||||
.community-index-hero{grid-template-columns:1fr;gap:14px;padding:18px}
|
||||
.community-index-hero .catalogue-count{min-width:0;justify-items:start;text-align:left}
|
||||
.database-global-search{grid-template-columns:1fr;gap:9px}
|
||||
.database-global-search form{grid-template-columns:1fr auto}
|
||||
.database-global-search form input{grid-column:1/-1}
|
||||
.database-global-results>header{align-items:flex-start}
|
||||
.database-global-results>div>a{grid-template-columns:minmax(0,1fr) auto}
|
||||
.database-global-results>div :is(small,span){grid-column:1/-1}
|
||||
.community-index-page .database-registry-grid{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
.database-discovery-console{
|
||||
margin:10px 0;
|
||||
border:1px solid var(--shd-border);
|
||||
border-left:2px solid var(--shd-orange);
|
||||
background:#0d1011;
|
||||
}
|
||||
.database-discovery-console>.database-facet-panel{
|
||||
margin:0;
|
||||
border:0;
|
||||
border-left:0;
|
||||
}
|
||||
.database-discovery-console>.registry-pagination{
|
||||
margin:0;
|
||||
border:0;
|
||||
border-top:1px solid var(--shd-border);
|
||||
background:#101314;
|
||||
}
|
||||
.database-discovery-console>.registry-pagination:first-child{border-top:0}
|
||||
.database-facet-actions{display:flex;align-items:center;gap:5px}
|
||||
.database-facet-panel>header .database-facet-toggle{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
border-color:var(--shd-border-strong);
|
||||
background:#101314;
|
||||
color:var(--shd-text);
|
||||
}
|
||||
.database-facet-panel>header .database-facet-toggle b{
|
||||
min-width:12px;
|
||||
color:var(--shd-orange);
|
||||
font-size:15px;
|
||||
line-height:1;
|
||||
}
|
||||
.database-facet-panel>header .database-facet-toggle:hover,
|
||||
.database-facet-panel>header .database-facet-toggle:focus-visible{
|
||||
border-color:var(--shd-orange);
|
||||
color:var(--shd-orange);
|
||||
}
|
||||
.database-facet-panel.collapsed>header{border-bottom:0}
|
||||
.database-facet-groups[hidden]{display:none}
|
||||
@media(max-width:700px){
|
||||
.database-facet-panel>header{align-items:stretch}
|
||||
.database-facet-actions{width:100%}
|
||||
.database-facet-actions>button{flex:1}
|
||||
}
|
||||
|
||||
/* ISAC interaction polish: distinguish controls from telemetry and preserve readable supporting data. */
|
||||
.kpi-filters>a{
|
||||
align-content:center;
|
||||
}
|
||||
.kpi-filters>a>i{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
right:9px;
|
||||
padding:3px 5px;
|
||||
border:1px solid var(--shd-border-strong);
|
||||
color:var(--shd-text-muted);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-style:normal;
|
||||
font-weight:900;
|
||||
letter-spacing:.55px;
|
||||
transform:translateY(-50%);
|
||||
}
|
||||
.kpi-filters>a>strong{padding-right:76px}
|
||||
.kpi-filters>a>small{color:var(--shd-text-muted)}
|
||||
.kpi-filters>a.active>i{
|
||||
border-color:var(--shd-orange);
|
||||
background:#211a0e;
|
||||
color:var(--shd-orange);
|
||||
}
|
||||
.kpi-filters>a:hover>i,
|
||||
.kpi-filters>a:focus-visible>i{
|
||||
border-color:var(--shd-orange);
|
||||
color:var(--shd-orange);
|
||||
}
|
||||
.pagination-search-state{
|
||||
min-width:82px;
|
||||
height:30px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
color:var(--shd-text-muted);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-weight:900;
|
||||
letter-spacing:.55px;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pagination-search-state.pending{color:var(--shd-orange)}
|
||||
.dashboard-row:not(.table-heading):not(.mobile-detail-row):not(.pending-record):hover{background:transparent}
|
||||
.dashboard-row>button:not(.mobile-row-open),
|
||||
.dashboard-row>.row-action,
|
||||
.dashboard-row>.table-action{
|
||||
min-height:30px;
|
||||
display:inline-grid;
|
||||
place-items:center;
|
||||
justify-self:end;
|
||||
padding:0 9px;
|
||||
border:1px solid #4c3d26;
|
||||
background:#17140f;
|
||||
color:var(--shd-orange);
|
||||
font-size:var(--shd-type-telemetry);
|
||||
font-weight:900;
|
||||
letter-spacing:.55px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.dashboard-row>button:not(.mobile-row-open):hover,
|
||||
.dashboard-row>button:not(.mobile-row-open):focus-visible,
|
||||
.dashboard-row>.row-action:hover,
|
||||
.dashboard-row>.row-action:focus-visible,
|
||||
.dashboard-row>.table-action:hover,
|
||||
.dashboard-row>.table-action:focus-visible{
|
||||
border-color:var(--shd-orange);
|
||||
background:#211a0e;
|
||||
}
|
||||
.dashboard-row>button:not(.mobile-row-open):active,
|
||||
.dashboard-row>.row-action:active,
|
||||
.dashboard-row>.table-action:active{
|
||||
transform:translateY(1px);
|
||||
filter:brightness(.86);
|
||||
}
|
||||
.module-toolbar>div>p:last-child,
|
||||
.module-kpis small,
|
||||
.dashboard-row>div small,
|
||||
.dashboard-row>span small,
|
||||
.table-heading,
|
||||
.pagination-range,
|
||||
.pagination-sizes>span,
|
||||
.database-category-command>div:last-child span,
|
||||
.database-item-card>header small,
|
||||
.database-item-facts span,
|
||||
.database-item-lines span,
|
||||
.database-item-icon-groups>div>span{color:var(--shd-text-muted)}
|
||||
@media(prefers-reduced-motion:reduce){
|
||||
.dashboard-row>button:not(.mobile-row-open):active,
|
||||
.dashboard-row>.row-action:active,
|
||||
.dashboard-row>.table-action:active{transform:none}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user