2023-10-11 14:27:23 +02:00
|
|
|
@import "vars.scss";
|
|
|
|
|
2023-10-11 15:28:49 +02:00
|
|
|
button {
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
box-shadow: none;
|
2023-10-11 14:27:23 +02:00
|
|
|
|
2023-10-11 15:28:49 +02:00
|
|
|
&:hover {
|
|
|
|
color: $default-hover-fg;
|
2023-10-11 14:27:23 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-11 15:28:49 +02:00
|
|
|
hgroup {
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
|
2023-10-11 14:27:23 +02:00
|
|
|
h1 {
|
|
|
|
background: $header-bg;
|
|
|
|
padding: .75em .5em;
|
|
|
|
box-shadow: $title-shadow;
|
|
|
|
font-size: 1.1em;
|
|
|
|
margin-bottom: 0 !important;
|
|
|
|
|
|
|
|
@include from($desktop) {
|
|
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
@include header;
|
|
|
|
}
|
|
|
|
|
|
|
|
section {
|
|
|
|
max-height: 50vh;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
margin-top: .5em;
|
|
|
|
|
|
|
|
&.args {
|
|
|
|
margin-top: .5em;
|
|
|
|
padding-top: .5em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
margin-bottom: 0.25em;
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
header {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.autocomplete-container {
|
|
|
|
width: calc(100% - $request-headers-btn-width);
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
width: $request-headers-btn-width;
|
|
|
|
display: inline-flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
margin-right: 0.5em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.doc {
|
|
|
|
height: 100%;
|
|
|
|
background: $doc-bg;
|
|
|
|
padding: 1em;
|
|
|
|
border-radius: 1em;
|
|
|
|
overflow: auto;
|
|
|
|
margin-top: 0.1em;
|
|
|
|
box-shadow: $doc-shadow;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.doc) {
|
|
|
|
blockquote {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
width: 100%;
|
|
|
|
height: 10em;
|
|
|
|
margin-bottom: .5em;
|
|
|
|
padding: .5em;
|
|
|
|
border: $default-border-2;
|
|
|
|
border-radius: 1em;
|
|
|
|
box-shadow: $border-shadow-bottom-right;
|
|
|
|
outline: none;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
border: 1px solid $default-hover-fg-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
border: 1px solid $selected-fg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
form {
|
|
|
|
background: $default-bg-2;
|
|
|
|
margin: 0;
|
|
|
|
border-radius: 0;
|
|
|
|
border: none;
|
|
|
|
padding: 1em .5em;
|
|
|
|
margin-bottom: 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.raw .first-row {
|
|
|
|
@include until($tablet) {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include from($tablet) {
|
|
|
|
width: 80%;
|
|
|
|
max-width: 60em;
|
|
|
|
}
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
button {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.args-list {
|
|
|
|
padding-top: 0.5em;
|
|
|
|
|
|
|
|
@include until($tablet) {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include from($tablet) {
|
|
|
|
width: $params-tablet-width;
|
|
|
|
margin-right: 1.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include from($desktop) {
|
|
|
|
width: $params-desktop-width;
|
|
|
|
}
|
|
|
|
|
|
|
|
.arg {
|
|
|
|
margin-bottom: .25em;
|
|
|
|
@include until($tablet) {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.required-flag {
|
|
|
|
width: 1.25em;
|
|
|
|
font-weight: bold;
|
|
|
|
margin-left: 0.25em;
|
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
width: calc(100% - 1.5em);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-arg-value {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.args-body {
|
|
|
|
display: flex;
|
|
|
|
margin-top: 0.15em;
|
|
|
|
margin-bottom: 1.5em;
|
|
|
|
|
|
|
|
@include until($tablet) {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.add-arg {
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
button {
|
|
|
|
width: 100%;
|
|
|
|
background: $extra-params-btn-bg;
|
|
|
|
border: $title-border;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.extra-arg {
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: .5em;
|
|
|
|
|
|
|
|
label {
|
|
|
|
margin-left: 0.25em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-extra-arg-del {
|
|
|
|
border: 0;
|
|
|
|
text-align: right;
|
|
|
|
padding: 0 .5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type=text] {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-11 16:38:38 +02:00
|
|
|
.response, .doc-container {
|
2023-10-11 15:28:49 +02:00
|
|
|
flex-grow: 1;
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
width: calc(100% - 2em);
|
|
|
|
}
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
width: 2em;
|
|
|
|
|
|
|
|
button {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-10-11 16:38:38 +02:00
|
|
|
}
|
2023-10-11 15:28:49 +02:00
|
|
|
|
2023-10-11 16:38:38 +02:00
|
|
|
.output {
|
|
|
|
background: $output-bg;
|
|
|
|
padding: 0 0.75em;
|
|
|
|
overflow: auto;
|
|
|
|
margin-top: 0.1em;
|
|
|
|
border-radius: 1em;
|
|
|
|
box-shadow: $output-shadow;
|
|
|
|
color: $response-fg;
|
2023-10-11 15:28:49 +02:00
|
|
|
|
2023-10-11 16:38:38 +02:00
|
|
|
&.error {
|
|
|
|
color: $error-fg;
|
2023-10-11 15:28:49 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-11 16:38:38 +02:00
|
|
|
textarea.curl-snippet {
|
|
|
|
width: calc(100vw - 5em);
|
|
|
|
height: 100vh;
|
|
|
|
max-width: 40em;
|
|
|
|
max-height: 25em;
|
|
|
|
line-break: anywhere;
|
|
|
|
overflow: auto;
|
|
|
|
padding: 0.5em;
|
|
|
|
}
|