432 lines
17 KiB
Plaintext
432 lines
17 KiB
Plaintext
.ps-container.oo {
|
|
.ps-scrollbar-x-rail {
|
|
z-index: 1;
|
|
bottom: 1px;
|
|
height: 9px;
|
|
margin-right: 1px;
|
|
margin-left: 1px;
|
|
|
|
&.always-visible-x {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.ps-scrollbar-x {
|
|
background-color: @background-pane-ie;
|
|
background-color: @background-pane;
|
|
|
|
&.always-visible-x {
|
|
bottom: 0px;
|
|
height: 9px;
|
|
|
|
background-color: @background-pane-ie;
|
|
background-color: @background-pane;
|
|
|
|
div {
|
|
display: block;
|
|
height: 100%;
|
|
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVChTY6AfOH/+/H9SaSYQg1RAlqZhCT5+/AgOSlJoOgY50DqSNZJhEwMDACkvNZLpune5AAAAAElFTkSuQmCC');
|
|
background-repeat: no-repeat;
|
|
background-position: center 0;
|
|
|
|
.pixel-ratio__1_25 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAOklEQVR4nGJioBBQbsD58+f/wzjksAeBFyg1gGIw8F4YBAZ8/PgRnjDIYQ8CL1BqAMWAYhcAAgAA///oxiuTlVHD9AAAAABJRU5ErkJggg==');
|
|
background-size: auto 14px;
|
|
background-position: center @scaled-one-px-value;
|
|
}
|
|
|
|
.pixel-ratio__1_5 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAYAAADpwXTaAAAAPElEQVR4nGJioCIYxIadP3/+P4xDKXsQe3NkGEZVMHi9OYgN+/jxIzxLUMoexN4cGYZRFQxebwICAAD//4jOMt1BEBZ2AAAAAElFTkSuQmCC');
|
|
background-size: auto 15px;
|
|
}
|
|
|
|
.pixel-ratio__1_75 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAZCAYAAAA14t7uAAAAT0lEQVR4nGJioBEYNRgOWM6fP/8fxDA0NGQE0dTiD72gGHoG0wwMvaAYNZj2BrN8/PgRnLf5+fnBeZ1a/KEXFEPPYJqBoRcUNDMYEAAA//+u9y9xdUo+pAAAAABJRU5ErkJggg==');
|
|
background-size: auto 14px;
|
|
}
|
|
|
|
.pixel-ratio__2 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAYAAAB/E6/TAAAAUElEQVR4nGJioBMYtYhswHL+/Pn/IIahoSEjiKYVf/gF3ahFgx8Mv6AbtWjUIjhg+fjxI7h05efnB5e2tOIPv6AbtWjwg+EXdHSzCBAAAP//nKY3dwCCOM8AAAAASUVORK5CYII=');
|
|
background-size: auto 14px;
|
|
}
|
|
|
|
.pixel-ratio__2_5 & {
|
|
-webkit-mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTMgNyI+DQogICAgPHBhdGggZD0iTTAsNWwwLTNoMXYzSDB6IE0yLDVWMmgxdjNIMnogTTQsNVYyaDF2M0g0eiBNNiw1VjJoMXYzSDZ6IE04LDVWMmgxdjNIOHogTTEwLDVWMmgxdjNIMTB6IE0xMiw1VjJoMXYzSDEyeiIvPg0KPC9zdmc+DQo=');
|
|
background-color: @canvas-scroll-arrow;
|
|
|
|
background-image: none;
|
|
-webkit-mask-size: 13px 7px;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
|
|
mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTMgNyI+DQogICAgPHBhdGggZD0iTTAsNWwwLTNoMXYzSDB6IE0yLDVWMmgxdjNIMnogTTQsNVYyaDF2M0g0eiBNNiw1VjJoMXYzSDZ6IE04LDVWMmgxdjNIOHogTTEwLDVWMmgxdjNIMTB6IE0xMiw1VjJoMXYzSDEyeiIvPg0KPC9zdmc+DQo=');
|
|
mask-size: 13px 7px;
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.border-radius(2px);
|
|
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
|
|
border: @scaled-one-px-value solid @border-regular-control;
|
|
-o-transition: background-color .2s linear;
|
|
-webkit-transition: background-color .2s linear;
|
|
-moz-transition: background-color .2s linear;
|
|
transition: background-color .2s linear;
|
|
}
|
|
}
|
|
|
|
&:hover, .hover {
|
|
background-color: @background-pane-additional-ie;
|
|
background-color: @background-pane-additional;
|
|
|
|
.ps-scrollbar-x {
|
|
&.always-visible-x {
|
|
background-color: @canvas-scroll-thumb-hover-ie;
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
|
|
div {
|
|
background-position: center -7px;
|
|
.pixel-ratio__1_75 & {
|
|
background-position: center -6px;
|
|
}
|
|
|
|
.pixel-ratio__2_5 & {
|
|
background-color: @canvas-scroll-arrow-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.in-scrolling {
|
|
background-color: @background-pane-additional-ie;
|
|
background-color: @background-pane-additional;
|
|
|
|
.ps-scrollbar-x {
|
|
&.always-visible-x {
|
|
background-color: @canvas-scroll-thumb-hover-ie;
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
border-color: @canvas-scroll-thumb-border-hover-ie;
|
|
border-color: @canvas-scroll-thumb-border-hover;
|
|
|
|
div {
|
|
background-position: center -7px;
|
|
.pixel-ratio__1_75 & {
|
|
background-position: center -6px;
|
|
}
|
|
|
|
.pixel-ratio__2_5 & {
|
|
background-color: @canvas-scroll-arrow-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ps-scrollbar-y-rail {
|
|
z-index: 1;
|
|
right: 1px;
|
|
width: 9px;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
|
|
&.always-visible-y {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.ps-scrollbar-y {
|
|
background-color: @background-pane-ie;
|
|
background-color: @background-pane;
|
|
|
|
&.always-visible-y {
|
|
right: 0px;
|
|
width: 9px;
|
|
|
|
background-color: @background-pane-ie;
|
|
background-color: @background-pane;
|
|
|
|
div {
|
|
display: block;
|
|
height: 100%;
|
|
|
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC');
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
|
|
.pixel-ratio__1_25 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgB7c87FQAgDEPRVkG11L+IaIkCWPgzc1hy5wx5bg2AYovMdDuQ3DYRcW3+GneUo5zXlDP1nApvZzAH1eXFfwAAAABJRU5ErkJggg==');
|
|
background-size: 14px auto;
|
|
background-position: @scaled-one-px-value center;
|
|
}
|
|
|
|
.pixel-ratio__1_5 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAATAgMAAAAG1X4lAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABNJREFUeNpjYAx14FrFgAboLAgAVgQJB86JyMQAAAAASUVORK5CYII=');
|
|
background-size: 15px auto;
|
|
}
|
|
|
|
.pixel-ratio__1_75 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABFSURBVHgB7dGxDQAgCERRcAFmYf8hmIUJtBZiYeXF3CvJVXyVIiJmvbm7ykFmtr2ZbfshdKH9mk2eYxM8bIKHTfD802QBUw8wE4bLVDsAAAAASUVORK5CYII=');
|
|
background-size: 14px auto;
|
|
background-position: @scaled-one-px-value center;
|
|
}
|
|
|
|
.pixel-ratio__2 & {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAAAAACBP2NVAAAAAnRSTlMAAHaTzTgAAAAfSURBVHgBYwCB82DAAAUfwQDEwi1JERg4O0ftHLUTADyCkwGAuWTrAAAAAElFTkSuQmCC');
|
|
background-size: 14px auto;
|
|
}
|
|
|
|
.pixel-ratio__2_5 & {
|
|
-webkit-mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDcgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMiAwaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyeiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo=');
|
|
background-color: @canvas-scroll-arrow;
|
|
|
|
background-image: none;
|
|
-webkit-mask-size: 7px 13px;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
|
|
mask-image: data-uri('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDcgMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMiAwaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyem0wIDJoM3YxSDJ6bTAgMmgzdjFIMnptMCAyaDN2MUgyeiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPgo=');
|
|
mask-size: 7px 13px;
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.border-radius(2px);
|
|
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
|
|
border: @scaled-one-px-value solid @border-regular-control;
|
|
-o-transition: background-color .2s linear;
|
|
-webkit-transition: background-color .2s linear;
|
|
-moz-transition: background-color .2s linear;
|
|
transition: background-color .2s linear;
|
|
}
|
|
}
|
|
|
|
&:hover, .hover {
|
|
background-color: @background-pane-additional-ie;
|
|
background-color: @background-pane-additional;
|
|
|
|
.ps-scrollbar-y {
|
|
&.always-visible-y {
|
|
background-color: @canvas-scroll-thumb-hover-ie;
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
|
|
div {
|
|
background-position: -7px center;
|
|
.pixel-ratio__1_75 & {
|
|
background-position: -6px center;
|
|
}
|
|
|
|
.pixel-ratio__2_5 & {
|
|
background-color: @canvas-scroll-arrow-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.in-scrolling {
|
|
background-color: @background-pane-additional-ie;
|
|
background-color: @background-pane-additional;
|
|
|
|
.ps-scrollbar-y {
|
|
&.always-visible-y {
|
|
background-color: @canvas-scroll-thumb-hover-ie;
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
border-color: @canvas-scroll-thumb-border-hover-ie;
|
|
border-color: @canvas-scroll-thumb-border-hover;
|
|
|
|
div {
|
|
background-position: -7px center;
|
|
.pixel-ratio__2_5 & {
|
|
background-color: @canvas-scroll-arrow-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ps-container:hover .ps-scrollbar-y-rail,
|
|
.ps-container.hover .ps-scrollbar-y-rail,
|
|
.ps-container .ps-scrollbar-y-rail:hover,
|
|
.ps-container .ps-scrollbar-y-rail.hover,
|
|
.ps-container .ps-scrollbar-y-rail.in-scrolling,
|
|
.ps-container:hover .ps-scrollbar-x-rail,
|
|
.ps-container.hover .ps-scrollbar-x-rail,
|
|
.ps-container .ps-scrollbar-x-rail:hover,
|
|
.ps-container .ps-scrollbar-x-rail.hover,
|
|
.ps-container .ps-scrollbar-x-rail.in-scrolling {
|
|
background-color: transparent !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
|
|
.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: 5;
|
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="13px" stroke ="@{color}" width="@{width}px"><line x1="2.5" y1="0" x2="2.5" y2="13" stroke-width = "@{width}" stroke-dasharray ="1" /></svg>');
|
|
background-image: @-inline-svg-url;
|
|
}
|
|
.img-arrow(@color, @points){
|
|
.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" width="7" height="4" fill="@{color}"><polygon points="@{points}"/></svg>');
|
|
background-image: @-inline-svg-url;
|
|
}
|
|
.img-arrow-top(@color){
|
|
.img-arrow(@color, "3.5,4 0,0 7,0");
|
|
}
|
|
.img-arrow-down(@color){
|
|
.img-arrow(@color, "3.5,0 0,4 7,4");
|
|
}
|
|
|
|
.img-for-theme(@color-arrow-normal, @color-arrow-active, @color-thumb-normal, @color-thumb-active){
|
|
&::-webkit-scrollbar-thumb {
|
|
&:vertical {
|
|
.img-scroll-y(@color-thumb-normal);
|
|
&:hover, &:active {
|
|
.img-scroll-y(@color-thumb-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&::-webkit-scrollbar-button:single-button {
|
|
&:vertical {
|
|
&:increment {
|
|
.img-arrow-top(@color-arrow-normal);
|
|
&:hover, &:active {
|
|
.img-arrow-top(@color-arrow-active);
|
|
}
|
|
}
|
|
&:decrement {
|
|
.img-arrow-down(@color-arrow-normal);
|
|
&:hover, &:active {
|
|
.img-arrow-down(@color-arrow-active);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.webkit-general-style {
|
|
border: @canvas-background @scaled-one-px-value solid;
|
|
&:not(.rtl) { border-left-width: 0; }
|
|
.rtl & { border-right-width: 0; }
|
|
background: var(--canvas-scroll-thumb);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0;
|
|
|
|
&:hover, &:active {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border: @canvas-background @scaled-one-px-value solid;
|
|
&:not(.rtl) { border-left-width: 0; }
|
|
.rtl & { border-right-width: 0; }
|
|
border-radius: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--canvas-scroll-thumb-pressed);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.custom-scrollbar {
|
|
cursor: auto;
|
|
overflow: auto;
|
|
/*explorer*/
|
|
scrollbar-track-color: #eee;
|
|
scrollbar-face-color: #f7f7f7;
|
|
scrollbar-highlight-color: #eee;
|
|
scrollbar-darkshadow-color: @canvas-scroll-thumb-border-hover-ie;
|
|
scrollbar-arrow-color: #adadad;
|
|
/*----------------------------------------------------------*/
|
|
|
|
scrollbar-color: @canvas-scroll-thumb-pressed @canvas-scroll-thumb;
|
|
|
|
&::-webkit-scrollbar {
|
|
height: 14px;
|
|
width: 14px;
|
|
background: @canvas-background;
|
|
|
|
-o-transition: background-color .2s linear;
|
|
-webkit-transition: background-color .2s linear;
|
|
-moz-transition: background-color .2s linear;
|
|
transition: background-color .2s linear;
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner {
|
|
background: @canvas-background;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
border: none;
|
|
background: @canvas-background;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
box-shadow: inset 0px 0px 0px @scaled-one-px-value var(--canvas-scroll-thumb-border);
|
|
filter: none;
|
|
.webkit-general-style();
|
|
&:vertical {
|
|
min-height: 34px;
|
|
}
|
|
}
|
|
|
|
&::-webkit-scrollbar-button:single-button {
|
|
width: 14px;
|
|
height: 14px;
|
|
box-shadow: inset 0px 0px 0px @scaled-one-px-value var(--canvas-scroll-thumb-border);
|
|
background-position: center;
|
|
.webkit-general-style();
|
|
|
|
&:vertical {
|
|
&:increment {
|
|
border-top-width: 0;
|
|
}
|
|
&:decrement {
|
|
background-position-y: calc(3px + @scaled-one-px-value);
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
}
|
|
.img-for-theme("#adadad", "#f7f7f7", "#c0c0c0", "#f7f7f7");
|
|
|
|
|
|
|
|
.theme-classic-light & {
|
|
.img-for-theme("#c0c0c0", "#ececec", "#cfcfcf", "#f1f1f1");
|
|
}
|
|
|
|
.theme-dark & {
|
|
&::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
|
|
&:hover { box-shadow: none; }
|
|
}
|
|
|
|
.img-for-theme("#999999", "#404040", "#999999", "#404040");
|
|
}
|
|
|
|
.theme-contrast-dark & {
|
|
&::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
|
|
&:hover, &:active {
|
|
box-shadow: inset 0px 0px 0px @scaled-one-px-value var(--canvas-scroll-thumb-border);
|
|
}
|
|
}
|
|
.img-for-theme("#7d7d7d", "#8c8c8c", "#717171", "#8c8c8c");
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
.custom-scrollbar();
|
|
}
|