commit 5978433dd22881f73d82b7274e4803810f116d39
parent b6c81afe847869dfd79b9bef8ea2c698ff95b5b1
Author: MTRNord <mtrnord@users.noreply.github.com>
Date: Sat, 10 Jun 2017 22:25:21 +0200
Add multiple Drop Shadows and some padding fixes. Also add a Browser list of tested Browsers.
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
7 files changed, 523 insertions(+), 2 deletions(-)
diff --git a/flat_wide/README.md b/flat_wide/README.md
@@ -1,4 +1,8 @@
Based on Commit [387c334d41448529464a069048c42ad3339b6bde](https://github.com/vector-im/riot-web/commit/387c334d41448529464a069048c42ad3339b6bde)
+
+Test on:
+* Chrome 58.0.3029.110 (64-bit) Windows 10
+
# Examples
diff --git a/flat_wide/css/_common.scss b/flat_wide/css/_common.scss
@@ -276,6 +276,7 @@ textarea {
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
+ box-shadow: inset 2px 2px 4px 1px rgba(0,0,0,.1);
}
.mx_emojione {
diff --git a/flat_wide/css/matrix-react-sdk/structures/_RoomView.scss b/flat_wide/css/matrix-react-sdk/structures/_RoomView.scss
@@ -66,8 +66,6 @@ limitations under the License.
.mx_RoomView_auxPanel {
order: 2;
- min-width: 0px;
- max-width: 960px;
width: 100%;
margin: auto;
diff --git a/flat_wide/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/flat_wide/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
@@ -0,0 +1,71 @@
+/*
+Copyright 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.
+*/
+
+/* Using a textarea for this element, to circumvent autofill */
+.mx_ChatInviteDialog_input,
+.mx_ChatInviteDialog_input:focus
+{
+ height: 26px;
+ font-size: 14px;
+ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+ padding-left: 12px;
+ padding-right: 12px;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: 0 !important;
+ width: 1000%; /* Pretend that this is an "input type=text" */
+ resize: none;
+ overflow: hidden;
+ vertical-align: middle;
+ box-sizing: border-box;
+ word-wrap: nowrap;
+}
+
+.mx_ChatInviteDialog .mx_Dialog_content {
+ min-height: 50px
+}
+
+.mx_ChatInviteDialog_inputContainer {
+ border-radius: 3px;
+ border: solid 1px $input-border-color;
+ line-height: 36px;
+ padding-left: 4px;
+ padding-right: 4px;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ max-height: 150px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ box-shadow: inset 2px 2px 4px 1px rgba(0,0,0,.1);
+}
+
+.mx_ChatInviteDialog_error {
+ position: absolute;
+ color: $warning-color;
+ line-height: 36px;
+}
+
+.mx_ChatInviteDialog_cancel {
+ position: absolute;
+ right: 11px;
+ top: 13px;
+ cursor: pointer;
+}
+
+.mx_ChatInviteDialog_cancel object {
+ pointer-events: none;
+}
diff --git a/flat_wide/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/flat_wide/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -0,0 +1,72 @@
+/*
+Copyright 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_DirectorySearchBox {
+ position: relative;
+ border-radius: 3px;
+ border: 1px solid $strong-input-border-color;
+}
+
+.mx_DirectorySearchBox_container {
+ display: flex;
+ padding-left: 9px;
+ padding-right: 9px;
+}
+
+.mx_DirectorySearchBox_input {
+ flex-grow: 1;
+ border: 0;
+ padding: 0;
+ font-weight: 300;
+ font-size: 13px;
+}
+input[type=text].mx_DirectorySearchBox_input:focus {
+ border: 0;
+}
+
+.mx_DirectorySearchBox_joinButton {
+ display: table-cell;
+ padding: 3px;
+ padding-left: 10px;
+ padding-right: 10px;
+ background-color: $plinth-bg-color;
+ border-radius: 3px;
+ background-image: url('../../img/icon-return.svg');
+ background-position: 8px 70%;
+ background-repeat: no-repeat;
+ text-indent: 18px;
+ font-weight: 600;
+ font-size: 12px;
+ user-select: none;
+ cursor: pointer;
+}
+
+.mx_DirectorySearchBox_clear_wrapper {
+ display: table-cell;
+}
+
+.mx_DirectorySearchBox_clear {
+ display: inline-block;
+ vertical-align: middle;
+ background: url('../../img/icon_context_delete.svg');
+ background-position: 0 50%;
+ background-repeat: no-repeat;
+ width: 15px;
+ height: 15px;
+ cursor: pointer;
+ padding-bottom: 7px;
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/flat_wide/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -0,0 +1,240 @@
+/*
+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_RoomSettings {
+ margin-left: 65px;
+ margin-bottom: 20px;
+}
+
+.mx_RoomSettings_leaveButton,
+.mx_RoomSettings_unbanButton,
+.mx_RoomSettings_integrationsButton,
+.mx_RoomSettings_integrationsButton_error {
+ position: relative;
+ height: 36px;
+ background-color: $accent-color;
+ border-radius: 36px;
+ margin-right: 8px;
+ color: $accent-fg-color;
+ line-height: 34px;
+ text-align: center;
+ cursor: pointer;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.mx_RoomSettings_leaveButton,
+.mx_RoomSettings_integrationsButton,
+.mx_RoomSettings_integrationsButton_error {
+ float: right;
+}
+.mx_RoomSettings_integrationsButton_error {
+ pointer: not-allowed;
+}
+.mx_RoomSettings_integrationsButton_errorPopup {
+ position: absolute;
+ top: 110%;
+ left: -26%;
+ width: 150%;
+ padding: 2%;
+ font-size: 10pt;
+ line-height: 1.5em;
+ border-radius: 5px;
+ background-color: $accent-color;
+ color: $accent-fg-color;
+}
+.mx_RoomSettings_unbanButton {
+ display: inline;
+}
+
+.mx_RoomSettings_e2eIcon {
+ padding-left: 4px;
+ padding-right: 7px;
+}
+
+.mx_RoomSettings_leaveButton {
+ margin-right: 32px;
+}
+
+.mx_RoomSettings_powerLevels {
+ display: table;
+}
+
+.mx_RoomSettings_powerLevel {
+ display: table-row;
+}
+
+.mx_RoomSettings_powerLevelKey,
+.mx_RoomSettings_powerLevel .mx_PowerSelector {
+ display: table-cell;
+ padding-bottom: 5px;
+}
+
+.mx_RoomSettings_powerLevelKey {
+ text-align: right;
+ padding-right: 0.3em;
+}
+
+.mx_RoomSettings h3 {
+ text-transform: uppercase;
+ color: $h3-color;
+ font-weight: 600;
+ font-size: 13px;
+ margin-top: 36px;
+ margin-bottom: 10px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_toggles label {
+ margin-bottom: 8px;
+ display: block;
+}
+
+.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"],
+.mx_RoomSettings .mx_RoomSettings_toggles input[type="radio"] {
+ margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
+ margin-left: 1em;
+ margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags {
+ margin-bottom: 8px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColor {
+ display: inline-block;
+ position: relative;
+ width: 37px;
+ height: 37px;
+ border: 1px solid #979797;
+ margin-right: 13px;
+ cursor: pointer;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColor_selected {
+ position: absolute;
+ left: 10px;
+ top: 4px;
+ cursor: default ! important;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColorPrimary {
+ height: 10px;
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasLabel {
+ margin-bottom: 8px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTable {
+ margin-top: 12px;
+ margin-bottom: 0px;
+ margin-left: 56px;
+ display: table;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow {
+ display: table-row;
+ margin-bottom: 16px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_alias {
+ max-width: 400px;
+ margin-bottom: 16px;
+ /*
+ commented out so margin applies
+ display: table-cell; */
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias {
+ display: table-cell;
+ padding-left: 0.5em;
+ position: relative;
+ cursor: pointer;
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias img,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias img {
+ visibility: hidden;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img,
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img {
+ visibility: visible;
+}
+
+.mx_RoomSettings_warning {
+ color: $warning-color;
+ font-weight: bold;
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
+.mx_RoomSettings_editable {
+ border: 0px;
+ border-bottom: 1px solid $strong-input-border-color;
+ padding: 0px;
+ min-width: 240px;
+}
+
+.mx_RoomSettings_editable:focus {
+ border-bottom: 1px solid $accent-color;
+ outline: none;
+ box-shadow: none;
+}
+
+.mx_RoomSettings_deleteAlias,
+.mx_RoomSettings_addAlias {
+ display: table-cell;
+ visibility: visible;
+}
+
+.mx_RoomSettings_deleteAlias:hover,
+.mx_RoomSettings_addAlias:hover {
+ visibility: visible;
+}
+
+.mx_RoomSettings_aliasPlaceholder {
+ color: $settings-grey-fg-color;
+}
+
+.mx_RoomSettings_buttons {
+ text-align: right;
+ margin-bottom: 16px;
+}
+
+.mx_RoomSettings_button {
+ display: inline;
+ border: 0px;
+ height: 36px;
+ border-radius: 36px;
+ font-weight: 400;
+ font-size: 15px;
+ color: $accent-fg-color;
+ background-color: $accent-color;
+ width: auto;
+ margin: auto;
+ padding: 6px;
+ padding-left: 1em;
+ padding-right: 1em;
+}
+\ No newline at end of file
diff --git a/flat_wide/css/vector-web/structures/_RoomDirectory.scss b/flat_wide/css/vector-web/structures/_RoomDirectory.scss
@@ -0,0 +1,132 @@
+/*
+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_RoomDirectory {
+ max-width: 960px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 12px;
+ color: $primary-fg-color;
+ word-break: break-word;
+
+ display: flex;
+
+ flex-direction: column;
+}
+
+.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
+ margin-left: 0px;
+}
+
+.mx_RoomDirectory_list {
+ flex: 1;
+
+ display: flex;
+
+ flex-direction: column;
+}
+
+.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
+ justify-content: flex-start;
+}
+
+.mx_RoomDirectory_listheader {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ margin-top: 12px;
+ margin-bottom: 12px;
+ border-spacing: 5px;
+}
+
+.mx_RoomDirectory_searchbox {
+ display: table-cell;
+ vertical-align: middle;
+ box-shadow: inset 2px 2px 4px 1px rgba(0,0,0,.1);
+}
+
+.mx_RoomDirectory_listheader .mx_NetworkDropdown {
+ display: table-cell;
+ width: 200px;
+}
+
+.mx_RoomDirectory_tableWrapper {
+ overflow-y: auto;
+ flex: 1 1 0;
+}
+
+.mx_RoomDirectory_table {
+ font-size: 14px;
+ color: $primary-fg-color;
+ width: 100%;
+ text-align: left;
+ table-layout: fixed;
+}
+
+.mx_RoomDirectory_roomAvatar {
+ width: 24px;
+ padding-left: 12px;
+ padding-right: 24px;
+ vertical-align: top;
+}
+
+.mx_RoomDirectory_roomDescription {
+ padding-bottom: 16px;
+}
+
+.mx_RoomDirectory_name {
+ display: inline-block;
+ font-weight: 600;
+}
+
+.mx_RoomDirectory_perms {
+ display: inline-block;
+}
+
+.mx_RoomDirectory_perm {
+ display: inline;
+ padding-left: 5px;
+ padding-right: 5px;
+ height: 15px;
+ border-radius: 11px;
+ background-color: $plinth-bg-color;
+ text-transform: uppercase;
+ font-weight: 600;
+ font-size: 11px;
+ color: $accent-color;
+}
+
+.mx_RoomDirectory_topic {
+ cursor: initial;
+}
+
+.mx_RoomDirectory_alias {
+ font-size: 12px;
+ color: $settings-grey-fg-color;
+}
+
+.mx_RoomDirectory_roomMemberCount {
+ text-align: right;
+ width: 100px;
+ padding-right: 10px;
+}
+
+.mx_RoomDirectory_table tr {
+ padding-bottom: 10px;
+ cursor: pointer;
+}
+\ No newline at end of file
