From bacb284415a90811fbad2bae74b1921bf92a8fd9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:01:28 +0000 Subject: [PATCH 01/56] basic jig for SASS-based themed CSS (one bundle per theme) --- package.json | 6 ++++-- src/skins/vector/css/{common.css => _common.scss} | 0 .../{ContextualMenu.css => _ContextualMenu.scss} | 0 .../structures/{CreateRoom.css => _CreateRoom.scss} | 0 .../structures/{FilePanel.css => _FilePanel.scss} | 0 .../structures/{MatrixChat.css => _MatrixChat.scss} | 0 .../{NotificationPanel.css => _NotificationPanel.scss} | 0 .../structures/{RoomStatusBar.css => _RoomStatusBar.scss} | 0 .../structures/{RoomView.css => _RoomView.scss} | 0 .../structures/{SearchBox.css => _SearchBox.scss} | 0 .../structures/{UploadBar.css => _UploadBar.scss} | 0 .../structures/{UserSettings.css => _UserSettings.scss} | 0 .../structures/login/{Login.css => _Login.scss} | 0 .../views/avatars/{BaseAvatar.css => _BaseAvatar.scss} | 0 .../{ChatInviteDialog.css => _ChatInviteDialog.scss} | 0 ...EncryptedEventDialog.css => _EncryptedEventDialog.scss} | 0 ...SetDisplayNameDialog.css => _SetDisplayNameDialog.scss} | 0 .../{AddressSelector.css => _AddressSelector.scss} | 0 .../views/elements/{AddressTile.css => _AddressTile.scss} | 0 .../{DirectorySearchBox.css => _DirectorySearchBox.scss} | 0 ...erEventListSummary.css => _MemberEventListSummary.scss} | 0 .../views/elements/{ProgressBar.css => _ProgressBar.scss} | 0 .../views/elements/{RichText.css => _RichText.scss} | 0 .../views/login/{ServerConfig.css => _ServerConfig.scss} | 0 .../views/messages/{MImageBody.css => _MImageBody.scss} | 0 .../views/messages/{MNoticeBody.css => _MNoticeBody.scss} | 0 .../views/messages/{MTextBody.css => _MTextBody.scss} | 0 .../messages/{TextualEvent.css => _TextualEvent.scss} | 0 .../views/messages/{UnknownBody.css => _UnknownBody.scss} | 0 .../views/rooms/{Autocomplete.css => _Autocomplete.scss} | 0 .../views/rooms/{EntityTile.css => _EntityTile.scss} | 0 .../views/rooms/{EventTile.css => _EventTile.scss} | 0 .../{LinkPreviewWidget.css => _LinkPreviewWidget.scss} | 0 .../rooms/{MemberDeviceInfo.css => _MemberDeviceInfo.scss} | 0 .../views/rooms/{MemberInfo.css => _MemberInfo.scss} | 0 .../views/rooms/{MemberList.css => _MemberList.scss} | 0 .../rooms/{MessageComposer.css => _MessageComposer.scss} | 0 .../views/rooms/{PresenceLabel.css => _PresenceLabel.scss} | 0 .../views/rooms/{RoomHeader.css => _RoomHeader.scss} | 0 .../views/rooms/{RoomList.css => _RoomList.scss} | 0 .../rooms/{RoomPreviewBar.css => _RoomPreviewBar.scss} | 0 .../views/rooms/{RoomSettings.css => _RoomSettings.scss} | 0 .../views/rooms/{RoomTile.css => _RoomTile.scss} | 0 ...SearchableEntityList.css => _SearchableEntityList.scss} | 0 .../rooms/{TabCompleteBar.css => _TabCompleteBar.scss} | 0 ...TopUnreadMessagesBar.css => _TopUnreadMessagesBar.scss} | 0 .../settings/{DevicesPanel.css => _DevicesPanel.scss} | 0 .../{IntegrationsManager.css => _IntegrationsManager.scss} | 0 .../views/voip/{CallView.css => _CallView.scss} | 0 .../voip/{IncomingCallbox.css => _IncomingCallbox.scss} | 0 .../views/voip/{VideoView.css => _VideoView.scss} | 0 src/skins/vector/css/themes/dark.scss | 7 +++++++ src/skins/vector/css/themes/light.scss | 4 ++++ src/skins/vector/css/vector-web/{fonts.css => _fonts.scss} | 0 .../{CompatibilityPage.css => _CompatibilityPage.scss} | 0 .../structures/{LeftPanel.css => _LeftPanel.scss} | 0 .../structures/{RightPanel.css => _RightPanel.scss} | 0 .../structures/{RoomDirectory.css => _RoomDirectory.scss} | 0 .../structures/{RoomSubList.css => _RoomSubList.scss} | 0 .../structures/{ViewSource.css => _ViewSource.scss} | 0 .../{MessageContextMenu.css => _MessageContextMenu.scss} | 0 ...eContextMenu.css => _NotificationStateContextMenu.scss} | 0 .../{RoomTagContextMenu.css => _RoomTagContextMenu.scss} | 0 .../dialogs/{ChangelogDialog.css => _ChangelogDialog.scss} | 0 .../{NetworkDropdown.css => _NetworkDropdown.scss} | 0 .../views/elements/{ImageView.css => _ImageView.scss} | 0 .../views/elements/{Spinner.css => _Spinner.scss} | 0 .../globals/{GuestWarningBar.css => _GuestWarningBar.scss} | 0 .../globals/{MatrixToolbar.css => _MatrixToolbar.scss} | 0 .../{MessageTimestamp.css => _MessageTimestamp.scss} | 0 .../messages/{SenderProfile.css => _SenderProfile.scss} | 0 .../rooms/{RoomDropTarget.css => _RoomDropTarget.scss} | 0 .../views/rooms/{RoomTooltip.css => _RoomTooltip.scss} | 0 .../views/rooms/{SearchBar.css => _SearchBar.scss} | 0 .../settings/{Notifications.css => _Notifications.scss} | 0 src/vector/index.js | 2 +- webpack.config.js | 1 + 77 files changed, 17 insertions(+), 3 deletions(-) rename src/skins/vector/css/{common.css => _common.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{ContextualMenu.css => _ContextualMenu.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{CreateRoom.css => _CreateRoom.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{FilePanel.css => _FilePanel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{MatrixChat.css => _MatrixChat.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{NotificationPanel.css => _NotificationPanel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{RoomStatusBar.css => _RoomStatusBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{RoomView.css => _RoomView.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{SearchBox.css => _SearchBox.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{UploadBar.css => _UploadBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{UserSettings.css => _UserSettings.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/login/{Login.css => _Login.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/avatars/{BaseAvatar.css => _BaseAvatar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{ChatInviteDialog.css => _ChatInviteDialog.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{EncryptedEventDialog.css => _EncryptedEventDialog.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{SetDisplayNameDialog.css => _SetDisplayNameDialog.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{AddressSelector.css => _AddressSelector.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{AddressTile.css => _AddressTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{DirectorySearchBox.css => _DirectorySearchBox.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{MemberEventListSummary.css => _MemberEventListSummary.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{ProgressBar.css => _ProgressBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{RichText.css => _RichText.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/login/{ServerConfig.css => _ServerConfig.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{MImageBody.css => _MImageBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{MNoticeBody.css => _MNoticeBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{MTextBody.css => _MTextBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{TextualEvent.css => _TextualEvent.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{UnknownBody.css => _UnknownBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{Autocomplete.css => _Autocomplete.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{EntityTile.css => _EntityTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{EventTile.css => _EventTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{LinkPreviewWidget.css => _LinkPreviewWidget.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberDeviceInfo.css => _MemberDeviceInfo.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberInfo.css => _MemberInfo.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberList.css => _MemberList.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MessageComposer.css => _MessageComposer.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{PresenceLabel.css => _PresenceLabel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomHeader.css => _RoomHeader.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomList.css => _RoomList.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomPreviewBar.css => _RoomPreviewBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomSettings.css => _RoomSettings.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomTile.css => _RoomTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{SearchableEntityList.css => _SearchableEntityList.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{TabCompleteBar.css => _TabCompleteBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{TopUnreadMessagesBar.css => _TopUnreadMessagesBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/settings/{DevicesPanel.css => _DevicesPanel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/settings/{IntegrationsManager.css => _IntegrationsManager.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/voip/{CallView.css => _CallView.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/voip/{IncomingCallbox.css => _IncomingCallbox.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/voip/{VideoView.css => _VideoView.scss} (100%) create mode 100644 src/skins/vector/css/themes/dark.scss create mode 100644 src/skins/vector/css/themes/light.scss rename src/skins/vector/css/vector-web/{fonts.css => _fonts.scss} (100%) rename src/skins/vector/css/vector-web/structures/{CompatibilityPage.css => _CompatibilityPage.scss} (100%) rename src/skins/vector/css/vector-web/structures/{LeftPanel.css => _LeftPanel.scss} (100%) rename src/skins/vector/css/vector-web/structures/{RightPanel.css => _RightPanel.scss} (100%) rename src/skins/vector/css/vector-web/structures/{RoomDirectory.css => _RoomDirectory.scss} (100%) rename src/skins/vector/css/vector-web/structures/{RoomSubList.css => _RoomSubList.scss} (100%) rename src/skins/vector/css/vector-web/structures/{ViewSource.css => _ViewSource.scss} (100%) rename src/skins/vector/css/vector-web/views/context_menus/{MessageContextMenu.css => _MessageContextMenu.scss} (100%) rename src/skins/vector/css/vector-web/views/context_menus/{NotificationStateContextMenu.css => _NotificationStateContextMenu.scss} (100%) rename src/skins/vector/css/vector-web/views/context_menus/{RoomTagContextMenu.css => _RoomTagContextMenu.scss} (100%) rename src/skins/vector/css/vector-web/views/dialogs/{ChangelogDialog.css => _ChangelogDialog.scss} (100%) rename src/skins/vector/css/vector-web/views/directory/{NetworkDropdown.css => _NetworkDropdown.scss} (100%) rename src/skins/vector/css/vector-web/views/elements/{ImageView.css => _ImageView.scss} (100%) rename src/skins/vector/css/vector-web/views/elements/{Spinner.css => _Spinner.scss} (100%) rename src/skins/vector/css/vector-web/views/globals/{GuestWarningBar.css => _GuestWarningBar.scss} (100%) rename src/skins/vector/css/vector-web/views/globals/{MatrixToolbar.css => _MatrixToolbar.scss} (100%) rename src/skins/vector/css/vector-web/views/messages/{MessageTimestamp.css => _MessageTimestamp.scss} (100%) rename src/skins/vector/css/vector-web/views/messages/{SenderProfile.css => _SenderProfile.scss} (100%) rename src/skins/vector/css/vector-web/views/rooms/{RoomDropTarget.css => _RoomDropTarget.scss} (100%) rename src/skins/vector/css/vector-web/views/rooms/{RoomTooltip.css => _RoomTooltip.scss} (100%) rename src/skins/vector/css/vector-web/views/rooms/{SearchBar.css => _SearchBar.scss} (100%) rename src/skins/vector/css/vector-web/views/settings/{Notifications.css => _Notifications.scss} (100%) diff --git a/package.json b/package.json index 3f9f46e238..c657aad641 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "build:config": "cpx config.json webapp/", "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch", + "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", @@ -44,7 +44,7 @@ "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css", + "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"", "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"", "clean": "rimraf build lib webapp electron/dist", @@ -113,11 +113,13 @@ "karma-webpack": "^1.7.0", "mkdirp": "^0.5.1", "mocha": "^2.4.5", + "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", "react-addons-perf": "^15.4.0", "react-addons-test-utils": "^15.4.0", "rimraf": "^2.4.3", + "sass-loader": "^4.1.1", "source-map-loader": "^0.1.5", "webpack": "^1.12.14", "webpack-dev-server": "^1.16.2" diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/_common.scss similarity index 100% rename from src/skins/vector/css/common.css rename to src/skins/vector/css/_common.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css rename to src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css rename to src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css rename to src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css rename to src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css rename to src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/RoomView.css rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css rename to src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css rename to src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css rename to src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/login/Login.css rename to src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css rename to src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css rename to src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css rename to src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css rename to src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css rename to src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css rename to src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css rename to src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss new file mode 100644 index 0000000000..19ab2cde4b --- /dev/null +++ b/src/skins/vector/css/themes/dark.scss @@ -0,0 +1,7 @@ +// typical text (dark-on-white in light skin) +$primary-fg-color: #dddddd; +$primary-bg-color: #2d2d2d; + +// button UI (white-on-green in light skin) + +@import "../_components" \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss new file mode 100644 index 0000000000..e0ad84f62f --- /dev/null +++ b/src/skins/vector/css/themes/light.scss @@ -0,0 +1,4 @@ +$primary-fg-color: #454545; +$primary-bg-color: #ffffff; + +@import "../_components" \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/_fonts.scss similarity index 100% rename from src/skins/vector/css/vector-web/fonts.css rename to src/skins/vector/css/vector-web/_fonts.scss diff --git a/src/skins/vector/css/vector-web/structures/CompatibilityPage.css b/src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/CompatibilityPage.css rename to src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/LeftPanel.css rename to src/skins/vector/css/vector-web/structures/_LeftPanel.scss diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/_RightPanel.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/RightPanel.css rename to src/skins/vector/css/vector-web/structures/_RightPanel.scss diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/RoomDirectory.css rename to src/skins/vector/css/vector-web/structures/_RoomDirectory.scss diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/RoomSubList.css rename to src/skins/vector/css/vector-web/structures/_RoomSubList.scss diff --git a/src/skins/vector/css/vector-web/structures/ViewSource.css b/src/skins/vector/css/vector-web/structures/_ViewSource.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/ViewSource.css rename to src/skins/vector/css/vector-web/structures/_ViewSource.scss diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css rename to src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css rename to src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss diff --git a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css rename to src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss diff --git a/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css b/src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css rename to src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss diff --git a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css rename to src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/elements/ImageView.css rename to src/skins/vector/css/vector-web/views/elements/_ImageView.scss diff --git a/src/skins/vector/css/vector-web/views/elements/Spinner.css b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/elements/Spinner.css rename to src/skins/vector/css/vector-web/views/elements/_Spinner.scss diff --git a/src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css rename to src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css rename to src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss diff --git a/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css b/src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css rename to src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss diff --git a/src/skins/vector/css/vector-web/views/messages/SenderProfile.css b/src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/messages/SenderProfile.css rename to src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css rename to src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css rename to src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss diff --git a/src/skins/vector/css/vector-web/views/rooms/SearchBar.css b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/rooms/SearchBar.css rename to src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss diff --git a/src/skins/vector/css/vector-web/views/settings/Notifications.css b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/settings/Notifications.css rename to src/skins/vector/css/vector-web/views/settings/_Notifications.scss diff --git a/src/vector/index.js b/src/vector/index.js index 8231950b49..96c6a971b6 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/components.css'); +require('../../build/themes/light.css'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 3500fedcb6..1c408b7068 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,7 @@ module.exports = { { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, // css-raw-loader loads CSS but doesn't try to treat url()s as require()s { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, + { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack From c5fa84cd28e7e0dcd389d98fd307728e0e2d896e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:02:05 +0000 Subject: [PATCH 02/56] autogenerate the _components.scss index --- src/skins/vector/css/rethemendex.sh | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100755 src/skins/vector/css/rethemendex.sh diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh new file mode 100755 index 0000000000..27c4722427 --- /dev/null +++ b/src/skins/vector/css/rethemendex.sh @@ -0,0 +1,8 @@ +#!/bin/bash + +echo "// autogenerated by rethemendex.sh" > _components.scss + +for i in `find */* -iname _\*.scss`; +do + echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss +done From 33f0eaada0b6348305ab86b4f6557ae344dc42c2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:02:23 +0000 Subject: [PATCH 03/56] autogen _components.css --- src/skins/vector/css/_components.scss | 72 +++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/skins/vector/css/_components.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss new file mode 100644 index 0000000000..1106f249aa --- /dev/null +++ b/src/skins/vector/css/_components.scss @@ -0,0 +1,72 @@ +// autogenerated by rethemendex.sh +@import "matrix-react-sdk/structures/_ContextualMenu"; +@import "matrix-react-sdk/structures/_CreateRoom"; +@import "matrix-react-sdk/structures/_FilePanel"; +@import "matrix-react-sdk/structures/_MatrixChat"; +@import "matrix-react-sdk/structures/_NotificationPanel"; +@import "matrix-react-sdk/structures/_RoomStatusBar"; +@import "matrix-react-sdk/structures/_RoomView"; +@import "matrix-react-sdk/structures/_SearchBox"; +@import "matrix-react-sdk/structures/_UploadBar"; +@import "matrix-react-sdk/structures/_UserSettings"; +@import "matrix-react-sdk/structures/login/_Login"; +@import "matrix-react-sdk/views/avatars/_BaseAvatar"; +@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog"; +@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog"; +@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog"; +@import "matrix-react-sdk/views/elements/_AddressSelector"; +@import "matrix-react-sdk/views/elements/_AddressTile"; +@import "matrix-react-sdk/views/elements/_DirectorySearchBox"; +@import "matrix-react-sdk/views/elements/_MemberEventListSummary"; +@import "matrix-react-sdk/views/elements/_ProgressBar"; +@import "matrix-react-sdk/views/elements/_RichText"; +@import "matrix-react-sdk/views/login/_ServerConfig"; +@import "matrix-react-sdk/views/messages/_MImageBody"; +@import "matrix-react-sdk/views/messages/_MNoticeBody"; +@import "matrix-react-sdk/views/messages/_MTextBody"; +@import "matrix-react-sdk/views/messages/_TextualEvent"; +@import "matrix-react-sdk/views/messages/_UnknownBody"; +@import "matrix-react-sdk/views/rooms/_Autocomplete"; +@import "matrix-react-sdk/views/rooms/_EntityTile"; +@import "matrix-react-sdk/views/rooms/_EventTile"; +@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget"; +@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo"; +@import "matrix-react-sdk/views/rooms/_MemberInfo"; +@import "matrix-react-sdk/views/rooms/_MemberList"; +@import "matrix-react-sdk/views/rooms/_MessageComposer"; +@import "matrix-react-sdk/views/rooms/_PresenceLabel"; +@import "matrix-react-sdk/views/rooms/_RoomHeader"; +@import "matrix-react-sdk/views/rooms/_RoomList"; +@import "matrix-react-sdk/views/rooms/_RoomPreviewBar"; +@import "matrix-react-sdk/views/rooms/_RoomSettings"; +@import "matrix-react-sdk/views/rooms/_RoomTile"; +@import "matrix-react-sdk/views/rooms/_SearchableEntityList"; +@import "matrix-react-sdk/views/rooms/_TabCompleteBar"; +@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar"; +@import "matrix-react-sdk/views/settings/_DevicesPanel"; +@import "matrix-react-sdk/views/settings/_IntegrationsManager"; +@import "matrix-react-sdk/views/voip/_CallView"; +@import "matrix-react-sdk/views/voip/_IncomingCallbox"; +@import "matrix-react-sdk/views/voip/_VideoView"; +@import "vector-web/_fonts"; +@import "vector-web/structures/_CompatibilityPage"; +@import "vector-web/structures/_LeftPanel"; +@import "vector-web/structures/_RightPanel"; +@import "vector-web/structures/_RoomDirectory"; +@import "vector-web/structures/_RoomSubList"; +@import "vector-web/structures/_ViewSource"; +@import "vector-web/views/context_menus/_MessageContextMenu"; +@import "vector-web/views/context_menus/_NotificationStateContextMenu"; +@import "vector-web/views/context_menus/_RoomTagContextMenu"; +@import "vector-web/views/dialogs/_ChangelogDialog"; +@import "vector-web/views/directory/_NetworkDropdown"; +@import "vector-web/views/elements/_ImageView"; +@import "vector-web/views/elements/_Spinner"; +@import "vector-web/views/globals/_GuestWarningBar"; +@import "vector-web/views/globals/_MatrixToolbar"; +@import "vector-web/views/messages/_MessageTimestamp"; +@import "vector-web/views/messages/_SenderProfile"; +@import "vector-web/views/rooms/_RoomDropTarget"; +@import "vector-web/views/rooms/_RoomTooltip"; +@import "vector-web/views/rooms/_SearchBar"; +@import "vector-web/views/settings/_Notifications"; From c6beaa16318d005f0548f19f2dc956e17c60f1de Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 04:04:43 +0000 Subject: [PATCH 04/56] initial stab at an official dark theme via the magic of SASS. SVGs are all broken, and some of the more exotic colours haven't been updated. There's been no attempt to use SASS to remove duplication from the CSS yet. no attempt to switch it at runtime yet. --- src/skins/vector/css/_common.scss | 51 +++++++------- src/skins/vector/css/_components.scss | 1 + .../structures/_ContextualMenu.scss | 14 ++-- .../structures/_CreateRoom.scss | 4 +- .../structures/_FilePanel.scss | 10 +-- .../structures/_MatrixChat.scss | 4 +- .../structures/_NotificationPanel.scss | 7 +- .../structures/_RoomStatusBar.scss | 16 ++--- .../structures/_RoomView.scss | 24 +++---- .../structures/_UploadBar.scss | 6 +- .../structures/_UserSettings.scss | 6 +- .../structures/login/_Login.scss | 14 ++-- .../views/avatars/_BaseAvatar.scss | 2 +- .../views/dialogs/_ChatInviteDialog.scss | 4 +- .../views/dialogs/_EncryptedEventDialog.scss | 6 +- .../views/dialogs/_SetDisplayNameDialog.scss | 6 +- .../views/elements/_AddressSelector.scss | 16 ++--- .../views/elements/_AddressTile.scss | 8 +-- .../views/elements/_DirectorySearchBox.scss | 2 +- .../elements/_MemberEventListSummary.scss | 2 +- .../views/elements/_RichText.scss | 6 +- .../views/login/_ServerConfig.scss | 2 +- .../views/messages/_MImageBody.scss | 8 +-- .../views/rooms/_Autocomplete.scss | 12 ++-- .../views/rooms/_EntityTile.scss | 6 +- .../views/rooms/_EventTile.scss | 34 +++++----- .../views/rooms/_MemberDeviceInfo.scss | 14 ++-- .../views/rooms/_MemberInfo.scss | 4 +- .../views/rooms/_MemberList.scss | 10 +-- .../views/rooms/_MessageComposer.scss | 10 +-- .../views/rooms/_RoomHeader.scss | 16 ++--- .../views/rooms/_RoomPreviewBar.scss | 4 +- .../views/rooms/_RoomSettings.scss | 18 ++--- .../views/rooms/_RoomTile.scss | 14 ++-- .../views/rooms/_SearchableEntityList.scss | 10 +-- .../views/rooms/_TabCompleteBar.scss | 6 +- .../views/rooms/_TopUnreadMessagesBar.scss | 2 +- .../views/settings/_IntegrationsManager.scss | 2 +- .../views/voip/_CallView.scss | 4 +- .../views/voip/_IncomingCallbox.scss | 4 +- src/skins/vector/css/rethemendex.sh | 2 +- src/skins/vector/css/themes/_base.scss | 68 +++++++++++++++++++ src/skins/vector/css/themes/dark.scss | 66 +++++++++++++++++- src/skins/vector/css/themes/light.scss | 6 +- .../vector-web/structures/_RightPanel.scss | 10 +-- .../vector-web/structures/_RoomDirectory.scss | 6 +- .../vector-web/structures/_RoomSubList.scss | 36 +++++----- .../context_menus/_RoomTagContextMenu.scss | 2 +- .../views/directory/_NetworkDropdown.scss | 6 +- .../vector-web/views/elements/_ImageView.scss | 8 +-- .../views/globals/_GuestWarningBar.scss | 6 +- .../views/globals/_MatrixToolbar.scss | 6 +- .../views/rooms/_RoomDropTarget.scss | 6 +- .../vector-web/views/rooms/_RoomTooltip.scss | 12 ++-- .../vector-web/views/rooms/_SearchBar.scss | 14 ++-- .../views/settings/_Notifications.scss | 2 +- src/vector/index.js | 2 +- 57 files changed, 388 insertions(+), 259 deletions(-) create mode 100644 src/skins/vector/css/themes/_base.scss diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index bb00bbd8c0..e81ea2fa6d 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -29,7 +29,8 @@ body { Arial here. */ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-size: 15px; - color: #454545; + background-color: $primary-bg-color; + color: $primary-fg-color; border: 0px; margin: 0px; /* This should render the fonts the same accross browsers */ @@ -41,7 +42,7 @@ div.error { } h2 { - color: #454545; + color: $primary-fg-color; font-weight: 400; font-size: 18px; margin-top: 16px; @@ -51,7 +52,7 @@ h2 { a:hover, a:link, a:visited { - color: #76cfa6; + color: $accent-color; } input[type=text].error, input[type=password].error { @@ -59,7 +60,7 @@ input[type=text].error, input[type=password].error { } input[type=text]:focus, textarea:focus { - border: 1px solid #76CFA6; + border: 1px solid $accent-color; outline: none; box-shadow: none; } @@ -148,8 +149,8 @@ textarea { } .mx_Dialog { - background-color: #fff; - color: #747474; + background-color: $primary-bg-color; + color: $light-fg-color; z-index: 4010; font-weight: 300; font-size: 15px; @@ -190,7 +191,7 @@ textarea { .mx_Dialog_content { margin: 24px 58px 68px 0; font-size: 14px; - color: #4a4a4a; + color: $primary-fg-color; word-wrap: break-word; } @@ -202,7 +203,7 @@ textarea { border: 0px; height: 36px; border-radius: 40px; - border: solid 1px #76cfa6; + border: solid 1px $accent-color; font-weight: 600; font-size: 14px; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; @@ -212,26 +213,26 @@ textarea { padding-right: 1.5em; outline: none; cursor: pointer; - color: #76cfa6; - background-color: #fff; + color: $accent-color; + background-color: $primary-bg-color; /* align images in buttons (eg spinners) */ vertical-align: middle; } .mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; } .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger { - background-color: #ff0064; - border: solid 1px #ff0064; + background-color: $warning-color; + border: solid 1px $warning-color; } .mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled { - background-color: #777777; - border: solid 1px #777777; + background-color: $light-fg-color; + border: solid 1px $light-fg-color; opacity: 0.7; } @@ -241,11 +242,11 @@ textarea { font-weight: bold; font-size: 22px; line-height: 1.4; - color: #454545; + color: $primary-fg-color; } .mx_Dialog_title.danger { - color: #ff0064; + color: $warning-color; } .mx_TextInputDialog_label { @@ -256,10 +257,10 @@ textarea { .mx_TextInputDialog_input { font-size: 15px; border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; } .mx_emojione { @@ -268,19 +269,19 @@ textarea { } ::-moz-selection { - background-color: #76CFA6; + background-color: $accent-color; color: white; } ::selection { - background-color: #76CFA6; + background-color: $accent-color; color: white; } /** green button with rounded corners */ .mx_textButton { - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; border-radius: 17px; text-align: center; padding-left: 1em; diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 1106f249aa..532e0a3657 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -1,4 +1,5 @@ // autogenerated by rethemendex.sh +@import "_common"; @import "matrix-react-sdk/structures/_ContextualMenu"; @import "matrix-react-sdk/structures/_CreateRoom"; @import "matrix-react-sdk/structures/_FilePanel"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss index d317363dd5..d3e73a9a15 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss @@ -30,10 +30,10 @@ limitations under the License. } .mx_ContextualMenu { - border: solid 1px rgba(187, 187, 187, 0.5); + border: solid 1px $menu-border-color; border-radius: 4px; - background-color: #f6f6f6; - color: #4a4a4a; + background-color: $menu-bg-color; + color: $primary-fg-color; position: absolute; padding: 6px; font-size: 14px; @@ -51,7 +51,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-left: 8px solid rgba(187, 187, 187, 0.5); + border-left: 8px solid $menu-border-color; border-bottom: 8px solid transparent; } @@ -60,7 +60,7 @@ limitations under the License. width: 0; height: 0; border-top: 7px solid transparent; - border-left: 7px solid #f6f6f6; + border-left: 7px solid $menu-bg-color; border-bottom: 7px solid transparent; position:absolute; top: -7px; @@ -78,7 +78,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-right: 8px solid rgba(187, 187, 187, 0.5); + border-right: 8px solid $menu-border-color; border-bottom: 8px solid transparent; } @@ -87,7 +87,7 @@ limitations under the License. width: 0; height: 0; border-top: 7px solid transparent; - border-right: 7px solid #f6f6f6; + border-right: 7px solid $menu-bg-color; border-bottom: 7px solid transparent; position:absolute; top: -7px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss index 88804409e2..2be193525e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss @@ -18,13 +18,13 @@ limitations under the License. width: 960px; margin-left: auto; margin-right: auto; - color: #4a4a4a; + color: $primary-fg-color; } .mx_CreateRoom input, .mx_CreateRoom textarea { border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; font-weight: 300; font-size: 13px; padding: 9px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index fca53b1d2a..2f4a00ad70 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -58,12 +58,12 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MImageBody_download { display: flex; font-size: 14px; - color: #acacac; + color: $event-timestamp-color; } .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink { flex: 1 1 auto; - color: #747474; + color: $light-fg-color; } .mx_FilePanel .mx_EventTile .mx_MImageBody_size { @@ -90,7 +90,7 @@ limitations under the License. padding: 0px; font-size: 11px; opacity: 1.0; - color: #acacac; + color: $event-timestamp-color; } .mx_FilePanel .mx_EventTile .mx_MessageTimestamp { @@ -100,7 +100,7 @@ limitations under the License. position: initial; font-size: 11px; opacity: 1.0; - color: #acacac; + color: $event-timestamp-color; } /* Overrides for the wrappers around the body tile */ @@ -111,7 +111,7 @@ limitations under the License. } .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { - background-color: #fff; + background-color: $primary-bg-color; } .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index f1cc7d4a1a..5587a6093c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -91,7 +91,7 @@ limitations under the License. -webkit-order: 1; order: 1; - background-color: #eaf5f0; + background-color: $secondary-accent-color; -webkit-flex: 0 0 235px; flex: 0 0 235px; @@ -111,7 +111,7 @@ limitations under the License. padding-left: 20px; padding-right: 22px; - background-color: #fff; + background-color: $primary-bg-color; -webkit-flex: 1; flex: 1; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index 83b0a033b7..06dd92f315 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -51,7 +51,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile_roomName a { - color: #4a4a4a; + color: $primary-fg-color; } .mx_NotificationPanel .mx_EventTile_avatar { @@ -61,8 +61,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { - color: #000; - opacity: 0.3; + color: $primary-fg-color; font-size: 12px; display: inline; padding-left: 0px; @@ -94,7 +93,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { - background-color: #fff; + background-color: $primary-bg-color; } .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index ef0b69c4d0..d0ac5a600c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -36,7 +36,7 @@ limitations under the License. } .mx_RoomStatusBar_placeholderIndicator span { - color: #4a4a4a; + color: $primary-fg-color; opacity: 0.5; position: relative; top: -4px; @@ -76,7 +76,7 @@ limitations under the License. .mx_RoomStatusBar_unreadMessagesBar { padding-top: 10px; - color: #ff0064; + color: $warning-color; cursor: pointer; } @@ -93,29 +93,29 @@ limitations under the License. } .mx_RoomStatusBar_connectionLostBar_title { - color: #ff0064; + color: $warning-color; } .mx_RoomStatusBar_connectionLostBar_desc { - color: #454545; + color: $primary-fg-color; font-size: 13px; opacity: 0.5; } .mx_RoomStatusBar_resend_link { - color: #454545 ! important; + color: $primary-fg-color ! important; text-decoration: underline ! important; cursor: pointer; } .mx_RoomStatusBar_tabCompleteBar { padding-top: 10px; - color: #4a4a4a; + color: $primary-fg-color; } .mx_RoomStatusBar_typingBar { padding-top: 10px; - color: #4a4a4a; + color: $primary-fg-color; opacity: 0.5; overflow-y: hidden; display: block; @@ -135,7 +135,7 @@ limitations under the License. .mx_RoomStatusBar_tabCompleteEol { flex: 0 0 auto; -webkit-flex: 0 0 auto; - color: #76CFA6; + color: $accent-color; } .mx_RoomStatusBar_tabCompleteEol object { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index c3f7ceed3b..182d690c5e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -89,7 +89,7 @@ limitations under the License. margin: auto; overflow: auto; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; -webkit-flex: 0 0 auto; flex: 0 0 auto; @@ -158,7 +158,7 @@ limitations under the License. margin-bottom: 8px; margin-left: 63px; padding-bottom: 6px; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; } .mx_RoomView_invitePrompt { @@ -185,8 +185,8 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-top: solid 1px #76cfa6; - border-bottom: solid 1px #76cfa6; + border-top: solid 1px $accent-color; + border-bottom: solid 1px $accent-color; margin-top: 0px; position: relative; top: 5px; @@ -212,16 +212,16 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox_line { margin-left: 65px; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $primary-hairline-color; height: 1px; } .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { - background-color: #fff; + background-color: $primary-bg-color; } .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename { - color: #fff; + color: $accent-fg-color; opacity: 1.0; } @@ -234,8 +234,8 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_inCall .mx_RoomView_statusAreaBox { - background-color: #76CFA6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; position: relative; } @@ -272,13 +272,13 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_ongoingConfCallNotification { width: 100%; text-align: center; - background-color: #ff0064; - color: #fff; + background-color: $warning-color; + color: $accent-fg-color; font-weight: bold; padding: 6px 0; cursor: pointer; } .mx_RoomView_ongoingConfCallNotification a { - color: #fff ! important; + color: $accent-fg-color ! important; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss index b489e13265..d76c81668c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss @@ -26,7 +26,7 @@ limitations under the License. } .mx_UploadBar_uploadProgressInner { - background-color: #76cfa6; + background-color: $accent-color; height: 5px; } @@ -34,7 +34,7 @@ limitations under the License. margin-top: 5px; margin-left: 65px; opacity: 0.5; - color: #4a4a4a; + color: $primary-fg-color; } .mx_UploadBar_uploadIcon { @@ -57,5 +57,5 @@ limitations under the License. float: right; margin-top: 5px; margin-right: 30px; - color: #76cfa6; + color: $accent-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 427369a5c7..6ba1002bf9 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -84,8 +84,8 @@ limitations under the License. border-radius: 36px; font-weight: 400; font-size: 16px; - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; width: auto; margin: auto; padding: 7px; @@ -95,7 +95,7 @@ limitations under the License. } .mx_UserSettings_button.danger { - background-color: #ff0064; + background-color: $warning-color; } .mx_UserSettings_section { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 0f610b25da..5f4164e894 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_Login h2 { - color: #4a4a4a; + color: $primary-fg-color; font-weight: 300; margin-top: 32px; margin-bottom: 20px; @@ -53,7 +53,7 @@ limitations under the License. .mx_Login_field { width: 100%; border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; font-weight: 300; font-size: 13px; padding: 9px; @@ -75,9 +75,9 @@ limitations under the License. border-radius: 40px; height: 40px; border: 0px; - background-color: #76cfa6; + background-color: $accent-color; font-size: 15px; - color: #fff; + color: $accent-fg-color; } .mx_Login_label { @@ -99,7 +99,7 @@ limitations under the License. } .mx_Login_create:link { - color: #4a4a4a; + color: $primary-fg-color; } .mx_Login_links { @@ -112,7 +112,7 @@ limitations under the License. } .mx_Login_links a:link { - color: #4a4a4a; + color: $primary-fg-color; } .mx_Login_prompt { @@ -127,7 +127,7 @@ limitations under the License. } .mx_Login_forgot:link { - color: #4a4a4a; + color: $primary-fg-color; } .mx_Login_loader { diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss index 901a29599a..d481e5c177 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_BaseAvatar_initial { position: absolute; z-index: 1; - color: #fff; + color: $avatar-initial-color; text-align: center; speak: none; pointer-events: none; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss index aa1dced80a..6bf9adce66 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss @@ -36,7 +36,7 @@ limitations under the License. .mx_ChatInviteDialog_inputContainer { border-radius: 3px; - border: solid 1px #f0f0f0; + border: solid 1px $input-border-color; line-height: 36px; padding-left: 4px; padding-right: 4px; @@ -49,7 +49,7 @@ limitations under the License. .mx_ChatInviteDialog_error { position: absolute; - color: #ff0064; + color: $warning-color; line-height: 36px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss index 5e72d7f8bf..cbc0195cac 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss @@ -24,7 +24,7 @@ limitations under the License. border: 0px; height: 36px; border-radius: 40px; - border: solid 1px #76cfa6; + border: solid 1px $accent-color; font-weight: 600; font-size: 14px; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; @@ -34,6 +34,6 @@ limitations under the License. padding-right: 1.5em; outline: none; cursor: pointer; - color: #76cfa6; - background-color: #fff; + color: $accent-color; + background-color: $primary-bg-color; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss index 68409a803b..2f0750ad6b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss @@ -16,9 +16,9 @@ limitations under the License. .mx_SetDisplayNameDialog_input { border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; font-size: 15px; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss index aa0f8c6a4e..9871a7e881 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss @@ -16,13 +16,13 @@ limitations under the License. .mx_AddressSelector { position: absolute; - background-color: #fff; + background-color: $primary-bg-color; width: 485px; max-height: 116px; overflow-y: auto; border-radius: 3px; - background-color: #fff; - border: solid 1px #76cfa6; + background-color: $primary-bg-color; + border: solid 1px $accent-color; cursor: pointer; } @@ -31,15 +31,15 @@ limitations under the License. } .mx_AddressSelector_addressListElement .mx_AddressTile { - background-color: #fff; - border: solid 1px #fff; + background-color: $primary-bg-color; + border: solid 1px $primary-bg-color; } .mx_AddressSelector_addressListElement.mx_AddressSelector_selected { - background-color: #eaf5f0; /* selected colour */ + background-color: $selected-color; } .mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { - background-color: #eaf5f0; /* selected colour */ - border: solid 1px #eaf5f0; /* selected colour */ + background-color: $selected-color; + border: solid 1px $selected-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss index 76c0e6032f..59c0b68d3b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss @@ -18,9 +18,9 @@ limitations under the License. display: inline-block; border-radius: 3px; background-color: rgba(74, 73, 74, 0.1); - border: solid 1px #f0f0f0; + border: solid 1px $input-border-color; line-height: 26px; - color: #454545; + color: $primary-fg-color; font-size: 14px; font-weight: normal; margin-right: 4px; @@ -28,8 +28,8 @@ limitations under the License. .mx_AddressTile.mx_AddressTile_error { background-color: rgba(255, 0, 100, 0.1); - color: #ff0064; - border-color: #ff0064; + color: $warning-color; + border-color: $warning-color; } .mx_AddressTile_network { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss index 3a0922bcd2..dd953ab955 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_DirectorySearchBox { position: relative; border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; } .mx_DirectorySearchBox_container { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss index b8197805a0..7d1b059b3c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss @@ -31,6 +31,6 @@ limitations under the License. } .mx_MemberEventListSummary_toggle { - color:#76cfa6; + color:$accent-color; cursor:pointer; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index f0b3c04645..72a4c0b7a4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -1,14 +1,14 @@ .mx_UserPill { color: white; - background-color: #76cfa6; + background-color: $accent-color; padding: 2px 8px; border-radius: 16px; } .mx_RoomPill { background-color: white; - color: #76cfa6; - border: 1px solid #76cfa6; + color: $accent-color; + border: 1px solid $accent-color; padding: 2px 8px; border-radius: 16px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss index 75cd4170da..1ad195de29 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss @@ -27,5 +27,5 @@ limitations under the License. opacity: 0.8; font-size: 13px; font-weight: 300; - color: #4a4a4a; + color: $primary-fg-color; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss index 003ef1030c..83ae06160d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss @@ -22,18 +22,18 @@ limitations under the License. .mx_MImageBody_thumbnail { max-width: 100%; /* - background-color: #fff; - border: 2px solid #fff; + background-color: $primary-bg-color; + border: 2px solid $primary-bg-color; border-radius: 1px; */ } .mx_MImageBody_download { - color: #76cfa6; + color: $accent-color; } .mx_MImageBody_download a { - color: #76cfa6; + color: $accent-color; text-decoration: none; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss index 6d611b5ef3..9265d4dc12 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss @@ -3,7 +3,7 @@ bottom: 0; z-index: 1000; width: 100%; - border: 1px solid #e5e5e5; + border: 1px solid $primary-hairline-color; background: white; border-bottom: none; border-radius: 4px 4px 0 0; @@ -12,7 +12,7 @@ } .mx_Autocomplete_ProviderSection { - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; } .mx_Autocomplete_Completion_container_pill { @@ -28,7 +28,7 @@ user-select: none; cursor: pointer; align-items: center; - color: #4a4a4a; + color: $primary-fg-color; } .mx_Autocomplete_Completion_block * { @@ -42,7 +42,7 @@ user-select: none; cursor: pointer; align-items: center; - color: #4a4a4a; + color: $primary-fg-color; } .mx_Autocomplete_Completion_pill * { @@ -57,13 +57,13 @@ } .mx_Autocomplete_Completion.selected { - background: #f6f6f6; + background: $menu-bg-color; outline: none; } .mx_Autocomplete_provider_name { margin: 12px; - color: #454545; + color: $primary-fg-color; font-weight: 400; opacity: 0.4; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss index e52ece778d..2511f07d4d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_EntityTile { display: table-row; position: relative; - color: #454545; + color: $primary-fg-color; cursor: pointer; } @@ -77,12 +77,12 @@ limitations under the License. .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; - font-color: #454545; + font-color: $primary-fg-color; } .mx_EntityTile_invitePlaceholder .mx_EntityTile_name { font-style: italic; - font-color: #454545; + font-color: $primary-fg-color; } .mx_EntityTile_unavailable .mx_EntityTile_avatar, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index fd3f486b7d..a6b10e2435 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -44,7 +44,7 @@ limitations under the License. } .mx_EventTile .mx_SenderProfile { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 14px; display: block; /* anti-zalgo, with overflow hidden */ @@ -61,7 +61,7 @@ limitations under the License. display: block; visibility: hidden; white-space: nowrap; - color: #acacac; + color: $event-timestamp-color; font-size: 11px; left: 8px; position: absolute; @@ -93,20 +93,20 @@ limitations under the License. * TODO: ultimately we probably want some transition on here. */ .mx_EventTile_selected .mx_EventTile_line { - border-left: #76cfa6 5px solid; + border-left: $accent-color 5px solid; padding-left: 60px; - background-color: #f7f7f7; + background-color: $event-selected-color; } .mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.menu .mx_EventTile_line { - background-color: #f7f7f7; + background-color: $event-selected-color; } .mx_EventTile_searchHighlight { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; border-radius: 5px; padding-left: 2px; padding-right: 2px; @@ -114,26 +114,26 @@ limitations under the License. } .mx_EventTile_searchHighlight a { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; } .mx_EventTile_encrypting { - color: #abddbc ! important; + color: $event-encrypting-color ! important; } .mx_EventTile_sending { - color: #ddd; + color: $event-sending-color; } .mx_EventTile_notSent { - color: #f44; + color: $event-notsent-color; } .mx_EventTile_highlight, .mx_EventTile_highlight .markdown-body { - color: #FF0064; + color: $warning-color; } .mx_EventTile_contextual { @@ -204,7 +204,7 @@ limitations under the License. } .mx_EventTile_readAvatarRemainder { - color: #acacac; + color: $event-timestamp-color; font-size: 11px; position: absolute; } @@ -244,10 +244,10 @@ limitations under the License. } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: #76cfa5 5px solid; + border-left: $e2e-verified-color 5px solid; } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: #e8bf37 5px solid; + border-left: $e2e-unverified-color 5px solid; } .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp, @@ -297,7 +297,7 @@ limitations under the License. } .mx_EventTile_content .markdown-body a { - color: #76cfa6; + color: $accent-color; } .mx_EventTile_content .markdown-body .hljs { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 53379ac4ce..f1584d4e00 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -20,8 +20,8 @@ limitations under the License. .mx_MemberDeviceInfo_textButton { - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; border-radius: 17px; text-align: center; padding-left: 1em; @@ -50,13 +50,13 @@ limitations under the License. } /* "Unblacklist" is too long for a regular button: make it wider and - reduce the padding. */ + 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, @@ -66,13 +66,13 @@ limitations under the License. } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified { - color: #76cfa5; + color: $e2e-verified-color; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified { - color: #e8bf37; + color: $e2e-unverified-color; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted { - color: #ba6363; + color: $e2e-warning-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 40b1524c27..3b4b653e55 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -72,7 +72,7 @@ limitations under the License. font-color: #999999; font-size: 13px; position: relative; - background-color: #fff; + background-color: $primary-bg-color; } .mx_MemberInfo_buttons { @@ -82,7 +82,7 @@ limitations under the License. .mx_MemberInfo_field { cursor: pointer; font-size: 13px; - color: #76cfa6; + color: $accent-color; margin-left: 8px; line-height: 23px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 7d38360601..3c7e3ec5e6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -55,10 +55,10 @@ limitations under the License. .mx_MemberList_query { font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; margin-left: 3px; font-size: 14px; margin-bottom: 8px; @@ -66,13 +66,13 @@ limitations under the License. } .mx_MemberList_query::-moz-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 14px; } .mx_MemberList_query::-webkit-input-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 14px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 842f8db655..e5ffd22064 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -18,7 +18,7 @@ limitations under the License. max-width: 960px; vertical-align: middle; margin: auto; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $primary-hairline-color; position: relative; } @@ -108,8 +108,8 @@ limitations under the License. -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; font-size: 14px; max-height: 120px; overflow: auto; @@ -120,11 +120,11 @@ limitations under the License. /* hack for FF as vertical alignment of custom placeholder text is broken */ .mx_MessageComposer_input textarea::-moz-placeholder { line-height: 100%; - color: #76cfa6; + color: $accent-color; opacity: 1.0; } .mx_MessageComposer_input textarea::-webkit-input-placeholder { - color: #76cfa6; + color: $accent-color; } .mx_MessageComposer_upload, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 056fa8794b..a26f12ee69 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -63,10 +63,10 @@ limitations under the License. .mx_RoomHeader_textButton { height: 36px; - background-color: #76cfa6; + background-color: $accent-color; border-radius: 36px; margin-right: 8px; - color: #fff; + color: $accent-fg-color; line-height: 34px; margin-top: -2px; text-align: center; @@ -102,7 +102,7 @@ limitations under the License. .mx_RoomHeader_rightRow { margin-top: 4px; - background-color: #fff; + background-color: $primary-bg-color; display: flex; align-items: center; -webkit-box-ordinal-group: 3; @@ -120,7 +120,7 @@ limitations under the License. .mx_RoomHeader_simpleHeader { line-height: 70px; - color: #454545; + color: $primary-fg-color; font-size: 22px; font-weight: bold; overflow: hidden; @@ -138,7 +138,7 @@ limitations under the License. width: 100%; height: 31px; overflow: hidden; - color: #454545; + color: $primary-fg-color; font-weight: bold; font-size: 22px; padding-left: 19px; @@ -174,7 +174,7 @@ limitations under the License. } .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) { - color: #76cfa6; + color: $accent-color; } .mx_RoomHeader_placeholder { @@ -182,13 +182,13 @@ limitations under the License. } .mx_RoomHeader_editable { - border-bottom: 1px solid #c7c7c7 ! important; + border-bottom: 1px solid $strong-input-border-color ! important; min-width: 150px; cursor: text; } .mx_RoomHeader_editable:focus { - border-bottom: 1px solid #76CFA6 ! important; + border-bottom: 1px solid $accent-color ! important; outline: none; box-shadow: none; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 286a39f7d5..6b71f96d2e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -38,11 +38,11 @@ limitations under the License. } .mx_RoomPreviewBar_invite_text { - color: #454545; + color: $primary-fg-color; } .mx_RoomPreviewBar_join_text { - color: #ff0064; + color: $warning-color; } .mx_RoomPreviewBar_preview_text { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 6a3b1ac8cb..132c979232 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -24,10 +24,10 @@ limitations under the License. .mx_RoomSettings_integrationsButton_error { position: relative; height: 36px; - background-color: #76cfa6; + background-color: $accent-color; border-radius: 36px; margin-right: 8px; - color: #fff; + color: $accent-fg-color; line-height: 34px; text-align: center; float: right; @@ -47,8 +47,8 @@ limitations under the License. font-size: 10pt; line-height: 1.5em; border-radius: 5px; - background-color: #000; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; } .mx_RoomSettings_e2eIcon { @@ -174,7 +174,7 @@ limitations under the License. } .mx_RoomSettings_warning { - color: #ff0064; + color: $warning-color; font-weight: bold; margin-top: 8px; margin-bottom: 8px; @@ -182,13 +182,13 @@ limitations under the License. .mx_RoomSettings_editable { border: 0px; - border-bottom: 1px solid #c7c7c7; + border-bottom: 1px solid $strong-input-border-color; padding: 0px; min-width: 240px; } .mx_RoomSettings_editable:focus { - border-bottom: 1px solid #76CFA6; + border-bottom: 1px solid $accent-color; outline: none; box-shadow: none; } @@ -220,8 +220,8 @@ limitations under the License. border-radius: 36px; font-weight: 400; font-size: 15px; - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; width: auto; margin: auto; padding: 6px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index 2822d82e88..2236404383 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -78,7 +78,7 @@ limitations under the License. position: absolute; content: ""; border-radius: 40px; - background: #4A4A4A; + background: $primary-fg-color; bottom: 0; width: 24px; height: 24px; @@ -103,7 +103,7 @@ limitations under the License. padding-right: 6px; padding-top: 2px; padding-bottom: 3px; - color: rgba(69, 69, 69, 0.8); + color: $roomtile-name-color; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -142,7 +142,7 @@ limitations under the License. width: 0; height: 0; margin-left: 5px; - border-top: 5px solid #ff0064; + border-top: 5px solid $warning-color; border-right: 7px solid transparent; } @@ -154,7 +154,7 @@ limitations under the License. right: 8px; /*gutter */ top: 9px; border-radius: 8px; - color: #fff; + color: $accent-fg-color; font-weight: 600; font-size: 10px; text-align: center; @@ -175,11 +175,11 @@ limitations under the License. } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { - background-color: #76cfa6; + background-color: $accent-color; } .mx_RoomTile_highlight .mx_RoomTile_badge { - background-color: #ff0064; + background-color: $warning-color; } .mx_RoomTile_unread, .mx_RoomTile_highlight { @@ -187,7 +187,7 @@ limitations under the License. } .mx_RoomTile_selected { - background-color: rgba(255, 255, 255, 0.8); + background-color: $roomtile-selected-bg-color; } .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index 76d9e21634..9a24868d14 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -25,10 +25,10 @@ limitations under the License. .mx_SearchableEntityList_query { font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; margin-left: 3px; font-size: 15px; margin-bottom: 8px; @@ -36,13 +36,13 @@ limitations under the License. } .mx_SearchableEntityList_query::-moz-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 12px; } .mx_SearchableEntityList_query::-webkit-input-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 12px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss index 1f8a345083..5dcbd21a47 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss @@ -27,7 +27,7 @@ limitations under the License. .mx_TabCompleteBar_command { margin-right: 8px; - background-color: #76CFA6; + background-color: $accent-color; padding-left: 8px; padding-right: 8px; padding-top: 2px; @@ -41,7 +41,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; vertical-align: initial; - color: #fff; + color: $accent-fg-color; } .mx_TabCompleteBar_item img { @@ -50,7 +50,7 @@ limitations under the License. } .mx_TabCompleteBar_text { - color: #4a4a4a; + color: $primary-fg-color; vertical-align: middle; opacity: 0.5; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss index 77184d424f..7bbafcbe41 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss @@ -19,7 +19,7 @@ limitations under the License. max-width: 960px; padding-top: 5px; padding-bottom: 5px; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; } .mx_TopUnreadMessagesBar_scrollUp { diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss index 93ee0e20fe..13fc9b2237 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss @@ -24,7 +24,7 @@ limitations under the License. } .mx_IntegrationsManager iframe { - background-color: #fff; + background-color: $primary-bg-color; border: 0px; width: 100%; height: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss index 8051b4d0d6..deb89a837c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_CallView_voice { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; cursor: pointer; text-align: center; padding: 6px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss index 5cf62091b3..97a82a03e8 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss @@ -18,7 +18,7 @@ limitations under the License. text-align: center; border: 1px solid #a4a4a4; border-radius: 8px; - background-color: #fff; + background-color: $primary-bg-color; position: fixed; z-index: 1000; padding: 6px; @@ -58,7 +58,7 @@ limitations under the License. height: 36px; line-height: 36px; border-radius: 36px; - color: #fff; + color: $accent-fg-color; margin: auto; } diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 27c4722427..29e3438208 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -2,7 +2,7 @@ echo "// autogenerated by rethemendex.sh" > _components.scss -for i in `find */* -iname _\*.scss`; +for i in `find . -iname _\*.scss | fgrep -v _components.scss`; do echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss done diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss new file mode 100644 index 0000000000..0fb25a6a7d --- /dev/null +++ b/src/skins/vector/css/themes/_base.scss @@ -0,0 +1,68 @@ + + +// 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; + +// button UI (white-on-green in light skin) +$accent-fg-color: #ffffff; +$accent-color: #76CFA6; + +// red warning colour +$warning-color: #ff0064; + +// left-panel style muted accent color +$secondary-accent-color: #eaf5f0; + +// used by AddressSelector +$selected-color: #eaf5f0; + +// 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; + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; + +// ******************** + +$roomtile-name-color: rgba(69, 69, 69, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); + +$roomsublist-label-fg-color: #3d3b39; +$roomsublist-label-bg-color: #d3efe1; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event timestamp +$event-timestamp-color: #acacac; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +// ******************** + +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; \ No newline at end of file diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 19ab2cde4b..e560240264 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,7 +1,69 @@ +@import "_base"; + // typical text (dark-on-white in light skin) $primary-fg-color: #dddddd; $primary-bg-color: #2d2d2d; -// button UI (white-on-green in light skin) +// used for dialog box text +$light-fg-color: #747474; -@import "../_components" \ No newline at end of file +// button UI (white-on-green in light skin) +$accent-fg-color: $primary-bg-color; +$accent-color: #76CFA6; + +// red warning colour +$warning-color: #ff0064; + +// left-panel style muted accent color +$secondary-accent-color: $primary-bg-color; + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #353535; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #474747; + +// used for the border of input text fields +$input-border-color: #3a3a3a; + +// apart from login forms, which have stronger border +$strong-input-border-color: #656565; + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #373737; + +$avatar-initial-color: #2d2d2d; + +// ******************** + +$roomtile-name-color: rgba(186, 186, 186, 0.8); +$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); + +$roomsublist-label-fg-color: $primary-fg-color; +$roomsublist-label-bg-color: #454545; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event timestamp +$event-timestamp-color: #acacac; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +@import "../_components"; \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss index e0ad84f62f..8b951e27e0 100644 --- a/src/skins/vector/css/themes/light.scss +++ b/src/skins/vector/css/themes/light.scss @@ -1,4 +1,2 @@ -$primary-fg-color: #454545; -$primary-bg-color: #ffffff; - -@import "../_components" \ No newline at end of file +@import "_base"; +@import "../_components"; \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 5da4c4ab1a..b9dbf1cd79 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -33,7 +33,7 @@ limitations under the License. -webkit-order: 1; order: 1; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; margin-right: 20px; -webkit-flex: 0 0 70px; @@ -45,7 +45,7 @@ limitations under the License. .mx_RightPanel_headerButtonGroup { margin-top: 6px; float: left; - background-color: #fff; + background-color: $primary-bg-color; margin-left: 0px; } @@ -73,7 +73,7 @@ limitations under the License. .mx_RightPanel_headerButton_badge { font-size: 11px; - color: #76cfa6; + color: $accent-color; font-weight: bold; padding-bottom: 2px; } @@ -97,7 +97,7 @@ limitations under the License. -webkit-order: 3; order: 3; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $primary-hairline-color; margin-right: 20px; -webkit-flex: 0 0 60px; @@ -107,7 +107,7 @@ limitations under the License. .mx_RightPanel_footer .mx_RightPanel_invite { line-height: 35px; font-size: 14px; - color: #4A4A4A; + color: $primary-fg-color; padding-top: 13px; padding-left: 5px; cursor: pointer; diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index 563b1772c9..e5df8741d1 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -20,7 +20,7 @@ limitations under the License. margin-left: auto; margin-right: auto; margin-bottom: 12px; - color: #4a4a4a; + color: $primary-fg-color; display: -webkit-box; display: -moz-box; @@ -78,7 +78,7 @@ limitations under the License. .mx_RoomDirectory_table { font-size: 14px; - color: #4a4a4a; + color: $primary-fg-color; width: 100%; text-align: left; table-layout: fixed; @@ -110,7 +110,7 @@ limitations under the License. padding-right: 5px; height: 15px; border-radius: 11px; - background-color: #eaf5f0; + background-color: $secondary-accent-color; text-transform: uppercase; font-weight: 600; font-size: 11px; diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index e6e81aefb1..0d56d6c378 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -29,7 +29,7 @@ limitations under the License. .mx_RoomSubList_label { position: relative; text-transform: uppercase; - color: #3d3b39; + color: $roomsublist-label-fg-color; font-weight: 600; font-size: 12px; width: 203px; /* padding + width = LHS Panel width */ @@ -39,8 +39,8 @@ limitations under the License. padding-top: 6px; padding-bottom: 6px; cursor: pointer; - background-color: #d3efe1; - border-top: solid 2px #eaf5f0; + background-color: $roomsublist-label-bg-color; + border-top: solid 2px $secondary-accent-color; } .mx_RoomSubList_label.mx_RoomSubList_fixed { @@ -63,7 +63,7 @@ limitations under the License. display: inline-block; font-size: 12px; font-weight: normal; - color: #76cfa6; + color: $accent-color; padding-left: 5px; text-transform: none; } @@ -80,14 +80,14 @@ limitations under the License. right: 8px; /*gutter */ top: 7px; border-radius: 8px; - color: #fff; + color: $accent-fg-color; font-weight: 600; font-size: 10px; text-align: center; padding-top: 1px; padding-left: 4px; padding-right: 4px; - background-color: #76cfa6; + background-color: $accent-color; } /* @@ -97,7 +97,7 @@ limitations under the License. */ .mx_RoomSubList_badgeHighlight { - background-color: #ff0064; + background-color: $warning-color; } /* This is the bottom of the speech bubble */ @@ -108,7 +108,7 @@ limitations under the License. width: 0; height: 0; margin-left: 5px; - border-top: 5px solid #ff0064; + border-top: 5px solid $warning-color; border-right: 7px solid transparent; } @@ -129,7 +129,7 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 6px solid #76cfa6; + border-top: 6px solid $accent-color; } .mx_RoomSubList_chevronUp { @@ -137,14 +137,14 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 6px solid #76cfa6; + border-bottom: 6px solid $accent-color; } .mx_RoomSubList_chevronRight { width: 0; height: 0; border-top: 5px solid transparent; - border-left: 6px solid #76cfa6; + border-left: 6px solid $accent-color; border-bottom: 5px solid transparent; } @@ -165,7 +165,7 @@ limitations under the License. .mx_RoomSubList_line { display: inline-block; width: 159px; - border-top: dotted 2px #76cfa6; + border-top: dotted 2px $accent-color; vertical-align: middle; } @@ -179,7 +179,7 @@ limitations under the License. font-size: 10px; font-weight: 600; text-align: left; - color: #76cfa6; + color: $accent-color; padding-left: 7px; padding-right: 7px; padding-left: 7px; @@ -198,20 +198,20 @@ limitations under the License. right: 8px; /*gutter */ top: -2px; border-radius: 8px; - border: solid 1px #76cfa6; - color: #fff; + 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: #fff; + background-color: $primary-bg-color; vertical-align: middle; } .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify { - background-color: #76cfa6; + background-color: $accent-color; border: 0; padding-top: 3px; padding-left: 4px; @@ -219,7 +219,7 @@ limitations under the License. } .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight { - background-color: #ff0064; + background-color: $warning-color; border: 0; padding-top: 3px; padding-left: 4px; diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss index 947fd480fe..0a2e7605df 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss +++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_RoomTagContextMenu_field:last-child { padding-bottom: 4px; - color: #ff0064; + color: $warning-color; } .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss index 8b4c445996..9147fdb7cb 100644 --- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss +++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss @@ -21,14 +21,14 @@ limitations under the License. .mx_NetworkDropdown_input { position: relative; border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; font-weight: 300; font-size: 13px; user-select: none; } .mx_NetworkDropdown_arrow { - border-color: #4a4a4a transparent transparent; + border-color: $primary-fg-color transparent transparent; border-style: solid; border-width: 5px 5px 0; display: block; @@ -67,7 +67,7 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f margin: 0; padding: 0px; border-radius: 3px; - border: 1px solid #76cfa6; + border: 1px solid $accent-color; background-color: white; } diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss index 03223f259e..d66d9c7dbd 100644 --- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss +++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss @@ -87,7 +87,7 @@ limitations under the License. padding-right: 30px; min-height: 100%; max-width: 240px; - color: #fff; + color: $lightbox-fg-color; } .mx_ImageView_cancel { @@ -114,10 +114,10 @@ limitations under the License. margin-top: 24px; margin-bottom: 6px; border-radius: 5px; - background-color: #454545; + background-color: $lightbox-bg-color; font-size: 14px; padding: 9px; - border: 1px solid #fff; + border: 1px solid $lightbox-border-color; } .mx_ImageView_size { @@ -125,7 +125,7 @@ limitations under the License. } .mx_ImageView_link { - color: #fff ! important; + color: $lightbox-fg-color ! important; text-decoration: none ! important; } diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index 717d75afe4..e8b5aebbb8 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_GuestWarningBar { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; display: -webkit-box; display: -moz-box; @@ -34,7 +34,7 @@ limitations under the License. } .mx_GuestWarningBar a { - color: #fff ! important; + color: $accent-fg-color ! important; text-decoration: underline ! important; cursor: pointer; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 4e214e113f..9bd70bb944 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_MatrixToolbar { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; display: -webkit-box; display: -moz-box; @@ -40,7 +40,7 @@ limitations under the License. .mx_MatrixToolbar_link { - color: #fff ! important; + color: $accent-fg-color ! important; text-decoration: underline ! important; cursor: pointer; } diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss index 003215aff2..2fe16ca949 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss @@ -22,8 +22,8 @@ limitations under the License. margin-bottom: 7px; padding-top: 5px; padding-bottom: 5px; - border: 1px dashed #76cfa6; - color: #454545; + border: 1px dashed $accent-color; + color: $primary-fg-color; background-color: rgba(255,255,255,0.5); border-radius: 4px; } @@ -39,7 +39,7 @@ limitations under the License. } .mx_RoomDropTarget_avatar { - background-color: #fff; + background-color: $primary-bg-color; border-radius: 24px; width: 24px; height: 24px; diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss index 192fa77b39..5469a9e6d3 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss @@ -21,16 +21,16 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-right: 8px solid rgba(187, 187, 187, 0.5); + border-right: 8px solid $menu-border-color; border-bottom: 8px solid transparent; } -.mx_RoomTooltip_chevron:after{ +.mx_RoomTooltip_chevron:after { content:''; width: 0; height: 0; border-top: 7px solid transparent; - border-right: 7px solid #fff; + border-right: 7px solid $primary-bg-color; border-bottom: 7px solid transparent; position:absolute; top: -7px; @@ -40,14 +40,14 @@ limitations under the License. .mx_RoomTooltip { display: none; position: fixed; - border: 1px solid rgba(187, 187, 187, 0.5); + border: 1px solid $menu-border-color; border-radius: 5px; - background-color: #fff; + background-color: $primary-bg-color; z-index: 2000; padding: 5px; pointer-events: none; line-height: 14px; font-size: 13px; - color: rgba(0, 0, 0, 0.7); + color: $primary-fg-color; } diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss index 7ec1a17ad5..5d1953220a 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss @@ -26,7 +26,7 @@ limitations under the License. .mx_SearchBar_input { display: inline block; border-radius: 3px 0px 0px 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; font-size: 15px; padding: 9px; padding-left: 11px; @@ -41,7 +41,7 @@ limitations under the License. width: 37px; height: 37px; border-radius: 0px 3px 3px 0px; - background-color: #76CFA6; + background-color: $accent-color; } @keyframes pulsate { @@ -61,8 +61,8 @@ limitations under the License. border-radius: 36px; font-weight: 400; font-size: 15px; - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; width: auto; margin: auto; margin-left: 7px; @@ -74,9 +74,9 @@ limitations under the License. } .mx_SearchBar_unselected { - background-color: #fff; - color: #76CFA6; - border: #76CFA6 1px solid; + background-color: $primary-bg-color; + color: $accent-color; + border: $accent-color 1px solid; } .mx_SearchBar_cancel { diff --git a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss index 7a93f3f7b2..4c88e44952 100644 --- a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss +++ b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss @@ -58,7 +58,7 @@ limitations under the License. .mx_UserNotifSettings_keywords { cursor: pointer; - color: #76cfa6; + color: $accent-color; } .mx_UserSettings_devicesTable td { diff --git a/src/vector/index.js b/src/vector/index.js index 96c6a971b6..47509887b5 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/themes/light.css'); +require('../../build/themes/dark.css'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); From 35b301338643dcabafb43653e6da17de9c9fdcd2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 31 Dec 2016 14:27:44 +0000 Subject: [PATCH 05/56] fix up a few more colours --- src/skins/vector/css/_common.scss | 7 ++++++- src/skins/vector/css/themes/_base.scss | 3 +++ src/skins/vector/css/themes/dark.scss | 3 +++ .../css/vector-web/views/directory/_NetworkDropdown.scss | 4 ++-- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index e81ea2fa6d..ed96b48c22 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -55,8 +55,13 @@ a:visited { color: $accent-color; } +input[type=text] { + background-color: $primary-bg-color; + color: $primary-fg-color; +} + input[type=text].error, input[type=password].error { - border: 1px solid red; + border: 1px solid $warning-color; } input[type=text]:focus, textarea:focus { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 0fb25a6a7d..b9fd2d12bc 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -7,6 +7,9 @@ $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; diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index e560240264..5449b90ed6 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -4,6 +4,9 @@ $primary-fg-color: #dddddd; $primary-bg-color: #2d2d2d; +// used for focusing form controls +$focus-bg-color: #101010; + // used for dialog box text $light-fg-color: #747474; diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss index 9147fdb7cb..84aa896a9d 100644 --- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss +++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss @@ -68,11 +68,11 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f padding: 0px; border-radius: 3px; border: 1px solid $accent-color; - background-color: white; + background-color: $primary-bg-color; } .mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover { - background-color: #ddd; + background-color: $focus-bg-color; } .mx_NetworkDropdown_menu_network { From 691fe611d6141f6c43f9e966ab135a721f248482 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Jan 2017 11:06:09 +0000 Subject: [PATCH 06/56] experimental postcss --- package.json | 14 ++- src/skins/vector/css/_components.scss | 145 +++++++++++++------------ src/skins/vector/css/rethemendex.sh | 2 +- src/skins/vector/css/themes/dark.scss | 76 +------------ src/skins/vector/css/themes/light.scss | 4 +- src/vector/index.js | 2 +- webpack.config.js | 4 +- 7 files changed, 94 insertions(+), 153 deletions(-) diff --git a/package.json b/package.json index c657aad641..8eb562d3c1 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "build:config": "cpx config.json webapp/", "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"", + "build:css": "mkdirp build && postcss -c postcss.config.json", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", @@ -44,7 +44,7 @@ "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"", + "start:skins:css": "mkdirp build && postcss -c postcss.config.json -w", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"", "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"", "clean": "rimraf build lib webapp electron/dist", @@ -80,6 +80,7 @@ "url": "^0.11.0" }, "devDependencies": { + "autoprefixer": "^6.6.0", "babel-cli": "^6.5.2", "babel-core": "^6.14.0", "babel-eslint": "^6.1.0", @@ -116,10 +117,17 @@ "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", + "postcss-cli": "^2.6.0", + "postcss-extend": "^1.0.5", + "postcss-import": "^9.0.0", + "postcss-mixins": "^5.4.1", + "postcss-nested": "^1.0.0", + "postcss-scss": "^0.4.0", + "postcss-simple-vars": "^3.0.0", + "postcss-strip-inline-comments": "^0.1.5", "react-addons-perf": "^15.4.0", "react-addons-test-utils": "^15.4.0", "rimraf": "^2.4.3", - "sass-loader": "^4.1.1", "source-map-loader": "^0.1.5", "webpack": "^1.12.14", "webpack-dev-server": "^1.16.2" diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 532e0a3657..884352366e 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -1,73 +1,74 @@ // autogenerated by rethemendex.sh -@import "_common"; -@import "matrix-react-sdk/structures/_ContextualMenu"; -@import "matrix-react-sdk/structures/_CreateRoom"; -@import "matrix-react-sdk/structures/_FilePanel"; -@import "matrix-react-sdk/structures/_MatrixChat"; -@import "matrix-react-sdk/structures/_NotificationPanel"; -@import "matrix-react-sdk/structures/_RoomStatusBar"; -@import "matrix-react-sdk/structures/_RoomView"; -@import "matrix-react-sdk/structures/_SearchBox"; -@import "matrix-react-sdk/structures/_UploadBar"; -@import "matrix-react-sdk/structures/_UserSettings"; -@import "matrix-react-sdk/structures/login/_Login"; -@import "matrix-react-sdk/views/avatars/_BaseAvatar"; -@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog"; -@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog"; -@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog"; -@import "matrix-react-sdk/views/elements/_AddressSelector"; -@import "matrix-react-sdk/views/elements/_AddressTile"; -@import "matrix-react-sdk/views/elements/_DirectorySearchBox"; -@import "matrix-react-sdk/views/elements/_MemberEventListSummary"; -@import "matrix-react-sdk/views/elements/_ProgressBar"; -@import "matrix-react-sdk/views/elements/_RichText"; -@import "matrix-react-sdk/views/login/_ServerConfig"; -@import "matrix-react-sdk/views/messages/_MImageBody"; -@import "matrix-react-sdk/views/messages/_MNoticeBody"; -@import "matrix-react-sdk/views/messages/_MTextBody"; -@import "matrix-react-sdk/views/messages/_TextualEvent"; -@import "matrix-react-sdk/views/messages/_UnknownBody"; -@import "matrix-react-sdk/views/rooms/_Autocomplete"; -@import "matrix-react-sdk/views/rooms/_EntityTile"; -@import "matrix-react-sdk/views/rooms/_EventTile"; -@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget"; -@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo"; -@import "matrix-react-sdk/views/rooms/_MemberInfo"; -@import "matrix-react-sdk/views/rooms/_MemberList"; -@import "matrix-react-sdk/views/rooms/_MessageComposer"; -@import "matrix-react-sdk/views/rooms/_PresenceLabel"; -@import "matrix-react-sdk/views/rooms/_RoomHeader"; -@import "matrix-react-sdk/views/rooms/_RoomList"; -@import "matrix-react-sdk/views/rooms/_RoomPreviewBar"; -@import "matrix-react-sdk/views/rooms/_RoomSettings"; -@import "matrix-react-sdk/views/rooms/_RoomTile"; -@import "matrix-react-sdk/views/rooms/_SearchableEntityList"; -@import "matrix-react-sdk/views/rooms/_TabCompleteBar"; -@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar"; -@import "matrix-react-sdk/views/settings/_DevicesPanel"; -@import "matrix-react-sdk/views/settings/_IntegrationsManager"; -@import "matrix-react-sdk/views/voip/_CallView"; -@import "matrix-react-sdk/views/voip/_IncomingCallbox"; -@import "matrix-react-sdk/views/voip/_VideoView"; -@import "vector-web/_fonts"; -@import "vector-web/structures/_CompatibilityPage"; -@import "vector-web/structures/_LeftPanel"; -@import "vector-web/structures/_RightPanel"; -@import "vector-web/structures/_RoomDirectory"; -@import "vector-web/structures/_RoomSubList"; -@import "vector-web/structures/_ViewSource"; -@import "vector-web/views/context_menus/_MessageContextMenu"; -@import "vector-web/views/context_menus/_NotificationStateContextMenu"; -@import "vector-web/views/context_menus/_RoomTagContextMenu"; -@import "vector-web/views/dialogs/_ChangelogDialog"; -@import "vector-web/views/directory/_NetworkDropdown"; -@import "vector-web/views/elements/_ImageView"; -@import "vector-web/views/elements/_Spinner"; -@import "vector-web/views/globals/_GuestWarningBar"; -@import "vector-web/views/globals/_MatrixToolbar"; -@import "vector-web/views/messages/_MessageTimestamp"; -@import "vector-web/views/messages/_SenderProfile"; -@import "vector-web/views/rooms/_RoomDropTarget"; -@import "vector-web/views/rooms/_RoomTooltip"; -@import "vector-web/views/rooms/_SearchBar"; -@import "vector-web/views/settings/_Notifications"; +@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/_MatrixChat.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/_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/dialogs/_ChatInviteDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.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/_MemberEventListSummary.scss"; +@import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; +@import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/login/_ServerConfig.scss"; +@import "./matrix-react-sdk/views/messages/_MImageBody.scss"; +@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; +@import "./matrix-react-sdk/views/messages/_MTextBody.scss"; +@import "./matrix-react-sdk/views/messages/_TextualEvent.scss"; +@import "./matrix-react-sdk/views/messages/_UnknownBody.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/_PresenceLabel.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/_TabCompleteBar.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 "./themes/_base.scss"; +@import "./vector-web/_fonts.scss"; +@import "./vector-web/structures/_CompatibilityPage.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/_NotificationStateContextMenu.scss"; +@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss"; +@import "./vector-web/views/dialogs/_ChangelogDialog.scss"; +@import "./vector-web/views/directory/_NetworkDropdown.scss"; +@import "./vector-web/views/elements/_ImageView.scss"; +@import "./vector-web/views/elements/_Spinner.scss"; +@import "./vector-web/views/globals/_GuestWarningBar.scss"; +@import "./vector-web/views/globals/_MatrixToolbar.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/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 29e3438208..915b235da0 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -4,5 +4,5 @@ echo "// autogenerated by rethemendex.sh" > _components.scss for i in `find . -iname _\*.scss | fgrep -v _components.scss`; do - echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss + echo "@import \"$i\";" >> _components.scss done diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 5449b90ed6..0c51486b57 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,72 +1,4 @@ -@import "_base"; - -// typical text (dark-on-white in light skin) -$primary-fg-color: #dddddd; -$primary-bg-color: #2d2d2d; - -// used for focusing form controls -$focus-bg-color: #101010; - -// used for dialog box text -$light-fg-color: #747474; - -// button UI (white-on-green in light skin) -$accent-fg-color: $primary-bg-color; -$accent-color: #76CFA6; - -// red warning colour -$warning-color: #ff0064; - -// left-panel style muted accent color -$secondary-accent-color: $primary-bg-color; - -// used by AddressSelector -$selected-color: #eaf5f0; - -// selected for hoverover & selected event tiles -$event-selected-color: #353535; - -// used for the hairline dividers in RoomView -$primary-hairline-color: #474747; - -// used for the border of input text fields -$input-border-color: #3a3a3a; - -// apart from login forms, which have stronger border -$strong-input-border-color: #656565; - -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #373737; - -$avatar-initial-color: #2d2d2d; - -// ******************** - -$roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); - -$roomsublist-label-fg-color: $primary-fg-color; -$roomsublist-label-bg-color: #454545; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event timestamp -$event-timestamp-color: #acacac; - -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; - -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; - -@import "../_components"; \ No newline at end of file +@import "_base.scss"; +@import "_dark.scss"; +@import "../_components.scss"; +// moofleasdadsasdadsa \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss index 8b951e27e0..ea0f93d5a3 100644 --- a/src/skins/vector/css/themes/light.scss +++ b/src/skins/vector/css/themes/light.scss @@ -1,2 +1,2 @@ -@import "_base"; -@import "../_components"; \ No newline at end of file +@import "_base.scss"; +@import "../_components.scss"; \ No newline at end of file diff --git a/src/vector/index.js b/src/vector/index.js index 47509887b5..64b8769812 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/themes/dark.css'); +require('../../build/dark.scss'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 1c408b7068..1f2a8a60b1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,8 +24,8 @@ module.exports = { { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, // css-raw-loader loads CSS but doesn't try to treat url()s as require()s - { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, - { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] }, + // we're assuming that postcss has already preprocessed SCSS by this point + { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack From c1d4a0dd2826b8ec7dad6fcbd946c2ef4cd985b6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Jan 2017 11:06:45 +0000 Subject: [PATCH 07/56] postcss experiment --- postcss.config.json | 18 +++++++ src/skins/vector/css/themes/_dark.scss | 69 ++++++++++++++++++++++++++ 2 files changed, 87 insertions(+) create mode 100644 postcss.config.json create mode 100644 src/skins/vector/css/themes/_dark.scss diff --git a/postcss.config.json b/postcss.config.json new file mode 100644 index 0000000000..be3585cf7e --- /dev/null +++ b/postcss.config.json @@ -0,0 +1,18 @@ +{ + "use": [ + "autoprefixer", + "postcss-import", + "postcss-simple-vars", + "postcss-extend", + "postcss-nested", + "postcss-mixins", + "postcss-strip-inline-comments" + ], + "parser": "postcss-scss", + "input": "src/skins/vector/css/themes/[^_]*.scss", + "dir": "build", + "local-plugins": true, + "autoprefixer": { + "browsers": "> 5%" + } +} \ No newline at end of file diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss new file mode 100644 index 0000000000..e2c33e3e7c --- /dev/null +++ b/src/skins/vector/css/themes/_dark.scss @@ -0,0 +1,69 @@ + +// typical text (dark-on-white in light skin) +$primary-fg-color: #dddddd; +$primary-bg-color: #2d2d2d; + +// used for focusing form controls +$focus-bg-color: #101010; + +// used for dialog box text +$light-fg-color: #747474; + +// button UI (white-on-green in light skin) +$accent-fg-color: $primary-bg-color; +$accent-color: #76CFA6; + +// red warning colour +$warning-color: #ff0064; + +// left-panel style muted accent color +$secondary-accent-color: $primary-bg-color; + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #353535; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #474747; + +// used for the border of input text fields +$input-border-color: #3a3a3a; + +// apart from login forms, which have stronger border +$strong-input-border-color: #656565; + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #373737; + +$avatar-initial-color: #2d2d2d; + +// ******************** + +$roomtile-name-color: rgba(186, 186, 186, 0.8); +$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); + +$roomsublist-label-fg-color: $primary-fg-color; +$roomsublist-label-bg-color: #454545; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event timestamp +$event-timestamp-color: #acacac; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; From 002339fb86ffcd128ba90a0508d85e22a94255fa Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 02:10:45 +0000 Subject: [PATCH 08/56] factor out some more colours --- src/skins/vector/css/_common.scss | 4 +-- .../structures/_UserSettings.scss | 6 ++--- .../structures/login/_Login.scss | 2 +- .../views/elements/_DirectorySearchBox.scss | 2 +- .../views/elements/_ProgressBar.scss | 4 +-- .../views/rooms/_MemberInfo.scss | 2 +- .../views/rooms/_MemberList.scss | 2 +- .../views/rooms/_RoomSettings.scss | 2 +- src/skins/vector/css/themes/_base.scss | 26 +++++++++++++++---- src/skins/vector/css/themes/_dark.scss | 20 +++++++++++++- .../vector-web/structures/_RoomDirectory.scss | 2 +- .../views/rooms/_RoomDropTarget.scss | 2 +- 12 files changed, 54 insertions(+), 20 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index ed96b48c22..9e2ac1f468 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -174,13 +174,13 @@ textarea { left: 0; width: 100%; height: 100%; - background-color: #e9e9e9; + background-color: $dialog-background-bg-color; opacity: 0.8; } .mx_Dialog_lightbox .mx_Dialog_background { opacity: 0.85; - background-color: #000; + background-color: $lightbox-background-bg-color; } .mx_Dialog_lightbox .mx_Dialog { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 6ba1002bf9..1379063dc9 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -58,7 +58,7 @@ limitations under the License. clear: both; margin-left: 63px; text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; margin-top: 26px; @@ -166,10 +166,10 @@ limitations under the License. { display: inline-block; border: 0px; - border-bottom: 1px solid rgba(151, 151, 151, 0.5); + border-bottom: 1px solid $input-underline-color; padding: 0px; width: 240px; - color: rgba(74, 74, 74, 0.9); + color: $input-fg-color; font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; font-size: 16px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 5f4164e894..75dc71806e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -147,7 +147,7 @@ limitations under the License. } .mx_Login_error { - color: #ff2020; + color: $warning-color; font-weight: bold; text-align: center; /* diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss index dd953ab955..66063733a6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss @@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { padding: 3px; padding-left: 10px; padding-right: 10px; - background-color: #efefef; + background-color: $plinth-bg-color; border-radius: 3px; background-image: url('img/icon-return.svg'); background-position: 8px 70%; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss index 7b5e0c7461..a3fee232d0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss @@ -16,10 +16,10 @@ limitations under the License. .mx_ProgressBar { height: 5px; - border: 1px solid black; + border: 1px solid $progressbar-color; } .mx_ProgressBar_fill { height: 100%; - background-color: #000; + background-color: $progressbar-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 3b4b653e55..970c2496b4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -61,7 +61,7 @@ limitations under the License. .mx_MemberInfo h3 { text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; margin-top: 16px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 3c7e3ec5e6..8a6f117240 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -96,7 +96,7 @@ limitations under the License. .mx_MemberList_invited h2 { text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; padding-left: 3px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 132c979232..d9de0e8a2d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -81,7 +81,7 @@ limitations under the License. .mx_RoomSettings h3 { text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; margin-top: 36px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index b9fd2d12bc..e623372afc 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -1,5 +1,4 @@ - // typical text (dark-on-white in light skin) $primary-fg-color: #454545; $primary-bg-color: #ffffff; @@ -20,6 +19,12 @@ $warning-color: #ff0064; // left-panel style muted accent color $secondary-accent-color: #eaf5f0; +// 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: #eaf5f0; @@ -35,18 +40,27 @@ $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; +$h3-color: #3d3b39; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + // ******************** $roomtile-name-color: rgba(69, 69, 69, 0.8); $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomsublist-label-fg-color: #3d3b39; +$roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #d3efe1; // ******************** @@ -64,8 +78,10 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; -// ******************** - +/*** ImageView ***/ $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; \ No newline at end of file +$lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; \ No newline at end of file diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index e2c33e3e7c..1d93c1a4d6 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -19,6 +19,12 @@ $warning-color: #ff0064; // left-panel style muted accent color $secondary-accent-color: $primary-bg-color; +// used by RoomDirectory permissions +$plinth-bg-color: #474747; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(45,45,45,0.5); + // used by AddressSelector $selected-color: #eaf5f0; @@ -34,18 +40,27 @@ $input-border-color: #3a3a3a; // apart from login forms, which have stronger border $strong-input-border-color: #656565; +// used for UserSettings EditableText +$input-underline-color: $primary-fg-color; +$input-fg-color: $primary-fg-color; + // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #373737; $avatar-initial-color: #2d2d2d; +$h3-color: $primary-fg-color; + +$dialog-background-bg-color: #000; +$lightbox-background-bg-color: #000; + // ******************** $roomtile-name-color: rgba(186, 186, 186, 0.8); $roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); -$roomsublist-label-fg-color: $primary-fg-color; +$roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; // ******************** @@ -67,3 +82,6 @@ $e2e-warning-color: #ba6363; $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; $lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index e5df8741d1..3dd885ba47 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -110,7 +110,7 @@ limitations under the License. padding-right: 5px; height: 15px; border-radius: 11px; - background-color: $secondary-accent-color; + background-color: $plinth-bg-color; text-transform: uppercase; font-weight: 600; font-size: 11px; diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss index 2fe16ca949..e91658e8a8 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss @@ -24,7 +24,7 @@ limitations under the License. padding-bottom: 5px; border: 1px dashed $accent-color; color: $primary-fg-color; - background-color: rgba(255,255,255,0.5); + background-color: $droptarget-bg-color; border-radius: 4px; } From 906d42688eb153a10e0e8f96701af1ebf4897ee0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:40:29 +0000 Subject: [PATCH 09/56] make autoprefixer work by reordering it --- postcss.config.json | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/postcss.config.json b/postcss.config.json index be3585cf7e..7ed32cdac1 100644 --- a/postcss.config.json +++ b/postcss.config.json @@ -1,7 +1,7 @@ { "use": [ - "autoprefixer", "postcss-import", + "autoprefixer", "postcss-simple-vars", "postcss-extend", "postcss-nested", @@ -11,8 +11,5 @@ "parser": "postcss-scss", "input": "src/skins/vector/css/themes/[^_]*.scss", "dir": "build", - "local-plugins": true, - "autoprefixer": { - "browsers": "> 5%" - } -} \ No newline at end of file + "local-plugins": true +} From dc1563d916900a1ad66af358edc26f02d25a1c8f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:55:29 +0000 Subject: [PATCH 10/56] strip out unneeded webkit prefixes now we're using autoprefixer --- src/skins/vector/css/_common.scss | 5 ---- .../structures/_FilePanel.scss | 3 -- .../structures/_MatrixChat.scss | 25 ---------------- .../structures/_NotificationPanel.scss | 3 -- .../structures/_RoomStatusBar.scss | 3 -- .../structures/_RoomView.scss | 29 ------------------- .../structures/_SearchBox.scss | 2 -- .../structures/_UserSettings.scss | 9 ------ .../structures/login/_Login.scss | 4 --- .../views/elements/_DirectorySearchBox.scss | 2 -- .../views/rooms/_LinkPreviewWidget.scss | 4 --- .../views/rooms/_MemberList.scss | 8 ----- .../views/rooms/_MessageComposer.scss | 1 - .../views/rooms/_RoomHeader.scss | 15 ---------- .../views/rooms/_RoomPreviewBar.scss | 7 ----- .../views/rooms/_SearchableEntityList.scss | 4 --- .../views/voip/_IncomingCallbox.scss | 2 -- .../css/vector-web/structures/_LeftPanel.scss | 9 ------ .../vector-web/structures/_RightPanel.scss | 12 -------- .../vector-web/structures/_RoomDirectory.scss | 9 ------ .../vector-web/views/elements/_ImageView.scss | 14 --------- .../vector-web/views/elements/_Spinner.scss | 4 --- .../views/globals/_GuestWarningBar.scss | 3 -- .../views/globals/_MatrixToolbar.scss | 4 --- .../vector-web/views/rooms/_SearchBar.scss | 3 -- 25 files changed, 184 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 9e2ac1f468..6a62385535 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,6 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; @@ -128,14 +127,10 @@ textarea { width: 100%; height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; - -webkit-justify-content: center; justify-content: center; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index 2f4a00ad70..6c769a3bdd 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -15,13 +15,10 @@ limitations under the License. */ .mx_FilePanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1 1 0; flex: 1 1 0; width: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index 5587a6093c..61eb017058 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -27,34 +27,27 @@ limitations under the License. } .mx_MatrixChat_wrapper { - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; width: 100%; height: 100%; } .mx_MatrixToolbar { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; height: 40px; } .mx_GuestWarningBar { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; height: 40px; @@ -68,52 +61,40 @@ limitations under the License. width: 100%; height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1; flex: 1; } .mx_MatrixChat .mx_LeftPanel { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; background-color: $secondary-accent-color; - -webkit-flex: 0 0 235px; flex: 0 0 235px; } .mx_MatrixChat .mx_LeftPanel.collapsed { - -webkit-flex: 0 0 60px; flex: 0 0 60px; } .mx_MatrixChat .mx_MatrixChat_middlePanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; padding-left: 20px; padding-right: 22px; background-color: $primary-bg-color; - -webkit-flex: 1; flex: 1; /* Experimental fix for https://github.com/vector-im/vector-web/issues/947 @@ -132,25 +113,19 @@ limitations under the License. * point, but instead we fudge it and make the middlePanel * flex itself. */ - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } .mx_MatrixChat .mx_RightPanel { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; - -webkit-flex: 0 0 235px; flex: 0 0 235px; } .mx_MatrixChat .mx_RightPanel.collapsed { - -webkit-flex: 0 0 122px; flex: 0 0 122px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index 06dd92f315..ed81849776 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -15,13 +15,10 @@ limitations under the License. */ .mx_NotificationPanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1 1 0; flex: 1 1 0; width: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index d0ac5a600c..5daac88fc4 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -123,18 +123,15 @@ limitations under the License. .mx_RoomStatusBar_tabCompleteWrapper { display: flex; - display: -webkit-flex; height: 26px; } .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { flex: 1 1 auto; - -webkit-flex: 1 1 auto; } .mx_RoomStatusBar_tabCompleteEol { flex: 0 0 auto; - -webkit-flex: 0 0 auto; color: $accent-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 182d690c5e..dc668236b8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -18,25 +18,19 @@ limitations under the License. word-wrap: break-word; position: relative; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; width: 100%; flex-direction: column; - -webkit-flex-direction: column; } .mx_RoomView .mx_RoomHeader { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 0 0 70px; flex: 0 0 70px; } @@ -53,8 +47,6 @@ limitations under the License. padding-right: 12px; margin-left: -12px; - -webkit-border-top-left-radius: 10px; - -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; @@ -77,10 +69,8 @@ limitations under the License. } .mx_RoomView_auxPanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; min-width: 0px; @@ -91,26 +81,20 @@ limitations under the License. overflow: auto; border-bottom: 1px solid $primary-hairline-color; - -webkit-flex: 0 0 auto; flex: 0 0 auto; } .mx_RoomView_topUnreadMessagesBar { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; } .mx_RoomView_messagePanel { - -webkit-box-ordinal-group: 4; -moz-box-ordinal-group: 4; -ms-flex-order: 4; - -webkit-order: 4; order: 4; - -webkit-flex: 1 1 0; flex: 1 1 0; width: 100%; @@ -124,22 +108,17 @@ limitations under the License. min-height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; justify-content: flex-end; - -webkit-justify-content: flex-end; } .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { justify-content: flex-start; - -webkit-justify-content: flex-start; } .mx_RoomView_MessageList { @@ -162,10 +141,8 @@ limitations under the License. } .mx_RoomView_invitePrompt { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; min-width: 0px; @@ -193,14 +170,11 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea { - -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; -ms-flex-order: 5; - -webkit-order: 5; order: 5; width: 100%; - -webkit-flex: 0 0 auto; flex: 0 0 auto; } @@ -257,14 +231,11 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView .mx_MessageComposer { - -webkit-box-ordinal-group: 6; -moz-box-ordinal-group: 6; -ms-flex-order: 6; - -webkit-order: 6; order: 6; width: 100%; - -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-right: 2px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 0b5362593b..bd335f6023 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -22,7 +22,6 @@ limitations under the License. padding-bottom: 22px; display: flex; - display: -webkit-flex; } .mx_SearchBox_searchButton { @@ -38,7 +37,6 @@ limitations under the License. .mx_SearchBox_search { flex: 1 1 auto; - -webkit-flex: 1 1 auto; width: 0px; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-size: 12px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 1379063dc9..2c62a4eceb 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -20,34 +20,25 @@ limitations under the License. margin-left: auto; margin-right: auto; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_UserSettings .mx_RoomHeader { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 0 0 70px; flex: 0 0 70px; } .mx_UserSettings_body { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1 1 0; flex: 1 1 0; margin-top: -20px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 75dc71806e..332f313f33 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -18,14 +18,10 @@ limitations under the License. width: 100%; height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; - -webkit-justify-content: center; justify-content: center; overflow: auto; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss index 66063733a6..8824c65901 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss @@ -22,14 +22,12 @@ limitations under the License. .mx_DirectorySearchBox_container { display: flex; - display: -webkit-flex; padding-left: 9px; padding-right: 9px; } .mx_DirectorySearchBox_input { flex-grow: 1; - -webkit-flex-grow: 1; border: 0; padding: 0; font-weight: 300; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss index 2e2d9f8046..0e91154164 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss @@ -18,14 +18,12 @@ limitations under the License. margin-top: 15px; margin-right: 15px; margin-bottom: 15px; - display: -webkit-flex; display: flex; border-left: 4px solid #ddd; color: #888; } .mx_LinkPreviewWidget_image { - -webkit-flex: 0 0 100px; flex: 0 0 100px; margin-left: 15px; text-align: center; @@ -34,7 +32,6 @@ limitations under the License. .mx_LinkPreviewWidget_caption { margin-left: 15px; - -webkit-flex: 1 1 auto; flex: 1 1 auto; } @@ -56,7 +53,6 @@ limitations under the License. .mx_LinkPreviewWidget_cancel { visibility: hidden; cursor: pointer; - -webkit-flex: 0 0 40px; flex: 0 0 40px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 8a6f117240..403de7f945 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -20,22 +20,17 @@ limitations under the License. margin-top: 12px; margin-right: 20px; - -webkit-flex: 1; flex: 1; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_MemberList .mx_Spinner { flex: 0; - -webkit-flex: 0; } .mx_MemberList_chevron { @@ -48,7 +43,6 @@ limitations under the License. overflow-y: auto; order: 1; - -webkit-flex: 1 1 0; flex: 1 1 0px; } @@ -80,7 +74,6 @@ limitations under the License. .mx_MemberList_joined { order: 2; flex: 1 0 0; - -webkit-flex: 1 0 0; overflow-y: auto; } @@ -89,7 +82,6 @@ limitations under the License. .mx_MemberList_invited { order: 3; flex: 0 0 100px; - -webkit-flex: 0 0 100px; overflow-y: auto; } */ diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index e5ffd22064..a4549c0f8e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -105,7 +105,6 @@ limitations under the License. border: 0px; resize: none; outline: none; - -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: $primary-fg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index a26f12ee69..73327ea6a0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -25,36 +25,28 @@ limitations under the License. margin: auto; height: 70px; - -webkit-align-items: center; align-items: center; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } .mx_RoomHeader_leftRow { margin-left: -2px; - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 1; flex: 1; } .mx_RoomHeader_spinner { height: 36px; - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; padding-left: 12px; @@ -71,16 +63,13 @@ limitations under the License. margin-top: -2px; text-align: center; - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; cursor: pointer; /* - -webkit-flex: 0 0 90px; flex: 0 0 90px; */ padding-left: 12px; @@ -88,10 +77,8 @@ limitations under the License. } .mx_RoomHeader_cancelButton { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; cursor: pointer; @@ -105,10 +92,8 @@ limitations under the License. background-color: $primary-bg-color; display: flex; align-items: center; - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 6b71f96d2e..0d030ad774 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -18,19 +18,14 @@ limitations under the License. text-align: center; height: 176px; - -webkit-align-items: center; align-items: center; flex-direction: column; - -webkit-flex-direction: column; justify-content: center; - -webkit-justify-content: center; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } @@ -56,9 +51,7 @@ limitations under the License. } .mx_RoomPreviewBar_warning { - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; padding: 8px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index 9a24868d14..b404da0206 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -16,10 +16,8 @@ limitations under the License. .mx_SearchableEntityList { display: flex; - display: -webkit-flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_SearchableEntityList_query { @@ -49,7 +47,6 @@ limitations under the License. .mx_SearchableEntityList_listWrapper { flex: 1; - -webkit-flex: 1; overflow-y: auto; } @@ -67,7 +64,6 @@ limitations under the License. .mx_SearchableEntityList_hrWrapper { width: 100%; flex: 0 0 auto; - -webkit-flex: 0 0 auto; } .mx_SearchableEntityList hr { diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss index 97a82a03e8..d45c4a5816 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss @@ -41,14 +41,12 @@ limitations under the License. .mx_IncomingCallBox_buttons { display: flex; - display: -webkit-flex; } .mx_IncomingCallBox_buttons_cell { vertical-align: middle; padding: 6px; flex: 1; - -webkit-flex: 1; } .mx_IncomingCallBox_buttons_decline, diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 4e3281716e..36a1e2988d 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -17,13 +17,10 @@ limitations under the License. .mx_LeftPanel { position: relative; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_LeftPanel_hideButton { @@ -39,13 +36,10 @@ limitations under the License. } .mx_LeftPanel .mx_RoomList_scrollbar { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 1 1 0; flex: 1 1 0; overflow-y: auto; @@ -57,16 +51,13 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; border-top: 1px solid rgba(118, 207, 166, 0.2); margin-left: 16px; /* gutter */ margin-right: 16px; /* gutter */ - -webkit-flex: 0 0 60px; flex: 0 0 60px; z-index: 1; } diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index b9dbf1cd79..000d36b31b 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -17,26 +17,20 @@ limitations under the License. .mx_RightPanel { position: relative; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_RightPanel_header { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; border-bottom: 1px solid $primary-hairline-color; margin-right: 20px; - -webkit-flex: 0 0 70px; flex: 0 0 70px; } @@ -81,26 +75,20 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel_blank { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; flex: 1 1 0; - -webkit-flex: 1 1 0; } .mx_RightPanel_footer { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; border-top: 1px solid $primary-hairline-color; margin-right: 20px; - -webkit-flex: 0 0 60px; flex: 0 0 60px; } diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index 3dd885ba47..c80a8d8fc5 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -22,33 +22,25 @@ limitations under the License. margin-bottom: 12px; color: $primary-fg-color; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_RoomDirectory_list { - -webkit-flex: 1; flex: 1; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_RoomDirectory_list .mx_RoomView_messageListWrapper { justify-content: flex-start; - -webkit-justify-content: flex-start; } .mx_RoomDirectory_listheader { @@ -72,7 +64,6 @@ limitations under the License. .mx_RoomDirectory_tableWrapper { overflow-y: auto; - -webkit-flex: 1 1 0; flex: 1 1 0; } diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss index d66d9c7dbd..d31a9d2785 100644 --- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss +++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss @@ -19,18 +19,14 @@ limitations under the License. */ .mx_ImageView { - display: -webkit-flex; display: flex; width: 100%; height: 100%; - -webkit-align-items: center; align-items: center; } .mx_ImageView_lhs { - -webkit-box-ordinal-group: 1; order: 1; - -webkit-flex: 1; flex: 1 1 10%; min-width: 60px; /* @@ -40,18 +36,13 @@ limitations under the License. } .mx_ImageView_content { - -webkit-box-ordinal-group: 2; order: 2; /* min-width hack needed for FF */ min-width: 0px; height: 90%; - -webkit-flex: 15; flex: 15 15 0; - display: -webkit-flex; display: flex; - -webkit-align-items: center; - -webkit-justify-content: center; align-items: center; justify-content: center; } @@ -78,11 +69,8 @@ limitations under the License. .mx_ImageView_label { text-align: left; display: flex; - display: -webkit-flex; justify-content: center; - -webkit-justify-content: center; flex-direction: column; - -webkit-flex-direction: column; padding-left: 30px; padding-right: 30px; min-height: 100%; @@ -141,9 +129,7 @@ limitations under the License. } .mx_ImageView_rhs { - -webkit-box-ordinal-group: 3; order: 3; - -webkit-flex: 1; flex: 1 1 10%; min-width: 300px; /* diff --git a/src/skins/vector/css/vector-web/views/elements/_Spinner.scss b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss index 3831cc4c1c..aea5737918 100644 --- a/src/skins/vector/css/vector-web/views/elements/_Spinner.scss +++ b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss @@ -15,16 +15,12 @@ limitations under the License. */ .mx_Spinner { - display: -webkit-flex; display: flex; - -webkit-align-items: center; - -webkit-justify-content: center; align-items: center; justify-content: center; width: 100%; height: 100%; flex: 1; - -webkit-flex: 1; } .mx_MatrixChat_middlePanel .mx_Spinner { diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index e8b5aebbb8..2141f3a8ad 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -18,12 +18,9 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 9bd70bb944..9e21bcb1f2 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -18,12 +18,9 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; } @@ -34,7 +31,6 @@ limitations under the License. } .mx_MatrixToolbar_content { - -webkit-flex: 1; flex: 1; } diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss index 5d1953220a..079ea16c68 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss @@ -18,9 +18,7 @@ limitations under the License. padding-top: 5px; padding-bottom: 5px; display: flex; - display: -webkit-flex; align-items: center; - -webkit-align-items: center; } .mx_SearchBar_input { @@ -32,7 +30,6 @@ limitations under the License. padding-left: 11px; width: auto; flex: 1 1 0; - -webkit-flex: 1 1 0; } .mx_SearchBar_searchButton { From c305b72b918c08661d0b068121011e4ab7f5ae8f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:58:02 +0000 Subject: [PATCH 11/56] strip out unneeded -moz- prefixes --- src/skins/vector/css/_common.scss | 2 -- .../css/matrix-react-sdk/structures/_FilePanel.scss | 1 - .../css/matrix-react-sdk/structures/_MatrixChat.scss | 9 --------- .../structures/_NotificationPanel.scss | 1 - .../css/matrix-react-sdk/structures/_RoomView.scss | 11 ----------- .../matrix-react-sdk/structures/_UserSettings.scss | 3 --- .../css/matrix-react-sdk/structures/login/_Login.scss | 1 - .../css/matrix-react-sdk/views/rooms/_MemberList.scss | 1 - .../views/rooms/_MessageComposer.scss | 1 - .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss | 6 ------ .../matrix-react-sdk/views/rooms/_RoomPreviewBar.scss | 1 - .../vector/css/vector-web/structures/_LeftPanel.scss | 3 --- .../vector/css/vector-web/structures/_RightPanel.scss | 4 ---- .../css/vector-web/structures/_RoomDirectory.scss | 2 -- .../vector-web/views/globals/_GuestWarningBar.scss | 1 - .../css/vector-web/views/globals/_MatrixToolbar.scss | 1 - 16 files changed, 48 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 6a62385535..5e0b902a85 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,6 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; } @@ -127,7 +126,6 @@ textarea { width: 100%; height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index 6c769a3bdd..2fb1131d09 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_FilePanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index 61eb017058..72f1feffe9 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -27,7 +27,6 @@ limitations under the License. } .mx_MatrixChat_wrapper { - display: -moz-box; display: -ms-flexbox; display: flex; @@ -38,7 +37,6 @@ limitations under the License. } .mx_MatrixToolbar { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -46,7 +44,6 @@ limitations under the License. } .mx_GuestWarningBar { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -61,11 +58,9 @@ limitations under the License. width: 100%; height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -73,7 +68,6 @@ limitations under the License. } .mx_MatrixChat .mx_LeftPanel { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -87,7 +81,6 @@ limitations under the License. } .mx_MatrixChat .mx_MatrixChat_middlePanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -113,13 +106,11 @@ limitations under the License. * point, but instead we fudge it and make the middlePanel * flex itself. */ - display: -moz-box; display: -ms-flexbox; display: flex; } .mx_MatrixChat .mx_RightPanel { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index ed81849776..b3f724d83d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_NotificationPanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index dc668236b8..6a5db95a59 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -18,7 +18,6 @@ limitations under the License. word-wrap: break-word; position: relative; - display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; @@ -27,7 +26,6 @@ limitations under the License. } .mx_RoomView .mx_RoomHeader { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -47,8 +45,6 @@ limitations under the License. padding-right: 12px; margin-left: -12px; - -moz-border-radius-topleft: 10px; - -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; @@ -69,7 +65,6 @@ limitations under the License. } .mx_RoomView_auxPanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -85,13 +80,11 @@ limitations under the License. } .mx_RoomView_topUnreadMessagesBar { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; } .mx_RoomView_messagePanel { - -moz-box-ordinal-group: 4; -ms-flex-order: 4; order: 4; @@ -108,7 +101,6 @@ limitations under the License. min-height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; @@ -141,7 +133,6 @@ limitations under the License. } .mx_RoomView_invitePrompt { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -170,7 +161,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea { - -moz-box-ordinal-group: 5; -ms-flex-order: 5; order: 5; @@ -231,7 +221,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView .mx_MessageComposer { - -moz-box-ordinal-group: 6; -ms-flex-order: 6; order: 6; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 2c62a4eceb..d190e32c3a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -20,14 +20,12 @@ limitations under the License. margin-left: auto; margin-right: auto; - display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; } .mx_UserSettings .mx_RoomHeader { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -35,7 +33,6 @@ limitations under the License. } .mx_UserSettings_body { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 332f313f33..90dd2c1e2d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -18,7 +18,6 @@ limitations under the License. width: 100%; height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 403de7f945..9c1daa95b4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -22,7 +22,6 @@ limitations under the License. flex: 1; - display: -moz-box; display: -ms-flexbox; display: flex; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index a4549c0f8e..5ecb344106 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -105,7 +105,6 @@ limitations under the License. border: 0px; resize: none; outline: none; - -moz-box-shadow: none; box-shadow: none; color: $primary-fg-color; background-color: $primary-bg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 73327ea6a0..297a3f1659 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -27,7 +27,6 @@ limitations under the License. align-items: center; - display: -moz-box; display: -ms-flexbox; display: flex; } @@ -35,7 +34,6 @@ limitations under the License. .mx_RoomHeader_leftRow { margin-left: -2px; - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -45,7 +43,6 @@ limitations under the License. .mx_RoomHeader_spinner { height: 36px; - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -63,7 +60,6 @@ limitations under the License. margin-top: -2px; text-align: center; - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -77,7 +73,6 @@ limitations under the License. } .mx_RoomHeader_cancelButton { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -92,7 +87,6 @@ limitations under the License. background-color: $primary-bg-color; display: flex; align-items: center; - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 0d030ad774..2114e01a8e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -24,7 +24,6 @@ limitations under the License. justify-content: center; - display: -moz-box; display: -ms-flexbox; display: flex; } diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 36a1e2988d..030c53677f 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_LeftPanel { position: relative; - display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; @@ -36,7 +35,6 @@ limitations under the License. } .mx_LeftPanel .mx_RoomList_scrollbar { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -51,7 +49,6 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 000d36b31b..a76e5020bc 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -17,14 +17,12 @@ limitations under the License. .mx_RightPanel { position: relative; - display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; } .mx_RightPanel_header { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -75,14 +73,12 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel_blank { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; flex: 1 1 0; } .mx_RightPanel_footer { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index c80a8d8fc5..e2b65e68ec 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -22,7 +22,6 @@ limitations under the License. margin-bottom: 12px; color: $primary-fg-color; - display: -moz-box; display: -ms-flexbox; display: flex; @@ -32,7 +31,6 @@ limitations under the License. .mx_RoomDirectory_list { flex: 1; - display: -moz-box; display: -ms-flexbox; display: flex; diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index 2141f3a8ad..d9d3cb193c 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 9e21bcb1f2..a425d8cde2 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; From d74dfc9ee7c0affc4bc3ca7e7bf8c6befc7a46e6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:58:37 +0000 Subject: [PATCH 12/56] strip out unneeded -ms- prefixes --- src/skins/vector/css/_common.scss | 2 -- .../css/matrix-react-sdk/structures/_FilePanel.scss | 1 - .../css/matrix-react-sdk/structures/_MatrixChat.scss | 9 --------- .../matrix-react-sdk/structures/_NotificationPanel.scss | 1 - .../css/matrix-react-sdk/structures/_RoomView.scss | 9 --------- .../css/matrix-react-sdk/structures/_UserSettings.scss | 3 --- .../css/matrix-react-sdk/structures/login/_Login.scss | 1 - .../css/matrix-react-sdk/views/rooms/_MemberList.scss | 1 - .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss | 6 ------ .../matrix-react-sdk/views/rooms/_RoomPreviewBar.scss | 1 - .../vector/css/vector-web/structures/_LeftPanel.scss | 3 --- .../vector/css/vector-web/structures/_RightPanel.scss | 4 ---- .../vector/css/vector-web/structures/_RoomDirectory.scss | 2 -- .../css/vector-web/views/globals/_GuestWarningBar.scss | 1 - .../css/vector-web/views/globals/_MatrixToolbar.scss | 1 - 15 files changed, 45 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 5e0b902a85..a2b7399e01 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,6 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; } @@ -126,7 +125,6 @@ textarea { width: 100%; height: 100%; - display: -ms-flexbox; display: flex; align-items: center; justify-content: center; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index 2fb1131d09..872085b66b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_FilePanel { - -ms-flex-order: 2; order: 2; flex: 1 1 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index 72f1feffe9..05a39ea727 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -27,7 +27,6 @@ limitations under the License. } .mx_MatrixChat_wrapper { - display: -ms-flexbox; display: flex; flex-direction: column; @@ -37,14 +36,12 @@ limitations under the License. } .mx_MatrixToolbar { - -ms-flex-order: 1; order: 1; height: 40px; } .mx_GuestWarningBar { - -ms-flex-order: 1; order: 1; height: 40px; @@ -58,17 +55,14 @@ limitations under the License. width: 100%; height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-order: 2; order: 2; flex: 1; } .mx_MatrixChat .mx_LeftPanel { - -ms-flex-order: 1; order: 1; background-color: $secondary-accent-color; @@ -81,7 +75,6 @@ limitations under the License. } .mx_MatrixChat .mx_MatrixChat_middlePanel { - -ms-flex-order: 2; order: 2; padding-left: 20px; @@ -106,12 +99,10 @@ limitations under the License. * point, but instead we fudge it and make the middlePanel * flex itself. */ - display: -ms-flexbox; display: flex; } .mx_MatrixChat .mx_RightPanel { - -ms-flex-order: 3; order: 3; flex: 0 0 235px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index b3f724d83d..ef75678dce 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_NotificationPanel { - -ms-flex-order: 2; order: 2; flex: 1 1 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 6a5db95a59..919b9f9b6b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -18,7 +18,6 @@ limitations under the License. word-wrap: break-word; position: relative; - display: -ms-flexbox; display: flex; width: 100%; @@ -26,7 +25,6 @@ limitations under the License. } .mx_RoomView .mx_RoomHeader { - -ms-flex-order: 1; order: 1; flex: 0 0 70px; @@ -65,7 +63,6 @@ limitations under the License. } .mx_RoomView_auxPanel { - -ms-flex-order: 2; order: 2; min-width: 0px; @@ -80,12 +77,10 @@ limitations under the License. } .mx_RoomView_topUnreadMessagesBar { - -ms-flex-order: 3; order: 3; } .mx_RoomView_messagePanel { - -ms-flex-order: 4; order: 4; flex: 1 1 0; @@ -101,7 +96,6 @@ limitations under the License. min-height: 100%; - display: -ms-flexbox; display: flex; flex-direction: column; @@ -133,7 +127,6 @@ limitations under the License. } .mx_RoomView_invitePrompt { - -ms-flex-order: 2; order: 2; min-width: 0px; @@ -161,7 +154,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea { - -ms-flex-order: 5; order: 5; width: 100%; @@ -221,7 +213,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView .mx_MessageComposer { - -ms-flex-order: 6; order: 6; width: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index d190e32c3a..5c1b4c5c7e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -20,20 +20,17 @@ limitations under the License. margin-left: auto; margin-right: auto; - display: -ms-flexbox; display: flex; flex-direction: column; } .mx_UserSettings .mx_RoomHeader { - -ms-flex-order: 1; order: 1; flex: 0 0 70px; } .mx_UserSettings_body { - -ms-flex-order: 2; order: 2; flex: 1 1 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 90dd2c1e2d..30231b43da 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -18,7 +18,6 @@ limitations under the License. width: 100%; height: 100%; - display: -ms-flexbox; display: flex; align-items: center; justify-content: center; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 9c1daa95b4..d87bced43e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -22,7 +22,6 @@ limitations under the License. flex: 1; - display: -ms-flexbox; display: flex; flex-direction: column; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 297a3f1659..688b8a84eb 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -27,14 +27,12 @@ limitations under the License. align-items: center; - display: -ms-flexbox; display: flex; } .mx_RoomHeader_leftRow { margin-left: -2px; - -ms-flex-order: 1; order: 1; flex: 1; @@ -43,7 +41,6 @@ limitations under the License. .mx_RoomHeader_spinner { height: 36px; - -ms-flex-order: 2; order: 2; padding-left: 12px; @@ -60,7 +57,6 @@ limitations under the License. margin-top: -2px; text-align: center; - -ms-flex-order: 2; order: 2; cursor: pointer; @@ -73,7 +69,6 @@ limitations under the License. } .mx_RoomHeader_cancelButton { - -ms-flex-order: 2; order: 2; cursor: pointer; @@ -87,7 +82,6 @@ limitations under the License. background-color: $primary-bg-color; display: flex; align-items: center; - -ms-flex-order: 3; order: 3; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 2114e01a8e..3814f9c0ec 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -24,7 +24,6 @@ limitations under the License. justify-content: center; - display: -ms-flexbox; display: flex; } diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 030c53677f..1ce10e51f6 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_LeftPanel { position: relative; - display: -ms-flexbox; display: flex; flex-direction: column; } @@ -35,7 +34,6 @@ limitations under the License. } .mx_LeftPanel .mx_RoomList_scrollbar { - -ms-flex-order: 1; order: 1; flex: 1 1 0; @@ -49,7 +47,6 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu { - -ms-flex-order: 3; order: 3; border-top: 1px solid rgba(118, 207, 166, 0.2); diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index a76e5020bc..96e8698bdf 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -17,13 +17,11 @@ limitations under the License. .mx_RightPanel { position: relative; - display: -ms-flexbox; display: flex; flex-direction: column; } .mx_RightPanel_header { - -ms-flex-order: 1; order: 1; border-bottom: 1px solid $primary-hairline-color; @@ -73,13 +71,11 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel_blank { - -ms-flex-order: 2; order: 2; flex: 1 1 0; } .mx_RightPanel_footer { - -ms-flex-order: 3; order: 3; border-top: 1px solid $primary-hairline-color; diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index e2b65e68ec..f0d4c86023 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -22,7 +22,6 @@ limitations under the License. margin-bottom: 12px; color: $primary-fg-color; - display: -ms-flexbox; display: flex; flex-direction: column; @@ -31,7 +30,6 @@ limitations under the License. .mx_RoomDirectory_list { flex: 1; - display: -ms-flexbox; display: flex; flex-direction: column; diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index d9d3cb193c..f5bdbaf9ca 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -ms-flexbox; display: flex; align-items: center; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index a425d8cde2..5a0b23aeb1 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -ms-flexbox; display: flex; align-items: center; } From cab5bf8849395dab0afad1439ca3ae2a1a22b25b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 19:00:44 +0000 Subject: [PATCH 13/56] fix a lone lost opera vendor prefix --- src/skins/vector/css/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index a2b7399e01..09f3fcfb56 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,7 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; } /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48. From 87fd136e218000c64ed9b7369ce176dc18d1fdc0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 23:13:47 +0000 Subject: [PATCH 14/56] factor out remaining # colours --- .../views/rooms/_EntityTile.scss | 4 ++-- .../views/rooms/_LinkPreviewWidget.scss | 4 ++-- .../views/rooms/_MemberInfo.scss | 1 - .../views/rooms/_MessageComposer.scss | 10 +++++----- .../views/rooms/_RoomHeader.scss | 17 +++-------------- .../views/rooms/_RoomPreviewBar.scss | 6 +----- .../views/rooms/_RoomSettings.scss | 2 +- .../views/rooms/_SearchableEntityList.scss | 4 ++-- .../views/voip/_IncomingCallbox.scss | 4 ++-- src/skins/vector/css/themes/_base.scss | 13 +++++++++++++ src/skins/vector/css/themes/_dark.scss | 13 +++++++++++++ .../vector-web/structures/_RoomDirectory.scss | 4 ++-- .../context_menus/_RoomTagContextMenu.scss | 3 +-- .../vector-web/views/elements/_ImageView.scss | 13 ++++--------- 14 files changed, 51 insertions(+), 47 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss index 2511f07d4d..3f360e79a0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss @@ -77,12 +77,12 @@ limitations under the License. .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; - font-color: $primary-fg-color; + color: $primary-fg-color; } .mx_EntityTile_invitePlaceholder .mx_EntityTile_name { font-style: italic; - font-color: $primary-fg-color; + color: $primary-fg-color; } .mx_EntityTile_unavailable .mx_EntityTile_avatar, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss index 0e91154164..33f283e0d3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss @@ -19,8 +19,8 @@ limitations under the License. margin-right: 15px; margin-bottom: 15px; display: flex; - border-left: 4px solid #ddd; - color: #888; + border-left: 4px solid $preview-widget-bar-color; + color: $preview-widget-fg-color; } .mx_LinkPreviewWidget_image { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 970c2496b4..d6fb5a19db 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -69,7 +69,6 @@ limitations under the License. } .mx_MemberInfo_profileField { - font-color: #999999; font-size: 13px; position: relative; background-color: $primary-bg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 5ecb344106..525cc1f654 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -57,7 +57,7 @@ limitations under the License. height: 60px; text-align: center; font-style: italic; - color: #888; + color: $greyed-fg-color; } .mx_MessageComposer_input_wrapper { @@ -90,10 +90,10 @@ limitations under the License. } .mx_MessageComposer_input blockquote { - color: rgb(119, 119, 119); + color: $blockquote-fg-color; margin: 0 0 16px; padding: 0 15px; - border-left: 4px solid rgb(221, 221, 221); + border-left: 4px solid $blockquote-bar-color; } .mx_MessageComposer_input textarea { @@ -151,7 +151,7 @@ limitations under the License. .mx_MessageComposer_formatbar_wrapper { width: 100%; - background-color: #f7f7f7; + background-color: $menu-bg-color; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); } @@ -168,7 +168,7 @@ limitations under the License. flex-direction: row; align-items: center; font-size: 10px; - color: #888; + color: $greyed-fg-color; } .mx_MessageComposer_formatbar * { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 688b8a84eb..4affc99490 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -16,7 +16,6 @@ limitations under the License. /* add 20px to the height of the header when editing */ .mx_RoomHeader_editing { - -webit-flex: 0 0 93px ! important; flex: 0 0 93px ! important; } @@ -24,25 +23,19 @@ limitations under the License. max-width: 960px; margin: auto; height: 70px; - align-items: center; - display: flex; } .mx_RoomHeader_leftRow { margin-left: -2px; - order: 1; - flex: 1; } .mx_RoomHeader_spinner { height: 36px; - order: 2; - padding-left: 12px; padding-right: 12px; } @@ -56,9 +49,7 @@ limitations under the License. line-height: 34px; margin-top: -2px; text-align: center; - order: 2; - cursor: pointer; /* @@ -70,9 +61,7 @@ limitations under the License. .mx_RoomHeader_cancelButton { order: 2; - cursor: pointer; - padding-left: 12px; padding-right: 12px; } @@ -126,7 +115,7 @@ limitations under the License. } .mx_RoomHeader_settingsHint { - color: #a2a2a2 ! important; + color: $settings-grey-fg-color ! important; } .mx_RoomHeader_searchStatus { @@ -151,7 +140,7 @@ limitations under the License. } .mx_RoomHeader_placeholder { - color: #a2a2a2 ! important; + color: $settings-grey-fg-color ! important; } .mx_RoomHeader_editable { @@ -170,7 +159,7 @@ limitations under the License. vertical-align: bottom; float: left; max-height: 42px; - color: #A2A2A2; + color: $settings-grey-fg-color; font-weight: 300; font-size: 13px; margin-left: 19px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 3814f9c0ec..34ff3a8670 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -17,13 +17,9 @@ limitations under the License. .mx_RoomPreviewBar { text-align: center; height: 176px; - align-items: center; - flex-direction: column; - justify-content: center; - display: flex; } @@ -40,7 +36,7 @@ limitations under the License. .mx_RoomPreviewBar_preview_text { margin-top: 25px; - color: #a4a4a4; + color: $settings-grey-fg-color; } .mx_RoomPreviewBar_join_text a { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index d9de0e8a2d..ef115f6e9e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -205,7 +205,7 @@ limitations under the License. } .mx_RoomSettings_aliasPlaceholder { - color: #a2a2a2; + color: $settings-grey-fg-color; } .mx_RoomSettings_buttons { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index b404da0206..6116dd92ca 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -69,8 +69,8 @@ limitations under the License. .mx_SearchableEntityList hr { height: 1px; border: 0px; - color: #e1dddd; - background-color: #e1dddd; + color: $primary-fg-color; + background-color: $primary-fg-color; margin-right: 15px; margin-top: 11px; margin-bottom: 11px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss index d45c4a5816..64eac25d01 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss @@ -61,9 +61,9 @@ limitations under the License. } .mx_IncomingCallBox_buttons_decline { - background-color: #f48080; + background-color: $voip-decline-color; } .mx_IncomingCallBox_buttons_accept { - background-color: #80f480; + background-color: $voip-accept-color; } diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index e623372afc..4f47df64e5 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -55,6 +55,19 @@ $h3-color: #3d3b39; $dialog-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; +$greyed-fg-color: #888; + +$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; + // ******************** $roomtile-name-color: rgba(69, 69, 69, 0.8); diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 1d93c1a4d6..28b80a2034 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -55,6 +55,19 @@ $h3-color: $primary-fg-color; $dialog-background-bg-color: #000; $lightbox-background-bg-color: #000; +$greyed-fg-color: #888; + +$preview-widget-bar-color: $menu-bg-color; +$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; + // ******************** $roomtile-name-color: rgba(186, 186, 186, 0.8); diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index f0d4c86023..8c8ceeaf20 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -101,7 +101,7 @@ limitations under the License. text-transform: uppercase; font-weight: 600; font-size: 11px; - color: #61c295; + color: $accent-fg-color; } .mx_RoomDirectory_topic { @@ -110,7 +110,7 @@ limitations under the License. .mx_RoomDirectory_alias { font-size: 12px; - color: #b3b3b3; + color: $settings-grey-fg-color; } .mx_RoomDirectory_roomMemberCount { diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss index 0a2e7605df..16a3ab79b1 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss +++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss @@ -70,8 +70,7 @@ limitations under the License. border-right-style: none; border-top-style: solid; border-top-width: 1px; - border-color: #bbbbbb; - opacity: 0.4; + border-color: $menu-border-color; } .mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss index d31a9d2785..66c26e129f 100644 --- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss +++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss @@ -29,10 +29,8 @@ limitations under the License. order: 1; flex: 1 1 10%; min-width: 60px; - /* - background-color: #080; - height: 20px; - */ + // background-color: #080; + // height: 20px; } .mx_ImageView_content { @@ -41,7 +39,6 @@ limitations under the License. min-width: 0px; height: 90%; flex: 15 15 0; - display: flex; align-items: center; justify-content: center; @@ -132,8 +129,6 @@ limitations under the License. order: 3; flex: 1 1 10%; min-width: 300px; - /* - background-color: #800; - height: 20px; - */ + // background-color: #800; + // height: 20px; } From 4f8d3b0e2b02e3c41344e86abd57aff555d7c1e0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 02:00:34 +0000 Subject: [PATCH 15/56] more factoring --- src/skins/vector/css/_common.scss | 4 ++-- .../vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +- src/skins/vector/css/themes/_base.scss | 2 ++ src/skins/vector/css/themes/_dark.scss | 2 ++ src/skins/vector/css/vector-web/structures/_RightPanel.scss | 3 ++- .../vector/css/vector-web/structures/_RoomDirectory.scss | 2 +- 6 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 09f3fcfb56..01ba81d83e 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -266,12 +266,12 @@ textarea { ::-moz-selection { background-color: $accent-color; - color: white; + color: $selection-fg-color; } ::selection { background-color: $accent-color; - color: white; + color: $selection-fg-color; } /** green button with rounded corners */ diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 919b9f9b6b..d1aeddec34 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -46,7 +46,7 @@ limitations under the License. border-top-left-radius: 10px; border-top-right-radius: 10px; - background-color: rgba(255, 255, 255, 0.9); + background-color: $droptarget-bg-color; border: 2px #e1dddd solid; border-bottom: none; position: absolute; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 4f47df64e5..6488794d6c 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -13,6 +13,8 @@ $focus-bg-color: #dddddd; $accent-fg-color: #ffffff; $accent-color: #76CFA6; +$selection-fg-color: $primary-bg-color; + // red warning colour $warning-color: #ff0064; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 28b80a2034..62e89a7bfb 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -13,6 +13,8 @@ $light-fg-color: #747474; $accent-fg-color: $primary-bg-color; $accent-color: #76CFA6; +$selection-fg-color: $primary-bg-color; + // red warning colour $warning-color: #ff0064; diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 96e8698bdf..91034e633d 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -58,7 +58,8 @@ limitations under the License. width: 25px; height: 5px; border-radius: 5px; - background-color: rgba(118, 207, 166, 0.2); + background-color: $accent-color; + opacity: 0.2; } .mx_RightPanel_headerButton_badge { diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index 8c8ceeaf20..6e508ec78f 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -101,7 +101,7 @@ limitations under the License. text-transform: uppercase; font-weight: 600; font-size: 11px; - color: $accent-fg-color; + color: $accent-color; } .mx_RoomDirectory_topic { From 3bdb330f5bb6682764acf781cc2b25aeb834e03d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 09:57:01 +0000 Subject: [PATCH 16/56] cheeky hack to get the ctxt menu colors right --- src/skins/vector/img/icon_context_message.svg | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/img/icon_context_message.svg b/src/skins/vector/img/icon_context_message.svg index f2ceccfa78..c3d39b1e4b 100644 --- a/src/skins/vector/img/icon_context_message.svg +++ b/src/skins/vector/img/icon_context_message.svg @@ -4,11 +4,18 @@ ED5D3E59-2561-4AC1-9B43-82FBC51767FC Created with sketchtool. + + + + - - - + + + From 4a1b04e57be363f3c45f356c1862cf5853769e10 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 11:58:30 +0000 Subject: [PATCH 17/56] Add another layer of directory to webpack chunks --- .../views/elements/DirectorySearchBox.css | 4 ++-- .../matrix-react-sdk/views/rooms/RoomTile.css | 2 +- src/skins/vector/css/vector-web/fonts.css | 16 ++++++++-------- .../css/vector-web/views/elements/ImageView.css | 2 +- webpack.config.js | 15 ++++++++++++--- 5 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css index 5686ecd0aa..c81974ebb4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -46,7 +46,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { padding-right: 10px; background-color: #efefef; border-radius: 3px; - background-image: url('../img/icon-return.svg'); + background-image: url('../../img/icon-return.svg'); background-position: 8px 70%; background-repeat: no-repeat; text-indent: 18px; @@ -63,7 +63,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { .mx_DirectorySearchBox_clear { display: inline-block; vertical-align: middle; - background: url('../img/icon_context_delete.svg'); + background: url('../../img/icon_context_delete.svg'); background-position: 0 50%; background-repeat: no-repeat; width: 15px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 2411d61336..b752d105d5 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -65,7 +65,7 @@ limitations under the License. position: absolute; content: ""; border-radius: 40px; - background-image: url("../img/icons_ellipsis.svg"); + background-image: url("../../img/icons_ellipsis.svg"); background-size: 25px; width: 24px; height: 24px; diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/fonts.css index a57d9952bf..52ac95b569 100644 --- a/src/skins/vector/css/vector-web/fonts.css +++ b/src/skins/vector/css/vector-web/fonts.css @@ -7,42 +7,42 @@ */ @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); + 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'); + 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'); + 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'); + 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'); + 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'); + src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } @@ -54,14 +54,14 @@ @font-face { font-family: 'Fira Mono'; - src: url('../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + 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'); + src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css index 0942b59368..73aaaa86b2 100644 --- a/src/skins/vector/css/vector-web/views/elements/ImageView.css +++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css @@ -62,7 +62,7 @@ limitations under the License. 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'); */ + /* background-image: url('../../img/trans.png'); */ pointer-events: all; } diff --git a/webpack.config.js b/webpack.config.js index 9c0c6bbb9b..2a38d1392d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,8 +40,17 @@ module.exports = { }, output: { path: path.join(__dirname, "webapp"), - filename: "[hash]/[name].js", - chunkFilename: "[hash]/[name].js", + + // the generated js (and CSS, from the ExtractTextPlugin) are put in a + // unique subdirectory for the build. There will only be one such + // 'bundle' directory in the generated tarball; however, hosting + // servers can collect 'bundles' from multiple versions into one + // directory and symlink it into place - this allows users who loaded + // an older version of the application to continue to access webpack + // chunks even after the app is redeployed. + // + filename: "bundles/[hash]/[name].js", + chunkFilename: "bundles/[hash]/[name].js", devtoolModuleFilenameTemplate: function(info) { // Reading input source maps gives only relative paths here for // everything. Until I figure out how to fix this, this is a @@ -80,7 +89,7 @@ module.exports = { }), new ExtractTextPlugin( - "[hash]/[name].css", + "bundles/[hash]/[name].css", { allChunks: true } From 3b109f761283d1aac5f4ff26462bd4f77ff83155 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 Jan 2017 13:16:08 +0000 Subject: [PATCH 18/56] Include current version in update check explicitly Hopefully fix https://github.com/vector-im/riot-web/issues/2847 --- electron/src/electron-main.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 675640a520..3f7c0f07f4 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -112,7 +112,15 @@ function startAutoUpdate(update_base_url) { // 204 No Content. On windows it takes a base path and looks for // files under that path. if (process.platform == 'darwin') { - electron.autoUpdater.setFeedURL(update_base_url + 'macos/'); + // include the current version in the URL we hit. Electron doesn't add + // it anywhere (apart from the User-Agent) so it's up to us. We could + // (and previously did) just use the User-Agent, but this doesn't + // rely on NSURLConnection setting the User-Agent to what we expect, + // and also acts as a convenient cache-buster between versions. + electron.autoUpdater.setFeedURL( + update_base_url + + 'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion()) + ); } else if (process.platform == 'win32') { electron.autoUpdater.setFeedURL(update_base_url + 'win32/' + process.arch + '/'); } else { From 8371006d90e37d554cc1d05e94f10f6d0f4134b7 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 13:55:33 +0000 Subject: [PATCH 19/56] Update redeploy script to keep old bundles ... so that people using old versions of the master chunk can still load other webpack chunks. --- scripts/redeploy.py | 142 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 118 insertions(+), 24 deletions(-) diff --git a/scripts/redeploy.py b/scripts/redeploy.py index 36585f53a0..4394f29228 100755 --- a/scripts/redeploy.py +++ b/scripts/redeploy.py @@ -1,13 +1,32 @@ #!/usr/bin/env python +# +# auto-deploy script for https://riot.im/develop +# +# Listens for HTTP hits. When it gets one, downloads the artifact from jenkins +# and deploys it as the new version. +# +# Requires the following python packages: +# +# - requests +# - flask +# from __future__ import print_function import json, requests, tarfile, argparse, os, errno +import time from urlparse import urljoin from flask import Flask, jsonify, request, abort + app = Flask(__name__) -arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = ( - None, None, None, None, None -) +arg_jenkins_url = None +arg_extract_path = None +arg_bundles_path = None +arg_should_clean = None +arg_symlink = None +arg_config_location = None + +class DeployException(Exception): + pass def download_file(url): local_filename = url.split('/')[-1] @@ -57,6 +76,9 @@ def on_receive_jenkins_poke(): abort(400, "Missing or bad build number") return + return fetch_jenkins_build(job_name, build_num) + +def fetch_jenkins_build(job_name, build_num): artifact_url = urljoin( arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num) ) @@ -106,7 +128,31 @@ def on_receive_jenkins_poke(): arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path) ) - print("Retrieving .tar.gz file: %s" % tar_gz_url) + # we extract into a directory based on the build number. This avoids the + # problem of multiple builds building the same git version and thus having + # the same tarball name. That would lead to two potential problems: + # (a) sometimes jenkins serves corrupted artifacts; we would replace + # a good deploy with a bad one + # (b) we'll be overwriting the live deployment, which means people might + # see half-written files. + build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) + try: + deploy_tarball(tar_gz_url, build_dir) + except DeployException as e: + abort(400, e.message) + + return jsonify({}) + +def deploy_tarball(tar_gz_url, build_dir): + """Download a tarball from jenkins and deploy it as the new version + """ + print("Deploying %s to %s" % (tar_gz_url, build_dir)) + + if os.path.exists(build_dir): + raise DeployException( + "Not deploying. We have previously deployed this build." + ) + os.mkdir(build_dir) # we rely on the fact that flask only serves one request at a time to # ensure that we do not overwrite a tarball from a concurrent request. @@ -114,19 +160,6 @@ def on_receive_jenkins_poke(): print("Downloaded file: %s" % filename) try: - # we extract into a directory based on the build number. This avoids the - # problem of multiple builds building the same git version and thus having - # the same tarball name. That would lead to two potential problems: - # (a) sometimes jenkins serves corrupted artifacts; we would replace - # a good deploy with a bad one - # (b) we'll be overwriting the live deployment, which means people might - # see half-written files. - build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) - if os.path.exists(build_dir): - abort(400, "Not deploying. We have previously deployed this build.") - return - os.mkdir(build_dir) - untar_to(filename, build_dir) print("Extracted to: %s" % build_dir) finally: @@ -139,9 +172,47 @@ def on_receive_jenkins_poke(): if arg_config_location: create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json')) + if arg_bundles_path: + extracted_bundles = os.path.join(extracted_dir, 'bundles') + move_bundles(source=extracted_bundles, dest=arg_bundles_path) + + # replace the (hopefully now empty) extracted_bundles dir with a + # symlink to the common dir. + relpath = os.path.relpath(arg_bundles_path, extracted_dir) + os.rmdir(extracted_bundles) + print ("Symlink %s -> %s" % (extracted_bundles, relpath)) + os.symlink(relpath, extracted_bundles) + create_symlink(source=extracted_dir, linkname=arg_symlink) - return jsonify({}) +def move_bundles(source, dest): + """Move the contents of the 'bundles' directory to a common dir + + We check that we will not be overwriting anything before we proceed. + + Args: + source (str): path to 'bundles' within the extracted tarball + dest (str): target common directory + """ + + if not os.path.isdir(dest): + os.mkdir(dest) + + # build a map from source to destination, checking for non-existence as we go. + renames = {} + for f in os.listdir(source): + dst = os.path.join(dest, f) + if os.path.exists(dst): + raise DeployException( + "Not deploying. The bundle includes '%s' which we have previously deployed." + % f + ) + renames[os.path.join(source, f)] = dst + + for (src, dst) in renames.iteritems(): + print ("Move %s -> %s" % (src, dst)) + os.rename(src, dst) + if __name__ == "__main__": parser = argparse.ArgumentParser("Runs a Vector redeployment server.") @@ -161,6 +232,13 @@ if __name__ == "__main__": "The location to extract .tar.gz files to." ) ) + parser.add_argument( + "-b", "--bundles-dir", dest="bundles_dir", help=( + "A directory to move the contents of the 'bundles' directory to. A \ + symlink to the bundles directory will also be written inside the \ + extracted tarball. Example: './bundles'." + ) + ) parser.add_argument( "-c", "--clean", dest="clean", action="store_true", default=False, help=( "Remove .tar.gz files after they have been downloaded and extracted." @@ -179,18 +257,34 @@ if __name__ == "__main__": To this location." ) ) + parser.add_argument( + "--test", dest="tarball_uri", help=( + "Don't start an HTTP listener. Instead download a build from Jenkins \ + immediately." + ), + ) + args = parser.parse_args() if args.jenkins.endswith("/"): # important for urljoin arg_jenkins_url = args.jenkins else: arg_jenkins_url = args.jenkins + "/" arg_extract_path = args.extract + arg_bundles_path = args.bundles_dir arg_should_clean = args.clean arg_symlink = args.symlink arg_config_location = args.config - print( - "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % - (args.port, arg_extract_path, - " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location) - ) - app.run(host="0.0.0.0", port=args.port, debug=True) + + if not os.path.isdir(arg_extract_path): + os.mkdir(arg_extract_path) + + if args.tarball_uri is not None: + build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time())) + deploy_tarball(args.tarball_uri, build_dir) + else: + print( + "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % + (args.port, arg_extract_path, + " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location) + ) + app.run(host="0.0.0.0", port=args.port, debug=True) From cf92e7f64bfc480dd860ce52d8c986c9d8c708df Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 Jan 2017 14:04:42 +0000 Subject: [PATCH 20/56] Clarify comment --- electron/src/electron-main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 3f7c0f07f4..a03a8755bc 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -116,7 +116,8 @@ function startAutoUpdate(update_base_url) { // it anywhere (apart from the User-Agent) so it's up to us. We could // (and previously did) just use the User-Agent, but this doesn't // rely on NSURLConnection setting the User-Agent to what we expect, - // and also acts as a convenient cache-buster between versions. + // and also acts as a convenient cache-buster to ensure that when the + // app updates it always gets a fresh value to avoid update-looping. electron.autoUpdater.setFeedURL( update_base_url + 'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion()) From c9c58ab0ecb966aca6d3d710db149b83bb4fa5ba Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 14:10:09 +0000 Subject: [PATCH 21/56] fix up the contextual menu button --- .../matrix-react-sdk/views/rooms/_EventTile.scss | 10 +++++++++- src/skins/vector/css/themes/_base.scss | 2 ++ src/skins/vector/css/themes/_dark.scss | 2 ++ src/skins/vector/img/icon_context_message.svg | 13 +++---------- .../vector/img/icon_context_message_dark.svg | 15 +++++++++++++++ 5 files changed, 31 insertions(+), 11 deletions(-) create mode 100644 src/skins/vector/img/icon_context_message_dark.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index a6b10e2435..b79db91911 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -146,7 +146,12 @@ limitations under the License. z-index: 1; position: relative; width: 90px; - height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */ + + /* 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; } @@ -172,6 +177,9 @@ limitations under the License. cursor: pointer; top: 6px; right: 6px; + width: 19px; + height: 19px; + background-image: url($edit-button-url); } .mx_EventTile:hover .mx_EventTile_editButton, diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 6488794d6c..ad18eb49c2 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -88,6 +88,8 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; +$edit-button-url: "/img/icon_context_message.svg"; + // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 62e89a7bfb..e3e32e8442 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -88,6 +88,8 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; +$edit-button-url: "/img/icon_context_message_dark.svg"; + // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; diff --git a/src/skins/vector/img/icon_context_message.svg b/src/skins/vector/img/icon_context_message.svg index c3d39b1e4b..f2ceccfa78 100644 --- a/src/skins/vector/img/icon_context_message.svg +++ b/src/skins/vector/img/icon_context_message.svg @@ -4,18 +4,11 @@ ED5D3E59-2561-4AC1-9B43-82FBC51767FC Created with sketchtool. - - - - - - - + + + diff --git a/src/skins/vector/img/icon_context_message_dark.svg b/src/skins/vector/img/icon_context_message_dark.svg new file mode 100644 index 0000000000..b4336cc377 --- /dev/null +++ b/src/skins/vector/img/icon_context_message_dark.svg @@ -0,0 +1,15 @@ + + + + ED5D3E59-2561-4AC1-9B43-82FBC51767FC + Created with sketchtool. + + + + + + + + + + From 6c88201e23b7c16a7732dea65a4009ad02efc18f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 19:14:16 +0000 Subject: [PATCH 22/56] use ye olde rel='alternate stylesheets' for theming --- src/vector/index.html | 14 ++++++++++---- src/vector/index.js | 1 - webpack.config.js | 4 ++++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index 73cdd2dfc8..1895cc6b62 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -20,14 +20,20 @@ - <% for(var i=0; i - - <% } %> + <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { + var file = htmlWebpackPlugin.files.css[i]; + if (file.match(/^theme-(?!light\.)/)) { + %> + + <% } else { %> + + <% } + } %>
- <% for(var i=0; i + <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%> <% } %> diff --git a/src/vector/index.js b/src/vector/index.js index 64b8769812..0d25420225 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,6 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/dark.scss'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 1f2a8a60b1..e05f877ae5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,6 +15,10 @@ module.exports = { // point, so that it doesn't block the pageload, but that is a separate // problem) "olm": "./src/vector/olm-loader.js", + + // CSS themes + "theme-light": "./build/light.scss", + "theme-dark": "./build/dark.scss", }, module: { preLoaders: [ From 0cd895b417bdc1163511d993c6b24ba1fe0910f3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 19:19:30 +0000 Subject: [PATCH 23/56] kill the moofle --- src/skins/vector/css/themes/dark.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 0c51486b57..5a37d0368e 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,4 +1,3 @@ @import "_base.scss"; @import "_dark.scss"; @import "../_components.scss"; -// moofleasdadsasdadsa \ No newline at end of file From 5206410f2126b6b987ecb654bf13829f8a58016c Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 22:25:02 +0000 Subject: [PATCH 24/56] Deployment script Factor some bits out of redeploy.py, so that they can be used in a deployment script suitable for riot.im/app. --- scripts/deploy.py | 158 ++++++++++++++++++++++++++++++++++++++++++++ scripts/redeploy.py | 107 +++++++----------------------- 2 files changed, 182 insertions(+), 83 deletions(-) create mode 100755 scripts/deploy.py diff --git a/scripts/deploy.py b/scripts/deploy.py new file mode 100755 index 0000000000..dde13c54c9 --- /dev/null +++ b/scripts/deploy.py @@ -0,0 +1,158 @@ +#!/usr/bin/env python +# +# download and unpack a riot-web tarball. +# +# Allows `bundles` to be extracted to a common directory, and a link to +# config.json to be added. + +from __future__ import print_function + +import argparse +import os +import os.path +import tarfile +import urllib + +class DeployException(Exception): + pass + +def create_relative_symlink(linkname, target): + relpath = os.path.relpath(target, os.path.dirname(linkname)) + print ("Symlink %s -> %s" % (linkname, relpath)) + os.symlink(relpath, linkname) + + +def move_bundles(source, dest): + """Move the contents of the 'bundles' directory to a common dir + + We check that we will not be overwriting anything before we proceed. + + Args: + source (str): path to 'bundles' within the extracted tarball + dest (str): target common directory + """ + + if not os.path.isdir(dest): + os.mkdir(dest) + + # build a map from source to destination, checking for non-existence as we go. + renames = {} + for f in os.listdir(source): + dst = os.path.join(dest, f) + if os.path.exists(dst): + raise DeployException( + "Not deploying. The bundle includes '%s' which we have previously deployed." + % f + ) + renames[os.path.join(source, f)] = dst + + for (src, dst) in renames.iteritems(): + print ("Move %s -> %s" % (src, dst)) + os.rename(src, dst) + +class Deployer: + def __init__(self): + self.packages_path = "." + self.bundles_path = None + self.should_clean = False + self.config_location = None + + def deploy(self, tarball, extract_path): + """Download a tarball if necessary, and unpack it + + Returns: + (str) the path to the unpacked deployment + """ + print("Deploying %s to %s" % (tarball, extract_path)) + + downloaded = False + if tarball.startswith("http://") or tarball.startswith("https://"): + tarball = self.download_file(tarball) + print("Downloaded file: %s" % tarball) + downloaded = True + + try: + with tarfile.open(tarball) as tar: + tar.extractall(extract_path) + finally: + if self.should_clean and downloaded: + os.remove(tarball) + + name_str = os.path.basename(tarball).replace(".tar.gz", "") + extracted_dir = os.path.join(extract_path, name_str) + print ("Extracted into: %s" % extracted_dir) + + if self.config_location: + create_relative_symlink( + target=self.config_location, + linkname=os.path.join(extracted_dir, 'config.json') + ) + + if self.bundles_path: + extracted_bundles = os.path.join(extracted_dir, 'bundles') + move_bundles(source=extracted_bundles, dest=self.bundles_path) + + # replace the (hopefully now empty) extracted_bundles dir with a + # symlink to the common dir. + os.rmdir(extracted_bundles) + create_relative_symlink( + target=self.bundles_path, + linkname=extracted_bundles, + ) + return extracted_dir + + def download_file(self, url): + if not os.path.isdir(self.packages_path): + os.mkdir(self.packages_path) + local_filename = os.path.join(self.packages_path, + url.split('/')[-1]) + urllib.urlretrieve(url, local_filename) + return local_filename + +if __name__ == "__main__": + parser = argparse.ArgumentParser("Deploy a Riot build on a web server.") + parser.add_argument( + "-p", "--packages-dir", default="./packages", help=( + "The directory to download the tarball into. (Default: '%(default)s')" + ) + ) + parser.add_argument( + "-e", "--extract-path", default="./deploys", help=( + "The location to extract .tar.gz files to. (Default: '%(default)s')" + ) + ) + parser.add_argument( + "-b", "--bundles-dir", nargs='?', default="./bundles", help=( + "A directory to move the contents of the 'bundles' directory to. A \ + symlink to the bundles directory will also be written inside the \ + extracted tarball. Example: './bundles'. \ + (Default: '%(default)s')" + ) + ) + parser.add_argument( + "-c", "--clean", action="store_true", default=False, help=( + "Remove .tar.gz files after they have been downloaded and extracted. \ + (Default: %(default)s)" + ) + ) + parser.add_argument( + "--config", nargs='?', default='./config.json', help=( + "Write a symlink at config.json in the extracted tarball to this \ + location. (Default: '%(default)s')" + ) + ) + parser.add_argument( + "tarball", help=( + "filename of tarball, or URL to download." + ), + ) + + args = parser.parse_args() + + deployer = Deployer() + deployer.packages_path = args.packages_dir + deployer.bundles_path = args.bundles_dir + deployer.should_clean = args.clean + deployer.config_location = args.config + + deployer.deploy(args.tarball, args.extract_path) diff --git a/scripts/redeploy.py b/scripts/redeploy.py index 4394f29228..0796b96303 100755 --- a/scripts/redeploy.py +++ b/scripts/redeploy.py @@ -14,32 +14,17 @@ from __future__ import print_function import json, requests, tarfile, argparse, os, errno import time from urlparse import urljoin + from flask import Flask, jsonify, request, abort +from deploy import Deployer, DeployException + app = Flask(__name__) arg_jenkins_url = None +deployer = None arg_extract_path = None -arg_bundles_path = None -arg_should_clean = None arg_symlink = None -arg_config_location = None - -class DeployException(Exception): - pass - -def download_file(url): - local_filename = url.split('/')[-1] - r = requests.get(url, stream=True) - with open(local_filename, 'wb') as f: - for chunk in r.iter_content(chunk_size=1024): - if chunk: # filter out keep-alive new chunks - f.write(chunk) - return local_filename - -def untar_to(tarball, dest): - with tarfile.open(tarball) as tar: - tar.extractall(dest) def create_symlink(source, linkname): try: @@ -137,17 +122,20 @@ def fetch_jenkins_build(job_name, build_num): # see half-written files. build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) try: - deploy_tarball(tar_gz_url, build_dir) + extracted_dir = deploy_tarball(tar_gz_url, build_dir) except DeployException as e: abort(400, e.message) + create_symlink(source=extracted_dir, linkname=arg_symlink) + return jsonify({}) def deploy_tarball(tar_gz_url, build_dir): - """Download a tarball from jenkins and deploy it as the new version - """ - print("Deploying %s to %s" % (tar_gz_url, build_dir)) + """Download a tarball from jenkins and unpack it + Returns: + (str) the path to the unpacked deployment + """ if os.path.exists(build_dir): raise DeployException( "Not deploying. We have previously deployed this build." @@ -156,62 +144,8 @@ def deploy_tarball(tar_gz_url, build_dir): # we rely on the fact that flask only serves one request at a time to # ensure that we do not overwrite a tarball from a concurrent request. - filename = download_file(tar_gz_url) - print("Downloaded file: %s" % filename) - try: - untar_to(filename, build_dir) - print("Extracted to: %s" % build_dir) - finally: - if arg_should_clean: - os.remove(filename) - - name_str = filename.replace(".tar.gz", "") - extracted_dir = os.path.join(build_dir, name_str) - - if arg_config_location: - create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json')) - - if arg_bundles_path: - extracted_bundles = os.path.join(extracted_dir, 'bundles') - move_bundles(source=extracted_bundles, dest=arg_bundles_path) - - # replace the (hopefully now empty) extracted_bundles dir with a - # symlink to the common dir. - relpath = os.path.relpath(arg_bundles_path, extracted_dir) - os.rmdir(extracted_bundles) - print ("Symlink %s -> %s" % (extracted_bundles, relpath)) - os.symlink(relpath, extracted_bundles) - - create_symlink(source=extracted_dir, linkname=arg_symlink) - -def move_bundles(source, dest): - """Move the contents of the 'bundles' directory to a common dir - - We check that we will not be overwriting anything before we proceed. - - Args: - source (str): path to 'bundles' within the extracted tarball - dest (str): target common directory - """ - - if not os.path.isdir(dest): - os.mkdir(dest) - - # build a map from source to destination, checking for non-existence as we go. - renames = {} - for f in os.listdir(source): - dst = os.path.join(dest, f) - if os.path.exists(dst): - raise DeployException( - "Not deploying. The bundle includes '%s' which we have previously deployed." - % f - ) - renames[os.path.join(source, f)] = dst - - for (src, dst) in renames.iteritems(): - print ("Move %s -> %s" % (src, dst)) - os.rename(src, dst) + return deployer.deploy(tar_gz_url, build_dir) if __name__ == "__main__": @@ -270,21 +204,28 @@ if __name__ == "__main__": else: arg_jenkins_url = args.jenkins + "/" arg_extract_path = args.extract - arg_bundles_path = args.bundles_dir - arg_should_clean = args.clean arg_symlink = args.symlink - arg_config_location = args.config if not os.path.isdir(arg_extract_path): os.mkdir(arg_extract_path) + deployer = Deployer() + deployer.bundles_path = args.bundles_dir + deployer.should_clean = args.clean + deployer.config_location = args.config + if args.tarball_uri is not None: build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time())) deploy_tarball(args.tarball_uri, build_dir) else: print( "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % - (args.port, arg_extract_path, - " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location) + (args.port, + arg_extract_path, + " (clean after)" if deployer.should_clean else "", + arg_symlink, + arg_jenkins_url, + deployer.config_location, + ) ) app.run(host="0.0.0.0", port=args.port, debug=True) From 83145e80e5c17339f14dd4ec053843f5b40bbf1a Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 18 Jan 2017 10:39:59 +0000 Subject: [PATCH 25/56] Auto-hide the electron menu bar From https://github.com/vector-im/riot-web/issues/2962 This allows all the shortcuts to still work, and the menu bar can be un-hidden with the alt key. --- electron/src/electron-main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index a03a8755bc..929b78923f 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -175,6 +175,7 @@ electron.app.on('ready', () => { icon: icon_path, width: 1024, height: 768, show: false, + autoHideMenuBar: true, }); mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`); electron.Menu.setApplicationMenu(VectorMenu); From 69bedf0d37384f3039a145180c4ba7834bfa45c7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 12:42:48 +0000 Subject: [PATCH 26/56] review feedback --- package.json | 2 -- src/skins/vector/css/rethemendex.sh | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 1e273dfe20..b8fd1574fb 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "babel-preset-es2017": "^6.16.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-2": "^6.17.0", - "catw": "^1.0.1", "chokidar": "^1.6.1", "cpx": "^1.3.2", "css-raw-loader": "^0.1.1", @@ -113,7 +112,6 @@ "minimist": "^1.2.0", "mkdirp": "^0.5.1", "mocha": "^2.4.5", - "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", "postcss-cli": "^2.6.0", diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 915b235da0..9381c5cd2a 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -2,7 +2,7 @@ echo "// autogenerated by rethemendex.sh" > _components.scss -for i in `find . -iname _\*.scss | fgrep -v _components.scss`; +for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`; do echo "@import \"$i\";" >> _components.scss done From 708fd640f7af9a641a5b3a66dacbb17392e8410c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 14:06:20 +0000 Subject: [PATCH 27/56] unbreak switching after vdh's webpack changes --- src/vector/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index 1895cc6b62..a6c3092d15 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -22,9 +22,11 @@ <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; - if (file.match(/^theme-(?!light\.)/)) { + var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/); + if (match) { + var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); %> - + <% } else { %> <% } From acb85b7b7227e107e4f91e8e473b2e8097eb9559 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 16:06:02 +0000 Subject: [PATCH 28/56] f1x0r CSS comment --- src/vector/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 0d25420225..a389224815 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -28,8 +28,9 @@ limitations under the License. // https://babeljs.io/docs/plugins/transform-runtime/ require('babel-polyfill'); -// CSS requires: just putting them here for now as CSS is going to be -// refactored "soon" anyway +// Require common CSS here; this will make webpack process it into bundle.css. +// Our own CSS (which is themed) is imported via separate webpack entry points +// in webpack.config.js require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); From f20efc57f3beb4e8f0bea05c04980bc4b35b7606 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 17:05:13 +0000 Subject: [PATCH 29/56] simple doc about theming --- docs/theming.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 docs/theming.md diff --git a/docs/theming.md b/docs/theming.md new file mode 100644 index 0000000000..defb18bc35 --- /dev/null +++ b/docs/theming.md @@ -0,0 +1,25 @@ +Theming Riot +============ + +Themes are a very basic way of providing simple alternative look & feels to the +riot-web app via CSS & custom imagery. + +They are *NOT* co be confused with 'skins', which describe apps which sit on top +of matrix-react-sdk - e.g. in theory Riot itself is a react-sdk skin. +As of Jan 2017, skins are not fully supported; riot is the only available skin. + +To define a theme for Riot: + + 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`. + 2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss + 3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss + 4. Override variables in _teal.css as desired. You may wish to delete ones + which don't differ from _base.scss, to make it clear which are being + overridden. If every single colour is being changed (as per _dark.scss) + then you might as well keep them all. + 5. Add the theme to the list of entrypoints in webpack.config.js + 6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js + 7. Sit back and admire your handywork. + +In future, the assets for a theme will probably be gathered together into a +single directory tree. \ No newline at end of file From ec1a2f6abfd73d8b181401eb37285aaf8a9cb55e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 19:29:53 +0000 Subject: [PATCH 30/56] fix CSS regression in searchbox --- .../vector/css/matrix-react-sdk/structures/_SearchBox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index bd335f6023..382a07f9d3 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -44,7 +44,7 @@ limitations under the License. height: 24px; border: 0px ! important; /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ - background-color: transparent; + background-color: transparent ! important; border: 0px; } From 5b95986705d9958545ad5ed4f94ed169da4eefa1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 20:05:18 +0000 Subject: [PATCH 31/56] fix various SCSS snafus --- src/skins/vector/css/_common.scss | 4 ++-- .../vector/css/matrix-react-sdk/structures/_SearchBox.scss | 1 - src/skins/vector/img/icon-call.svg | 2 +- src/skins/vector/img/icons-close-button.svg | 2 +- src/skins/vector/img/icons-search.svg | 2 +- src/skins/vector/img/icons-upload.svg | 2 +- src/skins/vector/img/icons-video.svg | 2 +- 7 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 01ba81d83e..94362a2fa4 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -55,8 +55,8 @@ a:visited { color: $accent-color; } -input[type=text] { - background-color: $primary-bg-color; +input[type=text], input[type=password] { + background-color: transparent; color: $primary-fg-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 382a07f9d3..0f34f056a5 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -44,7 +44,6 @@ limitations under the License. height: 24px; border: 0px ! important; /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ - background-color: transparent ! important; border: 0px; } diff --git a/src/skins/vector/img/icon-call.svg b/src/skins/vector/img/icon-call.svg index 2d96b1456b..0ca5c29e9d 100644 --- a/src/skins/vector/img/icon-call.svg +++ b/src/skins/vector/img/icon-call.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icons-close-button.svg b/src/skins/vector/img/icons-close-button.svg index f17940f58c..f960d73a3c 100644 --- a/src/skins/vector/img/icons-close-button.svg +++ b/src/skins/vector/img/icons-close-button.svg @@ -7,7 +7,7 @@ - + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg index 4f5002ab79..d85709e66c 100644 --- a/src/skins/vector/img/icons-search.svg +++ b/src/skins/vector/img/icons-search.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg index 9074fcf9fa..b0101e87a0 100644 --- a/src/skins/vector/img/icons-upload.svg +++ b/src/skins/vector/img/icons-upload.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icons-video.svg b/src/skins/vector/img/icons-video.svg index a35df49bb1..d367f49609 100644 --- a/src/skins/vector/img/icons-video.svg +++ b/src/skins/vector/img/icons-video.svg @@ -7,7 +7,7 @@ - + From 237f4df08eeb0333c451928d5af4adacd1000aca Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 18 Jan 2017 21:30:53 +0000 Subject: [PATCH 32/56] A couple of tweaks to the karma config * allow the imgs to be served from the karma server to avoid 404s * Use the source-map-loader for js --- karma.conf.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 2474216916..901832c78c 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -29,12 +29,22 @@ module.exports = function (config) { files: [ 'node_modules/babel-polyfill/browser.js', testFile, - {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false}, + + // make the images available via our httpd. They will be avaliable + // below http://localhost:[PORT]/base/. See also `proxies` which + // defines alternative URLs for them. + // + // This isn't required by any of the tests, but it stops karma + // logging warnings when it serves a 404 for them. + { + pattern: 'src/skins/vector/img/*', + watched: false, included: false, served: true, nocache: false, + }, ], - // redirect img links to the karma server proxies: { - "/img/": "/base/vector/img/", + // redirect img links to the karma server. See above. + "/img/": "/base/src/skins/vector/img/", }, // preprocess matching files before serving them to the browser @@ -86,6 +96,12 @@ module.exports = function (config) { webpack: { module: { + preLoaders: [ + // use the source-map-loader for javascript. This means + // that we have a better chance of seeing line numbers from + // the pre-babeled source. + { test: /\.js$/, loader: "source-map-loader" }, + ], loaders: [ { test: /\.json$/, loader: "json" }, { From c5032ba1bc4a7cde6ccd69c370ab336b7d2deac8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 22:46:12 +0000 Subject: [PATCH 33/56] Update theming.md --- docs/theming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/theming.md b/docs/theming.md index defb18bc35..c6373e52b6 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -13,7 +13,7 @@ To define a theme for Riot: 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`. 2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss 3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss - 4. Override variables in _teal.css as desired. You may wish to delete ones + 4. Override variables in _teal.scss as desired. You may wish to delete ones which don't differ from _base.scss, to make it clear which are being overridden. If every single colour is being changed (as per _dark.scss) then you might as well keep them all. @@ -22,4 +22,4 @@ To define a theme for Riot: 7. Sit back and admire your handywork. In future, the assets for a theme will probably be gathered together into a -single directory tree. \ No newline at end of file +single directory tree. From d1fbbf90c088f5d97a2b82882f8755dab5b03d5f Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 18 Jan 2017 21:51:49 +0000 Subject: [PATCH 34/56] Verify PGP signatures on tarballs when deploying --- scripts/deploy.py | 35 ++++++++++++++++++++++++++++++----- scripts/redeploy.py | 6 ++++++ 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/scripts/deploy.py b/scripts/deploy.py index dde13c54c9..c96b46e81f 100755 --- a/scripts/deploy.py +++ b/scripts/deploy.py @@ -10,8 +10,16 @@ from __future__ import print_function import argparse import os import os.path +import subprocess +import sys import tarfile -import urllib + +try: + # python3 + from urllib.request import urlretrieve +except ImportError: + # python2 + from urllib import urlretrieve class DeployException(Exception): pass @@ -56,6 +64,7 @@ class Deployer: self.bundles_path = None self.should_clean = False self.config_location = None + self.verify_signature = True def deploy(self, tarball, extract_path): """Download a tarball if necessary, and unpack it @@ -65,9 +74,15 @@ class Deployer: """ print("Deploying %s to %s" % (tarball, extract_path)) + name_str = os.path.basename(tarball).replace(".tar.gz", "") + extracted_dir = os.path.join(extract_path, name_str) + if os.path.exists(extracted_dir): + raise DeployException('Cannot unpack %s: %s already exists' % ( + tarball, extracted_dir)) + downloaded = False if tarball.startswith("http://") or tarball.startswith("https://"): - tarball = self.download_file(tarball) + tarball = self.download_and_verify(tarball) print("Downloaded file: %s" % tarball) downloaded = True @@ -78,8 +93,6 @@ class Deployer: if self.should_clean and downloaded: os.remove(tarball) - name_str = os.path.basename(tarball).replace(".tar.gz", "") - extracted_dir = os.path.join(extract_path, name_str) print ("Extracted into: %s" % extracted_dir) if self.config_location: @@ -101,12 +114,24 @@ class Deployer: ) return extracted_dir + def download_and_verify(self, url): + tarball = self.download_file(url) + + if self.verify_signature: + sigfile = self.download_file(url + ".asc") + subprocess.check_call(["gpg", "--verify", sigfile, tarball]) + + return tarball + def download_file(self, url): if not os.path.isdir(self.packages_path): os.mkdir(self.packages_path) local_filename = os.path.join(self.packages_path, url.split('/')[-1]) - urllib.urlretrieve(url, local_filename) + sys.stdout.write("Downloading %s -> %s..." % (url, local_filename)) + sys.stdout.flush() + urlretrieve(url, local_filename) + print ("Done") return local_filename if __name__ == "__main__": diff --git a/scripts/redeploy.py b/scripts/redeploy.py index 0796b96303..598f6c5265 100755 --- a/scripts/redeploy.py +++ b/scripts/redeploy.py @@ -214,6 +214,12 @@ if __name__ == "__main__": deployer.should_clean = args.clean deployer.config_location = args.config + # we don't pgp-sign jenkins artifacts; instead we rely on HTTPS access to + # the jenkins server (and the jenkins server not being compromised and/or + # github not serving it compromised source). If that's not good enough for + # you, don't use riot.im/develop. + deployer.verify_signature = False + if args.tarball_uri is not None: build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time())) deploy_tarball(args.tarball_uri, build_dir) From c3fa6ff8053f047d6d8dd8270dbb243abed5d587 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 02:48:17 +0000 Subject: [PATCH 35/56] Use the postcss-webpack-loader Use postcss-webpack-loader instead of webpack-cli to process the scss. Doing so mostly means that we avoid the problem that webpack-dev-server fails to start if we haven't already built the CSS. (It also simplifies package.json somewhat, which is no bad thing) --- package.json | 14 ++++++-------- postcss.config.js | 13 +++++++++++++ postcss.config.json | 15 --------------- webpack.config.js | 26 +++++++++++++++++++++----- 4 files changed, 40 insertions(+), 28 deletions(-) create mode 100644 postcss.config.js delete mode 100644 postcss.config.json diff --git a/package.json b/package.json index 722e0cf095..84e0547890 100644 --- a/package.json +++ b/package.json @@ -29,21 +29,19 @@ "reskindex": "reskindex -h src/header", "build:res": "node scripts/copy-res.js", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && postcss -c postcss.config.json", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64", - "build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle", - "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev", + "build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle", + "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev", "dist": "scripts/package.sh", "start:res": "node scripts/copy-res.js -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:css": "mkdirp build && postcss -c postcss.config.json -w", - "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"", - "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"", - "clean": "rimraf build lib webapp electron/dist", + "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"", + "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"", + "clean": "rimraf lib webapp electron/dist", "prepublish": "npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test:multi": "karma start" @@ -114,9 +112,9 @@ "mocha": "^2.4.5", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", - "postcss-cli": "^2.6.0", "postcss-extend": "^1.0.5", "postcss-import": "^9.0.0", + "postcss-loader": "^1.2.2", "postcss-mixins": "^5.4.1", "postcss-nested": "^1.0.0", "postcss-scss": "^0.4.0", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000..5305d9ed9e --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,13 @@ +module.exports = { + plugins: [ + require("postcss-import")(), + require("autoprefixer")(), + require("postcss-simple-vars")(), + require("postcss-extend")(), + require("postcss-nested")(), + require("postcss-mixins")(), + require("postcss-strip-inline-comments")(), + ], + "parser": "postcss-scss", + "local-plugins": true, +}; diff --git a/postcss.config.json b/postcss.config.json deleted file mode 100644 index 7ed32cdac1..0000000000 --- a/postcss.config.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "use": [ - "postcss-import", - "autoprefixer", - "postcss-simple-vars", - "postcss-extend", - "postcss-nested", - "postcss-mixins", - "postcss-strip-inline-comments" - ], - "parser": "postcss-scss", - "input": "src/skins/vector/css/themes/[^_]*.scss", - "dir": "build", - "local-plugins": true -} diff --git a/webpack.config.js b/webpack.config.js index 3a70196596..136e0af754 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,8 +17,8 @@ module.exports = { "olm": "./src/vector/olm-loader.js", // CSS themes - "theme-light": "./build/light.scss", - "theme-dark": "./build/dark.scss", + "theme-light": "./src/skins/vector/css/themes/light.scss", + "theme-dark": "./src/skins/vector/css/themes/dark.scss" }, module: { preLoaders: [ @@ -27,9 +27,25 @@ module.exports = { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, - // css-raw-loader loads CSS but doesn't try to treat url()s as require()s - // we're assuming that postcss has already preprocessed SCSS by this point - { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, + { + test: /\.scss$/, + + // 1. postcss-loader turns the SCSS into normal CSS. + // 2. css-raw-loader turns the CSS into a javascript module + // whose default export is a string containing the CSS. + // (css-raw-loader is similar to css-loader, but the latter + // would also drag in the imgs and fonts that our CSS refers to + // as webpack inputs.) + // 3. ExtractTextPlugin turns that string into a separate asset. + loader: ExtractTextPlugin.extract( + "css-raw-loader!postcss-loader?config=postcss.config.js" + ), + }, + { + // this works similarly to the scss case, without postcss. + test: /\.css$/, + loader: ExtractTextPlugin.extract("css-raw-loader"), + }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack From 231adbcd311359b858dbb7dd7911d4dab9b21891 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 13:02:08 +0000 Subject: [PATCH 36/56] Add copyright header --- electron/src/squirrelhooks.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js index ca0983b66e..15ed670f0c 100644 --- a/electron/src/squirrelhooks.js +++ b/electron/src/squirrelhooks.js @@ -1,3 +1,19 @@ +/* +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. +*/ + const path = require('path'); const spawn = require('child_process').spawn; const app = require('electron').app; From bee4ca2b28babf3cf43ec3c744a6b4e10bf3e624 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 13:25:56 +0000 Subject: [PATCH 37/56] Fixes to electron desktop notifs Merge the notification part of https://github.com/vector-im/riot-web/pull/2960 * Show and focus the window when the notification is clicked, rather than just restoring it. * Implement requestNotificationPermission and return a resolved promise (although in practice it should never be called) --- src/vector/platform/ElectronPlatform.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js index 68df88b096..47bfd9907a 100644 --- a/src/vector/platform/ElectronPlatform.js +++ b/src/vector/platform/ElectronPlatform.js @@ -97,7 +97,10 @@ export default class ElectronPlatform extends VectorBasePlatform { room_id: room.roomId }); global.focus(); - electron.remote.getCurrentWindow().restore(); + const currentWin = electron.remote.getCurrentWindow(); + currentWin.show(); + currentWin.restore(); + currentWin.focus(); }; return notification; @@ -131,4 +134,8 @@ export default class ElectronPlatform extends VectorBasePlatform { screenCaptureErrorString() { return null; } + + requestNotificationPermission() : Promise { + return q('granted'); + } } From d11bcdad5fdd80c9eed34328a566fb707111b6b6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 14:29:07 +0000 Subject: [PATCH 38/56] Add electron tray icon From https://github.com/vector-im/riot-web/pull/2960 Makes riot minimise to the tray on windows / linux. --- electron/src/electron-main.js | 10 +++++- electron/src/tray.js | 67 +++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 electron/src/tray.js diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 929b78923f..653dfd46fe 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -26,6 +26,8 @@ if (check_squirrel_hooks()) return; const electron = require('electron'); const url = require('url'); +const tray = require('./tray'); + const VectorMenu = require('./vectormenu'); let vectorConfig = {}; @@ -180,6 +182,12 @@ electron.app.on('ready', () => { mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`); electron.Menu.setApplicationMenu(VectorMenu); + // Create trayIcon icon + tray.create(mainWindow, { + icon_path: icon_path, + brand: vectorConfig.brand || 'Riot' + }); + mainWindow.once('ready-to-show', () => { mainWindow.show(); }); @@ -187,7 +195,7 @@ electron.app.on('ready', () => { mainWindow = null; }); mainWindow.on('close', (e) => { - if (process.platform == 'darwin' && !appQuitting) { + if (!appQuitting && (tray.hasTray() || process.platform == 'darwin')) { // On Mac, closing the window just hides it // (this is generally how single-window Mac apps // behave, eg. Mail.app) diff --git a/electron/src/tray.js b/electron/src/tray.js new file mode 100644 index 0000000000..2ccdf40ccc --- /dev/null +++ b/electron/src/tray.js @@ -0,0 +1,67 @@ +/* +Copyright 2017 Karl Glatz +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. +*/ + +const path = require('path'); +const electron = require('electron'); + +const app = electron.app; +const Tray = electron.Tray; +const MenuItem = electron.MenuItem; + +let trayIcon = null; + +exports.hasTray = function hasTray() { + return (trayIcon !== null); +} + +exports.create = function (win, config) { + // no trays on darwin + if (process.platform === 'darwin' || trayIcon) { + return; + } + + const toggleWin = function () { + if (win.isVisible() && !win.isMinimized()) { + win.hide(); + } else { + if (win.isMinimized()) win.restore(); + if (!win.isVisible()) win.show(); + win.focus(); + } + }; + + const contextMenu = electron.Menu.buildFromTemplate([ + { + label: 'Show/Hide ' + config.brand, + click: toggleWin + }, + { + type: 'separator' + }, + { + label: 'Quit', + click: function () { + app.quit(); + } + } + ]); + + trayIcon = new Tray(config.icon_path); + trayIcon.setToolTip(config.brand); + trayIcon.setContextMenu(contextMenu); + trayIcon.on('click', toggleWin); +}; From 61c5253dbf41fed7deec32d445bfa3c222833a7a Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 15:40:54 +0000 Subject: [PATCH 39/56] Give the 'Light' theme link a title too ... mostly to make it appear on the Firefox style menu. --- src/vector/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index a6c3092d15..3ab667ccf8 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -22,11 +22,13 @@ <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; - var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/); + var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/); if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); + var light = match[1] == 'light'; %> - + <% } else { %> <% } From 789c7b60cc238d4b264d444e8e911a60d82c7b50 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Thu, 19 Jan 2017 16:51:41 +0100 Subject: [PATCH 40/56] CSS for avatars that appear when users are typing --- .../structures/_RoomStatusBar.scss | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 5daac88fc4..12cecffe79 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -40,12 +40,12 @@ limitations under the License. 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) { @@ -70,6 +70,29 @@ limitations under the License. } } +.mx_RoomStatusBar_typingIndicatorAvatars { + width: 24px; + text-align: left; +} + +.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { + margin-right: -12px; +} + +.mx_RoomStatusBar_typingIndicatorRemaining { + display: inline-block; + color: #acacac; + background-color: #ddd; + 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; } From 537194608e34676450fa916a98d8a099a89af161 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 16:01:37 +0000 Subject: [PATCH 41/56] Make riot desktop single instance So launching a new instance will focus the old one, meaning that if you have Riot minimised to the tray and launch it via the desktop shortcut / start menu, you don't end up with more & more copies of the app. This doesn't really prevent you from running multiple copies of the app to fake multi account support since they share a data directory anyway. --- electron/src/electron-main.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 929b78923f..1a6ea692d0 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -159,6 +159,19 @@ electron.ipcMain.on('install_update', installUpdate); electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing'); +const shouldQuit = electron.app.makeSingleInstance((commandLine, workingDirectory) => { + // Someone tried to run a second instance, we should focus our window. + if (mainWindow) { + if (!mainWindow.isVisible()) mainWindow.show(); + if (mainWindow.isMinimized()) mainWindow.restore(); + mainWindow.focus(); + } +}); + +if (shouldQuit) { + electron.app.quit() +} + electron.app.on('ready', () => { if (vectorConfig.update_base_url) { console.log("Starting auto update with base URL: " + vectorConfig.update_base_url); From f5d7f3ca9f77f491f93a5573e916463bfb2d5634 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 16:21:43 +0000 Subject: [PATCH 42/56] Add StartupWMClass so GNOME doesn't get confused by the hidden windows --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 84e0547890..b7b69d0c70 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,10 @@ ], "linux": { "target": "deb", - "maintainer": "support@riot.im" + "maintainer": "support@riot.im", + "desktop": { + "StartupWMClass": "riot-web" + } }, "win": { "target": "squirrel" From 36450764f3a341e3b07843af6e6975d494a9a374 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 16:58:55 +0000 Subject: [PATCH 43/56] rethemendex fixes - set cwd before doing cwd-specific operations - don't include 'themes' directory, otherwise it's a bit circular. --- src/skins/vector/css/_components.scss | 1 - src/skins/vector/css/rethemendex.sh | 15 ++++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 884352366e..880c105401 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -49,7 +49,6 @@ @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 "./themes/_base.scss"; @import "./vector-web/_fonts.scss"; @import "./vector-web/structures/_CompatibilityPage.scss"; @import "./vector-web/structures/_LeftPanel.scss"; diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 9381c5cd2a..a7d9a657ac 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -1,8 +1,13 @@ #!/bin/bash -echo "// autogenerated by rethemendex.sh" > _components.scss +cd `dirname $0` -for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`; -do - echo "@import \"$i\";" >> _components.scss -done +{ + 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 From 8ad0ff24f8f5422a6c15f7744227a241d789aee8 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 18:35:43 +0000 Subject: [PATCH 44/56] Fix link to image for event options menu This has to be relative, because we don't know if riot is going to be mounted at the top-level of the domain or not (it's not, on riot.im). Links are relative to the final location of the CSS, which is under bundles/, so need ../.. --- src/skins/vector/css/themes/_base.scss | 2 +- src/skins/vector/css/themes/_dark.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index ad18eb49c2..476cf7e0bb 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -88,7 +88,7 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; -$edit-button-url: "/img/icon_context_message.svg"; +$edit-button-url: "../../img/icon_context_message.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index e3e32e8442..0f3b77f52e 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -88,7 +88,7 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; -$edit-button-url: "/img/icon_context_message_dark.svg"; +$edit-button-url: "../../img/icon_context_message_dark.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color From fa535996ae6c979522252f2540c656f09576ebc9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 02:22:11 +0000 Subject: [PATCH 45/56] fix textarea bg --- src/skins/vector/css/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 94362a2fa4..bf31bea6cb 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -55,7 +55,7 @@ a:visited { color: $accent-color; } -input[type=text], input[type=password] { +input[type=text], input[type=password], textarea { background-color: transparent; color: $primary-fg-color; } From 4d8f5d4df1c3bb0ef27b53842f3ed1755e9039d8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 02:29:56 +0000 Subject: [PATCH 46/56] change selection color & fix MD bg --- .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss | 4 ++++ src/skins/vector/css/themes/_dark.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index b79db91911..29170a8305 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -294,6 +294,10 @@ limitations under the License. overflow-y: visible; } +.mx_EventTile_content .markdown-body code { + background-color: #f8f8f8; +} + .mx_EventTile_content .markdown-body h1, .mx_EventTile_content .markdown-body h2, .mx_EventTile_content .markdown-body h3, diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 0f3b77f52e..03913ca2b0 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -73,7 +73,7 @@ $voip-accept-color: #80f480; // ******************** $roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.05); $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; From 9b70e2e25f3442374a1fbaeaedf25b29b2ce0539 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 02:34:45 +0000 Subject: [PATCH 47/56] fix RTE bg color --- .../vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss index 9265d4dc12..062dd0bade 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss @@ -4,7 +4,7 @@ z-index: 1000; width: 100%; border: 1px solid $primary-hairline-color; - background: white; + background: $primary-bg-color; border-bottom: none; border-radius: 4px 4px 0 0; max-height: 50vh; From 956deca844505c75f03a1406a5ffd4532804cbde Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Fri, 20 Jan 2017 16:59:41 +0100 Subject: [PATCH 48/56] Add bg-color border to typing avatars --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 12cecffe79..b7bdeaa052 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -71,18 +71,20 @@ limitations under the License. } .mx_RoomStatusBar_typingIndicatorAvatars { - width: 24px; + width: 52px; text-align: left; } .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { margin-right: -12px; + border:1px solid $primary-bg-color; } .mx_RoomStatusBar_typingIndicatorRemaining { display: inline-block; color: #acacac; background-color: #ddd; + border:1px solid $primary-bg-color; border-radius: 40px; width: 24px; height: 24px; From 9ffedf5e7d8b0962c1b39038ecc8e59b5fc1459c Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Fri, 20 Jan 2017 17:00:59 +0100 Subject: [PATCH 49/56] space after colons --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index b7bdeaa052..44e9d983c3 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -77,14 +77,14 @@ limitations under the License. .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { margin-right: -12px; - border:1px solid $primary-bg-color; + border: 1px solid $primary-bg-color; } .mx_RoomStatusBar_typingIndicatorRemaining { display: inline-block; color: #acacac; background-color: #ddd; - border:1px solid $primary-bg-color; + border: 1px solid $primary-bg-color; border-radius: 40px; width: 24px; height: 24px; From afcf9de8d47f463b83e9b40dcfb37c6f5de47215 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Fri, 20 Jan 2017 17:35:01 +0100 Subject: [PATCH 50/56] Handle avatars with initials --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 44e9d983c3..d3f1439d14 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -75,11 +75,16 @@ limitations under the License. text-align: left; } -.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { +.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; From a9c575b4d095872687969707878f215e23a7a261 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:00:33 +0000 Subject: [PATCH 51/56] fix a bunch of dark-theme buttons --- src/skins/vector/css/themes/_dark.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 03913ca2b0..776da28249 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -101,4 +101,15 @@ $lightbox-fg-color: #ffffff; $lightbox-border-color: #ffffff; // unused? -$progressbar-color: #000; \ No newline at end of file +$progressbar-color: #000; + +// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it +// better match the theme. Typically applied to dark grey 'off' buttons or +// light grey 'on' buttons. +.mx_filterFlipColor { + filter: invert(); +} + +.gm-scrollbar .thumb { + filter: invert(); +} \ No newline at end of file From 5b1fea46cb6a0c9ec45e01a41c7222069a390507 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:09:49 +0000 Subject: [PATCH 52/56] fix badge color --- .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index 286a709d93..84f8ddded3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -171,7 +171,7 @@ limitations under the License. .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge { - background-color: rgb(214, 214, 214); + background-color: $preview-widget-bar-color; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { From 83272f5cc58fa4a3efc5a8423642d1f4cb6886a1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:11:28 +0000 Subject: [PATCH 53/56] fix badge color again --- .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss | 2 +- src/skins/vector/css/themes/_base.scss | 2 ++ src/skins/vector/css/themes/_dark.scss | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index 84f8ddded3..5ca4ac1788 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -171,7 +171,7 @@ limitations under the License. .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge { - background-color: $preview-widget-bar-color; + background-color: $neutral-badge-color; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 476cf7e0bb..db921034de 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -59,6 +59,8 @@ $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; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 776da28249..4902724f2d 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -59,6 +59,8 @@ $lightbox-background-bg-color: #000; $greyed-fg-color: #888; +$neutral-badge-color: #888; + $preview-widget-bar-color: $menu-bg-color; $preview-widget-fg-color: $greyed-fg-color; From ef519231d63f1aa765e0f1cd9ea78bb4591253b0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:16:58 +0000 Subject: [PATCH 54/56] fix mute button colors --- .../views/context_menus/NotificationStateContextMenu.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 243275db27..d4b40d1732 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -120,22 +120,22 @@ module.exports = React.createClass({
- + All messages (loud)
- + All messages
- + Mentions only
- + Mute
From d907421ad46b64144a8690996ad51ffc716c4e8a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 22 Jan 2017 01:25:32 +0100 Subject: [PATCH 55/56] crappy CSS for UnknownDeviceDialog --- src/skins/vector/css/_components.scss | 1 + .../views/dialogs/_UnknownDeviceDialog.scss | 46 +++++++++++++++++++ src/skins/vector/css/themes/_dark.scss | 2 +- 3 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 880c105401..51dd0ada77 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -15,6 +15,7 @@ @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.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"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss new file mode 100644 index 0000000000..3a9b64d159 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss @@ -0,0 +1,46 @@ +/* +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_UnknownDeviceDialog .mx_MemberDeviceInfo { + float: right; + clear: both; + padding: 0px; + padding-top: 8px; +} + +.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton { + border: 0px; + height: 24px; + border-radius: 40px; + border: solid 1px $accent-color; + font-weight: 600; + font-size: 13px; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + margin-left: 0px; + margin-right: 8px; + padding-left: 0.5em; + padding-right: 0.5em; + width: 70px; + outline: none; + cursor: pointer; + color: $accent-color; + background-color: $primary-bg-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/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 4902724f2d..51930433ea 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -114,4 +114,4 @@ $progressbar-color: #000; .gm-scrollbar .thumb { filter: invert(); -} \ No newline at end of file +} From 57126efe86db96396d921651e4d66aea4e3f4c76 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 23 Jan 2017 10:24:23 +0000 Subject: [PATCH 56/56] Reposition typing avatars relative to "is typing" --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index d3f1439d14..d124f9c67f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -21,10 +21,10 @@ limitations under the License. /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ .mx_RoomStatusBar_indicator { - padding-left: 18px; + padding-left: 17px; padding-right: 12px; margin-left: -73px; - margin-top: 13px; + margin-top: 8px; float: left; width: 24px; text-align: center;