From 617c4b60440313610cfdfff06781d7f34ac5449a Mon Sep 17 00:00:00 2001
From: Caleb James DeLisle <cjd@cjdns.fr>
Date: Thu, 7 Dec 2017 19:00:13 +0100
Subject: [PATCH] CSS refactorings and pad-is-not-pinned work
---
customize.dist/messages.js | 2 +-
.../src/less2/include/alertify.less | 6 +-
.../src/less2/include/colortheme.less | 2 +-
.../src/less2/include/modal-theme.less | 4 -
customize.dist/src/less2/include/modal.less | 10 +-
customize.dist/src/less2/include/toolbar.less | 297 ++++++++----------
.../src/less2/include/variables.less | 6 +
customize.dist/translations/messages.js | 2 +-
www/code/app-code.less | 8 +-
www/common/toolbar3.js | 15 +-
www/contacts/app-contacts.less | 8 +-
www/drive/app-drive.less | 8 +-
www/file/app-file.less | 8 +-
www/pad/app-pad.less | 12 +-
www/poll/app-poll.less | 14 +-
www/profile/app-profile.less | 7 +-
www/settings/app-settings.less | 8 +-
www/slide/app-slide.less | 8 +-
www/todo/app-todo.less | 7 +-
www/whiteboard/app-whiteboard.less | 8 +-
20 files changed, 210 insertions(+), 230 deletions(-)
delete mode 100644 customize.dist/src/less2/include/modal-theme.less
diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index 7e84dd01d..588b259b0 100644
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -93,7 +93,7 @@ define(req, function(Util, Default, Language) {
var text = messages[key];
if (typeof(text) === 'string') {
return text.replace(/\{(\d+)\}/g, function (str, p1) {
- return argArray[p1] || null;
+ return typeof(argArray[p1]) === 'string' ? argArray[p1] : '';
});
} else {
return text;
diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index 63751fed2..ed0f1baf9 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -1,6 +1,6 @@
@import (once) "./colortheme-all.less";
@import (once) "./browser.less";
-@import (once) "./modal-theme.less";
+@import (once) "./variables.less";
.alertify_main () {
@max-z-index: 2147483647;
@@ -21,8 +21,8 @@
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-fg;
- @alertify_padding-base: @modal_padding;
- @alertify_box-shadow: @modal_shadow;
+ @alertify_padding-base: @variables_padding;
+ @alertify_box-shadow: @variables_shadow;
// Logs to show that something has happened
// These show only once
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 8cebdaf20..42cbb26b0 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -37,7 +37,7 @@
@colortheme_dropdown-bg-hover: #f1f1f1;
@colortheme_dropdown-bg-active: #e8e8e8;
-// Apps
+// Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_pad-bg: #1c4fa0;
@colortheme_pad-color: #fff;
diff --git a/customize.dist/src/less2/include/modal-theme.less b/customize.dist/src/less2/include/modal-theme.less
deleted file mode 100644
index 1ed183d2d..000000000
--- a/customize.dist/src/less2/include/modal-theme.less
+++ /dev/null
@@ -1,4 +0,0 @@
-// Used in modal.less and alertify.less
-@modal_padding: 12px;
-@modal_shadow: 0 8px 32px 0 rgba(0,0,0,.4);
-
diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less
index 070660291..3bd674527 100644
--- a/customize.dist/src/less2/include/modal.less
+++ b/customize.dist/src/less2/include/modal.less
@@ -1,12 +1,12 @@
@import (once) "./colortheme-all.less";
-@import (once) "./modal-theme.less";
+@import (once) "./variables.less";
.modal_base() {
font-family: @colortheme_font;
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
- box-shadow: @modal_shadow;
+ box-shadow: @variables_shadow;
a {
color: @colortheme_modal-link;
@@ -31,9 +31,9 @@
.cp-modal {
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
- box-shadow: @modal_shadow;
+ box-shadow: @variables_shadow;
- padding: @modal_padding;
+ padding: @variables_padding;
position: absolute;
top: 15vh; bottom: 15vh;
@@ -71,7 +71,7 @@
position: absolute;
top: 0;
right: 0;
- margin: @modal_padding;
+ margin: @variables_padding;
cursor: pointer;
}
}
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 37d294c3b..e97e5c7a7 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -7,9 +7,12 @@
@import (once) "./icon-colors.less";
@import (once) "./tools.less";
-@_cp-toolbar-color-warn: black;
-
-.toolbar_main () {
+.toolbar_main (
+ @color: @colortheme_default-color, // Color of the text for the toolbar
+ @bg-color: @colortheme_default-bg, // color of the toolbar background
+ @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
+ @barWidth: 600px // width of the toolbar
+) {
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@@ -52,7 +55,7 @@
}
.cp-toolbar-userlist-drawer {
- background-color: @colortheme_default-bg;
+ background-color: @bg-color;
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
width: 175px;
@@ -170,174 +173,51 @@
}
}
- .addToolbarColors (@color, @bg-color, @barWidth: 600px) {
- .cp-markdown-toolbar {
- height: @toolbar_line-height;
- background-color: lighten(@bg-color, 20%);
- display: none;
- button {
- height: @toolbar_line-height !important;
- outline: 0;
- color: @color;
- .toolbar_button;
- font: normal normal normal 14px/1 FontAwesome;
- &:hover {
- background-color: lighten(@bgcolor, 8%);
- }
- &.cp-markdown-help { float: right; }
- }
- }
- .cp-toolbar-userlist-drawer {
- background-color: @bgcolor;
+ // TODO(cjd) This ought to be in a less file for markdown-based editors
+ .cp-markdown-toolbar {
+ height: @toolbar_line-height;
+ background-color: lighten(@bg-color, 20%);
+ display: none;
+ button {
+ height: @toolbar_line-height !important;
+ outline: 0;
color: @color;
- .cp-toolbar-userlist-drawer-close {
- color: @color;
- }
- h2 {
- background-color: darken(@bgcolor, 10%);
- color: @color;
- }
- .cp-toolbar-userlist-name-input {
- background-color: darken(@bg-color, 10%);
- color: @color;
- }
- .cp-toolbar-userlist-name-edit {
- color: contrast(@color,
- lighten(@color, 20%),
- darken(@color, 20%));
- background: transparent;
- &:hover {
- color: @color;
- }
- }
- .cp-toolbar-userlist-friend {
- &:hover {
- color: darken(@color, 15%);
- }
+ .toolbar_button;
+ font: normal normal normal 14px/1 FontAwesome;
+ &:hover {
+ background-color: lighten(@bg-color, 8%);
}
+ &.cp-markdown-help { float: right; }
}
- .cp-toolbar {
- background-color: @bgcolor;
+ }
+ .cp-toolbar-userlist-drawer {
+ background-color: @bg-color;
+ color: @color;
+ .cp-toolbar-userlist-drawer-close {
color: @color;
- .cp-toolbar-spinner {
- font-size: @colortheme_app-font-size;
+ }
+ h2 {
+ background-color: darken(@bg-color, 10%);
+ color: @color;
+ }
+ .cp-toolbar-userlist-name-input {
+ background-color: darken(@bg-color, 10%);
+ color: @color;
+ }
+ .cp-toolbar-userlist-name-edit {
+ color: contrast(@color,
+ lighten(@color, 20%),
+ darken(@color, 20%));
+ background: transparent;
+ &:hover {
color: @color;
}
- .cp-toolbar-limit {
- text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
- color: @_cp-toolbar-color-warn;
- }
- .cp-toolbar-leftside, .cp-toolbar-rightside {
- background-color: lighten(@bgcolor, 8%);
- button:hover, button.cp-toolbar-button-active {
- background-color: @bgcolor;
- }
- }
- .cp-toolbar-rightside {
- @media screen and (max-width: @barWidth) { // 450px
- flex-wrap: wrap;
- height: auto;
- width: 100%;
- }
- }
- .cp-pad-not-pinned {
- padding-left: 20px;
- font-size: @colortheme_app-font-size;
- color: @_cp-toolbar-color-warn;
- a {
- font-size: @colortheme_app-font-size;
- font-weight: bold;
- color: @_cp-toolbar-color-warn;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- .cp-toolbar-title-hoverable:hover {
- .cp-toolbar-title-editable, .cp-toolbar-title-edit {
- cursor: text;
- border: 1px solid darken(@bgcolor, 15%);
- background: darken(@bgcolor, 10%);
- transition: all 0.15s;
- color: @color;
- }
- .cp-toolbar-title-editable {
- cursor: text;
- }
- }
- .cp-toolbar-title-save {
- border: 1px solid darken(@bgcolor, 15%);
- background: darken(@bgcolor, 10%);
- color: @color;
- &:hover {
- background: darken(@bgcolor, 5%);
- }
- }
- input {
- border: 1px solid darken(@bgcolor, 15%);
- background: darken(@bgcolor, 10%);
- color: @color;
- }
- .cp-dropdown-content.cp-dropdown-left a {
- color: black;
- }
}
- }
-
- &.cp-app-pad {
- @bgcolor: @colortheme_pad-bg;
- @color: @colortheme_pad-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-code {
- @bgcolor: @colortheme_code-bg;
- @color: @colortheme_code-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-slide {
- @bgcolor: @colortheme_slide-bg;
- @color: @colortheme_slide-color;
- .addToolbarColors(@color, @bgcolor, 700px);
- }
- &.cp-app-poll {
- @bgcolor: @colortheme_poll-bg;
- @color: @colortheme_poll-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-whiteboard {
- @bgcolor: @colortheme_whiteboard-bg;
- @color: @colortheme_whiteboard-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-drive {
- @bgcolor: @colortheme_drive-bg;
- @color: @colortheme_drive-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-file {
- @bgcolor: @colortheme_file-bg;
- @color: @colortheme_file-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-contacts {
- @bgcolor: @colortheme_friends-bg;
- @color: @colortheme_friends-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-settings {
- @bgcolor: @colortheme_settings-bg;
- @color: @colortheme_settings-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-profile {
- @bgcolor: @colortheme_profile-bg;
- @color: @colortheme_profile-color;
- .addToolbarColors(@color, @bgcolor);
- }
- &.cp-app-todo {
- @bgcolor: @colortheme_todo-bg;
- @color: @colortheme_todo-color;
- .addToolbarColors(@color, @bgcolor);
+ .cp-toolbar-userlist-friend {
+ &:hover {
+ color: darken(@color, 15%);
+ }
+ }
}
.cp-toolbar {
@@ -355,12 +235,8 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
-
- //background-color: #BBBBFF;
- background-color: @colortheme_default-bg;
- color: @colortheme_default-color;
-
-
+ background-color: @bg-color;
+ color: @color;
.fa {
font: normal normal normal 14px/1 FontAwesome;
@@ -487,6 +363,56 @@
}
}
}
+
+ .cp-toolbar-spinner {
+ font-size: @colortheme_app-font-size;
+ color: @color;
+ }
+ .cp-toolbar-limit {
+ text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
+ color: @warn-color;
+ }
+ .cp-toolbar-leftside, .cp-toolbar-rightside {
+ background-color: lighten(@bg-color, 8%);
+ button:hover, button.cp-toolbar-button-active {
+ background-color: @bg-color;
+ }
+ }
+ .cp-toolbar-rightside {
+ @media screen and (max-width: @barWidth) { // 450px
+ flex-wrap: wrap;
+ height: auto;
+ width: 100%;
+ }
+ }
+ .cp-toolbar-title-hoverable:hover {
+ .cp-toolbar-title-editable, .cp-toolbar-title-edit {
+ cursor: text;
+ border: 1px solid darken(@bg-color, 15%);
+ background: darken(@bg-color, 10%);
+ transition: all 0.15s;
+ color: @color;
+ }
+ .cp-toolbar-title-editable {
+ cursor: text;
+ }
+ }
+ .cp-toolbar-title-save {
+ border: 1px solid darken(@bg-color, 15%);
+ background: darken(@bg-color, 10%);
+ color: @color;
+ &:hover {
+ background: darken(@bg-color, 5%);
+ }
+ }
+ input {
+ border: 1px solid darken(@bg-color, 15%);
+ background: darken(@bg-color, 10%);
+ color: @color;
+ }
+ .cp-dropdown-content.cp-dropdown-left a {
+ color: black;
+ }
}
.cp-toolbar-top {
@@ -578,6 +504,35 @@
padding: 5px 5px;
height: 40px;
}
+ .cp-pad-not-pinned {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+
+ align-self: right;
+ padding-left: 20px;
+ padding-left: 5px;
+ font-size: @colortheme_app-font-size;
+ color: @warn-color;
+ .cp-pnp-msg {
+ padding-left: 5px;
+ a {
+ font-size: @colortheme_app-font-size;
+ font-weight: bold;
+ color: @warn-color;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ @media screen and (max-width: (@browser_media-not-big)) {
+ display: none;
+ }
+ }
+ @media screen and (max-width: (@browser_media-not-big)) {
+ overflow: visible;
+ }
+
+ }
}
.cp-toolbar-link, .cp-toolbar-new {
font-size: 48px;
diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less
index 3aee02492..ba6c642e2 100644
--- a/customize.dist/src/less2/include/variables.less
+++ b/customize.dist/src/less2/include/variables.less
@@ -1,3 +1,9 @@
+// This is a file for generic constants which we didn't want to hardcode everywhere.
+// However, unlike colortheme, customizing these variables will cause breakage.
+
// Elements size
@variables_bar-height: 32px;
+// Used in modal.less and alertify.less
+@variables_padding: 12px;
+@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4);
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 90ce1871e..5e6034d8b 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -31,7 +31,7 @@ define(function () {
out.typeError = "This pad is not compatible with the selected application";
out.onLogout = 'You are logged out, <a href="/" target="_blank">click here</a> to log in<br>or press <em>Escape</em> to access your pad in read-only mode.';
out.wrongApp = "Unable to display the content of that realtime session in your browser. Please try to reload that page.";
- out.padNotPinned = 'This pad will expire in 3 months, <a href="{0}" target="blank">login</a> or <a href="{1}" target="blank">register</a> to preserve it.';
+ out.padNotPinned = 'This pad will expire in 3 months, {0}login{1} or {2}register{3} to preserve it.';
out.loading = "Loading...";
out.error = "Error";
diff --git a/www/code/app-code.less b/www/code/app-code.less
index 5025d4b3c..22402a999 100644
--- a/www/code/app-code.less
+++ b/www/code/app-code.less
@@ -5,9 +5,11 @@
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
-@_cp-toolbar-color-warn: @colortheme_code-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_code-bg,
+ @warn-color: @colortheme_code-warn,
+ @color: @colortheme_code-color
+);
.fileupload_main();
.alertify_main();
.tokenfield_main();
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index 5bdd8486d..fc06f40f6 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -729,11 +729,20 @@ define([
Common.sendAnonRpcMsg('IS_CHANNEL_PINNED', cid, function (x) {
if (x.error || !Array.isArray(x.response)) { return void console.log(x); }
if (x.response[0] === true) { return; }
+ var pnpTitle = Messages._getKey('padNotPinned', ['','','','']);
+ var pnpMsg = Messages._getKey('padNotPinned', [
+ '<a href="' + o + '/login" target="blank" title>',
+ '</a>',
+ '<a href="' + o + '/register" target="blank" title>',
+ '</a>'
+ ]);
var msg = $('<span>', {
'class': 'cp-pad-not-pinned',
- }).append(
- Messages._getKey('padNotPinned', [o + '/login', o + '/register'])
- );
+ 'title': pnpTitle
+ }).append([
+ $('<span>', {'class': 'fa fa-exclamation-triangle'}),
+ $('<span>', {'class': 'cp-pnp-msg'}).append(pnpMsg)
+ ]);
$('.cp-toolbar-title').append(msg);
console.log("This pad is not pinned");
});
diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less
index 26fba2c90..925fd9f81 100644
--- a/www/contacts/app-contacts.less
+++ b/www/contacts/app-contacts.less
@@ -8,9 +8,11 @@
@import (once) '../../customize/src/less2/include/avatar.less';
-@_cp-toolbar-color-warn: @colortheme_friends-warn;;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_friends-bg,
+ @warn-color: @colortheme_friends-warn,
+ @color: @colortheme_friends-color
+);
.fileupload_main();
.alertify_main();
diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less
index 17ae35fcb..259e63f56 100644
--- a/www/drive/app-drive.less
+++ b/www/drive/app-drive.less
@@ -8,9 +8,11 @@
@import (once) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/tokenfield.less";
-@_cp-toolbar-color-warn: @colortheme_drive-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_drive-bg,
+ @warn-color: @colortheme_drive-warn,
+ @color: @colortheme_drive-color
+);
.fileupload_main();
.alertify_main();
.limit-bar_main();
diff --git a/www/file/app-file.less b/www/file/app-file.less
index 7a990cb03..a777b6014 100644
--- a/www/file/app-file.less
+++ b/www/file/app-file.less
@@ -5,9 +5,11 @@
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
-@_cp-toolbar-color-warn: @colortheme_file-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_file-bg,
+ @warn-color: @colortheme_file-warn,
+ @color: @colortheme_file-color
+);
.fileupload_main();
.alertify_main();
.tokenfield_main();
diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less
index 6e34f473d..1aa1a4f62 100644
--- a/www/pad/app-pad.less
+++ b/www/pad/app-pad.less
@@ -1,14 +1,12 @@
-// Defaults to avoid breaking existing themes
-
-@colortheme_pad-toolbar-bg: #c1e7ff;
-
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
-@_cp-toolbar-color-warn: @colortheme_pad-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_pad-bg,
+ @warn-color: @colortheme_pad-warn,
+ @color: @colortheme_pad-color
+);
.alertify_main();
// body
diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less
index f717a6f56..2a29f1fdf 100644
--- a/www/poll/app-poll.less
+++ b/www/poll/app-poll.less
@@ -1,9 +1,3 @@
-// Defaults to avoid breaking existing themes
-
-@colortheme_poll-th-bg: #005bef;
-@colortheme_poll-th-fg: #fff;
-@colortheme_poll-help-bg: #bbffbb;
-
@import (once) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/toolbar.less";
@import (once) "../../customize/src/less2/include/markdown.less";
@@ -13,9 +7,11 @@
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/avatar.less';
-@_cp-toolbar-color-warn: @colortheme_poll-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_poll-bg,
+ @warn-color: @colortheme_poll-warn,
+ @color: @colortheme_poll-color
+);
.fileupload_main();
.alertify_main();
.tokenfield_main();
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 21e659a03..d36233782 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -7,8 +7,11 @@
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/sidebar-layout.less';
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_profile-bg,
+ @warn-color: @colortheme_profile-warn,
+ @color: @colortheme_profile-color
+);
.fileupload_main();
.alertify_main();
.sidebar-layout_main();
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index b96384bc0..8b3d3b7fb 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -6,9 +6,11 @@
@import (once) '../../customize/src/less2/include/sidebar-layout.less';
@import (once) "../../customize/src/less2/include/limit-bar.less";
-@_cp-toolbar-color-warn: @colortheme_settings-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_settings-bg,
+ @warn-color: @colortheme_settings-warn,
+ @color: @colortheme_settings-color
+);
.alertify_main();
.sidebar-layout_main();
.limit-bar_main();
diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less
index 32088eb64..6a9c2ee63 100644
--- a/www/slide/app-slide.less
+++ b/www/slide/app-slide.less
@@ -6,10 +6,12 @@
@import (once) "../../customize/src/less2/include/mediatag.less";
@import (once) '../../customize/src/less2/include/tokenfield.less';
-@_cp-toolbar-color-warn: @colortheme_slide-warn;
-
.mediatag_base();
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_slide-bg,
+ @warn-color: @colortheme_slide-warn,
+ @color: @colortheme_slide-color
+);
.fileupload_main();
.alertify_main();
.tokenfield_main();
diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less
index de420b8b1..fd274a0ee 100644
--- a/www/todo/app-todo.less
+++ b/www/todo/app-todo.less
@@ -8,8 +8,11 @@
@import (once) '../../customize/src/less2/include/avatar.less';
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_todo-bg,
+ @warn-color: @colortheme_todo-warn,
+ @color: @colortheme_todo-color
+);
.fileupload_main();
.alertify_main();
diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
index 95fe016e9..28e6a6e0c 100644
--- a/www/whiteboard/app-whiteboard.less
+++ b/www/whiteboard/app-whiteboard.less
@@ -6,9 +6,11 @@
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
-@_cp-toolbar-color-warn: @colortheme_whiteboard-warn;
-
-.toolbar_main();
+.toolbar_main(
+ @bg-color: @colortheme_whiteboard-bg,
+ @warn-color: @colortheme_whiteboard-warn,
+ @color: @colortheme_whiteboard-color
+);
.fileupload_main();
.alertify_main();
.tokenfield_main();