|
|
|
@ -10,27 +10,52 @@ |
|
|
|
@import (reference) "./modal.less"; |
|
|
|
@import (reference) "./help.less"; |
|
|
|
|
|
|
|
.toolbar_main ( |
|
|
|
.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 |
|
|
|
@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, // Color of the text for the toolbar |
|
|
|
@bg-color, // color of the toolbar background |
|
|
|
@warn-color, // 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-color: @color; |
|
|
|
--toolbar-color-l20: lighten(@color, 20%); |
|
|
|
--toolbar-color-d20: darken(@color, 20%); |
|
|
|
--toolbar-color-d15: darken(@color, 15%); |
|
|
|
--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-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: @toolbar-warn-color; |
|
|
|
|
|
|
|
--toolbar-warn-color: @warn-color; |
|
|
|
--toolbar-userlist-name-edit: @toolbar-userlist-name-edit; |
|
|
|
|
|
|
|
@media screen and (max-width: @barWidth) { |
|
|
|
.cp-toolbar-rightside { |
|
|
|
@ -47,6 +72,7 @@ |
|
|
|
.modal_main(); |
|
|
|
}; |
|
|
|
& { |
|
|
|
.toolbar_vars(); |
|
|
|
@toolbar_line-height: 32px; |
|
|
|
@toolbar_top-height: 64px; |
|
|
|
@toolbar_button-font: @colortheme_app-font; |
|
|
|
@ -59,15 +85,18 @@ |
|
|
|
|
|
|
|
.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; } |
|
|
|
@ -106,6 +135,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.cp-toolbar-userlist-drawer { |
|
|
|
background-color: @toolbar-bg-color; |
|
|
|
background-color: var(--toolbar-bg-color); |
|
|
|
font: @colortheme_app-font-size @colortheme_font; |
|
|
|
min-width: 175px; |
|
|
|
@ -294,30 +324,38 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.cp-toolbar-userlist-drawer { |
|
|
|
background-color: @toolbar-bg-color; |
|
|
|
background-color: var(--toolbar-bg-color); |
|
|
|
color: @toolbar-color; |
|
|
|
color: var(--toolbar-color); |
|
|
|
.cp-toolbar-userlist-drawer-close { |
|
|
|
color: @toolbar-color; |
|
|
|
color: var(--toolbar-color); |
|
|
|
} |
|
|
|
h2 { |
|
|
|
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: @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(var(--toolbar-color), |
|
|
|
var(--toolbar-color-l20), |
|
|
|
var(--toolbar-color-d20)); |
|
|
|
color: @toolbar-userlist-name-edit; |
|
|
|
color: var(--toolbar-userlist-name-edit); |
|
|
|
background: transparent; |
|
|
|
&:hover { |
|
|
|
color: @toolbar-color; |
|
|
|
color: var(--toolbar-color); |
|
|
|
} |
|
|
|
} |
|
|
|
.cp-toolbar-userlist-friend { |
|
|
|
&:hover { |
|
|
|
color: @toolbar-color-d15; |
|
|
|
color: var(--toolbar-color-d15); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -338,7 +376,9 @@ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-between; |
|
|
|
background-color: @toolbar-bg-color; |
|
|
|
background-color: var(--toolbar-bg-color); |
|
|
|
color: @toolbar-color; |
|
|
|
color: var(--toolbar-color); |
|
|
|
|
|
|
|
.fa { |
|
|
|
@ -557,24 +597,32 @@ |
|
|
|
|
|
|
|
.cp-toolbar-spinner { |
|
|
|
font-size: @colortheme_app-font-size; |
|
|
|
color: @toolbar-color; |
|
|
|
color: var(--toolbar-color); |
|
|
|
} |
|
|
|
.cp-toolbar-limit { |
|
|
|
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: @toolbar-bg-color-l8; |
|
|
|
background-color: var(--toolbar-bg-color-l8); |
|
|
|
button:hover, button.cp-toolbar-button-active { |
|
|
|
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 @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: @toolbar-color; |
|
|
|
color: var(--toolbar-color); |
|
|
|
} |
|
|
|
.cp-toolbar-title-editable { |
|
|
|
@ -582,16 +630,23 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
.cp-toolbar-title-save { |
|
|
|
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: @toolbar-bg-color-d5; |
|
|
|
background: var(--toolbar-bg-color-d5); |
|
|
|
} |
|
|
|
} |
|
|
|
input { |
|
|
|
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 { |
|
|
|
@ -618,6 +673,7 @@ |
|
|
|
padding: 0; |
|
|
|
margin: 0 5px; |
|
|
|
font-size: @colortheme_app-font-size; |
|
|
|
color: @toolbar-warn-color; |
|
|
|
color: var(--toolbar-warn-color); |
|
|
|
.cp-pnp-msg { |
|
|
|
padding-left: 5px; |
|
|
|
@ -627,6 +683,7 @@ |
|
|
|
font-size: @colortheme_app-font-size; |
|
|
|
font-family: @colortheme_font; |
|
|
|
font-weight: bold; |
|
|
|
color: @toolbar-warn-color; |
|
|
|
color: var(--toolbar-warn-color); |
|
|
|
&:hover { |
|
|
|
text-decoration: underline; |
|
|
|
@ -921,11 +978,6 @@ |
|
|
|
display: flex; |
|
|
|
min-height: @toolbar_line-height; |
|
|
|
overflow: hidden; |
|
|
|
@media screen and (max-width: var(--toolbar-barWidth)) { // 450px |
|
|
|
flex-wrap: wrap; |
|
|
|
height: auto; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
&:empty { |
|
|
|
min-height: 0; |
|
|
|
height: 0; |
|
|
|
|