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.
 
 
 
 

262 lines
4.1 KiB

/*********** POPUP MODAL **************/
// vars modal
$header-modal-height : $menu-height
// style
.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
@extend .small
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding: .25rem 0
.modal-content
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
@extend .color-1
.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
/* Composants */
.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 1rem
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'