kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-12 13:58:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Various dark mode and css handling improvements

Browse Source 
Former-commit-id: d0a080bec32427dcf2b1b388ad3229ce8620f5b9 [formerly 3839a0289d22484a6c53c0ed5d3f5a952a85de88]
Former-commit-id: ec3b64d503e20a4e11f8def1b84e86fddee2496f
This commit is contained in:
Jaifroid 2017-08-03 17:34:46 +01:00
parent 6f30761378
commit 6ff69e590c
14 changed files with 113 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
bin/Release/AppX/vs.appxrecipe
View File

@ -32,7 +32,7 @@
<AppXManifest Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\bin\Release\AppxManifest.xml"> <AppXManifest Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\bin\Release\AppxManifest.xml">
<PackagePath>AppxManifest.xml</PackagePath> <PackagePath>AppxManifest.xml</PackagePath>
<ReRegisterAppIfChanged>true</ReRegisterAppIfChanged> <ReRegisterAppIfChanged>true</ReRegisterAppIfChanged>
<Modified>2017-08-03T06:44:44.458</Modified> <Modified>2017-08-03T16:11:24.322</Modified>
</AppXManifest> </AppXManifest>
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
@ -371,7 +371,7 @@
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-dark.css"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-dark.css">
<PackagePath>www\-\s\style-dark.css</PackagePath> <PackagePath>www\-\s\style-dark.css</PackagePath>
<Modified>2017-08-03T06:44:19.647</Modified> <Modified>2017-08-03T14:46:32.147</Modified>
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-mobile.css"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style-mobile.css">
<PackagePath>www\-\s\style-mobile.css</PackagePath> <PackagePath>www\-\s\style-mobile.css</PackagePath>
@ -379,7 +379,7 @@
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style.css"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\style.css">
<PackagePath>www\-\s\style.css</PackagePath> <PackagePath>www\-\s\style.css</PackagePath>
<Modified>2017-07-27T16:49:07.370</Modified> <Modified>2017-08-03T13:54:24.424</Modified>
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\vector.css"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\-\s\vector.css">
<PackagePath>www\-\s\vector.css</PackagePath> <PackagePath>www\-\s\vector.css</PackagePath>
@ -387,7 +387,7 @@
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\app.css"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\app.css">
<PackagePath>www\css\app.css</PackagePath> <PackagePath>www\css\app.css</PackagePath>
<Modified>2017-08-02T13:58:13.045</Modified> <Modified>2017-08-03T16:01:31.768</Modified>
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\bootstrap-theme.css"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\css\bootstrap-theme.css">
<PackagePath>www\css\bootstrap-theme.css</PackagePath> <PackagePath>www\css\bootstrap-theme.css</PackagePath>
@ -403,7 +403,7 @@
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\index.html"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\index.html">
<PackagePath>www\index.html</PackagePath> <PackagePath>www\index.html</PackagePath>
<Modified>2017-08-02T11:08:14.747</Modified> <Modified>2017-08-03T14:16:34.242</Modified>
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\favicon.ico"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\favicon.ico">
<PackagePath>www\favicon.ico</PackagePath> <PackagePath>www\favicon.ico</PackagePath>
@ -443,11 +443,11 @@
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\app.js"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\app.js">
<PackagePath>www\js\app.js</PackagePath> <PackagePath>www\js\app.js</PackagePath>
<Modified>2017-08-02T13:37:50.968</Modified> <Modified>2017-08-03T13:25:41.310</Modified>
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\init.js"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\init.js">
<PackagePath>www\js\init.js</PackagePath> <PackagePath>www\js\init.js</PackagePath>
<Modified>2017-07-31T12:00:36.763</Modified> <Modified>2017-08-03T13:13:48.797</Modified>
</AppxPackagedFile> </AppxPackagedFile>
<AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\lib\abstractFilesystemAccess.js"> <AppxPackagedFile Include="C:\Users\geoff\Source\Repos\kiwix-js-windows\www\js\lib\abstractFilesystemAccess.js">
<PackagePath>www\js\lib\abstractFilesystemAccess.js</PackagePath> <PackagePath>www\js\lib\abstractFilesystemAccess.js</PackagePath>

56
bin/Release/AppX/www/-/s/style-dark.css
View File

@ -3,6 +3,14 @@
* https://github.com/StylishThemes/Wikipedia-Dark * https://github.com/StylishThemes/Wikipedia-Dark
* http://userstyles.org/styles/ * http://userstyles.org/styles/
* Modified from https://userstyles.org/styles/47161/dark-wikipedia-rounded * Modified from https://userstyles.org/styles/47161/dark-wikipedia-rounded
* In turn, the styles have been modified to work with Kiwix JS and Kiwix JS Windows.
* The source file for this adapted version can be found at:
* https://github.com/kiwix/kiwix-js-windows/
*
* This CSS file is licensed with a CC-BY-SA Creative Commons Free Culture Licence:
* https://creativecommons.org/licenses/by-sa/4.0/
* This licence applies *only* to this CSS file within the Kiwix JS and Kiwix JS Windows projects.
*
*/ */
/* transparent background */ /* transparent background */
@ -132,8 +140,14 @@ a, .CategoryTreeToggle, #toc a, #toc a span, body .ui-button {
background-color: #222 !important; background-color: #222 !important;
} }
.navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor], tr[bgcolor] { .navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor] {
background-color: darkslategray !important background-color: darkslategray !important;
border-color: #555 !important;
}
tr[bgcolor] {
background-color: #2F3F4F !important;
border-color: #524B4B !important;
} }
body .ui-button body .ui-button
@ -174,7 +188,7 @@ td[style*="background:#F2F2F2"], table.wikitable > tbody > tr[style*="background
} }
/* add a white background to transparent images; see /* add a white background to transparent images; see
* https://forum.userstyles.org/discussion/48549/x */ * https://forum.userstyles.org/discussion/48549/x */
img[data-kiwixsrc$=".svg"], a.image img, a[href*=".svg"] img { img[data-kiwixsrc$=".svg"], img[data-kiwixsrc*="Kiwix_logo"], a.image img, a[href*=".svg"] img {
background: #ddd !important; background: #ddd !important;
} }
@ -183,7 +197,7 @@ td[style*="background:#F2F2F2"], table.wikitable > tbody > tr[style*="background
background: #fff !important; background: #fff !important;
} }
blockquote[style*="background-color: white"] { blockquote[style*="white"] {
background-color: black !important; background-color: black !important;
color: lightgray !important; color: lightgray !important;
} }
@ -207,16 +221,16 @@ blockquote[style*="background-color: white"] {
background: #244024 !important; background: #244024 !important;
} }
/* Blue /* Blue */
div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th, div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th,
.navbox-title, .navbox-title *, tr[style*="background-color:tan;"], .navbox-title, .navbox-title *, tr[style*="background-color:tan;"],
div[style*="background: #444444;"], div[style*="background: #444444;"] *, div[style*="background: #444444;"], div[style*="background: #444444;"] *,
ol.references li:target, sup.reference:target, span.citation:target, ol.references li:target, sup.reference:target, span.citation:target,
ol.references li:target *, sup.reference:target *, span.citation:target *, ol.references li:target *, sup.reference:target *, span.citation:target *,
td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *, td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *,
div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] { div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] {
background-color: #182030 !important; background-color: black !important;
} */ }
.navbox-abovebelow, th.navbox-group, td.navbox-group, .navbox-subgroup .navbox-title, .navbox-abovebelow, th.navbox-group, td.navbox-group, .navbox-subgroup .navbox-title,
.navbox-abovebelow *, th.navbox-group *, .navbox-subgroup .navbox-title * { .navbox-abovebelow *, th.navbox-group *, .navbox-subgroup .navbox-title * {
@ -324,16 +338,16 @@ td[style*="border-bottom"] {
} }
/*** invert images ***/ /*** invert images ***/
img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline, img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline,
#mw-wsmfinal-close, img[src*="Speaker_Icon"], .infobox img[alt*="structure"][src*=".svg"], img[src*=".png"]:active, #mw-wsmfinal-close, img[data-kiwixsrc*="Speaker_Icon"], .infobox img[alt*="structure"][data-kiwixsrc*=".svg"], .infobox img[data-file-type*="drawing"][data-kiwixsrc*=".svg"], img[data-kiwixsrc*=".png"]:active,
img[src*=".svg"][height="16"], img[src*=".svg"][height="17"], img[src*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix"], img[data-kiwixsrc*=".svg"][height="16"], img[data-kiwixsrc*=".svg"][height="17"], img[data-kiwixsrc*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix_icon"],
.oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn, .oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn,
#pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending, #pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending,
#pt-notifications-alert .mw-echo-notifications-badge:before { #pt-notifications-alert .mw-echo-notifications-badge:before {
-webkit-filter: invert(100%) !important; -webkit-filter: invert(100%) !important;
filter: invert(100%) !important; filter: invert(100%) !important;
background-color: transparent !important; background-color: transparent !important;
} }
.oo-ui-icon-bell { .oo-ui-icon-bell {
opacity: 0.7 !important; opacity: 0.7 !important;
} }

3
bin/Release/AppX/www/-/s/style.css
View File

File diff suppressed because one or more lines are too long

2
bin/Release/AppX/www/css/app.css
View File

@ -88,7 +88,7 @@
float: left; float: left;
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
max-width: 300px; max-width: 500px;
min-height: 150px; min-height: 150px;
border: 1px solid black; border: 1px solid black;
} }

12
bin/Release/AppX/www/index.html
View File

@ -205,12 +205,16 @@
<div id="cssSettingsDiv" class="settings"> <div id="cssSettingsDiv" class="settings">
<p>Please select the display style:</p> <p>Please select the display style:</p>
<p style="text-indent: -22px; margin-left: 20px;"> <p style="text-indent: -22px; margin-left: 20px;">
<input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" checked="checked" value="desktop"> <input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
<b>&nbsp;Use Wikimedia desktop display style</b> (for Wikipedia files) <b>&nbsp;Select style automatically</b> (<i>recommended</i>: matches the ZIM style)
</p>
<p style="text-indent: -22px; margin-left: 20px;">
<input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop">
<b>&nbsp;Use Wikimedia desktop display style</b> (and transform if necessary)
</p> </p>
<p style="text-indent: -22px; margin-left: 20px;"> <p style="text-indent: -22px; margin-left: 20px;">
<input type="radio" name="cssInjectionMode" value="mobile" id="cssModeMobileRadio"> <input type="radio" name="cssInjectionMode" value="mobile" id="cssModeMobileRadio">
<b>&nbsp;Use Wikimedia mobile display style</b> (for Wikipedia files) <b>&nbsp;Use Wikimedia mobile display style</b> (and transform if necessary)
</p> </p>
</div> </div>
<div id="displaySettingsDiv" class="settings"> <div id="displaySettingsDiv" class="settings">
@ -239,6 +243,7 @@
</td> </td>
</tr> </tr>
</table> </table>
<div id="returntoArticle_bottom" style="text-align: center;"></div>
<h2>Expert settings</h2> <h2>Expert settings</h2>
<div id="contentInjectionModeDiv"> <div id="contentInjectionModeDiv">
Do not touch unless you know what you're doing. <br /> Do not touch unless you know what you're doing. <br />
@ -250,7 +255,6 @@
<div id="serviceWorkerStatus"></div> <div id="serviceWorkerStatus"></div>
<div id="messageChannelStatus"></div> <div id="messageChannelStatus"></div>
<br /> <br />
<div id="returntoArticle_bottom" style="text-align: center;"></div>
</div> </div>
<div id="welcomeText" class="container category-padding"> <div id="welcomeText" class="container category-padding">
You can search the content of your ZIM archive by typing in the above search field. You can search the content of your ZIM archive by typing in the above search field.

1
bin/Release/AppX/www/js/app.js
View File

@ -895,6 +895,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
var testCSS = arr.join(); var testCSS = arr.join();
zimType = /-\/s\/style\.css/i.test(testCSS) ? "desktop" : zimType; zimType = /-\/s\/style\.css/i.test(testCSS) ? "desktop" : zimType;
zimType = /minerva|mobile/i.test(testCSS) ? "mobile" : zimType; zimType = /minerva|mobile/i.test(testCSS) ? "mobile" : zimType;
cssSource = cssSource == "auto" ? zimType : cssSource; //Default to in-built zimType if user has selected automatic detection of styles
if (/minerva/i.test(testCSS) && (cssCache || zimType != cssSource)) { if (/minerva/i.test(testCSS) && (cssCache || zimType != cssSource)) {
//Substitute ridiculously long style name TODO: move this code to transformStyles //Substitute ridiculously long style name TODO: move this code to transformStyles
for (var i = 0; i < arr.length; i++) { //NB minerva.css is a dummy name for now TODO: sort out in transfromStyles for (var i = 0; i < arr.length; i++) { //NB minerva.css is a dummy name for now TODO: sort out in transfromStyles

2
bin/Release/AppX/www/js/init.js
View File

@ -23,7 +23,7 @@
'use strict'; 'use strict';
var params = {}; var params = {};
var results = params['results'] || 10; //Number of search results to display var results = params['results'] || 10; //Number of search results to display
params['cssSource'] = params['cssSource'] || "desktop"; //Set default to "desktop" or "mobile" params['cssSource'] = params['cssSource'] || "auto"; //Set default to "auto", "desktop" or "mobile"
params['cssCache'] = params['cssCache'] || true; //Set default to true to use cached CSS, false to use Zim only params['cssCache'] = params['cssCache'] || true; //Set default to true to use cached CSS, false to use Zim only
params['cssTheme'] = params['cssTheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles params['cssTheme'] = params['cssTheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles
params['cssUITheme'] = params['cssUITheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI params['cssUITheme'] = params['cssUITheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI

54
www/-/s/style-dark.css
View File

@ -3,6 +3,14 @@
* https://github.com/StylishThemes/Wikipedia-Dark * https://github.com/StylishThemes/Wikipedia-Dark
* http://userstyles.org/styles/ * http://userstyles.org/styles/
* Modified from https://userstyles.org/styles/47161/dark-wikipedia-rounded * Modified from https://userstyles.org/styles/47161/dark-wikipedia-rounded
* In turn, the styles have been modified to work with Kiwix JS and Kiwix JS Windows.
* The source file for this adapted version can be found at:
* https://github.com/kiwix/kiwix-js-windows/
*
* This CSS file is licensed with a CC-BY-SA Creative Commons Free Culture Licence:
* https://creativecommons.org/licenses/by-sa/4.0/
* This licence applies *only* to this CSS file within the Kiwix JS and Kiwix JS Windows projects.
*
*/ */
/* transparent background */ /* transparent background */
@ -132,8 +140,14 @@ a, .CategoryTreeToggle, #toc a, #toc a span, body .ui-button {
background-color: #222 !important; background-color: #222 !important;
} }
.navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor], tr[bgcolor] { .navbox th, .climate-table th, .wikitable th, .navbox-title, th[bgcolor], td[bgcolor] {
background-color: darkslategray !important background-color: darkslategray !important;
border-color: #555 !important;
}
tr[bgcolor] {
background-color: #2F3F4F !important;
border-color: #524B4B !important;
} }
body .ui-button body .ui-button
@ -183,7 +197,7 @@ td[style*="background:#F2F2F2"], table.wikitable > tbody > tr[style*="background
background: #fff !important; background: #fff !important;
} }
blockquote[style*="background-color: white"] { blockquote[style*="white"] {
background-color: black !important; background-color: black !important;
color: lightgray !important; color: lightgray !important;
} }
@ -207,16 +221,16 @@ blockquote[style*="background-color: white"] {
background: #244024 !important; background: #244024 !important;
} }
/* Blue /* Blue */
div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th, div[style*="background"] h2, div[style*="background"] h2 *, #mp-right h2, #mp-right h2 span, .navbox th,
.navbox-title, .navbox-title *, tr[style*="background-color:tan;"], .navbox-title, .navbox-title *, tr[style*="background-color:tan;"],
div[style*="background: #444444;"], div[style*="background: #444444;"] *, div[style*="background: #444444;"], div[style*="background: #444444;"] *,
ol.references li:target, sup.reference:target, span.citation:target, ol.references li:target, sup.reference:target, span.citation:target,
ol.references li:target *, sup.reference:target *, span.citation:target *, ol.references li:target *, sup.reference:target *, span.citation:target *,
td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *, td[style*="background:#CEDFF2"], tr[bgcolor="#CEDFF2"], table[style*="background-color:#cef2e0"] *,
div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] { div[style*="background-color: #cee0f2"], div[style*="background-color: #cedff2"] {
background-color: #182030 !important; background-color: black !important;
} */ }
.navbox-abovebelow, th.navbox-group, td.navbox-group, .navbox-subgroup .navbox-title, .navbox-abovebelow, th.navbox-group, td.navbox-group, .navbox-subgroup .navbox-title,
.navbox-abovebelow *, th.navbox-group *, .navbox-subgroup .navbox-title * { .navbox-abovebelow *, th.navbox-group *, .navbox-subgroup .navbox-title * {
@ -324,16 +338,16 @@ td[style*="border-bottom"] {
} }
/*** invert images ***/ /*** invert images ***/
img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline, img[title="Wikipedia"], .bookshelf-container .bookend, img.mwe-math-fallback-image-inline,
#mw-wsmfinal-close, img[src*="Speaker_Icon"], .infobox img[alt*="structure"][src*=".svg"], img[src*=".png"]:active, #mw-wsmfinal-close, img[data-kiwixsrc*="Speaker_Icon"], .infobox img[alt*="structure"][data-kiwixsrc*=".svg"], .infobox img[data-file-type*="drawing"][data-kiwixsrc*=".svg"], img[data-kiwixsrc*=".png"]:active,
img[src*=".svg"][height="16"], img[src*=".svg"][height="17"], img[src*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix_icon"], img[data-kiwixsrc*=".svg"][height="16"], img[data-kiwixsrc*=".svg"][height="17"], img[data-kiwixsrc*=".svg"][height="18"], img[data-kiwixsrc*="Kiwix_icon"],
.oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn, .oo-ui-iconElement-icon:not(.mw-echo-notifications-badge), .RTsettings, #gtx-host, .jfk-bubble-closebtn,
#pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending, #pt-notifications-notice .mw-echo-notifications-badge:before, .oo-ui-pendingElement-pending,
#pt-notifications-alert .mw-echo-notifications-badge:before { #pt-notifications-alert .mw-echo-notifications-badge:before {
-webkit-filter: invert(100%) !important; -webkit-filter: invert(100%) !important;
filter: invert(100%) !important; filter: invert(100%) !important;
background-color: transparent !important; background-color: transparent !important;
} }
.oo-ui-icon-bell { .oo-ui-icon-bell {
opacity: 0.7 !important; opacity: 0.7 !important;
} }

8
www/-/s/style-darkSimple.css Normal file
View File

@ -0,0 +1,8 @@
html, img, video {
-webkit-filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
body {
background: black;
}

3
www/-/s/style.css
View File

File diff suppressed because one or more lines are too long

2
www/css/app.css
View File

@ -88,7 +88,7 @@
float: left; float: left;
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
max-width: 300px; max-width: 500px;
min-height: 150px; min-height: 150px;
border: 1px solid black; border: 1px solid black;
} }

15
www/index.html
View File

@ -205,12 +205,16 @@
<div id="cssSettingsDiv" class="settings"> <div id="cssSettingsDiv" class="settings">
<p>Please select the display style:</p> <p>Please select the display style:</p>
<p style="text-indent: -22px; margin-left: 20px;"> <p style="text-indent: -22px; margin-left: 20px;">
<input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" checked="checked" value="desktop"> <input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
<b>&nbsp;Use Wikimedia desktop display style</b> (for Wikipedia files) <b>&nbsp;Select style automatically</b> (<i>recommended</i>: matches the ZIM style)
</p>
<p style="text-indent: -22px; margin-left: 20px;">
<input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop">
<b>&nbsp;Use Wikimedia desktop display style</b> (and transform if necessary)
</p> </p>
<p style="text-indent: -22px; margin-left: 20px;"> <p style="text-indent: -22px; margin-left: 20px;">
<input type="radio" name="cssInjectionMode" value="mobile" id="cssModeMobileRadio"> <input type="radio" name="cssInjectionMode" value="mobile" id="cssModeMobileRadio">
<b>&nbsp;Use Wikimedia mobile display style</b> (for Wikipedia files) <b>&nbsp;Use Wikimedia mobile display style</b> (and transform if necessary)
</p> </p>
</div> </div>
<div id="displaySettingsDiv" class="settings"> <div id="displaySettingsDiv" class="settings">
@ -232,13 +236,13 @@
</p> </p>
<p style="text-indent: -22px; margin-left: 20px;"> <p style="text-indent: -22px; margin-left: 20px;">
<input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck"> <input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck">
<b>&nbsp;Use a dark theme for Wikimedia articles</b> (this may not work on non-Wikipedia ZIM files) <b>&nbsp;Use a dark theme for Wikimedia articles</b> (<i>experimental</i> and may only work for Wikipedia ZIM files)
</p> </p>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
<div id="returntoArticle_bottom" style="text-align: center;"></div>
<h2>Expert settings</h2> <h2>Expert settings</h2>
<div id="contentInjectionModeDiv"> <div id="contentInjectionModeDiv">
Do not touch unless you know what you're doing. <br /> Do not touch unless you know what you're doing. <br />
@ -250,7 +254,6 @@
<div id="serviceWorkerStatus"></div> <div id="serviceWorkerStatus"></div>
<div id="messageChannelStatus"></div> <div id="messageChannelStatus"></div>
<br /> <br />
<div id="returntoArticle_bottom" style="text-align: center;"></div>
</div> </div>
<div id="welcomeText" class="container category-padding"> <div id="welcomeText" class="container category-padding">
You can search the content of your ZIM archive by typing in the above search field. You can search the content of your ZIM archive by typing in the above search field.

1
www/js/app.js
View File

@ -895,6 +895,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
var testCSS = arr.join(); var testCSS = arr.join();
zimType = /-\/s\/style\.css/i.test(testCSS) ? "desktop" : zimType; zimType = /-\/s\/style\.css/i.test(testCSS) ? "desktop" : zimType;
zimType = /minerva|mobile/i.test(testCSS) ? "mobile" : zimType; zimType = /minerva|mobile/i.test(testCSS) ? "mobile" : zimType;
cssSource = cssSource == "auto" ? zimType : cssSource; //Default to in-built zimType if user has selected automatic detection of styles
if (/minerva/i.test(testCSS) && (cssCache || zimType != cssSource)) { if (/minerva/i.test(testCSS) && (cssCache || zimType != cssSource)) {
//Substitute ridiculously long style name TODO: move this code to transformStyles //Substitute ridiculously long style name TODO: move this code to transformStyles
for (var i = 0; i < arr.length; i++) { //NB minerva.css is a dummy name for now TODO: sort out in transfromStyles for (var i = 0; i < arr.length; i++) { //NB minerva.css is a dummy name for now TODO: sort out in transfromStyles

2
www/js/init.js
View File

@ -23,7 +23,7 @@
'use strict'; 'use strict';
var params = {}; var params = {};
var results = params['results'] || 10; //Number of search results to display var results = params['results'] || 10; //Number of search results to display
params['cssSource'] = params['cssSource'] || "desktop"; //Set default to "desktop" or "mobile" params['cssSource'] = params['cssSource'] || "auto"; //Set default to "auto", "desktop" or "mobile"
params['cssCache'] = params['cssCache'] || true; //Set default to true to use cached CSS, false to use Zim only params['cssCache'] = params['cssCache'] || true; //Set default to true to use cached CSS, false to use Zim only
params['cssTheme'] = params['cssTheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles params['cssTheme'] = params['cssTheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for Wiki articles
params['cssUITheme'] = params['cssUITheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI params['cssUITheme'] = params['cssUITheme'] || 'light'; //Set default to 'light' or 'dark' to use respective themes for UI