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.
351 lines
5.6 KiB
351 lines
5.6 KiB
/*********** POPUP MODAL **************/ |
|
|
|
// vars modal |
|
|
|
$header-modal-height : $menu-height |
|
|
|
|
|
// style |
|
|
|
@mixin modal-blackout |
|
display: block |
|
background: rgba(0,0,0, 0.6) |
|
z-index: -1 |
|
position: fixed |
|
left: 0 |
|
top: 0 |
|
width: 100% |
|
height: 100% |
|
|
|
.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 |
|
@include button-small-basic |
|
.bio |
|
color: rgba(0, 0, 0, 0.6) |
|
font-style: italic |
|
padding: .25rem 0 |
|
|
|
|
|
.modal-content |
|
background: $bloc-light-color |
|
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 |
|
@include button-color-basic |
|
|
|
|
|
&.new-users-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 |
|
@include button-small-basic |
|
.bio |
|
color: rgba(0, 0, 0, 0.6) |
|
font-style: italic |
|
padding: .25rem 0 |
|
|
|
|
|
.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 |
|
|
|
|
|
.inline-warn |
|
background-color: #FEFEDF |
|
padding: 10px |
|
.close |
|
float: right |
|
font-size: 1.2em |
|
color: #e34f42 |
|
cursor: pointer |
|
margin: -8px 2px 8px 8px |
|
.text |
|
font-size: 0.8em |
|
text-align: center |
|
.options |
|
font-size: 0.8em |
|
text-align: right |
|
margin-top: 4px |
|
div > * |
|
display: inline-block |
|
|
|
|
|
/* Composants */ |
|
|
|
.twister-peer |
|
margin: 0 |
|
min-height: 72px |
|
padding: 4px |
|
border-top: solid 1px $main-background-color |
|
border-bottom: solid 1px $main-background-color |
|
background: $bloc-light-color |
|
+ .twister-peer |
|
border-top: none |
|
.avatar |
|
float: left |
|
width: 48px |
|
height: 48px |
|
overflow: hidden |
|
margin: 4px |
|
img |
|
width: 48px |
|
height: auto |
|
&:hover |
|
cursor: pointer |
|
.name |
|
display: inline-block |
|
font-weight: 600 |
|
&:hover |
|
cursor: pointer |
|
.alias |
|
display: inline-block |
|
&:hover |
|
color: $main-color-color |
|
cursor: pointer |
|
.bio |
|
text-align: center |
|
padding: 4px |
|
|
|
.avatar.tiny |
|
width: 20px |
|
height: 20px |
|
+border-radius(3px) |
|
|
|
.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 |
|
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' |
|
|
|
@import '_groupchat'
|
|
|