GuyPerfect/pvbemu
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding registers panes of CPU window

Browse Source
This commit is contained in:
GuyPerfect
2021-09-02 00:16:22 +00:00
parent 3dc8b93f94
commit ff07e1907f
32 changed files with 2437 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/theme/Inconsolata_SemiExpanded-Medium.woff2
BIN
View File
Binary file not shown.
app/theme/Inconsolata_SemiExpanded-Regular.woff2
BIN
View File
Binary file not shown.
app/theme/dark.css
+21 -15
View File
@@ -1,17 +1,23 @@
:root {
--control : #222222;
--control-focus : #444444;
--control-shadow : #999999;
--control-text : #cccccc;
--desktop : #111111;
--window-blur : #555555;
--window-blur-text : #cccccc;
--window-close-blur : #998080;
--window-close-blur-border : #999999;
--window-close-blur-text : #ffffff;
--window-close-focus : #ee9999;
--window-close-focus-border: #999999;
--window-close-focus-text : #ffffff;
--window-focus : #007ACC;
--window-focus-text : #ffffff;
--close : #ee9999;
--close-blur : #998080;
--close-blur-border: #999999;
--close-blur-text : #ffffff;
--close-border : #999999;
--close-text : #ffffff;
--control : #333333;
--control-disabled : #999999;
--control-focus : #555555;
--control-shadow : #999999;
--control-text : #cccccc;
--desktop : #111111;
--splitter-focus : #0099ff99;
--title : #007ACC;
--title-blur : #555555;
--title-blur-text : #cccccc;
--title-text : #ffffff;
--window : #222222;
--window-border : #cccccc;
--window-disabled : #888888;
--window-text : #cccccc;
}
app/theme/kiosk.css
+334 -83
View File
@@ -2,7 +2,7 @@
:root {
--font-dialog: "Roboto-Regular", sans-serif;
--font-hex : "Inconsolata_SemiExpanded-Regular", monospace;
--font-hex : "Inconsolata_SemiExpanded-Medium", monospace;
--font-size : 12px;
}
@@ -13,8 +13,15 @@
}
body {
margin : 0;
overflow: hidden;
background: var(--window);
overflow : hidden;
}
* {
background: transparent;
border : none;
margin : 0;
padding : 0;
}
*:focus {
@@ -48,6 +55,117 @@ body {
}
/********************************* Checkbox **********************************/
[role="checkbox"] {
column-gap: 2px;
}
[role="checkbox"] [name="check"] {
background : var(--window);
border : 1px solid var(--control-shadow);
color : var(--window-text);
font-size : calc(var(--font-size) - 1px);
line-height: calc(var(--font-size) - 2px);
height : calc(var(--font-size) - 2px);
overflow : hidden;
position : relative;
width : calc(var(--font-size) - 2px);
}
[role="checkbox"] [name="check"]:after {
bottom : 0;
left : 0;
line-height: 100%;
position : absolute;
right : 0;
text-align : center;
top : 0;
}
[role="checkbox"][active] [name="check"]:after,
[role="checkbox"][aria-checked="true"] [name="check"]:after {
content: "\2713";
}
[role="checkbox"][active] [name="check"]:after {
color: var(--window);
}
[role="checkbox"]:focus [name="check"] {
background: var(--control-focus);
}
[role="checkbox"][aria-disabled="true"] [name="check"] {
border-color: var(--window-disabled);
color : var(--window-disabled);
}
[role="checkbox"] [name="label"] {
color: var(--control-text);
}
[role="checkbox"][aria-disabled="true"] [name="label"] {
color: var(--control-disabled);
}
/********************************* Checkbox **********************************/
[role="radio"] {
column-gap: 2px;
}
[role="radio"] [name="check"] {
background : var(--window);
border : 1px solid var(--control-shadow);
border-radius: 50%;
color : var(--window-text);
height : calc(var(--font-size) - 2px);
overflow : hidden;
position : relative;
width : calc(var(--font-size) - 2px);
}
[role="radio"] [name="check"]:after {
background : currentColor;
border-radius: 50%;
bottom : 0;
left : 0;
position : absolute;
margin : 30%;
right : 0;
top : 0;
}
[role="radio"][active] [name="check"]:after,
[role="radio"][aria-checked="true"] [name="check"]:after {
content: "";
}
[role="radio"][active] [name="check"]:after {
color: var(--window);
}
[role="radio"]:focus [name="check"] {
background: var(--control-focus);
}
[role="radio"][aria-disabled="true"] [name="check"] {
border-color: var(--window-disabled);
color : var(--window-disabled);
}
[role="radio"] [name="label"] {
color: var(--control-text);
}
[role="radio"][aria-disabled="true"] [name="label"] {
color: var(--control-disabled);
}
/********************************** MenuBar **********************************/
@@ -94,132 +212,265 @@ body {
/********************************* Splitter **********************************/
[role="separator"][tabindex] {
z-index: 1;
}
[role="separator"][tabindex]:focus {
background: var(--splitter-focus);
}
/********************************** TextBox **********************************/
input[type="text"] {
background : var(--window);
border : 1px solid var(--control-shadow);
color : var(--window-text);
font-size : var(--font-size);
line-height: var(--font-size);
}
/********************************** Window ***********************************/
[role="dialog"] {
/*background: #cc0000;*/
padding: 3px;
}
[role="dialog"] [name="body"] {
background: var(--control);
box-shadow:
0 0 0 1px var(--control),
0 0 0 2px var(--control-text),
1px 1px 0 2px var(--control-text)
0 0 0 2px var(--window-border),
1px 1px 0 2px var(--window-border)
;
row-gap : 3px;
}
[role="dialog"] [name="title-bar"] {
min-height: calc(1em + 5px);
}
[role="dialog"][focus="true"] [name="title-bar"] {
box-shadow:
0 0 0 1px var(--window-focus),
0 1px 0 1px var(--control-shadow)
align-items: center;
background : var(--title);
column-gap : 1px;
padding : 0 0 1px 0;
margin : 0 0 2px 0;
box-shadow :
-0.5px -0.5px 0 0.5px var(--title ),
0.5px -0.5px 0 0.5px var(--title ),
0 0 0 1px var(--control-shadow)
;
background : var(--window-focus);
}
[role="dialog"][focus="false"] [name="title-bar"] {
background: var(--title-blur);
box-shadow:
0 0 0 1px var(--window-blur),
0 1px 0 1px var(--control-shadow)
-0.5px -0.5px 0 0.5px var(--title-blur ),
0.5px -0.5px 0 0.5px var(--title-blur ),
0 0 0 1px var(--control-shadow)
;
background: var(--window-blur);
}
[role="dialog"] [name="title-icon"],
[role="dialog"] [name="title-close-box"] {
align-self : stretch;
min-width : calc(1em + 5px);
width : calc(1em + 5px);
[role="dialog"] [name="title-bar"] [name="icon"] {
height: 15px;
width : 15px;
}
[role="dialog"] [name="title"] {
color : var(--window-focus-text);
font-weight : bold;
line-height : calc(1em + 1px);
overflow : hidden;
padding : 2px;
text-align : center;
text-overflow: ellipsis;
white-space : nowrap;
[role="dialog"] [name="title-bar"] [name="title"] {
color : var(--title-text);
font-size : var(--font-size);
font-weight: bold;
text-align : center;
}
[role="dialog"][focus="false"] [name="title"] {
color: var(--window-blur-text);
[role="dialog"][focus="false"] [name="title-bar"] [name="title"] {
color: var(--title-blur-text);
}
[role="dialog"] [name="title-close-box"] {
align-items : center;
display : flex;
justify-content: center;
}
[role="dialog"] [name="title-close"] {
align-items : center;
background : var(--window-close-focus);
box-shadow : 0 0 0 1px var(--window-close-focus-border);
color : var(--window-close-focus-text);
display : flex;
height : 13px;
justify-content: center;
overflow : hidden;
padding : 0;
width : 13px;
}
[role="dialog"][focus="false"] [name="title-close"] {
background: var(--window-close-blur);
box-shadow: 0 0 0 1px var(--window-close-blur-border);
color : var(--window-close-blur-text);
}
[role="dialog"] [name="title-close"][active] {
box-shadow: 0 0 0 1px var(--window-close-focus-border);
margin : 0;
}
[role="dialog"] [name="title-close"]:after {
content : '\00d7';
[role="dialog"] [name="title-bar"] [name="close"] {
background : var(--close);
border : 1px solid var(--close-border);
box-sizing : border-box;
box-shadow : none;
color : var(--close-text);
font-size : 13px;
font-weight: bold;
height : 15px;
line-height: 13px;
margin : 0;
padding : 0;
position : relative;
text-align : center;
width : 15px;
}
[role="dialog"] [name="title-close"][active]:after {
margin: 1px -1px -1px 1px;
[role="dialog"][focus="false"] [name="title-bar"] [name="close"] {
background : var(--close-blur);
border-color: var(--close-blur-border);
color : var(--close-blur-text);
}
[role="dialog"] [name="title-bar"] [name="close"]:after {
content : "\00d7";
position: absolute;
inset : 0 0 0 0;
}
[role="dialog"] [name="title-bar"] [name="close"][active]:after {
inset: 1px -1px -1px 1px;
}
[role="dialog"] [name="client"] {
background: var(--control);
box-shadow: 0 0 0 1px var(--control);
}
/******************************* Memory Window *******************************/
[window="memory"] [name="client"] {
align-items: start;
column-gap : calc(var(--font-size) / 2);
[role="dialog"][window="memory"] [name="wrap-hex"] {
background : var(--window);
box-shadow : 0 0 0 1px var(--control-shadow);
font-family: var(--font-hex);
margin : 1px;
padding : 1px;
}
[window="memory"] [name="client"] > *:not(:nth-child(1n+1)) {
text-align: center;
[role="dialog"][window="memory"] [name="hex"] [role="row"] {
column-gap: calc(var(--font-size) / 2);
}
[window="memory"] [name="client"] > *:nth-child(17n+2),
[window="memory"] [name="client"] > *:nth-child(17n+10) {
[role="dialog"][window="memory"] [name="hex"] [role="row"] > *:nth-child( 2),
[role="dialog"][window="memory"] [name="hex"] [role="row"] > *:nth-child(10) {
margin-left: calc(var(--font-size) / 2);
}
[window="memory"] [name="address"],
[window="memory"] [name="byte"] {
font-family: var(--font-hex);
line-height: 1em;
/******************************** CPU Window *********************************/
[role="dialog"][window="cpu"] [name="wrap-disassembler"],
[role="dialog"][window="cpu"] [name="wrap-system-registers"],
[role="dialog"][window="cpu"] [name="wrap-program-registers"] {
background: var(--window);
color : var(--window-text);
box-shadow: 0 0 0 1px var(--control-shadow);
}
[window="memory"] [name="address"] {
align-self: start;
[role="dialog"][window="cpu"] [name="wrap-main"] {
box-shadow : 0 0 0 1px var(--control-shadow);
margin-left: 1px;
}
[role="dialog"][window="cpu"] [name="wrap-disassembler"] {
margin: 1px 0;
}
[role="dialog"][window="cpu"] [name="split-main"] {
margin-right: -1px;
}
[role="dialog"][window="cpu"] [name="wrap-registers"] {
box-shadow:
0 -1px 0 0 var(--control-shadow),
0 1px 0 0 var(--control-shadow)
;
margin: 1px 0;
width : 140px;
}
[role="dialog"][window="cpu"] [name="wrap-system-registers"] {
height: 143px;
margin: 0 1px;
}
[role="dialog"][window="cpu"] [name="wrap-program-registers"] {
margin: 0 1px;
}
[role="dialog"][window="cpu"] [name="disassembler"],
[role="dialog"][window="cpu"] [name="system-registers"],
[role="dialog"][window="cpu"] [name="program-registers"] {
padding: 1px;
}
[role="dialog"][window="cpu"] [name="expand"] {
column-gap: 0;
}
[role="dialog"][window="cpu"] [name="expand"] [name="check"] {
border: none;
}
[role="dialog"][window="cpu"] [name="expand"][aria-checked="false"]
[name="check"]:after {
content: "+";
}
[role="dialog"][window="cpu"] [name="expand"][aria-checked="true"]
[name="check"]:after {
content: "-";
}
[role="dialog"][window="cpu"] [name="wrap-registers"] input[type="text"] {
border : none;
font-family : var(--font-hex);
margin-right: 1px;
text-align : right;
width : 58px;
}
[role="dialog"][window="cpu"] [name="wrap-registers"]
[format="float"] [name="value"],
[role="dialog"][window="cpu"] [name="wrap-registers"]
[format="signed"] [name="value"],
[role="dialog"][window="cpu"] [name="wrap-registers"] [format="unsigned"]
[name="value"] {
font-family: var(--dialog-font);
width : 80px;
}
[role="dialog"][window="cpu"] [name="wrap-registers"] [name="expansion"] {
margin-left: calc(var(--font-size) * 1.5);
}
[role="dialog"][window="cpu"] [register="psw" ],
[role="dialog"][window="cpu"] [register="tkcw"] {
column-gap: var(--font-size);
}
[role="dialog"][window="cpu"] [register="ecr" ],
[role="dialog"][window="cpu"] [register="pir" ],
[role="dialog"][window="cpu"] [register="psw" ] [name="I" ],
[role="dialog"][window="cpu"] [register="tkcw"] [name="RD"] {
column-gap: 4px;
}
[role="dialog"][window="cpu"] [register="psw" ] [name="I" ] input[type="text"],
[role="dialog"][window="cpu"] [register="tkcw"] [name="RD"] input[type="text"]{
font-family: var(--font-dialog);
text-align : left;
width : 20px;
}
[role="dialog"][window="cpu"] [register="ecr"] input[type="text"],
[role="dialog"][window="cpu"] [register="pir"] input[type="text"] {
width: 32px;
}
[role="dialog"][window="cpu"] [name="expand"][aria-disabled="true"]
[name="check"]:after {
content: "";
}
[role="dialog"][window="cpu"] [aria-disabled="true"] * {
color: var(--window-text);
}
[role="dialog"][window="cpu"] [aria-disabled="true"] [name="check"] {
border-color: var(--control-shadow);
color : var(--window-text);
}
app/theme/light.css
+21 -15
View File
@@ -1,17 +1,23 @@
:root {
--control : #eeeeee;
--control-focus : #cccccc;
--control-shadow : #999999;
--control-text : #000000;
--desktop : #cccccc;
--window-blur : #cccccc;
--window-blur-text : #444444;
--window-close-blur : #d4c4c4;
--window-close-blur-border : #999999;
--window-close-blur-text : #ffffff;
--window-close-focus : #ee9999;
--window-close-focus-border: #999999;
--window-close-focus-text : #ffffff;
--window-focus : #80ccff;
--window-focus-text : #000000;
--close : #ee9999;
--close-blur : #d4c4c4;
--close-blur-border: #999999;
--close-blur-text : #ffffff;
--close-border : #999999;
--close-text : #ffffff;
--control : #eeeeee;
--control-disabled : #888888;
--control-focus : #cccccc;
--control-shadow : #999999;
--control-text : #000000;
--desktop : #cccccc;
--splitter-focus : #0099ff99;
--title : #80ccff;
--title-blur : #cccccc;
--title-blur-text : #444444;
--title-text : #000000;
--window : #ffffff;
--window-border : #000000;
--window-disabled : #aaaaaa;
--window-text : #000000;
}
app/theme/virtual.css
+22 -16
View File
@@ -1,21 +1,27 @@
:root {
--control : #000000;
--control-focus : #550000;
--control-shadow : #aa0000;
--control-text : #ff0000;
--desktop : #000000;
--window-blur : #000000;
--window-blur-text : #aa0000;
--window-close-blur : #550000;
--window-close-blur-border : #aa0000;
--window-close-blur-text : #aa0000;
--window-close-focus : #aa0000;
--window-close-focus-border: #ff0000;
--window-close-focus-text : #ff0000;
--window-focus : #550000;
--window-focus-text : #ff0000;
--close : #aa0000;
--close-blur : #550000;
--close-blur-border: #aa0000;
--close-blur-text : #aa0000;
--close-border : #ff0000;
--close-text : #ff0000;
--control : #000000;
--control-disabled : #aa0000;
--control-focus : #550000;
--control-shadow : #aa0000;
--control-text : #ff0000;
--desktop : #000000;
--splitter-focus : #ff000099;
--title : #550000;
--title-blur : #000000;
--title-blur-text : #aa0000;
--title-text : #ff0000;
--window : #000000;
--window-border : #ff0000;
--window-disabled : #aa0000;
--window-text : #ff0000;
}
[filter="true"] {
[filter] {
filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9InYiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIiAvPjwvZmlsdGVyPjwvc3ZnPg==#v");
}