discord-client/parcel/scss/container.scss

250 lines
4.3 KiB
SCSS
Raw Permalink Normal View History

2018-03-21 17:44:27 +00:00
@import 'constants';
@keyframes slide-list{
from{ transform: translateY(-1em); }
to{ transform: translateY(0); }
}
2018-03-21 17:44:27 +00:00
#WRAPPER > div.container{
display: block;
position: absolute;
top: 0;
left: #{$menu-width + $dialog-width};
width: calc( 100% - #{$menu-width + $dialog-width} );
height: 100%;
background-color: $container-bg;
/* (1) Container HEADER */
& > div.header{
display: flex;
2018-03-21 17:44:27 +00:00
position: absolute;
top: 0;
left: 0;
width: 100%;
height: $header-height;
border-bottom: #{$bb-height} solid darken($container-bg, 5%);
box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($container-bg, 2%);
z-index: 200;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
// {1} Title //
& > div.title{
display: inline-block;
position: relative;
padding: .2em .5em;
padding-left: 1.3em;
margin-left: .7em;
font-weight: bold;
background: url('../asset/svg/dialog.text.svg') left center no-repeat;
background-size: auto 60%;
align-self: center;
}
2018-03-21 17:44:27 +00:00
}
/* (2) Container BODY */
& > div.body{
display: flex;
2018-03-21 17:44:27 +00:00
position: absolute;
top: calc( #{$header-height} + #{$bb-offset} );
left: 0;
width: calc( 100% - #{$side-menu-width} );
2018-03-21 17:44:27 +00:00
height: calc( 100% - #{$header-height} - #{$bb-offset} );
background-color: $input-bg;
2018-03-21 17:44:27 +00:00
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
flex-wrap: nowrap;
overflow: hidden;
2018-03-21 17:44:27 +00:00
z-index: 100;
2018-03-22 21:00:57 +00:00
section.message-stack{
flex: 0 1 100%;
display: flex;
position: relative;
height: calc( 100% - #{$input-height} - 1px );
// border-bottom: 1px solid #474a4f;
// box-shadow: 0 1px 1px 0 #474a4f;
box-shadow: calc( 100vw - #{$menu-width} - #{$dialog-width} - 1.2em) 0 0 1px #{$input-bg},
1.2em 0 0 1px #474a4f;
background-color: $container-bg;
flex-flow: row wrap;
justify-content: stretch;
align-items: flex-start;
align-content: flex-start;
overflow: auto;
// {1} Message Container //
div.message{
flex: 0 1 100%;
display: flex;
position: relative;
margin: 0 1.3em;
padding: 1em 0;
&:not(:last-child){ border-bottom: 1px solid #474a4f; }
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
transition: transform .1s ease-in-out;
// animation: slide-list .3s cubic-bezier(.49, .4, .26, 1.93);
// {1} Meta Data //
& > span.meta{
flex: 0 1 100%;
display: inline-block;
position: relative;
margin: 0 4em;
margin-bottom: .5em;
// {2} Author //
& > span.author{
padding-right: .5em;
color: #fff;
font-size: .9em;
font-weight: bold;
cursor: pointer;
&:hover{ text-decoration: underline; }
}
// {3} Date //
& > span.date{
font-size: .8em;
color: #595d63;
}
}
// {2} Message Text //
& > span.text{
flex: 0 1 100%;
display: inline-block;
position: relative;
margin: 0 4em;
color: hsla(0,0%,100%,.7);
}
// {3} Icon circle //
& > div.icon{
display: block;
position: absolute;
width: 2.5em;
height: 2.5em;
border-radius: 50% / 50%;
background-color: #fff;
cursor: pointer;
transition: opacity .2s ease-in-out;
2018-03-28 13:54:19 +00:00
background: url() center center no-repeat;
background-size: cover;
&:hover{
opacity: .8;
}
}
}
}
2018-03-22 21:00:57 +00:00
section.message-input{
display: flex;
position: relative;
min-height: calc( #{$input-height} - 2*1em );
height: auto;
margin: 1em 1.2em;
border-radius: 5px / 5px;
background-color: #484b52;
flex-direction: row;
justify-content: stretch;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
& > textarea{
display: block;
position: relative;
min-height: calc( 1em + 1.5em );
height: calc( 1em + 1.5em );
max-height: calc( 5em + .4em );
flex: 1 1 0;
margin: 1.5em 3em;
padding: .4em 1em;
color: #ddd;
font-family: inherit;
border: none;
border-left: 1px solid #666;
// reset
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
resize: none;
background-color: transparent;
overflow: hidden;
}
}
2018-03-21 17:44:27 +00:00
}
}