WIP of new CSS
This commit is contained in:
Matthew Hodgson
parent
82affac438
commit
7f65ba506b
39 changed files with 156 additions and 98 deletions
|
|
@ -22,7 +22,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
|
||||
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
|
||||
font-size: 16px;
|
||||
color: #454545;
|
||||
border: 0px;
|
||||
|
|
@ -34,7 +34,7 @@ div.error {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #80cef4;
|
||||
color: #454545;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
margin-top: 16px;
|
||||
|
|
@ -44,7 +44,7 @@ h2 {
|
|||
a:hover,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #80CEF4;
|
||||
color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_background {
|
||||
|
|
@ -149,7 +149,7 @@ a:visited {
|
|||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
padding-left: 1em;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.mx_RoomDropTarget,
|
||||
.mx_RoomList_favourites_label,
|
||||
.mx_RoomList_archive_label,
|
||||
.mx_RoomList_favouritesLabel,
|
||||
.mx_RoomList_archiveLabel,
|
||||
.mx_RoomHeader_search,
|
||||
.mx_RoomSettings_encrypt,
|
||||
.mx_CreateRoom_encrypt,
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
padding-left: 12px;
|
||||
padding-left: 18px;
|
||||
padding-right: 12px;
|
||||
margin-left: -64px;
|
||||
margin-top: -7px;
|
||||
margin-top: -4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -48,9 +48,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile .mx_MessageTimestamp {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
color: #acacac;
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MImageTile_download {
|
||||
color: #80cef4;
|
||||
color: #76cfa6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MImageTile_download a {
|
||||
color: #80cef4;
|
||||
color: #76cfa6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ limitations under the License.
|
|||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
vertical-align: middle;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -60,8 +60,8 @@ limitations under the License.
|
|||
|
||||
.mx_MemberTile_power {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
left: 10px;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,30 +15,29 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_MessageComposer_wrapper {
|
||||
max-width: 720px;
|
||||
height: 50px;
|
||||
max-width: 960px;
|
||||
height: 70px;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 25px;
|
||||
border: 1px solid #a9dbf4;
|
||||
border-top: 2px solid #e1dddd;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row {
|
||||
display: table-row;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||
display: table-cell;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
height: 50px;
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar img {
|
||||
margin-top: 5px;
|
||||
margin-top: 18px;
|
||||
border-radius: 20px;
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
|
|
@ -47,7 +46,7 @@ limitations under the License.
|
|||
display: table-cell;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input textarea {
|
||||
|
|
@ -64,12 +63,16 @@ limitations under the License.
|
|||
box-shadow: none;
|
||||
|
||||
/* needed for FF */
|
||||
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
|
||||
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
|
||||
}
|
||||
|
||||
/* hack for FF as vertical alignment of custom placeholder text is broken */
|
||||
.mx_MessageComposer_input textarea::-moz-placeholder {
|
||||
line-height: 100%;
|
||||
color: #76cfa6;
|
||||
}
|
||||
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
|
||||
color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload {
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_wrapper {
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
height: 88px;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
|
|
@ -47,7 +47,7 @@ limitations under the License.
|
|||
.mx_RoomHeader_textButton {
|
||||
height: 48px;
|
||||
margin-top: 18px;
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
border-radius: 48px;
|
||||
margin-right: 8px;
|
||||
color: #fff;
|
||||
|
|
@ -92,7 +92,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomHeader_simpleHeader {
|
||||
line-height: 88px;
|
||||
color: #80cef4;
|
||||
color: #76cfa6;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
overflow: hidden;
|
||||
|
|
@ -102,8 +102,8 @@ limitations under the License.
|
|||
.mx_RoomHeader_name {
|
||||
vertical-align: middle;
|
||||
height: 28px;
|
||||
color: #80cef4;
|
||||
font-weight: 400;
|
||||
color: #454545;
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
|
@ -133,7 +133,7 @@ limitations under the License.
|
|||
vertical-align: bottom;
|
||||
float: left;
|
||||
max-height: 38px;
|
||||
color: #70b5d7;
|
||||
color: #454545;
|
||||
font-weight: 300;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ limitations under the License.
|
|||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
padding: 6px;
|
||||
|
|
|
|||
|
|
@ -17,18 +17,19 @@ limitations under the License.
|
|||
.mx_RoomTile {
|
||||
cursor: pointer;
|
||||
display: table-row;
|
||||
color: #818794;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
background: #eaf5f0;
|
||||
padding-right: 8px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
padding-left: 18px;
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -43,6 +44,8 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 16px;
|
||||
color: #454545;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_name {
|
||||
|
|
@ -63,7 +66,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
border-radius: 26px;
|
||||
font-weight: 400;
|
||||
|
|
@ -75,6 +78,7 @@ limitations under the License.
|
|||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #ff0064;
|
||||
border: 3px solid #fff;
|
||||
|
|
@ -85,20 +89,37 @@ limitations under the License.
|
|||
right: 9px;
|
||||
bottom: 3px;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_RoomTile_highlight .mx_RoomTile_sidebadge,
|
||||
.mx_RoomTile_unread .mx_RoomTile_sidebadge {
|
||||
background-color: #76cfa6;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_unread,
|
||||
.mx_RoomTile_highlight,
|
||||
.mx_RoomTile_invited
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mx_RoomTile_selected {
|
||||
background-color: #f3f8fa;
|
||||
color: #80cef4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_selected {
|
||||
background: url('img/selected.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
.mx_RoomTile_arrow {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomTile:hover {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_CreateRoom {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #4a4a4a;
|
||||
|
|
|
|||
|
|
@ -53,17 +53,20 @@ limitations under the License.
|
|||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
-webkit-flex: 0 0 170px;
|
||||
flex: 0 0 170px;
|
||||
|
||||
border-top: 1px solid #f3f8fa;
|
||||
-webkit-flex: 0 0 126px;
|
||||
flex: 0 0 126px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
|
||||
color: #378bb4;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu img {
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -16,8 +16,6 @@ limitations under the License.
|
|||
|
||||
.mx_MemberList {
|
||||
height: 100%;
|
||||
margin-bottom: 100px;
|
||||
padding: 8px;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
|
@ -39,10 +37,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_MemberList_border {
|
||||
border: 1px solid #a9dbf4;
|
||||
overflow-y: auto;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
|
||||
order: 1;
|
||||
-webkit-flex: 1 1 0;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomDirectory {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 12px;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomList {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.mx_RoomList_recents {
|
||||
|
|
@ -24,8 +25,15 @@ limitations under the License.
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomList_recentsLabel img {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomList h2 {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ limitations under the License.
|
|||
|
||||
.mx_RoomView_fileDropTarget {
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -61,7 +61,7 @@ limitations under the License.
|
|||
border-top-right-radius: 10px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 2px dashed #80cef4;
|
||||
border: 2px dashed #76cfa6;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
|
|
@ -84,12 +84,12 @@ limitations under the License.
|
|||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -111,7 +111,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomView_messageListWrapper {
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
@ -129,8 +129,9 @@ limitations under the License.
|
|||
clear: both;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 54px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mx_RoomView_invitePrompt {
|
||||
|
|
@ -141,7 +142,7 @@ limitations under the License.
|
|||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
|
|
@ -157,14 +158,19 @@ limitations under the License.
|
|||
order: 4;
|
||||
|
||||
width: 100%;
|
||||
-webkit-flex: 0 0 58px;
|
||||
flex: 0 0 58px;
|
||||
-webkit-flex: 0 0 36px;
|
||||
flex: 0 0 36px;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox {
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
border-top: 1px solid #a8dbf3;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox_line {
|
||||
border-top: 1px solid #eee;
|
||||
margin-left: 54px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.mx_RoomView_unreadMessagesBar {
|
||||
|
|
@ -205,8 +211,8 @@ limitations under the License.
|
|||
order: 5;
|
||||
|
||||
width: 100%;
|
||||
-webkit-flex: 0 0 63px;
|
||||
flex: 0 0 63px;
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -217,7 +223,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomView_uploadProgressInner {
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_UserSettings {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,6 +69,8 @@ limitations under the License.
|
|||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
background-color: #eaf5f0;
|
||||
|
||||
-webkit-flex: 0 0 230px;
|
||||
flex: 0 0 230px;
|
||||
}
|
||||
|
|
@ -87,7 +89,7 @@ limitations under the License.
|
|||
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
background-color: #f3f8fa;
|
||||
background-color: #fff;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
|
|
@ -114,7 +116,6 @@ limitations under the License.
|
|||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
background-color: #f3f8fa;
|
||||
-webkit-flex: 0 0 230px;
|
||||
flex: 0 0 230px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue