💄 UI Improvements

This commit is contained in:
2023-10-12 18:49:01 +02:00
parent 3a15ef6a91
commit 4ee63a731a
4 changed files with 21 additions and 19 deletions

View File

@@ -58,6 +58,7 @@
left: 1rem;
height: calc(100vh - 2rem);
width: calc(20vw - 1.5rem);
border-right: 1px solid #fff;
}
nav input {

View File

@@ -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} />

View File

@@ -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;
}

View File

@@ -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;
}