144 lines
3.0 KiB
CSS
144 lines
3.0 KiB
CSS
/*
|
|
theme-title: Midnight Trip
|
|
theme-description: Woah
|
|
*/
|
|
|
|
/* Theme colors */
|
|
:root {
|
|
--acid-green: rgb(63, 255, 0);
|
|
--acid-green-light: #79FF4D;
|
|
--acid-green-dark: #269900;
|
|
--magenta: rgb(153, 50, 204);
|
|
--darkmagenta: rgb(47, 1, 65);
|
|
|
|
/* Override */
|
|
--orange2: var(--acid-green);
|
|
--gray1: rgb(20, 21, 23);
|
|
--blue1: var(--acid-green-dark);
|
|
--blue2: var(--acid-green-light);
|
|
--blue3: var(--acid-green);
|
|
}
|
|
|
|
/* Main page background */
|
|
body {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--darkmagenta),
|
|
black,
|
|
var(--darkmagenta)
|
|
);
|
|
}
|
|
|
|
html, body {
|
|
/* Funky scroll bar */
|
|
scrollbar-color: var(--acid-green) var(--gray1);
|
|
}
|
|
|
|
/* Instance display name */
|
|
.page-header {
|
|
grid-column: 2;
|
|
align-self: start;
|
|
margin: 1rem 0 1rem 0;
|
|
background-color: var(--gray1);
|
|
border: 0.25rem solid var(--magenta);
|
|
border-radius: var(--br);
|
|
}
|
|
|
|
/* Header card */
|
|
.profile .profile-header {
|
|
background-color: var(--gray1);
|
|
border: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
/* About + Pinned posts headers */
|
|
.profile .col-header {
|
|
background: var(--gray1);
|
|
border: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
.profile .about-user .col-header {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Make about sections transparent */
|
|
.profile .about-user .fields, .profile .about-user .bio, .profile .about-user .accountstats {
|
|
background: var(--gray1);
|
|
border-left: 0.25rem solid var(--magenta);
|
|
border-right: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
/* Fiddle around with borders on about sections */
|
|
.profile .about-user .fields .field:first-child {
|
|
border-top: 0.25rem dashed var(--magenta);
|
|
}
|
|
.profile .about-user .fields .field {
|
|
border-bottom: 0.25rem dashed var(--magenta);
|
|
}
|
|
.profile .about-user .accountstats {
|
|
border-top: 0.25rem dashed var(--magenta);
|
|
border-bottom: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
/* Statuses + threads */
|
|
|
|
/* Thread column header */
|
|
.thread .col-header {
|
|
background: var(--gray1);
|
|
border: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
/* Main status body */
|
|
.status, .status.expanded {
|
|
background: var(--gray1);
|
|
border: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
/* Code snippets */
|
|
.status .text .content pre, .status .text .content code {
|
|
background: black;
|
|
color: var(--white2);
|
|
}
|
|
|
|
/* Block quotes */
|
|
.status .text .content blockquote {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Media wrapper for attachments */
|
|
.status .media .media-wrapper {
|
|
background: var(--bg-nearly-opaque);
|
|
}
|
|
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
|
border: 0.2rem dashed var(--magenta);
|
|
}
|
|
|
|
/* Polls */
|
|
.status .text .poll {
|
|
background-color: black;
|
|
border: 0.25rem solid var(--magenta);
|
|
}
|
|
|
|
.status .text .poll .poll-info {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Status info bars */
|
|
.status .status-info, .status.expanded .status-info {
|
|
background: black;
|
|
}
|
|
|
|
/* Back + next links */
|
|
.backnextlinks {
|
|
background: var(--gray1);
|
|
padding: 0.5rem;
|
|
border: 0.25rem solid var(--magenta);
|
|
border-radius: var(--br);
|
|
}
|
|
|
|
.page-footer {
|
|
margin-top: 2rem;
|
|
background-color: var(--gray1);
|
|
border-top: 0.25rem solid var(--magenta);
|
|
}
|