mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Messages with images or media were causing the scroll position to jump around when they loaded, because rendering them changed the height of their elements from 0 to full-height sometime after they were inserted into the DOM. Now when rendering attachments, we wait for them to load so they can render at full height immediately, then warn our parent message list before and after a potential height change, so the scroll position can be saved and reset. // FREEBIE
473 lines
7.7 KiB
SCSS
473 lines
7.7 KiB
SCSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
border: solid 1px #ccc;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
font-family: $roboto;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: " ";
|
|
}
|
|
.clearfix:after {
|
|
clear: both;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
#header {
|
|
max-width: 1300px;
|
|
position: fixed;
|
|
top: 1px;
|
|
width: calc(100% - 2px);
|
|
z-index: 1;
|
|
height: $header-height;
|
|
line-height: 24px;
|
|
color: #f2f2f2;
|
|
-webkit-app-region: drag;
|
|
|
|
button {
|
|
-webkit-app-region: no-drag;
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: rgba(0,0,0, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-text {
|
|
height: $header-height;
|
|
line-height: $header-height;
|
|
font-family: $roboto-light;
|
|
}
|
|
|
|
.conversation-header button,
|
|
.title-bar button {
|
|
width: $header-height;
|
|
height: $header-height;
|
|
line-height: $header-height;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
button { cursor: pointer; }
|
|
|
|
button.back {
|
|
float: left;
|
|
background: url('/images/back.png') no-repeat center center;
|
|
|
|
& + .title-text {
|
|
text-indent: -$header-height;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.menu {
|
|
position: relative;
|
|
float: right;
|
|
height: 36px;
|
|
padding-right: 8px;
|
|
|
|
|
|
.hamburger {
|
|
width: $header-height;
|
|
height: $header-height;
|
|
background: url('/images/menu.png') no-repeat center;
|
|
}
|
|
.menu-list {
|
|
display: none;
|
|
position: absolute;
|
|
color: $grey_d;
|
|
z-index: 1;
|
|
|
|
top: 100%;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: solid 1px $blue;
|
|
background-color: white;
|
|
box-shadow: 0 4px 3px 0px rgba(darken($blue, 30%), 0.8);
|
|
|
|
li {
|
|
display: block;
|
|
white-space: nowrap;
|
|
|
|
a {
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 5px 15px 5px 10px;
|
|
|
|
&:hover {
|
|
background-color: $grey_l;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.file-input {
|
|
position: relative;
|
|
margin-right: 10px;
|
|
.choose-file {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.paperclip {
|
|
width: 36px;
|
|
height: 100%;
|
|
background: url('/images/paperclip.png') no-repeat center center;
|
|
background-size: 90%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
input[type=file] {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
.close {
|
|
font-family: sans-serif;
|
|
color: white;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 2px;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0px;
|
|
|
|
background: #666;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
img.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin: 0 .05em 0 .1em;
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
$avatar-size: 44px;
|
|
|
|
.avatar {
|
|
display: inline-block;
|
|
height: $avatar-size;
|
|
width: $avatar-size;
|
|
background: $grey_l url('/images/default.png') no-repeat center;
|
|
border-radius: 50%;
|
|
background-size: cover;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
line-height: $avatar-size;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
color: white;
|
|
}
|
|
|
|
.group-info-input {
|
|
background: white;
|
|
|
|
.group-avatar {
|
|
display: inline-block;
|
|
padding: 2px 0px 0px 2px;
|
|
}
|
|
|
|
.file-input .thumbnail, .thumbnail .avatar,
|
|
img {
|
|
height: 54px;
|
|
width: 54px;
|
|
border-radius: (54px / 2);
|
|
}
|
|
|
|
.thumbnail:after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-bottom: 10px solid $grey;
|
|
border-left: 10px solid transparent;
|
|
}
|
|
|
|
input.name {
|
|
padding: 0.5em;
|
|
border: solid 1px #ccc;
|
|
border-width: 0 0 1px 0;
|
|
width: calc(100% - 84px);
|
|
}
|
|
}
|
|
|
|
.group-member-list,
|
|
.new-group-update {
|
|
.members .contact {
|
|
box-shadow: none;
|
|
border-bottom: 1px solid #eee;
|
|
.last-message, .last-timestamp {
|
|
display: none;
|
|
}
|
|
|
|
.number {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conversation-header .check {
|
|
float: right;
|
|
background: url('/images/check.png') no-repeat center center;
|
|
}
|
|
.conversation-list-item {
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.number {
|
|
display: none;
|
|
}
|
|
|
|
.unread-count {
|
|
float: right;
|
|
margin: 3px 10px 0 20px;
|
|
display: inline-block;
|
|
padding: 0 3px;
|
|
min-width: $unread-badge-size;
|
|
height: $unread-badge-size;
|
|
line-height: $unread-badge-size;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
background-color: $blue;
|
|
color: white;
|
|
border: solid 1px rgba(255,255,255,0.6);
|
|
}
|
|
}
|
|
.contact {
|
|
position: relative;
|
|
padding: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: rgba(255,255,255,0.6);
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
|
|
&.selected {
|
|
background: $grey_l;
|
|
padding-left: 22px;
|
|
margin-left: 0;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child::after {
|
|
display: none;
|
|
}
|
|
|
|
.contact-details {
|
|
$left-margin: 8px;
|
|
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
margin: 4px 0 0 $left-margin;
|
|
width: calc(100% - #{$avatar-size} - #{$left-margin});
|
|
|
|
p {
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
display: block;
|
|
margin: 0;
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.number {
|
|
color: $grey;
|
|
font-size: small;
|
|
}
|
|
}
|
|
|
|
.recipients-input {
|
|
position: relative;
|
|
|
|
.recipients-container {
|
|
background-color: white;
|
|
padding: 2px;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.recipient {
|
|
display: inline-block;
|
|
margin: 0 2px 2px 0;
|
|
padding: 0 5px;
|
|
border-radius: 10px;
|
|
background-color: $blue;
|
|
color: white;
|
|
|
|
&.error {
|
|
background-color: #f00;
|
|
}
|
|
|
|
.remove {
|
|
margin-left: 5px;
|
|
padding: 0 2px;
|
|
}
|
|
}
|
|
|
|
.results {
|
|
position: absolute;
|
|
z-index: 10;
|
|
margin: 0 0 0 20px;
|
|
width: calc(100% - 30px);
|
|
max-width: 300px;
|
|
max-height: 55px * 3;
|
|
overflow-y: auto;
|
|
box-shadow: 0px 0px 1px rgba(#aaa, 0.8);
|
|
|
|
.contact {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachment-preview {
|
|
display: inline-block;
|
|
position: relative;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
}
|
|
.new-conversation .recipients-input .recipients::before {
|
|
content: 'To: ';
|
|
}
|
|
.new-group-update .recipients-input .recipients::before {
|
|
content: 'Add: ';
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
&::before {
|
|
display: block;
|
|
margin: 0px auto;
|
|
content: " ";
|
|
height: $loading-height;
|
|
width: $loading-height;
|
|
border-radius: 2 * $loading-height;
|
|
border: solid 3px;
|
|
border-color: $blue_l $blue_l $grey_l $grey_l !important;
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
}
|
|
|
|
.debug-log {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 1em;
|
|
background: $grey_l;
|
|
z-index: 1;
|
|
overflow-y: auto;
|
|
|
|
a.x {
|
|
display: inline-block;
|
|
float: right;
|
|
cursor: pointer;
|
|
|
|
font-family: sans-serif;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0px;
|
|
|
|
background: #666;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 19px;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
resize: vertical;
|
|
}
|
|
|
|
button, input[type=submit] {
|
|
border-radius: 4px;
|
|
border: solid 1px #ccc;
|
|
cursor: pointer;
|
|
margin: 1em auto;
|
|
padding: 1em;
|
|
font-family: inherit;
|
|
color: $grey;
|
|
background: $grey_l;
|
|
box-shadow: 0 0 10px -5px rgba($grey, 0.5);
|
|
|
|
&:hover {
|
|
color: black;
|
|
box-shadow: 0 0 10px -3px rgba($grey, 0.7);
|
|
}
|
|
}
|
|
|
|
.result {
|
|
display: none;
|
|
text-align: center;
|
|
-webkit-user-select: text;
|
|
}
|
|
}
|