Feat/tailwind (#1179)
This commit is contained in:
Liyas Thomas
GitHub
@@ -1,784 +0,0 @@
|
||||
$responsiveWidth: 768px;
|
||||
|
||||
::selection {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-dark-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: var(--fg-light-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--fg-light-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-family: "Poppins", "Roboto", "Noto", sans-serif;
|
||||
line-height: 1.5;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
scroll-behavior: smooth;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
body.afterLoad {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.link {
|
||||
color: var(--ac-color);
|
||||
}
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
& > div {
|
||||
display: flex;
|
||||
padding: 16px 8px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active,
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.page-enter,
|
||||
.page-leave-active,
|
||||
.layout-enter,
|
||||
.layout-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.wrapper .page {
|
||||
min-height: calc(100vh - 153px);
|
||||
}
|
||||
|
||||
.header,
|
||||
.content,
|
||||
.columns,
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-first,
|
||||
.sticky-inner {
|
||||
display: flex;
|
||||
order: 1;
|
||||
flex-flow: column;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
order: 2;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 1px dashed var(--brd-color);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
$bgcolor: var(--tt-color);
|
||||
$fgcolor: var(--fg-color);
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.tooltip-inner {
|
||||
background: $bgcolor;
|
||||
color: $fgcolor;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 24px rgba(black, 0.1);
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: $bgcolor;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
.wrapper {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.popover-inner {
|
||||
background: $bgcolor;
|
||||
color: $fgcolor;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
max-height: 256px;
|
||||
overflow: auto;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
border-color: $bgcolor;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
.info:not(.toasted) {
|
||||
margin-left: 4px;
|
||||
color: var(--fg-light-color);
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
font-size: 16px;
|
||||
font-family: "Poppins", "Roboto", "Noto", sans-serif;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s ease-in-out;
|
||||
fill: var(--act-color);
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
margin-left: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
color: var(--act-color);
|
||||
fill: var(--act-color);
|
||||
box-shadow: inset 0 0 0 2px var(--fg-color);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
background-color: transparent;
|
||||
color: var(--fg-light-color);
|
||||
fill: var(--fg-light-color);
|
||||
border-radius: 8px;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
color: var(--fg-color);
|
||||
fill: var(--fg-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: var(--ac-color);
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
30% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons:active {
|
||||
animation: beat 0.5s forwards 1;
|
||||
}
|
||||
|
||||
fieldset:target,
|
||||
section:target {
|
||||
animation: highlight 2s ease;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px var(--ac-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"],
|
||||
input[type="radio"],
|
||||
#installPWA,
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-on-large-screen {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.method,
|
||||
.url-field,
|
||||
kbd,
|
||||
select,
|
||||
input,
|
||||
textarea,
|
||||
pre,
|
||||
code {
|
||||
display: inline-flex;
|
||||
margin: 4px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-dark-color);
|
||||
color: var(--fg-color);
|
||||
font-size: 16px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
line-height: 1.25;
|
||||
transition: all 0.2s ease-in-out;
|
||||
user-select: text;
|
||||
width: calc(100% - 8px);
|
||||
resize: vertical;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:not([readonly]):not(.ace_editor):hover,
|
||||
&:not([readonly]):not(.ace_editor):active,
|
||||
&:not([readonly]):not(.ace_editor):focus {
|
||||
box-shadow: inset 0 0 0 2px var(--fg-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
.method {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--fg-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
pre.ace_editor {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
kbd,
|
||||
code,
|
||||
pre {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
text-transform: uppercase;
|
||||
min-width: 128px;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
content: "\e313";
|
||||
font-family: "Material Icons";
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: 37px;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
&,
|
||||
& + label {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: "\2714";
|
||||
border: 1px solid var(--fg-color);
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 8px 8px 8px 0;
|
||||
color: transparent;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label:before {
|
||||
background-color: var(--ac-color);
|
||||
border-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
}
|
||||
}
|
||||
|
||||
.error:not(input),
|
||||
.disabled:not(input),
|
||||
[disabled] {
|
||||
background-color: var(--err-color);
|
||||
color: var(--fg-light-color);
|
||||
fill: var(--fg-light-color);
|
||||
cursor: not-allowed;
|
||||
|
||||
&.icon {
|
||||
color: var(--err-color);
|
||||
fill: var(--err-color);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 4px;
|
||||
color: var(--fg-light-color);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
display: flex;
|
||||
margin: 4px 0 4px;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
display: inline-flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&.shrink {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
|
||||
* {
|
||||
display: inline-flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.info-response {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
|
||||
.success-response {
|
||||
color: #4bb543;
|
||||
}
|
||||
|
||||
.redir-response {
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.cl-error-response {
|
||||
color: #a63232;
|
||||
}
|
||||
|
||||
.sv-error-response {
|
||||
color: #b71c1c;
|
||||
}
|
||||
|
||||
.missing-data-response {
|
||||
background-color: var(--err-color);
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#response-details-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.covers-response {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#send {
|
||||
white-space: nowrap;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 86px;
|
||||
left: 50%;
|
||||
z-index: 10001;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 4px 24px rgba(black, 0.2);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toasted-container .toasted {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.toasted.info {
|
||||
background-color: var(--ac-color) !important;
|
||||
color: var(--act-color) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.toasted.bubble .action {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.toasted .action {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.page-columns {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.inner-left {
|
||||
display: flex;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.inner-right {
|
||||
display: flex;
|
||||
width: 30%;
|
||||
order: 2;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $responsiveWidth) {
|
||||
.content,
|
||||
.columns {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 0 8px 68px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hide-on-small-screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sticky-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner-left {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.inner-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.toasted-container {
|
||||
margin-bottom: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.toasted-ad {
|
||||
background-color: #fefefe;
|
||||
color: #121212;
|
||||
padding: 16px !important;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.action {
|
||||
text-transform: none !important;
|
||||
background-color: #121212;
|
||||
color: #fefefe;
|
||||
padding: 12px 16px !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 16px !important;
|
||||
border-radius: 8px;
|
||||
margin: 0 !important;
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-list {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.github-sponsor {
|
||||
margin-right: 4px;
|
||||
max-width: 64px;
|
||||
max-height: 64px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
5
assets/css/tailwind.css
Normal file
5
assets/css/tailwind.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* purgecss start ignore */
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
/* purgecss end ignore */
|
||||
@import 'tailwindcss/utilities';
|
||||
@@ -12,26 +12,6 @@
|
||||
src: url("~static/fonts/material-icons-v54.woff2") format("woff2");
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "liga";
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* poppins-500 - latin */
|
||||
@font-face {
|
||||
font-family: "Poppins";
|
||||
827
assets/scss/styles.scss
Normal file
827
assets/scss/styles.scss
Normal file
@@ -0,0 +1,827 @@
|
||||
$responsiveWidth: 768px;
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-variant-ligatures: common-ligatures;
|
||||
@apply antialiased;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-acColor;
|
||||
@apply text-actColor;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply h-1;
|
||||
@apply w-1;
|
||||
@apply rounded-lg;
|
||||
|
||||
&:hover {
|
||||
@apply bg-bgDarkColor;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply rounded-lg;
|
||||
@apply bg-fgLightColor;
|
||||
|
||||
&:hover {
|
||||
@apply bg-fgColor;
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@apply text-fgLightColor;
|
||||
@apply opacity-25;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-bgColor;
|
||||
@apply text-fgColor;
|
||||
@apply text-base;
|
||||
@apply font-body;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
body.afterLoad {
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
@apply opacity-25;
|
||||
}
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active,
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
@apply transition-opacity;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
.page-enter,
|
||||
.page-leave-active,
|
||||
.layout-enter,
|
||||
.layout-leave-active {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply inline-flex;
|
||||
@apply text-current;
|
||||
@apply no-underline;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply outline-none;
|
||||
|
||||
&.link {
|
||||
@apply text-acColor;
|
||||
}
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
& > div {
|
||||
@apply flex;
|
||||
@apply py-2;
|
||||
@apply px-2;
|
||||
@apply w-full;
|
||||
@apply items-center;
|
||||
@apply justify-between;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@apply min-h-screen;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
}
|
||||
|
||||
.wrapper .page {
|
||||
min-height: calc(100vh - 153px);
|
||||
}
|
||||
|
||||
.header,
|
||||
.content,
|
||||
.columns,
|
||||
.footer {
|
||||
@apply flex;
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.nav-first,
|
||||
.sticky-inner {
|
||||
@apply flex;
|
||||
@apply order-1;
|
||||
@apply flex-col;
|
||||
@apply sticky;
|
||||
@apply top-0;
|
||||
@apply items-start;
|
||||
@apply items-stretch;
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
.main {
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-1;
|
||||
@apply order-2;
|
||||
@apply relative;
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply m-0;
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
@apply m-2;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-sm;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply border-b;
|
||||
@apply border-dashed;
|
||||
@apply border-brdColor;
|
||||
@apply my-4;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
$bgcolor: var(--tt-color);
|
||||
$fgcolor: var(--fg-color);
|
||||
@apply z-50;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
|
||||
.tooltip-inner {
|
||||
@apply rounded-lg;
|
||||
@apply px-4;
|
||||
@apply py-2;
|
||||
@apply text-xs;
|
||||
@apply font-medium;
|
||||
@apply shadow-lg;
|
||||
background: $bgcolor;
|
||||
color: $fgcolor;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
@apply h-0;
|
||||
@apply w-0;
|
||||
@apply border-solid;
|
||||
@apply absolute;
|
||||
@apply m-2;
|
||||
@apply border-ttColor;
|
||||
@apply z-30;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
@apply mb-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
@apply mt-0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
@apply mt-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
@apply mt-0;
|
||||
@apply mb-0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
@apply ml-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
@apply ml-0;
|
||||
@apply mr-0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
@apply mr-0;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
@apply ml-0;
|
||||
@apply mr-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
.wrapper {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.popover-inner {
|
||||
background: $bgcolor;
|
||||
color: $fgcolor;
|
||||
max-height: 256px;
|
||||
@apply text-base;
|
||||
@apply p-2;
|
||||
@apply rounded-lg;
|
||||
@apply overflow-auto;
|
||||
@apply shadow-lg;
|
||||
|
||||
button {
|
||||
@apply flex-1;
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
div {
|
||||
@apply flex;
|
||||
@apply items-stretch;
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
button {
|
||||
@apply justify-start;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
border-color: $bgcolor;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
@apply invisible;
|
||||
@apply opacity-0;
|
||||
@apply transition-opacity;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
@apply visible;
|
||||
@apply opacity-100;
|
||||
@apply transition-opacity;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
.info:not(.toasted) {
|
||||
@apply m-2;
|
||||
@apply text-fgLightColor;
|
||||
|
||||
.material-icons {
|
||||
@apply align-middle;
|
||||
@apply ml-2;
|
||||
@apply mr-4;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply m-2;
|
||||
@apply py-2;
|
||||
@apply px-4;
|
||||
@apply rounded-lg;
|
||||
@apply bg-acColor;
|
||||
@apply text-actColor;
|
||||
@apply font-body;
|
||||
@apply font-bold;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply fill-current;
|
||||
@apply cursor-pointer;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
span {
|
||||
@apply inline-flex;
|
||||
@apply ml-4;
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply text-actColor;
|
||||
@apply fill-current;
|
||||
box-shadow: inset 0 0 0 2px var(--fg-color);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
@apply bg-transparent;
|
||||
@apply text-fgLightColor;
|
||||
@apply fill-current;
|
||||
@apply rounded-lg;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
@apply p-2;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply text-fgColor;
|
||||
@apply fill-current;
|
||||
@apply shadow-none;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@apply text-acColor;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply bg-acColor;
|
||||
@apply text-actColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
30% {
|
||||
@apply transform;
|
||||
@apply scale-90;
|
||||
}
|
||||
50% {
|
||||
@apply transform;
|
||||
@apply scale-110;
|
||||
}
|
||||
100% {
|
||||
@apply transform;
|
||||
@apply scale-100;
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
@apply font-icon;
|
||||
@apply font-normal;
|
||||
@apply not-italic;
|
||||
@apply h-6;
|
||||
@apply w-6;
|
||||
@apply text-2xl;
|
||||
@apply leading-6;
|
||||
@apply inline-block;
|
||||
@apply normal-case;
|
||||
@apply tracking-normal;
|
||||
@apply whitespace-no-wrap;
|
||||
@apply antialiased;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
|
||||
&:active {
|
||||
animation: beat 0.5s forwards 1;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset:target,
|
||||
section:target {
|
||||
animation: highlight 2s ease;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px var(--ac-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"],
|
||||
input[type="radio"],
|
||||
#installPWA {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.show-on-large-screen {
|
||||
@apply flex;
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.method,
|
||||
.url-field,
|
||||
kbd,
|
||||
select,
|
||||
input,
|
||||
textarea,
|
||||
pre,
|
||||
code {
|
||||
@apply flex;
|
||||
@apply m-2;
|
||||
@apply p-2;
|
||||
@apply rounded-lg;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply text-fgColor;
|
||||
@apply font-mono;
|
||||
@apply font-normal;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply select-text;
|
||||
@apply resize-y;
|
||||
@apply truncate;
|
||||
@apply outline-none;
|
||||
width: calc(100% - 16px);
|
||||
|
||||
&:not([readonly]):not(.ace_editor):hover,
|
||||
&:not([readonly]):not(.ace_editor):active,
|
||||
&:not([readonly]):not(.ace_editor):focus {
|
||||
box-shadow: inset 0 0 0 2px var(--fg-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
.method {
|
||||
@apply cursor-pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--fg-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply grid;
|
||||
}
|
||||
|
||||
pre.ace_editor {
|
||||
@apply font-mono;
|
||||
@apply font-normal;
|
||||
@apply z-0;
|
||||
}
|
||||
|
||||
kbd,
|
||||
code,
|
||||
pre {
|
||||
@apply w-auto;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
@apply relative;
|
||||
|
||||
input {
|
||||
@apply uppercase;
|
||||
min-width: 128px;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@apply inline-block;
|
||||
@apply absolute;
|
||||
@apply pointer-events-none;
|
||||
content: "\e313";
|
||||
@apply font-icon;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: 40px;
|
||||
@apply cursor-pointer;
|
||||
@apply appearance-none;
|
||||
|
||||
&::-ms-expand {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
@apply bg-bgColor;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@apply hidden;
|
||||
|
||||
&,
|
||||
& + label {
|
||||
@apply align-middle;
|
||||
@apply cursor-pointer;
|
||||
|
||||
&:before {
|
||||
content: "\2714";
|
||||
@apply border;
|
||||
@apply border-fgColor;
|
||||
@apply rounded-lg;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply text-transparent;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 8px 8px 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label:before {
|
||||
@apply bg-acColor;
|
||||
@apply border-acColor;
|
||||
@apply text-actColor;
|
||||
}
|
||||
}
|
||||
|
||||
.error:not(input),
|
||||
.disabled:not(input),
|
||||
[disabled] {
|
||||
@apply bg-errColor;
|
||||
@apply text-fgLightColor;
|
||||
@apply fill-current;
|
||||
@apply cursor-not-allowed;
|
||||
|
||||
&.icon {
|
||||
@apply text-errColor;
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply px-2;
|
||||
@apply text-fgLightColor;
|
||||
@apply text-sm;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply flex;
|
||||
@apply p-0;
|
||||
@apply list-none;
|
||||
margin: 4px 0 4px;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply m-0;
|
||||
}
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
@apply inline-flex;
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
@apply flex-1;
|
||||
@apply justify-center;
|
||||
|
||||
&.shrink {
|
||||
@apply flex-grow-0;
|
||||
}
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-between;
|
||||
@apply flex-1;
|
||||
@apply flex-row;
|
||||
|
||||
* {
|
||||
@apply inline-flex;
|
||||
@apply flex-no-wrap;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
}
|
||||
}
|
||||
|
||||
.info-response {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
|
||||
.success-response {
|
||||
color: #4bb543;
|
||||
}
|
||||
|
||||
.redir-response {
|
||||
color: #ff5722;
|
||||
}
|
||||
|
||||
.cl-error-response {
|
||||
color: #a63232;
|
||||
}
|
||||
|
||||
.sv-error-response {
|
||||
color: #b71c1c;
|
||||
}
|
||||
|
||||
.missing-data-response {
|
||||
@apply bg-errColor;
|
||||
}
|
||||
|
||||
#response-details-wrapper {
|
||||
@apply relative;
|
||||
@apply overflow-hidden;
|
||||
@apply rounded-lg;
|
||||
|
||||
textarea {
|
||||
@apply m-0;
|
||||
@apply w-full;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.covers-response {
|
||||
@apply absolute;
|
||||
@apply inset-0;
|
||||
@apply bg-white;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
#send {
|
||||
@apply whitespace-no-wrap;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
&.show {
|
||||
@apply flex;
|
||||
@apply fixed;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply shadow-lg;
|
||||
bottom: 86px;
|
||||
left: 50%;
|
||||
z-index: 10001;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
@apply flex;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
|
||||
.toasted-container .toasted {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.toasted.info {
|
||||
background-color: var(--ac-color) !important;
|
||||
color: var(--act-color) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.toasted.bubble .action {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.toasted .action {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.page-columns {
|
||||
@apply flex;
|
||||
@apply flex-1;
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
.inner-left {
|
||||
@apply flex;
|
||||
@apply order-1;
|
||||
}
|
||||
|
||||
.inner-right {
|
||||
@apply flex;
|
||||
@apply order-2;
|
||||
@apply ml-4;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
@media (max-width: $responsiveWidth) {
|
||||
.content,
|
||||
.columns {
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 0 8px 68px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.hide-on-small-screen {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.sticky-inner {
|
||||
@apply relative;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.inner-left {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.inner-right {
|
||||
@apply ml-0;
|
||||
}
|
||||
|
||||
.toasted-container {
|
||||
margin-bottom: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.toasted-ad {
|
||||
background-color: #fefefe;
|
||||
color: #121212;
|
||||
padding: 16px !important;
|
||||
@apply font-bold;
|
||||
@apply text-sm;
|
||||
@apply rounded-lg;
|
||||
@apply shadow-lg;
|
||||
|
||||
.action {
|
||||
text-transform: none !important;
|
||||
background-color: #121212;
|
||||
color: #fefefe;
|
||||
padding: 12px 16px !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 16px !important;
|
||||
margin: 0 !important;
|
||||
margin-left: 8px !important;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-list {
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
.github-sponsor {
|
||||
@apply mr-4;
|
||||
max-width: 64px;
|
||||
max-height: 64px;
|
||||
@apply rounded-full;
|
||||
}
|
||||
@@ -1,3 +1,9 @@
|
||||
@mixin baseTheme {
|
||||
--font-body: 'Poppins', 'sans-serif';
|
||||
--font-mono: 'Roboto Mono', 'monoscpace';
|
||||
--font-icon: 'Material Icons';
|
||||
}
|
||||
|
||||
/**
|
||||
Main Themes:
|
||||
- dark (default)
|
||||
@@ -83,6 +89,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
@include baseTheme;
|
||||
@include darkTheme;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("new_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -27,7 +27,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("new_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -27,7 +27,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<button class="icon" @click="toggleShowChildren">
|
||||
<i class="material-icons" v-show="!showChildren">arrow_right</i>
|
||||
<i class="material-icons" v-show="showChildren">arrow_drop_down</i>
|
||||
@@ -45,8 +45,12 @@
|
||||
</div>
|
||||
|
||||
<div v-show="showChildren">
|
||||
<ul>
|
||||
<li v-for="(folder, index) in collection.folders" :key="folder.name">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(folder, index) in collection.folders"
|
||||
:key="folder.name"
|
||||
class="ml-8 border-l border-brdColor"
|
||||
>
|
||||
<folder
|
||||
:folder="folder"
|
||||
:folderIndex="index"
|
||||
@@ -56,12 +60,19 @@
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="collection.folders.length === 0 && collection.requests.length === 0">
|
||||
<li
|
||||
v-if="collection.folders.length === 0 && collection.requests.length === 0"
|
||||
class="ml-8 border-l border-brdColor"
|
||||
>
|
||||
<label>{{ $t("collection_empty") }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-for="(request, index) in collection.requests" :key="index">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="index"
|
||||
class="ml-8 border-l border-brdColor"
|
||||
>
|
||||
<request
|
||||
:request="request"
|
||||
:collection-index="collectionIndex"
|
||||
@@ -83,19 +94,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
margin-left: 32px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
import folderIcon from "~/static/icons/folder-24px.svg?inline"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("edit_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -27,7 +27,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("edit_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -22,7 +22,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("edit_request") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -28,9 +28,9 @@
|
||||
<label for="selectCollection">{{ $t("collection") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<select type="text" id="selectCollection" v-model="requestUpdateData.collectionIndex">
|
||||
<option :key="undefined" :value="undefined" hidden disabled selected>{{
|
||||
$t("current_collection")
|
||||
}}</option>
|
||||
<option :key="undefined" :value="undefined" hidden disabled selected>
|
||||
{{ $t("current_collection") }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(collection, index) in $store.state.postwoman.collections"
|
||||
:key="index"
|
||||
@@ -53,7 +53,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon" @click="toggleShowChildren">
|
||||
<i class="material-icons" v-show="!showChildren">arrow_right</i>
|
||||
@@ -31,8 +31,12 @@
|
||||
</div>
|
||||
|
||||
<div v-show="showChildren">
|
||||
<ul>
|
||||
<li v-for="(request, index) in folder.requests" :key="index">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(request, index) in folder.requests"
|
||||
:key="index"
|
||||
class="flex ml-8 border-l border-brdColor"
|
||||
>
|
||||
<request
|
||||
:request="request"
|
||||
:collection-index="collectionIndex"
|
||||
@@ -49,7 +53,7 @@
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<li v-if="folder.requests.length === 0">
|
||||
<li v-if="folder.requests.length === 0" class="flex ml-8 border-l border-brdColor">
|
||||
<label>{{ $t("folder_empty") }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -57,19 +61,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
margin-left: 32px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
import deleteIcon from "~/static/icons/delete-24px.svg?inline"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -11,7 +11,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
|
||||
@@ -60,7 +60,7 @@
|
||||
<textarea v-model="collectionJson" rows="8"></textarea>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -140,7 +140,7 @@ export default {
|
||||
}
|
||||
} else if (collections.info && collections.info.schema.includes("v2.1.0")) {
|
||||
//replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
|
||||
collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, '<<$1>>'))
|
||||
collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
|
||||
collections.item = this.flattenPostmanFolders(collections)
|
||||
collections = this.parsePostmanCollection(collections)
|
||||
} else {
|
||||
@@ -317,15 +317,15 @@ export default {
|
||||
}
|
||||
items.push(collectionItem)
|
||||
}
|
||||
return items;
|
||||
return items
|
||||
},
|
||||
hasFolder(item) {
|
||||
return item.hasOwnProperty('item')
|
||||
return item.hasOwnProperty("item")
|
||||
},
|
||||
isSubFolder(item) {
|
||||
return item.hasOwnProperty('_postman_isSubFolder') && item._postman_isSubFolder
|
||||
return item.hasOwnProperty("_postman_isSubFolder") && item._postman_isSubFolder
|
||||
},
|
||||
flattenPostmanItem(subFolder, subFolderGlue = ' -- ') {
|
||||
flattenPostmanItem(subFolder, subFolderGlue = " -- ") {
|
||||
delete subFolder._postman_isSubFolder
|
||||
let flattenedItems = []
|
||||
for (let subFolderItem of subFolder.item) {
|
||||
|
||||
@@ -39,7 +39,7 @@ TODO:
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
/>
|
||||
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
@@ -65,7 +65,7 @@ TODO:
|
||||
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<ul>
|
||||
<ul class="flex-col">
|
||||
<li v-for="(collection, index) in collections" :key="collection.name">
|
||||
<collection
|
||||
:collection-index="index"
|
||||
@@ -87,11 +87,6 @@ TODO:
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 245px);
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@@ -32,19 +32,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
import deleteIcon from "~/static/icons/delete-24px.svg?inline"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("save_request_as") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -28,9 +28,9 @@
|
||||
<label for="selectCollection">{{ $t("collection") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<select type="text" id="selectCollection" v-model="requestData.collectionIndex">
|
||||
<option :key="undefined" :value="undefined" hidden disabled selected>{{
|
||||
$t("select_collection")
|
||||
}}</option>
|
||||
<option :key="undefined" :value="undefined" hidden disabled selected>
|
||||
{{ $t("select_collection") }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(collection, index) in $store.state.postwoman.collections"
|
||||
:key="index"
|
||||
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("new_environment") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -27,7 +27,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("edit_environment") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -27,7 +27,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="variableList">{{ $t("env_variable_list") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
|
||||
@@ -90,7 +90,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@@ -32,19 +32,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--brd-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
import deleteIcon from "~/static/icons/delete-24px.svg?inline"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="hideModal">
|
||||
@@ -11,7 +11,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
|
||||
@@ -60,7 +60,7 @@
|
||||
<textarea v-model="environmentJson" rows="8"></textarea>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="hideModal">
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
:show="showModalImportExport"
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
/>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
@@ -28,7 +28,7 @@
|
||||
<i class="material-icons">help_outline</i> {{ $t("create_new_environment") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<ul>
|
||||
<ul class="flex-col">
|
||||
<li v-for="(environment, index) in environments" :key="environment.name">
|
||||
<environment
|
||||
:environmentIndex="index"
|
||||
@@ -46,11 +46,6 @@
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 245px);
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div v-if="fb.currentFeeds.length !== 0" class="virtual-list">
|
||||
<ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
|
||||
<ul
|
||||
v-for="feed in fb.currentFeeds"
|
||||
:key="feed.id"
|
||||
class="flex-col py-2 border-b border-dashed border-brdColor"
|
||||
>
|
||||
<div class="show-on-large-screen">
|
||||
<li class="info">
|
||||
<label>
|
||||
@@ -18,7 +22,7 @@
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<ul v-else>
|
||||
<ul v-else class="flex-col">
|
||||
<li>
|
||||
<label class="info">{{ $t("empty") }}</label>
|
||||
</li>
|
||||
@@ -30,21 +34,11 @@
|
||||
max-height: calc(100vh - 298px);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.entry {
|
||||
border-bottom: 1px dashed var(--brd-color);
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.clamb-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul>
|
||||
<ul class="flex-col">
|
||||
<div class="show-on-large-screen">
|
||||
<li>
|
||||
<input
|
||||
@@ -38,13 +38,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
ul,
|
||||
ol {
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { fb } from "~/helpers/fb"
|
||||
import addIcon from "~/static/icons/add-24px.svg?inline"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="field-box">
|
||||
<div class="p-2 m-2 border-b border-dashed border-brdColor">
|
||||
<div class="field-title">
|
||||
{{ fieldName }}
|
||||
<span v-if="fieldArgs.length > 0">
|
||||
@@ -7,48 +7,24 @@
|
||||
<span v-for="(field, index) in fieldArgs" :key="index">
|
||||
{{ field.name }}:
|
||||
<typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
|
||||
<span v-if="index !== fieldArgs.length - 1">
|
||||
,
|
||||
</span>
|
||||
<span v-if="index !== fieldArgs.length - 1"> , </span>
|
||||
</span>
|
||||
) </span
|
||||
>:
|
||||
<typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
|
||||
</div>
|
||||
<div class="field-desc" v-if="gqlField.description">
|
||||
<div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
|
||||
{{ gqlField.description }}
|
||||
</div>
|
||||
|
||||
<div class="field-deprecated" v-if="gqlField.isDeprecated">
|
||||
<div
|
||||
class="inline-block px-4 py-2 my-2 text-sm font-bold text-black bg-yellow-200 rounded-lg field-deprecated"
|
||||
v-if="gqlField.isDeprecated"
|
||||
>
|
||||
{{ $t("deprecated") }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.field-box {
|
||||
padding: 16px;
|
||||
margin: 4px;
|
||||
border-bottom: 1px dashed var(--brd-color);
|
||||
}
|
||||
|
||||
.field-deprecated {
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
margin: 4px 0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-desc {
|
||||
color: var(--fg-light-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<div class="show-if-initialized" :class="{ initialized }">
|
||||
<div class="opacity-0 show-if-initialized" :class="{ initialized }">
|
||||
<pre ref="editor"></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped lang="scss">
|
||||
.show-if-initialized {
|
||||
opacity: 0;
|
||||
|
||||
&.initialized {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
& > * {
|
||||
transition: none;
|
||||
@apply transition-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<div class="type-box">
|
||||
<div class="type-title">{{ gqlType.name }}</div>
|
||||
<div class="type-desc" v-if="gqlType.description">
|
||||
<div class="p-2 m-2">
|
||||
<div class="font-bold type-title">{{ gqlType.name }}</div>
|
||||
<div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
|
||||
{{ gqlType.description }}
|
||||
</div>
|
||||
|
||||
<div v-if="gqlType.getFields">
|
||||
<h5>{{ $t("fields") }}</h5>
|
||||
<div v-for="field in gqlType.getFields()" :key="field.name">
|
||||
@@ -14,22 +13,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.type-box {
|
||||
padding: 16px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.type-desc {
|
||||
color: var(--fg-light-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.type-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -1,16 +1,9 @@
|
||||
<template>
|
||||
<span class="typelink" @click="jumpToType">{{ typeString }}</span>
|
||||
<span class="font-mono font-normal cursor-pointer text-acColor" @click="jumpToType">
|
||||
{{ typeString }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.typelink {
|
||||
color: var(--ac-color);
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="info">
|
||||
{{ $t("donate_info2") }}
|
||||
</p>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<a
|
||||
href="https://github.com/sponsors/hoppscotch"
|
||||
@@ -33,7 +33,7 @@
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<a
|
||||
href="https://opencollective.com/hoppscotch"
|
||||
@@ -78,13 +78,25 @@
|
||||
<h3 class="title">Financial Contributors</h3>
|
||||
<p class="info">
|
||||
Become a financial contributor and help us sustain our community.
|
||||
<a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/contribute"
|
||||
>Contribute</a
|
||||
>.
|
||||
</p>
|
||||
<h3 class="title">Organizations</h3>
|
||||
<p class="info">
|
||||
Support this project with your organization. Your logo will show up here with a link to your
|
||||
website.
|
||||
<a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/contribute"
|
||||
>Contribute</a
|
||||
>.
|
||||
</p>
|
||||
<div class="contributors">
|
||||
<a href="https://tyk.io" target="_blank" rel="noopener">
|
||||
@@ -96,34 +108,74 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="contributors">
|
||||
<a href="https://opencollective.com/hoppscotch/organization/0/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/0/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/1/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/1/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/2/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/2/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/2/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/3/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/3/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/3/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/4/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/4/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/4/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/5/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/5/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/5/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/6/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/6/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/6/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/7/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/7/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/7/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/8/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/8/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/8/avatar.svg" />
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch/organization/9/website">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/organization/9/website"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/organization/9/avatar.svg" />
|
||||
</a>
|
||||
</div>
|
||||
@@ -131,7 +183,13 @@
|
||||
<p class="info">
|
||||
Support this project with your organization. Your logo will show up here with a link to your
|
||||
website.
|
||||
<a class="link" href="https://opencollective.com/hoppscotch/contribute">Contribute</a>.
|
||||
<a
|
||||
class="link"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://opencollective.com/hoppscotch/contribute"
|
||||
>Contribute</a
|
||||
>.
|
||||
</p>
|
||||
<div class="contributors">
|
||||
<a
|
||||
@@ -147,14 +205,18 @@
|
||||
:alt="sponsor.handle"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://opencollective.com/hoppscotch">
|
||||
<a target="_blank" rel="noopener" href="https://opencollective.com/hoppscotch">
|
||||
<img src="https://opencollective.com/hoppscotch/individuals.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="title">Code Contributors</h3>
|
||||
<p class="info">This project exists thanks to all the people who contribute.</p>
|
||||
<div class="contributors">
|
||||
<a href="https://github.com/liyasthomas/hoppscotch/graphs/contributors">
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href="https://github.com/liyasthomas/hoppscotch/graphs/contributors"
|
||||
>
|
||||
<img src="https://opencollective.com/hoppscotch/contributors.svg" />
|
||||
</a>
|
||||
</div>
|
||||
@@ -163,12 +225,12 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contributors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row nowrap;
|
||||
overflow: auto;
|
||||
padding: 8px 0;
|
||||
margin: 8px 0;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply flex-no-wrap;
|
||||
@apply overflow-auto;
|
||||
@apply py-4;
|
||||
@apply my-4;
|
||||
max-width: calc(100vw - 72px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="virtual-list" :class="{ filled: filteredHistory.length }">
|
||||
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
|
||||
<ul
|
||||
v-for="(entry, index) in filteredHistory"
|
||||
:key="index"
|
||||
class="flex-col border-b border-dashed border-brdColor"
|
||||
>
|
||||
<div class="show-on-large-screen">
|
||||
<button
|
||||
class="icon"
|
||||
@@ -30,7 +34,7 @@
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
<li class="method-list-item">
|
||||
<li class="relative">
|
||||
<input
|
||||
:aria-label="$t('method')"
|
||||
type="text"
|
||||
@@ -38,14 +42,8 @@
|
||||
:value="`${entry.method} ${entry.status}`"
|
||||
:class="findEntryStatus(entry).className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
class="bg-color"
|
||||
class="bg-transparent"
|
||||
/>
|
||||
<!-- <span
|
||||
class="entry-status-code"
|
||||
:class="findEntryStatus(entry).className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
>{{ entry.status }}</span
|
||||
> -->
|
||||
</li>
|
||||
<v-popover>
|
||||
<button class="tooltip-target icon" v-tooltip="$t('options')">
|
||||
@@ -66,14 +64,14 @@
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
<!-- <li class="method-list-item">
|
||||
<!-- <li class="relative">
|
||||
<input
|
||||
:aria-label="$t('label')"
|
||||
type="text"
|
||||
readonly
|
||||
:value="entry.label"
|
||||
:placeholder="$t('no_label')"
|
||||
class="bg-color"
|
||||
class="bg-transparent"
|
||||
/>
|
||||
</li> -->
|
||||
<!-- <li>
|
||||
@@ -101,7 +99,7 @@
|
||||
readonly
|
||||
:value="`${entry.url}${entry.path}`"
|
||||
:placeholder="$t('no_url')"
|
||||
class="bg-color"
|
||||
class="bg-transparent"
|
||||
/>
|
||||
</li>
|
||||
<!-- <li>
|
||||
@@ -147,7 +145,7 @@
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
<ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
|
||||
<ul class="flex-col" :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
|
||||
<li>
|
||||
<label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
|
||||
</li>
|
||||
@@ -156,7 +154,7 @@
|
||||
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
|
||||
</p>
|
||||
<div v-if="history.length !== 0">
|
||||
<div class="flex-wrap" v-if="!isClearingHistory">
|
||||
<div class="row-wrapper" v-if="!isClearingHistory">
|
||||
<button
|
||||
class="icon"
|
||||
id="clear-history-button"
|
||||
@@ -218,7 +216,7 @@
|
||||
</template>
|
||||
</v-popover>
|
||||
</div>
|
||||
<div class="flex-wrap" v-else>
|
||||
<div class="row-wrapper" v-else>
|
||||
<label for="clear-history-button" class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
|
||||
</label>
|
||||
@@ -250,47 +248,24 @@
|
||||
max-height: calc(100vh - 290px);
|
||||
|
||||
[readonly] {
|
||||
cursor: default;
|
||||
@apply cursor-default;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
.stared {
|
||||
color: #f8e81c !important;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.method-list-item {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.entry {
|
||||
border-bottom: 1px dashed var(--brd-color);
|
||||
padding: 0 0 8px;
|
||||
@apply text-yellow-200;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@@ -299,7 +274,7 @@ ol {
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -341,14 +316,16 @@ export default {
|
||||
fb.currentUser !== null
|
||||
? fb.currentHistory
|
||||
: JSON.parse(window.localStorage.getItem("history")) || []
|
||||
return this.history.filter((entry) => {
|
||||
const filterText = this.filterText.toLowerCase()
|
||||
return Object.keys(entry).some((key) => {
|
||||
let value = entry[key]
|
||||
value = typeof value !== "string" ? value.toString() : value
|
||||
return value.toLowerCase().includes(filterText)
|
||||
return this.history
|
||||
.filter((entry) => {
|
||||
const filterText = this.filterText.toLowerCase()
|
||||
return Object.keys(entry).some((key) => {
|
||||
let value = entry[key]
|
||||
value = typeof value !== "string" ? value.toString() : value
|
||||
return value.toLowerCase().includes(filterText)
|
||||
})
|
||||
})
|
||||
}).reverse()
|
||||
.reverse()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="flex-wrap">
|
||||
<span v-if="version.name" class="mono">
|
||||
<footer class="flex-col flex-no-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span v-if="version.name" class="font-mono">
|
||||
<a
|
||||
class="footer-link"
|
||||
:href="'https://github.com/hoppscotch/hoppscotch/releases/tag/' + version.name"
|
||||
@@ -31,9 +31,7 @@
|
||||
</span>
|
||||
<span>
|
||||
<a href="https://liyasthomas.web.app" target="_blank" rel="noopener">
|
||||
<button class="icon" v-tooltip="'Liyas Thomas'">
|
||||
🦄
|
||||
</button>
|
||||
<button class="icon" v-tooltip="'Liyas Thomas'">🦄</button>
|
||||
</a>
|
||||
<a href="mailto:liyascthomas@gmail.com" target="_blank" rel="noopener">
|
||||
<button class="icon" v-tooltip="$t('contact_us')">
|
||||
@@ -60,16 +58,13 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
margin: 8px 16px;
|
||||
color: var(--fg-light-color);
|
||||
@apply my-2;
|
||||
@apply mx-4;
|
||||
@apply text-fgLightColor;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
@apply text-fgColor;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span class="slide-in">
|
||||
<nuxt-link :to="localePath('index')">
|
||||
<h1 class="logo hide-on-small-screen">Hoppscotch</h1>
|
||||
@@ -51,7 +51,7 @@
|
||||
<img
|
||||
v-if="fb.currentUser.photoURL"
|
||||
:src="fb.currentUser.photoURL"
|
||||
class="material-icons"
|
||||
class="rounded-full material-icons"
|
||||
alt="Profile image"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
@@ -119,7 +119,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("extensions") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="showExtensions = false">
|
||||
@@ -179,7 +179,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("shortcuts") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="showShortcuts = false">
|
||||
@@ -214,11 +214,11 @@
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<kbd>Alt</kbd>+<kbd>🠋</kbd>
|
||||
<kbd>Alt</kbd>+<kbd>▲</kbd>
|
||||
<label>{{ $t("select_next_method") }}</label>
|
||||
</div>
|
||||
<div>
|
||||
<kbd>Alt</kbd>+<kbd>🠉</kbd>
|
||||
<kbd>Alt</kbd>+<kbd>▼</kbd>
|
||||
<label>{{ $t("select_previous_method") }}</label>
|
||||
</div>
|
||||
<hr />
|
||||
@@ -249,7 +249,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("support_us") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="showSupport = false">
|
||||
@@ -271,38 +271,43 @@
|
||||
<style scoped lang="scss">
|
||||
$responsiveWidth: 768px;
|
||||
|
||||
kbd {
|
||||
@apply inline-flex;
|
||||
@apply resize-none;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: -16px;
|
||||
@apply opacity-0;
|
||||
@apply -left-4;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0px;
|
||||
@apply opacity-100;
|
||||
@apply left-0;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
position: relative;
|
||||
@apply relative;
|
||||
animation: slideIn 0.2s forwards ease-in-out;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 22px;
|
||||
@apply text-xl;
|
||||
|
||||
&:hover {
|
||||
color: var(--ac-color);
|
||||
@apply text-acColor;
|
||||
}
|
||||
}
|
||||
|
||||
.show-on-small-screen {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
@media (max-width: $responsiveWidth) {
|
||||
.show-on-small-screen {
|
||||
display: inline-flex;
|
||||
@apply inline-flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,26 +14,26 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
fieldset {
|
||||
margin: 16px 0;
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-dark-color);
|
||||
transition: all 0.2s ease-in-out;
|
||||
@apply my-2;
|
||||
@apply p-2;
|
||||
@apply rounded-lg;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
|
||||
legend {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--fg-color);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@apply text-fgColor;
|
||||
@apply text-sm;
|
||||
@apply font-bold;
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
|
||||
i {
|
||||
margin-left: 8px;
|
||||
@apply ml-2;
|
||||
@apply align-middle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@ fieldset {
|
||||
}
|
||||
|
||||
fieldset.no-colored-frames legend {
|
||||
color: var(--fg-color);
|
||||
@apply text-fgColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
v-tooltip.right="$t('home')"
|
||||
:aria-label="$t('home')"
|
||||
>
|
||||
<logo alt class="material-icons" style="height: 24px;"></logo>
|
||||
<logo alt class="material-icons" style="height: 24px"></logo>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
:to="localePath('realtime')"
|
||||
@@ -171,93 +171,103 @@
|
||||
$responsiveWidth: 768px;
|
||||
|
||||
.nav-first {
|
||||
z-index: 1;
|
||||
height: 100vh;
|
||||
padding: 0 8px;
|
||||
background-color: var(--bg-dark-color);
|
||||
transition: all 0.2s ease-in-out;
|
||||
@apply z-10;
|
||||
@apply h-screen;
|
||||
@apply p-2;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
// @apply overflow-y-auto;
|
||||
}
|
||||
|
||||
nav.primary-nav {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply space-y-2;
|
||||
|
||||
svg {
|
||||
fill: var(--fg-light-color);
|
||||
transition: all 0.2s ease-in-out;
|
||||
@apply fill-current;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 14px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-light-color);
|
||||
color: var(--fg-light-color);
|
||||
fill: var(--fg-light-color);
|
||||
margin: 8px 0;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply flex-shrink-0;
|
||||
@apply p-4;
|
||||
@apply rounded-full;
|
||||
@apply bg-bgLightColor;
|
||||
@apply text-fgLightColor;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
fill: var(--fg-color);
|
||||
@apply text-fgColor;
|
||||
@apply fill-current;
|
||||
|
||||
svg {
|
||||
fill: var(--fg-color);
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
fill: var(--act-color);
|
||||
@apply bg-acColor;
|
||||
@apply text-actColor;
|
||||
@apply fill-current;
|
||||
border-radius: 16px;
|
||||
|
||||
svg {
|
||||
fill: var(--act-color);
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.primary-nav::-webkit-scrollbar,
|
||||
.nav-first::-webkit-scrollbar {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
nav.secondary-nav {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 2px dashed var(--brd-color);
|
||||
margin-top: 4px;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply border-t-2;
|
||||
@apply border-dashed;
|
||||
@apply border-brdColor;
|
||||
@apply mt-2;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
@apply space-y-2;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 14px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-dark-color);
|
||||
color: var(--fg-light-color);
|
||||
fill: var(--fg-light-color);
|
||||
margin: 8px 0;
|
||||
@apply p-4;
|
||||
@apply rounded-full;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply text-fgLightColor;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
fill: var(--fg-color);
|
||||
@apply text-fgColor;
|
||||
@apply fill-current;
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: var(--ac-color);
|
||||
fill: var(--ac-color);
|
||||
@apply text-acColor;
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -266,41 +276,43 @@ nav.secondary-nav {
|
||||
|
||||
@media (max-width: $responsiveWidth) {
|
||||
.nav-first {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45);
|
||||
@apply fixed;
|
||||
@apply top-auto;
|
||||
@apply bottom-0;
|
||||
@apply h-auto;
|
||||
@apply p-0;
|
||||
@apply w-full;
|
||||
@apply bg-bgColor;
|
||||
@apply shadow-2xl;
|
||||
}
|
||||
|
||||
nav.primary-nav {
|
||||
flex-flow: row nowrap;
|
||||
overflow: auto;
|
||||
justify-content: space-between;
|
||||
background-color: var(--bg-dark-color);
|
||||
@apply flex-row;
|
||||
@apply flex-no-wrap;
|
||||
@apply overflow-auto;
|
||||
@apply justify-between;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply space-y-0;
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
margin: 8px;
|
||||
flex: 1;
|
||||
@apply bg-transparent;
|
||||
@apply m-2;
|
||||
@apply flex-1;
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
background-color: transparent;
|
||||
color: var(--ac-color);
|
||||
fill: var(--ac-color);
|
||||
@apply bg-transparent;
|
||||
@apply text-acColor;
|
||||
@apply fill-current;
|
||||
|
||||
svg {
|
||||
fill: var(--ac-color);
|
||||
@apply fill-current;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.secondary-nav {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<ul v-for="(value, key) in headers" :key="key">
|
||||
<li>
|
||||
<input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly />
|
||||
<input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -16,18 +16,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
<img class="response-image" :src="imageSource" />
|
||||
<img class="max-w-full" :src="imageSource" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.response-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
|
||||
@@ -13,29 +13,27 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
div.realtime-log {
|
||||
margin: 4px;
|
||||
padding: 8px 16px;
|
||||
width: calc(100% - 8px);
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-dark-color);
|
||||
color: var(--fg-color);
|
||||
.realtime-log {
|
||||
@apply m-2;
|
||||
@apply p-2;
|
||||
@apply rounded-lg;
|
||||
@apply bg-bgDarkColor;
|
||||
@apply text-fgColor;
|
||||
@apply overflow-auto;
|
||||
height: 256px;
|
||||
overflow: auto;
|
||||
|
||||
&,
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
user-select: text;
|
||||
@apply text-sm;
|
||||
@apply font-mono;
|
||||
@apply font-normal;
|
||||
@apply select-text;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
@apply block;
|
||||
@apply break-words;
|
||||
@apply break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,36 +12,38 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.color {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 100%;
|
||||
border: 3px solid var(--bg-dark-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply relative;
|
||||
@apply m-2;
|
||||
@apply p-4;
|
||||
@apply rounded-full;
|
||||
@apply border-2;
|
||||
@apply border-bgDarkColor;
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
|
||||
&.fg {
|
||||
color: var(--act-color);
|
||||
@apply text-actColor;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 3px solid var(--ac-color);
|
||||
@apply border-2;
|
||||
@apply border-acColor;
|
||||
}
|
||||
|
||||
&.fg.active {
|
||||
border: 3px solid var(--fg-color);
|
||||
@apply border-2;
|
||||
@apply border-fgColor;
|
||||
}
|
||||
|
||||
.activeTick {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@apply absolute;
|
||||
@apply m-auto;
|
||||
@apply inset-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
|
||||
<style lang="scss">
|
||||
.show-if-initialized {
|
||||
opacity: 0;
|
||||
@apply opacity-0;
|
||||
|
||||
&.initialized {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
& > * {
|
||||
transition: none;
|
||||
@apply transition-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,33 +32,34 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.autocomplete-wrapper {
|
||||
position: relative;
|
||||
@apply relative;
|
||||
|
||||
input:focus + ul.suggestions,
|
||||
ul.suggestions:hover {
|
||||
display: block;
|
||||
@apply block;
|
||||
}
|
||||
|
||||
ul.suggestions {
|
||||
display: none;
|
||||
background-color: var(--atc-color);
|
||||
position: absolute;
|
||||
top: calc(100% - 4px);
|
||||
margin: 0 4px;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
@apply hidden;
|
||||
@apply bg-atcColor;
|
||||
@apply absolute;
|
||||
@apply mx-2;
|
||||
@apply left-0;
|
||||
@apply z-50;
|
||||
@apply transition-transform;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply shadow-lg;
|
||||
top: calc(100% - 8px);
|
||||
border-radius: 0 0 8px 8px;
|
||||
z-index: 9999;
|
||||
transition: transform 0.2s ease-out;
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
font-weight: 400;
|
||||
@apply w-full;
|
||||
@apply block;
|
||||
@apply p-2;
|
||||
@apply text-sm;
|
||||
@apply font-mono;
|
||||
@apply font-normal;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 8px 8px;
|
||||
@@ -66,9 +67,9 @@
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--ac-color);
|
||||
color: var(--act-color);
|
||||
cursor: pointer;
|
||||
@apply bg-acColor;
|
||||
@apply text-actColor;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
|
||||
<style lang="scss">
|
||||
.show-if-initialized {
|
||||
opacity: 0;
|
||||
@apply opacity-0;
|
||||
|
||||
&.initialized {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
& > * {
|
||||
transition: none;
|
||||
@apply transition-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,43 +21,46 @@
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply fixed;
|
||||
@apply inset-0;
|
||||
@apply z-50;
|
||||
@apply w-full;
|
||||
@apply h-full;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
background-color: rgba(0, 0, 0, 0.32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
transition: all 0.2s ease;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
|
||||
@apply relative;
|
||||
@apply flex;
|
||||
@apply flex-1;
|
||||
@apply flex-col;
|
||||
@apply m-2;
|
||||
@apply p-2;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
@apply bg-bgColor;
|
||||
@apply rounded-lg;
|
||||
@apply shadow-2xl;
|
||||
max-height: calc(100vh - 128px);
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow: auto;
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -71,22 +74,27 @@
|
||||
|
||||
.modal-enter,
|
||||
.modal-leave-active {
|
||||
opacity: 0;
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
transform: scale(0.8);
|
||||
transition: all 0.2s ease-in-out;
|
||||
@apply transform;
|
||||
@apply scale-75;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
}
|
||||
|
||||
.fade {
|
||||
position: absolute;
|
||||
@apply absolute;
|
||||
@apply block;
|
||||
left: 16px;
|
||||
right: 20px;
|
||||
display: block;
|
||||
height: 32px;
|
||||
transition: all 0.2s;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-200;
|
||||
|
||||
&.top {
|
||||
top: 68px;
|
||||
|
||||
@@ -14,57 +14,50 @@ $useBorder: false;
|
||||
$borderColor: var(--fg-light-color);
|
||||
$activeColor: var(--ac-color);
|
||||
$inactiveColor: var(--fg-light-color);
|
||||
|
||||
$inactiveHandleColor: var(--bg-color);
|
||||
$activeHandleColor: var(--act-color);
|
||||
|
||||
$width: 32px;
|
||||
$height: 16px;
|
||||
$handleSpacing: 4px;
|
||||
|
||||
$transition: all 0.2s ease-in-out;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
@apply inline-block;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
label.caption {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
@apply align-middle;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
label.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@apply relative;
|
||||
@apply inline-block;
|
||||
@apply align-middle;
|
||||
@apply rounded-full;
|
||||
@apply p-0;
|
||||
@apply my-4;
|
||||
@apply mx-2;
|
||||
@apply cursor-pointer;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border: if($useBorder, 2px solid $borderColor, none);
|
||||
background-color: if($useBorder, transparent, $inactiveColor);
|
||||
vertical-align: middle;
|
||||
|
||||
border-radius: 32px;
|
||||
transition: $transition;
|
||||
box-sizing: initial;
|
||||
padding: 0;
|
||||
margin: 8px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@apply absolute;
|
||||
@apply inline-block;
|
||||
@apply inset-0;
|
||||
@apply rounded-full;
|
||||
@apply pointer-events-none;
|
||||
transition: $transition;
|
||||
margin: $handleSpacing;
|
||||
background-color: $inactiveHandleColor;
|
||||
|
||||
width: #{$height - ($handleSpacing * 2)};
|
||||
height: #{$height - ($handleSpacing * 2)};
|
||||
border-radius: 100px;
|
||||
|
||||
pointer-events: none;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
&.on {
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
@@ -26,50 +26,55 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tabs-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-no-wrap;
|
||||
@apply flex-1;
|
||||
@apply overflow-hidden;
|
||||
|
||||
.tabs {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
@apply scrolling-touch;
|
||||
@apply flex;
|
||||
@apply whitespace-no-wrap;
|
||||
@apply overflow-auto;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
width: 0px;
|
||||
@apply flex;
|
||||
@apply w-0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
@apply inline-flex;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
color: var(--fg-light-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply py-2;
|
||||
@apply px-4;
|
||||
@apply text-fgLightColor;
|
||||
@apply text-sm;
|
||||
@apply rounded-lg;
|
||||
@apply cursor-pointer;
|
||||
|
||||
.material-icons {
|
||||
margin-right: 8px;
|
||||
@apply m-4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
@apply text-fgColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus a {
|
||||
color: var(--fg-color);
|
||||
@apply text-fgColor;
|
||||
}
|
||||
|
||||
&.is-active a {
|
||||
background-color: var(--brd-color);
|
||||
color: var(--fg-color);
|
||||
@apply bg-brdColor;
|
||||
@apply text-fgColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -78,7 +83,8 @@
|
||||
@media (max-width: 768px) {
|
||||
ul,
|
||||
ol {
|
||||
flex-flow: row nowrap;
|
||||
@apply flex-row;
|
||||
@apply flex-no-wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.highlight-VAR {
|
||||
@apply font-bold;
|
||||
color: var(--ac-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight-TEXT {
|
||||
overflow: auto;
|
||||
@apply overflow-auto;
|
||||
@apply break-all;
|
||||
height: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.highlight-TEXT::-webkit-scrollbar {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
<style scoped lang="scss">
|
||||
// Center the error page in the viewport.
|
||||
.page-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply flex-col;
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.error_banner {
|
||||
|
||||
@@ -5,8 +5,8 @@ export const options = {
|
||||
shortDescription: "A free, fast and beautiful API request builder",
|
||||
description: "Helps you create requests faster, saving precious time on development.",
|
||||
loading: {
|
||||
color: "#50fa7b",
|
||||
background: "#202124",
|
||||
color: "var(--ac-color)",
|
||||
background: "var(--bg-color)",
|
||||
},
|
||||
app: {
|
||||
color: "#ffffff",
|
||||
@@ -18,7 +18,7 @@ export const options = {
|
||||
},
|
||||
}
|
||||
export default {
|
||||
mode: "spa",
|
||||
ssr: false,
|
||||
target: "static",
|
||||
server: {
|
||||
host: "0.0.0.0", // default: localhost
|
||||
@@ -88,7 +88,7 @@ export default {
|
||||
** Customize the progress-bar color
|
||||
*/
|
||||
loading: {
|
||||
color: "var(--ac-color)",
|
||||
color: options.loading.color,
|
||||
continuous: true,
|
||||
},
|
||||
/*
|
||||
@@ -102,7 +102,7 @@ export default {
|
||||
/*
|
||||
** Global CSS
|
||||
*/
|
||||
css: ["~/assets/css/styles.scss", "~/assets/css/themes.scss", "~/assets/css/fonts.scss"],
|
||||
css: ["~/assets/scss/styles.scss", "~/assets/scss/themes.scss", "~/assets/scss/fonts.scss"],
|
||||
/*
|
||||
** Plugins to load before mounting the App
|
||||
*/
|
||||
@@ -124,6 +124,10 @@ export default {
|
||||
"@nuxtjs/gtm",
|
||||
// Doc: https://github.com/nuxt-community/svg-module
|
||||
"@nuxtjs/svg",
|
||||
// Doc: https://tailwindcss.nuxtjs.org
|
||||
"@nuxtjs/tailwindcss",
|
||||
// Doc: https://color-mode.nuxtjs.org
|
||||
"@nuxtjs/color-mode",
|
||||
],
|
||||
/*
|
||||
** Nuxt.js modules
|
||||
@@ -179,6 +183,7 @@ export default {
|
||||
Allow: "/",
|
||||
Sitemap: `${process.env.BASE_URL}sitemap.xml`,
|
||||
},
|
||||
colorMode: { preference: "dark" },
|
||||
i18n: {
|
||||
locales: [
|
||||
{
|
||||
|
||||
526
package-lock.json
generated
526
package-lock.json
generated
@@ -1484,6 +1484,96 @@
|
||||
"resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.3.0.tgz",
|
||||
"integrity": "sha512-VniCGPIgSGNEgOkh5phb3iKmSGIzcwrccy3IomMFRWPCMiCk2y98UQNJEoDs1yIHtZMstVjYWKYxnunIGzC5UQ=="
|
||||
},
|
||||
"@fullhuman/postcss-purgecss": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
|
||||
"integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "7.0.32",
|
||||
"purgecss": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "7.0.32",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
|
||||
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@grpc/grpc-js": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.1.7.tgz",
|
||||
@@ -2440,6 +2530,24 @@
|
||||
"defu": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/color-mode": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-1.1.1.tgz",
|
||||
"integrity": "sha512-Q091KLVMX4ZhVnwgNE2eKdjkaMZRdfVsKISI4kOsWBxJgj/PdPAQpGcSjLIOTB+l1XuLGLmh7hUtLOIM8FE0gA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"defu": "^2.0.4",
|
||||
"lodash.template": "^4.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"defu": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/defu/-/defu-2.0.4.tgz",
|
||||
"integrity": "sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/google-analytics": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/google-analytics/-/google-analytics-2.4.0.tgz",
|
||||
@@ -2595,6 +2703,49 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/tailwindcss": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-3.0.2.tgz",
|
||||
"integrity": "sha512-jSudt1JaJQRE64r0Bx5PHVTYVIedlZtR00KtFYYUSpRLHD2BLkjHsvYOa/jtKcinSF3RWZy6dg+l0IMJqDoSLg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"clear-module": "^4.1.1",
|
||||
"consola": "^2.15.0",
|
||||
"defu": "^3.1.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"tailwindcss": "^1.7.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
|
||||
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"at-least-node": "^1.0.0",
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
"universalify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
|
||||
"integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6",
|
||||
"universalify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
|
||||
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/toast": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
|
||||
@@ -3444,6 +3595,25 @@
|
||||
"integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn-node": {
|
||||
"version": "1.8.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
||||
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"acorn": "^7.0.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
"xtend": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"acorn": {
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
|
||||
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
@@ -4679,6 +4849,12 @@
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
|
||||
},
|
||||
"camelcase-css": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-keys": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
|
||||
@@ -4836,6 +5012,39 @@
|
||||
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
|
||||
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
|
||||
},
|
||||
"clear-module": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clear-module/-/clear-module-4.1.1.tgz",
|
||||
"integrity": "sha512-ng0E7LeODcT3QkazOckzZqbca+JByQy/Q2Z6qO24YsTp+pLxCfohGz2gJYJqZS0CWTX3LEUiHOqe5KlYeUbEMw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"parent-module": "^2.0.0",
|
||||
"resolve-from": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"parent-module": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-2.0.0.tgz",
|
||||
"integrity": "sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"callsites": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"resolve-from": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
|
||||
"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli-boxes": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
|
||||
@@ -5556,6 +5765,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-unit-converter": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
|
||||
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
|
||||
"dev": true
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
|
||||
@@ -5842,6 +6057,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"defined": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
|
||||
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
|
||||
"dev": true
|
||||
},
|
||||
"defu": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/defu/-/defu-3.1.0.tgz",
|
||||
@@ -5894,6 +6115,17 @@
|
||||
"integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
|
||||
"dev": true
|
||||
},
|
||||
"detective": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
|
||||
"integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"acorn-node": "^1.6.1",
|
||||
"defined": "^1.0.0",
|
||||
"minimist": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"diff-sequences": {
|
||||
"version": "26.3.0",
|
||||
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.3.0.tgz",
|
||||
@@ -9952,6 +10184,12 @@
|
||||
"lodash._reinterpolate": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.toarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
|
||||
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.unionby": {
|
||||
"version": "4.8.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.unionby/-/lodash.unionby-4.8.0.tgz",
|
||||
@@ -10515,6 +10753,15 @@
|
||||
"lodash": "^4.17.15"
|
||||
}
|
||||
},
|
||||
"node-emoji": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
|
||||
"integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash.toarray": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"node-fetch": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
|
||||
@@ -10894,6 +11141,12 @@
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
|
||||
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
|
||||
},
|
||||
"normalize.css": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
|
||||
"dev": true
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
||||
@@ -11016,6 +11269,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
|
||||
"integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
|
||||
"dev": true
|
||||
},
|
||||
"object-inspect": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
|
||||
@@ -11896,6 +12155,93 @@
|
||||
"postcss": "^7.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-functions": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
|
||||
"integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.1.2",
|
||||
"object-assign": "^4.1.1",
|
||||
"postcss": "^6.0.9",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
}
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-gap-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
|
||||
@@ -11948,6 +12294,16 @@
|
||||
"postcss": "^7.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-js": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
|
||||
"integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase-css": "^2.0.1",
|
||||
"postcss": "^7.0.18"
|
||||
}
|
||||
},
|
||||
"postcss-lab-function": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
|
||||
@@ -12163,6 +12519,16 @@
|
||||
"postcss": "^7.0.6"
|
||||
}
|
||||
},
|
||||
"postcss-nested": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
|
||||
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^7.0.32",
|
||||
"postcss-selector-parser": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-nesting": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
|
||||
@@ -12615,6 +12981,12 @@
|
||||
"react-is": "^16.12.0"
|
||||
}
|
||||
},
|
||||
"pretty-hrtime": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
|
||||
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
|
||||
"dev": true
|
||||
},
|
||||
"pretty-quick": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.0.2.tgz",
|
||||
@@ -12827,6 +13199,104 @@
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
|
||||
},
|
||||
"purgecss": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
|
||||
"integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commander": "^5.0.0",
|
||||
"glob": "^7.0.0",
|
||||
"postcss": "7.0.32",
|
||||
"postcss-selector-parser": "^6.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"commander": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
|
||||
"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
|
||||
"dev": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "7.0.32",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
|
||||
"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"q": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
|
||||
@@ -13050,6 +13520,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"reduce-css-calc": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
|
||||
"integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-unit-converter": "^1.1.1",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-value-parser": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
|
||||
@@ -14967,6 +15455,44 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"tailwindcss": {
|
||||
"version": "1.8.10",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.10.tgz",
|
||||
"integrity": "sha512-7QkERG/cWCzsuMqHMwjOaLMVixOGLNBiXsrkssxlE1aWfkxVbGqiuMokR2162xRyaH2mBIHKxmlf1qb3DvIPqw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@fullhuman/postcss-purgecss": "^2.1.2",
|
||||
"autoprefixer": "^9.4.5",
|
||||
"browserslist": "^4.12.0",
|
||||
"bytes": "^3.0.0",
|
||||
"chalk": "^3.0.0 || ^4.0.0",
|
||||
"color": "^3.1.2",
|
||||
"detective": "^5.2.0",
|
||||
"fs-extra": "^8.0.0",
|
||||
"html-tags": "^3.1.0",
|
||||
"lodash": "^4.17.20",
|
||||
"node-emoji": "^1.8.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"object-hash": "^2.0.3",
|
||||
"postcss": "^7.0.11",
|
||||
"postcss-functions": "^3.0.0",
|
||||
"postcss-js": "^2.0.0",
|
||||
"postcss-nested": "^4.1.1",
|
||||
"postcss-selector-parser": "^6.0.0",
|
||||
"postcss-value-parser": "^4.1.0",
|
||||
"pretty-hrtime": "^1.0.3",
|
||||
"reduce-css-calc": "^2.1.6",
|
||||
"resolve": "^1.14.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"html-tags": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
|
||||
"integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"tapable": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
"@nuxtjs/sitemap": "^2.4.0",
|
||||
"@nuxtjs/toast": "^3.3.1",
|
||||
"ace-builds": "^1.4.12",
|
||||
"firebase": "^7.21.0",
|
||||
"esprima": "^4.0.1",
|
||||
"firebase": "^7.21.0",
|
||||
"graphql": "^15.3.0",
|
||||
"graphql-language-service-interface": "^2.4.2",
|
||||
"nuxt": "^2.14.6",
|
||||
@@ -50,9 +50,11 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.11.6",
|
||||
"@babel/preset-env": "^7.11.5",
|
||||
"@nuxtjs/color-mode": "^1.1.1",
|
||||
"@nuxtjs/google-analytics": "^2.4.0",
|
||||
"@nuxtjs/pwa": "^3.0.2",
|
||||
"@nuxtjs/svg": "^0.1.12",
|
||||
"@nuxtjs/tailwindcss": "^3.0.2",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@vue/test-utils": "^1.1.0",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<button
|
||||
class="icon"
|
||||
@@ -288,39 +288,43 @@
|
||||
.doc-desc,
|
||||
.folder,
|
||||
.request {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply justify-center;
|
||||
@apply flex-1;
|
||||
@apply p-8;
|
||||
|
||||
.material-icons {
|
||||
margin-right: 16px;
|
||||
@apply mr-8;
|
||||
}
|
||||
}
|
||||
|
||||
.folder {
|
||||
border-left: 1px solid var(--brd-color);
|
||||
margin: 16px 0 0;
|
||||
@apply border-l;
|
||||
@apply border-brdColor;
|
||||
@apply mt-8;
|
||||
}
|
||||
|
||||
.request {
|
||||
border: 1px solid var(--brd-color);
|
||||
border-radius: 8px;
|
||||
margin: 16px 0 0;
|
||||
@apply border;
|
||||
@apply border-brdColor;
|
||||
@apply rounded-lg;
|
||||
@apply mt-8;
|
||||
|
||||
h4 {
|
||||
margin: 8px 0;
|
||||
@apply mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-desc {
|
||||
color: var(--fg-light-color);
|
||||
border-bottom: 1px dashed var(--brd-color);
|
||||
margin: 0;
|
||||
@apply text-fgLightColor;
|
||||
@apply border-b;
|
||||
@apply border-dashed;
|
||||
@apply border-brdColor;
|
||||
@apply m-0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
@apply border-b-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<pw-section class="orange" :label="$t('headers')" ref="headers">
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
|
||||
@@ -93,7 +93,7 @@
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="green" :label="$t('schema')" ref="schema">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
<button
|
||||
@@ -153,7 +153,7 @@
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="cyan" :label="$t('query')" ref="query">
|
||||
<div class="flex-wrap gqlRunQuery">
|
||||
<div class="row-wrapper gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -210,7 +210,7 @@
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" label="Response" ref="response">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -321,10 +321,10 @@
|
||||
<style scoped lang="scss">
|
||||
.gqlTabs {
|
||||
max-height: calc(100vh - 192px);
|
||||
overflow: auto;
|
||||
@apply overflow-auto;
|
||||
}
|
||||
.gqlRunQuery {
|
||||
margin-bottom: 12px;
|
||||
@apply mb-8;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -207,7 +207,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event">
|
||||
{{ $t("raw_input") }}
|
||||
@@ -267,7 +267,7 @@
|
||||
<div v-if="!rawInput">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="reqParamList">{{ $t("parameter_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -337,7 +337,7 @@
|
||||
<div v-else>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="rawBody">{{ $t("raw_request_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -365,7 +365,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<button
|
||||
class="icon"
|
||||
@@ -433,7 +433,7 @@
|
||||
<pw-section class="pink" label="Parameters" ref="parameters">
|
||||
<ul v-if="params.length !== 0">
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -523,7 +523,7 @@
|
||||
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="auth">{{ $t("authentication") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -575,7 +575,7 @@
|
||||
</ul>
|
||||
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<input placeholder="Token" name="bearer_token" v-model="bearerToken" />
|
||||
<button
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
@@ -596,7 +596,7 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
|
||||
{{ $t("include_in_url") }}
|
||||
</pw-toggle>
|
||||
@@ -610,7 +610,7 @@
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="token-name">{{ $t("token_name") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -732,7 +732,7 @@
|
||||
<pw-section class="orange" label="Headers" ref="headers">
|
||||
<ul v-if="headers.length !== 0">
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -810,7 +810,7 @@
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="generatedCode">{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<a
|
||||
@@ -855,7 +855,7 @@
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="generatedCode">{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<a
|
||||
@@ -881,7 +881,7 @@
|
||||
}"
|
||||
/>
|
||||
<div v-if="testReports.length !== 0">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label>Test Reports</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -897,7 +897,7 @@
|
||||
<div v-if="testReport.startBlock" class="info">
|
||||
<h4>{{ testReport.startBlock }}</h4>
|
||||
</div>
|
||||
<p v-else-if="testReport.result" class="flex-wrap info">
|
||||
<p v-else-if="testReport.result" class="row-wrapper info">
|
||||
<span :class="testReport.styles.class">
|
||||
<i class="material-icons">
|
||||
{{ testReport.styles.icon }}
|
||||
@@ -942,19 +942,19 @@
|
||||
<aside v-if="activeSidebar" class="sticky-inner inner-right">
|
||||
<section>
|
||||
<tabs>
|
||||
<tab :id="'history'" :icon="'watch_later'" :label="$t('history')" :selected="true">
|
||||
<tab :id="'history'" :label="$t('history')" :selected="true">
|
||||
<history @useHistory="handleUseHistory" ref="historyComponent" />
|
||||
</tab>
|
||||
|
||||
<tab :id="'collections'" :icon="'folder_special'" :label="$t('collections')">
|
||||
<tab :id="'collections'" :label="$t('collections')">
|
||||
<collections />
|
||||
</tab>
|
||||
|
||||
<tab :id="'env'" :icon="'style'" :label="$t('environments')">
|
||||
<tab :id="'env'" :label="$t('environments')">
|
||||
<environments @use-environment="useSelectedEnvironment($event)" />
|
||||
</tab>
|
||||
|
||||
<tab :id="'notes'" :icon="'note'" :label="$t('notes')">
|
||||
<tab :id="'notes'" :label="$t('notes')">
|
||||
<pw-section class="pink" :label="$t('notes')" ref="sync">
|
||||
<div v-if="fb.currentUser">
|
||||
<inputform />
|
||||
@@ -986,7 +986,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("import_curl") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="showModal = false">
|
||||
@@ -1010,7 +1010,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon" @click="showModal = false">
|
||||
@@ -1028,7 +1028,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("generate_code") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="isHidden = true">
|
||||
@@ -1054,7 +1054,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="generatedCode">{{ $t("generated_code") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -1085,7 +1085,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("manage_token") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="showTokenList = false">
|
||||
@@ -1099,7 +1099,7 @@
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="token-list">{{ $t("token_list") }}</label>
|
||||
<div v-if="tokens.length != 0">
|
||||
<button
|
||||
@@ -1129,7 +1129,7 @@
|
||||
<li>
|
||||
<input :value="token.value" readonly />
|
||||
</li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@@ -1161,7 +1161,7 @@
|
||||
<div slot="header">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<h3 class="title">{{ $t("manage_token_req") }}</h3>
|
||||
<div>
|
||||
<button class="icon" @click="showTokenRequestList = false">
|
||||
@@ -1175,7 +1175,7 @@
|
||||
<div slot="body">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="token-req-list">{{ $t("token_req_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
@@ -1231,7 +1231,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon primary" @click="addOAuthTokenReq">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<img
|
||||
v-if="fb.currentUser.photoURL"
|
||||
:src="fb.currentUser.photoURL"
|
||||
class="material-icons"
|
||||
class="rounded-full material-icons"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
<span>
|
||||
@@ -119,7 +119,7 @@
|
||||
<pw-section class="purple" :label="$t('extensions')" ref="extensions">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle
|
||||
:on="settings.EXTENSIONS_ENABLED"
|
||||
@change="toggleSetting('EXTENSIONS_ENABLED')"
|
||||
@@ -131,17 +131,22 @@
|
||||
</ul>
|
||||
<ul class="info">
|
||||
<li v-if="extensionVersion != null">
|
||||
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
|
||||
<p>
|
||||
{{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
|
||||
extensionVersion.minor
|
||||
}}
|
||||
</p>
|
||||
</li>
|
||||
<li v-else>
|
||||
<p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
|
||||
</li>
|
||||
|
||||
<li v-else>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="blue" :label="$t('proxy')" ref="proxy">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
|
||||
{{ $t("proxy") }}
|
||||
@@ -162,7 +167,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
|
||||
<i class="material-icons">clear_all</i>
|
||||
@@ -227,7 +232,7 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<div class="row-wrapper">
|
||||
<pw-toggle
|
||||
:on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
|
||||
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
|
||||
@@ -238,11 +243,19 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<!-- <div>
|
||||
<h1>Color mode: {{ $colorMode.value }}</h1>
|
||||
<select v-model="$colorMode.preference">
|
||||
<option value="system">System</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="sepia">Sepia</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
<script>
|
||||
import firebase from "firebase/app"
|
||||
import { fb } from "~/helpers/fb"
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import Vue from "vue"
|
||||
import VTooltip from "v-tooltip"
|
||||
|
||||
Vue.use(VTooltip)
|
||||
Vue.use(VTooltip, {
|
||||
defaultOffset: 8,
|
||||
popover: {
|
||||
defaultOffset: 0,
|
||||
},
|
||||
})
|
||||
|
||||
58
tailwind.config.js
Normal file
58
tailwind.config.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
** TailwindCSS Configuration File
|
||||
**
|
||||
** Docs: https://tailwindcss.com/docs/configuration
|
||||
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
|
||||
*/
|
||||
module.exports = {
|
||||
future: {
|
||||
removeDeprecatedGapUtilities: true,
|
||||
},
|
||||
experimental: "all",
|
||||
corePlugins: {
|
||||
clear: false,
|
||||
float: false,
|
||||
skew: false,
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bgColor: "var(--bg-color)",
|
||||
bgLightColor: "var(--bg-light-color)",
|
||||
bgDarkColor: "var(--bg-dark-color)",
|
||||
fgColor: "var(--fg-color)",
|
||||
fgLightColor: "var(--fg-light-color)",
|
||||
brdColor: "var(--brd-color)",
|
||||
errColor: "var(--err-color)",
|
||||
acColor: "var(--ac-color)",
|
||||
actColor: "var(--act-color)",
|
||||
atcColor: "var(--atc-color)",
|
||||
ttColor: "var(--tt-color)",
|
||||
},
|
||||
inset: {},
|
||||
},
|
||||
fontFamily: {
|
||||
body: "var(--font-body)",
|
||||
mono: "var(--font-mono)",
|
||||
icon: "var(--font-icon)",
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
purge: {
|
||||
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
|
||||
enabled: process.env.NODE_ENV === "production",
|
||||
content: [
|
||||
"components/**/*.vue",
|
||||
"layouts/**/*.vue",
|
||||
"pages/**/*.vue",
|
||||
"plugins/**/*.js",
|
||||
"nuxt.config.js",
|
||||
"content/**/*.md",
|
||||
],
|
||||
// These options are passed through directly to PurgeCSS
|
||||
options: {
|
||||
whitelistPatterns: [/^bg-/, /^text-/, /^border-/, /^h-/, /^w-/, /^hover:/],
|
||||
},
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user