pvbemu/web/theme/vbemu.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);
    user-select: none;
}

.tk.window.cpu .disassembler .addr {
    margin-left: 2px;
}

.tk.window.cpu .disassembler .spacer {
    margin-right: 2px;
}

.tk.window.cpu .disassembler .byte {
    margin-left: 0.5em;
    text-align : center;
}

.tk.window.cpu .disassembler .byte.b0,
.tk.window.cpu .disassembler .inst,
.tk.window.cpu .disassembler .ops {
    margin-left: 1em;
}


.tk.window.cpu .disassembler .pc {
    background: var(--tk-selected-blur);
    box-shadow: 0  1px 0 var(--tk-selected-blur),
                0 -1px 0 var(--tk-selected-blur);
    color     : var(--tk-selected-blur-text);
}
.tk.window.cpu .disassembler:focus-within .pc {
    background: var(--tk-selected);
    box-shadow: 0  1px 0 var(--tk-selected),
                0 -1px 0 var(--tk-selected);
    color     : var(--tk-selected-text);
}

.tk.window.cpu .disassembler .pc.addr  {
    box-shadow: 0 0 0 1px var(--tk-selected-blur);
}
.tk.window.cpu .disassembler:focus-within .pc.addr {
    box-shadow: 0 0 0 1px var(--tk-selected);
}

.tk.window.cpu .disassembler .pc:is(.byte)  {
    box-shadow: 0 0 0 1px var(--tk-selected-blur),
                calc(-0.5em + 1px) 0 0 1px var(--tk-selected-blur);
}
.tk.window.cpu .disassembler:focus-within .pc:is(.byte) {
    box-shadow: 0 0 0 1px var(--tk-selected),
                calc(-0.5em + 1px) 0 0 1px var(--tk-selected);
}

.tk.window.cpu .disassembler .pc:is(.byte.b0, .inst, .ops)  {
    box-shadow: 0 0 0 1px var(--tk-selected-blur),
                calc(-1em + 1px) 0 0 1px var(--tk-selected-blur);
}
.tk.window.cpu .disassembler:focus-within .pc:is(.byte.b0, .inst, .ops) {
    box-shadow: 0 0 0 1px var(--tk-selected),
                calc(-1em + 1px) 0 0 1px var(--tk-selected);
}

.tk.window.cpu .disassembler .spacer.pc {
    box-shadow: 1px  1px 0 var(--tk-selected-blur),
                1px -1px 0 var(--tk-selected-blur);
}
.tk.window.cpu .disassembler:focus-within .spacer.pc {
    box-shadow: 1px  1px 0 var(--tk-selected),
                1px -1px 0 var(--tk-selected);
}

.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 .icon {
    border-radius: 2px;
    margin       : 0 1px 1px 0;
}

.tk.window.cpu .registers .expand:focus .icon {
    background: var(--tk-control-active);
}

.tk.window.cpu .registers .expand .icon:before {
    content: "";
    display: block;
    height : 11px;
    width  : 11px;
}

.tk.window.cpu .registers .expand[aria-expanded="false"] .icon:before {
    background  : currentcolor;
    mask        : /**/url("./expand.svg") center no-repeat;
    -webkit-mask: /**/url("./expand.svg") center no-repeat;
}

.tk.window.cpu .registers .expand[aria-expanded="true"] .icon:before {
    background  : currentcolor;
    mask        : /**/url("./collapse.svg") center no-repeat;
    -webkit-mask: /**/url("./collapse.svg") center no-repeat;
}

.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);
}