keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

refactor scss

Browse Source
pull/1315/head
Audric Ackermann 5 years ago
parent a03132f088
commit b1e29cc89f
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
14 changed files with 532 additions and 996 deletions
Show Stats Download Patch File Download Diff File

198
stylesheets/_avatar.scss
Unescape Escape View File

@ -0,0 +1,198 @@
// Module: Avatar
.module-avatar {
position: relative;
vertical-align: middle;
display: inline-block;
border-radius: 50%;
img {
object-fit: cover;
border-radius: 50%;
}
}
.module-avatar__label {
width: 100%;
text-align: center;
font-weight: 300;
text-transform: uppercase;
color: $color-white;
}
.module-avatar__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.module-avatar__icon--crown-wrapper {
position: relative;
bottom: -38px;
right: -16px;
height: 21px;
width: 21px;
transform: translate(25%, 25%);
padding: 9%;
background-color: $color-white;
border-radius: 50%;
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
}
.module-avatar__icon--crown {
@include color-svg('../images/crown.svg', #ffb000);
height: 100%;
width: 100%;
}
.module-avatar__icon--group {
@include color-svg('../images/profile-group.svg', $color-white);
}
.module-avatar__icon--direct {
@include color-svg('../images/profile-individual.svg', $color-white);
}
.module-avatar--28 {
height: 28px;
width: 28px;
img {
height: 28px;
width: 28px;
}
}
.module-avatar__label--28 {
font-size: 14px;
line-height: 28px;
}
.module-avatar__icon--28 {
height: 16px;
width: 16px;
}
.module-avatar--36 {
height: 36px;
width: 36px;
img {
height: 36px;
width: 36px;
}
}
.module-avatar__label--36 {
margin-top: 1px;
width: 36px;
font-size: 16px;
letter-spacing: 0.19px;
line-height: 36px;
}
.module-avatar__icon--36 {
height: 20px;
width: 20px;
}
.module-avatar--48 {
height: 48px;
width: 48px;
img {
height: 48px;
width: 48px;
}
}
.module-avatar__label--48 {
width: 48px;
font-size: 20px;
letter-spacing: 0.19px;
line-height: 48px;
}
.module-avatar__icon--48 {
height: 26px;
width: 26px;
}
.module-avatar--80 {
height: 80px;
width: 80px;
img {
height: 80px;
width: 80px;
}
}
.module-avatar__label--80 {
width: 80px;
font-size: 40px;
line-height: 82px;
}
.module-avatar__icon--80 {
height: 42px;
width: 42px;
}
.module-avatar--300 {
height: 300px;
width: 300px;
img {
height: 300px;
width: 300px;
}
}
.module-avatar__label--300 {
width: 300px;
font-size: 150px;
line-height: 302px;
}
.module-avatar__icon--300 {
height: 158px;
width: 158px;
}
.module-avatar__icon--note-to-self {
width: 70%;
height: 70%;
@include color-svg('../images/note-28.svg', $color-white);
}
// Module: Avatar
.module-avatar__label {
color: $color-gray-05;
}
.module-avatar__icon--group {
background-color: $color-gray-05;
}
.module-avatar__icon--direct {
background-color: $color-gray-05;
}
.module-avatar__icon--note-to-self {
background-color: $color-gray-05;
}
.module-avatar__icon--crown-wrapper {
background-color: $color-gray-75;
}
.module-avatar--no-image {
@include themify($themes) {
background-color: themed('steelColorShade');
}
}

195
stylesheets/_conversation.scss
Unescape Escape View File

@ -64,10 +64,6 @@
overflow-y: auto;
}
.discussion-container {
background-color: $color-white;
}
.key-verification {
label {
display: block;
@ -464,6 +460,11 @@
resize: none;
font-size: 1em;
font-family: inherit;
&[disabled='disabled'] {
cursor: not-allowed;
}
}
.capture-audio {
float: right;
@ -495,190 +496,28 @@
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.confirmation-dialog {
.content {
max-width: 350px;
margin: 100px auto;
padding: 1em;
background: white;
border-radius: $border-radius;
overflow: auto;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
.buttons {
margin-top: 10px;
button {
float: right;
margin-left: 10px;
background-color: $grey_l;
border-radius: $border-radius;
padding: 5px 8px;
border: 1px solid $grey_l2;
&:hover {
background-color: $grey_l2;
border-color: $grey_l3;
}
}
}
}
}
.loki-dialog {
display: flex;
align-items: center;
justify-content: center;
.content {
max-width: 75%;
min-width: 60%;
padding: 1em;
background: white;
border-radius: $border-radius;
overflow: auto;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}
button {
float: right;
margin-left: 10px;
background-color: $color-loki-green;
border-radius: 100px;
padding: 5px 15px;
border: 1px solid $color-loki-green;
color: white;
outline: none;
user-select: none;
&:hover,
&:disabled {
background-color: $color-loki-green-dark;
border-color: $color-loki-green-dark;
}
&:disabled {
cursor: not-allowed;
}
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 0;
outline: none;
border-radius: 4px;
background-color: $color-loki-light-gray;
&:focus {
outline: none;
}
}
h4 {
margin-top: 8px;
margin-bottom: 16px;
}
}
.nickname-dialog {
.message {
font-style: italic;
color: $grey;
font-size: 12px;
margin-bottom: 16px;
}
}
.seed-dialog {
.title {
font-weight: bold;
}
.fields {
margin-top: 20px;
}
.seed {
padding: 20px 0;
font-style: oblique;
}
}
.permissions-popup,
.debug-log-window {
.modal {
background-color: transparent;
padding: 0;
}
.confirmation-dialog .content {
box-shadow: 0px 0px 0px 0px;
max-width: 1000px;
margin: 0;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
}
.module-last-seen-indicator {
padding-top: 25px;
padding-bottom: 35px;
margin-left: 28px;
margin-right: 28px;
}
.module-last-seen-indicator__bar {
background-color: $color-light-60;
width: 100%;
height: 2px;
}
.module-last-seen-indicator__text {
margin-top: 3px;
font-size: 11px;
line-height: 16px;
letter-spacing: 0.3px;
text-transform: uppercase;
text-align: center;
color: $color-light-90;
}
.module-scroll-down {
z-index: 100;
position: absolute;
right: 20px;
bottom: 10px;
}
.module-scroll-down__button {
height: 44px;
width: 44px;
border-radius: 22px;
text-align: center;
background-color: $color-light-35;
border: none;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
outline: none;
&:hover {
background-color: $color-light-45;
&__bar {
background-color: $color-light-60;
width: 100%;
height: 2px;
}
}
.module-scroll-down__button--new-messages {
background-color: $color-signal-blue;
&__text {
margin-top: 3px;
font-size: 11px;
line-height: 16px;
letter-spacing: 0.3px;
text-transform: uppercase;
&:hover {
background-color: #1472bd;
text-align: center;
color: $color-light-90;
}
}
.module-scroll-down__icon {
@include color-svg('../images/down.svg', $color-white);
height: 100%;
width: 100%;
}

74
stylesheets/_global.scss
Unescape Escape View File

@ -13,10 +13,12 @@ body {
height: 100%;
width: 100%;
margin: 0;
font-family: $roboto;
font-family: $session-font-default;
font-size: 14px;
}
// scrollbars
::-webkit-scrollbar {
width: 9px;
@ -27,10 +29,9 @@ body {
@include themify($themes) {
background: themed('scrollBarThumb');
border: solid 2px themed('textColorOpposite');
&:hover {
background: $color-light-45;
}
}
&:hover {
background: $color-light-45;
}
}
::-webkit-scrollbar-track {
@ -337,7 +338,7 @@ $loading-height: 16px;
right: 0;
top: 0;
bottom: 0;
font-family: roboto-light;
font-family: $session-font-default;
&.overlay {
// .modal, used for the settings view, is 100
@ -365,7 +366,7 @@ $loading-height: 16px;
input {
margin-bottom: 1em;
font-size: 12pt;
font-family: roboto-light;
font-family: $session-font-default;
border: 2px solid $blue;
padding: 0.5em;
text-align: center;
@ -671,18 +672,6 @@ $loading-height: 16px;
margin-top: 12px;
}
.standalone-mnemonic-inputs {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 8px;
input {
flex: 1;
margin: 0;
margin-right: 12px;
}
}
input {
border: 1px solid $color-light-60;
@ -793,39 +782,6 @@ $loading-height: 16px;
transition: $session-transition-duration all ease;
}
}
.password-inputs,
.standalone-mnemonic-inputs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
input {
margin-bottom: 0.5em;
}
.error {
margin-bottom: 1em;
}
.error-input {
border: 3px solid $color-vermilion;
&:focus {
outline: none;
}
}
.match-input {
border: 3px solid $color-loki-green;
&:focus {
outline: none;
}
}
}
@media (min-height: 750px) and (min-width: 700px) {
.input-header {
font-size: 18px;
@ -849,17 +805,3 @@ $loading-height: 16px;
.inbox {
position: relative;
}
.qr-dialog {
.content {
width: 300px !important;
max-width: none !important;
min-width: auto !important;
}
#qr {
display: flex;
justify-content: center;
margin-bottom: 1em;
}
}

219
stylesheets/_modal.scss
Unescape Escape View File

@ -78,3 +78,222 @@
transition: all 250ms linear;
}
}
.loki-dialog {
display: flex;
align-items: center;
justify-content: center;
.content {
max-width: 75%;
min-width: 60%;
padding: 1em;
background: white;
border-radius: $border-radius;
overflow: auto;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}
button {
float: right;
margin-left: 10px;
background-color: $color-loki-green;
border-radius: 100px;
padding: 5px 15px;
border: 1px solid $color-loki-green;
color: white;
outline: none;
user-select: none;
&:hover,
&:disabled {
background-color: $color-loki-green-dark;
border-color: $color-loki-green-dark;
}
&:disabled {
cursor: not-allowed;
}
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 0;
outline: none;
border-radius: 4px;
background-color: $color-loki-light-gray;
&:focus {
outline: none;
}
}
h4 {
margin-top: 8px;
margin-bottom: 16px;
}
}
.nickname-dialog {
.message {
font-style: italic;
color: $grey;
font-size: 12px;
margin-bottom: 16px;
}
}
.seed-dialog {
.title {
font-weight: bold;
}
.fields {
margin-top: 20px;
}
.seed {
padding: 20px 0;
font-style: oblique;
}
}
.permissions-popup,
.debug-log-window {
.modal {
background-color: transparent;
padding: 0;
}
}
.loki-dialog {
& ~ .index.inbox {
filter: blur(2px);
transition: filter 0.1s;
}
input {
color: $color-dark-05;
background-color: $color-dark-70;
border-color: $color-dark-55;
}
}
.nickname-dialog {
.message {
color: $color-light-35;
}
}
.edit-profile-dialog {
.session-modal__header__title {
font-size: $session-font-lg;
}
.session-modal {
width: $session-modal-size-md;
&__header {
height: 68.45px;
}
}
.avatar-center-inner {
position: relative;
.module-avatar {
box-shadow: 0 0 23px 0 rgba($session-color-black, 0.78);
}
.qr-view-button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: -3px;
height: 26px;
width: 26px;
border-radius: 50%;
padding-top: 3px;
background-color: $session-color-white;
transition: $session-transition-duration;
&:hover {
filter: brightness(90%);
}
.session-icon-button {
opacity: 1;
}
}
}
.session-id-section {
display: flex;
align-items: center;
flex-direction: column;
.panel-text-divider {
margin-top: 35px;
margin-bottom: 35px;
}
&-display {
user-select: text;
text-align: center;
word-break: break-all;
font-size: $session-font-md;
padding: 0px $session-margin-lg;
font-family: $session-font-default;
font-weight: 100;
@include themify($themes) {
color: themed('textColor');
}
font-size: $session-font-md;
padding: 0px $session-margin-sm;
}
.session-button {
width: 148px;
}
}
.profile-name {
display: flex;
justify-content: center;
margin-top: $session-margin-lg;
&-input {
height: 38px;
width: 142px;
border-radius: 5px;
text-align: center;
font-size: $session-font-md;
@include themify($themes) {
background: themed('inputBackground');
color: themed('textColor');
}
}
&-uneditable {
display: flex;
align-items: center;
justify-content: center;
margin-left: $session-margin-lg;
p {
font-size: $session-font-md;
padding: 0px $session-margin-sm;
}
}
}
}

291
stylesheets/_modules.scss
Unescape Escape View File

@ -175,7 +175,7 @@
display: inline-block;
position: absolute;
bottom: 4px;
@include color-svg('../images/error.svg', $color-core-red);
@include color-svg('../images/error.svg', $session-color-danger);
}
.module-message__error--outgoing {
@ -197,15 +197,6 @@
min-width: 0px;
}
.module-message__container--outgoing {
background-color: $color-light-10;
}
// In case the color gets messed up
.module-message__container--incoming {
background-color: $color-conversation-grey;
}
.module-message__attachment-container {
// Entirely to ensure that images are centered if they aren't full width of bubble
text-align: center;
@ -306,7 +297,7 @@
height: 16px;
width: 16px;
@include color-svg('../images/error-filled.svg', $color-core-red);
@include color-svg('../images/error-filled.svg', $session-color-danger);
}
.module-message__generic-attachment__icon__extension {
@ -576,7 +567,7 @@
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: $color-signal-blue;
color: $color-loki-green;
background-color: $color-light-02;
border: 1px solid $color-black-012;
@ -709,15 +700,6 @@
border-bottom-right-radius: 0px;
}
.module-quote--outgoing {
border-left-color: $color-conversation-grey;
background-color: $color-conversation-grey-tint;
}
.module-quote--incoming {
border-left-color: $color-white;
background-color: $color-conversation-grey-tint;
}
.module-quote__primary {
flex-grow: 1;
@ -844,19 +826,19 @@
}
.module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', $color-signal-blue);
@include color-svg('../images/file.svg', $color-loki-green);
}
.module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', $color-signal-blue);
@include color-svg('../images/image.svg', $color-loki-green);
}
.module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', $color-signal-blue);
@include color-svg('../images/microphone.svg', $color-loki-green);
}
.module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', $color-signal-blue);
@include color-svg('../images/play.svg', $color-loki-green);
}
.module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', $color-signal-blue);
@include color-svg('../images/movie.svg', $color-loki-green);
}
.module-quote__generic-file {
@ -1179,7 +1161,7 @@
font-weight: 300;
line-height: 18px;
padding: 12px;
color: $color-signal-blue;
color: $color-loki-green;
background-color: $color-light-02;
border-radius: 4px;
}
@ -1469,7 +1451,7 @@
.module-message-detail__delete-button {
@include button-reset;
background-color: $color-core-red;
background-color: $session-color-danger;
color: $color-white;
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px;
@ -1496,7 +1478,7 @@
}
.module-message-detail__contact__error {
color: $color-core-red;
color: $session-color-danger;
font-weight: 300;
}
@ -1533,7 +1515,7 @@
width: 18px;
}
.module-message-detail__contact__status-icon--error {
@include color-svg('../images/error.svg', $color-core-red);
@include color-svg('../images/error.svg', $session-color-danger);
}
.module-message-detail__contact__unidentified-delivery-icon {
@ -1560,7 +1542,7 @@
.module-message-detail__contact__send-anyway {
@include button-reset;
color: $color-white;
background-color: $color-core-red;
background-color: $session-color-danger;
margin-left: 5px;
margin-top: 5px;
padding: 4px;
@ -1735,7 +1717,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', $color-signal-blue);
@include color-svg('../images/play.svg', $color-loki-green);
}
.module-media-grid-item__icon-video {
@ -1778,34 +1760,9 @@
}
}
.module-conversation-list-item--has-unread {
padding-left: 12px;
border-left: 4px solid $color-signal-blue;
}
.module-conversation-list-item--has-friend-request {
padding-left: 12px;
border-left: 4px solid $color-conversation-indigo;
}
.module-conversation-list-item--is-blocked {
padding-left: 12px;
border-left: 4px solid $color-conversation-red;
}
.module-conversation-list-item--is-selected {
background-color: $color-dark-70;
}
.module-conversation-list-item__avatar-container {
position: relative;
margin-top: 8px;
margin-bottom: 8px;
}
.module-conversation-list-item__unread-count {
color: $color-white;
background-color: $color-signal-blue;
background-color: $color-loki-green;
text-align: center;
padding-top: 1px;
@ -1945,218 +1902,10 @@
width: 18px;
}
.module-conversation-list-item__message__status-icon--error {
@include color-svg('../images/error.svg', $color-core-red);
}
// Module: Avatar
.module-avatar {
position: relative;
vertical-align: middle;
display: inline-block;
border-radius: 50%;
img {
object-fit: cover;
border-radius: 50%;
}
}
.module-avatar__label {
width: 100%;
text-align: center;
font-weight: 300;
text-transform: uppercase;
color: $color-white;
}
.module-avatar__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.module-avatar__icon--crown-wrapper {
position: relative;
bottom: -38px;
right: -16px;
height: 21px;
width: 21px;
transform: translate(25%, 25%);
padding: 9%;
background-color: $color-white;
border-radius: 50%;
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
}
.module-avatar__icon--crown {
@include color-svg('../images/crown.svg', #ffb000);
height: 100%;
width: 100%;
}
.module-avatar__icon--group {
@include color-svg('../images/profile-group.svg', $color-white);
}
.module-avatar__icon--direct {
@include color-svg('../images/profile-individual.svg', $color-white);
}
.module-avatar--28 {
height: 28px;
width: 28px;
img {
height: 28px;
width: 28px;
}
@include color-svg('../images/error.svg', $session-color-danger);
}
.module-avatar__label--28 {
font-size: 14px;
line-height: 28px;
}
.module-avatar__icon--28 {
height: 16px;
width: 16px;
}
.module-avatar--36 {
height: 36px;
width: 36px;
img {
height: 36px;
width: 36px;
}
}
.module-avatar__label--36 {
margin-top: 1px;
width: 36px;
font-size: 16px;
letter-spacing: 0.19px;
line-height: 36px;
}
.module-avatar__icon--36 {
height: 20px;
width: 20px;
}
.module-avatar--48 {
height: 48px;
width: 48px;
img {
height: 48px;
width: 48px;
}
}
.module-avatar__label--48 {
width: 48px;
font-size: 20px;
letter-spacing: 0.19px;
line-height: 48px;
}
.module-avatar__icon--48 {
height: 26px;
width: 26px;
}
.module-avatar--80 {
height: 80px;
width: 80px;
img {
height: 80px;
width: 80px;
}
}
.module-avatar__label--80 {
width: 80px;
font-size: 40px;
line-height: 82px;
}
.module-avatar__icon--80 {
height: 42px;
width: 42px;
}
.module-avatar--300 {
height: 300px;
width: 300px;
img {
height: 300px;
width: 300px;
}
}
.module-avatar__label--300 {
width: 300px;
font-size: 150px;
line-height: 302px;
}
.module-avatar__icon--300 {
height: 158px;
width: 158px;
}
.module-avatar__icon--note-to-self {
width: 70%;
height: 70%;
@include color-svg('../images/note-28.svg', $color-white);
}
.module-avatar--no-image {
background-color: $color-conversation-grey;
}
.module-avatar--signal-blue {
background-color: $color-signal-blue;
}
.module-avatar--red {
background-color: $color-conversation-red;
}
.module-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-avatar--brown {
background-color: $color-conversation-brown;
}
.module-avatar--pink {
background-color: $color-conversation-pink;
}
.module-avatar--purple {
background-color: $color-conversation-purple;
}
.module-avatar--indigo {
background-color: $color-conversation-indigo;
}
.module-avatar--blue {
background-color: $color-conversation-blue;
}
.module-avatar--teal {
background-color: $color-conversation-teal;
}
.module-avatar--green {
background-color: $color-conversation-green;
}
.module-avatar--light_green {
background-color: $color-conversation-light_green;
}
.module-avatar--blue_grey {
background-color: $color-conversation-blue_grey;
}
// Module: Main Header
@ -2427,7 +2176,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', $color-signal-blue);
@include color-svg('../images/play.svg', $color-loki-green);
}
.module-image__text-container {
@ -2672,7 +2421,7 @@
margin-top: 5px;
text-align: center;
font-family: Roboto;
font-family: $session-font-default;
font-size: 14px;
overflow: hidden;
@ -2784,14 +2533,14 @@
color: $color-white-07;
}
&:focus {
border: 1px solid $color-signal-blue;
border: 1px solid $color-loki-green;
outline: none;
}
}
.module-caption-editor__save-button {
position: absolute;
background-color: $color-signal-blue;
background-color: $color-loki-green;
color: $color-white;
cursor: pointer;

2
stylesheets/_options.scss
Unescape Escape View File

@ -1,2 +0,0 @@
@import 'variables';
@import 'progress';

0
stylesheets/_progress.scss
Unescape Escape View File

12
stylesheets/_recorder.scss
Unescape Escape View File

@ -52,20 +52,20 @@
}
.finish {
background: lighten($color-core-green, 20%);
border: 1px solid $color-core-green;
background: lighten($session-color-green, 20%);
border: 1px solid $session-color-green;
.icon {
@include color-svg('../images/check.svg', $color-core-green);
@include color-svg('../images/check.svg', $session-color-green);
}
}
.close {
background: lighten($color-core-red, 20%);
border: 1px solid $color-core-red;
background: lighten($session-color-danger, 20%);
border: 1px solid $session-color-danger;
.icon {
@include color-svg('../images/x.svg', $color-core-red);
@include color-svg('../images/x.svg', $session-color-danger);
}
}

130
stylesheets/_session.scss
Unescape Escape View File

@ -8,11 +8,6 @@ div.spacer-lg {
height: $session-margin-lg;
}
// Blur for modals
.loki-dialog ~ .index.inbox {
filter: blur(2px);
transition: filter 0.1s;
}
.subtle {
opacity: 0.6;
@ -912,109 +907,6 @@ label {
}
}
.edit-profile-dialog {
.session-modal__header__title {
font-size: $session-font-lg;
}
.session-modal {
width: $session-modal-size-md;
&__header {
height: 68.45px;
}
}
.avatar-center-inner {
position: relative;
.module-avatar {
box-shadow: 0 0 23px 0 rgba($session-color-black, 0.78);
}
.qr-view-button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: -3px;
height: 26px;
width: 26px;
border-radius: 50%;
padding-top: 3px;
background-color: $session-color-white;
transition: $session-transition-duration;
&:hover {
filter: brightness(90%);
}
.session-icon-button {
opacity: 1;
}
}
}
.session-id-section {
display: flex;
align-items: center;
flex-direction: column;
.panel-text-divider {
margin-top: 35px;
margin-bottom: 35px;
}
&-display {
user-select: text;
text-align: center;
word-break: break-all;
font-size: $session-font-md;
padding: 0px $session-margin-lg;
font-family: $session-font-default;
font-weight: 100;
@include themify($themes) {
color: themed('textColor');
}
font-size: $session-font-md;
padding: 0px $session-margin-sm;
}
.session-button {
width: 148px;
}
}
.profile-name {
display: flex;
justify-content: center;
margin-top: $session-margin-lg;
&-input {
height: 38px;
width: 142px;
border-radius: 5px;
text-align: center;
font-size: $session-font-md;
@include themify($themes) {
background: themed('inputBackground');
}
}
&-uneditable {
display: flex;
align-items: center;
justify-content: center;
margin-left: $session-margin-lg;
p {
font-size: $session-font-md;
padding: 0px $session-margin-sm;
}
}
}
}
.image-upload-section {
display: flex;
@ -1281,14 +1173,6 @@ label {
border-radius: 3px;
}
.qr-dialog {
&__description {
max-width: $session-modal-size-sm;
text-align: center;
margin: 0 auto;
}
}
.seed-dialog {
&__description {
max-width: $session-modal-size-lg;
@ -1463,9 +1347,7 @@ input {
}
}
.loki-dialog button {
border: none;
}
.friend-selection-list {
width: 20vw;
@ -1501,9 +1383,17 @@ input {
}
}
.module-scroll-down {
animation: fadein $session-fadein-duration;
}
.module-scroll-down {
z-index: 99;
position: absolute;
right: 20px;
bottom: 15px;
animation: fadein $session-fadein-duration;
.session-icon-button {
display: flex;

19
stylesheets/_session_theme.scss
Unescape Escape View File

@ -1,11 +1,14 @@
// Messages
@import 'themes.scss';
.discussion-container {
@include themify($themes) {
background: none;
}
}
// body.dark-theme {
// @include themify($themes) {
// background-color: themed('cellBackground');
// }
// color: red;
// background-color: blue
// }
.conversation {
background: none !important;
@ -117,16 +120,14 @@
.inbox {
@include themify($themes) {
background: themed('inboxBackground');
color: themed('textColor');
}
}
.conversation {
background: none !important;
background: none;
}
.discussion-container {
background-color: #141414;
}
@mixin session-h-title {
@include fontAccentBold();

258
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -1,20 +1,5 @@
// Don't forget to handle the background of the popup windows!
body.dark-theme {
background-color: $color-black;
color: $color-gray-05;
}
.dark-theme {
// _conversation
.conversation {
background-color: $color-gray-95;
}
.discussion-container {
background-color: $color-gray-95;
}
.key-verification {
.key {
color: $color-dark-05;
@ -33,84 +18,6 @@ body.dark-theme {
}
}
.bottom-bar {
form.send {
&.video-attachment {
.outer {
.play.icon {
@include color-svg('../images/play.svg', white);
}
}
}
}
.send-message {
outline: 0;
&[disabled='disabled'] {
cursor: not-allowed;
}
}
}
.toast {
background-color: $color-gray-45;
color: $color-white;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12),
0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.confirmation-dialog {
.content {
background: $color-black;
color: $color-dark-05;
.buttons {
button {
background-color: $color-dark-85;
border-radius: $border-radius;
border: 1px solid $color-dark-60;
color: $color-dark-05;
&:hover {
background-color: $color-dark-70;
border-color: $color-dark-55;
}
}
}
}
}
.loki-dialog {
.content {
background: $color-black;
color: $color-dark-05;
}
button {
background-color: $color-dark-85;
border-radius: $border-radius;
color: $color-dark-05;
&:hover {
background-color: $color-dark-70;
border-color: $color-dark-55;
}
}
input {
color: $color-dark-05;
background-color: $color-dark-70;
border-color: $color-dark-55;
}
}
.nickname-dialog {
.message {
color: $color-light-35;
}
}
.module-last-seen-indicator__bar {
background-color: #353535;
}
@ -119,27 +26,6 @@ body.dark-theme {
color: $color-dark-30;
}
.module-scroll-down__button {
background-color: $color-light-35;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
&:hover {
background-color: $color-light-45;
}
}
.module-scroll-down__button--new-messages {
background-color: $color-signal-blue;
&:hover {
background-color: #1472bd;
}
}
.module-scroll-down__icon {
@include color-svg('../images/down.svg', $color-white);
}
// _debugLog
.debug-log {
@ -266,6 +152,7 @@ body.dark-theme {
}
}
// banner shown when app version expired and must be updated
.expiredAlert {
background: $session-color-green;
color: black;
@ -384,10 +271,6 @@ body.dark-theme {
}
// _index
.gutter {
background-color: $color-dark-85;
}
.network-status-container {
.network-status {
background: url('../images/error_red.svg') no-repeat left 10px center;
@ -539,7 +422,7 @@ body.dark-theme {
}
.module-message__error {
@include color-svg('../images/error.svg', $color-core-red);
@include color-svg('../images/error.svg', $session-color-danger);
}
.module-message__img-border-overlay {
@ -580,7 +463,7 @@ body.dark-theme {
}
.module-message__video-overlay__play-icon {
@include color-svg('../images/play.svg', $color-signal-blue);
@include color-svg('../images/play.svg', $color-loki-green);
}
.module-message__broken-video-screenshot {
@ -655,7 +538,7 @@ body.dark-theme {
}
.module-message__send-message-button {
color: $color-signal-blue;
color: $color-loki-green;
background-color: $color-dark-70;
border: 1px solid $color-dark-60;
}
@ -714,13 +597,17 @@ body.dark-theme {
// Module: Quoted Reply
.module-quote--outgoing {
border-left-color: $color-conversation-grey;
background-color: $color-conversation-grey-shade;
@include themify($themes) {
border-left-color: themed('steelColor');
background-color: themed('steelColorShade');
}
}
.module-quote--incoming {
border-left-color: $color-black;
background-color: $color-conversation-grey-shade;
@include themify($themes) {
border-left-color: themed('steelColor');
background-color: themed('steelColorShade');
}
}
.module-quote__primary__author {
@ -752,19 +639,19 @@ body.dark-theme {
}
.module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', $color-signal-blue);
@include color-svg('../images/file.svg', $color-loki-green);
}
.module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', $color-signal-blue);
@include color-svg('../images/image.svg', $color-loki-green);
}
.module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', $color-signal-blue);
@include color-svg('../images/microphone.svg', $color-loki-green);
}
.module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', $color-signal-blue);
@include color-svg('../images/play.svg', $color-loki-green);
}
.module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', $color-signal-blue);
@include color-svg('../images/movie.svg', $color-loki-green);
}
.module-quote__generic-file__text {
@ -843,7 +730,7 @@ body.dark-theme {
}
.module-verification-notification__button {
color: $color-signal-blue;
color: $color-loki-green;
background-color: $color-gray-75;
}
@ -918,14 +805,14 @@ body.dark-theme {
}
.module-message-detail__delete-button {
background-color: $color-core-red;
background-color: $session-color-danger;
color: $color-white;
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border: solid 1px $color-light-35;
}
.module-message-detail__contact__error {
color: $color-core-red;
color: $session-color-danger;
}
.module-message-detail__contact__status-icon--sending {
@ -942,7 +829,7 @@ body.dark-theme {
@include color-svg('../images/read.svg', $color-light-35);
}
.module-message-detail__contact__status-icon--error {
@include color-svg('../images/error.svg', $color-core-red);
@include color-svg('../images/error.svg', $session-color-danger);
}
.module-message-detail__contact__show-safety-number {
@ -951,7 +838,7 @@ body.dark-theme {
}
.module-message-detail__contact__send-anyway {
color: $color-white;
background-color: $color-core-red;
background-color: $session-color-danger;
}
// Module: Media Gallery
@ -961,7 +848,7 @@ body.dark-theme {
}
.module-media-gallery__tab--active {
border-bottom: 2px solid $color-signal-blue;
border-bottom: 2px solid $color-loki-green;
}
// Module: Document List Item
@ -1000,22 +887,12 @@ body.dark-theme {
// Module: Conversation List Item
.module-conversation-list-item {
&:hover {
background-color: $color-dark-70;
}
}
.module-conversation-list-item--has-unread {
border-left: 4px solid $color-signal-blue;
}
.module-conversation-list-item--has-friend-request {
border-left: 4px solid $color-conversation-indigo;
border-left: 4px solid $color-loki-green;
}
.module-conversation-list-item--is-blocked {
border-left: 4px solid $color-conversation-red;
border-left: 4px solid $session-color-danger;
}
.module-conversation-list-item--is-selected {
@ -1024,7 +901,7 @@ body.dark-theme {
.module-conversation-list-item__unread-count {
color: $color-white;
background-color: $color-signal-blue;
background-color: $color-loki-green;
box-shadow: 0px 0px 0px 1px $color-dark-85;
}
@ -1064,32 +941,6 @@ body.dark-theme {
width: 18px;
}
// Module: Avatar
.module-avatar__label {
color: $color-gray-05;
}
.module-avatar__icon--group {
background-color: $color-gray-05;
}
.module-avatar__icon--direct {
background-color: $color-gray-05;
}
.module-avatar__icon--note-to-self {
background-color: $color-gray-05;
}
.module-avatar__icon--crown-wrapper {
background-color: $color-gray-75;
}
.module-avatar--no-image {
background-color: $color-conversation-grey-shade;
}
// Module: Main Header
.module-main-header__search__input {
@ -1108,10 +959,6 @@ body.dark-theme {
}
}
.module-main-header__search__icon {
@include color-svg('../images/search.svg', $color-gray-25);
}
.module-main-header__search__cancel-icon {
@include color-svg('../images/x-16.svg', $color-gray-25);
}
@ -1130,7 +977,6 @@ body.dark-theme {
background-color: $color-white-015;
}
// Module: Image Grid
// Module: Typing Animation
@ -1247,13 +1093,13 @@ body.dark-theme {
color: $color-white-07;
}
&:focus {
border: 1px solid $color-signal-blue;
border: 1px solid $color-loki-green;
outline: none;
}
}
.module-caption-editor__save-button {
background-color: $color-signal-blue;
background-color: $color-loki-green;
color: $color-white;
}
@ -1295,43 +1141,7 @@ body.dark-theme {
color: $color-gray-05;
}
// Third-party module: react-contextmenu
.react-contextmenu {
background-color: $color-dark-85;
border: 1px solid $color-light-60;
}
.react-contextmenu-item {
color: $color-dark-05;
}
.react-contextmenu-item--checked:before {
color: $color-dark-05;
}
.react-contextmenu-item.react-contextmenu-submenu
> .react-contextmenu-item:after {
color: $color-dark-05;
}
.react-contextmenu-item.react-contextmenu-item--active,
.react-contextmenu-item.react-contextmenu-item--selected {
color: $color-white;
background-color: $color-light-35;
}
.react-contextmenu-item.react-contextmenu-item--active.react-contextmenu-item--checked:before,
.react-contextmenu-item.react-contextmenu-item--selected.react-contextmenu-item--checked:before {
color: $color-white;
}
.react-contextmenu-item.react-contextmenu-submenu
> .react-contextmenu-item.react-contextmenu-item--active:after,
.react-contextmenu-item.react-contextmenu-submenu
> .react-contextmenu-item.react-contextmenu-item--selected:after {
color: $color-white;
}
.capture-audio {
.microphone {
@ -1344,20 +1154,20 @@ body.dark-theme {
background: $color-black;
.finish {
background: lighten($color-core-green, 20%);
border: 1px solid $color-core-green;
background: lighten($session-color-green, 20%);
border: 1px solid $session-color-green;
.icon {
@include color-svg('../images/check.svg', $color-core-green);
@include color-svg('../images/check.svg', $session-color-green);
}
}
.close {
background: lighten($color-core-red, 20%);
border: 1px solid $color-core-red;
background: lighten($session-color-danger, 20%);
border: 1px solid $session-color-danger;
.icon {
@include color-svg('../images/x.svg', $color-core-red);
@include color-svg('../images/x.svg', $session-color-danger);
}
}

115
stylesheets/_variables.scss
Unescape Escape View File

@ -1,31 +1,3 @@
@font-face {
font-family: 'Roboto-Light';
src: url('../fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
}
$roboto: Roboto, 'Helvetica Neue', 'Source Sans Pro', 'Source Han Sans SC',
'Source Han Sans CN', 'Hiragino Sans GB', 'Hiragino Kaku Gothic',
'Microsoft Yahei UI', Helvetica, Arial, sans-serif;
// Loki colors
$color-loki-light-gray: #e9e9e9;
$color-loki-dark-gray: #323232;
@ -38,15 +10,6 @@ $color-loki-green-gradient: linear-gradient(
rgb(0, 133, 34) 100%
);
// New colors
$color-signal-blue: #2090ea;
$color-core-green: #4caf50;
$color-core-red: #f44336;
$color-signal-blue-025: rgba($color-signal-blue, 0.25);
$color-signal-blue-050: rgba($color-signal-blue, 0.5);
$color-white: #ffffff;
$color-gray-02: #f8f9f9;
$color-gray-05: #eeefef;
@ -60,44 +23,6 @@ $color-gray-90: #17191d;
$color-gray-95: #0f1012;
$color-black: #000000;
$color-crimson: #cc163d;
$color-vermilion: #c73800;
$color-burlap: #746c53;
$color-forest: #3b7845;
$color-wintergreen: #1c8260;
$color-teal: #067589;
$color-blue: #336ba3;
$color-indigo: #5951c8;
$color-violet: #862caf;
$color-plum: #a23474;
$color-taupe: #895d66;
$color-steel: #6b6b78;
$color-crimson-tint: #eda6ae;
$color-vermilion-tint: #eba78e;
$color-burlap-tint: #c4b997;
$color-forest-tint: #8fcc9a;
$color-wintergreen-tint: #9bcfbd;
$color-teal-tint: #a5cad5;
$color-blue-tint: #adc8e1;
$color-indigo-tint: #c2c1e7;
$color-violet-tint: #cdaddc;
$color-plum-tint: #dcb2ca;
$color-taupe-tint: #cfb5bb;
$color-steel-tint: #bebec6;
$color-crimson-shade: #8a0f29;
$color-vermilion-shade: #872600;
$color-burlap-shade: #58513c;
$color-forest-shade: #2b5934;
$color-wintergreen-shade: #36544a;
$color-teal-shade: #055968;
$color-blue-shade: #285480;
$color-indigo-shade: #4840a0;
$color-violet-shade: #6b248a;
$color-plum-shade: #881b5b;
$color-taupe-shade: #6a4e54;
$color-steel-shade: #5a5a63;
$color-white-015: rgba($color-white, 0.15);
$color-white-02: rgba($color-white, 0.2);
@ -135,46 +60,6 @@ $color-black-02: rgba($color-black, 0.2);
$color-black-04: rgba($color-black, 0.4);
$color-black-06: rgba($color-black, 0.6);
$color-signal-blue-mix: mix($color-signal-blue-025, $color-white-04);
$color-conversation-red: $color-crimson;
$color-conversation-deep_orange: $color-vermilion;
$color-conversation-brown: $color-burlap;
$color-conversation-pink: $color-plum;
$color-conversation-purple: $color-violet;
$color-conversation-indigo: $color-indigo;
$color-conversation-blue: $color-blue;
$color-conversation-teal: $color-teal;
$color-conversation-green: $color-forest;
$color-conversation-light_green: $color-wintergreen;
$color-conversation-blue_grey: $color-taupe;
$color-conversation-grey: $color-steel;
$color-conversation-red-tint: $color-crimson-tint;
$color-conversation-deep_orange-tint: $color-vermilion-tint;
$color-conversation-brown-tint: $color-burlap-tint;
$color-conversation-pink-tint: $color-plum-tint;
$color-conversation-purple-tint: $color-violet-tint;
$color-conversation-indigo-tint: $color-indigo-tint;
$color-conversation-blue-tint: $color-blue-tint;
$color-conversation-teal-tint: $color-teal-tint;
$color-conversation-green-tint: $color-forest-tint;
$color-conversation-light_green-tint: $color-wintergreen-tint;
$color-conversation-blue_grey-tint: $color-taupe-tint;
$color-conversation-grey-tint: $color-steel-tint;
$color-conversation-red-shade: $color-crimson-shade;
$color-conversation-deep_orange-shade: $color-vermilion-shade;
$color-conversation-brown-shade: $color-burlap-shade;
$color-conversation-pink-shade: $color-plum-shade;
$color-conversation-purple-shade: $color-violet-shade;
$color-conversation-indigo-shade: $color-indigo-shade;
$color-conversation-blue-shade: $color-blue-shade;
$color-conversation-teal-shade: $color-teal-shade;
$color-conversation-green-shade: $color-forest-shade;
$color-conversation-light_green-shade: $color-wintergreen-shade;
$color-conversation-blue_grey-shade: $color-taupe-shade;
$color-conversation-grey-shade: $color-steel-shade;
// Old colors

5
stylesheets/manifest.scss
Unescape Escape View File

@ -6,13 +6,13 @@
@import 'global';
// Components
@import 'progress';
@import 'modal';
@import 'debugLog';
@import 'lightbox';
@import 'recorder';
@import 'emoji';
@import 'mentions';
@import 'avatar';
// Build the main view
@import 'index';
@ -36,6 +36,3 @@
@import 'session_group_panel';
@import 'session-slider';
// Installer
@import 'options';

10
stylesheets/themes.scss
Unescape Escape View File

@ -1,3 +1,5 @@
// 13592 lines for manifest.css on date 25 august
$themes: (
light: (
accent: #00e97b,
@ -46,7 +48,10 @@ $themes: (
// context menu
contextMenuBackground: #f5f5f5,
filterSessionText: brightness(0) saturate(100%),
),
steelColor: #6b6b78,
steelColorShage: #5a5a63,
),
dark: (
accent: #00f782,
destructive: #ff453a,
@ -94,6 +99,9 @@ $themes: (
// context menu
contextMenuBackground: #212121,
filterSessionText: none,
steelColor: #6b6b78,
steelColorShage: #5a5a63,
),
);

Write Preview
Loading…
Cancel
Save