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

⬆️ Bumped dependencies

Browse Source 
🎨 Improved UI contrast
This commit is contained in:
Liyas Thomas
2019-12-14 15:23:10 +05:30
parent 9e2407b7f1
commit acc80cff74
10 changed files with 1335 additions and 1558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -360,13 +360,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses
<p>
[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-252628?logo=Postwoman)](https://postwoman.io)
[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io)
<details>
<summary>Default</summary>
<p>
```
[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-252628?logo=Postwoman)](https://postwoman.io)
[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io)
```
</p>
</details>

14
assets/css/styles.scss
View File

@@ -144,6 +144,8 @@ footer {
.nav-first {
z-index: 1;
height: 100vh;
padding: 0 8px;
}
.main {
@@ -183,7 +185,7 @@ nav.primary-nav {
background-color: var(--bg-light-color);
color: var(--fg-light-color);
fill: var(--fg-light-color);
margin: 8px;
margin: 8px 0;
transition: all 0.2s ease-in-out;
&:hover {
@@ -228,7 +230,7 @@ nav.secondary-nav {
border-radius: 50%;
background-color: var(--bg-dark-color);
color: var(--fg-light-color);
margin: 8px;
margin: 8px 0;
&:hover {
color: var(--fg-color);
@@ -255,7 +257,7 @@ h3 {
}
.tooltip {
$bgcolor: var(--brd-color);
$bgcolor: var(--bg-color);
$fgcolor: var(--fg-color);
display: block !important;
z-index: 10000;
@@ -787,6 +789,7 @@ input[type="radio"]:checked + label + .tab {
.toasted.info {
background-color: var(--ac-color) !important;
color: var(--act-color) !important;
font-weight: 700 !important;
}
.toasted.bubble .action {
@@ -824,6 +827,8 @@ input[type="radio"]:checked + label + .tab {
position: fixed;
top: auto;
bottom: 0;
height: auto;
padding: 0;
width: 100%;
background-color: var(--bg-color);
transition: all 0.2s ease-in-out;
@@ -836,6 +841,7 @@ input[type="radio"]:checked + label + .tab {
a {
background-color: transparent;
margin: 8px;
&.nuxt-link-exact-active {
background-color: transparent;
@@ -889,7 +895,7 @@ input[type="radio"]:checked + label + .tab {
margin-left: 0;
}
.toasted:last-child {
.toasted-container {
margin-bottom: 68px;
}
}

74
assets/css/themes.scss
View File

@@ -9,75 +9,71 @@
// Dark is the default theme variant.
@mixin darkTheme {
// Background color
--bg-color: rgb(37, 38, 40);
--bg-color: rgba(18, 18, 18, 1);
// Light Background color
--bg-light-color: rgba(255, 255, 255, 0.05);
//Dark Background color
--bg-light-color: rgba(255, 255, 255, 0.02);
// Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.1);
// Auto-complete color
--atc-color: rgb(49, 49, 55);
// Text color
--fg-color: rgb(247, 248, 248);
--fg-color: rgba(255, 255, 255, 1);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
--fg-light-color: rgba(255, 255, 255, 0.5);
// Border color
--brd-color: rgb(48, 47, 55);
--brd-color: rgba(255, 255, 255, 0.05);
// Error color
--err-color: rgba(255, 255, 255, 0.05);
// Acent color
--ac-color: #50fa7b;
--ac-color: rgba(80, 250, 123, 1);
// Active text color
--act-color: rgb(37, 38, 40);
--act-color: rgba(18, 18, 18, 1);
// Auto-complete color
--atc-color: rgba(18, 18, 18, 1);
}
@mixin lightTheme {
// Dark Background color
--bg-dark-color: #eeeeee;
// Background color
--bg-color: rgba(255, 255, 255, 1);
// Light Background color
--bg-light-color: rgba(0, 0, 0, 0.02);
//Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.05);
// Background color
--bg-color: #ffffff;
// Auto-complete color
--atc-color: #ebebeb;
// Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.02);
// Text color
--fg-color: #525252;
--fg-color: rgba(0, 0, 0, 1);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
--fg-light-color: rgba(0, 0, 0, 0.6);
// Border color
--brd-color: #eeeeed;
--brd-color: rgba(0, 0, 0, 0.1);
// Error color
--err-color: rgba(0, 0, 0, 0.02);
--err-color: rgba(0, 0, 0, 0.1);
// Acent color
--ac-color: #57b5f9;
--ac-color: rgba(80, 250, 123, 1);
// Active text color
--act-color: #ffffff;
--act-color: rgba(255, 255, 255, 1);
// Auto-complete color
--atc-color: rgba(255, 255, 255, 1);
}
@mixin blackTheme {
// Dark Background color
--bg-dark-color: rgb(8, 8, 8);
// Light Background color
--bg-light-color: rgba(255, 255, 255, 0.02);
//Dark Background color
--bg-dark-color: rgba(255, 255, 255, 0.02);
// Background color
--bg-color: #000000;
// Auto-complete color
--atc-color: rgb(18, 18, 18);
--bg-color: rgba(0, 0, 0, 1);
// Light Background color
--bg-light-color: rgba(255, 255, 255, 0);
// Dark Background color
--bg-dark-color: rgba(255, 255, 255, 0.02);
// Text color
--fg-color: rgb(250, 250, 250);
--fg-color: rgba(255, 255, 255, 1);
// Light Text color
--fg-light-color: rgb(100, 100, 100);
--fg-light-color: rgba(255, 255, 255, 0.5);
// Border color
--brd-color: rgb(16, 16, 16);
--brd-color: rgba(255, 255, 255, 0.05);
// Error color
--err-color: rgba(255, 255, 255, 0.02);
--err-color: rgba(255, 255, 255, 0.05);
// Acent color
--ac-color: #50fa7b;
--ac-color: rgba(80, 250, 123, 1);
// Active text color
--act-color: #000000;
--act-color: rgba(0, 0, 0, 1);
// Auto-complete color
--atc-color: rgba(0, 0, 0, 1);
}
:root {

1
components/autocomplete.vue
View File

@@ -50,6 +50,7 @@
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%;

2
components/history.vue
View File

@@ -307,7 +307,7 @@ ol li {
}
.entry {
border-bottom: 1px solid var(--brd-color);
border-bottom: 1px dashed var(--brd-color);
padding: 16px 0;
}

4
layouts/default.vue
View File

@@ -525,7 +525,7 @@ export default {
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#ffffff"
vibrant ? "rgb(18, 18, 18)" : "#ffffff"
);
})();
},
@@ -539,7 +539,7 @@ export default {
.querySelector("meta[name=theme-color]")
.setAttribute(
"content",
this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#121212"
);
// Initializes the PWA code - checks if the app is installed,

8
nuxt.config.js
View File

@@ -100,7 +100,7 @@ export default {
},
{
name: "msapplication-TileColor",
content: "#252628"
content: "#121212"
},
{
name: "msapplication-tap-highlight",
@@ -257,14 +257,14 @@ export default {
display: "standalone",
theme_color: "#252628",
background_color: "#252628",
theme_color: "#121212",
background_color: "#121212",
start_url: `${routerBase.router.base}`
},
meta: {
description: meta.shortDescription,
theme_color: "#252628"
theme_color: "#121212"
},
icons: (sizes => {

2772
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -38,7 +38,7 @@
"devDependencies": {
"cypress": "^3.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^7.3.1",
"sass-loader": "^8.0.0",
"start-server-and-test": "^1.10.6"
}
}

12
pages/settings.vue
View File

@@ -156,17 +156,17 @@ export default {
// set the relevant values.
themes: [
{
color: "#252628",
color: "#121212",
name: "Kinda Dark",
class: "",
aceEditor: "dracula"
aceEditor: "twilight"
},
{
color: "#ffffff",
name: "Clearly White",
vibrant: true,
class: "light",
aceEditor: "xcode"
aceEditor: "iplastic"
},
{
color: "#000000",
@@ -180,8 +180,8 @@ export default {
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto",
aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
? "xcode"
: "dracula"
? "iplastic"
: "twilight"
}
],
// You can define a new color here! It will simply store the color value.
@@ -273,7 +273,7 @@ export default {
document.documentElement.style.setProperty("--ac-color", color);
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)"
);
this.applySetting("THEME_COLOR", color.toUpperCase());
this.applySetting("THEME_COLOR_VIBRANT", vibrant);