You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
5.6 KiB
352 lines
5.6 KiB
4 years ago
|
/*********** POPUP MODAL **************/
|
||
|
|
|
||
|
|
// vars modal
|
||
|
|
|
||
|
|
$header-modal-height : $menu-height
|
||
|
|
|
||
|
|
|
||
|
|
// style
|
||
|
|
|
||
|
|
@mixin modal-blackout
|
||
|
|
display: block
|
||
|
|
background: rgba(0,0,0, 0.6)
|
||
|
|
z-index: -1
|
||
|
|
position: fixed
|
||
|
|
left: 0
|
||
|
|
top: 0
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
|
||
|
|
.modal-blackout
|
||
|
|
display: none
|
||
|
|
|
||
|
|
|
||
|
|
.modal-wrapper
|
||
|
|
background: $bloc-background-color
|
||
|
|
z-index: 100
|
||
|
|
width: 34%
|
||
|
|
position: fixed
|
||
|
|
+box-sizing(border-box)
|
||
|
|
@extend .box-shadow
|
||
|
|
height: 100vh
|
||
|
|
right: 0
|
||
|
|
bottom: 0
|
||
|
|
overflow: hidden
|
||
|
|
+box-shadow(-8px 0 13px rgba(#111, 0.2))
|
||
|
|
+transition-property(top, bottom)
|
||
|
|
+transition-duration(1s)
|
||
|
|
&.remove
|
||
|
|
bottom: 300%
|
||
|
|
// NEW USER MODAL //
|
||
|
|
|
||
|
|
&.new-user
|
||
|
|
|
||
|
|
.modal-content
|
||
|
|
padding: 25px
|
||
|
|
.modal-close
|
||
|
|
display: none
|
||
|
|
.text
|
||
|
|
margin: 0 0 15px 0
|
||
|
|
.emphasis
|
||
|
|
text-align: center
|
||
|
|
.secret-key
|
||
|
|
display: block
|
||
|
|
margin-top: 8px
|
||
|
|
color: rgba(0.5, 0, 0, 1)
|
||
|
|
font-weight: bold
|
||
|
|
font-size: 80%
|
||
|
|
|
||
|
|
|
||
|
|
// FOLOWING MODAL //
|
||
|
|
|
||
|
|
&.following-modal
|
||
|
|
|
||
|
|
h2
|
||
|
|
display: none
|
||
|
|
.mini-following-info
|
||
|
|
border-bottom: 1px solid $main-background-color
|
||
|
|
line-height: $mini-usr-img
|
||
|
|
|
||
|
|
a
|
||
|
|
display: block
|
||
|
|
padding: 10px
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
@extend .clear-fix
|
||
|
|
color: $defaut-font-color
|
||
|
|
background: $bloc-light-color
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
background: white
|
||
|
|
text-decoration: none
|
||
|
|
font-weight: 500
|
||
|
|
.mini-profile-photo
|
||
|
|
width: $mini-usr-img
|
||
|
|
min-height: $mini-usr-img
|
||
|
|
overflow-x: hidden
|
||
|
|
line-height: 0
|
||
|
|
margin: 0 $space 0 0
|
||
|
|
float: left
|
||
|
|
.mini-following-name
|
||
|
|
&:after
|
||
|
|
line-height: 20px
|
||
|
|
.mini-screen-name
|
||
|
|
display: none
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
&.who-to-follow-modal
|
||
|
|
a
|
||
|
|
color: $main-color-dark
|
||
|
|
&.twister-user-name
|
||
|
|
&:hover
|
||
|
|
text-decoration: none
|
||
|
|
.twister-user-info
|
||
|
|
text-align: left
|
||
|
|
font-size: .8rem
|
||
|
|
line-height: 1rem
|
||
|
|
width: 80%
|
||
|
|
padding-left: $mini-usr-img + 20
|
||
|
|
button
|
||
|
|
position: absolute
|
||
|
|
right: 10px
|
||
|
|
top: 10px
|
||
|
|
@include button-small-basic
|
||
|
|
.bio
|
||
|
|
color: rgba(0, 0, 0, 0.6)
|
||
|
|
font-style: italic
|
||
|
|
padding: .25rem 0
|
||
|
|
|
||
|
|
|
||
|
|
.modal-content
|
||
|
|
background: $bloc-light-color
|
||
|
|
width: 100%
|
||
|
|
@extend .clear-fix
|
||
|
|
overflow: hidden
|
||
|
|
overflow-y: auto
|
||
|
|
|
||
|
|
.postboard
|
||
|
|
padding: 0
|
||
|
|
clear: none!important
|
||
|
|
position: relative
|
||
|
|
width: 100%
|
||
|
|
margin: auto
|
||
|
|
|
||
|
|
h2
|
||
|
|
display: block
|
||
|
|
span
|
||
|
|
display: none
|
||
|
|
|
||
|
|
|
||
|
|
.postboard-news
|
||
|
|
position: fixed
|
||
|
|
display: block
|
||
|
|
right: 2px
|
||
|
|
top: $header-modal-height +2
|
||
|
|
z-index: 2000
|
||
|
|
@include button-color-basic
|
||
|
|
|
||
|
|
|
||
|
|
&.new-users-modal
|
||
|
|
a
|
||
|
|
color: $main-color-dark
|
||
|
|
&.twister-user-name
|
||
|
|
&:hover
|
||
|
|
text-decoration: none
|
||
|
|
.twister-user-info
|
||
|
|
text-align: left
|
||
|
|
font-size: .8rem
|
||
|
|
line-height: 1rem
|
||
|
|
width: 80%
|
||
|
|
padding-left: $mini-usr-img + 20
|
||
|
|
button
|
||
|
|
position: absolute
|
||
|
|
right: 10px
|
||
|
|
top: 10px
|
||
|
|
@include button-small-basic
|
||
|
|
.bio
|
||
|
|
color: rgba(0, 0, 0, 0.6)
|
||
|
|
font-style: italic
|
||
|
|
padding: .25rem 0
|
||
|
|
|
||
|
|
|
||
|
|
.modal-header
|
||
|
|
position: relative
|
||
|
|
background: darken($main-color-dark,.3)
|
||
|
|
height: $header-modal-height
|
||
|
|
+box-sizing(border-box)
|
||
|
|
@extend .clear-fix
|
||
|
|
|
||
|
|
h3
|
||
|
|
padding-left: 20px
|
||
|
|
line-height: $header-modal-height
|
||
|
|
font-weight: 500
|
||
|
|
font-size: 1rem
|
||
|
|
float: left
|
||
|
|
color: white
|
||
|
|
span
|
||
|
|
position: relative
|
||
|
|
span
|
||
|
|
|
||
|
|
@extend .ion
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
line-height: $header-modal-height
|
||
|
|
font-size: 1rem
|
||
|
|
cursor: pointer
|
||
|
|
color: rgba(white , 0.7)
|
||
|
|
transition: color .1s linear
|
||
|
|
&:hover
|
||
|
|
color: white
|
||
|
|
|
||
|
|
b
|
||
|
|
display: none
|
||
|
|
|
||
|
|
&.modal-close
|
||
|
|
@extend .ion-close
|
||
|
|
right: 10px
|
||
|
|
&.mark-all-as-read
|
||
|
|
@extend .ion-checkmark
|
||
|
|
position: static
|
||
|
|
float: left
|
||
|
|
margin-left: 10px
|
||
|
|
display: none
|
||
|
|
&.modal-back
|
||
|
|
@extend .ion-back
|
||
|
|
right: 70px
|
||
|
|
|
||
|
|
|
||
|
|
.inline-warn
|
||
|
|
background-color: #FEFEDF
|
||
|
|
padding: 10px
|
||
|
|
.close
|
||
|
|
float: right
|
||
|
|
font-size: 1.2em
|
||
|
|
color: #e34f42
|
||
|
|
cursor: pointer
|
||
|
|
margin: -8px 2px 8px 8px
|
||
|
|
.text
|
||
|
|
font-size: 0.8em
|
||
|
|
text-align: center
|
||
|
|
.options
|
||
|
|
font-size: 0.8em
|
||
|
|
text-align: right
|
||
|
|
margin-top: 4px
|
||
|
|
div > *
|
||
|
|
display: inline-block
|
||
|
|
|
||
|
|
|
||
|
|
/* Composants */
|
||
|
|
|
||
|
|
.twister-peer
|
||
|
|
margin: 0
|
||
|
|
min-height: 72px
|
||
|
|
padding: 4px
|
||
|
|
border-top: solid 1px $main-background-color
|
||
|
|
border-bottom: solid 1px $main-background-color
|
||
|
|
background: $bloc-light-color
|
||
|
|
+ .twister-peer
|
||
|
|
border-top: none
|
||
|
|
.avatar
|
||
|
|
float: left
|
||
|
|
width: 48px
|
||
|
|
height: 48px
|
||
|
|
overflow: hidden
|
||
|
|
margin: 4px
|
||
|
|
img
|
||
|
|
width: 48px
|
||
|
|
height: auto
|
||
|
|
&:hover
|
||
|
|
cursor: pointer
|
||
|
|
.name
|
||
|
|
display: inline-block
|
||
|
|
font-weight: 600
|
||
|
|
&:hover
|
||
|
|
cursor: pointer
|
||
|
|
.alias
|
||
|
|
display: inline-block
|
||
|
|
&:hover
|
||
|
|
color: $main-color-color
|
||
|
|
cursor: pointer
|
||
|
|
.bio
|
||
|
|
text-align: center
|
||
|
|
padding: 4px
|
||
|
|
|
||
|
|
.avatar.tiny
|
||
|
|
width: 20px
|
||
|
|
height: 20px
|
||
|
|
+border-radius(3px)
|
||
|
|
|
||
|
|
.twister-user
|
||
|
|
position: relative
|
||
|
|
box-sizing: border-box
|
||
|
|
background: $bloc-light-color
|
||
|
|
@extend .clear-fix
|
||
|
|
border-bottom: 1px solid $main-background-color
|
||
|
|
width: 100%
|
||
|
|
min-height: auto
|
||
|
|
padding: 7px
|
||
|
|
clear: left
|
||
|
|
&:first-child
|
||
|
|
border-top: 1px solid $main-background-color
|
||
|
|
border-bottom: 1px solid $main-background-color !important
|
||
|
|
&:last-child
|
||
|
|
border-bottom: 0
|
||
|
|
small
|
||
|
|
display: none
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* Minimized */
|
||
|
|
.minimize-modal
|
||
|
|
@extend .ion
|
||
|
|
@extend .ion-minus
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
line-height: $header-modal-height
|
||
|
|
font-size: 1rem
|
||
|
|
cursor: pointer
|
||
|
|
color: rgba(white , 0.7)
|
||
|
|
transition: color .1s linear
|
||
|
|
right: 35px!important
|
||
|
|
&:hover
|
||
|
|
color: white
|
||
|
|
|
||
|
|
b
|
||
|
|
display: none
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#modals-minimized
|
||
|
|
position: fixed
|
||
|
|
z-index: 2000
|
||
|
|
left: 0
|
||
|
|
bottom: 0
|
||
|
|
width: $leftWidth
|
||
|
|
text-align: right
|
||
|
|
li
|
||
|
|
background: $dark-grey
|
||
|
|
cursor: pointer
|
||
|
|
margin-right: 10px
|
||
|
|
font-weight: 600
|
||
|
|
font-size: .8rem
|
||
|
|
padding: .5rem
|
||
|
|
margin-bottom: 10px
|
||
|
|
color: rgba(white, .8)
|
||
|
|
+transition(margin .2s)
|
||
|
|
&:hover
|
||
|
|
color: white
|
||
|
|
margin-right: 0
|
||
|
|
|
||
|
|
/*********** POPUP PROMPT *************/
|
||
|
|
|
||
|
|
@import '_prompt'
|
||
|
|
|
||
|
|
/********* DIRECT MESSAGES MODAL ***********/
|
||
|
|
|
||
|
|
@import '_dm'
|
||
|
|
|
||
|
|
@import '_groupchat'
|