summaryrefslogtreecommitdiff
path: root/web/assets/themes/blurple-dark.css
blob: 2899ecf240a3f9f4ce6a9c995db1ec3f8b868097 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/*
  theme-title: Blurple (dark)
  theme-description: Official dark 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: #fad000;

  /* Restyle basic colors to use blurple */
  --blue1: var(--blurple1);
  --blue2: var(--blurple2);
  --blue3: var(--blurple3);

  /* Basic page styling (background + foreground) */
  --bg: var(--blurple7);
  --bg-accent: var(--blurple6);
  --fg: var(--blurple1);
  --fg-reduced: var(--blurple2);

  /* Profile page styling */
  --profile-bg: var(--blurple6);

  /* Blurpleize buttons */
  --button-bg: var(--blurple2);
  --button-fg: var(--blurple5);

  /* Blurpleize statuses */
  --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;
}

/* Main page background */
body {
  background: linear-gradient(var(--blurple7), black);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--blurple4) var(--blurple7);
}

/* Profile fields */
.profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--blurple4);
}
.profile .about-user .fields .field:first-child {
  border-top: 0.1rem solid var(--blurple4);
}

/* Status media */
.status .media .media-wrapper {
  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(--blurple6);
}

/* Status polls */
.status .text .poll {
  background-color: var(--bg);
}
.status .text .poll .poll-info {
  background-color: var(--blurple6);
}

/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
	background-color: var(--blurple7);
  color: var(--fg-reduced);
}

/* Block quotes */
blockquote {
  background-color: var(--blurple7);
  color: var(--fg-reduced);
}