discord-client/webpack/scss/container.scss

156 lines
2.5 KiB
SCSS

@import 'constants';
#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;
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;
}
}
/* (2) 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} );
background-color: $container-bg;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
z-index: 100;
// {1} Message Container //
div.message{
display: flex;
margin: 0 1.3em;
padding: 1em 0;
border-bottom: 1px solid #474a4f;
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
// {1} Meta Data //
& > span.meta{
flex: 1 1 90%;
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: 1 1 90%;
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;
&:hover{
opacity: .8;
}
}
}
}
}