Better color schemes, minor UI fixes

assets/scss/styles.scss

@@ -137,7 +137,7 @@ footer {
   @apply h-full;
 }
 
-.main {
+main {
   @apply flex;
   @apply flex-col;
   @apply flex-1;
@@ -645,23 +645,23 @@ ol li {
 }
 
 .info-response {
-  color: #ffeb3b;
+  @apply text-yellow-400;
 }
 
 .success-response {
-  color: #4bb543;
+  @apply text-green-400;
 }
 
 .redir-response {
-  color: #ff5722;
+  @apply text-orange-400;
 }
 
 .cl-error-response {
-  color: #a63232;
+  @apply text-red-400;
 }
 
 .sv-error-response {
-  color: #b71c1c;
+  @apply text-red-600;
 }
 
 .missing-data-response {
@@ -754,7 +754,7 @@ section {
     @apply flex-col;
   }
 
-  .main {
+  main {
     padding: 0 8px 68px;
   }
 
@@ -792,8 +792,8 @@ section {
 }
 
 .toasted-ad {
-  background-color: #fefefe;
-  color: #121212;
+  @apply bg-gray-50;
+  @apply text-gray-900;
   padding: 16px !important;
   @apply font-bold;
   @apply text-sm;
@@ -802,13 +802,13 @@ section {
 
   .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 bg-gray-50;
+    @apply text-gray-900;
     @apply rounded-lg;
   }
 }

assets/scss/themes.scss

@@ -23,6 +23,8 @@
   --tt-color: rgba(53, 53, 53, 1);
   // Editor theme
   --editor-theme: "twilight";
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin lightTheme {
@@ -44,6 +46,8 @@
   --tt-color: rgba(220, 220, 220, 1);
   // Editor theme
   --editor-theme: "iplastic";
+  // Active text color
+  --act-color: rgba(255, 255, 255, 1);
 }
 
 @mixin blackTheme {
@@ -65,62 +69,48 @@
   --tt-color: rgba(18, 18, 18, 1);
   // Editor theme
   --editor-theme: "vibrant_ink";
+  // Active text color
+  --act-color: rgba(0, 0, 0, 1);
 }
 
 @mixin blueTheme {
   // Acent color
   --ac-color: theme("colors.blue.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin greenTheme {
   // Acent color
   --ac-color: theme("colors.green.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin tealTheme {
   // Acent color
   --ac-color: theme("colors.teal.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin purpleTheme {
   // Acent color
   --ac-color: theme("colors.purple.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin orangeTheme {
   // Acent color
   --ac-color: theme("colors.orange.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin pinkTheme {
   // Acent color
   --ac-color: theme("colors.pink.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin redTheme {
   // Acent color
   --ac-color: theme("colors.red.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 @mixin yellowTheme {
   // Acent color
   --ac-color: theme("colors.yellow.400");
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
 }
 
 :root {

layouts/default.vue

@@ -3,11 +3,11 @@
     <div class="content">
       <div class="columns">
         <sidenav />
-        <div class="main" id="main">
+        <main>
           <pw-header />
           <nuxt />
           <pw-footer />
-        </div>
+        </main>
       </div>
     </div>
   </div>

pages/doc.vue

@@ -276,7 +276,7 @@
         </pw-section>
       </div>
 
-      <aside class="sticky-inner inner-right">
+      <aside class="sticky-inner inner-right lg:max-w-md">
         <collections @use-collection="useSelectedCollection($event)" :doc="true" />
       </aside>
     </div>

pages/graphql.vue

@@ -260,7 +260,7 @@
           />
         </pw-section>
       </div>
-      <aside class="sticky-inner inner-right">
+      <aside class="sticky-inner inner-right lg:max-w-md">
         <pw-section class="purple" :label="$t('docs')" ref="docs">
           <section>
             <tabs ref="gqlTabs">

pages/index.vue

@@ -938,7 +938,7 @@
         </pw-section>
       </div>
 
-      <aside v-if="activeSidebar" class="sticky-inner inner-right">
+      <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
         <section>
           <tabs>
             <tab :id="'history'" :label="$t('history')" :selected="true">