New toolbar colors
yflory
parent
fe6a9e5d8d
commit
b7a0547b77
|
|
@ -28,12 +28,47 @@
|
|||
@toolbar-green: #5cb85c;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0px 6px;
|
||||
padding: 0px;
|
||||
|
||||
//background-color: #BBBBFF;
|
||||
background-color: @toolbar-default-bg;
|
||||
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 {
|
||||
background-color: @toolbar-pad-bg;
|
||||
color: @toolbar-pad-color;
|
||||
|
|
@ -62,7 +97,7 @@
|
|||
background-color: @toolbar-file-bg;
|
||||
color: @toolbar-file-color;
|
||||
}
|
||||
|
||||
*/
|
||||
.fa {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-family: FontAwesome;
|
||||
|
|
@ -78,6 +113,17 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-bar {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&#shareButton, &.buttonSuccess {
|
||||
// Bootstrap 4 colors
|
||||
|
|
@ -421,6 +467,7 @@
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
height: 32px;
|
||||
background: @toolbar-drive-bg;
|
||||
|
||||
a.cryptpad-logo {
|
||||
cursor: pointer;
|
||||
|
|
@ -447,6 +494,7 @@
|
|||
}
|
||||
}
|
||||
.cryptpad-user {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
:not(.cryptpad-lag) span {
|
||||
|
|
@ -480,6 +528,13 @@
|
|||
.cryptpad-toolbar-rightside {
|
||||
height: 32px;
|
||||
text-align: right;
|
||||
&> button {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
padding: 0 10px;
|
||||
|
||||
}
|
||||
}
|
||||
.cryptpad-toolbar-history {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -77,19 +77,19 @@
|
|||
// Toolbar
|
||||
@toolbar-pad-bg: #1c4fa0;
|
||||
@toolbar-pad-color: #fff;
|
||||
@toolbar-slide-bg: #a01c1c;
|
||||
@toolbar-slide-bg: #e57614;
|
||||
@toolbar-slide-color: #fff;
|
||||
@toolbar-code-bg: #ffae00;
|
||||
@toolbar-code-color: #000;
|
||||
@toolbar-poll-bg: #006304;
|
||||
@toolbar-poll-color: #fff;
|
||||
@toolbar-whiteboard-bg: #570063;
|
||||
@toolbar-whiteboard-bg: #800080;
|
||||
@toolbar-whiteboard-color: #fff;
|
||||
@toolbar-drive-bg: #0087ff;
|
||||
@toolbar-drive-color: #fff;
|
||||
@toolbar-file-bg: #ccffa0;
|
||||
@toolbar-file-color: #000;
|
||||
@toolbar-default-bg: #fff;
|
||||
@toolbar-file-bg: #cd2532;
|
||||
@toolbar-file-color: #fff;
|
||||
@toolbar-default-bg: #ddd;
|
||||
@toolbar-default-color: #000;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -103,9 +103,39 @@
|
|||
}
|
||||
.cryptpad-toolbar {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 6px;
|
||||
background-color: #fff;
|
||||
padding: 0px;
|
||||
background-color: #ddd;
|
||||
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-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -117,32 +147,32 @@
|
|||
z-index: 9001;
|
||||
}
|
||||
.cryptpad-toolbar.pad {
|
||||
background-color: #1c4fa0;
|
||||
color: #fff;
|
||||
background: linear-gradient(20deg, #1c4fa0 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #1c4fa0;
|
||||
}
|
||||
.cryptpad-toolbar.code {
|
||||
background-color: #ffae00;
|
||||
color: #000;
|
||||
background: linear-gradient(20deg, #ffae00 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #ffae00;
|
||||
}
|
||||
.cryptpad-toolbar.slide {
|
||||
background-color: #a01c1c;
|
||||
color: #fff;
|
||||
background: linear-gradient(20deg, #e57614 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #e57614;
|
||||
}
|
||||
.cryptpad-toolbar.poll {
|
||||
background-color: #006304;
|
||||
color: #fff;
|
||||
background: linear-gradient(20deg, #006304 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #006304;
|
||||
}
|
||||
.cryptpad-toolbar.whiteboard {
|
||||
background-color: #570063;
|
||||
color: #fff;
|
||||
background: linear-gradient(20deg, #800080 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #800080;
|
||||
}
|
||||
.cryptpad-toolbar.drive {
|
||||
background-color: #0087ff;
|
||||
color: #fff;
|
||||
background: linear-gradient(20deg, #0087ff 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #0087ff;
|
||||
}
|
||||
.cryptpad-toolbar.file {
|
||||
background-color: #ccffa0;
|
||||
color: #000;
|
||||
background: linear-gradient(20deg, #cd2532 150px, #ddd 150px);
|
||||
border-bottom: 2px solid #cd2532;
|
||||
}
|
||||
.cryptpad-toolbar .fa {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
|
|
@ -151,6 +181,15 @@
|
|||
.cryptpad-toolbar a {
|
||||
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 {
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
|
|
@ -502,6 +541,7 @@
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
height: 32px;
|
||||
background: #0087ff;
|
||||
}
|
||||
.cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
|
||||
cursor: pointer;
|
||||
|
|
@ -525,6 +565,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.cryptpad-toolbar-top .cryptpad-user {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -554,6 +595,12 @@
|
|||
height: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
.cryptpad-toolbar-rightside > button {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.cryptpad-toolbar-history {
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -509,8 +509,8 @@ define([
|
|||
title: Messages.header_logoTitle,
|
||||
'class': "cryptpad-logo"
|
||||
}).append($imgTag);
|
||||
var $span = $('<span>').text('CryptDrive');
|
||||
var $aTagBig = $aTagSmall.clone().addClass('large').append($span);
|
||||
//var $span = $('<span>').text('CryptDrive');
|
||||
var $aTagBig = $aTagSmall.clone().addClass('large');//.append($span);
|
||||
$aTagSmall.addClass('narrow');
|
||||
var onClick = function (e) {
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -43,6 +43,30 @@ body {
|
|||
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 {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,11 +154,12 @@ define([
|
|||
var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
|
||||
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
|
||||
var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
|
||||
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon"});
|
||||
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon"});
|
||||
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon"});
|
||||
var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon"});
|
||||
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush"});
|
||||
var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
|
||||
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
|
||||
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
|
||||
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
|
||||
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 $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
|
||||
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('/poll/') !== -1) { $icon = $pollIcon.clone(); }
|
||||
else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); }
|
||||
else if (href.indexOf('/file/') !== -1) { $icon = $fileAppIcon.clone(); }
|
||||
|
||||
return $icon;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
padding: 2px 0;
|
||||
}
|
||||
#cke_1_top .cryptpad-toolbar {
|
||||
padding: 0 6px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue