[chore/frontend] Adjust contrast, mute blurple a bit (#2785)

This commit is contained in:
tobi 2024-03-26 12:02:09 +01:00 committed by GitHub
parent 8953f57d88
commit ac3f195b56
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 56 additions and 76 deletions

View file

@ -5,18 +5,16 @@
:root { :root {
/* Define our nice blurple palette */ /* Define our nice blurple palette */
--blurple1: #ffffff; --blurple1: #ebe6f8;
--blurple2: #ebe6f8; --blurple2: #d6cceb;
--blurple3: #d6cceb; --blurple3: #c2b3e1;
--blurple4: #c2b3e1; --blurple4: #aa60ff;
--blurple5: #ad99d7; --blurple5: #783d9f;
--blurple6: #9980cd; --blurple6: #2d2b55;
--blurple7: #8566c2; --blurple7: #1f1f41;
--blurple8: #704db8;
--blurple9: #5c33ae; /* Override orange trim */
--blurple10: #471aa4; --orange2: #fad000;
--blurple11: #33009a;
--blurple12: #170044;
/* Restyle basic colors to use blurple */ /* Restyle basic colors to use blurple */
--blue1: var(--blurple1); --blue1: var(--blurple1);
@ -24,23 +22,23 @@
--blue3: var(--blurple3); --blue3: var(--blurple3);
/* Basic page styling (background + foreground) */ /* Basic page styling (background + foreground) */
--bg: var(--blurple12); --bg: linear-gradient(var(--blurple7), black);
--bg-accent: var(--blurple11); --bg-accent: var(--blurple6);
--fg: var(--blurple1); --fg: var(--blurple1);
--fg-reduced: var(--blurple3); --fg-reduced: var(--blurple2);
/* Profile page styling (light) */ /* Profile page styling */
--profile-bg: var(--blurple11); --profile-bg: var(--blurple6);
/* Blurpleize buttons */ /* Blurpleize buttons */
--button-bg: var(--blurple2); --button-bg: var(--blurple2);
--button-fg: var(--blurple11); --button-fg: var(--blurple5);
/* Blurpleize statuses */ /* Blurpleize statuses */
--status-bg: var(--blurple11); --status-bg: var(--blurple6);
--status-focus-bg: var(--blurple11); --status-focus-bg: var(--blurple6);
--status-info-bg: var(--blurple9); --status-info-bg: var(--blurple5);
--status-focus-info-bg: var(--blurple9); --status-focus-info-bg: var(--blurple5);
/* Used around statuses + other items */ /* Used around statuses + other items */
--boxshadow-border: 0.08rem solid black; --boxshadow-border: 0.08rem solid black;
@ -48,26 +46,26 @@
/* Scroll bar */ /* Scroll bar */
html, body { html, body {
scrollbar-color: var(--blurple8) var(--blurple12); scrollbar-color: var(--blurple4) var(--blurple7);
} }
/* Profile fields */ /* Profile fields */
.profile .about-user .fields .field { .profile .about-user .fields .field {
border-bottom: 0.1rem solid var(--blurple8); border-bottom: 0.1rem solid var(--blurple4);
} }
.profile .about-user .fields .field:first-child { .profile .about-user .fields .field:first-child {
border-top: 0.1rem solid var(--blurple8); border-top: 0.1rem solid var(--blurple4);
} }
/* Status media */ /* Status media */
.status .media .media-wrapper { .status .media .media-wrapper {
border: 0.08rem solid var(--blurple9); border: 0.08rem solid var(--blurple5);
} }
.status .media .media-wrapper details .unknown-attachment .placeholder { .status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--blue2); color: var(--blue2);
} }
.status .media .media-wrapper details video.plyr-video { .status .media .media-wrapper details video.plyr-video {
background: var(--blurple11); background: var(--blurple6);
} }
/* Status polls */ /* Status polls */
@ -75,18 +73,18 @@ html, body {
background-color: var(--bg); background-color: var(--bg);
} }
.status .text .poll .poll-info { .status .text .poll .poll-info {
background-color: var(--blurple11); background-color: var(--blurple6);
} }
/* Code snippets */ /* Code snippets */
pre, pre[class*="language-"], pre, pre[class*="language-"],
code, code[class*="language-"] { code, code[class*="language-"] {
background-color: var(--blurple12); background-color: var(--blurple7);
color: var(--fg-reduced); color: var(--fg-reduced);
} }
/* Block quotes */ /* Block quotes */
blockquote { blockquote {
background-color: var(--blurple12); background-color: var(--blurple7);
color: var(--fg-reduced); color: var(--fg-reduced);
} }

View file

@ -5,28 +5,26 @@
:root { :root {
/* Define our nice blurple palette */ /* Define our nice blurple palette */
--blurple1: #ffffff; --blurple1: #ebe6f8;
--blurple2: #ebe6f8; --blurple2: #d6cceb;
--blurple3: #d6cceb; --blurple3: #c2b3e1;
--blurple4: #c2b3e1; --blurple4: #aa60ff;
--blurple5: #ad99d7; --blurple5: #783d9f;
--blurple6: #9980cd; --blurple6: #2d2b55;
--blurple7: #8566c2; --blurple7: #1f1f41;
--blurple8: #704db8;
--blurple9: #5c33ae; /* Override orange trim */
--blurple10: #471aa4; --orange2: #700000;
--blurple11: #33009a;
--blurple12: #170044;
/* Restyle basic colors to use blurple */ /* Restyle basic colors to use blurple */
--white1: var(--blurple2); --white1: var(--blurple2);
--white2: var(--blurple3); --white2: var(--blurple3);
--blue1: var(--blurple6); --blue1: var(--blurple4);
--blue2: var(--blurple8); --blue2: var(--blurple5);
--blue3: var(--blurple10); --blue3: var(--blurple6);
/* Basic page styling (background + foreground) */ /* Basic page styling (background + foreground) */
--bg: linear-gradient(var(--blurple2), var(--blurple1)); --bg: linear-gradient(var(--blurple1), white);
--bg-accent: var(--white2); --bg-accent: var(--white2);
--fg: var(--gray1); --fg: var(--gray1);
--fg-reduced: var(--gray2); --fg-reduced: var(--gray2);
@ -45,25 +43,25 @@
--status-focus-info-bg: var(--white2); --status-focus-info-bg: var(--white2);
/* Used around statuses + other items */ /* Used around statuses + other items */
--boxshadow-border: 0.08rem solid var(--blurple10); --boxshadow-border: 0.08rem solid var(--blurple6);
} }
/* Scroll bar */ /* Scroll bar */
html, body { html, body {
scrollbar-color: var(--blurple8) var(--blurple2); scrollbar-color: var(--blurple5) var(--blurple2);
} }
/* Profile fields */ /* Profile fields */
.profile .about-user .fields .field { .profile .about-user .fields .field {
border-bottom: 0.1rem solid var(--blurple10); border-bottom: 0.1rem solid var(--blurple6);
} }
.profile .about-user .fields .field:first-child { .profile .about-user .fields .field:first-child {
border-top: 0.1rem solid var(--blurple10); border-top: 0.1rem solid var(--blurple6);
} }
/* Status media */ /* Status media */
.status .media .media-wrapper { .status .media .media-wrapper {
border: 0.08rem solid var(--blurple10); border: 0.08rem solid var(--blurple6);
} }
.status .media .media-wrapper details .unknown-attachment .placeholder { .status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--blue2); color: var(--blue2);
@ -83,12 +81,12 @@ html, body {
/* Code snippets */ /* Code snippets */
pre, pre[class*="language-"], pre, pre[class*="language-"],
code, code[class*="language-"] { code, code[class*="language-"] {
background-color: var(--blurple12); background-color: var(--blurple7);
color: var(--blurple2); color: var(--blurple2);
} }
/* Block quotes */ /* Block quotes */
blockquote { blockquote {
background-color: var(--blurple1); background-color: var(--blurple1);
color: var(--blurple12); color: var(--blurple7);
} }

View file

@ -9,8 +9,6 @@
--acid-green-light: #79FF4D; --acid-green-light: #79FF4D;
--acid-green-dark: #269900; --acid-green-dark: #269900;
--magenta: rgb(153, 50, 204); --magenta: rgb(153, 50, 204);
--darkred: rgb(58, 0, 15);
--darkblue: rgb(0, 0, 58);
--darkmagenta: rgb(47, 1, 65); --darkmagenta: rgb(47, 1, 65);
/* Override */ /* Override */
@ -22,27 +20,7 @@
} }
body { body {
background: linear-gradient(-45deg, black, var(--darkmagenta), var(--darkblue), var(--darkred)); background: linear-gradient(90deg, var(--darkmagenta), black, var(--darkmagenta));
background-size: 400% 400%;
height: 100%;
}
@media not (prefers-reduced-motion) {
body {
animation: gradient 30s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
} }
html, body { html, body {

View file

@ -50,10 +50,16 @@ html, body {
scrollbar-color: var(--pink) var(--eggshell); scrollbar-color: var(--pink) var(--eggshell);
} }
/* Instance title color */
.page-header a h1 { .page-header a h1 {
color: var(--eggshell); color: var(--eggshell);
} }
/* Role badge background */
.profile .profile-header .basic-info .namerole .role {
background: var(--eggshell);
}
/* Profile fields */ /* Profile fields */
.profile .about-user .fields .field { .profile .about-user .fields .field {
border-bottom: 0.1rem solid var(--orange); border-bottom: 0.1rem solid var(--orange);