keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

new themes

This commit is contained in:
antelle 2020-11-28 23:38:12 +01:00
parent 33d5f0b5bb
commit a31f9d5a50
No known key found for this signature in database
GPG Key ID: 63C9777AAB7C563C
48 changed files with 444 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/index.html
View File

@ -19,7 +19,6 @@
"
/>
<meta name="application-name" content="KeeWeb" />
<meta name="kw-signature" content="" />
<meta name="kw-config" content="(no-config)" />
<meta
name="viewport"

14
app/scripts/comp/settings/settings-manager.js
View File

@ -2,12 +2,6 @@ import { Events } from 'framework/events';
import { Features } from 'util/features';
import { Locale } from 'util/locale';
const appleThemes = {
macdark: 'setGenThemeMacDark'
};
const extraThemes = Features.isMac || Features.isiOS ? appleThemes : {};
const SettingsManager = {
neutralLocale: null,
activeLocale: 'en-US',
@ -20,14 +14,14 @@ const SettingsManager = {
},
allThemes: {
dark: 'setGenThemeDark',
light: 'setGenThemeLight',
fb: 'setGenThemeFb',
db: 'setGenThemeDb',
sd: 'setGenThemeSd',
sl: 'setGenThemeSl',
wh: 'setGenThemeWh',
te: 'setGenThemeTe',
hc: 'setGenThemeHc',
...extraThemes
hc: 'setGenThemeHc'
},
customLocales: {},
@ -46,7 +40,7 @@ const SettingsManager = {
},
getDefaultTheme() {
return Features.isMac ? 'macdark' : 'fb';
return 'dark';
},
setTheme(theme) {

4
app/scripts/framework/views/resizable.js
View File

@ -25,7 +25,7 @@ const Resizable = {
if (dragInfo.auto !== undefined) {
this.$el.css(dragInfo.prop, dragInfo.auto);
} else {
this.$el.css(dragInfo.prop, 'auto');
this.$el.css(dragInfo.prop, '');
}
this.fixSize(dragInfo);
this.emit('view-resize', null);
@ -55,7 +55,7 @@ const Resizable = {
const propLower = prop.toLowerCase();
const min = this.getSizeProp('min' + prop);
const max = this.getSizeProp('max' + prop);
const auto = this.getSizeProp('auto' + prop) || 'auto';
const auto = this.getSizeProp('auto' + prop);
const startSize = this.$el[propLower]();
return { startSize, prop: propLower, min, max, auto };
},

4
app/scripts/locales/base.json
View File

@ -369,14 +369,14 @@
"setGenDownloadAndRestart": "Download update and restart",
"setGenAppearance": "Appearance",
"setGenTheme": "Theme",
"setGenThemeDark": "Dark",
"setGenThemeLight": "Light",
"setGenThemeFb": "Flat blue",
"setGenThemeDb": "Dark brown",
"setGenThemeWh": "White",
"setGenThemeTe": "Terminal",
"setGenThemeHc": "High contrast",
"setGenThemeSd": "Solarized dark",
"setGenThemeSl": "Solarized light",
"setGenThemeMacDark": "macOS Dark",
"setGenLocale": "Language",
"setGenLocOther": "other languages are available as plugins",
"setGenFontSize": "Font size",

6
app/scripts/models/app-settings-model.js
View File

@ -24,6 +24,12 @@ class AppSettingsModel extends Model {
if (data.locale === 'en') {
data.locale = 'en-US';
}
if (data.theme === 'macdark') {
data.theme = 'dark';
}
if (data.theme === 'wh') {
data.theme = 'light';
}
}
save() {

3
app/scripts/models/menu/menu-item-model.js
View File

@ -57,7 +57,8 @@ MenuItemModel.defineModelProperties({
defaultItem: false,
page: null,
editable: false,
file: null
file: null,
section: null
});
export { MenuItemModel };

44
app/scripts/models/menu/menu-model.js
View File

@ -66,7 +66,48 @@ class MenuModel extends Model {
]);
this.generalSection = new MenuSectionModel([
{ locTitle: 'menuSetGeneral', icon: 'cog', page: 'general', active: true }
{
locTitle: 'menuSetGeneral',
icon: 'cog',
page: 'general',
section: 'top',
active: true
},
{
locTitle: 'setGenAppearance',
icon: '0',
page: 'general',
section: 'appearance',
active: true
},
{
locTitle: 'setGenFunction',
icon: '0',
page: 'general',
section: 'function',
active: true
},
{
locTitle: 'setGenLock',
icon: '0',
page: 'general',
section: 'lock',
active: true
},
{
locTitle: 'setGenStorage',
icon: '0',
page: 'general',
section: 'storage',
active: true
},
{
locTitle: 'advanced',
icon: '0',
page: 'general',
section: 'advanced',
active: true
}
]);
this.shortcutsSection = new MenuSectionModel([
{ locTitle: 'shortcuts', icon: 'keyboard', page: 'shortcuts' }
@ -127,6 +168,7 @@ class MenuModel extends Model {
} else if (sections === this.menus.settings) {
Events.emit('set-page', {
page: sel.item.page,
section: sel.item.section,
file: sel.item.file
});
}

1
app/scripts/views/menu/menu-view.js
View File

@ -20,7 +20,6 @@ class MenuView extends View {
minWidth = 130;
maxWidth = 300;
autoWidth = 150;
constructor(model, options) {
super(model, options);

2
app/scripts/views/settings/settings-logs-view.js
View File

@ -6,10 +6,12 @@ import template from 'templates/settings/settings-logs-view.hbs';
class SettingsLogsView extends View {
parent = '.settings__general-advanced';
template = template;
levelToColor = { debug: 'muted', warn: 'yellow', error: 'red' };
render() {
const logs = Logger.getLast().map((item) => ({
level: item.level,
color: this.levelToColor[item.level],
msg:
'[' +
StringFormat.padStr(item.level.toUpperCase(), 5) +

16
app/scripts/views/settings/settings-view.js
View File

@ -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() {

9
app/styles/areas/_app.scss
View File

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

6
app/styles/areas/_auto-type.scss
View File

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

80
app/styles/areas/_details.scss
View File

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

10
app/styles/areas/_footer.scss
View File

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

2
app/styles/areas/_grp.scss
View File

@ -17,7 +17,7 @@
&__content,
&__buttons {
padding: $base-padding;
padding: $medium-padding;
}
&__icon {

27
app/styles/areas/_list.scss
View File

@ -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);
}
}
}
}

13
app/styles/areas/_menu.scss
View File

@ -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);
}

23
app/styles/areas/_open.scss
View File

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

22
app/styles/areas/_settings.scss
View File

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

2
app/styles/areas/_tag.scss
View File

@ -6,7 +6,7 @@
justify-content: flex-start;
width: 100%;
user-select: none;
padding: $base-padding;
padding: $medium-padding;
&__space {
flex: 1;

1
app/styles/base/_base.scss
View File

@ -6,6 +6,7 @@
@import 'override-mixins';
@import 'colors';
@import 'variables';
@import 'properties';
@import 'media';
@import 'icon-font';
@import 'body';

44
app/styles/base/_buttons.scss
View File

@ -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);
}

50
app/styles/base/_colors.scss
View File

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

8
app/styles/base/_forms.scss
View File

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

2
app/styles/base/_icon-font.scss
View File

@ -12,7 +12,7 @@
text-rendering: auto;
-webkit-font-smoothing: antialiased;
display: inline-block;
line-height: 1;
line-height: $base-line-height;
}
.fa {

7
app/styles/base/_properties.scss Normal file
View File

@ -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);
}

11
app/styles/base/_theme-vars.scss
View File

@ -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%),
)
);
}

30
app/styles/base/_variables.scss
View File

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

14
app/styles/common/_dropdown.scss
View File

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

9
app/styles/common/_icon-select.scss
View File

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

6
app/styles/common/_scroll.scss
View File

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

1
app/styles/common/_tip.scss
View File

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

4
app/styles/themes/_all-themes.scss
View File

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

26
app/styles/themes/_dark.scss Normal file
View File

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

26
app/styles/themes/_high-contrast.scss
View File

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

31
app/styles/themes/_light.scss Normal file
View File

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

98
app/styles/themes/_macos-dark.scss
View File

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

23
app/styles/themes/_solarized-dark.scss
View File

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

4
app/styles/themes/_solarized-light.scss
View File

@ -15,3 +15,7 @@ $themes: map-merge(
)
)
);
body.th-sl {
--selected-item-text-color: #fdf6e3;
}

2
app/styles/themes/_terminal.scss
View File

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

10
app/styles/themes/_theme-defaults.scss
View File

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

16
app/styles/themes/_white.scss
View File

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

4
app/styles/utils/_common-dropdown.scss
View File

@ -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);
}

37
app/styles/utils/_selection.scss
View File

@ -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);
}

13
app/templates/settings/settings-general.hbs
View File

@ -1,5 +1,5 @@
<div class="settings__content">
<h1><i class="fa fa-cog settings__head-icon"></i> {{res 'setGenTitle'}}</h1>
<h1 id="top"><i class="fa fa-cog settings__head-icon"></i> {{res 'setGenTitle'}}</h1>
{{#if updateWaitingReload}}
<h2 class="action-color">{{res 'setGenUpdate'}}</h2>
@ -36,7 +36,7 @@
</div>
{{/if}}
<h2>{{res 'setGenAppearance'}}</h2>
<h2 id="appearance">{{res 'setGenAppearance'}}</h2>
{{#if locales}}
<div>
<label for="settings__general-locale">{{res 'setGenLocale'}}:</label>
@ -95,7 +95,7 @@
<label for="settings__general-colorful-icons">{{res 'setGenColorfulIcons'}}</label>
</div>
<h2>{{res 'setGenFunction'}}</h2>
<h2 id="function">{{res 'setGenFunction'}}</h2>
{{#if canAutoSaveOnClose}}
<div>
<input type="checkbox" class="settings__input input-base settings__general-auto-save" id="settings__general-auto-save"
@ -169,7 +169,7 @@
<label for="settings__general-use-group-icon-for-entries">{{res 'setGenUseGroupIconForEntries'}}</label>
</div>
<h2>{{res 'setGenLock'}}</h2>
<h2 id="lock">{{res 'setGenLock'}}</h2>
<div>
<label for="settings__general-idle-minutes">{{res 'setGenLockInactive'}}:</label>
<select class="settings__general-idle-minutes settings__select input-base" id="settings__general-idle-minutes">
@ -209,7 +209,8 @@
<label for="settings__general-lock-on-os-lock">{{res 'setGenLockOrSleep'}}</label>
</div>
{{/if}}
<h2>{{res 'setGenStorage'}}</h2>
<h2 id="storage">{{res 'setGenStorage'}}</h2>
{{#each storageProviders as |prv|}}
<h4 class="settings__general-storage-header"><input
type="checkbox" id="settings__general-prv-check-{{prv.name}}" class="settings__general-prv-check"
@ -220,7 +221,7 @@
data-storage="{{prv.name}}">{{res 'setGenStorageLogout'}}</button>{{/if}}
{{/each}}
<h2>{{res 'advanced'}}</h2>
<h2 id="advanced">{{res 'advanced'}}</h2>
<a class="settings__general-show-advanced">{{res 'setGenShowAdvanced'}}</a>
<div class="settings__general-advanced hide">
{{#if devTools}}

2
app/templates/settings/settings-logs-view.hbs
View File

@ -1,5 +1,5 @@
<div class="settings__logs">
{{#each logs as |log|}}
<pre class="settings__logs-log settings__logs-log--{{level}}">{{msg}}</pre>
<pre class="settings__logs-log settings__logs-log--{{level}} {{#if color}}{{color}}-color{{/if}}">{{msg}}</pre>
{{/each}}
</div>

23
desktop/app.js
View File

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

1
release-notes.md
View File

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