diff --git a/res/css/_base.scss b/res/css/_base.scss new file mode 100644 index 0000000000..51d2f70f78 --- /dev/null +++ b/res/css/_base.scss @@ -0,0 +1,182 @@ +/* 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; + +// typical text (dark-on-white in light skin) +$primary-fg-color: #454545; +$primary-bg-color: #ffffff; + +// used for dialog box text +$light-fg-color: #747474; + +// used for focusing form controls +$focus-bg-color: #dddddd; + +// button UI (white-on-green in light skin) +$accent-fg-color: #ffffff; +$accent-color: #76CFA6; + +$selection-fg-color: $primary-bg-color; + +$focus-brightness: 125%; + +// red warning colour +$warning-color: #ff0064; +$mention-user-pill-bg-color: #ff0064; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); + +// pinned events indicator +$pinned-unread-color: #ff0064; // $warning-color +$pinned-color: #888; + +// informational plinth +$info-plinth-bg-color: #f7f7f7; +$info-plinth-fg-color: #888; + +$preview-bar-bg-color: #f7f7f7; + +// left-panel style muted accent color +$secondary-accent-color: #eaf5f0; +$tertiary-accent-color: #d3efe1; + +// used by RoomDirectory permissions +$plinth-bg-color: $secondary-accent-color; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(255,255,255,0.5); + +// used by AddressSelector +$selected-color: $secondary-accent-color; + +// selected for hoverover & selected event tiles +$event-selected-color: #f7f7f7; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #e5e5e5; + +// used for the border of input text fields +$input-border-color: #f0f0f0; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; +$avatar-bg-color: #ffffff; + +$h3-color: #3d3b39; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + +$greyed-fg-color: #888; + +$neutral-badge-color: #dbdbdb; + +$preview-widget-bar-color: #ddd; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + +$rte-bg-color: #e9e9e9; +$rte-code-bg-color: rgba(0, 0, 0, 0.04); +$rte-room-pill-color: #aaa; + +// ******************** + +$roomtile-name-color: rgba(69, 69, 69, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); +$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9); + +$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1); + +$roomsublist-background: rgba(0, 0, 0, 0.05); +$roomsublist-label-fg-color: $h3-color; +$roomsublist-label-bg-color: $tertiary-accent-color; +$roomsublist-chevron-color: $accent-color; + +$panel-divider-color: rgba(118, 207, 166, 0.2); + +// ******************** + +$widget-menu-bar-bg-color: $tertiary-accent-color; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event redaction +$event-redacted-fg-color: #e2e2e2; +$event-redacted-border-color: #cccccc; + +// event timestamp +$event-timestamp-color: #acacac; + +$edit-button-url: "../../img/icon_context_message.svg"; +$copy-button-url: "../../img/icon_copy_message.svg"; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +// presence +$presence-online: #60de00; +$presence-unavailable: #deb800; +$presence-offline: #b7b7b7; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; + +// ***** Mixins! ***** + +@define-mixin mx_DialogButton { + /* align images in buttons (eg spinners) */ + vertical-align: middle; + border: 0px; + border-radius: 36px; + font-family: $font-family; + font-size: 14px; + color: $accent-fg-color; + background-color: $accent-color; + width: auto; + padding: 7px; + padding-left: 1.5em; + padding-right: 1.5em; + cursor: pointer; + display: inline-block; + outline: none; +} + +@define-mixin mx_DialogButton_hover { +} + +@define-mixin mx_DialogButton_small { + @mixin mx_DialogButton; + font-size: 15px; + padding: 0px 1.5em 0px 1.5em; +} diff --git a/res/css/_common.scss b/res/css/_common.scss new file mode 100644 index 0000000000..e81c228430 --- /dev/null +++ b/res/css/_common.scss @@ -0,0 +1,361 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 Vector Creations Ltd +Copyright 2017 New Vector Ltd + +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 { + font-family: $font-family; + 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, div.warning { + color: $warning-color; +} + +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: $font-family; +} + +/* 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; +} + +.mx_fadable.mx_fadable_faded { + opacity: 0.3; + pointer-events: none; +} + +/* 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; +} + +// These are magic constants which are excluded from tinting, to let themes +// (which only have CSS, unlike skins) tell the app what their non-tinted +// colourscheme is by inspecting the stylesheet DOM. +// +// They are not used for layout!! +#mx_theme_accentColor { + color: $accent-color; +} + +#mx_theme_secondaryAccentColor { + color: $secondary-accent-color; +} + +#mx_theme_tertiaryAccentColor { + color: $roomsublist-label-bg-color; +} + +.mx_Dialog_wrapper { + position: fixed; + z-index: 4000; + top: 0; + left: 0; + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; +} + +/* 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"] { + @mixin mx_DialogButton; + margin-left: 0px; + margin-right: 8px; + + // flip colours for the secondary ones + font-weight: 600; + border: 1px solid $accent-color ! important; + color: $accent-color; + background-color: $accent-fg-color; +} + +.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover { + @mixin mx_DialogButton_hover; +} + +.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; +} + +.mx_textButton { + @mixin mx_DialogButton_small; +} + +.mx_textButton:hover { + @mixin mx_DialogButton_hover; +} + +.mx_button_row { + margin-top: 69px; +} + +.mx_Beta { + color: red; + margin-right: 10px; + position: relative; + top: -3px; + background-color: white; + padding: 0 4px; + border-radius: 3px; + border: 1px solid darkred; + cursor: help; + transition-duration: 200ms; + font-size: smaller; + filter: opacity(0.5); +} + +.mx_Beta:hover { + color: white; + border: 1px solid gray; + background-color: darkred; +} + +.mx_TintableSvgButton { + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; +} + +.mx_TintableSvgButton object { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; +} + +.mx_TintableSvgButton span { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + cursor: pointer; +} diff --git a/res/css/_components.scss b/res/css/_components.scss new file mode 100644 index 0000000000..0bcc48c3b8 --- /dev/null +++ b/res/css/_components.scss @@ -0,0 +1,111 @@ +// autogenerated by rethemendex.sh +@import "./_common.scss"; +@import "./matrix-react-sdk/structures/_ContextualMenu.scss"; +@import "./matrix-react-sdk/structures/_CreateRoom.scss"; +@import "./matrix-react-sdk/structures/_FilePanel.scss"; +@import "./matrix-react-sdk/structures/_GroupView.scss"; +@import "./matrix-react-sdk/structures/_LoginBox.scss"; +@import "./matrix-react-sdk/structures/_MatrixChat.scss"; +@import "./matrix-react-sdk/structures/_MyGroups.scss"; +@import "./matrix-react-sdk/structures/_NotificationPanel.scss"; +@import "./matrix-react-sdk/structures/_RoomStatusBar.scss"; +@import "./matrix-react-sdk/structures/_RoomView.scss"; +@import "./matrix-react-sdk/structures/_SearchBox.scss"; +@import "./matrix-react-sdk/structures/_TagPanel.scss"; +@import "./matrix-react-sdk/structures/_UploadBar.scss"; +@import "./matrix-react-sdk/structures/_UserSettings.scss"; +@import "./matrix-react-sdk/structures/login/_Login.scss"; +@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss"; +@import "./matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss"; +@import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_CreateRoomDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_GroupAddressPicker.scss"; +@import "./matrix-react-sdk/views/dialogs/_QuestionDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_SetMxIdDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss"; +@import "./matrix-react-sdk/views/elements/_AccessibleButton.scss"; +@import "./matrix-react-sdk/views/elements/_AddressSelector.scss"; +@import "./matrix-react-sdk/views/elements/_AddressTile.scss"; +@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss"; +@import "./matrix-react-sdk/views/elements/_Dropdown.scss"; +@import "./matrix-react-sdk/views/elements/_EditableItemList.scss"; +@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss"; +@import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; +@import "./matrix-react-sdk/views/elements/_Quote.scss"; +@import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/elements/_RoleButton.scss"; +@import "./matrix-react-sdk/views/elements/_ToolTipButton.scss"; +@import "./matrix-react-sdk/views/groups/_GroupPublicityToggle.scss"; +@import "./matrix-react-sdk/views/groups/_GroupRoomList.scss"; +@import "./matrix-react-sdk/views/groups/_GroupUserSettings.scss"; +@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss"; +@import "./matrix-react-sdk/views/login/_ServerConfig.scss"; +@import "./matrix-react-sdk/views/messages/_MEmoteBody.scss"; +@import "./matrix-react-sdk/views/messages/_MFileBody.scss"; +@import "./matrix-react-sdk/views/messages/_MImageBody.scss"; +@import "./matrix-react-sdk/views/messages/_MStickerBody.scss"; +@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; +@import "./matrix-react-sdk/views/messages/_MTextBody.scss"; +@import "./matrix-react-sdk/views/messages/_RoomAvatarEvent.scss"; +@import "./matrix-react-sdk/views/messages/_TextualEvent.scss"; +@import "./matrix-react-sdk/views/messages/_UnknownBody.scss"; +@import "./matrix-react-sdk/views/rooms/_AppsDrawer.scss"; +@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss"; +@import "./matrix-react-sdk/views/rooms/_EntityTile.scss"; +@import "./matrix-react-sdk/views/rooms/_EventTile.scss"; +@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberList.scss"; +@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; +@import "./matrix-react-sdk/views/rooms/_Stickers.scss"; +@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss"; +@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss"; +@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; +@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomList.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomTile.scss"; +@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss"; +@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss"; +@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss"; +@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss"; +@import "./matrix-react-sdk/views/voip/_CallView.scss"; +@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss"; +@import "./matrix-react-sdk/views/voip/_VideoView.scss"; +@import "./vector-web/_fonts.scss"; +@import "./vector-web/structures/_CompatibilityPage.scss"; +@import "./vector-web/structures/_HomePage.scss"; +@import "./vector-web/structures/_LeftPanel.scss"; +@import "./vector-web/structures/_RightPanel.scss"; +@import "./vector-web/structures/_RoomDirectory.scss"; +@import "./vector-web/structures/_RoomSubList.scss"; +@import "./vector-web/structures/_ViewSource.scss"; +@import "./vector-web/views/context_menus/_MessageContextMenu.scss"; +@import "./vector-web/views/context_menus/_PresenceContextMenuOption.scss"; +@import "./vector-web/views/context_menus/_RoomTileContextMenu.scss"; +@import "./vector-web/views/context_menus/_TagTileContextMenu.scss"; +@import "./vector-web/views/dialogs/_ChangelogDialog.scss"; +@import "./vector-web/views/dialogs/_DevtoolsDialog.scss"; +@import "./vector-web/views/dialogs/_SetEmailDialog.scss"; +@import "./vector-web/views/dialogs/_SetPasswordDialog.scss"; +@import "./vector-web/views/directory/_NetworkDropdown.scss"; +@import "./vector-web/views/elements/_ImageView.scss"; +@import "./vector-web/views/elements/_InlineSpinner.scss"; +@import "./vector-web/views/elements/_Spinner.scss"; +@import "./vector-web/views/elements/_SyntaxHighlight.scss"; +@import "./vector-web/views/globals/_MatrixToolbar.scss"; +@import "./vector-web/views/messages/_DateSeparator.scss"; +@import "./vector-web/views/messages/_MessageTimestamp.scss"; +@import "./vector-web/views/messages/_SenderProfile.scss"; +@import "./vector-web/views/rooms/_RoomDropTarget.scss"; +@import "./vector-web/views/rooms/_RoomTooltip.scss"; +@import "./vector-web/views/rooms/_SearchBar.scss"; +@import "./vector-web/views/settings/_Notifications.scss"; diff --git a/res/css/_fonts.scss b/res/css/_fonts.scss new file mode 100644 index 0000000000..52ac95b569 --- /dev/null +++ b/res/css/_fonts.scss @@ -0,0 +1,67 @@ +/* + * Open Sans + * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets + */ + +/* the 'src' links are relative to the bundle.css, which is in a subdirectory. + */ +@font-face { + font-family: 'Open Sans'; + src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; +} + +/* + * Fira Mono + * Used for monospace copy, i.e. code + */ + +@font-face { + font-family: 'Fira Mono'; + src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Fira Mono'; + src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} diff --git a/res/css/rethemendex.sh b/res/css/rethemendex.sh new file mode 100755 index 0000000000..a7d9a657ac --- /dev/null +++ b/res/css/rethemendex.sh @@ -0,0 +1,13 @@ +#!/bin/bash + +cd `dirname $0` + +{ + echo "// autogenerated by rethemendex.sh" + + find . \! \( -path ./themes -prune \) -iname _\*.scss | + fgrep -v _components.scss | LC_ALL=C sort | + while read i; do + echo "@import \"$i\";" + done +} > _components.scss diff --git a/res/css/structures/_CompatibilityPage.scss b/res/css/structures/_CompatibilityPage.scss new file mode 100644 index 0000000000..f3f032c975 --- /dev/null +++ b/res/css/structures/_CompatibilityPage.scss @@ -0,0 +1,19 @@ +.mx_CompatibilityPage { + width: 100%; + height: 100%; + background-color: #e55; +} + +.mx_CompatibilityPage_box { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 500px; + height: 300px; + border: 1px solid; + padding: 10px; + background-color: #fcc; +} \ No newline at end of file diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss new file mode 100644 index 0000000000..a0191b92cf --- /dev/null +++ b/res/css/structures/_ContextualMenu.scss @@ -0,0 +1,160 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_ContextualMenu_wrapper { + position: fixed; + z-index: 2000; +} + +.mx_ContextualMenu_background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 2000; +} + +.mx_ContextualMenu { + border: solid 1px $menu-border-color; + border-radius: 4px; + background-color: $menu-bg-color; + color: $primary-fg-color; + position: absolute; + padding: 6px; + font-size: 14px; + z-index: 2001; +} + +.mx_ContextualMenu.mx_ContextualMenu_right { + right: 8px; +} + +.mx_ContextualMenu_chevron_right { + position: absolute; + right: -8px; + top: 0px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-left: 8px solid $menu-border-color; + border-bottom: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_right:after { + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-left: 7px solid $menu-bg-color; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + right: 1px; +} + +.mx_ContextualMenu.mx_ContextualMenu_left { + left: 8px; +} + +.mx_ContextualMenu_chevron_left { + position: absolute; + left: -8px; + top: 0px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-right: 8px solid $menu-border-color; + border-bottom: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_left:after{ + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-right: 7px solid $menu-bg-color; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + left: 1px; +} + +.mx_ContextualMenu.mx_ContextualMenu_top { + top: 8px; +} + +.mx_ContextualMenu_chevron_top { + position: absolute; + left: 0px; + top: -8px; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-bottom: 8px solid $menu-border-color; + border-right: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_top:after{ + content:''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-bottom: 7px solid $menu-bg-color; + border-right: 7px solid transparent; + position:absolute; + left: -7px; + top: 1px; +} + +.mx_ContextualMenu.mx_ContextualMenu_bottom { + bottom: 8px; +} + +.mx_ContextualMenu_chevron_bottom { + position: absolute; + left: 0px; + bottom: -8px; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-top: 8px solid $menu-border-color; + border-right: 8px solid transparent; +} + +.mx_ContextualMenu_chevron_bottom:after{ + content:''; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-top: 7px solid $menu-bg-color; + border-right: 7px solid transparent; + position:absolute; + left: -7px; + bottom: 1px; +} + +.mx_ContextualMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; + white-space: nowrap; +} + +.mx_ContextualMenu_spinner { + display: block; + margin: 0 auto; +} diff --git a/res/css/structures/_CreateRoom.scss b/res/css/structures/_CreateRoom.scss new file mode 100644 index 0000000000..2be193525e --- /dev/null +++ b/res/css/structures/_CreateRoom.scss @@ -0,0 +1,37 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_CreateRoom { + width: 960px; + margin-left: auto; + margin-right: auto; + color: $primary-fg-color; +} + +.mx_CreateRoom input, +.mx_CreateRoom textarea { + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + padding: 9px; + margin-top: 6px; +} + +.mx_CreateRoom_description { + width: 330px; +} + diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss new file mode 100644 index 0000000000..58e090645f --- /dev/null +++ b/res/css/structures/_FilePanel.scss @@ -0,0 +1,114 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_FilePanel { + order: 2; + + flex: 1 1 0; + + width: 100%; + + overflow-y: auto; +} + +.mx_FilePanel .mx_RoomView_messageListWrapper { + margin-right: 20px; +} + +.mx_FilePanel .mx_RoomView_MessageList h2 { + display: none; +} + +/* FIXME: rather than having EventTile's default CSS be for MessagePanel, + we should make EventTile a base CSS class and customise it specifically + for usage in {Message,File,Notification}Panel. */ + +.mx_FilePanel .mx_EventTile_avatar { + display: none; +} + +/* Overrides for the attachment body tiles */ + +.mx_FilePanel .mx_EventTile { + word-break: break-word; +} + +.mx_FilePanel .mx_EventTile .mx_MImageBody { + margin-right: 0px; +} + +.mx_FilePanel .mx_EventTile .mx_MImageBody_download { + display: flex; + font-size: 14px; + color: $event-timestamp-color; +} + +.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink { + flex: 1 1 auto; + color: $light-fg-color; +} + +.mx_FilePanel .mx_EventTile .mx_MImageBody_size { + flex: 1 0 0; + font-size: 11px; + text-align: right; + white-space: nowrap; +} + +/* Overides for the sender details line */ + +.mx_FilePanel .mx_EventTile_senderDetails { + display: flex; + margin-top: -2px; +} + +.mx_FilePanel .mx_EventTile_senderDetailsLink { + text-decoration: none; +} + +.mx_FilePanel .mx_EventTile .mx_SenderProfile { + flex: 1 1 auto; + line-height: initial; + padding: 0px; + font-size: 11px; + opacity: 1.0; + color: $event-timestamp-color; +} + +.mx_FilePanel .mx_EventTile .mx_MessageTimestamp { + flex: 1 0 0; + text-align: right; + visibility: visible; + position: initial; + font-size: 11px; + opacity: 1.0; + color: $event-timestamp-color; +} + +/* Overrides for the wrappers around the body tile */ + +.mx_FilePanel .mx_EventTile_line { + margin-right: 0px; + padding-left: 0px; +} + +.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { + background-color: $primary-bg-color; +} + +.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { + padding-left: 0px; +} diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss new file mode 100644 index 0000000000..02e5a948e9 --- /dev/null +++ b/res/css/structures/_GroupView.scss @@ -0,0 +1,349 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_GroupView { + max-width: 960px; + width: 100%; + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.mx_GroupView_error { + margin: auto; +} + +.mx_GroupView_header { + max-width: 960px; + min-height: 70px; + align-items: center; + display: flex; + padding-bottom: 10px; +} + +.mx_GroupView_header_view { + border-bottom: 1px solid $primary-hairline-color; + padding-bottom: 0px; +} + +.mx_GroupView_header_avatar, .mx_GroupView_header_info { + display: table-cell; + vertical-align: middle; +} + +.mx_GroupHeader_button { + margin-left: 12px; + cursor: pointer; +} + +.mx_GroupHeader_button object { + // prevents clicks from being swallowed by svg in 'object' tag + pointer-events: none; +} + +.mx_GroupView_editable { + border-bottom: 1px solid $strong-input-border-color ! important; + min-width: 150px; + cursor: text; +} + +.mx_GroupView_editable:focus { + border-bottom: 1px solid $accent-color ! important; + outline: none; + box-shadow: none; +} + +.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) { + color: $accent-color; + cursor: pointer; +} + +.mx_GroupView_avatarPicker { + position: relative; +} + +.mx_GroupView_avatarPicker_edit { + position: absolute; + top: 50px; + left: 15px; +} + +.mx_GroupView_avatarPicker .mx_Spinner { + width: 48px; + height: 48px ! important; +} + +.mx_GroupView_header_leftCol { + flex: 1; + + overflow: hidden; +} + +.mx_GroupView_header_rightCol { + display: flex; + align-items: center; +} + +.mx_GroupView_textButton { + display: inline-block; +} + +.mx_GroupView_header_groupid { + font-weight: normal; + font-size: initial; + padding-left: 10px; +} + +.mx_GroupView_header_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_GroupView_header_shortDesc { + vertical-align: bottom; + float: left; + max-height: 42px; + color: $settings-grey-fg-color; + font-weight: 300; + font-size: 13px; + padding-left: 19px; + margin-right: 16px; + overflow: hidden; + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + +.mx_GroupView_avatarPicker_label { + cursor: pointer; +} + +.mx_GroupView_cancelButton { + padding-left: 8px; +} + +.mx_GroupView_cancelButton img { + position: relative; + top: 5px; +} + +.mx_GroupView input[type='radio'] { + margin: 10px 10px 0px 10px; +} + +.mx_GroupView_label_text { + display: inline-block; + max-width: 80%; + vertical-align: 0.1em; + line-height: 2em; +} + +.mx_GroupView_body { + flex-grow: 1; +} + +.mx_GroupView_rooms { + flex-grow: 1; + display: flex; + flex-direction: column; + min-height: 200px; + user-select: none; +} + +.mx_GroupView h3 { + text-transform: uppercase; + color: $h3-color; + font-weight: 600; + font-size: 13px; + margin-bottom: 10px; +} + +.mx_GroupView_rooms_header .mx_AccessibleButton { + padding-left: 14px; + margin-bottom: 14px; + height: 24px; +} + +.mx_GroupView_group { + border-top: 1px solid $primary-hairline-color; +} + +.mx_GroupView_group_disabled { + opacity: 0.3; + pointer-events: none; +} + +.mx_GroupView_rooms_header_addRow_button { + display: inline-block; +} + +.mx_GroupView_rooms_header_addRow_button object { + pointer-events: none; +} + +.mx_GroupView_rooms_header_addRow_label { + display: inline-block; + vertical-align: top; + line-height: 24px; + padding-left: 28px; + color: $accent-color; +} + +.mx_GroupView_rooms .mx_RoomDetailList { + flex-grow: 1; + border-top: 1px solid $primary-hairline-color; + padding-top: 10px; + word-break: break-word; +} + +.mx_GroupView .mx_RoomView_messageListWrapper { + justify-content: flex-start; +} + +.mx_GroupView_membershipSection { + color: $greyed-fg-color; + margin-top: 10px; +} + +.mx_GroupView_membershipSubSection { + justify-content: space-between; + display: flex; +} + +.mx_GroupView_membershipSubSection .mx_Spinner { + justify-content: flex-end; +} + +.mx_GroupView_membershipSection_description { + /* To match textButton */ + line-height: 34px; +} + +.mx_GroupView_membershipSection_description .mx_BaseAvatar { + margin-right: 10px; +} + +.mx_GroupView_membershipSection .mx_GroupView_textButton { + margin-right: 0px; + margin-top: 0px; + margin-left: 8px; +} + +.mx_GroupView_memberSettings_toggle label { + cursor: pointer; + user-select: none; +} + +.mx_GroupView_memberSettings input { + margin-right: 6px; +} + +.mx_GroupView_featuredThings { + margin-top: 20px; +} + +.mx_GroupView_featuredThings_header { + font-weight: bold; + font-size: 120%; + margin-bottom: 20px; +} + +.mx_GroupView_featuredThings_category { + font-weight: bold; + font-size: 110%; + margin-top: 10px; +} + +.mx_GroupView_featuredThings_container { + display: flex; +} + +.mx_GroupView_featuredThings_addButton, +.mx_GroupView_featuredThing { + display: table-cell; + text-align: center; + + width: 100px; + margin: 0px 20px; +} + +.mx_GroupView_featuredThing { + position: relative; +} + +.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton { + position: absolute; + top: -7px; + right: 11px; + opacity: 0.4; +} + +.mx_GroupView_featuredThing .mx_BaseAvatar { + /* To prevent misalignment with mx_TintableSvg (in addButton) */ + vertical-align: initial; +} + +.mx_GroupView_featuredThings_addButton object { + pointer-events: none; +} + +.mx_GroupView_featuredThing_name { + word-wrap: break-word; +} + +.mx_GroupView_uploadInput { + display: none; +} + +.mx_GroupView_body .gm-scroll-view > *{ + margin: 11px 50px 0px 68px; +} + +.mx_GroupView_groupDesc textarea { + width: 100%; + max-width: 100%; + height: 150px; +} + +.mx_GroupView_groupDesc_placeholder, +.mx_GroupView_changeDelayWarning { + background-color: $info-plinth-bg-color; + color: $info-plinth-fg-color; + border-radius: 10px; + text-align: center; + + margin: 20px 0px; +} + +.mx_GroupView_groupDesc_placeholder { + padding: 100px 20px; + cursor: pointer; +} + +.mx_GroupView_changeDelayWarning { + padding: 40px 20px; +} diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss new file mode 100644 index 0000000000..cdac1bcc8a --- /dev/null +++ b/res/css/structures/_HomePage.scss @@ -0,0 +1,35 @@ +/* +Copyright 2016 OpenMarket Ltd +Copyright 2017 Vector Creations Ltd + +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_HomePage { + max-width: 960px; + width: 100%; + height: 100%; + margin-left: auto; + margin-right: auto; +} + +.mx_HomePage iframe { + display: block; + width: 100%; + height: 100%; + border: 0px; +} + +.mx_HomePage_body { +// margin-left: 63px; +} diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss new file mode 100644 index 0000000000..96ed5878ac --- /dev/null +++ b/res/css/structures/_LeftPanel.scss @@ -0,0 +1,129 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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; +} + +.mx_LeftPanel_container { + display: flex; + /* LeftPanel 235px */ + flex: 0 0 235px; +} + +.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel { + /* TagPanel 60px + LeftPanel 235px */ + flex: 0 0 295px; +} + +.mx_LeftPanel_container_collapsed { + /* Collapsed LeftPanel 60px */ + flex: 0 0 60px; +} + +.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel { + /* TagPanel 60px + Collapsed LeftPanel 60px */ + flex: 0 0 120px; +} + +.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; + margin-bottom: 9px; +} + +.mx_LeftPanel .mx_BottomLeftMenu { + order: 3; + + border-top: 1px solid $panel-divider-color; + 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; +} + +.collapsed .mx_RoleButton { + margin-right: 0px ! important; + padding-top: 3px ! important; + padding-bottom: 3px ! important; +} + +.mx_BottomLeftMenu_options > div { + display: inline-block; +} + +.mx_BottomLeftMenu_options .mx_RoleButton { + margin-left: 0px; + margin-right: 10px; + height: 30px; +} + +.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings { + float: right; +} + +.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton { + margin-right: 0px; +} + +.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings { + float: none; +} + +.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; + } +} diff --git a/res/css/structures/_LoginBox.scss b/res/css/structures/_LoginBox.scss new file mode 100644 index 0000000000..7f6199c451 --- /dev/null +++ b/res/css/structures/_LoginBox.scss @@ -0,0 +1,47 @@ +/* +Copyright 2017 OpenMarket Ltd + +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_LoginBox { + min-height: 24px; + height: unset !important; + padding-top: 13px !important; + padding-bottom: 14px !important; +} + +.mx_LoginBox_loginButton_wrapper { + text-align: center; + width: 100%; +} + +.mx_LoginBox_loginButton, +.mx_LoginBox_registerButton { + margin-top: 3px; + height: 40px; + border: 0px; + border-radius: 40px; + margin-left: 4px; + margin-right: 4px; + min-width: 80px; + + background-color: $accent-color; + color: $primary-bg-color; + + cursor: pointer; + + font-size: 15px; + padding: 0 11px; + word-break: break-word; +} diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss new file mode 100644 index 0000000000..156b1709fe --- /dev/null +++ b/res/css/structures/_MatrixChat.scss @@ -0,0 +1,104 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MatrixChat_splash { + position: relative; + height: 100%; +} + +.mx_MatrixChat_splashButtons { + text-align: center; + width: 100%; + position: absolute; + bottom: 30px; +} + +.mx_MatrixChat_wrapper { + display: flex; + + flex-direction: column; + + width: 100%; + height: 100%; +} + +.mx_MatrixToolbar { + order: 1; + + height: 40px; +} + +.mx_MatrixChat_toolbarShowing { + height: auto; +} + +.mx_MatrixChat { + width: 100%; + height: 100%; + + display: flex; + + order: 2; + + flex: 1; +} + +.mx_MatrixChat .mx_LeftPanel { + order: 1; + + background-color: $secondary-accent-color; + + flex: 0 0 235px; +} + +.mx_MatrixChat .mx_LeftPanel.collapsed { + flex: 0 0 60px; +} + +.mx_MatrixChat .mx_MatrixChat_middlePanel { + order: 2; + + padding-left: 20px; + padding-right: 22px; + background-color: $primary-bg-color; + + flex: 1; + + /* Experimental fix for https://github.com/vector-im/vector-web/issues/947 + and https://github.com/vector-im/vector-web/issues/946. + Empirically this stops the MessagePanel's width exploding outwards when + gemini is in 'prevented' mode + */ + overflow-x: auto; + + display: flex; + + /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari + needed height 100% all the way down to the HomePage. Height does not + have to be auto, empirically. + */ + height: 100%; +} + +.mx_MatrixChat .mx_RightPanel { + order: 3; + + flex: 0 0 235px; +} + +.mx_MatrixChat .mx_RightPanel.collapsed { + flex: 0 0 122px; +} diff --git a/res/css/structures/_MyGroups.scss b/res/css/structures/_MyGroups.scss new file mode 100644 index 0000000000..6d140721c8 --- /dev/null +++ b/res/css/structures/_MyGroups.scss @@ -0,0 +1,151 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_MyGroups { + max-width: 960px; + margin-left: auto; + margin-right: auto; + + display: flex; + flex-direction: column; +} + +.mx_MyGroups .mx_RoomHeader_simpleHeader { + margin-left: 0px; +} + +.mx_MyGroups_header { + /* Keep mid-point of create button aligned with icon in page header */ + margin-left: 2px; + display: flex; + flex-wrap: wrap; +} + +.mx_MyGroups_headerCard { + flex: 1 0 50%; + margin-bottom: 30px; + min-width: 400px; + display: flex; + align-items: center; +} + +.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button { + margin-right: 13px; + height: 50px; +} + +.mx_MyGroups_headerCard_button object { + /* Otherwise the SVG object absorbs clicks and the button doesn't work */ + pointer-events: none; +} + +.mx_MyGroups_headerCard_header { + font-weight: bold; + margin-bottom: 10px; +} + +.mx_MyGroups_headerCard_content { + padding-right: 15px; +} + +/* Until the button is wired up */ +.mx_MyGroups_joinBox { + visibility: hidden; + + /* When joinBox wraps onto its own row, it should take up zero height so + that there isn't an awkward gap between MyGroups_createBox and + MyGroups_content. + */ + height: 0px; + margin: 0px; +} + +.mx_MyGroups_content { + margin-left: 2px; + + flex: 1 0 0; + + display: flex; + flex-direction: column; +} + +.mx_MyGroups_placeholder { + background-color: $info-plinth-bg-color; + color: $info-plinth-fg-color; + line-height: 400px; + border-radius: 10px; + text-align: center; +} + +.mx_MyGroups_joinedGroups { + border-top: 1px solid $primary-hairline-color; + overflow-x: hidden; + + display: flex; + flex-direction: row; + flex-flow: wrap; + align-content: flex-start; +} + +.mx_MyGroups_joinedGroups .mx_GroupTile { + min-width: 300px; + max-width: 33%; + flex: 1 0 300px; + height: 75px; + margin: 10px 0px; + display: flex; + align-items: flex-start; + cursor: pointer; +} + +.mx_GroupTile_avatar { + cursor: grab, -webkit-grab; +} + +.mx_GroupTile_profile { + margin-left: 10px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.mx_GroupTile_profile .mx_GroupTile_name, +.mx_GroupTile_profile .mx_GroupTile_groupId, +.mx_GroupTile_profile .mx_GroupTile_desc { + padding-right: 10px; +} + +.mx_GroupTile_profile .mx_GroupTile_name { + margin: 0px; + font-size: 15px; +} + +.mx_GroupTile_profile .mx_GroupTile_groupId { + font-size: 13px; +} + +.mx_GroupTile_profile .mx_GroupTile_desc { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 13px; + max-height: 36px; + overflow: hidden; +} + +.mx_GroupTile_profile .mx_GroupTile_groupId { + opacity: 0.7; +} diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss new file mode 100644 index 0000000000..a899808d57 --- /dev/null +++ b/res/css/structures/_NotificationPanel.scss @@ -0,0 +1,100 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_NotificationPanel { + order: 2; + + flex: 1 1 0; + + width: 100%; + + overflow-y: auto; +} + +.mx_NotificationPanel .mx_RoomView_messageListWrapper { + margin-right: 20px; +} + +.mx_NotificationPanel .mx_RoomView_MessageList h2 { + margin-left: 0px; +} + +/* FIXME: rather than having EventTile's default CSS be for MessagePanel, + we should make EventTile a base CSS class and customise it specifically + for usage in {Message,File,Notification}Panel. */ + +.mx_NotificationPanel .mx_EventTile { + word-break: break-word; +} + +.mx_NotificationPanel .mx_EventTile_roomName { + font-weight: bold; + font-size: 14px; +} + +.mx_NotificationPanel .mx_EventTile_roomName a { + color: $primary-fg-color; +} + +.mx_NotificationPanel .mx_EventTile_avatar { + top: 8px; + left: 0px; +} + +.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, +.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { + color: $primary-fg-color; + font-size: 12px; + display: inline; + padding-left: 0px; +} + +.mx_NotificationPanel .mx_EventTile_senderDetails { + padding-left: 32px; + padding-top: 8px; + position: relative; +} + +.mx_NotificationPanel .mx_EventTile_roomName a, +.mx_NotificationPanel .mx_EventTile_senderDetails a { + text-decoration: none ! important; +} + +.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { + visibility: visible; + position: initial; + display: inline; +} + +.mx_NotificationPanel .mx_EventTile_line { + margin-right: 0px; + padding-left: 32px; + padding-top: 0px; + padding-bottom: 0px; + padding-right: 0px; +} + +.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { + background-color: $primary-bg-color; +} + +.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { + padding-left: 0px; +} + +.mx_NotificationPanel .mx_EventTile_content { + margin-right: 0px; +} \ No newline at end of file diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss new file mode 100644 index 0000000000..b4dff612ed --- /dev/null +++ b/res/css/structures/_RightPanel.scss @@ -0,0 +1,133 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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; +} + +.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 .mx_GroupRoomList, +.mx_RightPanel_blank { + order: 2; + flex: 1 1 0; +} + +.mx_RightPanel .mx_RoomView_messagePanelSpinner { + order: 2; + margin: auto; +} + +.mx_RightPanel_footer { + order: 3; + + border-top: 1px solid $primary-hairline-color; + margin-right: 20px; + + flex: 0 0 60px; +} + +.mx_RightPanel_footer .mx_RightPanel_invite { + font-size: 14px; + color: $primary-fg-color; + padding-top: 13px; + padding-left: 5px; + cursor: pointer; + display: flex; + align-items: center; +} + +.collapsed .mx_RightPanel_footer .mx_RightPanel_invite { + display: none; +} + +.mx_RightPanel_invite .mx_RightPanel_icon object { + pointer-events: none; +} + +.mx_RightPanel_invite .mx_RightPanel_message { + padding-left: 10px; + line-height: 18px; +} + +.mx_MatrixChat_useCompactLayout { + .mx_RightPanel_footer { + flex: 0 0 50px; + } + + .mx_RightPanel_footer .mx_RightPanel_invite { + line-height: 25px; + padding-top: 8px; + } +} diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss new file mode 100644 index 0000000000..9cd3e7284c --- /dev/null +++ b/res/css/structures/_RoomDirectory.scss @@ -0,0 +1,131 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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; +} + +.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; + margin-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; +} diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss new file mode 100644 index 0000000000..ca7431eac2 --- /dev/null +++ b/res/css/structures/_RoomStatusBar.scss @@ -0,0 +1,181 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomStatusBar { + margin-left: 65px; + min-height: 50px; +} + +/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ +.mx_RoomStatusBar_indicator { + padding-left: 17px; + padding-right: 12px; + margin-left: -73px; + margin-top: 15px; + float: left; + width: 24px; + text-align: center; +} + +.mx_RoomStatusBar_callBar { + height: 50px; + line-height: 50px; +} + +.mx_RoomStatusBar_placeholderIndicator span { + color: $primary-fg-color; + opacity: 0.5; + position: relative; + top: -4px; +/* + animation-duration: 1s; + animation-name: bounce; + animation-direction: alternate; + animation-iteration-count: infinite; +*/ +} + +.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) { + animation-delay: 0.3s; +} +.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) { + animation-delay: 0.6s; +} +.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) { + animation-delay: 0.9s; +} + +@keyframes bounce { + from { + opacity: 0.5; + top: 0; + } + + to { + opacity: 0.2; + top: -3px; + } +} + +.mx_RoomStatusBar_typingIndicatorAvatars { + width: 52px; + margin-top: -1px; + text-align: left; +} + +.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image { + margin-right: -12px; + border: 1px solid $primary-bg-color; +} + +.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial { + padding-left: 1px; + padding-top: 1px; +} + +.mx_RoomStatusBar_typingIndicatorRemaining { + display: inline-block; + color: #acacac; + background-color: #ddd; + border: 1px solid $primary-bg-color; + border-radius: 40px; + width: 24px; + height: 24px; + line-height: 24px; + font-size: 0.8em; + vertical-align: top; + text-align: center; + position: absolute; +} + +.mx_RoomStatusBar_scrollDownIndicator { + cursor: pointer; + padding-left: 1px; +} + +.mx_RoomStatusBar_unreadMessagesBar { + padding-top: 10px; + color: $warning-color; + cursor: pointer; +} + +.mx_RoomStatusBar_connectionLostBar { + margin-top: 19px; + min-height: 58px; +} + +.mx_RoomStatusBar_connectionLostBar img { + padding-left: 10px; + padding-right: 22px; + vertical-align: middle; + float: left; +} + +.mx_RoomStatusBar_connectionLostBar_title { + color: $warning-color; +} + +.mx_RoomStatusBar_connectionLostBar_desc { + color: $primary-fg-color; + font-size: 13px; + opacity: 0.5; +} + +.mx_RoomStatusBar_resend_link { + color: $primary-fg-color ! important; + text-decoration: underline ! important; + cursor: pointer; +} + +.mx_RoomStatusBar_typingBar { + height: 50px; + line-height: 50px; + + color: $primary-fg-color; + opacity: 0.5; + overflow-y: hidden; + display: block; +} + +.mx_RoomStatusBar_isAlone { + height: 50px; + line-height: 50px; + + color: $primary-fg-color; + opacity: 0.5; + overflow-y: hidden; + display: block; +} + +.mx_MatrixChat_useCompactLayout { + .mx_RoomStatusBar { + min-height: 40px; + } + + .mx_RoomStatusBar_indicator { + margin-top: 10px; + } + + .mx_RoomStatusBar_callBar { + height: 40px; + line-height: 40px; + } + + .mx_RoomStatusBar_typingBar { + height: 40px; + line-height: 40px; + } +} diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss new file mode 100644 index 0000000000..a2863460ad --- /dev/null +++ b/res/css/structures/_RoomSubList.scss @@ -0,0 +1,244 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomSubList { + display: table; + table-layout: fixed; + width: 100%; + + background-color: $roomsublist-background; +} + +.mx_RoomSubList_labelContainer { + height: 31px; /* mx_RoomSubList_label height including border */ + width: 235px; /* LHS Panel width */ + position: relative; +} + +.mx_RoomSubList_label { + position: relative; + text-transform: uppercase; + color: $roomsublist-label-fg-color; + font-weight: 600; + font-size: 12px; + width: 203px; /* padding + width = LHS Panel width */ + height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */ + padding-left: 16px; /* gutter */ + padding-right: 16px; /* gutter */ + padding-top: 6px; + padding-bottom: 6px; + cursor: pointer; + background-color: $secondary-accent-color; +} + +.mx_RoomSubList_label.mx_RoomSubList_fixed { + position: fixed; + top: 0; + z-index: 5; + /* pointer-events: none; */ +} + +.collapsed .mx_RoomSubList_label { + height: 17px; + width: 28px; /* collapsed LHS Panel width */ +} + +.collapsed .mx_RoomSubList_labelContainer { + width: 28px; /* collapsed LHS Panel width */ +} + +.mx_RoomSubList_roomCount { + display: inline-block; + font-size: 12px; + font-weight: normal; + color: $accent-color; + padding-left: 5px; + text-transform: none; +} + +.collapsed .mx_RoomSubList_roomCount { + display: none; +} + +.mx_RoomSubList_badge { + display: inline-block; + min-width: 15px; + height: 15px; + position: absolute; + right: 8px; /*gutter */ + top: 7px; + border-radius: 8px; + color: $accent-fg-color; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; + background-color: $accent-color; +} + +/* +.collapsed .mx_RoomSubList_badge { + display: none; +} +*/ + +.mx_RoomSubList_badgeHighlight { + background-color: $warning-color; +} + +/* This is the bottom of the speech bubble */ +.mx_RoomSubList_badgeHighlight:after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + margin-left: 5px; + border-top: 5px solid $warning-color; + border-right: 7px solid transparent; +} + +/* Hide the bottom of speech bubble */ +.collapsed .mx_RoomSubList_badgeHighlight:after { + display: none; +} + +.mx_RoomSubList_chevron { + pointer-events: none; + position: absolute; + right: 41px; + top: 11px; +} + +.mx_RoomSubList_chevronDown { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid $roomsublist-chevron-color; +} + +.mx_RoomSubList_chevronUp { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 6px solid $roomsublist-chevron-color; +} + +.mx_RoomSubList_chevronRight { + width: 0; + height: 0; + border-top: 5px solid transparent; + border-left: 6px solid $roomsublist-chevron-color; + border-bottom: 5px solid transparent; +} + +/* The overflow section */ +.mx_RoomSubList_ellipsis { + display: block; + line-height: 11px; + height: 18px; + position: relative; + cursor: pointer; + font-size: 13px; + + background-color: $secondary-accent-color; +} + +.collapsed .mx_RoomSubList_ellipsis { + height: 20px; +} + +.mx_RoomSubList_line { + display: inline-block; + width: 159px; + border-top: dotted 2px $accent-color; + vertical-align: middle; +} + +.collapsed .mx_RoomSubList_line { + display: none; +} + +.mx_RoomSubList_more { + display: inline-block; + text-transform: uppercase; + font-size: 10px; + font-weight: 600; + text-align: left; + color: $accent-color; + padding-left: 7px; + padding-right: 7px; + padding-left: 7px; + vertical-align: middle; +} + +.collapsed .mx_RoomSubList_more { + display: none; +} + +.mx_RoomSubList_moreBadge { + display: inline-block; + min-width: 15px; + height: 13px; + position: absolute; + right: 8px; /*gutter */ + top: -2px; + border-radius: 8px; + border: solid 1px $accent-color; + color: $accent-fg-color; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 3px; + padding-right: 3px; + background-color: $primary-bg-color; + vertical-align: middle; +} + +.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify { + background-color: $accent-color; + border: 0; + padding-top: 3px; + padding-left: 4px; + padding-right: 4px; +} + +.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight { + background-color: $warning-color; + border: 0; + padding-top: 3px; + padding-left: 4px; + padding-right: 4px; +} + +.collapsed .mx_RoomSubList_moreBadge { + position: static; + margin-left: 16px; + margin-top: 2px; +} + +.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown { + position: relative; + top: 4px; + left: 2px; +} + + diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss new file mode 100644 index 0000000000..b8e1190375 --- /dev/null +++ b/res/css/structures/_RoomView.scss @@ -0,0 +1,272 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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: 0px auto; + + overflow: auto; + border-bottom: 1px solid $primary-hairline-color; + + flex: 0 0 auto; +} + +.mx_RoomView_auxPanel_apps { + max-width: 1920px ! important; +} + + +.mx_RoomView_body { + order: 3; + flex: 1 1 0; + flex-direction: column; + display: flex; +} + +.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar { + order: 1; +} + +.mx_RoomView_body .mx_RoomView_messagePanel { + order: 2; +} + +.mx_RoomView_body .mx_RoomView_messagePanelSpinner { + order: 2; + margin: auto; +} + +.mx_RoomView_body .mx_RoomView_statusArea { + order: 3; +} + +.mx_RoomView_body .mx_MessageComposer { + order: 4; +} + +.mx_RoomView_messagePanel { + width: 100%; + overflow-y: auto; +} + +.mx_RoomView_messageListWrapper { + max-width: 960px; + 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; +} + +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 { + 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 { + max-width: 960px; + 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 { + 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; + } +} diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss new file mode 100644 index 0000000000..6f08fd47b2 --- /dev/null +++ b/res/css/structures/_SearchBox.scss @@ -0,0 +1,68 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_SearchBox { + height: 24px; + margin-left: 16px; + margin-right: 16px; + padding-top: 24px; + padding-bottom: 22px; + + border-bottom: 1px solid $panel-divider-color; + + display: flex; +} + +.mx_SearchBox_searchButton { + margin-right: 10px; + margin-top: 5px; + pointer-events: none; +} + +.mx_SearchBox_closeButton { + cursor: pointer; + margin-top: -5px; +} + +.mx_SearchBox_search { + flex: 1 1 auto; + width: 0px; + font-family: $font-family; + font-size: 12px; + margin-top: -2px; + height: 24px; + border: 0px ! important; + /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ + border: 0px; +} + +.mx_SearchBox_minimise, +.mx_SearchBox_maximise { + margin-top: 3px; + cursor: pointer; +} + +.mx_SearchBox_minimise { + margin-left: 10px; +} + +.mx_SearchBox_maximise { + margin-left: 9px; +} + +.mx_SearchBox object { + pointer-events: none; +} diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss new file mode 100644 index 0000000000..ab1d4feac3 --- /dev/null +++ b/res/css/structures/_TagPanel.scss @@ -0,0 +1,126 @@ +/* +Copyright 2017 New Vector Ltd. + +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_TagPanel { + flex: 0 0 60px; + background-color: $tertiary-accent-color; + cursor: pointer; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +.mx_TagPanel .mx_TagPanel_clearButton { + /* Constant height within flex mx_TagPanel */ + height: 70px; + width: 60px; + + flex: none; + + display: flex; + justify-content: center; + align-items: flex-start; +} + +.mx_TagPanel .mx_TagPanel_clearButton object { + /* Same as .mx_SearchBox padding-top */ + margin-top: 24px; + pointer-events: none; +} + +.mx_TagPanel .mx_TagPanel_divider { + height: 0px; + width: 42px; + border-bottom: 1px solid $panel-divider-color; +} + +.mx_TagPanel .mx_TagPanel_scroller { + flex-grow: 1; +} + +.mx_TagPanel .mx_TagPanel_tagTileContainer { + display: flex; + flex-direction: column; + align-items: center; + + height: 100%; +} + +.mx_TagPanel .mx_TagTile { + padding: 6px 3px; + opacity: 0.5; + position: relative; +} +.mx_TagPanel .mx_TagTile:focus, +.mx_TagPanel .mx_TagTile:hover, +.mx_TagPanel .mx_TagTile.mx_TagTile_selected { + opacity: 1; +} + +.mx_TagPanel .mx_TagTile.mx_TagTile_selected { + /* To offset border of mx_TagTile_avatar */ + padding: 3px 0px; +} + +.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar { + border: 3px solid $accent-color; + background-color: $accent-color; + border-radius: 60px; + + /* In case this is a "initial" avatar */ + display: block; + height: 35px; + width: 35px; +} + +.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { + filter: none; +} + +.mx_TagTile_tooltip { + position: relative; + top: -30px; + left: 5px; +} + +.mx_TagTile_context_button { + min-width: 15px; + height: 15px; + position: absolute; + right: -5px; + top: 1px; + border-radius: 8px; + background-color: $neutral-badge-color; + color: #ffffff; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; +} + +.mx_TagPanel_groupsButton { + margin-bottom: 17px; + margin-top: 18px; + height: 25px; +} + +.mx_TagPanel_groupsButton object { + pointer-events: none; +} diff --git a/res/css/structures/_UploadBar.scss b/res/css/structures/_UploadBar.scss new file mode 100644 index 0000000000..d76c81668c --- /dev/null +++ b/res/css/structures/_UploadBar.scss @@ -0,0 +1,61 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_UploadBar { + position: relative; +} + +.mx_UploadBar_uploadProgressOuter { + height: 5px; + margin-left: 63px; + margin-top: -1px; + padding-bottom: 5px; +} + +.mx_UploadBar_uploadProgressInner { + background-color: $accent-color; + height: 5px; +} + +.mx_UploadBar_uploadFilename { + margin-top: 5px; + margin-left: 65px; + opacity: 0.5; + color: $primary-fg-color; +} + +.mx_UploadBar_uploadIcon { + float: left; + margin-top: 5px; + margin-left: 14px; +} + +.mx_UploadBar_uploadCancel { + float: right; + margin-top: 5px; + margin-right: 10px; + position: relative; + opacity: 0.6; + cursor: pointer; + z-index: 1; +} + +.mx_UploadBar_uploadBytes { + float: right; + margin-top: 5px; + margin-right: 30px; + color: $accent-color; +} diff --git a/res/css/structures/_UserSettings.scss b/res/css/structures/_UserSettings.scss new file mode 100644 index 0000000000..4830814e4f --- /dev/null +++ b/res/css/structures/_UserSettings.scss @@ -0,0 +1,253 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 Vector Creations Ltd + +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 { + max-width: 960px; + width: 100%; + margin-left: auto; + margin-right: auto; + + display: flex; + flex-direction: column; +} + +.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 { + @mixin mx_DialogButton; + display: inline; + margin: auto; +} + +.mx_UserSettings_button:hover { + @mixin mx_DialogButton_hover; +} + +.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_passwordWarning { + /* To move the "Sign out" button out of the way */ + clear: both; + color: $warning-color; + margin-bottom: 5px; +} + +.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_webRtcDevices_dropdown { + width: 50%; +} + +.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_avatarPicker_imgContainer { + display: inline-block; +} + +.mx_UserSettings_avatarPicker_remove { + display: inline-block; + float: right; + margin-right: -15px; +} + +.mx_UserSettings_advanced_spoiler, +.mx_UserSettings_link { + cursor: pointer; + color: $accent-color; + word-break: break-all; +} diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss new file mode 100644 index 0000000000..a4c7dcf58a --- /dev/null +++ b/res/css/structures/_ViewSource.scss @@ -0,0 +1,23 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_ViewSource pre { + text-align: left; + font-size: 12px; + padding: 0.5em 1em 0.5em 1em; + word-wrap: break-word; + white-space: pre-wrap; +} diff --git a/res/css/structures/login/_Login.scss b/res/css/structures/login/_Login.scss new file mode 100644 index 0000000000..84b8306a74 --- /dev/null +++ b/res/css/structures/login/_Login.scss @@ -0,0 +1,284 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_Login { + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + + overflow: auto; +} + +.mx_Login h2 { + font-weight: 300; + margin-top: 32px; + margin-bottom: 20px; +} + +.mx_Login_box { + width: 300px; + min-height: 450px; + padding-top: 50px; + padding-bottom: 50px; + margin: auto; +} + +.mx_Login_logo { + text-align: center; + height: 150px; + margin-bottom: 45px; +} + +.mx_Login_logo img { + max-height: 100% +} + +.mx_Login_support { + text-align: center; + font-size: 13px; + margin-top: 0px; + opacity: 0.7; +} + +.mx_Login_field { + width: 280px; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + padding: 9px; + margin-bottom: 14px; +} + +.mx_Login_field_disabled { + opacity: 0.3; +} + +.mx_Login_fieldLabel { + margin-top: -10px; + margin-left: 8px; + margin-bottom: 14px; + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_submit { + @mixin mx_DialogButton; + width: 100%; + margin-top: 35px; + margin-bottom: 24px; +} + +.mx_Login_submit:hover { + @mixin mx_DialogButton_hover; +} + +.mx_Login_submit:disabled { + opacity: 0.3; +} + +.mx_Login_label { + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_checkbox, +.mx_Login_radio { + margin-right: 10px; +} + +.mx_Login_create { + display: block; + text-align: center; + width: 100%; + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_create:link { + color: $primary-fg-color; +} + +.mx_Login_links { + display: block; + text-align: center; + margin-top: 15px; + width: 100%; + font-size: 13px; + opacity: 0.8; +} + +.mx_Login_links a:link { + color: $primary-fg-color; +} + +.mx_Login_prompt { + padding-top: 15px; + padding-bottom: 15px; + font-size: 13px; +} + +.mx_Login_forgot { + font-size: 15px; +} + +.mx_Login_forgot:link { + color: $primary-fg-color; +} + +.mx_Login_loader { + display: inline; + position: relative; + top: 2px; + left: 8px; +} + +.mx_Login_loader .mx_Spinner { + display: inline; +} + +.mx_Login_loader .mx_Spinner img { + width: 16px; + height: 16px; +} + +.mx_Login_error { + color: $warning-color; + font-weight: bold; + text-align: center; +/* + height: 24px; +*/ + margin-top: 12px; + margin-bottom: 12px; +} + +.mx_Login_type_container { + display: flex; + margin-bottom: 14px; +} + +.mx_Login_type_label { + flex-grow: 1; + line-height: 35px; +} + +.mx_Login_type_dropdown { + display: inline-block; + min-width: 170px; + align-self: flex-end; + flex: 1 1 auto; +} + +.mx_Login_field_group { + display: flex; +} + +.mx_Login_field_prefix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-right: 0px; + border-radius: 3px 0px 0px 3px; + + text-align: center; +} + +.mx_Login_field_suffix { + height: 34px; + padding: 0px 5px; + line-height: 33px; + + background-color: #eee; + border: 1px solid #c7c7c7; + border-left: 0px; + border-radius: 0px 3px 3px 0px; + + text-align: center; + flex-grow: 1; +} + +.mx_Login_username { + height: 16px; + flex-shrink: 1; + min-width: 0px; +} + +.mx_Login_phoneNumberField { + height: 16px; +} + +.mx_Login_field_has_prefix { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.mx_Login_field_has_suffix { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + +.mx_Login_phoneSection { + display:flex; +} + +.mx_Login_phoneCountry { + margin-bottom: 14px; + width: 150px; + + /* To override mx_Login_field_prefix */ + text-align: left; + padding: 0px; + background-color: $primary-bg-color; +} + +.mx_Login_field_prefix .mx_Dropdown_input { + /* To use prefix border instead of dropdown border */ + border: 0; +} + +.mx_Login_phoneCountry .mx_Dropdown_option { + /* + To match height of mx_Login_field + 33px + 2px border from mx_Dropdown_option = 35px + */ + height: 33px; + line-height: 33px; +} + +.mx_Login_phoneCountry .mx_Dropdown_option img { + margin: 3px; + vertical-align: top; +} + +.mx_Login_language { + margin-left: auto; + margin-right: auto; + min-width: 60%; +} + +.mx_Login_language_div { + display: flex; + margin-top: 12px; + margin-bottom: 12px; +} + diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss new file mode 100644 index 0000000000..ee2d9c190f --- /dev/null +++ b/res/css/views/avatars/_BaseAvatar.scss @@ -0,0 +1,35 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_BaseAvatar { + position: relative; +} + +.mx_BaseAvatar_initial { + position: absolute; + left: 0px; + color: $avatar-initial-color; + text-align: center; + speak: none; + pointer-events: none; + font-weight: normal; +} + +.mx_BaseAvatar_image { + border-radius: 40px; + vertical-align: top; + background-color: $avatar-bg-color; +} diff --git a/res/css/views/avatars/_MemberPresenceAvatar.scss b/res/css/views/avatars/_MemberPresenceAvatar.scss new file mode 100644 index 0000000000..a15f8eaa65 --- /dev/null +++ b/res/css/views/avatars/_MemberPresenceAvatar.scss @@ -0,0 +1,43 @@ +/* +Copyright 2017 Travis Ralston + +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_MemberPresenceAvatar { + display: inline-block; + position: relative; +} + +.mx_MemberPresenceAvatar_status { + display: block; + width: 10px; + height: 10px; + border-radius: 10px; + + position: absolute; + bottom: -2px; + right: -3px; +} + +.mx_MemberPresenceAvatar_status_online { + background-color: $presence-online; +} + +.mx_MemberPresenceAvatar_status_unavailable { + background-color: $presence-unavailable; +} + +.mx_MemberPresenceAvatar_status_offline { + background-color: $presence-offline; +} diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss new file mode 100644 index 0000000000..85e8080c88 --- /dev/null +++ b/res/css/views/context_menus/_MessageContextMenu.scss @@ -0,0 +1,25 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MessageContextMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; + white-space: nowrap; +} + +.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet { + font-weight: bold; +} diff --git a/res/css/views/context_menus/_PresenceContextMenuOption.scss b/res/css/views/context_menus/_PresenceContextMenuOption.scss new file mode 100644 index 0000000000..bfe81125e0 --- /dev/null +++ b/res/css/views/context_menus/_PresenceContextMenuOption.scss @@ -0,0 +1,42 @@ +/* +Copyright 2017 Travis Ralston + +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_PresenceContextMenuOption_indicator { + width: 10px; + height: 10px; + border-radius: 10px; + display: inline-block; + margin-right: 5px; +} + +.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_online { + background-color: $presence-online; +} + +.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_unavailable { + background-color: $presence-unavailable; +} + +.mx_PresenceContextMenuOption_indicator.mx_PresenceContextMenuOption_indicator_offline { + background-color: $presence-offline; +} + +.mx_PresenceContextMenuOption { + padding: 2px; +} + +.mx_PresenceContextMenuOption.mx_PresenceContextMenuOption_current { + font-weight: 700; +} diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss new file mode 100644 index 0000000000..598f8ac249 --- /dev/null +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -0,0 +1,114 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave { + padding-top: 8px; + padding-right: 20px; + padding-bottom: 8px; + cursor: pointer; + white-space: nowrap; + display: flex; + align-items: center; + line-height: 16px; +} + +.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet { + font-weight: bold; +} + +.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon { + display: none; +} + +.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon_set { + display: inline-block; +} + +.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldDisabled { + color: rgba(0, 0, 0, 0.2); +} + +.mx_RoomTileContextMenu_tag_icon { + padding-right: 8px; + padding-left: 4px; + display: inline-block +} + +.mx_RoomTileContextMenu_tag_icon_set { + padding-right: 8px; + padding-left: 4px; + display: none; +} + +.mx_RoomTileContextMenu_separator { + margin-top: 0; + margin-bottom: 0; + border-bottom-style: none; + border-left-style: none; + border-right-style: none; + border-top-style: solid; + border-top-width: 1px; + border-color: $menu-border-color; +} + +.mx_RoomTileContextMenu_leave { + color: $warning-color; +} + +.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon { + /* Something to indicate that the icon is the set tag */ +} + +.mx_RoomTileContextMenu_notif_picker { + position: absolute; + top: 16px; + left: 5px; +} + +.mx_RoomTileContextMenu_notif_field { + padding-top: 4px; + padding-right: 6px; + padding-bottom: 10px; + padding-left: 8px; /* 20px */ + cursor: pointer; + white-space: nowrap; + display: flex; + align-items: center; +} + +.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldSet { + font-weight: bold; +} + +.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldDisabled { + color: rgba(0, 0, 0, 0.2); +} + +.mx_RoomTileContextMenu_notif_icon { + padding-right: 4px; + padding-left: 4px; +} + +.mx_RoomTileContextMenu_notif_activeIcon { + display: inline-block; + opacity: 0; + position: relative; + left: -5px; +} + +.mx_RoomTileContextMenu_notif_fieldSet .mx_RoomTileContextMenu_notif_activeIcon { + opacity: 1; +} diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss new file mode 100644 index 0000000000..759b92bd68 --- /dev/null +++ b/res/css/views/context_menus/_TagTileContextMenu.scss @@ -0,0 +1,44 @@ +/* +Copyright 2018 New Vector Ltd + +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_TagTileContextMenu_item { + padding-top: 8px; + padding-right: 20px; + padding-bottom: 8px; + cursor: pointer; + white-space: nowrap; + display: flex; + align-items: center; + line-height: 16px; +} + + +.mx_TagTileContextMenu_item_icon { + padding-right: 8px; + padding-left: 4px; + display: inline-block +} + +.mx_TagTileContextMenu_separator { + margin-top: 0; + margin-bottom: 0; + border-bottom-style: none; + border-left-style: none; + border-right-style: none; + border-top-style: solid; + border-top-width: 1px; + border-color: $menu-border-color; +} diff --git a/res/css/views/dialogs/_BugReportDialog.scss b/res/css/views/dialogs/_BugReportDialog.scss new file mode 100644 index 0000000000..e00d446eda --- /dev/null +++ b/res/css/views/dialogs/_BugReportDialog.scss @@ -0,0 +1,52 @@ +/* +Copyright 2017 OpenMarket Ltd + +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_BugReportDialog_field_container { + display: flex; +} + +.mx_BugReportDialog_field_label { + flex-basis: 150px; + + text-align: right; + + padding-top: 9px; + padding-right: 4px; + + line-height: 18px; +} + +.mx_BugReportDialog_field_input { + flex-grow: 1; + + /* taken from mx_ChatInviteDialog_inputContainer */ + border-radius: 3px; + border: solid 1px $input-border-color; + + font-size: 14px; + + padding-left: 4px; + padding-right: 4px; + padding-top: 7px; + padding-bottom: 7px; + + margin-bottom: 4px; +} + +.mx_BugReportDialog_field_input[type="text" i] { + padding-top: 9px; + padding-bottom: 9px; +} diff --git a/res/css/views/dialogs/_ChangelogDialog.scss b/res/css/views/dialogs/_ChangelogDialog.scss new file mode 100644 index 0000000000..460a5f94b1 --- /dev/null +++ b/res/css/views/dialogs/_ChangelogDialog.scss @@ -0,0 +1,24 @@ +/* +Copyright 2016 Aviral Dasgupta + +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_ChangelogDialog_content { + max-height: 300px; + overflow: auto; +} + +.mx_ChangelogDialog_li { + padding: 0.2em; +} diff --git a/res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss b/res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss new file mode 100644 index 0000000000..0f358a588e --- /dev/null +++ b/res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss @@ -0,0 +1,41 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles { + margin-top: 24px; +} + +.mx_ChatCreateOrReuseDialog .mx_Dialog_content { + margin-bottom: 24px; + + /* + To stop spinner that mx_ChatCreateOrReuseDialog_profile replaces from causing a + height change + */ + min-height: 100px; +} + +.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge { + display: none; +} + +.mx_ChatCreateOrReuseDialog_profile { + display: flex; +} + +.mx_ChatCreateOrReuseDialog_profile_name { + padding: 14px; +} diff --git a/res/css/views/dialogs/_ChatInviteDialog.scss b/res/css/views/dialogs/_ChatInviteDialog.scss new file mode 100644 index 0000000000..6fc211743d --- /dev/null +++ b/res/css/views/dialogs/_ChatInviteDialog.scss @@ -0,0 +1,77 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_ChatInviteDialog { + /* XXX: padding-left is on mx_Dialog but padding-right has subsequently + * been added on other dialogs. Surely all our dialogs should have consistent + * right hand padding? + */ + padding-right: 58px; +} + +/* Using a textarea for this element, to circumvent autofill */ +.mx_ChatInviteDialog_input, +.mx_ChatInviteDialog_input:focus +{ + height: 26px; + font-size: 14px; + font-family: $font-family; + 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; +} + +.mx_ChatInviteDialog_error { + margin-top: 10px; + color: $warning-color; +} + +.mx_ChatInviteDialog_cancel { + position: absolute; + right: 11px; + top: 13px; + cursor: pointer; +} + +.mx_ChatInviteDialog_cancel object { + pointer-events: none; +} + diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.scss new file mode 100644 index 0000000000..b859d6bf4d --- /dev/null +++ b/res/css/views/dialogs/_ConfirmUserActionDialog.scss @@ -0,0 +1,53 @@ +/* +Copyright 2017 Vector Creations Ltd. + +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_ConfirmUserActionDialog .mx_Dialog_content { + min-height: 48px; + margin-bottom: 24px; +} + +.mx_ConfirmUserActionDialog_avatar { + float: left; + margin-right: 20px; + margin-top: -2px; +} + +.mx_ConfirmUserActionDialog_name { + font-size: 18px; +} + +.mx_ConfirmUserActionDialog_userId { + font-size: 13px; +} + +.mx_ConfirmUserActionDialog_reasonField { + font-family: $font-family; + font-size: 14px; + color: $primary-fg-color; + background-color: $primary-bg-color; + + border-radius: 3px; + border: solid 1px $input-border-color; + line-height: 36px; + padding-left: 16px; + padding-right: 16px; + padding-top: 1px; + padding-bottom: 1px; + + margin-bottom: 24px; + + width: 90%; +} diff --git a/res/css/views/dialogs/_CreateGroupDialog.scss b/res/css/views/dialogs/_CreateGroupDialog.scss new file mode 100644 index 0000000000..500e12ee49 --- /dev/null +++ b/res/css/views/dialogs/_CreateGroupDialog.scss @@ -0,0 +1,62 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_CreateGroupDialog_inputRow { + margin-top: 10px; + margin-bottom: 10px; +} + +.mx_CreateGroupDialog_label { + text-align: left; + padding-bottom: 12px; +} + +.mx_CreateGroupDialog_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_CreateGroupDialog_input_hasPrefixAndSuffix { + border-radius: 0px; +} + +.mx_CreateGroupDialog_input_group { + display: flex; +} + +.mx_CreateGroupDialog_prefix, +.mx_CreateGroupDialog_suffix { + height: 35px; + padding: 0px 5px; + line-height: 37px; + background-color: $input-border-color; + border: 1px solid $input-border-color; + text-align: center; +} + +.mx_CreateGroupDialog_prefix { + border-right: 0px; + border-radius: 3px 0px 0px 3px; +} + +.mx_CreateGroupDialog_suffix { + border-left: 0px; + border-radius: 0px 3px 3px 0px; +} diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss new file mode 100644 index 0000000000..888f147d21 --- /dev/null +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -0,0 +1,33 @@ +/* +Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> + +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_CreateRoomDialog_details_summary { + outline: none; +} + +.mx_CreateRoomDialog_label { + text-align: left; + padding-bottom: 12px; +} + +.mx_CreateRoomDialog_input { + font-size: 15px; + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $primary-fg-color; + background-color: $primary-bg-color; +} diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss new file mode 100644 index 0000000000..8918373ecf --- /dev/null +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -0,0 +1,166 @@ +/* +Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> + +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_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query { + margin-bottom: 10px; +} + +.mx_DevTools_label_left { + float: left; +} + +.mx_DevTools_label_right { + float: right; +} + +.mx_DevTools_label_bottom { + clear: both; + border-bottom: 1px solid #e5e5e5; +} + +.mx_DevTools_inputRow +{ + display: table-row; +} + +.mx_DevTools_inputLabelCell +{ + padding-bottom: 21px; + display: table-cell; + font-weight: bold; + padding-right: 24px; +} + +.mx_DevTools_inputCell { + display: table-cell; + padding-bottom: 21px; + width: 240px; +} + +.mx_DevTools_inputCell input +{ + display: inline-block; + border: 0; + border-bottom: 1px solid $input-underline-color; + padding: 0; + width: 240px; + color: $input-fg-color; + font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; + font-size: 16px; +} + +.mx_DevTools_tgl { + display: none; + + // add default box-sizing for this scope + &, + &:after, + &:before, + & *, + & *:after, + & *:before, + & + .mx_DevTools_tgl-btn { + box-sizing: border-box; + &::selection { + background: none; + } + } + + + .mx_DevTools_tgl-btn { + outline: 0; + display: block; + width: 7em; + height: 2em; + position: relative; + cursor: pointer; + user-select: none; + &:after, + &:before { + position: relative; + display: block; + content: ""; + width: 50%; + height: 100%; + } + + &:after { + left: 0; + } + + &:before { + display: none; + } + } + + &:checked + .mx_DevTools_tgl-btn:after { + left: 50%; + } +} + +.mx_DevTools_tgl-flip { + + .mx_DevTools_tgl-btn { + padding: 2px; + transition: all .2s ease; + font-family: sans-serif; + perspective: 100px; + &:after, + &:before { + display: inline-block; + transition: all .4s ease; + width: 100%; + text-align: center; + position: absolute; + line-height: 2em; + font-weight: bold; + color: #fff; + top: 0; + left: 0; + backface-visibility: hidden; + border-radius: 4px; + } + + &:after { + content: attr(data-tg-on); + background: #02C66F; + transform: rotateY(-180deg); + } + + &:before { + background: #FF3A19; + content: attr(data-tg-off); + } + + &:active:before { + transform: rotateY(-20deg); + } + } + + &:checked + .mx_DevTools_tgl-btn { + &:before { + transform: rotateY(180deg); + } + + &:after { + transform: rotateY(0); + left: 0; + background: #7FC6A6; + } + + &:active:after { + transform: rotateY(20deg); + } + } +} diff --git a/res/css/views/dialogs/_EncryptedEventDialog.scss b/res/css/views/dialogs/_EncryptedEventDialog.scss new file mode 100644 index 0000000000..b4dd353370 --- /dev/null +++ b/res/css/views/dialogs/_EncryptedEventDialog.scss @@ -0,0 +1,27 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_EncryptedEventDialog .mx_MemberDeviceInfo { + float: right; + padding: 0px; + margin-right: 42px; +} + +.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton { + @mixin mx_DialogButton; + background-color: $primary-bg-color; + color: $accent-color; +} \ No newline at end of file diff --git a/res/css/views/dialogs/_GroupAddressPicker.scss b/res/css/views/dialogs/_GroupAddressPicker.scss new file mode 100644 index 0000000000..d6c961c0ec --- /dev/null +++ b/res/css/views/dialogs/_GroupAddressPicker.scss @@ -0,0 +1,25 @@ +/* +Copyright 2017 New Vector Ltd + +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_GroupAddressPicker_checkboxContainer{ + margin-top: 10px; + display: flex; +} + +.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] { + /* Stop flex from shrinking the checkbox */ + width: 20px; +} diff --git a/res/css/views/dialogs/_QuestionDialog.scss b/res/css/views/dialogs/_QuestionDialog.scss new file mode 100644 index 0000000000..3d47f17592 --- /dev/null +++ b/res/css/views/dialogs/_QuestionDialog.scss @@ -0,0 +1,18 @@ +/* +Copyright 2017 New Vector Ltd. + +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_QuestionDialog { + padding-right: 58px; +} diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss new file mode 100644 index 0000000000..588f10c9cb --- /dev/null +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -0,0 +1,36 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_SetEmailDialog_email_input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $input-fg-color; + background-color: $primary-bg-color; + font-size: 15px; + width: 100%; + max-width: 280px; + margin-bottom: 10px; +} + +.mx_SetEmailDialog_email_input:focus { + outline: none; + box-shadow: none; + border: 1px solid $accent-color; +} + +.mx_SetEmailDialog_email_input_placeholder { +} diff --git a/res/css/views/dialogs/_SetMxIdDialog.scss b/res/css/views/dialogs/_SetMxIdDialog.scss new file mode 100644 index 0000000000..f7d8a3d001 --- /dev/null +++ b/res/css/views/dialogs/_SetMxIdDialog.scss @@ -0,0 +1,50 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 Vector Creations Ltd + +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_SetMxIdDialog .mx_Dialog_title { + padding-right: 40px; +} + +.mx_SetMxIdDialog_input_group { + display: flex; +} + +.mx_SetMxIdDialog_input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $primary-fg-color; + background-color: $primary-bg-color; + font-size: 15px; + width: 100%; + max-width: 280px; +} + +.mx_SetMxIdDialog_input.error, +.mx_SetMxIdDialog_input.error:focus { + border: 1px solid $warning-color; +} + +.mx_SetMxIdDialog_input_group .mx_Spinner { + height: 37px; + padding-left: 10px; + justify-content: flex-start; +} + +.mx_SetMxIdDialog .success { + color: $accent-color; +} diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss new file mode 100644 index 0000000000..28a8b7c9d7 --- /dev/null +++ b/res/css/views/dialogs/_SetPasswordDialog.scss @@ -0,0 +1,35 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_SetPasswordDialog_change_password input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $primary-fg-color; + background-color: $primary-bg-color; + font-size: 15px; + width: 100%; + max-width: 280px; + margin-bottom: 10px; +} + +.mx_SetPasswordDialog_change_password_button { + margin-top: 68px; +} + +.mx_SetPasswordDialog .mx_Dialog_content { + margin-bottom: 0px; +} diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss new file mode 100644 index 0000000000..3457e50b92 --- /dev/null +++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss @@ -0,0 +1,54 @@ +/* +Copyright 2016 OpenMarket Ltd + +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. +*/ + +// CSS voodoo to support a gemini-scrollbar for the contents of the dialog +.mx_Dialog_unknownDevice .mx_Dialog { + // ideally we'd shrink the height to fit when needed, but in practice this + // is a pain in the ass. plus might as well make the dialog big given how + // important it is. + height: 100%; + + // position the gemini scrollbar nicely + padding-right: 58px; +} + +.mx_UnknownDeviceDialog { + height: 100%; + display: flex; + flex-direction: column; +} + +.mx_UnknownDeviceDialog .mx_Dialog_content { + margin-bottom: 24px; +} + +.mx_UnknownDeviceDialog .mx_MemberDeviceInfo { + float: right; + clear: both; + padding: 0px; + padding-top: 8px; +} + +.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton { + @mixin mx_DialogButton_small; + background-color: $primary-bg-color; + color: $accent-color; +} + +.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li { + height: 40px; + border-bottom: 1px solid $primary-hairline-color; +} \ No newline at end of file diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss new file mode 100644 index 0000000000..9850379597 --- /dev/null +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -0,0 +1,84 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_NetworkDropdown { + position: relative; +} + +.mx_NetworkDropdown_input { + position: relative; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + user-select: none; +} + +.mx_NetworkDropdown_arrow { + border-color: $primary-fg-color transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + display: block; + height: 0; + position: absolute; + right: 10px; + top: 14px; + width: 0 +} + +.mx_NetworkDropdown_networkoption { + height: 35px; + line-height: 35px; + padding-left: 8px; + padding-right: 8px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.mx_NetworkDropdown_networkoption img { + margin: 5px; + width: 25px; + vertical-align: middle; +} + +input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus { + border: 0; + padding-top: 0; + padding-bottom: 0; +} + +.mx_NetworkDropdown_menu { + position: absolute; + left: -1px; + right: -1px; + top: 100%; + z-index: 2; + margin: 0; + padding: 0px; + border-radius: 3px; + border: 1px solid $accent-color; + background-color: $primary-bg-color; +} + +.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover { + background-color: $focus-bg-color; +} + +.mx_NetworkDropdown_menu_network { + font-weight: bold; +} + diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss new file mode 100644 index 0000000000..edf455049b --- /dev/null +++ b/res/css/views/elements/_AccessibleButton.scss @@ -0,0 +1,24 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_AccessibleButton:focus { + outline: 0; + filter: brightness($focus-brightness); +} + +.mx_AccessibleButton { + cursor: pointer; +} \ No newline at end of file diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss new file mode 100644 index 0000000000..9871a7e881 --- /dev/null +++ b/res/css/views/elements/_AddressSelector.scss @@ -0,0 +1,45 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_AddressSelector { + position: absolute; + background-color: $primary-bg-color; + width: 485px; + max-height: 116px; + overflow-y: auto; + border-radius: 3px; + background-color: $primary-bg-color; + border: solid 1px $accent-color; + cursor: pointer; +} + +.mx_AddressSelector.mx_AddressSelector_empty { + display: none; +} + +.mx_AddressSelector_addressListElement .mx_AddressTile { + background-color: $primary-bg-color; + border: solid 1px $primary-bg-color; +} + +.mx_AddressSelector_addressListElement.mx_AddressSelector_selected { + background-color: $selected-color; +} + +.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { + background-color: $selected-color; + border: solid 1px $selected-color; +} diff --git a/res/css/views/elements/_AddressTile.scss b/res/css/views/elements/_AddressTile.scss new file mode 100644 index 0000000000..0ecfb17c83 --- /dev/null +++ b/res/css/views/elements/_AddressTile.scss @@ -0,0 +1,138 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_AddressTile { + display: inline-block; + border-radius: 3px; + background-color: rgba(74, 73, 74, 0.1); + border: solid 1px $input-border-color; + line-height: 26px; + color: $primary-fg-color; + font-size: 14px; + font-weight: normal; + margin-right: 4px; +} + +.mx_AddressTile.mx_AddressTile_error { + background-color: rgba(255, 0, 100, 0.1); + color: $warning-color; + border-color: $warning-color; +} + +.mx_AddressTile_network { + display: inline-block; + position: relative; + padding-left: 2px; + padding-right: 4px; + vertical-align: middle; +} + +.mx_AddressTile_avatar { + display: inline-block; + position: relative; + padding-left: 2px; + padding-right: 7px; + vertical-align: middle; +} + +.mx_AddressTile_mx { + display: inline-block; + margin: 0; + border: 0; + padding: 0; +} + +.mx_AddressTile_name { + display: inline-block; + padding-right: 4px; + font-weight: 600; + overflow: hidden; + height: 26px; + vertical-align: middle; +} + +.mx_AddressTile_name.mx_AddressTile_justified { + width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_id { + display: inline-block; + padding-right: 11px; +} + +.mx_AddressTile_id.mx_AddressTile_justified { + width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_unknownMx { + display: inline-block; + font-weight: 600; + padding-right: 11px; +} + +.mx_AddressTile_unknownMxl.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_email { + display: inline-block; + font-weight: 600; + padding-right: 11px; +} + +.mx_AddressTile_email.mx_AddressTile_justified { + width: 200px; /* same as id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_unknown { + display: inline-block; + padding-right: 11px; +} + +.mx_AddressTile_unknown.mx_AddressTile_justified { + width: 380px; /* name + id width */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: middle; +} + +.mx_AddressTile_dismiss { + display: inline-block; + padding-right: 11px; + padding-left: 1px; + cursor: pointer; +} + +.mx_AddressTile_dismiss object { + pointer-events: none; +} diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss new file mode 100644 index 0000000000..94a92b23ce --- /dev/null +++ b/res/css/views/elements/_DirectorySearchBox.scss @@ -0,0 +1,70 @@ +/* +Copyright 2016 OpenMarket Ltd + +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; +} diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss new file mode 100644 index 0000000000..69dd1703ee --- /dev/null +++ b/res/css/views/elements/_Dropdown.scss @@ -0,0 +1,131 @@ +/* +Copyright 2017 OpenMarket Ltd + +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_Dropdown { + position: relative; +} + +.mx_Dropdown_disabled { + opacity: 0.3; +} + +.mx_Dropdown_input { + position: relative; + border-radius: 3px; + border: 1px solid $strong-input-border-color; + font-weight: 300; + font-size: 13px; + user-select: none; +} + +.mx_Dropdown_input:focus { + border-color: $accent-color; +} + +/* Disable dropdown highlight on focus */ +.mx_Dropdown_input.mx_AccessibleButton:focus { + filter: none; +} + +.mx_Dropdown_arrow { + border-color: $primary-fg-color transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + display: block; + height: 0; + position: absolute; + right: 10px; + top: 14px; + width: 0 +} + +.mx_Dropdown.left_aligned .mx_Dropdown_arrow { + left: 10px; +} + +.mx_Dropdown_input > .mx_Dropdown_option { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option { + padding-left: 25px; +} + +.mx_Dropdown_option { + height: 35px; + line-height: 35px; + padding-left: 8px; + padding-right: 8px; +} + +.mx_Dropdown_option div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mx_Dropdown_option img { + margin: 5px; + width: 27px; + vertical-align: middle; +} + +input.mx_Dropdown_option, input.mx_Dropdown_option:focus { + border: 0; + padding-top: 0; + padding-bottom: 0; + // XXX: hack to prevent text box being too big and pushing + // its parent out / overlapping the dropdown arrow. Only really + // works in the Country dropdown. + width: 60%; +} + +.mx_Dropdown_menu { + position: absolute; + left: -1px; + right: -1px; + top: 100%; + z-index: 2; + margin: 0; + padding: 0px; + border-radius: 3px; + border: 1px solid $accent-color; + background-color: $primary-bg-color; + max-height: 200px; + overflow-y: auto; +} + +.mx_Dropdown_menu .mx_Dropdown_option { + height: auto; + min-height: 35px; +} + +.mx_Dropdown_menu .mx_Dropdown_option_highlight { + background-color: $focus-bg-color; +} + +.mx_Dropdown_menu { + font-weight: bold; +} + +.mx_Dropdown_searchPrompt { + font-weight: normal; + margin-left: 5px; + margin-bottom: 5px; +} + diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss new file mode 100644 index 0000000000..9fbb39aa17 --- /dev/null +++ b/res/css/views/elements/_EditableItemList.scss @@ -0,0 +1,62 @@ +/* +Copyright 2017 New Vector Ltd. + +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_EditableItemList { + margin-top: 12px; + margin-bottom: 0px; +} + +.mx_EditableItem { + display: flex; + margin-left: 56px; +} + +.mx_EditableItem .mx_EditableItem_editable { + border: 0px; + border-bottom: 1px solid $strong-input-border-color; + padding: 0px; + min-width: 240px; + max-width: 400px; + margin-bottom: 16px; +} + +.mx_EditableItem .mx_EditableItem_editable:focus { + border-bottom: 1px solid $accent-color; + outline: none; + box-shadow: none; +} + +.mx_EditableItem .mx_EditableItem_editablePlaceholder { + color: $settings-grey-fg-color; +} + +.mx_EditableItem .mx_EditableItem_addButton, +.mx_EditableItem .mx_EditableItem_removeButton { + padding-left: 0.5em; + position: relative; + cursor: pointer; + + visibility: hidden; +} + +.mx_EditableItem:hover .mx_EditableItem_addButton, +.mx_EditableItem:hover .mx_EditableItem_removeButton { + visibility: visible; +} + +.mx_EditableItemList_label { + margin-bottom: 8px; +} diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss new file mode 100644 index 0000000000..8ed0698a72 --- /dev/null +++ b/res/css/views/elements/_ImageView.scss @@ -0,0 +1,134 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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. +*/ + +/* This has got to be the most fragile piece of CSS ever written. + But empirically it works on Chrome/FF/Safari + */ + +.mx_ImageView { + display: flex; + width: 100%; + height: 100%; + align-items: center; +} + +.mx_ImageView_lhs { + order: 1; + flex: 1 1 10%; + min-width: 60px; + // background-color: #080; + // height: 20px; +} + +.mx_ImageView_content { + order: 2; + /* min-width hack needed for FF */ + min-width: 0px; + height: 90%; + flex: 15 15 0; + display: flex; + align-items: center; + justify-content: center; +} + +.mx_ImageView_content img { + max-width: 100%; + /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */ + max-height: 100%; + /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */ + object-fit: contain; + /* background-image: url('../../img/trans.png'); */ + pointer-events: all; +} + +.mx_ImageView_labelWrapper { + position: absolute; + top: 0px; + right: 0px; + height: 100%; + overflow: auto; + pointer-events: all; +} + +.mx_ImageView_label { + text-align: left; + display: flex; + justify-content: center; + flex-direction: column; + padding-left: 30px; + padding-right: 30px; + min-height: 100%; + max-width: 240px; + color: $lightbox-fg-color; +} + +.mx_ImageView_cancel { + position: absolute; + top: 0px; + right: 0px; + padding: 35px; + cursor: pointer; +} + +.mx_ImageView_name { + font-size: 18px; + margin-bottom: 6px; + word-wrap: break-word; +} + +.mx_ImageView_metadata { + font-size: 15px; + opacity: 0.5; +} + +.mx_ImageView_download { + display: table; + margin-top: 24px; + margin-bottom: 6px; + border-radius: 5px; + background-color: $lightbox-bg-color; + font-size: 14px; + padding: 9px; + border: 1px solid $lightbox-border-color; +} + +.mx_ImageView_size { + font-size: 11px; +} + +.mx_ImageView_link { + color: $lightbox-fg-color ! important; + text-decoration: none ! important; +} + +.mx_ImageView_button { + font-size: 15px; + opacity: 0.5; + margin-top: 18px; + cursor: pointer; +} + +.mx_ImageView_shim { + height: 30px; +} + +.mx_ImageView_rhs { + order: 3; + flex: 1 1 10%; + min-width: 300px; + // background-color: #800; + // height: 20px; +} diff --git a/res/css/views/elements/_InlineSpinner.scss b/res/css/views/elements/_InlineSpinner.scss new file mode 100644 index 0000000000..612b6209c6 --- /dev/null +++ b/res/css/views/elements/_InlineSpinner.scss @@ -0,0 +1,24 @@ +/* +Copyright 2017 New Vector Ltd. + +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_InlineSpinner { + display: inline; +} + +.mx_InlineSpinner img { + margin: 0px 6px; + vertical-align: -3px; +} diff --git a/res/css/views/elements/_MemberEventListSummary.scss b/res/css/views/elements/_MemberEventListSummary.scss new file mode 100644 index 0000000000..02ecb5d84a --- /dev/null +++ b/res/css/views/elements/_MemberEventListSummary.scss @@ -0,0 +1,71 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_MemberEventListSummary { + position: relative; +} + +.mx_TextualEvent.mx_MemberEventListSummary_summary { + font-size: 14px; + display: inline-flex; +} + +.mx_MemberEventListSummary_avatars { + display: inline-block; + margin-right: 8px; + padding-top: 8px; + line-height: 12px; +} + +.mx_MemberEventListSummary_avatars .mx_BaseAvatar { + margin-right: -4px; + cursor: pointer; +} + +.mx_MemberEventListSummary_toggle { + color: $accent-color; + cursor: pointer; + float: right; + margin-right: 10px; + margin-top: 8px; +} + +.mx_MemberEventListSummary_line { + border-bottom: 1px solid $primary-hairline-color; + margin-left: 63px; + line-height: 30px; +} + +.mx_MatrixChat_useCompactLayout { + .mx_MemberEventListSummary { + font-size: 13px; + .mx_EventTile_line { + line-height: 20px; + } + } + + .mx_MemberEventListSummary_line { + line-height: 22px; + } + + .mx_MemberEventListSummary_toggle { + margin-top: 3px; + } + + .mx_TextualEvent.mx_MemberEventListSummary_summary { + font-size: 13px; + } +} diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss new file mode 100644 index 0000000000..a3fee232d0 --- /dev/null +++ b/res/css/views/elements/_ProgressBar.scss @@ -0,0 +1,25 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_ProgressBar { + height: 5px; + border: 1px solid $progressbar-color; +} + +.mx_ProgressBar_fill { + height: 100%; + background-color: $progressbar-color; +} diff --git a/res/css/views/elements/_Quote.scss b/res/css/views/elements/_Quote.scss new file mode 100644 index 0000000000..0af555b5aa --- /dev/null +++ b/res/css/views/elements/_Quote.scss @@ -0,0 +1,26 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_Quote .mx_DateSeparator { + font-size: 1em !important; + margin-bottom: 0; + padding-bottom: 1px; + bottom: -5px; +} + +.mx_Quote_show { + cursor: pointer; +} diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss new file mode 100644 index 0000000000..474a123455 --- /dev/null +++ b/res/css/views/elements/_RichText.scss @@ -0,0 +1,75 @@ +// XXX: bleurgh, what is this? These classes totally break the component +// naming scheme; it's completely unclear where or how they're being used +// --Matthew + +.mx_UserPill, +.mx_RoomPill, +.mx_AtRoomPill { + border-radius: 16px; + display: inline-block; + height: 20px; + line-height: 20px; + padding-left: 5px; +} + +.mx_EventTile_body .mx_UserPill, +.mx_EventTile_body .mx_RoomPill { + cursor: pointer; +} + +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_UserPill, +.mx_UserPill { + color: $primary-fg-color; + background-color: $other-user-pill-bg-color; + padding-right: 5px; +} + +.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, +.mx_EventTile_content .mx_AtRoomPill, +.mx_MessageComposer_input .mx_AtRoomPill { + color: $accent-fg-color; + background-color: $mention-user-pill-bg-color; + padding-right: 5px; +} + +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_RoomPill, +.mx_RoomPill { + color: $accent-fg-color; + background-color: $rte-room-pill-color; + padding-right: 5px; +} + +.mx_UserPill .mx_BaseAvatar, +.mx_RoomPill .mx_BaseAvatar, +.mx_AtRoomPill .mx_BaseAvatar { + position: relative; + left: -3px; + top: 2px; +} + +.mx_Markdown_BOLD { + font-weight: bold; +} + +.mx_Markdown_ITALIC { + font-style: italic; +} + +.mx_Markdown_CODE { + padding: .2em 0; + margin: 0; + font-size: 85%; + background-color: $rte-code-bg-color; + border-radius: 3px; +} + +.mx_Markdown_HR { + display: block; + background: $rte-bg-color; +} + +.mx_Markdown_STRIKETHROUGH { + text-decoration: line-through; +} diff --git a/res/css/views/elements/_RoleButton.scss b/res/css/views/elements/_RoleButton.scss new file mode 100644 index 0000000000..094e0b9b1b --- /dev/null +++ b/res/css/views/elements/_RoleButton.scss @@ -0,0 +1,33 @@ +/* +Copyright 2107 Vector Creations Ltd + +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_RoleButton { + margin-left: 4px; + margin-right: 4px; + cursor: pointer; + display: inline-block; +} + +.mx_RoleButton object { + pointer-events: none; +} + +.mx_RoleButton_tooltip { + display: inline-block; + position: relative; + top: -25px; + left: 6px; +} diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss new file mode 100644 index 0000000000..aea5737918 --- /dev/null +++ b/res/css/views/elements/_Spinner.scss @@ -0,0 +1,28 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_Spinner { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + flex: 1; +} + +.mx_MatrixChat_middlePanel .mx_Spinner { + height: auto; +} \ No newline at end of file diff --git a/res/css/views/elements/_SyntaxHighlight.scss b/res/css/views/elements/_SyntaxHighlight.scss new file mode 100644 index 0000000000..e97401a160 --- /dev/null +++ b/res/css/views/elements/_SyntaxHighlight.scss @@ -0,0 +1,21 @@ +/* +Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> + +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_SyntaxHighlight { + /* inhibit hljs styling */ + background: none !important; + color: $light-fg-color !important; +} diff --git a/res/css/views/elements/_ToolTipButton.scss b/res/css/views/elements/_ToolTipButton.scss new file mode 100644 index 0000000000..c496e67515 --- /dev/null +++ b/res/css/views/elements/_ToolTipButton.scss @@ -0,0 +1,51 @@ +/* +Copyright 2017 New Vector Ltd. + +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_ToolTipButton { + display: inline-block; + width: 11px; + height: 11px; + margin-left: 5px; + + border: 2px solid $neutral-badge-color; + border-radius: 20px; + color: $neutral-badge-color; + + transition: opacity 0.2s ease-in; + opacity: 0.6; + + line-height: 11px; + text-align: center; + + cursor: pointer; +} + +.mx_ToolTipButton:hover { + opacity: 1.0; +} + +.mx_ToolTipButton_container { + position: relative; + top: -18px; + left: 4px; +} + +.mx_ToolTipButton_helpText { + width: 400px; + text-align: start; + line-height: 17px !important; +} + diff --git a/res/css/views/globals/_MatrixToolbar.scss b/res/css/views/globals/_MatrixToolbar.scss new file mode 100644 index 0000000000..be69b15f37 --- /dev/null +++ b/res/css/views/globals/_MatrixToolbar.scss @@ -0,0 +1,62 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MatrixToolbar { + background-color: $accent-color; + color: $accent-fg-color; + + display: flex; + align-items: center; +} + +.mx_MatrixToolbar_warning { + margin-left: 16px; + margin-right: 8px; + margin-top: -2px; +} + +.mx_MatrixToolbar_content { + flex: 1; +} + +.mx_MatrixToolbar_link +{ + color: $accent-fg-color ! important; + text-decoration: underline ! important; + cursor: pointer; +} + +.mx_MatrixToolbar_clickable { + cursor: pointer; +} + +.mx_MatrixToolbar_close { + cursor: pointer; +} + +.mx_MatrixToolbar_close img { + display: block; + float: right; + margin-right: 10px; +} + +.mx_MatrixToolbar_action { + margin-right: 16px; +} + +.mx_MatrixToolbar_changelog { + white-space: pre; +} \ No newline at end of file diff --git a/res/css/views/groups/_GroupPublicityToggle.scss b/res/css/views/groups/_GroupPublicityToggle.scss new file mode 100644 index 0000000000..3ea4aa07d6 --- /dev/null +++ b/res/css/views/groups/_GroupPublicityToggle.scss @@ -0,0 +1,42 @@ +/* +Copyright 2017 New Vector Ltd + +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_GroupPublicity_toggle { + display: flex; + align-items: center; + margin: 8px; +} + +.mx_GroupPublicity_toggle > label { + display: flex; + align-items: flex-start; +} + +.mx_GroupPublicity_toggle > label, +.mx_GroupPublicity_toggle .mx_GroupTile { + width: 50%; +} + +.mx_GroupPublicity_toggle input { + margin-right: 8px; + vertical-align: -4px; +} + +.mx_GroupPublicity_toggle .mx_GroupTile { + display: flex; + align-items: flex-start; + cursor: pointer; +} diff --git a/res/css/views/groups/_GroupRoomList.scss b/res/css/views/groups/_GroupRoomList.scss new file mode 100644 index 0000000000..fb41ebaa9e --- /dev/null +++ b/res/css/views/groups/_GroupRoomList.scss @@ -0,0 +1,21 @@ +/* +Copyright 2017 New Vector Ltd + +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_GroupRoomTile { + position: relative; + color: $primary-fg-color; + cursor: pointer; +} diff --git a/res/css/views/groups/_GroupUserSettings.scss b/res/css/views/groups/_GroupUserSettings.scss new file mode 100644 index 0000000000..0c909b7cf7 --- /dev/null +++ b/res/css/views/groups/_GroupUserSettings.scss @@ -0,0 +1,23 @@ +/* +Copyright 2017 New Vector Ltd + +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_GroupUserSettings_groupPublicity_scrollbox { + height: 200px; + border: 1px solid $primary-hairline-color; + border-radius: 3px; + margin-right: 32px; + overflow: hidden; +} diff --git a/res/css/views/login/_InteractiveAuthEntryComponents.scss b/res/css/views/login/_InteractiveAuthEntryComponents.scss new file mode 100644 index 0000000000..183b5cd251 --- /dev/null +++ b/res/css/views/login/_InteractiveAuthEntryComponents.scss @@ -0,0 +1,42 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_InteractiveAuthEntryComponents_msisdnWrapper { + text-align: center; +} + +.mx_InteractiveAuthEntryComponents_msisdnEntry { + font-size: 200%; + font-weight: bold; + border: 1px solid $strong-input-border-color; + border-radius: 3px; + width: 6em; +} + +.mx_InteractiveAuthEntryComponents_msisdnEntry:focus { + border: 1px solid $accent-color; +} + +.mx_InteractiveAuthEntryComponents_msisdnSubmit { + margin-top: 4px; + margin-bottom: 5px; +} + +// XXX: This should be a common button class +.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled { + background-color: $light-fg-color; + cursor: default; +} diff --git a/res/css/views/login/_ServerConfig.scss b/res/css/views/login/_ServerConfig.scss new file mode 100644 index 0000000000..894ce19827 --- /dev/null +++ b/res/css/views/login/_ServerConfig.scss @@ -0,0 +1,36 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_ServerConfig { + margin-top: 7px; +} + +.mx_ServerConfig .mx_Login_field { + margin-top: 4px; + margin-bottom: 5px; +} + +.mx_ServerConfig_help:link { + opacity: 0.8; + font-size: 13px; + font-weight: 300; + color: $primary-fg-color; +} + +.mx_ServerConfig_selector { + text-align: center; + width: 302px; // for fr i18n +} \ No newline at end of file diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss new file mode 100644 index 0000000000..f676d24bef --- /dev/null +++ b/res/css/views/messages/_DateSeparator.scss @@ -0,0 +1,25 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_DateSeparator { + clear: both; + margin-top: 32px; + margin-bottom: 8px; + margin-left: 63px; + padding-bottom: 6px; + border-bottom: 1px solid $primary-hairline-color; +} + diff --git a/res/css/views/messages/_MEmoteBody.scss b/res/css/views/messages/_MEmoteBody.scss new file mode 100644 index 0000000000..cf722e5ae8 --- /dev/null +++ b/res/css/views/messages/_MEmoteBody.scss @@ -0,0 +1,23 @@ +/* +Copyright 2017 Vector Creations Ltd. + +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_MEmoteBody { + white-space: pre-wrap; +} + +.mx_MEmoteBody_sender { + cursor: pointer; +} diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss new file mode 100644 index 0000000000..6cbce68745 --- /dev/null +++ b/res/css/views/messages/_MFileBody.scss @@ -0,0 +1,47 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MFileBody_download { + color: $accent-color; +} + +.mx_MFileBody_download a { + color: $accent-color; + text-decoration: none; + cursor: pointer; +} + +.mx_MFileBody_download object { + margin-left: -16px; + padding-right: 4px; + margin-top: -4px; + vertical-align: middle; + pointer-events: none; +} + +/* Remove the border and padding for iframes for download links. */ +.mx_MFileBody_download iframe { + margin: 0px; + padding: 0px; + border: none; + width: 100%; + /* Set the height of the iframe to be 1 line of text. + * Iframes don't automatically size themselves to fit their content. + * So either we have to fix the height of the iframe using CSS or + * use javascript's cross-origin postMessage API to communicate how + * big the content of the iframe is. */ + height: 1.5em; +} diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss new file mode 100644 index 0000000000..bf483feda3 --- /dev/null +++ b/res/css/views/messages/_MImageBody.scss @@ -0,0 +1,20 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MImageBody { + display: block; + margin-right: 34px; +} diff --git a/res/css/views/messages/_MNoticeBody.scss b/res/css/views/messages/_MNoticeBody.scss new file mode 100644 index 0000000000..a88c20863d --- /dev/null +++ b/res/css/views/messages/_MNoticeBody.scss @@ -0,0 +1,20 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MNoticeBody { + white-space: pre-wrap; + opacity: 0.6; +} diff --git a/res/css/views/messages/_MStickerBody.scss b/res/css/views/messages/_MStickerBody.scss new file mode 100644 index 0000000000..3e6bbe5aa4 --- /dev/null +++ b/res/css/views/messages/_MStickerBody.scss @@ -0,0 +1,46 @@ +/* +Copyright 2018 New Vector Ltd. + +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_MStickerBody { + display: block; + margin-right: 34px; + min-height: 110px; + padding: 20px 0; +} + +.mx_MStickerBody_image_container { + display: inline-block; + position: relative; +} + +.mx_MStickerBody_image { + max-width: 100%; + opacity: 0; +} + +.mx_MStickerBody_image_visible { + opacity: 1; +} + +.mx_MStickerBody_placeholder { + position: absolute; + opacity: 1; +} + +.mx_MStickerBody_placeholder_invisible { + transition: 500ms; + opacity: 0; +} diff --git a/res/css/views/messages/_MTextBody.scss b/res/css/views/messages/_MTextBody.scss new file mode 100644 index 0000000000..fcf397fd2d --- /dev/null +++ b/res/css/views/messages/_MTextBody.scss @@ -0,0 +1,24 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MTextBody { + white-space: pre-wrap; +} + +.mx_MTextBody pre{ + overflow-y: auto; + max-height: 30vh; +} diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss new file mode 100644 index 0000000000..e21189c59e --- /dev/null +++ b/res/css/views/messages/_MessageTimestamp.scss @@ -0,0 +1,18 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MessageTimestamp { +} diff --git a/res/css/views/messages/_RoomAvatarEvent.scss b/res/css/views/messages/_RoomAvatarEvent.scss new file mode 100644 index 0000000000..9adce42eef --- /dev/null +++ b/res/css/views/messages/_RoomAvatarEvent.scss @@ -0,0 +1,26 @@ +/* +Copyright 2017 Vector Creations Ltd + +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_RoomAvatarEvent { + opacity: 0.5; + overflow-y: hidden; +} + +.mx_RoomAvatarEvent_avatar { + display: inline; + position: relative; + top: 5px; +} \ No newline at end of file diff --git a/res/css/views/messages/_SenderProfile.scss b/res/css/views/messages/_SenderProfile.scss new file mode 100644 index 0000000000..060709b82e --- /dev/null +++ b/res/css/views/messages/_SenderProfile.scss @@ -0,0 +1,15 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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. +*/ diff --git a/res/css/views/messages/_TextualEvent.scss b/res/css/views/messages/_TextualEvent.scss new file mode 100644 index 0000000000..be7565b3c5 --- /dev/null +++ b/res/css/views/messages/_TextualEvent.scss @@ -0,0 +1,20 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_TextualEvent { + opacity: 0.5; + overflow-y: hidden; +} diff --git a/res/css/views/messages/_UnknownBody.scss b/res/css/views/messages/_UnknownBody.scss new file mode 100644 index 0000000000..9036e12bf0 --- /dev/null +++ b/res/css/views/messages/_UnknownBody.scss @@ -0,0 +1,16 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +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_UnknownBody { + white-space: pre-wrap; +} diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss new file mode 100644 index 0000000000..0cf3e7b9cb --- /dev/null +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -0,0 +1,271 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_AppsDrawer { + margin: 5px; +} + +.mx_AppsDrawer_hidden { + display: none; +} + +.mx_AppsContainer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.mx_AddWidget_button { + order: 2; + cursor: pointer; + padding-right: 12px; + padding: 0; + margin: 5px auto 5px auto; + color: $accent-color; + font-size: 12px; +} + +.mx_AddWidget_button_full_width { + max-width: 960px; +} + +.mx_SetAppURLDialog_input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $primary-hairline-color; + background-color: $primary-bg-color; + font-size: 15px; +} + +.mx_AppTile { + max-width: 960px; + width: 50%; + margin-right: 5px; + border: 1px solid $primary-hairline-color; + border-radius: 2px; + background-color: $dialog-background-bg-color; +} + +.mx_AppTile:last-child { + margin-right: 1px; +} + +.mx_AppTileFullWidth { + max-width: 960px; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border: 1px solid $primary-hairline-color; + border-radius: 2px; +} + +.mx_AppTileMenuBar { + margin: 0; + padding: 2px 10px; + border-bottom: 1px solid $primary-hairline-color; + font-size: 10px; + background-color: $widget-menu-bar-bg-color; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + cursor: pointer; +} + +.mx_AppTileMenuBarTitle { + display: flex; + flex-direction: row; + align-items: center; + pointer-events: none; +} + +.mx_AppTileMenuBarWidgets { + float: right; + display: flex; + flex-direction: row; + align-items: center; +} + +.mx_AppTileMenuBarWidget { + cursor: pointer; + width: 10px; + height: 10px; + padding: 1px; + transition-duration: 500ms; + border: 1px solid transparent; +} + +.mx_AppTileMenuBarWidgetDelete { + filter: none; +} + +.mx_AppTileMenuBarWidget:hover { + border: 1px solid $primary-fg-color; + border-radius: 2px; +} + +.mx_AppTileBody{ + height: 280px; + width: 100%; + overflow: hidden; +} + +.mx_AppTileBody iframe { + width: 100%; + height: 280px; + overflow: hidden; + border: none; + padding: 0; + margin: 0; + display: block; +} + +.mx_AppTileMenuBarWidgetPadding { + margin-right: 5px; +} + +.mx_AppIconTile { + background-color: $lightbox-bg-color; + border: 1px solid rgba(0, 0, 0, 0); + width: 200px; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + border-radius: 3px; + margin: 5px; + display: inline-block; +} + +.mx_AppIconTile.mx_AppIconTile_active { + color: $accent-color; + border-color: $accent-color; +} + +.mx_AppIconTile:hover { + border: 1px solid $accent-color; + box-shadow: 0 0 10px 5px rgba(200,200,200,0.5); +} + +.mx_AppIconTile_content { + padding: 2px 16px; + height: 60px; + overflow: hidden; +} + +.mx_AppIconTile_content h4 { + margin-top: 5px; + margin-bottom: 2px; +} + +.mx_AppIconTile_content p { + margin-top: 0; + margin-bottom: 5px; + font-size: smaller; +} + +.mx_AppIconTile_image { + padding: 10px; + width: 75%; + max-width:100px; + max-height:100px; + width: auto; + height: auto; +} + +.mx_AppIconTile_imageContainer { + text-align: center; + width: 100%; + background-color: white; + border-radius: 3px 3px 0 0; + height: 155px; + display: flex; + justify-content: center; + align-items: center; +} + +form.mx_Custom_Widget_Form div { + margin-top: 10px; + margin-bottom: 10px; +} + +.mx_AppPermissionWarning { + text-align: center; + background-color: $primary-bg-color; + display: flex; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.mx_AppPermissionWarningImage { + margin: 10px 0; +} + +.mx_AppPermissionWarningImage img { + width: 100px; +} + +.mx_AppPermissionWarningText { + max-width: 400px; + margin: 10px auto 10px auto; + color: $primary-fg-color; +} + +.mx_AppPermissionWarningTextLabel { + font-weight: bold; + display: block; +} + +.mx_AppPermissionWarningTextURL { + color: $accent-color; +} + +.mx_AppPermissionButton { + padding: 5px; + border-radius: 5px; + color: $warning-color; + background-color: $primary-bg-color; +} + +.mx_AppPermissionButton:hover { + background-color: $primary-fg-color; + cursor: pointer; +} + +.mx_AppLoading { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-weight: bold; + position: relative; + height: 280px; +} + +.mx_AppLoading .mx_Spinner { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.mx_AppLoading iframe { + display: none; +} diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss new file mode 100644 index 0000000000..732ada088b --- /dev/null +++ b/res/css/views/rooms/_Autocomplete.scss @@ -0,0 +1,93 @@ +.mx_Autocomplete { + position: absolute; + bottom: 0; + z-index: 1001; + width: 100%; + border: 1px solid $primary-hairline-color; + background: $primary-bg-color; + border-bottom: none; + border-radius: 4px 4px 0 0; + max-height: 50vh; + overflow: auto +} + +.mx_Autocomplete_ProviderSection { + border-bottom: 1px solid $primary-hairline-color; +} + +.mx_Autocomplete_Completion_container_pill { + margin: 12px; + display: flex; +} + +/* a "block" completion takes up a whole line */ +.mx_Autocomplete_Completion_block { + height: 34px; + display: flex; + padding: 0 12px; + user-select: none; + cursor: pointer; + align-items: center; + color: $primary-fg-color; +} + +.mx_Autocomplete_Completion_block * { + margin: 0 3px; +} + +.mx_Autocomplete_Completion_pill { + border-radius: 17px; + height: 34px; + padding: 0px 5px; + display: flex; + user-select: none; + cursor: pointer; + align-items: center; + color: $primary-fg-color; +} + +.mx_Autocomplete_Completion_pill > * { + margin: 0 3px; +} + +.mx_Autocomplete_Completion_container_truncate { + .mx_Autocomplete_Completion_title, + .mx_Autocomplete_Completion_subtitle, + .mx_Autocomplete_Completion_description { + /* Ellipsis for long names/subtitles/descriptions*/ + max-width: 150px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* container for pill-style completions */ +.mx_Autocomplete_Completion_container_pill { + margin: 12px; + display: flex; + flex-flow: wrap; +} + +.mx_Autocomplete_Completion.selected { + background: $menu-bg-color; + outline: none; +} + +.mx_Autocomplete_provider_name { + margin: 12px; + color: $primary-fg-color; + font-weight: 400; + opacity: 0.4; +} + +/* styling for common completion elements */ +.mx_Autocomplete_Completion_subtitle { + font-style: italic; + flex: 1; +} + +.mx_Autocomplete_Completion_description { + color: gray; +} + diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss new file mode 100644 index 0000000000..031894afde --- /dev/null +++ b/res/css/views/rooms/_EntityTile.scss @@ -0,0 +1,114 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_EntityTile { + display: table-row; + position: relative; + color: $primary-fg-color; + cursor: pointer; +} + +.mx_EntityTile_invite { + display: table-cell; + vertical-align: middle; + margin-left: 10px; + width: 26px; +} + +.mx_EntityTile_avatar, +.mx_GroupRoomTile_avatar { + display: table-cell; + padding-left: 3px; + padding-right: 12px; + padding-top: 4px; + padding-bottom: 4px; + vertical-align: middle; + width: 36px; + height: 36px; + position: relative; +} + +.mx_EntityTile_power { + position: absolute; + width: 16px; + height: 17px; + top: 0px; + right: 6px; +} + +.mx_EntityTile_name, +.mx_GroupRoomTile_name { + display: table-cell; + vertical-align: middle; + overflow: hidden; + font-size: 14px; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 155px; +} + +.mx_EntityTile_details { + display: table-cell; + padding-right: 14px; + vertical-align: middle; +} + +.mx_EntityTile_name_hover { + font-size: 13px; +} + +.mx_EntityTile_chevron { + margin-top: 8px; + margin-right: -4px; + margin-left: 6px; + float: right; +} + +.mx_EntityTile_ellipsis .mx_EntityTile_name { + font-style: italic; + color: $primary-fg-color; +} + +.mx_EntityTile_invitePlaceholder .mx_EntityTile_name { + font-style: italic; + color: $primary-fg-color; +} + +.mx_EntityTile_unavailable .mx_EntityTile_avatar, +.mx_EntityTile_unavailable .mx_EntityTile_name, +.mx_EntityTile_unavailable .mx_EntityTile_name_hover, +.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, +.mx_EntityTile_offline_beenactive .mx_EntityTile_name, +.mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover +{ + opacity: 0.66; +} + +.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, +.mx_EntityTile_offline_neveractive .mx_EntityTile_name, +.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover +{ + opacity: 0.25; +} + +.mx_EntityTile_unknown .mx_EntityTile_avatar, +.mx_EntityTile_unknown .mx_EntityTile_name, +.mx_EntityTile_unknown .mx_EntityTile_name_hover +{ + opacity: 0.25; +} + + diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss new file mode 100644 index 0000000000..4bb81a2e53 --- /dev/null +++ b/res/css/views/rooms/_EventTile.scss @@ -0,0 +1,530 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_EventTile { + max-width: 100%; + clear: both; + padding-top: 18px; + font-size: 14px; + position: relative; +} + +.mx_EventTile.mx_EventTile_info { + padding-top: 0px; +} + +.mx_EventTile_avatar { + position: absolute; + top: 14px; + left: 8px; + cursor: pointer; + z-index: 2; +} + +.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { + top: 8px; + left: 65px; +} + +.mx_EventTile_continuation { + padding-top: 0px ! important; +} + +.mx_EventTile .mx_SenderProfile { + color: $primary-fg-color; + font-size: 14px; + display: block; /* anti-zalgo, with overflow hidden */ + overflow-y: hidden; + cursor: pointer; + padding-left: 65px; /* left gutter */ + padding-bottom: 0px; + padding-top: 0px; + margin: 0px; + line-height: 22px; +} + +.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name, +.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux { + opacity: 0.5; +} + +.mx_EventTile .mx_SenderProfile .mx_Flair { + opacity: 0.7; + margin-left: 5px; +} + +.mx_EventTile .mx_SenderProfile .mx_Flair img { + vertical-align: -2px; + margin-right: 2px; + border-radius: 8px; +} + +.mx_EventTile .mx_MessageTimestamp { + display: block; + visibility: hidden; + white-space: nowrap; + color: $event-timestamp-color; + font-size: 10px; + left: 0px; + width: 46px; /* 8 + 30 (avatar) + 8 */ + text-align: center; + position: absolute; +} + +.mx_EventTile_line { + position: relative; + /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ + margin-right: 110px; + padding-left: 65px; /* left gutter */ + padding-top: 4px; + padding-bottom: 2px; + border-radius: 4px; + min-height: 24px; + line-height: 22px; +} + +.mx_EventTile_quote { + margin-right: 10px; +} + +.mx_EventTile_info .mx_EventTile_line { + padding-left: 83px; +} + +/* HACK to override line-height which is already marked important elsewhere */ +.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { + font-size: 48px ! important; + line-height: 48px ! important; +} + +/* this is used for the tile for the event which is selected via the URL. + * TODO: ultimately we probably want some transition on here. + */ +.mx_EventTile_selected > .mx_EventTile_line { + border-left: $accent-color 5px solid; + padding-left: 60px; + background-color: $event-selected-color; +} + +.mx_EventTile:hover .mx_EventTile_line:not(.mx_EventTile_quote), +.mx_EventTile.menu .mx_EventTile_line +{ + background-color: $event-selected-color; +} + +.mx_EventTile_searchHighlight { + background-color: $accent-color; + color: $accent-fg-color; + border-radius: 5px; + padding-left: 2px; + padding-right: 2px; + cursor: pointer; +} + +.mx_EventTile_searchHighlight a { + background-color: $accent-color; + color: $accent-fg-color; +} + +.mx_EventTile_encrypting { + color: $event-encrypting-color ! important; +} + +.mx_EventTile_sending { + color: $event-sending-color; +} + +.mx_EventTile_sending .mx_UserPill, +.mx_EventTile_sending .mx_RoomPill, +.mx_EventTile_sending .mx_emojione { + opacity: 0.5; +} + +.mx_EventTile_notSent { + color: $event-notsent-color; +} + +.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody { + display: block; + width: 100%; + height: 22px; + width: 250px; + border-radius: 11px; + background: repeating-linear-gradient( + -45deg, + $event-redacted-fg-color, + $event-redacted-fg-color 3px, + transparent 3px, + transparent 6px + ); + box-shadow: 0px 0px 3px $event-redacted-border-color inset; +} + +.mx_EventTile_highlight, +.mx_EventTile_highlight .markdown-body + { + color: $warning-color; +} + +.mx_EventTile_contextual { + opacity: 0.4; +} + +.mx_EventTile_msgOption { + float: right; + text-align: right; + z-index: 1; + position: relative; + width: 90px; + + /* Hack to stop the height of this pushing the messages apart. + Replaces margin-top: -6px. This interacts better with a read + marker being in between. Content overflows. */ + height: 1px; + + margin-right: 10px; +} + +.mx_EventTile_msgOption a { + text-decoration: none; +} + +.mx_EventTile_last .mx_MessageTimestamp, +.mx_EventTile:hover .mx_MessageTimestamp, +.mx_EventTile.menu .mx_MessageTimestamp +{ + visibility: visible; +} + +.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile_selected > div > a > .mx_MessageTimestamp { + left: 3px; + width: auto; +} + +.mx_EventTile_editButton { + position: absolute; + display: inline-block; + visibility: hidden; + cursor: pointer; + top: 6px; + right: 6px; + width: 19px; + height: 19px; + background-image: url($edit-button-url); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.mx_EventTile:hover .mx_EventTile_editButton, +.mx_EventTile.menu .mx_EventTile_editButton +{ + visibility: visible; +} + +.mx_EventTile.menu .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile_readAvatars { + position: relative; + display: inline-block; + width: 14px; + height: 14px; + top: 29px; +} + +.mx_EventTile_continuation .mx_EventTile_readAvatars, +.mx_EventTile_info .mx_EventTile_readAvatars, +.mx_EventTile_emote .mx_EventTile_readAvatars { + top: 7px; +} + +.mx_EventTile_readAvatars .mx_BaseAvatar { + position: absolute; + display: inline-block; +} + +.mx_EventTile_readAvatarRemainder { + color: $event-timestamp-color; + font-size: 11px; + position: absolute; +} + +/* all the overflow-y: hidden; are to trap Zalgos - + but they introduce an implicit overflow-x: auto. + so make that explicitly hidden too to avoid random + horizontal scrollbars occasionally appearing, like in + https://github.com/vector-im/vector-web/issues/1154 + */ +.mx_EventTile_content { + display: block; + overflow-y: hidden; + overflow-x: hidden; + margin-right: 34px; +} + +/* De-zalgoing */ +.mx_EventTile_body { + overflow-y: hidden; +} + +/* End to end encryption stuff */ + +.mx_EventTile_e2eIcon { + display: block; + position: absolute; + top: 9px; + left: 46px; + z-index: 2; + cursor: pointer; +} + +.mx_EventTile_keyRequestInfo { + font-size: 12px; +} + +.mx_EventTile_keyRequestInfo_text { + opacity: 0.5; +} + +.mx_EventTile_keyRequestInfo_text a { + color: $primary-fg-color; + text-decoration: underline; + cursor: pointer; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p { + text-align: auto; + margin-left: 3px; + margin-right: 3px; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child { + margin-top: 0px; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child { + margin-bottom: 0px; +} + +.mx_EventTile_12hr .mx_EventTile_e2eIcon { + padding-left: 5px; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + padding-left: 60px; +} + +.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line { + padding-left: 78px; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: $e2e-verified-color 5px solid; +} +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: $e2e-unverified-color 5px solid; +} + +.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp, +.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp { + left: 3px; + width: auto; +} + +/* +.mx_EventTile_verified .mx_EventTile_e2eIcon { + display: none; +} +*/ + +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon, +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon { + display: block; + left: 41px; +} + +/* Various markdown overrides */ + +.mx_EventTile_content .markdown-body { + font-family: inherit ! important; + white-space: normal ! important; + line-height: inherit ! important; + color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) + font-size: 14px; +} + +/* have to use overlay rather than auto otherwise Linux and Windows + Chrome gets very confused about vertical spacing: + https://github.com/vector-im/vector-web/issues/754 +*/ +.mx_EventTile_content .markdown-body pre { + overflow-x: overlay; + overflow-y: visible; +} + +.mx_EventTile_content .markdown-body code { + // deliberate constants as we're behind an invert filter + background-color: #f8f8f8; + color: #333; +} + +.mx_EventTile_copyButton { + position: absolute; + display: inline-block; + visibility: hidden; + cursor: pointer; + top: 6px; + right: 6px; + width: 19px; + height: 19px; + background-image: url($copy-button-url); +} + +.mx_EventTile_body pre { + position: relative; + border: 1px solid transparent; +} + +.mx_EventTile:hover .mx_EventTile_body pre +{ + border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter +} + +.mx_EventTile_body pre:hover .mx_EventTile_copyButton +{ + visibility: visible; +} + +.mx_EventTile_content .markdown-body h1, +.mx_EventTile_content .markdown-body h2, +.mx_EventTile_content .markdown-body h3, +.mx_EventTile_content .markdown-body h4, +.mx_EventTile_content .markdown-body h5, +.mx_EventTile_content .markdown-body h6 +{ + font-family: inherit ! important; + color: inherit; +} + + +/* Make h1 and h2 the same size as h3. */ +.mx_EventTile_content .markdown-body h1, +.mx_EventTile_content .markdown-body h2 +{ + font-size: 1.5em; +} + +.mx_EventTile_content .markdown-body a { + color: $accent-color; +} + +.mx_EventTile_content .markdown-body .hljs { + display: inline ! important; +} + +/* end of overrides */ + +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + padding-top: 4px; + } + + .mx_EventTile.mx_EventTile_info { + // same as the padding for non-compact .mx_EventTile.mx_EventTile_info + padding-top: 0px; + font-size: 13px; + .mx_EventTile_line { + line-height: 20px; + } + .mx_EventTile_avatar { + top: 4px; + } + } + + .mx_EventTile .mx_SenderProfile { + font-size: 13px; + } + + .mx_EventTile.mx_EventTile_emote { + // add a bit more space for emotes so that avatars don't collide + padding-top: 8px; + .mx_EventTile_avatar { + top: 2px; + } + .mx_EventTile_line { + padding-top: 0px; + padding-bottom: 1px; + } + } + + .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation { + padding-top: 0; + .mx_EventTile_line { + padding-top: 0px; + padding-bottom: 0px; + } + } + + .mx_EventTile_line { + padding-top: 0px; + padding-bottom: 0px; + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_e2eIcon { + top: 7px; + } + + .mx_EventTile_editButton { + top: 3px; + } + + .mx_EventTile_readAvatars { + top: 27px; + } + + .mx_EventTile_continuation .mx_EventTile_readAvatars, + .mx_EventTile_emote .mx_EventTile_readAvatars { + top: 5px; + } + + .mx_EventTile_info .mx_EventTile_readAvatars { + top: 4px; + } + + .mx_RoomView_MessageList h2 { + margin-top: 6px; + } + + .mx_EventTile_content .markdown-body { + p, ul, ol, dl, blockquote, pre, table { + margin-bottom: 4px; // 1/4 of the non-compact margin-bottom + } + } +} diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.scss new file mode 100644 index 0000000000..4495b142e6 --- /dev/null +++ b/res/css/views/rooms/_LinkPreviewWidget.scss @@ -0,0 +1,69 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_LinkPreviewWidget { + margin-top: 15px; + margin-right: 15px; + margin-bottom: 15px; + display: flex; + border-left: 4px solid $preview-widget-bar-color; + color: $preview-widget-fg-color; +} + +.mx_LinkPreviewWidget_image { + flex: 0 0 100px; + margin-left: 15px; + text-align: center; + cursor: pointer; +} + +.mx_LinkPreviewWidget_caption { + margin-left: 15px; + flex: 1 1 auto; +} + +.mx_LinkPreviewWidget_title { + display: inline; + font-weight: bold; + white-space: normal; +} + +.mx_LinkPreviewWidget_siteName { + display: inline; +} + +.mx_LinkPreviewWidget_description { + margin-top: 8px; + white-space: normal; + word-wrap: break-word; +} + +.mx_LinkPreviewWidget_cancel { + visibility: hidden; + cursor: pointer; + flex: 0 0 40px; +} + +.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel { + visibility: visible; +} + +.mx_MatrixChat_useCompactLayout { + .mx_LinkPreviewWidget { + margin-top: 6px; + margin-bottom: 6px; + } +} diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss new file mode 100644 index 0000000000..5888820e0d --- /dev/null +++ b/res/css/views/rooms/_MemberDeviceInfo.scss @@ -0,0 +1,74 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_MemberDeviceInfo { + padding: 10px 0px; +} + +.mx_MemberDeviceInfo.mx_DeviceVerifyButtons { + padding: 6px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.mx_MemberDeviceInfo_textButton { + @mixin mx_DialogButton_small; + margin: 2px; + flex: 1; +} + +.mx_MemberDeviceInfo_textButton:hover { + @mixin mx_DialogButton_hover; +} + +.mx_MemberDeviceInfo_deviceId { + font-size: 13px; +} + +.mx_MemberDeviceInfo_deviceInfo { + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(0,0,0,0.1); +} + +/* "Unblacklist" is too long for a regular button: make it wider and + reduce the padding. */ +.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, +.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist { + width: 8em; + padding-left: 1em; + padding-right: 1em; +} + +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted { + float: right; + padding-left: 1em; +} + +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified { + color: $e2e-verified-color; +} + +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified { + color: $e2e-unverified-color; +} + +.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted { + color: $e2e-warning-color; +} diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss new file mode 100644 index 0000000000..5d47275efe --- /dev/null +++ b/res/css/views/rooms/_MemberInfo.scss @@ -0,0 +1,112 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_MemberInfo { + margin-top: 20px; + padding-right: 20px; + height: 100%; + overflow-y: auto; +} + +.mx_MemberInfo h2 { + margin-top: 6px; +} + +.mx_MemberInfo .mx_RoomTile_nameContainer { + width: 154px; +} + +.mx_MemberInfo .mx_RoomTile_badge { + display: none; +} + +.mx_MemberInfo .mx_RoomTile_name { + width: 160px; +} + +.mx_MemberInfo_cancel { + float: right; + margin-right: 10px; + cursor: pointer; +} + +.mx_MemberInfo_avatar { + clear: both; +} + +.mx_MemberInfo_avatar .mx_BaseAvatar { +} + +.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { + cursor: zoom-in; +} + +.mx_MemberInfo_profile { + margin-bottom: 16px; +} + +.mx_MemberInfo h3 { + text-transform: uppercase; + color: $h3-color; + font-weight: 600; + font-size: 13px; + margin-top: 16px; + margin-bottom: 14px; +} + +.mx_MemberInfo_profileField { + font-size: 13px; + position: relative; + background-color: $primary-bg-color; +} + +.mx_MemberInfo_buttons { + margin-bottom: 16px; +} + +.mx_MemberInfo_field { + cursor: pointer; + font-size: 13px; + color: $accent-color; + margin-left: 8px; + line-height: 23px; +} + +.mx_MemberInfo_createRoom { + cursor: pointer; +} + +.mx_MemberInfo_createRoom_label { + width: initial ! important; + cursor: pointer; +} + +.mx_MemberInfo label { + font-size: 13px; +} + +.mx_MemberInfo label .mx_MemberInfo_label_text { + display: inline-block; + max-width: 180px; + vertical-align: text-top; +} + +.mx_MemberInfo input[type="radio"] { + vertical-align: -2px; + margin-right: 5px; + margin-left: 8px; +} + diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss new file mode 100644 index 0000000000..83fc70aefb --- /dev/null +++ b/res/css/views/rooms/_MemberList.scss @@ -0,0 +1,116 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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, +.mx_GroupMemberList, +.mx_GroupRoomList { + 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, +.mx_GroupMemberList_query, +.mx_GroupRoomList_query { + font-family: $font-family; + 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; +} + +.mx_MemberList_query::-moz-placeholder, +.mx_GroupMemberList_query::-moz-placeholder, +.mx_GroupRoomList_query::-moz-placeholder { + color: $primary-fg-color; + opacity: 0.5; + font-size: 14px; +} + +.mx_MemberList_query::-webkit-input-placeholder, +.mx_GroupMemberList_query::-webkit-input-placeholder, +.mx_GroupRoomList_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_GroupMemberList_invited h2, +.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; +} diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss new file mode 100644 index 0000000000..2e8f07b7ef --- /dev/null +++ b/res/css/views/rooms/_MessageComposer.scss @@ -0,0 +1,246 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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 { + max-width: 960px; + 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_row div:last-child{ + padding-right: 0; +} + +.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; + font-style: italic; + color: $greyed-fg-color; + display: flex; + align-items: center; + justify-content: center; +} + +.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; +} + +@keyframes visualbell +{ + from { background-color: #faa } + to { background-color: $primary-bg-color } +} + +.mx_MessageComposer_input_error { + animation: 0.2s visualbell; +} + +.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root { + display: none; +} + +.mx_MessageComposer_input .DraftEditor-root { + width: 100%; + flex: 1; + word-break: break-word; + max-height: 120px; + min-height: 21px; + overflow: auto; +} + +.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer { + /* Ensure mx_UserPill and mx_RoomPill (see _RichText) are not obscured from the top */ + padding-top: 2px; +} + +.mx_MessageComposer .public-DraftStyleDefault-block { + overflow-x: hidden; +} + +.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 pre.public-DraftStyleDefault-pre pre { + background-color: $rte-code-bg-color; + border-radius: 3px; + padding: 10px; +} + +.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: $font-family; +} + +/* 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, +.mx_MessageComposer_apps, +.mx_MessageComposer_stickers { + /*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, +.mx_MessageComposer_apps object, +.mx_MessageComposer_stickers object { + pointer-events: none; +} + +.mx_MessageComposer_formatting { + cursor: pointer; + margin: 0 11px; + width: 24px; + height: 18px; +} + +.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_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; + } +} diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss new file mode 100644 index 0000000000..ca790ef8f0 --- /dev/null +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -0,0 +1,67 @@ +/* +Copyright 2017 Travis Ralston + +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_PinnedEventTile { + min-height: 40px; + margin-bottom: 5px; + width: 100%; + border-radius: 5px; // for the hover +} + +.mx_PinnedEventTile:hover { + background-color: $event-selected-color; +} + +.mx_PinnedEventTile .mx_PinnedEventTile_sender { + color: #868686; + font-size: 0.8em; + vertical-align: top; + display: block; + padding-bottom: 3px; +} + +.mx_PinnedEventTile .mx_EventTile_content { + margin-left: 50px; + position: relative; + top: 0; + left: 0; +} + +.mx_PinnedEventTile .mx_BaseAvatar { + float: left; + margin-right: 10px; +} + +.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions { + display: block; +} + +.mx_PinnedEventTile_actions { + float: right; + margin-right: 10px; + display: none; +} + +.mx_PinnedEventTile_unpinButton { + display: inline-block; + cursor: pointer; + margin-left: 10px; +} + +.mx_PinnedEventTile_gotoButton { + display: inline-block; + font-size: 0.8em; +} diff --git a/res/css/views/rooms/_PinnedEventsPanel.scss b/res/css/views/rooms/_PinnedEventsPanel.scss new file mode 100644 index 0000000000..663d5bdf6e --- /dev/null +++ b/res/css/views/rooms/_PinnedEventsPanel.scss @@ -0,0 +1,37 @@ +/* +Copyright 2017 Travis Ralston + +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_PinnedEventsPanel { + border-top: 1px solid $primary-hairline-color; +} + +.mx_PinnedEventsPanel_body { + max-height: 300px; + overflow-y: auto; + padding-bottom: 15px; +} + +.mx_PinnedEventsPanel_header { + margin: 0; + padding-top: 8px; + padding-bottom: 15px; +} + +.mx_PinnedEventsPanel_cancel { + margin: 12px; + float: right; + display: inline-block; +} diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss new file mode 100644 index 0000000000..682c849cee --- /dev/null +++ b/res/css/views/rooms/_PresenceLabel.scss @@ -0,0 +1,20 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_PresenceLabel { + font-size: 11px; + opacity: 0.5; +} \ No newline at end of file diff --git a/res/css/views/rooms/_QuotePreview.scss b/res/css/views/rooms/_QuotePreview.scss new file mode 100644 index 0000000000..86fd79d473 --- /dev/null +++ b/res/css/views/rooms/_QuotePreview.scss @@ -0,0 +1,36 @@ +.mx_QuotePreview { + position: absolute; + bottom: 0; + z-index: 1000; + width: 100%; + border: 1px solid $primary-hairline-color; + background: $primary-bg-color; + border-bottom: none; + border-radius: 4px 4px 0 0; + max-height: 50vh; + overflow: auto +} + +.mx_QuotePreview_section { + border-bottom: 1px solid $primary-hairline-color; +} + +.mx_QuotePreview_header { + margin: 12px; + color: $primary-fg-color; + font-weight: 400; + opacity: 0.4; +} + +.mx_QuotePreview_title { + float: left; +} + +.mx_QuotePreview_cancel { + float: right; + cursor: pointer; +} + +.mx_QuotePreview_clear { + clear: both; +} diff --git a/res/css/views/rooms/_RoomDropTarget.scss b/res/css/views/rooms/_RoomDropTarget.scss new file mode 100644 index 0000000000..1076a0563a --- /dev/null +++ b/res/css/views/rooms/_RoomDropTarget.scss @@ -0,0 +1,55 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomDropTarget_container { + background-color: $secondary-accent-color; + padding-left: 18px; + padding-right: 18px; + padding-top: 8px; + padding-bottom: 7px; +} + +.collapsed .mx_RoomDropTarget_container { + padding-right: 10px; + padding-left: 10px; +} + +.mx_RoomDropTarget { + font-size: 13px; + padding-top: 5px; + padding-bottom: 5px; + border: 1px dashed $accent-color; + color: $primary-fg-color; + background-color: $droptarget-bg-color; + border-radius: 4px; +} + + +.mx_RoomDropTarget_label { + position: relative; + margin-top: 3px; + line-height: 21px; + z-index: 1; + text-align: center; +} + +.collapsed .mx_RoomDropTarget_avatar { + float: none; +} + +.collapsed .mx_RoomDropTarget_label { + display: none; +} diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss new file mode 100644 index 0000000000..9c1349adbc --- /dev/null +++ b/res/css/views/rooms/_RoomHeader.scss @@ -0,0 +1,245 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomHeader_wrapper { + max-width: 960px; + margin: auto; + height: 70px; + align-items: center; + display: flex; +} + +.mx_RoomHeader_leftRow { + margin-left: -2px; + order: 1; + flex: 1; + overflow: hidden; +} + +.mx_RoomHeader_spinner { + height: 36px; + order: 2; + padding-left: 12px; + padding-right: 12px; +} + +.mx_RoomHeader_textButton { + @mixin mx_DialogButton; + margin-right: 8px; + margin-top: -5px; + order: 2; +} + +.mx_RoomHeader_textButton:hover { + @mixin mx_DialogButton_hover; +} + +.mx_RoomHeader_textButton_danger { + background-color: $warning-color; +} + +.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; +} + +.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, +.mx_RoomHeader_avatarPicker_remove { + cursor: pointer; +} + +.mx_RoomHeader_avatarPicker_remove { + position: absolute; + top: -11px; + right: -9px; +} + +.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: 38px; + 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; + column-width: 960px; +} + +.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 { + margin-top: 23px; + position: relative; +} + +.mx_RoomHeader_avatarPicker_edit { + 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; +} + +.mx_RoomHeader_pinnedButton { + position: relative; +} + +.mx_RoomHeader_pinsIndicator { + position: absolute; + right: 0; + bottom: 4px; + width: 8px; + height: 8px; + border-radius: 8px; + background-color: $pinned-color; +} + +.mx_RoomHeader_pinsIndicatorUnread { + background-color: $pinned-unread-color; +} diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss new file mode 100644 index 0000000000..581016d5ba --- /dev/null +++ b/res/css/views/rooms/_RoomList.scss @@ -0,0 +1,67 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2107 Vector Creations Ltd + +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_RoomList { + padding-bottom: 12px; + min-height: 400px; +} + +.mx_RoomList_expandButton { + margin-left: 8px; + cursor: pointer; + padding-left: 12px; + padding-right: 12px; +} + +/* Evil hacky override until Chrome fixes drop and drag table cells + and we can correctly fix horizontal wrapping in the sidebar again */ +.mx_RoomList_scrollbar .gm-scroll-view { + overflow-x: hidden ! important; + overflow-y: scroll ! important; +} + +/* Make sure the scrollbar is above the sticky headers from RoomList */ +.mx_RoomList_scrollbar .gm-scrollbar.-vertical { + z-index: 6; +} + +.mx_RoomList_emptySubListTip_container { + background-color: $secondary-accent-color; + padding-left: 18px; + padding-right: 18px; + padding-top: 8px; + padding-bottom: 7px; +} + +.mx_RoomList_emptySubListTip { + font-size: 13px; + padding: 5px; + border: 1px dashed $accent-color; + color: $primary-fg-color; + background-color: $droptarget-bg-color; + border-radius: 4px; + line-height: 16px; +} + +.mx_RoomList_emptySubListTip .mx_RoleButton { + vertical-align: -2px; +} + +.mx_RoomList_headerButtons { + position: absolute; + right: 60px; +} diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss new file mode 100644 index 0000000000..331eb582ea --- /dev/null +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -0,0 +1,58 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomPreviewBar { + text-align: center; + height: 176px; + background-color: $event-selected-color; + align-items: center; + flex-direction: column; + justify-content: center; + display: flex; + background-color: $preview-bar-bg-color; + -webkit-align-items: center; +} + +.mx_RoomPreviewBar_wrapper { +} + +.mx_RoomPreviewBar_invite_text { + color: $primary-fg-color; +} + +.mx_RoomPreviewBar_join_text { + color: $warning-color; +} + +.mx_RoomPreviewBar_preview_text { + margin-top: 25px; + color: $settings-grey-fg-color; +} + +.mx_RoomPreviewBar_join_text a { + text-decoration: underline; + cursor: pointer; +} + +.mx_RoomPreviewBar_warning { + display: flex; + align-items: center; + padding: 8px; +} + +.mx_RoomPreviewBar_warningIcon { + padding: 12px; +} diff --git a/res/css/views/rooms/_RoomSettings.scss b/res/css/views/rooms/_RoomSettings.scss new file mode 100644 index 0000000000..4013af4c7c --- /dev/null +++ b/res/css/views/rooms/_RoomSettings.scss @@ -0,0 +1,247 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2017 Vector Creations Ltd + +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 { + @mixin mx_DialogButton; + position: relative; + margin-right: 8px; +} + +.mx_RoomSettings_leaveButton:hover, +.mx_RoomSettings_unbanButton:hover { + @mixin mx_DialogButton_hover; +} + +.mx_RoomSettings_integrationsButton_error { + position: relative; + cursor: not-allowed; +} +.mx_RoomSettings_integrationsButton_error img { + position: absolute; + right: -5px; + top: -5px; +} +.mx_RoomSettings_leaveButton, +.mx_RoomSettings_integrationsButton_error { + float: right; +} +.mx_RoomSettings_integrationsButton_error .mx_RoomSettings_integrationsButton_errorPopup { + display: none; +} +.mx_RoomSettings_integrationsButton_error:hover .mx_RoomSettings_integrationsButton_errorPopup { + display: inline; +} +.mx_RoomSettings_integrationsButton_errorPopup { + position: absolute; + top: 110%; + left: -125%; + width: 348%; + padding: 2%; + font-size: 10pt; + line-height: 1.5em; + border-radius: 5px; + background-color: $accent-color; + color: $accent-fg-color; + text-align: center; +} +.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; +} diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss new file mode 100644 index 0000000000..ccd3afe26c --- /dev/null +++ b/res/css/views/rooms/_RoomTile.scss @@ -0,0 +1,190 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomTile { + position: relative; + cursor: pointer; + font-size: 13px; + display: block; + height: 34px; + + background-color: $secondary-accent-color; +} + +.mx_RoomTile_tooltip { + display: inline-block; + position: relative; + top: -54px; + left: -12px; +} + + +.mx_RoomTile_nameContainer { + display: inline-block; + width: 180px; + height: 24px; +} + +.mx_RoomTile_avatar_container { + position: relative; +} + +.mx_RoomTile_avatar { + display: inline-block; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 16px; + padding-right: 6px; + width: 24px; + height: 24px; + vertical-align: middle; +} + +.mx_RoomTile_dm { + display: block; + position: absolute; + bottom: 0; + right: -5px; + z-index: 2; +} + +.mx_RoomTile_name { + display: inline-block; + position: relative; + width: 165px; + vertical-align: middle; + padding-left: 6px; + padding-right: 6px; + padding-top: 2px; + padding-bottom: 3px; + color: $roomtile-name-color; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.mx_RoomTile_invite { +/* color: rgba(69, 69, 69, 0.5); */ +} + +.collapsed .mx_RoomTile_nameContainer { + width: 60px; /* colapsed panel width */ +} + +.collapsed .mx_RoomTile_name { + display: none; +} + +.collapsed .mx_RoomTile_badge { + top: 0px; + min-width: 12px; + border-radius: 16px; + padding: 0px 4px 0px 4px; + z-index: 3; +} + +/* Hide the bottom of speech bubble */ +.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after { + display: none; +} + +/* This is the bottom of the speech bubble */ +.mx_RoomTile_highlight .mx_RoomTile_badge:after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + margin-left: 5px; + border-top: 5px solid $warning-color; + border-right: 7px solid transparent; +} + +.mx_RoomTile_badge { + display: inline-block; + min-width: 15px; + height: 15px; + position: absolute; + right: 8px; /*gutter */ + top: 9px; + border-radius: 8px; + color: $accent-fg-color; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; +} + +.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, +.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge { + letter-spacing: 0.1em; + opacity: 1; +} + +.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, +.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge { + background-color: $neutral-badge-color; +} + +.mx_RoomTile_unreadNotify .mx_RoomTile_badge { + background-color: $accent-color; +} + +.mx_RoomTile_highlight .mx_RoomTile_badge { + background-color: $warning-color; +} + +.mx_RoomTile_unread, .mx_RoomTile_highlight { + font-weight: 800; +} + +.mx_RoomTile_selected { + background-color: $roomtile-selected-bg-color; +} + +.mx_DNDRoomTile { + transform: none; + transition: transform 0.2s; +} + +.mx_DNDRoomTile_dragging { + transform: scale(1.05, 1.05); +} + +.mx_RoomTile:focus { + filter: none ! important; + background-color: $roomtile-focused-bg-color; +} + +.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { + width: 140px; +} + +.mx_RoomTile_arrow { + position: absolute; + right: 0px; +} + +.mx_RoomTile.mx_RoomTile_transparent { + background-color: transparent; +} + +.mx_RoomTile.mx_RoomTile_transparent:focus { + background-color: $roomtile-transparent-focused-color; +} + diff --git a/res/css/views/rooms/_RoomTooltip.scss b/res/css/views/rooms/_RoomTooltip.scss new file mode 100644 index 0000000000..9988425b8f --- /dev/null +++ b/res/css/views/rooms/_RoomTooltip.scss @@ -0,0 +1,54 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_RoomTooltip_chevron { + position: absolute; + left: -8px; + top: 4px; + width: 0; + height: 0; + border-top: 8px solid transparent; + border-right: 8px solid $menu-border-color; + border-bottom: 8px solid transparent; +} + +.mx_RoomTooltip_chevron:after { + content:''; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-right: 7px solid $primary-bg-color; + border-bottom: 7px solid transparent; + position:absolute; + top: -7px; + left: 1px; +} + +.mx_RoomTooltip { + display: none; + position: fixed; + border: 1px solid $menu-border-color; + border-radius: 5px; + background-color: $primary-bg-color; + z-index: 2000; + padding: 5px; + pointer-events: none; + line-height: 14px; + font-size: 13px; + color: $primary-fg-color; + max-width: 600px; + margin-right: 50px; +} diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.scss new file mode 100644 index 0000000000..079ea16c68 --- /dev/null +++ b/res/css/views/rooms/_SearchBar.scss @@ -0,0 +1,83 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_SearchBar { + padding-top: 5px; + padding-bottom: 5px; + display: flex; + align-items: center; +} + +.mx_SearchBar_input { + display: inline block; + border-radius: 3px 0px 0px 3px; + border: 1px solid $input-border-color; + font-size: 15px; + padding: 9px; + padding-left: 11px; + width: auto; + flex: 1 1 0; +} + +.mx_SearchBar_searchButton { + cursor: pointer; + margin-right: 10px; + width: 37px; + height: 37px; + border-radius: 0px 3px 3px 0px; + background-color: $accent-color; +} + +@keyframes pulsate { + 0% { opacity: 1.0; } + 50% { opacity: 0.1; } + 100% { opacity: 1.0; } +} + +.mx_SearchBar_searching img { + animation: pulsate 0.5s ease-out; + animation-iteration-count: infinite; +} + +.mx_SearchBar_button { + display: inline; + border: 0px; + border-radius: 36px; + font-weight: 400; + font-size: 15px; + color: $accent-fg-color; + background-color: $accent-color; + width: auto; + margin: auto; + margin-left: 7px; + padding-top: 6px; + padding-bottom: 4px; + padding-left: 24px; + padding-right: 24px; + cursor: pointer; +} + +.mx_SearchBar_unselected { + background-color: $primary-bg-color; + color: $accent-color; + border: $accent-color 1px solid; +} + +.mx_SearchBar_cancel { + padding-left: 14px; + padding-right: 14px; + cursor: pointer; +} diff --git a/res/css/views/rooms/_SearchableEntityList.scss b/res/css/views/rooms/_SearchableEntityList.scss new file mode 100644 index 0000000000..37a663123d --- /dev/null +++ b/res/css/views/rooms/_SearchableEntityList.scss @@ -0,0 +1,77 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_SearchableEntityList { + display: flex; + + flex-direction: column; +} + +.mx_SearchableEntityList_query { + font-family: $font-family; + 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: 15px; + margin-bottom: 8px; + width: 189px; +} + +.mx_SearchableEntityList_query::-moz-placeholder { + color: $primary-fg-color; + opacity: 0.5; + font-size: 12px; +} + +.mx_SearchableEntityList_query::-webkit-input-placeholder { + color: $primary-fg-color; + opacity: 0.5; + font-size: 12px; +} + +.mx_SearchableEntityList_listWrapper { + flex: 1; + + overflow-y: auto; +} + +.mx_SearchableEntityList_list { + display: table; + table-layout: fixed; + width: 100%; +} + +.mx_SearchableEntityList_list .mx_EntityTile_chevron { + display: none; +} + +.mx_SearchableEntityList_hrWrapper { + width: 100%; + flex: 0 0 auto; +} + +.mx_SearchableEntityList hr { + height: 1px; + border: 0px; + color: $primary-fg-color; + background-color: $primary-fg-color; + margin-right: 15px; + margin-top: 11px; + margin-bottom: 11px; +} diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss new file mode 100644 index 0000000000..669ca13545 --- /dev/null +++ b/res/css/views/rooms/_Stickers.scss @@ -0,0 +1,35 @@ +.mx_Stickers_content { + overflow: hidden; +} + +.mx_Stickers_content_container { + overflow: hidden; + height: 300px; +} + +.mx_Stickers_content .mx_AppTileFullWidth { + border: none; +} + +.mx_Stickers_contentPlaceholder { + display: flex; + flex-grow: 1; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.mx_Stickers_contentPlaceholder p { + max-width: 200px; +} + +.mx_Stickers_addLink { + display: inline; + cursor: pointer; + text-decoration: underline; +} + +.mx_Stickers_hideStickers { + z-index: 2001; +} diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss new file mode 100644 index 0000000000..1ee56d9532 --- /dev/null +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -0,0 +1,53 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_TopUnreadMessagesBar { + margin: auto; /* centre horizontally */ + max-width: 960px; + padding-top: 10px; + padding-bottom: 10px; + border-bottom: 1px solid $primary-hairline-color; +} + +.mx_TopUnreadMessagesBar_scrollUp { + display: inline; + cursor: pointer; + text-decoration: underline; +} + +.mx_TopUnreadMessagesBar_scrollUp img { + padding-left: 10px; + padding-right: 31px; + vertical-align: middle; +} + +.mx_TopUnreadMessagesBar_scrollUp span { + opacity: 0.5; +} + +.mx_TopUnreadMessagesBar_close { + float: right; + padding-right: 14px; + padding-top: 3px; + cursor: pointer; +} + +.mx_MatrixChat_useCompactLayout { + .mx_TopUnreadMessagesBar { + padding-top: 4px; + padding-bottom: 4px; + } +} diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss new file mode 100644 index 0000000000..e4856531d9 --- /dev/null +++ b/res/css/views/settings/_DevicesPanel.scss @@ -0,0 +1,51 @@ +/* +Copyright 2016 OpenMarket Ltd + +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_DevicesPanel { + display: table; + table-layout: fixed; + width: 880px; + border-spacing: 2px; +} + +.mx_DevicesPanel_header { + display: table-header-group; + font-weight: bold; +} + +.mx_DevicesPanel_header > div { + display: table-cell; +} + +.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen { + width: 30%; +} + +.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons { + width: 20%; +} + +.mx_DevicesPanel_device { + display: table-row; +} + +.mx_DevicesPanel_device > div { + display: table-cell; +} + +.mx_DevicesPanel_myDevice { + font-weight: bold; +} \ No newline at end of file diff --git a/res/css/views/settings/_IntegrationsManager.scss b/res/css/views/settings/_IntegrationsManager.scss new file mode 100644 index 0000000000..93ee0e20fe --- /dev/null +++ b/res/css/views/settings/_IntegrationsManager.scss @@ -0,0 +1,31 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_IntegrationsManager .mx_Dialog { + width: 60%; + height: 70%; + overflow: hidden; + padding: 0px; + max-width: initial; + max-height: initial; +} + +.mx_IntegrationsManager iframe { + background-color: #fff; + border: 0px; + width: 100%; + height: 100%; +} diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss new file mode 100644 index 0000000000..4c88e44952 --- /dev/null +++ b/res/css/views/settings/_Notifications.scss @@ -0,0 +1,70 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_UserNotifSettings_tableRow +{ + display: table-row; +} + +.mx_UserNotifSettings_inputCell { + display: table-cell; + padding-bottom: 8px; + padding-right: 8px; + width: 16px; +} + +.mx_UserNotifSettings_labelCell +{ + padding-bottom: 8px; + width: 400px; + display: table-cell; +} + +.mx_UserNotifSettings_pushRulesTableWrapper { + padding-bottom: 8px; +} + +.mx_UserNotifSettings_pushRulesTable { + width: 100%; + table-layout: fixed; +} + +.mx_UserNotifSettings_pushRulesTable thead { + font-weight: bold; + font-size: 15px; +} + +.mx_UserNotifSettings_pushRulesTable tbody th { + font-weight: 400; + font-size: 15px; +} + +.mx_UserNotifSettings_pushRulesTable tbody th:first-child { + text-align: left; +} + +.mx_UserNotifSettings_keywords { + cursor: pointer; + color: $accent-color; +} + +.mx_UserSettings_devicesTable td { + padding-left: 20px; + padding-right: 20px; +} +.mx_UserSettings_devicesTable_nodevices { + font-style: italic; +} diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss new file mode 100644 index 0000000000..deb89a837c --- /dev/null +++ b/res/css/views/voip/_CallView.scss @@ -0,0 +1,25 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_CallView_voice { + background-color: $accent-color; + color: $accent-fg-color; + cursor: pointer; + text-align: center; + padding: 6px; + font-weight: bold; + font-size: 13px; +} \ No newline at end of file diff --git a/res/css/views/voip/_IncomingCallbox.scss b/res/css/views/voip/_IncomingCallbox.scss new file mode 100644 index 0000000000..64eac25d01 --- /dev/null +++ b/res/css/views/voip/_IncomingCallbox.scss @@ -0,0 +1,69 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_IncomingCallBox { + text-align: center; + border: 1px solid #a4a4a4; + border-radius: 8px; + background-color: $primary-bg-color; + position: fixed; + z-index: 1000; + padding: 6px; + margin-top: -3px; + margin-left: -20px; + width: 200px; +} + +.mx_IncomingCallBox_chevron { + padding: 12px; + position: absolute; + left: -21px; + top: 0px; +} + +.mx_IncomingCallBox_title { + padding: 6px; + font-weight: bold; +} + +.mx_IncomingCallBox_buttons { + display: flex; +} + +.mx_IncomingCallBox_buttons_cell { + vertical-align: middle; + padding: 6px; + flex: 1; +} + +.mx_IncomingCallBox_buttons_decline, +.mx_IncomingCallBox_buttons_accept { + vertical-align: middle; + width: 80px; + height: 36px; + line-height: 36px; + border-radius: 36px; + color: $accent-fg-color; + margin: auto; +} + +.mx_IncomingCallBox_buttons_decline { + background-color: $voip-decline-color; +} + +.mx_IncomingCallBox_buttons_accept { + background-color: $voip-accept-color; +} diff --git a/res/css/views/voip/_VideoView.scss b/res/css/views/voip/_VideoView.scss new file mode 100644 index 0000000000..feb60f4763 --- /dev/null +++ b/res/css/views/voip/_VideoView.scss @@ -0,0 +1,49 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd + +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_VideoView { + width: 100%; + position: relative; + z-index: 30; +} + +.mx_VideoView video { + width: 100%; +} + +.mx_VideoView_remoteVideoFeed { + width: 100%; + background-color: #000; + z-index: 50; +} + +.mx_VideoView_localVideoFeed { + width: 25%; + height: 25%; + position: absolute; + left: 10px; + bottom: 10px; + z-index: 100; +} + +.mx_VideoView_localVideoFeed video { + width: auto; + height: 100%; +} + +.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video { + transform: scale(-1, 1); +}