From 6ac42a824eeeff833ff504099d49e32f57abd1f8 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 9 Dec 2019 15:22:42 +1100
Subject: [PATCH] move all the registration page css to another scss file
---
stylesheets/_session.scss | 182 +++++++++---------
stylesheets/_session_signin.scss | 320 +++++++++++++++++++++++++++++++
stylesheets/manifest.scss | 1 +
3 files changed, 414 insertions(+), 89 deletions(-)
create mode 100644 stylesheets/_session_signin.scss
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index d112d57a5..64f52f92d 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -211,121 +211,125 @@ $session_message-container-border-radius: 5px;
&.square-outline {
border-radius: 0px;
}
-}
-@mixin set-icon-margin($size) {
- margin: $size / 3;
-}
-.session-icon {
- &.padded-left {
- @include set-icon-margin($session-icon-size-md);
- }
-}
-.session-icon-button {
- opacity: 0.4;
- cursor: pointer;
- display: inline-block;
- transition: opacity $session-transition-duration;
- &:hover {
- opacity: 1;
+ .hidden {
+ visibility: hidden;
}
- &.small.padded {
- @include set-icon-margin($session-icon-size-sm);
+ @mixin set-icon-margin($size) {
+ margin: $size / 3;
}
-
- &.medium.padded {
- @include set-icon-margin($session-icon-size-md);
- }
-
- &.large.padded {
- @include set-icon-margin($session-icon-size-lg);
+ .session-icon {
+ &.padded-left {
+ @include set-icon-margin($session-icon-size-md);
+ }
}
-}
+ .session-icon-button {
+ opacity: 0.4;
+ cursor: pointer;
+ display: inline-block;
+ transition: opacity $session-transition-duration;
+ &:hover {
+ opacity: 1;
+ }
-.session-icon {
- fill: $session-color-white;
-}
+ &.small.padded {
+ @include set-icon-margin($session-icon-size-sm);
+ }
-/* CONVERSATION AND MESSAGES */
+ &.medium.padded {
+ @include set-icon-margin($session-icon-size-md);
+ }
-@mixin standard-icon-button() {
- color: $session-color-white;
- opacity: 0.9;
+ &.large.padded {
+ @include set-icon-margin($session-icon-size-lg);
+ }
+ }
- &:hover {
- opacity: 1;
+ .session-icon {
+ fill: $session-color-white;
}
-}
-.module-conversation-header__title-flex,
-.module-conversation-header__title {
- width: 100%;
+ /* CONVERSATION AND MESSAGES */
- .module-contact-name {
- width: 100%;
- }
+ @mixin standard-icon-button() {
+ color: $session-color-white;
+ opacity: 0.9;
- .module-contact-name__profile-number {
- text-align: center;
+ &:hover {
+ opacity: 1;
+ }
}
-}
-
-.module-message__author__profile-name {
- font-style: normal;
-}
-.module-message__author-avatar {
- flex-direction: column;
- display: inline-flex;
- margin-right: 20px;
- padding-top: 5px;
-}
+ .module-conversation-header__title-flex,
+ .module-conversation-header__title {
+ width: 100%;
-.module-message__container {
- border-radius: $session_message-container-border-radius;
+ .module-contact-name {
+ width: 100%;
+ }
- label {
- user-select: none;
+ .module-contact-name__profile-number {
+ text-align: center;
+ }
}
- .module-message__attachment-container,
- .module-image--curved-bottom-right,
- .module-image--curved-bottom-left {
- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-left-radius: $session_message-container-border-radius;
- border-bottom-right-radius: $session_message-container-border-radius;
+ .module-message__author__profile-name {
+ font-style: normal;
}
- .conversation-header .session-icon-button {
- @include standard-icon-button();
+ .module-message__author-avatar {
+ flex-direction: column;
+ display: inline-flex;
+ margin-right: 20px;
+ padding-top: 5px;
}
- .module-conversation-header,
- .message-selection-overlay {
- height: $session-conversation-header-height;
- }
+ .module-message__container {
+ border-radius: $session_message-container-border-radius;
- .message-selection-overlay {
- position: absolute;
- left: 15px;
- right: 15px;
- display: none;
-
- .close-button {
- float: left;
- margin-top: 17px;
- margin-left: 7px;
+ label {
+ user-select: none;
+ }
+
+ .module-message__attachment-container,
+ .module-image--curved-bottom-right,
+ .module-image--curved-bottom-left {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ border-bottom-left-radius: $session_message-container-border-radius;
+ border-bottom-right-radius: $session_message-container-border-radius;
+ }
+
+ .conversation-header .session-icon-button {
+ @include standard-icon-button();
}
- }
- .message-selection-overlay div[role="button"] {
- display: inline-block;
- }
- .message-selection-overlay .button-group {
- float: right;
- margin-top: 13.5px;
+ .module-conversation-header,
+ .message-selection-overlay {
+ height: $session-conversation-header-height;
+ }
+
+ .message-selection-overlay {
+ position: absolute;
+ left: 15px;
+ right: 15px;
+ display: none;
+
+ .close-button {
+ float: left;
+ margin-top: 17px;
+ margin-left: 7px;
+ }
+ }
+ .message-selection-overlay div[role="button"] {
+ display: inline-block;
+ }
+
+ .message-selection-overlay .button-group {
+ float: right;
+ margin-top: 13.5px;
+ }
}
}
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
new file mode 100644
index 000000000..6cdcc6750
--- /dev/null
+++ b/stylesheets/_session_signin.scss
@@ -0,0 +1,320 @@
+.session-standalone-fullscreen {
+ overflow-y: auto;
+ height: 100%;
+ background: linear-gradient(90deg, #121212 100%, #171717 0%);
+}
+.session-standalone {
+ padding: 0;
+ position: relative;
+}
+.session-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+.session-content-accent {
+ flex-grow: 1;
+ padding-left: 20px;
+}
+
+.session-accent-text {
+ color: $session-color-white;
+ font-family: $session-font-family;
+
+ &.title {
+ font-size: 100px;
+ font-weight: 700;
+ line-height: 120px;
+ }
+
+ &.subtitle {
+ font-size: 18px;
+ font-weight: 700;
+
+ .redacted {
+ background: $session-color-white;
+ white-space: nowrap;
+ transition: background-color $session-transition-duration ease;
+ border-radius: 100px;
+ padding-left: 7px;
+ padding-right: 7px;
+
+ &:hover {
+ background-color: $session-color-black;
+ }
+ }
+ }
+}
+
+.session-content-registration {
+ height: 60%;
+ padding-right: 128px;
+}
+
+.entry-fields {
+ margin: 0px;
+ padding-bottom: 30px;
+}
+
+.session-button {
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ padding: 0 18px 0 18px;
+ font-size: 15px;
+ font-family: $session-font-family;
+ font-weight: 700;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ border-radius: 500px;
+ transition-duration: $session-transition-duration;
+
+ @mixin transparent-background($textAndBorderColor) {
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ overflow: hidden;
+ outline: none;
+ color: $textAndBorderColor;
+ border: 2px solid $textAndBorderColor;
+ }
+
+ &.full-green {
+ background-color: $session-color-green;
+ color: $session-color-white;
+ border: 2px solid $session-color-green;
+
+ &:hover {
+ @include transparent-background($session-color-green);
+ }
+ }
+
+ &.green {
+ @include transparent-background($session-color-green);
+
+ &:hover {
+ background-color: $session-color-green;
+ color: $session-color-white;
+ }
+ }
+
+ &.white {
+ @include transparent-background($session-color-white);
+
+ &:hover {
+ @include transparent-background($session-color-green);
+ }
+ }
+}
+
+.session-icon-button {
+ fill: $session-color-white;
+ opacity: 0.4;
+ cursor: pointer;
+ display: inline-block;
+ transition: opacity $session-transition-duration;
+
+ @mixin adjust-icon-size($size) {
+ line-height: $size;
+ height: $size;
+ width: $size;
+
+ margin: $size / 3;
+
+ img {
+ height: $size;
+ width: $size;
+ }
+ }
+
+ &.small {
+ @include adjust-icon-size($session-icon-size-sm);
+ }
+
+ &.medium {
+ @include adjust-icon-size($session-icon-size-md);
+ }
+
+ &.large {
+ @include adjust-icon-size($session-icon-size-lg);
+ }
+
+ &:hover {
+ opacity: 1;
+ }
+}
+
+.input-with-label-container {
+ height: 46.5px;
+ width: 280px;
+ color: $session-color-white;
+ padding: 2px 0 2px 0;
+ transition: opacity $session-transition-duration;
+ opacity: 1;
+ position: relative;
+
+ label {
+ line-height: 14px;
+ opacity: 0;
+ color: #737373;
+ font-size: 10px;
+ line-height: 11px;
+ position: absolute;
+ top: 0px;
+ }
+
+ &.filled {
+ opacity: 1;
+ }
+
+ input {
+ border: none;
+ outline: 0;
+ height: 14px;
+ width: 280px;
+ background: transparent;
+ color: $session-color-white;
+ font-size: 12px;
+ line-height: 14px;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ hr {
+ border: 1px solid $session-color-white;
+ width: 100%;
+ position: absolute;
+ bottom: 0px;
+ }
+
+ button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 0px;
+ }
+}
+
+.registration-container {
+ display: flex;
+ flex-direction: column;
+ width: 289px;
+}
+
+.registration-container__tab-container {
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ width: 289px;
+ height: 30px;
+ left: 0;
+ right: 0;
+
+ margin-left: auto;
+ margin-right: auto;
+ color: $session-color-white;
+}
+
+.registration-container__tab {
+ @include fontWasaBold();
+ width: 100%;
+ padding-bottom: 10px;
+ background-color: transparent;
+ text-align: center;
+ color: $session-color-white;
+ border-bottom: 2px solid $session-color-dark-grey;
+ transition: border-color $session-transition-duration linear;
+ line-height: 17px;
+ font-size: 15px;
+}
+
+.registration-container__tab--active {
+ border-bottom: 4px solid $session-color-green;
+}
+
+.registration-container__content {
+ width: 100%;
+ overflow-y: auto;
+ padding-top: 20px;
+}
+
+.registration-container__sections {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+}
+
+
+@mixin registration-label-mixin {
+ color: $session-color-white;
+ text-align: center;
+ font-size: 17px;
+ font-weight: 700;
+ line-height: 17px;
+ padding: 12px;
+}
+
+.or-signin-buttons {
+ @include registration-label-mixin;
+}
+
+.registration-view-label {
+ @include registration-label-mixin;
+ padding-top: 3em;
+}
+
+.terms-conditions-agreement {
+ padding-top: 10px;
+ color: $session-color-light-grey;
+ text-align: center;
+ font-size: 12px;
+
+ a {
+ white-space: nowrap;
+ font-weight: bold;
+ color: $session-color-light-grey;
+
+ &:visited &:link {
+ color: $session-color-light-grey;
+ }
+
+ &:hover {
+ color: $session-color-white;
+ }
+ }
+}
+
+.signup-header,
+.signin-device-pairing-header {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ color: $session-color-light-grey;
+ text-align: center;
+ font-size: 12px;
+ line-height: 20px;
+}
+
+.signin-enter-session-id {
+ height: auto;
+ width: 289px;
+ border-radius: 8px;
+ border: 2px solid $session-color-dark-grey;
+ outline: 0;
+ background: transparent;
+ color: $session-color-white;
+ font-size: 12px;
+ line-height: 14px;
+ text-align: center;
+ margin-bottom: 20px;
+ overflow-wrap: break-word;
+ padding: 20px 5px 20px 5px;
+ display: inline-block;
+}
+
+[contenteditable='true']:empty::before {
+ content: attr(placeholder);
+ color: $session-color-light-grey;
+}
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 8f126d33a..6c36adcf5 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -25,6 +25,7 @@
// New CSS
@import 'modules';
@import 'session';
+@import 'session_signin';
@import 'session_theme_dark';
// Installer