Fossil SCM

More CSS tweaks to darkmode. Add the hamburger menu to the khaki skin. Minor styling tweak to plain_gray.

drh 2021-02-10 01:38 trunk
Commit eb8af11bf3054a49a4435777ad1b8f962bfead32fde521ee208080c353c986bf
Parent 9f43fca0eb7cf8a…
5 files changed +53 -4 +24 -5 +2 -2 +3 +3
~ skins/darkmode/css.txt ~ skins/khaki/css.txt ~ skins/khaki/details.txt ~ skins/khaki/header.txt ~ skins/plain_gray/css.txt
M skins/darkmode/css.txt
+53 -4
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -88,15 +88,54 @@
8888
 div.sectionmenu>a.button, div.submenu label,
8989
 div.footer a {
9090
 padding: 0.15em 0.5em;
9191
 }
9292
 /* div.mainmenu a.active, FIXME: setting of .active is broken for some URIs */
93
-a:hover, a:visited:hover {
93
+a:hover,
94
+a:visited:hover {
9495
 background-color: #FF4500f0;
9596
 color: rgba(24,24,24,0.8);
9697
 border-radius: 0.1em;
9798
 }
99
+.button,
100
+button {
101
+ color: #aaa;
102
+ background-color: #444;
103
+ border-radius: 5px;
104
+ border: 0
105
+}
106
+.button:hover,
107
+button:hover {
108
+ background-color: #FF4500f0;
109
+ color: rgba(24,24,24,0.8);
110
+ outline: 0
111
+}
112
+input[type=button],
113
+input[type=reset],
114
+input[type=submit] {
115
+ color: #ddd;
116
+ background-color: #446979;
117
+ border: 0;
118
+ border-radius: 5px
119
+}
120
+input[type=button]:hover,
121
+input[type=reset]:hover,
122
+input[type=submit]:hover {
123
+ background-color: #FF4500f0;
124
+ color: rgba(24,24,24,0.8);
125
+ outline: 0
126
+}
127
+.button:focus,
128
+button:focus,
129
+input[type=button]:focus,
130
+input[type=reset]:focus,
131
+input[type=submit]:focus {
132
+ color: #333;
133
+ border-color: #888;
134
+ outline: 0
135
+}
136
+
98137
 div.mainmenu a.active {
99138
 opacity: 0.8;
100139
 }
101140
 /*div.mainmenu a:hover, div.mainmenu a:visited:hover,
102141
 div.submenu a:hover, div.submenu a:visited:hover,
@@ -473,13 +512,23 @@
473512
 }
474513
 span.snippet>mark {
475514
 color: white;
476515
 font-weight: bold;
477516
 }
478
-input, textarea {
479
- background-color: #c8c8c8;
480
- color: black;
517
+button,
518
+input,
519
+optgroup,
520
+select,
521
+textarea {
522
+ background-color: inherit;
523
+ color: inherit;
524
+ font: inherit;
525
+ margin: 0
526
+}
527
+input, textarea, select {
528
+ border: 1px solid rgba(127, 201, 255, 0.9);
529
+ padding: 1px;
481530
 }
482531
 .capsumOff {
483532
 background-color: #222;
484533
 }
485534
 .capsumRead {
486535
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -88,15 +88,54 @@
88 div.sectionmenu>a.button, div.submenu label,
89 div.footer a {
90 padding: 0.15em 0.5em;
91 }
92 /* div.mainmenu a.active, FIXME: setting of .active is broken for some URIs */
93 a:hover, a:visited:hover {
 
94 background-color: #FF4500f0;
95 color: rgba(24,24,24,0.8);
96 border-radius: 0.1em;
97 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98 div.mainmenu a.active {
99 opacity: 0.8;
100 }
101 /*div.mainmenu a:hover, div.mainmenu a:visited:hover,
102 div.submenu a:hover, div.submenu a:visited:hover,
@@ -473,13 +512,23 @@
473 }
474 span.snippet>mark {
475 color: white;
476 font-weight: bold;
477 }
478 input, textarea {
479 background-color: #c8c8c8;
480 color: black;
 
 
 
 
 
 
 
 
 
 
481 }
482 .capsumOff {
483 background-color: #222;
484 }
485 .capsumRead {
486
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -88,15 +88,54 @@
88 div.sectionmenu>a.button, div.submenu label,
89 div.footer a {
90 padding: 0.15em 0.5em;
91 }
92 /* div.mainmenu a.active, FIXME: setting of .active is broken for some URIs */
93 a:hover,
94 a:visited:hover {
95 background-color: #FF4500f0;
96 color: rgba(24,24,24,0.8);
97 border-radius: 0.1em;
98 }
99 .button,
100 button {
101 color: #aaa;
102 background-color: #444;
103 border-radius: 5px;
104 border: 0
105 }
106 .button:hover,
107 button:hover {
108 background-color: #FF4500f0;
109 color: rgba(24,24,24,0.8);
110 outline: 0
111 }
112 input[type=button],
113 input[type=reset],
114 input[type=submit] {
115 color: #ddd;
116 background-color: #446979;
117 border: 0;
118 border-radius: 5px
119 }
120 input[type=button]:hover,
121 input[type=reset]:hover,
122 input[type=submit]:hover {
123 background-color: #FF4500f0;
124 color: rgba(24,24,24,0.8);
125 outline: 0
126 }
127 .button:focus,
128 button:focus,
129 input[type=button]:focus,
130 input[type=reset]:focus,
131 input[type=submit]:focus {
132 color: #333;
133 border-color: #888;
134 outline: 0
135 }
136
137 div.mainmenu a.active {
138 opacity: 0.8;
139 }
140 /*div.mainmenu a:hover, div.mainmenu a:visited:hover,
141 div.submenu a:hover, div.submenu a:visited:hover,
@@ -473,13 +512,23 @@
512 }
513 span.snippet>mark {
514 color: white;
515 font-weight: bold;
516 }
517 button,
518 input,
519 optgroup,
520 select,
521 textarea {
522 background-color: inherit;
523 color: inherit;
524 font: inherit;
525 margin: 0
526 }
527 input, textarea, select {
528 border: 1px solid rgba(127, 201, 255, 0.9);
529 padding: 1px;
530 }
531 .capsumOff {
532 background-color: #222;
533 }
534 .capsumRead {
535
M skins/khaki/css.txt
+24 -5
--- skins/khaki/css.txt
+++ skins/khaki/css.txt
@@ -58,11 +58,24 @@
5858
 font-weight: bold;
5959
 text-align: center;
6060
 letter-spacing: 1px;
6161
 background-color: #a09048;
6262
 color: black;
63
+ z-index: 21; /* just above hbdrop */
64
+}
65
+div#hbdrop {
66
+ background-color: #fef3bc;
67
+ border: 2px solid #a09048;
68
+ border-radius: 0 0 0.5em 0.5em;
69
+ display: none;
70
+ left: 2em;
71
+ width: 90%;
72
+ padding-right: 1em;
73
+ position: absolute;
74
+ z-index: 20; /* just below mainmenu, but above timeline bubbles */
6375
 }
76
+
6477
6578
 /* The submenu bar that *sometimes* appears below the main menu */
6679
 div.submenu, div.sectionmenu {
6780
 padding: 3px 10px 3px 0px;
6881
 font-size: 0.9em;
@@ -76,24 +89,30 @@
7689
 padding: 3px 10px 3px 10px;
7790
 color: white;
7891
 text-decoration: none;
7992
 }
8093
 div.mainmenu a:hover, div.submenu a:hover, div.sectionmenu>a.button:hover,
81
-div.submenu label:hover {
94
+div.submenu label:hover, div#hbdrop a:hover {
8295
 color: #a09048;
8396
 background-color: white;
8497
 }
8598
8699
 /* All page content from the bottom of the menu or submenu down to
87100
 ** the footer */
88101
 div.content {
89102
 padding: 1ex 5px;
90103
 }
91
-div.content a { color: #706532; }
92
-div.content a:link { color: #706532; }
93
-div.content a:visited { color: #704032; }
94
-div.content a:hover { background-color: white; color: #706532; }
104
+div.content a, div#hbdrop a { color: #706532; }
105
+div.content a:link, div#hbdrop a:link { color: #706532; }
106
+div.content a:visited, div#hbdrop a:visited { color: #704032; }
107
+div.content a:hover, div#hbdrop a:hover {
108
+ background-color: white; color: #706532;
109
+}
110
+a, a:visited {
111
+ text-decoration: none;
112
+}
113
+
95114
96115
 /* Some pages have section dividers */
97116
 div.section {
98117
 margin-bottom: 0px;
99118
 margin-top: 1em;
100119
--- skins/khaki/css.txt
+++ skins/khaki/css.txt
@@ -58,11 +58,24 @@
58 font-weight: bold;
59 text-align: center;
60 letter-spacing: 1px;
61 background-color: #a09048;
62 color: black;
 
 
 
 
 
 
 
 
 
 
 
 
63 }
 
64
65 /* The submenu bar that *sometimes* appears below the main menu */
66 div.submenu, div.sectionmenu {
67 padding: 3px 10px 3px 0px;
68 font-size: 0.9em;
@@ -76,24 +89,30 @@
76 padding: 3px 10px 3px 10px;
77 color: white;
78 text-decoration: none;
79 }
80 div.mainmenu a:hover, div.submenu a:hover, div.sectionmenu>a.button:hover,
81 div.submenu label:hover {
82 color: #a09048;
83 background-color: white;
84 }
85
86 /* All page content from the bottom of the menu or submenu down to
87 ** the footer */
88 div.content {
89 padding: 1ex 5px;
90 }
91 div.content a { color: #706532; }
92 div.content a:link { color: #706532; }
93 div.content a:visited { color: #704032; }
94 div.content a:hover { background-color: white; color: #706532; }
 
 
 
 
 
 
95
96 /* Some pages have section dividers */
97 div.section {
98 margin-bottom: 0px;
99 margin-top: 1em;
100
--- skins/khaki/css.txt
+++ skins/khaki/css.txt
@@ -58,11 +58,24 @@
58 font-weight: bold;
59 text-align: center;
60 letter-spacing: 1px;
61 background-color: #a09048;
62 color: black;
63 z-index: 21; /* just above hbdrop */
64 }
65 div#hbdrop {
66 background-color: #fef3bc;
67 border: 2px solid #a09048;
68 border-radius: 0 0 0.5em 0.5em;
69 display: none;
70 left: 2em;
71 width: 90%;
72 padding-right: 1em;
73 position: absolute;
74 z-index: 20; /* just below mainmenu, but above timeline bubbles */
75 }
76
77
78 /* The submenu bar that *sometimes* appears below the main menu */
79 div.submenu, div.sectionmenu {
80 padding: 3px 10px 3px 0px;
81 font-size: 0.9em;
@@ -76,24 +89,30 @@
89 padding: 3px 10px 3px 10px;
90 color: white;
91 text-decoration: none;
92 }
93 div.mainmenu a:hover, div.submenu a:hover, div.sectionmenu>a.button:hover,
94 div.submenu label:hover, div#hbdrop a:hover {
95 color: #a09048;
96 background-color: white;
97 }
98
99 /* All page content from the bottom of the menu or submenu down to
100 ** the footer */
101 div.content {
102 padding: 1ex 5px;
103 }
104 div.content a, div#hbdrop a { color: #706532; }
105 div.content a:link, div#hbdrop a:link { color: #706532; }
106 div.content a:visited, div#hbdrop a:visited { color: #704032; }
107 div.content a:hover, div#hbdrop a:hover {
108 background-color: white; color: #706532;
109 }
110 a, a:visited {
111 text-decoration: none;
112 }
113
114
115 /* Some pages have section dividers */
116 div.section {
117 margin-bottom: 0px;
118 margin-top: 1em;
119
M skins/khaki/details.txt
+2 -2
--- skins/khaki/details.txt
+++ skins/khaki/details.txt
@@ -1,4 +1,4 @@
11
 timeline-arrowheads: 1
2
-timeline-circle-nodes: 0
3
-timeline-color-graph-lines: 0
2
+timeline-circle-nodes: 1
3
+timeline-color-graph-lines: 1
44
 white-foreground: 0
55
--- skins/khaki/details.txt
+++ skins/khaki/details.txt
@@ -1,4 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/khaki/details.txt
+++ skins/khaki/details.txt
@@ -1,4 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 1
3 timeline-color-graph-lines: 1
4 white-foreground: 0
5
M skins/khaki/header.txt
+3
--- skins/khaki/header.txt
+++ skins/khaki/header.txt
@@ -9,10 +9,12 @@
99
 puts "Not logged in"
1010
 }
1111
 </th1></div>
1212
 </div>
1313
 <div class="mainmenu"><th1>
14
+html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
15
+builtin_request_js hbmenu.js
1416
 foreach {name url expr class} $mainmenu {
1517
 if {![capexpr $expr]} continue
1618
 if {[string match /* $url]} {set url $home$url}
1719
 html "<a href='$url'>$name</a>\n"
1820
 }
@@ -20,5 +22,6 @@
2022
 html "<a href='/logout'>Logout</a>\n"
2123
 } else {
2224
 html "<a href='/login'>Login</a>\n"
2325
 }
2426
 </th1></div>
27
+<div id='hbdrop'></div>
2528
--- skins/khaki/header.txt
+++ skins/khaki/header.txt
@@ -9,10 +9,12 @@
9 puts "Not logged in"
10 }
11 </th1></div>
12 </div>
13 <div class="mainmenu"><th1>
 
 
14 foreach {name url expr class} $mainmenu {
15 if {![capexpr $expr]} continue
16 if {[string match /* $url]} {set url $home$url}
17 html "<a href='$url'>$name</a>\n"
18 }
@@ -20,5 +22,6 @@
20 html "<a href='/logout'>Logout</a>\n"
21 } else {
22 html "<a href='/login'>Login</a>\n"
23 }
24 </th1></div>
 
25
--- skins/khaki/header.txt
+++ skins/khaki/header.txt
@@ -9,10 +9,12 @@
9 puts "Not logged in"
10 }
11 </th1></div>
12 </div>
13 <div class="mainmenu"><th1>
14 html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
15 builtin_request_js hbmenu.js
16 foreach {name url expr class} $mainmenu {
17 if {![capexpr $expr]} continue
18 if {[string match /* $url]} {set url $home$url}
19 html "<a href='$url'>$name</a>\n"
20 }
@@ -20,5 +22,6 @@
22 html "<a href='/logout'>Logout</a>\n"
23 } else {
24 html "<a href='/login'>Login</a>\n"
25 }
26 </th1></div>
27 <div id='hbdrop'></div>
28
M skins/plain_gray/css.txt
+3
--- skins/plain_gray/css.txt
+++ skins/plain_gray/css.txt
@@ -87,10 +87,13 @@
8787
 div.sectionmenu>a.button:hover,
8888
 div.submenu label:hover {
8989
 color: #404040;
9090
 background-color: white;
9191
 }
92
+a, a:visited {
93
+ text-decoration: none;
94
+}
9295
9396
 /* All page content from the bottom of the menu or submenu down to
9497
 ** the footer */
9598
 div.content {
9699
 padding: 0ex 0ex 0ex 0ex;
97100
--- skins/plain_gray/css.txt
+++ skins/plain_gray/css.txt
@@ -87,10 +87,13 @@
87 div.sectionmenu>a.button:hover,
88 div.submenu label:hover {
89 color: #404040;
90 background-color: white;
91 }
 
 
 
92
93 /* All page content from the bottom of the menu or submenu down to
94 ** the footer */
95 div.content {
96 padding: 0ex 0ex 0ex 0ex;
97
--- skins/plain_gray/css.txt
+++ skins/plain_gray/css.txt
@@ -87,10 +87,13 @@
87 div.sectionmenu>a.button:hover,
88 div.submenu label:hover {
89 color: #404040;
90 background-color: white;
91 }
92 a, a:visited {
93 text-decoration: none;
94 }
95
96 /* All page content from the bottom of the menu or submenu down to
97 ** the footer */
98 div.content {
99 padding: 0ex 0ex 0ex 0ex;
100

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button