Merge branch 'sandpaper-static' into 4.15-candidate
ansuz
commit
83f721341f
|
|
@ -87,11 +87,12 @@ define([
|
|||
]);
|
||||
};
|
||||
|
||||
var footLink = function (ref, loc, text) {
|
||||
var footLink = function (ref, loc, text, icon) {
|
||||
if (!ref) { return; }
|
||||
var attrs = {
|
||||
href: ref,
|
||||
};
|
||||
var iconName = '';
|
||||
if (!/^\//.test(ref)) {
|
||||
attrs.target = '_blank';
|
||||
attrs.rel = 'noopener noreferrer';
|
||||
|
|
@ -100,7 +101,11 @@ define([
|
|||
attrs['data-localization'] = 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";
|
||||
|
|
@ -117,13 +122,12 @@ define([
|
|||
var l = Msg._getLanguage();
|
||||
['imprint', 'privacy', 'terms', 'roadmap', 'source'].forEach(function (k) {
|
||||
var value = AppConfig[k];
|
||||
console.log('links', k, value);
|
||||
if (value === false) { return; }
|
||||
if (value === true) {
|
||||
customURLs[k] = defaultURLs[k];
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) { return; }
|
||||
if (typeof(value) === 'string') {
|
||||
customURLs[k] = value;
|
||||
return;
|
||||
|
|
@ -142,7 +146,8 @@ define([
|
|||
Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link');
|
||||
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;
|
||||
|
||||
// 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 () {
|
||||
var rightLinks;
|
||||
var username = window.localStorage.getItem('User_name');
|
||||
var registerLink;
|
||||
|
||||
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) {
|
||||
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,
|
||||
];
|
||||
} else {
|
||||
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
|
||||
]);
|
||||
}
|
||||
|
||||
/*
|
||||
var button = h('button.navbar-toggler', {
|
||||
'type':'button',
|
||||
/*'data-toggle':'collapse',
|
||||
'data-target':'#menuCollapse',
|
||||
'aria-controls': 'menuCollapse',
|
||||
'aria-expanded':'false',
|
||||
'aria-label':'Toggle navigation'*/
|
||||
}, h('i.fa.fa-bars '));
|
||||
'aria-label':'Toggle navigation'
|
||||
}, h('i.fa.fa-bars ')); */
|
||||
|
||||
$(button).click(function () {
|
||||
if ($('#menuCollapse').is(':visible')) {
|
||||
return void $('#menuCollapse').slideUp();
|
||||
}
|
||||
$('#menuCollapse').slideDown();
|
||||
});
|
||||
// XXX button to collapse navbar on small screens
|
||||
// $(button).click(function () {
|
||||
// if ($('#menuCollapse').is(':visible')) {
|
||||
// return void $('#menuCollapse').slideUp();
|
||||
// }
|
||||
// $('#menuCollapse').slideDown();
|
||||
// });
|
||||
|
||||
return h('nav.navbar.navbar-expand-lg',
|
||||
h('a.navbar-brand', { href: '/index.html'}, [
|
||||
h('img', {
|
||||
src: '/customize/CryptPad_logo.svg?',
|
||||
'aria-hidden': true,
|
||||
alt: ''
|
||||
}), 'CryptPad'
|
||||
]),
|
||||
button,
|
||||
h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [
|
||||
h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about),
|
||||
h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, Msg.docs_link),
|
||||
// XXX add link back to index.html on footer logo
|
||||
// h('a.navbar-brand', { href: '/index.html'}, [
|
||||
// h('img', {
|
||||
// src: '/customize/CryptPad_logo.svg?',
|
||||
// 'aria-hidden': true,
|
||||
// alt: ''
|
||||
// }), 'CryptPad'
|
||||
// ]),
|
||||
//button, XXX collapse button
|
||||
h('div', [
|
||||
// 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: 'https://docs.cryptpad.fr'},
|
||||
[h('i.fa.fa-book', {'aria-hidden':'true'}),Msg.docs_link]),
|
||||
].concat(rightLinks))
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -46,8 +46,7 @@ define([
|
|||
[ 'code', Msg.type.code],
|
||||
[ 'form', Msg.type.form],
|
||||
[ 'whiteboard', Msg.type.whiteboard],
|
||||
[ 'slide', Msg.type.slide],
|
||||
[ 'drive', Msg.type.drive]
|
||||
[ 'slide', Msg.type.slide]
|
||||
].filter(function (x) {
|
||||
return isAvailableType(x[0]);
|
||||
})
|
||||
|
|
@ -99,51 +98,28 @@ define([
|
|||
});
|
||||
}
|
||||
|
||||
var supportText = Pages.setHTML(h('span'), Msg.home_support);
|
||||
Pages.documentationLink(supportText.querySelector('a'), "https://docs.cryptpad.fr/en/how_to_contribute.html");
|
||||
var pageLink = function (ref, loc, text) {
|
||||
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);
|
||||
Pages.externalLink(opensource.querySelector('a'), "https://github.com/xwiki-labs/cryptpad");
|
||||
|
||||
var blocks = [
|
||||
h('div.row.cp-page-section', [
|
||||
h('div.col-sm-6',
|
||||
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');
|
||||
}),
|
||||
])
|
||||
])
|
||||
];
|
||||
// XXX DB: this may be wrong, pasted over form pages.js
|
||||
var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ?
|
||||
'/imprint.html' : AppConfig.imprint);
|
||||
imprintLink = AppConfig.imprint ? pageLink(imprintUrl, 'imprint') : undefined;
|
||||
privacyLink = pageLink(AppConfig.privacy, 'privacy');
|
||||
termsLink = pageLink(AppConfig.terms, 'terms');
|
||||
|
||||
var notice;
|
||||
/* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute.
|
||||
|
|
@ -161,21 +137,39 @@ define([
|
|||
Pages.infopageTopbar(),
|
||||
h('div.container.cp-container', [
|
||||
h('div.row.cp-home-hero', [
|
||||
h('div.cp-title.col-md-7', [
|
||||
h('div.cp-title.col-md-6', [
|
||||
h('img', {
|
||||
src: '/customize/CryptPad_logo.svg?' + urlArgs,
|
||||
'aria-hidden': 'true',
|
||||
alt: ''
|
||||
}),
|
||||
h('h1', 'CryptPad'),
|
||||
UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase)
|
||||
h('h1', 'CryptPad.fr'), // XXX use instance name
|
||||
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
|
||||
]),
|
||||
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-5.cp-app-grid', [
|
||||
icons,
|
||||
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,
|
||||
])
|
||||
]),
|
||||
h('a.cp-app-drive', {'href': '/drive/'}, [ // XXX check this is correct
|
||||
h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}),
|
||||
'Drive: 1GB' // XXX Use instance default storage
|
||||
]) // XXX DB TODO: add drive link
|
||||
])
|
||||
]),
|
||||
notice,
|
||||
blocks
|
||||
notice
|
||||
]),
|
||||
Pages.infopageFooter(),
|
||||
]),
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@
|
|||
.dialog {
|
||||
& > div {
|
||||
background-color: @cp_alertify-bg;
|
||||
border-radius: @variables_radius_L;
|
||||
&.half {
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
|
|
@ -205,6 +206,8 @@
|
|||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
border-top-left-radius: @variables_radius;
|
||||
border-top-right-radius: @variables_radius;
|
||||
&:not(.disabled):hover {
|
||||
background-color: @cp_alertify-hover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import (reference) "./tools.less";
|
||||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./variables.less";
|
||||
.avatar_vars(
|
||||
@width: 30px
|
||||
) {
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: @variables_radius;
|
||||
.cp-avatar-default, media-tag {
|
||||
display: inline-flex;
|
||||
|
||||
|
|
@ -32,6 +34,8 @@
|
|||
|
||||
height: @avatar-width;
|
||||
height: var(--avatar-width);
|
||||
border-radius: @variables_radius;
|
||||
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./tools.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.checkmark_vars(
|
||||
@size: 20px
|
||||
|
|
@ -39,6 +40,9 @@
|
|||
align-items: center;
|
||||
position: relative;
|
||||
.tools_unselectable();
|
||||
.cp-checkmark-mark {
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
|
||||
& > a {
|
||||
margin-left: 0.25em;
|
||||
|
|
|
|||
|
|
@ -168,11 +168,13 @@
|
|||
@cp_buttons-cancel-border: @cryptpad_color_grey_400;
|
||||
|
||||
// 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-item-bg: @cryptpad_color_grey_800;
|
||||
@cp_sidebar-right-bg: @cryptpad_color_grey_900;
|
||||
@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%);
|
||||
|
||||
// Drive
|
||||
|
|
@ -232,6 +234,7 @@
|
|||
// Pad Creation Screen
|
||||
@cp_creation-bg: @cryptpad_color_grey_800;
|
||||
@cp_creation-fg: @cryptpad_text_col;
|
||||
@cp_creation-template: @cryptpad_color_grey_700;
|
||||
@cp_creation-button-bg: @cryptpad_color_brand;
|
||||
@cp_creation-button-fg: @cryptpad_color_white;
|
||||
@cp_creation-error-bg: @cryptpad_color_blue;
|
||||
|
|
@ -259,7 +262,7 @@
|
|||
@cp_static-fg: @cryptpad_text_col;
|
||||
@cp_static-link: @cryptpad_color_brand_300;
|
||||
@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-topbar-fg: @cryptpad_color_brand_300;
|
||||
@cp_static-card-bg: @cryptpad_color_grey_800;
|
||||
|
|
@ -293,9 +296,10 @@
|
|||
@cp_support-header-bg: @cryptpad_color_grey_700;
|
||||
|
||||
// Toolbar
|
||||
@cp_toolbar-bg: @cryptpad_color_grey_850;
|
||||
@cp_toolbar-bg: @cryptpad_color_grey_900;
|
||||
@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-fade1: fade(@cryptpad_text_col, 10%);
|
||||
|
|
@ -305,7 +309,7 @@
|
|||
@cp_history-line-bg: @cryptpad_color_grey_900;
|
||||
@cp_history-bg1: @cryptpad_color_grey_600;
|
||||
@cp_history-bg2: @cryptpad_color_grey_800;
|
||||
@cp_history-fg: @cp_toolbar-bottom-fg;
|
||||
@cp_history-fg: @cp_toolbar-fg;
|
||||
|
||||
// Tokenfield
|
||||
@cp_token-bg: @cryptpad_color_grey_700;
|
||||
|
|
@ -417,7 +421,7 @@
|
|||
|
||||
// Teams
|
||||
@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-fg: @cryptpad_text_col;
|
||||
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);
|
||||
|
|
|
|||
|
|
@ -167,11 +167,13 @@
|
|||
@cp_buttons-cancel-border: #949494;
|
||||
|
||||
// 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-item-bg: @cryptpad_color_grey_200;
|
||||
@cp_sidebar-right-bg: @cryptpad_color_white;
|
||||
@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;
|
||||
|
||||
// Drive
|
||||
|
|
@ -231,6 +233,7 @@
|
|||
// Pad Creation Screen
|
||||
@cp_creation-bg: @cryptpad_color_white;
|
||||
@cp_creation-fg: @cryptpad_text_col;
|
||||
@cp_creation-template: @cryptpad_color_grey_100;
|
||||
@cp_creation-button-bg: @cryptpad_color_brand;
|
||||
@cp_creation-button-fg: @cryptpad_color_white;
|
||||
@cp_creation-error-bg: @cryptpad_color_blue;
|
||||
|
|
@ -258,7 +261,7 @@
|
|||
@cp_static-fg: @cryptpad_text_col;
|
||||
@cp_static-link: @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-topbar-fg: @cryptpad_color_brand;
|
||||
@cp_static-card-bg: @cryptpad_color_white;
|
||||
|
|
@ -266,7 +269,7 @@
|
|||
|
||||
// Limit
|
||||
@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-warning: @cryptpad_color_orange;
|
||||
@cp-limit-bar-above: @cryptpad_color_red;
|
||||
|
|
@ -292,8 +295,9 @@
|
|||
@cp_support-header-bg: @cryptpad_color_grey_300;
|
||||
|
||||
// Toolbar
|
||||
@cp_toolbar-bg: @cryptpad_color_grey_200;
|
||||
@cp_toolbar-bg: @cryptpad_color_white;
|
||||
@cp_toolbar-fg: @cryptpad_text_col;
|
||||
@cp_toolbar-bottom-bg: @cryptpad_color_grey_200;
|
||||
@cp_toolbar-bottom-fg: @cryptpad_text_col;
|
||||
@cp_toolbar-logo-bg: @cryptpad_color_white;
|
||||
|
||||
|
|
@ -304,7 +308,7 @@
|
|||
@cp_history-line-bg: @cryptpad_color_white;
|
||||
@cp_history-bg1: #DDD;
|
||||
@cp_history-bg2: #BBB;
|
||||
@cp_history-fg: @cp_toolbar-bottom-fg;
|
||||
@cp_history-fg: @cp_toolbar-fg;
|
||||
|
||||
// Tokenfield
|
||||
@cp_token-bg: @cryptpad_color_grey_400;
|
||||
|
|
@ -321,7 +325,7 @@
|
|||
@cp_shadow-color: fade(@cryptpad_color_black, 30%);
|
||||
|
||||
// Apps
|
||||
@cp_app-bg: @cryptpad_color_grey_100;
|
||||
@cp_app-bg: @cryptpad_color_white;
|
||||
@cp_app-fg: @cryptpad_text_col;
|
||||
|
||||
// Accounts
|
||||
|
|
@ -416,7 +420,7 @@
|
|||
|
||||
// Teams
|
||||
@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-fg: @cryptpad_text_col;
|
||||
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@
|
|||
background-color: @cp_comments-bg;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
border-top-left-radius: @variables_radius;
|
||||
border-top-right-radius: @variables_radius;
|
||||
box-sizing: content-box;
|
||||
.avatar_main(40px);
|
||||
.cp-comment-metadata {
|
||||
|
|
@ -114,8 +116,8 @@
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -128,6 +130,8 @@
|
|||
.cp-comment-content {
|
||||
background-color: @cp_comments-bg;
|
||||
padding: 0px 5px 5px 5px;
|
||||
border-bottom-left-radius: @variables_radius;
|
||||
border-bottom-right-radius: @variables_radius;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
|
@ -150,6 +154,7 @@
|
|||
}
|
||||
.cp-comment-active {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
border-radius: @variables_radius;
|
||||
.cp-comment-actions {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.contextmenu_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -11,11 +12,14 @@
|
|||
& > ul {
|
||||
border: 1px solid @cp_context-border;
|
||||
background-color: @cp_context-bg;
|
||||
border-radius: 0px;
|
||||
border-radius: @variables_radius;
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid @cp_context-border;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
padding: 6px 0px;
|
||||
}
|
||||
li {
|
||||
padding: 0;
|
||||
font-size: @colortheme_app-font-size;
|
||||
|
|
@ -38,7 +42,7 @@
|
|||
top: -0.7rem;
|
||||
left: 100%;
|
||||
background-color: @cp_context-bg;
|
||||
border-radius: 0px;
|
||||
border-radius: @variables_radius;
|
||||
border: 1px solid @cp_context-border;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,6 +50,7 @@
|
|||
cursor: pointer;
|
||||
color: @cp_context-fg;
|
||||
padding-left: 10px;
|
||||
border-radius: @variables_radius;
|
||||
&:hover {
|
||||
background-color: @cp_context-bg-hover;
|
||||
color: @cp_context-fg;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.corner_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -40,6 +41,7 @@
|
|||
transform-origin: bottom right;
|
||||
animation: appear 0.8s ease-in-out;
|
||||
border: 1px solid @corner-fg;
|
||||
border-radius: @variables_radius;
|
||||
box-shadow: 0 0 10px 0 @cp_shadow-color;
|
||||
|
||||
&.cp-corner-alt {
|
||||
|
|
@ -116,6 +118,7 @@
|
|||
}
|
||||
text-transform: uppercase;
|
||||
border: 1px solid @corner-fg;
|
||||
border-radius: @variables_radius;
|
||||
.fa, .cptools {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@import (reference) "./tools.less";
|
||||
@import (reference) './icon-colors.less';
|
||||
@import (reference) "./avatar.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.creation_vars(
|
||||
@bg-color: @colortheme_apps[default]
|
||||
|
|
@ -63,6 +64,7 @@
|
|||
width: 700px;
|
||||
max-width: 90vw;
|
||||
height: 500px;
|
||||
border-radius: @variables_radius_L;
|
||||
max-height: ~"calc(100vh - 20px)";
|
||||
margin: 0px;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -131,6 +133,7 @@
|
|||
color: @cp_creation-button-fg;
|
||||
margin: 3px 10px;
|
||||
border: none;
|
||||
border-radius: @variables_radius;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -256,6 +259,7 @@
|
|||
}
|
||||
select {
|
||||
margin-right: 5px;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
|
|
@ -325,11 +329,12 @@
|
|||
max-height: 159px;
|
||||
align-items: center;
|
||||
.cp-creation-template-element {
|
||||
box-shadow: 2px 2px 7px @cp_shadow-color;
|
||||
box-shadow: 0px 0px 5px 1px #00000030; // XXX
|
||||
width: 300px;
|
||||
max-width: calc(100% - 10px);
|
||||
padding: 2px;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border-radius: @variables_radius;
|
||||
display: inline-flex;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
|
@ -337,7 +342,7 @@
|
|||
text-align: left;
|
||||
line-height: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: @cp_creation-template;
|
||||
color: @creation-color;
|
||||
color: var(--creation-color);
|
||||
border: 1px solid transparent;
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@
|
|||
white-space: nowrap;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 0px;
|
||||
padding: 10px 0px 0px 0px;
|
||||
color: @cp_sidebar-left-fg;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
@ -279,6 +279,7 @@
|
|||
.cp-app-drive-tree-categories-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
img.cp-app-drive-icon {
|
||||
margin-bottom: 3px;
|
||||
|
|
@ -288,6 +289,8 @@
|
|||
margin-top: 15px;
|
||||
//padding: 0 0 0 20px;
|
||||
padding: 0;
|
||||
background-color: @cp_sidebar-left-item-bg;
|
||||
border-radius: @variables_radius;
|
||||
cursor: auto;
|
||||
&li, li {
|
||||
padding: 0;
|
||||
|
|
@ -307,7 +310,7 @@
|
|||
text-overflow: ellipsis;
|
||||
//min-width: ~"calc(100% + 5px)";
|
||||
.leftside-menu-category_main();
|
||||
width: ~"calc(100% + 5px)";
|
||||
//width: ~"calc(100% + 5px)"; // XXX remove
|
||||
margin: 0;
|
||||
//margin-bottom: -6px;
|
||||
display: flex;
|
||||
|
|
@ -318,8 +321,9 @@
|
|||
.fa, .cptools {
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
width: 25px;
|
||||
width: 20px;
|
||||
margin-right: 0px;
|
||||
z-index: 99;
|
||||
}
|
||||
.cp-app-drive-element {
|
||||
flex: 1;
|
||||
|
|
@ -335,7 +339,10 @@
|
|||
}
|
||||
.cp-app-drive-tree-category {
|
||||
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 {
|
||||
.fa-trash-o {
|
||||
padding-left: 2px;
|
||||
|
|
@ -361,11 +368,11 @@
|
|||
margin-left: -10px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 10px;
|
||||
left: -17px;
|
||||
top: 11px;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
background-color: @cp_sidebar-left-bg;
|
||||
background-color: @cp_sidebar-left-item-bg;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 10;
|
||||
|
|
@ -376,17 +383,36 @@
|
|||
}
|
||||
}
|
||||
.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 {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: -10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
|
||||
margin-left: -5px;
|
||||
}
|
||||
.cp-app-drive-tree-root {
|
||||
&> .cp-app-drive-element-row {
|
||||
padding-left: 20px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
&> ul {
|
||||
padding-left: 30px;
|
||||
|
|
@ -403,8 +429,8 @@
|
|||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -11px;
|
||||
left: -12px;
|
||||
top: -10px;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid @cp_drive-tree-branch;
|
||||
|
|
@ -414,7 +440,7 @@
|
|||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
left: -12px;
|
||||
bottom: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
|
|
@ -448,6 +474,7 @@
|
|||
box-sizing: border-box;
|
||||
background: @cp_sidebar-right-bg;
|
||||
color: @cp_sidebar-right-fg;
|
||||
padding-top: 10px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -459,7 +486,7 @@
|
|||
position: absolute;
|
||||
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%));
|
||||
}
|
||||
h1 {
|
||||
|
|
@ -570,6 +597,7 @@
|
|||
}
|
||||
.drive_fileIcon;
|
||||
li {
|
||||
border-radius: @variables_radius;
|
||||
&.cp-app-drive-element {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -639,6 +667,7 @@
|
|||
}
|
||||
li {
|
||||
display: flex;
|
||||
border-radius: @variables_radius;
|
||||
input {
|
||||
border: 1px solid transparent;
|
||||
margin: 0;
|
||||
|
|
@ -727,6 +756,7 @@
|
|||
}
|
||||
&> span {
|
||||
padding: 14px 5px;
|
||||
border-radius: @variables_radius;
|
||||
&.cp-app-drive-sort-clickable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
|
|
@ -912,6 +942,18 @@
|
|||
|
||||
|
||||
.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 {
|
||||
.fa-history { order: 50; }
|
||||
// .fa-list, .fa-th-large,
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@
|
|||
position: absolute;
|
||||
background-color: @cp_dropdown-bg;
|
||||
min-width: 250px;
|
||||
padding: 5px;
|
||||
border-radius: @variables_radius;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000; //Z dropdown content
|
||||
max-height: 300px;
|
||||
|
|
@ -77,7 +79,8 @@
|
|||
|
||||
& > a, & > span {
|
||||
color: @cp_dropdown-fg;
|
||||
padding: 5px 16px;
|
||||
border-radius: @variables_radius;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
|
@ -160,7 +163,7 @@
|
|||
height: 1px;
|
||||
background: @cp_dropdown-bg-active;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import (reference) "./browser.less";
|
||||
@import (reference) './colortheme-all.less';
|
||||
@import (reference) './modal.less';
|
||||
@import (reference) './variables.less';
|
||||
|
||||
.fileupload_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
position: absolute;
|
||||
right: 10vw;
|
||||
bottom: 10vh;
|
||||
border-radius: @variables_radius;
|
||||
box-sizing: border-box;
|
||||
z-index: 100001; //Z file upload table container: just above the file picker
|
||||
display: none;
|
||||
|
|
@ -88,6 +90,7 @@
|
|||
height: 100%;
|
||||
background-color: @cp_upload-progress;
|
||||
z-index: -1; //Z file upload progress container
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
.cp-fileupload-table-cancel {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
color: @cp_forms-fg;
|
||||
background-color: @cp_forms-bg;
|
||||
border: 1px solid @cp_forms-border;
|
||||
border-radius: @variables_radius;
|
||||
font-size: 100%;
|
||||
padding: @alertify_padding-base;
|
||||
&:not(.tui-full-calendar-content) {
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
input {
|
||||
margin: 0 !important;
|
||||
flex: 1;
|
||||
border-radius: @variables_radius 0 0 @variables_radius !important;
|
||||
min-width: 0;
|
||||
}
|
||||
span {
|
||||
|
|
@ -47,6 +49,7 @@
|
|||
height: 100%;
|
||||
margin-left: -1px;
|
||||
text-transform: unset !important;
|
||||
border-radius: 0 @variables_radius @variables_radius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,11 +82,15 @@
|
|||
}
|
||||
button {
|
||||
margin: 0 !important;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
.cp-button-timer {
|
||||
height: 3px;
|
||||
& > div {
|
||||
height: 100%;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: @cp_buttons-primary;
|
||||
&.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt {
|
||||
background-color: @cp_buttons-red;
|
||||
|
|
@ -109,7 +116,7 @@
|
|||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
border-radius: @variables_radius;
|
||||
transition: none;
|
||||
|
||||
i, .fa, .cptools {
|
||||
|
|
@ -230,7 +237,7 @@
|
|||
margin: 0px 0px @alertify_padding-base 0px;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
border-radius: 0px;
|
||||
border-radius: @variables_radius;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -303,7 +310,7 @@
|
|||
.flatpickr-calendar {
|
||||
background: @cp_flatpickr-bg;
|
||||
color: @cryptpad_text_col;
|
||||
border-radius: 0;
|
||||
border-radius: @variables_radius;
|
||||
box-shadow: @variables_shadow;
|
||||
-webkit-box-shadow: @variables_shadow;
|
||||
&.arrowTop::before, &.arrowTop::after {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./font.less";
|
||||
|
||||
@infopages-radius: 5px;
|
||||
@infopages-radius-L: 10px;
|
||||
|
||||
.infopages_link () {
|
||||
text-decoration: none;
|
||||
color: @cryptpad_color_link;
|
||||
|
|
@ -52,7 +55,7 @@ body.html {
|
|||
padding-top: @infopages_padding;
|
||||
padding-bottom: @infopages_padding;
|
||||
min-height: 75vh;
|
||||
max-width: 950px;
|
||||
max-width: 1200px;
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 0.5em;
|
||||
|
|
@ -144,54 +147,102 @@ body.html {
|
|||
footer {
|
||||
|
||||
background-color: @cp_static-footer;
|
||||
padding-top: 20px;
|
||||
padding: 10px;
|
||||
align-self: normal; // override align-items:center from parent in index.html
|
||||
|
||||
.container {
|
||||
margin-bottom: 20px;
|
||||
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 {
|
||||
color: @cp_static-link;
|
||||
&:visited {
|
||||
color: @cp_static-link;
|
||||
}
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: @cp_static-card-bg;
|
||||
border-radius: @infopages-radius;
|
||||
padding: 0.5em 0.7em;
|
||||
* {
|
||||
display: inline;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:hover {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
.cp-logo-foot {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-flow: row;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
max-width: 60px;
|
||||
max-height: 40px;
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.logo-font {
|
||||
display: block;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 1.5rem;
|
||||
color: @cp_static-title;
|
||||
margin-bottom: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.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;
|
||||
|
||||
.cp-footer-language{
|
||||
margin-right: 10px;
|
||||
i {
|
||||
font-size: 1.3em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
select {
|
||||
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
|
||||
.navbar {
|
||||
width: 100%;
|
||||
color: @cp_static-topbar-fg;
|
||||
justify-content: flex-end;
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
height: 50px;
|
||||
|
|
@ -208,20 +259,32 @@ body.html {
|
|||
margin-right: 0;
|
||||
}
|
||||
a {
|
||||
border: 2px solid transparent;
|
||||
//border: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
color: @cp_static-title;
|
||||
background-color: @cp_static-card-bg;
|
||||
border-radius: @infopages-radius;
|
||||
}
|
||||
.nav-link {
|
||||
padding: 0.5em 0.7em;
|
||||
margin-left: 10px;
|
||||
color: @cp_static-link;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.cp-register-btn {
|
||||
border: 2px solid @cp_static-topbar-fg;
|
||||
background-color: @cp_static-topbar-fg;
|
||||
color: @cp_static-bg;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
background-color: @cp_static-card-bg;
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -4,20 +4,23 @@
|
|||
|
||||
.leftside-menu-category_main() {
|
||||
.unselectable_make();
|
||||
padding: 5px 15px;
|
||||
margin: 15px 0;
|
||||
padding: 5px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
height: @variables_bar-height;
|
||||
border-radius: @variables_radius;
|
||||
background-color: @cp_sidebar-left-item-bg;
|
||||
.fa, .cptools {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin-right: 5px;
|
||||
min-width: 25px;
|
||||
min-width: 20px;
|
||||
}
|
||||
&:hover {
|
||||
background: fade(@cryptpad_text_col, 10%);
|
||||
}
|
||||
&.cp-leftside-active {
|
||||
background: @cp_sidebar-left-active;
|
||||
color: @cp_sidebar-left-active-fg;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.limit-bar_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
width: ~"calc(100% - 10px)";
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: @variables_radius;
|
||||
.cp-limit-usage {
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
|
|
@ -65,7 +67,7 @@
|
|||
padding-bottom: 0;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
border-radius: 0px;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,6 +180,7 @@
|
|||
height: 24px;
|
||||
background: @cp_loading-progress-bg;
|
||||
border: 1px solid @cp_loading-progress-bar-bg;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
.cp-loading-progress-bar-value {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
.cp-app-prop-size-container {
|
||||
height: 20px;
|
||||
background-color: @cryptpad_color_brand;
|
||||
border-radius: @variables_radius;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
div {
|
||||
|
|
@ -48,6 +49,8 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: @cryptpad_color_grey_500;
|
||||
border-top-left-radius: @variables_radius;
|
||||
border-bottom-left-radius: @variables_radius;
|
||||
}
|
||||
}
|
||||
.cp-app-prop-size-legend {
|
||||
|
|
@ -65,6 +68,7 @@
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
.cp-app-prop-history-size-color {
|
||||
background-color: @cryptpad_color_grey_500;
|
||||
|
|
@ -159,6 +163,7 @@
|
|||
align-items: center;
|
||||
padding: 5px 0;
|
||||
outline: none;
|
||||
border-radius: @variables_radius;
|
||||
& > i {
|
||||
margin-left: @snapshot_spacing;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -24,12 +24,14 @@
|
|||
background: @cp_sidebar-left-bg;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 0px 5px;
|
||||
.cp-sidebarlayout-categories {
|
||||
flex: 1;
|
||||
.cp-sidebarlayout-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.leftside-menu-category_main();
|
||||
box-shadow: 0px 0px 5px 1px #00000030; // XXX
|
||||
}
|
||||
}
|
||||
&.cp-leftside-narrow {
|
||||
|
|
@ -111,10 +113,12 @@
|
|||
//border-radius: 0.25em 0 0 0.25em;
|
||||
border: 1px solid @cryptpad_color_grey_500;
|
||||
border-right: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
button {
|
||||
//border-radius: 0 0.25em 0.25em 0;
|
||||
//border: 1px solid #adadad;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-left: 0px;
|
||||
height: 40px;
|
||||
margin: 0 !important;
|
||||
|
|
|
|||
|
|
@ -42,10 +42,11 @@
|
|||
width: 1200px;
|
||||
max-width: 90%;
|
||||
margin: 5px auto;
|
||||
border-radius: @variables_radius;
|
||||
.cp-support-list-message {
|
||||
background-color: @msg-bg;
|
||||
margin: 2px;
|
||||
padding: 2px 5px;
|
||||
padding: 5px 5px;
|
||||
border-radius: @variables_radius;
|
||||
.cp-support-fromme {
|
||||
background-color: @fromme-bg;
|
||||
}
|
||||
|
|
@ -73,6 +74,7 @@
|
|||
.cp-support-list-actions {
|
||||
display: flex;
|
||||
order: 3;
|
||||
margin-top: 5px;
|
||||
.cp-support-hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./tools.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.tokenfield_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -35,6 +36,12 @@
|
|||
flex: 1;
|
||||
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 {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -45,6 +52,7 @@
|
|||
margin: 2px 0;
|
||||
margin-right: 5px;
|
||||
height: 24px;
|
||||
border-radius: @variables_radius;
|
||||
vertical-align: middle;
|
||||
cursor: default;
|
||||
color: @cp_token-fg;
|
||||
|
|
@ -92,6 +100,8 @@
|
|||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: 100% !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.history_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -88,13 +89,20 @@
|
|||
}
|
||||
button {
|
||||
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;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.fa:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:hover {
|
||||
// XXX DB: check hover in light/dark themes
|
||||
background-color: fade(@cp_toolbar-fg, 30%);
|
||||
}
|
||||
&:disabled {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.6;
|
||||
|
|
@ -233,9 +241,11 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
margin: 5px 0px 5px 40px;
|
||||
button {
|
||||
width: 50px;
|
||||
color: @cp_toolbar-fg;
|
||||
border-radius: @variables_radius;
|
||||
.fa:first-child:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,12 @@
|
|||
@bg-color: @colortheme_apps[default], // color of the toolbar background
|
||||
) {
|
||||
@toolbar-bg-color: @bg-color;
|
||||
@desat-color: desaturate(@bg-color, 20%);
|
||||
@toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%));
|
||||
@toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%));
|
||||
// XXX Todo: clean up unused variables
|
||||
// XXX: check contrasts of app colors used as btn background
|
||||
// @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 (
|
||||
|
|
@ -27,8 +30,9 @@
|
|||
.toolbar_vars(@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-active: @toolbar-bg-color-active;
|
||||
// --toolbar-bg-color-active: @toolbar-bg-color-active;
|
||||
|
||||
.help_main();
|
||||
.notifications_main();
|
||||
|
|
@ -392,7 +396,6 @@
|
|||
//display: inline-block;
|
||||
button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -439,6 +442,7 @@
|
|||
screen and (max-height: 500px) {
|
||||
flex-wrap: wrap;
|
||||
height: @toolbar_line-height;
|
||||
// XXX DB TODO: scale down icon logo on small screens
|
||||
.cp-pad-not-pinned {
|
||||
line-height: 32px;
|
||||
flex: unset;
|
||||
|
|
@ -503,9 +507,12 @@
|
|||
.cp-toolbar-link {
|
||||
height: @toolbar_line-height;
|
||||
width: @toolbar_line-height;
|
||||
transform: scale(0.5);
|
||||
//transform: scale(0.5);
|
||||
.cp-toolbar-link-logo {
|
||||
padding: 5px;
|
||||
span {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-toolbar-user {
|
||||
|
|
@ -514,16 +521,20 @@
|
|||
height: @toolbar_line-height;
|
||||
width: @toolbar_line-height;
|
||||
margin-left: 0;
|
||||
padding: 0px;
|
||||
button {
|
||||
height: @toolbar_line-height;
|
||||
width: @toolbar_line-height;
|
||||
font-size: 15px;
|
||||
margin-top: -1px;
|
||||
.cp-dropdown-button-title {
|
||||
transform: scale(0.5);
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
&::before {
|
||||
padding-top: 1px;
|
||||
}
|
||||
// .cp-dropdown-button-title {
|
||||
// transform: scale(0.5);
|
||||
// bottom: -5px;
|
||||
// right: -5px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.cp-toolbar-user-dropdown {
|
||||
|
|
@ -723,7 +734,7 @@
|
|||
line-height: @toolbar_top-height;
|
||||
width: @toolbar_top-height;
|
||||
height: @toolbar_top-height;
|
||||
padding: 0;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -735,9 +746,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: @toolbar_top-height;
|
||||
width: @toolbar_top-height - 10px;
|
||||
font-size: 1em;
|
||||
height: @toolbar_top-height;
|
||||
height: @toolbar_top-height - 10px;
|
||||
border-radius: @variables_radius;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
&::before {
|
||||
|
|
@ -795,22 +807,28 @@
|
|||
text-decoration: none;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
color: @toolbar-bg-color;
|
||||
color: var(--toolbar-bg-color);
|
||||
|
||||
svg {
|
||||
#outline, #squares {
|
||||
fill: @toolbar-bg-color;
|
||||
fill: var(--toolbar-bg-color);
|
||||
}
|
||||
#background {
|
||||
fill: @cp_toolbar-logo-bg;
|
||||
}
|
||||
span {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
// svg {
|
||||
// #outline, #squares {
|
||||
// fill: @toolbar-bg-color;
|
||||
// fill: var(--toolbar-bg-color);
|
||||
// }
|
||||
// #background {
|
||||
// fill: @cp_toolbar-logo-bg;
|
||||
// }
|
||||
// }
|
||||
|
||||
// img {
|
||||
// cursor: pointer;
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.cp-toolbar-user {
|
||||
|
|
@ -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 {
|
||||
&> span {
|
||||
font-weight: bold;
|
||||
|
|
@ -896,8 +927,8 @@
|
|||
}
|
||||
|
||||
.cp-toolbar-history, .cp-toolbar-snapshots {
|
||||
background-color: @toolbar-bg-color-light;
|
||||
background-color: var(--toolbar-bg-color-light);
|
||||
background-color: @cp_toolbar-bg;
|
||||
//background-color: var(--toolbar-bg-color-light);
|
||||
color: @toolbar-color;
|
||||
}
|
||||
.cp-toolbar-snapshots {
|
||||
|
|
@ -935,24 +966,9 @@
|
|||
}
|
||||
}
|
||||
.cp-toolbar-bottom {
|
||||
background-color: @toolbar-bg-color-light;
|
||||
background-color: var(--toolbar-bg-color-light);
|
||||
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;
|
||||
margin: 5px 0px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
|
|
@ -967,18 +983,59 @@
|
|||
margin: 5px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid @cp_toolbar-bottom-bg;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
border-radius: 0;
|
||||
border-radius: @variables_radius;
|
||||
height: @toolbar_line-height;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.fa, .cptools {
|
||||
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 {
|
||||
/*
|
||||
|
|
@ -988,10 +1045,24 @@
|
|||
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.
|
||||
*/
|
||||
|
||||
position: relative;
|
||||
.fa {
|
||||
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 {
|
||||
|
|
@ -1013,14 +1084,25 @@
|
|||
.cp-toolbar-bottom-left {
|
||||
display: flex;
|
||||
order: 1;
|
||||
padding-left: 5px;
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.cp-toolbar-bottom-mid {
|
||||
display: flex;
|
||||
order: 2;
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.cp-toolbar-bottom-right {
|
||||
order: 3;
|
||||
display: flex;
|
||||
padding-right: 5px;
|
||||
button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
#cp-toolbar-chat-drawer-open { order: 0; }
|
||||
#cp-toolbar-userlist-drawer-open { order: 1; }
|
||||
& > .cp-dropdown-container {
|
||||
|
|
@ -1081,6 +1163,7 @@
|
|||
}
|
||||
.cp-toolbar-drawer-content {
|
||||
box-shadow: 0px 1px 5px 0px @cp_shadow-color;
|
||||
border-radius: @variables_radius;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
&.cp-dropdown-visible {
|
||||
|
|
@ -1089,7 +1172,8 @@
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
top: @toolbar_line-height;
|
||||
margin: -1px;
|
||||
//margin: -1px;
|
||||
padding: 5px;
|
||||
min-width: 50px;
|
||||
background: @cp_dropdown-bg;
|
||||
display: flex;
|
||||
|
|
@ -1105,15 +1189,15 @@
|
|||
box-sizing: border-box;
|
||||
min-width: 150px;
|
||||
height: @toolbar_line-height;
|
||||
border-radius: 0;
|
||||
border-radius: @variables_radius;
|
||||
border: 0;
|
||||
}
|
||||
button {
|
||||
white-space: nowrap;
|
||||
padding: 5px 16px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-radius: @variables_radius;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
line-height: 1em;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./avatar.less";
|
||||
@import (reference) "./tools.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
.usergrid_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: @variables_radius;
|
||||
margin: 3px !important;
|
||||
cursor: default;
|
||||
transition: order 0.5s, background-color 0.5s;
|
||||
|
|
|
|||
|
|
@ -10,3 +10,7 @@
|
|||
// Used in modal.less and alertify.less
|
||||
@variables_padding: 12px;
|
||||
@variables_shadow: 0 8px 32px 0 @cp_shadow-color;
|
||||
|
||||
// Rounded corners
|
||||
@variables_radius: 5px;
|
||||
@variables_radius_L: 10px;
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: @cryptpad_color_brand;
|
||||
margin-top: 1.5em;
|
||||
img {
|
||||
max-width: 200px;
|
||||
|
|
@ -53,14 +52,19 @@
|
|||
h1 {
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 500;
|
||||
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
|
||||
//font-family: "Raleway";
|
||||
color: @cryptpad_color_brand;
|
||||
font-size: 3.7rem;
|
||||
}
|
||||
.tag-line {
|
||||
text-align: center;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
a {
|
||||
margin: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-top: 40px;
|
||||
|
|
@ -153,6 +170,7 @@
|
|||
|
||||
each(@colortheme_apps, {
|
||||
.cp-callout-@{key} {
|
||||
border-radius: @infopages-radius;
|
||||
i { color: @value; }
|
||||
&:hover {
|
||||
@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-callout-more {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
|
||||
@import (reference) '../../customize/src/less2/include/tools.less';
|
||||
@import (reference) '../../customize/src/less2/include/avatar.less';
|
||||
@import (reference) '../../customize/src/less2/include/variables.less';
|
||||
|
||||
&.cp-app-calendar {
|
||||
|
||||
|
|
@ -117,6 +118,7 @@
|
|||
.tui-full-calendar-popup-container {
|
||||
background: @cp_flatpickr-bg;
|
||||
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) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -182,6 +184,11 @@
|
|||
.tui-full-calendar-section-allday {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
border-radius: @variables_radius;
|
||||
.tui-full-calendar-ic-checkbox {
|
||||
margin-left: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -255,7 +262,8 @@
|
|||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
input {
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -273,6 +281,26 @@
|
|||
#cp-toolbar .cp-calendar-browse {
|
||||
display: flex;
|
||||
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 {
|
||||
|
|
@ -300,7 +328,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px 0;
|
||||
margin: 5px 0 10px 0;
|
||||
&:not(:first-child) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -310,12 +338,20 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
border-radius: @variables_radius;
|
||||
background-color: @cp_sidebar-left-bg;
|
||||
&:not(.cp-unclickable) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cp-dropdown-container {
|
||||
position: initial;
|
||||
}
|
||||
button.cp-calendar-actions {
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: @cp_sidebar-left-bg;
|
||||
}
|
||||
}
|
||||
&.cp-ghost {
|
||||
padding: 0;
|
||||
button {
|
||||
|
|
@ -326,12 +362,19 @@
|
|||
justify-content: space-between;
|
||||
background: transparent;
|
||||
border: 1px solid @cryptpad_text_col;
|
||||
border-radius: @variables_radius;
|
||||
padding: 5px;
|
||||
height: 36px;
|
||||
font: @colortheme_app-font;
|
||||
align-items: center;
|
||||
color: @cryptpad_text_col;
|
||||
&: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;
|
||||
}
|
||||
&:hover {
|
||||
background: fade(@cryptpad_text_col, 10%);
|
||||
background: @cp_sidebar-left-item-bg;
|
||||
}
|
||||
&.cp-restricted {
|
||||
color: @cp_drive-header-fg;
|
||||
}
|
||||
.cp-calendar-icon {
|
||||
width: 36px;
|
||||
width: 30px;
|
||||
display: inline-flex;
|
||||
height: 36px;
|
||||
margin: -5px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
&.cp-active {
|
||||
background: @cp_sidebar-left-active;
|
||||
background-color: @cp_sidebar-left-item-bg;
|
||||
.cp-calendar-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -599,7 +599,7 @@ define([
|
|||
text: '',
|
||||
options: options, // Entries displayed in the menu
|
||||
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];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -177,12 +177,17 @@ define(function() {
|
|||
whiteboard: 'cptools-whiteboard',
|
||||
todo: 'cptools-todo',
|
||||
contacts: 'fa-address-book',
|
||||
calendar: 'fa-calendar',
|
||||
kanban: 'cptools-kanban',
|
||||
doc: 'fa-file-word-o',
|
||||
presentation: 'fa-file-powerpoint-o',
|
||||
sheet: 'fa-file-excel-o',
|
||||
drive: 'fa-hdd-o',
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1732,6 +1732,14 @@ define([
|
|||
var padType = metadataMgr.getMetadata().type;
|
||||
|
||||
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) {
|
||||
var userAdminContent = [];
|
||||
if (accountName) {
|
||||
|
|
|
|||
|
|
@ -463,15 +463,18 @@ MessengerUI, Messages, Pages) {
|
|||
createCollapse = function (toolbar) {
|
||||
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 notif = h('span.cp-collapsed-notif');
|
||||
|
||||
var $button = $(h('button.cp-toolbar-collapse',[
|
||||
up,
|
||||
down
|
||||
down,
|
||||
notif
|
||||
]));
|
||||
var $up = $(up);
|
||||
var $down = $(down);
|
||||
toolbar.$bottomR.prepend($button);
|
||||
$down.hide();
|
||||
$(notif).hide();
|
||||
$button.click(function () {
|
||||
toolbar.$top.toggleClass('toolbar-hidden');
|
||||
var hidden = toolbar.$top.hasClass('toolbar-hidden');
|
||||
|
|
@ -482,6 +485,7 @@ MessengerUI, Messages, Pages) {
|
|||
} else {
|
||||
$up.show();
|
||||
$down.hide();
|
||||
$(notif).hide();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -574,7 +578,7 @@ MessengerUI, Messages, Pages) {
|
|||
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('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");
|
||||
}
|
||||
|
||||
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('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");
|
||||
}
|
||||
|
||||
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('span.cp-button-name', Messages.shareButton)
|
||||
]));
|
||||
|
|
@ -902,7 +906,7 @@ MessengerUI, Messages, Pages) {
|
|||
href: href,
|
||||
title: buttonTitle,
|
||||
'class': "cp-toolbar-link-logo"
|
||||
}).append(UIElements.getSvgLogo());
|
||||
}).append(UI.getIcon(privateData.app));
|
||||
|
||||
var onClick = function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -1179,6 +1183,9 @@ MessengerUI, Messages, Pages) {
|
|||
|
||||
Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], {
|
||||
onMessage: function (data, el) {
|
||||
if (toolbar.$top.hasClass('toolbar-hidden')) {
|
||||
$('.cp-collapsed-notif').css('display', '');
|
||||
}
|
||||
if (el) {
|
||||
$(div).prepend(el);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -526,6 +526,7 @@
|
|||
background: @cp_form-bg1;
|
||||
padding: 10px;
|
||||
box-shadow: 0px 0px 15px @cp_shadow-color;
|
||||
border-radius: @variables_radius;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -878,6 +879,7 @@
|
|||
background: @cp_form-bg1;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: @variables_radius;
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -900,6 +902,7 @@
|
|||
padding: 5px;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
border-radius: 0px @variables_radius 0px 0px;
|
||||
i { margin-right: 5px; }
|
||||
background: fade(@cryptpad_text_col, 10%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
.kanban-board-header {
|
||||
background-color: @palette0;
|
||||
color: @cp_kanban-fg;
|
||||
border-radius: @variables_radius @variables_radius 0px 0px;
|
||||
}
|
||||
.kanban-board {
|
||||
.kanban-board-inner {
|
||||
|
|
@ -34,6 +35,8 @@
|
|||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-radius: @variables_radius;
|
||||
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB
|
||||
}
|
||||
color: @cp_kanban-fg;
|
||||
button {
|
||||
|
|
@ -81,9 +84,11 @@
|
|||
}
|
||||
#cp-kanban-edit-body {
|
||||
border: 1px solid @cp_forms-border;
|
||||
border-radius: @variables_radius;
|
||||
.CodeMirror {
|
||||
height: 105px;
|
||||
resize: vertical;
|
||||
border-radius: 0px 0px @variables_radius @variables_radius;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
box-sizing: content-box;
|
||||
|
|
@ -91,6 +96,7 @@
|
|||
.cp-markdown-toolbar {
|
||||
background-color: @cp_kanban-conflict-bg;
|
||||
color: @cp_kanban-fg;
|
||||
border-radius: @variables_radius @variables_radius 0px 0px;
|
||||
button {
|
||||
&:hover {
|
||||
background-color: @cp_kanban-fg;
|
||||
|
|
@ -174,8 +180,10 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
border-radius: @variables_radius;
|
||||
flex-wrap: wrap;
|
||||
background: @cp_kanban-item-bg;
|
||||
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB make this a variable?
|
||||
.tools_unselectable();
|
||||
touch-action: none;
|
||||
cursor: move;
|
||||
|
|
@ -250,6 +258,7 @@
|
|||
padding: 0 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
border-radius: @variables_radius;
|
||||
background-color: @cp_kanban-tags-bg;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
|
|
@ -291,8 +300,8 @@
|
|||
}
|
||||
|
||||
main {
|
||||
padding: 0 10px;
|
||||
margin: 10px 0;
|
||||
padding: 10px 5px;
|
||||
//margin: 10px 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
justify-content: space-around;
|
||||
|
|
@ -327,8 +336,8 @@
|
|||
}
|
||||
}
|
||||
footer {
|
||||
margin: 10px;
|
||||
margin-top: 0px;
|
||||
margin: 5px;
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
span {
|
||||
.tools_unselectable();
|
||||
|
|
@ -336,7 +345,7 @@
|
|||
width: 50%;
|
||||
border: 1px solid fade(@cp_kanban-fg, 70%);
|
||||
color: fade(@cp_kanban-fg, 70%);
|
||||
border-radius: 0px;
|
||||
border-radius: @variables_radius;
|
||||
font-size: 25px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
|
@ -420,6 +429,7 @@
|
|||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
background-color: @cp_kanban-tags-bg;
|
||||
border-radius: @variables_radius;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
|
@ -445,6 +455,12 @@
|
|||
&:hover {
|
||||
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;
|
||||
color: @cp_app-bg;
|
||||
}
|
||||
span.cp-kanban-view-small {
|
||||
}
|
||||
// span.cp-kanban-view-small {
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
&.cp-kanban-quick {
|
||||
#cp-kanban-controls {
|
||||
.cp-kanban-changeView {
|
||||
span.cp-kanban-view {
|
||||
}
|
||||
// span.cp-kanban-view {
|
||||
// }
|
||||
span.cp-kanban-view-small {
|
||||
background-color: @cp_kanban-fg !important;
|
||||
color: @cp_app-bg;
|
||||
|
|
@ -558,6 +574,7 @@
|
|||
width: 50px;
|
||||
margin: 10px 5px;
|
||||
border: 1px solid @cp_kanban-fg;
|
||||
border-radius: @variables_radius;
|
||||
color: @cp_kanban-fg;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
|
|
@ -655,6 +672,6 @@
|
|||
|
||||
.form-group {
|
||||
text-align: right;
|
||||
margin-button: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1450,7 +1450,7 @@ define([
|
|||
$('<label>').text(Messages.settings_codeIndentation).appendTo($div);
|
||||
|
||||
var $inputBlock = $('<div>', {
|
||||
'class': 'cp-sidebarlayout-input-block',
|
||||
'class': 'cp-sidebarlayout-input',
|
||||
}).appendTo($div);
|
||||
|
||||
var $input = $('<input>', {
|
||||
|
|
@ -1545,7 +1545,7 @@ define([
|
|||
$('<label>').text(Messages.settings_codeFontSize).appendTo($div);
|
||||
|
||||
var $inputBlock = $('<div>', {
|
||||
'class': 'cp-sidebarlayout-input-block',
|
||||
'class': 'cp-sidebarlayout-input',
|
||||
}).appendTo($div);
|
||||
|
||||
var $input = $('<input>', {
|
||||
|
|
|
|||
|
|
@ -88,6 +88,8 @@
|
|||
}
|
||||
.cp-team-cat-header {
|
||||
justify-content: center;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
.avatar_main(30px);
|
||||
.cp-avatar {
|
||||
justify-content: center;
|
||||
|
|
@ -101,9 +103,6 @@
|
|||
}
|
||||
cursor: default !important;
|
||||
font-size: 18px;
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
span.cp-sidebarlayout-category-name {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
@ -129,6 +128,7 @@
|
|||
justify-content: space-between;
|
||||
flex-flow: column;
|
||||
width: 300px;
|
||||
border-radius: @variables_radius_L;
|
||||
max-width: 90%;
|
||||
height: 384px;
|
||||
padding: 50px;
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
}
|
||||
}
|
||||
.cp-team-roster {
|
||||
.avatar_main(50px);
|
||||
.avatar_main(40px);
|
||||
.cp-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -199,10 +199,11 @@
|
|||
.cp-team-roster-member {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
padding: 2px;
|
||||
margin: 5px 0px;
|
||||
padding: 5px 5px 5px 10px;
|
||||
max-width: 500px;
|
||||
background-color: @roster-bg-color;
|
||||
border-radius: @variables_radius;
|
||||
&:hover {
|
||||
background-color: @roster-bg-color-hover;
|
||||
}
|
||||
|
|
@ -214,7 +215,8 @@
|
|||
width: 5px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background-color: red;
|
||||
border-radius: @variables_radius;
|
||||
background-color: red; // XXX hard coded colors
|
||||
&.online {
|
||||
background-color: green;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue