radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply theme to the help window

main
Isaiah Odhner 2020-03-24 17:14:13 -04:00
parent d922498b4c
commit a1d4058bed
3 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
help/coUA.css
View File

@ -2,12 +2,16 @@
body {
background: #FFFFFF;
/* background: var(--Info); */
/* color: var(--InfoText); */
color: var(--WindowText);
font-size: 70%;
font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
}
a:link {
color: #0000CC;
color: var(--HotTrackingColor);
}
a:active {

2
styles/layout.css
View File

@ -358,6 +358,8 @@ html, body, .jspaint {
}
.help-window .contents {
background: white;
background: var(--Window);
color: var(--WindowText);
flex-basis: 300px; /* normally the default is 200px, but that leaves a scrollbar and we don't have rollover viewing of longer titles (@TODO) */
flex-grow: 0;
flex-shrink: 0;

28
styles/themes/classic.css
View File

@ -297,24 +297,38 @@ body,
font-family: 'Segoe UI', sans-serif;
font-size: 12px;
padding: 0 2px;
position: relative; /* for ::after */
}
.help-window .item:hover {
text-decoration: underline;
color: var(--HotTrackingColor);
color: #0000FF;
cursor: pointer;
}
.help-window li:before {
background-image: url("../../images/help-icons.png");
}
.help-window .item.selected {
/* @TODO: separate into :focus */
/* TODO: --Hilight */
background-color: #0000aa;
.help-window:not(.focused) .item.selected {
background-color: var(--ButtonFace);
color: var(--ButtonText); /* ?? */
}
.help-window.focused .item.selected {
background-color: var(--Hilight);
color: var(--HilightText);
/* TODO: --inverse-Hilight or use a pseudo element with mix-blend-mode */
outline: 1px dotted #ffffaa;
/* @TODO: separate focus state of the item */
outline: 1px dotted black;
outline-offset: -1px;
}
/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
/* .help-window.focused .item.selected::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px dotted white;
mix-blend-mode: difference;
} */
input[type=text],
input[type=url] {