Dan Anglin
d35f069d8b
Upgrade Prod and Dev GTS instances to version 0.14.2. Update the Night Owl CSS theme so that it works with the HTML refactoring in v0.14.2.
129 lines
2.7 KiB
CSS
129 lines
2.7 KiB
CSS
/*
|
|
* 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 .profile-header {
|
|
background: linear-gradient(#6d9fef, 30%, #000000);
|
|
}
|
|
|
|
.profile .col-header {
|
|
background: linear-gradient(#545454, 5%, #0E0E0E);
|
|
}
|
|
|
|
.thread .col-header {
|
|
background: linear-gradient(#545454, 5%, #0E0E0E);
|
|
border: none;
|
|
}
|
|
|
|
.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 {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.profile .about-user .fields,
|
|
.profile .about-user .bio,
|
|
.profile .about-user .accountstats,
|
|
.status,
|
|
.status .status-info,
|
|
.status.expanded,
|
|
.status.expanded .status-info {
|
|
background: var(--night-owl-bg);
|
|
}
|
|
|
|
.status {
|
|
border: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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
|
|
}
|