Nin is a theme for twister-html
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.
 
 
 
 

289 lines
4.5 KiB

/*********** POPUP MODAL **************/
// vars modal
$header-modal-height : $menu-height
.modal-wrapper
background: $bloc-background-color
z-index: 3000
width: 30%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
height: 100vh
right: 0
bottom: 0
overflow: hidden
+border-radius(20px 0 0 0)
+box-shadow(-8px 0 13px rgba(#111, 0.2))
.postboard
border: none
padding: 0
.post-area-new
padding: 10px
.modal-blackout
background: rgba(0, 0, 0, 0)
z-index: -1
position: fixed
left: 0
top: 0
width: 0
height: 0
.modal-content
@extend .clear-fix
overflow: hidden
overflow-y: auto
.postboard-news
position: fixed
display: block
right: 2px
top: $header-modal-height +2
z-index: 2000
@extend .color-1
h2 span
display: none
background: $bloc-background-color
.modal-header
position: relative
background: darken(#64676C,12%)
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
color: white
span
@extend .extend-icon
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 .icon-cancel
right: 10px
&.mark-all-as-read
display: none
@extend .icon-ok
right: 70px
&.modal-back
@extend .icon-left
right: 35px
/* MODAL */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
background: $bloc-background-color
h2
display: block
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: $bloc-light-color
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
+box-shadow(0 8px 33px rgba(#000, .3))
.modal-buttons
padding: 10px
text-align: right
.modal-content
background: $bloc-light-color
padding: 10px 10px 30px 10px
text-align: center
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-buttons
display: none
h2
text-transform: none
display: inline-block!important
font-size: 1rem
font-weight: 400
padding: $space
span
display: inline-block!important
b
font-weight: 400
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.post-expand, .post-interactions
display: none
.post-info-time
position: static
float: right
.post-text
margin-top: 10px
margin-bottom: 10px
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/********* DIRECT MESSAGES MODAL ***********/
@import '_dm'
/********* NEW USER MODAL**************/
.modal-wrapper.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: 110%
/******** HASHTAG MODAL***********/
.modal-wrapper.hashtag-modal
.postboard
padding: 0
/****** CONVERSATION MODAL***********/
.modal-wrapper.conversation-modal
.postboard
padding: 0
/****** FOLLOWING MODAL*******/
.modal-wrapper.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
.mini-profile-photo
width: $mini-usr-img
line-height: 0
margin: 0 $space 0 0
float: left
.mini-screen-name
display: none
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.open-profile-modal
&:hover
text-decoration: none
a.twister-user-name
color: $defaut-font-color
span
padding-bottom: .5rem
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
.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
@extend .small
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding-bottom: .5rem