valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

support night mode when using share by URL

This commit is contained in:
Andrew Dolgov 2020-01-19 10:51:08 +03:00
parent 303f8fb329
commit aa56bcaf44
10 changed files with 388 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
classes/handler/public.php
View File

@ -366,7 +366,18 @@ class Handler_Public extends Handler {
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>".$line["title"]."</title>".
stylesheet_tag("css/default.css")."
javascript_tag("lib/prototype.js").
javascript_tag("js/utility.js")."
<style type='text/css'>
@media (prefers-color-scheme: dark) {
body {
background : #222;
}
}
body.css_loading * {
display : none;
}
</style>
<link rel='shortcut icon' type='image/png' href='images/favicon.png'>
<link rel='icon' type='image/png' sizes='72x72' href='images/favicon-72px.png'>";
@ -389,7 +400,7 @@ class Handler_Public extends Handler {
$rv .= "<meta property='og:image' content=\"" . htmlspecialchars($og_image) . "\"/>";
}
$rv .= "<body class='flat ttrss_utility ttrss_zoom'>";
$rv .= "<body class='flat ttrss_utility ttrss_zoom css_loading'>";
$rv .= "<div class='container'>";
if ($line["link"]) {

4
css/default.css
View File

@ -1864,7 +1864,7 @@ body.ttrss_zoom div.post .attachments {
}
body.ttrss_zoom div.post div.header {
padding-bottom: 10px;
border: 0px solid #eee;
border: 0px solid #ddd;
border-bottom-width: 1px;
background: white;
font-size: 12px;
@ -1897,7 +1897,7 @@ body.ttrss_zoom div.post div.content blockquote {
margin: 5px 0px 5px 0px;
color: #555;
padding-left: 10px;
border: 0px solid #ccc;
border: 0px solid #ddd;
border-left-width: 4px;
}
body.ttrss_zoom div.post div.content code {

4
css/utility.less
View File

@ -10,8 +10,8 @@ body.ttrss_utility {
margin : 4em;
.content {
background : white;
border : 1px solid #ddd;
background : @default-bg;
border : 1px solid @border-default;
padding : 20px;
box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);

12
css/zoom.less
View File

@ -3,8 +3,8 @@ body.ttrss_zoom {
margin : 2em auto;
div.post {
border : 1px solid #ddd;
background : white;
border : 1px solid @border-default;
background : @default-bg;
box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
.attachments {
@ -13,11 +13,11 @@ body.ttrss_zoom {
div.header {
padding-bottom : 10px;
border: 0px solid #eee;
border: 0px solid @border-default;
border-bottom-width: 1px;
background : white;
background : @default-bg;
font-size : 12px;
color : #555;
color : @default-text;
.row {
display : flex;
@ -49,7 +49,7 @@ body.ttrss_zoom {
margin : 5px 0px 5px 0px;
color : @default-text;
padding-left : 10px;
border: 0px solid #ccc;
border: 0px solid @border-default;
border-left-width: 4px;
}

39
js/utility.js Normal file
View File

@ -0,0 +1,39 @@
Event.observe(window, "load", function() {
const UtilityJS = {
apply_night_mode: function (is_night, link) {
console.log("night mode changed to", is_night);
if (link) {
const css_override = is_night ? "themes/night.css" : "css/default.css";
link.setAttribute("href", css_override + "?" + Date.now());
}
},
setup_night_mode: function() {
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const link = new Element("link", {
rel: "stylesheet",
id: "theme_auto_css"
});
link.onload = function() {
document.querySelector("body").removeClassName("css_loading");
};
try {
mql.addEventListener("change", () => {
UtilityJS.apply_night_mode(mql.matches, link);
});
} catch (e) {
console.warn("exception while trying to set MQL event listener");
}
document.querySelector("head").appendChild(link);
UtilityJS.apply_night_mode(mql.matches, link);
}
};
UtilityJS.setup_night_mode();
});

255
themes/night.css
View File

@ -1600,100 +1600,6 @@ body.ttrss_utility fieldset > label.checkbox {
display: inline;
font-weight: normal;
}
body.ttrss_utility.sanity_failed {
background: #900;
}
body.ttrss_utility {
background: #222;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 4em;
}
body.ttrss_utility .content {
background: white;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
}
body.ttrss_utility .content h2:first-of-type {
margin-top: 0;
}
body.ttrss_utility .content h2,
body.ttrss_utility .content h3,
body.ttrss_utility .content h4 {
color: #b87d2c;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_utility .content h2 {
font-size: 18px;
}
body.ttrss_utility .content h3 {
font-size: 16px;
}
body.ttrss_utility a {
color: #b87d2c;
text-decoration: none;
}
body.ttrss_utility a:hover,
body.ttrss_utility a:focus {
color: #664518;
text-decoration: underline;
}
body.ttrss_utility h1 {
color: gray;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 10px 0 0 0;
}
body.ttrss_utility .footer {
text-align: center;
padding-top: 10px;
}
body.ttrss_utility .footer a {
color: gray;
}
body.ttrss_utility .footer a:hover {
color: #b87d2c;
}
body.ttrss_utility form {
margin: 0;
}
body.ttrss_utility.otp .content fieldset > label {
display: inline;
}
body.ttrss_utility.ttrss_login {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
body.ttrss_utility.ttrss_login .container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
body.ttrss_utility.ttrss_login .container .content {
padding: 40px;
}
body.ttrss_utility.installer,
body.ttrss_utility.feed_debugger {
margin: 2em;
}
body.ttrss_utility.share_popup {
margin: 0;
padding: 0;
background: white;
}
body.ttrss_utility.share_popup .content {
padding: 15px;
border-width: 0;
box-shadow: none;
}
.flat li {
padding: 2px;
}
@ -1842,6 +1748,167 @@ body.ttrss_utility.share_popup .content {
/* Support for IE. */
font-feature-settings: 'liga';
}
body.ttrss_utility.sanity_failed {
background: #900;
}
body.ttrss_utility {
background: #222;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 4em;
}
body.ttrss_utility .content {
background: #333;
border: 1px solid #222;
padding: 20px;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
}
body.ttrss_utility .content h2:first-of-type {
margin-top: 0;
}
body.ttrss_utility .content h2,
body.ttrss_utility .content h3,
body.ttrss_utility .content h4 {
color: #b87d2c;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_utility .content h2 {
font-size: 18px;
}
body.ttrss_utility .content h3 {
font-size: 16px;
}
body.ttrss_utility a {
color: #b87d2c;
text-decoration: none;
}
body.ttrss_utility a:hover,
body.ttrss_utility a:focus {
color: #664518;
text-decoration: underline;
}
body.ttrss_utility h1 {
color: gray;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 10px 0 0 0;
}
body.ttrss_utility .footer {
text-align: center;
padding-top: 10px;
}
body.ttrss_utility .footer a {
color: gray;
}
body.ttrss_utility .footer a:hover {
color: #b87d2c;
}
body.ttrss_utility form {
margin: 0;
}
body.ttrss_utility.otp .content fieldset > label {
display: inline;
}
body.ttrss_utility.ttrss_login {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
body.ttrss_utility.ttrss_login .container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
body.ttrss_utility.ttrss_login .container .content {
padding: 40px;
}
body.ttrss_utility.installer,
body.ttrss_utility.feed_debugger {
margin: 2em;
}
body.ttrss_utility.share_popup {
margin: 0;
padding: 0;
background: white;
}
body.ttrss_utility.share_popup .content {
padding: 15px;
border-width: 0;
box-shadow: none;
}
body.ttrss_zoom {
max-width: 900px;
margin: 2em auto;
}
body.ttrss_zoom div.post {
border: 1px solid #222;
background: #333;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
}
body.ttrss_zoom div.post .attachments {
display: none;
}
body.ttrss_zoom div.post div.header {
padding-bottom: 10px;
border: 0px solid #222;
border-bottom-width: 1px;
background: #333;
font-size: 12px;
color: #ccc;
}
body.ttrss_zoom div.post div.header .row {
display: flex;
margin-bottom: 4px;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
body.ttrss_zoom div.post p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
body.ttrss_zoom div.post div.content {
font-size: 15px;
line-height: 1.5;
border-width: 0;
padding: 0;
}
body.ttrss_zoom div.post div.content img,
body.ttrss_zoom div.post div.content video {
max-width: 760px;
height: auto;
}
body.ttrss_zoom div.post div.content blockquote {
margin: 5px 0px 5px 0px;
color: #ccc;
padding-left: 10px;
border: 0px solid #222;
border-left-width: 4px;
}
body.ttrss_zoom div.post div.content code {
color: #009900;
font-family: monospace;
font-size: 12px;
}
body.ttrss_zoom div.post div.content pre {
margin: 5px 0px 5px 0px;
padding: 10px;
color: #ccc;
font-family: monospace;
font-size: 12px;
border: 0px solid #ccc;
background: #222;
display: block;
max-width: 98%;
overflow: auto;
}
body.flat.ttrss_main.ttrss_prefs #main,
body.flat.ttrss_main.ttrss_prefs #footer {
background: #222;

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long

2
themes/night_base.less
View File

@ -1,4 +1,6 @@
@import "../css/defines.less";
@import "../css/utility.less";
@import "../css/zoom.less";
@import "../lib/flat-ttrss/flat_combined_dark.css";
@color-accent: #b87d2c;

255
themes/night_blue.css
View File

@ -1600,100 +1600,6 @@ body.ttrss_utility fieldset > label.checkbox {
display: inline;
font-weight: normal;
}
body.ttrss_utility.sanity_failed {
background: #900;
}
body.ttrss_utility {
background: #222;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 4em;
}
body.ttrss_utility .content {
background: white;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
}
body.ttrss_utility .content h2:first-of-type {
margin-top: 0;
}
body.ttrss_utility .content h2,
body.ttrss_utility .content h3,
body.ttrss_utility .content h4 {
color: #257aa7;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_utility .content h2 {
font-size: 18px;
}
body.ttrss_utility .content h3 {
font-size: 16px;
}
body.ttrss_utility a {
color: #257aa7;
text-decoration: none;
}
body.ttrss_utility a:hover,
body.ttrss_utility a:focus {
color: #133d54;
text-decoration: underline;
}
body.ttrss_utility h1 {
color: gray;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 10px 0 0 0;
}
body.ttrss_utility .footer {
text-align: center;
padding-top: 10px;
}
body.ttrss_utility .footer a {
color: gray;
}
body.ttrss_utility .footer a:hover {
color: #257aa7;
}
body.ttrss_utility form {
margin: 0;
}
body.ttrss_utility.otp .content fieldset > label {
display: inline;
}
body.ttrss_utility.ttrss_login {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
body.ttrss_utility.ttrss_login .container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
body.ttrss_utility.ttrss_login .container .content {
padding: 40px;
}
body.ttrss_utility.installer,
body.ttrss_utility.feed_debugger {
margin: 2em;
}
body.ttrss_utility.share_popup {
margin: 0;
padding: 0;
background: white;
}
body.ttrss_utility.share_popup .content {
padding: 15px;
border-width: 0;
box-shadow: none;
}
.flat li {
padding: 2px;
}
@ -1842,6 +1748,167 @@ body.ttrss_utility.share_popup .content {
/* Support for IE. */
font-feature-settings: 'liga';
}
body.ttrss_utility.sanity_failed {
background: #900;
}
body.ttrss_utility {
background: #222;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 4em;
}
body.ttrss_utility .content {
background: #333;
border: 1px solid #222;
padding: 20px;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
}
body.ttrss_utility .content h2:first-of-type {
margin-top: 0;
}
body.ttrss_utility .content h2,
body.ttrss_utility .content h3,
body.ttrss_utility .content h4 {
color: #257aa7;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_utility .content h2 {
font-size: 18px;
}
body.ttrss_utility .content h3 {
font-size: 16px;
}
body.ttrss_utility a {
color: #257aa7;
text-decoration: none;
}
body.ttrss_utility a:hover,
body.ttrss_utility a:focus {
color: #133d54;
text-decoration: underline;
}
body.ttrss_utility h1 {
color: gray;
font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 10px 0 0 0;
}
body.ttrss_utility .footer {
text-align: center;
padding-top: 10px;
}
body.ttrss_utility .footer a {
color: gray;
}
body.ttrss_utility .footer a:hover {
color: #257aa7;
}
body.ttrss_utility form {
margin: 0;
}
body.ttrss_utility.otp .content fieldset > label {
display: inline;
}
body.ttrss_utility.ttrss_login {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
body.ttrss_utility.ttrss_login .container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
body.ttrss_utility.ttrss_login .container .content {
padding: 40px;
}
body.ttrss_utility.installer,
body.ttrss_utility.feed_debugger {
margin: 2em;
}
body.ttrss_utility.share_popup {
margin: 0;
padding: 0;
background: white;
}
body.ttrss_utility.share_popup .content {
padding: 15px;
border-width: 0;
box-shadow: none;
}
body.ttrss_zoom {
max-width: 900px;
margin: 2em auto;
}
body.ttrss_zoom div.post {
border: 1px solid #222;
background: #333;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
}
body.ttrss_zoom div.post .attachments {
display: none;
}
body.ttrss_zoom div.post div.header {
padding-bottom: 10px;
border: 0px solid #222;
border-bottom-width: 1px;
background: #333;
font-size: 12px;
color: #ccc;
}
body.ttrss_zoom div.post div.header .row {
display: flex;
margin-bottom: 4px;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
body.ttrss_zoom div.post p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
body.ttrss_zoom div.post div.content {
font-size: 15px;
line-height: 1.5;
border-width: 0;
padding: 0;
}
body.ttrss_zoom div.post div.content img,
body.ttrss_zoom div.post div.content video {
max-width: 760px;
height: auto;
}
body.ttrss_zoom div.post div.content blockquote {
margin: 5px 0px 5px 0px;
color: #ccc;
padding-left: 10px;
border: 0px solid #222;
border-left-width: 4px;
}
body.ttrss_zoom div.post div.content code {
color: #009900;
font-family: monospace;
font-size: 12px;
}
body.ttrss_zoom div.post div.content pre {
margin: 5px 0px 5px 0px;
padding: 10px;
color: #ccc;
font-family: monospace;
font-size: 12px;
border: 0px solid #ccc;
background: #222;
display: block;
max-width: 98%;
overflow: auto;
}
body.flat.ttrss_main.ttrss_prefs #main,
body.flat.ttrss_main.ttrss_prefs #footer {
background: #222;

2
themes/night_blue.css.map
View File

File diff suppressed because one or more lines are too long