FeedMonkey HTML5 RSS Feed Reader

Check-in [245d200092]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Add black theme
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | origin/clean | trunk | master
Files: files | file ages | folders
SHA3-256:245d2000927ed7636a0eb856e80f1f1397859ed82f79af1447052cc280171919
User & Date: vandys 2019-03-05 14:51:47
Context
2019-03-05
15:45
Make read/unread indicator dim when read. check-in: 3bb0214a02 user: vandys tags: origin/clean, trunk, master
14:51
Add black theme check-in: 245d200092 user: vandys tags: origin/clean, trunk, master
2019-03-02
16:28
Move to ES6 classes. Tidy some control flow. Use let/const where appropriate. Move to 4-space indentation. Normalize "if (...)" spacing. check-in: 50e5705971 user: vandys tags: origin/clean, trunk, master
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/screen.css.

16
17
18
19
20
21
22

23
24
25
26
27
28
29
30
31
32

33
34
35
36
37
38
39
..
52
53
54
55
56
57
58

59
60
61
62
63

64
65
66
67
68
69
70
...
101
102
103
104
105
106
107

108
109
110
111
112
113
114
...
199
200
201
202
203
204
205

206
207
208
209
210
211
212
...
214
215
216
217
218
219
220

221
222
223
224
225
226
227
...
346
347
348
349
350
351
352






353
354
355
356
357
358
359
body.f4 { font-size: 1.5em; }
body.f5 { font-size: 1.75em; }

.red    { background: #e74c3c; color: #ecf0f1; }
.white  { background: #ecf0f1; color: #2c3e50; }
.blue   { background: #3498db; color: #ecf0f1; }
.yellow { background: #f1c40f; color: #2c3e50; }


a {
	outline: none;
	text-decoration: none;
}

.red    a { color: #ecf0f1; }
.white  a { color: #2c3e50; }
.blue   a { color: #ecf0f1; }
.yellow a { color: #2c3e50; }


.button {
	outline: none;
	display: block;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
................................................................................
	display: inline-block;
}

.red    .button { background: #c0392b; color: #ecf0f1; }
.white  .button { background: #bdc3c7; color: #2c3e50; }
.blue   .button { background: #2980b9; color: #ecf0f1; }
.yellow .button { background: #f39c12; color: #2c3e50; }


.red    .bar .button { background: #e74c3c; color: #ecf0f1; }
.white  .bar .button { background: #ecf0f1; color: #2c3e50; }
.blue   .bar .button { background: #3498db; color: #ecf0f1; }
.yellow .bar .button { background: #f1c40f; color: #2c3e50; }


.smallogo { text-align: center; margin: 0; padding: 0; }

button:active, a:active, .button:active, input:active, input:focus {
	background: black !important;
	color: white !important;
}
................................................................................
	padding: 10px;
}

.red    .bar { background: #c0392b; }
.white  .bar { background: #bdc3c7; }
.blue   .bar { background: #2980b9; }
.yellow .bar { background: #f39c12; }


section > header h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	font-weight: lighter;
}
................................................................................
	position: relative;
}

.red    #list li { border-bottom: 1px solid #c0392b; }
.white  #list li { border-bottom: 1px solid #bdc3c7; }
.blue   #list li { border-bottom: 1px solid #2980b9; }
.yellow #list li { border-bottom: 1px solid #f39c12; }


#list li li:after {
	content: "";
	position: absolute;
	right: 7px;
	top: -0.2em;
	font-weight: 100;
................................................................................
	font-family: "Entypo";
}

.red    #list li:after { color: #c0392b; }
.white  #list li:after { color: #bdc3c7; }
.blue   #list li:after { color: #2980b9; }
.yellow #list li:after { color: #f39c12; }


#list li > a {
	display: block;
	padding: 5px 25px 5px 10px;
	text-decoration: none;
	outline: none;
}
................................................................................
}

#settings ul a.color-yellow {
	background: #f1c40f;
	border: 20px solid #f39c12;
	border-width: 1px 20px 1px 1px;
	color: #2c3e50;






}

#settings .version, #settings .reset-info {
	padding-top: 1em;
}

#settings .icons a, #settings .madeby a {







>










>







 







>





>







 







>







 







>







 







>







 







>
>
>
>
>
>







16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
..
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
...
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
...
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
...
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
...
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
body.f4 { font-size: 1.5em; }
body.f5 { font-size: 1.75em; }

.red    { background: #e74c3c; color: #ecf0f1; }
.white  { background: #ecf0f1; color: #2c3e50; }
.blue   { background: #3498db; color: #ecf0f1; }
.yellow { background: #f1c40f; color: #2c3e50; }
.black  { background: #000000; color: #ffffff; }

a {
	outline: none;
	text-decoration: none;
}

.red    a { color: #ecf0f1; }
.white  a { color: #2c3e50; }
.blue   a { color: #ecf0f1; }
.yellow a { color: #2c3e50; }
.black  a { color: #ffffff; }

.button {
	outline: none;
	display: block;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
................................................................................
	display: inline-block;
}

.red    .button { background: #c0392b; color: #ecf0f1; }
.white  .button { background: #bdc3c7; color: #2c3e50; }
.blue   .button { background: #2980b9; color: #ecf0f1; }
.yellow .button { background: #f39c12; color: #2c3e50; }
.black  .button { background: #000000; color: #ffffff; }

.red    .bar .button { background: #e74c3c; color: #ecf0f1; }
.white  .bar .button { background: #ecf0f1; color: #2c3e50; }
.blue   .bar .button { background: #3498db; color: #ecf0f1; }
.yellow .bar .button { background: #f1c40f; color: #2c3e50; }
.black  .bar .button { background: #000000; color: #ffffff; }

.smallogo { text-align: center; margin: 0; padding: 0; }

button:active, a:active, .button:active, input:active, input:focus {
	background: black !important;
	color: white !important;
}
................................................................................
	padding: 10px;
}

.red    .bar { background: #c0392b; }
.white  .bar { background: #bdc3c7; }
.blue   .bar { background: #2980b9; }
.yellow .bar { background: #f39c12; }
.black  .bar { background: #000000; }

section > header h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	font-weight: lighter;
}
................................................................................
	position: relative;
}

.red    #list li { border-bottom: 1px solid #c0392b; }
.white  #list li { border-bottom: 1px solid #bdc3c7; }
.blue   #list li { border-bottom: 1px solid #2980b9; }
.yellow #list li { border-bottom: 1px solid #f39c12; }
.black  #list li { border-bottom: 1px solid #111111; }

#list li li:after {
	content: "";
	position: absolute;
	right: 7px;
	top: -0.2em;
	font-weight: 100;
................................................................................
	font-family: "Entypo";
}

.red    #list li:after { color: #c0392b; }
.white  #list li:after { color: #bdc3c7; }
.blue   #list li:after { color: #2980b9; }
.yellow #list li:after { color: #f39c12; }
.black  #list li:after { color: #ffffff; }

#list li > a {
	display: block;
	padding: 5px 25px 5px 10px;
	text-decoration: none;
	outline: none;
}
................................................................................
}

#settings ul a.color-yellow {
	background: #f1c40f;
	border: 20px solid #f39c12;
	border-width: 1px 20px 1px 1px;
	color: #2c3e50;
}
#settings ul a.color-black {
	background: #000000;
	border: 20px solid #222222;
	border-width: 1px 20px 1px 1px;
	color: #ffffff;
}

#settings .version, #settings .reset-info {
	padding-top: 1em;
}

#settings .icons a, #settings .madeby a {

Changes to index.html.

41
42
43
44
45
46
47

48
49
50
51
52
53
54
        <span><span class="icon">&#128269;</span> <small>A</small><big>A</big>:</span>
        <a class="button small" href="#font-smaller"><span class="icon">&#11015;</span></a>
        <a class="button small" href="#font-bigger"><span class="icon">&#11014;</span></a>
      </li>
      <li><a href="#color-white" class="color-white button"><span class="icon">&#59290;</span> White</a></li>
      <li><a href="#color-blue" class="color-blue button"><span class="icon">&#59290;</span> Blue</a></li>
      <li><a href="#color-yellow" class="color-yellow button"><span class="icon">&#59290;</span> Yellow</a></li>

      <li><a href="#color-red" class="color-red button"><span class="icon">&#59290;</span> Red (default)</a></li>
      <li class="reset-info"><a href="#reset-info" class="button"><span class="icon">&#59160;</span> View those info bubbles again</a></li>
      <li><a href="#logout" class="button"><span class="icon">&#59201;</span> Log out</a></li>
      <li class="version"><span class="icon">&#59141;</span> You're running version <em id="version"></em></li>
      <li class="madeby"><span class="icon">&#59141;</span> Made by <a href="http://jabs.nu/" target="_blank">Jabs Nu</a></li>
      <li class="icons"><span class="icon">&#128325;</span> Icons by <a href="http://www.entypo.com/" target="_blank">Entypo</a></li>
    </ul>







>







41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
        <span><span class="icon">&#128269;</span> <small>A</small><big>A</big>:</span>
        <a class="button small" href="#font-smaller"><span class="icon">&#11015;</span></a>
        <a class="button small" href="#font-bigger"><span class="icon">&#11014;</span></a>
      </li>
      <li><a href="#color-white" class="color-white button"><span class="icon">&#59290;</span> White</a></li>
      <li><a href="#color-blue" class="color-blue button"><span class="icon">&#59290;</span> Blue</a></li>
      <li><a href="#color-yellow" class="color-yellow button"><span class="icon">&#59290;</span> Yellow</a></li>
      <li><a href="#color-black" class="color-black button"><span class="icon">&#59290;</span> Black</a></li>
      <li><a href="#color-red" class="color-red button"><span class="icon">&#59290;</span> Red (default)</a></li>
      <li class="reset-info"><a href="#reset-info" class="button"><span class="icon">&#59160;</span> View those info bubbles again</a></li>
      <li><a href="#logout" class="button"><span class="icon">&#59201;</span> Log out</a></li>
      <li class="version"><span class="icon">&#59141;</span> You're running version <em id="version"></em></li>
      <li class="madeby"><span class="icon">&#59141;</span> Made by <a href="http://jabs.nu/" target="_blank">Jabs Nu</a></li>
      <li class="icons"><span class="icon">&#128325;</span> Icons by <a href="http://www.entypo.com/" target="_blank">Entypo</a></li>
    </ul>