pvbemu/app/theme/kiosk.css

737 lines
18 KiB
CSS

:root {
--tk-font-dialog: "Roboto", sans-serif;
--tk-font-mono : "Inconsolata SemiExpanded Medium", monospace;
--tk-font-size : 12px;
}
.tk {
font-family: var(--tk-font-dialog);
font-size : var(--tk-font-size);
line-height: 1em;
margin : 0;
outline : none;
padding : 0;
}
.tk-body {
overflow: hidden;
}
.tk-app {
/* Height managed through resize listener */
width: 100%;
}
.tk-mono {
font-family: var(--tk-font-mono);
}
/********************************** Button ***********************************/
.tk-button > * {
background: var(--tk-control);
border : 1px solid var(--tk-control-shadow);
box-shadow: 1px 1px 0 0 var(--tk-control-shadow);
color : var(--tk-control-text);
margin : 0 1px 1px 0;
padding : 3px;
text-align: center;
}
.tk-button:focus > * {
background: var(--tk-control-active);
}
.tk-button.active > * {
box-shadow: none;
margin : 1px 0 0 1px;
}
.tk-button[aria-disabled="true"] > * {
color: var(--tk-control-shadow);
}
/********************************* Check Box *********************************/
.tk-checkbox {
align-items: center;
column-gap : 2px;
}
.tk-checkbox .tk-icon {
align-items: center;
background : var(--tk-window);
border : 1px solid var(--tk-control-shadow);
box-sizing : border-box;
display : flex;
height : 12px;
width : 12px;
}
.tk-checkbox .tk-icon:before {
background : transparent;
content : "";
height : 100%;
display : block;
mask-image : var(--tk-check);
mask-position: center;
mask-repeat : no-repeat;
mask-size : contain;
width : 100%;
-webkit-mask-image : var(--tk-check);
-webkit-mask-position: center;
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : contain;
}
.tk-checkbox[aria-checked="true"] .tk-icon:before {
background: var(--tk-window-text);
}
.tk-checkbox:focus .tk-icon {
background: var(--tk-control-active);
}
.tk-checkbox[aria-checked="true"]:focus .tk-icon:before {
background: var(--tk-control-text);
}
.tk-checkbox.active:focus .tk-icon:before {
background: var(--tk-control-shadow);
}
/********************************* Menu Bar **********************************/
.tk-menu-bar {
background : var(--tk-control);
border-bottom: 1px solid var(--tk-control-border);
color : var(--tk-control-text);
column-gap : 1px;
display : flex;
flex-wrap : wrap;
padding : 2px;
user-select : none;
white-space : nowrap;
}
.tk-menu {
background : var(--tk-control);
border : 1px solid var(--tk-control-border);
box-shadow : 1px 1px 0 0 var(--tk-control-border);
display : flex;
flex-direction: column;
padding : 3px;
row-gap : 1px;
}
.tk-menu-item > * {
background: var(--tk-control);
border : 1px solid transparent;
column-gap: 4px;
display : flex;
margin : 0 1px 1px 0;
padding : 3px;
}
.tk-menu-item > * > .tk-icon {
box-sizing: border-box;
display : none;
height : 1em;
width : 1em;
}
.tk-menu-item > * > .tk-text {
flex-grow: 1;
}
.tk-menu-item[aria-disabled="true"] > * > .tk-text {
color: var(--tk-control-shadow);
}
.tk-menu-item:not(.active, [aria-disabled="true"]):hover > *,
.tk-menu-item:not(.active):focus > * {
border-color: var(--tk-control-shadow);
box-shadow : 1px 1px 0 0 var(--tk-control-shadow);
}
.tk-menu.icons > .tk-menu-item > * > .tk-icon {
display: block;
}
.tk-menu-item[role="menuitemcheckbox"] > * > .tk-icon {
border: 1px solid var(--tk-control-border);
}
.tk-menu-item[role="menuitemcheckbox"] > * > .tk-icon:before {
background : transparent;
content : "";
height : 100%;
display : block;
mask-image : var(--tk-check);
mask-position: center;
mask-repeat : no-repeat;
mask-size : contain;
width : 100%;
-webkit-mask-image : var(--tk-check);
-webkit-mask-position: center;
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : contain;
}
.tk-menu-item[role="menuitemcheckbox"][aria-checked="true"]
> * > .tk-icon:before {
background: var(--tk-control-text);
}
.tk-menu-item[role="menuitemcheckbox"][aria-disabled="true"]
> * > .tk-icon {
border: 1px solid var(--tk-control-shadow);
}
.tk-menu-item[role="menuitemcheckbox"][aria-disabled="true"]
> * > .tk-icon:before {
background: var(--tk-control-shadow);
}
.tk-menu-item:not(.active):focus > * {
background: var(--tk-control-active);
}
.tk-menu-item.active > * {
background : var(--tk-control-active);
border-color: var(--tk-control-shadow);
margin : 1px 0 0 1px;
}
.tk-menu-separator {
border : 0 solid var(--tk-control-shadow);
border-width : 1px 0 0 0;
height : 0;
margin-bottom: 1px;
}
/*********************************** Radio ***********************************/
.tk-radio {
align-items: center;
column-gap : 2px;
}
.tk-radio .tk-icon {
align-items : center;
background : var(--tk-window);
border : 1px solid var(--tk-control-shadow);
border-radius: 50%;
box-sizing : border-box;
display : flex;
height : 10px;
width : 10px;
}
.tk-radio .tk-icon:before {
background : transparent;
content : "";
height : 100%;
display : block;
mask-image : var(--tk-radio);
mask-position: center;
mask-repeat : no-repeat;
mask-size : contain;
width : 100%;
-webkit-mask-image : var(--tk-radio);
-webkit-mask-position: center;
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : contain;
}
.tk-radio[aria-checked="true"] .tk-icon:before {
background: var(--tk-window-text);
}
.tk-radio:focus .tk-icon {
background: var(--tk-control-active);
}
.tk-radio[aria-checked="true"]:focus .tk-icon:before {
background: var(--tk-control-text);
}
.tk-radio.active[aria-checked="false"]:focus .tk-icon:before {
background: var(--tk-control-shadow);
}
/******************************** Scroll Bar *********************************/
.tk-scrollbar {
background: var(--tk-control-highlight);
box-shadow: 0 0 0 1px var(--tk-control-shadow) inset;
box-sizing: border-box;
}
.tk-scrollbar .tk-thumb,
.tk-scrollbar .tk-unit-down,
.tk-scrollbar .tk-unit-up {
background: var(--tk-control);
border : 1px solid var(--tk-control-border);
box-sizing: border-box;
color : var(--tk-control-text);
}
.tk-scrollbar:focus .tk-thumb,
.tk-scrollbar:focus .tk-unit-down,
.tk-scrollbar:focus .tk-unit-up {
background: var(--tk-control-active);
}
.tk-scrollbar .tk-unit-down,
.tk-scrollbar .tk-unit-up {
height: 13px;
width : 13px;
}
.tk-scrollbar .tk-unit-down:before,
.tk-scrollbar .tk-unit-up:before {
background : currentColor;
content : "";
display : block;
height : 100%;
mask-image : var(--tk-scroll);
mask-position: center;
mask-repeat : no-repeat;
mask-size : 100%;
width : 100%;
-webkit-mask-image : var(--tk-scroll);
-webkit-mask-position: center;
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : 100%;
}
.tk-scrollbar[aria-orientation="horizontal"] .tk-unit-down:before {
transform: rotate(-90deg);
}
.tk-scrollbar[aria-orientation="horizontal"] .tk-unit-up:before {
transform: rotate(90deg);
}
.tk-scrollbar[aria-orientation="vertical"] .tk-unit-down:before {
}
.tk-scrollbar[aria-orientation="vertical"] .tk-unit-up:before {
transform: rotate(180deg);
}
.tk-scrollbar .tk-unit-down.tk-active:before,
.tk-scrollbar .tk-unit-up.tk-active:before {
mask-size: calc(100% - 2px);
-webkit-mask-size: calc(100% - 2px);
}
.tk-scrollbar[aria-disabled="true"] .tk-unit-down,
.tk-scrollbar[aria-disabled="true"] .tk-unit-up,
.tk-scrollbar.tk-full .tk-unit-down,
.tk-scrollbar.tk-full .tk-unit-up {
background: var(--tk-control);
border-color: var(--tk-control-shadow);
color : var(--tk-control-shadow);
}
.tk-scrollbar .tk-block-down,
.tk-scrollbar .tk-block-up {
background : var(--tk-control-highlight);
border-color: var(--tk-control-shadow);
border-style: solid;
border-width: 0 1px;
}
.tk-scrollbar[aria-orientation="horizontal"] .tk-block-down,
.tk-scrollbar[aria-orientation="horizontal"] .tk-block-up {
border-width: 1px 0;
}
.tk-scrollbar .tk-block-down.tk-active,
.tk-scrollbar .tk-block-up.tk-active {
background: var(--tk-control-shadow);
}
.tk-scrollbar[aria-disabled="true"] .tk-thumb,
.tk-scrollbar[aria-disabled="true"] .tk-block-down,
.tk-scrollbar[aria-disabled="true"] .tk-block-up,
.tk-scrollbar.tk-full .tk-thumb,
.tk-scrollbar.tk-full .tk-block-down,
.tk-scrollbar.tk-full .tk-block-up {
visibility: hidden;
}
/******************************** Scroll Pane ********************************/
.tk-scrollpane {
background: var(--tk-control);
}
.tk-scrollpane > .tk-scrollbar {
border: 0 solid var(--tk-control);
}
.tk-scrollpane > .tk-scrollbar[aria-orientation="horizontal"] {
border-width: 1px 0 0 0;
}
.tk-scrollpane > .tk-scrollbar[aria-orientation="vertical"] {
border-width: 0 0 0 1px;
}
/******************************** Split Pane *********************************/
.tk-splitpane > [role="separator"][aria-orientation="horizontal"] {
cursor: ns-resize;
height: 3px;
}
.tk-splitpane > [role="separator"][aria-orientation="vertical"] {
cursor: ew-resize;
width : 3px;
}
.tk-splitpane > [role="separator"]:focus {
background: var(--tk-splitter-focus);
z-index : 1;
}
/********************************* Text Box **********************************/
.tk-textbox {
background: var(--tk-window);
border : 1px solid var(--tk-control-shadow);
color : var(--tk-window-text);
margin : 0;
padding : 2px;
}
/********************************** Windows **********************************/
.tk-desktop {
background: var(--tk-desktop);
}
.tk-window > * {
border : 1px solid var(--tk-control-border);
box-shadow: 1px 1px 0 0 var(--tk-control-border);
margin : 0 1px 1px 0;
}
.tk-window > * > .tk-nw {left : -1px; top : -1px; height: 8px; width : 8px; }
.tk-window > * > .tk-n {left : 7px; top : -1px; right : 8px; height: 3px; }
.tk-window > * > .tk-ne {right: 0px; top : -1px; height: 8px; width : 8px; }
.tk-window > * > .tk-w {left : -1px; top : 7px; width : 3px; bottom: 8px; }
.tk-window > * > .tk-e {right: 0px; top : 7px; width : 3px; bottom: 8px; }
.tk-window > * > .tk-sw {left : -1px; bottom: 0px; height: 8px; width : 8px; }
.tk-window > * > .tk-s {left : 7px; bottom: 0px; right : 8px; height: 3px; }
.tk-window > * > .tk-se {right: 0px; bottom: 0px; height: 8px; width : 8px; }
.tk-window > * > .tk-title {
align-items : center;
background : var(--tk-window-blur-title);
border-bottom: 1px solid var(--tk-control-shadow);
box-sizing : border-box;
color : var(--tk-window-blur-title-text);
overflow : hidden;
padding : 1px;
position : relative;
}
.tk-window.two > * > .tk-title {
background: var(--tk-window-blur-title2);
}
.tk-window > * > .tk-title .tk-text {
cursor : default;
flex-basis : 0;
font-weight : bold;
min-width : 0;
overflow : hidden;
padding : 1px 1px 1px calc(1em + 3px);
text-align : center;
text-overflow: ellipsis;
user-select : none;
white-space : nowrap;
}
.tk-window > * > .tk-title .tk-close {
background: var(--tk-window-blur-close);
border : 1px solid var(--tk-control-shadow);
color : var(--tk-window-blur-close-text);
height : calc(1em - 1px);
margin : 1px 1px 1px 0;
overflow : none;
width : calc(1em - 1px);
}
.tk-window > * > .tk-title .tk-close:before {
background : currentColor;
content : "";
display : block;
height : 100%;
width : 100%;
mask-image : var(--tk-close);
mask-position: center;
mask-repeat : no-repeat;
mask-size : 100%;
-webkit-mask-image : var(--tk-close);
-webkit-mask-position: center;
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : 100%;
}
.tk-window > * > .tk-title .tk-close.active:before {
mask-size: calc(100% - 2px);
-webkit-mask-size: calc(100% - 2px);
}
.tk-window:focus-within > * > .tk-title {
background: var(--tk-window-title);
color : var(--tk-window-title-text);
}
.tk-window.two:focus-within > * > .tk-title {
background: var(--tk-window-title2);
}
.tk-window:focus-within > * > .tk-title .tk-close {
background: var(--tk-window-close);
color : var(--tk-window-close-text);
}
.tk-window > * > .tk-client {
background: var(--tk-control);
}
/******************************* Disassembler ********************************/
.tk-cpu .tk-main {
height: 100%;
width : 100%;
}
.tk-cpu .tk-main > .tk-a,
.tk-cpu .tk-registers > .tk-a,
.tk-cpu .tk-registers > .tk-b {
box-shadow: 0 0 0 1px var(--tk-control),0 0 0 2px var(--tk-control-shadow);
}
.tk-cpu .tk-main > .tk-a { margin : 3px; }
.tk-cpu .tk-main > [role="separator"] { margin : 1px -2px; }
.tk-cpu .tk-main > .tk-b { margin : 3px; }
.tk-cpu .tk-registers > .tk-a { margin-bottom: 3px; }
.tk-cpu .tk-registers > [role="separator"] { margin : -2px; }
.tk-cpu .tk-registers > .tk-b { margin-top : 3px; }
.tk-disassembler .tk-viewport {
background: var(--tk-window);
color : var(--tk-window-text);
}
.tk-disassembler .tk-view {
height: 100%;
}
.tk-disassembler .tk-metrics {
padding-bottom: 1px;
}
.tk-disassembler .tk {
cursor : default;
font-family: var(--tk-font-mono);
user-select: none;
white-space: nowrap;
}
.tk-disassembler .tk-bytes,
.tk-disassembler .tk-mnemonic,
.tk-disassembler .tk-operands {
padding: 0 0 1px calc(1.2em - 1px);
}
.tk-disassembler .tk-address {
padding-left: 1px;
}
.tk-disassembler .tk-operands {
padding-right: 1px;
}
.tk-disassembler .tk-selected {
background: var(--tk-selected-blur);
color : var(--tk-selected-blur-text);
}
.tk-disassembler:focus-within .tk-selected {
background: var(--tk-selected);
color : var(--tk-selected-text);
}
.tk-reglist .tk-viewport {
background: var(--tk-window);
color : var(--tk-window-text);
}
.tk-reglist .tk-list {
align-items: center;
}
.tk-reglist .tk-expand {
align-items : center;
border-radius : 2px;
display : flex;
height : 11px;
justify-content: center;
width : 11px;
}
.tk-reglist .tk-expand:before {
content : "";
height : 100%;
display : block;
mask-position: center;
mask-repeat : no-repeat;
mask-size : contain;
width : 100%;
-webkit-mask-position: center;
-webkit-mask-repeat : no-repeat;
-webkit-mask-size : contain;
}
.tk-reglist .tk-expand:focus {
background: var(--tk-control-active);
}
.tk-reglist .tk-expand[aria-expanded]:before {
background: var(--tk-window-text);
}
.tk-reglist .tk-expand[aria-expanded]:focus:before {
background: var(--tk-control-text);
}
.tk-reglist .tk-expand[aria-expanded="false"]:before {
mask-image: var(--tk-expand);
-webkit-mask-image: var(--tk-expand);
}
.tk-reglist .tk-expand[aria-expanded="true"]:before {
mask-image: var(--tk-collapse);
-webkit-mask-image: var(--tk-collapse);
}
.tk-reglist .tk-name {
padding: 0 0.5em 0 1px;
}
.tk-reglist .tk-textbox {
background: transparent;
border : none;
padding : 0;
}
.tk-reglist .tk-expansion {
align-items : center;
margin-bottom: 2px;
padding : 2px 0 0 1.5em;
}
.tk-reglist .tk-expansion {
column-gap: 0.8em;
}
.tk-reglist .tk-expansion .tk-number .tk-label {
align-items : center;
display : flex;
justify-content: center;
min-width : 12px;
}
.tk-reglist .tk-expansion .tk-textbox {
width: 1.5em;
}
.tk-reglist .tk-expansion .tk-checkbox[aria-disabled="true"][aria-checked="true"]
.tk-icon:before {
background: var(--tk-control-shadow);
}
.tk-reglist .tk-expansion .tk-checkbox[aria-disabled="true"] .tk-contents,
.tk-reglist .tk-expansion .tk-number[disabled] *,
.tk-reglist .tk-expansion .tk-label[disabled],
.tk-reglist .tk-expansion .tk-textbox[disabled] {
color: var(--tk-control-shadow);
}
/********************************** Memory ***********************************/
.tk-window .tk-memory {
box-shadow: 0 0 0 1px var(--tk-control),0 0 0 2px var(--tk-control-shadow);
height : calc(100% - 6px);
margin : 3px;
width : calc(100% - 6px);
}
.tk-memory .tk-viewport {
background: var(--tk-window);
color : var(--tk-window-text);
}
.tk-memory .tk-metrics,
.tk-memory .tk-view * {
padding-bottom: 1px;
cursor : default;
font-family : var(--tk-font-mono);
user-select : none;
}
.tk-memory .tk-byte {
border : 0 solid transparent;
margin-left: calc(0.6em - 1px);
padding : 0 1px;
text-align : center;
}
.tk-memory .tk-byte.tk-0,
.tk-memory .tk-byte.tk-8 {
margin-left: calc(1.2em - 1px);
}
.tk-memory .tk-byte.selected {
background: var(--tk-selected-blur);
color : var(--tk-selected-blur-text);
}
.tk-memory:focus-within .tk-byte.selected {
background: var(--tk-selected);
color : var(--tk-selected-text);
}