mirror of
https://github.com/vector-im/element-web.git
synced 2024-09-09 22:55:12 +00:00
Merge pull request #2973 from vector-im/matthew/postcss
Switch CSS to using postcss, and implement a dark theme.
This commit is contained in:
Matthew Hodgson
GitHub
commit
c0e5a1ba3b
84 changed files with 667 additions and 606 deletions
14
package.json
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
Normal file
15
postcss.config.json
Normal file
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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
Normal file
74
src/skins/vector/css/_components.scss
Normal file
|
|
@ -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";
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
/*
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -17,19 +17,17 @@ 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 {
|
||||
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;
|
||||
|
|
@ -44,7 +42,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%;
|
||||
|
|
@ -31,6 +31,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberEventListSummary_toggle {
|
||||
color:#76cfa6;
|
||||
color:$accent-color;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@ limitations under the License.
|
|||
opacity: 0.8;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
|
||||
font-style: italic;
|
||||
font-color: #454545;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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,
|
||||
|
|
@ -204,7 +212,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_readAvatarRemainder {
|
||||
color: #acacac;
|
||||
color: $event-timestamp-color;
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -244,10 +252,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 +305,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body a {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body .hljs {
|
||||
|
|
@ -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;
|
||||
border-left: 4px solid $preview-widget-bar-color;
|
||||
color: $preview-widget-fg-color;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -69,10 +69,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberInfo_profileField {
|
||||
font-color: #999999;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_buttons {
|
||||
|
|
@ -82,7 +81,7 @@ limitations under the License.
|
|||
.mx_MemberInfo_field {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
margin-left: 8px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
|
@ -20,22 +20,15 @@ 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,17 +41,16 @@ limitations under the License.
|
|||
overflow-y: auto;
|
||||
|
||||
order: 1;
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.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 +58,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;
|
||||
}
|
||||
|
|
@ -80,7 +72,6 @@ limitations under the License.
|
|||
.mx_MemberList_joined {
|
||||
order: 2;
|
||||
flex: 1 0 0;
|
||||
-webkit-flex: 1 0 0;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -89,14 +80,13 @@ limitations under the License.
|
|||
.mx_MemberList_invited {
|
||||
order: 3;
|
||||
flex: 0 0 100px;
|
||||
-webkit-flex: 0 0 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_MemberList_invited h2 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding-left: 3px;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
@ -105,11 +105,9 @@ limitations under the License.
|
|||
border: 0px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
-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 +118,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,
|
||||
|
|
@ -153,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);
|
||||
}
|
||||
|
||||
|
|
@ -170,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 * {
|
||||
|
|
@ -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,63 +23,36 @@ limitations under the License.
|
|||
max-width: 960px;
|
||||
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;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
-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,27 +60,17 @@ 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;
|
||||
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_rightRow {
|
||||
margin-top: 4px;
|
||||
background-color: #fff;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +82,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 +100,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;
|
||||
|
|
@ -153,7 +115,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_settingsHint {
|
||||
color: #a2a2a2 ! important;
|
||||
color: $settings-grey-fg-color ! important;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_searchStatus {
|
||||
|
|
@ -174,21 +136,21 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_placeholder {
|
||||
color: #a2a2a2 ! important;
|
||||
color: $settings-grey-fg-color ! important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -197,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;
|
||||
|
|
@ -17,20 +17,9 @@ limitations under the License.
|
|||
.mx_RoomPreviewBar {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -38,16 +27,16 @@ 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 {
|
||||
margin-top: 25px;
|
||||
color: #a4a4a4;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_join_text a {
|
||||
|
|
@ -56,9 +45,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomPreviewBar_warning {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -205,7 +205,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomSettings_aliasPlaceholder {
|
||||
color: #a2a2a2;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_buttons {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -16,19 +16,17 @@ limitations under the License.
|
|||
|
||||
.mx_SearchableEntityList {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
|
||||
.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,20 +34,19 @@ 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;
|
||||
}
|
||||
|
||||
.mx_SearchableEntityList_listWrapper {
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -67,14 +64,13 @@ limitations under the License.
|
|||
.mx_SearchableEntityList_hrWrapper {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
-webkit-flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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%;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,
|
||||
|
|
@ -58,14 +56,14 @@ limitations under the License.
|
|||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 36px;
|
||||
color: #fff;
|
||||
color: $accent-fg-color;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline {
|
||||
background-color: #f48080;
|
||||
background-color: $voip-decline-color;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_accept {
|
||||
background-color: #80f480;
|
||||
background-color: $voip-accept-color;
|
||||
}
|
||||
8
src/skins/vector/css/rethemendex.sh
Executable file
8
src/skins/vector/css/rethemendex.sh
Executable file
|
|
@ -0,0 +1,8 @@
|
|||
#!/bin/bash
|
||||
|
||||
echo "// autogenerated by rethemendex.sh" > _components.scss
|
||||
|
||||
for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`;
|
||||
do
|
||||
echo "@import \"$i\";" >> _components.scss
|
||||
done
|
||||
104
src/skins/vector/css/themes/_base.scss
Normal file
104
src/skins/vector/css/themes/_base.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #454545;
|
||||
$primary-bg-color: #ffffff;
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: #747474;
|
||||
|
||||
// used for focusing form controls
|
||||
$focus-bg-color: #dddddd;
|
||||
|
||||
// button UI (white-on-green in light skin)
|
||||
$accent-fg-color: #ffffff;
|
||||
$accent-color: #76CFA6;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
// red warning colour
|
||||
$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;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: #f7f7f7;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: #e5e5e5;
|
||||
|
||||
// used for the border of input text fields
|
||||
$input-border-color: #f0f0f0;
|
||||
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #c7c7c7;
|
||||
|
||||
// used for UserSettings EditableText
|
||||
$input-underline-color: rgba(151, 151, 151, 0.5);
|
||||
$input-fg-color: rgba(74, 74, 74, 0.9);
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #f6f6f6;
|
||||
|
||||
$avatar-initial-color: #ffffff;
|
||||
|
||||
$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);
|
||||
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$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;
|
||||
|
||||
$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;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
||||
104
src/skins/vector/css/themes/_dark.scss
Normal file
104
src/skins/vector/css/themes/_dark.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
|
||||
// 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;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
// red warning colour
|
||||
$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;
|
||||
|
||||
// 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;
|
||||
|
||||
// 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;
|
||||
|
||||
$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);
|
||||
$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
$roomsublist-label-fg-color: $h3-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;
|
||||
|
||||
$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;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
||||
3
src/skins/vector/css/themes/dark.scss
Normal file
3
src/skins/vector/css/themes/dark.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import "_base.scss";
|
||||
@import "_dark.scss";
|
||||
@import "../_components.scss";
|
||||
2
src/skins/vector/css/themes/light.scss
Normal file
2
src/skins/vector/css/themes/light.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import "_base.scss";
|
||||
@import "../_components.scss";
|
||||
|
|
@ -17,13 +17,8 @@ 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 +34,8 @@ 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 +47,11 @@ 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;
|
||||
}
|
||||
|
|
@ -17,26 +17,16 @@ 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 #e5e5e5;
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +35,7 @@ limitations under the License.
|
|||
.mx_RightPanel_headerButtonGroup {
|
||||
margin-top: 6px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -68,12 +58,13 @@ 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 {
|
||||
font-size: 11px;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
font-weight: bold;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
|
@ -81,33 +72,23 @@ 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 #e5e5e5;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
-webkit-flex: 0 0 60px;
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -20,35 +20,23 @@ 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;
|
||||
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,13 +60,12 @@ limitations under the License.
|
|||
|
||||
.mx_RoomDirectory_tableWrapper {
|
||||
overflow-y: auto;
|
||||
-webkit-flex: 1 1 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_table {
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
color: $primary-fg-color;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
table-layout: fixed;
|
||||
|
|
@ -110,11 +97,11 @@ limitations under the License.
|
|||
padding-right: 5px;
|
||||
height: 15px;
|
||||
border-radius: 11px;
|
||||
background-color: #eaf5f0;
|
||||
background-color: $plinth-bg-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
color: #61c295;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_topic {
|
||||
|
|
@ -123,7 +110,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomDirectory_alias {
|
||||
font-size: 12px;
|
||||
color: #b3b3b3;
|
||||
color: $settings-grey-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_roomMemberCount {
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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 {
|
||||
|
|
@ -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,12 +67,12 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
|
|||
margin: 0;
|
||||
padding: 0px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #76cfa6;
|
||||
background-color: white;
|
||||
border: 1px solid $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
|
||||
background-color: #ddd;
|
||||
background-color: $focus-bg-color;
|
||||
}
|
||||
|
||||
.mx_NetworkDropdown_menu_network {
|
||||
|
|
@ -19,39 +19,27 @@ 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;
|
||||
/*
|
||||
background-color: #080;
|
||||
height: 20px;
|
||||
*/
|
||||
// background-color: #080;
|
||||
// height: 20px;
|
||||
}
|
||||
|
||||
.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,16 +66,13 @@ 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%;
|
||||
max-width: 240px;
|
||||
color: #fff;
|
||||
color: $lightbox-fg-color;
|
||||
}
|
||||
|
||||
.mx_ImageView_cancel {
|
||||
|
|
@ -114,10 +99,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 +110,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
color: #fff ! important;
|
||||
color: $lightbox-fg-color ! important;
|
||||
text-decoration: none ! important;
|
||||
}
|
||||
|
||||
|
|
@ -141,13 +126,9 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ImageView_rhs {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
order: 3;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 300px;
|
||||
/*
|
||||
background-color: #800;
|
||||
height: 20px;
|
||||
*/
|
||||
// background-color: #800;
|
||||
// height: 20px;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -15,15 +15,10 @@ 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;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +29,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_GuestWarningBar a {
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -15,15 +15,10 @@ 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;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -34,13 +29,12 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MatrixToolbar_content {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_link
|
||||
{
|
||||
color: #fff ! important;
|
||||
color: $accent-fg-color ! important;
|
||||
text-decoration: underline ! important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@ limitations under the License.
|
|||
margin-bottom: 7px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px dashed #76cfa6;
|
||||
color: #454545;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border: 1px dashed $accent-color;
|
||||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -18,21 +18,18 @@ 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 {
|
||||
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;
|
||||
width: auto;
|
||||
flex: 1 1 0;
|
||||
-webkit-flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_SearchBar_searchButton {
|
||||
|
|
@ -41,7 +38,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 +58,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 +71,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 {
|
||||
|
|
@ -58,7 +58,7 @@ limitations under the License.
|
|||
|
||||
.mx_UserNotifSettings_keywords {
|
||||
cursor: pointer;
|
||||
color: #76cfa6;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_UserSettings_devicesTable td {
|
||||
15
src/skins/vector/img/icon_context_message_dark.svg
Normal file
15
src/skins/vector/img/icon_context_message_dark.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon_context">
|
||||
<g>
|
||||
<path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#000" opacity="0.2"></path>
|
||||
<path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#FFF" opacity="0.6"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -20,14 +20,22 @@
|
|||
<meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
|
||||
<meta name="msapplication-config" content="vector-icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<% for(var i=0; i<htmlWebpackPlugin.files.css.length; i++) {%>
|
||||
<link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet">
|
||||
<% } %>
|
||||
<% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
|
||||
var file = htmlWebpackPlugin.files.css[i];
|
||||
var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/);
|
||||
if (match) {
|
||||
var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
|
||||
%>
|
||||
<link rel="alternate stylesheet" title="<%= title %>" href="<%= file %>">
|
||||
<% } else { %>
|
||||
<link rel="stylesheet" href="<%= file %>">
|
||||
<% }
|
||||
} %>
|
||||
</head>
|
||||
<body style="height: 100%;">
|
||||
<section id="matrixchat" style="height: 100%;"></section>
|
||||
<noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
|
||||
<% for(var i=0; i<htmlWebpackPlugin.files.js.length; i++) {%>
|
||||
<% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
|
||||
<script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
|
||||
<% } %>
|
||||
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
||||
|
|
|
|||
|
|
@ -28,9 +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('../../build/components.css');
|
||||
// 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');
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
@ -24,7 +28,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") },
|
||||
// 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
|
||||
|
|
|
|||
Loading…
Reference in a new issue