555 lines
13 KiB
CSS
555 lines
13 KiB
CSS
: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[aria-checked="mixed"] .box:before {
|
|
background : currentcolor;
|
|
mask : /**/url("./check2.svg") center no-repeat;
|
|
-webkit-mask: /**/url("./check2.svg") center no-repeat;
|
|
}
|
|
|
|
.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;
|
|
}
|