imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of https://github.com/vector-im/riot-web into rxl881/appTileStyling

Browse source
This commit is contained in:
Richard Lewis 2017-11-14 18:14:36 +00:00
commit 93eab05239
51 changed files with 1098 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/skins/vector/css/_common.scss
View file

@ -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;

2
src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
View file

@ -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;

23
src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
View file

@ -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 {

18
src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
View file

@ -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 {

2
src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
View file

@ -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;
}

2
src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
View file

@ -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;

2
src/skins/vector/css/matrix-react-sdk/views/dialogs/_ConfirmUserActionDialog.scss
View file

@ -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;

2
src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
View file

@ -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;

2
src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
View file

@ -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;

22
src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
View file

@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
// .mx_AppsDrawer {
// }
.mx_AppsDrawer {
margin: 5px;
}
.mx_AppsContainer {
display: flex;
@ -75,17 +76,22 @@ limitations under the License.
}
.mx_AppTileMenuBar {
// height: 15px;
margin: 0;
padding: 2px 10px;
// background-color: $e2e-verified-color;
border-bottom: 1px solid $primary-hairline-color;
font-size: 10px;
background-color: $widget-menu-bar-bg-color;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mx_AppTileMenuBarWidgets {
float: right;
display: flex;
flex-direction: row;
align-items: center;
}
.mx_AppTileMenuBarWidget {
// pointer-events: none;
@ -102,7 +108,7 @@ limitations under the License.
}
.mx_AppTileMenuBarWidget:hover {
border: 1px solid $primary-hairline-color;
border: 1px solid $primary-fg-color;
border-radius: 2px;
}
@ -194,8 +200,12 @@ form.mx_Custom_Widget_Form div {
.mx_AppPermissionWarning {
text-align: center;
padding: 30px 0;
background-color: $primary-bg-color;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mx_AppPermissionWarningImage {

23
src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
View file

@ -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,

14
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
View file

@ -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;
}

2
src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
View file

@ -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;

8
src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
View file

@ -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 {

18
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
View file

@ -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 {

3
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
View file

@ -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 {

16
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
View file

@ -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;

2
src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
View file

@ -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;

41
src/skins/vector/css/themes/_base.scss
View file

@ -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);
// ********************
@ -111,7 +121,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;
@ -131,3 +142,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;
}

14
src/skins/vector/css/themes/_dark.scss
View file

@ -30,6 +30,13 @@ $preview-bar-bg-color: #333;
// left-panel style muted accent color
$secondary-accent-color: $primary-bg-color;
// 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: #2d2d2e ! important; // deliberately off by one
}
// used by RoomDirectory permissions
$plinth-bg-color: #474747;
@ -60,6 +67,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 +100,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);
// ********************
@ -105,7 +116,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;

2
src/skins/vector/css/vector-web/structures/_LeftPanel.scss
View file

@ -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;

6
src/skins/vector/css/vector-web/structures/_RoomSubList.scss
View file

@ -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;
}

4
src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
View file

@ -56,3 +56,7 @@ limitations under the License.
.mx_MatrixToolbar_action {
margin-right: 16px;
}
.mx_MatrixToolbar_changelog {
white-space: pre;
}