98 lines
2.1 KiB
CSS
98 lines
2.1 KiB
CSS
/*
|
|
theme-title: Blurple (light)
|
|
theme-description: Official light blurple theme
|
|
*/
|
|
|
|
:root {
|
|
/* Define our nice blurple palette */
|
|
--blurple1: #ebe6f8;
|
|
--blurple2: #d6cceb;
|
|
--blurple3: #c2b3e1;
|
|
--blurple4: #aa60ff;
|
|
--blurple5: #783d9f;
|
|
--blurple6: #2d2b55;
|
|
--blurple7: #1f1f41;
|
|
|
|
/* Override orange trim */
|
|
--orange2: #700000;
|
|
|
|
/* Restyle basic colors to use blurple */
|
|
--white1: var(--blurple2);
|
|
--white2: var(--blurple3);
|
|
--blue1: var(--blurple4);
|
|
--blue2: var(--blurple5);
|
|
--blue3: var(--blurple6);
|
|
|
|
/* Basic page styling (background + foreground) */
|
|
--bg: var(--blurple1);
|
|
--bg-accent: var(--white2);
|
|
--fg: var(--gray1);
|
|
--fg-reduced: var(--gray2);
|
|
|
|
/* Profile page styling (light) */
|
|
--profile-bg: var(--white2);
|
|
|
|
/* Blurpleize buttons */
|
|
--button-bg: var(--blue2);
|
|
--button-fg: var(--white1);
|
|
|
|
/* Blurpleize statuses */
|
|
--status-bg: var(--white1);
|
|
--status-focus-bg: var(--white1);
|
|
--status-info-bg: var(--white2);
|
|
--status-focus-info-bg: var(--white2);
|
|
|
|
/* Used around statuses + other items */
|
|
--boxshadow-border: 0.08rem solid var(--blurple6);
|
|
}
|
|
|
|
/* Main page background */
|
|
body {
|
|
background: linear-gradient(var(--blurple1), white);
|
|
}
|
|
|
|
/* Scroll bar */
|
|
html, body {
|
|
scrollbar-color: var(--blurple5) var(--blurple2);
|
|
}
|
|
|
|
/* Profile fields */
|
|
.profile .about-user .fields .field {
|
|
border-bottom: 0.1rem solid var(--blurple6);
|
|
}
|
|
.profile .about-user .fields .field:first-child {
|
|
border-top: 0.1rem solid var(--blurple6);
|
|
}
|
|
|
|
/* Status media */
|
|
.status .media .media-wrapper {
|
|
border: 0.08rem solid var(--blurple6);
|
|
}
|
|
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
|
color: var(--blue2);
|
|
}
|
|
.status .media .media-wrapper details video.plyr-video {
|
|
background: var(--blurple2);
|
|
}
|
|
|
|
/* Status polls */
|
|
.status .text .poll {
|
|
background-color: var(--white2);
|
|
}
|
|
.status .text .poll .poll-info {
|
|
background-color: var(--white1);
|
|
}
|
|
|
|
/* Code snippets */
|
|
pre, pre[class*="language-"],
|
|
code, code[class*="language-"] {
|
|
background-color: var(--blurple7);
|
|
color: var(--blurple2);
|
|
}
|
|
|
|
/* Block quotes */
|
|
blockquote {
|
|
background-color: var(--blurple1);
|
|
color: var(--blurple7);
|
|
}
|