|
|
|
@ -1,15 +1,36 @@
|
|
|
|
|
@import (once) "./dropdown.less";
|
|
|
|
|
@import (once) "./colortheme-all.less";
|
|
|
|
|
@import (once) "./browser.less";
|
|
|
|
|
@import (once) "./ckeditor-fix.less";
|
|
|
|
|
@import (once) "./avatar.less";
|
|
|
|
|
@import (once) "./toolbar-history.less";
|
|
|
|
|
@import (once) "./icon-colors.less";
|
|
|
|
|
@import (once) "./tools.less";
|
|
|
|
|
@import (once) "./icons.less";
|
|
|
|
|
@import (once) "./modal.less";
|
|
|
|
|
@import (once) "./markdown-toolbar.less";
|
|
|
|
|
@import (once) "./help.less";
|
|
|
|
|
@import (reference) "./dropdown.less";
|
|
|
|
|
@import (reference) "./colortheme-all.less";
|
|
|
|
|
@import (reference) "./browser.less";
|
|
|
|
|
@import (reference) "./ckeditor-fix.less";
|
|
|
|
|
@import (reference) "./avatar.less";
|
|
|
|
|
@import (reference) "./toolbar-history.less";
|
|
|
|
|
@import (reference) "./icon-colors.less";
|
|
|
|
|
@import (reference) "./tools.less";
|
|
|
|
|
@import (reference) "./icons.less";
|
|
|
|
|
@import (reference) "./modal.less";
|
|
|
|
|
@import (reference) "./help.less";
|
|
|
|
|
|
|
|
|
|
.toolbar_vars (
|
|
|
|
|
@color: @colortheme_default-color, // Color of the text for the toolbar
|
|
|
|
|
@bg-color: @colortheme_default-bg, // color of the toolbar background
|
|
|
|
|
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar
|
|
|
|
|
) {
|
|
|
|
|
@toolbar-color: @color;
|
|
|
|
|
@toolbar-color-l20: lighten(@color, 20%);
|
|
|
|
|
@toolbar-color-d20: darken(@color, 20%);
|
|
|
|
|
@toolbar-color-d15: darken(@color, 15%);
|
|
|
|
|
|
|
|
|
|
@toolbar-bg-color: @bg-color;
|
|
|
|
|
@toolbar-bg-color-l8: lighten(@bg-color, 8%);
|
|
|
|
|
@toolbar-bg-color-l20: lighten(@bg-color, 20%);
|
|
|
|
|
@toolbar-bg-color-d5: darken(@bg-color, 5%);
|
|
|
|
|
@toolbar-bg-color-d10: darken(@bg-color, 10%);
|
|
|
|
|
@toolbar-bg-color-d15: darken(@bg-color, 15%);
|
|
|
|
|
|
|
|
|
|
@toolbar-warn-color: @warn-color;
|
|
|
|
|
|
|
|
|
|
@toolbar-userlist-name-edit: contrast(@toolbar-color, @toolbar-color-l20, @toolbar-color-d20);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
.toolbar_main (
|
|
|
|
|
@color: @colortheme_default-color, // Color of the text for the toolbar
|
|
|
|
@ -17,7 +38,41 @@
|
|
|
|
|
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
|
|
|
|
|
@barWidth: 600px // width of the toolbar
|
|
|
|
|
) {
|
|
|
|
|
--LessLoader_require: LessLoader_currentFile();
|
|
|
|
|
.toolbar_vars(@color, @bg-color, @warn-color);
|
|
|
|
|
|
|
|
|
|
--toolbar-color: @toolbar-color;
|
|
|
|
|
--toolbar-color-l20: @toolbar-color-l20;
|
|
|
|
|
--toolbar-color-d20: @toolbar-color-d20;
|
|
|
|
|
--toolbar-color-d15: @toolbar-color-d15;
|
|
|
|
|
|
|
|
|
|
--toolbar-bg-color: @toolbar-bg-color;
|
|
|
|
|
--toolbar-bg-color-l8: @toolbar-bg-color-l8;
|
|
|
|
|
--toolbar-bg-color-l20: @toolbar-bg-color-l20;
|
|
|
|
|
--toolbar-bg-color-d5: @toolbar-bg-color-d5;
|
|
|
|
|
--toolbar-bg-color-d10: @toolbar-bg-color-d10;
|
|
|
|
|
--toolbar-bg-color-d15: @toolbar-bg-color-d15;
|
|
|
|
|
|
|
|
|
|
--toolbar-warn-color: @toolbar-warn-color;
|
|
|
|
|
|
|
|
|
|
--toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: @barWidth) {
|
|
|
|
|
.cp-toolbar-rightside {
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
height: auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.help_main(@color, @bg-color);
|
|
|
|
|
.dropdown_main();
|
|
|
|
|
.history_main();
|
|
|
|
|
.iconColors_main();
|
|
|
|
|
.modal_main();
|
|
|
|
|
};
|
|
|
|
|
& {
|
|
|
|
|
.toolbar_vars();
|
|
|
|
|
@toolbar_line-height: 32px;
|
|
|
|
|
@toolbar_top-height: 64px;
|
|
|
|
|
@toolbar_button-font: @colortheme_app-font;
|
|
|
|
@ -26,12 +81,27 @@
|
|
|
|
|
// this is a workaround
|
|
|
|
|
.fa-shhare-alt:before { content: "\f1e0"; }
|
|
|
|
|
|
|
|
|
|
.dropdown_main();
|
|
|
|
|
.ckeditor_fix();
|
|
|
|
|
.history_main();
|
|
|
|
|
.iconColors_main();
|
|
|
|
|
.markdownToolbar_main(@color, @bg-color);
|
|
|
|
|
.help_main(@color, @bg-color);
|
|
|
|
|
|
|
|
|
|
.cp-markdown-toolbar {
|
|
|
|
|
height: @toolbar_line-height;
|
|
|
|
|
background-color: @toolbar-bg-color-l20;
|
|
|
|
|
background-color: var(--toolbar-bg-color-l20);
|
|
|
|
|
display: none;
|
|
|
|
|
button {
|
|
|
|
|
height: @toolbar_line-height !important;
|
|
|
|
|
outline: 0;
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
.toolbar_button;
|
|
|
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: @toolbar-bg-color-l8;
|
|
|
|
|
background-color: var(--toolbar-bg-color-l8);
|
|
|
|
|
}
|
|
|
|
|
&.cp-markdown-help { float: right; }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cp-toolbar-container {
|
|
|
|
|
display: flex;
|
|
|
|
@ -65,7 +135,8 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cp-toolbar-userlist-drawer {
|
|
|
|
|
background-color: @bg-color;
|
|
|
|
|
background-color: @toolbar-bg-color;
|
|
|
|
|
background-color: var(--toolbar-bg-color);
|
|
|
|
|
font: @colortheme_app-font-size @colortheme_font;
|
|
|
|
|
min-width: 175px;
|
|
|
|
|
width: 175px;
|
|
|
|
@ -253,31 +324,39 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cp-toolbar-userlist-drawer {
|
|
|
|
|
background-color: @bg-color;
|
|
|
|
|
color: @color;
|
|
|
|
|
background-color: @toolbar-bg-color;
|
|
|
|
|
background-color: var(--toolbar-bg-color);
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
.cp-toolbar-userlist-drawer-close {
|
|
|
|
|
color: @color;
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
background-color: darken(@bg-color, 10%);
|
|
|
|
|
color: @color;
|
|
|
|
|
background-color: @toolbar-bg-color-d10;
|
|
|
|
|
background-color: var(--toolbar-bg-color-d10);
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
}
|
|
|
|
|
.cp-toolbar-userlist-name-input {
|
|
|
|
|
background-color: darken(@bg-color, 10%);
|
|
|
|
|
color: @color;
|
|
|
|
|
background-color: @toolbar-bg-color-d10;
|
|
|
|
|
background-color: var(--toolbar-bg-color-d10);
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
}
|
|
|
|
|
.cp-toolbar-userlist-name-edit {
|
|
|
|
|
color: contrast(@color,
|
|
|
|
|
lighten(@color, 20%),
|
|
|
|
|
darken(@color, 20%));
|
|
|
|
|
color: @toolbar-userlist-name-edit;
|
|
|
|
|
color: var(--toolbar-userlist-name-edit);
|
|
|
|
|
background: transparent;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: @color;
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cp-toolbar-userlist-friend {
|
|
|
|
|
&:hover {
|
|
|
|
|
color: darken(@color, 15%);
|
|
|
|
|
color: @toolbar-color-d15;
|
|
|
|
|
color: var(--toolbar-color-d15);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -297,8 +376,10 @@
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
background-color: @bg-color;
|
|
|
|
|
color: @color;
|
|
|
|
|
background-color: @toolbar-bg-color;
|
|
|
|
|
background-color: var(--toolbar-bg-color);
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
|
|
|
|
|
.fa {
|
|
|
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
|
|
@ -516,42 +597,57 @@
|
|
|
|
|
|
|
|
|
|
.cp-toolbar-spinner {
|
|
|
|
|
font-size: @colortheme_app-font-size;
|
|
|
|
|
color: @color;
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
}
|
|
|
|
|
.cp-toolbar-limit {
|
|
|
|
|
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
|
|
|
|
|
color: @warn-color;
|
|
|
|
|
text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
|
|
|
|
|
text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
|
|
|
|
|
color: @toolbar-warn-color;
|
|
|
|
|
color: var(--toolbar-warn-color);
|
|
|
|
|
}
|
|
|
|
|
.cp-toolbar-leftside, .cp-toolbar-rightside {
|
|
|
|
|
background-color: lighten(@bg-color, 8%);
|
|
|
|
|
background-color: @toolbar-bg-color-l8;
|
|
|
|
|
background-color: var(--toolbar-bg-color-l8);
|
|
|
|
|
button:hover, button.cp-toolbar-button-active {
|
|
|
|
|
background-color: @bg-color;
|
|
|
|
|
background-color: @toolbar-bg-color;
|
|
|
|
|
background-color: var(--toolbar-bg-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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%);
|
|
|
|
|
border: 1px solid @toolbar-bg-color-d15;
|
|
|
|
|
border: 1px solid var(--toolbar-bg-color-d15);
|
|
|
|
|
background: @toolbar-bg-color-d10;
|
|
|
|
|
background: var(--toolbar-bg-color-d10);
|
|
|
|
|
transition: all 0.15s;
|
|
|
|
|
color: @color;
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-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;
|
|
|
|
|
border: 1px solid @toolbar-bg-color-d15;
|
|
|
|
|
border: 1px solid var(--toolbar-bg-color-d15);
|
|
|
|
|
background: @toolbar-bg-color-d10;
|
|
|
|
|
background: var(--toolbar-bg-color-d10);
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
&:hover {
|
|
|
|
|
background: darken(@bg-color, 5%);
|
|
|
|
|
background: @toolbar-bg-color-d5;
|
|
|
|
|
background: var(--toolbar-bg-color-d5);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
input {
|
|
|
|
|
border: 1px solid darken(@bg-color, 15%);
|
|
|
|
|
background: darken(@bg-color, 10%);
|
|
|
|
|
color: @color;
|
|
|
|
|
border: 1px solid @toolbar-bg-color-d15;
|
|
|
|
|
border: 1px solid var(--toolbar-bg-color-d15);
|
|
|
|
|
background: @toolbar-bg-color-d10;
|
|
|
|
|
background: var(--toolbar-bg-color-d10);
|
|
|
|
|
color: @toolbar-color;
|
|
|
|
|
color: var(--toolbar-color);
|
|
|
|
|
}
|
|
|
|
|
.cp-dropdown-content.cp-dropdown-left a {
|
|
|
|
|
color: black;
|
|
|
|
@ -577,7 +673,8 @@
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0 5px;
|
|
|
|
|
font-size: @colortheme_app-font-size;
|
|
|
|
|
color: @warn-color;
|
|
|
|
|
color: @toolbar-warn-color;
|
|
|
|
|
color: var(--toolbar-warn-color);
|
|
|
|
|
.cp-pnp-msg {
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
font-family: @colortheme_font;
|
|
|
|
@ -586,7 +683,8 @@
|
|
|
|
|
font-size: @colortheme_app-font-size;
|
|
|
|
|
font-family: @colortheme_font;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: @warn-color;
|
|
|
|
|
color: @toolbar-warn-color;
|
|
|
|
|
color: var(--toolbar-warn-color);
|
|
|
|
|
&:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
@ -880,11 +978,6 @@
|
|
|
|
|
display: flex;
|
|
|
|
|
min-height: @toolbar_line-height;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@media screen and (max-width: @barWidth) { // 450px
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
height: auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
&:empty {
|
|
|
|
|
min-height: 0;
|
|
|
|
|
height: 0;
|
|
|
|
@ -1003,6 +1096,4 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|