Merge pull request #296 from vector-im/matthew/redesign
Matthew/redesign
This commit is contained in:
Matthew Hodgson
commit
e25d31a9fe
87 changed files with 1308 additions and 414 deletions
144
src/skins/vector/css/atoms/ImageView.css
Normal file
144
src/skins/vector/css/atoms/ImageView.css
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket 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.
|
||||
*/
|
||||
|
||||
/* This has got to be the most fragile piece of CSS ever written.
|
||||
But empirically it works on Chrome/FF/Safari
|
||||
*/
|
||||
|
||||
.mx_ImageView {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_lhs {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
order: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 60px;
|
||||
/*
|
||||
background-color: #080;
|
||||
height: 20px;
|
||||
*/
|
||||
}
|
||||
|
||||
.mx_ImageView_content {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
order: 2;
|
||||
/* min-width hack needed for FF */
|
||||
min-width: 0px;
|
||||
height: 90%;
|
||||
-webkit-flex: 15;
|
||||
flex: 15 15 0;
|
||||
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_ImageView_content img {
|
||||
max-width: 100%;
|
||||
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
|
||||
max-height: 100%;
|
||||
/* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */
|
||||
object-fit: contain;
|
||||
/* background-image: url('img/trans.png'); */
|
||||
}
|
||||
|
||||
.mx_ImageView_labelWrapper {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_ImageView_label {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
min-height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mx_ImageView_name {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.mx_ImageView_metadata {
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.mx_ImageView_download {
|
||||
pointer-events: all;
|
||||
display: table;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px;
|
||||
background-color: #454545;
|
||||
font-size: 16px;
|
||||
padding: 9px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.mx_ImageView_size {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mx_ImageView_link {
|
||||
color: #fff ! important;
|
||||
text-decoration: none ! important;
|
||||
}
|
||||
|
||||
.mx_ImageView_button {
|
||||
pointer-events: all;
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_ImageView_shim {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mx_ImageView_rhs {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
order: 3;
|
||||
-webkit-flex: 1;
|
||||
flex: 1 1 10%;
|
||||
min-width: 300px;
|
||||
/*
|
||||
background-color: #800;
|
||||
height: 20px;
|
||||
*/
|
||||
}
|
||||
|
|
@ -17,6 +17,5 @@ limitations under the License.
|
|||
.mx_MemberAvatar {
|
||||
z-index: 20;
|
||||
border-radius: 20px;
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -58,7 +58,7 @@ a:visited {
|
|||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border: 1px solid #a9dbf4;
|
||||
border: 1px solid #a4a4a4;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
color: #747474;
|
||||
|
|
@ -129,13 +129,21 @@ a:visited {
|
|||
font-size: 16px;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
max-width: 75%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.mx_ImageView {
|
||||
margin: 6px;
|
||||
/* hack: flexbox bug? */
|
||||
margin-bottom: 4px;
|
||||
.mx_Dialog_lightbox .mx_Dialog_background {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.mx_Dialog_lightbox .mx_Dialog {
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_Dialog_content {
|
||||
|
|
@ -153,7 +161,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;
|
||||
|
|
@ -164,7 +172,7 @@ a:visited {
|
|||
.mx_QuestionDialogTitle {
|
||||
min-height: 16px;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #a9dbf4;
|
||||
border-bottom: 1px solid #a4a4a4;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
.mx_RoomDropTarget,
|
||||
.mx_RoomList_favourites_label,
|
||||
.mx_RoomList_archive_label,
|
||||
.mx_RoomHeader_search,
|
||||
.mx_RoomSettings_encrypt,
|
||||
.mx_CreateRoom_encrypt,
|
||||
.mx_RightPanel_filebutton
|
||||
|
|
|
|||
19
src/skins/vector/css/molecules/EventAsTextTile.css
Normal file
19
src/skins/vector/css/molecules/EventAsTextTile.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket 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_EventAsTextTile {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -17,20 +17,19 @@ limitations under the License.
|
|||
.mx_EventTile {
|
||||
max-width: 100%;
|
||||
clear: both;
|
||||
margin-top: 32px;
|
||||
margin-top: 24px;
|
||||
margin-left: 56px;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
padding-left: 12px;
|
||||
padding-left: 18px;
|
||||
padding-right: 12px;
|
||||
margin-left: -64px;
|
||||
margin-top: -7px;
|
||||
margin-top: -4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar img {
|
||||
background-color: #dbdbdb;
|
||||
border-radius: 20px;
|
||||
border: 0px;
|
||||
}
|
||||
|
|
@ -48,19 +47,30 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile .mx_MessageTimestamp {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
color: #acacac;
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_EventTile_content {
|
||||
padding-right: 100px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_EventTile_notice .mx_MessageTile_content {
|
||||
opacity: 0.5;
|
||||
.mx_MessageTile_content {
|
||||
display: block;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.mx_MessageTile_searchHighlight {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mx_EventTile_sending {
|
||||
|
|
@ -75,38 +85,41 @@ limitations under the License.
|
|||
color: #FF0064;
|
||||
}
|
||||
|
||||
.mx_EventTile_contextual {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_EventTile_last .mx_MessageTimestamp {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_MessageTimestamp {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile_editButton {
|
||||
float: right;
|
||||
display: none;
|
||||
border: 0px;
|
||||
outline: none;
|
||||
margin-right: 3px;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 15px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_EventTile_editButton {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile.menu .mx_EventTile_editButton {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile.menu .mx_MessageTimestamp {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,5 +15,5 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_MNoticeTile {
|
||||
opacity: 0.5;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,4 +17,3 @@ limitations under the License.
|
|||
.mx_MTextTile {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,3 +14,49 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_MemberInfo {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_MemberInfo h2 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_cancel {
|
||||
float: right;
|
||||
margin-right: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_avatar img {
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_profileField {
|
||||
opacity: 0.6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_buttons {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mx_MemberInfo_field {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
background-color: #888;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,52 +16,27 @@ limitations under the License.
|
|||
|
||||
.mx_MemberTile {
|
||||
display: table-row;
|
||||
height: 49px;
|
||||
position: relative;
|
||||
color: #454545;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MemberTile_avatar {
|
||||
display: table-cell;
|
||||
padding-left: 14px;
|
||||
padding-left: 3px;
|
||||
padding-right: 12px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 0px;
|
||||
vertical-align: middle;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_MemberTile_inviteTile {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MemberTile_inviteEditing {
|
||||
display: initial ! important;
|
||||
}
|
||||
|
||||
.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_MemberTile_inviteEditing .mx_MemberTile_name {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mx_MemberTile_inviteEditing .mx_MemberTile_name input {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c7c7c7;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
padding: 9px;
|
||||
margin-top: 6px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.mx_MemberTile_power {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
left: 10px;
|
||||
top: -1px;
|
||||
}
|
||||
|
|
@ -79,20 +54,18 @@ limitations under the License.
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_MemberTile_hover {
|
||||
background-color: #f0f0f0;
|
||||
font-size: 12px;
|
||||
color: #747474;
|
||||
}
|
||||
|
||||
.mx_MemberTile_userId {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_MemberTile_leave {
|
||||
cursor: pointer;
|
||||
.mx_MemberTile_presence {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_MemberTile_chevron {
|
||||
margin-top: 8px;
|
||||
margin-right: -4px;
|
||||
margin-left: 6px;
|
||||
|
|
@ -113,14 +86,14 @@ limitations under the License.
|
|||
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_avatar,
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_name,
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_nameSpan
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_userId
|
||||
{
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.mx_MemberTile_offline .mx_MemberTile_avatar,
|
||||
.mx_MemberTile_offline .mx_MemberTile_name,
|
||||
.mx_MemberTile_offline .mx_MemberTile_nameSpan
|
||||
.mx_MemberTile_offline .mx_MemberTile_userId
|
||||
{
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,39 +15,37 @@ 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;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input textarea {
|
||||
|
|
@ -64,21 +62,32 @@ 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 {
|
||||
.mx_MessageComposer_upload,
|
||||
.mx_MessageComposer_call {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-right: 15px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_call {
|
||||
padding-right: 10px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload img {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
height: 83px;
|
||||
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;
|
||||
|
|
@ -71,11 +71,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_rightRow {
|
||||
height: 48px;
|
||||
margin-top: 18px;
|
||||
margin-top: 32px;
|
||||
background-color: #fff;
|
||||
border-radius: 48px;
|
||||
border: 1px solid #a9dbf4;
|
||||
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-moz-box-ordinal-group: 3;
|
||||
|
|
@ -91,8 +88,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_simpleHeader {
|
||||
line-height: 88px;
|
||||
color: #80cef4;
|
||||
line-height: 83px;
|
||||
color: #76cfa6;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
overflow: hidden;
|
||||
|
|
@ -100,18 +97,39 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_name {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
height: 28px;
|
||||
color: #80cef4;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
padding-left: 16px;
|
||||
color: #454545;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
padding-left: 8px;
|
||||
padding-right: 16px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_nametext {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_settingsButton {
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_name:hover {
|
||||
color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_nameEditing {
|
||||
padding-left: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 16px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
|
@ -133,9 +151,9 @@ limitations under the License.
|
|||
vertical-align: bottom;
|
||||
float: left;
|
||||
max-height: 38px;
|
||||
color: #70b5d7;
|
||||
color: #454545;
|
||||
font-weight: 300;
|
||||
padding-left: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -153,9 +171,8 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomHeader_button {
|
||||
height: 48px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
|
@ -170,4 +187,4 @@ limitations under the License.
|
|||
|
||||
.mx_RoomHeader_voipButtons {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,24 +17,24 @@ 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;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
background: #eaf5f0;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 18px;
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar img {
|
||||
border-radius: 20px;
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
|
||||
.mx_RoomTile_name {
|
||||
|
|
@ -43,6 +43,13 @@ limitations under the License.
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 16px;
|
||||
color: #454545;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_RoomTile_invite {
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_name {
|
||||
|
|
@ -63,7 +70,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
border-radius: 26px;
|
||||
font-weight: 400;
|
||||
|
|
@ -75,6 +82,7 @@ limitations under the License.
|
|||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #ff0064;
|
||||
border: 3px solid #fff;
|
||||
|
|
@ -85,19 +93,36 @@ limitations under the License.
|
|||
right: 9px;
|
||||
bottom: 3px;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #76cfa6;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ limitations under the License.
|
|||
.mx_RoomTooltip {
|
||||
display: none;
|
||||
position: fixed;
|
||||
border: 1px solid #a9dbf4;
|
||||
border: 1px solid #a4a4a4;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
|
|
|
|||
64
src/skins/vector/css/molecules/SearchBar.css
Normal file
64
src/skins/vector/css/molecules/SearchBar.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket 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_SearchBar {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_SearchBar input {
|
||||
display: inline block;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
font-size: 16px;
|
||||
padding: 9px;
|
||||
padding-left: 11px;
|
||||
margin-right: 17px;
|
||||
width: auto;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_SearchBar_button {
|
||||
display: inline;
|
||||
border: 0px;
|
||||
border-radius: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #76cfa6;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
margin-left: 7px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_SearchBar_unselected {
|
||||
background-color: #fff;
|
||||
color: #9fddc1;
|
||||
border: #9fddc1 1px solid;
|
||||
}
|
||||
|
||||
.mx_SearchBar_cancel {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||
|
||||
.mx_IncomingCallBox {
|
||||
text-align: center;
|
||||
border: 1px solid #a9dbf4;
|
||||
border: 1px solid #a4a4a4;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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,22 +37,47 @@ 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;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.mx_MemberList_invite {
|
||||
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 9px;
|
||||
color: #454545;
|
||||
margin-left: 3px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.mx_MemberList_invite::-moz-placeholder {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.mx_MessageList_invite::-webkit-input-placeholder {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_MemberList_invited h2 {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding-left: 3px;
|
||||
padding-right: 12px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_MemberList_wrapper {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_MemberList h2 {
|
||||
margin: 14px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,32 +33,53 @@ limitations under the License.
|
|||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 0 0 66px;
|
||||
flex: 0 0 66px;
|
||||
-webkit-flex: 0 0 83px;
|
||||
flex: 0 0 83px;
|
||||
}
|
||||
|
||||
/** Fixme - factor this out with the main header **/
|
||||
|
||||
.mx_RightPanel_headerButtonGroup {
|
||||
margin-top: 18px;
|
||||
height: 48px;
|
||||
float: right;
|
||||
margin-top: 32px;
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
border-radius: 48px;
|
||||
border: 1px solid #a9dbf4;
|
||||
margin-right: 22px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton {
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_MemberList {
|
||||
.mx_RightPanel_headerButton_highlight {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 10px;
|
||||
width: 25px;
|
||||
height: 4px;
|
||||
background-color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 28px;
|
||||
font-size: 12px;
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_MemberList,
|
||||
.mx_RightPanel .mx_MemberInfo {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-moz-box-ordinal-group: 2;
|
||||
-ms-flex-order: 2;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomDirectory {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 12px;
|
||||
|
|
|
|||
|
|
@ -15,17 +15,30 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_RoomList {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.mx_RoomList_invites,
|
||||
.mx_RoomList_recents {
|
||||
margin-top: -12px;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomList_expandButton {
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,13 +36,13 @@ limitations under the License.
|
|||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
-webkit-flex: 0 0 88px;
|
||||
flex: 0 0 88px;
|
||||
-webkit-flex: 0 0 83px;
|
||||
flex: 0 0 83px;
|
||||
}
|
||||
|
||||
.mx_RoomView_fileDropTarget {
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -61,10 +61,10 @@ limitations under the License.
|
|||
border-top-right-radius: 10px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 2px dashed #80cef4;
|
||||
border: 2px #e1dddd solid;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
top: 83px;
|
||||
bottom: 0px;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
|
@ -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,44 +158,45 @@ 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 {
|
||||
margin-top: 13px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background-color: #ff0064;
|
||||
border-radius: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #ff0064;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mx_RoomView_unreadMessagesBar img {
|
||||
padding-left: 22px;
|
||||
padding-left: 10px;
|
||||
padding-right: 22px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_RoomView_typingBar {
|
||||
margin-top: 17px;
|
||||
margin-left: 56px;
|
||||
color: #818794;
|
||||
margin-top: 10px;
|
||||
margin-left: 54px;
|
||||
color: #4a4a4a;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_RoomView_typingBar img {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
margin-left: -64px;
|
||||
margin-top: -7px;
|
||||
float: left;
|
||||
.mx_RoomView_typingImage {
|
||||
display: inline;
|
||||
margin-left: -38px;
|
||||
margin-top: -4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mx_RoomView .mx_MessageComposer {
|
||||
|
|
@ -205,44 +207,46 @@ 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;
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadProgressOuter {
|
||||
width: 100%;
|
||||
background-color: rgba(169, 219, 244, 0.5);
|
||||
height: 4px;
|
||||
margin-left: 54px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadProgressInner {
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadFilename {
|
||||
margin-top: 15px;
|
||||
margin-top: 5px;
|
||||
margin-left: 56px;
|
||||
opacity: 0.5;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadIcon {
|
||||
float: left;
|
||||
margin-top: 6px;
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadCancel {
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadBytes {
|
||||
float: right;
|
||||
opacity: 0.5;
|
||||
margin-top: 15px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
margin-right: 30px;
|
||||
color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_RoomView_ongoingConfCallNotification {
|
||||
|
|
@ -251,5 +255,5 @@ limitations under the License.
|
|||
background-color: #ff0064;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
padding: 6px;
|
||||
}
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_UserSettings {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
/*
|
||||
Copyright 2015 OpenMarket 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_ViewSource pre {
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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