mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-11-18 10:27:30 -06:00
6473886c8eMost browsers just take the second src line and they're fine, but Tor has trouble displaying the woff version on Linux. With two separate lines it doesn't fall back correctly.
254 lines
6.6 KiB
CSS
254 lines
6.6 KiB
CSS
/*
|
|
theme-title: Ecks Pee
|
|
theme-description: Looks suspiciously like a certain operating system
|
|
*/
|
|
|
|
:root {
|
|
/* Define our color palette */
|
|
--ecks-pee-blurple: #3833ac;
|
|
--ecks-pee-blue: #00309c;
|
|
--ecks-pee-dark-blue: #0336b3;
|
|
--ecks-pee-darkest-blue: #032680;
|
|
--ecks-pee-light-blue: #5a7edc;
|
|
--ecks-pee-lighter-blue: #91b1ee;
|
|
--ecks-pee-lightest-blue: #c5dafc;
|
|
--ecks-pee-orange: #f69438;
|
|
--ecks-pee-white: #ffffff;
|
|
--ecks-pee-beige: #ece9d8;
|
|
--ecks-pee-darker-beige: #a8a79b;
|
|
--ecks-pee-green: #369836;
|
|
--ecks-pee-light-green: #96c496;
|
|
--ecks-pee-dark-green: #1f611f;
|
|
--ecks-pee-darkest-green: #184918;
|
|
|
|
/* Blurple gradient from ecks pee install screen */
|
|
--ecks-pee-blurple-gradient: linear-gradient(
|
|
45deg,
|
|
var(--ecks-pee-blurple),
|
|
var(--ecks-pee-blue),
|
|
var(--ecks-pee-blurple)
|
|
);
|
|
|
|
/*
|
|
Start menu / title bar gradient, borrowed from
|
|
https://github.com/botoxparty/XP.css/blob/main/themes/XP/_window.scss
|
|
*/
|
|
--ecks-pee-start-menu: linear-gradient(
|
|
180deg,
|
|
#0997ff 0%,
|
|
#0053ee 8%,
|
|
#0050ee 40%,
|
|
#0066ff 88%,
|
|
#0066ff 93%,
|
|
#005bff 95%,
|
|
#003dd7 96%,
|
|
#003dd7 100%
|
|
);
|
|
|
|
/* Start button gradient */
|
|
--ecks-pee-start-button: linear-gradient(
|
|
180deg,
|
|
var(--ecks-pee-light-green) 0%,
|
|
var(--ecks-pee-green) 8%,
|
|
var(--ecks-pee-green) 93%,
|
|
var(--ecks-pee-dark-green) 100%
|
|
);
|
|
|
|
/* Trim for between dark elements. */
|
|
--ecks-pee-dotted-trim: 0.2rem dotted var(--ecks-pee-orange);
|
|
|
|
/* Override orange trim */
|
|
--orange2: var(--ecks-pee-orange);
|
|
|
|
/* Restyle basic colors to use blurple */
|
|
--blue1: var(--ecks-pee-lighter-blue);
|
|
--blue2: var(--ecks-pee-lightest-blue);
|
|
--blue3: var(--ecks-pee-white);
|
|
|
|
/* Basic page styling (background + foreground) */
|
|
--bg: var(--ecks-pee-light-blue);
|
|
--bg-accent: var(--ecks-pee-blue);
|
|
--fg: var(--ecks-pee-white);
|
|
--fg-reduced: var(--ecks-pee-lightest-blue);
|
|
|
|
/* Profile page styling */
|
|
--profile-bg: var(--ecks-pee-blurple-gradient);
|
|
|
|
/* Start buttons */
|
|
--button-bg: var(--ecks-pee-start-button);
|
|
--button-fg: var(--ecks-pee-white);
|
|
|
|
/* ecks-pee-ize statuses */
|
|
--status-bg: var(--ecks-pee-blurple-gradient);
|
|
--status-focus-bg: var(--ecks-pee-blurple-gradient);
|
|
--status-info-bg: var(--ecks-pee-start-menu);
|
|
--status-focus-info-bg: var(--ecks-pee-start-menu);
|
|
|
|
/* Used around statuses + other items */
|
|
--boxshadow-border: 1px solid var(--ecks-pee-darkest-blue);
|
|
}
|
|
|
|
/* Set fonts with woff fallbacks */
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
src: url(/assets/fonts/Atkinson-Hyperlegible-Regular-102a.woff2) format('woff2'),
|
|
url(/assets/fonts/Atkinson-Hyperlegible-Regular-102.woff) format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible";
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
src: url(/assets/fonts/Atkinson-Hyperlegible-Bold-102a.woff2) format('woff2'),
|
|
url(/assets/fonts/Atkinson-Hyperlegible-Bold-102.woff) format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible";
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
src: url(/assets/fonts/Atkinson-Hyperlegible-Italic-102a.woff2) format('woff2'),
|
|
url(/assets/fonts/Atkinson-Hyperlegible-Italic-102.woff) format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible";
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
src: url(/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2) format('woff2'),
|
|
url(/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff) format('woff');
|
|
}
|
|
|
|
/* Main page background */
|
|
body {
|
|
background: radial-gradient(
|
|
circle closest-corner at 20% 20%,
|
|
var(--ecks-pee-lighter-blue),
|
|
var(--ecks-pee-light-blue)
|
|
);
|
|
}
|
|
|
|
/* Scroll bar */
|
|
html, body {
|
|
/* Try Atkinson, fall back to default GtS fonts */
|
|
font-family: "Atkinson Hyperlegible", "Noto Sans", sans-serif;
|
|
font-size: large;
|
|
text-shadow: 1px 1px 1px black;
|
|
scrollbar-color: var(--ecks-pee-lighter-blue) var(--ecks-pee-white);
|
|
}
|
|
|
|
/* Make this more like an ecks pee top bar */
|
|
.col-header {
|
|
background: var(--ecks-pee-start-menu);
|
|
border-top: 1px solid #0831d9;
|
|
border-left: 1px solid #0831d9;
|
|
border-right: 1px solid #001ea0;
|
|
}
|
|
|
|
/* 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: black;
|
|
}
|
|
|
|
/* Profile fields */
|
|
.profile .about-user .fields {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-top: 0;
|
|
}
|
|
.profile .about-user .fields dt,
|
|
.profile .about-user .fields dd {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
.profile .about-user .fields .field {
|
|
background: var(--ecks-pee-dark-blue);
|
|
border-bottom: var(--ecks-pee-dotted-trim);
|
|
}
|
|
.profile .about-user .fields .field:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
/* Profile bio */
|
|
.profile .about-user .bio {
|
|
background: var(--ecks-pee-dark-blue);
|
|
}
|
|
|
|
/* Profile stats */
|
|
.accountstats {
|
|
border-top: var(--ecks-pee-dotted-trim);
|
|
}
|
|
|
|
/* Status text */
|
|
.status .text {
|
|
padding: 0.5rem;
|
|
background: var(--ecks-pee-beige);
|
|
border: 0.2rem inset var(--ecks-pee-darker-beige);
|
|
|
|
color: black;
|
|
text-shadow: none;
|
|
--link-fg: var(--ecks-pee-darkest-blue);
|
|
}
|
|
|
|
/* Status media */
|
|
.status .media .media-wrapper {
|
|
border: 0.1rem solid black;
|
|
}
|
|
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
|
color: var(--blue2);
|
|
}
|
|
.status .media .media-wrapper details video.plyr-video {
|
|
background: black;
|
|
}
|
|
|
|
/* Status polls */
|
|
.status .text .poll {
|
|
background-color: var(--ecks-pee-beige);
|
|
border: 0.1rem solid var(--ecks-pee-darker-beige);
|
|
border-radius: 0;
|
|
}
|
|
.status .text .poll .poll-info {
|
|
background: var(--ecks-pee-beige);
|
|
border: 0.1rem solid var(--ecks-pee-darker-beige);
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Code snippets */
|
|
pre, pre[class*="language-"],
|
|
code, code[class*="language-"] {
|
|
background: black;
|
|
color: var(--ecks-pee-white);
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Block quotes */
|
|
blockquote {
|
|
padding: 0.5rem;
|
|
background: var(--ecks-pee-beige);
|
|
border-top: 0.1rem solid var(--ecks-pee-darker-beige);
|
|
border-right: 0.1rem solid var(--ecks-pee-darker-beige);
|
|
border-bottom: 0.1rem solid var(--ecks-pee-darker-beige);
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Cheeky little border */
|
|
.status-info {
|
|
border-top: 1px solid #0831d9;
|
|
border-left: 1px solid #0831d9;
|
|
border-right: 1px solid #001ea0;
|
|
}
|
|
|
|
/* Button stuff */
|
|
button, .button {
|
|
border-left: 1px solid var(--ecks-pee-darkest-green);
|
|
border-right: 1px solid var(--ecks-pee-darkest-green);
|
|
}
|
|
/* Differentiate start button on hover */
|
|
button:hover, .button:hover {
|
|
background: var(--ecks-pee-light-green);
|
|
}
|
|
|
|
/* Make these bold or they don't contrast enough */
|
|
.backnextlinks {
|
|
font-weight: bold;
|
|
}
|