You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1476 lines
27 KiB
CSS
1476 lines
27 KiB
CSS
@const baseFont: "Segoe UI";
|
|
@const baseFontEmoji: "Segoe UI", "Segoe UI Emoji";
|
|
@const baseFontSize: 9pt;
|
|
|
|
@const indicatorColor: #a6a6a6;
|
|
@const indicatorColorLight: #ddd;
|
|
@const indicatorColorDark: #888;
|
|
|
|
@const warnColor: #A30000;
|
|
@const btnBorderColor: #BBB;
|
|
@const btnBackColor: #E4E4E4;
|
|
@const frameBorderColor: var(frameBorderColor, #ABADB3);
|
|
@media old-windows {
|
|
html {
|
|
var(frameBorderColor): #DADBDC;
|
|
}
|
|
}
|
|
@const ctrlBorderColor: #666;
|
|
@const ctrlBorderColorLight: #999;
|
|
@const greyColor: #E6E6E6;
|
|
@const greyColorLightPressed: #CCCCCC;
|
|
@const greyColorBtnPressed: #B2B2B2;
|
|
@const popupBorderColor: #CCCCCC;
|
|
|
|
@const chatBkgColor: #f6f6f6;
|
|
@const chatBkgColor2: #f0f0f0;
|
|
|
|
@const uwpDown: url(path:M 0 0 L 5 5 L 10 0);
|
|
@const uwpUp: url(path:M 0 5 L 5 0 L 10 5);
|
|
@mixin uwpStroke {
|
|
fill: none !important;
|
|
stroke-width: 1dip;
|
|
stroke: @ctrlBorderColor;
|
|
}
|
|
|
|
@const activeColor: var(activeColor, #666);
|
|
@const activeColorHover: var(activeColorHover, #dadada);
|
|
@const activeColorCurrent: var(activeColorCurrent, #c3c3c3);
|
|
@const activeColorHoverCurrent: var(activeColorHoverCurrent, #b5b5b5);
|
|
@const activeColorLight: var(activeColorLight, #999);
|
|
@const activeColorLighter: var(activeColorLighter, #aaa);
|
|
@const activeColorDark: var(activeColorDark, #333);
|
|
@const inactiveColor: var(inactiveColor, window);
|
|
|
|
@mixin prevnext {
|
|
background: @chatBkgColor;
|
|
fill: #606060;
|
|
}
|
|
@mixin prevnexthover {
|
|
background: #DADADA;
|
|
fill: #000;
|
|
}
|
|
@mixin prevnextactive {
|
|
background: #606060;
|
|
fill: #FFF;
|
|
}
|
|
|
|
@mixin prevnextpage {
|
|
background: @chatBkgColor;
|
|
}
|
|
|
|
@mixin slider {
|
|
background: #CDCDCD;
|
|
}
|
|
@mixin sliderhover {
|
|
background: #A6A6A6;
|
|
}
|
|
@mixin slideractive {
|
|
background: #606060;
|
|
}
|
|
|
|
@set system-v-scrollbar < std-v-scrollbar {
|
|
.prev, .next {
|
|
@prevnext;
|
|
foreground-position-top: 6dip;
|
|
}
|
|
.prev:hover, .next:hover { @prevnexthover; }
|
|
.prev:active, .next:active { @prevnextactive; }
|
|
|
|
.prev-page, .next-page { @prevnextpage; }
|
|
|
|
.slider { @slider; }
|
|
.slider:hover { @sliderhover; }
|
|
.slider:active { @slideractive; }
|
|
}
|
|
@set system-h-scrollbar < std-h-scrollbar {
|
|
.prev, .next { @prevnext; }
|
|
.next { foreground-position-left: 6dip; }
|
|
.prev:hover, .next:hover { @prevnexthover; }
|
|
.prev:active, .next:active { @prevnextactive; }
|
|
|
|
.prev-page, .next-page { @prevnextpage; }
|
|
|
|
.slider { @slider; }
|
|
.slider:hover { @sliderhover; }
|
|
.slider:active { @slideractive; }
|
|
}
|
|
|
|
* {
|
|
vertical-scrollbar: system-v-scrollbar;
|
|
horizontal-scrollbar: system-h-scrollbar;
|
|
}
|
|
|
|
:selected,
|
|
:tab-focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
html[menufade] menu:not(:popup) {
|
|
opacity: 0;
|
|
}
|
|
html[menufade] menu:popup {
|
|
transition: opacity 0.2s cubic-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
body {
|
|
font-family: @baseFont;
|
|
font-size: @baseFontSize;
|
|
}
|
|
|
|
popup {
|
|
border: none;
|
|
border-radius: 1px;
|
|
}
|
|
popup[role="tooltip"],
|
|
popup[role="overflow-tooltip"],
|
|
.customHint {
|
|
background-color: #f2f2f2;
|
|
border: 1dip solid @popupBorderColor;
|
|
border-radius: 1px;
|
|
padding: 2dip 6dip;
|
|
height: 16dip;
|
|
vertical-align: middle;
|
|
font: system;
|
|
margin-top: -5dip;
|
|
}
|
|
popup[role="overflow-tooltip"] {
|
|
font: inherit;
|
|
}
|
|
html[tooltipfade] popup[role="tooltip"],
|
|
html[tooltipfade] popup[role="overflow-tooltip"],
|
|
html[tooltipfade] .customHint {
|
|
opacity: 0;
|
|
}
|
|
html[tooltipfade] popup[role="tooltip"]:popup,
|
|
html[tooltipfade] popup[role="overflow-tooltip"]:popup,
|
|
html[tooltipfade] .customHint:popup {
|
|
transition: opacity 0.2s cubic-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
img {
|
|
foreground-size: auto;
|
|
}
|
|
img:incomplete:not(:busy) {
|
|
background-image: none;
|
|
border: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
option:not(:node) {
|
|
border-radius: 0 !important;
|
|
}
|
|
option:not(:node):hover,
|
|
option:not(:node):current:hover,
|
|
option:node > text:hover,
|
|
option:node > caption:hover,
|
|
option:node:current > text:hover,
|
|
option:node:current > caption:hover {
|
|
foreground-color: transparent !important;
|
|
}
|
|
|
|
menu {
|
|
prototype: FixMenu;
|
|
display: none;
|
|
border-radius: 1px;
|
|
}
|
|
menu li > menu {
|
|
margin: 0;
|
|
}
|
|
menu.measure {
|
|
position: absolute;
|
|
visibility: visible;
|
|
display: block;
|
|
opacity: 0;
|
|
left: -9999dip;
|
|
top: -9999dip;
|
|
}
|
|
menu:popup {
|
|
display: block;
|
|
}
|
|
menu > option, li {
|
|
foreground-color: transparent !important;
|
|
}
|
|
menu > option:current, li:current,
|
|
img.fadingmenuitem {
|
|
background: #DEDEDE;
|
|
}
|
|
img.fadingmenuitem {
|
|
position: absolute;
|
|
border-radius: 1px;
|
|
transition: opacity 0.25s linear;
|
|
opacity: 1;
|
|
}
|
|
img.fadingmenuitem.fadeout {
|
|
opacity: 0;
|
|
}
|
|
menu > li > label {
|
|
aspect: TranslateMenu;
|
|
}
|
|
menu > option:current span.accesskey,
|
|
li:current span.accesskey {
|
|
color: #333;
|
|
}
|
|
menu hr,
|
|
popup#hint hr {
|
|
height: 1dip;
|
|
margin: 3dip 1dip;
|
|
border: none;
|
|
background-color: #BBB;
|
|
}
|
|
|
|
menu.custom li {
|
|
position: relative;
|
|
padding: 5dip 20dip 5dip 29dip;
|
|
vertical-align: middle;
|
|
}
|
|
menu.custom li:has-child-of-type(menu) {
|
|
foreground-size: 6dip 11dip;
|
|
foreground-position-right: 3dip;
|
|
foreground-image: url(resource:arrow_right);
|
|
}
|
|
menu.custom li:not(:has-child-of-type(div)) {
|
|
padding-left: 10dip;
|
|
}
|
|
menu.custom li > div {
|
|
position: absolute;
|
|
left: 6dip;
|
|
top: 5dip;
|
|
}
|
|
menu.custom caption {
|
|
padding: 5dip 10dip;
|
|
margin: 0;
|
|
}
|
|
|
|
menu div:content-editable:empty {
|
|
height: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
div[pic] {
|
|
prototype: ThemedImage;
|
|
}
|
|
|
|
.imgbtn {
|
|
size: 16dip;
|
|
padding: 2dip;
|
|
border: 1dip solid transparent;
|
|
overflow: hidden;
|
|
max-width: 16dip;
|
|
max-height: 16dip;
|
|
}
|
|
.imgbtn:hover {
|
|
border: 1dip solid @btnBorderColor;
|
|
background-color: @btnBackColor;
|
|
}
|
|
.imgbtn:checked {
|
|
border: 1dip solid @btnBorderColor;
|
|
}
|
|
.imgbtn:active > * {
|
|
transform: translate(0, 1dip);
|
|
}
|
|
.imgbtn:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
// Custom elements
|
|
|
|
@set custom-tabs {
|
|
:root {
|
|
font: system;
|
|
overflow: hidden;
|
|
size: *;
|
|
}
|
|
|
|
:root > .strip {
|
|
flow: horizontal;
|
|
margin-bottom: 0;
|
|
padding: 5dip 10dip -1dip 45dip;
|
|
background-color: window window threedface threedface;
|
|
border-bottom: 1dip solid #d9d9d9;
|
|
}
|
|
|
|
:root > .strip > [panel] {
|
|
border: 1dip solid transparent;
|
|
border-bottom-width: 0;
|
|
padding: 3dip 8dip;
|
|
margin: 0 -1dip 1dip -1dip;
|
|
height: *;
|
|
max-width: auto;
|
|
white-space: nowrap;
|
|
}
|
|
:root[prefs] > .strip > [panel] {
|
|
font-size: 11pt;
|
|
border: 2dip solid transparent;
|
|
margin: 0 10dip 0 0;
|
|
}
|
|
:root > .strip > [panel]:hover {
|
|
border-color: #D9D9D9;
|
|
background-color: #F0F0F0;
|
|
}
|
|
:root > .strip > [panel][selected] {
|
|
border-color: #D9D9D9;
|
|
background-color: #FFFFFF;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
}
|
|
:root > .strip > [panel][selected]:hover {
|
|
border-color: #D9D9D9;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
:root:tab-focus > .strip > [panel][selected] > * {
|
|
outline: 1dip dotted invert;
|
|
}
|
|
|
|
:root > .panels {
|
|
size: *;
|
|
}
|
|
|
|
:root > .panels > * {
|
|
display: none;
|
|
size: *;
|
|
}
|
|
|
|
:root > .panels > *[selected] {
|
|
display: block;
|
|
}
|
|
|
|
:root[prefs] {
|
|
height: max-content;
|
|
}
|
|
|
|
:root[prefs] > .panels {
|
|
height: max-content;
|
|
}
|
|
|
|
:root[prefs] > .panels > * {
|
|
height: max-content;
|
|
}
|
|
|
|
:root[prefs] > .strip {
|
|
padding: 5dip 10dip -1dip 1dip;
|
|
margin-left: -1dip;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
@set uwp-button < std-button {
|
|
@mixin defaults {
|
|
background-color: #ccc;
|
|
background-image: none;
|
|
background-gradient: none;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
:root {
|
|
@defaults;
|
|
margin: 0;
|
|
padding: 0 10dip;
|
|
display: inline-block;
|
|
border: 2dip solid transparent;
|
|
height: 28dip;
|
|
vertical-align: middle;
|
|
line-height: 28dip;
|
|
min-width: max-content;
|
|
width: max-content;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
:root:hover {
|
|
@defaults;
|
|
}
|
|
:root:focus {
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
outline: none;
|
|
}
|
|
:root:hover,
|
|
:root:focus:hover {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:active {
|
|
background-color: @greyColorBtnPressed;
|
|
}
|
|
:root:disabled {
|
|
@defaults;
|
|
opacity: 0.5;
|
|
}
|
|
:root > span {
|
|
width: *;
|
|
text-align: center;
|
|
}
|
|
|
|
:root[square] {
|
|
size: 36dip;
|
|
}
|
|
|
|
:root[wide] {
|
|
width: *;
|
|
}
|
|
:root[medium] {
|
|
width: *;
|
|
max-width: 120dip;
|
|
min-width: 60dip;
|
|
}
|
|
:root[large] {
|
|
width: *;
|
|
max-width: 160dip;
|
|
min-width: max-content;
|
|
}
|
|
|
|
:root[withpic] {
|
|
flow: horizontal;
|
|
vertical-align: middle;
|
|
border-spacing: 10dip;
|
|
}
|
|
:root > div {
|
|
margin-top: *;
|
|
margin-bottom: *;
|
|
}
|
|
|
|
:root[right] {
|
|
margin-left: * !important;
|
|
}
|
|
|
|
:root[light] {
|
|
height: 26dip;
|
|
line-height: 26dip;
|
|
}
|
|
:root[light],
|
|
:root[light]:hover,
|
|
:root[light]:focus,
|
|
:root[light]:focus:hover {
|
|
border-width: 1dip;
|
|
}
|
|
}
|
|
|
|
@set uwp-radio < std-radio-base {
|
|
:root {
|
|
padding: 0;
|
|
padding-left: 28dip;
|
|
width: max-content;
|
|
margin: 6dip 0 5dip 0dip;
|
|
display: inline-block;
|
|
white-space: normal;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root.hidden {
|
|
display: none;
|
|
}
|
|
:root, :root * {
|
|
vertical-align: middle;
|
|
}
|
|
:root[nowrap] {
|
|
white-space: nowrap;
|
|
}
|
|
:root[nolabel] {
|
|
padding-left: 18dip;
|
|
}
|
|
:root[alt] {
|
|
width: *;
|
|
max-width: max-content;
|
|
min-width: 150dip;
|
|
}
|
|
:root::marker {
|
|
background-image: url(stock:disk);
|
|
background-repeat: no-repeat;
|
|
background-position: 5.25dip 5.25dip;
|
|
background-size: 9.5dip;
|
|
fill: transparent;
|
|
size: 16dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
border-radius: 50%;
|
|
}
|
|
:root:checked::marker {
|
|
fill: @activeColor;
|
|
transition: fill 0.15s cubic-out;
|
|
}
|
|
:root[notransitions]::marker {
|
|
transition: none !important;
|
|
}
|
|
:root:hover::marker {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus::marker {
|
|
border: 2dip solid @activeColorDark;
|
|
}
|
|
|
|
:root[light]::marker {
|
|
background-position: 4.25dip 4.25dip;
|
|
}
|
|
:root[light][nolabel] {
|
|
padding-left: 18dip;
|
|
}
|
|
:root[light]::marker {
|
|
border-width: 1dip;
|
|
}
|
|
|
|
:root[right] {
|
|
margin-left: * !important;
|
|
}
|
|
}
|
|
|
|
@set uwp-checkbox < std-checkbox-base {
|
|
:root {
|
|
padding: 0;
|
|
padding-left: 30dip;
|
|
width: *;
|
|
max-width: max-content;
|
|
margin: 10dip 0;
|
|
display: inline-block;
|
|
white-space: normal;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root.hidden {
|
|
display: none;
|
|
}
|
|
:root, :root * {
|
|
vertical-align: middle;
|
|
}
|
|
:root[nowrap] {
|
|
white-space: nowrap;
|
|
}
|
|
:root[nolabel] {
|
|
height: 20dip;
|
|
width: 10dip;
|
|
max-width: 30dip;
|
|
padding-left: 20dip;
|
|
margin: 5dip 0;
|
|
}
|
|
:root[compact] {
|
|
margin: 6dip 0 5dip 0dip;
|
|
}
|
|
:root[compactbottom] {
|
|
margin-bottom: 5dip;
|
|
}
|
|
:root::marker {
|
|
background-image: url(resource:uwp_checkbox);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
size: 16dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
fill: transparent;
|
|
transition: fill 0.15s cubic-out;
|
|
}
|
|
:root[notransitions]::marker {
|
|
transition: none !important;
|
|
}
|
|
:root:hover::marker {
|
|
border-color: @ctrlBorderColor;
|
|
}
|
|
:root:checked::marker {
|
|
fill: @activeColor;
|
|
border-color: @activeColor;
|
|
}
|
|
:root:focus::marker {
|
|
border-color: @activeColorDark;
|
|
}
|
|
|
|
:root[small] {
|
|
width: *;
|
|
height: 20dip;
|
|
line-height: 20dip;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:root[light] {
|
|
padding-left: 25dip;
|
|
}
|
|
:root[light][nolabel] {
|
|
padding-left: 20dip;
|
|
}
|
|
:root[light]::marker {
|
|
border-width: 1dip;
|
|
}
|
|
|
|
:root[right] {
|
|
margin-left: * !important;
|
|
}
|
|
}
|
|
|
|
@set uwp-edit < std-edit {
|
|
:root {
|
|
//content-isolate: none;
|
|
font-size: 15dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
border-radius: 0;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
height: 20dip;
|
|
padding: 3dip 10dip 5dip 10dip;
|
|
}
|
|
:root:read-only {
|
|
border-color: @greyColor;
|
|
}
|
|
:root:focus {
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
text-selection: windowtext transparent;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root:hover:not(:read-only) {
|
|
border-color: @ctrlBorderColor;
|
|
}
|
|
:root:focus:not(:read-only) {
|
|
border-color: @activeColor;
|
|
}
|
|
:root popup {
|
|
border-radius: 1dip;
|
|
}
|
|
|
|
:root[wide] {
|
|
width: *;
|
|
}
|
|
|
|
:root[light] {
|
|
padding: 3dip 7dip 4dip 7dip;
|
|
border-width: 1dip;
|
|
font-size: 10pt;
|
|
}
|
|
}
|
|
|
|
@set uwp-select < std-select {
|
|
:root {
|
|
font-size: 15dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
background-color: #fff;
|
|
background-image: none !important;
|
|
width: *;
|
|
height: max-content;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll-indicator;
|
|
vertical-scrollbar: "v-scroll-indicator-textarea";
|
|
letter-spacing: normal;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root:hover {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus {
|
|
border: 2dip solid @activeColor;
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
text-selection: windowtext transparent;
|
|
}
|
|
|
|
:root option {
|
|
padding: 6dip 11dip 4dip 11dip;
|
|
line-height: 21dip;
|
|
}
|
|
:root option:disabled span {
|
|
opacity: 0.5;
|
|
}
|
|
:root.capture option {
|
|
background-color: #fff !important;
|
|
}
|
|
:root:not(.capture) option:hover {
|
|
background-color: @activeColorHover !important;
|
|
}
|
|
:root:not(.capture) option:current {
|
|
background-color: @activeColorCurrent !important;
|
|
color: #000;
|
|
}
|
|
:root:not(.capture) option:current:hover {
|
|
background-color: @activeColorHoverCurrent !important;
|
|
}
|
|
:root:not(.capture) option:checked {
|
|
background-color: @activeColorCurrent;
|
|
}
|
|
:root option input[type="checkbox"] {
|
|
margin-right: 10dip;
|
|
}
|
|
|
|
:root[multi] {
|
|
max-width: max-content;
|
|
}
|
|
:root[multi] option {
|
|
padding: 2dip 7dip;
|
|
}
|
|
:root[multi] option {
|
|
flow: horizontal;
|
|
vertical-align: middle;
|
|
foreground-image: none;
|
|
}
|
|
:root[multi] option img {
|
|
foreground-position: center center;
|
|
foreground-size: auto;
|
|
max-width: 21dip;
|
|
max-height: 21dip;
|
|
margin-left: 30dip;
|
|
}
|
|
:root[multi] option span {
|
|
display: inline-block;
|
|
width: *;
|
|
margin-right: 10dip;
|
|
}
|
|
}
|
|
|
|
@set uwp-select-dropdown < std-select-dropdown {
|
|
:root,
|
|
:root[editable] {
|
|
content-isolate: none;
|
|
font-size: var(--caption-option-font-size, 15dip);
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
border-radius: 0;
|
|
background: none !important;
|
|
background-image: none !important;
|
|
background-color: #fff;
|
|
height: 28dip;
|
|
padding: 0 5dip;
|
|
letter-spacing: normal;
|
|
}
|
|
:root > button {
|
|
@uwpStroke;
|
|
background: none !important;
|
|
border: none !important;
|
|
foreground-image: @uwpDown !important;
|
|
foreground-size: 12dip !important;
|
|
}
|
|
:root > caption {
|
|
background: none !important;
|
|
border: none !important;
|
|
padding: var(--caption-padding-top, 3dip) 5dip var(--caption-padding-bottom, 5dip) 5dip !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
:root:focus:not([editable]) > caption {
|
|
outline: none;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root:hover {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus {
|
|
border: 2dip solid @activeColor;
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
text-selection: windowtext transparent;
|
|
}
|
|
:root popup,
|
|
:root popup.list {
|
|
border-radius: 1dip;
|
|
border: 1dip solid @popupBorderColor;
|
|
//box-shadow: 0 7dip 17dip rgba(0, 0, 0, 0.2);
|
|
background-color: #f2f2f2;
|
|
padding: 7dip 0;
|
|
overflow-y: scroll-indicator;
|
|
vertical-scrollbar: "v-scroll-indicator-textarea";
|
|
}
|
|
:root:not([default]) popup,
|
|
:root:not([default]) popup.list {
|
|
overflow-y: hidden;
|
|
height: max-content;
|
|
}
|
|
:root option,
|
|
:root:not([multiple]) > popup option {
|
|
padding: 5dip 11dip;
|
|
line-height: 21dip;
|
|
}
|
|
:root option:disabled span {
|
|
opacity: 0.5;
|
|
}
|
|
:root option:hover {
|
|
background-color: @activeColorHover !important;
|
|
}
|
|
:root:not([editable]):active {
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
}
|
|
:root:not([editable]):active,
|
|
:root option:current {
|
|
background-color: @activeColorCurrent !important;
|
|
color: #000;
|
|
}
|
|
:root option:current:hover {
|
|
background-color: @activeColorHoverCurrent !important;
|
|
}
|
|
|
|
:root[wide] {
|
|
width: *;
|
|
}
|
|
}
|
|
|
|
@set base-scroll-indicator {
|
|
.slider {
|
|
background-color: @indicatorColor;
|
|
border-radius: 0;
|
|
}
|
|
.slider:hover {
|
|
background-color: @indicatorColorDark;
|
|
}
|
|
.base {
|
|
width: 6dip;
|
|
height: 6dip;
|
|
min-width: 6dip;
|
|
min-height: 6dip;
|
|
}
|
|
}
|
|
|
|
@set base-scroll-indicator-light < base-scroll-indicator {
|
|
.slider {
|
|
background-color: @indicatorColorLight;
|
|
}
|
|
.slider:hover {
|
|
background-color: @indicatorColor;
|
|
}
|
|
}
|
|
|
|
@set v-scroll-indicator-nomargins < base-scroll-indicator {
|
|
.slider {
|
|
margin: 0 0 0 2dip;
|
|
}
|
|
}
|
|
|
|
@set v-scroll-indicator-nomargins-light < base-scroll-indicator-light {
|
|
.slider {
|
|
margin: 0 0 0 2dip;
|
|
}
|
|
}
|
|
|
|
@set h-scroll-indicator-nomargins < base-scroll-indicator {
|
|
.slider {
|
|
margin: 2dip 0 0 0;
|
|
}
|
|
.base {
|
|
height: 2dip;
|
|
min-height: 2dip;
|
|
}
|
|
}
|
|
|
|
@set h-scroll-indicator-nomargins-light < base-scroll-indicator-light {
|
|
.slider {
|
|
margin: 2dip 0 0 0;
|
|
}
|
|
.base {
|
|
height: 2dip;
|
|
min-height: 2dip;
|
|
}
|
|
}
|
|
|
|
@set v-scroll-indicator-textarea < base-scroll-indicator {
|
|
.slider {
|
|
margin: 2dip 2dip 2dip 0;
|
|
}
|
|
}
|
|
@set h-scroll-indicator-textarea < base-scroll-indicator {
|
|
.slider {
|
|
margin: 0 2dip 2dip 2dip;
|
|
}
|
|
}
|
|
|
|
@set v-scroll-indicator-textarea-light < base-scroll-indicator-light {
|
|
.slider {
|
|
margin: 1dip 2dip;
|
|
}
|
|
}
|
|
@set h-scroll-indicator-textarea-light < base-scroll-indicator-light {
|
|
.slider {
|
|
margin: 2dip 1dip;
|
|
}
|
|
}
|
|
|
|
@set uwp-textarea < std-textarea {
|
|
:root {
|
|
font-size: 15dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
padding: 6dip 10dip 8dip 10dip;
|
|
overflow: scroll-indicator;
|
|
vertical-scrollbar: "v-scroll-indicator-textarea";
|
|
horizontal-scrollbar: "h-scroll-indicator-textarea";
|
|
}
|
|
:root:read-only {
|
|
border: 2dip solid @greyColor;
|
|
}
|
|
:root:focus {
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
//text-selection: windowtext transparent;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root:hover:not(:read-only) {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus:not(:read-only) {
|
|
border: 2dip solid @activeColor;
|
|
}
|
|
:root popup {
|
|
border-radius: 1dip;
|
|
}
|
|
|
|
:root[wrap] {
|
|
white-space: pre-wrap;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
:root[nowrap] {
|
|
white-space: pre;
|
|
}
|
|
|
|
:root[light] {
|
|
padding: 3dip 7dip 4dip 7dip;
|
|
border-width: 1dip;
|
|
font-size: 10pt;
|
|
vertical-scrollbar: "v-scroll-indicator-textarea-light";
|
|
horizontal-scrollbar: "h-scroll-indicator-textarea-light";
|
|
}
|
|
}
|
|
|
|
@set uwp-number-edit < std-number-edit {
|
|
:root {
|
|
font-size: 15dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
border-radius: 0;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
height: 20dip;
|
|
padding: 3dip 10dip 5dip 10dip;
|
|
}
|
|
:root:focus {
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
text-selection: windowtext transparent;
|
|
}
|
|
:root:invalid {
|
|
color: @warnColor;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root:hover {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus {
|
|
border: 2dip solid @activeColor;
|
|
}
|
|
:root popup {
|
|
border-radius: 1dip;
|
|
}
|
|
|
|
:root {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
:root caption {
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
:root[step] {
|
|
margin: 0 10dip -2dip 10dip;
|
|
padding: 1dip 0 1dip 5dip;
|
|
}
|
|
:root button {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 11dip;
|
|
line-height: 8dip;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
background-image: none;
|
|
foreground-image: none;
|
|
}
|
|
:root button.plus,
|
|
:root:disabled button.plus {
|
|
content: "+";
|
|
background-image: none;
|
|
foreground-image: none;
|
|
border: none;
|
|
}
|
|
:root button.minus,
|
|
:root:disabled button.minus {
|
|
content: "-";
|
|
background-image: none;
|
|
foreground-image: none;
|
|
border: none;
|
|
}
|
|
:root button.plus:hover,
|
|
:root button.minus:hover {
|
|
background-image: none;
|
|
background-color: @activeColorHover;
|
|
}
|
|
|
|
:root[small] > caption {
|
|
padding: 2dip 0;
|
|
}
|
|
:root[small] > caption,
|
|
:root[small] button {
|
|
font-size: 9pt;
|
|
vertical-align: middle;
|
|
}
|
|
:root[small] > button.plus > *,
|
|
:root[small] > button.minus > * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@set uwp-masked-edit < std-masked-edit {
|
|
:root {
|
|
font-size: 15dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
height: 20dip;
|
|
padding: 3dip;
|
|
padding-right: 0;
|
|
flow: horizontal;
|
|
border-spacing: 3dip;
|
|
}
|
|
:root:focus {
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
text-selection: windowtext transparent;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
:root:hover {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus {
|
|
border: 2dip solid @activeColor;
|
|
}
|
|
:root popup {
|
|
border-radius: 1dip;
|
|
}
|
|
|
|
:root:owns-focus > span:current {
|
|
background-color: @activeColor;
|
|
}
|
|
@media multiline {
|
|
:root {
|
|
width: 216dip;
|
|
height: max-content;
|
|
flow: horizontal-wrap;
|
|
}
|
|
}
|
|
:root > span {
|
|
font: system;
|
|
font-size: 15dip;
|
|
display: inline-block;
|
|
width: 24dip;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-right: 3dip;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
background-color: @greyColor;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
@set uwp-date < std-date {
|
|
:root td:hover,
|
|
:root td:active,
|
|
:root td:current {
|
|
foreground-color: transparent !important;
|
|
}
|
|
|
|
:root {
|
|
font-size: 15dip;
|
|
border: 2dip solid @ctrlBorderColorLight;
|
|
background-color: #fff;
|
|
background-image: none !important;
|
|
height: 20dip;
|
|
padding: 1dip 0 5dip 0dip;
|
|
background: none;
|
|
margin-left: 10dip;
|
|
}
|
|
:root:focus {
|
|
text-selection: #fff @activeColor !important;
|
|
}
|
|
:root:not(:focus),
|
|
:root:not(:focus) > caption {
|
|
text-selection: windowtext transparent;
|
|
}
|
|
:root:disabled {
|
|
opacity: 0.5;
|
|
|
|
background: none;
|
|
}
|
|
:root:hover {
|
|
border: 2dip solid @ctrlBorderColor;
|
|
}
|
|
:root:focus {
|
|
border: 2dip solid @activeColor;
|
|
}
|
|
:root popup {
|
|
border-radius: 1dip;
|
|
}
|
|
|
|
:root > button {
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-bottom: -4dip;
|
|
border: none !important;
|
|
background-color: transparent !important;
|
|
background-image: none !important;
|
|
foreground-image: @uwpDown !important;
|
|
foreground-size: 9dip !important;
|
|
foreground-position: 0.05em 50%;
|
|
}
|
|
:root > button,
|
|
:root > button:hover,
|
|
:root > button:disabled {
|
|
@uwpStroke;
|
|
}
|
|
:root > caption {
|
|
margin-top: -1dip;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
:root:owns-focus > caption > span:current {
|
|
background-color: @activeColor;
|
|
}
|
|
:root widget {
|
|
width: 300dip;
|
|
border: 1dip solid @greyColor;
|
|
padding: 0;
|
|
}
|
|
|
|
:root widget caption {
|
|
position: relative;
|
|
height: 40dip;
|
|
padding: 0;
|
|
}
|
|
:root widget footer {
|
|
display: none;
|
|
}
|
|
:root widget table {
|
|
padding: 0;
|
|
margin: 0 -1dip -1dip -1dip;
|
|
}
|
|
:root widget table td {
|
|
size: *;
|
|
min-width: 30dip;
|
|
min-height: 30dip;
|
|
padding: 5dip;
|
|
font: system;
|
|
font-size: 15dip;
|
|
font-weight: 400;
|
|
border: 1dip solid @greyColor;
|
|
}
|
|
:root widget table td,
|
|
:root widget table td.off {
|
|
background-image: none;
|
|
color: #333;
|
|
}
|
|
:root widget table td.other-month {
|
|
color: @ctrlBorderColorLight;
|
|
}
|
|
:root widget table td.day:current,
|
|
:root widget table td.month:current,
|
|
:root widget table td.year:current,
|
|
:root widget table td.decade:current {
|
|
background-color: @activeColor;
|
|
color: #fff;
|
|
}
|
|
:root widget table td.day:hover,
|
|
:root widget table td.month:hover,
|
|
:root widget table td.year:hover,
|
|
:root widget table td.decade:hover {
|
|
background-color: @activeColorHover;
|
|
}
|
|
:root widget table td.day:current:hover,
|
|
:root widget table td.month:current:hover,
|
|
:root widget table td.year:current:hover,
|
|
:root widget table td.decade:current:hover {
|
|
background-color: @activeColorHoverCurrent;
|
|
}
|
|
:root widget table td.decade {
|
|
font-size: 12dip;
|
|
}
|
|
:root div.button:hover,
|
|
:root div.nav:hover {
|
|
background-image: none;
|
|
background-color: @greyColor;
|
|
}
|
|
:root div.button:active,
|
|
:root div.nav:active {
|
|
background-image: none;
|
|
background-color: @greyColorLightPressed;
|
|
}
|
|
:root div.button.month,
|
|
:root div.button.year,
|
|
:root div.button.decade,
|
|
:root div.button.century {
|
|
font: system;
|
|
font-size: 20dip;
|
|
line-height: 20dip;
|
|
font-weight: normal;
|
|
padding: 5dip 10dip 10dip 10dip;
|
|
vertical-align: middle;
|
|
}
|
|
:root .nav.prev,
|
|
:root .nav.next {
|
|
@uwpStroke;
|
|
foreground-size: 18dip;
|
|
background-image: none;
|
|
position: absolute;
|
|
fill: none !important;
|
|
stroke-width: 1dip;
|
|
stroke: #333;
|
|
top: 0dip;
|
|
size: 40dip;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
:root .nav.prev {
|
|
right: 40dip;
|
|
foreground-image: @uwpUp !important;
|
|
}
|
|
:root .nav.next {
|
|
right: 0dip;
|
|
foreground-image: @uwpDown !important;
|
|
}
|
|
:root .weekday {
|
|
border: none;
|
|
font-size: 13dip;
|
|
padding: 5dip;
|
|
color: #333;
|
|
}
|
|
|
|
:root[nomargin] {
|
|
margin: 0;
|
|
}
|
|
|
|
:root[light] {
|
|
padding: 1dip 0 3dip 0dip;
|
|
border-width: 1dip;
|
|
font-size: 10pt;
|
|
}
|
|
:root[light] > button {
|
|
margin-bottom: -2dip;
|
|
}
|
|
}
|
|
|
|
@set uwp-hslider < std-hslider {
|
|
:root {
|
|
border: none !important;
|
|
margin: 0 10dip;
|
|
height: 3dip;
|
|
background-color: @greyColorLightPressed;
|
|
fill: @activeColor;
|
|
}
|
|
:root:hover,
|
|
:root:focus {
|
|
border: none !important;
|
|
}
|
|
//:root::before {
|
|
// width: *;
|
|
// height: 3dip;
|
|
// border-radius: 2dip;
|
|
// background-color: @greyColorLightPressed;
|
|
//}
|
|
//:root::after {
|
|
// width: 0;
|
|
// height: 3dip;
|
|
// border-top-left-radius: 2dip;
|
|
// border-bottom-left-radius: 2dip;
|
|
// background-color: @ctrlBorderColorLight;
|
|
//}
|
|
:root[long] {
|
|
width: 200dip;
|
|
margin: 0 !important;
|
|
}
|
|
:root[medium] {
|
|
width: 150dip;
|
|
margin: 0 !important;
|
|
}
|
|
:root[compact] {
|
|
margin: 0 !important;
|
|
padding-left: 4dip !important;
|
|
padding-right: 4dip !important;
|
|
}
|
|
:root button.slider {
|
|
width: 6dip;
|
|
height: 21dip;
|
|
padding: 0;
|
|
border: 1dip solid transparent;
|
|
border-radius: 4dip;
|
|
background: none;
|
|
background-color: @activeColor;
|
|
background-image: none;
|
|
foreground-image: none;
|
|
}
|
|
:root button.slider:hover,
|
|
:root button.slider:focus {
|
|
background: none;
|
|
background-color: @activeColorLight;
|
|
}
|
|
:root button.slider:active {
|
|
background-color: @activeColorLighter;
|
|
}
|
|
}
|
|
|
|
[uwp] {
|
|
appearance: none;
|
|
}
|
|
|
|
button[uwp] {
|
|
style-set: uwp-button;
|
|
}
|
|
|
|
input[uwp]:not([type]),
|
|
input[uwp][type="text"],
|
|
input[uwp][type="password"] {
|
|
style-set: uwp-edit;
|
|
}
|
|
|
|
textarea[uwp] {
|
|
style-set: uwp-textarea;
|
|
}
|
|
|
|
input[uwp][type="integer"],
|
|
input[uwp][type="decimal"] {
|
|
style-set: uwp-number-edit;
|
|
}
|
|
|
|
input[uwp][type="masked"] {
|
|
style-set: uwp-masked-edit;
|
|
}
|
|
|
|
input[uwp][type="date"] {
|
|
style-set: uwp-date;
|
|
}
|
|
|
|
input[uwp][type="hslider"] {
|
|
style-set: uwp-hslider;
|
|
}
|
|
|
|
select[uwp]:not([type]) {
|
|
style-set: uwp-select-dropdown;
|
|
prototype: UWPSelectDropdown;
|
|
}
|
|
select[uwp][type="list"] {
|
|
style-set: uwp-select;
|
|
}
|
|
|
|
radio {
|
|
style-set: uwp-radio;
|
|
}
|
|
checkbox {
|
|
style-set: uwp-checkbox;
|
|
}
|
|
|
|
plaintext:not([uwp]),
|
|
select:not([uwp])[type="list"] {
|
|
border: none;
|
|
}
|
|
|
|
select[type="list"] {
|
|
prototype: FixSelectList;
|
|
}
|
|
|
|
popup#hint {
|
|
flow: vertical;
|
|
//hit-margin: -9999px;
|
|
pointer-events: none;
|
|
border-radius: 1px;
|
|
background-color: #f2f2f2;
|
|
border: 1dip solid #bbb;
|
|
width: max-content;
|
|
height: max-content;
|
|
padding: 3dip 5dip;
|
|
font: system;
|
|
font-size: 9pt;
|
|
font-rendering-mode: snap-pixel;
|
|
line-height: 1.6;
|
|
opacity: 0;
|
|
}
|
|
popup#hint:popup {
|
|
opacity: 1;
|
|
transition: opacity 0.2s cubic-out;
|
|
}
|
|
popup#hint > *,
|
|
popup#hint .hintheader1 > * {
|
|
flow: horizontal;
|
|
vertical-align: middle;
|
|
border-spacing: 5dp;
|
|
width: max-content;
|
|
white-space: nowrap;
|
|
}
|
|
popup#hint hr {
|
|
width: *;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
popup#hint b {
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
}
|
|
popup#hint .limited {
|
|
display: inline-block;
|
|
width: max-content;
|
|
max-width: 150dip;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
}
|
|
popup#hint .hintheader {
|
|
width: auto;
|
|
border-spacing: 20dip;
|
|
}
|
|
popup#hint .hintheader1,
|
|
popup#hint .hintheader2 {
|
|
flow: vertical;
|
|
width: max-content;
|
|
}
|
|
popup#hint .hintheader2 {
|
|
margin-left: *;
|
|
margin-top: 2dip;
|
|
vertical-align: top;
|
|
}
|
|
popup#hint .hintheader2 > img {
|
|
image-rendering: optimize-quality;
|
|
foreground-size: contain;
|
|
max-width: 32dip;
|
|
max-height: 32dip;
|
|
}
|
|
|
|
.xstatus {
|
|
font-size: @baseFontSize;
|
|
font-family: @baseFontEmoji;
|
|
font-rendering-mode: sub-pixel;
|
|
}
|
|
.xstatus.small {
|
|
font-size: 11dip;
|
|
}
|
|
|
|
menu .xstatus {
|
|
size: 16dip;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
} |