2023-08-23 00:26:01 +01:00
|
|
|
/*
|
2024-04-28 04:40:56 +01:00
|
|
|
theme-title: Night Owl
|
|
|
|
theme-description: The Night Owl CSS theme for Free Flow.
|
|
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
|
|
-- 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/
|
|
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
|
|
-- Font --
|
|
|
|
|
|
|
|
Karla can be found in found in Google Fonts here:
|
|
|
|
https://fonts.google.com/specimen/Karla
|
2023-08-23 00:26:01 +01:00
|
|
|
*/
|
|
|
|
|
|
|
|
: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);
|
2024-04-28 04:40:56 +01:00
|
|
|
--status-header-background: linear-gradient(#545454, 5%, #0E0E0E);
|
2023-08-23 00:26:01 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@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;
|
|
|
|
}
|
|
|
|
|
2024-04-12 17:29:16 +01:00
|
|
|
.profile .profile-header {
|
2023-08-23 00:26:01 +01:00
|
|
|
background: linear-gradient(#6d9fef, 30%, #000000);
|
|
|
|
}
|
|
|
|
|
|
|
|
.profile .col-header {
|
2024-04-28 04:40:56 +01:00
|
|
|
background: var(--status-header-background);
|
2023-08-23 00:26:01 +01:00
|
|
|
}
|
|
|
|
|
2024-04-12 17:29:16 +01:00
|
|
|
.thread .col-header {
|
2024-04-28 04:40:56 +01:00
|
|
|
background: var(--status-header-background);
|
2024-04-12 17:29:16 +01:00
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
2023-08-23 00:26:01 +01:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2023-08-23 00:39:06 +01:00
|
|
|
.profile .about-user .fields {
|
|
|
|
word-wrap: break-word;
|
|
|
|
}
|
|
|
|
|
2024-04-12 17:29:16 +01:00
|
|
|
.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);
|
2023-08-23 00:26:01 +01:00
|
|
|
}
|
|
|
|
|
2024-04-12 17:29:16 +01:00
|
|
|
.status {
|
2023-08-23 00:26:01 +01:00
|
|
|
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
|
|
|
|
}
|
2024-05-30 13:23:12 +01:00
|
|
|
|
|
|
|
ul {
|
|
|
|
li::before {
|
|
|
|
color: var(--night-owl-light-purple);
|
|
|
|
content: "\29BF";
|
|
|
|
}
|
|
|
|
}
|