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

Correct toolbar button styles across light/dark themes

Browse Source
master
David Benqué 3 years ago
parent 6d73f008d8
commit fc1e78120c
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File

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

@ -17,7 +17,7 @@
@toolbar-bg-color: @bg-color; @toolbar-bg-color: @bg-color;
// XXX: check contrasts of app colors used as btn background // XXX: check contrasts of app colors used as btn background
@toolbar-bg-color-light: lighten(@bg-color, 30%); @toolbar-bg-color-light: lighten(@bg-color, 30%);
@toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%); @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 60%);
}; };
.toolbar_main ( .toolbar_main (
@ -439,7 +439,6 @@
screen and (max-height: 500px) { screen and (max-height: 500px) {
flex-wrap: wrap; flex-wrap: wrap;
height: @toolbar_line-height; height: @toolbar_line-height;
// XXX DB TODO: scale down icon logo on small screens
.cp-pad-not-pinned { .cp-pad-not-pinned {
line-height: 32px; line-height: 32px;
flex: unset; flex: unset;
@ -997,7 +996,6 @@
margin-right: 5px; margin-right: 5px;
} }
&:hover { &:hover {
// XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 70%); background-color: fade(@cp_toolbar-bottom-bg, 70%);
} }
} }
@ -1008,17 +1006,16 @@
background-color: @cp_toolbar-bottom-bg; background-color: @cp_toolbar-bottom-bg;
color: @cp_toolbar-bottom-fg; color: @cp_toolbar-bottom-fg;
&:hover { &:hover {
// XXX DB: not working well in dark/light background-color: fade(@cryptpad_text_col, 20%);
background-color: fade(@cp_toolbar-bottom-bg, 50%); border-color: @cryptpad_text_col;
border-color: fade(@cp_toolbar-bottom-bg, 50%); color: @cryptpad_text_col;
} }
&.cp-toolbar-button-active { &.cp-toolbar-button-active {
background-color: @cp_toolbar-bg; background-color: @cp_toolbar-bg;
border-color: @cp_toolbar-fg; border-color: @cp_toolbar-fg;
color: @cp_toolbar-fg; color: @cp_toolbar-fg;
&:hover { &:hover {
// XXX DB: not working well in dark/light background-color: fade(@cryptpad_text_col, 20%);
background-color: fade(@cp_toolbar-bottom-bg, 50%);
} }
} }
} }
@ -1030,11 +1027,11 @@
border-color: var(--toolbar-bg-color-light); 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 background-color: @toolbar-bg-color-fade;
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-light, 80%); border-color: @toolbar-bg-color-fade;
border-color: var(--toolbar-bg-color-fade); border-color: var(--toolbar-bg-color-fade);
color: @cp_toolbar-bottom-fg;
} }
} }
button.cp-toolbar-collapse { button.cp-toolbar-collapse {

Write Preview
Loading…
Cancel
Save