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

Mobile support for the new toolbar

Browse Source
This commit is contained in:
yflory
2017-06-23 17:56:14 +02:00
parent b4b851959f
commit 0d4d104e08
8 changed files with 250 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
customize.dist/main.css
View File

@@ -671,17 +671,20 @@ html.cp,
margin-bottom: -0.65001rem; margin-bottom: -0.65001rem;
padding-top: .65001rem; padding-top: .65001rem;
} }
.cp a { .cp a:not(.btn) {
cursor: pointer; cursor: pointer;
color: #41b7d8; color: #41b7d8;
text-decoration: none; text-decoration: none;
} }
.cp a:hover { .cp a:not(.btn):hover {
color: #279ebf; color: #279ebf;
} }
.cp a:visited { .cp a:not(.btn):visited {
color: #41b7d8; color: #41b7d8;
} }
.cp a.btn {
font-family: sans-serif;
}
.cp img { .cp img {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
@@ -1119,7 +1122,8 @@ html.cp,
display: inline-block; display: inline-block;
height: 26px; height: 26px;
width: 200px; width: 200px;
margin: 2px; max-width: 40vw;
margin: 3px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #999; border: 1px solid #999;
background: white; background: white;

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

@@ -105,7 +105,7 @@ h6 {
padding-top: .65001rem; padding-top: .65001rem;
} }
a { a:not(.btn) {
cursor: pointer; cursor: pointer;
color: @cp-link; color: @cp-link;
@@ -118,6 +118,9 @@ a {
color: @cp-link-visited; color: @cp-link-visited;
} }
} }
a.btn {
font-family: sans-serif;
}
img { img {
height: auto; height: auto;
@@ -561,7 +564,8 @@ noscript {
display: inline-block; display: inline-block;
height: 26px; height: 26px;
width: 200px; width: 200px;
margin: 2px; max-width: 40vw;
margin: 3px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #999; border: 1px solid #999;
background: white; background: white;

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

@@ -91,6 +91,9 @@ body {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
.cryptpad-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
}
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content { .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
background-color: lighten(@bgcolor, 8%); background-color: lighten(@bgcolor, 8%);
button:hover { button:hover {
@@ -100,12 +103,12 @@ body {
.hoverable:hover { .hoverable:hover {
.editable { .editable {
cursor: text; cursor: text;
border: 1px solid lighten(@bgcolor, 15%); border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
color: @color; color: @color;
} }
.pencilIcon { .pencilIcon {
border: 1px solid lighten(@bgcolor, 15%); border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
color: @color; color: @color;
&:hover { &:hover {
@@ -114,7 +117,7 @@ body {
} }
} }
.saveIcon { .saveIcon {
border: 1px solid lighten(@bgcolor, 15%); border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
color: @color; color: @color;
&:hover { &:hover {
@@ -122,7 +125,7 @@ body {
} }
} }
input { input {
border: 1px solid lighten(@bgcolor, 15%); border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
color: @color; color: @color;
} }
@@ -217,11 +220,6 @@ body {
width: 100%; width: 100%;
z-index: 9001; z-index: 9001;
a {
float: right;
}
.dropdown-bar { .dropdown-bar {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
@@ -324,6 +322,7 @@ body {
margin: 0px; margin: 0px;
margin-right: 3px; margin-right: 3px;
vertical-align: middle; vertical-align: middle;
line-height: @toolbar-top-height;
span { span {
color: red; color: red;
cursor: pointer; cursor: pointer;
@@ -525,23 +524,63 @@ body {
display: none; display: none;
} }
} }
}
.cryptpad-toolbar:not(.notitle) { &.notitle {
// TODO .filler {
/*.cryptpad-toolbar-top { flex: 1;
}
}
&:not(.notitle) {
.cryptpad-toolbar-top {
@media screen and (max-width: @media-medium-screen) { @media screen and (max-width: @media-medium-screen) {
height: 67px; flex-wrap: wrap;
height: auto;
.cryptpad-state {
display: none;
}
.filler {
flex: 1;
}
.cryptpad-title {
flex: auto;
width: 100%;
order: 10;
height: 32px;
line-height: initial;
margin: 0;
.hoverable {
width: 100%;
}
.editable {
max-width: ~"calc(100vw - 26px)";
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
height: 32px;
box-sizing: border-box;
line-height: 20px;
}
.pencilIcon, .saveIcon {
box-sizing: border-box;
height: 32px;
line-height: 16px;
display: inline-block;
.fa {
font-size: 16px;
}
}
input {
height: 32px;
font-size: 16px;
flex: 1;
max-width: none;
}
} }
.cryptpad-link, .cryptpad-user {
@media screen and (max-width: @media-medium-screen) {
top: 35px;
} }
@media screen and (min-width: (@media-medium-screen + 1px)) {
top: 0px;
} }
} }
}*/
} }
.cryptpad-toolbar-top { .cryptpad-toolbar-top {
@@ -553,23 +592,30 @@ body {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
order: 4; order: 4;
flex: 1; //flex: 1;
} }
.cryptpad-title { .cryptpad-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
order: 3; order: 3;
height: 100%; height: 100%;
display: inline-block; display: inline-flex;
align-items: center;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
margin-left: 20px; margin: 0 20px;
.title, .pencilIcon, .saveIcon { .title, .pencilIcon, .saveIcon {
font-size: 25px; font-size: 25px;
vertical-align: middle; vertical-align: middle;
line-height: 25px; line-height: 25px;
} }
.hoverable {
display: inline-flex;
overflow: hidden;
}
.pencilIcon { .pencilIcon {
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0px 2px 2px 0px;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
span { span {
@@ -579,7 +625,6 @@ body {
} }
.saveIcon { .saveIcon {
cursor: pointer; cursor: pointer;
border-radius: 0px 2px 2px 0px;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
span { span {
@@ -588,18 +633,21 @@ body {
} }
} }
.editable { .editable {
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px 0px 0px 2px;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
} }
input { input {
max-width: ~"calc(100% - 40px)";
flex: 1;
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
cursor: auto; cursor: auto;
width: 300px; width: 300px;
font-size: 25px; font-size: 20px;
padding: 5px 5px; padding: 5px 5px;
height: 40px; height: 40px;
} }
@@ -740,6 +788,18 @@ body {
.dropdown-bar-content { .dropdown-bar-content {
margin-top: -1px; 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;
}
}
} }
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
height: 32px; height: 32px;
@@ -815,13 +875,14 @@ body {
.gotoInput { .gotoInput {
vertical-align: middle; vertical-align: middle;
} }
.closeHistory {
background: white;
color: black;
}
} }
.cke_toolbox .cryptpad-toolbar-history { .cke_toolbox .cryptpad-toolbar-history {
input.gotoInput { input.gotoInput {
background: white;
height: 20px;
padding: 3px 3px; padding: 3px 3px;
border-radius: 5px;
} }
} }
.cryptpad-spinner { .cryptpad-spinner {

180
customize.dist/toolbar.css
View File

@@ -155,6 +155,9 @@ body.app-pad .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-pad .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
body.app-pad .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-pad .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-pad .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-pad .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-pad .cryptpad-toolbar .drawer-content { body.app-pad .cryptpad-toolbar .drawer-content {
@@ -167,12 +170,12 @@ body.app-pad .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-pad .cryptpad-toolbar .hoverable:hover .editable { body.app-pad .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #2e71da; border: 1px solid #112f5f;
background: #143a75; background: #143a75;
color: #fff; color: #fff;
} }
body.app-pad .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-pad .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #2e71da; border: 1px solid #112f5f;
background: #143a75; background: #143a75;
color: #fff; color: #fff;
} }
@@ -180,7 +183,7 @@ body.app-pad .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #18448a; background: #18448a;
} }
body.app-pad .cryptpad-toolbar .saveIcon { body.app-pad .cryptpad-toolbar .saveIcon {
border: 1px solid #2e71da; border: 1px solid #112f5f;
background: #143a75; background: #143a75;
color: #fff; color: #fff;
} }
@@ -188,7 +191,7 @@ body.app-pad .cryptpad-toolbar .saveIcon:hover {
background: #18448a; background: #18448a;
} }
body.app-pad .cryptpad-toolbar input { body.app-pad .cryptpad-toolbar input {
border: 1px solid #2e71da; border: 1px solid #112f5f;
background: #143a75; background: #143a75;
color: #fff; color: #fff;
} }
@@ -236,6 +239,9 @@ body.app-code .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-code .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
body.app-code .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-code .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-code .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-code .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-code .cryptpad-toolbar .drawer-content { body.app-code .cryptpad-toolbar .drawer-content {
@@ -248,12 +254,12 @@ body.app-code .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-code .cryptpad-toolbar .hoverable:hover .editable { body.app-code .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #ffc64d; border: 1px solid #b37a00;
background: #cc8b00; background: #cc8b00;
color: #000; color: #000;
} }
body.app-code .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-code .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #ffc64d; border: 1px solid #b37a00;
background: #cc8b00; background: #cc8b00;
color: #000; color: #000;
} }
@@ -261,7 +267,7 @@ body.app-code .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #e69d00; background: #e69d00;
} }
body.app-code .cryptpad-toolbar .saveIcon { body.app-code .cryptpad-toolbar .saveIcon {
border: 1px solid #ffc64d; border: 1px solid #b37a00;
background: #cc8b00; background: #cc8b00;
color: #000; color: #000;
} }
@@ -269,7 +275,7 @@ body.app-code .cryptpad-toolbar .saveIcon:hover {
background: #e69d00; background: #e69d00;
} }
body.app-code .cryptpad-toolbar input { body.app-code .cryptpad-toolbar input {
border: 1px solid #ffc64d; border: 1px solid #b37a00;
background: #cc8b00; background: #cc8b00;
color: #000; color: #000;
} }
@@ -317,6 +323,9 @@ body.app-slide .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-slide .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
body.app-slide .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-slide .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-slide .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-slide .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-slide .cryptpad-toolbar .drawer-content { body.app-slide .cryptpad-toolbar .drawer-content {
@@ -329,12 +338,12 @@ body.app-slide .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-slide .cryptpad-toolbar .hoverable:hover .editable { body.app-slide .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #f09e55; border: 1px solid #9f520e;
background: #b65e10; background: #b65e10;
color: #fff; color: #fff;
} }
body.app-slide .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-slide .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #f09e55; border: 1px solid #9f520e;
background: #b65e10; background: #b65e10;
color: #fff; color: #fff;
} }
@@ -342,7 +351,7 @@ body.app-slide .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #ce6a12; background: #ce6a12;
} }
body.app-slide .cryptpad-toolbar .saveIcon { body.app-slide .cryptpad-toolbar .saveIcon {
border: 1px solid #f09e55; border: 1px solid #9f520e;
background: #b65e10; background: #b65e10;
color: #fff; color: #fff;
} }
@@ -350,7 +359,7 @@ body.app-slide .cryptpad-toolbar .saveIcon:hover {
background: #ce6a12; background: #ce6a12;
} }
body.app-slide .cryptpad-toolbar input { body.app-slide .cryptpad-toolbar input {
border: 1px solid #f09e55; border: 1px solid #9f520e;
background: #b65e10; background: #b65e10;
color: #fff; color: #fff;
} }
@@ -398,6 +407,9 @@ body.app-poll .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-poll .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
body.app-poll .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-poll .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-poll .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-poll .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-poll .cryptpad-toolbar .drawer-content { body.app-poll .cryptpad-toolbar .drawer-content {
@@ -410,12 +422,12 @@ body.app-poll .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-poll .cryptpad-toolbar .hoverable:hover .editable { body.app-poll .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #00b007; border: 1px solid #001701;
background: #003002; background: #003002;
color: #fff; color: #fff;
} }
body.app-poll .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-poll .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #00b007; border: 1px solid #001701;
background: #003002; background: #003002;
color: #fff; color: #fff;
} }
@@ -423,7 +435,7 @@ body.app-poll .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #004a03; background: #004a03;
} }
body.app-poll .cryptpad-toolbar .saveIcon { body.app-poll .cryptpad-toolbar .saveIcon {
border: 1px solid #00b007; border: 1px solid #001701;
background: #003002; background: #003002;
color: #fff; color: #fff;
} }
@@ -431,7 +443,7 @@ body.app-poll .cryptpad-toolbar .saveIcon:hover {
background: #004a03; background: #004a03;
} }
body.app-poll .cryptpad-toolbar input { body.app-poll .cryptpad-toolbar input {
border: 1px solid #00b007; border: 1px solid #001701;
background: #003002; background: #003002;
color: #fff; color: #fff;
} }
@@ -479,6 +491,9 @@ body.app-whiteboard .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-whiteboard .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-whiteboard .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-whiteboard .cryptpad-toolbar .drawer-content { body.app-whiteboard .cryptpad-toolbar .drawer-content {
@@ -491,12 +506,12 @@ body.app-whiteboard .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-whiteboard .cryptpad-toolbar .hoverable:hover .editable { body.app-whiteboard .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #cd00cc; border: 1px solid #340033;
background: #4d004d; background: #4d004d;
color: #fff; color: #fff;
} }
body.app-whiteboard .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-whiteboard .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #cd00cc; border: 1px solid #340033;
background: #4d004d; background: #4d004d;
color: #fff; color: #fff;
} }
@@ -504,7 +519,7 @@ body.app-whiteboard .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #670066; background: #670066;
} }
body.app-whiteboard .cryptpad-toolbar .saveIcon { body.app-whiteboard .cryptpad-toolbar .saveIcon {
border: 1px solid #cd00cc; border: 1px solid #340033;
background: #4d004d; background: #4d004d;
color: #fff; color: #fff;
} }
@@ -512,7 +527,7 @@ body.app-whiteboard .cryptpad-toolbar .saveIcon:hover {
background: #670066; background: #670066;
} }
body.app-whiteboard .cryptpad-toolbar input { body.app-whiteboard .cryptpad-toolbar input {
border: 1px solid #cd00cc; border: 1px solid #340033;
background: #4d004d; background: #4d004d;
color: #fff; color: #fff;
} }
@@ -560,6 +575,9 @@ body.app-drive .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-drive .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
body.app-drive .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-drive .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-drive .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-drive .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-drive .cryptpad-toolbar .drawer-content { body.app-drive .cryptpad-toolbar .drawer-content {
@@ -572,12 +590,12 @@ body.app-drive .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-drive .cryptpad-toolbar .hoverable:hover .editable { body.app-drive .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #4dabff; border: 1px solid #005eb3;
background: #006ccc; background: #006ccc;
color: #fff; color: #fff;
} }
body.app-drive .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-drive .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #4dabff; border: 1px solid #005eb3;
background: #006ccc; background: #006ccc;
color: #fff; color: #fff;
} }
@@ -585,7 +603,7 @@ body.app-drive .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #0079e6; background: #0079e6;
} }
body.app-drive .cryptpad-toolbar .saveIcon { body.app-drive .cryptpad-toolbar .saveIcon {
border: 1px solid #4dabff; border: 1px solid #005eb3;
background: #006ccc; background: #006ccc;
color: #fff; color: #fff;
} }
@@ -593,7 +611,7 @@ body.app-drive .cryptpad-toolbar .saveIcon:hover {
background: #0079e6; background: #0079e6;
} }
body.app-drive .cryptpad-toolbar input { body.app-drive .cryptpad-toolbar input {
border: 1px solid #4dabff; border: 1px solid #005eb3;
background: #006ccc; background: #006ccc;
color: #fff; color: #fff;
} }
@@ -641,6 +659,9 @@ body.app-file .cryptpad-toolbar .userlist-drawer {
top: 96px; top: 96px;
bottom: 0; bottom: 0;
} }
body.app-file .cryptpad-toolbar .cryptpad-limit {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
body.app-file .cryptpad-toolbar .cryptpad-toolbar-leftside, body.app-file .cryptpad-toolbar .cryptpad-toolbar-leftside,
body.app-file .cryptpad-toolbar .cryptpad-toolbar-rightside, body.app-file .cryptpad-toolbar .cryptpad-toolbar-rightside,
body.app-file .cryptpad-toolbar .drawer-content { body.app-file .cryptpad-toolbar .drawer-content {
@@ -653,12 +674,12 @@ body.app-file .cryptpad-toolbar .drawer-content button:hover {
} }
body.app-file .cryptpad-toolbar .hoverable:hover .editable { body.app-file .cryptpad-toolbar .hoverable:hover .editable {
cursor: text; cursor: text;
border: 1px solid #e25d67; border: 1px solid #8c1922;
background: #a21d27; background: #a21d27;
color: #fff; color: #fff;
} }
body.app-file .cryptpad-toolbar .hoverable:hover .pencilIcon { body.app-file .cryptpad-toolbar .hoverable:hover .pencilIcon {
border: 1px solid #e25d67; border: 1px solid #8c1922;
background: #a21d27; background: #a21d27;
color: #fff; color: #fff;
} }
@@ -666,7 +687,7 @@ body.app-file .cryptpad-toolbar .hoverable:hover .pencilIcon:hover {
background: #b7212d; background: #b7212d;
} }
body.app-file .cryptpad-toolbar .saveIcon { body.app-file .cryptpad-toolbar .saveIcon {
border: 1px solid #e25d67; border: 1px solid #8c1922;
background: #a21d27; background: #a21d27;
color: #fff; color: #fff;
} }
@@ -674,7 +695,7 @@ body.app-file .cryptpad-toolbar .saveIcon:hover {
background: #b7212d; background: #b7212d;
} }
body.app-file .cryptpad-toolbar input { body.app-file .cryptpad-toolbar input {
border: 1px solid #e25d67; border: 1px solid #8c1922;
background: #a21d27; background: #a21d27;
color: #fff; color: #fff;
} }
@@ -722,9 +743,6 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-family: FontAwesome; font-family: FontAwesome;
} }
.cryptpad-toolbar a {
float: right;
}
.cryptpad-toolbar .dropdown-bar { .cryptpad-toolbar .dropdown-bar {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
@@ -832,6 +850,7 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
margin: 0px; margin: 0px;
margin-right: 3px; margin-right: 3px;
vertical-align: middle; vertical-align: middle;
line-height: 64px;
} }
.cryptpad-toolbar .cryptpad-limit span { .cryptpad-toolbar .cryptpad-limit span {
color: red; color: red;
@@ -1030,20 +1049,58 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
display: none; display: none;
} }
} }
.cryptpad-toolbar:not(.notitle) { .cryptpad-toolbar.notitle .filler {
/*.cryptpad-toolbar-top { flex: 1;
@media screen and (max-width: @media-medium-screen) {
height: 67px;
} }
.cryptpad-link, .cryptpad-user { @media screen and (max-width: 600px) {
@media screen and (max-width: @media-medium-screen) { .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top {
top: 35px; flex-wrap: wrap;
height: auto;
} }
@media screen and (min-width: (@media-medium-screen + 1px)) { .cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-state {
top: 0px; display: none;
} }
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .filler {
flex: 1;
}
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title {
flex: auto;
width: 100%;
order: 10;
height: 32px;
line-height: initial;
margin: 0;
}
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title .hoverable {
width: 100%;
}
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title .editable {
max-width: calc(100vw - 26px);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
height: 32px;
box-sizing: border-box;
line-height: 20px;
}
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title .pencilIcon,
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title .saveIcon {
box-sizing: border-box;
height: 32px;
line-height: 16px;
display: inline-block;
}
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title .pencilIcon .fa,
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title .saveIcon .fa {
font-size: 16px;
}
.cryptpad-toolbar:not(.notitle) .cryptpad-toolbar-top .cryptpad-title input {
height: 32px;
font-size: 16px;
flex: 1;
max-width: none;
} }
}*/
} }
.cryptpad-toolbar-top { .cryptpad-toolbar-top {
display: flex; display: flex;
@@ -1055,14 +1112,17 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
order: 4; order: 4;
flex: 1;
} }
.cryptpad-toolbar-top .cryptpad-title { .cryptpad-toolbar-top .cryptpad-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
order: 3; order: 3;
height: 100%; height: 100%;
display: inline-block; display: inline-flex;
align-items: center;
line-height: 64px; line-height: 64px;
margin-left: 20px; margin: 0 20px;
} }
.cryptpad-toolbar-top .cryptpad-title .title, .cryptpad-toolbar-top .cryptpad-title .title,
.cryptpad-toolbar-top .cryptpad-title .pencilIcon, .cryptpad-toolbar-top .cryptpad-title .pencilIcon,
@@ -1071,10 +1131,13 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
vertical-align: middle; vertical-align: middle;
line-height: 25px; line-height: 25px;
} }
.cryptpad-toolbar-top .cryptpad-title .hoverable {
display: inline-flex;
overflow: hidden;
}
.cryptpad-toolbar-top .cryptpad-title .pencilIcon { .cryptpad-toolbar-top .cryptpad-title .pencilIcon {
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0px 2px 2px 0px;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
} }
@@ -1084,7 +1147,6 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
} }
.cryptpad-toolbar-top .cryptpad-title .saveIcon { .cryptpad-toolbar-top .cryptpad-title .saveIcon {
cursor: pointer; cursor: pointer;
border-radius: 0px 2px 2px 0px;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
} }
@@ -1093,18 +1155,21 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
cursor: pointer; cursor: pointer;
} }
.cryptpad-toolbar-top .cryptpad-title .editable { .cryptpad-toolbar-top .cryptpad-title .editable {
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px 0px 0px 2px;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
} }
.cryptpad-toolbar-top .cryptpad-title input { .cryptpad-toolbar-top .cryptpad-title input {
max-width: calc(100% - 40px);
flex: 1;
font-size: 1.5em; font-size: 1.5em;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
cursor: auto; cursor: auto;
width: 300px; width: 300px;
font-size: 25px; font-size: 20px;
padding: 5px 5px; padding: 5px 5px;
height: 40px; height: 40px;
} }
@@ -1242,6 +1307,18 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
.cryptpad-toolbar-leftside .dropdown-bar-content { .cryptpad-toolbar-leftside .dropdown-bar-content {
margin-top: -1px; margin-top: -1px;
} }
.cryptpad-toolbar-leftside .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;
}
.cryptpad-toolbar-leftside .limit-container a:hover {
text-decoration: none;
}
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
height: 32px; height: 32px;
text-align: right; text-align: right;
@@ -1319,11 +1396,12 @@ body.app-file .cryptpad-toolbar .dropdown-bar-content p .accountData {
.cryptpad-toolbar-history .gotoInput { .cryptpad-toolbar-history .gotoInput {
vertical-align: middle; vertical-align: middle;
} }
.cke_toolbox .cryptpad-toolbar-history input.gotoInput { .cryptpad-toolbar-history .closeHistory {
background: white; background: white;
height: 20px; color: black;
}
.cke_toolbox .cryptpad-toolbar-history input.gotoInput {
padding: 3px 3px; padding: 3px 3px;
border-radius: 5px;
} }
.cryptpad-spinner { .cryptpad-spinner {
line-height: 64px; line-height: 64px;

11
www/common/cryptpad-common.js
View File

@@ -849,7 +849,7 @@ define([
var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container); var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container);
var quota = usage/limit; var quota = usage/limit;
var width = Math.floor(Math.min(quota, 1)*200); // the bar is 200px width var width = Math.floor(Math.min(quota, 1)*$limit.width()); // the bar is 200px width
var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px'); var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px');
var makeDonateButton = function () { var makeDonateButton = function () {
@@ -864,15 +864,12 @@ define([
}; };
var makeUpgradeButton = function () { var makeUpgradeButton = function () {
var $upgradeLink = $('<a>', { $('<a>', {
'class': 'upgrade btn btn-success',
href: common.upgradeURL, href: common.upgradeURL,
rel: "noreferrer noopener", rel: "noreferrer noopener",
target: "_blank", target: "_blank",
}).appendTo($container); }).text(Messages.upgradeAccount).appendTo($container);
$('<button>', {
'class': 'upgrade buttonSuccess',
title: Messages.upgradeTitle
}).text(Messages.upgradeAccount).appendTo($upgradeLink);
}; };
if (!Config.removeDonateButton) { if (!Config.removeDonateButton) {

6
www/common/toolbar2.js
View File

@@ -498,6 +498,7 @@ define([
var displayInput = function () { var displayInput = function () {
if (toolbar.connected === false) { return; } if (toolbar.connected === false) { return; }
$input.width(Math.max($text.width(), 300)+'px');
$text.hide(); $text.hide();
//$pencilIcon.css('display', 'none'); //$pencilIcon.css('display', 'none');
var inputVal = suggestName() || ""; var inputVal = suggestName() || "";
@@ -741,7 +742,8 @@ define([
}; };
var createUpgrade = function (toolbar) { var createUpgrade = function (toolbar) {
if (ApiConfig.removeDonateButton) { return; } return; // TODO
/*if (ApiConfig.removeDonateButton) { return; }
if (Cryptpad.account.plan) { return; } if (Cryptpad.account.plan) { return; }
var text; var text;
@@ -764,7 +766,7 @@ define([
Cryptpad.feedback(feedback); Cryptpad.feedback(feedback);
window.open(url,'_blank'); window.open(url,'_blank');
}); });
return $upgrade; return $upgrade;*/
}; };
// Events // Events

3
www/pad/inner.html
View File

@@ -27,6 +27,9 @@
padding: 0; padding: 0;
display: inline-block; display: inline-block;
} }
.cke_wysiwyg_frame {
min-width: 60%;
}
</style> </style>
</head> </head>
<body class="app-pad"> <body class="app-pad">

1
www/settings/main.js
View File

@@ -235,7 +235,6 @@ define([
Cryptpad.createUsageBar(function (err, $bar) { Cryptpad.createUsageBar(function (err, $bar) {
$div.find('.limit-container').remove(); $div.find('.limit-container').remove();
$bar.find('.upgrade').addClass('btn btn-success');
$div.append($bar); $div.append($bar);
}, true); }, true);
return $div; return $div;