mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Without this, the user couldn’t scroll all the way up and the first message was cut off as panel extended below header.
245 lines
4.6 KiB
SCSS
245 lines
4.6 KiB
SCSS
$ios-header-border-color: rgba(0,0,0,0.05);
|
|
$ios-border-color: rgba(0,0,0,0.1);
|
|
|
|
.ios {
|
|
#header {
|
|
height: $header-height;
|
|
border-bottom: 1px solid $ios-header-border-color;
|
|
border-width: 0 1px 1px 0;
|
|
background-color: $grey_l;
|
|
color: $grey_d;
|
|
h1 { display: none; }
|
|
}
|
|
.gutter {
|
|
border-right: 1px solid $ios-border-color;
|
|
.content {
|
|
height: calc(100% - #{$header-height});
|
|
background: $ios-border-color;
|
|
}
|
|
.contact {
|
|
background: $grey_l;
|
|
margin-right: 0;
|
|
|
|
&.selected {
|
|
background: $blue;
|
|
color: white;
|
|
.last-timestamp {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.banner {
|
|
top: 15px;
|
|
}
|
|
|
|
.tool-bar {
|
|
float: left;
|
|
padding: 15px;
|
|
}
|
|
input[type=text]:active,
|
|
input[type=text]:focus,
|
|
input[type=search]:active,
|
|
input[type=search]:focus,
|
|
input[type=search].active,
|
|
form.active {
|
|
outline-offset: 0;
|
|
outline: -webkit-focus-ring-color auto 5px;
|
|
}
|
|
input.search {
|
|
border-radius: 5px;
|
|
width: 220px;
|
|
height: 34px;
|
|
padding-left: $search-padding-left-ios;
|
|
line-height: 34px;
|
|
background-color: #dddddd;
|
|
&.active.rtl {
|
|
background-position : left $search-padding-left-ios center;
|
|
}
|
|
}
|
|
.conversation-header {
|
|
background-color: $grey_l;
|
|
color: $grey_d;
|
|
border-color: $ios-header-border-color;
|
|
text-align: left;
|
|
|
|
// Without this, it interacts poorly with 100% height placeholder shown on startup
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
|
|
.conversation-title {
|
|
line-height: $header-height;
|
|
|
|
.verified-icon {
|
|
@include color-svg('../images/verified-check.svg', #454545);
|
|
}
|
|
}
|
|
|
|
.avatar { display: none; }
|
|
}
|
|
|
|
.conversation .panel {
|
|
position: absolute;
|
|
top: $header-height;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.settings h3,
|
|
.menu-list li {
|
|
text-transform: capitalize;
|
|
}
|
|
.bottom-bar {
|
|
padding: 15px;
|
|
min-height: 30px;
|
|
border-top: 1px solid $ios-border-color;
|
|
form.send {
|
|
border-radius: 5px;
|
|
border: 1px solid $ios-border-color;
|
|
}
|
|
}
|
|
|
|
.error-message.content,
|
|
.control .content {
|
|
padding: 10px;
|
|
}
|
|
|
|
|
|
.attachments .bubbled {
|
|
border-radius: 15px;
|
|
margin-bottom: 0.25em;
|
|
|
|
padding: 10px;
|
|
|
|
position: relative;
|
|
|
|
&:before, &:after {
|
|
content: '';
|
|
display: block;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
width: 10px;
|
|
}
|
|
&:before {
|
|
right: -1px;
|
|
bottom: -3px;
|
|
height: 10px;
|
|
border-radius: 20px;
|
|
background: $blue;
|
|
}
|
|
&:after {
|
|
height: 11px;
|
|
right: -6px;
|
|
bottom: -3px;
|
|
background: #eee;
|
|
}
|
|
}
|
|
|
|
.bubble {
|
|
.content {
|
|
margin-bottom: 5px;
|
|
.body {
|
|
display: inline-block;
|
|
padding: 10px;
|
|
position: relative;
|
|
word-break: break-word;
|
|
|
|
&:before, &:after {
|
|
content: '';
|
|
display: block;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
width: 10px;
|
|
}
|
|
&:before {
|
|
right: -1px;
|
|
bottom: -3px;
|
|
height: 10px;
|
|
border-radius: 20px;
|
|
background: $blue;
|
|
}
|
|
&:after {
|
|
height: 11px;
|
|
right: -6px;
|
|
bottom: -3px;
|
|
background: #eee;
|
|
}
|
|
}
|
|
}
|
|
.content, .attachments img {
|
|
border-radius: 15px;
|
|
}
|
|
.attachments img {
|
|
background-color: white;
|
|
}
|
|
.meta {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.incoming .bubbled {
|
|
background-color: white;
|
|
color: black;
|
|
float: left;
|
|
max-width: 100%;
|
|
|
|
&:before {
|
|
left: -1px;
|
|
background-color: white;
|
|
}
|
|
&:after {
|
|
left: -6px;
|
|
}
|
|
}
|
|
|
|
.incoming .content {
|
|
background-color: white;
|
|
color: black;
|
|
float: left;
|
|
.body {
|
|
&:before {
|
|
left: -1px;
|
|
background-color: white;
|
|
}
|
|
&:after {
|
|
left: -6px;
|
|
}
|
|
}
|
|
}
|
|
.outgoing {
|
|
.content, .attachments .bubbled {
|
|
background-color: $blue;
|
|
max-width: 100%;
|
|
&, .body, a {
|
|
@include invert-text-color;
|
|
}
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.outgoing .attachments .fileView .icon {
|
|
@include color-svg('../images/file.svg', white);
|
|
&.audio {
|
|
@include color-svg('../images/audio.svg', white);
|
|
}
|
|
&.video {
|
|
@include color-svg('../images/video.svg', white);
|
|
}
|
|
&.voice {
|
|
@include color-svg('../images/voice.svg', white);
|
|
}
|
|
}
|
|
|
|
.attachment {
|
|
a {
|
|
border-radius: 15px;
|
|
}
|
|
margin-bottom: 1px;
|
|
}
|
|
.hourglass {
|
|
@include hourglass(#999);
|
|
}
|
|
}
|