d6a4e6e496
Establishes basic functionality for viewing conversations in two column mode, including message area and message list resizing, and maintaining scroll position. Various subviews need to be retooled but are more or less still functional, i.e., new message, message detail, key verification, etc...
170 lines
2.6 KiB
SCSS
170 lines
2.6 KiB
SCSS
.gutter {
|
|
padding: $header-height 0 0;
|
|
}
|
|
|
|
.conversation-stack,
|
|
.new-conversation, .inbox, .gutter {
|
|
height: 100%;
|
|
}
|
|
.scrollable {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.loading .gutter {
|
|
// TODO: spinner
|
|
}
|
|
|
|
.gutter {
|
|
float: left;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.socket-status {
|
|
float: left;
|
|
padding: 6px;
|
|
-webkit-app-region: no-drag;
|
|
|
|
* {
|
|
cursor: pointer;
|
|
padding-left: 20px;
|
|
border-radius: $header-height;
|
|
min-height: 20px;
|
|
|
|
&:hover {
|
|
background: $blue url('/images/refresh.png') center;
|
|
}
|
|
}
|
|
.connecting .icon {
|
|
background-color: $blue;
|
|
}
|
|
.closing {
|
|
background-color: $blue_l;
|
|
}
|
|
.closed {
|
|
background: url('/images/error_red.png') no-repeat left center;
|
|
}
|
|
}
|
|
|
|
.conversation-stack {
|
|
padding-left: 300px;
|
|
padding-top: $header-height;
|
|
.conversation {
|
|
display: none;
|
|
}
|
|
.conversation:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.conversation-header {
|
|
background: $grey_l;
|
|
}
|
|
.menu.conversation-menu {
|
|
float: right;
|
|
padding-left: 8px;
|
|
padding-right: 0;
|
|
|
|
.menu-list {
|
|
right: 0;
|
|
left: initial;
|
|
}
|
|
}
|
|
|
|
.contact {
|
|
.number, .checkbox {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
input.search {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
.fab {
|
|
z-index: 1;
|
|
position: fixed;
|
|
left: 215px;;
|
|
bottom: 22px;
|
|
height: 50px;
|
|
width: 50px;
|
|
border: 0;
|
|
border-radius: (60px / 2);
|
|
outline: 0;
|
|
font: 300 36px $roboto;
|
|
color: white;
|
|
background: $blue url('/images/pencil.png') no-repeat center center;
|
|
box-shadow: 0 8px 8px -8px rgba(darken($blue, 50%), 0.8);
|
|
transition: box-shadow 0.33s, transform 0.33s, background 0.33s;
|
|
|
|
&:hover {
|
|
background-color: darken($blue, 3%);
|
|
box-shadow: 0 8px 18px -8px rgba(darken($blue, 50%), 0.9);
|
|
transform: translate3d(0, -1px, 0);
|
|
}
|
|
}
|
|
|
|
.last-timestamp {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.new-conversation {
|
|
}
|
|
|
|
.new-contact {
|
|
display: none;
|
|
.contact-name { display: none; }
|
|
.contact-details::before {
|
|
content: 'Create new contact';
|
|
display: block;
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
.index {
|
|
color: $grey_d;
|
|
background: #eee;
|
|
|
|
.gutter .new-group-update-form {
|
|
display: none;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.last-message {
|
|
margin: 6px 0;
|
|
font-size: small;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.gutter .timestamp {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
}
|
|
|
|
.settings {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: red;
|
|
display: none;
|
|
|
|
.settings-open & {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.conversations .unread .contact-details {
|
|
.contact-name,
|
|
.last-message,
|
|
.last-timestamp {
|
|
font-weight: bold;
|
|
}
|
|
}
|