464 lines
8.6 KiB
SCSS
464 lines
8.6 KiB
SCSS
@import 'constants';
|
|
|
|
#WRAPPER > div.dialog{
|
|
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: $menu-width;
|
|
width: $dialog-width;
|
|
height: 100%;
|
|
|
|
background-color: $dialog-bg;
|
|
|
|
/* (2) Container HEADER */
|
|
& > div.header{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc( 100% - 2*1em );
|
|
height: calc( #{$header-height} - #{$header-height/2} );
|
|
|
|
border-bottom: #{$bb-height} solid darken($dialog-header-bg, 5%);
|
|
box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($dialog-header-bg, 2%);
|
|
|
|
z-index: 200;
|
|
|
|
font-weight: bold;
|
|
|
|
padding: #{$header-height/4} 1em;
|
|
|
|
background: url('../asset/svg/arrow.down@hover.svg') right .7em center no-repeat;
|
|
background-size: auto 1.2em;
|
|
|
|
cursor: pointer;
|
|
|
|
z-index: 100;
|
|
|
|
&[data-open='1']{
|
|
background-image: url('../asset/svg/cross.svg');
|
|
}
|
|
|
|
}
|
|
|
|
/* (3) Container BODY */
|
|
& > div.body{
|
|
display: block;
|
|
position: absolute;
|
|
top: calc( #{$header-height} + #{$bb-offset} );
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc( 100% - #{$header-height} - #{$bb-offset} - #{$header-height});
|
|
|
|
background-color: $dialog-bg;
|
|
|
|
color: #72767d;
|
|
|
|
z-index: 100;
|
|
|
|
// overflow: hidden;
|
|
|
|
/* (3) Toggle label */
|
|
& div.toggle{
|
|
display: inline-block;
|
|
width: calc( 100% - 2*.5em - 3em );
|
|
|
|
margin: 0 .5em;
|
|
margin-top: 2em;
|
|
padding-left: 1em;
|
|
|
|
background: left center no-repeat;
|
|
background-size: auto 60%;
|
|
|
|
color: #72767d;
|
|
font-size: .7em;
|
|
letter-spacing: .05em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
|
|
transition: color .2s ease-in-out;
|
|
|
|
&:hover{ color: #b9bbbe; }
|
|
|
|
cursor: pointer;
|
|
|
|
// when not toggle-active
|
|
&[data-toggle],
|
|
&[data-toggle='0']{
|
|
background-image: url('../asset/svg/arrow.right.svg');
|
|
&:hover{ background-image: url('../asset/svg/arrow.right@hover.svg'); }
|
|
}
|
|
|
|
// when toggle-active
|
|
&[data-toggle='1']{
|
|
background-image: url('../asset/svg/arrow.down.svg');
|
|
&:hover{ background-image: url('../asset/svg/arrow.down@hover.svg'); }
|
|
}
|
|
|
|
}
|
|
|
|
/* (4) Add button */
|
|
& div.add{
|
|
display: inline-block;
|
|
position: relative;
|
|
top: .15em;
|
|
left: -.5em;
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
background: url('../asset/svg/dialog.add.svg') center center no-repeat;
|
|
background-size: auto 100%;
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover{ background-image: url('../asset/svg/dialog.add@hover.svg'); }
|
|
}
|
|
|
|
|
|
/* (5) UL after toggle label */
|
|
& div.toggle ~ ul,
|
|
& div.toggle:not([data-toggle='1']) ~ ul{
|
|
|
|
display: none;
|
|
|
|
/* (5) List items */
|
|
li{
|
|
display: block;
|
|
position: relative;
|
|
|
|
margin: .1em .5em;
|
|
padding: .3em .5em;
|
|
|
|
padding-left: 1.6em;
|
|
|
|
border-radius: 3px / 3px;
|
|
|
|
background-color: transition;
|
|
|
|
transition: color .2s ease-in-out,
|
|
background-color .2s ease-in-out;
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover{
|
|
color: #ddd;
|
|
background-color: #36393f;
|
|
}
|
|
|
|
// {1} Trailing icon //
|
|
&:before{
|
|
content: '';
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
margin-left: -1.3em;
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
|
|
background: center center no-repeat;
|
|
background-size: auto 80%;
|
|
}
|
|
|
|
// for 'text'
|
|
&[data-type='text']{
|
|
&:before{ background-image: url('../asset/svg/dialog.text.svg'); }
|
|
&.active{
|
|
color: #ddd;
|
|
background-color: rgba(79,84,92,.6);
|
|
}
|
|
}
|
|
|
|
// for 'voice'
|
|
&[data-type='voice']{
|
|
&:before{ background-image: url('../asset/svg/dialog.voice.svg'); }
|
|
&.active{ color: #ddd; }
|
|
}
|
|
|
|
// background-color: #f00;
|
|
|
|
|
|
& > span.rem{
|
|
|
|
display: none;
|
|
position: absolute;
|
|
top: calc( .5em );
|
|
left: calc( 100% - .5em - 1em );
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
background: url('../asset/svg/minipopup.remove.svg') center center no-repeat;
|
|
background-size: contain;
|
|
|
|
&:hover{ background-image: url('../asset/svg/minipopup.remove@hover.svg'); }
|
|
|
|
}
|
|
|
|
// only show 'remove' icon on hover
|
|
&:hover > span.rem{ display: block; }
|
|
|
|
// Member List
|
|
& > div.member-list{
|
|
|
|
display: block;
|
|
position: relative;
|
|
width: calc( 100% - 1em );
|
|
|
|
overflow: hidden;
|
|
|
|
& > span{
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
& > span{
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
margin-top: -1.9em;
|
|
|
|
}
|
|
|
|
div.icon{
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
|
|
margin: .2em .5em;
|
|
margin-left: 0;
|
|
|
|
border-radius: 50% / 50%;
|
|
|
|
background-color: url() center center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// when visible
|
|
& div.toggle[data-toggle='1'] ~ ul{ display: block; }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* (4) Container FOOTER -> audio status */
|
|
& > div.footer{
|
|
display: none;
|
|
position: absolute;
|
|
top: calc( 100% - #{$header-height} );
|
|
left: 0;
|
|
width: 100%;
|
|
height: $header-height;
|
|
|
|
background-color: $audio-bg;
|
|
|
|
color: #72767d;
|
|
|
|
flex-flow: row wrap;
|
|
|
|
z-index: 100;
|
|
|
|
& > canvas{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
z-index: 100;
|
|
}
|
|
|
|
& > div.text-container{
|
|
|
|
flex: 1 1 50%;
|
|
|
|
display: flex;
|
|
position: relative;
|
|
|
|
flex-flow: row wrap;
|
|
|
|
z-index: 101;
|
|
|
|
& > div.status{
|
|
flex: 0 1 100%;
|
|
|
|
display: flex;
|
|
position: relative;
|
|
height: 50%;
|
|
|
|
margin: 0;
|
|
padding: 0 .5em;
|
|
|
|
color: #faa61a;
|
|
font-size: .9em;
|
|
|
|
flex-flow: row nowrap;
|
|
justify-items: space-between;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
& > div.room{
|
|
|
|
flex: 0 1 100%;
|
|
|
|
display: block;
|
|
position: relative;
|
|
height: 50%;
|
|
|
|
padding: 0 .9em;
|
|
|
|
color: #72767d;
|
|
font-size: .8em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
& > div.audio-close{
|
|
|
|
flex: 0 0 calc( #{$header-height} - 1em );
|
|
|
|
display: block;
|
|
position: relative;
|
|
height: calc( #{$header-height} - 1em );
|
|
|
|
margin: auto .5em;
|
|
|
|
border-radius: 5px / 5px;
|
|
|
|
background: url('../asset/svg/audio.close.svg') center center no-repeat;
|
|
background-size: auto 60%;
|
|
|
|
transition: background-color .1s ease-in-out;
|
|
|
|
cursor: pointer;
|
|
|
|
z-index: 101;
|
|
|
|
&:hover{
|
|
background-color: rgba(0,0,0,.2);
|
|
}
|
|
}
|
|
|
|
// manage when valid state
|
|
&[data-connected='0'],
|
|
&[data-connected='1'],
|
|
&[data-connected='2']{
|
|
display: flex;
|
|
|
|
&[data-connected='1'] > div.text-container > div.status,
|
|
&[data-connected='2'] > div.text-container > div.status{
|
|
color: #43b581;
|
|
|
|
&:before{
|
|
content: '';
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1.5em;
|
|
height: 1em;
|
|
|
|
background: url('../asset/svg/voice.connected.svg') center center no-repeat;
|
|
background-size: auto 85%;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@keyframes scale-up{
|
|
0%{ transform: scale(0); }
|
|
100%{ transform: scale(1); }
|
|
}
|
|
|
|
.minipopup{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc( 100% - 2*1em );
|
|
height: auto;
|
|
|
|
margin: .7em 1em;
|
|
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10 0 rgba(0,0,0,.5);
|
|
|
|
background-color: #ffffff;
|
|
|
|
will-change: transform;
|
|
transform-origin: 100% 0;
|
|
|
|
animation: scale-up .3s ease-in-out;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 100;
|
|
|
|
& > span{
|
|
|
|
display: block;
|
|
position: relative;
|
|
|
|
padding: .7em 1em;
|
|
padding-left: 3em;
|
|
|
|
background-color: #fff;
|
|
background: url('../asset/svg/minipopup.invite.svg') left 1em center no-repeat;
|
|
background-size: auto 45%;
|
|
|
|
color: #99aab5;
|
|
font-size: .85em;
|
|
letter-spacing: .05em;
|
|
white-space: nowrap;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: background-color .2s ease-in-out,
|
|
color .2s ease-in-out;
|
|
|
|
|
|
&[data-icon='create']{ background-image: url('../asset/svg/minipopup.create.svg'); }
|
|
&[data-icon='category']{ background-image: url('../asset/svg/minipopup.category.svg'); }
|
|
&[data-icon='edit']{ background-image: url('../asset/svg/minipopup.edit.svg'); }
|
|
&[data-icon='remove']{ background-image: url('../asset/svg/minipopup.remove.svg'); }
|
|
&[data-icon='remove']{ background-image: url('../asset/svg/minipopup.remove.svg'); }
|
|
&[data-icon='logout']{ background-image: url('../asset/svg/minipopup.logout.svg'); }
|
|
&[data-icon='leave']{ background-image: url('../asset/svg/minipopup.leave.svg'); }
|
|
&[data-icon='password']{ background-image: url('../asset/svg/minipopup.password.svg'); }
|
|
|
|
&:hover{ background-color: #f9f9f9; color: #737f8d; }
|
|
|
|
/* separators */
|
|
/*after*/ &.sa{ border-bottom: 1px solid #f3f3f3; }
|
|
/*before*/ &.sb{ border-top: 1px solid #f3f3f3; }
|
|
|
|
&.special{
|
|
color: #7289da;
|
|
|
|
&:hover{ color: #677bc4; }
|
|
}
|
|
|
|
&.invalid{ color: #e65835; }
|
|
|
|
&.invalid-h:hover{ color: #e65835; }
|
|
|
|
}
|
|
|
|
}
|
|
} |