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);
32 @media (prefers-color-scheme: light
) {
34 --icon-filter: invert
(67%) sepia
(7%) saturate
(525%) hue-rotate
(173deg) brightness
(90%) contrast
(92%);
36 --wallpaper: rgba
(248, 250, 252, 1);
37 --alertNeutral: rgba
(48, 64, 85, 0.5);
38 --alertNeutralText: rgba
(0, 0, 0, 1);
39 --avatarShadow: 0px 1px 8px 0px rgba
(0, 0, 0, 0.7);
40 --loadPostsSelected: rgba
(224, 233, 240, 1);
41 --loadPostsSelectedText: rgba
(48, 64, 85, 1);
42 --profileBg: rgba
(128, 137, 146, 1);
43 --profileTint: rgba
(242, 246, 249, 0.5);
44 --btnText: rgba
(48, 64, 85, 1);
45 --btn: rgba
(214, 223, 237, 1);
46 --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
;
47 --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
;
48 --lightText: rgba
(11, 14, 19, 1);
49 --panelShadow: 0px 1px 3px 0px rgba
(0, 0, 0, 0.5), 0px 3px 6px 1px rgba
(0, 0, 0, 0.2);
50 --panelHeaderShadow: 0px 1px 0px 0px rgba
(255, 255, 255, 0.5) inset
, 0px 1px 3px 0px rgba
(0, 0, 0, 0.3);
51 --topBar: rgba
(214, 223, 237, 1);
52 --topBarText: rgba
(48, 64, 85, 1);
53 --topBarShadow: 0px 0px 4px 0px rgba
(0, 0, 0, 0.6);
54 --underlay: rgba
(93, 96, 134, 0.4);
55 --background: rgba
(242, 246, 249, 1);
56 --faint: rgba
(48, 64, 85, 0.5);
57 --selectedPost: rgba
(224, 233, 240, 1);
58 --link: rgba
(245, 91, 27, 1);
59 --text: rgba
(48, 64, 85, 1);
60 --border: rgba
(216, 230, 249, 1);
61 --poll: rgba
(243, 184, 160, 1);
74 font-family: sans-serif
;
85 background-size: cover
;
86 background-repeat: no-repeat
;
87 background-color: var
(--wallpaper
);
88 background-image: var
(--background-image
);
89 background-position: 50%;
93 text-decoration: none
;
102 background-color: var
(--topBar
);
103 box-shadow: var
(--topBarShadow
);
115 color: var
(--topBarText
);
120 vertical-align: middle
;
126 grid-template-columns: minmax
(25em, 45em) 25em;
127 grid-template-areas: "content sidebar";
128 height: calc
(100vh - 3.5em);
129 justify-content: center
;
133 grid-column-start: 1;
134 grid-column-end: span
2;
137 background-color: var
(--underlay
);
147 background-color: var
(--background
);
149 box-shadow: var
(--panelShadow
);
153 background-color: var
(--topBar
);
156 border-radius: 3px 3px 0 0;
157 box-shadow: var
(--panelHeaderShadow
);
179 grid-column-end: sidebar-end
;
184 flex-direction: column
;
186 color: var
(--muted-text-color
);
198 margin-right: 0.75em;
207 padding: 0.4em 0.75em;
208 margin-bottom: -0.75em;
211 .repeat-header .right-side {
215 .repeat-header .u-photo {
222 margin-bottom: 0.5em;
227 display: inline-block
;
228 word-break: break-all
;
242 .heading-name-row .account-name {
247 text-overflow: ellipsis
;
251 .heading-name-row
.username
,
252 .repeat-header .username {
260 text-overflow: ellipsis
;
265 justify-content: space-between
;
278 .reply-to-link:hover {
279 text-decoration: underline
;
283 background-color: var
(--selectedPost
);
295 text-decoration: underline
;
305 text-decoration: none
;
310 text-decoration: underline
;
318 align-content: stretch
;
323 border: 1px solid var
(--border
);
327 justify-content: center
;
337 .attachment:not(:last-child) {
353 .nsfw-banner:not(:hover) {
354 background-color: var
(--background
);
357 .nsfw-banner:hover div {
364 margin: 0.75em 0.5em;
365 padding: 0.1em 0.25em;
366 word-break: break-word
;
370 .poll-option .percentage {
378 background-color: var
(--poll
);
401 padding-bottom: 0.5em;
402 margin-bottom: 0.5em;
404 border-width: 0 0 1px 0;
405 border-color: var
(--border
, #222);
415 word-wrap: break-word
;
416 word-break: break-word
;
424 .user-info .container {
425 padding: 18px 0 6px 0;
427 align-items: flex-start
;
432 color: var
(--lightText
);
435 .user-info .avatar img {
442 box-shadow: var
(--avatarShadow
);
449 text-overflow: ellipsis
;
454 color: var
(--lightText
);
459 color: var
(--btnText
);
460 background-color: var
(--btn
);
463 box-shadow: var
(--btnShadow
);
468 .button-default:hover {
469 box-shadow: var
(--btnHoverShadow
);
487 background-image: linear-gradient
(to bottom
, var
(--profileTint
), var
(--profileTint
)),
489 background-size: cover
;
490 background-color: var
(--profileBg
);
491 -webkit-mask: linear-gradient
(to top
, white
, transparent
) bottom no-repeat
,
492 linear-gradient
(to top
, white
, white
);
493 -webkit-mask-composite: xor
;
494 -webkit-mask-size: 100% 60%;
504 color: var
(--alertNeutralText
);
505 background-color: var
(--alertNeutral
);
511 .user-profile-fields {
515 .user-profile-field {
518 border: 1px solid var
(--border
, #222);
521 text-overflow: ellipsis
;
526 .user-profile-field dt {
527 padding: 0.5em 1.5em;
528 box-sizing: border-box
;
531 color: var
(--lightText
);
532 border-right: 1px solid var
(--border
);
536 .user-profile-field dd {
537 padding: 0.5em 1.5em;
538 box-sizing: border-box
;
540 margin: 0 0 0 0.25em;
546 padding: 0.5em 1.5em 0 1.5em;
548 justify-content: space-between
;
549 color: var
(--lightText
);
570 border-bottom: 1px solid var
(--border
);
573 .tab-switcher::before
,
574 .tab-switcher::after {
582 border-bottom-left-radius: 0;
583 border-bottom-right-radius: 0;
587 background: transparent
;
590 .profile .status-container {
591 border-bottom: 1px solid var
(--border
);
600 box-sizing: border-box
;
609 background-color: var
(--loadPostsSelected
);
610 color: var
(--loadPostsSelectedText
);
617 filter: var
(--icon-filter
);
621 .status-actions .fa-icon {
625 .reply-to-link .fa-icon {
626 transform: scale
(-1, 1);
629 @media (max-width: 800px) {
644 img:not
(.u-photo
, .fa-icon
) {
648 vertical-align: middle
;
651 .username img:not(.u-photo) {