the row to click: method, address, short text
the details, shown and hidden by mwlapi.js
*/
div.req{
margin:0 0 22px;
}
div.req > div.get,
div.req > div.post,
div.req > div.patch,
div.req > div.delete,
div.req > div.tbi{
margin-top:8px;
border:1px solid var(--border);
border-radius:8px;
overflow:hidden;
}
/* The row to click */
div.req > div > table{
margin:0;
border:0;
border-radius:0;
font-size:1em;
}
div.req > div > table td{
padding:9px 12px;
vertical-align:middle;
border:0;
}
div.req > div > table td:first-child{
width:92px;
}
div.req > div > table td:nth-child(2){
width:36%;
font-family:var(--font-mono);
font-size:0.9em;
overflow-wrap:anywhere;
}
tr.showhide{
cursor:pointer;
}
tr.showhide:hover td{
background:var(--surface-2);
}
/* The arrow at the end of the row: down when closed, up when the details are shown */
tr.showhide td:last-child{
position:relative;
padding-right:38px;
}
tr.showhide td:last-child::after{
content:"";
position:absolute;
right:16px;
top:50%;
width:7px;
height:7px;
border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);
transform:translateY(-70%) rotate(45deg);
}
div.req > div:has(> .description:not(.hide)) tr.showhide td:last-child::after{
transform:translateY(-30%) rotate(-135deg);
}
/* The method, coloured as the kind of endpoint */
div.req > div > table td:first-child div{
min-width:66px;
padding:3px 8px;
border-radius:6px;
text-align:center;
font-family:var(--font-mono);
font-size:0.8em;
font-weight:700;
letter-spacing:0.03em;
}
div.req > div.get > table td:first-child div{
background:var(--accent-soft);
color:var(--accent);
}
div.req > div.post > table td:first-child div{
background:var(--good-soft);
color:var(--good);
}
div.req > div.patch > table td:first-child div{
background:var(--sand-soft);
color:var(--sand);
}
div.req > div.delete > table td:first-child div{
background:var(--danger-soft);
color:var(--danger);
}
/* To be implemented: faint (closer to the background than the muted text), and nothing to click */
div.req > div.tbi{
border-style:dashed;
color:var(--faint);
}
div.req > div.tbi > table td:first-child div{
background:var(--surface-2);
color:var(--faint);
}
/* The details of an endpoint */
div.description{
border-top:1px solid var(--border);
padding:2px 6px 8px;
overflow-x:auto;
}
div.description > table{
margin:0;
border:0;
border-radius:0;
font-size:0.95em;
}
div.description > table thead th{
background:none;
}
div.description > table td{
border:0;
}
div.description > table td:first-child{
width:48%;
min-width:240px;
}
/* Filters, blocks and inputs are names, so they are written as code */
div.description > table td:not(:first-child):not(.rsp){
font-family:var(--font-mono);
font-size:0.9em;
}
.hide{
display:none;
}
/* 9. NARROW SCREENS AND PRINT */
@media (max-width:900px){
/* The menu bar may take two rows here, so it scrolls away with the page */
nav.apinav{
position:static;
}
html{
scroll-padding-top:12px;
}
/* The side menu becomes a box above the text, folded until it is clicked (js/api.js uses the same width) */
.page.with-side-menu{
display:block;
}
.side-menu{
position:static;
max-height:none;
margin-bottom:16px;
padding:8px;
background:var(--surface);
border:1px solid var(--border);
border-radius:10px;
}
.side-menu summary{
padding:6px 10px;
pointer-events:auto;
cursor:pointer;
}
.side-menu summary::after{
content:" \25BE";
}
.side-menu a:hover{
background:var(--surface-2);
}
.sheet{
padding:20px 16px 26px;
}
}
@media print{
nav.apinav,
.side-menu{
display:none;
}
body{
background:#ffffff;
}
.page.with-side-menu{
display:block;
}
.sheet{
border:0;
padding:0;
}
}