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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
/*
theme-title: Soft
theme-description: Pastel pink and blue with dark magenta trim
*/
:root {
/* Define our palette */
--soft-pink: rgb(255, 199, 234);
--soft-pink-translucent: rgb(255, 199, 234, 30%);
--soft-lilac: #D8B4F8;
--soft-lilac-translucent: rgb(216, 180, 248, 30%);
--soft-blue: #d6f1ff;
/* Override */
--blue1: #7f16de;
--blue2: #7514cc;
--blue3: #6b12ba;
--orange2: var(--blue1);
--br: 0.8rem;
--br-inner: 0.4rem;
/* Use hardcoded grey as gray get re-styled in light mode */
--white1: #fafaff;
--gray1: #2a2b2f;
--gray2: #35363b;
--gray3: #45464e;
--gray8: #696a75;
/* Basic page styling (background + foreground) */
--bg: var(--soft-pink);
--bg-accent: var(--soft-pink-translucent);
--fg: var(--gray1);
--fg-reduced: var(--gray3);
/* Profile page styling (light) */
--profile-bg: var(--soft-pink-translucent);
/* Statuses */
--status-bg: var(--soft-pink-translucent);
--status-focus-bg: var(--soft-pink-translucent);
--status-info-bg: var(--soft-lilac-translucent);
--status-focus-info-bg: var(--soft-lilac-translucent);
/* Boot-on */
--button-fg: var(--white1);
/* Used around statuses + other items */
--boxshadow-border: 0.08rem solid var(--gray8);
}
/* Main page background */
body {
background: linear-gradient(
-90deg,
var(--soft-blue),
var(--soft-pink),
white,
var(--soft-pink),
var(--soft-blue)
);
}
/* Scroll bar */
html, body {
scrollbar-color: var(--orange2) var(--soft-pink);
}
/* Header card */
.profile .profile-header {
border: var(--boxshadow-border);
}
/* Role and bot badge borders */
.profile .profile-header .basic-info .namerole .role,
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
border: var(--boxshadow-border);
}
/* About + Pinned posts headers */
.profile .col-header {
border: var(--boxshadow-border);
}
.profile .about-user .col-header {
margin-bottom: initial;
border-bottom: none;
border-top: var(--boxshadow-border);
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
}
/* Profile fields + bio */
.profile .about-user .fields {
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
}
.profile .about-user .fields .field {
border-bottom: 0.1rem dashed var(--blue3);
}
.profile .about-user .fields .field:first-child {
border-top: 0.1rem dashed var(--blue3);
}
.profile .about-user .bio {
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
}
.profile .about-user .accountstats {
background: var(--soft-lilac-translucent);
border-bottom: var(--boxshadow-border);
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
border-bottom-left-radius: var(--br);
border-bottom-right-radius: var(--br);
}
/* Status media */
.status .media .media-wrapper {
border: 0.08rem solid var(--blue3);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--blue2);
}
.status .media .media-wrapper details video.plyr-video {
background: var(--soft-pink-translucent);
}
/* Status polls */
.status .text .poll {
background-color: var(--soft-lilac-translucent);
}
.status .text .poll .poll-info {
background: var(--bg);
}
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
background-color: var(--gray1);
color: white;
}
/* Block quotes */
blockquote {
background-color: var(--soft-lilac-translucent);
}
|
