two themes
This commit is contained in:
OVSharova
parent
e63ec8ab8a
commit
73e3df8c1b
|
|
@ -153,10 +153,42 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.inline-svg-code( @code ) {
|
||||||
|
@-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
|
||||||
|
@-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
|
||||||
|
@-inline-svg-url: ~"url('@{-inline-svg-code}')";
|
||||||
|
}
|
||||||
|
.img-scroll-y(@color,@width) {
|
||||||
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{width}px"><rect width = "@{width}" height = "1" x="0" y="0"/><rect width = "@{width}" height = "1" x="0" y="2"/><rect width = "@{width}" height = "1" x="0" y="4"/><rect width = "@{width}" height = "1" x="0" y="6"/><rect width = "@{width}" height = "1" x="0" y="8"/><rect width = "@{width}" height = "1" x="0" y="10"/><rect width = "@{width}" height = "1" x="0" y="12"/></svg>');
|
||||||
|
background-image: @-inline-svg-url;
|
||||||
|
}
|
||||||
|
.img-scroll-x(@color,@height) {
|
||||||
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{height}px"><rect width = "@{height}" height = "1" y="0" x="0"/><rect width = "@{height}" height = "1" y="0" x="2"/><rect width = "@{height}" height = "1" y="0" x="4"/><rect width = "@{height}" height = "1" y="0" x="6"/><rect width = "@{height}" height = "1" y="0" x="8"/><rect width = "@{height}" height = "1" y="0" x="10"/><rect width = "@{height}" height = "1" y="0" x="12"/></svg>');
|
||||||
|
background-image: @-inline-svg-url;
|
||||||
|
}
|
||||||
|
.arrow-top(@color){
|
||||||
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,0 0,4 8,4"/></svg>');
|
||||||
|
background-image: @-inline-svg-url;
|
||||||
|
}
|
||||||
|
.arrow-down(@color){
|
||||||
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,4 0,0 8,0"/></svg>');
|
||||||
|
background-image: @-inline-svg-url;
|
||||||
|
}
|
||||||
|
.arrow-right(@color){
|
||||||
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,0 0,8 4,4"/></svg>');
|
||||||
|
background-image: @-inline-svg-url;
|
||||||
|
}
|
||||||
|
.arrow-left(@color){
|
||||||
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,4 4,8 4,0"/></svg>');
|
||||||
|
background-image: @-inline-svg-url;
|
||||||
|
}
|
||||||
|
|
||||||
textarea,.brouse-scroll {
|
textarea,.brouse-scroll {
|
||||||
@background-svg-fill: #999;
|
@background-svg-fill: #adadad;
|
||||||
@background-svg-fill-hover: #404040;
|
@background-svg-fill-hover: #f7f7f7;
|
||||||
overflow-y: auto;
|
overflow: auto;
|
||||||
|
|
||||||
scrollbar-color: @background-toolbar @canvas-background; //mozila
|
scrollbar-color: @background-toolbar @canvas-background; //mozila
|
||||||
/*explorer*/
|
/*explorer*/
|
||||||
|
|
@ -166,36 +198,6 @@ textarea,.brouse-scroll {
|
||||||
scrollbar-base-color: @border-toolbar-ie;
|
scrollbar-base-color: @border-toolbar-ie;
|
||||||
/*------------------------------------*/
|
/*------------------------------------*/
|
||||||
|
|
||||||
.inline-svg-code( @code ) {
|
|
||||||
@-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
|
|
||||||
@-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
|
|
||||||
@-inline-svg-url: ~"url('@{-inline-svg-code}')";
|
|
||||||
}
|
|
||||||
.img-scroll-y(@color,@width) {
|
|
||||||
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{width}px"><rect width = "@{width}" height = "1" x="0" y="0"/><rect width = "@{width}" height = "1" x="0" y="2"/><rect width = "@{width}" height = "1" x="0" y="4"/><rect width = "@{width}" height = "1" x="0" y="6"/><rect width = "@{width}" height = "1" x="0" y="8"/><rect width = "@{width}" height = "1" x="0" y="10"/><rect width = "@{width}" height = "1" x="0" y="12"/></svg>');
|
|
||||||
background-image: @-inline-svg-url;
|
|
||||||
}
|
|
||||||
.img-scroll-x(@color,@height) {
|
|
||||||
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="14px" fill ="@{color}" width="@{height}px"><rect width = "@{height}" height = "1" y="0" x="0"/><rect width = "@{height}" height = "1" y="0" x="2"/><rect width = "@{height}" height = "1" y="0" x="4"/><rect width = "@{height}" height = "1" y="0" x="6"/><rect width = "@{height}" height = "1" y="0" x="8"/><rect width = "@{height}" height = "1" y="0" x="10"/><rect width = "@{height}" height = "1" y="0" x="12"/></svg>');
|
|
||||||
background-image: @-inline-svg-url;
|
|
||||||
}
|
|
||||||
.arrow-top(@color){
|
|
||||||
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,0 0,4 8,4"/></svg>');
|
|
||||||
background-image: @-inline-svg-url;
|
|
||||||
}
|
|
||||||
.arrow-down(@color){
|
|
||||||
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="4px" fill="@{color}"><polygon points="4,4 0,0 8,0"/></svg>');
|
|
||||||
background-image: @-inline-svg-url;
|
|
||||||
}
|
|
||||||
.arrow-right(@color){
|
|
||||||
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,0 0,8 4,4"/></svg>');
|
|
||||||
background-image: @-inline-svg-url;
|
|
||||||
}
|
|
||||||
.arrow-left(@color){
|
|
||||||
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" width="4px" height="8px" fill="@{color}"><polygon points="0,4 4,8 4,0"/></svg>');
|
|
||||||
background-image: @-inline-svg-url;
|
|
||||||
}
|
|
||||||
|
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
|
|
@ -217,25 +219,17 @@ textarea,.brouse-scroll {
|
||||||
box-shadow: inset 0px 0px 0px 1px @border-toolbar;
|
box-shadow: inset 0px 0px 0px 1px @border-toolbar;
|
||||||
border-right: @scaled-one-px-value solid @canvas-background;
|
border-right: @scaled-one-px-value solid @canvas-background;
|
||||||
-webkit-border-radius: 0.2ex;
|
-webkit-border-radius: 0.2ex;
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-color: @background-toolbar;
|
background-color: @background-toolbar;
|
||||||
-o-transition: background-color .2s linear;
|
|
||||||
-webkit-transition: background-color .2s linear;
|
|
||||||
-moz-transition: background-color .2s linear;
|
|
||||||
transition: background-color .2s linear;
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: @canvas-scroll-thumb-hover;
|
background-color: @canvas-scroll-thumb-hover;
|
||||||
box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover;
|
box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--canvas-scroll-thumb-pressed);
|
background-color: var(--canvas-scroll-thumb-pressed);
|
||||||
//box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
|
|
@ -245,38 +239,108 @@ textarea,.brouse-scroll {
|
||||||
.img-scroll-y(@background-svg-fill-hover, 5);
|
.img-scroll-y(@background-svg-fill-hover, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:horizontal {
|
||||||
|
.img-scroll-x(@background-svg-fill,5);
|
||||||
|
&:hover {
|
||||||
|
.img-scroll-x(@background-svg-fill-hover, 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-button {
|
&::-webkit-scrollbar-button {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
border: @scaled-one-px-value solid @canvas-background;
|
border: @scaled-one-px-value solid @canvas-background;
|
||||||
border-width: 1px 1px 1px 0;
|
&:vertical {
|
||||||
|
border-left-width: 0;
|
||||||
|
height: 15px;
|
||||||
|
&:decrement {
|
||||||
|
.arrow-top(@background-svg-fill);
|
||||||
|
&:hover {
|
||||||
|
.arrow-top(@background-svg-fill-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:increment {
|
||||||
|
.arrow-down(@background-svg-fill);
|
||||||
|
&:hover {
|
||||||
|
.arrow-down(@background-svg-fill-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:horizontal {
|
||||||
|
border-top-width: 0;
|
||||||
|
width: 15px;
|
||||||
|
&:decrement {
|
||||||
|
.arrow-left(@background-svg-fill);
|
||||||
|
|
||||||
&:vertical:decrement {
|
&:hover {
|
||||||
.arrow-top(@background-svg-fill);
|
.arrow-left(@background-svg-fill-hover);
|
||||||
&:hover {
|
}
|
||||||
.arrow-top(@background-svg-fill-hover);
|
|
||||||
}
|
}
|
||||||
}
|
&:increment {
|
||||||
&:vertical:increment {
|
.arrow-right(@background-svg-fill);
|
||||||
.arrow-down(@background-svg-fill);
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.arrow-down(@background-svg-fill-hover);
|
.arrow-right(@background-svg-fill-hover);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
&:horizontal:decrement{
|
|
||||||
.arrow-left(@background-svg-fill);
|
|
||||||
&:hover {
|
|
||||||
.arrow-left(@background-svg-fill-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:horizontal:increment{
|
|
||||||
.arrow-right(@background-svg-fill);
|
|
||||||
&:hover {
|
|
||||||
.arrow-right(@background-svg-fill-hover);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.theme-dark{
|
||||||
|
textarea,.brouse-scroll
|
||||||
|
{
|
||||||
|
@background-svg-fill: #999;
|
||||||
|
@background-svg-fill-hover: #404040;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
&:vertical {
|
||||||
|
.img-scroll-y(@background-svg-fill,5);
|
||||||
|
&:hover {
|
||||||
|
.img-scroll-y(@background-svg-fill-hover, 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:horizontal {
|
||||||
|
.img-scroll-x(@background-svg-fill,5);
|
||||||
|
&:hover {
|
||||||
|
.img-scroll-x(@background-svg-fill-hover, 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-button {
|
||||||
|
&:vertical {
|
||||||
|
&:decrement {
|
||||||
|
.arrow-top(@background-svg-fill);
|
||||||
|
&:hover {
|
||||||
|
.arrow-top(@background-svg-fill-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:increment {
|
||||||
|
.arrow-down(@background-svg-fill);
|
||||||
|
&:hover {
|
||||||
|
.arrow-down(@background-svg-fill-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
&:decrement {
|
||||||
|
.arrow-left(@background-svg-fill);
|
||||||
|
&:hover {
|
||||||
|
.arrow-left(@background-svg-fill-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:horizontal:increment {
|
||||||
|
.arrow-right(@background-svg-fill);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.arrow-right(@background-svg-fill-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue