255 lines
6.6 KiB
CSS
255 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');
|
|
src: 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');
|
|
src: 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');
|
|
src: 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');
|
|
src: 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;
|
|
}
|