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.
286 lines
4.3 KiB
286 lines
4.3 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 |
|
|
|
.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: rgba( 255, 255,255, 1.0 ) |
|
z-index: 5 |
|
position: fixed |
|
top: 50% |
|
left: 50% |
|
width: 600px |
|
margin-left: -300px |
|
@extend .box-shadow |
|
.modal-buttons |
|
padding: 10px |
|
text-align: right |
|
|
|
|
|
/************ FOLLOWING-CONFIG MODAL **********/ |
|
|
|
.prompt-wrapper.following-config-modal |
|
margin-top: -100px |
|
.modal-content |
|
padding: 10px |
|
text-align: center |
|
.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: 45px |
|
|
|
a |
|
display: block |
|
padding: 10px |
|
width: 100% |
|
@extend .clear-fix |
|
color: $defaut-font-color |
|
background: $bloc-background-color |
|
&:hover |
|
background: $bloc-light-color |
|
.mini-profile-photo |
|
height: 48px |
|
width: 48px |
|
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% |
|
button |
|
position: absolute |
|
right: 0 |
|
top: 5% |
|
@extend .small |
|
.bio |
|
color: rgba(0, 0, 0, 0.6) |
|
font-style: italic |
|
padding-bottom: .5rem
|
|
|