@n1k1t/mock-server 0.1.26 → 0.1.28

package/public/styles/main.css

@@ -115,6 +115,58 @@ div.curtain > * {
   cursor: auto;
 }
 
+div.input {
+  display: inline-block;
+  position: relative;
+  background-color: #383838;
+  padding: 5px 10px;
+  border-radius: 10px;
+}
+div.input input {
+  border: none;
+  background-color: transparent;
+  color: #fff;
+  padding: 0;
+  width: 100%;
+}
+div.input input[type=checkbox] {
+  margin: 0;
+  margin-top: 2px;
+  cursor: pointer;
+}
+div.input select {
+  position: relative;
+  width: calc(100% + 3px);
+  border: none;
+  background-color: transparent;
+  left: -3px;
+  cursor: pointer;
+}
+div.input textarea {
+  width: 100%;
+  min-width: inherit;
+  max-width: inherit;
+  border: none;
+  background-color: transparent;
+}
+div.input:before {
+  content: attr(title);
+  display: block;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 12px;
+}
+div.input.required:after {
+  content: "*";
+  position: absolute;
+  top: 3px;
+  left: 10px;
+  font-size: 20px;
+  color: #ff7b7b;
+}
+div.input.required:before {
+  margin-left: 12px;
+}
+
 .hidden {
   visibility: hidden;
   display: none !important;
@@ -131,49 +183,6 @@ div.curtain > * {
   box-shadow: inset 0 0 0 3px #48d1cc;
 }
 
-@keyframes popup {
-  0% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  20% {
-    opacity: 1;
-    transform: none;
-  }
-  80% {
-    opacity: 1;
-    transform: none;
-  }
-  100% {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-}
-div.popups {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-}
-div.popups div.popup-message {
-  display: flex;
-  background-color: #ffd37b;
-  color: #1e1e1e;
-  padding: 10px 30px;
-  width: 200px;
-  border-radius: 10px;
-  text-align: center;
-  align-items: center;
-  margin-top: 5px;
-  box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1);
-  animation: popup 1s ease-in-out forwards;
-}
-div.popups div.popup-message i {
-  font-size: 20px;
-}
-div.popups div.popup-message span {
-  flex-basis: 90%;
-}
-
 body > header {
   display: flex;
   justify-content: center;
@@ -212,57 +221,6 @@ body > header div.buttons-container#container-select button {
   padding: 10px 20px;
 }
 
-@keyframes l43 {
-  0% {
-    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
-  }
-  16.67% {
-    background-position: 0% 0, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
-  }
-  33.33% {
-    background-position: 0% 100%, 33.3333333333% 0, 66.6666666667% 50%, 100% 50%;
-  }
-  50% {
-    background-position: 0% 50%, 33.3333333333% 100%, 66.6666666667% 0, 100% 50%;
-  }
-  66.67% {
-    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 100%, 100% 0;
-  }
-  83.33% {
-    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 100%;
-  }
-  100% {
-    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
-  }
-}
-.loader {
-  height: 20px;
-  aspect-ratio: 2.5;
-  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #0000);
-  background: var(--_g), var(--_g), var(--_g), var(--_g);
-  background-size: 20% 50%;
-  animation: l43 1s infinite linear;
-}
-
-div.curtain#loader {
-  cursor: default;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 0;
-  height: 100%;
-}
-div.curtain#loader p {
-  color: #fff;
-  font-weight: 100;
-  font-size: 25px;
-}
-div.curtain#loader > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .json-formatter-custom.json-formatter-row {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
@@ -544,11 +502,140 @@ section#settings div.container#groups-filter button.checked {
   pointer-events: all;
 }
 
-section#history div.history:hover div.meta {
-  cursor: pointer;
+@keyframes l43 {
+  0% {
+    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
+  }
+  16.67% {
+    background-position: 0% 0, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
+  }
+  33.33% {
+    background-position: 0% 100%, 33.3333333333% 0, 66.6666666667% 50%, 100% 50%;
+  }
+  50% {
+    background-position: 0% 50%, 33.3333333333% 100%, 66.6666666667% 0, 100% 50%;
+  }
+  66.67% {
+    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 100%, 100% 0;
+  }
+  83.33% {
+    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 100%;
+  }
+  100% {
+    background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%;
+  }
 }
-section#history div.history:hover div.meta span.time, section#history div.history:hover div.meta span.transport, section#history div.history:hover div.meta span.status, section#history div.history:hover div.meta span.name {
-  background-color: rgba(255, 255, 255, 0.15);
+.loader {
+  height: 20px;
+  aspect-ratio: 2.5;
+  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #0000);
+  background: var(--_g), var(--_g), var(--_g), var(--_g);
+  background-size: 20% 50%;
+  animation: l43 1s infinite linear;
+}
+
+div.curtain#loader {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0;
+  height: 100%;
+}
+div.curtain#loader p {
+  color: #fff;
+  font-weight: 100;
+  font-size: 25px;
+}
+div.curtain#loader > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  20% {
+    opacity: 1;
+    transform: none;
+  }
+  80% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+}
+div.popups {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+div.popups div.popup-message {
+  display: flex;
+  background-color: #ffd37b;
+  color: #1e1e1e;
+  padding: 10px 30px;
+  width: 200px;
+  border-radius: 10px;
+  text-align: center;
+  align-items: center;
+  margin-top: 5px;
+  box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1);
+  animation: popup 1s ease-in-out forwards;
+}
+div.popups div.popup-message i {
+  font-size: 20px;
+}
+div.popups div.popup-message span {
+  flex-basis: 90%;
+}
+
+div.search {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 10px;
+  width: 410px;
+  padding: 2px 10px;
+  margin: auto;
+  margin-bottom: 50px;
+  background-color: rgba(255, 255, 255, 0.05);
+  opacity: 0.4;
+  transition-duration: 0.1s;
+}
+div.search > i {
+  width: 20px;
+  margin: 0 15px;
+}
+div.search:hover {
+  opacity: 1;
+}
+div.search button {
+  display: inline-block !important;
+  background-color: transparent;
+  font-size: 20px;
+  padding: 10px 15px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.2);
+}
+div.search button i {
+  margin: 0;
+}
+div.search button:hover {
+  color: #fff;
+}
+div.search div.input {
+  background-color: transparent;
+  width: 380px;
+}
+div.search div.input:before {
+  text-align: center;
 }
 
 div.container {
@@ -690,9 +777,15 @@ div.container div.meta span.seed {
   color: #1e1e1e;
 }
 div.container div.meta span.cache {
-  background-color: #fff;
+  background-color: #7b7bff;
   color: #1e1e1e;
 }
+div.container.history:hover div.meta, div.container.expectation:hover div.meta {
+  cursor: pointer;
+}
+div.container.history:hover div.meta span.time, div.container.history:hover div.meta span.transport, div.container.history:hover div.meta span.status, div.container.history:hover div.meta span.name, div.container.expectation:hover div.meta span.time, div.container.expectation:hover div.meta span.transport, div.container.expectation:hover div.meta span.status, div.container.expectation:hover div.meta span.name {
+  background-color: rgba(255, 255, 255, 0.15);
+}
 div.container pre {
   margin: 0;
   margin-bottom: 20px;