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

💄 Minor stylings

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-05 14:57:24 +05:30
parent 21386b924e
commit 82ad9cbf5e
5 changed files with 103 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
assets/css/themes.scss
View File

@@ -1,18 +1,82 @@
/**
Main Themes:
- auto
- dark (default)
- light
- black
- auto
*/
// Dark is the default theme variant.
:root {
// Dark Background color
--bg-dark-color: rgb(41, 42, 45);
// Background color
--bg-color: rgb(37, 38, 40);
// Auto-complete color
--atc-color: rgb(49, 49, 55);
// Text color
--fg-color: rgb(247, 248, 248);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color
--brd-color: rgb(48, 47, 55);
// Error color
--err-color: rgb(41, 42, 45);
// Acent color
--ac-color: #50fa7b;
// Active text color
--act-color: rgb(37, 38, 40);
}
:root.light {
// Dark Background color
--bg-dark-color: #e8f0fe;
// Background color
--bg-color: #ffffff;
// Auto-complete color
--atc-color: #ebebeb;
// Text color
--fg-color: #525252;
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color
--brd-color: #f2f2f2;
// Error color
--err-color: invert(#303341, 1);
// Acent color
--ac-color: #57b5f9;
// Active text color
--act-color: #ffffff;
}
:root.black {
// Dark Background color
--bg-dark-color: rgb(23, 24, 26);
// Background color
--bg-color: #000000;
// Auto-complete color
--atc-color: rgb(49, 49, 55);
// Text color
--fg-color: rgb(247, 248, 248);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color
--brd-color: rgb(48, 47, 55);
// Error color
--err-color: rgb(41, 42, 45);
// Acent color
--ac-color: #50fa7b;
// Active text color
--act-color: rgb(37, 38, 40);
}
@media(prefers-color-scheme: light) {
:root.auto {
// Dark Background color
--bg-dark-color: #e8f0fe;
// Background color
--bg-color: #fff;
--bg-color: #ffffff;
// Auto-complete color
--atc-color: #ebebeb;
// Text color
@@ -52,67 +116,3 @@
--act-color: rgb(37, 38, 40);
}
}
// Dark is the default theme variant.
:root {
// Dark Background color
--bg-dark-color: rgb(41, 42, 45);
// Background color
--bg-color: rgb(37, 38, 40);
// Auto-complete color
--atc-color: rgb(49, 49, 55);
// Text color
--fg-color: rgb(247, 248, 248);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color
--brd-color: rgb(48, 47, 55);
// Error color
--err-color: rgb(41, 42, 45);
// Acent color
--ac-color: #50fa7b;
// Active text color
--act-color: rgb(37, 38, 40);
}
:root.black {
// Dark Background color
--bg-dark-color: rgb(23, 24, 26);
// Background color
--bg-color: #000;
// Auto-complete color
--atc-color: rgb(49, 49, 55);
// Text color
--fg-color: rgb(247, 248, 248);
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color
--brd-color: rgb(48, 47, 55);
// Error color
--err-color: rgb(41, 42, 45);
// Acent color
--ac-color: #50fa7b;
// Active text color
--act-color: rgb(37, 38, 40);
}
:root.light {
// Dark Background color
--bg-dark-color: #e8f0fe;
// Background color
--bg-color: #fff;
// Auto-complete color
--atc-color: #ebebeb;
// Text color
--fg-color: #525252;
// Light Text color
--fg-light-color: rgb(150, 155, 160);
// Border color
--brd-color: #f2f2f2;
// Error color
--err-color: invert(#303341, 1);
// Acent color
--ac-color: #57b5f9;
// Active text color
--act-color: #fff;
}

5
components/autocomplete.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="autocomplete-wrapper">
<label>
<input
type="text"
:placeholder="placeholder"
@@ -26,7 +25,6 @@
:key="index"
>{{ suggestion }}</li>
</ul>
</label>
</div>
</template>
@@ -43,7 +41,7 @@
display: none;
background-color: var(--atc-color);
position: absolute;
top: 90%;
top: calc(100% - 4px);
margin: 0 4px;
left: 0;
padding: 0;
@@ -55,7 +53,6 @@
width: 100%;
display: block;
padding: 8px 16px;
font-weight: 700;
font-size: 18px;
font-family: monospace;
white-space: pre-wrap;

2
components/settings/swatch.vue
View File

@@ -37,7 +37,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
color: #ffffff;
}
}
}

2
layouts/default.vue
View File

@@ -174,7 +174,7 @@
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#fff');
document.documentElement.style.setProperty('--act-color', vibrant ? 'rgb(37, 38, 40)' : '#ffffff');
})();
},

18
pages/settings.vue
View File

@@ -79,15 +79,9 @@
// You should copy the existing light theme as a template and then just
// set the relevant values.
themes: [
{
"color": "",
"name": "Auto",
"vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
"class": "auto"
},
{
"color": "rgb(37, 38, 40)",
"name": "Dark (default)",
"name": "Dark",
"class": ""
},
{
@@ -98,8 +92,14 @@
},
{
"color": "#000",
name: "Black",
"name": "Black",
"class": "black"
},
{
"color": "var(--bg-color)",
"name": "Auto (system)",
"vibrant": window.matchMedia('(prefers-color-scheme: light)').matches,
"class": "auto"
}
],
// You can define a new color here! It will simply store the color value.
@@ -107,7 +107,7 @@
// If the color is vibrant, black is used as the active foreground color.
{
"color": "#50fa7b",
"name": "Green (default)",
"name": "Green",
"vibrant": true
},
{