btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Better color schemes, minor UI fixes

Browse Source
This commit is contained in:
Liyas Thomas
2020-09-24 22:52:17 +05:30
parent 59e492b2a6
commit f36db182f1
6 changed files with 22 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/scss/styles.scss
View File

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

22
assets/scss/themes.scss
View File

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

4
layouts/default.vue
View File

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

2
pages/doc.vue
View File

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

2
pages/graphql.vue
View File

@@ -260,7 +260,7 @@
/> />
</pw-section> </pw-section>
</div> </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"> <pw-section class="purple" :label="$t('docs')" ref="docs">
<section> <section>
<tabs ref="gqlTabs"> <tabs ref="gqlTabs">

2
pages/index.vue
View File

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