timw4mail/HummingBirdAnimeClient
1
1
Fork 1
Code Issues 5 Pull Requests Projects 1 Releases Wiki Activity

Add dark theme with setting toggle
All checks were successful
timw4mail/HummingBirdAnimeClient/PR-14 This commit looks good
Details

Browse Source
This commit is contained in:
Timothy Warren 2018-12-06 13:04:54 -05:00
parent 94e61e35a8
commit 826cb0c1cb
9 changed files with 156 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/header.php
View File

@ -7,6 +7,7 @@
<meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1" />
<link rel="stylesheet" href="<?= $urlGenerator->assetUrl('css/app.min.css') ?>" />
<link rel="<?= $config->get('dark_theme') ? '' : 'alternate ' ?>stylesheet" title="Dark Theme" href="<?= $urlGenerator->assetUrl('css/dark.min.css') ?>" />
<link rel="icon" href="<?= $urlGenerator->assetUrl('images/icons/favicon.ico') ?>" />
<link rel="apple-touch-icon" sizes="57x57" href="<?= $urlGenerator->assetUrl('images/icons/apple-icon-57x57.png') ?>">
<link rel="apple-touch-icon" sizes="60x60" href="<?= $urlGenerator->assetUrl('images/icons/apple-icon-60x60.png') ?>">
@ -38,4 +39,5 @@
}
}
?>
</header>

2
public/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

117
public/css/dark-override.css Normal file
View File

@ -0,0 +1,117 @@
a {
color: rgb(25, 120, 226);
}
a:hover {
color: #9e34fd;
}
body,
legend,
nav ul li a {
background: #333;
color: #eee;
}
nav a:hover, nav li.selected a {
border-color: #fff;
}
header button {
background: transparent;
}
table {
box-shadow: none;
}
td, th {
border-color: #111;
}
thead td,
thead th {
background: #333;
color: #eee;
}
tbody > tr:nth-child(2n) {
background: #555;
color: #eee;
}
tbody > tr:nth-child(2n+1) {
background: #333;
}
footer, legend, hr {
border-color: #ddd;
}
small {
color: #fff;
}
input, select, textarea {
color: #111;
}
.invisible tr,
.invisible td,
.invisible th,
.invisible tbody > tr:nth-child(2n),
.invisible tbody > tr:nth-child(2n+1) {
background: transparent;
}
#main-nav {
border-bottom: .1rem solid #ddd;
}
.tabs,
.vertical-tabs{
background: #333;
}
.tabs > label,
.vertical-tabs .tab label {
background: #222;
border: 0;
color: #eee;
}
.vertical-tabs .tab label {
width: 100%;
}
.tabs > label:hover,
.vertical-tabs .tab > label:hover {
background: #888;
}
.tabs > label:active,
.vertical-tabs .tab > label:active {
background: #999;
}
.tabs > [type="radio"]:checked + label,
.tabs > [type="radio"]:checked + label + .content,
.vertical-tabs [type="radio"]:checked + label,
.vertical-tabs [type="radio"]:checked ~ .content {
/* border-color: #333; */
border: 0;
background: #666;
color: #eee;
}
.vertical-tabs {
background: #222;
border: 1px solid #444;
}
.vertical-tabs .tab {
background: #666;
border-bottom: 1px solid #444;
}

1
public/css/dark.min.css vendored Normal file
View File

@ -0,0 +1 @@
a{color:#1978e2}a:hover{color:#9e34fd}body,legend,nav ul li a{background:#333;color:#eee}nav a:hover,nav li.selected a{border-color:#fff}header button{background:transparent}table{-webkit-box-shadow:none;box-shadow:none}td,th{border-color:#111}thead td,thead th{background:#333;color:#eee}tbody>tr:nth-child(2n){background:#555;color:#eee}tbody>tr:nth-child(odd){background:#333}footer,hr,legend{border-color:#ddd}small{color:#fff}input,select,textarea{color:#111}.invisible tbody>tr:nth-child(2n),.invisible tbody>tr:nth-child(odd),.invisible td,.invisible th,.invisible tr{background:transparent}#main-nav{border-bottom:.1rem solid #ddd}.tabs,.vertical-tabs{background:#333}.tabs>label,.vertical-tabs .tab label{background:#222;border:0;color:#eee}.vertical-tabs .tab label{width:100%}.tabs>label:hover,.vertical-tabs .tab>label:hover{background:#888}.tabs>label:active,.vertical-tabs .tab>label:active{background:#999}.tabs>[type=radio]:checked+label,.tabs>[type=radio]:checked+label+.content,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:checked~.content{border:0;background:#666;color:#eee}.vertical-tabs{background:#222;border:1px solid #444}.vertical-tabs .tab{background:#666;border-bottom:1px solid #444}

1
public/css/dark.min.css.map Normal file
View File

@ -0,0 +1 @@
undefined

4
public/css/general.css
View File

@ -359,7 +359,7 @@ td .media-wrap-flex {
display: inline-block;
text-align: center;
width: 220px;
height: 311px;
height: 312px;
margin: var(--normal-padding);
z-index: 0;
background: rgba(0, 0, 0, 0.15);
@ -423,7 +423,7 @@ picture.cover {
background: var(--title-overlay); */
content: '';
display: block;
height: 311px;
height: 312px;
left: 0;
position: absolute;
top: 0;

28
public/tools/css.js
View File

@ -8,7 +8,9 @@ const cssNext = require('postcss-cssnext');
const cssNano = require('cssnano');
const css = fs.readFileSync('css/all.css', 'utf-8');
const darkCss = fs.readFileSync('css/dark-override.css', 'utf-8');
// Basic theme
postcss()
.use(atImport())
.use(cssNext())
@ -24,6 +26,26 @@ postcss()
from: 'css/all.css',
to: 'css/app.min.css'
}).then(result => {
fs.writeFileSync('css/app.min.css', result.css);
fs.writeFileSync('css/app.min.css.map', result.map);
});
fs.writeFileSync('css/app.min.css', result.css);
fs.writeFileSync('css/app.min.css.map', result.map);
});
// Dark theme
postcss()
.use(atImport())
.use(cssNext())
.use(cssNano({
autoprefixer: false,
colormin: false,
minifyFontValues: false,
options: {
sourcemap: false
}
}))
.process(darkCss, {
from: 'css/dark-override.css',
to: 'css/dark.min.css'
}).then(result => {
fs.writeFileSync('css/dark.min.css', result.css);
fs.writeFileSync('css/dark.min.css.map', result.map);
});

1
src/Types/Config.php
View File

@ -24,6 +24,7 @@ class Config extends AbstractType {
// Settings in config.toml
public $asset_path; // Path to public folder for urls
public $dark_theme;
public $default_anime_list_path;
public $default_list;
public $default_manga_list_path;

6
src/constants.php
View File

@ -153,6 +153,12 @@ const SETTINGS_MAP = [
'default' => 'Somebody',
'description' => 'Name of the owner of the list data.',
],
'dark_theme' => [
'type' => 'boolean',
'title' => 'Use Dark Theme',
'default' => FALSE,
'description' => 'Use a darker background theme?',
],
'show_anime_collection' => [
'type' => 'boolean',
'title' => 'Show Anime Collection',