CSS cleanup (#331)

src/assets/css/buttons.css

@@ -7,12 +7,11 @@
 }
 
 .btn-outline:hover {
-  @apply border-tulip text-white;
+  @apply border-primary text-white;
 }
 
 .btn-outline-circle {
-  @apply rounded-full transition-colors;
-  font-family: "ProximaNova-bold", serif;
+  @apply rounded-full transition-colors font-bold;
   padding: 12px 20px;
 }
 
@@ -21,7 +20,7 @@
 }
 
 button.btn-primary {
-  @apply bg-americanpink text-white p-[10px] h-[43px] text-base rounded-md;
+  @apply bg-primary-light text-white p-[10px] h-[43px] text-base rounded-md;
 }
 
 :not(:disabled).btn-primary {

src/assets/css/documentation.css

@@ -8,11 +8,11 @@
 }
 
 .documentation-markdown p {
-  @apply maxMd:text-sm text-brightgray font-proximaNova-regular mb-6;
+  @apply max-md:text-sm text-grey-300  mb-6;
 }
 
 .documentation-markdown code {
-  @apply whitespace-normal font-proximaNova-regular text-sm text-brightgray mb-4 block;
+  @apply whitespace-normal  text-sm text-grey-300 mb-4 block;
 }
 
 .documentation-modal {
@@ -25,12 +25,12 @@
 }
 
 .warning-modal {
-  @apply top-0 fixed left-0 z-[11] overflow-y-auto overflow-x-hidden h-full w-full flex items-center maxMd:px-4 maxMd:py-14;
+  @apply top-0 fixed left-0 z-[11] overflow-y-auto overflow-x-hidden h-full w-full flex items-center max-md:px-4 max-md:py-14;
 }
 
 .warning-modal::before {
   content: "";
-  @apply fixed top-0 left-0 z-[1] w-screen h-screen backdrop-blur-[20px] shadow-default;
+  @apply fixed top-0 left-0 z-[1] w-screen h-screen backdrop-blur-[20px];
   background: linear-gradient(
     131.09deg,
     rgba(29, 29, 27, 0.49) 8.8%,
@@ -39,23 +39,23 @@
 }
 
 .warning-modal__content {
-  @apply p-6 mx-auto relative rounded-2xl z-[11] bg-[#26262A] md:max-w-[675px] maxMd:max-w-full text-brightgray maxMd:h-full maxMd:flex maxMd:flex-col maxMd:justify-around;
+  @apply p-6 mx-auto relative rounded-2xl z-[11] bg-[#26262A] md:max-w-[675px] max-md:max-w-full text-grey-300 max-md:h-full max-md:flex max-md:flex-col max-md:justify-around;
 }
 
 .warning-modal__content .hr,
 .warning-modal__content.gradient-border::after {
-  @apply maxMd:hidden;
+  @apply max-md:hidden;
 }
 
 .documentation-modal--main .warning-modal__content .hr,
 .documentation-modal--main .warning-modal__content.gradient-border::after {
-  @apply maxMd:block;
+  @apply max-md:block;
 }
 
 .warning-modal__footer {
-  @apply flex items-center md:gap-8 gap-[18px] maxMd:flex-col;
+  @apply flex items-center md:gap-8 gap-[18px] max-md:flex-col;
 }
 
 .warning-modal__footer button {
-  @apply maxMd:max-w-[250px];
+  @apply max-md:max-w-[250px];
 }

src/assets/css/fonts.css

@@ -1,22 +1,13 @@
-@font-face {
-  font-family: "Pretendard";
-  src: url("../fonts/Pretendard-Medium.otf") format(opentype);
-}
-
-@font-face {
-  font-family: "ProximaNova-Regular";
-  src: url("../fonts/ProximaNovaRegular.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "ProximaNova-bold";
-  src: url("../fonts/ProximaNovaBold.otf") format(opentype);
-  font-weight: normal;
-  font-style: normal;
-}
+@layer base {
+  @font-face {
+    font-family: "Pretendard";
+    src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
+    font-weight: normal;
+  }
 
-.font-proximaNova-regular {
-  font-family: "ProximaNova-Regular", serif;
+  @font-face {
+    font-family: "Pretendard";
+    src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
+    font-weight: bold;
+  }
 }

src/assets/css/forms.css

@@ -1,5 +1,5 @@
 textarea {
-  @apply bg-darkcharcoal font-proximaNova-regular focus:outline-none py-2 px-4 text-sm text-ghostwhite rounded custom-scroll resize-none;
+  @apply bg-grey-700  focus:outline-none py-2 px-4 text-sm text-grey-100 rounded custom-scroll resize-none;
   border-radius: 0 4px 4px 4px;
 }
 
@@ -69,6 +69,6 @@ textarea {
 }
 
 .search-filter > input {
-  @apply rounded-sm w-full py-2 text-manatee px-12 focus:shadow-none focus:outline-none;
+  @apply rounded-sm w-full py-2 text-grey-500 px-12 focus:shadow-none focus:outline-none;
   background-color: rgba(77, 77, 79, 0.22);
 }

src/assets/css/index.css

@@ -20,18 +20,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* COLOR THEME */
-:root {
-  --primary-color: #e7a29a;
-  --secondary-color: #ebc19d;
-  --success-color: #4b9f81;
-  --info-color: #fbe9e7;
-}
-
-body {
-  font-family: "Pretendard", serif;
-}
-
 /**/
 
 header {
@@ -45,10 +33,10 @@ header img {
 /**/
 
 .main-container {
-  @apply pb-[60px] px-3 mx-auto z-[1] relative xl:ml-[140px] md:ml-[110px] md:mr-[40px] xl:mr-[70px] ml-[80px] mr-[10px] maxMd:mx-4;
+  @apply pb-[60px] px-3 mx-auto z-[1] relative xl:ml-[140px] md:ml-[110px] md:mr-[40px] xl:mr-[70px] ml-[80px] mr-[10px] max-md:mx-4;
 }
 
-@screen maxMd {
+@media (max-width: 767px) {
   .main-container {
     width: calc(100% - 2rem);
   }

src/assets/css/markdown.css

@@ -1,10 +1,10 @@
 .markdown-body {
-  @apply !bg-transparent !text-brightgray !text-sm;
+  @apply bg-transparent text-grey-300 text-sm font-sans !important;
 }
 
 .markdown-body :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  @apply !bg-transparent;
+  @apply bg-transparent !important;
 }
 
 .markdown-body pre {
@@ -13,19 +13,19 @@ pre[class*="language-"] {
 
 .markdown-body ul,
 .markdown-body ol {
-  @apply list-[unset];
+  @apply list-[unset] !important;
 }
 
 .markdown-body h2 {
   border-color: rgb(219 213 213 / 30%) !important;
-  @apply !mb-5 !pb-5;
+  @apply mb-5 pb-5 !important;
 }
 
 .markdown-body a:hover {
-  @apply !no-underline border-b;
+  @apply no-underline border-b !important;
   border-color: rgb(219 213 213 / 30%) !important;
 }
 
 .markdown-body p {
-  @apply leading-6;
+  @apply leading-6 !important;
 }

src/assets/css/misc.css

@@ -7,23 +7,23 @@
 
 .polygon-shape {
   background: url("../images/polygon-shape.svg") no-repeat;
-  @apply w-[90px] h-[60px] maxMd:h-9 maxMd:w-[65px] flex justify-center items-center bg-contain maxMd:!bg-[12px] bg-center;
+  @apply w-[90px] h-[60px] max-md:h-9 max-md:w-[65px] flex justify-center items-center bg-contain max-md:!bg-[12px] bg-center;
 }
 
 .polygon-shape svg {
-  @apply w-6 h-6 md:mt-[14px] mt-2 maxMd:h-4 maxMd:w-4 mx-auto;
+  @apply w-6 h-6 md:mt-[14px] mt-2 max-md:h-4 max-md:w-4 mx-auto;
 }
 
 svg.warning-icon {
-  @apply w-8 h-8 maxMd:h-6 maxMd:w-6 mx-auto;
+  @apply w-8 h-8 max-md:h-6 max-md:w-6 mx-auto;
 }
 
 .warning-icon path {
   @apply stroke-white;
 }
 
 .settings-card h3 {
-  @apply text-brightgray md:text-lg text-xs mb-7;
+  @apply text-grey-300 md:text-lg text-xs mb-7;
 }
 
 .settings-card__border {
@@ -32,11 +32,11 @@ svg.warning-icon {
 }
 
 .progress {
-  @apply border w-full overflow-hidden rounded-[2px];
+  @apply border border-grey-300 w-full overflow-hidden rounded-[2px];
 }
 
 .progress-container {
-  @apply h-5 bg-lightsalmonpink;
+  @apply h-5 bg-primary-light;
   transform: skew(-20deg) translateX(-10px);
 }
 
@@ -45,11 +45,11 @@ svg.warning-icon {
 }
 
 .settings-card li span {
-  @apply text-brightgray font-semibold md:text-[13px] text-[10px] pb-3 gap-3;
+  @apply text-grey-300 font-semibold md:text-[13px] text-[10px] pb-3 gap-3;
 }
 
 .right-top-card p {
-  @apply text-brightgray text-sm mb-2 maxLg:min-w-[80px];
+  @apply text-grey-300 text-sm mb-2 max-lg:min-w-[80px];
 }
 
 .right-top-card .progress-container {
@@ -61,20 +61,18 @@ svg.warning-icon {
 }
 
 .right-general-card span {
-  @apply text-brightgray font-proximaNova-regular md:text-base text-sm md:w-1/2 min-w-[45%];
-  word-wrap: break-word;
+  @apply text-grey-300  md:text-base text-sm md:w-1/2 min-w-[45%] break-words;
 }
 
 .right-general-card__list li {
-  word-wrap: break-word;
-  @apply text-brightgray font-proximaNova-regular md:text-base text-sm;
+  @apply text-grey-300 text-sm md:text-base break-words;
 }
 
 .right-general-card__list {
   width: calc(50% - 2rem);
 }
 
-@screen maxMd {
+@media (max-width: 767px) {
   .right-general-card__list {
     width: calc(50% - 1rem);
     @apply ml-3;
@@ -105,7 +103,7 @@ svg.warning-icon {
 }
 
 .status-not-running .progress {
-  @apply border-lavendergray;
+  @apply border-grey-400;
 }
 
 .status-not-running p {
@@ -123,31 +121,31 @@ svg.warning-icon {
 }
 
 .gpu-resources__body li span {
-  @apply text-brightgray text-[13px] mb-3;
+  @apply text-grey-300 text-[13px] mb-3;
 }
 
 .share-chat__btn {
-  @apply bg-sonicsilver py-3 px-4 maxMd:px-[11px] maxMd:py-2 rounded-md md:text-lg text-sm maxMd:text-[12px] font-proximaNova-regular text-white;
+  @apply bg-grey-600 py-2 md:py-3 px-3 md:px-4 rounded-md md:text-lg text-sm max-md:text-[12px]  text-white;
 }
 
 .setting__btn {
-  @apply w-[66px] h-[48px] maxMd:h-9 maxMd:w-[46px] maxMd:mr-2;
+  @apply w-[66px] h-[48px] max-md:h-9 max-md:w-[46px] max-md:mr-2;
 }
 
 .setting__btn img {
-  @apply mx-auto maxMd:max-w-[17px];
+  @apply mx-auto max-md:max-w-[17px];
 }
 
 .backend-url {
   @apply w-[45%];
 }
 
 .tabs-header button {
-  @apply inline-block py-2 px-[14px] min-w-[90px] w-fit text-sm text-spanishgray font-proximaNova-regular text-center;
+  @apply inline-block py-2 px-[14px] min-w-[90px] w-fit text-sm text-grey-400  text-center;
 }
 
 .yarl__container[aria-live="polite"] {
-  @apply !bg-darkcharcoal;
+  @apply !bg-grey-700;
 }
 
 .upload-photo-preview img {

src/assets/css/prem-audio.css

@@ -11,18 +11,19 @@
 }
 
 .prem-audio-recording {
-  @apply flex items-center maxLg:flex-wrap lg:px-4 px-2 py-1;
+  @apply flex items-center max-lg:flex-wrap lg:px-4 px-2 py-1;
 }
 
 .plyr--audio .plyr__controls {
-  @apply !bg-transparent maxMd:flex-wrap maxMd:justify-start maxLg:!px-0;
+  @apply !bg-transparent max-md:flex-wrap max-md:justify-start max-lg:!px-0;
 }
 
-@screen minMaxMd {
+@media (min-width: 768px) and (max-width: 1023px) {
   .plyr__volume input[type="range"] {
-    @apply !max-w-[60px] !min-w-[40px];
+    @apply max-w-[60px] min-w-[40px] !important;
   }
 }
+
 .plyr__progress__buffer {
   @apply !bg-transparent;
 }
@@ -36,7 +37,7 @@
 }
 
 .plyr__controls .plyr__controls__item {
-  @apply text-xs text-spanishgray;
+  @apply text-xs text-grey-400;
 }
 
 .plyr__time + .plyr__time:before {