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

experiments in dharma

Browse source
This commit is contained in:
Matthew Hodgson 2018-05-25 03:17:29 +01:00
parent 693ccf69c7
commit 3bf28a08ec
30 changed files with 454 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -1,6 +1,5 @@
// autogenerated by rethemendex.sh
@import "./_common.scss";
@import "./_fonts.scss";
@import "./structures/_CompatibilityPage.scss";
@import "./structures/_ContextualMenu.scss";
@import "./structures/_CreateRoom.scss";
@ -19,6 +18,7 @@
@import "./structures/_RoomView.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_TopLeftMenu.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_UserSettings.scss";
@import "./structures/_ViewSource.scss";

18
res/css/structures/_LeftPanel.scss
View file

@ -19,27 +19,29 @@ limitations under the License.
display: flex;
flex-direction: column;
border-right: 1px solid $panel-divider-color;
}
.mx_LeftPanel_container {
display: flex;
/* LeftPanel 235px */
flex: 0 0 235px;
/* LeftPanel 260px */
flex: 0 0 260px;
}
.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + LeftPanel 235px */
flex: 0 0 295px;
/* TagPanel 70px + LeftPanel 260px */
flex: 0 0 330px;
}
.mx_LeftPanel_container_collapsed {
/* Collapsed LeftPanel 60px */
flex: 0 0 60px;
/* Collapsed LeftPanel 70px */
flex: 0 0 70px;
}
.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 60px + Collapsed LeftPanel 60px */
flex: 0 0 120px;
/* TagPanel 70px + Collapsed LeftPanel 70px */
flex: 0 0 140px;
}
.mx_LeftPanel_hideButton {

6
res/css/structures/_MatrixChat.scss
View file

@ -58,10 +58,8 @@ limitations under the License.
.mx_MatrixChat .mx_LeftPanel {
order: 1;
background-color: $secondary-accent-color;
flex: 0 0 235px;
flex: 0 0 260px;
}
.mx_MatrixChat .mx_LeftPanel.collapsed {
@ -71,8 +69,6 @@ limitations under the License.
.mx_MatrixChat .mx_MatrixChat_middlePanel {
order: 2;
padding-left: 20px;
padding-right: 22px;
background-color: $primary-bg-color;
flex: 1;

8
res/css/structures/_RoomView.scss
View file

@ -27,12 +27,11 @@ limitations under the License.
.mx_RoomView .mx_RoomHeader {
order: 1;
flex: 0 0 70px;
flex: 0 0 52px;
}
.mx_RoomView_fileDropTarget {
min-width: 0px;
max-width: 960px;
width: 100%;
font-size: 18px;
text-align: center;
@ -50,7 +49,7 @@ limitations under the License.
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
top: 70px;
top: 52px;
bottom: 0px;
z-index: 3000;
}
@ -66,7 +65,6 @@ limitations under the License.
order: 2;
min-width: 0px;
max-width: 960px;
width: 100%;
margin: 0px auto;
@ -115,7 +113,6 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
max-width: 960px;
margin: auto;
min-height: 100%;
@ -187,7 +184,6 @@ hr.mx_RoomView_myReadMarker {
}
.mx_RoomView_statusAreaBox {
max-width: 960px;
margin: auto;
min-height: 50px;
}

22
res/css/structures/_TagPanel.scss
View file

@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_TagPanel {
flex: 0 0 60px;
background-color: $tertiary-accent-color;
flex: 0 0 70px;
background-color: $tagpanel-bg-color;
cursor: pointer;
display: flex;
@ -35,6 +35,8 @@ limitations under the License.
display: flex;
justify-content: center;
align-items: flex-start;
display: none;
}
.mx_TagPanel .mx_TagPanel_clearButton object {
@ -47,6 +49,7 @@ limitations under the License.
height: 0px;
width: 42px;
border-bottom: 1px solid $panel-divider-color;
display: none;
}
.mx_TagPanel .mx_TagPanel_scroller {
@ -57,19 +60,21 @@ limitations under the License.
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
height: 100%;
}
.mx_TagPanel .mx_TagTile {
padding: 6px 3px;
opacity: 0.5;
padding-top: 9px;
padding-bottom: 9px;
// opacity: 0.5;
position: relative;
}
.mx_TagPanel .mx_TagTile:focus,
.mx_TagPanel .mx_TagTile:hover,
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
opacity: 1;
// opacity: 1;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
@ -80,12 +85,12 @@ limitations under the License.
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
border: 3px solid $accent-color;
background-color: $accent-color;
border-radius: 60px;
border-radius: 40px;
/* In case this is a "initial" avatar */
display: block;
height: 35px;
width: 35px;
height: 40px;
width: 40px;
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
@ -119,6 +124,7 @@ limitations under the License.
margin-bottom: 17px;
margin-top: 18px;
height: 25px;
display: none;
}
.mx_TagPanel_groupsButton object {

41
res/css/structures/_TopLeftMenu.scss Normal file
View file

@ -0,0 +1,41 @@
/*
Copyright 2018 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.
*/
.mx_TopLeftMenu {
height: 52px;
border-bottom: 1px solid $panel-divider-color;
color: $topleftmenu-color;
background-color: $primary-bg-color;
display: flex;
}
.mx_TopLeftMenu_avatar {
position: relative; // to get avatar in the right place
margin-left: 15px;
margin-right: 15px;
margin-top: 14px;
}
.mx_TopLeftMenu_name {
margin-top: 15px;
margin-right: 9px;
font-size: 18px;
font-weight: 600;
}
.mx_TopLeftMenu_chevron {
margin-top: 26px;
}

2
res/css/views/rooms/_MessageComposer.scss
View file

@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_MessageComposer_wrapper {
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 1px solid $primary-hairline-color;
@ -196,7 +195,6 @@ limitations under the License.
.mx_MessageComposer_formatbar {
margin: auto;
max-width: 960px;
display: flex;
height: 30px;

46
res/css/views/rooms/_RoomHeader.scss
View file

@ -20,15 +20,15 @@ limitations under the License.
}
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 70px;
height: 52px;
align-items: center;
display: flex;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
display: flex;
margin-left: 15px;
order: 1;
flex: 1;
overflow: hidden;
@ -72,15 +72,15 @@ limitations under the License.
}
.mx_RoomHeader_info {
display: table-cell;
width: 100%;
vertical-align: middle;
display: flex;
flex: 1;
align-items: center;
}
.mx_RoomHeader_simpleHeader {
line-height: 70px;
color: $primary-fg-color;
font-size: 22px;
line-height: 52px;
color: $roomheader-color;
font-size: 18px;
font-weight: bold;
overflow: hidden;
margin-left: 63px;
@ -99,15 +99,12 @@ limitations under the License.
}
.mx_RoomHeader_name {
vertical-align: middle;
width: 100%;
height: 31px;
overflow: hidden;
color: $primary-fg-color;
color: $roomheader-color;
font-weight: bold;
font-size: 22px;
padding-left: 19px;
padding-right: 16px;
font-size: 18px;
padding-left: 15px;
padding-right: 15px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
@ -166,25 +163,20 @@ limitations under the License.
}
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: $settings-grey-fg-color;
font-weight: 300;
color: $roomtopic-color;
font-weight: 400;
font-size: 13px;
margin-left: 19px;
margin-right: 16px;
margin-right: 13px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
column-width: 960px;
}
.mx_RoomHeader_avatar {
display: table-cell;
width: 48px;
height: 50px;
vertical-align: middle;
flex: 0;
width: 28px;
height: 28px;
}
.mx_RoomHeader_avatar .mx_BaseAvatar_image {

22
res/css/views/rooms/_RoomTile.scss
View file

@ -17,9 +17,10 @@ limitations under the License.
.mx_RoomTile {
position: relative;
cursor: pointer;
font-size: 13px;
font-size: 14px;
display: block;
height: 34px;
height: 40px;
margin: 0px 9px 0px 9px;
background-color: $secondary-accent-color;
}
@ -44,12 +45,12 @@ limitations under the License.
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 6px;
width: 24px;
height: 24px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 14px;
padding-right: 12px;
width: 32px;
height: 32px;
vertical-align: middle;
}
@ -154,9 +155,14 @@ limitations under the License.
}
.mx_RoomTile_selected {
border-radius: 4px;
background-color: $roomtile-selected-bg-color;
}
.mx_RoomTile_selected .mx_RoomTile_name {
color: $roomtile-selected-color;
}
.mx_DNDRoomTile {
transform: none;
transition: transform 0.2s;

BIN
res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf Normal file
View file

Binary file not shown.

BIN
res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf Normal file
View file

Binary file not shown.

17
res/img/topleft-chevron.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>dropdown</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="matrix-my-stuff-no-lines-message-context-menu-smaller-icons" transform="translate(-203.000000, -25.000000)" stroke="#212121" stroke-width="1.3">
<g id="Group-3" transform="translate(128.000000, 15.000000)">
<g id="dropdown" transform="translate(76.000000, 11.000000)">
<path d="M0.5,0.5 L4.35868526,3.75422271" id="Line-5"></path>
<path d="M8.13193273,0.560421385 L4.35868526,3.75422271" id="Line-5-Copy"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,017 B

188
res/themes/dharma/css/_dharma.scss Normal file
View file

@ -0,0 +1,188 @@
@import "_fonts.scss";
// XXX: check this?
/* Nunito 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: 'Nunito', Arial, Helvetica, Sans-Serif;
// 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;
$focus-brightness: 125%;
// red warning colour
$warning-color: #ff0064;
$mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// pinned events indicator
$pinned-unread-color: #ff0064; // $warning-color
$pinned-color: #888;
// informational plinth
$info-plinth-bg-color: #f7f7f7;
$info-plinth-fg-color: #888;
$preview-bar-bg-color: #f7f7f7;
// left-panel style muted accent color
$secondary-accent-color: #f2f5f8;
$tertiary-accent-color: #d3efe1;
$tagpanel-bg-color: #2e3649;
// 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: $secondary-accent-color;
// 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;
$avatar-bg-color: #ffffff;
$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;
$topleftmenu-color: #212121;
$roomheader-color: #45474a;
$roomtopic-color: #9fa9ba;
// ********************
$roomtile-name-color: #929eb4;
$roomtile-selected-color: #212121;
$roomtile-notified-color: #212121;
$roomtile-selected-bg-color: #fff;
$roomtile-focused-bg-color: #fff;
$roomtile-transparent-focused-color: rgba(0, 0, 0, 0.1);
$roomsublist-background: $secondary-accent-color;
$roomsublist-label-fg-color: $roomtile-name-color;
$roomsublist-label-bg-color: $tertiary-accent-color;
$roomsublist-chevron-color: $accent-color;
$panel-divider-color: #ebedf8;
// ********************
$widget-menu-bar-bg-color: $tertiary-accent-color;
// ********************
// 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;
// ***** 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;
outline: none;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: 15px;
padding: 0px 1.5em 0px 1.5em;
}

64
res/themes/dharma/css/_fonts.scss Normal file
View file

@ -0,0 +1,64 @@
/*
* Nunito.
* Includes extended Latin and Vietnamese character sets
* Current URLs are v9, derived from the contents of
* https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&amp;subset=latin-ext,vietnamese
*/
/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
*/
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 400;
src: local('Nunito Italic'), local('Nunito-Italic'), url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 600;
src: local('Nunito SemiBold Italic'), local('Nunito-SemiBoldItalic'), url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 700;
src: local('Nunito Bold Italic'), local('Nunito-BoldItalic'), url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'), url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
src: local('Nunito Bold'), local('Nunito-Bold'), url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
}
/*
* Fira Mono
* Used for monospace copy, i.e. code
*/
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Mono';
src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

3
res/themes/dharma/css/dharma.scss Normal file
View file

@ -0,0 +1,3 @@
@import "_dharma.scss";
@import "../../../../res/css/_components.scss";

10
res/themes/light/css/_base.scss
View file

@ -1,3 +1,5 @@
@import "_fonts.scss";
/* 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
@ -42,6 +44,8 @@ $preview-bar-bg-color: #f7f7f7;
$secondary-accent-color: #eaf5f0;
$tertiary-accent-color: #d3efe1;
$tagpanel-bg-color: $tertiary-accent-color;
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
@ -98,9 +102,15 @@ $rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
$rte-room-pill-color: #aaa;
$topleftmenu-color: $primary-fg-color;
$roomheader-color: $primary-fg-color;
$roomtopic-color: $settings-grey-fg-color;
// ********************
$roomtile-name-color: rgba(69, 69, 69, 0.8);
$roomtile-selected-color: $roomtile-name-color;
$roomtile-notified-color: $roomtile-name-color;
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);

0
res/css/_fonts.scss → res/themes/light/css/_fonts.scss
View file