Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F12552476
App.scss
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Award Token
Flag For Later
Size
16 KB
Referenced Files
None
Subscribers
None
App.scss
View Options
//
stylelint-disable
rscss
/
class-format
@
import
'./_variables.scss'
;
:
root
{
--navbar-height
:
50
px
;
}
html
{
font-size
:
14
px
;
}
body
{
font-family
:
sans-serif
;
font-family
:
var
(
--interfaceFont
,
sans-serif
);
margin
:
0
;
color
:
$
fallback--text
;
color
:
var
(
--text
,
$
fallback
--text
);
overflow-x
:
hidden
;
-webkit-
font-smoothing
:
antialiased
;
-moz-
osx-font-smoothing
:
grayscale
;
overscroll-behavior-y
:
none
;
&.hidden
{
display
:
none
;
}
}
@
media
(
any-pointer
:
fine
)
{
body
{
background
:
var
(
--bg
);
}
*
{
scrollbar-color
:
var
(
--btn
)
transparent
;
&::
-webkit-
scrollbar
{
background
:
transparent
;
}
&
::
-webkit-scrollbar-button
,
&
::
-webkit-scrollbar-thumb
{
background-color
:
var
(
--btn
);
box-shadow
:
var
(
--buttonShadow
);
border-radius
:
var
(
--btnRadius
);
}
&
::
-webkit-scrollbar-button
{
--___bgPadding
:
2
px
;
color
:
var
(
--btnText
);
background-repeat
:
no-repeat
,
no-repeat
;
&:horizontal
{
background-size
:
50
%
calc
(
50
%
-
var
(
--___bgPadding
)),
50
%
calc
(
50
%
-
var
(
--___bgPadding
));
&:increment
{
background-image
:
linear-gradient
(
45
deg
,
var
(
--btnText
)
50
%
,
transparent
51
%
),
linear-gradient
(
-45deg
,
transparent
50
%
,
var
(
--btnText
)
51
%
);
background-position
:
top
var
(
--___bgPadding
)
left
50
%
,
right
50
%
bottom
var
(
--___bgPadding
);
}
&
:
decrement
{
background-image
:
linear-gradient
(
45
deg
,
transparent
50
%
,
var
(
--btnText
)
51
%
),
linear-gradient
(
-45deg
,
var
(
--btnText
)
50
%
,
transparent
51
%
);
background-position
:
bottom
var
(
--___bgPadding
)
right
50
%
,
left
50
%
top
var
(
--___bgPadding
);
}
}
&
:
vertical
{
background-size
:
calc
(
50
%
-
var
(
--___bgPadding
))
50
%
,
calc
(
50
%
-
var
(
--___bgPadding
))
50
%
;
&:increment
{
background-image
:
linear-gradient
(
-45deg
,
transparent
50
%
,
var
(
--btnText
)
51
%
),
linear-gradient
(
45
deg
,
transparent
50
%
,
var
(
--btnText
)
51
%
);
background-position
:
right
var
(
--___bgPadding
)
top
50
%
,
left
var
(
--___bgPadding
)
top
50
%
;
}
&
:
decrement
{
background-image
:
linear-gradient
(
-45deg
,
var
(
--btnText
)
50
%
,
transparent
51
%
),
linear-gradient
(
45
deg
,
var
(
--btnText
)
50
%
,
transparent
51
%
);
background-position
:
left
var
(
--___bgPadding
)
top
50
%
,
right
var
(
--___bgPadding
)
top
50
%
;
}
}
}
}
}
a
{
text-decoration
:
none
;
color
:
$
fallback--link
;
color
:
var
(
--link
,
$
fallback
--link
);
}
h4
{
margin
:
0
;
}
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
0
4
px
rgba
(
0
,
0
,
0
,
0.6
);
box-shadow
:
var
(
--topBarShadow
);
box-sizing
:
border-box
;
height
:
var
(
--navbar-height
);
position
:
fixed
;
}
#
sidebar
{
grid-area
:
sidebar
;
top
:
var
(
--navbar-height
);
position
:
sticky
;
}
#
main-scroller
{
top
:
var
(
--navbar-height
);
grid-area
:
content
;
position
:
relative
;
}
#
notifs-column
{
grid-area
:
notifs
;
}
.
app-bg-wrapper
{
position
:
fixed
;
height
:
100
%
;
top
:
var
(
--navbar-height
);
z-index
:
-1000
;
left
:
0
;
right
:
-20
px
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-color
:
var
(
--wallpaper
);
background-image
:
var
(
--body-background-image
);
background-position
:
50
%
;
}
.
underlay
{
grid-column-start
:
1
;
grid-column-end
:
span
3
;
grid-row-start
:
1
;
grid-row-end
:
1
;
margin
:
0
calc
(
var
(
--columnGap
)
*
-2
);
padding
:
0
calc
(
var
(
--columnGap
)
*
2
);
pointer-events
:
none
;
background-color
:
rgba
(
0
,
0
,
0
,
0.15
);
background-color
:
var
(
--underlay
,
rgba
(
0
,
0
,
0
,
0.15
));
z-index
:
-2000
;
}
.
app-layout
{
--miniColumn
:
25
em
;
--maxiColumn
:
minmax
(
var
(
--miniColumn
),
45
em
);
--columnGap
:
1
em
;
--status-margin
:
0.75
em
;
position
:
relative
;
display
:
grid
;
grid-template-columns
:
var
(
--miniColumn
)
var
(
--maxiColumn
);
grid-template-areas
:
"sidebar content"
;
grid-template-rows
:
1
fr
;
box-sizing
:
border-box
;
margin
:
0
auto
;
align-content
:
flex-start
;
flex-wrap
:
wrap
;
padding
:
0
10
px
;
justify-content
:
center
;
.column
{
--___columnMargin
:
var
(
--columnGap
);
display
:
grid
;
grid-template-columns
:
100
%
;
box-sizing
:
border-box
;
padding-top
:
10
px
;
grid-row-start
:
1
;
grid-row-end
:
1
;
margin
:
0
calc
(
var
(
--___columnMargin
)
/
2
);
row-gap
:
var
(
--___columnMargin
);
align-content
:
start
;
&.-scrollable
{
--___paddingIncrease
:
calc
(
var
(
--columnGap
)
/
2
);
padding-top
:
10
px
;
position
:
sticky
;
top
:
0
;
max-height
:
calc
(
100
vh
-
var
(
--navbar-height
));
overflow-y
:
auto
;
overflow-x
:
hidden
;
margin-left
:
calc
(
var
(
--___paddingIncrease
)
*
-1
);
padding-left
:
calc
(
var
(
--___paddingIncrease
)
+
var
(
--___columnMargin
)
/
2
);
//
Only
show
custom
scrollbars
on
devices
which
//
have
a
cursor/pointer
to
operate
them
&:not(.-show-scrollbar)
{
scrollbar-width
:
none
;
margin-right
:
calc
(
var
(
--___paddingIncrease
)
*
-1
);
padding-right
:
calc
(
var
(
--___paddingIncrease
)
+
var
(
--___columnMargin
)
/
2
);
&::
-webkit-
scrollbar
{
display
:
block
;
width
:
0
;
}
}
.
panel-heading
.
-sticky
{
top
:
-10
px
;
}
}
}
&
.
-no-sticky-headers
{
.column
{
.panel-heading.-sticky
{
position
:
relative
;
top
:
0
;
}
}
}
.
column-inner
{
display
:
grid
;
grid-template-columns
:
100
%
;
box-sizing
:
border-box
;
row-gap
:
1
em
;
align-content
:
start
;
}
&
.
-reverse
:
not
(
.
-wide
)
:
not
(
.
-mobile
)
{
grid-template-columns
:
var
(
--maxiColumn
)
var
(
--miniColumn
);
grid-template-areas
:
"content sidebar"
;
}
&
.
-wide
{
grid-template-columns
:
var
(
--miniColumn
)
var
(
--maxiColumn
)
var
(
--miniColumn
);
grid-template-areas
:
"sidebar content notifs"
;
&.-reverse
{
grid-template-areas
:
"notifs content sidebar"
;
}
}
&
.
-mobile
{
grid-template-columns
:
100
vw
;
grid-template-areas
:
"content"
;
padding
:
0
;
.column
{
margin
:
0
;
}
.
underlay
,
#
sidebar
,
#
notifs-column
{
display
:
none
;
}
}
}
.
text-center
{
text-align
:
center
;
}
.
button-default
{
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
:
$
fallback--buttonShadow
;
box-shadow
:
var
(
--buttonShadow
);
font-size
:
14
px
;
font-family
:
sans-serif
;
font-family
:
var
(
--interfaceFont
,
sans-serif
);
&.-sublime
{
background
:
transparent
;
}
i
[
class
*=
icon-
],
.
svg-inline--fa
{
color
:
$
fallback--text
;
color
:
var
(
--btnText
,
$
fallback
--text
);
}
&
::
-moz-focus-inner
{
border
:
none
;
}
&
:
hover
{
box-shadow
:
0
0
4
px
rgba
(
255
,
255
,
255
,
0.3
);
box-shadow
:
var
(
--buttonHoverShadow
);
}
&
:
active
{
box-shadow
:
0
0
4
px
0
rgba
(
255
,
255
,
255
,
0.3
),
0
1
px
0
0
rgba
(
0
,
0
,
0
,
0.2
)
inset
,
0
-1
px
0
0
rgba
(
255
,
255
,
255
,
0.2
)
inset
;
box-shadow
:
var
(
--buttonPressedShadow
);
color
:
$
fallback--text
;
color
:
var
(
--btnPressedText
,
$
fallback
--text
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--btnPressed
,
$
fallback
--fg
);
svg,
i
{
color
:
$
fallback--text
;
color
:
var
(
--btnPressedText
,
$
fallback
--text
);
}
}
&
:
disabled
{
cursor
:
not-allowed
;
color
:
$
fallback--text
;
color
:
var
(
--btnDisabledText
,
$
fallback
--text
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--btnDisabled
,
$
fallback
--fg
);
svg,
i
{
color
:
$
fallback--text
;
color
:
var
(
--btnDisabledText
,
$
fallback
--text
);
}
}
&
.
toggled
{
color
:
$
fallback--text
;
color
:
var
(
--btnToggledText
,
$
fallback
--text
);
background-color
:
$
fallback--fg
;
background-color
:
var
(
--btnToggled
,
$
fallback
--fg
);
box-shadow
:
0
0
4
px
0
rgba
(
255
,
255
,
255
,
0.3
),
0
1
px
0
0
rgba
(
0
,
0
,
0
,
0.2
)
inset
,
0
-1
px
0
0
rgba
(
255
,
255
,
255
,
0.2
)
inset
;
box-shadow
:
var
(
--buttonPressedShadow
);
svg,
i
{
color
:
$
fallback--text
;
color
:
var
(
--btnToggledText
,
$
fallback
--text
);
}
}
&
.
danger
{
//
TODO
:
add
better
color
variable
color
:
$
fallback--text
;
color
:
var
(
--alertErrorPanelText
,
$
fallback
--text
);
background-color
:
$
fallback--alertError
;
background-color
:
var
(
--alertError
,
$
fallback
--alertError
);
}
}
.
button-unstyled
{
background
:
none
;
border
:
none
;
outline
:
none
;
display
:
inline
;
text-align
:
initial
;
font-size
:
100
%
;
font-family
:
inherit
;
padding
:
0
;
line-height
:
unset
;
cursor
:
pointer
;
box-sizing
:
content-box
;
color
:
inherit
;
&.-link
{
color
:
$
fallback--link
;
color
:
var
(
--link
,
$
fallback
--link
);
}
&
.
-fullwidth
{
width
:
100
%
;
}
&
.
-hover-highlight
{
&:hover
svg
{
color
:
$
fallback--lightText
;
color
:
var
(
--lightText
,
$
fallback
--lightText
);
}
}
}
input
,
textarea
,
.
input
{
&.unstyled
{
border-radius
:
0
;
background
:
none
;
box-shadow
:
none
;
height
:
unset
;
}
border
:
none
;
border-radius
:
$
fallback--inputRadius
;
border-radius
:
var
(
--inputRadius
,
$
fallback--inputRadius
);
box-shadow
:
0
1px
0
0
rgba
(
0
,
0
,
0
,
0
.
2
)
inset
,
0
-1px
0
0
rgba
(
255
,
255
,
255
,
0
.
2
)
inset
,
0
0
2px
0
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
:
14px
;
margin
:
0
;
box-sizing
:
border-box
;
display
:
inline-block
;
position
:
relative
;
height
:
28px
;
line-height
:
16px
;
hyphens
:
none
;
padding
:
8px
0
.
5em
;
&
:
disabled
,
&[
disabled
=
disabled
],
&
.
disabled
{
cursor
:
not-allowed
;
opacity
:
0.5
;
}
&[
type
=
range
]
{
background
:
none
;
border
:
none
;
margin
:
0
;
box-shadow
:
none
;
flex
:
1
;
}
&[
type
=
radio
]
{
display
:
none
;
&:checked
+
label
:
:
before
{
box-shadow
:
0
0
2
px
black
inset
,
0
0
0
4
px
$
fallback--fg
inset
;
box-shadow
:
var
(
--inputShadow
),
0
0
0
4
px
var
(
--fg
,
$
fallback
--fg
)
inset
;
background-color
:
var
(
--accent
,
$
fallback
--link
);
}
&
:
disabled
{
&,
&
+
label,
&
+
label
:
:
before
{
opacity
:
0.5
;
}
}
+
label
::
before
{
flex-shrink
:
0
;
display
:
inline-block
;
content
:
''
;
transition
:
box-shadow
200
ms
;
width
:
1.1
em
;
height
:
1.1
em
;
border-radius
:
100
%
;
//
Radio
buttons
should
always
be
circle
box-shadow
:
0
0
2
px
black
inset
;
box-shadow
:
var
(
--inputShadow
);
margin-right
:
0.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
;
}
}
&[
type
=
checkbox
]
{
display
:
none
;
&:checked
+
label
:
:
before
{
color
:
$
fallback--text
;
color
:
var
(
--inputText
,
$
fallback
--text
);
}
&
:
disabled
{
&,
&
+
label,
&
+
label
:
:
before
{
opacity
:
0.5
;
}
}
+
label
::
before
{
flex-shrink
:
0
;
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
0
2
px
black
inset
;
box-shadow
:
var
(
--inputShadow
);
margin-right
:
0.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
;
}
}
&
.
resize-height
{
resize
:
vertical
;
}
}
option
{
color
:
$
fallback--text
;
color
:
var
(
--text
,
$
fallback
--text
);
background-color
:
$
fallback--bg
;
background-color
:
var
(
--bg
,
$
fallback
--bg
);
}
.
hide-number-spinner
{
-moz-
appearance
:
textfield
;
&[type=number]::
-webkit-
inner-spin-button,
&[type=number]::
-webkit-
outer-spin-button
{
opacity
:
0
;
display
:
none
;
}
}
i
[
class
*=
icon-
],
.
svg-inline--fa
{
color
:
$
fallback--icon
;
color
:
var
(
--icon
,
$
fallback
--icon
);
}
.
btn-block
{
display
:
block
;
width
:
100
%
;
}
.
btn-group
{
position
:
relative
;
display
:
inline-flex
;
vertical-align
:
middle
;
button
{
position
:
relative
;
flex
:
1
1
auto
;
&:not(:last-child)
{
border-top-right-radius
:
0
;
border-bottom-right-radius
:
0
;
}
&
:
not
(
:
first-child
)
{
border-top-left-radius
:
0
;
border-bottom-left-radius
:
0
;
}
}
}
@
import
'./panel.scss'
;
.
fa
{
color
:
grey
;
}
.
mobile-shown
{
display
:
none
;
}
.
badge
{
box-sizing
:
border-box
;
display
:
inline-block
;
border-radius
:
99
px
;
max-width
:
10
em
;
min-width
:
1.7
em
;
height
:
1.3
em
;
padding
:
0.15
em
0.15
em
;
vertical-align
:
middle
;
font-weight
:
normal
;
font-style
:
normal
;
font-size
:
0.9
em
;
line-height
:
1
;
text-align
:
center
;
white-space
:
nowrap
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
&.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
);
}
}
&
.
warning
{
background-color
:
$
fallback--alertWarning
;
background-color
:
var
(
--alertWarning
,
$
fallback
--alertWarning
);
color
:
$
fallback--text
;
color
:
var
(
--alertWarningText
,
$
fallback
--text
);
.panel-heading
&
{
color
:
$
fallback--text
;
color
:
var
(
--alertWarningPanelText
,
$
fallback
--text
);
}
}
&
.
success
{
background-color
:
var
(
--alertSuccess
,
$
fallback
--alertWarning
);
color
:
var
(
--alertSuccessText
,
$
fallback
--text
);
.panel-heading
&
{
color
:
var
(
--alertSuccessPanelText
,
$
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
;
}
}
.
visibility-notice
{
padding
:
0.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
);
}
.
notice-dismissible
{
padding-right
:
4
rem
;
position
:
relative
;
.dismiss
{
position
:
absolute
;
top
:
0
;
right
:
0
;
padding
:
0.5
em
;
color
:
inherit
;
}
}
.
fa-scale-110
{
&.svg-inline--fa
{
font-size
:
1.1
em
;
}
}
.
fa-old-padding
{
&.svg-inline--fa
{
padding
:
0
0.3
em
;
}
}
.
login-hint
{
text-align
:
center
;
@media
all
and
(
min-width
:
801
px
)
{
display
:
none
;
}
a
{
display
:
inline-block
;
padding
:
1
em
0
;
width
:
100
%
;
}
}
.
btn
.
button-default
{
min-height
:
28
px
;
}
.
new-status-notification
{
position
:
relative
;
font-size
:
1.1
em
;
z-index
:
1
;
flex
:
1
;
}
@
media
all
and
(
min-width
:
800px
)
{
.
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
;
}
}
@
media
all
and
(
max-width
:
800px
)
{
.
mobile-hidden
{
display
:
none
;
}
}
@
keyframes
spin
{
0
%
{
transform
:
rotate
(
0
deg
);
}
100
%
{
transform
:
rotate
(
359
deg
);
}
}
@
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
);
}
}
//
Vue
transitions
.
fade-enter-active
,
.
fade-leave-active
{
transition
:
opacity
0.2
s
;
}
.
fade-enter-from
,
.
fade-leave-active
{
opacity
:
0
;
}
File Metadata
Details
Attached
Mime Type
text/x-asm
Expires
Sat, Nov 15, 12:30 AM (1 d, 11 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
632958
Default Alt Text
App.scss (16 KB)
Attached To
Mode
rPUFE pleroma-fe-upstream
Attached
Detach File
Event Timeline
Log In to Comment