Initial import
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--base-background-super-dark: #585344;
|
||||
--base-background-dark: #6F6132;
|
||||
--base-background: #857750;
|
||||
--base-background-bright: #BFB89C;
|
||||
--base-background-bright2: #a29c8b;
|
||||
--base-background-bright3: #e3ded0;
|
||||
--base-background-middle-bright: rgba(229, 213, 191, 0.3);
|
||||
--base-background-super-bright: rgba(229, 213, 191, 0.2);
|
||||
--base-background-ultra-bright: rgba(237, 234, 230, 0.5);
|
||||
--base-background-ultra-bright-clear: #f3f1eb;
|
||||
--base-color: #ffffff;
|
||||
|
||||
}
|
||||
/*
|
||||
|
||||
:root {
|
||||
--base-background-dark: #1c5d87;
|
||||
--base-background: #286a98;
|
||||
--base-background-bright: #a2cfee;
|
||||
--base-background-middle-bright: rgba(39, 130, 189, 0.3);
|
||||
--base-background-super-bright: rgba(39, 130, 189, 0.2);
|
||||
--base-background-ultra-bright: rgba(39, 130, 189, 0.1);
|
||||
--base-background-ultra-bright-clear: #EAF2F9;
|
||||
--base-color: #ffffff;
|
||||
}
|
||||
|
||||
*/
|
||||
@@ -0,0 +1,122 @@
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
.c0 {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.c02 {
|
||||
width: 50px;
|
||||
}
|
||||
.c0 {
|
||||
width: 50px;
|
||||
}
|
||||
.c1 {
|
||||
width: calc(100% / 12)
|
||||
}
|
||||
|
||||
.c2 {
|
||||
width: calc((100% / 12) * 2)
|
||||
}
|
||||
|
||||
.c3 {
|
||||
width: calc((100% / 12) * 3)
|
||||
}
|
||||
|
||||
.c4 {
|
||||
width: calc((100% / 12) * 4)
|
||||
}
|
||||
|
||||
.c5 {
|
||||
width: calc((100% / 12) * 5)
|
||||
}
|
||||
|
||||
.c6 {
|
||||
width: calc((100% / 12) * 6)
|
||||
}
|
||||
|
||||
.c7 {
|
||||
width: calc((100% / 12) * 7)
|
||||
}
|
||||
|
||||
.c8 {
|
||||
width: calc((100% / 12) * 8)
|
||||
}
|
||||
|
||||
.c9 {
|
||||
width: calc((100% / 12) * 9)
|
||||
}
|
||||
|
||||
.c10 {
|
||||
width: calc((100% / 12) * 10)
|
||||
}
|
||||
|
||||
.c11 {
|
||||
width: calc((100% / 12) * 11)
|
||||
}
|
||||
|
||||
.c12 {
|
||||
width: calc((100% / 12) * 12)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,14 @@
|
||||
:root {
|
||||
--base-background-super-dark: #445545;
|
||||
--base-background-dark: #587059;
|
||||
--base-background: #759676;
|
||||
--base-background-broun: #857750;
|
||||
--base-background-bright: #9eba9e;
|
||||
--base-background-bright2: #a9c4a9;
|
||||
--base-background-bright3: #d3e2d3;
|
||||
--base-background-middle-bright: rgba(17, 91, 19, 0.3);
|
||||
--base-background-super-bright: rgba(17, 91, 19, 0.2);
|
||||
--base-background-ultra-bright: rgba(17, 91, 19, 0.1);
|
||||
--base-background-ultra-bright-clear: rgb(229, 237, 232);
|
||||
--base-color: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
.search-box-container {
|
||||
padding: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
||||
position: absolute;
|
||||
width: calc(100% - 20px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.search-box-container .input-search {
|
||||
width: calc(100% - 15px);
|
||||
}
|
||||
|
||||
.up-position {
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.down-position {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.autocomplete-list {
|
||||
width: 100%;
|
||||
background: #f1f1f1;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
height: 150px;
|
||||
display: none;
|
||||
padding: 3px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.autocomplete-image-list {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.autocomplete-value {
|
||||
padding: 10px 5px;
|
||||
background: #FFFFFF;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.autocomplete-value:hover {
|
||||
background: var(--base-background-ultra-bright);
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: var(--base-background-dark);
|
||||
border: 1px solid var(--base-background);
|
||||
text-align: center;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: var(--base-background-dark);
|
||||
border: 1px solid var(--base-background);
|
||||
text-align: center;
|
||||
margin: 3px;
|
||||
}
|
||||
.add-button:hover, .clear-button:hover {
|
||||
background: var(--base-background-ultra-bright-clear);
|
||||
}
|
||||
|
||||
.input-main-search {
|
||||
padding: 10px;
|
||||
border: 1px solid var(--base-background);
|
||||
background: #FFFFFF;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.panel-result-selected {
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--base-background-super-bright);
|
||||
background: var(--base-background-ultra-bright-clear);
|
||||
}
|
||||
.row-result .img-container {
|
||||
overflow: hidden; width: 80px; height: 80px; background: #f1f1f1;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.object-list .row-result {
|
||||
border: 1px solid #cccccc;
|
||||
margin-top: 10px;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.remove-object {
|
||||
position: absolute;right: 10px;
|
||||
top: calc(50% - 15px);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #f1f1f1;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.remove-object .la {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.remove-object:hover {
|
||||
background: #c13939;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.row-result a {
|
||||
color: var(--base-background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.row-result a:hover {
|
||||
color: var(--base-background-dark);
|
||||
}
|
||||
Reference in New Issue
Block a user