@ -1,5 +1,5 @@
@import (once) "./dropdown.less";
@import (once) "./dropdown.less";
@import (once) "./colortheme.less";
@import (once) "./colortheme-all .less";
@import (once) "./browser.less";
@import (once) "./browser.less";
@import (once) "./ckeditor-fix.less";
@import (once) "./ckeditor-fix.less";
@import (once) "./avatar.less";
@import (once) "./avatar.less";
@ -7,9 +7,12 @@
@import (once) "./icon-colors.less";
@import (once) "./icon-colors.less";
@import (once) "./tools.less";
@import (once) "./tools.less";
@_cp-toolbar-color-warn: black;
.toolbar_main (
@color: @colortheme_default-color, // Color of the text for the toolbar
.toolbar_main () {
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
@barWidth: 600px // width of the toolbar
) {
@toolbar_line-height: 32px;
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@toolbar_top-height: 64px;
@ -52,7 +55,7 @@
}
}
.cp-toolbar-userlist-drawer {
.cp-toolbar-userlist-drawer {
background-color: @colortheme_default-bg ;
background-color: @bg- color;
font: @colortheme_app-font-size @colortheme_font;
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
min-width: 175px;
width: 175px;
width: 175px;
@ -170,176 +173,53 @@
}
}
}
}
.addToolbarColors (@color, @bg-color, @barWidth: 600px) {
// TODO(cjd) This ought to be in a less file for markdown-based editors
.cp-markdown-toolbar {
.cp-markdown-toolbar {
height: @toolbar_line-height;
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
background-color: lighten(@bg-color, 20%);
display: none;
display: none;
button {
button {
height: @toolbar_line-height !important;
height: @toolbar_line-height !important;
outline: 0;
outline: 0;
color: @color;
color: @color;
.toolbar_button;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
&:hover {
background-color: lighten(@bgcolor, 8%);
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-userlist-drawer {
}
background-color: @bgcolor;
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;
.cp-toolbar-userlist-drawer-close {
color: @color;
}
h2 {
background-color: darken(@bg-color, 10%);
color: @color;
color: @color;
.cp-toolbar-userlist-drawer-close {
color: @color;
}
h2 {
background-color: darken(@bgcolor, 10%);
color: @color;
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
background: transparent;
&:hover {
color: @color;
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
}
}
}
}
.cp-toolbar {
.cp-toolbar-userlist-name-input {
background-color: @bgcolor;
background-color: darken(@bg-color, 10%);
color: @color;
color: @color;
.cp-toolbar-spinner {
}
font-size: @colortheme_app-font-size;
.cp-toolbar-userlist-name-edit {
color: @color;
color: contrast(@color,
}
lighten(@color, 20%),
.cp-toolbar-limit {
darken(@color, 20%));
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
background: transparent;
color: @_cp-toolbar-color-warn;
&:hover {
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bgcolor, 8%);
button:hover, button.cp-toolbar-button-active {
background-color: @bgcolor;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-pad-not-pinned {
padding-left: 20px;
font-size: @colortheme_app-font-size;
color: @_cp-toolbar-color-warn;
a {
font-size: @colortheme_app-font-size;
font-weight: bold;
color: @_cp-toolbar-color-warn;
&:hover {
text-decoration: underline;
}
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
transition: all 0.15s;
color: @color;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
}
input {
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
color: @color;
}
}
.cp-dropdown-content.cp-dropdown-left a {
}
color: black;
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
}
}
}
}
}
}
&.cp-app-pad {
@bgcolor: @colortheme_pad-bg;
@color: @colortheme_pad-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-code {
@bgcolor: @colortheme_code-bg;
@color: @colortheme_code-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-slide {
@bgcolor: @colortheme_slide-bg;
@color: @colortheme_slide-color;
.addToolbarColors(@color, @bgcolor, 700px);
}
&.cp-app-poll {
@bgcolor: @colortheme_poll-bg;
@color: @colortheme_poll-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-whiteboard {
@bgcolor: @colortheme_whiteboard-bg;
@color: @colortheme_whiteboard-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-drive {
@bgcolor: @colortheme_drive-bg;
@color: @colortheme_drive-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-file {
@bgcolor: @colortheme_file-bg;
@color: @colortheme_file-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-contacts {
@bgcolor: @colortheme_friends-bg;
@color: @colortheme_friends-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-settings {
@bgcolor: @colortheme_settings-bg;
@color: @colortheme_settings-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-profile {
@bgcolor: @colortheme_profile-bg;
@color: @colortheme_profile-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-todo {
@bgcolor: @colortheme_todo-bg;
@color: @colortheme_todo-color;
.addToolbarColors(@color, @bgcolor);
}
.cp-toolbar {
.cp-toolbar {
* {
* {
outline-width: 0;
outline-width: 0;
@ -355,12 +235,8 @@
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
justify-content: space-between;
background-color: @bg-color;
//background-color: #BBBBFF;
color: @color;
background-color: @colortheme_default-bg;
color: @colortheme_default-color;
.fa {
.fa {
font: normal normal normal 14px/1 FontAwesome;
font: normal normal normal 14px/1 FontAwesome;
@ -487,6 +363,56 @@
}
}
}
}
}
}
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @color;
}
.cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
color: @warn-color;
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bg-color, 8%);
button:hover, button.cp-toolbar-button-active {
background-color: @bg-color;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
transition: all 0.15s;
color: @color;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
&:hover {
background: darken(@bg-color, 5%);
}
}
input {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
}
}
}
.cp-toolbar-top {
.cp-toolbar-top {
@ -578,6 +504,35 @@
padding: 5px 5px;
padding: 5px 5px;
height: 40px;
height: 40px;
}
}
.cp-pad-not-pinned {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
align-self: right;
padding-left: 20px;
padding-left: 5px;
font-size: @colortheme_app-font-size;
color: @warn-color;
.cp-pnp-msg {
padding-left: 5px;
a {
font-size: @colortheme_app-font-size;
font-weight: bold;
color: @warn-color;
&:hover {
text-decoration: underline;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
display: none;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
overflow: visible;
}
}
}
}
.cp-toolbar-link, .cp-toolbar-new {
.cp-toolbar-link, .cp-toolbar-new {
font-size: 48px;
font-size: 48px;