commit 7537afe0ef25b1d26c3b3b34bfa1adfa3f8bcbf0
parent cdba41925793e41ab8041a75ae244d2654c5deb8
Author: MTRNord <mtrnord@users.noreply.github.com>
Date: Sat, 10 Jun 2017 21:39:07 +0200
Add Flat_wide theme
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
9 files changed, 1661 insertions(+), 0 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.idea/
diff --git a/flat_wide/css/_common.scss b/flat_wide/css/_common.scss
@@ -0,0 +1,314 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+html {
+ /* hack to stop overscroll bounce on OSX and iOS.
+ N.B. Breaks things when we have legitimate horizontal overscroll */
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ /* Open Sans lacks combining diacritics, so these will fall through
+ to the next font. Helevetica's diacritics however do not combine
+ nicely with Open Sans (on OSX, at least) and result in a huge
+ horizontal mess. Arial empirically gets it right, hence prioritising
+ Arial here. */
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+ font-size: 15px;
+ background-color: $primary-bg-color;
+ color: $primary-fg-color;
+ border: 0px;
+ margin: 0px;
+ /* This should render the fonts the same accross browsers */
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+div.error {
+ color: red;
+}
+
+h2 {
+ color: $primary-fg-color;
+ font-weight: 400;
+ font-size: 18px;
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+
+a:hover,
+a:link,
+a:visited {
+ color: $accent-color;
+}
+
+input[type=text], input[type=password], textarea {
+ background-color: transparent;
+ color: $primary-fg-color;
+}
+
+input[type=text].error, input[type=password].error {
+ border: 1px solid $warning-color;
+}
+
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+ border: 1px solid $accent-color;
+ outline: none;
+ box-shadow: none;
+}
+
+/* Required by Firefox */
+textarea {
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
+/* Prevent ugly dotted highlight around selected elements in Firefox */
+::-moz-focus-inner {
+ border: 0;
+}
+
+/* applied to side-panels and messagepanel when in RoomSettings */
+.mx_fadable {
+ opacity: 1;
+ transition: opacity 0.2s ease-in-out;
+}
+
+/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
+ Stop the scrollbar view from pushing out the container's overall sizing, which causes
+ flexbox to adapt to the new size and cause the view to keep growing.
+ */
+.gm-scrollbar-container .gm-scroll-view {
+ position: absolute;
+}
+
+/* Expand thumbs on hoverover */
+.gm-scrollbar {
+ border-radius: 5px ! important;
+}
+.gm-scrollbar.-vertical {
+ width: 6px;
+ transition: width 120ms ease-out ! important;
+}
+.gm-scrollbar.-vertical:hover,
+.gm-scrollbar.-vertical:active {
+ width: 8px;
+ transition: width 120ms ease-out ! important;
+}
+.gm-scrollbar.-horizontal {
+ height: 6px;
+ transition: height 120ms ease-out ! important;
+}
+.gm-scrollbar.-horizontal:hover,
+.gm-scrollbar.-horizontal:active {
+ height: 8px;
+ transition: height 120ms ease-out ! important;
+}
+
+.mx_Dialog_wrapper {
+ position: fixed;
+ z-index: 4000;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.mx_Dialog_wrapper .mx_Dialog {
+ border-radius: 5px;
+ box-shadow: 1px 4px 10px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Spinner Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+ width: auto;
+ border-radius: 8px;
+ padding: 0px;
+ box-shadow: none;
+}
+
+/* View Source Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog {
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.mx_Dialog {
+ background-color: $primary-bg-color;
+ color: $light-fg-color;
+ z-index: 4010;
+ font-weight: 300;
+ font-size: 15px;
+ position: relative;
+ padding-left: 58px;
+ padding-bottom: 36px;
+ width: 60%;
+ max-width: 704px;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+ max-height: 80%;
+ overflow-y: auto;
+}
+
+.mx_Dialog_background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: $dialog-background-bg-color;
+ opacity: 0.8;
+}
+
+.mx_Dialog_lightbox .mx_Dialog_background {
+ opacity: 0.85;
+ background-color: $lightbox-background-bg-color;
+}
+
+.mx_Dialog_lightbox .mx_Dialog {
+ border-radius: 0px;
+ background-color: transparent;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ max-height: 100%;
+ pointer-events: none;
+}
+
+.mx_Dialog_cancelButton {
+ position: absolute;
+ right: 11px;
+ top: 13px;
+ cursor: pointer;
+}
+
+.mx_Dialog_cancelButton object {
+ pointer-events: none;
+}
+
+.mx_Dialog_content {
+ margin: 24px 58px 68px 0;
+ font-size: 14px;
+ color: $primary-fg-color;
+ word-wrap: break-word;
+}
+
+.mx_Dialog button, .mx_Dialog input[type="submit"] {
+ border: 0px;
+ height: 36px;
+ border-radius: 40px;
+ border: solid 1px $accent-color;
+ font-weight: 600;
+ font-size: 14px;
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+ margin-left: 0px;
+ margin-right: 8px;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ outline: none;
+ cursor: pointer;
+ color: $accent-color;
+ background-color: $primary-bg-color;
+
+ /* align images in buttons (eg spinners) */
+ vertical-align: middle;
+}
+
+.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
+ filter: brightness($focus-brightness);
+}
+
+.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
+ color: $accent-fg-color;
+ background-color: $accent-color;
+}
+
+.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
+ background-color: $warning-color;
+ border: solid 1px $warning-color;
+}
+
+.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
+ background-color: $light-fg-color;
+ border: solid 1px $light-fg-color;
+ opacity: 0.7;
+}
+
+.mx_Dialog_title {
+ min-height: 16px;
+ padding-top: 40px;
+ font-weight: bold;
+ font-size: 22px;
+ line-height: 1.4;
+ color: $primary-fg-color;
+}
+
+.mx_Dialog_title.danger {
+ color: $warning-color;
+}
+
+.mx_TextInputDialog_label {
+ text-align: left;
+ padding-bottom: 12px;
+}
+
+.mx_TextInputDialog_input {
+ font-size: 15px;
+ border-radius: 3px;
+ border: 1px solid $input-border-color;
+ padding: 9px;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
+}
+
+.mx_emojione {
+ height: 1em;
+ vertical-align: middle;
+}
+
+::-moz-selection {
+ background-color: $accent-color;
+ color: $selection-fg-color;
+}
+
+::selection {
+ background-color: $accent-color;
+ color: $selection-fg-color;
+}
+
+/** green button with rounded corners */
+.mx_textButton {
+ color: $accent-fg-color;
+ background-color: $accent-color;
+ border-radius: 17px;
+ text-align: center;
+ padding-left: 1em;
+ padding-right: 1em;
+ cursor: pointer;
+ display: inline;
+}
+
+.mx_button_row {
+ margin-top: 69px;
+}
+
+.changelog_text {
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/structures/_RoomView.scss b/flat_wide/css/matrix-react-sdk/structures/_RoomView.scss
@@ -0,0 +1,271 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomView {
+ word-wrap: break-word;
+ position: relative;
+
+ display: flex;
+ width: 100%;
+
+ flex-direction: column;
+}
+
+.mx_RoomView .mx_RoomHeader {
+ order: 1;
+
+ flex: 0 0 70px;
+}
+
+.mx_RoomView_fileDropTarget {
+ min-width: 0px;
+ max-width: 960px;
+ width: 100%;
+ font-size: 18px;
+ text-align: center;
+
+ pointer-events: none;
+
+ padding-left: 12px;
+ padding-right: 12px;
+ margin-left: -12px;
+
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+
+ background-color: $droptarget-bg-color;
+ border: 2px #e1dddd solid;
+ border-bottom: none;
+ position: absolute;
+ top: 70px;
+ bottom: 0px;
+ z-index: 3000;
+}
+
+.mx_RoomView_fileDropTargetLabel {
+ top: 50%;
+ width: 100%;
+ margin-top: -50px;
+ position: absolute;
+}
+
+.mx_RoomView_auxPanel {
+ order: 2;
+
+ min-width: 0px;
+ max-width: 960px;
+ width: 100%;
+ margin: auto;
+
+ overflow: auto;
+
+ flex: 0 0 auto;
+}
+
+.mx_RoomView_topUnreadMessagesBar {
+ order: 3;
+}
+
+.mx_RoomView_messagePanel {
+ order: 4;
+
+ flex: 1 1 0;
+
+ width: 100%;
+
+ overflow-y: auto;
+}
+
+.mx_RoomView_messageListWrapper {
+ margin: auto;
+
+ min-height: 100%;
+
+ display: flex;
+
+ flex-direction: column;
+
+ justify-content: flex-end;
+}
+
+.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
+ justify-content: flex-start;
+}
+
+.mx_RoomView_empty {
+ flex: 1 1 auto;
+ font-size: 13px;
+ padding-left: 3em;
+ padding-right: 3em;
+ margin-right: 20px;
+ margin-top: 33%;
+ text-align: center;
+}
+
+.mx_RoomView_MessageList {
+ width: 100%;
+ list-style-type: none;
+ padding: 0px;
+}
+
+.mx_RoomView_MessageList li {
+ clear: both;
+}
+
+.mx_RoomView_MessageList h2 {
+ clear: both;
+ margin-top: 32px;
+ margin-bottom: 8px;
+ margin-left: 63px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_RoomView_invitePrompt {
+ order: 2;
+
+ min-width: 0px;
+ max-width: 960px;
+ width: 100%;
+ margin: auto;
+
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+
+li.mx_RoomView_myReadMarker_container {
+ height: 0px;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+}
+
+hr.mx_RoomView_myReadMarker {
+ border-top: solid 1px $accent-color;
+ border-bottom: solid 1px $accent-color;
+ margin-top: 0px;
+ position: relative;
+ top: -1px;
+ z-index: 1;
+}
+
+.mx_RoomView_statusArea {
+ order: 5;
+
+ width: 100%;
+ flex: 0 0 auto;
+
+ max-height: 0px;
+ background-color: $primary-bg-color;
+ z-index: 1000;
+ overflow: hidden;
+
+ -webkit-transition: all .2s ease-out;
+ -moz-transition: all .2s ease-out;
+ -ms-transition: all .2s ease-out;
+ -o-transition: all .2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+ max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+ margin: auto;
+ min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+ margin-left: 65px;
+ border-top: 1px solid $primary-hairline-color;
+ height: 1px;
+}
+
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
+ background-color: $primary-bg-color;
+}
+
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
+ color: $accent-fg-color;
+ opacity: 1.0;
+}
+
+.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
+ margin-top: 2px;
+ border: none;
+ height: 0px;
+}
+
+.mx_RoomView_inCall .mx_MessageComposer_wrapper {
+ border-top: 2px hidden;
+ padding-top: 1px;
+}
+
+.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
+ background-color: $accent-color;
+ color: $accent-fg-color;
+ position: relative;
+}
+
+.mx_RoomView_voipChevron {
+ position: absolute;
+ bottom: -11px;
+ right: 11px;
+}
+
+.mx_RoomView_voipButton {
+ float: right;
+ margin-right: 13px;
+ margin-top: 10px;
+ cursor: pointer;
+}
+
+.mx_RoomView_voipButton object {
+ pointer-events: none;
+}
+
+.mx_RoomView .mx_MessageComposer {
+ order: 6;
+
+ width: 100%;
+ flex: 0 0 auto;
+ margin-right: 2px;
+}
+
+.mx_RoomView_ongoingConfCallNotification {
+ width: 100%;
+ text-align: center;
+ background-color: $warning-color;
+ color: $accent-fg-color;
+ font-weight: bold;
+ padding: 6px 0;
+ cursor: pointer;
+}
+
+.mx_RoomView_ongoingConfCallNotification a {
+ color: $accent-fg-color ! important;
+}
+
+.mx_MatrixChat_useCompactLayout {
+ .mx_RoomView_MessageList {
+ margin-bottom: 4px;
+ }
+
+ .mx_RoomView_statusAreaBox {
+ min-height: 42px;
+ }
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/structures/_UserSettings.scss b/flat_wide/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -0,0 +1,245 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserSettings {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+
+ display: flex;
+ flex-direction: column;
+
+ box-shadow: 0 4px 10px 6px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ margin-top: 12px;
+ margin-bottom: 5px;
+ padding-right: 10px;
+}
+
+.mx_UserSettings .mx_RoomHeader {
+ order: 1;
+
+ flex: 0 0 70px;
+}
+
+.mx_UserSettings_body {
+ order: 2;
+
+ flex: 1 1 0;
+
+ margin-top: -20px;
+ overflow-y: auto;
+}
+
+.mx_UserSettings h3 {
+ clear: both;
+ margin-left: 63px;
+ text-transform: uppercase;
+ color: $h3-color;
+ font-weight: 600;
+ font-size: 13px;
+ margin-top: 26px;
+ margin-bottom: 10px;
+}
+
+.mx_UserSettings_section h3 {
+ margin-left: 0px;
+}
+
+.mx_UserSettings_spinner {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 12px;
+ width: 32px;
+ height: 32px;
+}
+
+.mx_UserSettings_button {
+ display: inline;
+ vertical-align: middle;
+ border: 0px;
+ border-radius: 36px;
+ font-weight: 400;
+ font-size: 16px;
+ color: $accent-fg-color;
+ background-color: $accent-color;
+ width: auto;
+ margin: auto;
+ padding: 7px;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ cursor: pointer;
+}
+
+.mx_UserSettings_button.danger {
+ background-color: $warning-color;
+}
+
+.mx_UserSettings_section {
+ margin-left: 63px;
+ margin-top: 28px;
+ margin-bottom: 28px;
+}
+
+.mx_UserSettings_cryptoSection ul {
+ display: table;
+}
+.mx_UserSettings_cryptoSection li {
+ display: table-row;
+}
+.mx_UserSettings_cryptoSection label,
+.mx_UserSettings_cryptoSection span {
+ display: table-cell;
+ padding-right: 1em;
+}
+
+.mx_UserSettings_importExportButtons {
+ padding-top: 10px;
+ padding-left: 40px;
+}
+
+.mx_UserSettings_importExportButtons .mx_UserSettings_button {
+ margin-right: 1em;
+}
+
+.mx_UserSettings_toggle input {
+ width: 16px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+}
+
+.mx_UserSettings_toggle label {
+ padding-bottom: 21px;
+}
+
+.mx_UserSettings_accountTable
+.mx_UserSettings_notifTable
+{
+ display: table;
+}
+
+.mx_UserSettings_notifTable .mx_Spinner {
+ position: absolute;
+}
+
+.mx_UserSettings_language {
+ width: 200px;
+}
+
+.mx_UserSettings_profileTable
+{
+ display: table;
+ float: left;
+}
+
+.mx_UserSettings_profileTableRow
+{
+ display: table-row;
+}
+
+.mx_UserSettings_profileLabelCell
+{
+ padding-bottom: 21px;
+ display: table-cell;
+ font-weight: bold;
+ padding-right: 24px;
+}
+
+.mx_UserSettings_profileInputCell {
+ display: table-cell;
+ padding-bottom: 21px;
+ width: 240px;
+}
+
+.mx_UserSettings_profileInputCell input,
+.mx_UserSettings_profileInputCell .mx_EditableText
+{
+ display: inline-block;
+ border: 0px;
+ border-bottom: 1px solid $input-underline-color;
+ padding: 0px;
+ width: 240px;
+ color: $input-fg-color;
+ font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+ font-size: 16px;
+}
+
+.mx_UserSettings_threepidButton {
+ display: table-cell;
+ padding-left: 0.5em;
+ position: relative;
+ cursor: pointer;
+}
+
+.mx_UserSettings_phoneSection {
+ display:table;
+}
+
+.mx_UserSettings_phoneCountry {
+ width: 70px;
+ display: table-cell;
+}
+
+input.mx_UserSettings_phoneNumberField {
+ margin-left: 3px;
+ width: 172px;
+ border: 1px solid transparent;
+}
+
+.mx_UserSettings_changePasswordButton {
+ float: right;
+ margin-right: 32px;
+ margin-left: 32px;
+}
+
+.mx_UserSettings_logout {
+ float: right;
+ margin-right: 32px;
+ margin-left: 32px;
+}
+
+.mx_UserSettings_avatarPicker {
+ margin-left: 32px;
+ margin-right: 32px;
+ float: right;
+ cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image {
+ object-fit: cover;
+}
+
+.mx_UserSettings_avatarPicker_edit {
+ text-align: center;
+ margin-top: 10px;
+}
+
+.mx_UserSettings_avatarPicker_edit img {
+ cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker_edit > input {
+ display: none;
+}
+
+.mx_UserSettings_advanced_spoiler,
+.mx_UserSettings_link {
+ cursor: pointer;
+ color: $accent-color;
+ word-break: break-all;
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/views/rooms/_MemberList.scss b/flat_wide/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -0,0 +1,113 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MemberList {
+ height: 100%;
+
+ margin-top: 12px;
+ margin-right: 20px;
+
+ flex: 1;
+
+ display: flex;
+
+ flex-direction: column;
+}
+
+.mx_MemberList .mx_Spinner {
+ flex: 0 0 auto;
+}
+
+.mx_MemberList_chevron {
+ position: absolute;
+ right: 35px;
+ margin-top: -15px;
+}
+
+.mx_MemberList_border {
+ overflow-y: auto;
+
+ order: 1;
+ flex: 1 1 0px;
+}
+
+.mx_MemberList_query {
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+ border-radius: 3px;
+ border: 1px solid $input-border-color;
+ padding: 9px;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
+ margin-left: 3px;
+ font-size: 14px;
+ margin-bottom: 8px;
+ width: 189px;
+
+ box-shadow: inset 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
+ &:focus {
+ box-shadow: inset 2px 2px 4px 1px rgba(0, 0, 0, 0.1);
+ }
+}
+
+.mx_MemberList_query::-moz-placeholder {
+ color: $primary-fg-color;
+ opacity: 0.5;
+ font-size: 14px;
+}
+
+.mx_MemberList_query::-webkit-input-placeholder {
+ color: $primary-fg-color;
+ opacity: 0.5;
+ font-size: 14px;
+}
+
+.mx_MemberList_joined {
+ order: 2;
+ flex: 1 0 0;
+
+ overflow-y: auto;
+}
+
+/*
+.mx_MemberList_invited {
+ order: 3;
+ flex: 0 0 100px;
+ overflow-y: auto;
+}
+*/
+
+.mx_MemberList_invited h2 {
+ text-transform: uppercase;
+ color: $h3-color;
+ font-weight: 600;
+ font-size: 13px;
+ padding-left: 3px;
+ padding-right: 12px;
+ margin-top: 8px;
+ margin-bottom: 4px;
+}
+
+/* we have to have display: table in order for the horizontal wrapping to work */
+.mx_MemberList_wrapper {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+}
+
+.mx_MemberList_outerWrapper {
+ height: 0px;
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/flat_wide/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -0,0 +1,212 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MessageComposer_wrapper {
+ vertical-align: middle;
+ margin: auto;
+ border-top: 1px solid $primary-hairline-color;
+ position: relative;
+}
+
+.mx_MessageComposer_autocomplete_wrapper {
+ position: relative;
+ height: 0;
+}
+
+.mx_MessageComposer_row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+}
+
+.mx_MessageComposer .mx_MessageComposer_avatar {
+ padding-left: 10px;
+ padding-right: 28px;
+}
+
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
+ display: block;
+}
+
+.mx_MessageComposer_composecontrols {
+ width: 100%;
+}
+
+.mx_MessageComposer_e2eIcon {
+ position: absolute;
+ left: 44px;
+}
+
+.mx_MessageComposer_noperm_error {
+ width: 100%;
+ height: 60px;
+ text-align: center;
+ font-style: italic;
+ color: $greyed-fg-color;
+}
+
+.mx_MessageComposer_input_wrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.mx_MessageComposer_input {
+ flex: 1;
+ vertical-align: middle;
+ display: flex;
+ flex-direction: column;
+ min-height: 60px;
+ justify-content: center;
+ align-items: flex-start;
+ font-size: 14px;
+ margin-right: 6px;
+}
+
+.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
+ display: none;
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+ width: 100%;
+ flex: 1;
+ max-height: 120px;
+ overflow: auto;
+}
+
+.mx_MessageComposer_input blockquote {
+ color: $blockquote-fg-color;
+ margin: 0 0 16px;
+ padding: 0 15px;
+ border-left: 4px solid $blockquote-bar-color;
+}
+
+.mx_MessageComposer_input textarea {
+ display: block;
+ width: 100%;
+ padding: 0px;
+ margin-top: 6px;
+ margin-bottom: 6px;
+ border: 0px;
+ resize: none;
+ outline: none;
+ box-shadow: none;
+ color: $primary-fg-color;
+ background-color: $primary-bg-color;
+ font-size: 14px;
+ max-height: 120px;
+ overflow: auto;
+ /* needed for FF */
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
+/* hack for FF as vertical alignment of custom placeholder text is broken */
+.mx_MessageComposer_input textarea::-moz-placeholder {
+ line-height: 100%;
+ color: $accent-color;
+ opacity: 1.0;
+}
+.mx_MessageComposer_input textarea::-webkit-input-placeholder {
+ color: $accent-color;
+}
+
+.mx_MessageComposer_upload,
+.mx_MessageComposer_hangup,
+.mx_MessageComposer_voicecall,
+.mx_MessageComposer_videocall {
+ /*display: table-cell;*/
+ /*vertical-align: middle;*/
+ /*padding-left: 10px;*/
+ padding-right: 5px;
+ cursor: pointer;
+ padding-top: 4px;
+}
+
+.mx_MessageComposer_upload object,
+.mx_MessageComposer_hangup object,
+.mx_MessageComposer_voicecall object,
+.mx_MessageComposer_videocall object {
+ pointer-events: none;
+}
+
+.mx_MessageComposer_formatting {
+ cursor: pointer;
+ margin: 0 11px;
+}
+
+.mx_MessageComposer_formatbar_wrapper {
+ width: 100%;
+ background-color: $menu-bg-color;
+ box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.mx_MessageComposer_formatbar {
+ margin: auto;
+ max-width: 960px;
+ display: flex;
+
+ height: 30px;
+
+ box-sizing: border-box;
+ padding-left: 62px;
+
+ flex-direction: row;
+ align-items: center;
+ font-size: 10px;
+ color: $greyed-fg-color;
+}
+
+.mx_MessageComposer_formatbar * {
+ margin-right: 4px;
+}
+
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+ cursor: pointer;
+}
+
+.mx_MessageComposer_format_button_disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.mx_MessageComposer_formatbar_cancel {
+ margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+ margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+ cursor: pointer;
+ height: 10px;
+ padding: 4px 4px 4px 0;
+ opacity: 0.8;
+}
+
+.mx_MatrixChat_useCompactLayout {
+ .mx_MessageComposer_input {
+ min-height: 50px;
+ }
+
+ .mx_MessageComposer_noperm_error {
+ height: 50px;
+ }
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/flat_wide/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -0,0 +1,233 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* add 20px to the height of the header when editing */
+.mx_RoomHeader_editing {
+ flex: 0 0 93px ! important;
+}
+
+.mx_RoomView .mx_RoomHeader {
+ &:not(.mx_RoomHeader_editing) {
+ .mx_RoomHeader_wrapper {
+ box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.1);
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ }
+ }
+}
+
+.mx_RoomHeader_wrapper {
+ margin: auto;
+ height: 70px;
+ align-items: center;
+ display: flex;
+ padding-bottom: 2.5px;
+ padding-top: 2.5px;
+}
+
+.mx_RoomHeader_leftRow {
+ margin-left: -2px;
+ order: 1;
+ flex: 1;
+ overflow: hidden;
+ padding-left: 10px;
+}
+
+.mx_RoomHeader_spinner {
+ height: 36px;
+ order: 2;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+
+.mx_RoomHeader_textButton {
+ height: 36px;
+ background-color: $accent-color;
+ border-radius: 36px;
+ margin-right: 8px;
+ color: $accent-fg-color;
+ line-height: 34px;
+ margin-top: -2px;
+ text-align: center;
+ order: 2;
+ cursor: pointer;
+
+ /*
+ flex: 0 0 90px;
+ */
+ padding-left: 12px;
+ padding-right: 12px;
+}
+
+.mx_RoomHeader_cancelButton {
+ order: 2;
+ cursor: pointer;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+
+.mx_RoomHeader_rightRow {
+ margin-top: 4px;
+ background-color: $primary-bg-color;
+ display: flex;
+ align-items: center;
+ order: 3;
+ padding-right: 10px;
+}
+
+.mx_RoomHeader_info {
+ display: table-cell;
+ width: 100%;
+ vertical-align: middle;
+}
+
+.mx_RoomHeader_simpleHeader {
+ line-height: 70px;
+ color: $primary-fg-color;
+ font-size: 22px;
+ font-weight: bold;
+ overflow: hidden;
+ margin-left: 63px;
+ text-overflow: ellipsis;
+ width: 100%;
+}
+
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
+ float: right;
+}
+
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_icon {
+ margin-left: 14px;
+ margin-right: 24px;
+ vertical-align: -4px;
+}
+
+.mx_RoomHeader_name {
+ vertical-align: middle;
+ width: 100%;
+ height: 31px;
+ overflow: hidden;
+ color: $primary-fg-color;
+ font-weight: bold;
+ font-size: 22px;
+ padding-left: 19px;
+ padding-right: 16px;
+ /* why isn't text-overflow working? */
+ text-overflow: ellipsis;
+ border-bottom: 1px solid transparent;
+}
+
+.mx_RoomHeader_nametext {
+ display: inline-block;
+}
+
+.mx_RoomHeader_settingsHint {
+ color: $settings-grey-fg-color ! important;
+}
+
+.mx_RoomHeader_searchStatus {
+ display: inline-block;
+ font-weight: normal;
+ opacity: 0.6;
+}
+
+.mx_RoomHeader_settingsButton object {
+ pointer-events: none;
+}
+
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit {
+ cursor: pointer;
+}
+
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
+ color: $accent-color;
+}
+
+.mx_RoomHeader_placeholder {
+ color: $settings-grey-fg-color ! important;
+}
+
+.mx_RoomHeader_editable {
+ border-bottom: 1px solid $strong-input-border-color ! important;
+ min-width: 150px;
+ cursor: text;
+}
+
+.mx_RoomHeader_editable:focus {
+ border-bottom: 1px solid $accent-color ! important;
+ outline: none;
+ box-shadow: none;
+}
+
+.mx_RoomHeader_topic {
+ vertical-align: bottom;
+ float: left;
+ max-height: 42px;
+ color: $settings-grey-fg-color;
+ font-weight: 300;
+ font-size: 13px;
+ margin-left: 19px;
+ margin-right: 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid transparent;
+}
+
+.mx_RoomHeader_avatar {
+ display: table-cell;
+ width: 48px;
+ height: 50px;
+ vertical-align: middle;
+}
+
+.mx_RoomHeader_avatar .mx_BaseAvatar_image {
+ object-fit: cover;
+}
+
+.mx_RoomHeader_avatarPicker_edit {
+ position: absolute;
+ margin-left: 16px;
+ margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > label {
+ cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+ display: none;
+}
+
+.mx_RoomHeader_button {
+ margin-left: 12px;
+ cursor: pointer;
+}
+
+.mx_RoomHeader_button object {
+ pointer-events: none;
+}
+
+.mx_RoomHeader_voipButton {
+ display: table-cell;
+}
+
+.mx_RoomHeader_voipButtons {
+ margin-top: 18px;
+}
+\ No newline at end of file
diff --git a/flat_wide/css/vector-web/structures/_LeftPanel.scss b/flat_wide/css/vector-web/structures/_LeftPanel.scss
@@ -0,0 +1,125 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LeftPanel {
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+
+ box-shadow: 0 4px 10px 6px rgba(0, 0, 0, 0.1);
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+.mx_LeftPanel_hideButton {
+ position: absolute;
+ top: 10px;
+ right: 0px;
+ padding: 8px;
+ cursor: pointer;
+}
+
+.mx_LeftPanel_callView {
+
+}
+
+.mx_LeftPanel .mx_RoomList_scrollbar {
+ order: 1;
+
+ flex: 1 1 0;
+
+ overflow-y: auto;
+ z-index: 6;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+ flex: 0 0 160px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu {
+ order: 3;
+
+ border-top: 1px solid rgba(118, 207, 166, 0.2);
+ margin-left: 16px; /* gutter */
+ margin-right: 16px; /* gutter */
+ flex: 0 0 60px;
+ z-index: 1;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_options {
+ margin-top: 18px;
+}
+
+.mx_BottomLeftMenu_options object {
+ pointer-events: none;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_homePage,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people,
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+ display: inline-block;
+ cursor: pointer;
+}
+
+.collapsed .mx_BottomLeftMenu_homePage,
+.collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_createRoom,
+.collapsed .mx_BottomLeftMenu_people,
+.collapsed .mx_BottomLeftMenu_settings {
+ margin-right: 0px ! important;
+ padding-top: 3px ! important;
+ padding-bottom: 3px ! important;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_homePage,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people {
+ margin-right: 10px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+ float: right;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+ float: none;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -25px;
+ left: 6px;
+}
+
+.mx_MatrixChat_useCompactLayout {
+ .mx_LeftPanel .mx_BottomLeftMenu {
+ flex: 0 0 50px;
+ }
+
+ .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+ flex: 0 0 160px;
+ }
+
+ .mx_LeftPanel .mx_BottomLeftMenu_options {
+ margin-top: 12px;
+ }
+}
+\ No newline at end of file
diff --git a/flat_wide/css/vector-web/structures/_RightPanel.scss b/flat_wide/css/vector-web/structures/_RightPanel.scss
@@ -0,0 +1,138 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RightPanel {
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+
+ padding-left: 10px;
+ box-shadow: 1px 4px 10px 6px rgba(0, 0, 0, 0.1);
+ border-top-left-radius: 7px;
+ border-bottom-left-radius: 7px;
+}
+
+.mx_RightPanel_header {
+ order: 1;
+
+ border-bottom: 1px solid $primary-hairline-color;
+ margin-right: 20px;
+
+ flex: 0 0 70px;
+}
+
+/** Fixme - factor this out with the main header **/
+
+.mx_RightPanel_headerButtonGroup {
+ margin-top: 6px;
+ display: flex;
+ width: 100%;
+ background-color: $primary-bg-color;
+ margin-left: 0px;
+}
+
+.mx_RightPanel_headerButton {
+ cursor: pointer;
+ flex: 0 0 auto;
+ vertical-align: top;
+ padding-left: 4px;
+ padding-right: 5px;
+ text-align: center;
+ position: relative;
+}
+
+.mx_RightPanel_headerButton object {
+ pointer-events: none;
+ padding-bottom: 3px;
+}
+
+.mx_RightPanel_headerButton_highlight {
+ width: 25px;
+ height: 5px;
+ border-radius: 5px;
+ background-color: $accent-color;
+ opacity: 0.2;
+}
+
+.mx_RightPanel_headerButton_badge {
+ font-size: 11px;
+ color: $accent-color;
+ font-weight: bold;
+ padding-bottom: 2px;
+}
+
+.mx_RightPanel_collapsebutton {
+ flex: 1;
+ text-align: right;
+ margin-top: 20px;
+}
+
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel_blank {
+ order: 2;
+ flex: 1 1 0;
+}
+
+.mx_RightPanel_footer {
+ order: 3;
+
+ margin-right: 20px;
+
+ flex: 0 0 60px;
+
+ box-shadow: 0 -5px 5px -1px rgba(0, 0, 0, 0.1);
+}
+
+.mx_RightPanel_footer .mx_RightPanel_invite {
+ line-height: 35px;
+ font-size: 14px;
+ color: $primary-fg-color;
+ padding-top: 13px;
+ padding-left: 5px;
+ cursor: pointer;
+}
+
+.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
+ display: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon {
+ display: inline-block;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon object {
+ pointer-events: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_message {
+ display: inline-block;
+ vertical-align: top;
+ padding-left: 10px
+}
+
+.mx_MatrixChat_useCompactLayout {
+ .mx_RightPanel_footer {
+ flex: 0 0 50px;
+ }
+
+ .mx_RightPanel_footer .mx_RightPanel_invite {
+ line-height: 25px;
+ padding-top: 8px;
+ }
+}
+\ No newline at end of file
