pvbemu/web/theme/vbemu.css

195 lines
4.3 KiB
CSS

/******************************** CPU Window *********************************/
.tk.window.cpu .client {
padding: 1px;
}
.tk.window.cpu .scr-dasm {
border-right-width: 0;
box-shadow : 1px 0 0 var(--tk-control-shadow);
}
.tk.window.cpu .scr-system {
border-width: 1px 1px 0 0;
box-shadow : -0.5px 0.5px 0 0.5px var(--tk-control-shadow);
}
.tk.window.cpu .scr-program {
border-width: 0 1px 1px 0;
box-shadow : -0.5px -0.5px 0 0.5px var(--tk-control-shadow);
}
.tk.window.cpu .disassembler {
background : var(--tk-window);
color : var(--tk-window-text);
}
.tk.window.cpu .disassembler div {
cursor : default;
line-height: calc(1em + 2px);
isolation : isolate;
user-select: none;
}
.tk.window.cpu .disassembler .address {
margin-left: 2px;
}
.tk.window.cpu .disassembler .byte {
margin-left: 0.5em;
text-align : center;
}
.tk.window.cpu .disassembler .operands {
margin-right: 2px;
}
.tk.window.cpu .disassembler .byte.b0,
.tk.window.cpu .disassembler .mnemonic,
.tk.window.cpu .disassembler .operands {
margin-left: 1em;
}
.tk.window.cpu .disassembler .pc {
background: var(--tk-selected-blur);
left : 1px;
right : 1px;
}
.tk.window.cpu .disassembler:focus-within .pc {
background: var(--tk-selected);
}
.tk.window.cpu .disassembler .is-pc {
color: var(--tk-selected-blur-text);
}
.tk.window.cpu .disassembler:focus-within .is-pc {
color: var(--tk-selected-text);
}
.tk.window.cpu .registers {
background: var(--tk-window);
color : var(--tk-window-text);
}
.tk.window.cpu .registers > * {
padding: 0 1px;
}
.tk.window.cpu .registers > *:first-child {
padding-top: 1px;
}
.tk.window.cpu .registers > *:last-child {
padding-bottom: 1px;
}
.tk.window.cpu .registers .expand .box {
border : none;
border-radius: 2px;
margin : 0 1px 0 0;
}
.tk.window.cpu .registers .expand .box:before {
background: transparent;
content : "";
display : block;
height : 11px;
width : 11px;
}
.tk.window.cpu .registers .expand[role="checkbox"] .box:before {
background : currentcolor;
mask : /**/url("./expand.svg") center no-repeat;
-webkit-mask: /**/url("./expand.svg") center no-repeat;
}
.tk.window.cpu .registers .expand[aria-checked="true"] .box:before {
background : currentcolor;
mask : /**/url("./collapse.svg") center no-repeat;
-webkit-mask: /**/url("./collapse.svg") center no-repeat;
}
.tk.window.cpu .registers .expand:focus .box {
background: var(--tk-control-active);
}
.tk.window.cpu .registers .main {
column-gap: 0.5em;
}
.tk.window.cpu .registers .expansion {
gap : 1px 1em;
padding: 2px 2px 2px 1.4em;
}
.tk.window.cpu .registers .main {
column-gap: 0.5em;
}
.tk.window.cpu .registers .text-box {
background: transparent;
border : none;
padding : 0 1px;
}
.tk.window.cpu .registers .text-box:focus {
outline: 1px solid var(--tk-selected);
}
.tk.window.cpu .registers .text-dec {
column-gap: 2px;
}
.tk.window.cpu .registers .text-dec .label {
text-align: center;
min-width : 13px;
}
.tk.window.cpu .registers *[aria-disabled="true"]:is(.label, .text-box) {
color: var(--tk-control-shadow);
}
/******************************* Memory Window *******************************/
.tk.window.memory .client {
gap : 1px;
padding: 1px;
}
.tk.window.memory .hex-editor {
align-items: center;
background : var(--tk-window);
color : var(--tk-window-text);
}
.tk.window.memory .hex-editor div {
cursor : default;
line-height: calc(1em + 2px);
user-select: none;
}
.tk.window.memory .hex-editor .addr {
margin-left: 2px;
}
.tk.window.memory .hex-editor .byte {
margin-left: 0.5em;
text-align : center;
}
.tk.window.memory .hex-editor .b0,
.tk.window.memory .hex-editor .b8 {
margin-left: 1em;
}
.tk.window.memory .hex-editor .b15 {
margin-right: 2px;
}
.tk.window.memory .hex-editor .edit {
background: var(--tk-selected-blur);
color : var(--tk-selected-blur-text);
outline : 1px solid var(--tk-selected-blur);
}
.tk.window.memory .hex-editor:focus-within .edit {
background: var(--tk-selected);
color : var(--tk-selected-text);
outline : 1px solid var(--tk-selected);
}