Browse Source

Merge pull request #2973 from vector-im/matthew/postcss

Switch CSS to using postcss, and implement a dark theme.
pull/2987/head
Matthew Hodgson 6 years ago committed by GitHub
parent
commit
c0e5a1ba3b
  1. 14
      package.json
  2. 15
      postcss.config.json
  3. 77
      src/skins/vector/css/_common.scss
  4. 74
      src/skins/vector/css/_components.scss
  5. 14
      src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
  6. 4
      src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
  7. 15
      src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
  8. 47
      src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
  9. 12
      src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
  10. 19
      src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
  11. 75
      src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
  12. 2
      src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
  13. 6
      src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
  14. 27
      src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
  15. 22
      src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
  16. 2
      src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
  17. 4
      src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
  18. 6
      src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
  19. 6
      src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
  20. 16
      src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
  21. 8
      src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
  22. 6
      src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
  23. 2
      src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
  24. 4
      src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
  25. 6
      src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
  26. 2
      src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
  27. 8
      src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
  28. 0
      src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss
  29. 0
      src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss
  30. 0
      src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss
  31. 0
      src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss
  32. 12
      src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
  33. 6
      src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
  34. 44
      src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
  35. 8
      src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
  36. 14
      src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
  37. 7
      src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
  38. 22
      src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
  39. 22
      src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
  40. 0
      src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss
  41. 60
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
  42. 0
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
  43. 19
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
  44. 22
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
  45. 14
      src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
  46. 18
      src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
  47. 6
      src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
  48. 2
      src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
  49. 0
      src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss
  50. 2
      src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
  51. 4
      src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
  52. 10
      src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
  53. 0
      src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
  54. 8
      src/skins/vector/css/rethemendex.sh
  55. 104
      src/skins/vector/css/themes/_base.scss
  56. 104
      src/skins/vector/css/themes/_dark.scss
  57. 3
      src/skins/vector/css/themes/dark.scss
  58. 2
      src/skins/vector/css/themes/light.scss
  59. 0
      src/skins/vector/css/vector-web/_fonts.scss
  60. 0
      src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss
  61. 15
      src/skins/vector/css/vector-web/structures/_LeftPanel.scss
  62. 33
      src/skins/vector/css/vector-web/structures/_RightPanel.scss
  63. 23
      src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
  64. 36
      src/skins/vector/css/vector-web/structures/_RoomSubList.scss
  65. 0
      src/skins/vector/css/vector-web/structures/_ViewSource.scss
  66. 0
      src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss
  67. 0
      src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss
  68. 5
      src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
  69. 0
      src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss
  70. 10
      src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
  71. 35
      src/skins/vector/css/vector-web/views/elements/_ImageView.scss
  72. 4
      src/skins/vector/css/vector-web/views/elements/_Spinner.scss
  73. 11
      src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
  74. 12
      src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
  75. 0
      src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss
  76. 0
      src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss
  77. 8
      src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
  78. 12
      src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
  79. 17
      src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
  80. 2
      src/skins/vector/css/vector-web/views/settings/_Notifications.scss
  81. 15
      src/skins/vector/img/icon_context_message_dark.svg
  82. 16
      src/vector/index.html
  83. 6
      src/vector/index.js
  84. 7
      webpack.config.js

14
package.json

@ -29,7 +29,7 @@
"reskindex": "reskindex -h src/header",
"build:res": "node scripts/copy-res.js",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
"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",
@ -40,7 +40,7 @@
"start:res": "node scripts/copy-res.js -w",
"start:js": "webpack-dev-server -w --progress",
"start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
"start:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
"start:css": "mkdirp build && postcss -c postcss.config.json -w",
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"",
"start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
"clean": "rimraf build lib webapp electron/dist",
@ -76,6 +76,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",
@ -90,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",
@ -114,6 +114,14 @@
"mocha": "^2.4.5",
"parallelshell": "^1.2.0",
"phantomjs-prebuilt": "^2.1.7",
"postcss-cli": "^2.6.0",
"postcss-extend": "^1.0.5",
"postcss-import": "^9.0.0",
"postcss-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",

15
postcss.config.json

@ -0,0 +1,15 @@
{
"use": [
"postcss-import",
"autoprefixer",
"postcss-simple-vars",
"postcss-extend",
"postcss-nested",
"postcss-mixins",
"postcss-strip-inline-comments"
],
"parser": "postcss-scss",
"input": "src/skins/vector/css/themes/[^_]*.scss",
"dir": "build",
"local-plugins": true
}

77
src/skins/vector/css/common.css → 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,15 +52,20 @@ h2 {
a:hover,
a:link,
a:visited {
color: #76cfa6;
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 {
border: 1px solid #76CFA6;
border: 1px solid $accent-color;
outline: none;
box-shadow: none;
}
@ -77,10 +83,7 @@ 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;
transition: opacity 0.2s ease-in-out;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
@ -122,14 +125,8 @@ 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;
}
@ -148,8 +145,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;
@ -168,13 +165,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 {
@ -190,7 +187,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 +199,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 +209,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 +238,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 +253,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 +265,19 @@ textarea {
}
::-moz-selection {
background-color: #76CFA6;
color: white;
background-color: $accent-color;
color: $selection-fg-color;
}
::selection {
background-color: #76CFA6;
color: white;
background-color: $accent-color;
color: $selection-fg-color;
}
/** 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;

74
src/skins/vector/css/_components.scss

@ -0,0 +1,74 @@
// autogenerated by rethemendex.sh
@import "./_common.scss";
@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
@import "./matrix-react-sdk/structures/_CreateRoom.scss";
@import "./matrix-react-sdk/structures/_FilePanel.scss";
@import "./matrix-react-sdk/structures/_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";

14
src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css → 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;

4
src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css → 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;

15
src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css → src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss

@ -15,13 +15,8 @@ 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%;
@ -58,12 +53,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 +85,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 +95,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 +106,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 {

47
src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css → src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss

@ -27,34 +27,21 @@ 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 +55,32 @@ 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: #eaf5f0;
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: #fff;
background-color: $primary-bg-color;
-webkit-flex: 1;
flex: 1;
/* Experimental fix for https://github.com/vector-im/vector-web/issues/947
@ -132,25 +99,15 @@ 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;
}

12
src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css → src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss

@ -15,13 +15,8 @@ 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%;
@ -51,7 +46,7 @@ limitations under the License.
}
.mx_NotificationPanel .mx_EventTile_roomName a {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_NotificationPanel .mx_EventTile_avatar {
@ -61,8 +56,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 +88,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 {

19
src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css → 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;
@ -123,19 +123,16 @@ 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: #76CFA6;
color: $accent-color;
}
.mx_RoomStatusBar_tabCompleteEol object {

75
src/skins/vector/css/matrix-react-sdk/structures/RoomView.css → src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss

@ -18,25 +18,15 @@ 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,14 +43,10 @@ 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;
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;
@ -77,10 +63,6 @@ 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;
@ -89,28 +71,18 @@ 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;
}
.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 +96,15 @@ 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 {
@ -158,14 +123,10 @@ 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 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
min-width: 0px;
@ -185,22 +146,17 @@ 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;
}
.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;
}
@ -212,16 +168,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 +190,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;
}
@ -257,14 +213,9 @@ 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;
}
@ -272,13 +223,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;
}

2
src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css → 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;

6
src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css → 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;
}

27
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css → src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss

@ -20,34 +20,19 @@ 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;
@ -58,7 +43,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;
@ -84,8 +69,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 +80,7 @@ limitations under the License.
}
.mx_UserSettings_button.danger {
background-color: #ff0064;
background-color: $warning-color;
}
.mx_UserSettings_section {
@ -166,10 +151,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;
}

22
src/skins/vector/css/matrix-react-sdk/structures/login/Login.css → src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

@ -18,21 +18,15 @@ 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;
}
.mx_Login h2 {
color: #4a4a4a;
color: $primary-fg-color;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
@ -53,7 +47,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 +69,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 +93,7 @@ limitations under the License.
}
.mx_Login_create:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_links {
@ -112,7 +106,7 @@ limitations under the License.
}
.mx_Login_links a:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_prompt {
@ -127,7 +121,7 @@ limitations under the License.
}
.mx_Login_forgot:link {
color: #4a4a4a;
color: $primary-fg-color;
}
.mx_Login_loader {
@ -147,7 +141,7 @@ limitations under the License.
}
.mx_Login_error {
color: #ff2020;
color: $warning-color;
font-weight: bold;
text-align: center;
/*

2
src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css → 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;

4
src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css → 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;
}

6
src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css → 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;
}

6
src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css → 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;
}

16
src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css → 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;
}