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

New toolbar colors

Browse Source
This commit is contained in:
yflory 2017-06-20 17:59:11 +02:00
parent fe6a9e5d8d
commit b7a0547b77
8 changed files with 169 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,12 +28,47 @@
@toolbar-green: #5cb85c; @toolbar-green: #5cb85c;
box-sizing: border-box; box-sizing: border-box;
padding: 0px 6px; padding: 0px;
//background-color: #BBBBFF; //background-color: #BBBBFF;
background-color: @toolbar-default-bg; background-color: @toolbar-default-bg;
color: @toolbar-default-color; color: @toolbar-default-color;
&.pad {
@color: @toolbar-pad-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
&.code {
@color: @toolbar-code-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
&.slide {
@color: @toolbar-slide-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
&.poll {
@color: @toolbar-poll-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
&.whiteboard {
@color: @toolbar-whiteboard-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
&.drive {
@color: @toolbar-drive-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
&.file {
@color: @toolbar-file-bg;
background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
border-bottom: 2px solid @color;
}
/*
&.pad { &.pad {
background-color: @toolbar-pad-bg; background-color: @toolbar-pad-bg;
color: @toolbar-pad-color; color: @toolbar-pad-color;
@ -62,7 +97,7 @@
background-color: @toolbar-file-bg; background-color: @toolbar-file-bg;
color: @toolbar-file-color; color: @toolbar-file-color;
} }
*/
.fa { .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-family: FontAwesome; font-family: FontAwesome;
@ -78,6 +113,17 @@
float: right; float: right;
} }
.dropdown-bar {
height: 100%;
display: inline-block;
button {
height: 100%;
border-radius: 0;
margin: 0;
}
}
button { button {
&#shareButton, &.buttonSuccess { &#shareButton, &.buttonSuccess {
// Bootstrap 4 colors // Bootstrap 4 colors
@ -421,6 +467,7 @@
position: absolute; position: absolute;
left: 0px; left: 0px;
height: 32px; height: 32px;
background: @toolbar-drive-bg;
a.cryptpad-logo { a.cryptpad-logo {
cursor: pointer; cursor: pointer;
@ -447,6 +494,7 @@
} }
} }
.cryptpad-user { .cryptpad-user {
height: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
:not(.cryptpad-lag) span { :not(.cryptpad-lag) span {
@ -480,6 +528,13 @@
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
height: 32px; height: 32px;
text-align: right; text-align: right;
&> button {
height: 100%;
margin: 0;
border-radius: 0;
padding: 0 10px;
}
} }
.cryptpad-toolbar-history { .cryptpad-toolbar-history {
display: none; display: none;

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

@ -77,19 +77,19 @@
// Toolbar // Toolbar
@toolbar-pad-bg: #1c4fa0; @toolbar-pad-bg: #1c4fa0;
@toolbar-pad-color: #fff; @toolbar-pad-color: #fff;
@toolbar-slide-bg: #a01c1c; @toolbar-slide-bg: #e57614;
@toolbar-slide-color: #fff; @toolbar-slide-color: #fff;
@toolbar-code-bg: #ffae00; @toolbar-code-bg: #ffae00;
@toolbar-code-color: #000; @toolbar-code-color: #000;
@toolbar-poll-bg: #006304; @toolbar-poll-bg: #006304;
@toolbar-poll-color: #fff; @toolbar-poll-color: #fff;
@toolbar-whiteboard-bg: #570063; @toolbar-whiteboard-bg: #800080;
@toolbar-whiteboard-color: #fff; @toolbar-whiteboard-color: #fff;
@toolbar-drive-bg: #0087ff; @toolbar-drive-bg: #0087ff;
@toolbar-drive-color: #fff; @toolbar-drive-color: #fff;
@toolbar-file-bg: #ccffa0; @toolbar-file-bg: #cd2532;
@toolbar-file-color: #000; @toolbar-file-color: #fff;
@toolbar-default-bg: #fff; @toolbar-default-bg: #ddd;
@toolbar-default-color: #000; @toolbar-default-color: #000;

79
customize.dist/toolbar.css
View File

@ -103,9 +103,39 @@
} }
.cryptpad-toolbar { .cryptpad-toolbar {
box-sizing: border-box; box-sizing: border-box;
padding: 0px 6px; padding: 0px;
background-color: #fff; background-color: #ddd;
color: #000; color: #000;
/*
&.pad {
background-color: @toolbar-pad-bg;
color: @toolbar-pad-color;
}
&.code {
background-color: @toolbar-code-bg;
color: @toolbar-code-color;
}
&.slide {
background-color: @toolbar-slide-bg;
color: @toolbar-slide-color;
}
&.poll {
background-color: @toolbar-poll-bg;
color: @toolbar-poll-color;
}
&.whiteboard {
background-color: @toolbar-whiteboard-bg;
color: @toolbar-whiteboard-color;
}
&.drive {
background-color: @toolbar-drive-bg;
color: @toolbar-drive-color;
}
&.file {
background-color: @toolbar-file-bg;
color: @toolbar-file-color;
}
*/
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -117,32 +147,32 @@
z-index: 9001; z-index: 9001;
} }
.cryptpad-toolbar.pad { .cryptpad-toolbar.pad {
background-color: #1c4fa0; background: linear-gradient(20deg, #1c4fa0 150px, #ddd 150px);
color: #fff; border-bottom: 2px solid #1c4fa0;
} }
.cryptpad-toolbar.code { .cryptpad-toolbar.code {
background-color: #ffae00; background: linear-gradient(20deg, #ffae00 150px, #ddd 150px);
color: #000; border-bottom: 2px solid #ffae00;
} }
.cryptpad-toolbar.slide { .cryptpad-toolbar.slide {
background-color: #a01c1c; background: linear-gradient(20deg, #e57614 150px, #ddd 150px);
color: #fff; border-bottom: 2px solid #e57614;
} }
.cryptpad-toolbar.poll { .cryptpad-toolbar.poll {
background-color: #006304; background: linear-gradient(20deg, #006304 150px, #ddd 150px);
color: #fff; border-bottom: 2px solid #006304;
} }
.cryptpad-toolbar.whiteboard { .cryptpad-toolbar.whiteboard {
background-color: #570063; background: linear-gradient(20deg, #800080 150px, #ddd 150px);
color: #fff; border-bottom: 2px solid #800080;
} }
.cryptpad-toolbar.drive { .cryptpad-toolbar.drive {
background-color: #0087ff; background: linear-gradient(20deg, #0087ff 150px, #ddd 150px);
color: #fff; border-bottom: 2px solid #0087ff;
} }
.cryptpad-toolbar.file { .cryptpad-toolbar.file {
background-color: #ccffa0; background: linear-gradient(20deg, #cd2532 150px, #ddd 150px);
color: #000; border-bottom: 2px solid #cd2532;
} }
.cryptpad-toolbar .fa { .cryptpad-toolbar .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
@ -151,6 +181,15 @@
.cryptpad-toolbar a { .cryptpad-toolbar a {
float: right; float: right;
} }
.cryptpad-toolbar .dropdown-bar {
height: 100%;
display: inline-block;
}
.cryptpad-toolbar .dropdown-bar button {
height: 100%;
border-radius: 0;
margin: 0;
}
.cryptpad-toolbar button { .cryptpad-toolbar button {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem; border-radius: .25rem;
@ -502,6 +541,7 @@
position: absolute; position: absolute;
left: 0px; left: 0px;
height: 32px; height: 32px;
background: #0087ff;
} }
.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo { .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
cursor: pointer; cursor: pointer;
@ -525,6 +565,7 @@
cursor: pointer; cursor: pointer;
} }
.cryptpad-toolbar-top .cryptpad-user { .cryptpad-toolbar-top .cryptpad-user {
height: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
} }
@ -554,6 +595,12 @@
height: 32px; height: 32px;
text-align: right; text-align: right;
} }
.cryptpad-toolbar-rightside > button {
height: 100%;
margin: 0;
border-radius: 0;
padding: 0 10px;
}
.cryptpad-toolbar-history { .cryptpad-toolbar-history {
display: none; display: none;
text-align: center; text-align: center;

4
www/common/toolbar2.js
View File

@ -509,8 +509,8 @@ define([
title: Messages.header_logoTitle, title: Messages.header_logoTitle,
'class': "cryptpad-logo" 'class': "cryptpad-logo"
}).append($imgTag); }).append($imgTag);
var $span = $('<span>').text('CryptDrive'); //var $span = $('<span>').text('CryptDrive');
var $aTagBig = $aTagSmall.clone().addClass('large').append($span); var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
$aTagSmall.addClass('narrow'); $aTagSmall.addClass('narrow');
var onClick = function (e) { var onClick = function (e) {
e.preventDefault(); e.preventDefault();

24
www/drive/file.css
View File

@ -43,6 +43,30 @@ body {
margin-top: 0.5em; margin-top: 0.5em;
} }
} }
.padColor {
color: #1c4fa0;
}
.codeColor {
color: #ffae00;
}
.slideColor {
color: #e57614;
}
.pollColor {
color: #006304;
}
.fileColor {
color: #cd2532;
}
.whiteboardColor {
color: #800080;
}
.driveColor {
color: #0087ff;
}
.defaultColor {
color: #ddd;
}
div:focus { div:focus {
outline: none; outline: none;
} }

9
www/drive/file.less
View File

@ -74,6 +74,15 @@ body {
} }
} }
.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; }
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.defaultColor { color: @toolbar-default-bg; }
div:focus { div:focus {
outline: none; outline: none;
} }

12
www/drive/main.js
View File

@ -154,11 +154,12 @@ define([
var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"}); var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone(); var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"}); var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon"}); var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon"}); var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon"}); var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon"}); var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush"}); var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
//var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"}); //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"}); var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
var $templateIcon = $('<span>', {"class": "fa fa-cubes"}); var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
@ -1156,6 +1157,7 @@ define([
else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone(); } else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone(); }
else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone(); } else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone(); }
else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); } else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); }
else if (href.indexOf('/file/') !== -1) { $icon = $fileAppIcon.clone(); }
return $icon; return $icon;
}; };

2
www/pad/inner.html
View File

@ -24,7 +24,7 @@
padding: 2px 0; padding: 2px 0;
} }
#cke_1_top .cryptpad-toolbar { #cke_1_top .cryptpad-toolbar {
padding: 0 6px; padding: 0;
display: inline-block; display: inline-block;
} }
</style> </style>