123 lines
2.0 KiB
CSS
123 lines
2.0 KiB
CSS
body {
|
|
padding: 0;
|
|
background: #dedede;
|
|
font-family: "Arial", sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--left-bar-width: 300px;
|
|
--color-1-1: #e6ede6;
|
|
--color-1-2: #c6d0c6;
|
|
--color-1-3: #5eae5e;
|
|
--color-1-4: #6f8c6f;
|
|
--color-2-1: #ebf5fe;
|
|
--color-2-2: #57aff7;
|
|
--color-2-3: #1f7cc9;
|
|
--color-2-4: #074c85;
|
|
}
|
|
|
|
.page {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.left-navbar {
|
|
width: calc(var(--left-bar-width) - 40px);
|
|
height: 100vh;
|
|
background: var(--color-1-1);
|
|
position: fixed;
|
|
padding: 20px;
|
|
}
|
|
|
|
.left-bar-header {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
color: var(--color-1-4);
|
|
}
|
|
|
|
.left-navbar .link-to {
|
|
display: block;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
padding: 10px;
|
|
margin-bottom: 7px;
|
|
color: var(--color-1-3);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link-to:hover, .link-to.active {
|
|
background: #FFFFFF;
|
|
color: var(--color-1-4);
|
|
}
|
|
|
|
.content {
|
|
width: calc(100% - var(--left-bar-width));
|
|
margin-left: calc(var(--left-bar-width) + 20px);
|
|
padding-bottom: 100vh;
|
|
}
|
|
|
|
.endpoint-container {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.endpoint {
|
|
background: #FFFFFF;
|
|
margin-bottom: 10px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0,0,0, 0.3);
|
|
}
|
|
|
|
.endpoint .header {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 5px 10px;
|
|
background: var(--color-1-4);
|
|
color: #FFFFFF;
|
|
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.endpoint .body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.endpoint .row {
|
|
display: flex;
|
|
padding: 10px;
|
|
background: var(--color-1-1);
|
|
margin: 7px 0;
|
|
}
|
|
|
|
.endpoint .row .key {
|
|
font-weight: bold;
|
|
color: var(--color-1-4);
|
|
width: 200px;
|
|
}
|
|
|
|
.endpoint .row .key:after {
|
|
content: ':';
|
|
}
|
|
|
|
.json-format {
|
|
background: #FFFFFF;
|
|
width: calc(100% - 200px);
|
|
padding: 10px;
|
|
color: var(--color-2-3);
|
|
border: 1px solid var(--color-1-2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.GET {
|
|
color: var(--color-2-3);
|
|
font-weight: bold;
|
|
}
|
|
.POST {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|