mirror of
https://github.com/modernw/App-Installer-For-Windows-8.x-Reset.git
synced 2026-04-11 17:57:19 +10:00
3916 lines
108 KiB
CSS
3916 lines
108 KiB
CSS
/*!
|
|
© Microsoft. All rights reserved.
|
|
|
|
This library is supported for use in Windows Store apps only.
|
|
|
|
Build: 1.0.9200.20789.win8_ldr.130802-2151
|
|
|
|
Version: Microsoft.WinJS.1.0
|
|
*/
|
|
|
|
/*
|
|
Modifications for top-level elements html, body and iframe.
|
|
*/
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
-ms-user-select: none;
|
|
cursor: default;
|
|
-ms-scroll-translation: vertical-to-horizontal;
|
|
}
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
body {
|
|
-ms-content-zooming: none;
|
|
}
|
|
iframe {
|
|
border: 0;
|
|
}
|
|
html:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
direction: rtl;
|
|
}
|
|
|
|
/*
|
|
Explicitly define a Segoe UI font-family so that we can assign Segoe UI
|
|
Semilight to an appropriate font-weight.
|
|
*/
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-weight: 200;
|
|
src: local("Segoe UI Light");
|
|
}
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-weight: 300;
|
|
src: local("Segoe UI Semilight");
|
|
}
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-weight: 400;
|
|
src: local("Segoe UI");
|
|
}
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-weight: 600;
|
|
src: local("Segoe UI Semibold");
|
|
}
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-weight: 700;
|
|
src: local("Segoe UI Bold");
|
|
}
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src: local("Segoe UI Italic");
|
|
}
|
|
@font-face {
|
|
font-family: "Segoe UI";
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
src: local("Segoe UI Bold Italic");
|
|
}
|
|
|
|
/*
|
|
Weight and size definitions for typographic classes and elements.
|
|
*/
|
|
h1, .win-type-xx-large {
|
|
font-size: 42pt;
|
|
font-weight: 200;
|
|
letter-spacing: 0;
|
|
line-height: 1.1429; /* 64px when font-size is 42pt */
|
|
}
|
|
h2, .win-type-x-large {
|
|
font-size: 20pt;
|
|
font-weight: 200;
|
|
line-height: 1.2; /* 32px when font-size is 20pt */
|
|
}
|
|
h3, .win-type-large {
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
h4, .win-type-medium, code, pre, samp {
|
|
font-size: 11pt;
|
|
font-weight: 400;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
body, h5, .win-type-small, legend {
|
|
font-size: 11pt;
|
|
font-weight: 300;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
.win-type-x-small {
|
|
font-size: 11pt;
|
|
font-weight: 300;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
h6, caption, figcaption, small, .win-type-xx-small {
|
|
font-size: 9pt;
|
|
font-weight: 400;
|
|
line-height: 1.6667; /* 20px when font-size is 9pt */
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.win-type-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
h1.win-type-ellipsis, .win-type-xx-large.win-type-ellipsis {
|
|
line-height: 1.4286; /* 80px when font-size is 42pt */
|
|
}
|
|
h2.win-type-ellipsis, .win-type-x-large.win-type-ellipsis {
|
|
line-height: 1.5; /* 40px when font-size is 20pt */
|
|
}
|
|
dt, th {
|
|
font-size: 11pt;
|
|
font-weight: 700;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
abbr, acronym, address, blockquote, cite, dl, dd, li, ol, p, q, td, tr {
|
|
font-weight: 300;
|
|
}
|
|
b, strong {
|
|
font-weight: 700;
|
|
}
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
@media (-ms-view-state: snapped) {
|
|
h1, .win-type-xx-large {
|
|
font-size: 20pt;
|
|
font-weight: 200;
|
|
line-height: 1.2; /* 32px when font-size is 20pt */
|
|
}
|
|
h2, .win-type-x-large {
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
h3, .win-type-large {
|
|
font-size: 11pt;
|
|
font-weight: 400;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
h1.win-type-ellipsis, .win-type-xx-large.win-type-ellipsis {
|
|
line-height: 1.5; /* 40px when font-size is 20pt */
|
|
}
|
|
h2.win-type-ellipsis, .win-type-x-large.win-type-ellipsis {
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
}
|
|
|
|
/*
|
|
Additional letter-spacing for the document and its controls.
|
|
*/
|
|
body,
|
|
button, input,
|
|
textarea, .win-textarea,
|
|
select, option {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/*
|
|
Fixed font-family rules.
|
|
*/
|
|
code, pre, samp {
|
|
font-family: "Consolas";
|
|
}
|
|
|
|
/*
|
|
Text input controls.
|
|
*/
|
|
|
|
input[type=text], input[type=password], input[type=email], input[type=number],
|
|
input[type=tel], input[type=url], input[type=search], textarea, .win-textarea {
|
|
-ms-user-select: element;
|
|
min-height: 28px;
|
|
min-width: 64px;
|
|
margin: 4px 0;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
font-size: 11pt;
|
|
font-weight: 400;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
|
|
input[type=text], input[type=password], input[type=email], input[type=number],
|
|
input[type=tel], input[type=url], input[type=search] {
|
|
width: 276px;
|
|
padding: 0;
|
|
}
|
|
input::-ms-value {
|
|
margin: 4px 8px;
|
|
}
|
|
|
|
textarea, .win-textarea {
|
|
overflow-y: scroll;
|
|
word-wrap: break-word;
|
|
padding: 4px 8px;
|
|
/* Leave space for autohiding scrollbar on elements that enable text selection. */
|
|
padding-right: 17px;
|
|
}
|
|
textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm), .win-textarea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
/* Flip sides for autohiding scrollbar padding on RTL layouts. */
|
|
padding-right: 8px;
|
|
padding-left: 17px;
|
|
}
|
|
textarea {
|
|
min-width: 260px;
|
|
min-height: 39px;
|
|
}
|
|
.win-textarea {
|
|
width: 260px;
|
|
height: 39px;
|
|
}
|
|
|
|
/*
|
|
Clear and reveal button styles.
|
|
*/
|
|
|
|
input::-ms-clear, input::-ms-reveal {
|
|
margin-left: 2px;
|
|
}
|
|
input:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-clear,
|
|
input:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-reveal {
|
|
margin-left: 0;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/*
|
|
Button control.
|
|
*/
|
|
button, input[type=button], input[type=reset], input[type=submit] {
|
|
min-height: 32px; /* content (20px) + padding + border */
|
|
min-width: 90px;
|
|
padding: 4px 8px;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
background-clip: padding-box;
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
|
|
/*
|
|
File upload control.
|
|
*/
|
|
input[type=file] {
|
|
border: none;
|
|
min-width: 100px;
|
|
min-height: 20px;
|
|
width: 340px;
|
|
height: 32px;
|
|
padding: 0;
|
|
margin: 7px 8px 21px 8px;
|
|
background-clip: padding-box;
|
|
}
|
|
input[type=file]::-ms-value {
|
|
margin: 0;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-right-style: none;
|
|
border-radius: 0;
|
|
background-clip: padding-box;
|
|
font-size: 11pt;
|
|
font-weight: 400;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
input[type=file]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-value {
|
|
border-left-style: none;
|
|
border-right-style: solid;
|
|
}
|
|
input[type=file]::-ms-browse {
|
|
margin: 0;
|
|
padding: 0 18px;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
background-clip: padding-box;
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
|
|
/*
|
|
No underline or special cursor on links.
|
|
*/
|
|
a {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/*
|
|
No border on images when in a link.
|
|
*/
|
|
img {
|
|
border-style: none;
|
|
}
|
|
|
|
/*
|
|
Select control.
|
|
*/
|
|
select {
|
|
min-height: 32px;
|
|
min-width: 80px;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
margin: 4px 0;
|
|
font-size: 11pt;
|
|
font-weight: 400;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
select::-ms-value {
|
|
padding: 4px 8px;
|
|
margin: 0;
|
|
}
|
|
select::-ms-expand {
|
|
border: 0;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*
|
|
Radio button and checkbox shared styles.
|
|
*/
|
|
input::-ms-check {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
display: inline-block;
|
|
}
|
|
|
|
/*
|
|
Radio button.
|
|
*/
|
|
input[type=radio] {
|
|
width: 23px;
|
|
height: 23px;
|
|
margin-left: -1px;
|
|
margin-right: 4px;
|
|
margin-bottom: -2px;
|
|
}
|
|
input[type=radio]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-left: 4px;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
/*
|
|
Checkbox.
|
|
*/
|
|
input[type=checkbox] {
|
|
width: 21px;
|
|
height: 21px;
|
|
margin-right: 5px;
|
|
}
|
|
input[type=checkbox]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-right: 0;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/*
|
|
Range control.
|
|
*/
|
|
input[type=range] {
|
|
width: 280px;
|
|
height: auto;
|
|
padding: 17px 0 32px 0;
|
|
}
|
|
input[type=range]::-ms-track {
|
|
padding: 0;
|
|
width: auto;
|
|
height: 11px;
|
|
border-style: none;
|
|
color: transparent; /* ticks hidden by default */
|
|
}
|
|
input[type=range]::-ms-thumb {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-style: none;
|
|
}
|
|
input[type=range]::-ms-ticks-before, input[type=range]::-ms-ticks-after {
|
|
width: 100%;
|
|
height: 5px;
|
|
display: none;
|
|
}
|
|
input[type=range]:disabled::-ms-fill-lower {
|
|
margin-right: 5px;
|
|
}
|
|
input[type=range]:disabled::-ms-fill-upper {
|
|
margin-left: 6px;
|
|
}
|
|
input[type=range]:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-lower {
|
|
margin-right: 0;
|
|
margin-left: 5px;
|
|
}
|
|
input[type=range]:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-upper {
|
|
margin-left: 0;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
/*
|
|
Vertical range control.
|
|
*/
|
|
input[type=range].win-vertical {
|
|
width: auto;
|
|
height: 191px;
|
|
padding: 0 17px;
|
|
writing-mode: bt-lr;
|
|
}
|
|
input[type=range].win-vertical:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
writing-mode: bt-rl;
|
|
}
|
|
input[type=range].win-vertical::-ms-track {
|
|
width: 11px;
|
|
height: auto;
|
|
}
|
|
input[type=range].win-vertical:disabled::-ms-fill-lower {
|
|
margin-right: 0;
|
|
margin-top: 6px;
|
|
}
|
|
input[type=range].win-vertical:disabled::-ms-fill-upper {
|
|
margin-left: 0;
|
|
margin-bottom: 5px;
|
|
}
|
|
input[type=range].win-vertical:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-lower {
|
|
margin-left: 0;
|
|
}
|
|
input[type=range].win-vertical:disabled:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-upper {
|
|
margin-right: 0;
|
|
}
|
|
|
|
input[type=range].win-vertical::-ms-ticks-before,
|
|
input[type=range].win-vertical::-ms-ticks-after {
|
|
width: 5px;
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
Progress control.
|
|
*/
|
|
progress {
|
|
width: 180px;
|
|
height: 6px;
|
|
border-style: none;
|
|
}
|
|
progress.win-medium {
|
|
width: 280px;
|
|
}
|
|
progress.win-large {
|
|
width: 100%;
|
|
}
|
|
progress::-ms-fill {
|
|
border-style: none;
|
|
}
|
|
progress:indeterminate {
|
|
height: 4px;
|
|
padding: 1px 0; /* Indeterminate dots should be 4px tall, but overall control stays 6px. */
|
|
}
|
|
@keyframes win-progress-fade-out {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
progress.win-paused:not(:indeterminate) {
|
|
animation-name: win-progress-fade-out;
|
|
animation-duration: 3s;
|
|
animation-timing-function: cubic-bezier(0.03, 0.76, 0.31, 1.0);
|
|
opacity: 0.5;
|
|
}
|
|
progress.win-error::-ms-fill {
|
|
opacity: 0;
|
|
}
|
|
progress.win-ring:indeterminate::-ms-fill {
|
|
animation-name: -ms-ring;
|
|
}
|
|
progress.win-ring {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
progress.win-medium.win-ring {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
progress.win-large.win-ring {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
form {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
legend {
|
|
margin: 0 0 10px 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
/*
|
|
AppBar/Flyout z-index values:
|
|
1000 - AppBar/settings click-eating div
|
|
1002 - AppBar
|
|
1004 - Settings Flyout
|
|
1006 - Flyout click-eating div
|
|
1008 - Flyout
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: "Segoe UI Command";
|
|
src: local("Segoe UI Symbol");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.win-appbarclickeater {
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
background-color: Purple;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
position: fixed;
|
|
-ms-touch-action: none;
|
|
}
|
|
.win-flyoutmenuclickeater {
|
|
z-index: 1006;
|
|
opacity: 0;
|
|
background-color: Lime;
|
|
display: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
position: fixed;
|
|
-ms-touch-action: none;
|
|
}
|
|
|
|
/*
|
|
Back button.
|
|
*/
|
|
.win-backbutton {
|
|
display: inline-block;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background-clip: border-box;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
padding: 0;
|
|
text-align: center;
|
|
|
|
/* Normal sizing. */
|
|
width: 41px;
|
|
height: 41px;
|
|
font-size: 14pt;
|
|
line-height: 37px; /* line-height must match the content box height. */
|
|
vertical-align: baseline;
|
|
}
|
|
.win-backbutton:hover, .win-backbutton:hover:active {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-radius: 50%;
|
|
}
|
|
.win-backbutton::before {
|
|
font-family: "Segoe UI Symbol";
|
|
font-weight: normal;
|
|
content: "\E0D5";
|
|
vertical-align: 50%;
|
|
}
|
|
.win-backbutton:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before {
|
|
content: "\E0AE";
|
|
}
|
|
.win-backbutton:disabled, .win-backbutton:disabled:active {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*
|
|
Back button snapped view sizing.
|
|
*/
|
|
@media (-ms-view-state: snapped) {
|
|
.win-backbutton {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 10pt;
|
|
line-height: 26px; /* line-height must match the content box height */
|
|
vertical-align: -0.37em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Command buttons.
|
|
*/
|
|
button.win-command {
|
|
background: none;
|
|
background-clip: border-box;
|
|
height: auto; /* height is 88px (label) or 68px (no label) */
|
|
padding: 12px 0; /* bottom dependent on label/img, 2px margin */
|
|
margin: 0;
|
|
border: 2px solid; /* reserve focus rect */
|
|
min-width: 40px;
|
|
text-align: center;
|
|
font-size: 9pt;
|
|
line-height: 16px;
|
|
font-weight: normal;
|
|
|
|
/* Commands are lrtb */
|
|
writing-mode: lr-tb;
|
|
}
|
|
button.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
writing-mode: rl-tb;
|
|
}
|
|
button.win-command:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/*
|
|
Command button icons.
|
|
*/
|
|
.win-commandicon {
|
|
display: inline-block;
|
|
margin: 0 28px; /* padding for command buttons, 2px/side for focus */
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 0;
|
|
|
|
/* Normal sizing */
|
|
width: 40px;
|
|
height: 40px;
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
}
|
|
.win-commandimage {
|
|
/* Default font for glyphs. */
|
|
font-family: "Segoe UI Command";
|
|
letter-spacing: 0;
|
|
|
|
/* Applications provide their own content, like . */
|
|
vertical-align: middle;
|
|
font-size: 14pt;
|
|
margin: -2px;
|
|
line-height: 40px; /* line-height must match the content box height */
|
|
background-position: 0 0;
|
|
background-origin: border-box;
|
|
display: inline-block;
|
|
/* Still 40px */
|
|
width: 40px;
|
|
height: 40px;
|
|
background-size: 160px 80px;
|
|
}
|
|
|
|
/*
|
|
Offsets for sprite versions.
|
|
*/
|
|
button:hover .win-commandimage, button:active .win-commandimage {
|
|
background-position: -40px 0;
|
|
}
|
|
button:hover:active .win-commandimage {
|
|
background-position: -80px 0;
|
|
}
|
|
|
|
button:-ms-keyboard-active .win-commandimage {
|
|
background-position: -80px 0;
|
|
}
|
|
button:disabled .win-commandimage,
|
|
button:disabled:active .win-commandimage {
|
|
background-position: -120px 0;
|
|
}
|
|
|
|
/*
|
|
Offsets for sprite versions in selected state.
|
|
*/
|
|
button[aria-checked=true] .win-commandimage {
|
|
background-position: 0 -40px;
|
|
}
|
|
button[aria-checked=true]:hover .win-commandimage,
|
|
button[aria-checked=true]:active .win-commandimage {
|
|
background-position: -40px -40px;
|
|
}
|
|
button[aria-checked=true]:hover:active .win-commandimage {
|
|
background-position: -80px -40px;
|
|
}
|
|
button[aria-checked=true]:-ms-keyboard-active .win-commandimage {
|
|
background-position: -80px -40px;
|
|
}
|
|
button[aria-checked=true]:disabled .win-commandimage,
|
|
button[aria-checked=true]:disabled:active .win-commandimage {
|
|
background-position: -120px -40px;
|
|
}
|
|
|
|
/*
|
|
Command button "ring".
|
|
*/
|
|
.win-commandring,
|
|
button:hover .win-commandring,
|
|
button:active .win-commandring,
|
|
button.win-command:disabled .win-commandring,
|
|
button.win-command:disabled:active .win-commandring {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-radius: 50%;
|
|
background-clip: border-box;
|
|
}
|
|
button:hover:active .win-commandring,
|
|
button[aria-checked=true] .win-commandring,
|
|
button[aria-checked=true]:active .win-commandring,
|
|
button[aria-checked=true]:disabled .win-commandring,
|
|
button[aria-checked=true]:disabled:active .win-commandring {
|
|
background-clip: border-box;
|
|
}
|
|
|
|
/*
|
|
Command button labels.
|
|
*/
|
|
button.win-command .win-label {
|
|
position: relative;
|
|
line-height: 16px;
|
|
display: block;
|
|
max-width: 88px; /* 100px button, but allow for 2px margins and 4px padding on each side */
|
|
margin-top: 5px;
|
|
margin-bottom: -1px;
|
|
padding-left: 4px; /* 12px between buttons, 6px per side, minus 2px margins */
|
|
padding-right: 4px;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/*
|
|
AppBarCommand separator.
|
|
*/
|
|
hr.win-command {
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin: 14px 29px 34px 30px;
|
|
width: 1px;
|
|
height: 40px;
|
|
border: 0;
|
|
vertical-align: top;
|
|
}
|
|
hr.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-left: 29px;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
/*
|
|
AppBar Edgy Container
|
|
*/
|
|
.win-appbar {
|
|
z-index: 1002;
|
|
border-width: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
left: 0;
|
|
position: fixed;
|
|
-ms-touch-select: none;
|
|
}
|
|
|
|
/*
|
|
AppBar control.
|
|
*/
|
|
.win-commandlayout {
|
|
text-align: right;
|
|
padding-left: 10px;
|
|
padding-right: calc(((100% + 5px) mod 20px) + 5px);
|
|
width: calc(100% - 10px - (((100% + 5px) mod 20px) + 5px));
|
|
|
|
/* Hide whitespace between buttons. */
|
|
font-size: 0;
|
|
|
|
min-height: 88px;
|
|
}
|
|
.win-commandlayout .win-selection {
|
|
float: left;
|
|
}
|
|
.win-commandlayout:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
text-align: left;
|
|
}
|
|
.win-commandlayout .win-selection:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
float: right;
|
|
}
|
|
|
|
/* Narrow buttons and no labels when < 1024px. */
|
|
@media (max-width: 1023px) {
|
|
button.win-command .win-label {
|
|
display: none;
|
|
}
|
|
button.win-command .win-commandicon {
|
|
margin: 0 8px; /* 2px margin for focus */
|
|
}
|
|
.win-commandlayout {
|
|
min-height: 68px;
|
|
}
|
|
hr.win-command {
|
|
margin-bottom: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 321px) and (max-width: 1023px) {
|
|
hr.win-command {
|
|
margin-left: 10px;
|
|
margin-right: 9px;
|
|
}
|
|
hr.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-left: 9px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
/* Snapped AppBar reduced margins. */
|
|
@media (max-width: 320px) {
|
|
.win-commandlayout {
|
|
padding-right: 10px;
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
.win-commandlayout.win-bottom {
|
|
/* Overflow buttons up instead of down */
|
|
writing-mode: lr-bt;
|
|
}
|
|
|
|
.win-commandlayout.win-bottom:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
writing-mode: rl-bt;
|
|
}
|
|
}
|
|
|
|
/*
|
|
High contrast AppBar needs a border
|
|
*/
|
|
@media (-ms-high-contrast) {
|
|
/*
|
|
AppBar Borders
|
|
*/
|
|
.win-appbar {
|
|
border: solid 2px;
|
|
}
|
|
.win-appbar.win-top {
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
.win-appbar.win-bottom {
|
|
border-bottom: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
.win-appbar.win-top button.win-command {
|
|
padding-bottom: 10px;
|
|
}
|
|
.win-appbar.win-bottom button.win-command {
|
|
padding-top: 10px;
|
|
}
|
|
.win-appbar.win-top hr.win-command {
|
|
margin-bottom: 32px;
|
|
}
|
|
.win-appbar.win-bottom hr.win-command {
|
|
margin-top: 12px;
|
|
}
|
|
.win-commandlayout {
|
|
min-height: 66px;
|
|
}
|
|
}
|
|
/* Portrait and snapped slightly different */
|
|
@media (-ms-high-contrast) and (max-width: 1023px) {
|
|
.win-commandlayout {
|
|
min-height: 66px;
|
|
}
|
|
.win-appbar.win-top hr.win-command {
|
|
margin-bottom: 12px;
|
|
}
|
|
.win-appbar.win-bottom hr.win-command {
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Flyout control.
|
|
*/
|
|
.win-flyout {
|
|
z-index: 1008;
|
|
position: fixed;
|
|
padding: 25px 20px 20px 20px;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
margin: 5px;
|
|
min-width: 26px; /* 70px - padding - border = 26px */
|
|
max-width: 466px; /* 510px - padding - border = 466px */
|
|
min-height: 5px; /* 54px - padding - border = 5px */
|
|
max-height: calc(100% - 59px); /* 768px - margin - padding - border = 709px */
|
|
width: auto;
|
|
height: auto;
|
|
word-wrap: break-word;
|
|
overflow: auto;
|
|
-ms-touch-select: none;
|
|
font-size: 11pt;
|
|
font-weight: 400;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
.win-flyout.win-leftalign {
|
|
margin-left: 0;
|
|
}
|
|
.win-flyout.win-rightalign {
|
|
margin-right: 0;
|
|
}
|
|
.win-flyout.win-scrolls {
|
|
overflow: auto;
|
|
}
|
|
|
|
/*
|
|
Menu control.
|
|
*/
|
|
.win-menu {
|
|
padding: 5px 0 5px 0;
|
|
line-height: 33px;
|
|
text-align: left; /* Set explicitly in case our parent has different alignment, like appbar overflow. */
|
|
min-height: 38px; /* 54px - padding - border = 38px */
|
|
max-height: calc(100% - 26px); /* 768px - margin - padding - border = 742px */
|
|
max-width: none;
|
|
}
|
|
.win-menu:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
text-align: right; /* Set explicitly in case our parent has different alignment, like appbar overflow. */
|
|
}
|
|
|
|
/*
|
|
Menu commands.
|
|
*/
|
|
.win-menu button.win-command {
|
|
display: block;
|
|
border: none;
|
|
padding: 10px 20px 12px 20px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
float: none;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
line-height: 18px; /* 40px - 10px top padding - 12px bottom padding */
|
|
}
|
|
.win-menu button.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
text-align: right;
|
|
}
|
|
.win-menu button.win-command:focus {
|
|
outline: none;
|
|
}
|
|
.win-menu hr.win-command {
|
|
display: block;
|
|
height: 1px;
|
|
width: auto;
|
|
border: 0;
|
|
|
|
padding: 0;
|
|
margin: 9px 20px 10px 20px;
|
|
}
|
|
|
|
/*
|
|
Menu toggle buttons.
|
|
*/
|
|
.win-menu-toggle button.win-command::before {
|
|
font-family: 'Segoe UI Symbol';
|
|
content: "\E0E7";
|
|
visibility: hidden;
|
|
padding-left: 0px;
|
|
padding-right: 10px;
|
|
}
|
|
.win-menu-toggle button[aria-checked=true].win-command::before {
|
|
/* Display a checkbox if aria-checked is set */
|
|
visibility: visible;
|
|
}
|
|
.win-menu-toggle button.win-command:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::before {
|
|
padding-right: 0;
|
|
padding-left: 10px;
|
|
float: right;
|
|
}
|
|
|
|
/*
|
|
Settings Pane
|
|
*/
|
|
.win-settingsflyout {
|
|
z-index: 1004; /* above appbar and below flyouts */
|
|
border-left: 1px solid;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 345px; /* 346px - border (1px) */
|
|
-ms-touch-select: none;
|
|
}
|
|
.win-settingsflyout.win-wide {
|
|
width: 645px; /* 646px - border (1px) */
|
|
}
|
|
.win-settingsflyout .win-header {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
padding-top: 32px;
|
|
height: 48px;
|
|
}
|
|
/* Settings back button is slightly smaller. */
|
|
.win-settingsflyout .win-backbutton {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 8pt;
|
|
line-height: 26px;
|
|
margin-top: 3px;
|
|
}
|
|
.win-settingsflyout .win-header .win-label {
|
|
display: inline-block;
|
|
padding-left: 40px;
|
|
font-size: 20pt;
|
|
line-height: 33px;
|
|
}
|
|
.win-settingsflyout .win-content {
|
|
overflow: auto;
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
padding-top: 33px;
|
|
height: calc(100% - 112px);
|
|
}
|
|
|
|
.win-settingsflyout .win-label {
|
|
font-size: 20pt;
|
|
font-weight: 200;
|
|
line-height: normal;
|
|
}
|
|
.win-settingsflyout:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
right: auto;
|
|
left: 0;
|
|
border-left: none;
|
|
border-right: 1px solid;
|
|
}
|
|
.win-settingsflyout .win-header .win-label:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
padding-right: 40px;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section {
|
|
padding-top: 0;
|
|
padding-bottom: 39px;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section p {
|
|
margin: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section a {
|
|
margin: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 25px;
|
|
display:inline-block;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section .win-toggleswitch {
|
|
margin: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section label {
|
|
display:block;
|
|
padding-bottom: 7px;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section button,
|
|
.win-settingsflyout .win-content .win-settings-section select,
|
|
.win-settingsflyout .win-content .win-settings-section input[type=button],
|
|
.win-settingsflyout .win-content .win-settings-section input[type=text] {
|
|
margin-bottom: 25px;
|
|
margin-left: 0;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section input[type=radio] {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section button:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-bottom: 25px;
|
|
margin-left: 20px;
|
|
margin-right: 0;
|
|
}
|
|
.win-settingsflyout .win-content .win-settings-section select:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-bottom: 25px;
|
|
margin-left: 20px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section input[type=text]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-bottom: 25px;
|
|
margin-left: 20px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.win-settingsflyout .win-content .win-settings-section input[type=button]:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-bottom: 25px;
|
|
margin-left: 20px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/*
|
|
Common AppBar/Flyout/SettingsFlyout styles
|
|
*/
|
|
|
|
.win-flyout input[type=text],
|
|
.win-settingsflyout input[type=text],
|
|
.win-appbar input[type=text] {
|
|
-ms-touch-select: grippers;
|
|
}
|
|
|
|
/*
|
|
Rating control.
|
|
*/
|
|
.win-rating {
|
|
display: -ms-inline-flexbox;
|
|
height: auto;
|
|
width: auto;
|
|
white-space: normal;
|
|
-ms-flex-align: stretch;
|
|
-ms-flex-pack: center;
|
|
}
|
|
|
|
.win-rating .win-star {
|
|
-ms-flex: 1 1 auto;
|
|
height:28px;
|
|
width: 28px;
|
|
padding: 0 6px;
|
|
font-family: "Segoe UI Symbol";
|
|
font-size: 28px;
|
|
overflow: hidden;
|
|
text-indent: 0;
|
|
line-height: 1;
|
|
cursor: default;
|
|
position: relative;
|
|
letter-spacing: 0; /* Use letter-spacing: 0 to make average star look like one glyph. */
|
|
-ms-touch-action: none;
|
|
}
|
|
.win-rating.win-small .win-star {
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 14px;
|
|
padding: 0 3px;
|
|
}
|
|
.win-rating .win-star:before {
|
|
content: "\E082";
|
|
}
|
|
.win-rating .win-star.win-disabled {
|
|
cursor: default;
|
|
-ms-touch-action: auto;
|
|
}
|
|
|
|
/*
|
|
DatePicker control.
|
|
*/
|
|
.win-datepicker {
|
|
display: -ms-inline-flexbox;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
.win-datepicker .win-datepicker-month {
|
|
margin-right: 20px;
|
|
}
|
|
.win-datepicker .win-datepicker-date.win-order0,
|
|
.win-datepicker .win-datepicker-date.win-order1 {
|
|
margin-right: 20px;
|
|
}
|
|
.win-datepicker .win-datepicker-year.win-order0 {
|
|
margin-right: 20px;
|
|
}
|
|
.win-datepicker .win-datepicker-month:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-right: 0;
|
|
margin-left: 20px;
|
|
}
|
|
.win-datepicker .win-datepicker-date.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm),
|
|
.win-datepicker .win-datepicker-date.win-order1:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-right: 0;
|
|
margin-left: 20px;
|
|
}
|
|
.win-datepicker .win-datepicker-year.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm){
|
|
margin-right: 0;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/*
|
|
TimePicker control.
|
|
*/
|
|
.win-timepicker {
|
|
display: -ms-inline-flexbox;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
.win-timepicker .win-timepicker-hour {
|
|
margin-right: 20px;
|
|
}
|
|
.win-timepicker .win-timepicker-period.win-order0 {
|
|
margin-right: 20px;
|
|
}
|
|
.win-timepicker .win-timepicker-minute.win-order1 {
|
|
margin-right: 20px;
|
|
}
|
|
.win-timepicker .win-timepicker-period.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-right: 0;
|
|
margin-left: 20px;
|
|
}
|
|
.win-timepicker .win-timepicker-minute.win-order1:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm),
|
|
.win-timepicker .win-timepicker-minute.win-order0:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-left: 20px;
|
|
margin-right: 0;
|
|
}
|
|
.win-timepicker .win-timepicker-hour:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
margin-right: 0;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/*
|
|
Toggle control.
|
|
*/
|
|
.win-toggleswitch {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
vertical-align: top;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
.win-toggleswitch .win-switch {
|
|
display: inline-block;
|
|
height: 19px;
|
|
width: 50px;
|
|
padding: 5px;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
-ms-grid-column: 2;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-tooltip {
|
|
display: none;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-ticks-before,
|
|
.win-toggleswitch .win-switch::-ms-ticks-after {
|
|
display: none;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-track {
|
|
height: 15px; /* 19px - 2px borders */
|
|
width: 46px;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-fill-lower,
|
|
.win-toggleswitch .win-switch::-ms-fill-upper {
|
|
height: 13px; /* 19px - 2px borders - 1px margins */
|
|
padding: 0;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-fill-lower {
|
|
margin-left: 1px;
|
|
}
|
|
.win-toggleswitch .win-switch:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-lower {
|
|
margin-left: 0;
|
|
margin-right: 1px;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-fill-upper {
|
|
margin-right: 1px;
|
|
}
|
|
.win-toggleswitch .win-switch:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm)::-ms-fill-upper {
|
|
margin-right: 0;
|
|
margin-left: 1px;
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-thumb {
|
|
height: 19px;
|
|
width: 12px;
|
|
}
|
|
.win-toggleswitch .win-title {
|
|
display: block;
|
|
vertical-align: top;
|
|
max-width:470px;
|
|
font-size: 11pt;
|
|
font-weight: 300;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
.win-toggleswitch .win-label {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 5px 20px 5px 0px;
|
|
min-width: 65px;
|
|
direction: inherit;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-row: 1;
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
line-height: 1.3636; /* 20px when font-size is 11pt */
|
|
}
|
|
.win-toggleswitch .win-label:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
|
|
padding: 5px 0px 5px 20px;
|
|
}
|
|
.win-toggleswitch .win-label.win-hidden {
|
|
visibility: hidden;
|
|
}
|
|
.win-focus-hide {
|
|
outline: none;
|
|
}
|
|
|
|
/*
|
|
Tooltip control.
|
|
*/
|
|
.win-tooltip {
|
|
display: block;
|
|
position: fixed;
|
|
top: 30px;
|
|
left: 30px;
|
|
max-width: 380px;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 6px 10px 7px 10px;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
z-index: 9999;
|
|
word-wrap: break-word;
|
|
animation-fill-mode: both;
|
|
font-size: 9pt;
|
|
font-weight: 400;
|
|
line-height: 1.6667; /* 20px when font-size is 9pt */
|
|
}
|
|
.win-tooltip-phantom {
|
|
display: block;
|
|
position: fixed;
|
|
top: 30px;
|
|
left: 30px;
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (-ms-view-state: snapped) {
|
|
.win-tooltip {
|
|
max-width: 310px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.win-viewbox {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.win-semanticzoom {
|
|
height: 400px;
|
|
-ms-touch-action: pan-x pan-y double-tap-zoom;
|
|
}
|
|
.win-semanticzoom * {
|
|
-ms-touch-action: inherit;
|
|
}
|
|
|
|
.win-semanticzoom-button {
|
|
z-index: 100;
|
|
position: absolute;
|
|
min-width: 25px;
|
|
min-height: 25px;
|
|
width: 25px;
|
|
height: 25px;
|
|
padding: 0px;
|
|
bottom: 21px;
|
|
-ms-touch-action: none;
|
|
}
|
|
|
|
.win-semanticzoom-button::before {
|
|
font-family: "Segoe UI Symbol";
|
|
font-weight: normal;
|
|
font-size: 11pt;
|
|
content: "\E0B8"; /* minus sign */
|
|
}
|
|
|
|
.win-semanticzoom-button-location.rtl {
|
|
left: 4px;
|
|
}
|
|
|
|
.win-semanticzoom-button-location.ltr{
|
|
right: 4px;
|
|
}
|
|
|
|
/*
|
|
ScrollView control.
|
|
*/
|
|
.win-scrollview {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
/*
|
|
ListView control.
|
|
*/
|
|
.win-listview {
|
|
overflow: hidden;
|
|
height: 400px;
|
|
}
|
|
.win-listview .win-backdrop {
|
|
position: absolute;
|
|
}
|
|
.win-listview .win-surface {
|
|
position: relative;
|
|
overflow: visible;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.win-listview > .win-viewport {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
.win-listview > .win-viewport.win-horizontal {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
.win-listview > .win-viewport.win-vertical {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.win-listview > .win-horizontal .win-container {
|
|
margin: 5px;
|
|
}
|
|
.win-listview > .win-vertical .win-container {
|
|
margin: 5px 24px 5px 7px;
|
|
}
|
|
.win-listview.win-rtl > .win-vertical .win-container {
|
|
margin: 5px 7px 5px 24px;
|
|
}
|
|
.win-listview .win-container {
|
|
cursor: default;
|
|
position: absolute;
|
|
z-index: 0;
|
|
}
|
|
.win-listview .win-container.win-swipe {
|
|
z-index: 1;
|
|
}
|
|
.win-listview.win-swipeable .win-horizontal .win-container {
|
|
-ms-touch-action:pan-x pinch-zoom double-tap-zoom;
|
|
}
|
|
.win-listview.win-swipeable .win-vertical .win-container {
|
|
-ms-touch-action:pan-y pinch-zoom double-tap-zoom;
|
|
}
|
|
.win-semanticzoom .win-listview > .win-viewport * {
|
|
-ms-touch-action: auto;
|
|
}
|
|
.win-semanticzoom .win-listview > .win-viewport.win-zooming-x {
|
|
overflow-x: visible;
|
|
}
|
|
.win-semanticzoom .win-listview > .win-viewport.win-zooming-y {
|
|
overflow-y: visible;
|
|
}
|
|
.win-listview .win-item {
|
|
/* Used to place above .win-selectionbackground in ListView */
|
|
z-index: 1;
|
|
}
|
|
.win-listview .win-item {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.win-listview > .win-vertical .win-item
|
|
{
|
|
/* Allow flex box to fill win-item in list layout */
|
|
width: 100%;
|
|
}
|
|
.win-listview .win-item:focus {
|
|
outline-style: none;
|
|
}
|
|
.win-listview .win-focusedoutline {
|
|
width: calc(100% + 4px);
|
|
height: calc(100% + 4px);
|
|
left: -2px;
|
|
top: -2px;
|
|
position: absolute;
|
|
z-index: 5;
|
|
}
|
|
.win-container.win-selected .win-selectionborder {
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
}
|
|
.win-container.win-selected:hover .win-selectionborder {
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
}
|
|
.win-listview .win-groupheader {
|
|
position: absolute;
|
|
top: 0;
|
|
padding: 10px 10px 10px 2px;
|
|
cursor: default;
|
|
overflow: hidden;
|
|
margin-left: 70px;
|
|
font-size: 20pt;
|
|
font-weight: 200;
|
|
line-height: 1.2; /* 32px when font-size is 20pt */
|
|
}
|
|
.win-listview.win-rtl .win-groupheader {
|
|
margin-left: 0;
|
|
margin-right: 70px;
|
|
padding-left: 10px;
|
|
padding-right: 2px;
|
|
}
|
|
.win-listview.win-groups > .win-horizontal .win-surface {
|
|
margin-left: -70px;
|
|
}
|
|
.win-listview.win-groups.win-rtl > .win-horizontal .win-surface {
|
|
margin-left: 0;
|
|
margin-right: -70px;
|
|
}
|
|
.win-surface ._win-proxy {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
-ms-touch-action: none;
|
|
}
|
|
.win-selectionborder {
|
|
position: absolute;
|
|
opacity: inherit;
|
|
z-index: 2;
|
|
}
|
|
.win-container.win-selected .win-selectionbordertop {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 0;
|
|
border-right-style: hidden !important;
|
|
border-bottom-style: hidden !important;
|
|
border-left-style: hidden !important;
|
|
}
|
|
.win-container.win-selected .win-selectionborderright {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
border-top-style: hidden !important;
|
|
border-bottom-style: hidden !important;
|
|
border-left-style: hidden !important;
|
|
}
|
|
.win-container.win-selected .win-selectionborderbottom {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 0;
|
|
border-top-style: hidden !important;
|
|
border-right-style: hidden !important;
|
|
border-left-style: hidden !important;
|
|
}
|
|
.win-container.win-selected .win-selectionborderleft {
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
border-top-style: hidden !important;
|
|
border-right-style: hidden !important;
|
|
border-bottom-style: hidden !important;
|
|
}
|
|
.win-selectionbackground {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* Used to place behind .win-item in the ListView */
|
|
z-index: 0;
|
|
}
|
|
.win-selectioncheckmarkbackground {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-width: 20px;
|
|
border-style: solid;
|
|
z-index: 3;
|
|
}
|
|
.win-listview.win-rtl .win-selectioncheckmarkbackground {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
.win-selectioncheckmark {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 2px;
|
|
right: 0;
|
|
top: 0;
|
|
font-family: Segoe UI Symbol;
|
|
font-size: 11pt;
|
|
z-index: 4;
|
|
}
|
|
.win-listview.win-rtl .win-selectioncheckmark {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
.win-selectionhint {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 2px;
|
|
right: 0;
|
|
font-family: Segoe UI Symbol;
|
|
font-size: 11pt;
|
|
opacity: 0.5;
|
|
}
|
|
.win-selectionhint.win-revealed {
|
|
opacity: 1;
|
|
}
|
|
.win-listview.win-rtl .win-selectionhint {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
.win-listview .win-progress {
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-left: -30px;
|
|
margin-top: -30px;
|
|
z-index: 1;
|
|
position: absolute;
|
|
}
|
|
.win-listview .win-progress::-ms-fill {
|
|
animation-name: -ms-ring;
|
|
}
|
|
|
|
/*
|
|
FlipView control.
|
|
*/
|
|
.win-flipview {
|
|
overflow: hidden;
|
|
height: 400px;
|
|
}
|
|
|
|
.win-flipview .win-surface {
|
|
-ms-scroll-chaining: none;
|
|
}
|
|
|
|
.win-flipview .win-navleft {
|
|
left: 0%;
|
|
top: 50%;
|
|
margin-top: -19px;
|
|
}
|
|
.win-flipview .win-navright {
|
|
left: 100%;
|
|
top: 50%;
|
|
margin-left: -69px;
|
|
margin-top: -19px;
|
|
}
|
|
.win-flipview .win-navtop {
|
|
left: 50%;
|
|
top: 0%;
|
|
margin-left: -35px;
|
|
}
|
|
.win-flipview .win-navbottom {
|
|
left: 50%;
|
|
top: 100%;
|
|
margin-left: -35px;
|
|
margin-top: -39px;
|
|
}
|
|
.win-flipview .win-navbutton {
|
|
border: none;
|
|
width: 69px;
|
|
height: 39px;
|
|
z-index: 1;
|
|
position: absolute;
|
|
font-family: "Segoe UI Symbol";
|
|
font-size: 16pt;
|
|
padding: 0;
|
|
min-width: 0;
|
|
}
|
|
.win-flipview .win-item, .win-flipview .win-item > .win-template {
|
|
display:-ms-flexbox;
|
|
height: 100%;
|
|
width: 100%;
|
|
-ms-flex-align:center;
|
|
-ms-flex-pack:center;
|
|
}
|
|
|
|
/*
|
|
Typographic color definitions.
|
|
*/
|
|
|
|
body {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.win-ui-dark .win-type-interactive:hover {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.win-ui-dark .win-type-interactive:hover:active {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.win-ui-dark .win-type-interactive:-ms-keyboard-active {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-type-interactive:hover {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
.win-type-interactive:hover:active {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.win-type-interactive:-ms-keyboard-active {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
These classes reverse the colors on the subtree to which they are applied.
|
|
*/
|
|
|
|
.win-ui-light {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark {
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(29, 29, 29);
|
|
}
|
|
|
|
/*
|
|
Text selection color
|
|
*/
|
|
::selection {
|
|
background-color: rgb(87, 41, 193);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
/*
|
|
Text input, checkbox, radio, and select control colors.
|
|
*/
|
|
.win-ui-dark input[type=text], .win-ui-dark input[type=password],
|
|
.win-ui-dark input[type=email], .win-ui-dark input[type=number],
|
|
.win-ui-dark input[type=tel], .win-ui-dark input[type=url],
|
|
.win-ui-dark input[type=search], .win-ui-dark textarea, .win-ui-dark .win-textarea,
|
|
.win-ui-dark select, .win-ui-dark input::-ms-check {
|
|
background-clip: border-box;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
border-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark input[type=text]:hover, .win-ui-dark input[type=password]:hover,
|
|
.win-ui-dark input[type=email]:hover, .win-ui-dark input[type=number]:hover,
|
|
.win-ui-dark input[type=tel]:hover, .win-ui-dark input[type=url]:hover,
|
|
.win-ui-dark input[type=search]:hover, .win-ui-dark textarea:hover,
|
|
.win-ui-dark .win-textarea:hover, .win-ui-dark select:hover, .win-ui-dark input:hover::-ms-check {
|
|
background-clip: border-box;
|
|
background-color: rgba(255, 255, 255, 0.87);
|
|
border-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark input:hover:active::-ms-check { /* only checkbox and radio have press state */
|
|
background-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have press state */
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark input[type=text]:focus, .win-ui-dark input[type=text]:active,
|
|
.win-ui-dark input[type=password]:focus, .win-ui-dark input[type=password]:active,
|
|
.win-ui-dark input[type=email]:focus, .win-ui-dark input[type=email]:active,
|
|
.win-ui-dark input[type=number]:focus, .win-ui-dark input[type=number]:active,
|
|
.win-ui-dark input[type=tel]:focus, .win-ui-dark input[type=tel]:active,
|
|
.win-ui-dark input[type=url]:focus, .win-ui-dark input[type=url]:active,
|
|
.win-ui-dark input[type=search]:focus, .win-ui-dark input[type=search]:active,
|
|
.win-ui-dark textarea:focus, .win-ui-dark textarea:active,
|
|
.win-ui-dark .win-textarea:focus, .win-ui-dark .win-textarea:active,
|
|
.win-ui-dark select:focus, .win-ui-dark select:active {
|
|
background-clip: border-box;
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark input[type=text]:disabled, .win-ui-dark input[type=password]:disabled,
|
|
.win-ui-dark input[type=email]:disabled, .win-ui-dark input[type=number]:disabled,
|
|
.win-ui-dark input[type=tel]:disabled, .win-ui-dark input[type=url]:disabled,
|
|
.win-ui-dark input[type=search]:disabled, .win-ui-dark input[type=file]::-ms-value,
|
|
.win-ui-dark textarea:disabled, .win-ui-dark .win-textarea:disabled, .win-ui-dark select:disabled {
|
|
background-clip: border-box;
|
|
background-color: transparent;
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-ui-dark input:disabled::-ms-check, .win-ui-dark input:disabled:active::-ms-check { /* checkbox and radio have filled disabled state in dark */
|
|
background-clip: border-box;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
border-color: transparent;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
input[type=text], input[type=password],
|
|
input[type=email], input[type=number],
|
|
input[type=tel], input[type=url],
|
|
input[type=search], select, textarea,
|
|
.win-textarea, input::-ms-check {
|
|
background-clip: padding-box;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
border-color: rgba(0, 0, 0, 0.27);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
input[type=text]:hover, input[type=password]:hover,
|
|
input[type=email]:hover, input[type=number]:hover,
|
|
input[type=tel]:hover, input[type=url]:hover,
|
|
input[type=search]:hover, textarea:hover,
|
|
select:hover, .win-textarea:hover, input:hover::-ms-check {
|
|
background-color: rgba(255, 255, 255, 0.87);
|
|
border-color: rgba(0, 0, 0, 0.44);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
input[type=text]:focus, input[type=text]:active,
|
|
input[type=password]:focus, input[type=password]:active,
|
|
input[type=email]:focus, input[type=email]:active,
|
|
input[type=number]:focus, input[type=number]:active,
|
|
input[type=tel]:focus, input[type=tel]:active,
|
|
input[type=url]:focus, input[type=url]:active,
|
|
input[type=search]:focus, input[type=search]:active,
|
|
textarea:focus, textarea:active,
|
|
.win-textarea:focus, .win-textarea:active,
|
|
select:focus, select:active {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgba(0, 0, 0, 0.6);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
input:hover:active::-ms-check { /* only checkbox and radio have press state */
|
|
background-clip: border-box;
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: transparent;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have press state */
|
|
background-clip: border-box;
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: transparent;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
input[type=text]:disabled, input[type=password]:disabled,
|
|
input[type=email]:disabled, input[type=number]:disabled,
|
|
input[type=tel]:disabled, input[type=url]:disabled,
|
|
input[type=search]:disabled, input[type=file]::-ms-value,
|
|
textarea:disabled, .win-textarea:disabled, select:disabled,
|
|
input:disabled::-ms-check, input:disabled:active::-ms-check {
|
|
background-clip: padding-box;
|
|
background-color: rgba(202, 202, 202, 0.4);
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
Placeholder text style.
|
|
*/
|
|
.win-ui-dark input[type]:-ms-input-placeholder, input[type]:-ms-input-placeholder,
|
|
.win-ui-dark textarea:-ms-input-placeholder, textarea:-ms-input-placeholder {
|
|
color: rgba(0, 0, 0, 0.6); /* same in dark and light */
|
|
}
|
|
.win-ui-dark input[type]:disabled:-ms-input-placeholder, .win-ui-dark textarea:disabled:-ms-input-placeholder {
|
|
color: rgba(255, 255, 255, 0.22);
|
|
}
|
|
input[type]:disabled:-ms-input-placeholder, textarea:disabled:-ms-input-placeholder {
|
|
color: rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
/*
|
|
Invalid style.
|
|
*/
|
|
input[type]:invalid {
|
|
outline-color: rgb(255, 128, 51);
|
|
outline-width: 2px;
|
|
}
|
|
|
|
/*
|
|
Clear and reveal buttons.
|
|
*/
|
|
input::-ms-clear, input::-ms-reveal {
|
|
background-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
input::-ms-clear:hover, input::-ms-reveal:hover {
|
|
background-color: rgb(222, 222, 222);
|
|
}
|
|
input::-ms-clear:hover:active, input::-ms-reveal:hover:active {
|
|
background-color: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
/*
|
|
Option for select control (all colors are same for both light and dark).
|
|
*/
|
|
option:checked, select:focus::-ms-value {
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(70, 23, 180);
|
|
}
|
|
option:hover {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(197, 197, 197);
|
|
}
|
|
select:focus option:hover {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(222, 222, 222);
|
|
}
|
|
option:checked:hover, select:focus option:checked:hover {
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(95, 55, 190);
|
|
}
|
|
option:hover:active, select:focus option:hover:active{
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(211, 211, 211);
|
|
}
|
|
.win-ui-dark option:checked:disabled, .win-ui-dark option:checked:disabled:active,
|
|
.win-ui-dark optgroup:disabled option:checked, .win-ui-dark optgroup:disabled option:checked:active,
|
|
.win-ui-dark select:disabled option:checked, .win-ui-dark select:disabled option:checked:active,
|
|
.win-ui-dark select:disabled:focus::-ms-value {
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
option:checked:disabled, option:checked:disabled:active,
|
|
optgroup:disabled option:checked, optgroup:disabled option:checked:active,
|
|
select:disabled option:checked, select:disabled option:checked:active,
|
|
select:disabled:focus::-ms-value {
|
|
background-color: rgba(0, 0, 0, 0.55);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/*
|
|
Button control colors.
|
|
*/
|
|
.win-ui-dark button, .win-ui-dark input[type=button], .win-ui-dark input[type=submit],
|
|
.win-ui-dark input[type=reset], .win-ui-dark input[type=file]::-ms-browse {
|
|
background-color: transparent;
|
|
border-color: rgb(255, 255, 255);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[type=submit], .win-ui-dark input[type=submit] {
|
|
background-clip: padding-box;
|
|
background-color: rgb(70, 23, 180);
|
|
}
|
|
.win-ui-dark button:hover, .win-ui-dark input[type=button]:hover, .win-ui-dark input[type=reset]:hover,
|
|
.win-ui-dark input[type=file]::-ms-browse:hover {
|
|
background-color: rgba(255, 255, 255, 0.13);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[type=submit]:hover, .win-ui-dark input[type=submit]:hover {
|
|
background-clip: padding-box;
|
|
background-color: rgb(95, 55, 190);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button:hover:active, .win-ui-dark button[type=submit]:hover:active,
|
|
.win-ui-dark input[type=button]:hover:active, .win-ui-dark input[type=reset]:hover:active,
|
|
.win-ui-dark input[type=submit]:hover:active, .win-ui-dark input[type=file]::-ms-browse:hover:active {
|
|
background-clip: border-box;
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark button:-ms-keyboard-active, .win-ui-dark button[type=submit]:-ms-keyboard-active,
|
|
.win-ui-dark input[type=button]:-ms-keyboard-active, .win-ui-dark input[type=reset]:-ms-keyboard-active,
|
|
.win-ui-dark input[type=submit]:-ms-keyboard-active {
|
|
background-clip: border-box;
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark button:disabled, .win-ui-dark button[type=submit]:disabled,
|
|
.win-ui-dark input[type=button]:disabled, .win-ui-dark input[type=reset]:disabled,
|
|
.win-ui-dark input[type=submit]:disabled, .win-ui-dark input[type=file]:disabled::-ms-browse,
|
|
.win-ui-dark button:disabled:active, .win-ui-dark button[type=submit]:disabled:active,
|
|
.win-ui-dark input[type=button]:disabled:active, .win-ui-dark input[type=reset]:disabled:active,
|
|
.win-ui-dark input[type=submit]:disabled:active, .win-ui-dark input[type=file]:disabled::-ms-browse:active {
|
|
background-color: transparent;
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
button, input[type=button], input[type=submit],
|
|
input[type=reset], input[type=file]::-ms-browse {
|
|
background-color: rgba(182, 182, 182, 0.7);
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
button[type=submit], input[type=submit]{
|
|
background-clip: border-box;
|
|
background-color: rgb(70, 23, 180);
|
|
border-color: transparent;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button:hover, input[type=button]:hover, input[type=reset]:hover,
|
|
input[type=file]::-ms-browse:hover {
|
|
background-color: rgba(205, 205, 205, 0.82);
|
|
border-color: rgba(164, 164, 164, 0.45);
|
|
}
|
|
button[type=submit]:hover, input[type=submit]:hover {
|
|
background-clip: border-box;
|
|
background-color: rgb(95, 55, 190);
|
|
border-color: transparent;
|
|
}
|
|
button:hover:active, button[type=submit]:hover:active,
|
|
input[type=button]:hover:active, input[type=reset]:hover:active,
|
|
input[type=submit]:hover:active, input[type=file]::-ms-browse:hover:active {
|
|
background-clip: border-box;
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: transparent;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button:-ms-keyboard-active, button[type=submit]:-ms-keyboard-active,
|
|
input[type=button]:-ms-keyboard-active, input[type=reset]:-ms-keyboard-active,
|
|
input[type=submit]:-ms-keyboard-active {
|
|
background-clip: border-box;
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: transparent;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button:disabled, button[type=submit]:disabled,
|
|
input[type=button]:disabled, input[type=reset]:disabled,
|
|
input[type=submit]:disabled, input[type=file]:disabled::-ms-browse,
|
|
button:disabled:active, button[type=submit]:disabled:active,
|
|
input[type=button]:disabled:active, input[type=reset]:disabled:active,
|
|
input[type=submit]:disabled:active, input[type=file]:disabled::-ms-browse:active {
|
|
background-color: rgba(202, 202, 202, 0.4);
|
|
border-color: rgba(0, 0, 0, 0.08);
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
input[type=file]:disabled::-ms-browse, input[type=file]:disabled::-ms-browse:active {
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/*
|
|
File upload control colors.
|
|
*/
|
|
input[type=file] {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
}
|
|
|
|
/*
|
|
Link colors.
|
|
*/
|
|
.win-ui-dark a {
|
|
color: rgb(156, 114, 255);
|
|
}
|
|
.win-ui-dark a:hover:active {
|
|
color: rgba(156, 114, 255, 0.6);
|
|
}
|
|
.win-ui-dark a:hover {
|
|
color: rgba(156, 114, 255, 0.8);
|
|
}
|
|
.win-ui-dark a[disabled], .win-ui-dark a[disabled]:active { /* :disabled pseudo-class doesn't apply to a, even though disabled attribute stops navigation */
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
a {
|
|
color: rgb(79, 26, 203);
|
|
}
|
|
a:hover:active {
|
|
color: rgba(79, 26, 203, 0.6);
|
|
}
|
|
a:hover {
|
|
color: rgba(79, 26, 203, 0.8);
|
|
}
|
|
a[disabled], a[disabled]:active { /* :disabled pseudo-class doesn't apply to a, even though disabled attribute stops navigation */
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
Range control colors.
|
|
*/
|
|
input[type=range], input[type=range]::-ms-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.win-ui-dark input[type=range]::-ms-fill-lower {
|
|
background-color: rgb(91, 46, 197);
|
|
}
|
|
.win-ui-dark input[type=range]:hover::-ms-fill-lower {
|
|
background-color: rgb(114, 75, 205);
|
|
}
|
|
.win-ui-dark input[type=range]:active::-ms-fill-lower {
|
|
background-color: rgb(129, 82, 239);
|
|
}
|
|
.win-ui-dark input[type=range]:disabled::-ms-fill-lower {
|
|
background-color: rgba(255, 255, 255, 0.23);
|
|
}
|
|
input[type=range]::-ms-fill-lower {
|
|
background-color: rgb(70, 23, 180);
|
|
}
|
|
input[type=range]:hover::-ms-fill-lower {
|
|
background-color: rgb(95, 55, 190);
|
|
}
|
|
input[type=range]:active::-ms-fill-lower {
|
|
background-color: rgb(114, 65, 228);
|
|
}
|
|
input[type=range]:disabled::-ms-fill-lower {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.win-ui-dark input[type=range]::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.16);
|
|
}
|
|
.win-ui-dark input[type=range]:hover::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.18);
|
|
}
|
|
.win-ui-dark input[type=range]:active::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.23);
|
|
}
|
|
.win-ui-dark input[type=range]:disabled::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.16);
|
|
}
|
|
input[type=range]::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
input[type=range]:hover::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
}
|
|
input[type=range]:active::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
input[type=range]:disabled::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.win-ui-dark input[type=range]::-ms-thumb {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark input[type=range]:disabled::-ms-thumb {
|
|
background-color: rgb(126, 126, 126);
|
|
}
|
|
input[type=range]::-ms-thumb {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
input[type=range]:disabled::-ms-thumb {
|
|
background-color: rgb(146, 146, 146);
|
|
}
|
|
|
|
.win-ui-dark input[type=range]::-ms-ticks-before,
|
|
.win-ui-dark input[type=range]::-ms-ticks-after {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
input[type=range]::-ms-ticks-before,
|
|
input[type=range]::-ms-ticks-after {
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/*
|
|
Progress control colors.
|
|
*/
|
|
.win-ui-dark progress {
|
|
background-color: rgba(255,255,255,0.35);
|
|
color: rgb(91, 46, 197);
|
|
}
|
|
progress {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
color: rgb(70, 23, 180);
|
|
}
|
|
.win-ui-dark progress:indeterminate {
|
|
color: rgb(138, 87, 255);
|
|
}
|
|
progress:indeterminate {
|
|
color: rgb(70, 23, 180);
|
|
}
|
|
progress::-ms-fill {
|
|
background-color: currentColor;
|
|
}
|
|
/*
|
|
Explicitly define indeterminate background transparent for dark and light
|
|
because ".win-ui-light progress" has higher specificity than "progress:indeterminate".
|
|
*/
|
|
.win-ui-dark progress:indeterminate, progress:indeterminate {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*
|
|
FlipView control colors.
|
|
*/
|
|
.win-flipview .win-navbutton {
|
|
background-color: rgba(213, 213, 213, 0.35);
|
|
color: rgba(0, 0, 0, 0.60);
|
|
}
|
|
.win-flipview .win-navbutton:hover {
|
|
background-color: rgba(215, 215, 215, 0.94);
|
|
color: rgba(0, 0, 0, 1.0);
|
|
}
|
|
.win-flipview .win-navbutton:hover:active {
|
|
background-color: rgba(41, 41, 41, 0.74);
|
|
color: rgba(255, 255, 255, 1.0);
|
|
}
|
|
|
|
/*
|
|
ListView control colors.
|
|
*/
|
|
.win-ui-dark .win-listview .win-container:not(.win-footprint) {
|
|
background-color: rgb(29, 29, 29);
|
|
}
|
|
.win-listview .win-container:not(.win-footprint) {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-listview .win-container:hover {
|
|
outline: rgba(255, 255, 255, 0.3) solid 3px;
|
|
}
|
|
.win-ui-dark .win-listview.win-selectionstylefilled .win-container:hover {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
.win-ui-dark .win-listview .win-focusedoutline {
|
|
outline: rgb(255, 255, 255) solid 2px;
|
|
}
|
|
.win-listview .win-container:hover {
|
|
outline: rgba(0, 0, 0, 0.3) solid 3px;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-container:hover {
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.win-listview .win-focusedoutline {
|
|
outline: rgb(0, 0, 0) solid 2px;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-container.win-selected:hover {
|
|
background-color: rgb(95, 55, 190);
|
|
}
|
|
.win-ui-dark .win-listview .win-container.win-swipe:hover {
|
|
background-color: rgb(29, 29, 29);
|
|
outline: none;
|
|
}
|
|
.win-listview .win-container.win-swipe:hover {
|
|
background-color: rgb(255, 255, 255);
|
|
outline: none;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectionborder {
|
|
border-color: rgb(70, 23, 180);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-container.win-selected .win-selectionborder {
|
|
border-color: transparent;
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder {
|
|
border-color: rgb(95, 55, 190);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected .win-selectionbackground {
|
|
background-color: rgb(70, 23, 180);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected:hover .win-selectionbackground {
|
|
background-color: rgb(95, 55, 190);
|
|
}
|
|
.win-selectioncheckmark {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-selectionhint {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-selectionhint {
|
|
color: rgb(70, 23, 180);
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
|
|
border-top-color: rgb(70, 23, 180);
|
|
border-right-color: rgb(70, 23, 180);
|
|
border-left-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selectioncheckmarkbackground {
|
|
border-color: transparent;
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground {
|
|
border-top-color: rgb(95, 55, 190);
|
|
border-right-color: rgb(95, 55, 190);
|
|
border-left-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
|
|
border-left-color: rgb(70, 23, 180);
|
|
border-right-color: transparent;
|
|
}
|
|
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground {
|
|
border-left-color: rgb(95, 55, 190);
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.win-listview.win-selectionstylefilled .win-selected a,
|
|
.win-listview.win-selectionstylefilled .win-selected progress,
|
|
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-full {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected a:hover:active {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected a:hover {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected button,
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=button],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=reset],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=text],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=password],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=email],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=number],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=tel],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=url],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=search],
|
|
.win-listview.win-selectionstylefilled .win-selected input::-ms-check,
|
|
.win-listview.win-selectionstylefilled .win-selected textarea,
|
|
.win-listview.win-selectionstylefilled .win-selected .win-textarea,
|
|
.win-listview.win-selectionstylefilled .win-selected select {
|
|
background-clip: border-box;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
border-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected button[type=submit],
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=submit] {
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-lower {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-thumb {
|
|
background-color: rgb(0,0,0);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-upper,
|
|
.win-listview.win-selectionstylefilled .win-selected progress {
|
|
background-color: rgba(255, 255, 255, 0.16);
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected progress:indeterminate {
|
|
background-color: transparent;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-empty {
|
|
color: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
/*
|
|
Back button control colors.
|
|
*/
|
|
.win-ui-dark .win-backbutton {
|
|
background-color: transparent;
|
|
border-color: rgb(255, 255, 255);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-backbutton:hover {
|
|
background-color: rgba(255, 255, 255, 0.13);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-backbutton:hover:active {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark .win-backbutton:-ms-keyboard-active {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(255, 255, 255);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark .win-backbutton:disabled, .win-ui-dark .win-backbutton:disabled:active {
|
|
background-clip: padding-box;
|
|
background-color: transparent;
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-backbutton {
|
|
background-color: transparent;
|
|
border-color: rgb(0, 0, 0);
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-backbutton:hover {
|
|
background-color: rgba(0, 0, 0, 0.13);
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
.win-backbutton:hover:active {
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-backbutton:-ms-keyboard-active {
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-backbutton:disabled, .win-backbutton:disabled:active {
|
|
background-clip: padding-box;
|
|
background-color: transparent;
|
|
border-color: rgba(0, 0, 0, 0.4);
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
Command button colors.
|
|
*/
|
|
button.win-command {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
button.win-command:hover {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
button.win-command:active {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
button.win-command:hover:active {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
button.win-command:-ms-keyboard-active {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
button.win-command:disabled {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
.win-ui-dark button.win-command:focus {
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
button.win-command:focus {
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
.win-hidefocus:focus {
|
|
outline: none;
|
|
}
|
|
/*
|
|
win-hide-focus needs the qualifier for win-ui-light or dark,
|
|
otherwise .win-ui-dark button.win-command:focus is more
|
|
qualified and stomps on the transparent that doesn't have .win-ui-dark
|
|
*/
|
|
.win-ui-dark .win-command.win-hidefocus:focus,
|
|
.win-command.win-hidefocus:focus {
|
|
border-color: transparent;
|
|
}
|
|
.win-ui-dark .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button:hover:active .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark button:-ms-keyboard-active .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-ui-dark button:disabled .win-commandimage,
|
|
.win-ui-dark button:disabled:active .win-commandimage {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-ui-dark button[aria-checked=true] .win-commandimage,
|
|
.win-ui-dark button[aria-checked=true]:active .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
.win-ui-dark button[aria-checked=true]:hover .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
.win-ui-dark button[aria-checked=true]:hover:active .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[aria-checked=true]:-ms-keyboard-active .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[aria-checked=true]:disabled .win-commandimage,
|
|
.win-ui-dark button[aria-checked=true]:disabled:active .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
button:hover:active .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button:-ms-keyboard-active .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button:disabled .win-commandimage,
|
|
button:disabled:active .win-commandimage {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
button[aria-checked=true] .win-commandimage,
|
|
button[aria-checked=true]:active .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button[aria-checked=true]:hover .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
button[aria-checked=true]:hover:active .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
button[aria-checked=true]:-ms-keyboard-active .win-commandimage {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
button[aria-checked=true]:disabled .win-commandimage,
|
|
button[aria-checked=true]:disabled:active .win-commandimage {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
/*
|
|
Command ring colors.
|
|
*/
|
|
.win-ui-dark .win-commandring, .win-ui-dark button:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button:hover .win-commandring {
|
|
background-color: rgba(255, 255, 255, 0.13);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button:hover:active .win-commandring {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button:-ms-keyboard-active .win-commandring {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button:disabled .win-commandring,
|
|
.win-ui-dark button:disabled:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-ui-dark button[aria-checked=true] .win-commandring,
|
|
.win-ui-dark button[aria-checked=true]:active .win-commandring {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[aria-checked=true]:hover .win-commandring {
|
|
background-color: rgb(222, 222, 222);
|
|
border-color: rgb(222, 222, 222);
|
|
}
|
|
.win-ui-dark button[aria-checked=true]:hover:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[aria-checked=true]:-ms-keyboard-active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark button[aria-checked=true]:disabled .win-commandring,
|
|
.win-ui-dark button[aria-checked=true]:disabled:active .win-commandring {
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-commandring, button:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button:hover .win-commandring {
|
|
background-color: rgba(0, 0, 0, 0.13);
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button:hover:active .win-commandring {
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button:-ms-keyboard-active .win-commandring {
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button:disabled .win-commandring,
|
|
button:disabled:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
button[aria-checked=true] .win-commandring,
|
|
button[aria-checked=true]:active .win-commandring {
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button[aria-checked=true]:hover .win-commandring {
|
|
background-color: rgb(33, 33, 33);
|
|
border-color: rgb(33, 33, 33);
|
|
}
|
|
button[aria-checked=true]:hover:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button[aria-checked=true]:-ms-keyboard-active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
button[aria-checked=true]:disabled .win-commandring,
|
|
button[aria-checked=true]:disabled:active .win-commandring {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
border-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
Command button labels colors.
|
|
*/
|
|
.win-ui-dark button.win-command:disabled .win-label,
|
|
.win-ui-dark button.win-command:disabled:active .win-label {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
button.win-command:disabled .win-label,
|
|
button.win-command:disabled:active .win-label {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/*
|
|
AppBarCommand (and MenuCommand) separator.
|
|
*/
|
|
hr.win-command {
|
|
/* Same color in both light and dark. */
|
|
background-color: rgb(123, 123, 123);
|
|
}
|
|
|
|
/*
|
|
AppBar control colors.
|
|
*/
|
|
.win-ui-dark.win-appbar, .win-ui-dark .win-appbar {
|
|
background-color: rgb(0, 0, 0);
|
|
border-color: rgb(0, 0, 0);
|
|
}
|
|
.win-appbar {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
/*
|
|
Flyout control colors, flyout normally has light theme.
|
|
*/
|
|
.win-flyout {
|
|
border-color: rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.win-settingsflyout {
|
|
border-color: rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.win-ui-dark.win-flyout, .win-ui-dark .win-flyout {
|
|
border-color: rgb(255, 255, 255);
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
|
|
.win-ui-dark.win-settingsflyout, .win-ui-dark .win-settingsflyout {
|
|
border-color: rgba(255, 255, 255, 0.24);
|
|
}
|
|
|
|
/*
|
|
Settings flyout is light in both themes unless the app explicitly overrides it.
|
|
*/
|
|
.win-settingsflyout {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-settingsflyout.win-ui-dark {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
|
|
/*
|
|
Settings flyout will be white in dark theme so we need to have the header stay
|
|
aligned with the theme unless the app explicitly overrides it.
|
|
*/
|
|
|
|
/*
|
|
Menu button colors, menu is always light theme.
|
|
*/
|
|
.win-menu button {
|
|
background-color: transparent;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-menu button:focus,
|
|
.win-menu button:active {
|
|
background-color: rgb(222, 222, 222);
|
|
}
|
|
.win-menu button:hover:active {
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
.win-menu button:-ms-keyboard-active {
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
.win-menu button:disabled,
|
|
.win-menu button:disabled:active {
|
|
background-color: transparent;
|
|
color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.win-ui-dark.win-menu button, .win-ui-dark .win-menu button {
|
|
background-color: transparent;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark.win-menu button:focus, .win-ui-dark .win-menu button:focus,
|
|
.win-ui-dark.win-menu button:active, .win-ui-dark .win-menu button:active {
|
|
background-color: rgb(222, 222, 222);
|
|
}
|
|
.win-ui-dark.win-menu button:hover:active, .win-ui-dark .win-menu button:hover:active {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark.win-menu button:-ms-keyboard-active, .win-ui-dark .win-menu button:-ms-keyboard-active {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark.win-menu button:disabled, .win-ui-dark .win-menu button:disabled,
|
|
.win-ui-dark.win-menu button:disabled:active, .win-ui-dark .win-menu button:disabled:active {
|
|
background-color: transparent;
|
|
color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/*
|
|
Rating control colors.
|
|
*/
|
|
.win-ui-dark .win-rating .win-star.win-user.win-full,
|
|
.win-ui-dark .win-rating .win-star.win-user.win-full.win-disabled {
|
|
color: rgb(91, 46, 197);
|
|
}
|
|
.win-ui-dark .win-rating .win-star.win-tentative.win-full {
|
|
color: rgb(129, 82, 239);
|
|
}
|
|
.win-ui-dark .win-rating .win-star.win-average.win-full,
|
|
.win-ui-dark .win-rating .win-star.win-average.win-full.win-disabled {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-rating .win-star.win-empty {
|
|
color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
.win-rating .win-star.win-user.win-full,
|
|
.win-rating .win-star.win-user.win-full.win-disabled {
|
|
color: rgb(70, 23, 180);
|
|
}
|
|
.win-rating .win-star.win-tentative.win-full {
|
|
color: rgb(114, 65, 228);
|
|
}
|
|
.win-rating .win-star.win-average.win-full,
|
|
.win-rating .win-star.win-average.win-full.win-disabled {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-rating .win-star.win-empty {
|
|
color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
/*
|
|
SemanticZoom button colors.
|
|
*/
|
|
.win-semanticzoom-button {
|
|
background-color: rgba(216, 216, 216, 0.33);
|
|
border-color: transparent;
|
|
}
|
|
button:hover.win-semanticzoom-button {
|
|
background-color: rgba(216, 216, 216, 1.0);
|
|
}
|
|
.win-ui-dark button.win-semanticzoom-button:active {
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
button.win-semanticzoom-button:active {
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
|
|
/*
|
|
Toggleswitch control colors.
|
|
*/
|
|
|
|
.win-ui-dark .win-toggleswitch .win-title {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-title.win-disabled {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-toggleswitch .win-title {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-toggleswitch .win-title.win-disabled {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.win-ui-dark .win-toggleswitch .win-label {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-label.win-disabled {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
.win-toggleswitch .win-label {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
.win-toggleswitch .win-label.win-disabled {
|
|
color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.win-toggleswitch .win-switch::-ms-track {
|
|
background-color: transparent;
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-switch::-ms-track {
|
|
border-color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-switch::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.26);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-switch:hover::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.29);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-switch:active::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-switch:disabled::-ms-track {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.win-ui-dark .win-toggleswitch .win-switch:disabled::-ms-fill-lower,
|
|
.win-ui-dark .win-toggleswitch .win-switch:disabled::-ms-fill-upper {
|
|
background-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-track {
|
|
border-color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
.win-toggleswitch .win-switch::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.26);
|
|
}
|
|
.win-toggleswitch .win-switch:hover::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.29);
|
|
}
|
|
.win-toggleswitch .win-switch:active::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
.win-toggleswitch .win-switch:disabled::-ms-track {
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
.win-toggleswitch .win-switch:disabled::-ms-fill-lower,
|
|
.win-toggleswitch .win-switch:disabled::-ms-fill-upper {
|
|
background-color: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/*
|
|
Tooltip control colors.
|
|
*/
|
|
.win-tooltip {
|
|
background-color: rgb(255, 255, 255);
|
|
border-color: rgb(128, 128, 128);
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
/*
|
|
High contrast colors.
|
|
*/
|
|
@media (-ms-high-contrast)
|
|
{
|
|
/*
|
|
Typographic color definitions.
|
|
*/
|
|
.win-type-interactive {
|
|
color: WindowText;
|
|
}
|
|
.win-type-interactive:hover, .win-type-interactive:hover:active {
|
|
color: -ms-hotlight;
|
|
}
|
|
.win-type-interactive:-ms-keyboard-active {
|
|
color: -ms-hotlight;
|
|
}
|
|
|
|
/*
|
|
Text selection high contrast color.
|
|
*/
|
|
::selection, select:focus::-ms-value {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
|
|
/*
|
|
Button high contrast colors.
|
|
*/
|
|
button, input[type=button], input[type=reset],
|
|
input[type=file]::-ms-browse, input::-ms-clear,
|
|
input::-ms-reveal, select::-ms-expand, .win-backbutton, .win-semanticzoom-button {
|
|
background-color: ButtonFace;
|
|
border-color: ButtonText;
|
|
color: ButtonText;
|
|
}
|
|
button[type=submit], input[type=submit] {
|
|
background-color: Highlight;
|
|
border-color: ButtonText;
|
|
color: HighlightText;
|
|
}
|
|
button:hover, input[type=button]:hover, input[type=reset]:hover,
|
|
input::-ms-clear:hover, input::-ms-reveal:hover,
|
|
input[type=file]::-ms-browse:hover, .win-backbutton:hover, .win-semanticzoom-button:hover {
|
|
background-color: Highlight;
|
|
border-color: ButtonText;
|
|
color: HighlightText;
|
|
}
|
|
button:hover:active, button[type=submit]:hover:active, input[type=button]:hover:active,
|
|
input[type=submit]:hover:active, input[type=reset]:hover:active,
|
|
input::-ms-clear:hover:active, input::-ms-reveal:hover:active,
|
|
input[type=file]::-ms-browse:hover:active, .win-backbutton:hover:active,
|
|
.win-semanticzoom-button:hover:active {
|
|
background-clip: border-box;
|
|
background-color: ButtonText;
|
|
border-color: transparent;
|
|
color: ButtonFace;
|
|
}
|
|
button:-ms-keyboard-active, button[type=submit]:-ms-keyboard-active, input[type=button]:-ms-keyboard-active,
|
|
input[type=submit]:-ms-keyboard-active, input[type=reset]:-ms-keyboard-active,
|
|
.win-backbutton:-ms-keyboard-active, .win-semanticzoom-button:-ms-keyboard-active {
|
|
background-clip: border-box;
|
|
background-color: ButtonText;
|
|
border-color: transparent;
|
|
color: ButtonFace;
|
|
}
|
|
button:disabled, button[type=submit]:disabled, input[type=button]:disabled,
|
|
input[type=submit]:disabled, input[type=reset]:disabled,
|
|
input[type=file]:disabled::-ms-browse, input:disabled::-ms-clear, input:disabled::-ms-reveal,
|
|
select:disabled::-ms-expand, .win-backbutton:disabled,
|
|
button:disabled:active, button[type=submit]:disabled:active, input[type=button]:disabled:active,
|
|
input[type=submit]:disabled:active, input[type=reset]:disabled:active,
|
|
input[type=file]:disabled::-ms-browse:active, .win-backbutton:disabled:active {
|
|
background-color: ButtonFace;
|
|
border-color: GrayText;
|
|
color: GrayText;
|
|
}
|
|
|
|
/*
|
|
Text input, checkbox, radio, and select high contrast colors.
|
|
*/
|
|
input[type=text], input[type=password],
|
|
input[type=email], input[type=number],
|
|
input[type=tel], input[type=url],
|
|
input[type=search], textarea, .win-textarea, select,
|
|
input::-ms-check {
|
|
background-color: ButtonFace;
|
|
border-color: ButtonText;
|
|
color: ButtonText;
|
|
}
|
|
input:hover::-ms-check { /* only checkbox and radio have hover state */
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
input:hover:active::-ms-check { /* only checkbox and radio have active state */
|
|
background-clip: border-box;
|
|
background-color: ButtonText;
|
|
border-color: transparent;
|
|
color: ButtonFace;
|
|
}
|
|
input:-ms-keyboard-active::-ms-check { /* only checkbox and radio have active state */
|
|
background-clip: border-box;
|
|
background-color: ButtonText;
|
|
border-color: transparent;
|
|
color: ButtonFace;
|
|
}
|
|
input[type=text]:disabled, input[type=password]:disabled,
|
|
input[type=email]:disabled, input[type=number]:disabled,
|
|
input[type=tel]:disabled, input[type=url]:disabled,
|
|
input[type=search]:disabled, input[type=file]::-ms-value,
|
|
textarea:disabled, .win-textarea:disabled, select:disabled,
|
|
input:disabled::-ms-check, input:disabled:active::-ms-check {
|
|
border-color: GrayText;
|
|
color: ButtonText;
|
|
background-color: ButtonFace;
|
|
}
|
|
input:disabled::-ms-check, input:disabled:active::-ms-check,
|
|
input[type]:-ms-input-placeholder, textarea:-ms-input-placeholder,
|
|
select:disabled::-ms-value {
|
|
color: GrayText;
|
|
}
|
|
|
|
/*
|
|
Select option high contrast colors.
|
|
*/
|
|
option:checked, select:focus::-ms-value {
|
|
color: HighlightText;
|
|
background-color: Highlight;
|
|
}
|
|
select:active:not(:disabled)::-ms-value, select:active:not(:disabled)::-ms-expand,
|
|
option:hover:active, option:checked:hover:active {
|
|
color: ButtonFace;
|
|
background-color: ButtonText;
|
|
}
|
|
option:checked:disabled, option:checked:disabled:active,
|
|
optgroup:disabled option:checked, optgroup:disabled option:checked:active,
|
|
select:disabled option:checked, select:disabled option:checked:active,
|
|
select:disabled:focus::-ms-value {
|
|
color: ButtonFace;
|
|
background-color: GrayText;
|
|
}
|
|
|
|
/*
|
|
Link high contrast colors.
|
|
*/
|
|
a {
|
|
color: -ms-hotlight;
|
|
}
|
|
a[disabled] {
|
|
color: GrayText;
|
|
}
|
|
|
|
/*
|
|
Progress high contrast colors.
|
|
*/
|
|
progress {
|
|
border: 1px solid ButtonText;
|
|
background-color: ButtonFace;
|
|
color: Highlight;
|
|
}
|
|
progress:indeterminate {
|
|
border: transparent;
|
|
}
|
|
progress::-ms-fill {
|
|
border-right: 1px solid ButtonText;
|
|
background-color: Highlight;
|
|
}
|
|
progress.win-paused:not(:indeterminate)::-ms-fill {
|
|
background-color: GrayText;
|
|
}
|
|
progress.win-paused:not(:indeterminate) {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
/*
|
|
Range control high contrast colors.
|
|
*/
|
|
input[type=range]::-ms-track {
|
|
border: 1px solid ButtonText;
|
|
background-color: ButtonFace;
|
|
color: transparent;
|
|
}
|
|
input[type=range]:disabled::-ms-track {
|
|
border-color: GrayText;
|
|
}
|
|
input[type=range]::-ms-fill-lower {
|
|
background-color: Highlight;
|
|
}
|
|
input[type=range]:disabled::-ms-fill-lower {
|
|
background-color: transparent;
|
|
}
|
|
input[type=range]::-ms-ticks-before,
|
|
input[type=range]::-ms-ticks-after {
|
|
color: ButtonText;
|
|
}
|
|
input[type=range]:disabled::-ms-ticks-before,
|
|
input[type=range]:disabled::-ms-ticks-after {
|
|
color: GrayText;
|
|
}
|
|
input[type=range]::-ms-thumb {
|
|
background-color: ButtonText;
|
|
border-left: 1px solid HighlightText;
|
|
border-right: 1px solid HighlightText;
|
|
}
|
|
input[type=range].win-vertical::-ms-thumb {
|
|
border-left-style: none;
|
|
border-right-style: none;
|
|
border-top: 1px solid HighlightText;
|
|
border-bottom: 1px solid HighlightText;
|
|
}
|
|
input[type=range]:hover::-ms-thumb {
|
|
background-color: Highlight;
|
|
}
|
|
input[type=range]:active::-ms-thumb {
|
|
background-color: HighlightText;
|
|
border-color: ButtonText;
|
|
}
|
|
input[type=range]:disabled::-ms-thumb,
|
|
input[type=range]:disabled:active::-ms-thumb {
|
|
background-color: GrayText;
|
|
border-color: GrayText;
|
|
}
|
|
|
|
/*
|
|
AppBar high contrast colors.
|
|
*/
|
|
.win-appbar {
|
|
background-color: ButtonFace;
|
|
border-color: Highlight;
|
|
}
|
|
|
|
/*
|
|
Command button label high contrast colors.
|
|
*/
|
|
button.win-command,
|
|
button.win-command:active,
|
|
button.win-command:hover:active {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
hr.win-command {
|
|
background-color: ButtonText;
|
|
}
|
|
.win-label {
|
|
background-color: transparent;
|
|
color: ButtonText;
|
|
}
|
|
button:disabled .win-label,
|
|
button:disabled:active .win-label {
|
|
color: GrayText;
|
|
}
|
|
button.win-command:focus {
|
|
border-color: ButtonText;
|
|
}
|
|
button.win-hidefocus:focus {
|
|
outline: none;
|
|
}
|
|
button.win-command.win-hidefocus:focus {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/*
|
|
Command Image high contrast colors with states
|
|
*/
|
|
.win-commandimage {
|
|
background-color: transparent;
|
|
color: ButtonText;
|
|
}
|
|
button:active .win-commandimage,
|
|
button:hover:active .win-commandimage {
|
|
color: ButtonFace;
|
|
}
|
|
button:hover .win-commandimage {
|
|
color: HighlightText;
|
|
}
|
|
button:disabled .win-commandimage,
|
|
button:disabled:active .win-commandimage {
|
|
color: GrayText;
|
|
}
|
|
button[aria-checked=true] .win-commandimage {
|
|
color: ButtonFace;
|
|
}
|
|
button[aria-checked=true]:active .win-commandimage,
|
|
button[aria-checked=true]:hover:active .win-commandimage {
|
|
color: ButtonText;
|
|
}
|
|
button[aria-checked=true]:hover .win-commandimage {
|
|
color: HighlightText;
|
|
}
|
|
button[aria-checked=true]:disabled .win-commandimage,
|
|
button[aria-checked=true]:disabled:active .win-commandimage {
|
|
color: ButtonFace;
|
|
}
|
|
|
|
/*
|
|
Command Image high contrast colors with states
|
|
*/
|
|
.win-commandring {
|
|
background-color: transparent;
|
|
border-color: ButtonText;
|
|
}
|
|
button:active .win-commandring,
|
|
button:hover:active .win-commandring {
|
|
background-color: ButtonText;
|
|
border-color: ButtonText;
|
|
}
|
|
button:hover .win-commandring {
|
|
background-color: Highlight;
|
|
border-color: ButtonText;
|
|
}
|
|
button:disabled .win-commandring,
|
|
button:disabled:active .win-commandring {
|
|
background-color: transparent;
|
|
border-color: GrayText;
|
|
}
|
|
button[aria-checked=true] .win-commandring {
|
|
background-color: ButtonText;
|
|
border-color: ButtonText;
|
|
}
|
|
button[aria-checked=true]:active .win-commandring,
|
|
button[aria-checked=true]:hover:active .win-commandring {
|
|
background-color: ButtonFace;
|
|
border-color: ButtonText;
|
|
}
|
|
button[aria-checked=true]:hover .win-commandring {
|
|
background-color: Highlight;
|
|
border-color: ButtonText;
|
|
}
|
|
button[aria-checked=true]:disabled .win-commandring,
|
|
button[aria-checked=true]:disabled:active .win-commandring {
|
|
background-color: GrayText;
|
|
border-color: GrayText;
|
|
}
|
|
|
|
/*
|
|
Menu command high contrast colors
|
|
*/
|
|
.win-menu hr.win-command {
|
|
background-color: ButtonText;
|
|
}
|
|
.win-menu button.win-command {
|
|
background-color: ButtonFace;
|
|
color: ButtonText;
|
|
}
|
|
.win-menu button.win-command:focus {
|
|
outline: none;
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.win-menu button.win-command:active {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.win-menu button.win-command:hover:active {
|
|
background-color: ButtonText;
|
|
color: ButtonFace;
|
|
}
|
|
.win-menu button.win-command:-ms-keyboard-active {
|
|
background-color: ButtonText;
|
|
color: ButtonFace;
|
|
}
|
|
.win-menu button.win-command:disabled,
|
|
.win-menu button.win-command:disabled:active {
|
|
background-color: ButtonFace;
|
|
color: GrayText;
|
|
}
|
|
|
|
/*
|
|
FlipView high contrast colors.
|
|
*/
|
|
.win-flipview .win-navbottom {
|
|
left: 50%;
|
|
top: 100%;
|
|
margin-left: -35px;
|
|
margin-top: -35px;
|
|
}
|
|
.win-flipview .win-navbutton {
|
|
background-color: ButtonFace;
|
|
color: ButtonText;
|
|
border: 2px solid ButtonText;
|
|
width: 65px;
|
|
height: 35px;
|
|
}
|
|
.win-flipview .win-navbutton:hover {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.win-flipview .win-navbutton:active {
|
|
background-color: ButtonText;
|
|
color: ButtonFace;
|
|
}
|
|
.win-flipview .win-navright {
|
|
margin-left: -65px;
|
|
}
|
|
|
|
/*
|
|
Flyout control high contrast colors.
|
|
*/
|
|
.win-flyout, .win-settingsflyout {
|
|
background-color: Window;
|
|
border-color: WindowText;
|
|
color: WindowText;
|
|
}
|
|
|
|
/*
|
|
ListView high contrast colors.
|
|
*/
|
|
.win-listview.win-selectionstylefilled .win-container {
|
|
background-color: Window;
|
|
color: WindowText;
|
|
}
|
|
.win-listview .win-container:hover {
|
|
outline: Highlight solid 3px;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-container:hover {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.win-listview .win-focusedoutline {
|
|
outline-color: WindowText;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-container.win-selected,
|
|
.win-listview.win-selectionstylefilled .win-container.win-selected:hover {
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.win-listview .win-groupheader {
|
|
color: WindowText;
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected .win-selectionborder {
|
|
border-color: Highlight;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-container.win-selected .win-selectionborder {
|
|
border-color: transparent;
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder {
|
|
border-color: Highlight;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected .win-selectionbackground,
|
|
.win-listview.win-selectionstylefilled .win-selected:hover .win-selectionbackground
|
|
{
|
|
background-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
.win-selectioncheckmark {
|
|
color: HighlightText;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selectioncheckmarkbackground {
|
|
border-color: transparent;
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
|
|
border-top-color: Highlight;
|
|
border-right-color: Highlight;
|
|
border-left-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
.win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground:hover {
|
|
border-top-color: Highlight;
|
|
border-right-color: Highlight;
|
|
}
|
|
.win-listview.win-rtl:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
|
|
border-top-color: Highlight;
|
|
border-left-color: Highlight;
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
}
|
|
.win-listview .win-selectionhint {
|
|
color: WindowText;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected a,
|
|
.win-listview.win-selectionstylefilled .win-container:hover a,
|
|
.win-listview.win-selectionstylefilled .win-selected progress,
|
|
.win-listview.win-selectionstylefilled .win-container:hover progress,
|
|
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star:after,
|
|
.win-listview.win-selectionstylefilled .win-container:hover .win-rating .win-star:after{
|
|
color: HighlightText;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected input,
|
|
.win-listview.win-selectionstylefilled .win-container:hover input,
|
|
.win-listview.win-selectionstylefilled .win-selected input::-ms-check,
|
|
.win-listview.win-selectionstylefilled .win-container:hover input::-ms-check,
|
|
.win-listview.win-selectionstylefilled .win-selected input::-ms-value,
|
|
.win-listview.win-selectionstylefilled .win-container:hover input::-ms-value,
|
|
.win-listview.win-selectionstylefilled .win-selected input::-ms-track,
|
|
.win-listview.win-selectionstylefilled .win-container:hover input::-ms-track,
|
|
.win-listview.win-selectionstylefilled .win-selected button,
|
|
.win-listview.win-selectionstylefilled .win-container:hover button,
|
|
.win-listview.win-selectionstylefilled .win-selected progress,
|
|
.win-listview.win-selectionstylefilled .win-container:hover progress,
|
|
.win-listview.win-selectionstylefilled .win-selected progress::-ms-fill,
|
|
.win-listview.win-selectionstylefilled .win-container:hover progress::-ms-fill,
|
|
.win-listview.win-selectionstylefilled .win-selected select,
|
|
.win-listview.win-selectionstylefilled .win-container:hover select,
|
|
.win-listview.win-selectionstylefilled .win-selected textarea,
|
|
.win-listview.win-selectionstylefilled .win-container:hover textarea {
|
|
border-color: HighlightText;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-lower,
|
|
.win-listview.win-selectionstylefilled .win-container:hover input[type=range]::-ms-fill-lower,
|
|
.win-listview.win-selectionstylefilled .win-selected progress::-ms-fill,
|
|
.win-listview.win-selectionstylefilled .win-container:hover progress::-ms-fill {
|
|
background-color: HighlightText;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected input[type=range]::-ms-fill-upper,
|
|
.win-listview.win-selectionstylefilled .win-container:hover input[type=range]::-ms-fill-upper,
|
|
.win-listview.win-selectionstylefilled .win-selected progress,
|
|
.win-listview.win-selectionstylefilled .win-container:hover progress {
|
|
background-color: Highlight;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-full:before,
|
|
.win-listview.win-selectionstylefilled .win-container:hover .win-rating .win-star.win-full:before {
|
|
color: ButtonFace;
|
|
}
|
|
.win-listview.win-selectionstylefilled .win-selected .win-rating .win-star.win-empty:before,
|
|
.win-listview.win-selectionstylefilled .win-container:hover .win-rating .win-star.win-empty:before {
|
|
color: HighLight;
|
|
}
|
|
|
|
/*
|
|
Rating control high contrast colors.
|
|
*/
|
|
.win-rating .win-star:before {
|
|
content: "\E082" !important;
|
|
}
|
|
.win-rating .win-star.win-full {
|
|
color: HighLight;
|
|
}
|
|
.win-rating .win-star.win-tentative.win-full {
|
|
color: ButtonText;
|
|
}
|
|
.win-rating .win-star.win-empty {
|
|
color: ButtonFace;
|
|
}
|
|
.win-rating .win-star:after {
|
|
content: "\E224" !important;
|
|
position: relative;
|
|
top: -100%;
|
|
color: ButtonText;
|
|
}
|
|
|
|
/*
|
|
Toggle control high contrast colors.
|
|
*/
|
|
.win-toggleswitch .win-switch::-ms-thumb {
|
|
height: 17px; /* 19px - 1px borders */
|
|
}
|
|
.win-toggleswitch .win-switch:disabled::-ms-fill-lower {
|
|
background-color: GrayText;
|
|
}
|
|
|
|
/*
|
|
Tooltip high contrast colors.
|
|
*/
|
|
.win-tooltip {
|
|
background-color: Window;
|
|
border-color: WindowText;
|
|
color: WindowText;
|
|
}
|
|
}
|
|
|
|
@keyframes WinJS-opacity-in { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes WinJS-opacity-out { from { opacity: 1; } to { opacity: 0; } }
|
|
|
|
@keyframes WinJS-scale-up { from { transform: scale(0.85); } to { transform: scale(1); } }
|
|
@keyframes WinJS-scale-down { from { transform: scale(1); } to { transform: scale(0.85); } }
|
|
|
|
@keyframes WinJS-default-remove { from { transform: translateX( 11px); } to { transform: none; } }
|
|
@keyframes WinJS-default-remove-rtl { from { transform: translateX(-11px); } to { transform: none; } }
|
|
|
|
@keyframes WinJS-default-apply { from { transform: none; } to { transform: translateX( 11px); } }
|
|
@keyframes WinJS-default-apply-rtl { from { transform: none; } to { transform: translateX(-11px); } }
|
|
|
|
@keyframes WinJS-showEdgeUI { from { transform: translateY(-70px); } to { transform: none; } }
|
|
@keyframes WinJS-showPanel { from { transform: translateX( 364px); } to { transform: none; } }
|
|
@keyframes WinJS-showPanel-rtl { from { transform: translateX(-364px); } to { transform: none; } }
|
|
@keyframes WinJS-hideEdgeUI { from { transform: none; } to { transform: translateY(-70px); } }
|
|
@keyframes WinJS-hidePanel { from { transform: none; } to { transform: translateX( 364px); } }
|
|
@keyframes WinJS-hidePanel-rtl { from { transform: none; } to { transform: translateX(-364px); } }
|
|
|
|
@keyframes WinJS-showPopup { from { transform: translateY(50px); } to { transform: none; } }
|
|
|
|
@keyframes WinJS-dragSourceEnd { from { transform: translateX( 11px) scale(1.05); } to { transform: none; } }
|
|
@keyframes WinJS-dragSourceEnd-rtl { from { transform: translateX(-11px) scale(1.05); } to { transform: none; } }
|
|
|
|
@keyframes WinJS-enterContent { from { transform: translateX( 40px); } to { transform: none; } }
|
|
@keyframes WinJS-enterContent-rtl { from { transform: translateX(-40px); } to { transform: none; } }
|
|
@keyframes WinJS-enterContent-snapped { from { transform: translateX( 20px); } to { transform: none; } }
|
|
@keyframes WinJS-enterContent-snapped-rtl { from { transform: translateX(-20px); } to { transform: none; } }
|
|
|
|
@keyframes WinJS-exit { from { transform: none; } to { transform: none; } }
|
|
|
|
@keyframes WinJS-enterPage { from { transform: translateX( 100px); } to { transform: none; } }
|
|
@keyframes WinJS-enterPage-rtl { from { transform: translateX(-100px); } to { transform: none; } }
|
|
@keyframes WinJS-enterPage-snapped { from { transform: translateX( 40px); } to { transform: none; } }
|
|
@keyframes WinJS-enterPage-snapped-rtl { from { transform: translateX(-40px); } to { transform: none; } }
|
|
|
|
@keyframes WinJS-updateBadge { from { transform: translateY(24px); } to { transform: none; } }
|
|
|
|
body,
|
|
.win-type-xx-large,
|
|
.win-type-x-large,
|
|
.win-type-large,
|
|
.win-type-medium,
|
|
.win-type-small,
|
|
.win-type-x-small,
|
|
.win-type-xx-small,
|
|
input,
|
|
textarea,
|
|
.win-textarea,
|
|
button,
|
|
select,
|
|
option {
|
|
font-family:
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:-ms-lang(am, ti),
|
|
.win-type-xx-large:-ms-lang(am, ti),
|
|
.win-type-x-large:-ms-lang(am, ti),
|
|
.win-type-large:-ms-lang(am, ti),
|
|
.win-type-medium:-ms-lang(am, ti),
|
|
.win-type-small:-ms-lang(am, ti),
|
|
.win-type-x-small:-ms-lang(am, ti),
|
|
.win-type-xx-small:-ms-lang(am, ti),
|
|
input:-ms-lang(am, ti),
|
|
textarea:-ms-lang(am, ti),
|
|
.win-textarea:-ms-lang(am, ti),
|
|
button:-ms-lang(am, ti),
|
|
select:-ms-lang(am, ti),
|
|
option:-ms-lang(am, ti) {
|
|
font-family:
|
|
"Ebrima",
|
|
"Segoe UI",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-xx-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-x-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-large:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-medium:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-x-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-type-xx-small:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
input:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
textarea:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
.win-textarea:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
button:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
select:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te),
|
|
option:-ms-lang(as, bn, gu, hi, kn, kok, ml, mr, ne, or, pa, si, ta, te) {
|
|
font-family:
|
|
"Nirmala UI",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:lang(chr-CHER-US),
|
|
.win-type-xx-large:lang(chr-CHER-US),
|
|
.win-type-x-large:lang(chr-CHER-US),
|
|
.win-type-large:lang(chr-CHER-US),
|
|
.win-type-medium:lang(chr-CHER-US),
|
|
.win-type-small:lang(chr-CHER-US),
|
|
.win-type-x-small:lang(chr-CHER-US),
|
|
.win-type-xx-small:lang(chr-CHER-US),
|
|
input:lang(chr-CHER-US),
|
|
textarea:lang(chr-CHER-US),
|
|
.win-textarea:lang(chr-CHER-US),
|
|
button:lang(chr-CHER-US),
|
|
select:lang(chr-CHER-US),
|
|
option:lang(chr-CHER-US) {
|
|
font-family:
|
|
"Gadugi",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:lang(ja),
|
|
.win-type-xx-large:lang(ja),
|
|
.win-type-x-large:lang(ja),
|
|
.win-type-large:lang(ja),
|
|
.win-type-medium:lang(ja),
|
|
.win-type-small:lang(ja),
|
|
.win-type-x-small:lang(ja),
|
|
.win-type-xx-small:lang(ja),
|
|
input:lang(ja),
|
|
textarea:lang(ja),
|
|
.win-textarea:lang(ja),
|
|
button:lang(ja),
|
|
select:lang(ja),
|
|
option:lang(ja) {
|
|
font-family:
|
|
"Meiryo UI",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:lang(km),
|
|
.win-type-xx-large:lang(km),
|
|
.win-type-x-large:lang(km),
|
|
.win-type-large:lang(km),
|
|
.win-type-medium:lang(km),
|
|
.win-type-small:lang(km),
|
|
.win-type-x-small:lang(km),
|
|
.win-type-xx-small:lang(km),
|
|
input:lang(km),
|
|
textarea:lang(km),
|
|
.win-textarea:lang(km),
|
|
button:lang(km),
|
|
select:lang(km),
|
|
option:lang(km) {
|
|
font-family:
|
|
"Khmer UI",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:lang(ko),
|
|
.win-type-xx-large:lang(ko),
|
|
.win-type-x-large:lang(ko),
|
|
.win-type-large:lang(ko),
|
|
.win-type-medium:lang(ko),
|
|
.win-type-small:lang(ko),
|
|
.win-type-x-small:lang(ko),
|
|
.win-type-xx-small:lang(ko),
|
|
input:lang(ko),
|
|
textarea:lang(ko),
|
|
.win-textarea:lang(ko),
|
|
button:lang(ko),
|
|
select:lang(ko),
|
|
option:lang(ko) {
|
|
font-family:
|
|
"Malgun Gothic",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:lang(lo),
|
|
.win-type-xx-large:lang(lo),
|
|
.win-type-x-large:lang(lo),
|
|
.win-type-large:lang(lo),
|
|
.win-type-medium:lang(lo),
|
|
.win-type-small:lang(lo),
|
|
.win-type-x-small:lang(lo),
|
|
.win-type-xx-small:lang(lo),
|
|
input:lang(lo),
|
|
textarea:lang(lo),
|
|
.win-textarea:lang(lo),
|
|
button:lang(lo),
|
|
select:lang(lo),
|
|
option:lang(lo) {
|
|
font-family:
|
|
"Lao UI",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:lang(th),
|
|
.win-type-xx-large:lang(th),
|
|
.win-type-x-large:lang(th),
|
|
.win-type-large:lang(th),
|
|
.win-type-medium:lang(th),
|
|
.win-type-small:lang(th),
|
|
.win-type-x-small:lang(th),
|
|
.win-type-xx-small:lang(th),
|
|
input:lang(th),
|
|
textarea:lang(th),
|
|
.win-textarea:lang(th),
|
|
button:lang(th),
|
|
select:lang(th),
|
|
option:lang(th) {
|
|
font-family:
|
|
"Leelawadee",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Microsoft YaHei UI",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-xx-large:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-x-large:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-large:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-medium:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-small:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-x-small:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-type-xx-small:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
input:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
textarea:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
.win-textarea:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
button:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
select:-ms-lang(zh-CN, zh-Hans, zh-SG),
|
|
option:-ms-lang(zh-CN, zh-Hans, zh-SG) {
|
|
font-family:
|
|
"Microsoft YaHei UI",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft JhengHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|
|
body:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-xx-large:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-x-large:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-large:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-medium:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-small:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-x-small:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-type-xx-small:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
input:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
textarea:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
.win-textarea:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
button:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
select:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO),
|
|
option:-ms-lang(zh-HK, zh-TW, zh-Hant, zh-MO) {
|
|
font-family:
|
|
"Microsoft JhengHei UI",
|
|
"Segoe UI",
|
|
"Ebrima",
|
|
"Nirmala UI",
|
|
"Gadugi",
|
|
"Segoe UI Symbol",
|
|
"Meiryo UI",
|
|
"Khmer UI",
|
|
"Tunga",
|
|
"Lao UI",
|
|
"Raavi",
|
|
"Iskoola Pota",
|
|
"Latha",
|
|
"Leelawadee",
|
|
"Microsoft YaHei UI",
|
|
"Malgun Gothic",
|
|
"Estrangelo Edessa",
|
|
"Microsoft Himalaya",
|
|
"Microsoft New Tai Lue",
|
|
"Microsoft PhagsPa",
|
|
"Microsoft Tai Le",
|
|
"Microsoft Yi Baiti",
|
|
"Mongolian Baiti",
|
|
"MV Boli",
|
|
"Myanmar Text",
|
|
"Cambria Math";
|
|
}
|
|
|