[feature/frontend] Add Moonlight hunt theme (#3393)

* [feature/frontend] Add Moonlight Hunt theme

* make almost see through a bit less see through

* update
This commit is contained in:
tobi 2024-10-05 15:12:40 +02:00 committed by GitHub
parent c33b1e89c1
commit 5c055afa08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 170 additions and 0 deletions

View file

@ -177,6 +177,10 @@ It's also easy for admins to [add their own custom themes](https://docs.gotosoci
<img src="https://raw.githubusercontent.com/superseriousbusiness/gotosocial/main/docs/assets/theme-midnight-trip.png"/>
<figcaption>Midnight trip</figcaption>
</figure>
<figure>
<img src="https://raw.githubusercontent.com/superseriousbusiness/gotosocial/main/docs/assets/theme-moonlight-hunt.png"/>
<figcaption>Moonlight hunt</figcaption>
</figure>
<hr/>
<figure>
<img src="https://raw.githubusercontent.com/superseriousbusiness/gotosocial/main/docs/assets/theme-rainforest.png"/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 KiB

View file

@ -0,0 +1,166 @@
/*
theme-title: Moonlight Hunt
theme-description: Ominous dark blue / black with a tinge of blood red. You may think it all a mere bad dream.
*/
:root {
/* Define our palette */
--bleached-bone: #f3e3d4;
--void-blue: #0e131f;
--outer-space: #06080e;
--ghastly-blue: #88bebe;
--blood-red: #6c1619;
--bright-red: #f61a1ae6;
--feral-orange: #f78d17;
/* Restyle basic colors */
--white1: var(--void-blue);
--white2: var(--void-blue);
--orange2: var(--bright-red);
--blue1: var(--ghastly-blue);
--blue2: var(--ghastly-blue);
--blue3: var(--ghastly-blue);
/* Basic page styling (background + foreground) */
--bg: var(--void-blue);
--bg-accent: var(--void-blue);
--fg: var(--bleached-bone);
--fg-reduced: var(--bleached-bone);
--profile-bg: var(--void-blue);
/* Buttons */
--bloodshot: linear-gradient(
var(--blood-red) 0%,
var(--feral-orange) 2%,
var(--bright-red) 5%,
var(--blood-red) 40%,
var(--blood-red) 60%,
var(--bright-red) 95%,
var(--feral-orange) 98%,
var(--blood-red) 100%
);
--button-bg: var(--bloodshot);
--button-fg: var(--bleached-bone);
/* Statuses */
--status-bg: var(--void-blue);
--status-focus-bg: var(--void-blue);
/* Used around statuses + other items */
--ghastly-border: 0.1rem solid var(--ghastly-blue);
--boxshadow-border: var(--ghastly-border);
}
/* Main page background */
body {
background: linear-gradient(
90deg,
var(--blood-red),
black 20%,
black 80%,
var(--blood-red)
);
}
/* Scroll bar */
html, body {
scrollbar-color: var(--bright-red) var(--outer-space);
text-shadow: 1px 1px var(--blood-red);
}
/* Instance title color */
.page-header a h1 {
color: var(--bleached-bone);
}
.profile .profile-header {
border: var(--ghastly-border);
}
.col-header {
border: var(--ghastly-border);
background: var(--outer-space);
}
.profile .about-user .col-header {
background: var(--void-blue);
border-bottom: none;
margin-bottom: 0;
}
/* Fiddle around with borders on about sections */
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats {
border-left: var(--ghastly-border);
border-right: var(--ghastly-border);
}
.profile .about-user .accountstats {
border-bottom: var(--ghastly-border);
background: var(--outer-space);
}
/* Role and bot badge backgrounds */
.profile .profile-header .basic-info .namerole .role,
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
background: var(--outer-space);
}
/* Status media */
.status .media .media-wrapper {
border: var(--ghastly-border);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--bleached-bone);
}
.status .media .media-wrapper details video.plyr-video {
background: var(--outer-space);
}
/* Status polls */
.status .text .poll {
background-color: var(--outer-space);
border: var(--ghastly-border);
}
.status .text .poll .poll-info {
background-color: var(--void-blue);
}
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background-color: var(--outer-space);
color: var(--bleached-bone);
}
/* Block quotes */
blockquote {
background-color: var(--outer-space);
color: var(--bleached-bone);
}
/* Status info bars */
.status .status-info,
.status.expanded .status-info {
color: var(--ghastly-blue);
border-top: 0.1rem dotted var(--ghastly-blue);
background: var(--outer-space);
}
/* Make show more/less buttons more legible */
.status .button {
border: 1px solid var(--feral-orange);
}
.status .button:hover {
border: 1px solid var(--bleached-bone);
background: var(--bloodshot);
}
/* Back + next links */
.profile .statuses .backnextlinks a {
color: var(--bleached-bone);
}
.page-footer nav ul li a {
color: var(--bleached-bone);
}