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 { body {
background: #FFFFFF; background: #FFFFFF;
/* background: var(--Info); */
/* color: var(--InfoText); */
color: var(--WindowText);
font-size: 70%; font-size: 70%;
font-family: Verdana, Arial, Helvetica, "MS Sans Serif"; font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
} }
a:link { a:link {
color: #0000CC; color: #0000CC;
color: var(--HotTrackingColor);
} }
a:active { a:active {

2
styles/layout.css
View File

@ -358,6 +358,8 @@ html, body, .jspaint {
} }
.help-window .contents { .help-window .contents {
background: white; 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-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-grow: 0;
flex-shrink: 0; flex-shrink: 0;

28
styles/themes/classic.css
View File

@ -297,24 +297,38 @@ body,
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
font-size: 12px; font-size: 12px;
padding: 0 2px; padding: 0 2px;
position: relative; /* for ::after */
} }
.help-window .item:hover { .help-window .item:hover {
text-decoration: underline; text-decoration: underline;
color: var(--HotTrackingColor); color: #0000FF;
cursor: pointer; cursor: pointer;
} }
.help-window li:before { .help-window li:before {
background-image: url("../../images/help-icons.png"); background-image: url("../../images/help-icons.png");
} }
.help-window .item.selected { .help-window:not(.focused) .item.selected {
/* @TODO: separate into :focus */ background-color: var(--ButtonFace);
/* TODO: --Hilight */ color: var(--ButtonText); /* ?? */
background-color: #0000aa; }
.help-window.focused .item.selected {
background-color: var(--Hilight);
color: var(--HilightText); color: var(--HilightText);
/* TODO: --inverse-Hilight or use a pseudo element with mix-blend-mode */ /* @TODO: separate focus state of the item */
outline: 1px dotted #ffffaa; outline: 1px dotted black;
outline-offset: -1px; 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=text],
input[type=url] { input[type=url] {