GoToSocial/web/assets/themes/sunset-light.css

108 lines
2.2 KiB
CSS
Raw Normal View History

/*
theme-title: Sunset (light)
theme-description: Official light orange/yellow theme.
*/
:root {
/* Define our palette */
--eggshell: #fff6eb;
--yellow: #FFAF45;
--orange: #FB6D48;
--pink: #D74B76;
--eggplant1: #5c385e;
--eggplant2: #523254;
--eggplant3: #482c49;
--eggplant4: #29192a;
/* Restyle basic colors */
--white1: var(--eggshell);
--white2: var(--yellow);
--blue1: var(--eggplant1);
--blue2: var(--eggplant2);
--blue3: var(--eggplant3);
--orange2: var(--pink);
/* Basic page styling (background + foreground) */
--bg: var(--eggshell);
--bg-accent: var(--white2);
--fg: var(--eggplant4);
--fg-reduced: var(--eggplant3);
/* Profile page styling (light) */
--profile-bg: var(--white2);
/* Buttons */
--button-bg: var(--blue2);
--button-fg: var(--white1);
/* 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(--orange);
}
/* Main page background */
body {
background: linear-gradient(
var(--eggplant1),
var(--pink),
var(--orange),
var(--yellow),
var(--eggshell)
);
}
/* Scroll bar */
html, body {
scrollbar-color: var(--pink) var(--eggshell);
}
/* Instance title color */
.page-header a h1 {
color: var(--eggshell);
}
/* Profile fields */
.profile .about-user .fields .field {
border-bottom: 0.1rem solid var(--orange);
}
.profile .about-user .fields .field:first-child {
border-top: 0.1rem solid var(--orange);
}
/* Status media */
.status .media .media-wrapper {
border: 0.08rem solid var(--orange);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--blue2);
}
.status .media .media-wrapper details video.plyr-video {
background: var(--eggshell);
}
/* 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(--eggplant4);
color: var(--white1);
}
/* Block quotes */
blockquote {
background-color: var(--yellow);
color: var(--eggplant4);
}