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

-[![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)

Default

``` -[![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) ```

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 @@