feat(gts): add Night Owl CSS theme for GoToSocial

Add a new CSS theme called 'Night Owl' for my GoToSocial profile page.
This commit is contained in:
Dan Anglin 2023-08-23 00:26:01 +01:00
parent 2152024c11
commit 6e9524113c
Signed by: dananglin
GPG key ID: 0C1D44CFBEE68638

View file

@ -0,0 +1,129 @@
/*
* NIGHT OWL CSS THEME FOR GOTOSOCIAL
*
* -- Background Image --
*
* The background image is called 'Photo of Starry Night'
* which you can download from Pexels here:
* https://www.pexels.com/photo/photo-of-starry-night-1421903/
*
* To use the background image download it from Pexels and
* place it in the web assets directory as background.jpg.
*
* -- Font --
*
* Karla can be found in found in Google Fonts here:
* https://fonts.google.com/specimen/Karla
*
* To use the font download a copy from Google Fonts,
* extract the TTF file and place it in the web assets/fonts
* directory.
*
*/
:root {
--night-owl-bg: #0d0e0fd9;
--night-owl-text: #c1c1e7;
--night-owl-link-default-fg: #5198c6;
--night-owl-link-hover-fg: #9eecf7;
--night-owl-light-purple: #3d46b9;
--night-owl-dark-purple: #222333;
--night-owl-green: #1fdaa0;
--night-owl-button-light: var(--night-owl-green);
--night-owl-button-dark: #000910;
--avatar-border: var(--night-owl-dark-purple);
}
@font-face {
font-family: "Karla";
src: url("/assets/fonts/Karla-VariableFont_wght.ttf") format("truetype");
}
html, body {
scrollbar-color: var(--night-owl-light-purple) var(--night-owl-dark-purple);
}
.page {
background-image: url("/assets/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Karla", sans-serif;
font-weight: 400;
font-size: 16px;
}
.profile .header {
background: linear-gradient(#6d9fef, 30%, #000000);
}
.profile .col-header {
background: linear-gradient(#545454, 5%, #0E0E0E);
}
.profile .column-split {
gap: 1rem;
}
.profile .about-user .fields .field:first-child {
border-top: none;
}
.profile .about-user .fields .field {
padding: 0.5rem;
border-style: none none dotted none;
border-width: 0.1rem;
}
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats,
.profile .toots .toot,
.profile .toots .toot .info,
.toot.expanded,
.toot.expanded .info {
background: var(--night-owl-bg);
}
.profile .toots .toot {
border: none;
}
.toot:only-child {
border: none;
box-shadow: 5px 5px 5px black;
}
.role.admin {
border: none !important;
color: var(--night-owl-green) !important;
background-color: transparent !important;
}
a:link, a:visited {
color: var(--night-owl-link-default-fg);
text-decoration: none;
}
a:hover, a:active {
color: var(--night-owl-link-hover-fg);
}
.page footer #version:before {
content: 'Powered by: ';
}
.button {
background-color: var(--night-owl-button-dark);
color: var(--night-owl-button-light);
border: none;
box-shadow: none;
transition: 0.5s
}
.button:hover {
background-color: var(--night-owl-button-light);
color: var(--night-owl-button-dark);
transition: 0.5s
}