From bacb284415a90811fbad2bae74b1921bf92a8fd9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:01:28 +0000 Subject: [PATCH 01/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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/22] 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 c9c58ab0ecb966aca6d3d710db149b83bb4fa5ba Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 14:10:09 +0000 Subject: [PATCH 17/22] 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 18/22] 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 19/22] 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 69bedf0d37384f3039a145180c4ba7834bfa45c7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 12:42:48 +0000 Subject: [PATCH 20/22] 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 21/22] 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 22/22] 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');