Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
Weblate
commit
564ea8bfb2
47 changed files with 1019 additions and 157 deletions
|
|
@ -1,6 +1,10 @@
|
|||
{
|
||||
"default_hs_url": "https://matrix.org",
|
||||
"default_is_url": "https://vector.im",
|
||||
"disable_custom_urls": false,
|
||||
"disable_guests": false,
|
||||
"disable_login_language_selector": false,
|
||||
"disable_3pid_login": false,
|
||||
"brand": "Riot",
|
||||
"integrations_ui_url": "https://scalar.vector.im/",
|
||||
"integrations_rest_url": "https://scalar.vector.im/api",
|
||||
|
|
@ -10,6 +14,8 @@
|
|||
"feature_pinning": "labs"
|
||||
},
|
||||
"default_federate": true,
|
||||
"welcomePageUrl": "home.html",
|
||||
"default_theme": "light",
|
||||
"roomDirectory": {
|
||||
"servers": [
|
||||
"matrix.org"
|
||||
|
|
|
|||
68
docs/skinning thoughts.md
Normal file
68
docs/skinning thoughts.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
== Skinning refactor ==
|
||||
|
||||
matrix-react-sdk
|
||||
- base images
|
||||
- base CSS
|
||||
- all the components needed to build a workable app (including the top layer)
|
||||
|
||||
riot-web: the riot skin
|
||||
- riot-specific classes (e.g. login header/footer)
|
||||
- riot-specific themes
|
||||
- light
|
||||
- dark
|
||||
|
||||
i.e. the only things which should go into riot-web are bits which apply vector-specific skinning
|
||||
specifically "Stuff that any other brand would not want to use. (e.g. riot logos, links, T&Cs)"
|
||||
- Questions:
|
||||
- Electron app? (should probably be a separate repo in its own right? but might as well go here for now)
|
||||
- index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?)
|
||||
|
||||
ideally matrix-react-sdk itself should ship with a default skin which actually works built in.
|
||||
|
||||
status skin (can go in the same app for now)
|
||||
- has status theme
|
||||
- which inherits from riot light theme
|
||||
- how do we share graphics between skins?
|
||||
- shove them into react-sdk, or...
|
||||
- guess we do ../../vector/img
|
||||
- this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images)
|
||||
|
||||
out of scope:
|
||||
- making the components more independent, so they can be used in isolation.
|
||||
- that said, the bits which should probably be used by being embeded into a different app:
|
||||
- login/reg
|
||||
- RoomView + RoomSettings
|
||||
- MessageComposer
|
||||
- RoomList
|
||||
- MemberList
|
||||
- MemberInfo
|
||||
- Voip UI
|
||||
- UserSettings
|
||||
- sharing different js-sdks between the different isolated modules
|
||||
|
||||
other changes:
|
||||
- how do we handle i18n?
|
||||
- each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad.
|
||||
- ability to associate components with a given skin
|
||||
- skins/vector/src <-- components
|
||||
- skins/vector/css
|
||||
- skins/vector/img
|
||||
- skins/vector/fonts
|
||||
- gather together themes (per skin) into a single place too
|
||||
- skins/vector/themes/foo/css
|
||||
- skins/vector/themes/foo/img
|
||||
- skins/vector/themes/foo/fonts
|
||||
- ideally riot-web would contain almost nothing but skins/vector directory.
|
||||
- ability to entirely replace CSS rather than override it for a given theme
|
||||
- e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`.
|
||||
|
||||
random thoughts;
|
||||
- should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components?
|
||||
- might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime
|
||||
- if so, perhaps skins & themes should converge...
|
||||
|
||||
-----------------
|
||||
|
||||
Immediate plan for Status:
|
||||
* Implement it as a theme for the riot skin
|
||||
* Ideally move skins to a sensible level (possibly even including src?)
|
||||
192
res/home-status.html
Normal file
192
res/home-status.html
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<style type="text/css">
|
||||
|
||||
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
|
||||
* voodoo where we have to set display: none by default
|
||||
*/
|
||||
|
||||
.mx_HomePage_container {
|
||||
text-align: center;
|
||||
display: block ! important;
|
||||
width: 690px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.mx_HomePage_header {
|
||||
margin-top: 37px;
|
||||
margin-left: 10px;
|
||||
width: 670px;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
|
||||
border-radius: 5px;
|
||||
padding: 20px 80px 20px 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_HomePage_header h1 {
|
||||
font-size: 29px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_HomePage_intro h2 {
|
||||
margin-top: 32px;
|
||||
font-size: 25px;
|
||||
color: #49555F;
|
||||
}
|
||||
|
||||
.mx_HomePage_intro {
|
||||
margin: auto;
|
||||
width: 600px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mx_HomePage_coc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mx_HomePage_coc a {
|
||||
color: #4360DF;
|
||||
}
|
||||
|
||||
.mx_HomePage_room, .mx_HomePage_telegram {
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
width: 210px;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_HomePage_telegram {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(113, 129, 142, 0.2);
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mx_HomePage_telegram a {
|
||||
text-transform: uppercase;
|
||||
color: #4360DF;
|
||||
font-size: 13px;
|
||||
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||
font-weight: 600;
|
||||
opacity: 1.0;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.mx_HomePage_telegram a:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_HomePage_room .mx_HomePage_icon {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mx_HomePage_room .mx_HomePage_name {
|
||||
display: block;
|
||||
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #49555F;
|
||||
line-height: 25px;
|
||||
margin: 0px 12px 0px 12px;
|
||||
}
|
||||
|
||||
.mx_HomePage_room .mx_HomePage_desc {
|
||||
flex: 1;
|
||||
display: block;
|
||||
margin: 0px 12px 0px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.mx_HomePage_button {
|
||||
align-self: normal;
|
||||
margin: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(199, 206, 209, 0.12);
|
||||
background-color: #6CC1F6;
|
||||
font-size: 13px;
|
||||
font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #fff ! important;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="mx_HomePage_container">
|
||||
<div class="mx_HomePage_header">
|
||||
<div>
|
||||
<h1>Welcome to Status Community Chat, powered by Riot.</h1>
|
||||
<p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx_HomePage_intro">
|
||||
<h2>Our rooms</h2>
|
||||
<p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
|
||||
<p class="mx_HomePage_coc">Before posting please refer to our <a href="https://wiki.status.im/Code_of_conduct">Code of Conduct</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mx_HomePage_room">
|
||||
<img class="mx_HomePage_icon" src="themes/status/img/a.png">
|
||||
<span class="mx_HomePage_name">#announcements</span>
|
||||
<span class="mx_HomePage_desc">Company wide announcements.</span>
|
||||
<a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<img class="mx_HomePage_icon" src="themes/status/img/i.png">
|
||||
<span class="mx_HomePage_name">#introductions</span>
|
||||
<span class="mx_HomePage_desc">Newcomer introductions.</span>
|
||||
<a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<img class="mx_HomePage_icon" src="themes/status/img/g.png">
|
||||
<span class="mx_HomePage_name">#general</span>
|
||||
<span class="mx_HomePage_desc">General discussions of Status.</span>
|
||||
<a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<img class="mx_HomePage_icon" src="themes/status/img/d.png">
|
||||
<span class="mx_HomePage_name">#dev-status</span>
|
||||
<span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
|
||||
<a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<img class="mx_HomePage_icon" src="themes/status/img/n.png">
|
||||
<span class="mx_HomePage_name">#news-articles</span>
|
||||
<span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
|
||||
<a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
|
||||
</div>
|
||||
<div class="mx_HomePage_telegram">
|
||||
<p>
|
||||
Interested in market and cryptocurrency type discussions?
|
||||
</p>
|
||||
<a href="https://t.me/StatusNetworkChat">Join Telegram</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,10 +42,11 @@ const INCLUDE_LANGS = [
|
|||
const COPY_LIST = [
|
||||
["res/manifest.json", "webapp"],
|
||||
["res/home.html", "webapp"],
|
||||
["res/home-status.html", "webapp"],
|
||||
["res/home/**", "webapp/home"],
|
||||
["res/{media,vector-icons}/**", "webapp"],
|
||||
["res/flags/*", "webapp/flags/"],
|
||||
["src/skins/vector/{fonts,img}/**", "webapp"],
|
||||
["src/skins/vector/{fonts,img,themes}/**", "webapp"],
|
||||
["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
|
||||
["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
|
||||
["./config.json", "webapp", { directwatch: 1 }],
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default React.createClass({
|
|||
const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
|
||||
Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
|
||||
title: _t("What's New"),
|
||||
description: <pre className="changelog_text">{releaseNotes}</pre>,
|
||||
description: <div className="mx_MatrixToolbar_changelog">{releaseNotes}</div>,
|
||||
button: _t("Update"),
|
||||
onFinished: (update) => {
|
||||
if(update && PlatformPeg.get()) {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ limitations under the License.
|
|||
|
||||
var React = require('react');
|
||||
import { _t } from 'matrix-react-sdk/lib/languageHandler';
|
||||
import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'VectorLoginFooter',
|
||||
|
|
@ -26,6 +27,9 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
render: function() {
|
||||
// FIXME: replace this with a proper Status skin
|
||||
if (UserSettingsStore.getTheme() === 'status') return <div/>;
|
||||
|
||||
return (
|
||||
<div className="mx_Login_links">
|
||||
<a href="https://medium.com/@RiotChat">blog</a> ·
|
||||
|
|
|
|||
|
|
@ -33,9 +33,11 @@ module.exports = React.createClass({
|
|||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="mx_Login_header">
|
||||
<div className="mx_Login_logo">
|
||||
<img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2017 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
Copyright 2017 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -23,12 +24,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
/* Open Sans lacks combining diacritics, so these will fall through
|
||||
to the next font. Helevetica's diacritics however do not combine
|
||||
nicely with Open Sans (on OSX, at least) and result in a huge
|
||||
horizontal mess. Arial empirically gets it right, hence prioritising
|
||||
Arial here. */
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
font-size: 15px;
|
||||
background-color: $primary-bg-color;
|
||||
color: $primary-fg-color;
|
||||
|
|
@ -73,7 +69,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
|||
|
||||
/* Required by Firefox */
|
||||
textarea {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
/* Prevent ugly dotted highlight around selected elements in Firefox */
|
||||
|
|
@ -123,6 +119,19 @@ textarea {
|
|||
transition: height 120ms ease-out ! important;
|
||||
}
|
||||
|
||||
// These are magic constants which are excluded from tinting, to let themes
|
||||
// (which only have CSS, unlike skins) tell the app what their non-tinted
|
||||
// colourscheme is by inspecting the stylesheet DOM.
|
||||
//
|
||||
// They are not used for layout!!
|
||||
#mx_theme_accentColor {
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
#mx_theme_secondaryAccentColor {
|
||||
color: $secondary-accent-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_wrapper {
|
||||
position: fixed;
|
||||
z-index: 4000;
|
||||
|
|
@ -210,24 +219,19 @@ textarea {
|
|||
}
|
||||
|
||||
.mx_Dialog button, .mx_Dialog input[type="submit"] {
|
||||
border: 0px;
|
||||
height: 36px;
|
||||
border-radius: 40px;
|
||||
border: solid 1px $accent-color;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
@mixin mx_DialogButton;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
background-color: $primary-bg-color;
|
||||
|
||||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
// flip colours for the secondary ones
|
||||
font-weight: 600;
|
||||
border: 1px solid $accent-color ! important;
|
||||
color: $accent-color;
|
||||
background-color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
|
||||
|
|
@ -292,26 +296,18 @@ textarea {
|
|||
color: $selection-fg-color;
|
||||
}
|
||||
|
||||
/** green button with rounded corners */
|
||||
.mx_textButton {
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
border-radius: 17px;
|
||||
text-align: center;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
@mixin mx_DialogButton_small;
|
||||
}
|
||||
|
||||
.mx_textButton:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_button_row {
|
||||
margin-top: 69px;
|
||||
}
|
||||
|
||||
.changelog_text {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
}
|
||||
|
||||
.mx_Beta {
|
||||
color: red;
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ limitations under the License.
|
|||
.mx_SearchBox_search {
|
||||
flex: 1 1 auto;
|
||||
width: 0px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
margin-top: -2px;
|
||||
height: 24px;
|
||||
|
|
|
|||
|
|
@ -64,30 +64,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_UserSettings_button {
|
||||
@mixin mx_DialogButton;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_UserSettings_button.mx_UserSettings_buttonSmall {
|
||||
height: 36px;
|
||||
padding: 4px;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
line-height: 12px;
|
||||
.mx_UserSettings_button:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_UserSettings_button.danger {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login h2 {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 300;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -80,15 +79,14 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login_submit {
|
||||
@mixin mx_DialogButton;
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
border: 0px;
|
||||
background-color: $accent-color;
|
||||
font-size: 15px;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_submit:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_Login_submit:disabled {
|
||||
|
|
@ -137,8 +135,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_Login_forgot {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mx_Login_forgot:link {
|
||||
|
|
@ -224,7 +221,6 @@ limitations under the License.
|
|||
height: 16px;
|
||||
flex-shrink: 1;
|
||||
min-width: 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mx_Login_phoneNumberField {
|
||||
|
|
|
|||
|
|
@ -31,5 +31,5 @@ limitations under the License.
|
|||
.mx_BaseAvatar_image {
|
||||
border-radius: 40px;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
background-color: $avatar-bg-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ limitations under the License.
|
|||
{
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
margin: 0 !important;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ConfirmUserActionDialog_reasonField {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ limitations under the License.
|
|||
border: solid 1px $accent-color;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
padding-left: 1.5em;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
border: solid 1px $accent-color;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
margin-left: 0px;
|
||||
margin-right: 8px;
|
||||
padding-left: 0.5em;
|
||||
|
|
|
|||
|
|
@ -156,18 +156,17 @@ limitations under the License.
|
|||
.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background-image: $event-redacted-img;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line {
|
||||
/*
|
||||
Prevent changing colour of the background because
|
||||
$event-redacted-img matches $primary-bg-color
|
||||
*/
|
||||
background-color: initial !important;
|
||||
height: 22px;
|
||||
width: 250px;
|
||||
border-radius: 11px;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
$event-redacted-fg-color,
|
||||
$event-redacted-fg-color 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
);
|
||||
box-shadow: 0px 0px 3px $event-redacted-border-color inset;
|
||||
}
|
||||
|
||||
.mx_EventTile_highlight,
|
||||
|
|
|
|||
|
|
@ -26,19 +26,15 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberDeviceInfo_textButton {
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
border-radius: 17px;
|
||||
text-align: center;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border: 0px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
@mixin mx_DialogButton_small;
|
||||
margin: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_textButton:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceId {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
.mx_MemberList_query,
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
|
|
|
|||
|
|
@ -55,9 +55,11 @@ limitations under the License.
|
|||
.mx_MessageComposer_noperm_error {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: $greyed-fg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input_wrapper {
|
||||
|
|
@ -138,7 +140,7 @@ limitations under the License.
|
|||
max-height: 120px;
|
||||
overflow: auto;
|
||||
/* needed for FF */
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
/* hack for FF as vertical alignment of custom placeholder text is broken */
|
||||
|
|
@ -175,6 +177,8 @@ limitations under the License.
|
|||
.mx_MessageComposer_formatting {
|
||||
cursor: pointer;
|
||||
margin: 0 11px;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_formatbar_wrapper {
|
||||
|
|
|
|||
|
|
@ -42,22 +42,14 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_textButton {
|
||||
height: 36px;
|
||||
background-color: $accent-color;
|
||||
border-radius: 36px;
|
||||
@mixin mx_DialogButton;
|
||||
margin-right: 8px;
|
||||
color: $accent-fg-color;
|
||||
line-height: 34px;
|
||||
margin-top: -2px;
|
||||
text-align: center;
|
||||
margin-top: -5px;
|
||||
order: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
flex: 0 0 90px;
|
||||
*/
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
.mx_RoomHeader_textButton:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_textButton_danger {
|
||||
|
|
|
|||
|
|
@ -50,10 +50,11 @@ limitations under the License.
|
|||
color: $primary-fg-color;
|
||||
background-color: $droptarget-bg-color;
|
||||
border-radius: 4px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.mx_RoomList_emptySubListTip .mx_RoleButton {
|
||||
vertical-align: -3px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
.mx_RoomList_headerButtons {
|
||||
|
|
|
|||
|
|
@ -22,18 +22,16 @@ limitations under the License.
|
|||
|
||||
.mx_RoomSettings_leaveButton,
|
||||
.mx_RoomSettings_unbanButton {
|
||||
@mixin mx_DialogButton;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
background-color: $accent-color;
|
||||
border-radius: 36px;
|
||||
margin-right: 8px;
|
||||
color: $accent-fg-color;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_leaveButton:hover,
|
||||
.mx_RoomSettings_unbanButton:hover {
|
||||
@mixin mx_DialogButton_hover;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_integrationsButton_error {
|
||||
position: relative;
|
||||
cursor: not-allowed;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_SearchableEntityList_query {
|
||||
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
font-family: $font-family;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
padding: 9px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
/* Open Sans lacks combining diacritics, so these will fall through
|
||||
to the next font. Helevetica's diacritics however do not combine
|
||||
nicely with Open Sans (on OSX, at least) and result in a huge
|
||||
horizontal mess. Arial empirically gets it right, hence prioritising
|
||||
Arial here. */
|
||||
$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #454545;
|
||||
|
|
@ -65,6 +71,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5);
|
|||
$menu-bg-color: #f6f6f6;
|
||||
|
||||
$avatar-initial-color: #ffffff;
|
||||
$avatar-bg-color: #ffffff;
|
||||
|
||||
$h3-color: #3d3b39;
|
||||
|
||||
|
|
@ -98,6 +105,9 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
|
|||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #d3efe1;
|
||||
$roomsublist-chevron-color: $accent-color;
|
||||
|
||||
$panel-divider-color: rgba(118, 207, 166, 0.2);
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -107,7 +117,8 @@ $event-sending-color: #ddd;
|
|||
$event-notsent-color: #f44;
|
||||
|
||||
// event redaction
|
||||
$event-redacted-img: url('../../img/redacted.jpg');
|
||||
$event-redacted-fg-color: #e2e2e2;
|
||||
$event-redacted-border-color: #cccccc;
|
||||
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
|
@ -127,3 +138,31 @@ $lightbox-border-color: #ffffff;
|
|||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
||||
|
||||
// ***** Mixins! *****
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 36px;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_hover {
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_small {
|
||||
@mixin mx_DialogButton;
|
||||
font-size: 15px;
|
||||
padding: 0px 1.5em 0px 1.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ $menu-border-color: rgba(187, 187, 187, 0.5);
|
|||
$menu-bg-color: #373737;
|
||||
|
||||
$avatar-initial-color: #2d2d2d;
|
||||
$avatar-bg-color: #ffffff;
|
||||
|
||||
$h3-color: $primary-fg-color;
|
||||
|
||||
|
|
@ -92,6 +93,9 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
|
|||
|
||||
$roomsublist-label-fg-color: $h3-color;
|
||||
$roomsublist-label-bg-color: #454545;
|
||||
$roomsublist-chevron-color: $accent-color;
|
||||
|
||||
$panel-divider-color: rgba(118, 207, 166, 0.2);
|
||||
|
||||
// ********************
|
||||
|
||||
|
|
@ -101,7 +105,8 @@ $event-sending-color: #888;
|
|||
$event-notsent-color: #f44;
|
||||
|
||||
// event redaction
|
||||
$event-redacted-img: url('../../img/redacted-dark.jpg');
|
||||
$event-redacted-fg-color: #606060;
|
||||
$event-redacted-border-color: #000000;
|
||||
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ limitations under the License.
|
|||
.mx_LeftPanel .mx_BottomLeftMenu {
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid rgba(118, 207, 166, 0.2);
|
||||
border-top: 1px solid $panel-divider-color;
|
||||
margin-left: 16px; /* gutter */
|
||||
margin-right: 16px; /* gutter */
|
||||
flex: 0 0 60px;
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ limitations under the License.
|
|||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 6px solid $accent-color;
|
||||
border-top: 6px solid $roomsublist-chevron-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 $accent-color;
|
||||
border-bottom: 6px solid $roomsublist-chevron-color;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevronRight {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 6px solid $accent-color;
|
||||
border-left: 6px solid $roomsublist-chevron-color;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,7 @@ limitations under the License.
|
|||
.mx_MatrixToolbar_action {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx_MatrixToolbar_changelog {
|
||||
white-space: pre;
|
||||
}
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="24px" height="18px" viewBox="0 0 24 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="02_x-Chat-text-input-" transform="translate(-829.000000, -729.000000)">
|
||||
<g id="button_text_formatting" transform="translate(829.000000, 729.000000)">
|
||||
<rect id="Rectangle-111" fill="#F6F6F6" x="0" y="0" width="24" height="18" rx="9"></rect>
|
||||
<text id="Aa" font-family="OpenSans-Bold, Open Sans" font-size="12" font-weight="bold" letter-spacing="-1.20000005" fill="#4A4A4A">
|
||||
<tspan x="5" y="13">A</tspan>
|
||||
<tspan x="12.0792968" y="13" font-family="OpenSans-Italic, Open Sans" font-style="italic" font-weight="normal">a</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 24 18" style="enable-background:new 0 0 24 18;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F6F6F6;}
|
||||
.st1{enable-background:new ;}
|
||||
.st2{fill:#4A4A4A;}
|
||||
</style>
|
||||
<path id="Rectangle-111" class="st0" d="M9,0h6c5,0,9,4,9,9l0,0c0,5-4,9-9,9H9c-5,0-9-4-9-9l0,0C0,4,4,0,9,0z"/>
|
||||
<g class="st1">
|
||||
<path class="st2" d="M11.3,13l-0.6-2H7.6L7,13H5l3-8.6h2.2l3,8.6H11.3z M10.3,9.4c-0.6-1.8-0.9-2.9-1-3.1S9.2,5.9,9.1,5.7
|
||||
C9,6.2,8.6,7.5,8,9.4H10.3z"/>
|
||||
</g>
|
||||
<g class="st1">
|
||||
<path class="st2" d="M15.8,6.5c0.4,0,0.7,0.1,1,0.3s0.5,0.5,0.7,0.8h0.1l0.4-1h0.7L17.3,13h-0.8l0.2-1.2h0
|
||||
c-0.7,0.9-1.4,1.3-2.2,1.3c-0.5,0-1-0.2-1.3-0.6s-0.5-0.9-0.5-1.6c0-0.8,0.1-1.6,0.4-2.3s0.7-1.2,1.1-1.6S15.2,6.5,15.8,6.5z
|
||||
M14.7,12.3c0.4,0,0.8-0.2,1.1-0.5s0.7-0.8,0.9-1.4s0.4-1.2,0.4-1.7c0-0.4-0.1-0.7-0.3-1s-0.5-0.4-0.9-0.4c-0.4,0-0.8,0.2-1.1,0.5
|
||||
S14.2,8.6,14,9.2s-0.3,1.2-0.3,1.8c0,0.4,0.1,0.8,0.3,1S14.4,12.3,14.7,12.3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
BIN
src/skins/vector/img/logos/riot-im-logo-1.png
Normal file
BIN
src/skins/vector/img/logos/riot-im-logo-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
232
src/skins/vector/themes/status/css/_StatusLogin.scss
Normal file
232
src/skins/vector/themes/status/css/_StatusLogin.scss
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/*
|
||||
Copyright 2017 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// overrides for mx_Login* specific to Status.
|
||||
// Ideally this would be all Status prefixes for a Status specific version of the component
|
||||
// but given we're not doing Status as a dedicated 'skin' yet...
|
||||
|
||||
.mx_StatusLogin {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
.mx_StatusLogin_brand {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_header {
|
||||
text-align: center;
|
||||
margin-top: 70px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_header h1 {
|
||||
font-size: 29px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_subtitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_subtitle a {
|
||||
color: $riot-link-color;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_footer {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: $footer-color;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_footer p {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_footer_cta {
|
||||
color: $callout-color;
|
||||
font-family: $header-font-family;
|
||||
letter-spacing: 1px;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
opacity: 1.0;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.mx_StatusLogin_footer_cta:hover {
|
||||
opacity: 0.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// overrides of .mx_Login
|
||||
|
||||
.mx_Login_box {
|
||||
width: 330px;
|
||||
min-height: initial;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 8px;
|
||||
color: $form-fg-color;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
background-color: $form-bg-color;
|
||||
background-image: url(../../themes/status/img/dot.svg);
|
||||
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_Login_logo {
|
||||
background-color: #fff;
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
border-radius: 37px;
|
||||
box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2);
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
left: 50%;
|
||||
margin-left: -36px;
|
||||
}
|
||||
|
||||
.mx_Login_logo img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 19px;
|
||||
}
|
||||
|
||||
.mx_Login_box h2 {
|
||||
text-align: center;
|
||||
color: $form-fg-color;
|
||||
font-size: 25px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mx_Login_field {
|
||||
width: 260px;
|
||||
height: 27px;
|
||||
padding: 8px 20px 10px 20px;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
border: 1px solid transparent;
|
||||
background-color: $form-field-bg-color;
|
||||
color: $form-field-fg-color;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
margin-bottom: 14px;
|
||||
transition: background-color .2s ease;
|
||||
}
|
||||
|
||||
.mx_Login_field:focus {
|
||||
border: 1px solid transparent;
|
||||
background-color: $form-field-bg-hover-color;
|
||||
}
|
||||
|
||||
.mx_Login_field::-webkit-input-placeholder {
|
||||
font-family: $font-family;
|
||||
color: $form-field-fg-color;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mx_Login_field::-moz-placeholder {
|
||||
font-family: $font-family;
|
||||
color: $form-field-fg-color;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.mx_Login_field_disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.mx_Login_prompt {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mx_Login_submit {
|
||||
min-width: 200px;
|
||||
width: auto;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_Login_submit:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.mx_Login_create {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.mx_Login_create:link,
|
||||
.mx_Login_create:hover,
|
||||
.mx_Login_create:visited
|
||||
{
|
||||
color: $form-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_forgot {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mx_Login_forgot:link,
|
||||
.mx_Login_forgot:hover,
|
||||
.mx_Login_forgot:visited
|
||||
{
|
||||
color: $form-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_error {
|
||||
color: $warning-color;
|
||||
font-size: 18px;
|
||||
width: 300px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_Login_smallError {
|
||||
font-size: 13px;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
}
|
||||
276
src/skins/vector/themes/status/css/_status.scss
Normal file
276
src/skins/vector/themes/status/css/_status.scss
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
@font-face {
|
||||
font-family:PostGrotesk-Medium;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:PostGrotesk-Book;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
|
||||
// N.B. that the status.im website uses:
|
||||
// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
|
||||
// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now.
|
||||
|
||||
$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #70808D;
|
||||
$primary-bg-color: #EEF2F5;
|
||||
|
||||
// ***** Start of Status theme specifics ******
|
||||
$header-color: #49555F;
|
||||
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
|
||||
|
||||
$footer-color: #8D99A4;
|
||||
|
||||
$riot-link-color: #A26988;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
color: $header-color;
|
||||
font-family: $header-font-family;
|
||||
font-weight: 400 ! important;
|
||||
}
|
||||
|
||||
$callout-color: #4360DF; // or #4957b8 from status.im homepage
|
||||
|
||||
$form-bg-color: $callout-color;
|
||||
$form-fg-color: #ffffff;
|
||||
|
||||
$form-field-bg-color: rgba(244, 242, 247, 0.12);
|
||||
$form-field-bg-hover-color: rgba(255, 255, 255, 0.2);
|
||||
$form-field-fg-color: #ffffff;
|
||||
|
||||
// ***** End of Status theme specifics ******
|
||||
|
||||
|
||||
// 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: #6CC1F6;
|
||||
$accent-hover-color: #84cfff;
|
||||
|
||||
$selection-fg-color: $primary-bg-color;
|
||||
|
||||
$focus-brightness: 125%;
|
||||
|
||||
// red warning colour
|
||||
$warning-color: #F69E98;
|
||||
$mention-user-pill-bg-color: #ff0064;
|
||||
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
$group-alert-color: #774f7e;
|
||||
|
||||
$preview-bar-bg-color: #f7f7f7;
|
||||
|
||||
// left-panel style muted accent color
|
||||
$secondary-accent-color: #586C7B;
|
||||
|
||||
// stop the tinter trying to change the secondary accent color
|
||||
// by overriding the key to something untintable
|
||||
// XXX: this is a bit of a hack.
|
||||
#mx_theme_secondaryAccentColor {
|
||||
color: #586C7C ! important; // deliberately off by one
|
||||
}
|
||||
|
||||
// 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: #c9cfd4;
|
||||
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #c7c7c7;
|
||||
|
||||
// used for UserSettings EditableText
|
||||
$input-underline-color: rgba(151, 151, 151, 0.5);
|
||||
$input-fg-color: rgba(74, 74, 74, 0.9);
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #f6f6f6;
|
||||
|
||||
$avatar-initial-color: #ffffff;
|
||||
$avatar-bg-color: transparent;
|
||||
|
||||
$h3-color: #3d3b39;
|
||||
|
||||
$dialog-background-bg-color: #e9e9e9;
|
||||
$lightbox-background-bg-color: #000;
|
||||
|
||||
$greyed-fg-color: #888;
|
||||
|
||||
$neutral-badge-color: #dbdbdb;
|
||||
|
||||
$preview-widget-bar-color: #ddd;
|
||||
$preview-widget-fg-color: $greyed-fg-color;
|
||||
|
||||
$blockquote-bar-color: #ddd;
|
||||
$blockquote-fg-color: #777;
|
||||
|
||||
$settings-grey-fg-color: #a2a2a2;
|
||||
|
||||
$voip-decline-color: #f48080;
|
||||
$voip-accept-color: #80f480;
|
||||
|
||||
$rte-bg-color: #e9e9e9;
|
||||
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
|
||||
$rte-room-pill-color: #aaa;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: #ffffff;
|
||||
$roomtile-selected-bg-color: #465561;
|
||||
$roomtile-focused-bg-color: #6d8597;
|
||||
|
||||
$roomsublist-label-fg-color: #ffffff;
|
||||
$roomsublist-label-bg-color: $secondary-accent-color;
|
||||
$roomsublist-chevron-color: #ffffff;
|
||||
|
||||
$panel-divider-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
// ********************
|
||||
|
||||
// event tile lifecycle
|
||||
$event-encrypting-color: #abddbc;
|
||||
$event-sending-color: #ddd;
|
||||
$event-notsent-color: #f44;
|
||||
|
||||
// event redaction
|
||||
$event-redacted-fg-color: #e2e2e2;
|
||||
$event-redacted-border-color: #cccccc;
|
||||
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
$edit-button-url: "../../img/icon_context_message.svg";
|
||||
$copy-button-url: "../../img/icon_copy_message.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
// unused?
|
||||
$progressbar-color: #000;
|
||||
|
||||
@define-mixin mx_DialogButton {
|
||||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(199, 206, 209, 0.12);
|
||||
background-color: $accent-color;
|
||||
font-size: 13px;
|
||||
font-family: $header-font-family;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: $accent-fg-color;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
display: inline-block;
|
||||
transition: background-color .2s ease;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_hover {
|
||||
background-color: $accent-hover-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_small {
|
||||
@mixin mx_DialogButton;
|
||||
height: auto;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label {
|
||||
font-size: 13px;
|
||||
font-family: $header-font-family;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
// FIXME: all these ! importants are horrid - we should instead go and define
|
||||
// variables or something.
|
||||
.mx_SearchBox_search {
|
||||
color: #fff ! important;
|
||||
}
|
||||
|
||||
.mx_SearchBox_search::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.6) ! important;
|
||||
}
|
||||
|
||||
.mx_SearchBox_search::-moz-placeholder {
|
||||
color: rgba(255, 255, 255, 0.6) ! important;
|
||||
}
|
||||
|
||||
.mx_RoomList_emptySubListTip,
|
||||
.mx_RoomDropTarget {
|
||||
font-size: 14px ! important;
|
||||
border: 1.5px dashed rgba(0,0,0,0.2) ! important;
|
||||
color: #fff ! important;
|
||||
background-color: transparent ! important;
|
||||
border-radius: 6px ! important;
|
||||
margin-left: 6px ! important;
|
||||
margin-right: 6px ! important;
|
||||
margin-top: 8px ! important;
|
||||
margin-bottom: 7px ! important;
|
||||
padding: 8px ! important;
|
||||
}
|
||||
|
||||
.mx_RoomDirectory_perm {
|
||||
font-family: $header-font-family ! important;
|
||||
background-color: #fff ! important;
|
||||
}
|
||||
|
||||
.mx_RoomTile_badge,
|
||||
.mx_RoomSubList_badge {
|
||||
height: 12px ! important;
|
||||
padding-top: 1px ! important;
|
||||
padding-bottom: 1px ! important;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_chevron {
|
||||
top: 8px ! important;
|
||||
}
|
||||
4
src/skins/vector/themes/status/css/status.scss
Normal file
4
src/skins/vector/themes/status/css/status.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import "../../../css/themes/_base.scss";
|
||||
@import "_status.scss";
|
||||
@import "../../../css/_components.scss";
|
||||
@import "_StatusLogin.scss";
|
||||
1
src/skins/vector/themes/status/fonts/README
Normal file
1
src/skins/vector/themes/status/fonts/README
Normal file
|
|
@ -0,0 +1 @@
|
|||
We link out to status.im for fonts, although ideally we'd put them here.
|
||||
BIN
src/skins/vector/themes/status/img/a.png
Normal file
BIN
src/skins/vector/themes/status/img/a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/skins/vector/themes/status/img/d.png
Normal file
BIN
src/skins/vector/themes/status/img/d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
1
src/skins/vector/themes/status/img/dot.svg
Normal file
1
src/skins/vector/themes/status/img/dot.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><circle cx="10" cy="10" r="1" fill="#FFF" fill-rule="evenodd" opacity=".11"/></svg>
|
||||
|
After Width: | Height: | Size: 189 B |
BIN
src/skins/vector/themes/status/img/g.png
Normal file
BIN
src/skins/vector/themes/status/img/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/skins/vector/themes/status/img/i.png
Normal file
BIN
src/skins/vector/themes/status/img/i.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
16
src/skins/vector/themes/status/img/logo.svg
Normal file
16
src/skins/vector/themes/status/img/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
BIN
src/skins/vector/themes/status/img/n.png
Normal file
BIN
src/skins/vector/themes/status/img/n.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -20,15 +20,14 @@
|
|||
<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">
|
||||
<meta property="og:image" content="https://chat.status.im/img/logos/riot-im-logo-1.png" />
|
||||
<% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
|
||||
var file = htmlWebpackPlugin.files.css[i];
|
||||
var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
|
||||
if (match) {
|
||||
var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
|
||||
var light = match[1] == 'light';
|
||||
%>
|
||||
<link rel="<%= light ? '' : 'alternate ' %>stylesheet" title="<%= title %>"
|
||||
href="<%= file %>">
|
||||
<link rel="stylesheet" disabled title="<%= title %>" href="<%= file %>">
|
||||
<% } else { %>
|
||||
<link rel="stylesheet" href="<%= file %>">
|
||||
<% }
|
||||
|
|
@ -73,5 +72,7 @@
|
|||
<source src="media/busy.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
<audio id="remoteAudio"/>
|
||||
<!-- let CSS themes pass constants to the app -->
|
||||
<div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ import {parseQs, parseQsFromFragment} from './url_utils';
|
|||
import Platform from './platform';
|
||||
|
||||
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
|
||||
import Tinter from 'matrix-react-sdk/lib/Tinter';
|
||||
|
||||
var lastLocationHashSet = null;
|
||||
|
||||
|
|
@ -250,18 +251,32 @@ async function loadApp() {
|
|||
|
||||
if (!preventRedirect) {
|
||||
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
|
||||
// FIXME: ugly status hardcoding
|
||||
if (UserSettingsStore.getTheme() === 'status') {
|
||||
window.location = "https://status.im/join-riot.html";
|
||||
return;
|
||||
}
|
||||
else {
|
||||
if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
|
||||
window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067";
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (/Android/.test(navigator.userAgent)) {
|
||||
// FIXME: ugly status hardcoding
|
||||
if (UserSettingsStore.getTheme() === 'status') {
|
||||
window.location = "https://status.im/join-riot.html";
|
||||
return;
|
||||
}
|
||||
else {
|
||||
if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
|
||||
window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Load the config file. First try to load up a domain-specific config of the
|
||||
// form "config.$domain.json" and if that fails, fall back to config.json.
|
||||
|
|
@ -281,6 +296,29 @@ async function loadApp() {
|
|||
configError = e;
|
||||
}
|
||||
|
||||
// as quickly as we possibly can, set a default theme...
|
||||
const styleElements = Object.create(null);
|
||||
let a;
|
||||
const theme = configJson.default_theme || 'light';
|
||||
for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
|
||||
const href = a.getAttribute("href");
|
||||
// shouldn't we be using the 'title' tag rather than the href?
|
||||
const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/);
|
||||
if (match) {
|
||||
if (match[1] === theme) {
|
||||
// remove the disabled flag off the stylesheet
|
||||
a.removeAttribute("disabled");
|
||||
|
||||
// in case the Tinter.tint() in MatrixChat fires before the
|
||||
// CSS has actually loaded (which in practice happens)
|
||||
a.onload = () => {
|
||||
Tinter.setTheme(theme);
|
||||
Tinter.tint();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser')) {
|
||||
console.log('User has previously accepted risks in using an unsupported browser');
|
||||
validBrowser = true;
|
||||
|
|
@ -304,7 +342,7 @@ async function loadApp() {
|
|||
config={configJson}
|
||||
realQueryParams={params}
|
||||
startingFragmentQueryParams={fragparts.params}
|
||||
enableGuest={true}
|
||||
enableGuest={!configJson.disable_guests}
|
||||
onTokenLoginCompleted={onTokenLoginCompleted}
|
||||
initialScreenAfterLogin={getScreenFromLocation(window.location)}
|
||||
defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}
|
||||
|
|
|
|||
|
|
@ -546,6 +546,8 @@ describe('loading:', function () {
|
|||
);
|
||||
});
|
||||
|
||||
/*
|
||||
// ILAG renders this obsolete. I think.
|
||||
it('should allow us to return to the app', function() {
|
||||
const login = ReactTestUtils.findRenderedComponentWithType(
|
||||
matrixChat, sdk.getComponent('structures.login.Login')
|
||||
|
|
@ -568,6 +570,7 @@ describe('loading:', function () {
|
|||
matrixChat, sdk.getComponent('structures.HomePage'));
|
||||
});
|
||||
});
|
||||
*/
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ module.exports = {
|
|||
// CSS themes
|
||||
"theme-light": "./src/skins/vector/css/themes/light.scss",
|
||||
"theme-dark": "./src/skins/vector/css/themes/dark.scss",
|
||||
"theme-status": "./src/skins/vector/themes/status/css/status.scss",
|
||||
},
|
||||
module: {
|
||||
preLoaders: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue