infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix button contrasts in toolbar

Browse Source
master
David Benqué 3 years ago
parent c6eb4b7819
commit 5d1f461527
2 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File

9
customize.dist/src/less2/include/drive.less
Unescape Escape View File

@ -943,13 +943,14 @@
.cp-toolbar-bottom { .cp-toolbar-bottom {
.cp-toolbar-bottom-left { .cp-toolbar-bottom-left {
@drive-light: lighten(@cryptpad_color_brand, 30%);
.cp-app-drive-toolbar-new { .cp-app-drive-toolbar-new {
border-radius: @variables_radius; border-radius: @variables_radius;
color: @cp_toolbar-fg; color: @cryptpad_color_grey_900;
border-color: var(--toolbar-bg-color); border-color: @drive-light;
background-color: var(--toolbar-bg-color); background-color: @drive-light;
&:hover { &:hover {
background-color: var(--toolbar-bg-color-fade); background-color: fade(@drive-light, 80%);
} }
} }
} }

22
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -17,10 +17,10 @@
@toolbar-bg-color: @bg-color; @toolbar-bg-color: @bg-color;
// XXX Todo: clean up unused variables // XXX Todo: clean up unused variables
// XXX: check contrasts of app colors used as btn background // XXX: check contrasts of app colors used as btn background
@toolbar-bg-color-fade: fade(@toolbar-bg-color, 70%); // @desat-color: desaturate(@bg-color, 20%);
@desat-color: desaturate(@bg-color, 20%); // @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
@toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%)); @toolbar-bg-color-light: lighten(@bg-color, 30%);
@toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%)); @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%);
}; };
.toolbar_main ( .toolbar_main (
@ -32,7 +32,7 @@
--toolbar-bg-color: @toolbar-bg-color; --toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-fade: @toolbar-bg-color-fade; --toolbar-bg-color-fade: @toolbar-bg-color-fade;
--toolbar-bg-color-light: @toolbar-bg-color-light; --toolbar-bg-color-light: @toolbar-bg-color-light;
--toolbar-bg-color-active: @toolbar-bg-color-active; // --toolbar-bg-color-active: @toolbar-bg-color-active;
.help_main(); .help_main();
.notifications_main(); .notifications_main();
@ -1024,16 +1024,16 @@
} }
button.cp-toolbar-button-primary { button.cp-toolbar-button-primary {
background-color: @toolbar-bg-color; background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color-light);
border-color: @toolbar-bg-color; border-color: @toolbar-bg-color-light;
border-color: var(--toolbar-bg-color); border-color: var(--toolbar-bg-color-light);
color: @cp_toolbar-bottom-fg; color: @cp_toolbar-bottom-fg;
&:hover { &:hover {
// XXX DB: not working well in dark/light // XXX DB: not working well in dark/light
background-color: fade(@toolbar-bg-color, 50%); background-color: fade(@toolbar-bg-color-light, 80%);
background-color: var(--toolbar-bg-color-fade); background-color: var(--toolbar-bg-color-fade);
border-color: fade(@toolbar-bg-color, 50%); border-color: fade(@toolbar-bg-color-light, 80%);
border-color: var(--toolbar-bg-color-fade); border-color: var(--toolbar-bg-color-fade);
} }
} }

Write Preview
Loading…
Cancel
Save