diff --git a/README.md b/README.md
index 505282c90..fa383ffcc 100644
--- a/README.md
+++ b/README.md
@@ -360,13 +360,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses
-[](https://postwoman.io)
+[](https://postwoman.io)
Default
```
-[](https://postwoman.io)
+[](https://postwoman.io)
```
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index dbd011504..cc02e327a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -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;
@@ -548,11 +550,31 @@ code {
border-radius: 8px;
}
+.select-wrapper {
+ position: relative;
+
+ &:after {
+ display: inline-block;
+ position: absolute;
+ pointer-events: none;
+ content: "\e313";
+ font-family: "Material Icons";
+ top: 14px;
+ right: 14px;
+ }
+}
+
select {
height: 37px;
- line-height: 37px;
background-color: var(--bg-dark-color);
cursor: pointer;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ &::-ms-expand {
+ display: none;
+ }
}
option {
@@ -781,18 +803,23 @@ input[type="radio"]:checked + label + .tab {
}
.toasted-container .toasted {
- justify-content: start !important;
+ justify-content: flex-start !important;
}
.toasted.info {
background-color: var(--ac-color) !important;
color: var(--act-color) !important;
+ font-weight: 700 !important;
}
.toasted.bubble .action {
color: inherit !important;
}
+.toasted .action {
+ margin-left: auto !important;
+}
+
.page-columns {
display: flex;
flex: 1;
@@ -824,6 +851,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 +865,7 @@ input[type="radio"]:checked + label + .tab {
a {
background-color: transparent;
+ margin: 8px;
&.nuxt-link-exact-active {
background-color: transparent;
@@ -889,7 +919,7 @@ input[type="radio"]:checked + label + .tab {
margin-left: 0;
}
- .toasted:last-child {
+ .toasted-container {
margin-bottom: 68px;
}
}
diff --git a/assets/css/themes.scss b/assets/css/themes.scss
index 73db76fa3..f0dc2058a 100644
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -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 {
diff --git a/components/ace-editor.vue b/components/ace-editor.vue
index 5da155019..3f2745147 100644
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -3,7 +3,7 @@