Web re-rewrite
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458 2.6458" version="1.1">
|
||||
<g>
|
||||
<path style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.05832,1.653625 1.3229,-1.3229 v 0.66145 l -1.3229,1.3229 -0.79374,-0.79374 v -0.66145 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 459 B |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 2.9104166 2.9104167" version="1.1">
|
||||
<g>
|
||||
<path style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0.52916666,0.52916665 0.396875,0 0.52916664,0.52916665 0.5291667,-0.52916665 0.396875,0 0,0.396875 L 1.8520833,1.4552083 2.38125,1.984375 l 0,0.396875 -0.396875,0 L 1.4552083,1.8520834 0.92604166,2.38125 l -0.396875,0 0,-0.396875 L 1.0583333,1.4552083 0.52916666,0.92604165 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 652 B |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 2.9104166 2.9104168">
|
||||
<g>
|
||||
<rect style="opacity:1;fill:#000000;stroke-width:0.264583;stroke-linecap:square" width="1.3229167" height="0.26458332" x="0.79375005" y="1.3229167" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 367 B |
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--tk-control : #333333;
|
||||
--tk-control-active : #555555;
|
||||
--tk-control-border : #cccccc;
|
||||
--tk-control-highlight : #444444;
|
||||
--tk-control-shadow : #9b9b9b;
|
||||
--tk-control-text : #cccccc;
|
||||
--tk-desktop : #111111;
|
||||
--tk-selected : #008542;
|
||||
--tk-selected-blur : #325342;
|
||||
--tk-selected-blur-text : #ffffff;
|
||||
--tk-selected-text : #ffffff;
|
||||
--tk-splitter-focus : #008542c0;
|
||||
--tk-window : #222222;
|
||||
--tk-window-blur-close : #d9aeae;
|
||||
--tk-window-blur-close-text : #eeeeee;
|
||||
--tk-window-blur-title : #9fafb9;
|
||||
--tk-window-blur-title2 : #c0b0a0;
|
||||
--tk-window-blur-title-text : #444444;
|
||||
--tk-window-close : #ee9999;
|
||||
--tk-window-close-focus : #99ee99;
|
||||
--tk-window-close-focus-text: #333333;
|
||||
--tk-window-close-text : #ffffff;
|
||||
--tk-window-text : #cccccc;
|
||||
--tk-window-title : #80ccff;
|
||||
--tk-window-title2 : #ffb894;
|
||||
--tk-window-title-text : #000000;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 2.9104166 2.9104168">
|
||||
<g>
|
||||
<rect style="opacity:1;fill:#000000;stroke-width:0.264583;stroke-linecap:square" width="0.26458332" height="1.3229167" x="1.3229167" y="0.79375005" />
|
||||
<rect style="opacity:1;fill:#000000;stroke-width:0.264583;stroke-linecap:square" width="1.3229167" height="0.26458332" x="0.79375005" y="1.3229167" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 522 B |
Binary file not shown.
@@ -0,0 +1,548 @@
|
||||
:root {
|
||||
--tk-font-dialog : "Roboto", sans-serif;
|
||||
--tk-font-mono : "Inconsolata SemiExpanded Medium", monospace;
|
||||
--tk-font-size : 12px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src : /**/url("./roboto.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inconsolata SemiExpanded Medium";
|
||||
src : /**/url("./inconsolata.woff2") format("woff2");
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--tk-control);
|
||||
}
|
||||
|
||||
.tk {
|
||||
box-sizing : border-box;
|
||||
font-family: var(--tk-font-dialog);
|
||||
font-size : var(--tk-font-size);
|
||||
line-height: 1em;
|
||||
margin : 0;
|
||||
outline : none; /* User agent focus indicator */
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
table.tk {
|
||||
border : none;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.tk.mono {
|
||||
font-family: var(--tk-font-mono);
|
||||
}
|
||||
|
||||
.tk::selection,
|
||||
.tk *::selection {
|
||||
background: var(--tk-selected);
|
||||
color : var(--tk-selected-text);
|
||||
}
|
||||
|
||||
.tk:not(:focus-within)::selection,
|
||||
.tk *:not(:focus-within)::selection {
|
||||
background: var(--tk-selected-blur);
|
||||
color : var(--tk-selected-blur-text);
|
||||
}
|
||||
|
||||
.tk.display {
|
||||
background: var(--tk-desktop);
|
||||
}
|
||||
|
||||
.tk.desktop {
|
||||
background: var(--tk-desktop);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************** Button ***********************************/
|
||||
|
||||
.tk.button {
|
||||
align-items : stretch;
|
||||
display : inline-grid;
|
||||
grid-template-columns: auto;
|
||||
justify-content : stretch;
|
||||
padding : 0 1px 1px 0;
|
||||
}
|
||||
|
||||
.tk.button .label {
|
||||
align-items : center;
|
||||
background : var(--tk-control);
|
||||
border : 1px solid var(--tk-control-border);
|
||||
box-shadow : 1px 1px 0 var(--tk-control-border);
|
||||
color : var(--tk-control-text);
|
||||
display : grid;
|
||||
grid-template-columns: auto;
|
||||
justify-content : center;
|
||||
padding : 2px;
|
||||
}
|
||||
|
||||
.tk.button:focus .label {
|
||||
background: var(--tk-control-active);
|
||||
}
|
||||
|
||||
.tk.button.pushed {
|
||||
padding: 1px 0 0 1px;
|
||||
}
|
||||
|
||||
.tk.button.pushed .label {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tk.button[aria-disabled="true"] .label {
|
||||
color : var(--tk-control-shadow);
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
box-shadow: 1px 1px 0 var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************* Checkbox **********************************/
|
||||
|
||||
.tk.checkbox {
|
||||
column-gap: 2px;
|
||||
}
|
||||
|
||||
.tk.checkbox .box {
|
||||
border: 1px solid var(--tk-control-shadow);
|
||||
color : var(--tk-control-text);
|
||||
}
|
||||
|
||||
.tk.checkbox:focus .box {
|
||||
background: var(--tk-control-active);
|
||||
}
|
||||
|
||||
.tk.checkbox .box:before {
|
||||
background : transparent;
|
||||
content : "";
|
||||
display : block;
|
||||
height : 10px;
|
||||
mask : /**/url("./check.svg") center no-repeat;
|
||||
-webkit-mask: /**/url("./check.svg") center no-repeat;
|
||||
width : 10px;
|
||||
}
|
||||
|
||||
.tk.checkbox[aria-checked="true"] .box:before {
|
||||
background: currentcolor;
|
||||
}
|
||||
|
||||
.tk.checkbox.pushed .box:before {
|
||||
background: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.checkbox[aria-disabled="true"] .box {
|
||||
background: var(--tk-control);
|
||||
color : var(--tk-control-shadow);
|
||||
}
|
||||
.tk.checkbox[aria-disabled="true"] .label {
|
||||
color: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************* DropDown **********************************/
|
||||
|
||||
.tk.drop-down {
|
||||
background: var(--tk-window);
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
color : var(--tk-window-text);
|
||||
padding : 2px;
|
||||
}
|
||||
|
||||
.tk.drop-down:focus {
|
||||
background: var(--tk-control-active);
|
||||
}
|
||||
|
||||
.tk.drop-down[aria-disabled="true"] {
|
||||
color: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************** Menus ***********************************/
|
||||
|
||||
.tk.menu-bar {
|
||||
background : var(--tk-control);
|
||||
border-bottom: 1px solid var(--tk-control-border);
|
||||
color : var(--tk-control-text);
|
||||
cursor : default;
|
||||
padding : 2px;
|
||||
position : relative;
|
||||
}
|
||||
|
||||
.tk.menu {
|
||||
background: var(--tk-control);
|
||||
border : 1px solid var(--tk-control-border);
|
||||
box-shadow: 1px 1px 0 var(--tk-control-border);
|
||||
color : var(--tk-control-text);
|
||||
margin : -1px 0 0 1px;
|
||||
padding : 2px;
|
||||
}
|
||||
|
||||
.tk.menu-item[aria-disabled="true"] {
|
||||
color: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.menu-item > * {
|
||||
align-items: center;
|
||||
border : 1px solid transparent;
|
||||
column-gap : 4px;
|
||||
display : flex;
|
||||
margin : 0 1px 1px 0;
|
||||
padding : 2px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tk.menu-item .icon {
|
||||
box-sizing: border-box;
|
||||
height : 1em;
|
||||
width : 1em;
|
||||
}
|
||||
|
||||
.tk.menu-item .icon:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height : 100%;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.tk.menu-bar > .menu-item .icon,
|
||||
.tk.menu:not(.icons) > .menu-item .icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tk.menu-item.checkbox .icon {
|
||||
border: 1px solid currentcolor;
|
||||
}
|
||||
|
||||
.tk.menu-item.checkbox[aria-checked="true"] .icon:before {
|
||||
background : currentcolor;
|
||||
mask : /**/url("./check.svg") center no-repeat;
|
||||
-webkit-mask: /**/url("./check.svg") center no-repeat;
|
||||
}
|
||||
|
||||
.tk.menu-item .label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tk.menu-item:not([aria-expanded="true"],
|
||||
[aria-disabled="true"], .pushed):hover > *,
|
||||
.tk.menu-item:not([aria-expanded="true"], .pushed):focus > * {
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
box-shadow: 1px 1px 0 var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.menu-item:focus > * {
|
||||
background: var(--tk-control-active);
|
||||
}
|
||||
|
||||
.tk.menu-item.pushed > *,
|
||||
.tk.menu-item[aria-expanded="true"] > * {
|
||||
background: var(--tk-control-active);
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
box-shadow: none;
|
||||
margin : 1px 0 0 1px;
|
||||
}
|
||||
|
||||
.tk.menu > [role="separator"] {
|
||||
border : solid var(--tk-control-shadow);
|
||||
border-width: 1px 0 0 0;
|
||||
margin : 4px 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************** Radio ***********************************/
|
||||
|
||||
.tk.radio {
|
||||
column-gap: 2px;
|
||||
}
|
||||
|
||||
.tk.radio .box {
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
border-radius: 50%;
|
||||
color : var(--tk-control-text);
|
||||
margin : 1px;
|
||||
}
|
||||
|
||||
.tk.radio:focus .box {
|
||||
background: var(--tk-control-active);
|
||||
}
|
||||
|
||||
.tk.radio .box:before {
|
||||
background : transparent;
|
||||
border-radius: 50%;
|
||||
content : "";
|
||||
display : block;
|
||||
height : 4px;
|
||||
margin : 2px;
|
||||
width : 4px;
|
||||
}
|
||||
|
||||
.tk.radio[aria-checked="true"] .box:before {
|
||||
background: currentcolor;
|
||||
}
|
||||
|
||||
.tk.radio.pushed .box:before {
|
||||
background: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.radio[aria-disabled="true"] .box {
|
||||
background: var(--tk-control);
|
||||
color : var(--tk-control-shadow);
|
||||
}
|
||||
.tk.radio[aria-disabled="true"] .label {
|
||||
color: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************* ScrollBar *********************************/
|
||||
|
||||
.tk.scroll-bar {
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tk.scroll-bar .unit-less,
|
||||
.tk.scroll-bar .unit-more {
|
||||
background: var(--tk-control);
|
||||
border : 0 solid var(--tk-control-shadow);
|
||||
color : var(--tk-control-text);
|
||||
height : 11px;
|
||||
width : 11px;
|
||||
}
|
||||
.tk.scroll-bar[aria-orientation="horizontal"] .unit-less {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.tk.scroll-bar[aria-orientation="horizontal"] .unit-more {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.tk.scroll-bar[aria-orientation="vertical"] .unit-less {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.tk.scroll-bar[aria-orientation="vertical"] .unit-more {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.tk.scroll-bar .unit-less:before,
|
||||
.tk.scroll-bar .unit-more:before {
|
||||
background : currentColor;
|
||||
content : "";
|
||||
display : block;
|
||||
height : 100%;
|
||||
mask : /**/url("./scroll.svg") center no-repeat;
|
||||
-webkit-mask: /**/url("./scroll.svg") center no-repeat;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.tk.scroll-bar .unit-less.pushed:before,
|
||||
.tk.scroll-bar .unit-more.pushed:before {
|
||||
mask-size : 9px;
|
||||
-webkit-mask-size: 9px;
|
||||
}
|
||||
|
||||
.tk.scroll-bar[aria-orientation="horizontal"] .unit-less:before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.tk.scroll-bar[aria-orientation="horizontal"] .unit-more:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.tk.scroll-bar[aria-orientation="vertical"] .unit-more:before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tk.scroll-bar .track {
|
||||
background: var(--tk-control-highlight);
|
||||
}
|
||||
|
||||
.tk.scroll-bar .thumb {
|
||||
background: var(--tk-control);
|
||||
box-shadow: 0 0 0 1px var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.scroll-bar .block-less.pushed,
|
||||
.tk.scroll-bar .block-more.pushed {
|
||||
background: var(--tk-control-shadow);
|
||||
opacity : 0.5;
|
||||
}
|
||||
|
||||
.tk.scroll-bar:focus .unit-less,
|
||||
.tk.scroll-bar:focus .unit-more,
|
||||
.tk.scroll-bar:focus .thumb {
|
||||
background: var(--tk-control-active);
|
||||
}
|
||||
|
||||
.tk.scroll-bar[aria-disabled="true"] .unit-less,
|
||||
.tk.scroll-bar[aria-disabled="true"] .unit-more,
|
||||
.tk.scroll-bar.unneeded .unit-less,
|
||||
.tk.scroll-bar.unneeded .unit-more,
|
||||
.tk.scroll-bar[aria-disabled="true"] .thumb {
|
||||
color: var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.scroll-bar.unneeded .thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/******************************** ScrollPane *********************************/
|
||||
|
||||
.tk.scroll-pane {
|
||||
border: 1px solid var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.scroll-pane > .scroll-bar[aria-orientation="horizontal"] {
|
||||
border-width: 1px 1px 0 0;
|
||||
}
|
||||
.tk.scroll-pane:not(.vertical) > .scroll-bar[aria-orientation="horizontal"] {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
.tk.scroll-pane > .scroll-bar[aria-orientation="vertical"] {
|
||||
border-width: 0 0 1px 1px;
|
||||
}
|
||||
.tk.scroll-pane:not(.horizontal) > .scroll-bar[aria-orientation="vertical"] {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
|
||||
.tk.scroll-pane > .viewport,
|
||||
.tk.scroll-pane > .corner {
|
||||
background: var(--tk-control);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************* SplitPane *********************************/
|
||||
|
||||
.tk.split-pane > [role="separator"]:focus {
|
||||
background: var(--tk-splitter-focus);
|
||||
}
|
||||
|
||||
.tk.split-pane > .horizontal[role="separator"] {
|
||||
width: 3px;
|
||||
}
|
||||
.tk.split-pane > .vertical[role="separator"] {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************** TextBox **********************************/
|
||||
|
||||
.tk.text-box {
|
||||
background : var(--tk-window);
|
||||
border : 1px solid var(--tk-control-border);
|
||||
color : var(--tk-window-text);
|
||||
line-height: 1em;
|
||||
height : calc(1em + 2px);
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
min-width : 0;
|
||||
}
|
||||
|
||||
.tk.text-box.[aria-disabled="true"] {
|
||||
background: var(--tk-control-shadow);
|
||||
color : var(--tk-window-text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************** Windows **********************************/
|
||||
|
||||
.tk.window {
|
||||
background: var(--tk-control);
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
box-shadow: 1px 1px 0 var(--tk-control-shadow);
|
||||
}
|
||||
|
||||
.tk.window:focus-within {
|
||||
border : 1px solid var(--tk-control-border);
|
||||
box-shadow: 1px 1px 0 var(--tk-control-border);
|
||||
}
|
||||
|
||||
.tk.window > .nw1 { left : -2px; top : -2px; width : 8px; height: 3px; }
|
||||
.tk.window > .nw2 { left : -2px; top : 1px; width : 3px; height: 5px; }
|
||||
.tk.window > .n { left : 6px; top : -2px; right : 6px; height: 3px; }
|
||||
.tk.window > .ne1 { right: -2px; top : -2px; width : 8px; height: 3px; }
|
||||
.tk.window > .ne2 { right: -2px; top : 1px; width : 3px; height: 5px; }
|
||||
.tk.window > .w { left : -2px; top : 6px; bottom: 6px; width : 3px; }
|
||||
.tk.window > .e { right: -2px; top : 6px; bottom: 6px; width : 3px; }
|
||||
.tk.window > .sw1 { left : -2px; bottom: -2px; width : 8px; height: 3px; }
|
||||
.tk.window > .sw2 { left : -2px; bottom: 1px; width : 3px; height: 5px; }
|
||||
.tk.window > .s { left : 6px; bottom: -2px; right : 6px; height: 3px; }
|
||||
.tk.window > .se1 { right: -2px; bottom: -2px; width : 8px; height: 3px; }
|
||||
.tk.window > .se2 { right: -2px; bottom: 1px; width : 3px; height: 5px; }
|
||||
|
||||
.tk.window > .title {
|
||||
align-items : center;
|
||||
background : var(--tk-window-blur-title);
|
||||
border-bottom: 1px solid var(--tk-control-shadow);
|
||||
color : var(--tk-window-blur-title-text);
|
||||
padding : 1px;
|
||||
user-select : none;
|
||||
}
|
||||
|
||||
.tk.window:focus-within > .title {
|
||||
background: var(--tk-window-title);
|
||||
color : var(--tk-window-title-text);
|
||||
}
|
||||
|
||||
.tk.window.two > .title {
|
||||
background: var(--tk-window-blur-title2);
|
||||
}
|
||||
|
||||
.tk.window.two:focus-within > .title {
|
||||
background: var(--tk-window-title2);
|
||||
}
|
||||
|
||||
.tk.window > .title .text {
|
||||
cursor : default;
|
||||
font-weight : bold;
|
||||
overflow : hidden;
|
||||
text-align : center;
|
||||
text-overflow: ellipsis;
|
||||
white-space : nowrap;
|
||||
}
|
||||
|
||||
.tk.window > .title .close-button {
|
||||
background: var(--tk-window-blur-close);
|
||||
border : 1px solid var(--tk-control-shadow);
|
||||
box-sizing: border-box;
|
||||
color : var(--tk-window-close-text);
|
||||
height : 13px;
|
||||
width : 13px;
|
||||
}
|
||||
|
||||
.tk.window:focus-within > .title .close-button {
|
||||
background: var(--tk-window-close);
|
||||
}
|
||||
|
||||
.tk.window > .title .close-button:focus {
|
||||
background: var(--tk-window-close-focus);
|
||||
color : var(--tk-window-close-focus-text);
|
||||
outline : 1px solid var(--tk-control);
|
||||
}
|
||||
|
||||
.tk.window > .title .close-button:before {
|
||||
background : currentcolor;
|
||||
content : "";
|
||||
display : block;
|
||||
height : 11px;
|
||||
mask : /**/url("./close.svg") center no-repeat;
|
||||
-webkit-mask: /**/url("./close.svg") center no-repeat;
|
||||
width : 11px;
|
||||
}
|
||||
|
||||
.tk.window > .title .close-button.pushed:before {
|
||||
mask-size : 9px;
|
||||
-webkit-mask-size: 9px;
|
||||
}
|
||||
|
||||
.tk.window > .client {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
:root {
|
||||
--tk-control : #eeeeee;
|
||||
--tk-control-active : #cccccc;
|
||||
--tk-control-border : #000000;
|
||||
--tk-control-highlight : #f8f8f8;
|
||||
--tk-control-shadow : #6c6c6c;
|
||||
--tk-control-text : #000000;
|
||||
--tk-desktop : #cccccc;
|
||||
--tk-selected : #008542;
|
||||
--tk-selected-blur : #5e7d70;
|
||||
--tk-selected-blur-text : #ffffff;
|
||||
--tk-selected-text : #ffffff;
|
||||
--tk-splitter-focus : #008542c0;
|
||||
--tk-window : #ffffff;
|
||||
--tk-window-blur-close : #d9aeae;
|
||||
--tk-window-blur-close-text : #eeeeee;
|
||||
--tk-window-blur-title : #aac4d5;
|
||||
--tk-window-blur-title2 : #dbc4b8;
|
||||
--tk-window-blur-title-text : #444444;
|
||||
--tk-window-close : #ee9999;
|
||||
--tk-window-close-focus : #99ee99;
|
||||
--tk-window-close-focus-text: #333333;
|
||||
--tk-window-close-text : #ffffff;
|
||||
--tk-window-text : #000000;
|
||||
--tk-window-title : #80ccff;
|
||||
--tk-window-title2 : #ffb894;
|
||||
--tk-window-title-text : #000000;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 2.6458332 2.6458332" version="1.1">
|
||||
<g>
|
||||
<circle style="opacity:1;fill:#000000;stroke-width:0.264583;stroke-linecap:square" cx="1.3229166" cy="1.3229166" r="0.66145831" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
Binary file not shown.
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 2.9104166 2.9104167" version="1.1">
|
||||
<g>
|
||||
<path style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 1.4552083,0.66145833 0.52916666,1.5874999 V 2.2489583 L 1.4552083,1.3229166 2.38125,2.2489583 V 1.5874999 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 484 B |
@@ -0,0 +1,223 @@
|
||||
/******************************** 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);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
:root {
|
||||
--tk-control : #000000;
|
||||
--tk-control-active : #550000;
|
||||
--tk-control-border : #ff0000;
|
||||
--tk-control-highlight : #550000;
|
||||
--tk-control-shadow : #aa0000;
|
||||
--tk-control-text : #ff0000;
|
||||
--tk-desktop : #000000;
|
||||
--tk-selected : #aa0000;
|
||||
--tk-selected-blur : #550000;
|
||||
--tk-selected-blur-text : #ff0000;
|
||||
--tk-selected-text : #000000;
|
||||
--tk-splitter-focus : #ff0000aa;
|
||||
--tk-window : #000000;
|
||||
--tk-window-blur-close : #000000;
|
||||
--tk-window-blur-close-text : #aa0000;
|
||||
--tk-window-blur-title : #000000;
|
||||
--tk-window-blur-title2 : #000000;
|
||||
--tk-window-blur-title-text : #aa0000;
|
||||
--tk-window-close : #550000;
|
||||
--tk-window-close-focus : #ff0000;
|
||||
--tk-window-close-focus-text: #550000;
|
||||
--tk-window-close-text : #ff0000;
|
||||
--tk-window-text : #ff0000;
|
||||
--tk-window-title : #550000;
|
||||
--tk-window-title2 : #550000;
|
||||
--tk-window-title-text : #ff0000;
|
||||
}
|
||||
|
||||
input, select {
|
||||
filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9InYiPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VHcmFwaGljIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMSAwIiAvPjwvZmlsdGVyPjwvc3ZnPg==#v");
|
||||
}
|
||||
|
||||
.tk.scroll-bar .unit-less,
|
||||
.tk.scroll-bar .unit-more,
|
||||
.tk.scroll-bar .thumb {
|
||||
background: #550000;
|
||||
}
|
||||
.tk.scroll-bar .track {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.tk.scroll-bar:focus,
|
||||
.tk.scroll-bar:focus .unit-less,
|
||||
.tk.scroll-bar:focus .unit-more,
|
||||
.tk.scroll-bar:focus .thumb {
|
||||
background : #aa0000;
|
||||
border-color: #ff0000;
|
||||
color : #000000;
|
||||
}
|
||||
.tk.scroll-bar:focus .track {
|
||||
background: #550000;
|
||||
}
|
||||
.tk.scroll-bar:focus .thumb {
|
||||
box-shadow: 0 0 0 1px #ff0000;
|
||||
}
|
||||
|
||||
.tk.window {
|
||||
box-shadow: 1px 1px 0 #550000;
|
||||
}
|
||||
.tk.window:focus-within {
|
||||
box-shadow: 1px 1px 0 #aa0000;
|
||||
}
|
||||
Reference in New Issue
Block a user