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

Fix toolbar issues

master
David Benqué 2022-02-18 16:26:12 +00:00
parent a574cfe1e2
commit aa356d6dff
5 changed files with 53 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
customize.dist/src/less2/include/colortheme-dark.less
View File

@ -297,8 +297,8 @@
// Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_900;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-fg-inv: @cryptpad_color_grey_900;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-bottom-bg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_color_grey_900;
@cp_toolbar-logo-bg: @cryptpad_color_grey_200;
@cp_toolbar-fade1: fade(@cryptpad_text_col, 10%);
@ -308,7 +308,7 @@
@cp_history-line-bg: @cryptpad_color_grey_900;
@cp_history-bg1: @cryptpad_color_grey_600;
@cp_history-bg2: @cryptpad_color_grey_800;
@cp_history-fg: @cp_toolbar-bottom-fg;
@cp_history-fg: @cp_toolbar-fg;
// Tokenfield
@cp_token-bg: @cryptpad_color_grey_700;

5
customize.dist/src/less2/include/colortheme.less
View File

@ -294,8 +294,9 @@
@cp_support-header-bg: @cryptpad_color_grey_300;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_200;
@cp_toolbar-bg: @cryptpad_color_white;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-bg: @cryptpad_color_grey_200;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_white;
@ -306,7 +307,7 @@
@cp_history-line-bg: @cryptpad_color_white;
@cp_history-bg1: #DDD;
@cp_history-bg2: #BBB;
@cp_history-fg: @cp_toolbar-bottom-fg;
@cp_history-fg: @cp_toolbar-fg;
// Tokenfield
@cp_token-bg: @cryptpad_color_grey_400;

8
customize.dist/src/less2/include/toolbar-history.less
View File

@ -90,8 +90,8 @@
button {
margin: 0 5px;
border: 1px solid @cp_toolbar-fg;
background-color: @cp_toolbar-fg;
color: @cp_toolbar-fg-inv;
background-color: @cp_toolbar-bg;
color: @cp_toolbar-fg;
border-radius: @variables_radius;
text-transform: uppercase;
display: inline-flex;
@ -100,7 +100,8 @@
margin-right: 5px;
}
&:hover {
background-color: fade(@cp_toolbar-fg, 70%);
// XXX DB: check hover in light/dark themes
background-color: fade(@cp_toolbar-fg, 30%);
}
&:disabled {
cursor: not-allowed !important;
@ -243,6 +244,7 @@
margin: 5px 0px 5px 40px;
button {
width: 50px;
color: @cp_toolbar-fg;
border-radius: @variables_radius;
.fa:first-child:not(:last-child) {
margin-right: 5px;

69
customize.dist/src/less2/include/toolbar.less
View File

@ -15,6 +15,8 @@
@bg-color: @colortheme_apps[default], // color of the toolbar background
) {
@toolbar-bg-color: @bg-color;
// XXX Todo: clean up unused variables
// 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%);
@toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%));
@ -504,7 +506,7 @@
.cp-toolbar-link {
height: @toolbar_line-height;
width: @toolbar_line-height;
transform: scale(0.5);
//transform: scale(0.5);
.cp-toolbar-link-logo {
padding: 5px;
}
@ -724,7 +726,7 @@
line-height: @toolbar_top-height;
width: @toolbar_top-height;
height: @toolbar_top-height;
padding: 0;
padding: 5px;
box-sizing: border-box;
display: inline-block;
}
@ -736,9 +738,10 @@
display: flex;
align-items: center;
justify-content: center;
width: @toolbar_top-height;
width: @toolbar_top-height - 10px;
font-size: 1em;
height: @toolbar_top-height;
height: @toolbar_top-height - 10px;
border-radius: @variables_radius;
padding: 0px;
margin: 0;
&::before {
@ -797,21 +800,25 @@
height: auto;
padding: 10px;
svg {
#outline, #squares {
fill: @toolbar-bg-color;
fill: var(--toolbar-bg-color);
}
#background {
fill: @cp_toolbar-logo-bg;
}
span {
font-size: 45px;
}
img {
cursor: pointer;
height: 100%;
width: 100%;
}
// svg {
// #outline, #squares {
// fill: @toolbar-bg-color;
// fill: var(--toolbar-bg-color);
// }
// #background {
// fill: @cp_toolbar-logo-bg;
// }
// }
// img {
// cursor: pointer;
// height: 100%;
// width: 100%;
// }
}
}
.cp-toolbar-user {
@ -955,7 +962,7 @@
}
button {
border: 1px solid @cp_toolbar-bottom-fg;
border: 1px solid @cp_toolbar-bottom-bg;
box-sizing: border-box;
position: relative;
margin: 0px;
@ -967,38 +974,44 @@
margin-right: 5px;
}
&:hover {
background-color: fade(@cp_toolbar-bottom-fg, 70%);
// XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 70%);
}
}
.cp-toolbar-bottom-left > button,
.cp-toolbar-bottom-mid > button,
.cp-toolbar-bottom-right > button,
.cp-toolbar-bottom-right > span > button {
background-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-fg-inv;
background-color: @cp_toolbar-bottom-bg;
color: @cp_toolbar-bottom-fg;
&:hover {
background-color: fade(@cp_toolbar-bottom-fg, 70%);
// XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 50%);
border-color: fade(@cp_toolbar-bottom-bg, 50%);
}
&.cp-toolbar-button-active {
background-color: @cp_toolbar-bg;
border-color: @cp_toolbar-bottom-fg;
color: @cp_toolbar-bottom-fg;
border-color: @cp_toolbar-fg;
color: @cp_toolbar-fg;
&:hover {
background-color: fade(@cp_toolbar-bottom-fg, 30%);
// XXX DB: not working well in dark/light
background-color: fade(@cp_toolbar-bottom-bg, 50%);
}
}
}
button.cp-toolbar-button-primary {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
border-color: @toolbar-bg-color;
border-color: var(--toolbar-bg-color);
color: @cp_toolbar-fg-inv;
color: @cp_toolbar-bottom-fg;
&:hover {
background-color: fade(@toolbar-bg-color, 70%);
// XXX DB: not working well in dark/light
background-color: fade(@toolbar-bg-color, 50%);
background-color: var(--toolbar-bg-color-fade);
border-color: fade(@toolbar-bg-color, 50%);
border-color: var(--toolbar-bg-color-fade);
}
}
button.cp-toolbar-collapse {

2
www/common/toolbar.js
View File

@ -896,7 +896,7 @@ MessengerUI, Messages, Pages) {
href: href,
title: buttonTitle,
'class': "cp-toolbar-link-logo"
}).append(UIElements.getSvgLogo());
}).append(UI.getIcon(privateData.app));
var onClick = function (e) {
e.preventDefault();