Feat/tailwind (#1179)

assets/css/styles.scss

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

assets/css/tailwind.css

@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+/* purgecss end ignore */
+@import 'tailwindcss/utilities';

assets/css/fonts.scss → assets/scss/fonts.scss

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

assets/scss/styles.scss

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

assets/css/themes.scss → assets/scss/themes.scss

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

components/collections/add-collection.vue

@@ -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">

components/collections/add-folder.vue

@@ -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">

components/collections/collection.vue

@@ -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"

components/collections/edit-collection.vue

@@ -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">

components/collections/edit-folder.vue

@@ -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">