web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'staging' into front-page

Browse Source
This commit is contained in:
Caleb James DeLisle
2017-07-20 10:09:32 +02:00
parent f6abdc2b86 e26e041a5b
commit ffb5e555a0
194 changed files with 90323 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
customize.dist/src/less/cryptpad.less
View File

@@ -19,7 +19,6 @@ html.cp, .cp body {
background-color: @page-white; //@base;
color: @fore;
font-family: Ubuntu,Georgia,Cambria,serif;
height: 100%;
}
.fa {
@@ -28,9 +27,19 @@ html.cp, .cp body {
.cp {
// add font for tooltips
.tippy-popper {
font: normal normal normal 16px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
}
// override bootstrap colors
.btn-primary {
background-color: @cp-blue;
&:hover {
color: #fff;
background-color: #025aa5;
border-color: #01549b;
}
}
body {
@@ -223,13 +232,13 @@ body.html {
margin: 0 auto;
}
.app-row {
display: inline-block;
white-space: nowrap;
width: 700px;
display: flex;
justify-content: center;
flex-flow: row wrap;
max-width: 100%;
margin: 0 auto;
@media screen and (max-width: 1399px) {
display: block;
display: flex;
}
img {
@media screen and (max-width: @media-not-big) {
@@ -425,6 +434,8 @@ noscript {
label {
margin-bottom: 0;
margin-left: 5px;
vertical-align: middle;
}
button {
@@ -432,7 +443,7 @@ noscript {
width: 100%;
cursor: pointer;
&.half {
width: ~"calc(50% - 2px)";
width: ~"calc(50% - 10px)";
&:not(.first) {
float: right;
}
@@ -569,10 +580,12 @@ noscript {
/* Pin limit */
.limit-container {
display: inline-flex;
flex-flow: column-reverse;
width: 100%;
margin-top: 20px;
.cryptpad-limit-bar {
display: inline-block;
height: 26px;
width: 200px;
max-width: 40vw;
margin: 3px;
box-sizing: border-box;
@@ -580,8 +593,10 @@ noscript {
background: white;
position: relative;
text-align: center;
line-height: 24px;
vertical-align: middle;
width: ~"calc(100% - 6px)";
height: 25px;
line-height: 25px;
.usage {
height: 100%;
display: inline-block;
@@ -604,12 +619,16 @@ noscript {
color: black;
text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white;
z-index: 2;
font-size: 16px;
font-size: @main-font-size;
font-weight: bold;
}
}
.upgrade {
margin-left: 10px;
padding: 0;
line-height: 25px;
height: 25px;
margin: 0 3px;
border-radius: 0;
}
}
@@ -621,10 +640,10 @@ noscript {
background-color: rgba(0,0,0,0.5);
color: white;
opacity: 0.7;
font-family: Ubuntu,Georgia,Cambria,serif;
box-sizing: border-box;
z-index:10000;
display: none;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
#uploadStatus {
width: 80vw;
border: 1px solid black;

101
customize.dist/src/less/mixins.less
View File

@@ -1,3 +1,5 @@
@import "/customize/src/less/variables.less";
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
@font-face {
font-family: @family;
@@ -37,3 +39,102 @@
background: linear-gradient(@start, @end); /* Standard syntax */
}
.placeholderColor (@color) {
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: @color;;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: @color;
opacity: 1;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: @color;
opacity: 1;
}
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: @color;
}
&::-ms-input-placeholder { /* Microsoft Edge */
color: @color;
}
}
.avatar (@width) {
&.avatar {
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
display: flex;
align-items: center;
&.clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.3);
}
}
.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;
}
.default {
.unselectable();
background: white;
color: black;
font-size: @width/1.2;
}
.right-col {
order: 10;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
flex-flow: column;
.name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.friend {
padding: 0;
}
}
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
}
}
}
}
.leftsideCategory {
.unselectable();
padding: 5px 20px;
margin: 15px 0;
cursor: pointer;
height: @toolbar-line-height;
line-height: @toolbar-line-height - 10px;
.fa {
width: 25px;
}
&:hover {
background: rgba(0,0,0,0.05);
}
&.active {
background: white;
}
}

97
customize.dist/src/less/sidebar-layout.less Normal file
View File

@@ -0,0 +1,97 @@
@import '/customize/src/less/variables.less';
@import '/customize/src/less/mixins.less';
@leftside-bg: #eee;
@leftside-color: #000;
@rightside-color: #000;
@description-color: #777;
@button-width: 400px;
@button-bg: #3066e5;
@button-alt-bg: #fff;
@button-red-bg: #e54e4e;
.cp {
input[type="text"] {
padding-left: 10px;
}
#container {
font-size: 16px;
display: flex;
flex: 1;
min-height: 0;
#leftSide {
color: @leftside-color;
width: 250px;
background: @leftside-bg;
display: flex;
flex-flow: column;
.categories {
flex: 1;
.category {
.leftsideCategory();
}
}
}
#rightSide {
flex: 1;
padding: 5px 20px;
color: @rightside-color;
overflow: auto;
.element {
label:not(.noTitle), .label {
display: block;
font-weight: bold;
margin-bottom: 0;
}
.description {
display: block;
color: @description-color;
margin-bottom: 5px;
}
margin-bottom: 20px;
}
[type="text"], button {
vertical-align: middle;
height: 40px;
box-sizing: border-box;
}
.inputBlock {
display: inline-flex;
width: @button-width;
input {
flex: 1;
border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad;
border-right: 0px;
}
button {
border-radius: 0 0.25em 0.25em 0;
//border: 1px solid #adadad;
border-left: 0px;
}
}
button.btn {
background-color: @button-bg;
border-color: darken(@button-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-bg, 10%);
}
&.btn-danger {
background-color: @button-red-bg;
border-color: darken(@button-red-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-red-bg, 10%);
}
}
}
&>div {
margin: 10px 0;
}
}
}
}

212
customize.dist/src/less/toolbar.less
View File

@@ -16,13 +16,18 @@
color: inherit;
}
// Classes used in common-interface.js
.padColor { color: @toolbar-pad-bg; }
.codeColor { color: @toolbar-code-bg; }
.slideColor { color: @toolbar-slide-bg; }
.pollColor { color: @toolbar-poll-bg; }
.fileColor { color: @toolbar-file-bg; }
.friendsColor { color: @toolbar-friends-bg; }
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.settingsColor { color: @toolbar-settings-bg; }
.profileColor { color: @toolbar-settings-bg; }
.defaultColor { color: @toolbar-default-bg; }
.toolbar-container {
@@ -55,7 +60,7 @@
}
body .userlist-drawer {
font: normal normal normal 16px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
min-width: 175px;
width: 175px;
display: block;
@@ -94,7 +99,7 @@ body .userlist-drawer {
}
& > p {
font: normal normal normal 16px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
margin: 0;
padding: 0;
display: block;
@@ -106,59 +111,19 @@ body .userlist-drawer {
margin: 10px 0;
margin-bottom: 20px;
&>span {
overflow: hidden;
text-overflow: ellipsis;
padding: 5px;
background: rgba(0,0,0,0.1);
margin: 2px 0;
font-size: 16px;
display: inline-flex;
align-items: center;
&.clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.3);
}
}
background: rgba(0,0,0,0.1);
.avatar(30px);
.default, media-tag {
display: inline-flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
margin-right: 5px;
border-radius: 10px / 6px;
overflow: hidden;
border: 1px solid black;
box-sizing: content-box;
}
.default {
.unselectable();
background: white;
color: black;
font-size: 40px;
}
.name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
media-tag {
min-height: 50px;
min-width: 50px;
max-height: 50px;
max-width: 50px;
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
flex-shrink: 0;
}
}
}
}
.friend {
display: inline-block;
width: 20px;
}
}
body {
@@ -170,6 +135,11 @@ body {
background-color: darken(@bgcolor, 10%);
color: @color;
}
.friend {
&:hover {
color: darken(@color, 15%);
}
}
}
.cryptpad-toolbar {
background-color: @bgcolor;
@@ -186,7 +156,7 @@ body {
}
}
.cryptpad-spinner, .cryptpad-state {
font-size: 16px;
font-size: @main-font-size;
color: @color;
}
.cryptpad-limit {
@@ -299,6 +269,21 @@ body {
@color: @toolbar-file-color;
.addToolbarColors(@color, @bgcolor);
}
&.app-contacts {
@bgcolor: @toolbar-friends-bg;
@color: @toolbar-friends-color;
.addToolbarColors(@color, @bgcolor);
}
&.app-settings {
@bgcolor: @toolbar-settings-bg;
@color: @toolbar-settings-color;
.addToolbarColors(@color, @bgcolor);
}
&.app-profile {
@bgcolor: @toolbar-profile-bg;
@color: @toolbar-profile-color;
.addToolbarColors(@color, @bgcolor);
}
}
@@ -333,8 +318,8 @@ body .cryptpad-toolbar {
z-index: 9001;
.dropdown-bar {
height: 100%;
display: inline-block;
//height: 100%;
//display: inline-block;
button {
height: 100%;
border-radius: 0;
@@ -503,7 +488,7 @@ body .cryptpad-toolbar {
}
button, select, .rightside-element {
height: 32px;
height: @toolbar-line-height;
box-sizing: border-box;
padding: 3px 10px;
margin: 0;
@@ -613,7 +598,7 @@ body .cryptpad-toolbar {
flex: auto;
width: 100%;
order: 10;
height: 32px;
height: @toolbar-line-height;
line-height: initial;
margin: 0;
.hoverable {
@@ -624,24 +609,24 @@ body .cryptpad-toolbar {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
height: 32px;
font-size: @main-font-size;
height: @toolbar-line-height;
box-sizing: border-box;
line-height: 20px;
}
.pencilIcon, .saveIcon {
box-sizing: border-box;
height: 32px;
line-height: 16px;
height: @toolbar-line-height;
line-height: @main-font-size;
display: inline-block;
.fa {
font-size: 16px;
font-size: @main-font-size;
}
}
input {
height: 32px;
font-size: 16px;
height: @toolbar-line-height;
font-size: @main-font-size;
flex: 1;
max-width: none;
}
@@ -651,6 +636,32 @@ body .cryptpad-toolbar {
}
}
.app-slide {
@media screen and (max-width: @media-medium-screen) {
.cryptpad-toolbar-leftside {
flex-flow: row wrap;
width: 175px;
height: auto;
.cryptpad-spinner { order: 0; }
}
.cryptpad-toolbar-rightside {
height: 2*@toolbar-line-height;
}
}
@media screen and (max-width: 320px) {
.cryptpad-toolbar-leftside {
flex-flow: row wrap;
width: 175px;
height: auto;
padding-top: @toolbar-line-height;
.cryptpad-spinner { order: 0; }
}
.cryptpad-toolbar-rightside {
height: auto;
}
}
}
.cryptpad-toolbar-top {
display: flex;
flex-flow: row;
@@ -678,6 +689,9 @@ body .cryptpad-toolbar {
line-height: 25px;
white-space: nowrap;
}
.pageTitle {
padding: 0 5px;
}
.pencilIcon, .saveIcon {
display: flex;
align-items: center;
@@ -755,7 +769,6 @@ body .cryptpad-toolbar {
&:hover {
background-color: rgba(0,0,0,0.3);
}
order: 2;
text-align: center;
font-size: 32px;
margin-left: 10px;
@@ -813,17 +826,21 @@ body .cryptpad-toolbar {
}
.cryptpad-user {
height: 100%;
display: inline-block;
display: inline-flex;
order: 5;
line-height: @toolbar-top-height;
color: white;
.cryptpad-upgrade { order: 1; }
.cryptpad-new { order: 2; }
.cryptpad-user-dropdown { order: 3; }
.cryptpad-backup { order: 4; }
&> * {
display: inline-block;
height: 100%;
vertical-align: top;
}
.cryptpad-upgrade {
height: 32px;
height: @toolbar-line-height;
vertical-align: middle;
cursor: pointer;
}
@@ -856,6 +873,21 @@ body .cryptpad-toolbar {
cursor: default;
font-size: 32px;
}
&.avatar {
.avatar(48px);
media-tag {
margin: 8px;
}
border: 0;
}
}
}
p.accountData {
&> span {
font-weight: bold;
span {
font-weight: normal;
}
}
}
.cryptpad-backup {
@@ -869,12 +901,14 @@ body .cryptpad-toolbar {
}
}
.cryptpad-toolbar-leftside {
height: 32px;
//height: @toolbar-line-height;
&:empty {
height: 0;
}
float: left;
margin-bottom: -1px;
display: inline-flex;
align-items: center;
//margin-bottom: -1px;
.cryptpad-dropdown-users {
pre {
/* needed for ckeditor */
@@ -890,21 +924,26 @@ body .cryptpad-toolbar {
.dropdown-bar-content {
margin-top: -1px;
}
.limit-container a {
height: 26px;
margin: 3px 0;
line-height: 26px;
padding: 0 5px;
box-sizing: border-box;
border: 1px solid transparent;
font-size: 14px;
&:hover {
text-decoration: none;
}
& > span {
height: @toolbar-line-height;
}
#userButtons { order: 1; }
.shareButton { order: 2; }
.cryptpad-spinner { order: 3; }
#userButtons button {
width: 125px;
text-align: center;
}
.shareButton button {
width: 50px;
text-align: center;
}
}
.cryptpad-toolbar-rightside {
min-height: 32px;
min-height: @toolbar-line-height;
overflow: hidden;
&:empty {
min-height: 0;
@@ -924,7 +963,7 @@ body .cryptpad-toolbar {
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
position: absolute;
right:0px;
margin-top: 32px;
margin-top: @toolbar-line-height;
min-width: 50px;
background: @dropdown-bg;
display: flex;
@@ -937,7 +976,7 @@ body .cryptpad-toolbar {
&> span {
box-sizing: border-box;
min-width: 150px;
height: 32px;
height: @toolbar-line-height;
border-radius: 0;
border: 0;
}
@@ -1007,11 +1046,12 @@ body .cryptpad-toolbar {
}
}
.cryptpad-spinner {
line-height: @toolbar-top-height;
line-height: @toolbar-line-height;
padding: 0 20px;
&> span.fa {
height: 20px;
width: 20px;
margin: 8px;
//margin: 8px;
line-height: 20px;
font-size: 20px;
text-align: center;
@@ -1022,16 +1062,6 @@ body .cryptpad-toolbar {
font-weight: bold;
text-transform: uppercase;
}
.cryptpad-user {
p.accountData {
&> span {
font-weight: bold;
span {
font-weight: normal;
}
}
}
}
.cryptpad-dropdown-share {
a {
.fa {

12
customize.dist/src/less/variables.less
View File

@@ -7,6 +7,8 @@
@old-base: #302B28;
@old-fore: #fafafa;
@main-font-size: 16px;
@cp-green: #46E981;
@cp-accent: lighten(@cp-green, 20%);
@@ -73,7 +75,7 @@
// Dropdown
@dropdown-font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@dropdown-font: @main-font-size -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@dropdown-bg: #f9f9f9;
@dropdown-color: black;
@dropdown-bg-hover: #f1f1f1;
@@ -97,8 +99,14 @@
@toolbar-drive-color: #fff;
@toolbar-file-bg: #cd2532;
@toolbar-file-color: #fff;
@toolbar-friends-bg: #607B8D;
@toolbar-friends-color: #fff;
@toolbar-default-bg: #ddd;
@toolbar-default-color: #000;
@toolbar-settings-bg: #0087ff;
@toolbar-settings-color: #fff;
@toolbar-profile-bg: #0087ff;
@toolbar-profile-color: #fff;
@topbar-back: #fff;
@@ -127,3 +135,5 @@
-ms-user-select: none;
user-select: none;
}
@toolbar-line-height: 32px;

2
customize.dist/src/template.html
View File

@@ -2,7 +2,7 @@
<html class="cp">
<!-- If this file is not called customize.dist/src/template.html, it is generated -->
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>