New toolbar colors

pull/1/head
yflory 8 years ago
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…
Cancel
Save