From a31f9d5a507b66ed08791ac6a121ae42064d8d09 Mon Sep 17 00:00:00 2001 From: antelle Date: Sat, 28 Nov 2020 23:38:12 +0100 Subject: [PATCH] new themes --- app/index.html | 1 - app/scripts/comp/settings/settings-manager.js | 14 +-- app/scripts/framework/views/resizable.js | 4 +- app/scripts/locales/base.json | 4 +- app/scripts/models/app-settings-model.js | 6 ++ app/scripts/models/menu/menu-item-model.js | 3 +- app/scripts/models/menu/menu-model.js | 44 ++++++++- app/scripts/views/menu/menu-view.js | 1 - .../views/settings/settings-logs-view.js | 2 + app/scripts/views/settings/settings-view.js | 16 ++- app/styles/areas/_app.scss | 9 +- app/styles/areas/_auto-type.scss | 6 +- app/styles/areas/_details.scss | 80 +++++++-------- app/styles/areas/_footer.scss | 10 +- app/styles/areas/_grp.scss | 2 +- app/styles/areas/_list.scss | 27 +++-- app/styles/areas/_menu.scss | 13 ++- app/styles/areas/_open.scss | 23 +++-- app/styles/areas/_settings.scss | 22 ++--- app/styles/areas/_tag.scss | 2 +- app/styles/base/_base.scss | 1 + app/styles/base/_buttons.scss | 44 ++++++++- app/styles/base/_colors.scss | 50 ++++++---- app/styles/base/_forms.scss | 8 +- app/styles/base/_icon-font.scss | 2 +- app/styles/base/_properties.scss | 7 ++ app/styles/base/_theme-vars.scss | 11 ++- app/styles/base/_variables.scss | 30 ++---- app/styles/common/_dropdown.scss | 14 ++- app/styles/common/_icon-select.scss | 9 +- app/styles/common/_scroll.scss | 6 +- app/styles/common/_tip.scss | 1 - app/styles/themes/_all-themes.scss | 4 +- app/styles/themes/_dark.scss | 26 +++++ app/styles/themes/_high-contrast.scss | 26 +++-- app/styles/themes/_light.scss | 31 ++++++ app/styles/themes/_macos-dark.scss | 98 ------------------- app/styles/themes/_solarized-dark.scss | 23 +++-- app/styles/themes/_solarized-light.scss | 4 + app/styles/themes/_terminal.scss | 2 +- app/styles/themes/_theme-defaults.scss | 10 +- app/styles/themes/_white.scss | 16 --- app/styles/utils/_common-dropdown.scss | 4 +- app/styles/utils/_selection.scss | 37 ++++--- app/templates/settings/settings-general.hbs | 13 +-- app/templates/settings/settings-logs-view.hbs | 2 +- desktop/app.js | 23 ++++- release-notes.md | 1 + 48 files changed, 444 insertions(+), 348 deletions(-) create mode 100644 app/styles/base/_properties.scss create mode 100644 app/styles/themes/_dark.scss create mode 100644 app/styles/themes/_light.scss delete mode 100644 app/styles/themes/_macos-dark.scss delete mode 100644 app/styles/themes/_white.scss diff --git a/app/index.html b/app/index.html index 90d2ea6c..f5af9960 100644 --- a/app/index.html +++ b/app/index.html @@ -19,7 +19,6 @@ " /> - ({ level: item.level, + color: this.levelToColor[item.level], msg: '[' + StringFormat.padStr(item.level.toUpperCase(), 5) + diff --git a/app/scripts/views/settings/settings-view.js b/app/scripts/views/settings/settings-view.js index f4fc1685..be77ef45 100644 --- a/app/scripts/views/settings/settings-view.js +++ b/app/scripts/views/settings/settings-view.js @@ -32,7 +32,7 @@ class SettingsView extends View { } setPage(e) { - let { page, file } = e; + let { page, section, file } = e; if (page === 'file' && file && file.external) { page = 'file-external'; } @@ -48,6 +48,20 @@ class SettingsView extends View { this.file = file; this.page = page; this.pageResized(); + this.scrollToSection(section); + } + + scrollToSection(section) { + let scrollEl; + if (section) { + scrollEl = this.views.page.el.querySelector(`#${section}`); + } + if (!scrollEl) { + scrollEl = this.views.page.el.querySelector(`h1`); + } + if (scrollEl) { + scrollEl.scrollIntoView(true); + } } returnToApp() { diff --git a/app/styles/areas/_app.scss b/app/styles/areas/_app.scss index 64e0b5df..6e400bda 100644 --- a/app/styles/areas/_app.scss +++ b/app/styles/areas/_app.scss @@ -31,7 +31,8 @@ &__menu { flex: 0 0 auto; display: flex; - width: 150px; + width: 15em; + background-color: var(--secondary-background-color); @include mobile { &:not(.menu-visible) { display: none; @@ -92,11 +93,14 @@ } &__list { - flex: 0 0 250px; + flex: 0 0 25em; display: flex; align-items: stretch; flex-direction: column; overflow-y: auto; + .titlebar-hidden & { + padding-top: $titlebar-padding-tiny; + } @include mobile { flex: 1 1; .app--details-visible & { @@ -134,6 +138,7 @@ &__footer { flex: 0 0 auto; border-top: light-border(); + background-color: var(--secondary-background-color); } &__beta { diff --git a/app/styles/areas/_auto-type.scss b/app/styles/areas/_auto-type.scss index d10fa5b7..15d31223 100644 --- a/app/styles/areas/_auto-type.scss +++ b/app/styles/areas/_auto-type.scss @@ -9,7 +9,7 @@ box-sizing: border-box; z-index: $z-index-no-modal; opacity: 1; - padding: $base-padding; + padding: $medium-padding; .titlebar-hidden & { padding-top: $titlebar-padding-small; @@ -108,10 +108,10 @@ } } &__item { - @include area-selectable(right); + @include area-selectable(); &--active, &--active:hover { - @include area-selected(right); + @include area-selected(); cursor: pointer; } &--active { diff --git a/app/styles/areas/_details.scss b/app/styles/areas/_details.scss index 8dc22902..294c8e36 100644 --- a/app/styles/areas/_details.scss +++ b/app/styles/areas/_details.scss @@ -38,12 +38,10 @@ padding: 3px 6px 1px; overflow: hidden; text-overflow: ellipsis; - border-radius: $base-border-radius; + border-radius: var(--input-border-radius); border: 1px solid transparent; - height: 36px; - line-height: 34px; - position: relative; - top: -2px; + height: 1.4em; + line-height: 1.4em; white-space: nowrap; &:hover { transition: border-color $base-duration $base-timing; @@ -54,34 +52,38 @@ } } input.details__header-title-input { - height: 42px; - line-height: 34px; + height: calc(1.4em + 6px); + line-height: 1.4em; user-select: text; flex: 1; margin: 0 6px; padding: 0 6px; font-size: $large-header-font-size; font-weight: bold; - position: relative; - top: -2px; min-width: 0; @include mobile { width: 100%; } } - &-color, - &-icon { + &-color { user-select: none; - @include area-selectable(); - display: inline; font-size: $large-header-font-size; - height: 1em; padding-top: 0.1em; } &-icon { - width: 1.4em; + @include area-selectable(); + user-select: none; + display: inline; + font-size: $large-header-font-size; + padding-top: 0.1em; + border-radius: var(--block-border-radius); + width: 1.8em; + height: 1.5em; text-align: center; } + &-icon-img { + vertical-align: middle; + } } &__colors-popup { @@ -92,8 +94,7 @@ border-radius: $base-border-radius; background: var(--background-color); box-shadow: 0 0 3px var(--background-color); - top: 13px; - left: 6px; + left: 0.2em; font-size: $large-header-font-size; &:hover, .details__header-color:hover & { @@ -102,7 +103,7 @@ } } &-item { - padding: 8px 12px; + padding: 0 12px 0; cursor: pointer; display: block; position: relative; @@ -116,8 +117,7 @@ content: $fa-var-bookmark; opacity: 0.3; position: absolute; - left: 12px; - top: 8px; + left: 0.4em; } } } @@ -230,7 +230,7 @@ color: transparent; } .details__field--editable & { - border-radius: $base-border-radius; + border-radius: var(--input-border-radius); &:hover { @include nomobile { transition: border-color $base-duration $base-timing; @@ -265,7 +265,7 @@ > textarea { margin: 0; padding: 0 $base-padding-h; - line-height: $details-field-line-height + 2px; + line-height: $details-field-line-height; width: 100%; height: 20px; .details__field--protected & { @@ -319,7 +319,7 @@ flex: 0 0 auto; } &-btn { - @include position(absolute, 0 0 null null); + @include position(absolute, -0.2em 0 null null); color: var(--muted-color); cursor: pointer; &:hover { @@ -445,7 +445,7 @@ align-self: flex-start; width: 2em; text-align: center; - padding-top: 0.25em; + padding-top: 0.1em; .details__field:hover & { opacity: 1; transition: opacity $slow-transition-in; @@ -483,36 +483,26 @@ } &__attachment { - user-select: none; - @include area-selectable(); + @include bg-btn(); align-self: flex-end; flex: 0 1 auto; - border: light-border(); margin-right: $small-spacing; margin-top: $small-spacing; - padding: $base-padding; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - i { - margin-right: 0.4em; - } - &--active { - border-bottom: 1px solid var(--action-color); + &--active, + &--active:hover { + @include bg-btn-active(); } } &__attachment-add { + @include icon-btn(); user-select: none; align-self: flex-end; flex: 0 0 auto; color: var(--muted-color); - border: 1px solid transparent; margin-right: $small-spacing; - padding: $base-padding; text-align: center; overflow: hidden; - transition: color $base-duration $base-timing; &:hover { color: var(--medium-color); } @@ -640,9 +630,8 @@ } &-item { position: absolute; - top: 4px; + top: 0; cursor: pointer; - transform: translateX(-48%); &:hover { color: var(--text-semi-muted-color); } @@ -721,10 +710,9 @@ padding: $base-padding; display: inline-block; word-break: break-all; - @include area-selectable(bottom); + @include area-selectable(); &--selected { background-color: var(--secondary-background-color); - border-bottom: selected-hover-border(); } } } @@ -734,6 +722,12 @@ float: right; cursor: pointer; user-select: none; + &-post { + margin-left: $tiny-spacing; + margin-right: $small-spacing; + position: relative; + top: 0.2em; + } &-pre, &-post { display: none; diff --git a/app/styles/areas/_footer.scss b/app/styles/areas/_footer.scss index 62f79c26..087c30e5 100644 --- a/app/styles/areas/_footer.scss +++ b/app/styles/areas/_footer.scss @@ -9,7 +9,7 @@ &__db { flex: 0 0 auto; - @include area-selectable(top); + @include area-selectable-on-secondary(); position: relative; padding: $medium-padding; padding-right: 1.3em; @@ -22,6 +22,9 @@ color: var(--medium-color); } } + &:first-of-type { + padding-left: $base-spacing; + } &--expanded { flex: 1; @@ -64,7 +67,7 @@ &__btn { flex: 0 0 auto; - @include area-selectable(top); + @include area-selectable-on-secondary(); padding: $base-padding; .standalone & { padding-top: $base-padding-v; @@ -73,6 +76,9 @@ font-size: 1.4em; text-align: center; width: 1em; + &:last-of-type { + padding-right: $base-spacing; + } } &__update-icon { diff --git a/app/styles/areas/_grp.scss b/app/styles/areas/_grp.scss index 14388a1b..83c48c60 100644 --- a/app/styles/areas/_grp.scss +++ b/app/styles/areas/_grp.scss @@ -17,7 +17,7 @@ &__content, &__buttons { - padding: $base-padding; + padding: $medium-padding; } &__icon { diff --git a/app/styles/areas/_list.scss b/app/styles/areas/_list.scss index 1f767b4c..ac46ba67 100644 --- a/app/styles/areas/_list.scss +++ b/app/styles/areas/_list.scss @@ -49,6 +49,7 @@ } &-field { width: 100%; + height: 2.5em; @include mobile { font-size: 1.05em !important; box-shadow: none !important; @@ -71,11 +72,12 @@ top: 0.5em; } } - &-btn-new { - @include icon-btn; - } + &-btn-new, &-btn-sort { @include icon-btn; + height: 2.5em; + line-height: 2.3em; + padding: 0 $base-padding-h; } &-btn-menu { display: none; @@ -98,6 +100,7 @@ flex-wrap: wrap; &-text { flex: 100%; + padding: $base-padding-v 0; } } &-check { @@ -127,15 +130,15 @@ } &__item { - padding: 6px 10px 0; + padding: $base-padding; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @include nomobile { - @include area-selectable(right); + @include area-selectable(); &--active, &--active:hover { - @include area-selected(right); + @include area-selected(); } } @include mobile { @@ -147,7 +150,8 @@ } &:not(.list__item--table) { - height: 3rem; + border-radius: var(--block-border-radius); + margin: 0 $small-spacing; } &--expired { @@ -158,9 +162,12 @@ } &-icon { - margin-right: 2px; + margin-right: 0.2em; width: 14px; height: 14px; + vertical-align: top; + position: relative; + top: -1px; @include mobile { margin-right: 4px; } @@ -197,6 +204,10 @@ display: block; text-overflow: ellipsis; overflow: hidden; + margin-bottom: $tiny-spacing; + .list__item--active & { + color: var(--selected-item-text-color); + } } } } diff --git a/app/styles/areas/_menu.scss b/app/styles/areas/_menu.scss index 8fb6c214..207759a0 100644 --- a/app/styles/areas/_menu.scss +++ b/app/styles/areas/_menu.scss @@ -12,6 +12,7 @@ @include scrollbar-on-hover; position: relative; overflow: hidden; + padding: $small-spacing 0; &--grow { flex: 1; @@ -71,19 +72,17 @@ } &-body { - @include area-selectable(); + @include area-selectable-on-secondary(); padding: $base-padding; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - border-right: selected-transparent-border(); - .menu__item--hover > & { - border-right: selected-hover-border(); - } + border-radius: var(--block-border-radius); + margin: 0 $small-spacing; .menu__item--active > &, .menu__item--active.menu__item--hover > & { - @include area-selected(right); + @include area-selected-on-secondary(); } .menu__item > .menu__item > & { @@ -164,7 +163,7 @@ top: 0.55em; cursor: pointer; transition: opacity $base-duration $base-timing, color $base-duration $base-timing; - color: var(--muted-color); + color: var(--clickable-on-secondary-color); &:hover { color: var(--medium-color); } diff --git a/app/styles/areas/_open.scss b/app/styles/areas/_open.scss index 9023b321..3c952fdc 100644 --- a/app/styles/areas/_open.scss +++ b/app/styles/areas/_open.scss @@ -24,16 +24,15 @@ } &__icon { - text-align: center; - cursor: pointer; - margin: 20px; - transition: color $base-duration $base-timing; + @include icon-btn(); + padding-top: 0; + margin: 0.2em 0.5em; &:hover { color: var(--medium-color); } &:focus { .open--show-focus & { - outline: focused-outline(); + box-shadow: focused-box-shadow(); } } &-i { @@ -91,15 +90,17 @@ padding: 0.6em $base-spacing; position: absolute; left: 100%; + border-radius: var(--block-border-radius); @include mobile { left: auto; right: 0; } color: var(--muted-color); line-height: 3em; - height: 3em; + height: 3.2em; > i { font-size: 3em; + line-height: 1; @include mobile { line-height: 0.8; } @@ -108,7 +109,7 @@ .open--show-focus & { &-enter-btn:focus, &-opening-icon:focus { - outline: focused-outline(); + box-shadow: focused-box-shadow(); } } &-enter-btn { @@ -197,6 +198,7 @@ padding-left: $base-padding-h; height: 2em; &-key-file { + border-radius: var(--block-border-radius); .open--file:not(.open--opening) & { cursor: pointer; } @@ -228,7 +230,7 @@ } &:focus { .open--show-focus & { - outline: focused-outline(); + box-shadow: focused-box-shadow(); } } } @@ -291,9 +293,10 @@ } color: var(--muted-color); padding: $base-padding; + border-radius: var(--block-border-radius); &:focus { .open--show-focus & { - outline: focused-outline(); + box-shadow: focused-box-shadow(); } } &-icon { @@ -362,7 +365,7 @@ &__file { cursor: pointer; padding: $base-padding; - border-radius: $base-border-radius; + border-radius: var(--block-border-radius); box-sizing: border-box; flex-basis: 100%; @include nomobile { diff --git a/app/styles/areas/_settings.scss b/app/styles/areas/_settings.scss index 12d9934a..22860452 100644 --- a/app/styles/areas/_settings.scss +++ b/app/styles/areas/_settings.scss @@ -10,7 +10,7 @@ position: relative; &__content { - margin: $base-padding; + margin: $medium-padding; } > .scroller { @@ -192,9 +192,9 @@ color: var(--text-color); cursor: pointer; body & { - --focus-shadow-blur: unset; --focus-shadow-spread: unset; --form-box-shadow-color-focus: unset; + --form-box-shadow-color-hover: unset; } &-name { border-bottom: light-border(); @@ -205,9 +205,10 @@ margin-bottom: $base-padding-v; } &:hover { - box-shadow: form-box-shadow-focus(); + box-shadow: form-box-shadow-hover(); } - &--selected { + &--selected, + &--selected:hover { border: 1px solid var(--action-color); box-shadow: form-box-shadow-focus(); } @@ -219,17 +220,6 @@ &-log { margin: 0; white-space: pre-wrap; - &--debug { - opacity: 0.8; - } - &--info { - } - &--warn { - color: $yellow; - } - &--error { - color: $red; - } } } &__plugins { @@ -331,6 +321,8 @@ } &__head-icon { + position: relative; + top: .1em; margin-right: 0.2em; } } diff --git a/app/styles/areas/_tag.scss b/app/styles/areas/_tag.scss index 6edd55d8..50daea48 100644 --- a/app/styles/areas/_tag.scss +++ b/app/styles/areas/_tag.scss @@ -6,7 +6,7 @@ justify-content: flex-start; width: 100%; user-select: none; - padding: $base-padding; + padding: $medium-padding; &__space { flex: 1; diff --git a/app/styles/base/_base.scss b/app/styles/base/_base.scss index cf987f6e..12162e25 100644 --- a/app/styles/base/_base.scss +++ b/app/styles/base/_base.scss @@ -6,6 +6,7 @@ @import 'override-mixins'; @import 'colors'; @import 'variables'; +@import 'properties'; @import 'media'; @import 'icon-font'; @import 'body'; diff --git a/app/styles/base/_buttons.scss b/app/styles/base/_buttons.scss index 275b075d..3a3303a5 100644 --- a/app/styles/base/_buttons.scss +++ b/app/styles/base/_buttons.scss @@ -73,15 +73,49 @@ } @mixin icon-btn($error: false) { - @include area-selectable(bottom); - padding: 0.7em 0.6em 0; - height: 1.6em; + @include area-selectable(); + padding: $medium-padding; + text-align: center; + border-radius: var(--block-border-radius); + transition: color $base-duration $base-timing; > i { - display: block; + vertical-align: middle; } @if $error { &:hover { - border-color: var(--error-color); + color: var(--error-color); } } } + +@mixin bg-btn() { + user-select: none; + cursor: pointer; + -webkit-app-region: no-drag; + padding: $medium-padding; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + border-radius: var(--block-border-radius); + background-color: var(--intermediate-background-color); + transition: color $base-duration $base-timing; + > i { + margin-right: 0.4em; + line-height: inherit; + vertical-align: bottom; + } + &:hover { + background-color: var(--intermediate-background-color); + color: var(--medium-color); + transform: background-color $base-duration $base-timing; + } + &:active { + background-color: var(--intermediate-pressed-background-color); + color: var(--text-color); + } +} + +@mixin bg-btn-active() { + color: var(--selected-item-text-color); + background-color: var(--selected-item-color); +} diff --git a/app/styles/base/_colors.scss b/app/styles/base/_colors.scss index b4b9e514..b6eaa41d 100644 --- a/app/styles/base/_colors.scss +++ b/app/styles/base/_colors.scss @@ -1,26 +1,34 @@ -$black: #111; -$white: #d8e5f1; -$red: #df3c06; -$orange: #fbac45; -$yellow: #e9d92a; -$green: #0dc94b; -$blue: #4e6af8; -$violet: #d946db; - -$all-colors: ( - 'white': $white, - 'black': $black, - 'red': $red, - 'orange': $orange, - 'yellow': $yellow, - 'green': $green, - 'blue': $blue, - 'violet': $violet +$dark-colors: ( + white-color: #d8e5f1, + black-color: #111, + red-color: #ed5f5e, + orange-color: #e8873a, + yellow-color: #f7c644, + green-color: #78b756, + blue-color: #2f7cf7, + violet-color: #e55d9c ); -@each $col, $val in $all-colors { - .#{$col}-color { - color: #{$val}; +$light-colors: ( + white-color: #d8e5f1, + black-color: #111, + red-color: #d04745, + orange-color: #e9873a, + yellow-color: #f7c84e, + green-color: #79b656, + blue-color: #2f7cf7, + violet-color: #e55d9c +); + +body { + @each $name, $value in $dark-colors { + --#{$name}: #{$value}; + } +} + +@each $name in map-keys($dark-colors) { + .#{$name} { + color: var(--#{$name}); } } .muted-color { diff --git a/app/styles/base/_forms.scss b/app/styles/base/_forms.scss index 0e2ff33f..09d94bbf 100644 --- a/app/styles/base/_forms.scss +++ b/app/styles/base/_forms.scss @@ -72,7 +72,7 @@ input:not([type]) { } &:focus { - border-color: var(--form-box-border-focus); + border-color: var(--form-box-border-color-focus); box-shadow: form-box-shadow-focus(); outline: none; } @@ -152,7 +152,7 @@ select { border-color: var(--accent-border-color); } &:focus { - border-color: var(--form-box-border-focus); + border-color: var(--form-box-border-color-focus); box-shadow: form-box-shadow-focus(); outline: none; } @@ -186,7 +186,9 @@ input[type='checkbox'] { width: 1.3em; color: var(--text-color); font-size: 1.2em; - vertical-align: text-bottom; + vertical-align: bottom; + position: relative; + top: 0.08em; } &:checked + label:before { content: $fa-var-check-square-o; diff --git a/app/styles/base/_icon-font.scss b/app/styles/base/_icon-font.scss index 0ddb7949..c74e55d9 100644 --- a/app/styles/base/_icon-font.scss +++ b/app/styles/base/_icon-font.scss @@ -12,7 +12,7 @@ text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; - line-height: 1; + line-height: $base-line-height; } .fa { diff --git a/app/styles/base/_properties.scss b/app/styles/base/_properties.scss new file mode 100644 index 00000000..f750c286 --- /dev/null +++ b/app/styles/base/_properties.scss @@ -0,0 +1,7 @@ +body { + --focus-shadow-spread: 3px; + --button-border-radius: 3px; + --input-border-radius: 4px; + --block-border-radius: 5px; + --selected-item-text-color: var(--text-color); +} diff --git a/app/styles/base/_theme-vars.scss b/app/styles/base/_theme-vars.scss index 1e47ae73..7cd509ae 100644 --- a/app/styles/base/_theme-vars.scss +++ b/app/styles/base/_theme-vars.scss @@ -14,8 +14,9 @@ base-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 50%), accent-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 65%), light-border-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, light-border-percent)), - form-box-border-focus: map-get($t, action-color), - form-box-shadow-color-focus: lightness-alpha(map-get($t, action-color), -5%, -0.3), + form-box-border-color-focus: mix(map-get($t, action-color), map-get($t, text-color), 70%), + form-box-shadow-color-focus: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.7), + form-box-shadow-color-hover: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.5), form-box-shadow-color-focus-error: lightness-alpha(map-get($t, error-color), -5%, -0.3), dropdown-box-shadow-color: rgba(map-get($t, medium-color), 0.05), secondary-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 10%), @@ -31,7 +32,11 @@ error-background-color-active: shade(map-get($t, error-color), 25%), error-background-color-active-tr: rgba(shade(map-get($t, error-color), 25%), 0.15), modal-background-color: rgba(map-get($t, background-color), map-get($t, modal-opacity)), - modal-background-color-tr: rgba(map-get($t, background-color), 0) + modal-background-color-tr: rgba(map-get($t, background-color), 0), + selected-item-color: mix(map-get($t, action-color), map-get($t, background-color), 85%), + selected-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 30%), + selectable-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 14%), + clickable-on-secondary-color: mix(map-get($t, medium-color), map-get($t, background-color), 75%), ) ); } diff --git a/app/styles/base/_variables.scss b/app/styles/base/_variables.scss index ed884ce8..b417a659 100644 --- a/app/styles/base/_variables.scss +++ b/app/styles/base/_variables.scss @@ -7,14 +7,14 @@ $monospace-font-family: 'SFMono-Regular', Monaco, Consolas, 'Lucida Console', mo // Font Sizes $base-font-size: 12px; -$large-pass-font-size: 22px; +$large-pass-font-size: 2em; // Line height $base-line-height: 1.5; $heading-line-height: 1.2; // Other Sizes -$base-border-radius: 1px; +$base-border-radius: 2px; $base-spacing: $base-line-height * 1em; $small-spacing: $base-spacing / 2; $tiny-spacing: $small-spacing / 2; @@ -29,6 +29,7 @@ $medium-padding: $medium-padding-v $medium-padding-h; $base-padding-px: 5px 10px; $modal-icon-size: 6em; $large-padding: 2em; +$titlebar-padding-tiny: 8px; $titlebar-padding-small: 24px; $titlebar-padding-large: 40px; @@ -39,20 +40,8 @@ $titlebar-padding-large: 40px; @function light-border() { @return 1px solid var(--light-border-color); } -@function selected-border-width() { - @return var(--selected-border-width); -} -@function selected-border() { - @return selected-border-width() solid var(--action-color); -} -@function selected-hover-border() { - @return var(--accent-border-width) solid var(--action-color); -} -@function selected-transparent-border() { - @return var(--accent-border-width) solid transparent; -} -@function focused-outline() { - @return 1px solid var(--action-color); +@function focused-box-shadow() { + @return 0 0 0 1px var(--action-color); } // Forms @@ -60,13 +49,14 @@ $titlebar-padding-large: 40px; @return inset 0 1px 3px rgba(0, 0, 0, 0.06); } @function form-box-shadow-focus() { - @return form-box-shadow(), - 0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus); + @return form-box-shadow(), 0 0 0 var(--focus-shadow-spread) var(--form-box-shadow-color-focus); +} +@function form-box-shadow-hover() { + @return form-box-shadow(), 0 0 0 var(--focus-shadow-spread) var(--form-box-shadow-color-hover); } @function form-box-shadow-focus-error() { @return form-box-shadow(), - 0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) - var(--form-box-shadow-color-focus-error); + 0 0 0 var(--focus-shadow-spread) var(--form-box-shadow-color-focus-error); } // Shadows diff --git a/app/styles/common/_dropdown.scss b/app/styles/common/_dropdown.scss index f29c94e3..c2b777d3 100644 --- a/app/styles/common/_dropdown.scss +++ b/app/styles/common/_dropdown.scss @@ -1,23 +1,29 @@ .dropdown { position: absolute; z-index: $z-index-no-modal; - border-radius: $base-border-radius; + border-radius: var(--block-border-radius); background: var(--background-color); border: light-border(); box-shadow: dropdown-box-shadow(); + padding: $small-spacing; &__item { padding: 8px 12px; cursor: pointer; white-space: nowrap; + border-radius: var(--block-border-radius); &--active, &--active:hover { - @include area-selected(right); + @include area-selected(); } @include nomobile { - @include area-selectable(right); + @include area-selectable(); + &:hover { + color: var(--text-color); + background-color: var(--action-color); + } &--active, &--active:hover { - @include area-selected(right); + @include area-selected(); } } &-icon { diff --git a/app/styles/common/_icon-select.scss b/app/styles/common/_icon-select.scss index 7cdcd904..8b70564f 100644 --- a/app/styles/common/_icon-select.scss +++ b/app/styles/common/_icon-select.scss @@ -13,13 +13,12 @@ } } &__icon { - @include area-selectable(bottom); + @include icon-btn(); + font-size: 1.6em; width: 26px; - text-align: center; - font-size: 20px; - padding: 10px; + padding: $base-padding-v; &.icon-select__icon--active { - @include area-selected(bottom); + @include area-selected(); } &-btn { padding: 5px 10px; diff --git a/app/styles/common/_scroll.scss b/app/styles/common/_scroll.scss index f7bf2901..f0e36744 100644 --- a/app/styles/common/_scroll.scss +++ b/app/styles/common/_scroll.scss @@ -10,13 +10,13 @@ z-index: 3; top: 10px; bottom: 10px; - right: 5px; - width: 8px; + right: 1px; + width: 7px; } &__bar { position: absolute; z-index: 1; - width: 8px; + width: 7px; border-radius: 3px; pointer-events: auto; -webkit-app-region: no-drag; diff --git a/app/styles/common/_tip.scss b/app/styles/common/_tip.scss index 6b64052d..2a26edde 100644 --- a/app/styles/common/_tip.scss +++ b/app/styles/common/_tip.scss @@ -1,7 +1,6 @@ .tip { position: absolute; padding: $base-padding; - border-radius: $base-border-radius; white-space: nowrap; z-index: $z-index-no-modal; pointer-events: none; diff --git a/app/styles/themes/_all-themes.scss b/app/styles/themes/_all-themes.scss index 4b0624af..6ea2009d 100644 --- a/app/styles/themes/_all-themes.scss +++ b/app/styles/themes/_all-themes.scss @@ -1,14 +1,14 @@ $themes: (); @import 'theme-defaults'; +@import 'dark'; +@import 'light'; @import 'dark-brown'; @import 'flat-blue'; -@import 'white'; @import 'terminal'; @import 'high-contrast'; @import 'solarized-dark'; @import 'solarized-light'; -@import 'macos-dark'; @each $theme-name, $theme-vars in $themes { $theme-vars: set-theme-vars($theme-vars); diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss new file mode 100644 index 00000000..e60e4289 --- /dev/null +++ b/app/styles/themes/_dark.scss @@ -0,0 +1,26 @@ +$themes: map-merge( + $themes, + ( + dark: + map-merge( + $theme-defaults, + ( + background-color: #1e1e1e, + medium-color: #b7b7b8, + text-color: #f7f7f7, + action-color: #317ef6, + error-color: #ec655a + ) + ) + ) +); + +body.th-dark { + --form-box-border-color-focus: #407091; + --form-box-shadow-color-focus: #3a698b; + --form-box-shadow-color-hover: rgba(58, 105, 139, 0.8); + --light-border-color: rgb(68, 68, 69, 0.7); + --secondary-background-color: #2d2d2e; + --selected-item-color: #2463c8; + --selected-on-secondary-item-color: #403f40; +} diff --git a/app/styles/themes/_high-contrast.scss b/app/styles/themes/_high-contrast.scss index 46ffafb9..a75c429e 100644 --- a/app/styles/themes/_high-contrast.scss +++ b/app/styles/themes/_high-contrast.scss @@ -4,16 +4,24 @@ $themes: map-merge( hc: map-merge( $theme-defaults, - ( - background-color: #fafafa, - medium-color: #050505, - text-color: #050505, - action-color: #2d72d7, - error-color: #e74859, - mute-percent: 60%, - light-border-percent: 50%, - modal-opacity: 1 + map-merge( + $light-colors, + ( + background-color: #fafafa, + medium-color: #050505, + text-color: #050505, + action-color: #1e5db8, + error-color: #e74859, + mute-percent: 60%, + light-border-percent: 50%, + modal-opacity: 1 + ) ) ) ) ); + +body.th-hc { + --selected-item-color: #1e5db8; + --selected-item-text-color: #fafafa; +} diff --git a/app/styles/themes/_light.scss b/app/styles/themes/_light.scss new file mode 100644 index 00000000..8ebd54a2 --- /dev/null +++ b/app/styles/themes/_light.scss @@ -0,0 +1,31 @@ +$themes: map-merge( + $themes, + ( + light: + map-merge( + $theme-defaults, + map-merge( + $light-colors, + ( + background-color: #f6f6f6, + medium-color: #4c4c4c, + text-color: #303030, + action-color: #3063d4, + error-color: #ec655a, + mute-percent: 50% + ) + ) + ) + ) +); + +body.th-light { + --form-box-border-color-focus: #8aacec; + --form-box-shadow-color-focus: #90b2f2; + --form-box-shadow-color-hover: rgb(144, 178, 242, 0.8); + --light-border-color: #dedede; + --secondary-background-color: #efefef; + --selected-item-color: #2366d9; + --selected-on-secondary-item-color: #d6d6d6; + --selected-item-text-color: #f6f6f6; +} diff --git a/app/styles/themes/_macos-dark.scss b/app/styles/themes/_macos-dark.scss deleted file mode 100644 index c09841c0..00000000 --- a/app/styles/themes/_macos-dark.scss +++ /dev/null @@ -1,98 +0,0 @@ -$themes: map-merge( - $themes, - ( - macdark: - map-merge( - $theme-defaults, - ( - background-color: #1f1f20, - medium-color: #b7b7b8, - text-color: #f7f7f7, - action-color: #3063d4, - error-color: #ec655a, - focus-shadow-blur: 0, - focus-shadow-spread: 3px, - button-border-radius: 2px, - input-border-radius: 3px, - selected-border-width: 0, - accent-border-width: 0 - ) - ) - ) -); - -body.th-macdark { - --light-border-color: rgb(68, 68, 69, 0.7); - --secondary-background-color: #2d2d2e; - --form-box-border-focus: #6697c0; - --form-box-shadow-color-focus: #44749d; - --selected-item-color: #2457c9; - .app__menu { - background-color: var(--secondary-background-color); - .menu__item.menu__item--active > .menu__item-body, - .menu__item.menu__item--active.menu__item--hover > .menu__item-body { - background-color: #515152; - } - .menu__item-edit, - .menu__item-empty-trash { - right: 0.5em; - } - .menu__item-edit:not(:hover), - .menu__item-empty-trash:not(:hover) { - color: #8f8f91; - } - } - .app__footer { - background-color: var(--secondary-background-color); - } - .at-select__table .at-select__item { - border-right-width: 0; - } - .at-select__table .at-select__item.at-select__item--active { - background-color: var(--selected-item-color); - } - .at-select__item--active .at-select__item-options:hover { - background: var(--secondary-background-color); - } - .dropdown__item--active, - .dropdown__item--active:hover { - background-color: var(--selected-item-color); - } - @include nomobile { - .list__item--active, - .list__item--active:hover { - background-color: var(--selected-item-color); - .list__item-descr { - color: #8f8f91; - } - } - input, - textarea, - select { - background-color: rgba(108, 108, 109, 0.025); - } - input:focus, - textarea:focus, - select:focus { - background-color: rgba(108, 108, 109, 0.05); - } - } - .yellow-color { - color: #e0c24c; - } - .red-color { - color: #ec655a; - } - .orange-color { - color: #e78f42; - } - .green-color { - color: #71bf47; - } - .blue-color { - color: #3062d1; - } - .violet-color { - color: #e55c9c; - } -} diff --git a/app/styles/themes/_solarized-dark.scss b/app/styles/themes/_solarized-dark.scss index 8325e2c4..8bce65a2 100644 --- a/app/styles/themes/_solarized-dark.scss +++ b/app/styles/themes/_solarized-dark.scss @@ -4,15 +4,22 @@ $themes: map-merge( sd: map-merge( $theme-defaults, - ( - background-color: #002b36, - medium-color: #93a1a1, - text-color: #839496, - action-color: #859900, - error-color: #dc322f, - mute-percent: 60%, - color-lightness-shift: 50% + map-merge( + $light-colors, + ( + background-color: #002b36, + medium-color: #93a1a1, + text-color: #839496, + action-color: #859900, + error-color: #dc322f, + mute-percent: 60%, + color-lightness-shift: 50% + ) ) ) ) ); + +body.th-sd { + --selected-item-text-color: #002b36; +} diff --git a/app/styles/themes/_solarized-light.scss b/app/styles/themes/_solarized-light.scss index 51f34bd6..2319886e 100644 --- a/app/styles/themes/_solarized-light.scss +++ b/app/styles/themes/_solarized-light.scss @@ -15,3 +15,7 @@ $themes: map-merge( ) ) ); + +body.th-sl { + --selected-item-text-color: #fdf6e3; +} diff --git a/app/styles/themes/_terminal.scss b/app/styles/themes/_terminal.scss index 5e6f9b86..e9aec619 100644 --- a/app/styles/themes/_terminal.scss +++ b/app/styles/themes/_terminal.scss @@ -8,7 +8,7 @@ $themes: map-merge( background-color: #222, medium-color: #999, text-color: #eee, - action-color: #22d66d, + action-color: #13a453, error-color: #c34034 ) ) diff --git a/app/styles/themes/_theme-defaults.scss b/app/styles/themes/_theme-defaults.scss index eb056701..e45ed3c3 100644 --- a/app/styles/themes/_theme-defaults.scss +++ b/app/styles/themes/_theme-defaults.scss @@ -1,12 +1,6 @@ $theme-defaults: ( mute-percent: 30%, - light-border-percent: 10%, + light-border-percent: 20%, modal-opacity: 0.9, - color-lightness-shift: 0, - focus-shadow-blur: 3px, - focus-shadow-spread: 0, - button-border-radius: 1px, - input-border-radius: 1px, - selected-border-width: 3px, - accent-border-width: 1px + color-lightness-shift: 0 ); diff --git a/app/styles/themes/_white.scss b/app/styles/themes/_white.scss deleted file mode 100644 index d178706f..00000000 --- a/app/styles/themes/_white.scss +++ /dev/null @@ -1,16 +0,0 @@ -$themes: map-merge( - $themes, - ( - wh: - map-merge( - $theme-defaults, - ( - background-color: #fafafa, - medium-color: #050505, - text-color: #424243, - action-color: #475fd7, - error-color: #e75675 - ) - ) - ) -); diff --git a/app/styles/utils/_common-dropdown.scss b/app/styles/utils/_common-dropdown.scss index c107d5ce..653900df 100644 --- a/app/styles/utils/_common-dropdown.scss +++ b/app/styles/utils/_common-dropdown.scss @@ -4,7 +4,5 @@ background: var(--background-color); border: 1px solid var(--light-border-color); box-shadow: dropdown-box-shadow(); - .edge & { - border-width: 1px !important; - } // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12132854/ + border-radius: var(--block-border-radius); } diff --git a/app/styles/utils/_selection.scss b/app/styles/utils/_selection.scss index f5a482d7..9eaa48b6 100644 --- a/app/styles/utils/_selection.scss +++ b/app/styles/utils/_selection.scss @@ -1,29 +1,36 @@ -@mixin area-selectable($border: false) { +@mixin area-selectable() { cursor: pointer; - border-radius: 0; -webkit-app-region: no-drag; - @if ($border) { - border-#{$border}: selected-transparent-border(); - } &:hover, &.sel--active { background-color: var(--intermediate-background-color); color: var(--medium-color); - @if ($border) { - border-#{$border}: selected-hover-border(); - } } &:active { background-color: var(--intermediate-pressed-background-color); } } -@mixin area-selected($border) { - cursor: default; - -webkit-app-region: no-drag; - border-#{$border}: selected-border(); - background-color: var(--secondary-background-color); - &:hover { - color: var(--text-color); +@mixin area-selectable-on-secondary() { + @include area-selectable(); + &:hover, + &.sel--active { + background-color: var(--selectable-on-secondary-item-color); } } + +@mixin area-selected() { + cursor: default; + -webkit-app-region: no-drag; + background-color: var(--selected-item-color); + color: var(--selected-item-text-color); + &:hover { + color: var(--selected-item-text-color); + } +} + +@mixin area-selected-on-secondary() { + @include area-selected(); + color: var(--text-color); + background-color: var(--selected-on-secondary-item-color); +} diff --git a/app/templates/settings/settings-general.hbs b/app/templates/settings/settings-general.hbs index d99fcedb..74c8779e 100644 --- a/app/templates/settings/settings-general.hbs +++ b/app/templates/settings/settings-general.hbs @@ -1,5 +1,5 @@
-

{{res 'setGenTitle'}}

+

{{res 'setGenTitle'}}

{{#if updateWaitingReload}}

{{res 'setGenUpdate'}}

@@ -36,7 +36,7 @@
{{/if}} -

{{res 'setGenAppearance'}}

+

{{res 'setGenAppearance'}}

{{#if locales}}
@@ -95,7 +95,7 @@
-

{{res 'setGenFunction'}}

+

{{res 'setGenFunction'}}

{{#if canAutoSaveOnClose}}
{{res 'setGenUseGroupIconForEntries'}}
-

{{res 'setGenLock'}}

+

{{res 'setGenLock'}}

{{res 'setGenStorageLogout'}}{{/if}} {{/each}} -

{{res 'advanced'}}

+

{{res 'advanced'}}

{{res 'setGenShowAdvanced'}}
{{#if devTools}} diff --git a/app/templates/settings/settings-logs-view.hbs b/app/templates/settings/settings-logs-view.hbs index ff05395c..2f7905a2 100644 --- a/app/templates/settings/settings-logs-view.hbs +++ b/app/templates/settings/settings-logs-view.hbs @@ -1,5 +1,5 @@
{{#each logs as |log|}} - 
{{msg}}
+ 
{{msg}}
{{/each}}
diff --git a/desktop/app.js b/desktop/app.js index b09a75c8..d9eebb96 100644 --- a/desktop/app.js +++ b/desktop/app.js @@ -56,14 +56,15 @@ const startMinimized = process.argv.some((arg) => arg.startsWith('--minimized')); const themeBgColors = { + dark: '#1e1e1e', + light: '#f6f6f6', db: '#342f2e', fb: '#282c34', wh: '#fafafa', te: '#222', hc: '#fafafa', sd: '#002b36', - sl: '#fdf6e3', - macdark: '#1f1f20' + sl: '#fdf6e3' }; const defaultBgColor = '#282C34'; @@ -222,12 +223,26 @@ function setSystemAppearance() { logProgress('setting system appearance'); } +function checkSettingsTheme(theme) { + // old settings migration + if (theme === 'macdark') { + return 'dark'; + } + if (theme === 'wh') { + return 'light'; + } + return theme; +} + function getDefaultTheme() { - return process.platform === 'darwin' ? 'macdark' : 'fb'; + if (process.platform === 'darwin' && !electron.nativeTheme.shouldUseDarkColors) { + return 'light'; + } + return 'dark'; } function createMainWindow() { - const theme = appSettings.theme || getDefaultTheme(); + const theme = checkSettingsTheme(appSettings.theme) || getDefaultTheme(); const bgColor = themeBgColors[theme] || defaultBgColor; const windowOptions = { show: false, diff --git a/release-notes.md b/release-notes.md index 60dea3cc..2837a591 100644 --- a/release-notes.md +++ b/release-notes.md @@ -2,6 +2,7 @@ Release notes ------------- ##### v1.16.0 (TBD) `+` updated icons and visual design +`+` new Dark (default) and Light themes `-` fixed a performance issue in searching entries `+` locale-aware date and time formats `*` improved the "Show all file" checkbox behavior