app/src/res/sass/modules/common.sass
$sidenav_width: 250px
$notif_width: 250px
$font-size: 0.97rem
$post_comment_height: 13rem
::-webkit-scrollbar
width: 10px
::-webkit-scrollbar-thumb
background: rgb(64, 65, 90)
border-radius: 20px
::-webkit-scrollbar-track
background: transparent
border-radius: 20px
.emoji
height: 18px !important
width: 18px !important
margin: 0px 2px -3px 2px
@keyframes reset_btn
0%
opacity: 0
transform: translateY(-10px)
5%
opacity: 1
transform: translateY(0px)
95%
opacity: 1
transform: translateY(0px)
100%
opacity: 0
transform: translateY(-10px)
.reset_button
position: absolute
z-index: 999
display: flex
flex-direction: column
align-items: center
width: 100vw
background-color: rgba(0, 0, 0, 0.8)
color: white
padding-bottom: 5px
animation: reset_btn 3s forwards
p
margin-bottom: 0
.release_info_container
padding: 0 0.5rem 0 2rem
color: white
height: 100%
overflow-y: scroll
display: flex
justify-content: center
align-items: flex-start
.release_info
padding: 0 1.5rem 1rem 1.5rem
border-radius: 5px
background-color: #515270
img
width: 100%
border-radius: 6px
.controls
display: flex
justify-content: center
button
margin-right: 1rem
.info
margin-top: 1rem
opacity: 0.5
font-size: 0.8rem
font-style: italic
span
display: block
.smart_area
position: relative
display: flex
flex-direction: column
.charLeft
margin: 0
color: black
position: absolute
z-index: 99
right: 5px
opacity: 0.4
.post
display: flex
button
flex: 1
&:nth-child(2)
margin-left: 1rem
.previewNode
position: absolute
padding: 0.5rem
height: calc(100% - 1rem)
width: calc(100% - 1rem)
z-index: -9
background-color: transparent
color: transparent
white-space: pre-wrap
overflow-y: scroll
&::-webkit-scrollbar
width: 0
&::-webkit-scrollbar-thumb
background: transparent
&::-webkit-scrollbar-track
background: transparent
#cursor
position: absolute
textarea
padding: 0.5rem
font-family: 'Roboto', sans-serif
resize: none
font-size: 1rem
flex: 1
background-color: white
z-index: 99
&.invalid
color: #dd4242
&:focus
outline: none
#mentions
height: auto
width: auto
position: absolute
background: #fff
z-index: 199
box-shadow: 1px 1px 4px rgba(0,0,0,0.5)
transition: all 0.05s
.mention
padding: 0.5rem
transition: background 0.1s
cursor: pointer
&:hover, &.active
background: #c14857
color: #fff
p
margin: 0px
.emoji_picker
z-index: 99
.emoji_trigger
z-index: 99
position: absolute
top: 5px
right: 5px
opacity: 0.5
transition: all 0.3s
&.bottom
bottom: 5px
&:hover
opacity: 1
transform: scale(1.1)
cursor: pointer
.range_input
-webkit-appearance: none
width: 100%
height: 21px
margin: 7px 0
border: none
position: relative
border-radius: 12px
&:focus
outline: none
// &::-webkit-slider-runnable-track
// width: 100%
// padding: 0px 5px
// height: 24px
// cursor: pointer
// box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0)
// background: #c14857
// border-radius: 12px
// border: 0px solid rgba(0, 0, 0, 0)
&::-webkit-slider-thumb
position: relative
top: 1px
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0)
border: 0px solid rgba(0, 0, 0, 0)
height: 18.2px
width: 18.2px
border-radius: 18.2px
background: #cccccc
cursor: pointer
-webkit-appearance: none
// &:focus::-webkit-slider-runnable-track
// background: #c14857
body
padding: 0
margin: 0
font-family: 'Lato', sans-serif
background-color: rgb(84, 85, 110)
p
font-family: 'Roboto', sans-serif
font-weight: 300
input
height: 2rem
background-color: transparent
border: 0
border-bottom: 0.12rem solid white
margin: 0.4rem 0
transition : border 200ms ease-out
color: white
padding-bottom: 2px
font-size: 0.95rem
&:active, &:focus
outline: none
border-bottom-color: #2A8B9D
button
border: 0
background-color: #40415A
height: 2rem
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
color: white
font-size: 0.95rem
text-transform: uppercase
margin: 0.5rem 0
background-color: #C14857
border-radius: 0.1rem
transition: all 0.3s cubic-bezier(.25,.8,.25,1)
&:hover
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
cursor: pointer
&:active, &:focus
outline: none
&:active
box-shadow: none
&:disabled
background-color: grey !important
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
.toast
position: fixed
top: 1rem
padding: 1rem
background-color: rgba(0, 0, 0, 0.5)
left: 50%
color: white
border-radius: 0.2rem
z-index: 199
transition: all 0.2s ease-out
.main_container
position: absolute
width: 100%
height: 100%
display: flex
.middle_container
flex: 1
display: flex
justify-content: center
height: 100%
position: relative
.compact
position: absolute
bottom: 5px
left: 10px
font-size: 1.4rem
z-index: 99
opacity: 0.2
transition: all 0.2s;
&:hover
opacity: 1
&:after
content: ''
position: absolute
left: 0
bottom: 0
width: 100%
background: linear-gradient(to top,#54556e 0%,rgba(0,0,0,0) 100%)
.fade-enter
opacity: 0.01
.fade-enter.fade-enter-active
opacity: 1
transition: all 200ms ease-in
.fade-leave
opacity: 1
.fade-leave.fade-leave-active
opacity: 0.01
transition: all 400ms ease-in
.fade_item-enter
opacity: 0
transform: scale(0.95)
.fade_item-enter.fade_item-enter-active
opacity: 1
transform: scale(1)
transition: all 200ms
.fade_item-leave
opacity: 1
transform: scale(1)
.fade_item-leave.fade_item-leave-active
opacity: 0
transform: scale(0.95)
transition: all 150ms