Added a sepia theme, based on the sepia theme in Slide for Android
This commit is contained in:
ltGuillaume
parent
fb2fe788c4
commit
07555e0d0a
|
|
@ -2,7 +2,7 @@ const config = {
|
|||
domain: process.env.DOMAIN || '127.0.0.1', // Or for example 'teddit.net'
|
||||
use_reddit_oauth: process.env.USE_REDDIT_OAUTH === 'true' || false, // If false, teddit uses Reddit's public API. If true, you need to have your own Reddit app ID (enter the app ID to the "reddit_app_id" config key).
|
||||
cert_dir: process.env.CERT_DIR || '', // For example '/home/teddit/letsencrypt/live/teddit.net', if you are using https. No trailing slash.
|
||||
theme: process.env.THEME || 'dark', // One of: 'dark', ''
|
||||
theme: process.env.THEME || 'dark', // One of: 'dark', 'sepia', ''
|
||||
flairs_enabled: process.env.FLAIRS_ENABLED !== 'true' || true, // Enables the rendering of user and link flairs on teddit
|
||||
highlight_controversial: process.env.HIGHLIGHT_CONTROVERSIAL !== 'true' || true, // Enables controversial comments to be indicated by a typographical dagger (†)
|
||||
api_enabled: process.env.API_ENABLED !== 'true' || true, // Teddit API feature. Might increase loads significantly on your instance.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,180 @@
|
|||
:root {
|
||||
--bodybg: #ccc9b8; /* #cac5ad; */
|
||||
--bodytext: #53524b;
|
||||
--topbarbg: #992c09;
|
||||
--headerbg: #bf360c;
|
||||
--headertext: white;
|
||||
--headerfaded: #ecc3b7;
|
||||
--tabbg: #5a5a5a;
|
||||
--tabtext: #f2f0ea;
|
||||
--linkbg: #e2dfd7;
|
||||
--linktext: #979692;
|
||||
--shadow: #9e9e9e;
|
||||
--buttonbg: #f2f0ea;
|
||||
--buttontext: #53524b;
|
||||
--oddbg: #e2dfd7;
|
||||
--oddborder: #616161;
|
||||
--evenbg: #f2f0ea;
|
||||
--evenborder: #919191;
|
||||
/* Overrides */
|
||||
--graytext: #616161;
|
||||
/* Copied from default theme */
|
||||
--linkcolor: #0645ad;
|
||||
--lightlinkcolor: #406bb3;
|
||||
}
|
||||
/* Main page */
|
||||
body.sepia {
|
||||
background: var(--bodybg);
|
||||
color: var(--bodytext);
|
||||
}
|
||||
body.sepia nav {
|
||||
background: var(--topbarbg);
|
||||
color: var(--headertext);
|
||||
}
|
||||
body.sepia .top-links {
|
||||
background: var(--headerbg);
|
||||
}
|
||||
body.sepia .top-links a {
|
||||
padding-left: 4px;
|
||||
background: var(--headerbg);
|
||||
color: var(--headerfaded);
|
||||
}
|
||||
body.sepia #sr-more-link {
|
||||
margin-top: 4px;
|
||||
background: var(--buttonbg);
|
||||
}
|
||||
body.sepia header {
|
||||
margin-top: 0;
|
||||
background: var(--headerbg);
|
||||
color: var(--headertext);
|
||||
}
|
||||
body.sepia header a {
|
||||
color: var(--headertext);
|
||||
}
|
||||
body.sepia header .tabmenu li:not(.active) a {
|
||||
background: var(--tabbg);
|
||||
color: var(--tabtext);
|
||||
}
|
||||
body.sepia #links {
|
||||
margin: 4px 16px; /* Only when width has certain minimum */
|
||||
}
|
||||
body.sepia #links .link {
|
||||
margin: 8px 0;
|
||||
padding: 16px 8px 16px 0;
|
||||
background: var(--linkbg);
|
||||
color: var(--linktext);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 2px var(--shadow);
|
||||
}
|
||||
body.sepia .flair,
|
||||
body.sepia #links .link .entry .title span.flair,
|
||||
body.sepia #post .info .title span.flair {
|
||||
color: var(--bodytext);
|
||||
background-color: var(--linkbg);
|
||||
}
|
||||
body.sepia .upvotes .arrow {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
body.sepia #links .link .entry .title a h2 {
|
||||
padding-right: 4px;
|
||||
}
|
||||
body.sepia #links .link .entry .title span {
|
||||
padding-left: 0;
|
||||
}
|
||||
body.sepia #user .upvotes,
|
||||
body.sepia #links .link .upvotes,
|
||||
body.sepia #links .link .entry .title span,
|
||||
body.sepia #links .link .entry .meta,
|
||||
body.sepia #links .link .entry .meta .links a {
|
||||
color: var(--linktext);
|
||||
}
|
||||
body.sepia button,
|
||||
body.sepia select,
|
||||
body.sepia input,
|
||||
body.sepia input[type="submit"],
|
||||
body.sepia #search input[type="text"],
|
||||
body.sepia #sr-more-link,
|
||||
body.sepia .btn,
|
||||
body.sepia .view-more-links a {
|
||||
margin-bottom: 0;
|
||||
background: var(--buttonbg);
|
||||
color: var(--buttontext);
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 2px var(--shadow);
|
||||
}
|
||||
body.sepia .view-more-links a {
|
||||
margin-left: 16px;
|
||||
color: var(--linkcolor);
|
||||
font-weight: normal;
|
||||
}
|
||||
body.sepia #sr-more-link {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
body.sepia input[type="checkbox"] {
|
||||
margin-top: 6px;
|
||||
}
|
||||
body.sepia footer {
|
||||
margin-top: 20px;
|
||||
padding: 8px 0 8px 20px;
|
||||
box-shadow: 0px 0px 2px var(--shadow);
|
||||
}
|
||||
/* Search */
|
||||
body.sepia #links.search {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
/* Comments */
|
||||
body.sepia #post .score {
|
||||
color: var(--graytext);
|
||||
}
|
||||
body.sepia .score .arrow {
|
||||
filter: brightness(70%);
|
||||
}
|
||||
body.sepia #post .submitted,
|
||||
body.sepia #post .title .domain {
|
||||
color: var(--graytext);
|
||||
}
|
||||
body.sepia #post .usertext-body {
|
||||
background: var(--oddbg);
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 2px var(--shadow);
|
||||
}
|
||||
body.sepia .md {
|
||||
color: var(--bodytext);
|
||||
}
|
||||
body.sepia #post header div a {
|
||||
color: var(--headerfaded);
|
||||
}
|
||||
body.sepia .comment {
|
||||
background: var(--oddbg);
|
||||
border-left: 3px solid var(--oddborder);
|
||||
border-radius: 3px 0 0 3px;
|
||||
box-shadow: 1px 0px 1px var(--shadow);
|
||||
}
|
||||
body.sepia .comment.even-depth {
|
||||
background: var(--evenbg);
|
||||
border-left: 3px solid var(--evenborder);
|
||||
box-shadow: 1px 0px 1px var(--shadow);
|
||||
}
|
||||
body.sepia .comments > .comment {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
body.sepia .md .md-spoiler-text:not(.revealed),
|
||||
body.sepia .md .md-spoiler-text:active:not(.revealed),
|
||||
body.sepia .md .md-spoiler-text:focus:not(.revealed),
|
||||
body.sepia .md .md-spoiler-text:hover:not(.revealed) {
|
||||
background: var(--bodytext);
|
||||
color: var(--bodytext);
|
||||
}
|
||||
body.sepia .md .md-spoiler-text:active:not(.revealed),
|
||||
body.sepia .md .md-spoiler-text:focus:not(.revealed),
|
||||
body.sepia .md .md-spoiler-text:hover:not(.revealed) {
|
||||
background: none;
|
||||
}
|
||||
body.sepia .comments > form button {
|
||||
margin: 12px 8px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
if(user_preferences.theme === 'dark')
|
||||
link(rel="stylesheet", type="text/css", href="/css/dark.css")
|
||||
if(user_preferences.theme === 'sepia')
|
||||
link(rel="stylesheet", type="text/css", href="/css/sepia.css")
|
||||
link(rel="stylesheet", type="text/css", href="/css/styles.css")
|
||||
link(rel="icon", type="image/png", sizes="32x32", href="/favicon.png")
|
||||
meta(name="viewport", content="width=device-width, initial-scale=1.0")
|
||||
|
|
|
|||
|
|
@ -16,9 +16,15 @@ html
|
|||
if(!user_preferences.theme || user_preferences.theme == '')
|
||||
option(value="", selected="selected") White
|
||||
option(value="dark") Dark
|
||||
option(value="sepia") Sepia
|
||||
if(user_preferences.theme === 'dark')
|
||||
option(value="") White
|
||||
option(value="dark", selected="selected") Dark
|
||||
option(value="sepia") Sepia
|
||||
if(user_preferences.theme === 'sepia')
|
||||
option(value="") White
|
||||
option(value="dark") Dark
|
||||
option(value="sepia", selected="selected") Sepia
|
||||
.setting
|
||||
label(for="flairs") Show flairs:
|
||||
if(!user_preferences.flairs || user_preferences.flairs == 'true')
|
||||
|
|
|
|||
Loading…
Reference in New Issue