Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F12552354
App.scss
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Award Token
Flag For Later
Size
14 KB
Referenced Files
None
Subscribers
None
App.scss
View Options
@
import
'./_variables.scss'
;
#
app
{
min-height
:
100
vh
;
max-width
:
100
%
;
overflow
:
hidden
;
}
.
app-bg-wrapper
{
position
:
fixed
;
z-index
:
-1
;
height
:
100
%
;
width
:
100
%
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
0
50
%
;
}
i
{
user-select
:
none
;
}
h4
{
margin
:
0
;
}
#
content
{
box-sizing
:
border-box
;
padding-top
:
60
px
;
margin
:
auto
;
min-height
:
100
vh
;
max-width
:
980
px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.15
);
align-content
:
flex-start
;
}
.
text-center
{
text-align
:
center
;
}
body
{
font-family
:
sans-serif
;
font-family
:
var
(
--interfaceFont
,
sans-serif
);
font-size
:
14
px
;
margin
:
0
;
color
:
$
fallback--text
;
color
:
var
(
--text
,
$
fallback
--text
);
max-width
:
100
vw
;
overflow-x
:
hidden
;
}
a
{
text-decoration
:
none
;
color
:
$
fallback--link
;
color
:
var
(
--link
,
$
fallback
--link
);
}
button
{
user-select
:
none
;
color
:
$
fallback--text
;
color
:
var
(
--btnText
,
$
fallback
--text
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--btn
,
$
fallback
--fg
);
border
:
none
;
border-radius
:
$
fallback--btnRadius
;
border-radius
:
var
(
--btnRadius
,
$
fallback
--btnRadius
);
cursor
:
pointer
;
box-shadow
:
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
;
box-shadow
:
var
(
--buttonShadow
);
font-size
:
14
px
;
font-family
:
sans-serif
;
font-family
:
var
(
--interfaceFont
,
sans-serif
);
i[class*=icon-]
{
color
:
$
fallback--text
;
color
:
var
(
--btnText
,
$
fallback
--text
);
}
&
::
-moz-focus-inner
{
border
:
none
;
}
&
:
hover
{
box-shadow
:
0
px
0
px
4
px
rgba
(
255
,
255
,
255
,
0.3
);
box-shadow
:
var
(
--buttonHoverShadow
);
}
&
:
active
{
box-shadow
:
0
px
0
px
4
px
0
px
rgba
(
255
,
255
,
255
,
0.3
),
0
px
1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
inset
,
0
px
-1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.2
)
inset
;
box-shadow
:
var
(
--buttonPressedShadow
);
}
&
:
disabled
{
cursor
:
not-allowed
;
opacity
:
0.5
;
}
&
.
pressed
{
color
:
$
fallback--faint
;
color
:
var
(
--faint
,
$
fallback
--faint
);
background-color
:
$
fallback--bg
;
background-color
:
var
(
--bg
,
$
fallback
--bg
)
}
&
.
danger
{
//
TODO
:
add
better
color
variable
color
:
$
fallback--text
;
color
:
var
(
--alertErrorPanelText
,
$
fallback
--text
);
background-color
:
$
fallback--alertError
;
background-color
:
var
(
--alertError
,
$
fallback
--alertError
);
}
}
label
.
select
{
padding
:
0
;
}
input
,
textarea
,
.
select
{
border
:
none
;
border-radius
:
$
fallback--inputRadius
;
border-radius
:
var
(
--inputRadius
,
$
fallback
--inputRadius
);
box-shadow
:
0
px
1
px
0
px
0
px
rgba
(
0
,
0
,
0
,
0.2
)
inset
,
0
px
-1
px
0
px
0
px
rgba
(
255
,
255
,
255
,
0.2
)
inset
,
0
px
0
px
2
px
0
px
rgba
(
0
,
0
,
0
,
1
)
inset
;
box-shadow
:
var
(
--inputShadow
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--input
,
$
fallback
--fg
);
color
:
$
fallback--lightText
;
color
:
var
(
--inputText
,
$
fallback
--lightText
);
font-family
:
sans-serif
;
font-family
:
var
(
--inputFont
,
sans-serif
);
font-size
:
14
px
;
padding
:
8
px
.5
em
;
box-sizing
:
border-box
;
display
:
inline-block
;
position
:
relative
;
height
:
28
px
;
line-height
:
16
px
;
hyphens
:
none
;
&:disabled,
&[disabled=disabled]
{
cursor
:
not-allowed
;
opacity
:
0.5
;
}
.
icon-down-open
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
right
:
5
px
;
height
:
100
%
;
color
:
$
fallback--text
;
color
:
var
(
--text
,
$
fallback
--text
);
line-height
:
28
px
;
z-index
:
0
;
pointer-events
:
none
;
}
select
{
-webkit-
appearance
:
none
;
-moz-
appearance
:
none
;
appearance
:
none
;
background
:
transparent
;
border
:
none
;
color
:
$
fallback--text
;
color
:
var
(
--inputText
,
--text
,
$
fallback
--text
);
margin
:
0
;
padding
:
0
2
em
0
.2
em
;
font-family
:
sans-serif
;
font-family
:
var
(
--inputFont
,
sans-serif
);
font-size
:
14
px
;
width
:
100
%
;
z-index
:
1
;
height
:
28
px
;
line-height
:
16
px
;
}
&[
type
=
range
]
{
background
:
none
;
border
:
none
;
margin
:
0
;
box-shadow
:
none
;
flex
:
1
;
}
&[
type
=
radio
],
&[
type
=
checkbox
]
{
display
:
none
;
&:checked
+
label
:
:
before
{
color
:
$
fallback--text
;
color
:
var
(
--text
,
$
fallback
--text
);
}
&
:
disabled
{
&,
&
+
label,
&
+
label
:
:
before
{
opacity
:
.5
;
}
}
+
label
::
before
{
display
:
inline-block
;
content
:
'✔'
;
transition
:
color
200
ms
;
width
:
1.1
em
;
height
:
1.1
em
;
border-radius
:
$
fallback--checkboxRadius
;
border-radius
:
var
(
--checkboxRadius
,
$
fallback
--checkboxRadius
);
box-shadow
:
0
px
0
px
2
px
black
inset
;
box-shadow
:
var
(
--inputShadow
);
margin-right
:
.5
em
;
background-color
:
$
fallback--fg
;
background-color
:
var
(
--input
,
$
fallback
--fg
);
vertical-align
:
top
;
text-align
:
center
;
line-height
:
1.1
em
;
font-size
:
1.1
em
;
box-sizing
:
border-box
;
color
:
transparent
;
overflow
:
hidden
;
box-sizing
:
border-box
;
}
}
}
option
{
color
:
$
fallback--text
;
color
:
var
(
--text
,
$
fallback
--text
);
background-color
:
$
fallback--bg
;
background-color
:
var
(
--bg
,
$
fallback
--bg
);
}
i
[
class
*=
icon-
]
{
color
:
$
fallback--icon
;
color
:
var
(
--icon
,
$
fallback
--icon
)
}
.
container
{
display
:
flex
;
flex-wrap
:
wrap
;
margin
:
0
;
padding
:
0
10
px
0
10
px
;
}
.
item
{
flex
:
1
;
line-height
:
50
px
;
height
:
50
px
;
overflow
:
hidden
;
display
:
flex
;
flex-wrap
:
wrap
;
.nav-icon
{
margin-left
:
0.4
em
;
}
&
.
right
{
justify-content
:
flex-end
;
}
}
.
auto-size
{
flex
:
1
}
.
nav-bar
{
padding
:
0
;
width
:
100
%
;
align-items
:
center
;
position
:
fixed
;
height
:
50
px
;
.logo
{
display
:
flex
;
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
align-items
:
stretch
;
justify-content
:
center
;
flex
:
0
0
auto
;
z-index
:
-1
;
transition
:
opacity
;
transition-timing-function
:
ease-out
;
transition-duration
:
100
ms
;
.mask
{
mask-repeat
:
no-repeat
;
mask-position
:
center
;
mask-size
:
contain
;
background-color
:
$
fallback--fg
;
background-color
:
var
(
--topBarText
,
$
fallback
--fg
);
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
}
img
{
height
:
100
%
;
object-fit
:
contain
;
display
:
block
;
flex
:
0
;
}
}
.
inner-nav
{
margin
:
auto
;
box-sizing
:
border-box
;
padding-left
:
10
px
;
padding-right
:
10
px
;
display
:
flex
;
align-items
:
center
;
flex-basis
:
970
px
;
height
:
50
px
;
a,
a
i
{
color
:
$
fallback--link
;
color
:
var
(
--topBarLink
,
$
fallback
--link
);
}
}
}
main-router
{
flex
:
1
;
}
.
status
.
compact
{
color
:
rgba
(
0
,
0
,
0
,
0.42
);
font-weight
:
300
;
p
{
margin
:
0
;
font-size
:
0.8
em
}
}
/* Panel */
.
panel
{
display
:
flex
;
position
:
relative
;
flex-direction
:
column
;
margin
:
0.5
em
;
background-color
:
$
fallback--bg
;
background-color
:
var
(
--bg
,
$
fallback
--bg
);
&::after,
&
{
border-radius
:
$
fallback--panelRadius
;
border-radius
:
var
(
--panelRadius
,
$
fallback
--panelRadius
);
}
&
::
after
{
content
:
''
;
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
pointer-events
:
none
;
box-shadow
:
1
px
1
px
4
px
rgba
(
0
,
0
,
0
,
.6
);
box-shadow
:
var
(
--panelShadow
);
}
}
.
panel-body
:
empty
::
before
{
content
:
"¯\\_(ツ)_/¯"
;
//
Could
use
words
but
it'd
require
translations
display
:
block
;
margin
:
1
em
;
text-align
:
center
;
}
.
panel-heading
{
display
:
flex
;
border-radius
:
$
fallback--panelRadius
$
fallback--panelRadius
0
0
;
border-radius
:
var
(
--panelRadius
,
$
fallback
--panelRadius
)
var
(
--panelRadius
,
$
fallback
--panelRadius
)
0
0
;
background-size
:
cover
;
padding
:
.6
em
.6
em
;
text-align
:
left
;
line-height
:
28
px
;
color
:
var
(
--panelText
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--panel
,
$
fallback
--fg
);
align-items
:
baseline
;
box-shadow
:
var
(
--panelHeaderShadow
);
.title
{
flex
:
1
0
auto
;
font-size
:
1.3
em
;
}
.
faint
{
background-color
:
transparent
;
color
:
$
fallback--faint
;
color
:
var
(
--panelFaint
,
$
fallback
--faint
);
}
.
alert
{
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow-x
:
hidden
;
}
button
{
flex-shrink
:
0
;
}
button
,
.
alert
{
//
height
:
100
%
;
line-height
:
21
px
;
min-height
:
0
;
box-sizing
:
border-box
;
margin
:
0
;
margin-left
:
.25
em
;
min-width
:
1
px
;
align-self
:
stretch
;
}
a
{
color
:
$
fallback--link
;
color
:
var
(
--panelLink
,
$
fallback
--link
)
}
}
.
panel-heading
.
stub
{
border-radius
:
$
fallback--panelRadius
;
border-radius
:
var
(
--panelRadius
,
$
fallback
--panelRadius
);
}
.
panel-footer
{
border-radius
:
0
0
$
fallback--panelRadius
$
fallback--panelRadius
;
border-radius
:
0
0
var
(
--panelRadius
,
$
fallback
--panelRadius
)
var
(
--panelRadius
,
$
fallback
--panelRadius
);
.faint
{
color
:
$
fallback--faint
;
color
:
var
(
--panelFaint
,
$
fallback
--faint
);
}
a
{
color
:
$
fallback--link
;
color
:
var
(
--panelLink
,
$
fallback
--link
)
}
}
.
panel-body
>
p
{
line-height
:
18
px
;
padding
:
1
em
;
margin
:
0
;
}
.
container
>
*
{
min-width
:
0
px
;
}
.
fa
{
color
:
grey
;
}
nav
{
z-index
:
1000
;
color
:
var
(
--topBarText
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--topBar
,
$
fallback
--fg
);
color
:
$
fallback--faint
;
color
:
var
(
--faint
,
$
fallback
--faint
);
box-shadow
:
0
px
0
px
4
px
rgba
(
0
,
0
,
0
,
.6
);
box-shadow
:
var
(
--topBarShadow
);
.back-button
{
display
:
block
;
max-width
:
99
px
;
transition-property
:
opacity
,
max-width
;
transition-duration
:
300
ms
;
transition-timing-function
:
ease-out
;
i
{
margin
:
0
1
em
;
}
&
.
hidden
{
opacity
:
0
;
max-width
:
5
px
;
}
}
}
.
fade-enter-active
,
.
fade-leave-active
{
transition
:
opacity
.2
s
}
.
fade-enter
,
.
fade-leave-active
{
opacity
:
0
}
.
main
{
flex-basis
:
50
%
;
flex-grow
:
1
;
flex-shrink
:
1
;
}
.
sidebar-bounds
{
flex
:
0
;
flex-basis
:
35
%
;
}
.
sidebar-flexer
{
flex
:
1
;
flex-basis
:
345
px
;
width
:
365
px
;
}
.
mobile-shown
{
display
:
none
;
}
@
media
all
and
(
min-width
:
800px
)
{
body
{
overflow-y
:
scroll
;
}
nav
{
.back-button
{
display
:
none
;
}
}
.
sidebar-bounds
{
overflow
:
hidden
;
max-height
:
100
vh
;
width
:
345
px
;
position
:
fixed
;
margin-top
:
-10
px
;
.sidebar-scroller
{
height
:
96
vh
;
width
:
365
px
;
padding-top
:
10
px
;
padding-right
:
50
px
;
overflow-x
:
hidden
;
overflow-y
:
scroll
;
}
.
sidebar
{
width
:
345
px
;
}
}
.
sidebar-flexer
{
max-height
:
96
vh
;
flex-shrink
:
0
;
flex-grow
:
0
;
}
}
.
badge
{
display
:
inline-block
;
border-radius
:
99
px
;
min-width
:
22
px
;
max-width
:
22
px
;
min-height
:
22
px
;
max-height
:
22
px
;
font-size
:
15
px
;
line-height
:
22
px
;
text-align
:
center
;
vertical-align
:
middle
;
white-space
:
nowrap
;
padding
:
0
;
&.badge-notification
{
background-color
:
$
fallback--cRed
;
background-color
:
var
(
--badgeNotification
,
$
fallback
--cRed
);
color
:
white
;
color
:
var
(
--badgeNotificationText
,
white
);
}
}
.
alert
{
margin
:
0.35
em
;
padding
:
0.25
em
;
border-radius
:
$
fallback--tooltipRadius
;
border-radius
:
var
(
--tooltipRadius
,
$
fallback
--tooltipRadius
);
min-height
:
28
px
;
line-height
:
28
px
;
&.error
{
background-color
:
$
fallback--alertError
;
background-color
:
var
(
--alertError
,
$
fallback
--alertError
);
color
:
$
fallback--text
;
color
:
var
(
--alertErrorText
,
$
fallback
--text
);
.panel-heading
&
{
color
:
$
fallback--text
;
color
:
var
(
--alertErrorPanelText
,
$
fallback
--text
);
}
}
}
.
faint
{
color
:
$
fallback--faint
;
color
:
var
(
--faint
,
$
fallback
--faint
);
}
.
faint-link
{
color
:
$
fallback--faint
;
color
:
var
(
--faint
,
$
fallback
--faint
);
&:hover
{
text-decoration
:
underline
;
}
}
@
media
all
and
(
min-width
:
800px
)
{
.
logo
{
opacity
:
1
!important
;
}
}
.
item
.
right
{
text-align
:
right
;
}
.
visibility-tray
{
font-size
:
1.2
em
;
padding
:
3
px
;
cursor
:
pointer
;
.selected
{
color
:
$
fallback--lightText
;
color
:
var
(
--lightText
,
$
fallback
--lightText
);
}
div
{
padding-top
:
5
px
;
}
}
.
visibility-notice
{
padding
:
.5
em
;
border
:
1
px
solid
$
fallback--faint
;
border
:
1
px
solid
var
(
--faint
,
$
fallback
--faint
);
border-radius
:
$
fallback--inputRadius
;
border-radius
:
var
(
--inputRadius
,
$
fallback
--inputRadius
);
}
@
keyframes
modal-background-fadein
{
from
{
background-color
:
rgba
(
0
,
0
,
0
,
0
);
}
to
{
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
}
.
modal-view
{
z-index
:
1000
;
position
:
fixed
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
overflow
:
auto
;
animation-duration
:
0.2
s
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
animation-name
:
modal-background-fadein
;
}
.
button-icon
{
font-size
:
1.2
em
;
}
@
keyframes
shakeError
{
0
%
{
transform
:
translateX
(
0
);
}
15
%
{
transform
:
translateX
(
0.375
rem
);
}
30
%
{
transform
:
translateX
(
-0
.375
rem
);
}
45
%
{
transform
:
translateX
(
0.375
rem
);
}
60
%
{
transform
:
translateX
(
-0
.375
rem
);
}
75
%
{
transform
:
translateX
(
0.375
rem
);
}
90
%
{
transform
:
translateX
(
-0
.375
rem
);
}
100
%
{
transform
:
translateX
(
0
);
}
}
@
media
all
and
(
max-width
:
800px
)
{
.
mobile-hidden
{
display
:
none
;
}
.
panel-switcher
{
display
:
flex
;
}
.
container
{
padding
:
0
;
}
.
panel
{
margin
:
0.5
em
0
0.5
em
0
;
}
.
menu-button
{
display
:
block
;
margin-right
:
0.8
em
;
}
}
.
login-hint
{
text-align
:
center
;
@media
all
and
(
min-width
:
801
px
)
{
display
:
none
;
}
a
{
display
:
inline-block
;
padding
:
1
em
0
px
;
width
:
100
%
;
}
}
.
btn
.
btn-default
{
min-height
:
28
px
;
}
.
autocomplete
{
&-panel
{
position
:
relative
;
&-body
{
margin
:
0
0.5
em
0
0.5
em
;
border-radius
:
$
fallback--tooltipRadius
;
border-radius
:
var
(
--tooltipRadius
,
$
fallback
--tooltipRadius
);
position
:
absolute
;
z-index
:
1
;
box-shadow
:
1
px
2
px
4
px
rgba
(
0
,
0
,
0
,
0.5
);
//
this
doesn't
match
original
but
i
don't
care,
making
it
uniform.
box-shadow
:
var
(
--popupShadow
);
min-width
:
75
%
;
background
:
$
fallback--bg
;
background
:
var
(
--bg
,
$
fallback
--bg
);
color
:
$
fallback--lightText
;
color
:
var
(
--lightText
,
$
fallback
--lightText
);
}
}
&
-item
{
cursor
:
pointer
;
padding
:
0.2
em
0.4
em
0.2
em
0.4
em
;
border-bottom
:
1
px
solid
rgba
(
0
,
0
,
0
,
0.4
);
display
:
flex
;
img
{
width
:
24
px
;
height
:
24
px
;
object-fit
:
contain
;
}
span
{
line-height
:
24
px
;
margin
:
0
0.1
em
0
0.2
em
;
}
small
{
margin-left
:
.5
em
;
color
:
$
fallback--faint
;
color
:
var
(
--faint
,
$
fallback
--faint
);
}
&
.
highlighted
{
background-color
:
$
fallback--fg
;
background-color
:
var
(
--lightBg
,
$
fallback
--fg
);
}
}
}
File Metadata
Details
Attached
Mime Type
text/x-asm
Expires
Sat, Nov 15, 12:23 AM (1 d, 10 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
588241
Default Alt Text
App.scss (14 KB)
Attached To
Mode
rPUFE pleroma-fe-upstream
Attached
Detach File
Event Timeline
Log In to Comment