Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F41666638
static-fe.css
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Award Token
Flag For Later
Size
12 KB
Referenced Files
None
Subscribers
None
static-fe.css
View Options
/* pleroma-light and pleroma-dark themes from pleroma-fe */
:
root
{
--icon-filter
:
invert
(
38
%
)
sepia
(
11
%
)
saturate
(
209
%
)
hue-rotate
(
179
deg
)
brightness
(
99
%
)
contrast
(
89
%
);
--wallpaper
:
rgba
(
11
,
16
,
23
,
1
);
--alertNeutral
:
rgba
(
185
,
185
,
186
,
0.5
);
--alertNeutralText
:
rgba
(
255
,
255
,
255
,
1
);
--avatarShadow
:
0
px
1
px
8
px
0
px
rgba
(
0
,
0
,
0
,
0.7
);
--loadPostsSelected
:
rgba
(
23
,
34
,
46
,
1
);
--loadPostsSelectedText
:
rgba
(
185
,
185
,
186
,
1
);
--profileBg
:
rgba
(
7
,
12
,
17
,
1
);
--profileTint
:
rgba
(
15
,
22
,
30
,
0.5
);
--btnText
:
rgba
(
185
,
185
,
186
,
1
);
--btn
:
rgba
(
21
,
30
,
43
,
1
);
--btnShadow
:
0
px
0
px
2
px
0
px
rgba
(
0
,
0
,
0
,
1
),
0
px
1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.2
)
inset
,
0
px
-1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
inset
;
--btnHoverShadow
:
0
px
0
px
1
px
2
px
rgba
(
185
,
185
,
186
,
0.4
)
inset
,
0
px
1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.2
)
inset
,
0
px
-1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
inset
;
--lightText
:
rgba
(
236
,
236
,
236
,
1
);
--panelShadow
:
0
px
0
px
3
px
0
px
rgba
(
0
,
0
,
0
,
0.5
),
0
px
4
px
6
px
3
px
rgba
(
0
,
0
,
0
,
0.3
);
--panelHeaderShadow
:
0
px
1
px
3
px
0
px
rgba
(
0
,
0
,
0
,
0.4
),
0
px
1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.2
)
inset
;
--topBar
:
rgba
(
21
,
30
,
43
,
1
);
--topBarText
:
rgba
(
159
,
159
,
161
,
1
);
--topBarShadow
:
0
px
1
px
4
px
0
px
rgba
(
0
,
0
,
0
,
0.4
),
0
px
2
px
7
px
0
px
rgba
(
0
,
0
,
0
,
0.3
);
--underlay
:
rgba
(
9
,
14
,
20
,
0.6
);
--background
:
rgba
(
15
,
22
,
30
,
1
);
--faint
:
rgba
(
185
,
185
,
186
,
0.5
);
--selectedPost
:
rgba
(
23
,
34
,
46
,
1
);
--link
:
rgba
(
226
,
177
,
136
,
1
);
--text
:
rgba
(
185
,
185
,
186
,
1
);
--border
:
rgba
(
26
,
37
,
53
,
1
);
--poll
:
rgba
(
99
,
84
,
72
,
1
);
}
@
media
(
prefers-color-scheme
:
light
)
{
:
root
{
--icon-filter
:
invert
(
67
%
)
sepia
(
7
%
)
saturate
(
525
%
)
hue-rotate
(
173
deg
)
brightness
(
90
%
)
contrast
(
92
%
);
;
--wallpaper
:
rgba
(
248
,
250
,
252
,
1
);
--alertNeutral
:
rgba
(
48
,
64
,
85
,
0.5
);
--alertNeutralText
:
rgba
(
0
,
0
,
0
,
1
);
--avatarShadow
:
0
px
1
px
8
px
0
px
rgba
(
0
,
0
,
0
,
0.7
);
--loadPostsSelected
:
rgba
(
224
,
233
,
240
,
1
);
--loadPostsSelectedText
:
rgba
(
48
,
64
,
85
,
1
);
--profileBg
:
rgba
(
128
,
137
,
146
,
1
);
--profileTint
:
rgba
(
242
,
246
,
249
,
0.5
);
--btnText
:
rgba
(
48
,
64
,
85
,
1
);
--btn
:
rgba
(
214
,
223
,
237
,
1
);
--btnShadow
:
0
px
0
px
2
px
0
px
rgba
(
0
,
0
,
0
,
0.2
),
0
px
1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.5
)
inset
,
0
px
-1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
inset
;
--btnHoverShadow
:
0
px
0
px
2
px
0
px
rgba
(
0
,
0
,
0
,
0.2
),
0
px
0
px
1
px
2
px
rgba
(
255
,
195
,
159
,
1
)
inset
,
0
px
-1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
inset
;
--lightText
:
rgba
(
11
,
14
,
19
,
1
);
--panelShadow
:
0
px
1
px
3
px
0
px
rgba
(
0
,
0
,
0
,
0.5
),
0
px
3
px
6
px
1
px
rgba
(
0
,
0
,
0
,
0.2
);
--panelHeaderShadow
:
0
px
1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.5
)
inset
,
0
px
1
px
3
px
0
px
rgba
(
0
,
0
,
0
,
0.3
);
--topBar
:
rgba
(
214
,
223
,
237
,
1
);
--topBarText
:
rgba
(
48
,
64
,
85
,
1
);
--topBarShadow
:
0
px
0
px
4
px
0
px
rgba
(
0
,
0
,
0
,
0.6
);
--underlay
:
rgba
(
93
,
96
,
134
,
0.4
);
--background
:
rgba
(
242
,
246
,
249
,
1
);
--faint
:
rgba
(
48
,
64
,
85
,
0.5
);
--selectedPost
:
rgba
(
224
,
233
,
240
,
1
);
--link
:
rgba
(
245
,
91
,
27
,
1
);
--text
:
rgba
(
48
,
64
,
85
,
1
);
--border
:
rgba
(
216
,
230
,
249
,
1
);
--poll
:
rgba
(
243
,
184
,
160
,
1
);
}
}
html
{
height
:
100
%
;
overflow-y
:
auto
;
}
body
{
overflow
:
auto
;
margin
:
0
;
height
:
100
%
;
font-family
:
sans-serif
;
color
:
var
(
--text
);
}
.
background-image
{
position
:
fixed
;
height
:
100
%
;
top
:
3.5
em
;
z-index
:
-1000
;
left
:
0
;
right
:
-20
px
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-color
:
var
(
--wallpaper
);
background-image
:
var
(
--background-image
);
background-position
:
50
%
;
}
a
{
text-decoration
:
none
;
color
:
var
(
--link
);
}
nav
{
position
:
sticky
;
top
:
0
;
width
:
100
%
;
height
:
3.5
em
;
background-color
:
var
(
--topBar
);
box-shadow
:
var
(
--topBarShadow
);
z-index
:
2000
;
}
.
inner-nav
{
padding
:
0
1.2
em
;
margin
:
auto
;
max-width
:
1110
px
;
}
.
inner-nav
a
{
line-height
:
3.5
em
;
color
:
var
(
--topBarText
);
}
.
inner-nav
img
{
height
:
28
px
;
vertical-align
:
middle
;
padding-right
:
5
px
}
body
>
.
container
{
display
:
grid
;
grid-template-columns
:
minmax
(
25
em
,
45
em
)
25
em
;
grid-template-areas
:
"content sidebar"
;
height
:
calc
(
100
vh
-
3.5
em
);
justify-content
:
center
;
}
.
underlay
{
grid-column-start
:
1
;
grid-column-end
:
span
2
;
grid-row-start
:
1
;
grid-row-end
:
1
;
background-color
:
var
(
--underlay
);
z-index
:
-1000
;
}
.
column
{
padding
:
1
em
;
margin
:
-0.5
em
;
}
.
panel
{
background-color
:
var
(
--background
);
border-radius
:
3
px
;
box-shadow
:
var
(
--panelShadow
);
}
.
panel-heading
{
background-color
:
var
(
--topBar
);
font-size
:
1.3
em
;
padding
:
0.6
em
;
border-radius
:
3
px
3
px
0
0
;
box-shadow
:
var
(
--panelHeaderShadow
);
}
.
panel-content
{
padding
:
1
em
;
}
.
about-content
{
padding
:
0.6
em
;
}
.
main
{
grid-area
:
content
;
position
:
relative
;
}
.
sidebar
{
grid-area
:
sidebar
;
padding-left
:
0.5
em
;
}
.
column
.
flex
{
grid-column-end
:
sidebar-end
;
}
.
scopes-input
{
display
:
flex
;
flex-direction
:
column
;
margin
:
1
em
0
;
color
:
var
(
--muted-text-color
);
}
.
status-container
,
.
repeat-header
,
.
user-card
{
display
:
flex
;
padding
:
0.75
em
;
}
.
left-side
{
margin-right
:
0.75
em
;
}
.
right-side
{
flex
:
1
;
min-width
:
0
;
}
.
repeat-header
{
padding
:
0.4
em
0.75
em
;
margin-bottom
:
-0.75
em
;
}
.
repeat-header
.
right-side
{
color
:
var
(
--faint
);
}
.
repeat-header
.
u-photo
{
height
:
20
px
;
width
:
20
px
;
margin-left
:
28
px
;
}
.
status-heading
{
margin-bottom
:
0.5
em
;
line-height
:
1.3
;
}
.
status-heading
a
{
display
:
inline-block
;
word-break
:
break-all
;
}
.
heading-left
{
display
:
flex
;
flex
:
1
;
overflow
:
hidden
;
}
.
heading-right
{
display
:
flex
;
align-items
:
center
;
}
.
heading-name-row
.
account-name
{
min-width
:
1.6
em
;
margin-right
:
0.4
em
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
flex
:
1
1
0
;
}
.
heading-name-row
.
username
,
.
repeat-header
.
username
{
white-space
:
nowrap
;
overflow
:
hidden
;
max-width
:
85
%
;
font-weight
:
bold
;
flex-shrink
:
1
;
margin
:
0
;
margin-right
:
0.4
em
;
text-overflow
:
ellipsis
;
}
.
heading-name-row
{
display
:
flex
;
justify-content
:
space-between
;
}
.
heading-edited-row
,
.
heading-reply-row
{
font-size
:
0.85
em
;
margin-top
:
0.2
em
;
}
.
reply-to-link
{
color
:
var
(
--faint
);
}
.
reply-to-link
:
hover
{
text-decoration
:
underline
;
}
#
selected
{
background-color
:
var
(
--selectedPost
);
}
.
timeago
{
color
:
var
(
--faint
);
}
#
selected
.
timeago
{
color
:
var
(
--text
);
}
.
timeago
:
hover
{
text-decoration
:
underline
;
}
.
h-card
{
min-height
:
48
px
;
margin-bottom
:
8
px
;
}
header
a
,
.
h-card
a
{
text-decoration
:
none
;
}
header
a
:
hover
,
.
h-card
a
:
hover
{
text-decoration
:
underline
;
}
.
attachments
{
margin-top
:
0.5
em
;
flex-direction
:
row
;
display
:
flex
;
flex-wrap
:
nowrap
;
align-content
:
stretch
;
max-height
:
24
em
;
}
.
attachment
{
border
:
1
px
solid
var
(
--border
);
border-radius
:
3
px
;
display
:
flex
;
flex-grow
:
1
;
justify-content
:
center
;
position
:
relative
;
min-width
:
0
;
}
.
attachment
>*
{
width
:
100
%
;
object-fit
:
contain
;
}
.
attachment
:
not
(
:
last-child
)
{
margin-right
:
0.5
em
;
}
.
nsfw-banner
{
position
:
absolute
;
height
:
100
%
;
display
:
flex
;
align-items
:
center
;
}
.
nsfw-banner
div
{
width
:
100
%
;
text-align
:
center
;
}
.
nsfw-banner
:
not
(
:
hover
)
{
background-color
:
var
(
--background
);
}
.
nsfw-banner
:
hover
div
{
display
:
none
;
}
.
poll-option
{
position
:
relative
;
display
:
flex
;
margin
:
0.75
em
0.5
em
;
padding
:
0.1
em
0.25
em
;
word-break
:
break-word
;
z-index
:
1
;
}
.
poll-option
.
percentage
{
width
:
3.5
em
;
flex-shrink
:
0
;
}
.
poll-option
.
fill
{
height
:
100
%
;
position
:
absolute
;
background-color
:
var
(
--poll
);
border-radius
:
3
px
;
top
:
0
;
left
:
0
;
z-index
:
-1
;
}
.
status-actions
{
position
:
relative
;
width
:
100
%
;
display
:
flex
;
margin-top
:
0.75
em
;
}
.
status-actions
>*
{
max-width
:
4
em
;
flex
:
1
;
display
:
flex
;
}
.
status-summary
{
display
:
block
;
font-style
:
italic
;
padding-bottom
:
0.5
em
;
margin-bottom
:
0.5
em
;
border-style
:
solid
;
border-width
:
0
0
1
px
0
;
border-color
:
var
(
--border
,
#222
);
}
summary
{
text-align
:
center
;
color
:
var
(
--link
);
cursor
:
pointer
;
}
.
status-body
{
word-wrap
:
break-word
;
word-break
:
break-word
;
line-height
:
1.4
;
}
.
user-info
{
padding
:
0.5
em
26
px
;
}
.
user-info
.
container
{
padding
:
18
px
0
6
px
0
;
display
:
flex
;
align-items
:
flex-start
;
max-height
:
56
px
;
}
.
user-info
a
{
color
:
var
(
--lightText
);
}
.
user-info
.
avatar
img
{
height
:
56
px
;
width
:
56
px
;
}
.
avatar
img
{
border-radius
:
3
px
;
box-shadow
:
var
(
--avatarShadow
);
}
.
user-summary
{
display
:
block
;
margin-left
:
0.6
em
;
text-align
:
left
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
flex
:
1
1
0
;
z-index
:
1
;
line-height
:
2
em
;
color
:
var
(
--lightText
);
}
.
button-default
{
user-select
:
none
;
color
:
var
(
--btnText
);
background-color
:
var
(
--btn
);
border
:
none
;
border-radius
:
4
px
;
box-shadow
:
var
(
--btnShadow
);
font-size
:
1
em
;
min-height
:
2
em
;
}
.
button-default
:
hover
{
box-shadow
:
var
(
--btnHoverShadow
);
cursor
:
pointer
;
}
.
user-bio
{
text-align
:
center
;
display
:
block
;
line-height
:
1.3
;
padding
:
1
em
;
margin
:
0
;
}
.
user-banner
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background-image
:
linear-gradient
(
to
bottom
,
var
(
--profileTint
),
var
(
--profileTint
)),
var
(
--user-banner
);
background-size
:
cover
;
background-color
:
var
(
--profileBg
);
-webkit-
mask
:
linear-gradient
(
to
top
,
white
,
transparent
)
bottom
no-repeat
,
linear-gradient
(
to
top
,
white
,
white
);
-webkit-
mask-composite
:
xor
;
-webkit-
mask-size
:
100
%
60
%
;
z-index
:
-2
;
}
.
user-header
{
position
:
relative
;
z-index
:
1
;
}
.
user-role
{
color
:
var
(
--alertNeutralText
);
background-color
:
var
(
--alertNeutral
);
margin
:
0
0.35
em
;
padding
:
0
0.25
em
;
border-radius
:
2
px
;
}
.
user-profile-fields
{
margin
:
0
0.5
em
;
}
.
user-profile-field
{
display
:
flex
;
margin
:
0.25
em
;
border
:
1
px
solid
var
(
--border
,
#222
);
border-radius
:
3
px
;
line-height
:
1.3
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
;
}
.
user-profile-field
dt
{
padding
:
0.5
em
1.5
em
;
box-sizing
:
border-box
;
flex
:
0
1
30
%
;
font-weight
:
500
;
color
:
var
(
--lightText
);
border-right
:
1
px
solid
var
(
--border
);
text-align
:
right
;
}
.
user-profile-field
dd
{
padding
:
0.5
em
1.5
em
;
box-sizing
:
border-box
;
flex
:
1
1
30
%
;
margin
:
0
0
0
0.25
em
;
}
.
user-counts
{
display
:
flex
;
line-height
:
1
em
;
padding
:
0.5
em
1.5
em
0
1.5
em
;
text-align
:
center
;
justify-content
:
space-between
;
color
:
var
(
--lightText
);
flex-wrap
:
wrap
;
}
.
user-count
{
flex
:
1
0
auto
;
padding
:
0.5
em
0
;
margin
:
0
0.5
em
;
}
.
user-count
h5
{
font-size
:
1
em
;
font-weight
:
bolder
;
margin
:
0
0
0.25
em
;
}
.
tab-switcher
{
display
:
flex
;
padding-top
:
5
px
;
overflow-x
:
auto
;
overflow-y
:
hidden
;
border-bottom
:
1
px
solid
var
(
--border
);
}
.
tab-switcher
::
before
,
.
tab-switcher
::
after
{
flex
:
1
1
auto
;
content
:
''
;
}
.
tab
{
flex
:
0
0
auto
;
padding
:
6
px
1
em
;
border-bottom-left-radius
:
0
;
border-bottom-right-radius
:
0
;
}
.
tab
.
active
{
background
:
transparent
;
}
.
profile
.
status-container
{
border-bottom
:
1
px
solid
var
(
--border
);
}
.
bottom-line
{
display
:
flex
;
}
.
load-posts
{
display
:
block
;
box-sizing
:
border-box
;
height
:
3.5
em
;
line-height
:
3.5
em
;
padding
:
0
1
em
;
width
:
100
%
;
text-align
:
center
;
}
.
load-posts
:
hover
{
background-color
:
var
(
--loadPostsSelected
);
color
:
var
(
--loadPostsSelectedText
);
}
.
fa-icon
{
height
:
0.875
em
;
margin
:
0
0.3
em
;
filter
:
var
(
--icon-filter
);
align-self
:
center
;
}
.
status-actions
.
fa-icon
{
height
:
1.1
em
;
}
.
reply-to-link
.
fa-icon
{
transform
:
scale
(
-1
,
1
);
}
@
media
(
max-width
:
800px
)
{
body
>
.
container
{
display
:
block
;
}
.
column
{
padding
:
0
;
margin
:
0
;
}
.
sidebar
{
display
:
none
;
}
}
img
:
not
(
.
u-photo
,
.
fa-icon
)
{
width
:
32
px
;
height
:
32
px
;
padding
:
0
;
vertical-align
:
middle
;
}
.
username
img
:
not
(
.
u-photo
)
{
width
:
16
px
;
height
:
16
px
;
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sun, Feb 15, 5:45 AM (16 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1088800
Default Alt Text
static-fe.css (12 KB)
Attached To
Mode
rPUBE pleroma-upstream
Attached
Detach File
Event Timeline
Log In to Comment