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.put,
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);
}
/* PUT sets an item and PATCH changes one: both look the same */
div.req > div.put > table td:first-child div,
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;
overflow-wrap:anywhere;
}
.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;
}
/* Row headings may break inside a name here, so a table fits a narrow screen */
main tbody th{
overflow-wrap:anywhere;
}
div.description > table td:first-child{
min-width:0;
}
}
/* A phone: the bar shows only the name and the menu button. The button unfolds the menu below
the name as a list, with a dropdown's choices indented under its group, and www.myweblog.se last.
(The FFK and key pages have no menu and no button, so their www.myweblog.se link stays in the bar.) */
@media (max-width:700px){
nav.apinav .apinav-inner{
gap:0;
}
/* The first row keeps the height of the bar, also when the menu is unfolded below it */
nav.apinav .apinav-brand{
min-height:52px;
}
nav.apinav .apinav-toggle{
display:inline-flex;
}
nav.apinav .apinav-toggle ~ .apinav-menu,
nav.apinav .apinav-toggle ~ .apinav-side{
display:none;
}
nav.apinav.apinav-open .apinav-toggle ~ .apinav-menu,
nav.apinav.apinav-open .apinav-toggle ~ .apinav-side{
display:block;
flex-basis:100%;
}
nav.apinav .apinav-menu{
padding:4px 0 8px;
}
nav.apinav .apinav-top{
display:flex;
justify-content:space-between;
width:100%;
padding:10px;
text-align:left;
}
/* The page being shown: a line at the left instead of underneath */
nav.apinav .apinav-top[aria-current='page'],
nav.apinav .apinav-top.apinav-current{
box-shadow:inset 3px 0 0 #6fa8dc;
border-radius:0 6px 6px 0;
}
nav.apinav .apinav-dropdown{
position:static;
min-width:0;
background:none;
border:0;
box-shadow:none;
padding:0 0 4px 16px;
}
nav.apinav .apinav-dropdown a{
padding:10px;
white-space:normal;
color:#c9d3df;
}
nav.apinav .apinav-dropdown a:hover{
background-color:rgba(255,255,255,0.08);
color:#ffffff;
}
nav.apinav .apinav-dropdown a[aria-current='page']{
background-color:rgba(111,168,220,0.18);
color:#ffffff;
}
nav.apinav .apinav-note{
color:#9fb0c4;
}
nav.apinav .apinav-toggle ~ .apinav-side{
margin-left:0;
padding:10px 10px 14px;
border-top:1px solid rgba(255,255,255,0.12);
}
}
@media print{
nav.apinav,
.side-menu{
display:none;
}
body{
background:#ffffff;
}
.page.with-side-menu{
display:block;
}
.sheet{
border:0;
padding:0;
}
}