313 lines
13 KiB
Plaintext
313 lines
13 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-toolbar-ie;
|
|
background-color: @background-toolbar;
|
|
|
|
&.always-visible-x {
|
|
bottom: 0px;
|
|
height: 9px;
|
|
|
|
background-color: @background-toolbar-ie;
|
|
background-color: @background-toolbar;
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVChTY6AfOH/+/H9SaSYQg1RAlqZhCT5+/AgOSlJoOgY50DqSNZJhEwMDACkvNZLpune5AAAAAElFTkSuQmCC');
|
|
background-repeat: no-repeat;
|
|
|
|
@media
|
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
|
only screen and (min-resolution: 2dppx),
|
|
only screen and (min-resolution: 192dpi) {
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAMAAABIzV/hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///+KwXX0AAAABdFJOUwBA5thmAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAANklEQVQoU93IoREAQAjEwOu/OWqhg1dBBYv4zKxJLqtayYIsyIIsyBqf1r2SBVmQBVmQNa5KHuCckwGi77ddAAAAAElFTkSuQmCC');
|
|
background-size: auto 14px;
|
|
}
|
|
|
|
background-position: center 0;
|
|
.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 {
|
|
.ps-scrollbar-x {
|
|
&.always-visible-x {
|
|
background-color: @canvas-scroll-thumb-hover-ie;
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
background-position: center -7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.in-scrolling {
|
|
.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;
|
|
background-position: center -7px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-toolbar-ie;
|
|
background-color: @background-toolbar;
|
|
|
|
&.always-visible-y {
|
|
right: 0px;
|
|
width: 9px;
|
|
|
|
background-color: @background-toolbar-ie;
|
|
background-color: @background-toolbar;
|
|
.background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);
|
|
|
|
.pixel-ratio__1_5 & {
|
|
//background-image: ~"url(@{common-image-const-path}/controls/Scroll_center@1.5x.png)";
|
|
background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAATAgMAAAAG1X4lAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABNJREFUeNpjYAx14FrFgAboLAgAVgQJB86JyMQAAAAASUVORK5CYII=');
|
|
background-size: 15px auto;
|
|
}
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
.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-toolbar-additional-ie;
|
|
background-color: @background-toolbar-additional;
|
|
|
|
.ps-scrollbar-y {
|
|
&.always-visible-y {
|
|
background-color: @canvas-scroll-thumb-hover-ie;
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
background-position: -7px center;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.in-scrolling {
|
|
background-color: @background-toolbar-additional-ie;
|
|
background-color: @background-toolbar-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;
|
|
background-position: -7px center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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) {
|
|
.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;
|
|
}
|
|
.scroll-images(@background-svg-fill,@background-svg-fill-hover){
|
|
&::-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 {
|
|
height: 14px;
|
|
width: 14px;
|
|
border: @scaled-one-px-value solid @canvas-background;
|
|
&: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);
|
|
|
|
&:hover {
|
|
.arrow-left(@background-svg-fill-hover);
|
|
}
|
|
}
|
|
&:increment {
|
|
.arrow-right(@background-svg-fill);
|
|
|
|
&:hover {
|
|
.arrow-right(@background-svg-fill-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea,.brouse-scroll {
|
|
|
|
overflow: auto;
|
|
|
|
scrollbar-color: @background-toolbar @canvas-background; //mozila
|
|
/*explorer*/
|
|
scrollbar-track-color: @canvas-background;
|
|
scrollbar-face-color: @background-toolbar-ie;
|
|
scrollbar-arrow-color: @canvas-scroll-thumb-hover-ie;
|
|
scrollbar-base-color: @border-toolbar-ie;
|
|
/*------------------------------------*/
|
|
|
|
cursor: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
cursor: default;
|
|
height: 14px;
|
|
width: 14px;
|
|
background-color: @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-color: @canvas-background;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb, &::-webkit-scrollbar-button {
|
|
cursor: default;
|
|
box-shadow: inset 0px 0px 0px 1px @border-toolbar;
|
|
border-right: @scaled-one-px-value solid @canvas-background;
|
|
-webkit-border-radius: 0.2ex;
|
|
background-color: @background-toolbar;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
&:hover {
|
|
background-color: @canvas-scroll-thumb-hover;
|
|
box-shadow: inset 0px 0px 0px 1px @canvas-scroll-thumb-border-hover;
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--canvas-scroll-thumb-pressed);
|
|
}
|
|
}
|
|
&::-webkit-scrollbar-button {
|
|
height: 14px;
|
|
width: 14px;
|
|
border: @scaled-one-px-value solid @canvas-background;
|
|
&:vertical {
|
|
border-left-width: 0;
|
|
height: 15px;
|
|
}
|
|
&:horizontal {
|
|
border-top-width: 0;
|
|
width: 15px;
|
|
}
|
|
}
|
|
.scroll-images(#adadad,#f7f7f7);
|
|
}
|
|
.theme-dark{
|
|
textarea,.brouse-scroll
|
|
{
|
|
.scroll-images(#999,#404040);
|
|
}
|
|
|
|
}
|
|
|