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

style fixes

This commit is contained in:
antelle 2020-11-29 13:12:32 +01:00
parent f27862b036
commit bdd9a51d25
No known key found for this signature in database
GPG Key ID: 63C9777AAB7C563C
5 changed files with 62 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/scripts/plugins/theme-vars.js
View File

@ -24,13 +24,14 @@ const ThemeVars = {
apply(cssStyle) {
this.init();
const lines = ThemeVarsScss.split('\n');
for (const line of lines) {
const match = line.match(/\s*([^:]+):\s*(.*?),?\s*$/);
if (!match) {
continue;
const matches = ThemeVarsScss.replace(/[\n\s]+/g, '').matchAll(/([\w\-]+):([^:]+),(\$)?/g);
for (let [, name, def, last] of matches) {
if (last && def.endsWith(')')) {
// definitions are written like this:
// map-merge((def:val, def:val, ..., last-def:val),$t)
// so, the last item has "),$" captured, here we're removing that bracket
def = def.substr(0, def.length - 1);
}
const [, name, def] = match;
const propName = '--' + name;
const currentValue = cssStyle.getPropertyValue(propName);
if (currentValue) {

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

@ -388,6 +388,7 @@
&__item {
padding: $base-padding;
cursor: pointer;
border-radius: var(--block-border-radius);
&:hover {
background-color: var(--action-background-color-focus-tr);
}

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

@ -5,4 +5,5 @@ body {
--block-border-radius: 5px;
--selected-item-text-color: var(--text-color);
--open-icon-color: var(--text-color);
--dropdown-box-shadow-color: rgba(0, 0, 0, 0.1);
}

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

@ -1,27 +1,57 @@
/* prettier-ignore */
/* This file is also parsed in JS to build theme styles, see theme-vars.js */
@function set-theme-vars($t) {
@return map-merge(
$t,
(
muted-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, mute-percent)),
muted-color-border: mix(map-get($t, medium-color), map-get($t, background-color), semi-mute-percent(map-get($t, mute-percent))),
muted-color:
mix(
map-get($t, medium-color),
map-get($t, background-color),
map-get($t, mute-percent)
),
muted-color-border:
mix(
map-get($t, medium-color),
map-get($t, background-color),
semi-mute-percent(map-get($t, mute-percent))
),
text-selection-bg-color: rgba(map-get($t, action-color), 0.3),
text-selection-bg-color-error: rgba(map-get($t, error-color), 0.8),
text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), 0.5),
text-contrast-action-color: text-contrast-color(map-get($t, action-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)),
text-contrast-error-color: text-contrast-color(map-get($t, error-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)),
text-contrast-action-color:
text-contrast-color(
map-get($t, action-color),
map-get($t, color-lightness-shift),
map-get($t, background-color),
map-get($t, text-color)
),
text-contrast-error-color:
text-contrast-color(
map-get($t, error-color),
map-get($t, color-lightness-shift),
map-get($t, background-color),
map-get($t, text-color)
),
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-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),
light-border-color:
mix(
map-get($t, medium-color),
map-get($t, background-color),
map-get($t, light-border-percent)
),
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%),
intermediate-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 3%),
intermediate-pressed-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 2.6%),
secondary-background-color:
mix(map-get($t, medium-color), map-get($t, background-color), 10%),
intermediate-background-color:
mix(map-get($t, medium-color), map-get($t, background-color), 3%),
intermediate-pressed-background-color:
mix(map-get($t, medium-color), map-get($t, background-color), 2.6%),
disabled-background-color: shade(map-get($t, background-color), 5%),
action-background-color-focus: shade(map-get($t, action-color), 20%),
action-background-color-focus-tr: rgba(shade(map-get($t, action-color), 20%), 0.1),
@ -34,9 +64,13 @@
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),
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%),
)
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%)
),
$t
);
}

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

@ -61,7 +61,7 @@ $titlebar-padding-large: 40px;
// Shadows
@function dropdown-box-shadow() {
@return 0 0 50px var(--dropdown-box-shadow-color);
@return 0 0.15rem 0.5rem 0.25rem var(--dropdown-box-shadow-color);
}
// Animations