mirror of
https://github.com/superseriousbusiness/gotosocial
synced 2024-11-10 06:54:16 +00:00
[chore/frontend] Adjust contrast, mute blurple a bit (#2785)
This commit is contained in:
tobi
GitHub
parent
8953f57d88
commit
ac3f195b56
4 changed files with 56 additions and 76 deletions
|
|
@ -5,18 +5,16 @@
|
|||
|
||||
:root {
|
||||
/* Define our nice blurple palette */
|
||||
--blurple1: #ffffff;
|
||||
--blurple2: #ebe6f8;
|
||||
--blurple3: #d6cceb;
|
||||
--blurple4: #c2b3e1;
|
||||
--blurple5: #ad99d7;
|
||||
--blurple6: #9980cd;
|
||||
--blurple7: #8566c2;
|
||||
--blurple8: #704db8;
|
||||
--blurple9: #5c33ae;
|
||||
--blurple10: #471aa4;
|
||||
--blurple11: #33009a;
|
||||
--blurple12: #170044;
|
||||
--blurple1: #ebe6f8;
|
||||
--blurple2: #d6cceb;
|
||||
--blurple3: #c2b3e1;
|
||||
--blurple4: #aa60ff;
|
||||
--blurple5: #783d9f;
|
||||
--blurple6: #2d2b55;
|
||||
--blurple7: #1f1f41;
|
||||
|
||||
/* Override orange trim */
|
||||
--orange2: #fad000;
|
||||
|
||||
/* Restyle basic colors to use blurple */
|
||||
--blue1: var(--blurple1);
|
||||
|
|
@ -24,23 +22,23 @@
|
|||
--blue3: var(--blurple3);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: var(--blurple12);
|
||||
--bg-accent: var(--blurple11);
|
||||
--bg: linear-gradient(var(--blurple7), black);
|
||||
--bg-accent: var(--blurple6);
|
||||
--fg: var(--blurple1);
|
||||
--fg-reduced: var(--blurple3);
|
||||
--fg-reduced: var(--blurple2);
|
||||
|
||||
/* Profile page styling (light) */
|
||||
--profile-bg: var(--blurple11);
|
||||
/* Profile page styling */
|
||||
--profile-bg: var(--blurple6);
|
||||
|
||||
/* Blurpleize buttons */
|
||||
--button-bg: var(--blurple2);
|
||||
--button-fg: var(--blurple11);
|
||||
--button-fg: var(--blurple5);
|
||||
|
||||
/* Blurpleize statuses */
|
||||
--status-bg: var(--blurple11);
|
||||
--status-focus-bg: var(--blurple11);
|
||||
--status-info-bg: var(--blurple9);
|
||||
--status-focus-info-bg: var(--blurple9);
|
||||
--status-bg: var(--blurple6);
|
||||
--status-focus-bg: var(--blurple6);
|
||||
--status-info-bg: var(--blurple5);
|
||||
--status-focus-info-bg: var(--blurple5);
|
||||
|
||||
/* Used around statuses + other items */
|
||||
--boxshadow-border: 0.08rem solid black;
|
||||
|
|
@ -48,26 +46,26 @@
|
|||
|
||||
/* Scroll bar */
|
||||
html, body {
|
||||
scrollbar-color: var(--blurple8) var(--blurple12);
|
||||
scrollbar-color: var(--blurple4) var(--blurple7);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.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 {
|
||||
border-top: 0.1rem solid var(--blurple8);
|
||||
border-top: 0.1rem solid var(--blurple4);
|
||||
}
|
||||
|
||||
/* Status media */
|
||||
.status .media .media-wrapper {
|
||||
border: 0.08rem solid var(--blurple9);
|
||||
border: 0.08rem solid var(--blurple5);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
color: var(--blue2);
|
||||
}
|
||||
.status .media .media-wrapper details video.plyr-video {
|
||||
background: var(--blurple11);
|
||||
background: var(--blurple6);
|
||||
}
|
||||
|
||||
/* Status polls */
|
||||
|
|
@ -75,18 +73,18 @@ html, body {
|
|||
background-color: var(--bg);
|
||||
}
|
||||
.status .text .poll .poll-info {
|
||||
background-color: var(--blurple11);
|
||||
background-color: var(--blurple6);
|
||||
}
|
||||
|
||||
/* Code snippets */
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background-color: var(--blurple12);
|
||||
background-color: var(--blurple7);
|
||||
color: var(--fg-reduced);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
background-color: var(--blurple12);
|
||||
background-color: var(--blurple7);
|
||||
color: var(--fg-reduced);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,28 +5,26 @@
|
|||
|
||||
:root {
|
||||
/* Define our nice blurple palette */
|
||||
--blurple1: #ffffff;
|
||||
--blurple2: #ebe6f8;
|
||||
--blurple3: #d6cceb;
|
||||
--blurple4: #c2b3e1;
|
||||
--blurple5: #ad99d7;
|
||||
--blurple6: #9980cd;
|
||||
--blurple7: #8566c2;
|
||||
--blurple8: #704db8;
|
||||
--blurple9: #5c33ae;
|
||||
--blurple10: #471aa4;
|
||||
--blurple11: #33009a;
|
||||
--blurple12: #170044;
|
||||
--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(--blurple6);
|
||||
--blue2: var(--blurple8);
|
||||
--blue3: var(--blurple10);
|
||||
--blue1: var(--blurple4);
|
||||
--blue2: var(--blurple5);
|
||||
--blue3: var(--blurple6);
|
||||
|
||||
/* Basic page styling (background + foreground) */
|
||||
--bg: linear-gradient(var(--blurple2), var(--blurple1));
|
||||
--bg: linear-gradient(var(--blurple1), white);
|
||||
--bg-accent: var(--white2);
|
||||
--fg: var(--gray1);
|
||||
--fg-reduced: var(--gray2);
|
||||
|
|
@ -45,25 +43,25 @@
|
|||
--status-focus-info-bg: var(--white2);
|
||||
|
||||
/* Used around statuses + other items */
|
||||
--boxshadow-border: 0.08rem solid var(--blurple10);
|
||||
--boxshadow-border: 0.08rem solid var(--blurple6);
|
||||
}
|
||||
|
||||
/* Scroll bar */
|
||||
html, body {
|
||||
scrollbar-color: var(--blurple8) var(--blurple2);
|
||||
scrollbar-color: var(--blurple5) var(--blurple2);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.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 {
|
||||
border-top: 0.1rem solid var(--blurple10);
|
||||
border-top: 0.1rem solid var(--blurple6);
|
||||
}
|
||||
|
||||
/* Status media */
|
||||
.status .media .media-wrapper {
|
||||
border: 0.08rem solid var(--blurple10);
|
||||
border: 0.08rem solid var(--blurple6);
|
||||
}
|
||||
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||
color: var(--blue2);
|
||||
|
|
@ -83,12 +81,12 @@ html, body {
|
|||
/* Code snippets */
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background-color: var(--blurple12);
|
||||
background-color: var(--blurple7);
|
||||
color: var(--blurple2);
|
||||
}
|
||||
|
||||
/* Block quotes */
|
||||
blockquote {
|
||||
background-color: var(--blurple1);
|
||||
color: var(--blurple12);
|
||||
color: var(--blurple7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@
|
|||
--acid-green-light: #79FF4D;
|
||||
--acid-green-dark: #269900;
|
||||
--magenta: rgb(153, 50, 204);
|
||||
--darkred: rgb(58, 0, 15);
|
||||
--darkblue: rgb(0, 0, 58);
|
||||
--darkmagenta: rgb(47, 1, 65);
|
||||
|
||||
/* Override */
|
||||
|
|
@ -22,27 +20,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(-45deg, black, var(--darkmagenta), var(--darkblue), var(--darkred));
|
||||
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%;
|
||||
}
|
||||
}
|
||||
background: linear-gradient(90deg, var(--darkmagenta), black, var(--darkmagenta));
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
|
|
|||
|
|
@ -50,10 +50,16 @@ html, body {
|
|||
scrollbar-color: var(--pink) var(--eggshell);
|
||||
}
|
||||
|
||||
/* Instance title color */
|
||||
.page-header a h1 {
|
||||
color: var(--eggshell);
|
||||
}
|
||||
|
||||
/* Role badge background */
|
||||
.profile .profile-header .basic-info .namerole .role {
|
||||
background: var(--eggshell);
|
||||
}
|
||||
|
||||
/* Profile fields */
|
||||
.profile .about-user .fields .field {
|
||||
border-bottom: 0.1rem solid var(--orange);
|
||||
|
|
|
|||
Loading…
Reference in a new issue