/*********** POPUP MODAL **************/ // vars modal $header-modal-height : $menu-height .modal-wrapper background: white z-index: 3000 width: 25% position: fixed +box-sizing(border-box) @extend .box-shadow height: 100% right: 0 bottom: 0 overflow: hidden .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 background: $background-light overflow-y: auto .postboard-news position: absolute display: block right: 0 z-index: 20 @extend .color-1 h2 span display: none .modal-header position: relative background: $color-blue height: $header-modal-height +box-sizing(border-box) @extend .clear-fix border-bottom: 1px solid $background-light h3 padding-left: 20px line-height: $header-modal-height font-weight: 500 font-size: 1rem color: white .modal-close @extend .extend-icon @extend .icon-cancel position: absolute right: 10px top: 0 font-size: 14px line-height: $header-modal-height cursor: pointer color: rgba(white , 0.7) &:hover color: white b display: none .mark-all-as-read float: right cursor: pointer font-size: 1.3em line-height: $header-modal-height padding: 0 5px color: white transition: all .1s linear display: none .modal-back:hover, .mark-all-as-read:hover color: white .mark-all-as-read @extend .extend-icon @extend .icon-ok .modal-back @extend .extend-icon @extend .icon-left position: absolute right: 35px top: 0 font-size: 14px line-height: $header-modal-height cursor: pointer color: rgba(white , 0.7) &:hover color: white b display: none /* MODAL */ .modal-content width: 100% .postboard padding: 0 clear: none!important position: relative width: 100% margin: auto h2 display: block .post-text margin: 0 0 0 40px .post-photo width: 30px height: 30px img width: 100% height: 100% //+border-radius(50%) /*********** 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 button:last-child padding: 5px 20px /************ 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 .following-config-method-buttons .public-following background-color: $color-green margin: 0px 2px padding: 6px 16px /************ RETWIST POSTS MODAL **********/ .prompt-wrapper.reTwist &.prompt-wrapper margin-top: -110px .modal-content padding: 20px 15px .modal-buttons .modal-propagate background-color: $color-green .post-expand, .post-interactions display: none /********* 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**********/ .modal-wrapper.directMessages .post-area-new display: none z-index: 5 background: $main-background-color position: absolute bottom: 0 width: 100% padding: 0!important .modal-header h3 span display: inline!important .modal-content +box-sizing(border-box) width: 100% .post-photo height: 48px width: 48px .post-text margin-left: 58px font-size: .9em .post-info-name float: none .post-info-tag line-height: 1em padding: 0 display: inline font-size: 80% margin: 0 0 0 1em .post-info-sent position: absolute left: 50% top: 10px display: none .direct-messages-list .post padding: 20px cursor: pointer &:after content: "" font-family: $symbol-font-family position: absolute right: 5px top: 50% font-size: 1.1em margin: -6px 0 0 0 color: rgba(0, 0, 0, 0.4) display: none .direct-messages-list .post:hover:after display: block .direct-messages-thread padding-bottom: 150px .post @extend .clear-fix background: none left: 0 margin: 0px 10px 20px 10px cursor: default .post-info-time float: none display: block text-align: center font-size: 10px margin: 10px 0 cursor: default &:hover color: $main-color-light .post-text:after, .post-text:nth-child(2n):after content: "" width: 1px background: transparent position: absolute top: 10px white-space: normal .post-text:after border-top: solid 7px transparent border-bottom: solid 7px transparent border-right: solid 7px white left: -7px .post-text background: white margin-right: 60px margin-left: 60px position: relative display: inline-block max-width: 300px font-size: .9em padding: 5px 10px z-index: 4 float: left word-wrap: break-word max-width: 60% min-height: 15px .post-photo position: absolute left: 0 top: 10px .post.sent .post-text:after border-top: solid 7px transparent border-bottom: solid 7px transparent border-right: none border-left: solid 7px white right: -7px left: auto .post-text float: right .post-photo position: absolute right: 0 left: auto /********* 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 .modal-content padding: 0 ol margin: 5px .open-profile-modal &:hover text-decoration: none .postboard h2 display: none /******* WHO TO FOLLOW MODAL*******/ .modal-wrapper.who-to-follow-modal .modal-content padding: 15px +box-sizing(border-box) ol margin: 5px .open-profile-modal &:hover text-decoration: none .twister-user position: relative padding: 5px .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: .5rem