mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
9370e2b74a
* 'master' of https://github.com/signalapp/Signal-Desktop: (38 commits) v1.17.0 v1.17.0-beta.4 Ensure that blue group avatars are preserved in dark theme Android theme: Incoming quotes take color from containing message Conversations have blue avatar backgrounds if no image provided Fix lint errors Add ca language inboxView: Ensure Conversation exists for our own number Ensure that file is not attached if we've filtered it v1.17.0-beta.3 Localization updates v1.16.3 Lint fixes Lint fixes Better handle large numbers of messages in cache on startup Keep object stores after conversations migrate to SQLCipher Longer timeout for orphaned file cleanup Tests and increase consistency for isFileDangerous calls Longer timeout for orphaned file cleanup v1.17.0-beta.2 ... # Conflicts: # background.html # package.json
308 lines
5.2 KiB
SCSS
308 lines
5.2 KiB
SCSS
.conversation-stack,
|
|
.new-conversation,
|
|
.inbox,
|
|
.gutter {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.expired {
|
|
.conversation-stack,
|
|
.gutter {
|
|
height: calc(100% - 48px);
|
|
}
|
|
}
|
|
|
|
.scrollable {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.gutter {
|
|
background-color: $color-gray-02;
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: $color-gray-02;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border: 2px solid $color-gray-02;
|
|
}
|
|
|
|
float: left;
|
|
width: 300px;
|
|
.content {
|
|
overflow-y: scroll;
|
|
max-height: calc(100% - 88px);
|
|
}
|
|
}
|
|
.network-status-container {
|
|
.network-status {
|
|
background: url('../images/error_red.svg') no-repeat left 10px center;
|
|
background-size: 25px 25px;
|
|
background-color: #fcd156;
|
|
padding: 10px;
|
|
padding-left: 2 * $button-height;
|
|
display: none;
|
|
|
|
.network-status-message {
|
|
h3 {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
margin-bottom: 2px;
|
|
font-size: 14px;
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
padding: 0.5em 0;
|
|
}
|
|
}
|
|
.action {
|
|
button {
|
|
border-radius: $border-radius;
|
|
border: solid 1px #ccc;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
color: white;
|
|
background: $blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.identityKeyWrapper {
|
|
background-color: $color-black-008-no-tranparency;
|
|
text-align: center;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.identityKey {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.underneathIdentityWrapper {
|
|
position: absolute;
|
|
top: 50px;
|
|
bottom: 0;
|
|
left: 300px;
|
|
right: 0;
|
|
}
|
|
|
|
.conversation-stack {
|
|
.conversation {
|
|
display: none;
|
|
}
|
|
.conversation:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.tool-bar {
|
|
color: $color-light-90;
|
|
|
|
padding: 8px;
|
|
padding-top: 0px;
|
|
margin-top: -1px;
|
|
|
|
position: relative;
|
|
.search-icon {
|
|
content: '';
|
|
display: inline-block;
|
|
float: left;
|
|
width: 24px;
|
|
height: 33px;
|
|
-webkit-mask: url('../images/search.svg') no-repeat left center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: $color-light-35;
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
$search-x-size: 16px;
|
|
$search-padding-right: 12px;
|
|
$search-padding-left: 30px;
|
|
|
|
input.search {
|
|
border: 1px solid $color-black-02;
|
|
padding: 0 $search-padding-right 0 $search-padding-left;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
outline: 0;
|
|
height: 32px;
|
|
width: calc(100% - 16px);
|
|
outline-offset: -2px;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
font-weight: normal;
|
|
|
|
position: relative;
|
|
border-radius: 4px;
|
|
|
|
&:focus {
|
|
outline: solid 1px $blue;
|
|
}
|
|
|
|
&.active {
|
|
background-image: url('../images/x.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: $search-x-size;
|
|
|
|
&.ltr {
|
|
background-position: right $search-padding-right center;
|
|
}
|
|
|
|
&.rtl {
|
|
background-position: left $search-padding-left center;
|
|
}
|
|
}
|
|
|
|
&::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
display: block;
|
|
width: $search-x-size;
|
|
height: $search-x-size;
|
|
}
|
|
|
|
&::-webkit-search-cancel-button:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.last-timestamp {
|
|
font-size: smaller;
|
|
float: right;
|
|
margin: 0 10px;
|
|
color: $grey;
|
|
}
|
|
|
|
.new-contact {
|
|
display: none;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
.contact-details .number {
|
|
display: block;
|
|
font-style: italic;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
&.valid {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.index {
|
|
.gutter .new-group-update-form {
|
|
display: none;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.last-message {
|
|
margin: 6px 0 0;
|
|
font-size: $font-size-small;
|
|
}
|
|
|
|
.gutter .timestamp {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 12px;
|
|
color: $grey;
|
|
}
|
|
}
|
|
|
|
.conversations .unread .contact-details {
|
|
.name,
|
|
.last-message,
|
|
.last-timestamp {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
margin: 10px;
|
|
padding: 1em;
|
|
border-radius: $border-radius;
|
|
color: white;
|
|
border: 2px dashed white;
|
|
|
|
h3 {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
&.firstRun {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 302px;
|
|
width: 225px;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: -35px;
|
|
width: 0;
|
|
height: 0;
|
|
border: solid 10px white;
|
|
border-color: transparent white transparent transparent;
|
|
transform: scaleX(2.5) scaleY(0.75);
|
|
}
|
|
&:after {
|
|
border-color: transparent #2eace0 transparent transparent;
|
|
left: -30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conversation.placeholder {
|
|
text-align: center;
|
|
.container {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.content {
|
|
display: inline-block;
|
|
}
|
|
|
|
h3 {
|
|
font-size: large;
|
|
}
|
|
}
|
|
.contact.placeholder {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
background: transparent;
|
|
color: white;
|
|
border: 2px dashed white;
|
|
overflow: visible;
|
|
p {
|
|
color: white;
|
|
}
|
|
&:before,
|
|
&:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 15px;
|
|
width: 0;
|
|
height: 0;
|
|
border: solid 10px white;
|
|
border-color: transparent transparent white transparent;
|
|
transform: scaleY(2.5) scaleX(0.75);
|
|
}
|
|
&:after {
|
|
border-color: transparent transparent #2eace0 transparent;
|
|
top: -30px;
|
|
}
|
|
}
|