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

macos dark theme

This commit is contained in:
antelle 2019-09-08 10:54:18 +02:00
parent 47b2c32031
commit 6dba3f9bf7
6 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -255,6 +255,7 @@
.details__field--edit.details__field--editable:hover & {
border: 0 solid transparent;
padding: 0;
overflow: visible;
}
> input,
> textarea {

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

@ -72,7 +72,7 @@ input:not([type]) {
}
&:focus {
border-color: var(--action-color);
border-color: var(--form-box-border-focus);
box-shadow: form-box-shadow-focus();
outline: none;
}
@ -152,7 +152,7 @@ select {
border-color: var(--accent-border-color);
}
&:focus {
border-color: var(--action-color);
border-color: var(--form-box-border-focus);
box-shadow: form-box-shadow-focus();
outline: none;
}

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

@ -39,6 +39,7 @@
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-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),

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

@ -39,16 +39,16 @@ $titlebar-padding-large: 40px;
@return 1px solid var(--light-border-color);
}
@function selected-border-width() {
@return 3px;
@return var(--selected-border-width);
}
@function selected-border() {
@return selected-border-width() solid var(--action-color);
}
@function selected-hover-border() {
@return 1px solid var(--action-color);
@return var(--accent-border-width) solid var(--action-color);
}
@function selected-transparent-border() {
@return 1px solid transparent;
@return var(--accent-border-width) solid transparent;
}
@function focused-outline() {
@return 1px solid var(--action-color);

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

@ -8,12 +8,48 @@ $themes: map-merge(
background-color: #1F1F20,
medium-color: #B7B7B8,
text-color: #F7F7F7,
action-color: #3E6FD3,
action-color: #3063D4,
error-color: #EC5F5D,
focus-shadow-blur: 0,
focus-shadow-spread: 3px,
input-border-radius: 3px
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;
input[type='text'], input[type='password'], textarea, input:not([type]) {
&:focus {
background-color: rgba(108, 108, 109, 0.05);
}
}
.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: .3em;
}
.menu__item-edit:not(:hover), .menu__item-empty-trash:not(:hover) {
color: #8F8F91;
}
}
.app__footer {
background-color: var(--secondary-background-color);
}
.list__item--active, .list__item--active:hover {
background-color: #2457C9;
.list__item-descr {
color: #8F8F91;
}
}
}

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

@ -5,5 +5,7 @@ $theme-defaults: (
color-lightness-shift: 0,
focus-shadow-blur: 3px,
focus-shadow-spread: 0,
input-border-radius: 1px
input-border-radius: 1px,
selected-border-width: 3px,
accent-border-width: 1px
);