1 /* pleroma-light and pleroma-dark themes from pleroma-fe */
3 --icon-filter: invert
(38%) sepia
(11%) saturate
(209%) hue-rotate
(179deg) brightness
(99%) contrast
(89%);
4 --wallpaper: rgba
(11, 16, 23, 1);
5 --alertNeutral: rgba
(185, 185, 186, 0.5);
6 --alertNeutralText: rgba
(255, 255, 255, 1);
7 --avatarShadow: 0px 1px 8px 0px rgba
(0, 0, 0, 0.7);
8 --loadPostsSelected: rgba
(23, 34, 46, 1);
9 --loadPostsSelectedText: rgba
(185, 185, 186, 1);
10 --profileBg: rgba
(7, 12, 17, 1);
11 --profileTint: rgba
(15, 22, 30, 0.5);
12 --btnText: rgba
(185, 185, 186, 1);
13 --btn: rgba
(21, 30, 43, 1);
14 --btnShadow: 0px 0px 2px 0px rgba
(0, 0, 0, 1) , 0px 1px 0px 0px rgba
(255, 255, 255, 0.2) inset
, 0px -1px 0px 0px rgba
(0, 0, 0, 0.2) inset
;
15 --btnHoverShadow: 0px 0px 1px 2px rgba
(185, 185, 186, 0.4) inset
, 0px 1px 0px 0px rgba
(255, 255, 255, 0.2) inset
, 0px -1px 0px 0px rgba
(0, 0, 0, 0.2) inset
;
16 --lightText: rgba
(236, 236, 236, 1);
17 --panelShadow: 0px 0px 3px 0px rgba
(0, 0, 0, 0.5) , 0px 4px 6px 3px rgba
(0, 0, 0, 0.3);
18 --panelHeaderShadow: 0px 1px 3px 0px rgba
(0, 0, 0, 0.4) , 0px 1px 0px 0px rgba
(255, 255, 255, 0.2) inset
;
19 --topBar: rgba
(21, 30, 43, 1);
20 --topBarText: rgba
(159, 159, 161, 1);
21 --topBarShadow: 0px 1px 4px 0px rgba
(0, 0, 0, 0.4) , 0px 2px 7px 0px rgba
(0, 0, 0, 0.3);
22 --underlay: rgba
(9, 14, 20, 0.6);
23 --background: rgba
(15, 22, 30, 1);
24 --faint: rgba
(185, 185, 186, 0.5);
25 --selectedPost: rgba
(23, 34, 46, 1);
26 --link: rgba
(226, 177, 136, 1);
27 --text: rgba
(185, 185, 186, 1);
28 --border: rgba
(26, 37, 53, 1);
29 --poll: rgba
(99, 84, 72, 1);
31 @media (prefers-color-scheme: light
) {
33 --icon-filter: invert
(67%) sepia
(7%) saturate
(525%) hue-rotate
(173deg) brightness
(90%) contrast
(92%);;
34 --wallpaper: rgba
(248, 250, 252, 1);
35 --alertNeutral: rgba
(48, 64, 85, 0.5);
36 --alertNeutralText: rgba
(0, 0, 0, 1);
37 --avatarShadow: 0px 1px 8px 0px rgba
(0, 0, 0, 0.7);
38 --loadPostsSelected: rgba
(224, 233, 240, 1);
39 --loadPostsSelectedText: rgba
(48, 64, 85, 1);
40 --profileBg: rgba
(128, 137, 146, 1);
41 --profileTint: rgba
(242, 246, 249, 0.5);
42 --btnText: rgba
(48, 64, 85, 1);
43 --btn: rgba
(214, 223, 237, 1);
44 --btnShadow: 0px 0px 2px 0px rgba
(0, 0, 0, 0.2) , 0px 1px 0px 0px rgba
(255, 255, 255, 0.5) inset
, 0px -1px 0px 0px rgba
(0, 0, 0, 0.2) inset
;
45 --btnHoverShadow: 0px 0px 2px 0px rgba
(0, 0, 0, 0.2) , 0px 0px 1px 2px rgba
(255, 195, 159, 1) inset
, 0px -1px 0px 0px rgba
(0, 0, 0, 0.2) inset
;
46 --lightText: rgba
(11, 14, 19, 1);
47 --panelShadow: 0px 1px 3px 0px rgba
(0, 0, 0, 0.5) , 0px 3px 6px 1px rgba
(0, 0, 0, 0.2);
48 --panelHeaderShadow: 0px 1px 0px 0px rgba
(255, 255, 255, 0.5) inset
, 0px 1px 3px 0px rgba
(0, 0, 0, 0.3);
49 --topBar: rgba
(214, 223, 237, 1);
50 --topBarText: rgba
(48, 64, 85, 1);
51 --topBarShadow: 0px 0px 4px 0px rgba
(0, 0, 0, 0.6);
52 --underlay: rgba
(93, 96, 134, 0.4);
53 --background: rgba
(242, 246, 249, 1);
54 --faint: rgba
(48, 64, 85, 0.5);
55 --selectedPost: rgba
(224, 233, 240, 1);
56 --link: rgba
(245, 91, 27, 1);
57 --text: rgba
(48, 64, 85, 1);
58 --border: rgba
(216, 230, 249, 1);
59 --poll: rgba
(243, 184, 160, 1);
72 font-family: sans-serif
;
83 background-size: cover
;
84 background-repeat: no-repeat
;
85 background-color: var
(--wallpaper
);
86 background-image: var
(--background-image
);
87 background-position: 50%;
91 text-decoration: none
;
100 background-color: var
(--topBar
);
101 box-shadow: var
(--topBarShadow
);
113 color: var
(--topBarText
);
118 vertical-align: middle
;
124 grid-template-columns: minmax
(25em, 45em) 25em;
125 grid-template-areas: "content sidebar";
126 height: calc
(100vh - 3.5em);
127 justify-content: center
;
131 grid-column-start: 1;
132 grid-column-end: span
2;
135 background-color: var
(--underlay
);
145 background-color: var
(--background
);
147 box-shadow: var
(--panelShadow
);
151 background-color: var
(--topBar
);
154 border-radius: 3px 3px 0 0;
155 box-shadow: var
(--panelHeaderShadow
);
180 margin-right: 0.75em;
189 padding: 0.4em 0.75em;
190 margin-bottom: -0.75em;
193 .repeat-header .right-side {
196 .repeat-header .u-photo {
203 margin-bottom: 0.5em;
208 display: inline-block
;
209 word-break: break-all
;
223 .heading-name-row .account-name {
228 text-overflow: ellipsis
;
232 .heading-name-row
.username
,
233 .repeat-header .username {
241 text-overflow: ellipsis
;
246 justify-content: space-between
;
258 .reply-to-link:hover {
259 text-decoration: underline
;
263 background-color: var
(--selectedPost
);
275 text-decoration: underline
;
283 header a
, .h-card a
{
284 text-decoration: none
;
287 header
a:hover
, .h-card
a:hover
{
288 text-decoration: underline
;
296 align-content: stretch
;
301 border: 1px solid var
(--border
);
305 justify-content: center
;
315 .attachment:not(:last-child) {
330 .nsfw-banner:not(:hover) {
331 background-color: var
(--background
);
333 .nsfw-banner:hover div {
340 margin: 0.75em 0.5em;
341 padding: 0.1em 0.25em;
342 word-break: break-word
;
345 .poll-option .percentage {
352 background-color: var
(--poll
);
365 .status-actions > * {
374 padding-bottom: 0.5em;
375 margin-bottom: 0.5em;
377 border-width: 0 0 1px 0;
378 border-color: var
(--border
, #222);
388 word-wrap: break-word
;
389 word-break: break-word
;
397 .user-info .container {
398 padding: 18px 0 6px 0;
400 align-items: flex-start
;
405 color: var
(--lightText
);
408 .user-info .avatar img {
415 box-shadow: var
(--avatarShadow
);
422 text-overflow: ellipsis
;
427 color: var
(--lightText
);
432 color: var
(--btnText
);
433 background-color: var
(--btn
);
436 box-shadow: var
(--btnShadow
);
441 .button-default:hover {
442 box-shadow: var
(--btnHoverShadow
);
460 background-image: linear-gradient
(to bottom
, var
(--profileTint
), var
(--profileTint
)),
462 background-size: cover
;
463 background-color: var
(--profileBg
);
464 -webkit-mask: linear-gradient
(to top
, white
, transparent
) bottom no-repeat
,
465 linear-gradient
(to top
, white
, white
);
466 -webkit-mask-composite: xor
;
467 -webkit-mask-size: 100% 60%;
477 color: var
(--alertNeutralText
);
478 background-color: var
(--alertNeutral
);
484 .user-profile-fields {
488 .user-profile-field {
491 border: 1px solid var
(--border
, #222);
494 text-overflow: ellipsis
;
499 .user-profile-field dt {
500 padding: 0.5em 1.5em;
501 box-sizing: border-box
;
504 color: var
(--lightText
);
505 border-right: 1px solid var
(--border
);
509 .user-profile-field dd {
510 padding: 0.5em 1.5em;
511 box-sizing: border-box
;
513 margin: 0 0 0 0.25em;
519 padding: 0.5em 1.5em 0 1.5em;
521 justify-content: space-between
;
522 color: var
(--lightText
);
543 border-bottom: 1px solid var
(--border
);
546 .tab-switcher::before
,
547 .tab-switcher::after {
555 border-bottom-left-radius: 0;
556 border-bottom-right-radius: 0;
560 background: transparent
;
563 .profile .status-container {
564 border-bottom: 1px solid var
(--border
);
573 box-sizing: border-box
;
582 background-color: var
(--loadPostsSelected
);
583 color: var
(--loadPostsSelectedText
);
590 filter: var
(--icon-filter
);
594 .status-actions .fa-icon {
598 .reply-to-link .fa-icon {
599 transform: scale
(-1, 1);
602 @media (max-width: 800px) {
617 img:not
(.u-photo
, .fa-icon
) {
621 vertical-align: middle
;
624 .username img:not(.u-photo) {