mirror of
https://codeberg.org/teddit/teddit.git
synced 2026-03-05 13:30:33 -05:00
Merge pull request 'Added a sepia theme, based on the sepia theme in Slide for Android' (#121) from ltGuillaume/teddit:main into main
Reviewed-on: https://codeberg.org/teddit/teddit/pulls/121
This commit is contained in:
teddit
191
static/css/sepia.css
Normal file
191
static/css/sepia.css
Normal file
@@ -0,0 +1,191 @@
|
||||
:root {
|
||||
--bodybg: #ccc9b8; /* #cac5ad; */
|
||||
--bodytext: #53524b;
|
||||
--topbarbg: #992c09;
|
||||
--headerbg: #bf360c;
|
||||
--headertext: white;
|
||||
--headerfaded: #ecc3b7;
|
||||
--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 {
|
||||
padding-bottom: 4px;
|
||||
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: -8px;
|
||||
background: var(--headerbg);
|
||||
color: var(--headertext);
|
||||
}
|
||||
body.sepia header a {
|
||||
color: var(--headertext);
|
||||
}
|
||||
body.sepia header .tabmenu li a {
|
||||
background: none;
|
||||
color: var(--headerfaded);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
body.sepia header .tabmenu li.active a {
|
||||
color: var(--headertext);
|
||||
}
|
||||
body.sepia #links {
|
||||
max-width: calc(100% - 32px);
|
||||
margin: 4px 16px;
|
||||
}
|
||||
body.sepia #links .link {
|
||||
width: calc(100% - 8px);
|
||||
margin: 6px 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 .comment details {
|
||||
padding-top: 8px;
|
||||
}
|
||||
body.sepia .comment details:not([open]) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user