1070 lines
34 KiB
CSS
1070 lines
34 KiB
CSS
/**
|
||
* 98.css
|
||
* Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
|
||
* https://github.com/jdan/98.css/blob/main/LICENSE
|
||
*/
|
||
|
||
:root {
|
||
/* Color */
|
||
--text-color: #222222;
|
||
--surface: #c0c0c0;
|
||
--button-highlight: #ffffff;
|
||
--button-face: #dfdfdf;
|
||
--button-shadow: #808080;
|
||
--window-frame: #0a0a0a;
|
||
--dialog-blue: #000080;
|
||
--dialog-blue-light: #1084d0;
|
||
--dialog-gray: #808080;
|
||
--dialog-gray-light: #b5b5b5;
|
||
--link-blue: #0000ff;
|
||
|
||
/* Spacing */
|
||
--element-spacing: 8px;
|
||
--grouped-button-spacing: 4px;
|
||
--grouped-element-spacing: 6px;
|
||
--radio-width: 12px;
|
||
--checkbox-width: 13px;
|
||
--radio-label-spacing: 6px;
|
||
--range-track-height: 4px;
|
||
--range-spacing: 10px;
|
||
|
||
/* Some detailed computations for radio buttons and checkboxes */
|
||
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
|
||
--radio-total-width: calc(var(--radio-total-width-precalc));
|
||
--radio-left: calc(-1 * var(--radio-total-width-precalc));
|
||
--radio-dot-width: 4px;
|
||
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
|
||
--radio-dot-left: calc(
|
||
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2
|
||
);
|
||
|
||
--checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
|
||
--checkbox-total-width: calc(var(--checkbox-total-width-precalc));
|
||
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
|
||
--checkmark-width: 7px;
|
||
--checkmark-left: 3px;
|
||
|
||
/* Borders */
|
||
--border-width: 1px;
|
||
--border-raised-outer: inset -1px -1px var(--window-frame),
|
||
inset 1px 1px var(--button-highlight);
|
||
--border-raised-inner: inset -2px -2px var(--button-shadow),
|
||
inset 2px 2px var(--button-face);
|
||
--border-sunken-outer: inset -1px -1px var(--button-highlight),
|
||
inset 1px 1px var(--window-frame);
|
||
--border-sunken-inner: inset -2px -2px var(--button-face),
|
||
inset 2px 2px var(--button-shadow);
|
||
--default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
|
||
--default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
|
||
--default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
|
||
--default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);
|
||
|
||
|
||
/* Window borders flip button-face and button-highlight */
|
||
--border-window-outer: inset -1px -1px var(--window-frame),
|
||
inset 1px 1px var(--button-face);
|
||
--border-window-inner: inset -2px -2px var(--button-shadow),
|
||
inset 2px 2px var(--button-highlight);
|
||
|
||
/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
|
||
--border-field: inset -1px -1px var(--button-highlight),
|
||
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
|
||
inset 2px 2px var(--window-frame);
|
||
--border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
|
||
|
||
/* Tabs */
|
||
--border-tab: inset -1px 0 var(--window-frame),
|
||
inset 1px 1px var(--button-face),
|
||
inset -2px 0 var(--button-shadow),
|
||
inset 2px 2px var(--button-highlight)
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Pixelated MS Sans Serif";
|
||
src: url("../fonts/ms_sans_serif.woff") format("woff");
|
||
src: url("../fonts/ms_sans_serif.woff2") format("woff2");
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Pixelated MS Sans Serif";
|
||
src: url("../fonts/ms_sans_serif_bold.woff") format("woff");
|
||
src: url("../fonts/ms_sans_serif_bold.woff2") format("woff2");
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
}
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
font-size: 12px;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
button,
|
||
.button,
|
||
label,
|
||
input,
|
||
legend,
|
||
textarea,
|
||
select,
|
||
option,
|
||
table,
|
||
ul.tree-view,
|
||
.window,
|
||
.title-bar,
|
||
li[role=tab] {
|
||
font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
|
||
-webkit-font-smoothing: none;
|
||
font-size: 11px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 5rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
u {
|
||
text-decoration: none;
|
||
/*noinspection CssNonIntegerLengthInPixels*/
|
||
border-bottom: 0.5px solid #222222;
|
||
}
|
||
|
||
button,
|
||
.button,
|
||
input[type="submit"],
|
||
input[type="reset"] {
|
||
box-sizing: border-box;
|
||
border: none;
|
||
color: transparent;
|
||
text-shadow: 0 0 var(--text-color);
|
||
background: var(--surface);
|
||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||
border-radius: 0;
|
||
|
||
min-width: 75px;
|
||
min-height: 23px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
button.default,
|
||
.button.default,
|
||
input[type="submit"].default,
|
||
input[type="reset"].default {
|
||
box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
|
||
}
|
||
|
||
.vertical-bar {
|
||
width: 4px;
|
||
height: 20px;
|
||
background: #c0c0c0;
|
||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||
}
|
||
|
||
button:not(:disabled):active,
|
||
.button:not(:disabled):active,
|
||
input[type="submit"]:not(:disabled):active,
|
||
input[type="reset"]:not(:disabled):active {
|
||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||
text-shadow: 1px 1px var(--text-color);
|
||
}
|
||
|
||
button.default:not(:disabled):active,
|
||
.button.default:not(:disabled):active,
|
||
input[type="submit"].default:not(:disabled):active,
|
||
input[type="reset"].default:not(:disabled):active {
|
||
box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
|
||
}
|
||
|
||
/* @formatter:off */
|
||
@media(not(hover)) {
|
||
button:not(:disabled):hover,
|
||
.button:not(:disabled):hover,
|
||
input[type="submit"]:not(:disabled):hover,
|
||
input[type="reset"]:not(:disabled):hover {
|
||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||
}
|
||
}
|
||
/* @formatter:on */
|
||
|
||
button:focus,
|
||
.button:focus,
|
||
input[type="submit"]:focus,
|
||
input[type="reset"]:focus {
|
||
outline: 1px dotted #000000;
|
||
outline-offset: -4px;
|
||
}
|
||
|
||
button::-moz-focus-inner,
|
||
.button::-moz-focus-inner,
|
||
input[type="submit"]::-moz-focus-inner,
|
||
input[type="reset"]::-moz-focus-inner {
|
||
border: 0;
|
||
}
|
||
|
||
:disabled,
|
||
:disabled + label,
|
||
input[readonly],
|
||
input[readonly] + label {
|
||
color: var(--button-shadow);
|
||
}
|
||
|
||
button:disabled,
|
||
.button:disabled,
|
||
input[type="submit"]:disabled,
|
||
input[type="reset"]:disabled,
|
||
:disabled + label {
|
||
text-shadow: 1px 1px 0 var(--button-highlight);
|
||
}
|
||
|
||
.window {
|
||
box-shadow: var(--border-window-outer), var(--border-window-inner);
|
||
background: var(--surface);
|
||
padding: 3px;
|
||
}
|
||
|
||
.title-bar {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--dialog-blue),
|
||
var(--dialog-blue-light)
|
||
);
|
||
padding: 3px 2px 3px 3px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-bar.inactive {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--dialog-gray),
|
||
var(--dialog-gray-light)
|
||
);
|
||
}
|
||
|
||
.title-bar-text {
|
||
font-weight: bold;
|
||
color: white;
|
||
letter-spacing: 0;
|
||
margin-right: 24px;
|
||
}
|
||
|
||
.title-bar-controls {
|
||
display: flex;
|
||
}
|
||
|
||
.title-bar-controls button {
|
||
padding: 0;
|
||
display: block;
|
||
min-width: 16px;
|
||
min-height: 14px;
|
||
}
|
||
|
||
.title-bar-controls button:active {
|
||
padding: 0;
|
||
}
|
||
|
||
.title-bar-controls button:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.title-bar-controls button[aria-label="Minimize"],
|
||
.title-bar-controls button.minimize {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/minimize.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: bottom 3px left 4px;
|
||
}
|
||
|
||
.title-bar-controls button[aria-label="Maximize"],
|
||
.title-bar-controls button.maximize {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/maximize.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: top 2px left 3px;
|
||
}
|
||
|
||
.title-bar-controls button[aria-label="Maximize"]:disabled,
|
||
.title-bar-controls button.maximize:disabled {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/maximize-disabled.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='gray'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: top 2px left 3px;
|
||
}
|
||
|
||
.title-bar-controls button[aria-label="Restore"],
|
||
.title-bar-controls button.restore {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/restore.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: top 2px left 3px;
|
||
}
|
||
|
||
.title-bar-controls button[aria-label="Help"],
|
||
.title-bar-controls button.help {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/help.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: top 2px left 5px;
|
||
}
|
||
|
||
.title-bar-controls button[aria-label="Close"],
|
||
.title-bar-controls button.close {
|
||
margin-left: 2px;
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("icon/close.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: top 3px left 4px;
|
||
}
|
||
|
||
.status-bar {
|
||
margin: 0 1px;
|
||
display: flex;
|
||
gap: 1px;
|
||
}
|
||
|
||
.status-bar-field {
|
||
box-shadow: var(--border-status-field);
|
||
flex-grow: 1;
|
||
padding: 2px 3px;
|
||
margin: 0;
|
||
}
|
||
|
||
.window-body {
|
||
margin: var(--element-spacing);
|
||
}
|
||
|
||
fieldset {
|
||
/*noinspection CssInvalidFunction*/
|
||
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2;
|
||
padding: calc(2 * var(--border-width) + var(--element-spacing));
|
||
padding-block-start: var(--element-spacing);
|
||
margin: 0;
|
||
}
|
||
|
||
legend {
|
||
background: var(--surface);
|
||
}
|
||
|
||
.field-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
[class^="field-row"] + [class^="field-row"] {
|
||
margin-top: var(--grouped-element-spacing);
|
||
}
|
||
|
||
.field-row > * + * {
|
||
margin-left: var(--grouped-element-spacing);
|
||
}
|
||
|
||
.field-row-stacked {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.field-row-stacked * + * {
|
||
margin-top: var(--grouped-element-spacing);
|
||
}
|
||
|
||
label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
user-select: none;
|
||
}
|
||
|
||
input[type="radio"],
|
||
input[type="checkbox"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
margin: 0;
|
||
background: 0;
|
||
position: fixed;
|
||
opacity: 0;
|
||
border: none;
|
||
}
|
||
|
||
input[type="radio"] + label,
|
||
input[type="checkbox"] + label {
|
||
line-height: 13px;
|
||
}
|
||
|
||
input[type="radio"] + label {
|
||
position: relative;
|
||
margin-left: var(--radio-total-width);
|
||
}
|
||
|
||
input[type="radio"] + label::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(-1 * (var(--radio-total-width-precalc)));
|
||
display: inline-block;
|
||
width: var(--radio-width);
|
||
height: var(--radio-width);
|
||
margin-right: var(--radio-label-spacing);
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/radio-border.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="radio"]:active + label::before {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/radio-border-disabled.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="radio"]:checked + label::after {
|
||
content: "";
|
||
display: block;
|
||
width: var(--radio-dot-width);
|
||
height: var(--radio-dot-width);
|
||
top: var(--radio-dot-top);
|
||
left: var(--radio-dot-left);
|
||
position: absolute;
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/radio-dot.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="radio"]:focus + label,
|
||
input[type="checkbox"]:focus + label {
|
||
outline: 1px dotted #000000;
|
||
}
|
||
|
||
input[type="radio"][disabled] + label::before {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/radio-border-disabled.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="radio"][disabled]:checked + label::after {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/radio-dot-disabled.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="checkbox"] + label {
|
||
position: relative;
|
||
margin-left: var(--checkbox-total-width);
|
||
}
|
||
|
||
input[type="checkbox"] + label::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: calc(-1 * (var(--checkbox-total-width-precalc)));
|
||
display: inline-block;
|
||
width: var(--checkbox-width);
|
||
height: var(--checkbox-width);
|
||
background: var(--button-highlight);
|
||
box-shadow: var(--border-field);
|
||
margin-right: var(--radio-label-spacing);
|
||
}
|
||
|
||
input[type="checkbox"]:active + label::before {
|
||
background: var(--surface);
|
||
}
|
||
|
||
input[type="checkbox"]:checked + label::after {
|
||
content: "";
|
||
display: block;
|
||
width: var(--checkmark-width);
|
||
height: var(--checkmark-width);
|
||
position: absolute;
|
||
left: calc(
|
||
-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
|
||
);
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/checkmark.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="checkbox"][disabled] + label::before {
|
||
background: var(--surface);
|
||
}
|
||
|
||
input[type="checkbox"][disabled]:checked + label::after {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/checkmark-disabled.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="email"],
|
||
input[type="url"],
|
||
input[type="tel"],
|
||
input[type="number"],
|
||
input[type="search"],
|
||
select,
|
||
textarea {
|
||
padding: 3px 4px;
|
||
border: none;
|
||
box-shadow: var(--border-field);
|
||
background-color: var(--button-highlight);
|
||
box-sizing: border-box;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="email"],
|
||
input[type="url"],
|
||
input[type="tel"],
|
||
input[type="search"],
|
||
select {
|
||
height: 21px;
|
||
}
|
||
|
||
input[type="number"] {
|
||
/* need this 1 pixel to fit the spinner controls in box */
|
||
height: 22px;
|
||
}
|
||
|
||
/* clears the ‘X’ from Internet Explorer */
|
||
input[type=search]::-ms-clear {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
input[type=search]::-ms-reveal {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/* clears the ‘X’ from Chrome */
|
||
input[type="search"]::-webkit-search-decoration,
|
||
input[type="search"]::-webkit-search-cancel-button,
|
||
input[type="search"]::-webkit-search-results-button,
|
||
input[type="search"]::-webkit-search-results-decoration {
|
||
display: none;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="email"],
|
||
input[type="url"],
|
||
input[type="tel"],
|
||
input[type="number"],
|
||
input[type="search"] {
|
||
/* For some reason descenders are getting cut off without this */
|
||
line-height: 2;
|
||
}
|
||
|
||
input[type="email"]:disabled,
|
||
input[type="url"]:disabled,
|
||
input[type="tel"]:disabled,
|
||
input[type="password"]:disabled,
|
||
input[type="text"]:disabled,
|
||
input[type="number"]:disabled,
|
||
input[type="search"]:disabled,
|
||
input[type="email"]:read-only,
|
||
input[type="url"]:read-only,
|
||
input[type="tel"]:read-only,
|
||
input[type="password"]:read-only,
|
||
input[type="text"]:read-only,
|
||
input[type="number"]:read-only,
|
||
input[type="search"]:read-only,
|
||
textarea:disabled {
|
||
background-color: var(--surface);
|
||
}
|
||
|
||
select {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
position: relative;
|
||
padding-right: 32px;
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/button-down.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
|
||
background-position: top 2px right 2px;
|
||
background-repeat: no-repeat;
|
||
border-radius: 0;
|
||
}
|
||
|
||
select:focus,
|
||
input[type="text"]:focus,
|
||
input[type="password"]:focus,
|
||
input[type="email"]:focus,
|
||
input[type="url"]:focus,
|
||
input[type="tel"]:focus,
|
||
input[type="number"]:focus,
|
||
input[type="search"]:focus,
|
||
textarea:focus {
|
||
outline: none;
|
||
}
|
||
|
||
input[type="range"] {
|
||
-webkit-appearance: none;
|
||
width: 100%;
|
||
background: transparent;
|
||
}
|
||
|
||
input[type="range"]:focus {
|
||
outline: none;
|
||
}
|
||
|
||
input[type="range"]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
height: 21px;
|
||
width: 11px;
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/indicator-horizontal.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");
|
||
transform: translateY(-8px);
|
||
box-shadow: none;
|
||
border: none;
|
||
}
|
||
|
||
input[type="range"].has-box-indicator::-webkit-slider-thumb {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/indicator-rectangle-horizontal.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
input[type="range"]::-moz-range-thumb {
|
||
height: 21px;
|
||
width: 11px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("icon/indicator-horizontal.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");
|
||
transform: translateY(2px);
|
||
}
|
||
|
||
input[type="range"].has-box-indicator::-moz-range-thumb {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background: svg-load("./icon/indicator-rectangle-horizontal.svg");*/
|
||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E");
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
input[type="range"]::-webkit-slider-runnable-track {
|
||
width: 100%;
|
||
height: 2px;
|
||
box-sizing: border-box;
|
||
background: black;
|
||
border-right: 1px solid grey;
|
||
border-bottom: 1px solid grey;
|
||
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
|
||
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
|
||
}
|
||
|
||
input[type="range"]::-moz-range-track {
|
||
width: 100%;
|
||
height: 2px;
|
||
box-sizing: border-box;
|
||
background: black;
|
||
border-right: 1px solid grey;
|
||
border-bottom: 1px solid grey;
|
||
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
|
||
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
|
||
}
|
||
|
||
.is-vertical {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 150px;
|
||
transform: translateY(50%);
|
||
}
|
||
|
||
.is-vertical > input[type="range"] {
|
||
width: 150px;
|
||
height: 4px;
|
||
margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
|
||
transform-origin: left;
|
||
transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
|
||
}
|
||
|
||
.is-vertical > input[type="range"]::-webkit-slider-runnable-track {
|
||
border-left: 1px solid grey;
|
||
border-right: 0;
|
||
border-bottom: 1px solid grey;
|
||
box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
|
||
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
|
||
}
|
||
|
||
.is-vertical > input[type="range"]::-moz-range-track {
|
||
border-left: 1px solid grey;
|
||
border-right: 0;
|
||
border-bottom: 1px solid grey;
|
||
box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
|
||
1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
|
||
}
|
||
|
||
.is-vertical > input[type="range"]::-webkit-slider-thumb {
|
||
transform: translateY(-8px) scaleX(-1);
|
||
}
|
||
|
||
.is-vertical > input[type="range"].has-box-indicator::-webkit-slider-thumb {
|
||
transform: translateY(-10px) scaleX(-1);
|
||
}
|
||
|
||
.is-vertical > input[type="range"]::-moz-range-thumb {
|
||
transform: translateY(2px) scaleX(-1);
|
||
}
|
||
|
||
.is-vertical > input[type="range"].has-box-indicator::-moz-range-thumb {
|
||
transform: translateY(0px) scaleX(-1);
|
||
}
|
||
|
||
select:focus {
|
||
color: var(--button-highlight);
|
||
background-color: var(--dialog-blue);
|
||
}
|
||
|
||
select:focus option {
|
||
color: #000;
|
||
background-color: #fff;
|
||
}
|
||
|
||
select:active {
|
||
/*noinspection CssInvalidFunction*/
|
||
/*background-image: svg-load("./icon/button-down-active.svg");*/
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
a {
|
||
color: var(--link-blue);
|
||
}
|
||
|
||
a:focus {
|
||
outline: 1px dotted var(--link-blue);
|
||
}
|
||
|
||
ul.tree-view {
|
||
display: block;
|
||
background: var(--button-highlight);
|
||
box-shadow: var(--border-field);
|
||
padding: 6px;
|
||
margin: 0;
|
||
}
|
||
|
||
ul.tree-view li {
|
||
list-style-type: none;
|
||
}
|
||
|
||
ul.tree-view a {
|
||
text-decoration: none;
|
||
color: #000;
|
||
}
|
||
|
||
ul.tree-view a:focus {
|
||
background-color: var(--dialog-blue);
|
||
color: var(--button-highlight);
|
||
}
|
||
|
||
ul.tree-view ul,
|
||
ul.tree-view li {
|
||
margin-top: 3px;
|
||
}
|
||
|
||
ul.tree-view ul {
|
||
margin-left: 16px;
|
||
padding-left: 16px;
|
||
/* Goes down too far */
|
||
border-left: 1px dotted #808080;
|
||
}
|
||
|
||
ul.tree-view ul > li {
|
||
position: relative;
|
||
}
|
||
|
||
ul.tree-view ul > li::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: -16px;
|
||
top: 6px;
|
||
width: 12px;
|
||
border-bottom: 1px dotted #808080;
|
||
}
|
||
|
||
/* Cover the bottom of the left dotted border */
|
||
ul.tree-view ul > li:last-child::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
left: -20px;
|
||
top: 7px;
|
||
bottom: 0;
|
||
width: 8px;
|
||
background: var(--button-highlight);
|
||
}
|
||
|
||
ul.tree-view details {
|
||
margin-top: 0;
|
||
}
|
||
|
||
ul.tree-view details[open] summary {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
ul.tree-view ul details > summary:before {
|
||
margin-left: -22px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
ul.tree-view details > summary:before {
|
||
text-align: center;
|
||
display: block;
|
||
float: left;
|
||
content: "+";
|
||
border: 1px solid #808080;
|
||
width: 8px;
|
||
height: 9px;
|
||
line-height: 8px;
|
||
margin-right: 5px;
|
||
padding-left: 1px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
ul.tree-view details[open] > summary:before {
|
||
content: "-";
|
||
}
|
||
|
||
ul.tree-view details > summary::marker,
|
||
ul.tree-view details > summary::-webkit-details-marker {
|
||
content: "";
|
||
}
|
||
|
||
pre {
|
||
display: block;
|
||
background: var(--button-highlight);
|
||
box-shadow: var(--border-field);
|
||
padding: 12px 8px;
|
||
margin: 0;
|
||
}
|
||
|
||
code,
|
||
code * {
|
||
font-family: monospace;
|
||
}
|
||
|
||
summary:focus {
|
||
outline: 1px dotted #000000;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 16px;
|
||
}
|
||
|
||
::-webkit-scrollbar:horizontal {
|
||
height: 17px;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: var(--button-face);
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
/*noinspection CssInvalidFunction*/
|
||
background-image: svg-load("./icon/scrollbar-background.svg");
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: var(--button-face);
|
||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||
}
|
||
|
||
::-webkit-scrollbar-button:horizontal:start:decrement,
|
||
::-webkit-scrollbar-button:horizontal:end:increment,
|
||
::-webkit-scrollbar-button:vertical:start:decrement,
|
||
::-webkit-scrollbar-button:vertical:end:increment {
|
||
display: block;
|
||
}
|
||
|
||
::-webkit-scrollbar-button:vertical:start {
|
||
height: 17px;
|
||
/*noinspection CssInvalidFunction*/
|
||
background-image: svg-load("./icon/button-up.svg");
|
||
}
|
||
|
||
::-webkit-scrollbar-button:vertical:end {
|
||
height: 17px;
|
||
/*noinspection CssInvalidFunction*/
|
||
background-image: svg-load("./icon/button-down.svg");
|
||
}
|
||
|
||
::-webkit-scrollbar-button:horizontal:start {
|
||
width: 16px;
|
||
/*noinspection CssInvalidFunction*/
|
||
background-image: svg-load("./icon/button-left.svg");
|
||
}
|
||
|
||
::-webkit-scrollbar-button:horizontal:end {
|
||
width: 16px;
|
||
/*noinspection CssInvalidFunction*/
|
||
background-image: svg-load("./icon/button-right.svg");
|
||
}
|
||
|
||
.window[role=tabpanel] {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
menu[role=tablist] {
|
||
position: relative;
|
||
margin: 0 0 -2px 0;
|
||
text-indent: 0;
|
||
list-style-type: none;
|
||
display: flex;
|
||
padding-left: 3px;
|
||
}
|
||
|
||
menu[role=tablist] > li {
|
||
border-top-left-radius: 3px;
|
||
border-top-right-radius: 3px;
|
||
box-shadow: var(--border-tab);
|
||
z-index: 1;
|
||
}
|
||
|
||
menu[role=tablist] > li[aria-selected=true] {
|
||
padding-bottom: 2px;
|
||
margin-top: -2px;
|
||
background-color: var(--surface);
|
||
position: relative;
|
||
z-index: 8;
|
||
margin-left: -3px;
|
||
}
|
||
|
||
menu[role=tablist] > li > a {
|
||
display: block;
|
||
color: #222;
|
||
margin: 6px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
menu[role=tablist] > li[aria-selected=true] > a:focus {
|
||
outline: none;
|
||
}
|
||
|
||
menu[role=tablist] > li > a:focus {
|
||
outline: 1px dotted #222;
|
||
}
|
||
|
||
menu[role=tablist].multirows > li {
|
||
flex-grow: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.sunken-panel {
|
||
box-sizing: border-box;
|
||
border: 2px groove transparent;
|
||
/*noinspection CssInvalidFunction*/
|
||
border-image: svg-load("./icon/sunken-panel-border.svg") 2;
|
||
overflow: auto;
|
||
background-color: #fff;
|
||
}
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
position: relative;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
background-color: #fff;
|
||
}
|
||
|
||
table > thead > tr > * {
|
||
position: sticky;
|
||
top: 0;
|
||
height: 17px;
|
||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||
background: var(--surface);
|
||
box-sizing: border-box;
|
||
font-weight: normal;
|
||
padding: 0 var(--grouped-element-spacing);
|
||
}
|
||
|
||
table.interactive > tbody > tr {
|
||
cursor: pointer;
|
||
}
|
||
|
||
table > tbody > tr.highlighted {
|
||
color: #fff;
|
||
background-color: var(--dialog-blue);
|
||
}
|
||
|
||
table > tbody > tr > * {
|
||
padding: 0 var(--grouped-element-spacing);
|
||
height: 14px;
|
||
}
|
||
|
||
.progress-indicator {
|
||
height: 32px;
|
||
position: relative;
|
||
box-shadow: var(--border-sunken-inner);
|
||
padding: 4px 4px;
|
||
border: none;
|
||
box-sizing: border-box;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
|
||
.progress-indicator > .progress-indicator-bar {
|
||
height: 100%;
|
||
display: block;
|
||
background-color: var(--dialog-blue);
|
||
}
|
||
|
||
.progress-indicator.segmented > .progress-indicator-bar {
|
||
width: 100%;
|
||
background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
var(--dialog-blue) 0 16px,
|
||
transparent 0 2px
|
||
);
|
||
background-repeat: repeat;
|
||
background-size: 18px 100%;
|
||
}
|
||
|
||
.field-border {
|
||
background: var(--button-highlight);
|
||
box-shadow: var(--border-field);
|
||
padding: 2px;
|
||
}
|
||
|
||
.field-border-disabled {
|
||
background: var(--surface);
|
||
box-shadow: var(--border-field);
|
||
padding: 2px;
|
||
}
|
||
|
||
.status-field-border {
|
||
background: var(--surface);
|
||
box-shadow: var(--border-status-field);
|
||
padding: 1px;
|
||
}
|