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

refactoring of the less infrastructure

Browse Source
This commit is contained in:
Caleb James DeLisle
2018-07-14 15:15:23 +02:00
parent 507e5b18e9
commit 0d5ac05866
72 changed files with 3321 additions and 3229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
customize.dist/src/less2/include/alertify.less
View File

@@ -2,7 +2,10 @@
@import (reference) "./browser.less";
@import (reference) "./variables.less";
.alertify_main () {
.alertify_main() {
--LessLoader_require: LessLoader_currentFile();
};
& {
@max-z-index: 2147483647;
@alertify-fore: @colortheme_modal-fg;
@alertify-base: @colortheme_modal-bg;
@@ -406,4 +409,4 @@
}
}
}
}
}

29
customize.dist/src/less2/include/app-noscroll.less
View File

@@ -1,14 +1,8 @@
// html
.app-noscroll_main () {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
border: 0;
body {
.app-noscroll_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-noscroll {
height: 100%;
width: 100%;
padding: 0px;
@@ -17,6 +11,15 @@
box-sizing: border-box;
position: relative;
border: 0;
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
border: 0;
}
}
}
}

83
customize.dist/src/less2/include/app-print.less
View File

@@ -1,46 +1,51 @@
.app-print_main () {
// Current scope is <html>
@media print {
height: auto;
max-height: none;
overflow: visible;
display: block;
@page {
margin: 0;
size: landscape;
}
// Slide app
body.cp-app-slide {
.app-print_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-print {
// Current scope is <html>
@media print {
height: auto;
max-height: none;
overflow: visible;
display: block;
.CodeMirror, #cme_toolbox {
display: none;
@page {
margin: 0;
size: landscape;
}
* {
visibility: hidden;
height: auto;
max-height: none;
}
.cp-app-slide-viewer #cp-app-slide-print {
// Slide app
body.cp-app-slide {
display: block;
visibility: visible;
* {
visibility: visible;
.CodeMirror, #cme_toolbox {
display: none;
}
* {
visibility: hidden;
height: auto;
max-height: none;
}
.cp-app-slide-viewer #cp-app-slide-print {
display: block;
visibility: visible;
* {
visibility: visible;
}
}
.cp-app-slide-viewer #cp-app-slide-modal {
display: none !important;
}
.cp-app-slide-viewer {
flex: 1 !important;
overflow: visible !important;
}
.cp-toolbar-userlist-drawer {
display: none !important;
}
#cp-app-slide-editor {
height: auto;
display: block;
}
}
.cp-app-slide-viewer #cp-app-slide-modal {
display: none !important;
}
.cp-app-slide-viewer {
flex: 1 !important;
overflow: visible !important;
}
.cp-toolbar-userlist-drawer {
display: none !important;
}
#cp-app-slide-editor {
height: auto;
display: block;
}
}
}
}
}

69
customize.dist/src/less2/include/avatar.less
View File

@@ -1,40 +1,45 @@
@import (reference) "./tools.less";
.avatar_main(@width) {
--LessLoader_require: LessLoader_currentFile();
.avatar_main (@width) {
--avatar-width: @width;
--avatar-font-size: @width / 1.2;
}
& {
&.cp-avatar {
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
display: flex;
align-items: center;
.cp-avatar-default, media-tag {
display: inline-flex;
width: @width;
height: @width;
justify-content: center;
align-items: center;
border-radius: 4px;
overflow: hidden;
box-sizing: content-box;
}
.cp-avatar-default {
.tools_unselectable();
background: white;
color: black;
font-size: @width/1.2;
}
media-tag {
min-height: @width;
min-width: @width;
max-height: @width;
max-width: @width;
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
text-overflow: ellipsis;
font-size: 16px;
display: flex;
align-items: center;
.cp-avatar-default, media-tag {
display: inline-flex;
width: var(--avatar-width);
height: var(--avatar-width);
justify-content: center;
align-items: center;
border-radius: 4px;
overflow: hidden;
box-sizing: content-box;
}
.cp-avatar-default {
.tools_unselectable();
background: white;
color: black;
font-size: var(--avatar-font-size);
}
media-tag {
min-height: var(--avatar-width);
min-width: var(--avatar-width);
max-height: var(--avatar-width);
max-width: var(--avatar-width);
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
}
}
}
}
}

36
customize.dist/src/less2/include/checkmark.less
View File

@@ -1,11 +1,17 @@
@import (reference) "./colortheme-all.less";
.checkmark_main(@size) {
--LessLoader_require: LessLoader_currentFile();
@width: round(@size / 8);
--checkmark-size: @size;
--checkmark-width: round(@size / 8);
@dim1: round(@size / 3);
@dim2: round(2 * @size / 3);
@top: round(@size / 12) - 1;
--checkmark-dim1: round(@size / 3);
--checkmark-dim2: round(2 * @size / 3);
--checkmark-top: round(@size / 12) - 1;
--checkmark-radio-size: @dim1 * 3;
}
& {
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark {
margin: 0;
@@ -58,8 +64,8 @@
.cp-checkmark-mark {
margin-right: 10px;
position: relative;
height: @size;
width: @size;
height: var(--checkmark-size);
width: var(--checkmark-size);
background-color: @colortheme_checkmark-back0;
display: flex;
justify-content: center;
@@ -68,12 +74,12 @@
&:after {
content: "";
display: none;
margin-top: @top;
width: @dim1;
height: @dim2;
margin-top: var(--checkmark-top);
width: var(--checkmark-dim1);
height: var(--checkmark-dim2);
transform: rotate(45deg);
border: solid @colortheme_checkmark-col1;
border-width: 0 @width @width 0;
border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
position: absolute;
}
&:focus {
@@ -129,12 +135,12 @@
}
}
@radio-size: @dim1 * 3;
.cp-radio-mark {
margin-right: 10px;
position: relative;
height: @radio-size;
width: @radio-size;
height: var(--checkmark-radio-size);
width: var(--checkmark-radio-size);
background-color: @colortheme_checkmark-back0;
border-radius: 50%;
display: flex;
@@ -147,12 +153,12 @@
content: "";
border-radius: 50%;
background: white;
width: @dim1;
height: @dim1;
width: var(--checkmark-dim1);
height: var(--checkmark-dim1);
//transform: rotate(45deg);
//border: solid @colortheme_checkmark-col1;
//border-width: 0 @width @width 0;
//border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
}
&:focus {
//border-color: #FF007C !important;

16
customize.dist/src/less2/include/creation.less
View File

@@ -1,3 +1,4 @@
@import (reference) "./browser.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./tools.less";
@import (reference) './icon-colors.less';
@@ -7,6 +8,13 @@
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
) {
--LessLoader_require: LessLoader_currentFile();
--creation-color: @color;
--creation-bg-color: @bg-color;
// --creation-warn-color: @warn-color; // unused
}
& {
@colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
@@ -259,10 +267,10 @@
border: 1px solid transparent;
&.cp-creation-template-selected {
color: @color !important;
background-color: @bg-color !important;
color: var(--creation-color) !important;
background-color: var(--creation-bg-color) !important;
.fa {
color: @color;
color: var(--creation-color);
}
}
@@ -293,7 +301,7 @@
max-width: 100%;
}
.fa {
color: @bg-color;
color: var(--creation-bg-color);
cursor: pointer;
width: 100px;
height: 100px;

3
customize.dist/src/less2/include/dropdown.less
View File

@@ -3,6 +3,9 @@
/* The container <div> - needed to position the dropdown content */
.dropdown_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-dropdown-container {
@dropdown_font: @colortheme_app-font-size @colortheme_font;
position: relative;

6
customize.dist/src/less2/include/fileupload.less
View File

@@ -2,8 +2,11 @@
@import (reference) './modal.less';
.fileupload_main () {
--LessLoader_require: LessLoader_currentFile();
.modal_main();
}
& {
/* Upload status table */
modal_main();
#cp-fileupload {
.modal_base();
position: absolute;
@@ -55,4 +58,3 @@
}
}
}

16
customize.dist/src/less2/include/font.less
View File

@@ -1,9 +1,11 @@
.font_neuropolitical () {
@font-face {
font-family: Neuropolitical;
src: url("/customize/fonts/neuropolitical.ttf");
}
.font_main () {
--LessLoader_require: LessLoader_currentFile();
}
.font_open-sans () {
@import (once) '/customize/fonts/open-sans.less';
// Fonts need to go on the global scope
@font-face {
font-family: Neuropolitical;
src: url("/customize/fonts/neuropolitical.ttf");
}
@import (once) '/customize/fonts/open-sans.less';

29
customize.dist/src/less2/include/framework.less
View File

@@ -7,15 +7,27 @@
@import (reference) './tippy.less';
@import (reference) "./checkmark.less";
@import (reference) "./password-input.less";
@import (reference) './font.less';
@import (reference) "./app-print.less";
@import (reference) "./app-noscroll.less";
.framework_main(@bg-color, @warn-color, @color) {
--LessLoader_require: LessLoader_currentFile();
// Set the HTML style for the apps which shouldn't have a body scrollbar
.app-noscroll_main();
// Set the HTML style for printing slides
.app-print_main();
.font_main();
.toolbar_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@color: @color
);
.fileupload_main();
.alertify_main();
.fileupload_main();
.tokenfield_main();
.tippy_main();
.checkmark_main(20px);
@@ -26,13 +38,22 @@
@color: @color
);
font: @colortheme_app-font;
}
};
.framework_min_main(
@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
) {
--LessLoader_require: LessLoader_currentFile();
// Set the HTML style for the apps which shouldn't have a body scrollbar
.app-noscroll_main();
// Set the HTML style for printing slides
.app-print_main();
.font_main();
.toolbar_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@@ -46,4 +67,6 @@
font: @colortheme_app-font;
}
& {
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
}

19
customize.dist/src/less2/include/help.less
View File

@@ -1,9 +1,17 @@
@import (reference) "./colortheme-all.less";
.help_main (@color, @bg-color) {
--LessLoader_require: LessLoader_currentFile();
--help-bg-color-l15: lighten(@bg-color, 15%);
--help-bg-color-spin: spin(@bg-color, 180);
--help-bg-color-spin-d10: darken(spin(@bg-color, 180), 10%);
--help-bg-color-spin-l10: lighten(spin(@bg-color, 180), 10%);
}
& {
.cp-help-container {
position: relative;
background-color: lighten(@bg-color, 15%);
background-color: var(--help-bg-color-l15);
&.cp-help-hidden {
display: none;
}
@@ -14,14 +22,13 @@
right: 5px;
}
.cp-help-text {
color: contrast(lighten(@bg-color, 15%), #fff, #000); //@color;
color: contrast(var(--help-bg-color-l15), #fff, #000); //@color;
margin: 0;
padding: 15px;
a {
//color: darken(@colortheme_link-color, 30%);
@spin: spin(lighten(@bg-color, 15%), 180);
color: contrast(lighten(@bg-color, 15%), lighten(@spin, 10%), darken(@spin, 10%));
//color: darken(spin(lighten(@bg-color, 15%), 180), 10%);
color: contrast(var(--help-bg-color-l15), var(--help-bg-color-spin-l10), var(--help-bg-color-spin-d10));
//color: darken(spin(var(--help-bg-color-l15), 180), 10%);
}
h1 {
font-size: 20px;
@@ -35,4 +42,4 @@
ul, ol, p { margin: 0; }
}
}
}
}

3
customize.dist/src/less2/include/icon-colors.less
View File

@@ -1,5 +1,8 @@
@import (reference) "./colortheme-all.less";
.iconColors_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
// Classes used in common-interface.js
.cp-icon-color-pad { color: @colortheme_pad-bg; }
.cp-icon-color-code { color: @colortheme_code-bg; }

3
customize.dist/src/less2/include/icons.less
View File

@@ -38,5 +38,4 @@
}
}
}
}
}

155
customize.dist/src/less2/include/infopages.less
View File

@@ -1,10 +1,25 @@
@import (reference) "./colortheme-all.less";
@import (reference) "./font.less";
@infopages_infobar-height: 64px;
@infopages_padding: 32px;
.infopages_link () {
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
// Basic setup for info pages, this should be used at the global level
.infopages_main () {
--LessLoader_require: LessLoader_currentFile();
}
body {
.font_main();
@infopages_infobar-height: 64px;
@infopages_padding: 32px;
// Basic setup for info pages, this should be used at the global level
background-color: @colortheme_info-background;
a {
color: @cryptpad_color_blue;
@@ -100,20 +115,8 @@
border-top: 2px solid #fff;
}
}
};
.infopages_link () {
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
// Apply this to the top bar div
.infopages_topbar () {
// Apply this to the top bar div
.cp-topbar {
background: #fff;
z-index: 10000; //Z infopage toolbar
@@ -149,71 +152,71 @@
margin-right: 0.5em;
}
}
}
// navigation top bar
.navbar {
background: #fff;
.navbar-brand {
display: block;
background-image: url(/customize/CryptPad_logo_color.svg);
background-repeat: no-repeat;
background-size: contain;
height: 50px;
width: 250px;
@media (max-width: 326px) {
width: 180px;
// navigation top bar
.navbar {
background: #fff;
.navbar-brand {
display: block;
background-image: url(/customize/CryptPad_logo_color.svg);
background-repeat: no-repeat;
background-size: contain;
height: 50px;
width: 250px;
@media (max-width: 326px) {
width: 180px;
}
margin-right: 0;
}
margin-right: 0;
}
a {
border: 2px solid transparent;
white-space: nowrap;
}
.nav-link {
padding: 0.5em 0.7em;
&:hover {
color: @cryptpad_color_light_blue;
a {
border: 2px solid transparent;
white-space: nowrap;
}
.nav-link {
padding: 0.5em 0.7em;
&:hover {
color: @cryptpad_color_light_blue;
}
}
.cp-register-btn {
border: 2px solid #4591C4;
display: inline-block;
}
button:focus {
outline: none;
}
.navbar-toggler {
margin-top: 10px;
color: #4591C4;
}
}
.cp-register-btn {
border: 2px solid #4591C4;
display: inline-block;
}
button:focus {
outline: none;
}
.navbar-toggler {
margin-top: 10px;
color: #4591C4;
}
}
@media (max-width: 1000px) {
#menuCollapse {
text-align: right;
/* @media (min-width: 576px) {
top: 100%;
background: rgba(255,255,255,0.8);
position: absolute;
right: 0px;
padding: 0 20px;
z-index: 1;
@media (max-width: 1000px) {
#menuCollapse {
text-align: right;
/* @media (min-width: 576px) {
top: 100%;
background: rgba(255,255,255,0.8);
position: absolute;
right: 0px;
padding: 0 20px;
z-index: 1;
}
*/
}
.navbar-nav a {
text-align: right !important;
}
.cp-register-btn {
margin-right: 13px;
text-align: center;
}
*/
}
.navbar-nav a {
text-align: right !important;
}
.cp-register-btn {
margin-right: 13px;
text-align: center;
}
}
//footer general styles
//footer general styles
.footer-title {
font-weight: bold;
font-size: 1.2em;
color: #1E1F1F;
}
.footer-title {
font-weight: bold;
font-size: 1.2em;
color: #1E1F1F;
}
}

3
customize.dist/src/less2/include/limit-bar.less
View File

@@ -1,6 +1,9 @@
@import (reference) "./colortheme-all.less";
.limit-bar_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-limit-container {
@colortheme_green: #5cb85c;
display: inline-flex;

20
customize.dist/src/less2/include/markdown-toolbar.less
View File

@@ -1,20 +0,0 @@
@import (reference) "./colortheme-all.less";
.markdownToolbar_main (@color, @bg-color) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
}
}

27
customize.dist/src/less2/include/markdown.less
View File

@@ -1,3 +1,15 @@
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
// todo ul, ol
}
.markdown_preformatted-code (@color: #333) {
pre > code {
display: block;
@@ -21,17 +33,4 @@
}
}
}
}
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
}
// todo ul, ol
}

3
customize.dist/src/less2/include/modal.less
View File

@@ -18,6 +18,9 @@
}
.modal_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-modal-container {
display: none;

3
customize.dist/src/less2/include/password-input.less
View File

@@ -1,4 +1,7 @@
.password_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-password-container {
display: flex;
align-items: center;

16
customize.dist/src/less2/include/sidebar-layout.less
View File

@@ -1,18 +1,22 @@
@import (reference) "/customize/src/less2/include/colortheme-all.less";
@import (reference) "/customize/src/less2/include/leftside-menu.less";
@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;
@sidebar_button-width: 400px;
.sidebar-layout_main() {
--LessLoader_require: LessLoader_currentFile();
// This is way too broad to put in the global scope
input[type="text"], input[type="password"] {
padding-left: 10px;
}
}
& {
@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;
#cp-sidebarlayout-container {
font-size: 16px;
display: flex;

3
customize.dist/src/less2/include/tippy.less
View File

@@ -1,6 +1,9 @@
@import (reference) './colortheme-all.less';
.tippy_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */
background-color: white;

3
customize.dist/src/less2/include/tokenfield.less
View File

@@ -1,6 +1,9 @@
@import (reference) "./tools.less";
.tokenfield_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.ui-autocomplete {
z-index: 100001; // alertify + 1
}

3
customize.dist/src/less2/include/toolbar-history.less
View File

@@ -1,6 +1,9 @@
@import (reference) "./colortheme-all.less";
.history_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-toolbar-history {
display: none;
text-align: center;

124
customize.dist/src/less2/include/toolbar.less
View File

@@ -8,7 +8,6 @@
@import (reference) "./tools.less";
@import (reference) "./icons.less";
@import (reference) "./modal.less";
@import (reference) "./markdown-toolbar.less";
@import (reference) "./help.less";
.toolbar_main (
@@ -17,7 +16,37 @@
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
@barWidth: 600px // width of the toolbar
) {
--LessLoader_require: LessLoader_currentFile();
--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;
@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_line-height: 32px;
@toolbar_top-height: 64px;
@toolbar_button-font: @colortheme_app-font;
@@ -26,13 +55,24 @@
// 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);
.modal_main();
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: var(--toolbar-bg-color-l20);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: var(--toolbar-color);
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: var(--toolbar-bg-color-l8);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-container {
display: flex;
@@ -66,7 +106,7 @@
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
background-color: var(--toolbar-bg-color);
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
width: 175px;
@@ -254,31 +294,31 @@
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;
background-color: var(--toolbar-bg-color);
color: var(--toolbar-color);
.cp-toolbar-userlist-drawer-close {
color: @color;
color: var(--toolbar-color);
}
h2 {
background-color: darken(@bg-color, 10%);
color: @color;
background-color: var(--toolbar-bg-color-d10);
color: var(--toolbar-color);
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
background-color: var(--toolbar-bg-color-d10);
color: var(--toolbar-color);
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
color: contrast(var(--toolbar-color),
var(--toolbar-color-l20),
var(--toolbar-color-d20));
background: transparent;
&:hover {
color: @color;
color: var(--toolbar-color);
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
color: var(--toolbar-color-d15);
}
}
}
@@ -298,8 +338,8 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: @bg-color;
color: @color;
background-color: var(--toolbar-bg-color);
color: var(--toolbar-color);
.fa {
font: normal normal normal 14px/1 FontAwesome;
@@ -517,42 +557,42 @@
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @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 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
color: var(--toolbar-warn-color);
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bg-color, 8%);
background-color: var(--toolbar-bg-color-l8);
button:hover, button.cp-toolbar-button-active {
background-color: @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 var(--toolbar-bg-color-d15);
background: var(--toolbar-bg-color-d10);
transition: all 0.15s;
color: @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 var(--toolbar-bg-color-d15);
background: var(--toolbar-bg-color-d10);
color: var(--toolbar-color);
&:hover {
background: darken(@bg-color, 5%);
background: var(--toolbar-bg-color-d5);
}
}
input {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
border: 1px solid var(--toolbar-bg-color-d15);
background: var(--toolbar-bg-color-d10);
color: var(--toolbar-color);
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
@@ -578,7 +618,7 @@
padding: 0;
margin: 0 5px;
font-size: @colortheme_app-font-size;
color: @warn-color;
color: var(--toolbar-warn-color);
.cp-pnp-msg {
padding-left: 5px;
font-family: @colortheme_font;
@@ -587,7 +627,7 @@
font-size: @colortheme_app-font-size;
font-family: @colortheme_font;
font-weight: bold;
color: @warn-color;
color: var(--toolbar-warn-color);
&:hover {
text-decoration: underline;
}
@@ -881,7 +921,7 @@
display: flex;
min-height: @toolbar_line-height;
overflow: hidden;
@media screen and (max-width: @barWidth) { // 450px
@media screen and (max-width: var(--toolbar-barWidth)) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
@@ -1004,6 +1044,4 @@
}
}
}
}
};