Revert "Revert "Migrate Postwoman to Nuxt.js (full Vue and SCSS support)""

assets/css/fonts.scss

@@ -0,0 +1,2 @@
+// Poppins (Google Fonts)
+@import url("https://fonts.googleapis.com/css?family=Poppins:500,700&display=swap");

assets/css/styles.scss

@@ -0,0 +1,221 @@
+:root {
+  --bg-color: #121212;
+  --fg-color: #FFF;
+  --ac-color: #51FF0D;
+  --err-color: #393939;
+}
+
+::selection {
+  background-color: var(--ac-color);
+  color: var(--bg-color);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #4a4a4a;
+}
+
+* {
+  box-sizing: border-box;
+  outline: 0;
+  border: 0;
+  font-family: 'Poppins', 'Roboto', 'Noto', sans-serif;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+a {
+  display: inline-flex;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--fg-color);
+  font-weight: 500;
+  line-height: 1.5;
+  animation: fadein .2s;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+  font-weight: 700;
+}
+
+header,
+footer {
+  display: flex;
+  padding: 16px;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+body.sticky-footer footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.logo {
+  color: var(--ac-color);
+}
+
+button {
+  margin: 4px;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: var(--ac-color);
+  color: var(--bg-color);
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+fieldset {
+  margin: 16px 0;
+  border: 2px solid var(--fg-color);
+  border-radius: 4px;
+}
+
+legend {
+  color: var(--fg-color);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+fieldset textarea {
+  resize: vertical;
+}
+
+fieldset.request {
+  border-color: #57b5f9;
+}
+
+fieldset.request legend {
+  color: #57b5f9;
+}
+
+fieldset.history {
+  border-color: #9B9B9B;
+}
+
+fieldset.history legend {
+  color: #9B9B9B;
+}
+
+fieldset.authentication {
+  border-color: #B8E986;
+}
+
+fieldset.authentication legend {
+  color: #B8E986;
+}
+
+fieldset.parameters {
+  border-color: #50E3C2;
+}
+
+fieldset.parameters legend {
+  color: #50E3C2;
+}
+
+fieldset.reqbody {
+  border-color: #4A90E2;
+}
+
+fieldset.reqbody legend {
+  color: #4A90E2;
+}
+
+fieldset.response {
+  border-color: #C198FB;
+}
+
+fieldset.response legend {
+  color: #C198FB;
+}
+
+.hidden .collapsible {
+  display: none;
+}
+
+select,
+input,
+option,
+textarea {
+  margin: 4px;
+  padding: 8px 16px;
+  width: calc(100% - 8px);
+  border-radius: 4px;
+  background-color: #000;
+  color: var(--fg-color);
+  font-weight: 700;
+  font-size: 18px;
+  font-family: monospace;
+}
+
+.error {
+  background-color: var(--err-color);
+}
+
+.disabled {
+  background-color: var(--err-color);
+  color: #b2b2b2;
+}
+
+label {
+  padding: 4px;
+}
+
+ul,
+ol {
+  display: flex;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul li,
+ol li {
+  display: inline-flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+@media (max-width: 720px) {
+
+  ul,
+  ol {
+    flex-direction: column;
+  }
+
+  ul li,
+  ol li {
+    display: flex;
+  }
+}
+
+#installPWA {
+  display: none;
+}