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.

290 lines
4.5 KiB

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