Merge branch 'staging' into oo2
yflory
6 years ago
commit
bf9cf95292
@ -0,0 +1,260 @@
|
||||
# Fossa release (v2.5.0)
|
||||
|
||||
## Goals
|
||||
|
||||
This release took longer than usual - three weeks instead of two - due to our plans involving a complete redesign of how login and registration function.
|
||||
Any time we rework a critical system within CryptPad we're very cautious about deploying it, however, this update should bring considerable value for users.
|
||||
From now on, users will be able to change their passwords without losing access to their old data, however, this is very different from _password recovery_.
|
||||
While we will still be unable to help you if you have forgotten your password, this update will address our inability up until this point to change your password in the event that it has been compromised in some way.
|
||||
|
||||
## Update notes
|
||||
|
||||
* v2.5.0 uses newly released features in a clientside dependency ([chainpad-netflux](https://github.com/xwiki-labs/chainpad-netflux/releases/tag/0.7.2)). Run `bower update` to make sure you have the latest version.
|
||||
* Update your server config to serve /block/ with maxAge 0d, if you are using a reverse proxy, or docker. `cryptpad/docs/example.nginx.conf` has been updated to include an example.
|
||||
* Restart your server after updating.
|
||||
* We have added a new feedback key, `NO_CSS_VARIABLES`, in order to diagnose how many of our clients support the CSS3 functionality.
|
||||
|
||||
### Features
|
||||
|
||||
* v2.5.0 introduces support for what we have called _modern users_.
|
||||
* New registrations will use the new APIs that we've built to facillitate the ability to change your account password.
|
||||
* _Legacy registrations_ will continue to function as they always have.
|
||||
* Changing your password (via the settings page) will migrate old user accounts to the new system.
|
||||
* We'll publish a blog post in the coming weeks to explain in depth how this functionality is implemented.
|
||||
* The _kanban_ application now features support for export and import of your project data.
|
||||
* This release features minor improvements to the _Deutsch_ translation
|
||||
|
||||
### Bug fixes
|
||||
|
||||
* We noticed that if you entered credentials for registration, and cancelled the displayed prompt informing you that such a user was already registered, the registration interface would not unlock for further interaction. This has been fixed.
|
||||
* We found that on very slow connections, or when users opened pads in Firefox without focusing the tab, requirejs would fail to load dependencies before timing out. We've increased the timeout period by a factor of ten to address such cases.
|
||||
|
||||
# Echidna release (v2.4.0)
|
||||
|
||||
## Goals
|
||||
|
||||
For version 2.4.0 we chose to use our time to address difficulties that some users had, and to release some features which have been in development for some time. With the recent release of the _password-protected-pads_ feature, some users desired to be able to change the passwords that they'd already set, or to add a password to a pad retroactively. Other users wanted to recover information that had accidentally been deleted from their pads, but found that the history feature was difficult to use on networks with poor connectivity. Others still found that loading pads in general was too slow.
|
||||
|
||||
## Update notes
|
||||
|
||||
* We have released new clientside dependencies, so server administrators will need to run `bower update`
|
||||
* This release also depends on new serverside dependencies, so administrators will also need to run `npm update`
|
||||
* This release (optionally) takes advantage of Webworker APIs, so administrators may need to update their Content Security Headers to include worker-src (and child-src for safari)
|
||||
* see cryptpad/docs/example.nginx.conf for more details regarding configuration for nginx as a reverse proxy
|
||||
* to enable webworkers as an experimental feature, add `AppConfig.disableWorkers = false;` to your `cryptpad/customize/application-config.js`
|
||||
* Finally, administrators will need to restart their servers after updating, as clients will require new functionality
|
||||
|
||||
## What's new
|
||||
|
||||
### Features
|
||||
|
||||
* CryptPad now takes advantage of some very modern browser APIs
|
||||
* Shared Workers allow common tasks for all CryptPad editors to be handled by a single background process which runs in the background. This results in better performance savings for anyone using multiple editors at once in different tabs
|
||||
* Webworkers are used in situations where shared workers are not supported, for most of the same tasks. They are not shared amongst different tabs, but can allow for a more responsive user experience since some heavy commands will be run in the background
|
||||
* Not all browsers feature complete support for webworkers. For cases where they are not supported at all, or where cryptographic APIs are not supported within their context (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7607496/), we fall back to an asynchronous context in the same thread
|
||||
* Pads with no password can now be updated to include a password, and pads with a password can have their passwords changed
|
||||
* right-click on the pad in question, and see its properties. The following dialog will present the option to change its password
|
||||
* changing a pad's password will remove its history
|
||||
* Accessing a pad's history used to require that clients fetch the entire history of the pad before they could view any of it. History retrieval is now done on an on-demand basis, approximately 100 versions of the pad at a time
|
||||
* this also features an updated UI with a slider
|
||||
* We've refactored our whiteboard application to be compatible with our internal framework. As a result, it will be easier to maintain and will have all the same features as the other editors built with the same framework
|
||||
* We've defined some new server-side features which will allow clients to change their user passwords in a coming release
|
||||
* We've updated our messaging server implementation
|
||||
* the aspect of the server which stores and distributes history has been untangled from the aspect which tracks user lists and broadcasts messages
|
||||
* the server will now store the time when each message was received, so as to be able to allow users to view the time of edits in a later release
|
||||
|
||||
### Bug fixes
|
||||
|
||||
* When a user tries to register, but enters credentials which have already been used for that CryptPad instance, we prompt them to log in as that user. We discovered that the login had stopped working at some point. This has been fixed
|
||||
* Server administrators may have seen warnings from npm when attempting to update. We have fixed invalid entries and added missing entries where appropriate such that there are no more warnings
|
||||
* Static info pages have been restyled to be more responsive, thanks to @CatalinScr
|
||||
* Support for friend requests in pads with version 0 hashes has been repaired
|
||||
* We noticed a regression in how default titles for pads were suggested, and have implemented the intended behaviour
|
||||
|
||||
# Donkey release (v2.3.0)
|
||||
|
||||
## Goals
|
||||
|
||||
For this release we wanted to deploy some new features related to our encrypted file functionality.
|
||||
|
||||
## Update notes
|
||||
|
||||
* new clientside dependencies. run `bower update`
|
||||
* new serverside APIs. Restart your server
|
||||
|
||||
## What's new
|
||||
|
||||
### Features
|
||||
|
||||
* When uploading files to your CryptDrive or a pad, users will now be prompted to protect the file with a password (in addition to some random data)
|
||||
* this adds an additional layer of security in case a third party gains access to the file's link, but not the password.
|
||||
* Users are also able to claim an encrypted file as their own, allowing them the option to delete it from the server at a later date.
|
||||
* We've refactored the Media-Tag library to be much smaller and easier to use.
|
||||
|
||||
### Bug fixes
|
||||
|
||||
* When setting a title for a pad which was created from a template, titles were not correctly inferred from the content of a document. This has been fixed.
|
||||
* We discovered that users who had installed _AdBlock Plus_ and configured it to **Block social media icons tracking** were unable to use the _share menu_ to construct alternative links to the same pad, but with different attributes. We have worked around the problem.
|
||||
* Admins who had configured their CryptPad instance to use custom icons for applications in the CryptDrive may have noticed that the same icons were not used on the home page. We've fixed this such that the same icons will be used everywhere
|
||||
* We have also updated the icon for the Kanban app to a more appropriate symbol
|
||||
* We found that the download button in the _file_ app was downloading the user's avatar, instead of the correct encrypted file embedded in the page. We've since fixed this
|
||||
|
||||
# Coati release (v2.2.0)
|
||||
|
||||
## Goals
|
||||
|
||||
For this release we wanted to continue our efforts towards improving CryptPad usability. We've also added a new Kanban application which was in its final stage for quite some time.
|
||||
|
||||
## What's new
|
||||
|
||||
### Features
|
||||
|
||||
* We've added a new kanban application!
|
||||
* You can create boards, add items to those boards and move items from one board to another.
|
||||
* It includes almost all the features seen in the other apps: templates, password protection, history, read-only, etc.
|
||||
* Kanban can be shared and used collaboratively.
|
||||
* This new app was prototyped by @ldubost, and based on [jkanban](https://github.com/riktar/jkanban) by @riktar
|
||||
* We've improved our tagging feature.
|
||||
* When you want to add tags to a pad, you will see suggestions based on the tags you've already used
|
||||
* There is a new *Tags* category in CryptDrive for logged in users. It shows all the tags you've used in your pads and their number of use.
|
||||
* In the Poll application, the line where your cursor is located will be highlighted so that you can see easily which option you're looking at.
|
||||
|
||||
### Bug fixes
|
||||
|
||||
* We've fixed two interface bugs in the Share menu which made it difficult to change the access rights for the link (edit or read-only) in some cases.
|
||||
* A bug introduced in the previous version prevented loading of the drive if it contained some content from an alpha version of CryptPad.
|
||||
* Some parts of our UI were using CSS values not supported by all browsers.
|
||||
* Some pads created more than one year ago were not loading properly.
|
||||
|
||||
# Badger release (v2.1.0)
|
||||
|
||||
## Goals
|
||||
|
||||
This is a small release due to a surplus of holidays in France during the Month of May.
|
||||
We'd been planning to implement _Password-protected Pads_ for a long time, but we had not found a good opportunity to do so within our roadmap.
|
||||
After a generous donation from one of our users who considered this a critical feature, we were able to dedicate some resources towards delivering it to all of our users.
|
||||
|
||||
## Update notes
|
||||
|
||||
This release depends on new APIs in our `chainpad-crypto` module. Additionally, we have fixed a critical bug in `chainpad-listmap`.
|
||||
Admins will need to update their clientside dependencies with `bower update` when deploying.
|
||||
|
||||
## What's new
|
||||
|
||||
### For Users
|
||||
|
||||
* Users can now protect their new pads with a password.
|
||||
* This makes it safer to share very sensitive links over email or messengers, as anyone who gains access to the link will still need the password to edit or view pads.
|
||||
* This also protects your pads against browsers which share your history across devices via the cloud.
|
||||
* We recommend that you share passwords using a different messenger tool.
|
||||
* Passwords cannot be set or changed after creation time (yet), so we also recommend you consider how secure your pad will need to be when you create it.
|
||||
* Password protection coincides with an update to our URL encoding scheme. URLs are generally quite a bit shorter than before, while offering more functionality.
|
||||
* Existing users will have a short delay the first time that they load this version of CryptPad, as it contains a migration of their CryptDrive's data format.
|
||||
* This migration is very tolerant of interuptions, so if you need to close your browser while it is in progress, you are free to do so.
|
||||
|
||||
### For Admins
|
||||
|
||||
* Admins can look forward to happier users!
|
||||
|
||||
### Bug fixes
|
||||
|
||||
* data loss when reconnecting in our poll app
|
||||
* we've fixed a minor bug in our poll app which caused an increasing number of tooltips to be added to elements
|
||||
|
||||
# Alpaca release (v2.0.0)
|
||||
|
||||
This is the first release of our 2.0 cycle.
|
||||
|
||||
After careful consideration we've decided to name each release in this cycle after a cute animal, iterating through the letters of the Latin alphabet from A to Z.
|
||||
|
||||
## Goals
|
||||
|
||||
We wanted to update CryptPad's appearance once more, adopting the colors from our logo throughout more of its interface.
|
||||
|
||||
## Update notes
|
||||
|
||||
This release coincides with the introduction of new APIs in ChainPad, so we recommend that adminstrators update their clientside dependencies by running `bower update`.
|
||||
|
||||
As recent updates have updated serverside dependencies, we also recommend that you run `npm update` and _restart your server_.
|
||||
|
||||
## What's new
|
||||
|
||||
### For Users
|
||||
|
||||
* CryptPad 2.0.0 features a complete German-language translation, thanks to contributions from @polx, @kpcyrd, and @micealachman
|
||||
* CryptPad has a new look!
|
||||
* we've adopted the color scheme of our logo for more UI elements throughout CryptPad, on the loading screen and various dialogs
|
||||
* we've customized our checkboxes and radio buttons to match
|
||||
* we've updated the look of our pad creation screen to feature up to four templates per page, with tab and button navigation
|
||||
* tooltips have been made to match the dialogs on our pad creation screen
|
||||
* clients now store their usage of various templates in their CryptDrive, and rank templates by popularity in the pad creation screen
|
||||
* we no longer show usage tips on the loading screen
|
||||
* Users who visit pads which have been deleted or otherwise do not exist are now prompted to redirect to their home page
|
||||
* Our poll and whiteboard apps now use an in-house CSS framework to help us maintain consistency with the other applications
|
||||
|
||||
### For Admins
|
||||
|
||||
* we've updated the example configuration file (`config.example.js`) to no longer require a leading space before the domain, as we found it to be a common source of confusion. This will only affect newly generated config files.
|
||||
* our webserver has been configured to support HTTP access of the client datastore, to facilitate scripts which parse and decrypt history without having to go through our websocket infrastructure
|
||||
* we no longer use a single image for our favicon and our loading screen icon, allowing admins to customize either feature of their instance independently
|
||||
* We've also moved the rest of the styles for the loading screen from `/common/` into `/customize.dist/`,
|
||||
* move loading screen implementation from `/common/` to `/customize.dist/`
|
||||
|
||||
## Bug fixes
|
||||
|
||||
* don't eat tab presses when focused on register button
|
||||
* idempotent picker initialization
|
||||
* CKEditor fixes
|
||||
* drag and drop text
|
||||
* media-tag movement integrated as CKEditor plugin
|
||||
* avoid media-tag flicker on updates
|
||||
* set content type for the 404 page
|
||||
|
||||
# 1.29.0
|
||||
|
||||
## Goals
|
||||
|
||||
For this release we wanted to direct our effort towards improving user experience issues surrounding user accounts.
|
||||
|
||||
## Update notes
|
||||
|
||||
This release features breaking changes to some clientside dependencies. Administrators must make sure to deploy the
|
||||
latest server with npm update before updating your clientside dependencies with bower update.
|
||||
|
||||
## What's new
|
||||
|
||||
* newly registered users are now able to delete their accounts automatically, along with any personal
|
||||
information which had been created:
|
||||
* ToDo list data is automatically deleted, along with user profiles
|
||||
* all of a user's owned pads are also removed immediately in their account deletion process
|
||||
* users who predate account deletion will not benefit from automatic account deletion, since the server
|
||||
does not have sufficient knowledge to guarantee that the information they could request to have deleted is strictly
|
||||
their own. For this reason, we've started working on scripts for validating user requests, so as to enable manual
|
||||
deletion by the server administrator.
|
||||
* the script can be found in cryptpad/check-account-deletion.js, and it will be a part of an ongoing
|
||||
effort to improve administrator tooling for situations like this
|
||||
* users who have not logged in, but wish to use their drive now see a ghost icon which they can use to create pads.
|
||||
We hope this makes it easier to get started as a new user.
|
||||
* registered users who have saved templates in their drives can now use those templates at any time, rather than only
|
||||
using them to create new pads
|
||||
* we've updated our file encryption code such that it does not interfere with other scripts which may be running at
|
||||
the same time (synchronous blocking, for those who are interested)
|
||||
* we now validate message signatures clientside, except when they are coming from the history keeper because clients
|
||||
trust that the server has already validated those signatures
|
||||
|
||||
## Bug fixes
|
||||
|
||||
* we've removed some dependencies from our home page that were introduced when we updated to use bootstrap4
|
||||
* we now import fontawesome as css, and not less, which saves processing time and saves room in our localStorage cache
|
||||
* templates which do not have a 'type' attribute set are migrated such that the pads which are created with their
|
||||
content are valid
|
||||
* thumbnail creation for pads is now disabled by default, due to poor performance
|
||||
* users can enable thumbnail creation in their settings page
|
||||
* we've fixed a significant bug in how our server handles checkpoints (special patches in history which contain the
|
||||
entire pads content)
|
||||
* it was possible for two users to independently create checkpoints in close proximity while the document was in a
|
||||
forked state. New users joining while the session was in this state would get stuck on one side of the fork,
|
||||
and could lose data if the users on the opposing fork overrode their changes
|
||||
* we've updated our tests, which have been failing for some time because their success conditions were no longer valid
|
||||
* while trying to register a previously registered user, users could cancel the prompt to login as that user.
|
||||
If they did so, the registration form remained locked. This has been fixed.
|
||||
@ -0,0 +1,25 @@
|
||||
FROM arm64v8/node:6
|
||||
|
||||
COPY . /cryptpad
|
||||
WORKDIR /cryptpad
|
||||
|
||||
RUN npm config set unsafe-perm true
|
||||
|
||||
ADD https://github.com/krallin/tini/releases/download/v0.18.0/tini-static-arm64 /sbin/tini
|
||||
RUN chmod a+x /sbin/tini
|
||||
|
||||
RUN apt install -y git \
|
||||
&& npm install --production \
|
||||
&& npm install -g bower \
|
||||
&& bower install --allow-root
|
||||
|
||||
EXPOSE 3000 3001
|
||||
|
||||
VOLUME /cryptpad/datastore
|
||||
VOLUME /cryptpad/customize
|
||||
|
||||
ENV USE_SSL=false
|
||||
ENV STORAGE=\'./storage/file\'
|
||||
ENV LOG_TO_STDOUT=true
|
||||
|
||||
CMD ["/sbin/tini", "--", "/cryptpad/container-start.sh"]
|
||||
@ -0,0 +1,76 @@
|
||||
/* jshint esversion: 6, node: true */
|
||||
const Fs = require('fs');
|
||||
const nThen = require('nthen');
|
||||
const Pinned = require('./pinned');
|
||||
const Nacl = require('tweetnacl');
|
||||
|
||||
const hashesFromPinFile = (pinFile, fileName) => {
|
||||
var pins = {};
|
||||
pinFile.split('\n').filter((x)=>(x)).map((l) => JSON.parse(l)).forEach((l) => {
|
||||
switch (l[0]) {
|
||||
case 'RESET': {
|
||||
pins = {};
|
||||
if (l[1] && l[1].length) { l[1].forEach((x) => { pins[x] = 1; }); }
|
||||
//jshint -W086
|
||||
// fallthrough
|
||||
}
|
||||
case 'PIN': {
|
||||
l[1].forEach((x) => { pins[x] = 1; });
|
||||
break;
|
||||
}
|
||||
case 'UNPIN': {
|
||||
l[1].forEach((x) => { delete pins[x]; });
|
||||
break;
|
||||
}
|
||||
default: throw new Error(JSON.stringify(l) + ' ' + fileName);
|
||||
}
|
||||
});
|
||||
return Object.keys(pins);
|
||||
};
|
||||
|
||||
var escapeKeyCharacters = function (key) {
|
||||
return key && key.replace && key.replace(/\//g, '-');
|
||||
};
|
||||
|
||||
|
||||
const dataIdx = process.argv.indexOf('--data');
|
||||
let edPublic;
|
||||
if (dataIdx === -1) {
|
||||
const hasEdPublic = process.argv.indexOf('--ed');
|
||||
if (hasEdPublic === -1) { return void console.error("Missing ed argument"); }
|
||||
edPublic = escapeKeyCharacters(process.argv[hasEdPublic+1]);
|
||||
} else {
|
||||
const deleteData = JSON.parse(process.argv[dataIdx+1]);
|
||||
if (!deleteData.toSign || !deleteData.proof) { return void console.error("Invalid arguments"); }
|
||||
// Check sig
|
||||
const ed = Nacl.util.decodeBase64(deleteData.toSign.edPublic);
|
||||
const signed = Nacl.util.decodeUTF8(JSON.stringify(deleteData.toSign));
|
||||
const proof = Nacl.util.decodeBase64(deleteData.proof);
|
||||
if (!Nacl.sign.detached.verify(signed, proof, ed)) { return void console.error("Invalid signature"); }
|
||||
edPublic = escapeKeyCharacters(deleteData.toSign.edPublic);
|
||||
}
|
||||
|
||||
let data = [];
|
||||
let pinned = [];
|
||||
|
||||
nThen((waitFor) => {
|
||||
let f = './pins/' + edPublic.slice(0, 2) + '/' + edPublic + '.ndjson';
|
||||
Fs.readFile(f, waitFor((err, content) => {
|
||||
if (err) { throw err; }
|
||||
pinned = hashesFromPinFile(content.toString('utf8'), f);
|
||||
}));
|
||||
}).nThen((waitFor) => {
|
||||
Pinned.load(waitFor((d) => {
|
||||
data = Object.keys(d);
|
||||
}), {
|
||||
exclude: [edPublic + '.ndjson']
|
||||
});
|
||||
}).nThen(() => {
|
||||
console.log('Pads pinned by this user and not pinned by anybody else:');
|
||||
pinned.forEach((p) => {
|
||||
if (data.indexOf(p) === -1) {
|
||||
console.log(p);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 393.94 476.2"><defs><style>.cls-1{opacity:0.04;}.cls-2{fill:#999;}.cls-3{fill:#4591c4;}</style></defs><title>CryptPadlogo</title><g id="Layer_2" data-name="Layer 2"><g id="svg2"><g id="g4764" class="cls-1"><path class="cls-2" d="M139.36,288.16l32.07-64.43a13.59,13.59,0,0,0-4.23-16.62,48.65,48.65,0,0,1-21.28-48.25l-23.47-15.31a75.74,75.74,0,0,0-3.36,21.87c0,22,9.52,41.45,24.35,55.54l-27.24,54.8c-.11,0-.2,0-.31,0a23.27,23.27,0,1,0,0,46.53,23,23,0,0,0,17.31-7.86h40.27V288.16Z"/><path class="cls-2" d="M278.28,275.73c-.57,0-1.11.13-1.68.17l-27.33-55.09c14.75-14.07,24.2-33.47,24.2-55.39a77.13,77.13,0,0,0-3.06-21.72l-23.62,15.45a51.69,51.69,0,0,1,.44,6.27A50.21,50.21,0,0,1,225.65,207a13.58,13.58,0,0,0-4.22,16.62l31.77,64.58h-34V314.4h41.63a23.23,23.23,0,1,0,17.41-38.67Z"/><polygon class="cls-2" points="270.41 143.7 270.41 143.7 270.41 143.7 270.41 143.7"/><circle class="cls-3" cx="196.06" cy="167.4" r="21.21"/><path class="cls-3" d="M362.25,21.36a31.14,31.14,0,0,0-18.1,5.8L197,0,50,27.16a31.62,31.62,0,1,0-33.68,53.4v212c0,19.95,8.93,41.51,26.62,64.08,15.66,20,37.82,40.46,65.89,60.83a603,603,0,0,0,57,36.21,31.54,31.54,0,0,0,60,1.25,606,606,0,0,0,59.26-37.46c28.09-20.37,50.23-40.86,65.9-60.83,17.7-22.6,26.61-44.13,26.61-64.08V80.38a31.46,31.46,0,0,0-15.39-59ZM62.82,55.94,196.61,31.32l134.33,24.8a29.58,29.58,0,0,0,.9,5.61L253.09,113a76.78,76.78,0,0,0-113.69.36L61.55,62.82A31.8,31.8,0,0,0,62.82,55.94ZM350.49,288.21a51.41,51.41,0,0,1-.73,8.51c-3.16,12.6-10.11,25.8-20.82,39.47-13.41,17.09-32.43,34.52-56.48,51.95a532.75,532.75,0,0,1-54.19,34.09,31.5,31.5,0,0,0-43.73-.62,534,534,0,0,1-53.06-33.47c-24-17.43-42.9-34.86-56.31-51.95-12.77-16.31-20.25-31.94-22.26-46.71,0-.41,0-.86,0-1.27V82.37a31.51,31.51,0,0,0,8.69-5.25l88.88,57.75.37-.36,10.5,6.88a51,51,0,0,1,45.07-27,50.37,50.37,0,0,1,45.08,27.15l22.09-14.3L341.44,76.4A32.55,32.55,0,0,0,350.49,82Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="cptools" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="template" horiz-adv-x="876" d="M804.244 960h-732.699c-39.513 0-71.545-32.032-71.545-71.545v0-880.909c0-39.513 32.032-71.545 71.545-71.545v0h732.699c39.513 0 71.545 32.032 71.545 71.545v0 880.909c0 39.513-32.032 71.545-71.545 71.545v0zM808.421 7.545c0-2.307-1.87-4.177-4.177-4.177v0h-732.699c-2.307 0-4.177 1.87-4.177 4.177v0 880.909c0 2.307 1.87 4.177 4.177 4.177v0h732.699c2.307 0 4.177-1.87 4.177-4.177v0zM107.789 852.211h660.211v-256h-660.211v256zM107.789 555.789h269.474v-256h-269.474v256zM417.684 70.737h350.316v-26.947h-350.316v26.947zM417.684 133.659h350.316v-26.947h-350.316v26.947zM417.684 196.446h350.316v-26.947h-350.316v26.947zM417.684 259.368h350.316v-26.947h-350.316v26.947zM417.684 555.789h350.316v-26.947h-350.316v26.947zM417.684 498.526h350.316v-26.947h-350.316v26.947zM417.684 441.263h350.316v-26.947h-350.316v26.947zM417.684 384h350.316v-26.947h-350.316v26.947zM417.684 326.737h350.316v-26.947h-350.316v26.947zM107.789 259.368h269.474v-215.579h-269.474v215.579z" />
|
||||
<glyph unicode="" glyph-name="new-template" horiz-adv-x="920" d="M103.696 856.304h635.139v-246.278h-635.139v246.278zM103.696 571.139h259.241v-246.278h-259.241v246.278zM401.823 165.039h337.013v-25.924h-337.013v25.924zM401.823 225.442h337.013v-25.924h-337.013v25.924zM401.823 285.975h337.013v-25.924h-337.013v25.924zM401.823 571.139h337.013v-25.924h-337.013v25.924zM401.823 516.051h337.013v-25.924h-337.013v25.924zM401.823 460.962h337.013v-25.924h-337.013v25.924zM401.823 405.873h337.013v-25.924h-337.013v25.924zM401.823 350.785h337.013v-25.924h-337.013v25.924zM103.696 285.975h259.241v-207.392h-259.241v207.392zM842.532 140.152v751.020c0 38.013-30.816 68.828-68.828 68.828v0h-704.875c-38.013 0-68.828-30.816-68.828-68.828v0-847.457c0-38.013 30.816-68.828 68.828-68.828v0h666.896c19.163-23.765 48.277-38.841 80.912-38.841 57.27 0 103.696 46.426 103.696 103.696 0 48.068-32.706 88.497-77.078 100.248l-0.724 0.163zM68.828 39.696c-2.219 0-4.018 1.799-4.018 4.018v0 847.457c0 2.219 1.799 4.018 4.018 4.018v0h704.875c2.219 0 4.018-1.799 4.018-4.018v0-755.297c-16.886-6.977-31.013-17.69-41.84-31.166l-0.157-0.202h-333.902v-25.924h318.607c-4.743-11.511-7.504-24.874-7.518-38.881v-0.006zM816.608-51.038c-50.111 0-90.734 40.623-90.734 90.734v0c0 0.068 0 0.148 0 0.228 0 14.058 3.253 27.357 9.047 39.184l-0.233-0.526c1.324 3.018 2.711 5.571 4.28 7.995l-0.132-0.218c9.3 15.303 22.547 27.384 38.344 35.021l0.542 0.236c11.301 5.562 24.6 8.814 38.658 8.814 0.080 0 0.16 0 0.241 0h-0.012c50.111 0 90.734-40.623 90.734-90.734s-40.623-90.734-90.734-90.734v0zM861.975 52.658h-32.405v32.405c0 3.579-2.902 6.481-6.481 6.481v0h-12.962c-3.579 0-6.481-2.902-6.481-6.481v0-32.405h-32.405c-3.579 0-6.481-2.902-6.481-6.481v0-12.962c0-3.579 2.902-6.481 6.481-6.481v0h32.405v-32.405c0-3.579 2.902-6.481 6.481-6.481v0h12.962c3.579 0 6.481 2.902 6.481 6.481v0 32.405h32.405c3.579 0 6.481 2.902 6.481 6.481v0 12.962c0 3.579-2.902 6.481-6.481 6.481v0z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,31 @@
|
||||
@font-face {
|
||||
font-family: 'cptools';
|
||||
src:
|
||||
url('fonts/cptools.ttf?dysqmo') format('truetype'),
|
||||
url('fonts/cptools.woff?dysqmo') format('woff'),
|
||||
url('fonts/cptools.svg?dysqmo#cptools') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.cptools {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'cptools' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cptools-template:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.cptools-new-template:before {
|
||||
content: "\e901";
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -0,0 +1,200 @@
|
||||
// dark #326599
|
||||
// light #4591c4
|
||||
define([], function () {
|
||||
var loadingStyle = (function(){/*
|
||||
#cp-loading {
|
||||
transition: opacity 0.75s, visibility 0s 0.75s;
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
z-index: 10000000;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
|
||||
color: #fafafa;
|
||||
font-size: 1.5em;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#cp-loading.cp-loading-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
#cp-loading .cp-loading-logo {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
margin-top: 50px;
|
||||
flex: 0 1 auto;
|
||||
min-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#cp-loading .cp-loading-logo img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
#cp-loading .cp-loading-container {
|
||||
width: 700px;
|
||||
max-width: 90vw;
|
||||
height: 500px;
|
||||
max-height: calc(100vh - 20px);
|
||||
margin: 50px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-height: 800px) {
|
||||
#cp-loading .cp-loading-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
#cp-loading .cp-loading-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
#cp-loading .cp-loading-cryptofist {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
//height: 300px;
|
||||
max-width: 90vw;
|
||||
max-height: 300px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@media screen and (max-height: 500px) {
|
||||
#cp-loading .cp-loading-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#cp-loading-message {
|
||||
background: #FFF;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
#cp-loading-password-prompt {
|
||||
font-size: 18px;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-error {
|
||||
color: white;
|
||||
background: #9e0000;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-info {
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-form {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-form button,
|
||||
#cp-loading-password-prompt .cp-password-form .cp-password-input {
|
||||
background-color: #4591c4;
|
||||
color: white;
|
||||
border: 1px solid #4591c4;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-form .cp-password-container {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-form input {
|
||||
flex: 1;
|
||||
padding: 0 5px;
|
||||
min-width: 0;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#cp-loading-password-prompt .cp-password-form button:hover {
|
||||
background-color: #326599;
|
||||
}
|
||||
#cp-loading .cp-loading-spinner-container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
#cp-loading .cp-loading-spinner-container > div {
|
||||
height: 100px;
|
||||
}
|
||||
#cp-loading-tip {
|
||||
position: fixed;
|
||||
z-index: 10000000;
|
||||
top: 80%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
transition: opacity 750ms;
|
||||
transition-delay: 3000ms;
|
||||
}
|
||||
@media screen and (max-height: 600px) {
|
||||
#cp-loading-tip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#cp-loading-tip span {
|
||||
background: #222;
|
||||
color: #fafafa;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
opacity: 0.7;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
padding: 15px;
|
||||
max-width: 60%;
|
||||
display: inline-block;
|
||||
}
|
||||
.cp-loading-progress {
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
}
|
||||
.cp-loading-progress p {
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cp-loading-progress-bar {
|
||||
height: 24px;
|
||||
background: white;
|
||||
}
|
||||
.cp-loading-progress-bar-value {
|
||||
height: 100%;
|
||||
background: #5cb85c;
|
||||
}
|
||||
*/}).toString().slice(14, -3);
|
||||
var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
|
||||
var elem = document.createElement('div');
|
||||
elem.setAttribute('id', 'cp-loading');
|
||||
elem.innerHTML = [
|
||||
'<style>',
|
||||
loadingStyle,
|
||||
'</style>',
|
||||
'<div class="cp-loading-logo">',
|
||||
'<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">',
|
||||
'</div>',
|
||||
'<div class="cp-loading-container">',
|
||||
'<div class="cp-loading-spinner-container">',
|
||||
'<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>',
|
||||
'</div>',
|
||||
'<p id="cp-loading-message"></p>',
|
||||
'</div>'
|
||||
].join('');
|
||||
return function () {
|
||||
var intr;
|
||||
var append = function () {
|
||||
if (!document.body) { return; }
|
||||
clearInterval(intr);
|
||||
document.body.appendChild(elem);
|
||||
};
|
||||
intr = setInterval(append, 100);
|
||||
append();
|
||||
};
|
||||
});
|
||||
@ -1,40 +0,0 @@
|
||||
@import (once) './include/font.less';
|
||||
.font_neuropolitical();
|
||||
.font_open-sans();
|
||||
|
||||
body.cp-page-index { @import "./pages/page-index.less"; }
|
||||
body.cp-page-contact { @import "./pages/page-contact.less"; }
|
||||
body.cp-page-login { @import "./pages/page-login.less"; }
|
||||
body.cp-page-register { @import "./pages/page-register.less"; }
|
||||
body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
|
||||
body.cp-page-about { @import "./pages/page-about.less"; }
|
||||
body.cp-page-privacy { @import "./pages/page-privacy.less"; }
|
||||
body.cp-page-terms { @import "./pages/page-terms.less"; }
|
||||
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
html.cp-app-noscroll {
|
||||
@import "./include/app-noscroll.less";
|
||||
.app-noscroll_main();
|
||||
}
|
||||
// Set the HTML style for printing slides
|
||||
html.cp-app-print {
|
||||
@import "./include/app-print.less";
|
||||
.app-print_main();
|
||||
}
|
||||
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
|
||||
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
|
||||
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
|
||||
body.cp-app-code { @import "../../../code/app-code.less"; }
|
||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
|
||||
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
|
||||
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
|
||||
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
||||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
|
||||
@ -1,46 +1,52 @@
|
||||
.app-print_main () {
|
||||
// Current scope is <html>
|
||||
@media print {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
@page {
|
||||
margin: 0;
|
||||
size: landscape;
|
||||
}
|
||||
// Slide app
|
||||
body.cp-app-slide {
|
||||
.app-print_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
}
|
||||
& {
|
||||
.cp-app-print {
|
||||
// Current scope is <html>
|
||||
@media print {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
.CodeMirror, #cme_toolbox {
|
||||
display: none;
|
||||
@page {
|
||||
margin: 0;
|
||||
size: landscape;
|
||||
}
|
||||
* {
|
||||
visibility: hidden;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
.cp-app-slide-viewer #cp-app-slide-print {
|
||||
// Slide app
|
||||
body.cp-app-slide {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
.CodeMirror, #cme_toolbox {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
visibility: hidden;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
.cp-app-slide-viewer #cp-app-slide-print {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
* {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.cp-app-slide-viewer #cp-app-slide-modal {
|
||||
display: none !important;
|
||||
}
|
||||
.cp-app-slide-viewer {
|
||||
flex: 1 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.cp-toolbar-userlist-drawer {
|
||||
display: none !important;
|
||||
}
|
||||
#cp-app-slide-editor {
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.cp-app-slide-viewer #cp-app-slide-modal {
|
||||
display: none !important;
|
||||
}
|
||||
.cp-app-slide-viewer {
|
||||
flex: 1 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.cp-toolbar-userlist-drawer {
|
||||
display: none !important;
|
||||
}
|
||||
#cp-app-slide-editor {
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,40 +1,65 @@
|
||||
@import (once) "./tools.less";
|
||||
|
||||
.avatar_main (@width) {
|
||||
@import (reference) "./tools.less";
|
||||
.avatar_vars(
|
||||
@width: 30px
|
||||
) {
|
||||
@avatar-width: @width;
|
||||
@avatar-font-size: @width / 1.2;
|
||||
}
|
||||
.avatar_main(@width: 30px) {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
.avatar_vars(@width);
|
||||
--avatar-width: @avatar-width;
|
||||
--avatar-font-size: @avatar-font-size;
|
||||
}
|
||||
& {
|
||||
.avatar_vars();
|
||||
&.cp-avatar {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.cp-avatar-default, media-tag {
|
||||
display: inline-flex;
|
||||
width: @width;
|
||||
height: @width;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.cp-avatar-default {
|
||||
.tools_unselectable();
|
||||
background: white;
|
||||
color: black;
|
||||
font-size: @width/1.2;
|
||||
}
|
||||
media-tag {
|
||||
min-height: @width;
|
||||
min-width: @width;
|
||||
max-height: @width;
|
||||
max-width: @width;
|
||||
img {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
max-height: none; // To override 'media-tag img' in slide.less
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.cp-avatar-default, media-tag {
|
||||
display: inline-flex;
|
||||
|
||||
width: @avatar-width;
|
||||
width: var(--avatar-width);
|
||||
|
||||
height: @avatar-width;
|
||||
height: var(--avatar-width);
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.cp-avatar-default {
|
||||
.tools_unselectable();
|
||||
background: white;
|
||||
color: black;
|
||||
font-size: @avatar-font-size;
|
||||
font-size: var(--avatar-font-size);
|
||||
}
|
||||
media-tag {
|
||||
min-height: @avatar-width;
|
||||
min-height: var(--avatar-width);
|
||||
|
||||
min-width: @avatar-width;
|
||||
min-width: var(--avatar-width);
|
||||
|
||||
max-height: @avatar-width;
|
||||
max-height: var(--avatar-width);
|
||||
|
||||
max-width: @avatar-width;
|
||||
max-width: var(--avatar-width);
|
||||
img {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
max-height: none; // To override 'media-tag img' in slide.less
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
@import (reference) "./colortheme-all.less";
|
||||
|
||||
.contextmenu_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
};
|
||||
& {
|
||||
.cp-contextmenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50000;
|
||||
li {
|
||||
padding: 0;
|
||||
font-size: @colortheme_app-font-size;
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,127 @@
|
||||
@import (reference) "./colortheme-all.less";
|
||||
|
||||
.corner_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
};
|
||||
& {
|
||||
@corner-button-ok: #2c9b00;
|
||||
@corner-button-cancel: #990000;
|
||||
@corner-link: #ffff7a;
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
@keyframes minimize {
|
||||
0% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.cp-corner-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-top-left-radius: 200px;
|
||||
padding: 15px;
|
||||
text-align: right;
|
||||
background-color: @colortheme_logo-1;
|
||||
color: @colortheme_base;
|
||||
z-index: 999;
|
||||
transform-origin: bottom right;
|
||||
animation: appear 0.8s ease-in-out;
|
||||
box-shadow: 0 0 10px 0 @colortheme_logo-1;
|
||||
//transform: scale(0.1);
|
||||
//transform: scale(1);
|
||||
|
||||
.cp-corner-filler {
|
||||
float: left;
|
||||
clear: left;
|
||||
height: 21px;
|
||||
}
|
||||
.cp-corner-minimize, .cp-corner-maximize {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
width: 20px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
line-height: 15px;
|
||||
display: none;
|
||||
&:hover {
|
||||
color: darken(@colortheme_base, 15%);
|
||||
}
|
||||
}
|
||||
.cp-corner-minimize {
|
||||
display: inline;
|
||||
}
|
||||
&.cp-minimized {
|
||||
transition: transform 0.8s ease-in-out;
|
||||
transform: scale(0.1);
|
||||
animation: none;
|
||||
.cp-corner-text, .cp-corner-actions, .cp-corner-footer {
|
||||
display: none;
|
||||
}
|
||||
.cp-corner-maximize {
|
||||
display: inline;
|
||||
font-size: 130px;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
}
|
||||
}
|
||||
&.cp-corner-big {
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.cp-corner-actions {
|
||||
min-height: 30px;
|
||||
margin: 15px auto;
|
||||
display: inline-block;
|
||||
}
|
||||
.cp-corner-footer {
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
a {
|
||||
color: @corner-link;
|
||||
&:hover {
|
||||
color: darken(@corner-link, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: white;
|
||||
border: 0px;
|
||||
padding: 5px;
|
||||
color: @colortheme_base;
|
||||
&.cp-corner-primary {
|
||||
background-color: @corner-button-ok;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
background-color: lighten(@corner-button-ok, 10%);
|
||||
}
|
||||
}
|
||||
&.cp-corner-cancel {
|
||||
background-color: @corner-button-cancel;
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
background-color: lighten(@corner-button-cancel, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,18 @@
|
||||
.font_neuropolitical () {
|
||||
@font-face {
|
||||
font-family: Neuropolitical;
|
||||
src: url("/customize/fonts/neuropolitical.ttf");
|
||||
}
|
||||
.font_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
}
|
||||
.font_open-sans () {
|
||||
@import (once) '/customize/fonts/open-sans.less';
|
||||
|
||||
// Fonts need to go on the global scope
|
||||
@font-face {
|
||||
font-family: Neuropolitical;
|
||||
src: url("/customize/fonts/neuropolitical.ttf");
|
||||
}
|
||||
|
||||
// Fonts need to go on the global scope
|
||||
@font-tools {
|
||||
font-family: CryptPadTools;
|
||||
src: url("/customize/fonts/cryptpadtools.ttf");
|
||||
}
|
||||
|
||||
@import (once) '/customize/fonts/open-sans.less';
|
||||
|
||||
|
||||
@ -1,18 +1,78 @@
|
||||
@import (once) "./toolbar.less";
|
||||
@import (once) './fileupload.less';
|
||||
@import (once) './alertify.less';
|
||||
@import (once) './tokenfield.less';
|
||||
@import (once) './creation.less';
|
||||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./toolbar.less";
|
||||
@import (reference) './fileupload.less';
|
||||
@import (reference) './alertify.less';
|
||||
@import (reference) './corner.less';
|
||||
@import (reference) './contextmenu.less';
|
||||
@import (reference) './tokenfield.less';
|
||||
@import (reference) './creation.less';
|
||||
@import (reference) './tippy.less';
|
||||
@import (reference) "./checkmark.less";
|
||||
@import (reference) "./password-input.less";
|
||||
@import (reference) './font.less';
|
||||
@import (reference) "./app-print.less";
|
||||
@import (reference) "./app-noscroll.less";
|
||||
|
||||
.framework_main(@bg-color, @warn-color, @color) {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
.app-noscroll_main();
|
||||
|
||||
// Set the HTML style for printing slides
|
||||
.app-print_main();
|
||||
|
||||
.font_main();
|
||||
|
||||
.toolbar_main(
|
||||
@bg-color: @bg-color,
|
||||
@warn-color: @warn-color,
|
||||
@color: @color
|
||||
);
|
||||
.fileupload_main();
|
||||
.alertify_main();
|
||||
.corner_main();
|
||||
.contextmenu_main();
|
||||
.fileupload_main();
|
||||
.tokenfield_main();
|
||||
.creation_main();
|
||||
.tippy_main();
|
||||
.checkmark_main(20px);
|
||||
.password_main();
|
||||
.creation_main(
|
||||
@bg-color: @bg-color,
|
||||
@color: @color
|
||||
);
|
||||
font: @colortheme_app-font;
|
||||
};
|
||||
|
||||
.framework_min_main(
|
||||
@color: @colortheme_default-color, // Color of the text for the toolbar
|
||||
@bg-color: @colortheme_default-bg, // color of the toolbar background
|
||||
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
|
||||
) {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
.app-noscroll_main();
|
||||
|
||||
// Set the HTML style for printing slides
|
||||
.app-print_main();
|
||||
|
||||
.font_main();
|
||||
|
||||
.toolbar_main(
|
||||
@bg-color: @bg-color,
|
||||
@warn-color: @warn-color,
|
||||
@color: @color
|
||||
);
|
||||
.fileupload_main();
|
||||
.alertify_main();
|
||||
.corner_main();
|
||||
.contextmenu_main();
|
||||
.tippy_main();
|
||||
.checkmark_main(20px);
|
||||
.password_main();
|
||||
font: @colortheme_app-font;
|
||||
}
|
||||
|
||||
& {
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
@import (once) "./colortheme-all.less";
|
||||
|
||||
.markdownToolbar_main (@color, @bg-color) {
|
||||
.cp-markdown-toolbar {
|
||||
height: @toolbar_line-height;
|
||||
background-color: lighten(@bg-color, 20%);
|
||||
display: none;
|
||||
button {
|
||||
height: @toolbar_line-height !important;
|
||||
outline: 0;
|
||||
color: @color;
|
||||
.toolbar_button;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
&:hover {
|
||||
background-color: lighten(@bg-color, 8%);
|
||||
}
|
||||
&.cp-markdown-help { float: right; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
.password_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
}
|
||||
& {
|
||||
.cp-password-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
label, .fa {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
@import (reference) './colortheme-all.less';
|
||||
|
||||
.tippy_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
}
|
||||
& {
|
||||
.tippy-tooltip.cryptpad-theme {
|
||||
/* Your styling here. Example: */
|
||||
background-color: white;
|
||||
box-shadow: 2px 2px 10px #000;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
overflow-wrap: break-word;
|
||||
[x-circle] {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
/*
|
||||
WARNING: THIS FILE DOES NOTHING
|
||||
It exists only as a proposal of what CSS you should use in loading.js
|
||||
The CSS inside of loading.js is precompiled in order to save 200ish milliseconds to the loading screen.
|
||||
*/
|
||||
@import (once) "./include/colortheme-all.less";
|
||||
@import (once) "./include/browser.less";
|
||||
|
||||
#cp-loading {
|
||||
transition: opacity 0.75s, visibility 0s 0.75s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
z-index: 10000000; // #loading
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: @colortheme_loading-bg;
|
||||
color: @colortheme_loading-color;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
.cp-loading-container {
|
||||
margin-top: 50vh;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.cp-loading-cryptofist {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 300px;
|
||||
margin-bottom: 2em;
|
||||
@media screen and (max-height: @browser_media-short-screen) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.cp-loading-spinner-container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
> div {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
&.cp-loading-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
#cp-loading-tip {
|
||||
position: fixed;
|
||||
z-index: 10000000; // loading tip
|
||||
top: 80%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
transition: opacity 750ms;
|
||||
transition-delay: 3000ms;
|
||||
@media screen and (max-height: @browser_media-medium-screen) {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
background: @colortheme_loading-bg;
|
||||
color: @colortheme_loading-color;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
opacity: 0.7;
|
||||
font-family: @colortheme_font;
|
||||
padding: 15px;
|
||||
max-width: 60%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
@import (once) './include/font.less';
|
||||
.font_neuropolitical();
|
||||
.font_open-sans();
|
||||
|
||||
body.cp-page-index { @import "./pages/page-index.less"; }
|
||||
body.cp-page-contact { @import "./pages/page-contact.less"; }
|
||||
body.cp-page-login { @import "./pages/page-login.less"; }
|
||||
body.cp-page-register { @import "./pages/page-register.less"; }
|
||||
body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
|
||||
body.cp-page-about { @import "./pages/page-about.less"; }
|
||||
body.cp-page-privacy { @import "./pages/page-privacy.less"; }
|
||||
body.cp-page-features { @import "./pages/page-features.less"; }
|
||||
body.cp-page-faq { @import "./pages/page-faq.less"; }
|
||||
body.cp-page-terms { @import "./pages/page-terms.less"; }
|
||||
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
html.cp-app-noscroll {
|
||||
@import "./include/app-noscroll.less";
|
||||
.app-noscroll_main();
|
||||
}
|
||||
// Set the HTML style for printing slides
|
||||
html.cp-app-print {
|
||||
@import "./include/app-print.less";
|
||||
.app-print_main();
|
||||
}
|
||||
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
|
||||
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
|
||||
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
|
||||
body.cp-app-code { @import "../../../code/app-code.less"; }
|
||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
|
||||
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
|
||||
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
|
||||
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
||||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
body.cp-app-worker { @import "../../../worker/app-worker.less"; }
|
||||
body.cp-app-oodoc { @import "../../../oodoc/app-oodoc.less"; }
|
||||
body.cp-app-ooslide { @import "../../../ooslide/app-ooslide.less"; }
|
||||
body.cp-app-oocell { @import "../../../oocell/app-oocell.less"; }
|
||||
|
||||
@ -1,115 +1,118 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
.cp-about-intro {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/bkabout.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.container {
|
||||
color: #fff;
|
||||
font-family: "Open Sans";
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
p {
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-container {
|
||||
.row {
|
||||
&.cp-page-about {
|
||||
.infopages_main();
|
||||
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
.cp-bio-avatar {
|
||||
padding-right: 0;
|
||||
@media (max-width: 991px) {
|
||||
padding-right: 15px;
|
||||
.cp-about-intro {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/bkabout.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.container {
|
||||
color: #fff;
|
||||
font-family: "Open Sans";
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
p {
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-container {
|
||||
.row {
|
||||
background: #fff;
|
||||
}
|
||||
img {
|
||||
.cp-bio-avatar {
|
||||
padding-right: 0;
|
||||
@media (max-width: 991px) {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
padding-right: 15px;
|
||||
}
|
||||
img {
|
||||
@media (max-width: 991px) {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-bio-avatar-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
@media (max-width: 991px) {
|
||||
padding-left: 15px;
|
||||
.cp-bio-avatar-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
@media (max-width: 991px) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-develop-about {
|
||||
.cp-icon-cent {
|
||||
width: 6rem;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
height: 6rem;
|
||||
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
|
||||
margin: 0 auto;
|
||||
background-image: url(/customize/code.svg);
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
background-position: 50%;
|
||||
background-size: 4rem;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: #1E1F1F;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
.cp-profile-det {
|
||||
padding-left: 30px;
|
||||
h3 {
|
||||
color: #1E1F1F;
|
||||
font-weight: 700;
|
||||
.cp-develop-about {
|
||||
.cp-icon-cent {
|
||||
width: 6rem;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
height: 6rem;
|
||||
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
|
||||
margin: 0 auto;
|
||||
background-image: url(/customize/code.svg);
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
background-position: 50%;
|
||||
background-size: 4rem;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: #1E1F1F;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #3F4141;
|
||||
.cp-profile-det {
|
||||
padding-left: 30px;
|
||||
h3 {
|
||||
color: #1E1F1F;
|
||||
font-weight: 700;
|
||||
}
|
||||
p {
|
||||
color: #3F4141;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
hr {
|
||||
margin-left: 0;
|
||||
width: 15rem;
|
||||
border-top: 2px solid @cryptpad_color_blue;
|
||||
}
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
hr {
|
||||
margin-left: 0;
|
||||
width: 15rem;
|
||||
border-top: 2px solid @cryptpad_color_blue;
|
||||
}
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.cp-soc-media {
|
||||
font-size: 1.5em;
|
||||
color: @cryptpad_color_blue;
|
||||
padding-right: 1em;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:visited {
|
||||
.cp-soc-media {
|
||||
font-size: 1.5em;
|
||||
color: @cryptpad_color_blue;
|
||||
padding-right: 1em;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:visited {
|
||||
color: @cryptpad_color_blue;
|
||||
}
|
||||
}
|
||||
.cp-contrib {
|
||||
margin-top: 3em;
|
||||
.cp-icon-cent {
|
||||
background-image: url(/customize/source-branch.svg);
|
||||
background-position: 60%;
|
||||
}
|
||||
}
|
||||
.cp-contrib {
|
||||
margin-top: 3em;
|
||||
.cp-icon-cent {
|
||||
background-image: url(/customize/source-branch.svg);
|
||||
background-position: 60%;
|
||||
}
|
||||
.cp-margin-bot {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
.cp-margin-bot {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
@ -1,90 +1,92 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
&.cp-page-contact {
|
||||
.infopages_main();
|
||||
|
||||
.fa {
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
#cp-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
.cp-container {
|
||||
background: #fff;
|
||||
.cp-iconCont {
|
||||
h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
div {
|
||||
.card {
|
||||
padding: 4em 1em 0.5em 1em;
|
||||
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
|
||||
border-color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@media (max-width: 1200px) and (min-width: 769px) {
|
||||
min-height: 139px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 576px) {
|
||||
min-height: 164px;
|
||||
}
|
||||
@media (max-width: 496px) {
|
||||
min-height: 140px;
|
||||
}
|
||||
@media (max-width: 335px) {
|
||||
min-height: 162px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.card {
|
||||
background-image: url(/customize/images/twitter.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.card {
|
||||
background-image: url(/customize/images/issue.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
.card {
|
||||
background-image: url(/customize/images/sayhi.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
.card {
|
||||
background-image: url(/customize/images/email.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-contdet {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/images/bkcontact.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
.fa {
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
#cp-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
.cp-container {
|
||||
background: #fff;
|
||||
.cp-iconCont {
|
||||
h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
div {
|
||||
.card {
|
||||
padding: 4em 1em 0.5em 1em;
|
||||
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
|
||||
border-color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@media (max-width: 1200px) and (min-width: 769px) {
|
||||
min-height: 139px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 576px) {
|
||||
min-height: 164px;
|
||||
}
|
||||
@media (max-width: 496px) {
|
||||
min-height: 140px;
|
||||
}
|
||||
@media (max-width: 335px) {
|
||||
min-height: 162px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.card {
|
||||
background-image: url(/customize/images/twitter.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.card {
|
||||
background-image: url(/customize/images/issue.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
.card {
|
||||
background-image: url(/customize/images/sayhi.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
.card {
|
||||
background-image: url(/customize/images/email.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 10%;
|
||||
background-size: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-contdet {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/images/bkcontact.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,37 +1,86 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
&.cp-page-faq {
|
||||
.infopages_main();
|
||||
|
||||
.cp-faq-header {
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
a {
|
||||
padding: 0;
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.cp-faq-container {
|
||||
.cp-faq-questions-q {
|
||||
color: #3a84b6;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
.cp-faq {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/images/cover-faq.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.container {
|
||||
color: #fff;
|
||||
font-family: "Open Sans";
|
||||
}
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.cp-faq-questions-q:hover {
|
||||
color: #2e688f;
|
||||
text-decoration: underline;
|
||||
|
||||
.cp-faq-ques-det {
|
||||
.cp-faq-header {
|
||||
a {
|
||||
padding: 0;
|
||||
h4 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
.cp-brand-font {
|
||||
font-family: "Neuropolitical";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-faq-questions-a {
|
||||
display: none;
|
||||
padding: 0;
|
||||
.cp-faq-container {
|
||||
.cp-faq-questions-items {
|
||||
background: #3a84b6;
|
||||
color: #fff;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.cp-faq-questions-q {
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:after {
|
||||
content: '\f067';
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.cp-faq-questions-q.active-faq {
|
||||
&:after {
|
||||
content: '\f068';
|
||||
}
|
||||
}
|
||||
.cp-faq-questions-a {
|
||||
display: none;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: #fff;
|
||||
color: #212529;
|
||||
}
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,67 +1,89 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
&.cp-page-features {
|
||||
.infopages_main();
|
||||
|
||||
@features_th-bg: #555;
|
||||
@features_th-fg: #fff;
|
||||
@features_tr-bg-alt: #ddd;
|
||||
@features_notes: #333;
|
||||
@features_yes: #c4ffca;
|
||||
@features_no: #ffc4bc;
|
||||
@features_part: #faffd3;
|
||||
|
||||
table#cp-features-table {
|
||||
width: 100%;
|
||||
th {
|
||||
background-color: @features_th-bg;
|
||||
color: @features_th-fg;
|
||||
padding: 10px;
|
||||
border: 1px solid @features_th-bg;
|
||||
#cp-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 5px;
|
||||
border: 1px solid @features_th-bg;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: @features_tr-bg-alt;
|
||||
.cp_cont_features {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url('/customize/images/cover-features.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
td:nth-child(4) {
|
||||
color: @features_notes;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
#cp-features-register {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
.cp-features-register-button {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: @cryptpad_color_blue;
|
||||
border: 2px solid @cryptpad_color_blue;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
.yes, .no, .part {
|
||||
text-align: center;
|
||||
.cp-features-web {
|
||||
.card {
|
||||
box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
|
||||
border: none;
|
||||
}
|
||||
h3 {
|
||||
color: #fff;
|
||||
}
|
||||
.list-group {
|
||||
li {
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 14px;
|
||||
color: @cryptpad_color_blue;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
a.voted {
|
||||
opacity: 0.6;
|
||||
margin-left: 15px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.list-group-item {
|
||||
border-color: rgba(69, 145, 196, 0.125);
|
||||
}
|
||||
}
|
||||
.yes { background-color: @features_yes; }
|
||||
.no { background-color: @features_no; }
|
||||
.part { background-color: @features_part; }
|
||||
.left {
|
||||
text-align: left;
|
||||
.cp-anon-user {
|
||||
.card-body {
|
||||
background-color: @cryptpad_color_blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cp-features-register {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.cp-features-register-button {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: @cryptpad_color_blue;
|
||||
border: 2px solid @cryptpad_color_blue;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
.cp-regis-user {
|
||||
@media (max-width:575px) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
.card-body {
|
||||
&:first-of-type {
|
||||
background: #4591C4;
|
||||
background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
|
||||
background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,190 +1,193 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
&.cp-page-index {
|
||||
.infopages_main();
|
||||
|
||||
@background_lighter: rgba(0,0,0,0.1);
|
||||
@background_darker: rgba(0,0,0,0.4);
|
||||
#cp-main {
|
||||
color: #FFF;
|
||||
background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.container {
|
||||
@media only screen and (max-device-width : 576px) {
|
||||
margin-top: 6em;
|
||||
@background_lighter: rgba(0,0,0,0.1);
|
||||
@background_darker: rgba(0,0,0,0.4);
|
||||
#cp-main {
|
||||
color: #FFF;
|
||||
background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.container {
|
||||
@media only screen and (max-device-width : 576px) {
|
||||
margin-top: 6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-family: "Open Sans", Helvetica;
|
||||
}
|
||||
.cp-right {
|
||||
.cp-register-btn {
|
||||
padding: 0.5em 1em 0.7em 1em;
|
||||
border: 2px solid #fff;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
.cp-login-btn {
|
||||
color: #fff;
|
||||
padding: 0.5em 1em 0.7em 1em;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 1.5em;
|
||||
img {
|
||||
height: 20vh;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
margin-left: 0;
|
||||
h1 {
|
||||
font-family: "Neuropolitical";
|
||||
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
|
||||
//font-family: "Raleway";
|
||||
font-size: 45px;
|
||||
}
|
||||
p {
|
||||
//font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 20px;
|
||||
//font-style: italic;
|
||||
body {
|
||||
font-family: "Open Sans", Helvetica;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
@media only screen and (max-device-width: 991px) {
|
||||
margin-top: 0;
|
||||
.cp-right {
|
||||
.cp-register-btn {
|
||||
padding: 0.5em 1em 0.7em 1em;
|
||||
border: 2px solid #fff;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
.cp-login-btn {
|
||||
color: #fff;
|
||||
padding: 0.5em 1em 0.7em 1em;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
background-image: url(/customize/CryptPad-white-logo.svg);
|
||||
.cp-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 1.5em;
|
||||
img {
|
||||
height: 20vh;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
margin-left: 0;
|
||||
h1 {
|
||||
font-family: "Neuropolitical";
|
||||
//font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
|
||||
//font-family: "Raleway";
|
||||
font-size: 45px;
|
||||
}
|
||||
p {
|
||||
//font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 20px;
|
||||
//font-style: italic;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
&:visited {
|
||||
color: rgba(255,255,255,.9);
|
||||
};
|
||||
.navbar {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
@media only screen and (max-device-width: 991px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.navbar-brand {
|
||||
background-image: url(/customize/CryptPad-white-logo.svg);
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
&:visited {
|
||||
color: rgba(255,255,255,.9);
|
||||
};
|
||||
}
|
||||
.nav-link {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
transform: scale(1.05);
|
||||
};
|
||||
}
|
||||
.cp-register-btn {
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.navbar-toggler {
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
};
|
||||
@callout-padding: 15px;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.cp-register-btn {
|
||||
border: 2px solid #fff;
|
||||
.bs-callout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin: 25px 0;
|
||||
background: rgba(255,255,255,0.6);
|
||||
color: black;
|
||||
transition: all .1s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
height: 5em;
|
||||
position: relative;
|
||||
a {
|
||||
color: black;
|
||||
&:hover { text-decoration-line: none; }
|
||||
}
|
||||
div h4 {
|
||||
@media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@callout-padding: 15px;
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.bs-callout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin: 25px 0;
|
||||
background: rgba(255,255,255,0.6);
|
||||
color: black;
|
||||
transition: all .1s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
height: 5em;
|
||||
position: relative;
|
||||
a {
|
||||
color: black;
|
||||
&:hover { text-decoration-line: none; }
|
||||
.cp-callout-more-moremsg,.cp-callout-more-lessmsg {
|
||||
transform: none !important;
|
||||
}
|
||||
div h4 {
|
||||
@media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.bs-callout div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 5em;
|
||||
}
|
||||
.bs-callout+.bs-callout {
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
.cp-callout-more-moremsg,.cp-callout-more-lessmsg {
|
||||
transform: none !important;
|
||||
}
|
||||
.bs-callout div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 5em;
|
||||
}
|
||||
.bs-callout+.bs-callout {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.bs-callout:hover {
|
||||
//color: white;
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
.bs-callout:hover.cp-callout-more {
|
||||
transform: none !important;
|
||||
}
|
||||
.bs-callout .fa {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
padding-left: 0.57em;
|
||||
width: 2em;
|
||||
transition: width 0.1s;
|
||||
color: #fff;
|
||||
}
|
||||
.cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
|
||||
.cp-callout-code .fa { background-color: @colortheme_code-bg; }
|
||||
.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
|
||||
.cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
|
||||
.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
|
||||
.cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
|
||||
.cp-hidden { display: none !important; }
|
||||
.cp-callout-more {
|
||||
display: inline-block;
|
||||
align-content: center;
|
||||
height: 2em;
|
||||
border-radius: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
background: none;
|
||||
width: 100%;
|
||||
div {
|
||||
.infopages_link();
|
||||
.bs-callout:hover {
|
||||
//color: white;
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
.bs-callout:hover.cp-callout-more {
|
||||
transform: none !important;
|
||||
}
|
||||
.bs-callout .fa {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
padding-left: 0.57em;
|
||||
width: 2em;
|
||||
transition: width 0.1s;
|
||||
color: #fff;
|
||||
.fa {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
width: 1em;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
.cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
|
||||
.cp-callout-code .fa { background-color: @colortheme_code-bg; }
|
||||
.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
|
||||
.cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
|
||||
.cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; }
|
||||
.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
|
||||
.cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
|
||||
.cp-hidden { display: none !important; }
|
||||
.cp-callout-more {
|
||||
display: inline-block;
|
||||
align-content: center;
|
||||
height: 2em;
|
||||
border-radius: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
background: none;
|
||||
width: 100%;
|
||||
div {
|
||||
.infopages_link();
|
||||
color: #fff;
|
||||
.fa {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
width: 1em;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
|
||||
left: 5px;
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,68 +1,71 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (once) "../include/alertify.less";
|
||||
@import (once) "../loading.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/alertify.less";
|
||||
@import (reference) "../include/checkmark.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
.alertify_main();
|
||||
&.cp-page-login {
|
||||
.infopages_main();
|
||||
.alertify_main();
|
||||
.checkmark_main(20px);
|
||||
|
||||
.form-group {
|
||||
.extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.form-group {
|
||||
.extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-container {
|
||||
#data {
|
||||
background: #4591C4;
|
||||
padding-top: 3em;
|
||||
padding-bottom: 7em;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
p {
|
||||
color: #fff;
|
||||
.cp-container {
|
||||
#data {
|
||||
background: #4591C4;
|
||||
padding-top: 3em;
|
||||
padding-bottom: 7em;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
color: @cryptpad_header_col;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
color: @cryptpad_header_col;
|
||||
#userForm {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 2em;
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
color: @cryptpad_text_col;
|
||||
margin-top: 1em;
|
||||
&:focus {
|
||||
border-color: @cryptpad_color_blue;
|
||||
}
|
||||
}
|
||||
.checkbox-container {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
}
|
||||
#userForm {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 2em;
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
color: @cryptpad_text_col;
|
||||
.align-items-center {
|
||||
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
|
||||
background: #fff;
|
||||
}
|
||||
.extra {
|
||||
margin-top: 1em;
|
||||
&:focus {
|
||||
border-color: @cryptpad_color_blue;
|
||||
.login {
|
||||
background: @cryptpad_color_blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-container {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
.align-items-center {
|
||||
box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
|
||||
background: #fff;
|
||||
}
|
||||
.extra {
|
||||
margin-top: 1em;
|
||||
.login {
|
||||
background: @cryptpad_color_blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
.cp-container {
|
||||
padding-top: 3em;
|
||||
min-height: 66vh;
|
||||
}
|
||||
}
|
||||
.cp-container {
|
||||
padding-top: 3em;
|
||||
min-height: 66vh;
|
||||
}
|
||||
|
||||
|
||||
@ -1,43 +1,45 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (once) "../include/colortheme-all.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
&.cp-page-what-is-cryptpad {
|
||||
.infopages_main();
|
||||
|
||||
.cp-what-is {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/bkwhat.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
.cp-container {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
color: @cryptpad_header_col;
|
||||
}
|
||||
p {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
#zeroknowledge {
|
||||
width: 65%;
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cp-what-is {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/bkwhat.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
.cp-container {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
color: @cryptpad_header_col;
|
||||
}
|
||||
p {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
#zeroknowledge {
|
||||
width: 65%;
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,45 @@
|
||||
# CryptPad Styling
|
||||
|
||||
How it works:
|
||||
* In this example, we use the index page, for each page we will have a corresponding class name and a corresponding less file.
|
||||
* The index page has a main div containing everything `<div id="cp-main" class="cp-page-index">`
|
||||
* There is a corresponding less file called `less2/pages/page-index.less`
|
||||
* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }`
|
||||
* cp-page-index class means:
|
||||
* cp -> cryptpad
|
||||
* page -> this is a style for accessing a page's less file
|
||||
* index -> the name of the page and of the less file (page-index.less)
|
||||
* And everything which is standardized across pages is included from `page-index.less` as variables and mixins.
|
||||
## Linking Less/CSS
|
||||
|
||||
In order to keep the amount of CSS generated under control, we use "linking", via the LessLoader.
|
||||
This makes use of CSS variables in order to work. The old solution was to put all of the content into less mixins
|
||||
which would be used inside of the scope where they should be, but this caused a state explosion because each app needed
|
||||
essentially the same mixins. However, these mixins had arguments such as colors which were different per-app.
|
||||
|
||||
The new solution is to set CSS variables for the arguments (like color) and then put the bulk of the less at the global
|
||||
scope. When you include a dependency, the following happens:
|
||||
|
||||
1. You `@include (reference) './include/dependency.less`. The (reference) argument which means it will not emit CSS,
|
||||
this is important because otherwise all of the dependencies of your app's less file would end up bundled with it, the
|
||||
state explosion problem.
|
||||
2. You invoke `.dependency_main(@arg1 @arg2)` inside of the scope you want it in, the name `dependency_main` is a
|
||||
convention, all less variables, mixins, or CSS variables which a file creates should be prefixed with the name of the
|
||||
file (in this case, "dependency").
|
||||
3. The mixin `.dependency_main` does a couple of things:
|
||||
* First, it sets a CSS variable called `--LessLoader_require`, this is a special variable which the browser does not
|
||||
use, the only objective of this variable is to inform LessLoader that another file is needed. To do this, there is a
|
||||
helper function (also specified in LessLoader.js) called `LessLoader_currentFile()`. The syntax is:
|
||||
`--LessLoader_require: LessLoader_currentFile();` and in the CSS, this outputs something like:
|
||||
`--LessLoader_require: "/customize/src/less2/include/dependency.less?ver=2.4.0-1531572157592";`
|
||||
* Secondly, it sets browser variables for it's arguments, making sure to avoid namespace collisions:
|
||||
`--dependency-arg1: @arg1;`, `--dependency-arg2: @arg2;`. Sometimes a less transformation needs to be done on a
|
||||
variable, unfortunately in this case the transformation must be done here and the transformed variable must be output.
|
||||
`--dependency-arg1-l10: lighten(@arg1, 10%);`.
|
||||
4. After less processing is completed, the LessLoader caches the result of parsing, then scans the it for instances of
|
||||
`--LessLoader_require` variable and then processes them, but it does this separately. So even if dependency.less is
|
||||
required many times, it will only be processed by the less interpreter once.
|
||||
|
||||
## Other convensions
|
||||
|
||||
Rules:
|
||||
* All of our new classes and ids should start with `cp-`.
|
||||
* You may make as many files as you need, for different purposes, but they can only contain mixins and variables.
|
||||
* The document body has a class on it depending on the app/page, app classes begin with `cp-app-` and page classes begin
|
||||
with `cp-page-`.
|
||||
* Custom classes ought to begin with `cp-` and the name of the file where the rules are written for them (see help.less as
|
||||
an example of doing the right thing).
|
||||
* Since the include files generate CSS and the app cannot control the scope which it's run at, be considerate avoid
|
||||
making an include file which changes something significant (like making a rule for `li`). help.less is an excellent example
|
||||
of doing this well, infopages.less is the worst example (fortunately it doesn't get included in any of the apps).
|
||||
* All mixins and variables must be prefixed with the name of the file where they're defined and and underscore.
|
||||
* e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less`
|
||||
* All mixin / variable files go in an `/include/` directory.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue