💄 UI Improvements
This commit is contained in:
@@ -58,6 +58,7 @@
|
||||
left: 1rem;
|
||||
height: calc(100vh - 2rem);
|
||||
width: calc(20vw - 1.5rem);
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
nav input {
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
$: headers = [{ key: 'User-Agent', value: 'RestRover/0.0.1' }];
|
||||
$: body = '';
|
||||
|
||||
$: response = null;
|
||||
$: responseBody = '';
|
||||
$: responseHeaders = {};
|
||||
|
||||
@@ -37,7 +38,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>{id} - {name}</h1>
|
||||
<h1>{name}</h1>
|
||||
<div>
|
||||
<input type="text" bind:value={method} />
|
||||
<input type="text" bind:value={requestUrl} />
|
||||
|
||||
@@ -62,10 +62,10 @@
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid silver;
|
||||
background: #fff;
|
||||
background: #323232;
|
||||
line-height: 1.5em;
|
||||
letter-spacing: 0.3px;
|
||||
color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#tab-request-body:checked ~ figure .tab-request-body,
|
||||
@@ -79,24 +79,24 @@
|
||||
padding: 15px 15px;
|
||||
border-top: 1px solid silver;
|
||||
border-right: 1px solid silver;
|
||||
background: hsl(210, 50%, 50%);
|
||||
color: #eee;
|
||||
background: #323232;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav label:nth-child(1) {
|
||||
border-left: 1px solid silver;
|
||||
border-left: 1px solid #c0c0c0;
|
||||
}
|
||||
nav label:hover {
|
||||
background: hsl(210, 50%, 40%);
|
||||
background: #252525;
|
||||
}
|
||||
nav label:active {
|
||||
background: #ffffff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#tab-request-body:checked ~ nav label[for='tab-request-body'],
|
||||
#tab-request-headers:checked ~ nav label[for='tab-request-headers'],
|
||||
#tab-request-unused:checked ~ nav label[for='tab-request-unused'] {
|
||||
background: white;
|
||||
background: #fff;
|
||||
color: #111;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
@@ -110,7 +110,7 @@
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: #fff;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
@@ -47,10 +47,10 @@
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid silver;
|
||||
background: #fff;
|
||||
background: #323232;
|
||||
line-height: 1.5em;
|
||||
letter-spacing: 0.3px;
|
||||
color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#tab1:checked ~ figure .tab1,
|
||||
@@ -64,24 +64,24 @@
|
||||
padding: 15px 15px;
|
||||
border-top: 1px solid silver;
|
||||
border-right: 1px solid silver;
|
||||
background: hsl(210, 50%, 50%);
|
||||
color: #eee;
|
||||
background: #323232;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav label:nth-child(1) {
|
||||
border-left: 1px solid silver;
|
||||
border-left: 1px solid #c0c0c0;
|
||||
}
|
||||
nav label:hover {
|
||||
background: hsl(210, 50%, 40%);
|
||||
background: #252525;
|
||||
}
|
||||
nav label:active {
|
||||
background: #ffffff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#tab1:checked ~ nav label[for='tab1'],
|
||||
#tab2:checked ~ nav label[for='tab2'],
|
||||
#tab3:checked ~ nav label[for='tab3'] {
|
||||
background: white;
|
||||
background: #fff;
|
||||
color: #111;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
@@ -95,7 +95,7 @@
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: #fff;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user