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

Merge branch 'sandpaper-static' into 4.15-candidate

Browse Source
master
ansuz 3 years ago
parent 8a3cb9a94c 0198bf6782
commit 83f721341f
37 changed files with 683 additions and 243 deletions
Show Stats Download Patch File Download Diff File

96
customize.dist/pages.js
Unescape Escape View File

@ -87,11 +87,12 @@ define([
]); ]);
}; };
var footLink = function (ref, loc, text) { var footLink = function (ref, loc, text, icon) {
if (!ref) { return; } if (!ref) { return; }
var attrs = { var attrs = {
href: ref, href: ref,
}; };
var iconName = '';
if (!/^\//.test(ref)) { if (!/^\//.test(ref)) {
attrs.target = '_blank'; attrs.target = '_blank';
attrs.rel = 'noopener noreferrer'; attrs.rel = 'noopener noreferrer';
@ -100,7 +101,11 @@ define([
attrs['data-localization'] = loc; attrs['data-localization'] = loc;
text = Msg[loc]; text = Msg[loc];
} }
return h('a', attrs, text); if (icon) {
iconName = 'i.fa.fa-' + icon;
icon = h(iconName);
}
return h('a', attrs, [icon, text]);
}; };
Pages.versionString = "v4.14.0"; Pages.versionString = "v4.14.0";
@ -117,13 +122,12 @@ define([
var l = Msg._getLanguage(); var l = Msg._getLanguage();
['imprint', 'privacy', 'terms', 'roadmap', 'source'].forEach(function (k) { ['imprint', 'privacy', 'terms', 'roadmap', 'source'].forEach(function (k) {
var value = AppConfig[k]; var value = AppConfig[k];
console.log('links', k, value);
if (value === false) { return; } if (value === false) { return; }
if (value === true) { if (value === true) {
customURLs[k] = defaultURLs[k]; customURLs[k] = defaultURLs[k];
return; return;
} }
if (!value) { return; }
if (typeof(value) === 'string') { if (typeof(value) === 'string') {
customURLs[k] = value; customURLs[k] = value;
return; return;
@ -142,7 +146,8 @@ define([
Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link'); Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link');
Pages.roadmapLink = footLink(customURLs.roadmap, 'footer_roadmap'); Pages.roadmapLink = footLink(customURLs.roadmap, 'footer_roadmap');
Pages.infopageFooter = function () { Pages.infopageOldFooter = function () { // XXX DB: not used, kept to copy/paste
//var terms = footLink('/terms.html', 'footer_tos'); // FIXME this should be configurable like the other legal pages
var legalFooter; var legalFooter;
// only display the legal part of the footer if it has content // only display the legal part of the footer if it has content
@ -193,57 +198,94 @@ define([
]); ]);
}; };
Pages.infopageFooter = function () {
return h('footer.cp-footer', [
h('div.cp-footer-left', [
h('div.cp-logo-foot', [
h('img', {
src: '/customize/CryptPad_logo.svg',
"aria-hidden": true,
alt: ''
}),
h('span.logo-font', 'CryptPad')
]),
footLink('https://cryptpad.org', null, 'Website', 'link'),
footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate') // XXX DB: add OpenCollective icon
]),
h('.div.cp-footer-center', [
h('div.cp-footer-language', [
h('i.fa.fa-language', {'aria-hidden': 'true'}),
languageSelector()
])
]),
h('div.cp-footer-right', [
h('span.cp-footer-version', 'Version: ' + Pages.versionString) // XXX DB: translate 'Version' ?
])
]);
};
Pages.infopageTopbar = function () { Pages.infopageTopbar = function () {
var rightLinks; var rightLinks;
var username = window.localStorage.getItem('User_name'); var username = window.localStorage.getItem('User_name');
var registerLink; var registerLink;
if (!ApiConfig.restrictRegistration) { if (!ApiConfig.restrictRegistration) {
registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, Msg.login_register); registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, [
h('i.fa.fa-user', {'aria-hidden':'true'}),
Msg.login_register
]);
} }
if (username === null) { if (username === null) {
rightLinks = [ rightLinks = [
h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, Msg.login_login), h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, [
h('i.fa.fa-sign-in', {'aria-hidden':'true'}),
Msg.login_login
]),
registerLink, registerLink,
]; ];
} else { } else {
rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [ rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [
h('i.fa.fa-user-circle'), h('i.fa.fa-user-circle', {'aria-hidden':'true'}),
" ", " ",
username username
]); ]);
} }
/*
var button = h('button.navbar-toggler', { var button = h('button.navbar-toggler', {
'type':'button', 'type':'button',
/*'data-toggle':'collapse', /*'data-toggle':'collapse',
'data-target':'#menuCollapse', 'data-target':'#menuCollapse',
'aria-controls': 'menuCollapse', 'aria-controls': 'menuCollapse',
'aria-expanded':'false', 'aria-expanded':'false',
'aria-label':'Toggle navigation'*/ 'aria-label':'Toggle navigation'
}, h('i.fa.fa-bars ')); }, h('i.fa.fa-bars ')); */
$(button).click(function () { // XXX button to collapse navbar on small screens
if ($('#menuCollapse').is(':visible')) { // $(button).click(function () {
return void $('#menuCollapse').slideUp(); // if ($('#menuCollapse').is(':visible')) {
} // return void $('#menuCollapse').slideUp();
$('#menuCollapse').slideDown(); // }
}); // $('#menuCollapse').slideDown();
// });
return h('nav.navbar.navbar-expand-lg', return h('nav.navbar.navbar-expand-lg',
h('a.navbar-brand', { href: '/index.html'}, [ // XXX add link back to index.html on footer logo
h('img', { // h('a.navbar-brand', { href: '/index.html'}, [
src: '/customize/CryptPad_logo.svg?', // h('img', {
'aria-hidden': true, // src: '/customize/CryptPad_logo.svg?',
alt: '' // 'aria-hidden': true,
}), 'CryptPad' // alt: ''
]), // }), 'CryptPad'
button, // ]),
h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [ //button, XXX collapse button
h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about), h('div', [
h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, Msg.docs_link), // XXX remove about page
// h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about),
h('a.nav-item.nav-link', { href: '/features.html'}, Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features), h('a.nav-item.nav-link', { href: '/features.html'}, Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features),
h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'},
[h('i.fa.fa-book', {'aria-hidden':'true'}),Msg.docs_link]),
].concat(rightLinks)) ].concat(rightLinks))
); );
}; };

98
customize.dist/pages/index.js
Unescape Escape View File

@ -46,8 +46,7 @@ define([
[ 'code', Msg.type.code], [ 'code', Msg.type.code],
[ 'form', Msg.type.form], [ 'form', Msg.type.form],
[ 'whiteboard', Msg.type.whiteboard], [ 'whiteboard', Msg.type.whiteboard],
[ 'slide', Msg.type.slide], [ 'slide', Msg.type.slide]
[ 'drive', Msg.type.drive]
].filter(function (x) { ].filter(function (x) {
return isAvailableType(x[0]); return isAvailableType(x[0]);
}) })
@ -99,51 +98,28 @@ define([
}); });
} }
var supportText = Pages.setHTML(h('span'), Msg.home_support); var pageLink = function (ref, loc, text) {
Pages.documentationLink(supportText.querySelector('a'), "https://docs.cryptpad.fr/en/how_to_contribute.html"); if (!ref) { return; }
var attrs = {
href: ref,
};
if (!/^\//.test(ref)) {
attrs.target = '_blank';
attrs.rel = 'noopener noreferrer';
}
if (loc) {
attrs['data-localization'] = loc;
text = Msg[loc];
}
return h('a', attrs, text);
};
var opensource = Pages.setHTML(h('p'), Msg.home_opensource); // XXX DB: this may be wrong, pasted over form pages.js
Pages.externalLink(opensource.querySelector('a'), "https://github.com/xwiki-labs/cryptpad"); var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ?
'/imprint.html' : AppConfig.imprint);
var blocks = [ imprintLink = AppConfig.imprint ? pageLink(imprintUrl, 'imprint') : undefined;
h('div.row.cp-page-section', [ privacyLink = pageLink(AppConfig.privacy, 'privacy');
h('div.col-sm-6', termsLink = pageLink(AppConfig.terms, 'terms');
h('img.img-fluid.cp-img-invert', {
src:'/customize/images/shredder.png',
alt:'',
'aria-hidden': 'true'
})
),
h('div.col-sm-6', [
h('h2', Msg.home_privacy_title),
h('p', Msg.home_privacy_text)
])
]),
h('div.row.cp-page-section',
h('div.col-sm-12', [
h('h2', Msg.home_host_title),
h('p'), Msg.home_host
])
),
h('div.row.cp-page-section', [
h('div.col-sm-6', [
h('h2', Msg.home_opensource_title),
opensource,
h('img.small-logo.cp-img-invert', {
src: '/customize/images/logo_AGPLv3.svg',
alt: 'APGL3 License Logo'
})
]),
h('div.col-sm-6', [
h('h2', Msg.home_support_title),
supportText,
subscribeButton,
Pages.crowdfundingButton(function () {
Feedback.send('HOME_SUPPORT_CRYPTPAD');
}),
])
])
];
var notice; var notice;
/* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute. /* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute.
@ -161,21 +137,39 @@ define([
Pages.infopageTopbar(), Pages.infopageTopbar(),
h('div.container.cp-container', [ h('div.container.cp-container', [
h('div.row.cp-home-hero', [ h('div.row.cp-home-hero', [
h('div.cp-title.col-md-7', [ h('div.cp-title.col-md-6', [
h('img', { h('img', {
src: '/customize/CryptPad_logo.svg?' + urlArgs, src: '/customize/CryptPad_logo.svg?' + urlArgs,
'aria-hidden': 'true', 'aria-hidden': 'true',
alt: '' alt: ''
}), }),
h('h1', 'CryptPad'), h('h1', 'CryptPad.fr'), // XXX use instance name
UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase) UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase), // XXX Use instance description
h('div.cp-instance-location', [
h('i.fa.fa-map-pin', {'aria-hidden': 'true'}),
'Encrypted data is hosted in: France (OVH)' // XXX Use instance location
]), ]),
h('div.col-md-5.cp-app-grid', [ termsLink, // XXX DB: insert link to ToS if available
privacyLink, // XXX DB: insert link to privacy policy if available
imprintLink // XXX DB: insert link to imprint if available
]),
h('div.col-md-6', [
h('div.cp-app-grid', [
h('span.cp-app-new', [
h('i.fa.fa-plus'),
Msg.fm_newFile
]),
h('div.cp-app-grid-apps', [
icons, icons,
]) ])
]), ]),
notice, h('a.cp-app-drive', {'href': '/drive/'}, [ // XXX check this is correct
blocks h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}),
'Drive: 1GB' // XXX Use instance default storage
]) // XXX DB TODO: add drive link
])
]),
notice
]), ]),
Pages.infopageFooter(), Pages.infopageFooter(),
]), ]),

3
customize.dist/src/less2/include/alertify.less
Unescape Escape View File

@ -122,6 +122,7 @@
.dialog { .dialog {
& > div { & > div {
background-color: @cp_alertify-bg; background-color: @cp_alertify-bg;
border-radius: @variables_radius_L;
&.half { &.half {
width: 50%; width: 50%;
max-width: 50%; max-width: 50%;
@ -205,6 +206,8 @@
box-sizing: border-box; box-sizing: border-box;
padding: 0 15px; padding: 0 15px;
cursor: pointer; cursor: pointer;
border-top-left-radius: @variables_radius;
border-top-right-radius: @variables_radius;
&:not(.disabled):hover { &:not(.disabled):hover {
background-color: @cp_alertify-hover; background-color: @cp_alertify-hover;
} }

4
customize.dist/src/less2/include/avatar.less
Unescape Escape View File

@ -1,5 +1,6 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.avatar_vars( .avatar_vars(
@width: 30px @width: 30px
) { ) {
@ -24,6 +25,7 @@
font-size: 16px; font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: @variables_radius;
.cp-avatar-default, media-tag { .cp-avatar-default, media-tag {
display: inline-flex; display: inline-flex;
@ -32,6 +34,8 @@
height: @avatar-width; height: @avatar-width;
height: var(--avatar-width); height: var(--avatar-width);
border-radius: @variables_radius;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

4
customize.dist/src/less2/include/checkmark.less
Unescape Escape View File

@ -1,5 +1,6 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./variables.less";
.checkmark_vars( .checkmark_vars(
@size: 20px @size: 20px
@ -39,6 +40,9 @@
align-items: center; align-items: center;
position: relative; position: relative;
.tools_unselectable(); .tools_unselectable();
.cp-checkmark-mark {
border-radius: @variables_radius;
}
& > a { & > a {
margin-left: 0.25em; margin-left: 0.25em;

18
customize.dist/src/less2/include/colortheme-dark.less
Unescape Escape View File

@ -168,11 +168,13 @@
@cp_buttons-cancel-border: @cryptpad_color_grey_400; @cp_buttons-cancel-border: @cryptpad_color_grey_400;
// Sidebar layout // Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey_850; @cp_sidebar-left-bg: @cryptpad_color_grey_900;
@cp_sidebar-left-fg: @cryptpad_text_col; @cp_sidebar-left-fg: @cryptpad_text_col;
@cp_sidebar-left-item-bg: @cryptpad_color_grey_800;
@cp_sidebar-right-bg: @cryptpad_color_grey_900; @cp_sidebar-right-bg: @cryptpad_color_grey_900;
@cp_sidebar-right-fg: @cryptpad_text_col; @cp_sidebar-right-fg: @cryptpad_text_col;
@cp_sidebar-left-active: @cp_sidebar-right-bg; @cp_sidebar-left-active: @cryptpad_color_grey_400;
@cp_sidebar-left-active-fg: @cryptpad_color_grey_900; // XXX create text_col_inv ?
@cp_sidebar-hint: fade(@cryptpad_text_col, 80%); @cp_sidebar-hint: fade(@cryptpad_text_col, 80%);
// Drive // Drive
@ -232,6 +234,7 @@
// Pad Creation Screen // Pad Creation Screen
@cp_creation-bg: @cryptpad_color_grey_800; @cp_creation-bg: @cryptpad_color_grey_800;
@cp_creation-fg: @cryptpad_text_col; @cp_creation-fg: @cryptpad_text_col;
@cp_creation-template: @cryptpad_color_grey_700;
@cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-bg: @cryptpad_color_brand;
@cp_creation-button-fg: @cryptpad_color_white; @cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @cryptpad_color_blue; @cp_creation-error-bg: @cryptpad_color_blue;
@ -259,7 +262,7 @@
@cp_static-fg: @cryptpad_text_col; @cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand_300; @cp_static-link: @cryptpad_color_brand_300;
@cp_static-title: @cryptpad_color_brand; @cp_static-title: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_grey_950; @cp_static-footer: fade(@cryptpad_color_brand, 20%);
@cp_static-footer-border: @cryptpad_color_grey_600; @cp_static-footer-border: @cryptpad_color_grey_600;
@cp_static-topbar-fg: @cryptpad_color_brand_300; @cp_static-topbar-fg: @cryptpad_color_brand_300;
@cp_static-card-bg: @cryptpad_color_grey_800; @cp_static-card-bg: @cryptpad_color_grey_800;
@ -293,9 +296,10 @@
@cp_support-header-bg: @cryptpad_color_grey_700; @cp_support-header-bg: @cryptpad_color_grey_700;
// Toolbar // Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_850; @cp_toolbar-bg: @cryptpad_color_grey_900;
@cp_toolbar-fg: @cryptpad_text_col; @cp_toolbar-fg: @cryptpad_text_col;
@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-logo-bg: @cryptpad_color_grey_200;
@cp_toolbar-fade1: fade(@cryptpad_text_col, 10%); @cp_toolbar-fade1: fade(@cryptpad_text_col, 10%);
@ -305,7 +309,7 @@
@cp_history-line-bg: @cryptpad_color_grey_900; @cp_history-line-bg: @cryptpad_color_grey_900;
@cp_history-bg1: @cryptpad_color_grey_600; @cp_history-bg1: @cryptpad_color_grey_600;
@cp_history-bg2: @cryptpad_color_grey_800; @cp_history-bg2: @cryptpad_color_grey_800;
@cp_history-fg: @cp_toolbar-bottom-fg; @cp_history-fg: @cp_toolbar-fg;
// Tokenfield // Tokenfield
@cp_token-bg: @cryptpad_color_grey_700; @cp_token-bg: @cryptpad_color_grey_700;
@ -417,7 +421,7 @@
// Teams // Teams
@cp_teams-card-bg: @cryptpad_color_grey_800; @cp_teams-card-bg: @cryptpad_color_grey_800;
@cp_teams-leftside-bg: darken(@cryptpad_color_grey_800, 10%); @cp_teams-leftside-bg: @cp_sidebar-left-bg;
@cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); @cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%);
@cp_teams-invite-fg: @cryptpad_text_col; @cp_teams-invite-fg: @cryptpad_text_col;
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); @cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);

20
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -167,11 +167,13 @@
@cp_buttons-cancel-border: #949494; @cp_buttons-cancel-border: #949494;
// Sidebar layout // Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_grey_200; @cp_sidebar-left-bg: @cryptpad_color_white;
@cp_sidebar-left-fg: @cryptpad_text_col; @cp_sidebar-left-fg: @cryptpad_text_col;
@cp_sidebar-left-item-bg: @cryptpad_color_grey_200;
@cp_sidebar-right-bg: @cryptpad_color_white; @cp_sidebar-right-bg: @cryptpad_color_white;
@cp_sidebar-right-fg: @cryptpad_text_col; @cp_sidebar-right-fg: @cryptpad_text_col;
@cp_sidebar-left-active: @cp_sidebar-right-bg; @cp_sidebar-left-active: @cryptpad_color_grey_700;
@cp_sidebar-left-active-fg: @cryptpad_color_grey_200;
@cp_sidebar-hint: @cryptpad_color_grey_600; @cp_sidebar-hint: @cryptpad_color_grey_600;
// Drive // Drive
@ -231,6 +233,7 @@
// Pad Creation Screen // Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white; @cp_creation-bg: @cryptpad_color_white;
@cp_creation-fg: @cryptpad_text_col; @cp_creation-fg: @cryptpad_text_col;
@cp_creation-template: @cryptpad_color_grey_100;
@cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-bg: @cryptpad_color_brand;
@cp_creation-button-fg: @cryptpad_color_white; @cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @cryptpad_color_blue; @cp_creation-error-bg: @cryptpad_color_blue;
@ -258,7 +261,7 @@
@cp_static-fg: @cryptpad_text_col; @cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand; @cp_static-link: @cryptpad_color_brand;
@cp_static-title: @cryptpad_color_brand; @cp_static-title: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_grey_300; @cp_static-footer: fade(@cryptpad_color_brand_300, 30%);
@cp_static-footer-border: @cryptpad_color_white; @cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand; @cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-card-bg: @cryptpad_color_white; @cp_static-card-bg: @cryptpad_color_white;
@ -266,7 +269,7 @@
// Limit // Limit
@cp_limit-fg: @cryptpad_text_col; @cp_limit-fg: @cryptpad_text_col;
@cp-limit-bar-bg: @cryptpad_color_white; @cp-limit-bar-bg: @cryptpad_color_grey_200;
@cp-limit-bar-normal: @cryptpad_color_green; @cp-limit-bar-normal: @cryptpad_color_green;
@cp-limit-bar-warning: @cryptpad_color_orange; @cp-limit-bar-warning: @cryptpad_color_orange;
@cp-limit-bar-above: @cryptpad_color_red; @cp-limit-bar-above: @cryptpad_color_red;
@ -292,8 +295,9 @@
@cp_support-header-bg: @cryptpad_color_grey_300; @cp_support-header-bg: @cryptpad_color_grey_300;
// Toolbar // Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_200; @cp_toolbar-bg: @cryptpad_color_white;
@cp_toolbar-fg: @cryptpad_text_col; @cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-bg: @cryptpad_color_grey_200;
@cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_white; @cp_toolbar-logo-bg: @cryptpad_color_white;
@ -304,7 +308,7 @@
@cp_history-line-bg: @cryptpad_color_white; @cp_history-line-bg: @cryptpad_color_white;
@cp_history-bg1: #DDD; @cp_history-bg1: #DDD;
@cp_history-bg2: #BBB; @cp_history-bg2: #BBB;
@cp_history-fg: @cp_toolbar-bottom-fg; @cp_history-fg: @cp_toolbar-fg;
// Tokenfield // Tokenfield
@cp_token-bg: @cryptpad_color_grey_400; @cp_token-bg: @cryptpad_color_grey_400;
@ -321,7 +325,7 @@
@cp_shadow-color: fade(@cryptpad_color_black, 30%); @cp_shadow-color: fade(@cryptpad_color_black, 30%);
// Apps // Apps
@cp_app-bg: @cryptpad_color_grey_100; @cp_app-bg: @cryptpad_color_white;
@cp_app-fg: @cryptpad_text_col; @cp_app-fg: @cryptpad_text_col;
// Accounts // Accounts
@ -416,7 +420,7 @@
// Teams // Teams
@cp_teams-card-bg: @cryptpad_color_grey_300; @cp_teams-card-bg: @cryptpad_color_grey_300;
@cp_teams-leftside-bg: darken(@cryptpad_color_grey_200, 5%); @cp_teams-leftside-bg: @cp_sidebar-left-bg;
@cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); @cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%);
@cp_teams-invite-fg: @cryptpad_text_col; @cp_teams-invite-fg: @cryptpad_text_col;
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); @cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);

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

@ -98,6 +98,8 @@
background-color: @cp_comments-bg; background-color: @cp_comments-bg;
position: relative; position: relative;
padding: 5px; padding: 5px;
border-top-left-radius: @variables_radius;
border-top-right-radius: @variables_radius;
box-sizing: content-box; box-sizing: content-box;
.avatar_main(40px); .avatar_main(40px);
.cp-comment-metadata { .cp-comment-metadata {
@ -114,8 +116,8 @@
cursor: pointer; cursor: pointer;
outline: none; outline: none;
position: absolute; position: absolute;
right: 0; right: 5px;
top: 0; top: 5px;
width: 20px; width: 20px;
height: 20px; height: 20px;
text-align: center; text-align: center;
@ -128,6 +130,8 @@
.cp-comment-content { .cp-comment-content {
background-color: @cp_comments-bg; background-color: @cp_comments-bg;
padding: 0px 5px 5px 5px; padding: 0px 5px 5px 5px;
border-bottom-left-radius: @variables_radius;
border-bottom-right-radius: @variables_radius;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
} }
@ -150,6 +154,7 @@
} }
.cp-comment-active { .cp-comment-active {
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
border-radius: @variables_radius;
.cp-comment-actions { .cp-comment-actions {
display: block; display: block;
} }

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

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.contextmenu_main() { .contextmenu_main() {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -11,11 +12,14 @@
& > ul { & > ul {
border: 1px solid @cp_context-border; border: 1px solid @cp_context-border;
background-color: @cp_context-bg; background-color: @cp_context-bg;
border-radius: 0px; border-radius: @variables_radius;
.dropdown-divider { .dropdown-divider {
border-top: 1px solid @cp_context-border; border-top: 1px solid @cp_context-border;
} }
} }
.dropdown-menu {
padding: 6px 0px;
}
li { li {
padding: 0; padding: 0;
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
@ -38,7 +42,7 @@
top: -0.7rem; top: -0.7rem;
left: 100%; left: 100%;
background-color: @cp_context-bg; background-color: @cp_context-bg;
border-radius: 0px; border-radius: @variables_radius;
border: 1px solid @cp_context-border; border: 1px solid @cp_context-border;
} }
} }
@ -46,6 +50,7 @@
cursor: pointer; cursor: pointer;
color: @cp_context-fg; color: @cp_context-fg;
padding-left: 10px; padding-left: 10px;
border-radius: @variables_radius;
&:hover { &:hover {
background-color: @cp_context-bg-hover; background-color: @cp_context-bg-hover;
color: @cp_context-fg; color: @cp_context-fg;

3
customize.dist/src/less2/include/corner.less
Unescape Escape View File

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.corner_main() { .corner_main() {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -40,6 +41,7 @@
transform-origin: bottom right; transform-origin: bottom right;
animation: appear 0.8s ease-in-out; animation: appear 0.8s ease-in-out;
border: 1px solid @corner-fg; border: 1px solid @corner-fg;
border-radius: @variables_radius;
box-shadow: 0 0 10px 0 @cp_shadow-color; box-shadow: 0 0 10px 0 @cp_shadow-color;
&.cp-corner-alt { &.cp-corner-alt {
@ -116,6 +118,7 @@
} }
text-transform: uppercase; text-transform: uppercase;
border: 1px solid @corner-fg; border: 1px solid @corner-fg;
border-radius: @variables_radius;
.fa, .cptools { .fa, .cptools {
margin-right: 0.3em; margin-right: 0.3em;
} }

11
customize.dist/src/less2/include/creation.less
Unescape Escape View File

@ -3,6 +3,7 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) './icon-colors.less'; @import (reference) './icon-colors.less';
@import (reference) "./avatar.less"; @import (reference) "./avatar.less";
@import (reference) "./variables.less";
.creation_vars( .creation_vars(
@bg-color: @colortheme_apps[default] @bg-color: @colortheme_apps[default]
@ -63,6 +64,7 @@
width: 700px; width: 700px;
max-width: 90vw; max-width: 90vw;
height: 500px; height: 500px;
border-radius: @variables_radius_L;
max-height: ~"calc(100vh - 20px)"; max-height: ~"calc(100vh - 20px)";
margin: 0px; margin: 0px;
flex-shrink: 0; flex-shrink: 0;
@ -131,6 +133,7 @@
color: @cp_creation-button-fg; color: @cp_creation-button-fg;
margin: 3px 10px; margin: 3px 10px;
border: none; border: none;
border-radius: @variables_radius;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-transform: uppercase; text-transform: uppercase;
@ -256,6 +259,7 @@
} }
select { select {
margin-right: 5px; margin-right: 5px;
border-radius: @variables_radius;
} }
} }
&.active { &.active {
@ -325,11 +329,12 @@
max-height: 159px; max-height: 159px;
align-items: center; align-items: center;
.cp-creation-template-element { .cp-creation-template-element {
box-shadow: 2px 2px 7px @cp_shadow-color; box-shadow: 0px 0px 5px 1px #00000030; // XXX
width: 300px; width: 300px;
max-width: calc(100% - 10px); max-width: calc(100% - 10px);
padding: 2px; padding: 5px;
margin: 5px; margin: 5px;
border-radius: @variables_radius;
display: inline-flex; display: inline-flex;
box-sizing: border-box; box-sizing: border-box;
@ -337,7 +342,7 @@
text-align: left; text-align: left;
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
background-color: @cp_creation-template;
color: @creation-color; color: @creation-color;
color: var(--creation-color); color: var(--creation-color);
border: 1px solid transparent; border: 1px solid transparent;

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

@ -270,7 +270,7 @@
white-space: nowrap; white-space: nowrap;
max-width: 500px; max-width: 500px;
min-width: 200px; min-width: 200px;
padding: 0px; padding: 10px 0px 0px 0px;
color: @cp_sidebar-left-fg; color: @cp_sidebar-left-fg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -279,6 +279,7 @@
.cp-app-drive-tree-categories-container { .cp-app-drive-tree-categories-container {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding: 0px 5px;
} }
img.cp-app-drive-icon { img.cp-app-drive-icon {
margin-bottom: 3px; margin-bottom: 3px;
@ -288,6 +289,8 @@
margin-top: 15px; margin-top: 15px;
//padding: 0 0 0 20px; //padding: 0 0 0 20px;
padding: 0; padding: 0;
background-color: @cp_sidebar-left-item-bg;
border-radius: @variables_radius;
cursor: auto; cursor: auto;
&li, li { &li, li {
padding: 0; padding: 0;
@ -307,7 +310,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
//min-width: ~"calc(100% + 5px)"; //min-width: ~"calc(100% + 5px)";
.leftside-menu-category_main(); .leftside-menu-category_main();
width: ~"calc(100% + 5px)"; //width: ~"calc(100% + 5px)"; // XXX remove
margin: 0; margin: 0;
//margin-bottom: -6px; //margin-bottom: -6px;
display: flex; display: flex;
@ -318,8 +321,9 @@
.fa, .cptools { .fa, .cptools {
display: inline-block; display: inline-block;
min-width: 0; min-width: 0;
width: 25px; width: 20px;
margin-right: 0px; margin-right: 0px;
z-index: 99;
} }
.cp-app-drive-element { .cp-app-drive-element {
flex: 1; flex: 1;
@ -335,7 +339,10 @@
} }
.cp-app-drive-tree-category { .cp-app-drive-tree-category {
margin: 0; margin: 0;
margin-top: 15px; margin-top: 10px;
background-color: @cp_sidebar-left-item-bg;
border-radius: @variables_radius;
box-shadow: 0px 0px 5px 1px #00000030; // XXX
.cp-app-drive-tree-root { .cp-app-drive-tree-root {
.fa-trash-o { .fa-trash-o {
padding-left: 2px; padding-left: 2px;
@ -361,11 +368,11 @@
margin-left: -10px; margin-left: -10px;
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
left: -20px; left: -17px;
top: 10px; top: 11px;
width: 11px !important; width: 11px !important;
height: 11px !important; height: 11px !important;
background-color: @cp_sidebar-left-bg; background-color: @cp_sidebar-left-item-bg;
padding: 0; padding: 0;
margin: 0; margin: 0;
z-index: 10; z-index: 10;
@ -376,17 +383,36 @@
} }
} }
.cp-app-drive-tree-docs { .cp-app-drive-tree-docs {
box-shadow: 0px 0px 5px 1px #00000030; // XXX
padding: 2px;
.cp-app-drive-element-row {
&.cp-leftside-active {
.cp-app-drive-icon-expcol {
color: @cryptpad_text_col; // +/- expand icon for folders
}
}
}
.cp-app-drive-tree-root > .cp-app-drive-element-row {
margin-left: 0px;
&.cp-app-drive-element-active {
.cp-app-drive-icon-expcol {
color: @cp_sidebar-left-active-fg; // +/- expand icon for drive
}
}
}
.cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol {
position: relative; position: relative;
top: 0; top: 0;
left: -10px; left: -10px;
background-color: transparent;
} }
.cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
margin-left: -5px; margin-left: -5px;
} }
.cp-app-drive-tree-root { .cp-app-drive-tree-root {
&> .cp-app-drive-element-row { &> .cp-app-drive-element-row {
padding-left: 20px; padding-left: 15px;
} }
&> ul { &> ul {
padding-left: 30px; padding-left: 30px;
@ -403,8 +429,8 @@
position: relative; position: relative;
&:before { &:before {
position: absolute; position: absolute;
left: -15px; left: -12px;
top: -11px; top: -10px;
content: ''; content: '';
display: block; display: block;
border-left: 1px solid @cp_drive-tree-branch; border-left: 1px solid @cp_drive-tree-branch;
@ -414,7 +440,7 @@
} }
&:after { &:after {
position: absolute; position: absolute;
left: -15px; left: -12px;
bottom: -7px; bottom: -7px;
content: ''; content: '';
display: block; display: block;
@ -448,6 +474,7 @@
box-sizing: border-box; box-sizing: border-box;
background: @cp_sidebar-right-bg; background: @cp_sidebar-right-bg;
color: @cp_sidebar-right-fg; color: @cp_sidebar-right-fg;
padding-top: 10px;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
display: flex; display: flex;
@ -459,7 +486,7 @@
position: absolute; position: absolute;
z-index: 50; z-index: 50;
} }
&.cp-app-drive-readonly { &.cp-app-drive-readonly { // XXX DB find new appearance for disabled/read-only drive?
background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%)); background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
} }
h1 { h1 {
@ -570,6 +597,7 @@
} }
.drive_fileIcon; .drive_fileIcon;
li { li {
border-radius: @variables_radius;
&.cp-app-drive-element { &.cp-app-drive-element {
position: relative; position: relative;
} }
@ -639,6 +667,7 @@
} }
li { li {
display: flex; display: flex;
border-radius: @variables_radius;
input { input {
border: 1px solid transparent; border: 1px solid transparent;
margin: 0; margin: 0;
@ -727,6 +756,7 @@
} }
&> span { &> span {
padding: 14px 5px; padding: 14px 5px;
border-radius: @variables_radius;
&.cp-app-drive-sort-clickable { &.cp-app-drive-sort-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -912,6 +942,18 @@
.cp-toolbar-bottom { .cp-toolbar-bottom {
.cp-toolbar-bottom-left {
@drive-light: lighten(@cryptpad_color_brand, 30%);
.cp-app-drive-toolbar-new {
border-radius: @variables_radius;
color: @cryptpad_color_grey_900;
border-color: @drive-light;
background-color: @drive-light;
&:hover {
background-color: fade(@drive-light, 80%);
}
}
}
.cp-toolbar-bottom-right { .cp-toolbar-bottom-right {
.fa-history { order: 50; } .fa-history { order: 50; }
// .fa-list, .fa-th-large, // .fa-list, .fa-th-large,

7
customize.dist/src/less2/include/dropdown.less
Unescape Escape View File

@ -60,6 +60,8 @@
position: absolute; position: absolute;
background-color: @cp_dropdown-bg; background-color: @cp_dropdown-bg;
min-width: 250px; min-width: 250px;
padding: 5px;
border-radius: @variables_radius;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; //Z dropdown content z-index: 1000; //Z dropdown content
max-height: 300px; max-height: 300px;
@ -77,7 +79,8 @@
& > a, & > span { & > a, & > span {
color: @cp_dropdown-fg; color: @cp_dropdown-fg;
padding: 5px 16px; border-radius: @variables_radius;
padding: 5px;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
@ -160,7 +163,7 @@
height: 1px; height: 1px;
background: @cp_dropdown-bg-active; background: @cp_dropdown-bg-active;
border: 0 !important; border: 0 !important;
border-top: 1px solid rgba(0,0,0,.1) !important; //border-top: 1px solid rgba(0,0,0,.1) !important; // XXX
& + hr { & + hr {
display: none; display: none;
} }

3
customize.dist/src/less2/include/fileupload.less
Unescape Escape View File

@ -1,6 +1,7 @@
@import (reference) "./browser.less"; @import (reference) "./browser.less";
@import (reference) './colortheme-all.less'; @import (reference) './colortheme-all.less';
@import (reference) './modal.less'; @import (reference) './modal.less';
@import (reference) './variables.less';
.fileupload_main () { .fileupload_main () {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -13,6 +14,7 @@
position: absolute; position: absolute;
right: 10vw; right: 10vw;
bottom: 10vh; bottom: 10vh;
border-radius: @variables_radius;
box-sizing: border-box; box-sizing: border-box;
z-index: 100001; //Z file upload table container: just above the file picker z-index: 100001; //Z file upload table container: just above the file picker
display: none; display: none;
@ -88,6 +90,7 @@
height: 100%; height: 100%;
background-color: @cp_upload-progress; background-color: @cp_upload-progress;
z-index: -1; //Z file upload progress container z-index: -1; //Z file upload progress container
border-radius: @variables_radius;
} }
.cp-fileupload-table-cancel { .cp-fileupload-table-cancel {
text-align: center; text-align: center;

13
customize.dist/src/less2/include/forms.less
Unescape Escape View File

@ -14,6 +14,7 @@
color: @cp_forms-fg; color: @cp_forms-fg;
background-color: @cp_forms-bg; background-color: @cp_forms-bg;
border: 1px solid @cp_forms-border; border: 1px solid @cp_forms-border;
border-radius: @variables_radius;
font-size: 100%; font-size: 100%;
padding: @alertify_padding-base; padding: @alertify_padding-base;
&:not(.tui-full-calendar-content) { &:not(.tui-full-calendar-content) {
@ -39,6 +40,7 @@
input { input {
margin: 0 !important; margin: 0 !important;
flex: 1; flex: 1;
border-radius: @variables_radius 0 0 @variables_radius !important;
min-width: 0; min-width: 0;
} }
span { span {
@ -47,6 +49,7 @@
height: 100%; height: 100%;
margin-left: -1px; margin-left: -1px;
text-transform: unset !important; text-transform: unset !important;
border-radius: 0 @variables_radius @variables_radius 0;
} }
} }
} }
@ -79,11 +82,15 @@
} }
button { button {
margin: 0 !important; margin: 0 !important;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
} }
.cp-button-timer { .cp-button-timer {
height: 3px; height: 3px;
& > div { & > div {
height: 100%; height: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background-color: @cp_buttons-primary; background-color: @cp_buttons-primary;
&.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt { &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt {
background-color: @cp_buttons-red; background-color: @cp_buttons-red;
@ -109,7 +116,7 @@
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
border-radius: 0; border-radius: @variables_radius;
transition: none; transition: none;
i, .fa, .cptools { i, .fa, .cptools {
@ -230,7 +237,7 @@
margin: 0px 0px @alertify_padding-base 0px; margin: 0px 0px @alertify_padding-base 0px;
font-size: 12px; font-size: 12px;
padding: 5px; padding: 5px;
border-radius: 0px; border-radius: @variables_radius;
i { i {
margin-right: 10px; margin-right: 10px;
} }
@ -303,7 +310,7 @@
.flatpickr-calendar { .flatpickr-calendar {
background: @cp_flatpickr-bg; background: @cp_flatpickr-bg;
color: @cryptpad_text_col; color: @cryptpad_text_col;
border-radius: 0; border-radius: @variables_radius;
box-shadow: @variables_shadow; box-shadow: @variables_shadow;
-webkit-box-shadow: @variables_shadow; -webkit-box-shadow: @variables_shadow;
&.arrowTop::before, &.arrowTop::after { &.arrowTop::before, &.arrowTop::after {

103
customize.dist/src/less2/include/infopages.less
Unescape Escape View File

@ -1,6 +1,9 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./font.less"; @import (reference) "./font.less";
@infopages-radius: 5px;
@infopages-radius-L: 10px;
.infopages_link () { .infopages_link () {
text-decoration: none; text-decoration: none;
color: @cryptpad_color_link; color: @cryptpad_color_link;
@ -52,7 +55,7 @@ body.html {
padding-top: @infopages_padding; padding-top: @infopages_padding;
padding-bottom: @infopages_padding; padding-bottom: @infopages_padding;
min-height: 75vh; min-height: 75vh;
max-width: 950px; max-width: 1200px;
h1 { h1 {
font-size: 3em; font-size: 3em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -144,54 +147,102 @@ body.html {
footer { footer {
background-color: @cp_static-footer; background-color: @cp_static-footer;
padding-top: 20px; padding: 10px;
align-self: normal; // override align-items:center from parent in index.html align-self: normal; // override align-items:center from parent in index.html
box-shadow: inset 0px 7px 15px -7px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: space-between;
// .container {
// margin-bottom: 20px;
// a {
// color: @cp_static-link;
// &:visited {
// color: @cp_static-link;
// }
// }
// }
.cp-footer-left, .cp-footer-right {
display: flex;
flex-direction: row;
align-items: center;
a {
margin-left: 10px;
}
}
.container {
margin-bottom: 20px;
a { a {
color: @cp_static-link; background-color: @cp_static-card-bg;
&:visited { border-radius: @infopages-radius;
color: @cp_static-link; padding: 0.5em 0.7em;
* {
display: inline;
}
i {
margin-right: 5px;
} }
&:hover {
color: @cryptpad_text_col;
} }
} }
.cp-logo-foot { .cp-logo-foot {
display: flex; display: flex;
flex-flow: column; flex-flow: row;
width: 100%; width: 100%;
align-items: center; align-items: center;
margin-right: 20px;
img { img {
max-width: 60px; max-height: 40px;
display: block; display: block;
margin-right: 10px;
} }
.logo-font { .logo-font {
display: block; display: block;
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
font-size: 1.5rem; font-size: 1.5rem;
color: @cp_static-title; color: @cp_static-title;
margin-bottom: 10px; height: 40px;
} }
} }
.cp-version-footer {
background-color: @cp_static-footer; .cp-footer-language{
display: flex; margin-right: 10px;
flex-flow: column; i {
align-items: center; font-size: 1.3em;
padding: 0.5em; margin-right: 5px;
border-top: 1px solid @cp_static-footer-border; }
select { select {
min-width: 0; min-width: 0;
margin-bottom: 10px; background-color: @cp_static-card-bg;
color: @cryptpad_text_col;
border: 0px;
border-radius: @infopages-radius;
padding: 0.5em 0.7em;
}
} }
.cp-footer-version {
font-family: 'IBM Plex Mono';
} }
// .cp-version-footer {
// background-color: @cp_static-footer;
// display: flex;
// flex-flow: column;
// align-items: center;
// padding: 0.5em;
// border-top: 1px solid @cp_static-footer-border;
// select {
// min-width: 0;
// margin-bottom: 10px;
// }
// }
} }
// navigation top bar // navigation top bar
.navbar { .navbar {
width: 100%; width: 100%;
color: @cp_static-topbar-fg; color: @cp_static-topbar-fg;
justify-content: flex-end;
.navbar-brand { .navbar-brand {
display: block; display: block;
height: 50px; height: 50px;
@ -208,20 +259,32 @@ body.html {
margin-right: 0; margin-right: 0;
} }
a { a {
border: 2px solid transparent; //border: 2px solid transparent;
white-space: nowrap; white-space: nowrap;
color: @cp_static-title; color: @cp_static-title;
background-color: @cp_static-card-bg;
border-radius: @infopages-radius;
} }
.nav-link { .nav-link {
padding: 0.5em 0.7em; padding: 0.5em 0.7em;
margin-left: 10px;
color: @cp_static-link; color: @cp_static-link;
display: inline-block;
&:hover { &:hover {
color: @cryptpad_text_col; color: @cryptpad_text_col;
} }
i {
margin-right: 5px;
}
} }
.cp-register-btn { .cp-register-btn {
border: 2px solid @cp_static-topbar-fg; background-color: @cp_static-topbar-fg;
color: @cp_static-bg;
display: inline-block; display: inline-block;
&:hover {
background-color: @cp_static-card-bg;
color: @cryptpad_text_col;
}
} }
button:focus { button:focus {
outline: none; outline: none;

9
customize.dist/src/less2/include/leftside-menu.less
Unescape Escape View File

@ -4,20 +4,23 @@
.leftside-menu-category_main() { .leftside-menu-category_main() {
.unselectable_make(); .unselectable_make();
padding: 5px 15px; padding: 5px;
margin: 15px 0; margin: 10px 0;
cursor: pointer; cursor: pointer;
height: @variables_bar-height; height: @variables_bar-height;
border-radius: @variables_radius;
background-color: @cp_sidebar-left-item-bg;
.fa, .cptools { .fa, .cptools {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
margin-right: 5px; margin-right: 5px;
min-width: 25px; min-width: 20px;
} }
&:hover { &:hover {
background: fade(@cryptpad_text_col, 10%); background: fade(@cryptpad_text_col, 10%);
} }
&.cp-leftside-active { &.cp-leftside-active {
background: @cp_sidebar-left-active; background: @cp_sidebar-left-active;
color: @cp_sidebar-left-active-fg;
} }
} }

4
customize.dist/src/less2/include/limit-bar.less
Unescape Escape View File

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.limit-bar_main () { .limit-bar_main () {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -23,6 +24,7 @@
width: ~"calc(100% - 10px)"; width: ~"calc(100% - 10px)";
height: 10px; height: 10px;
overflow: hidden; overflow: hidden;
border-radius: @variables_radius;
.cp-limit-usage { .cp-limit-usage {
height: 10px; height: 10px;
display: inline-block; display: inline-block;
@ -65,7 +67,7 @@
padding-bottom: 0; padding-bottom: 0;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
border-radius: 0px; border-radius: @variables_radius;
} }
} }
} }

1
customize.dist/src/less2/include/loading.less
Unescape Escape View File

@ -180,6 +180,7 @@
height: 24px; height: 24px;
background: @cp_loading-progress-bg; background: @cp_loading-progress-bg;
border: 1px solid @cp_loading-progress-bar-bg; border: 1px solid @cp_loading-progress-bar-bg;
border-radius: @variables_radius;
} }
.cp-loading-progress-bar-value { .cp-loading-progress-bar-value {
height: 100%; height: 100%;

5
customize.dist/src/less2/include/modals-ui-elements.less
Unescape Escape View File

@ -41,6 +41,7 @@
.cp-app-prop-size-container { .cp-app-prop-size-container {
height: 20px; height: 20px;
background-color: @cryptpad_color_brand; background-color: @cryptpad_color_brand;
border-radius: @variables_radius;
margin: 10px 0; margin: 10px 0;
padding: 0; padding: 0;
div { div {
@ -48,6 +49,8 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: @cryptpad_color_grey_500; background-color: @cryptpad_color_grey_500;
border-top-left-radius: @variables_radius;
border-bottom-left-radius: @variables_radius;
} }
} }
.cp-app-prop-size-legend { .cp-app-prop-size-legend {
@ -65,6 +68,7 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
margin-right: 10px; margin-right: 10px;
border-radius: @variables_radius;
} }
.cp-app-prop-history-size-color { .cp-app-prop-history-size-color {
background-color: @cryptpad_color_grey_500; background-color: @cryptpad_color_grey_500;
@ -159,6 +163,7 @@
align-items: center; align-items: center;
padding: 5px 0; padding: 5px 0;
outline: none; outline: none;
border-radius: @variables_radius;
& > i { & > i {
margin-left: @snapshot_spacing; margin-left: @snapshot_spacing;
text-align: center; text-align: center;

8
customize.dist/src/less2/include/sidebar-layout.less
Unescape Escape View File

@ -24,12 +24,14 @@
background: @cp_sidebar-left-bg; background: @cp_sidebar-left-bg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
padding: 0px 5px;
.cp-sidebarlayout-categories { .cp-sidebarlayout-categories {
flex: 1; flex: 1;
.cp-sidebarlayout-category { .cp-sidebarlayout-category {
display: flex; display: flex;
align-items: center; align-items: center;
.leftside-menu-category_main(); .leftside-menu-category_main();
box-shadow: 0px 0px 5px 1px #00000030; // XXX
} }
} }
&.cp-leftside-narrow { &.cp-leftside-narrow {
@ -111,10 +113,12 @@
//border-radius: 0.25em 0 0 0.25em; //border-radius: 0.25em 0 0 0.25em;
border: 1px solid @cryptpad_color_grey_500; border: 1px solid @cryptpad_color_grey_500;
border-right: 0px; border-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
} }
button { button {
//border-radius: 0 0.25em 0.25em 0; border-top-left-radius: 0px;
//border: 1px solid #adadad; border-bottom-left-radius: 0px;
border-left: 0px; border-left: 0px;
height: 40px; height: 40px;
margin: 0 !important; margin: 0 !important;

6
customize.dist/src/less2/include/support.less
Unescape Escape View File

@ -42,10 +42,11 @@
width: 1200px; width: 1200px;
max-width: 90%; max-width: 90%;
margin: 5px auto; margin: 5px auto;
border-radius: @variables_radius;
.cp-support-list-message { .cp-support-list-message {
background-color: @msg-bg; background-color: @msg-bg;
margin: 2px; padding: 5px 5px;
padding: 2px 5px; border-radius: @variables_radius;
.cp-support-fromme { .cp-support-fromme {
background-color: @fromme-bg; background-color: @fromme-bg;
} }
@ -73,6 +74,7 @@
.cp-support-list-actions { .cp-support-list-actions {
display: flex; display: flex;
order: 3; order: 3;
margin-top: 5px;
.cp-support-hide { .cp-support-hide {
display: none; display: none;
} }

10
customize.dist/src/less2/include/tokenfield.less
Unescape Escape View File

@ -1,5 +1,6 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./variables.less";
.tokenfield_main () { .tokenfield_main () {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -35,6 +36,12 @@
flex: 1; flex: 1;
min-width: 0 !important; min-width: 0 !important;
} }
button {
// no radius in input + button combo
// input .token-input is styled at the bottom of this file
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
} }
.token { .token {
box-sizing: border-box; box-sizing: border-box;
@ -45,6 +52,7 @@
margin: 2px 0; margin: 2px 0;
margin-right: 5px; margin-right: 5px;
height: 24px; height: 24px;
border-radius: @variables_radius;
vertical-align: middle; vertical-align: middle;
cursor: default; cursor: default;
color: @cp_token-fg; color: @cp_token-fg;
@ -92,6 +100,8 @@
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
min-width: 100% !important; min-width: 100% !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;

14
customize.dist/src/less2/include/toolbar-history.less
Unescape Escape View File

@ -1,4 +1,5 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.history_main () { .history_main () {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -88,13 +89,20 @@
} }
button { button {
margin: 0 5px; margin: 0 5px;
border: 1px solid @cryptpad_text_col; border: 1px solid @cp_toolbar-fg;
background-color: @cp_toolbar-bg;
color: @cp_toolbar-fg;
border-radius: @variables_radius;
text-transform: uppercase; text-transform: uppercase;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
.fa:not(:last-child) { .fa:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
&:hover {
// XXX DB: check hover in light/dark themes
background-color: fade(@cp_toolbar-fg, 30%);
}
&:disabled { &:disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
opacity: 0.6; opacity: 0.6;
@ -233,9 +241,11 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 40px; margin: 5px 0px 5px 40px;
button { button {
width: 50px; width: 50px;
color: @cp_toolbar-fg;
border-radius: @variables_radius;
.fa:first-child:not(:last-child) { .fa:first-child:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }

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

@ -15,9 +15,12 @@
@bg-color: @colortheme_apps[default], // color of the toolbar background @bg-color: @colortheme_apps[default], // color of the toolbar background
) { ) {
@toolbar-bg-color: @bg-color; @toolbar-bg-color: @bg-color;
@desat-color: desaturate(@bg-color, 20%); // XXX Todo: clean up unused variables
@toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%)); // XXX: check contrasts of app colors used as btn background
@toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%)); // @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: lighten(@bg-color, 30%);
@toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%);
}; };
.toolbar_main ( .toolbar_main (
@ -27,8 +30,9 @@
.toolbar_vars(@bg-color); .toolbar_vars(@bg-color);
--toolbar-bg-color: @toolbar-bg-color; --toolbar-bg-color: @toolbar-bg-color;
--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();
@ -392,7 +396,6 @@
//display: inline-block; //display: inline-block;
button { button {
height: 100%; height: 100%;
border-radius: 0;
margin: 0; margin: 0;
background: transparent; background: transparent;
} }
@ -439,6 +442,7 @@
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;
@ -503,9 +507,12 @@
.cp-toolbar-link { .cp-toolbar-link {
height: @toolbar_line-height; height: @toolbar_line-height;
width: @toolbar_line-height; width: @toolbar_line-height;
transform: scale(0.5); //transform: scale(0.5);
.cp-toolbar-link-logo { .cp-toolbar-link-logo {
padding: 5px; padding: 5px;
span {
font-size: 24px;
}
} }
} }
.cp-toolbar-user { .cp-toolbar-user {
@ -514,16 +521,20 @@
height: @toolbar_line-height; height: @toolbar_line-height;
width: @toolbar_line-height; width: @toolbar_line-height;
margin-left: 0; margin-left: 0;
padding: 0px;
button { button {
height: @toolbar_line-height; height: @toolbar_line-height;
width: @toolbar_line-height; width: @toolbar_line-height;
font-size: 15px; font-size: 15px;
margin-top: -1px; margin-top: -1px;
.cp-dropdown-button-title { &::before {
transform: scale(0.5); padding-top: 1px;
bottom: -5px;
right: -5px;
} }
// .cp-dropdown-button-title {
// transform: scale(0.5);
// bottom: -5px;
// right: -5px;
// }
} }
} }
.cp-toolbar-user-dropdown { .cp-toolbar-user-dropdown {
@ -723,7 +734,7 @@
line-height: @toolbar_top-height; line-height: @toolbar_top-height;
width: @toolbar_top-height; width: @toolbar_top-height;
height: @toolbar_top-height; height: @toolbar_top-height;
padding: 0; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
} }
@ -735,9 +746,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: @toolbar_top-height; width: @toolbar_top-height - 10px;
font-size: 1em; font-size: 1em;
height: @toolbar_top-height; height: @toolbar_top-height - 10px;
border-radius: @variables_radius;
padding: 0px; padding: 0px;
margin: 0; margin: 0;
&::before { &::before {
@ -795,22 +807,28 @@
text-decoration: none; text-decoration: none;
height: auto; height: auto;
padding: 10px; padding: 10px;
color: @toolbar-bg-color;
color: var(--toolbar-bg-color);
svg { span {
#outline, #squares { font-size: 45px;
fill: @toolbar-bg-color;
fill: var(--toolbar-bg-color);
}
#background {
fill: @cp_toolbar-logo-bg;
}
} }
img { // svg {
cursor: pointer; // #outline, #squares {
height: 100%; // fill: @toolbar-bg-color;
width: 100%; // fill: var(--toolbar-bg-color);
} // }
// #background {
// fill: @cp_toolbar-logo-bg;
// }
// }
// img {
// cursor: pointer;
// height: 100%;
// width: 100%;
// }
} }
} }
.cp-toolbar-user { .cp-toolbar-user {
@ -876,6 +894,19 @@
} }
} }
} }
.cp-user-menu-logo {
text-align: left;
font-family: "IBM Plex Mono";
color: @cryptpad_color_grey_500;
font-size: 1.5em;
padding: 5px;
img {
width: 25px;
}
.cp-user-menu-logo-text {
margin-left: 10px;
}
}
p.cp-toolbar-account { p.cp-toolbar-account {
&> span { &> span {
font-weight: bold; font-weight: bold;
@ -896,8 +927,8 @@
} }
.cp-toolbar-history, .cp-toolbar-snapshots { .cp-toolbar-history, .cp-toolbar-snapshots {
background-color: @toolbar-bg-color-light; background-color: @cp_toolbar-bg;
background-color: var(--toolbar-bg-color-light); //background-color: var(--toolbar-bg-color-light);
color: @toolbar-color; color: @toolbar-color;
} }
.cp-toolbar-snapshots { .cp-toolbar-snapshots {
@ -935,24 +966,9 @@
} }
} }
.cp-toolbar-bottom { .cp-toolbar-bottom {
background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-light);
color: @cp_toolbar-bottom-fg; color: @cp_toolbar-bottom-fg;
button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color-active;
background-color: var(--toolbar-bg-color-active);
}
button.cp-toolbar-button-active {
border-color: @toolbar-bg-color-active;
border-color: var(--toolbar-bg-color-active);
}
button:hover, button:focus {
border-color: @toolbar-bg-color-active;
border-color: var(--toolbar-bg-color-active);
//border-color: @cryptpad_text_col;
}
display: inline-flex; display: inline-flex;
margin: 5px 0px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
max-width: 100%; max-width: 100%;
@ -967,18 +983,59 @@
margin: 5px 0px; margin: 5px 0px;
} }
} }
button { button {
border: 1px solid transparent; border: 1px solid @cp_toolbar-bottom-bg;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: @variables_radius;
height: @toolbar_line-height; height: @toolbar_line-height;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
.fa, .cptools { .fa, .cptools {
margin-right: 5px; margin-right: 5px;
} }
&:hover {
// 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-bg;
color: @cp_toolbar-bottom-fg;
&:hover {
// 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-fg;
color: @cp_toolbar-fg;
&:hover {
// 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-light;
background-color: var(--toolbar-bg-color-light);
border-color: @toolbar-bg-color-light;
border-color: var(--toolbar-bg-color-light);
color: @cp_toolbar-bottom-fg;
&:hover {
// XXX DB: not working well in dark/light
background-color: fade(@toolbar-bg-color-light, 80%);
background-color: var(--toolbar-bg-color-fade);
border-color: fade(@toolbar-bg-color-light, 80%);
border-color: var(--toolbar-bg-color-fade);
}
} }
button.cp-toolbar-collapse { button.cp-toolbar-collapse {
/* /*
@ -988,10 +1045,24 @@
is very small, which makes it unlikely that you'll see the title unless is very small, which makes it unlikely that you'll see the title unless
you hover perfectly. The same is true of the drive's grid/list view toggle. you hover perfectly. The same is true of the drive's grid/list view toggle.
*/ */
position: relative;
.fa { .fa {
margin-right: 0px; margin-right: 0px;
} }
.cp-collapsed-notif {
display: inline-block;
width: 12px;
height: 12px;
background-color: @cryptpad_color_red;
position: absolute;
bottom: -3px;
right: -3px;
border: 2px solid @cp_toolbar-bg;
border-radius: 50%;
}
&:not(.cp-toolbar-button-active) .cp-collapsed-notif {
display: none;
}
} }
&.cp-toolbar-small { &.cp-toolbar-small {
@ -1013,14 +1084,25 @@
.cp-toolbar-bottom-left { .cp-toolbar-bottom-left {
display: flex; display: flex;
order: 1; order: 1;
padding-left: 5px;
button {
margin-right: 5px;
}
} }
.cp-toolbar-bottom-mid { .cp-toolbar-bottom-mid {
display: flex; display: flex;
order: 2; order: 2;
button {
margin-right: 5px;
}
} }
.cp-toolbar-bottom-right { .cp-toolbar-bottom-right {
order: 3; order: 3;
display: flex; display: flex;
padding-right: 5px;
button {
margin-left: 5px;
}
#cp-toolbar-chat-drawer-open { order: 0; } #cp-toolbar-chat-drawer-open { order: 0; }
#cp-toolbar-userlist-drawer-open { order: 1; } #cp-toolbar-userlist-drawer-open { order: 1; }
& > .cp-dropdown-container { & > .cp-dropdown-container {
@ -1081,6 +1163,7 @@
} }
.cp-toolbar-drawer-content { .cp-toolbar-drawer-content {
box-shadow: 0px 1px 5px 0px @cp_shadow-color; box-shadow: 0px 1px 5px 0px @cp_shadow-color;
border-radius: @variables_radius;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
&.cp-dropdown-visible { &.cp-dropdown-visible {
@ -1089,7 +1172,8 @@
position: absolute; position: absolute;
left: 0px; left: 0px;
top: @toolbar_line-height; top: @toolbar_line-height;
margin: -1px; //margin: -1px;
padding: 5px;
min-width: 50px; min-width: 50px;
background: @cp_dropdown-bg; background: @cp_dropdown-bg;
display: flex; display: flex;
@ -1105,15 +1189,15 @@
box-sizing: border-box; box-sizing: border-box;
min-width: 150px; min-width: 150px;
height: @toolbar_line-height; height: @toolbar_line-height;
border-radius: 0; border-radius: @variables_radius;
border: 0; border: 0;
} }
button { button {
white-space: nowrap; white-space: nowrap;
padding: 5px 16px; padding: 5px;
text-align: left; text-align: left;
margin: 0; margin: 0;
border-radius: 0; border-radius: @variables_radius;
border: 0; border: 0;
width: 100%; width: 100%;
line-height: 1em; line-height: 1em;

2
customize.dist/src/less2/include/usergrid.less
Unescape Escape View File

@ -1,6 +1,7 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./avatar.less"; @import (reference) "./avatar.less";
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./variables.less";
.usergrid_main() { .usergrid_main() {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -52,6 +53,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
border-radius: @variables_radius;
margin: 3px !important; margin: 3px !important;
cursor: default; cursor: default;
transition: order 0.5s, background-color 0.5s; transition: order 0.5s, background-color 0.5s;

4
customize.dist/src/less2/include/variables.less
Unescape Escape View File

@ -10,3 +10,7 @@
// Used in modal.less and alertify.less // Used in modal.less and alertify.less
@variables_padding: 12px; @variables_padding: 12px;
@variables_shadow: 0 8px 32px 0 @cp_shadow-color; @variables_shadow: 0 8px 32px 0 @cp_shadow-color;
// Rounded corners
@variables_radius: 5px;
@variables_radius_L: 10px;

47
customize.dist/src/less2/pages/page-index.less
Unescape Escape View File

@ -43,7 +43,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
color: @cryptpad_color_brand;
margin-top: 1.5em; margin-top: 1.5em;
img { img {
max-width: 200px; max-width: 200px;
@ -53,14 +52,19 @@
h1 { h1 {
font-family: "IBM Plex Mono"; font-family: "IBM Plex Mono";
font-weight: 500; font-weight: 500;
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; color: @cryptpad_color_brand;
//font-family: "Raleway";
font-size: 3.7rem; font-size: 3.7rem;
} }
.tag-line { .tag-line {
text-align: center; text-align: center;
font-size: 1.4em; font-size: 1.4em;
color: @cp_static-link; }
.cp-instance-location {
margin-top: 20px;
i {
font-size: 1.2em;
margin-right: 5px;
}
} }
} }
@ -70,12 +74,25 @@
} }
.cp-app-grid { .cp-app-grid {
background-color: @cp_alertify-bg;
border-radius: @infopages-radius-L;
padding: 15px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
.cp-app-new {
font-size: 1.4em;
line-height: 100%;
color: fade(@cryptpad_text_col, 80%);
i {
margin-right: 5px;
}
}
.cp-app-grid-apps {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
}
a { a {
margin: 10px; margin: 10px;
text-decoration: none;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
margin-top: 40px; margin-top: 40px;
@ -153,6 +170,7 @@
each(@colortheme_apps, { each(@colortheme_apps, {
.cp-callout-@{key} { .cp-callout-@{key} {
border-radius: @infopages-radius;
i { color: @value; } i { color: @value; }
&:hover { &:hover {
@desat: desaturate(@value, 15%); @desat: desaturate(@value, 15%);
@ -161,6 +179,25 @@
} }
} }
}); });
a.cp-app-drive {
color: @cryptpad_text_col;
font-size: 1.5em;
display: inline-block;
margin: 20px 0px;
padding: 10px;
border-radius: @infopages-radius-L;
&:visited {
color: @cryptpad_text_col;
}
&:hover {
background-color: fade(@cryptpad_text_col, 10%);
}
i {
color: @cryptpad_color_brand;
margin-right: 10px;
font-size: 1.3em;
}
}
.cp-hidden { display: none !important; } .cp-hidden { display: none !important; }
.cp-callout-more { .cp-callout-more {

59
www/calendar/app-calendar.less
Unescape Escape View File

@ -2,6 +2,7 @@
@import (reference) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
@import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) '../../customize/src/less2/include/avatar.less'; @import (reference) '../../customize/src/less2/include/avatar.less';
@import (reference) '../../customize/src/less2/include/variables.less';
&.cp-app-calendar { &.cp-app-calendar {
@ -117,6 +118,7 @@
.tui-full-calendar-popup-container { .tui-full-calendar-popup-container {
background: @cp_flatpickr-bg; background: @cp_flatpickr-bg;
color: @cryptpad_text_col; color: @cryptpad_text_col;
border-radius: @variables_radius;
.tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) {
display: none; display: none;
} }
@ -182,6 +184,11 @@
.tui-full-calendar-section-allday { .tui-full-calendar-section-allday {
width: 100%; width: 100%;
height: 32px; height: 32px;
border-radius: @variables_radius;
.tui-full-calendar-ic-checkbox {
margin-left: 5px;
border-radius: 2px;
}
} }
} }
} }
@ -255,7 +262,8 @@
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
input { input {
width: 100px; width: 80px;
margin-right: 5px;
} }
} }
} }
@ -273,6 +281,26 @@
#cp-toolbar .cp-calendar-browse { #cp-toolbar .cp-calendar-browse {
display: flex; display: flex;
align-items: center; align-items: center;
button {
color: @cp_toolbar-fg;
border-color: @cp_toolbar-fg;
&:hover {
background-color: fade(@cp_toolbar-fg, 50%); //XXX check light theme
cursor: pointer;
}
}
}
.cp-calendar-newevent {
&:hover {
cursor: pointer;
}
}
.cp-toolbar-bottom-right button, .cp-toolbar-user button {
&:hover {
cursor: pointer;
}
} }
#cp-sidebarlayout-leftside { #cp-sidebarlayout-leftside {
@ -300,7 +328,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 5px 0; margin: 5px 0 10px 0;
&:not(:first-child) { &:not(:first-child) {
margin-top: 30px; margin-top: 30px;
} }
@ -310,12 +338,20 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;
border-radius: @variables_radius;
background-color: @cp_sidebar-left-bg;
&:not(.cp-unclickable) { &:not(.cp-unclickable) {
cursor: pointer; cursor: pointer;
} }
.cp-dropdown-container { .cp-dropdown-container {
position: initial; position: initial;
} }
button.cp-calendar-actions {
background-color: transparent;
&:hover {
background-color: @cp_sidebar-left-bg;
}
}
&.cp-ghost { &.cp-ghost {
padding: 0; padding: 0;
button { button {
@ -326,12 +362,19 @@
justify-content: space-between; justify-content: space-between;
background: transparent; background: transparent;
border: 1px solid @cryptpad_text_col; border: 1px solid @cryptpad_text_col;
border-radius: @variables_radius;
padding: 5px;
height: 36px; height: 36px;
font: @colortheme_app-font; font: @colortheme_app-font;
align-items: center; align-items: center;
color: @cryptpad_text_col; color: @cryptpad_text_col;
&:hover { &:hover {
background: @cp_sidebar-left-active; background-color: @cp_sidebar-left-active;
color: @cp_sidebar-left-active-fg;
border: 0px;
}
i {
margin-left: 5px;
} }
} }
} }
@ -339,21 +382,21 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
&:hover { &:hover {
background: fade(@cryptpad_text_col, 10%); background: @cp_sidebar-left-item-bg;
} }
&.cp-restricted { &.cp-restricted {
color: @cp_drive-header-fg; color: @cp_drive-header-fg;
} }
.cp-calendar-icon { .cp-calendar-icon {
width: 36px; width: 30px;
display: inline-flex; display: inline-flex;
height: 36px; height: 30px;
margin: -5px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: @variables_radius;
} }
&.cp-active { &.cp-active {
background: @cp_sidebar-left-active; background-color: @cp_sidebar-left-item-bg;
.cp-calendar-inactive { .cp-calendar-inactive {
display: none; display: none;
} }

2
www/calendar/inner.js
Unescape Escape View File

@ -599,7 +599,7 @@ define([
text: '', text: '',
options: options, // Entries displayed in the menu options: options, // Entries displayed in the menu
common: common, common: common,
buttonCls: 'btn btn-cancel fa fa-ellipsis-h small' buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions'
}; };
return UIElements.createDropdown(dropdownConfig)[0]; return UIElements.createDropdown(dropdownConfig)[0];
}; };

5
www/common/application_config_internal.js
Unescape Escape View File

@ -177,12 +177,17 @@ define(function() {
whiteboard: 'cptools-whiteboard', whiteboard: 'cptools-whiteboard',
todo: 'cptools-todo', todo: 'cptools-todo',
contacts: 'fa-address-book', contacts: 'fa-address-book',
calendar: 'fa-calendar',
kanban: 'cptools-kanban', kanban: 'cptools-kanban',
doc: 'fa-file-word-o', doc: 'fa-file-word-o',
presentation: 'fa-file-powerpoint-o', presentation: 'fa-file-powerpoint-o',
sheet: 'fa-file-excel-o', sheet: 'fa-file-excel-o',
drive: 'fa-hdd-o', drive: 'fa-hdd-o',
teams: 'fa-users', teams: 'fa-users',
admin: 'fa-gears',
settings: 'fa-gear',
profile: 'fa-user-circle',
support: 'fa-life-ring'
}; };
// Ability to create owned pads and expiring pads through a new pad creation screen. // Ability to create owned pads and expiring pads through a new pad creation screen.

8
www/common/common-ui-elements.js
Unescape Escape View File

@ -1732,6 +1732,14 @@ define([
var padType = metadataMgr.getMetadata().type; var padType = metadataMgr.getMetadata().type;
var options = []; var options = [];
options.push({
tag: 'div',
attributes: {'class': 'cp-user-menu-logo'},
content: h('span', [
h('img', {src: '/customize/CryptPad_logo_grey.svg',alt: 'CryptPad logo',}),
h('span.cp-user-menu-logo-text', "CryptPad")
]),
});
if (config.displayNameCls) { if (config.displayNameCls) {
var userAdminContent = []; var userAdminContent = [];
if (accountName) { if (accountName) {

17
www/common/toolbar.js
Unescape Escape View File

@ -463,15 +463,18 @@ MessengerUI, Messages, Pages) {
createCollapse = function (toolbar) { createCollapse = function (toolbar) {
var up = h('i.fa.fa-chevron-up', {title: Messages.toolbar_collapse}); var up = h('i.fa.fa-chevron-up', {title: Messages.toolbar_collapse});
var down = h('i.fa.fa-chevron-down', {title: Messages.toolbar_expand}); var down = h('i.fa.fa-chevron-down', {title: Messages.toolbar_expand});
var notif = h('span.cp-collapsed-notif');
var $button = $(h('button.cp-toolbar-collapse',[ var $button = $(h('button.cp-toolbar-collapse',[
up, up,
down down,
notif
])); ]));
var $up = $(up); var $up = $(up);
var $down = $(down); var $down = $(down);
toolbar.$bottomR.prepend($button); toolbar.$bottomR.prepend($button);
$down.hide(); $down.hide();
$(notif).hide();
$button.click(function () { $button.click(function () {
toolbar.$top.toggleClass('toolbar-hidden'); toolbar.$top.toggleClass('toolbar-hidden');
var hidden = toolbar.$top.hasClass('toolbar-hidden'); var hidden = toolbar.$top.hasClass('toolbar-hidden');
@ -482,6 +485,7 @@ MessengerUI, Messages, Pages) {
} else { } else {
$up.show(); $up.show();
$down.hide(); $down.hide();
$(notif).hide();
} }
}); });
}; };
@ -574,7 +578,7 @@ MessengerUI, Messages, Pages) {
throw new Error("You must provide a `metadataMgr` to display the share button"); throw new Error("You must provide a `metadataMgr` to display the share button");
} }
var $shareBlock = $(h('button.cp-toolar-share-button', [ var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [
h('i.fa.fa-shhare-alt'), h('i.fa.fa-shhare-alt'),
h('span.cp-button-name', Messages.shareButton) h('span.cp-button-name', Messages.shareButton)
])); ]));
@ -608,7 +612,7 @@ MessengerUI, Messages, Pages) {
throw new Error("You must provide a `metadataMgr` to display the access button"); throw new Error("You must provide a `metadataMgr` to display the access button");
} }
var $accessBlock = $(h('button.cp-toolar-access-button', [ var $accessBlock = $(h('button.cp-toolar-access-button.cp-toolbar-button-primary', [
h('i.fa.fa-unlock-alt'), h('i.fa.fa-unlock-alt'),
h('span.cp-button-name', Messages.accessButton) h('span.cp-button-name', Messages.accessButton)
])); ]));
@ -638,7 +642,7 @@ MessengerUI, Messages, Pages) {
throw new Error("You must provide a `metadataMgr` to display the userlist"); throw new Error("You must provide a `metadataMgr` to display the userlist");
} }
var $shareBlock = $(h('button.cp-toolar-share-button', [ var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [
h('i.fa.fa-shhare-alt'), h('i.fa.fa-shhare-alt'),
h('span.cp-button-name', Messages.shareButton) h('span.cp-button-name', Messages.shareButton)
])); ]));
@ -902,7 +906,7 @@ MessengerUI, Messages, Pages) {
href: href, href: href,
title: buttonTitle, title: buttonTitle,
'class': "cp-toolbar-link-logo" 'class': "cp-toolbar-link-logo"
}).append(UIElements.getSvgLogo()); }).append(UI.getIcon(privateData.app));
var onClick = function (e) { var onClick = function (e) {
e.preventDefault(); e.preventDefault();
@ -1179,6 +1183,9 @@ MessengerUI, Messages, Pages) {
Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], { Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], {
onMessage: function (data, el) { onMessage: function (data, el) {
if (toolbar.$top.hasClass('toolbar-hidden')) {
$('.cp-collapsed-notif').css('display', '');
}
if (el) { if (el) {
$(div).prepend(el); $(div).prepend(el);
} }

3
www/form/app-form.less
Unescape Escape View File

@ -526,6 +526,7 @@
background: @cp_form-bg1; background: @cp_form-bg1;
padding: 10px; padding: 10px;
box-shadow: 0px 0px 15px @cp_shadow-color; box-shadow: 0px 0px 15px @cp_shadow-color;
border-radius: @variables_radius;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -878,6 +879,7 @@
background: @cp_form-bg1; background: @cp_form-bg1;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: @variables_radius;
& > *:not(:last-child) { & > *:not(:last-child) {
margin-right: 10px; margin-right: 10px;
} }
@ -900,6 +902,7 @@
padding: 5px; padding: 5px;
margin-top: -10px; margin-top: -10px;
margin-right: -10px; margin-right: -10px;
border-radius: 0px @variables_radius 0px 0px;
i { margin-right: 5px; } i { margin-right: 5px; }
background: fade(@cryptpad_text_col, 10%); background: fade(@cryptpad_text_col, 10%);
} }

37
www/kanban/app-kanban.less
Unescape Escape View File

@ -26,6 +26,7 @@
.kanban-board-header { .kanban-board-header {
background-color: @palette0; background-color: @palette0;
color: @cp_kanban-fg; color: @cp_kanban-fg;
border-radius: @variables_radius @variables_radius 0px 0px;
} }
.kanban-board { .kanban-board {
.kanban-board-inner { .kanban-board-inner {
@ -34,6 +35,8 @@
max-height: 100%; max-height: 100%;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-radius: @variables_radius;
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB
} }
color: @cp_kanban-fg; color: @cp_kanban-fg;
button { button {
@ -81,9 +84,11 @@
} }
#cp-kanban-edit-body { #cp-kanban-edit-body {
border: 1px solid @cp_forms-border; border: 1px solid @cp_forms-border;
border-radius: @variables_radius;
.CodeMirror { .CodeMirror {
height: 105px; height: 105px;
resize: vertical; resize: vertical;
border-radius: 0px 0px @variables_radius @variables_radius;
} }
.CodeMirror-scroll { .CodeMirror-scroll {
box-sizing: content-box; box-sizing: content-box;
@ -91,6 +96,7 @@
.cp-markdown-toolbar { .cp-markdown-toolbar {
background-color: @cp_kanban-conflict-bg; background-color: @cp_kanban-conflict-bg;
color: @cp_kanban-fg; color: @cp_kanban-fg;
border-radius: @variables_radius @variables_radius 0px 0px;
button { button {
&:hover { &:hover {
background-color: @cp_kanban-fg; background-color: @cp_kanban-fg;
@ -174,8 +180,10 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;
border-radius: @variables_radius;
flex-wrap: wrap; flex-wrap: wrap;
background: @cp_kanban-item-bg; background: @cp_kanban-item-bg;
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB make this a variable?
.tools_unselectable(); .tools_unselectable();
touch-action: none; touch-action: none;
cursor: move; cursor: move;
@ -250,6 +258,7 @@
padding: 0 5px; padding: 0 5px;
margin-right: 5px; margin-right: 5px;
margin-top: 5px; margin-top: 5px;
border-radius: @variables_radius;
background-color: @cp_kanban-tags-bg; background-color: @cp_kanban-tags-bg;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
@ -291,8 +300,8 @@
} }
main { main {
padding: 0 10px; padding: 10px 5px;
margin: 10px 0; //margin: 10px 0;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
justify-content: space-around; justify-content: space-around;
@ -327,8 +336,8 @@
} }
} }
footer { footer {
margin: 10px; margin: 5px;
margin-top: 0px; margin-top: 5px;
display: flex; display: flex;
span { span {
.tools_unselectable(); .tools_unselectable();
@ -336,7 +345,7 @@
width: 50%; width: 50%;
border: 1px solid fade(@cp_kanban-fg, 70%); border: 1px solid fade(@cp_kanban-fg, 70%);
color: fade(@cp_kanban-fg, 70%); color: fade(@cp_kanban-fg, 70%);
border-radius: 0px; border-radius: @variables_radius;
font-size: 25px; font-size: 25px;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -420,6 +429,7 @@
margin-right: 5px; margin-right: 5px;
margin-top: 5px; margin-top: 5px;
background-color: @cp_kanban-tags-bg; background-color: @cp_kanban-tags-bg;
border-radius: @variables_radius;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
@ -445,6 +455,12 @@
&:hover { &:hover {
background-color: darken(@board-bg, 10%); background-color: darken(@board-bg, 10%);
} }
&:first-child {
border-radius: @variables_radius 0px 0px @variables_radius;
}
&:last-child {
border-radius: 0px @variables_radius @variables_radius 0px;
}
} }
} }
} }
@ -456,16 +472,16 @@
background-color: @cp_kanban-fg !important; background-color: @cp_kanban-fg !important;
color: @cp_app-bg; color: @cp_app-bg;
} }
span.cp-kanban-view-small { // span.cp-kanban-view-small {
} // }
} }
} }
} }
&.cp-kanban-quick { &.cp-kanban-quick {
#cp-kanban-controls { #cp-kanban-controls {
.cp-kanban-changeView { .cp-kanban-changeView {
span.cp-kanban-view { // span.cp-kanban-view {
} // }
span.cp-kanban-view-small { span.cp-kanban-view-small {
background-color: @cp_kanban-fg !important; background-color: @cp_kanban-fg !important;
color: @cp_app-bg; color: @cp_app-bg;
@ -558,6 +574,7 @@
width: 50px; width: 50px;
margin: 10px 5px; margin: 10px 5px;
border: 1px solid @cp_kanban-fg; border: 1px solid @cp_kanban-fg;
border-radius: @variables_radius;
color: @cp_kanban-fg; color: @cp_kanban-fg;
height: 40px; height: 40px;
display: inline-flex; display: inline-flex;
@ -655,6 +672,6 @@
.form-group { .form-group {
text-align: right; text-align: right;
margin-button: 5px; margin-bottom: 5px;
} }
} }

4
www/settings/inner.js
Unescape Escape View File

@ -1450,7 +1450,7 @@ define([
$('<label>').text(Messages.settings_codeIndentation).appendTo($div); $('<label>').text(Messages.settings_codeIndentation).appendTo($div);
var $inputBlock = $('<div>', { var $inputBlock = $('<div>', {
'class': 'cp-sidebarlayout-input-block', 'class': 'cp-sidebarlayout-input',
}).appendTo($div); }).appendTo($div);
var $input = $('<input>', { var $input = $('<input>', {
@ -1545,7 +1545,7 @@ define([
$('<label>').text(Messages.settings_codeFontSize).appendTo($div); $('<label>').text(Messages.settings_codeFontSize).appendTo($div);
var $inputBlock = $('<div>', { var $inputBlock = $('<div>', {
'class': 'cp-sidebarlayout-input-block', 'class': 'cp-sidebarlayout-input',
}).appendTo($div); }).appendTo($div);
var $input = $('<input>', { var $input = $('<input>', {

16
www/teams/app-team.less
Unescape Escape View File

@ -88,6 +88,8 @@
} }
.cp-team-cat-header { .cp-team-cat-header {
justify-content: center; justify-content: center;
background-color: transparent !important;
box-shadow: none !important;
.avatar_main(30px); .avatar_main(30px);
.cp-avatar { .cp-avatar {
justify-content: center; justify-content: center;
@ -101,9 +103,6 @@
} }
cursor: default !important; cursor: default !important;
font-size: 18px; font-size: 18px;
&:hover {
background-color: transparent !important;
}
span.cp-sidebarlayout-category-name { span.cp-sidebarlayout-category-name {
padding-left: 5px; padding-left: 5px;
} }
@ -129,6 +128,7 @@
justify-content: space-between; justify-content: space-between;
flex-flow: column; flex-flow: column;
width: 300px; width: 300px;
border-radius: @variables_radius_L;
max-width: 90%; max-width: 90%;
height: 384px; height: 384px;
padding: 50px; padding: 50px;
@ -186,7 +186,7 @@
} }
} }
.cp-team-roster { .cp-team-roster {
.avatar_main(50px); .avatar_main(40px);
.cp-hidden { .cp-hidden {
display: none; display: none;
} }
@ -199,10 +199,11 @@
.cp-team-roster-member { .cp-team-roster-member {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 5px; margin: 5px 0px;
padding: 2px; padding: 5px 5px 5px 10px;
max-width: 500px; max-width: 500px;
background-color: @roster-bg-color; background-color: @roster-bg-color;
border-radius: @variables_radius;
&:hover { &:hover {
background-color: @roster-bg-color-hover; background-color: @roster-bg-color-hover;
} }
@ -214,7 +215,8 @@
width: 5px; width: 5px;
height: 50px; height: 50px;
display: inline-block; display: inline-block;
background-color: red; border-radius: @variables_radius;
background-color: red; // XXX hard coded colors
&.online { &.online {
background-color: green; background-color: green;
} }

Write Preview
Loading…
Cancel
Save