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

Adding desktop/window components

Browse Source
This commit is contained in:
GuyPerfect
2021-08-26 19:23:18 +00:00
parent dd066e0bbb
commit f753f9f59b
17 changed files with 1297 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/theme/base.css
-118
View File
@@ -1,118 +0,0 @@
/* Common styles for all themes */
:root {
color : var(--text);
font-family: Arial, sans-serif;
font-size : 16px;
}
body {
background: var(--background);
margin : 0;
overflow : hidden;
}
*:focus {
box-shadow:
0 0 0 1px var(--background),
0 0 0 3px var(--focus-ring),
0 0 0 4px var(--background);
outline : none;
z-index : 1;
}
/********************************** Button ***********************************/
[role="button"] {
align-items : center;
background : var(--button);
border-color :
var(--border-light)
var(--border-dark )
var(--border-dark )
var(--border-light)
;
border-radius : 3px;
border-style : solid;
border-width : 1px;
display : flex;
justify-content: center;
padding : 4px;
}
[role="button"][aria-pressed="true"]:not([active]) {
background : var(--button-pressed);
border-color:
var(--border-dark )
var(--border-light)
var(--border-light)
var(--border-dark )
;
padding: 5px 3px 3px 5px;
}
[role="button"]:not([active]):hover {
background: var(--button-hover);
}
[role="button"][active]:not([aria-pressed="true"]) {
background : var(--button-pressed);
border-color:
var(--border-dark )
var(--border-light)
var(--border-light)
var(--border-dark )
;
padding: 5px 3px 3px 5px;
}
[role="button"][aria-pressed="true"][active] {
background : var(--button-pressed);
border-color:
var(--border-dark )
var(--border-light)
var(--border-light)
var(--border-dark )
;
padding: 6px 2px 2px 6px;
}
/********************************** MenuBar **********************************/
[role="menubar"] {
border-bottom: 1px solid var(--border-weak);
column-gap : 4px;
padding : 4px;
}
[role="menubar"] > [role="menuitem"] {
border-radius: 3px;
padding : 4px;
}
[role="menubar"] > * [role="menuitem"] {
border-radius: 3px;
padding : 4px;
}
[role="menubar"] [role="menuitem"]:hover,
[role="menubar"] [role="menuitem"]:focus,
[role="menubar"] [role="menuitem"][aria-expanded="true"] {
background: var(--button-hover);
}
[role="menubar"] [role="menu"] {
background : var(--background);
border-radius: 4px;
box-shadow :
0 0 0 1px var(--border-strong),
4px 4px 5px var(--shadow)
;
min-height : 16px;
min-width : 16px;
padding : 4px;
}
app/theme/dark.css
+11 -12
View File
@@ -1,13 +1,12 @@
:root {
--background : #222222;
--border-dark : #555555;
--border-light : #999999;
--border-weak : #666666;
--border-strong : #999999;
--button : #444444;
--button-hover : #4c4c4c;
--button-pressed: #555555;
--focus-ring : #0099ff;
--shadow : #00000080;
--text : #cccccc;
}
--control : #222222;
--control-focus : #444444;
--control-shadow : #999999;
--desktop : #111111;
--text : #cccccc;
--window-blur : #555555;
--window-blur-text : #cccccc;
--window-close-text: #cccccc;
--window-focus : #007ACC;
--window-focus-text: #ffffff;
}
app/theme/kiosk.css
+188
View File
@@ -0,0 +1,188 @@
/* Common styles for all themes */
:root {
color : var(--text);
font-family: Arial, sans-serif;
font-size : 12px;
}
body {
margin : 0;
overflow: hidden;
}
*:focus {
outline: none;
}
[desktop] {
background: var(--desktop);
}
/********************************** Button ***********************************/
[role="button"] {
box-shadow:
0 0 0 1px var(--control-shadow),
1px 1px 0 1px var(--control-shadow)
;
margin : 1px;
padding : 3px;
}
[role="button"]:focus {
background: var(--control-focus);
}
[role="button"][active] {
box-shadow: 0 0 0 1px var(--control-shadow);
margin : 2px 0 0 2px;
}
/********************************** MenuBar **********************************/
[role="menubar"] {
background : var(--control);
border-bottom: 1px solid var(--text);
padding : 2px 3px 3px 2px;
}
[role="menubar"] [role="menuitem"] {
margin : 1px;
padding: 3px;
}
[role="menubar"] [role="menuitem"]:focus {
background: var(--control-focus);
}
[role="menubar"] [role="menuitem"]:not([active],[aria-expanded="true"]):focus,
[role="menubar"] [role="menuitem"]:not([active],[aria-expanded="true"]):hover {
box-shadow:
0 0 0 1px var(--control-shadow),
1px 1px 0 1px var(--control-shadow)
;
}
[role="menubar"] [role="menuitem"][active],
[role="menubar"] [role="menuitem"][aria-expanded="true"] {
box-shadow: 0 0 0 1px var(--control-shadow);
margin : 2px 0 0 2px;
}
[role="menubar"] [role="menu"] {
background: var(--control);
box-shadow:
0 0 0 1px var(--text),
1px 1px 0 1px var(--text)
;
min-height: 16px;
min-width : 16px;
padding : 2px 3px 3px 2px;
}
/********************************** Window ***********************************/
[role="dialog"] {
/*background: #cc0000;*/
}
[role="dialog"] [name="body"] {
background: var(--control);
box-shadow:
0 0 0 1px var(--control),
0 0 0 2px var(--text),
1px 1px 0 2px var(--text)
;
row-gap : 3px;
}
[role="dialog"] [name="title-bar"] {
}
[role="dialog"][focus="true"] [name="title-bar"] {
box-shadow:
0 0 0 1px var(--window-focus),
0 1px 0 1px var(--control-shadow)
;
background : var(--window-focus);
}
[role="dialog"][focus="false"] [name="title-bar"] {
box-shadow:
0 0 0 1px var(--window-blur),
0 1px 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 + 4px);
width : calc(1em + 4px);
}
[role="dialog"] [name="title"] {
color : var(--window-focus-text);
font-weight : bold;
overflow : hidden;
padding : 2px;
text-align : center;
text-overflow: ellipsis;
white-space : nowrap;
}
[role="dialog"][focus="false"] [name="title"] {
color : var(--window-blur-text);
}
[role="dialog"] [name="title-close-box"] {
align-items : center;
display : flex;
justify-content: flex-start;
}
[role="dialog"] [name="title-close"] {
align-items : center;
background : var(--control);
box-shadow :
0 0 0 1px var(--control),
0 0 0 2px var(--control-shadow)
;
display : flex;
height : 11px;
justify-content: center;
overflow : hidden;
padding : 0;
width : 11px;
}
[role="dialog"] [name="title-close"]:focus {
background: var(--control-focus);
}
[role="dialog"] [name="title-close"][active] {
box-shadow :
-1px -1px 0 1px var(--control),
-1px -1px 0 2px var(--control-shadow)
;
margin: 2px 0 0 2px;
}
[role="dialog"] [name="title-close"]:after {
color : var(--window-close-text);
content : '\00d7';
font-size : 12px;
line-height: 1em;
}
[role="dialog"] [name="client"] {
background: var(--control);
}
app/theme/light.css
+10 -11
View File
@@ -1,13 +1,12 @@
:root {
--background : #ffffff;
--border-dark : #666666;
--border-light : #aaaaaa;
--border-weak : #aaaaaa;
--border-strong : #666666;
--button : #cccccc;
--button-hover : #d5d5d5;
--button-pressed: #dddddd;
--focus-ring : #0099ff;
--shadow : #00000055;
--text : #000000;
--control : #eeeeee;
--control-focus : #cccccc;
--control-shadow : #999999;
--desktop : #cccccc;
--text : #000000;
--window-blur : #cccccc;
--window-blur-text : #444444;
--window-close-text: #444444;
--window-focus : #80ccff;
--window-focus-text: #000000;
}
app/theme/virtual.css
+13 -12
View File
@@ -1,15 +1,16 @@
:root {
--background : #000000;
--border-dark : #550000;
--border-light : #aa0000;
--border-weak : #550000;
--border-strong : #aa0000;
--button : #000000;
--button-hover : #550000;
--button-pressed: #aa0000;
--focus-ring : #ff0000;
--shadow : #ff000080;
--text : #ff0000;
--control : #000000;
--control-focus : #550000;
--control-shadow : #aa0000;
--desktop : #000000;
--text : #ff0000;
--window-blur : #000000;
--window-blur-text : #aa0000;
--window-close-text: #ff0000;
--window-focus : #550000;
--window-focus-text: #ff0000;
}
body { filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9InYiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIiAvPjwvZmlsdGVyPjwvc3ZnPg==#v"); }
[filter="true"] {
filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9InYiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIiAvPjwvZmlsdGVyPjwvc3ZnPg==#v");
}