Merge branch 'develop' into matthew/settings

This commit is contained in:
Matthew Hodgson 2015-12-18 00:36:46 +00:00
commit a7b9e54594
172 changed files with 1068 additions and 6058 deletions

View file

@ -0,0 +1,44 @@
.mx_UploadBar {
position: relative;
}
.mx_UploadBar_uploadProgressOuter {
height: 4px;
margin-left: 63px;
margin-top: -1px;
}
.mx_UploadBar_uploadProgressInner {
background-color: #76cfa6;
height: 4px;
}
.mx_UploadBar_uploadFilename {
margin-top: 5px;
margin-left: 65px;
opacity: 0.5;
color: #4a4a4a;
}
.mx_UploadBar_uploadIcon {
float: left;
margin-top: 1px;
margin-left: 14px;
}
.mx_UploadBar_uploadCancel {
float: right;
margin-top: 5px;
margin-right: 10px;
position: relative;
opacity: 0.6;
cursor: pointer;
z-index: 1;
}
.mx_UploadBar_uploadBytes {
float: right;
margin-top: 5px;
margin-right: 30px;
color: #76cfa6;
}

View file

@ -87,13 +87,13 @@ limitations under the License.
}
.mx_ImageView_name {
font-size: 20px;
font-size: 18px;
margin-bottom: 6px;
pointer-events: all;
}
.mx_ImageView_metadata {
font-size: 16px;
font-size: 15px;
opacity: 0.5;
pointer-events: all;
}
@ -105,13 +105,13 @@ limitations under the License.
margin-bottom: 6px;
border-radius: 5px;
background-color: #454545;
font-size: 16px;
font-size: 14px;
padding: 9px;
border: 1px solid #fff;
}
.mx_ImageView_size {
font-size: 12px;
font-size: 11px;
}
.mx_ImageView_link {
@ -121,7 +121,7 @@ limitations under the License.
.mx_ImageView_button {
pointer-events: all;
font-size: 16px;
font-size: 15px;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;

View file

@ -20,11 +20,14 @@ limitations under the License.
.mx_MemberAvatar_initial {
position: absolute;
z-index: 1;
color: #fff;
text-align: center;
speak: none;
pointer-events: none;
}
.mx_MemberAvatar_image {
border-radius: 20px;
border-radius: 20px;
vertical-align: top;
}

View file

@ -15,6 +15,7 @@ limitations under the License.
*/
.mx_RoomAvatar {
vertical-align: middle;
}
.mx_RoomAvatar_initial {
@ -23,4 +24,5 @@ limitations under the License.
text-align: center;
font-weight: normal ! important;
speak: none;
pointer-events: none;
}

View file

@ -22,8 +22,13 @@ html {
}
body {
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-size: 16px;
/* 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-size: 15px;
color: #454545;
border: 0px;
margin: 0px;
@ -36,7 +41,7 @@ div.error {
h2 {
color: #454545;
font-weight: 400;
font-size: 20px;
font-size: 18px;
margin-top: 16px;
margin-bottom: 16px;
}
@ -47,6 +52,12 @@ a:visited {
color: #76cfa6;
}
input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
border: 1px solid #76CFA6;
outline: none;
box-shadow: none;
}
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
Stop the scrollbar view from pushing out the container's overall sizing, which causes
flexbox to adapt to the new size and cause the view to keep growing.
@ -99,19 +110,9 @@ a:visited {
margin: 0 auto;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.2;
z-index: 4000;
}
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;
top: 0;
left: 0;
width: 100%;
@ -134,12 +135,22 @@ a:visited {
text-align: center;
z-index: 4010;
font-weight: 300;
font-size: 16px;
font-size: 15px;
position: relative;
border-radius: 8px;
max-width: 80%;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.2;
}
.mx_Dialog_lightbox .mx_Dialog_background {
opacity: 0.85;
}
@ -167,7 +178,7 @@ a:visited {
height: 36px;
border-radius: 36px;
font-weight: 400;
font-size: 16px;
font-size: 15px;
color: #fff;
background-color: #76cfa6;
margin-left: 8px;
@ -182,6 +193,6 @@ a:visited {
padding: 12px;
border-bottom: 1px solid #a4a4a4;
font-weight: bold;
font-size: 20px;
font-size: 18px;
line-height: 1.4;
}

View file

@ -1 +0,0 @@
../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

View file

@ -16,4 +16,5 @@ limitations under the License.
.mx_EventAsTextTile {
opacity: 0.5;
overflow-y: hidden;
}

View file

@ -25,8 +25,10 @@ limitations under the License.
padding-left: 18px;
padding-right: 12px;
margin-left: -73px;
margin-top: -4px;
margin-top: -2px;
float: left;
position: relative;
top: 0px;
}
.mx_EventTile_avatar img {
@ -41,15 +43,15 @@ limitations under the License.
.mx_EventTile .mx_SenderProfile {
color: #454545;
opacity: 0.5;
font-size: 14px;
font-size: 13px;
margin-bottom: 4px;
display: block;
overflow-y: hidden;
}
.mx_EventTile .mx_MessageTimestamp {
color: #acacac;
font-size: 12px;
float: right;
font-size: 11px;
}
.mx_EventTile_line {
@ -64,8 +66,39 @@ limitations under the License.
.mx_MessageTile_content {
display: block;
margin-right: 100px;
overflow-y: hidden;
}
/* Various markdown overrides */
.mx_MessageTile_content .markdown-body {
font-family: inherit ! important;
white-space: normal ! important;
line-height: inherit ! important;
color: inherit;
font-size: 15px;
}
.mx_MessageTile_content .markdown-body h1,
.mx_MessageTile_content .markdown-body h2,
.mx_MessageTile_content .markdown-body h3,
.mx_MessageTile_content .markdown-body h4,
.mx_MessageTile_content .markdown-body h5,
.mx_MessageTile_content .markdown-body h6
{
font-family: inherit ! important;
}
.mx_MessageTile_content .markdown-body a {
color: #76cfa6;
}
.mx_MessageTile_content .markdown-body .hljs {
display: inherit ! important;
}
/* end of overrides */
.mx_MessageTile_searchHighlight {
background-color: #76cfa6;
color: #fff;
@ -78,10 +111,12 @@ limitations under the License.
}
.mx_EventTile_notSent {
color: #ddd;
color: #f44;
}
.mx_EventTile_highlight {
.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
{
color: #FF0064;
}
@ -91,10 +126,18 @@ limitations under the License.
.mx_EventTile_msgOption {
float: right;
text-align: right;
z-index: 1;
position: relative;
width: 90px;
margin-right: 10px;
margin-top: -6px;
}
.mx_MessageTimestamp {
display: block;
visibility: hidden;
text-align: right;
}
.mx_EventTile_last .mx_MessageTimestamp {
@ -107,9 +150,8 @@ limitations under the License.
.mx_EventTile_editButton {
position: absolute;
right: 1px;
top: 15px;
visibility: hidden;
display: inline-block;
visibility: hidden;
}
.mx_EventTile:hover .mx_EventTile_editButton {
@ -123,3 +165,21 @@ limitations under the License.
.mx_EventTile.menu .mx_MessageTimestamp {
visibility: visible;
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
}
.mx_EventTile_readAvatars .mx_MemberAvatar {
position: absolute;
display: inline-block;
}
.mx_EventTile_readAvatarRemainder {
color: #acacac;
font-size: 11px;
position: absolute;
}

View file

@ -15,5 +15,6 @@ limitations under the License.
*/
.mx_MNoticeTile {
white-space: pre-wrap;
opacity: 0.6;
}

View file

@ -37,8 +37,10 @@ limitations under the License.
}
.mx_MemberInfo_profileField {
opacity: 0.6;
font-size: 14px;
font-color: #999999;
font-size: 13px;
position: relative;
background-color: #fff;
}
.mx_MemberInfo_buttons {
@ -49,7 +51,7 @@ limitations under the License.
cursor: pointer;
width: 100px;
text-align: center;
font-size: 12px;
font-size: 11px;
background-color: #888;
color: #fff;
font-weight: bold;

View file

@ -25,8 +25,8 @@ limitations under the License.
display: table-cell;
padding-left: 3px;
padding-right: 12px;
padding-top: 2px;
padding-bottom: 0px;
padding-top: 4px;
padding-bottom: 4px;
vertical-align: middle;
width: 36px;
height: 36px;
@ -55,13 +55,13 @@ limitations under the License.
}
.mx_MemberTile_userId {
font-size: 14px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_MemberTile_presence {
font-size: 12px;
font-size: 11px;
opacity: 0.5;
}
@ -98,10 +98,6 @@ limitations under the License.
opacity: 0.25;
}
.mx_MemberTile_zalgo {
font-family: Helvetica, Arial, Sans-Serif;
}
.mx_MemberTile:hover .mx_MessageTimestamp {
display: block;
}

View file

@ -59,7 +59,7 @@ limitations under the License.
box-shadow: none;
/* needed for FF */
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
@ -72,7 +72,9 @@ limitations under the License.
}
.mx_MessageComposer_upload,
.mx_MessageComposer_call {
.mx_MessageComposer_hangup,
.mx_MessageComposer_voicecall,
.mx_MessageComposer_videocall {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
@ -80,7 +82,12 @@ limitations under the License.
cursor: pointer;
}
.mx_MessageComposer_call {
.mx_MessageComposer_videocall {
padding-right: 10px;
padding-top: 4px;
}
.mx_MessageComposer_voicecall {
padding-right: 10px;
padding-top: 4px;
}

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_RoomDropTarget {
font-size: 14px;
font-size: 13px;
margin-left: 10px;
margin-right: 15px;
padding-top: 5px;

View file

@ -23,6 +23,9 @@ limitations under the License.
height: 83px;
border-bottom: 1px solid #eeeeee;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
@ -31,8 +34,6 @@ limitations under the License.
}
.mx_RoomHeader_leftRow {
height: 48px;
margin-top: 18px;
margin-left: -2px;
-webkit-box-ordinal-group: 1;
@ -47,7 +48,6 @@ limitations under the License.
.mx_RoomHeader_textButton {
height: 48px;
margin-top: 18px;
background-color: #76cfa6;
border-radius: 48px;
margin-right: 8px;
@ -72,7 +72,7 @@ limitations under the License.
}
.mx_RoomHeader_rightRow {
margin-top: 32px;
margin-top: 4px;
background-color: #fff;
-webkit-box-ordinal-group: 3;
@ -84,14 +84,14 @@ limitations under the License.
.mx_RoomHeader_info {
display: table-cell;
height: 48px;
/* height: 48px; */
vertical-align: middle;
}
.mx_RoomHeader_simpleHeader {
line-height: 83px;
color: #454545;
font-size: 24px;
font-size: 22px;
font-weight: bold;
overflow: hidden;
margin-left: 63px;
@ -110,11 +110,13 @@ limitations under the License.
cursor: pointer;
vertical-align: middle;
height: 28px;
overflow: hidden;
color: #454545;
font-weight: bold;
font-size: 24px;
font-size: 22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
text-overflow: ellipsis;
}
@ -122,6 +124,13 @@ limitations under the License.
display: inline-block;
}
.mx_RoomHeader_searchStatus {
display: inline-block;
font-weight: normal;
overflow-y: hidden;
opacity: 0.6;
}
.mx_RoomHeader_settingsButton {
display: inline-block;
visibility: hidden;
@ -130,14 +139,24 @@ limitations under the License.
left: 4px;
}
.mx_RoomHeader_name:hover {
.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
color: #76cfa6;
}
.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
.mx_RoomHeader_leftRow:hover .mx_RoomHeader_settingsButton {
visibility: visible;
}
.mx_RoomHeader_leaveButton {
visibility: hidden;
margin-top: -1px;
}
.mx_RoomHeader_wrapper:hover .mx_RoomHeader_leaveButton {
visibility: visible;
}
.mx_RoomHeader_nameEditing {
padding-left: 8px;
padding-right: 16px;
@ -149,7 +168,7 @@ limitations under the License.
width: 260px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
font-size: 13px;
padding: 9px;
}
@ -160,7 +179,7 @@ limitations under the License.
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
max-height: 42px;
color: #454545;
font-weight: 300;
padding-left: 19px;

View file

@ -39,7 +39,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
font-size: 13px;
padding: 9px;
margin-top: 6px;
}
@ -59,7 +59,7 @@ limitations under the License.
height: 36px;
border-radius: 36px;
font-weight: 400;
font-size: 16px;
font-size: 15px;
color: #fff;
background-color: #76cfa6;
width: auto;

View file

@ -18,19 +18,19 @@ limitations under the License.
cursor: pointer;
/* This fixes wrapping of long room names, but breaks drag & drop previews */
/* display: table-row; */
font-size: 14px;
font-size: 13px;
}
.mx_RoomTile_avatar {
display: table-cell;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 2px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 18px;
vertical-align: middle;
width: 24px;
height: 24px;
position: relative;
vertical-align: middle;
}
.mx_RoomTile_avatar img {
@ -48,7 +48,8 @@ limitations under the License.
}
.mx_RoomTile_invite {
color: rgba(69, 69, 69, 0.5);
/* color: rgba(69, 69, 69, 0.5);
*/
}
.collapsed .mx_RoomTile_name {
@ -112,6 +113,10 @@ limitations under the License.
color: #76cfa6 ! important;
}
.mx_RoomTile_highlight .mx_RoomTile_name {
color: #ff0064 ! important;
}
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
background: url('img/selected.png');
background-repeat: no-repeat;

View file

@ -21,24 +21,43 @@ limitations under the License.
align-items: center;
}
.mx_SearchBar input {
.mx_SearchBar_input {
display: inline block;
border-radius: 3px;
border-radius: 3px 0px 0px 3px;
border: 1px solid #f0f0f0;
font-size: 16px;
font-size: 15px;
padding: 9px;
padding-left: 11px;
margin-right: 17px;
width: auto;
flex: 1 1 0;
}
.mx_SearchBar_searchButton {
cursor: pointer;
margin-right: 10px;
width: 37px;
height: 37px;
border-radius: 0px 3px 3px 0px;
background-color: #76CFA6;
}
@keyframes pulsate {
0% { opacity: 1.0; }
50% { opacity: 0.25; }
100% { opacity: 1.0; }
}
.mx_SearchBar_searching img {
animation: pulsate 0.75s ease-out;
animation-iteration-count: infinite;
}
.mx_SearchBar_button {
display: inline;
border: 0px;
border-radius: 36px;
font-weight: 400;
font-size: 16px;
font-size: 15px;
color: #fff;
background-color: #76cfa6;
width: auto;

View file

@ -13,8 +13,3 @@ 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_SenderProfile_zalgo {
font-family: Helvetica, Arial, Sans-Serif;
display: table-row ! important;
}

View file

@ -25,7 +25,7 @@ limitations under the License.
.mx_ServerConfig_help:link {
opacity: 0.8;
font-size: 14px;
font-size: 13px;
font-weight: 300;
color: #4a4a4a;
}

View file

@ -26,7 +26,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
font-size: 13px;
padding: 9px;
margin-top: 6px;
}

View file

@ -69,11 +69,12 @@ limitations under the License.
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
margin-top: 17px;
margin-top: 15px;
width: 100%;
}
.mx_LeftPanel .mx_BottomLeftMenu img {
border-radius: 0px;
background-color: transparent;
vertical-align: middle;
}

View file

@ -45,13 +45,13 @@ limitations under the License.
}
.mx_MemberList_invite {
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
border-radius: 3px;
border: 1px solid #f0f0f0;
padding: 9px;
color: #454545;
margin-left: 3px;
font-size: 16px;
font-size: 15px;
margin-bottom: 8px;
width: 180px;
}
@ -69,7 +69,7 @@ limitations under the License.
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 14px;
font-size: 13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;

View file

@ -66,7 +66,7 @@ limitations under the License.
.mx_RightPanel_headerButton_badge {
position: absolute;
top: 5px;
top: 4px;
left: 28px;
font-size: 12px;
background-color: #76cfa6;
@ -75,7 +75,7 @@ limitations under the License.
border-radius: 20px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-top: 0px;
}
.mx_RightPanel .mx_MemberList,

View file

@ -50,7 +50,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
font-size: 13px;
padding: 9px;
margin-top: 12px;
margin-bottom: 12px;
@ -70,7 +70,7 @@ limitations under the License.
.mx_RoomDirectory_table th {
font-weight: 400;
font-size: 12px;
font-size: 11px;
}
.mx_RoomDirectory_table tbody {
@ -79,7 +79,6 @@ limitations under the License.
.mx_RoomDirectory_table td {
font-weight: 300;
font-size: 16px;
overflow-x: hidden;
text-overflow: ellipsis;
}
@ -90,7 +89,7 @@ limitations under the License.
.mx_RoomDirectory_table .mx_RoomDirectory_topic {
font-weight: 400;
font-size: 12px;
font-size: 11px;
}
.mx_RoomDirectory_table td,

View file

@ -25,3 +25,10 @@ limitations under the License.
padding-left: 12px;
padding-right: 12px;
}
/* Evil hacky override until Chrome fixes drop and drag table cells
and we can correctly fix horizontal wrapping in the sidebar again */
.mx_RoomList_scrollbar .gm-scroll-view {
overflow-x: hidden ! important;
overflow-y: scroll ! important;
}

View file

@ -29,7 +29,7 @@ limitations under the License.
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 14px;
font-size: 13px;
padding-left: 12px;
padding-right: 12px;
margin-top: 8px;

View file

@ -170,10 +170,35 @@ limitations under the License.
.mx_RoomView_statusAreaBox_line {
border-top: 1px solid #eee;
margin-left: 63px;
height: 1px;
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
border-top: 1px hidden;
}
.mx_RoomView_inCall .mx_MessageComposer_wrapper {
border-top: 2px hidden;
}
.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
background-color: #76CFA6;
color: #fff;
position: relative;
}
.mx_RoomView_voipChevron {
position: absolute;
bottom: -10px;
right: 11px;
}
.mx_RoomView_voipButton {
float: right;
margin-right: 13px;
cursor: pointer;
}
.mx_RoomView_unreadMessagesBar {
color: #ff0064;
cursor: pointer;
@ -186,6 +211,16 @@ limitations under the License.
vertical-align: middle;
}
.mx_RoomView_callBar {
margin-top: 5px;
}
.mx_RoomView_callBar img {
padding-left: 13px;
padding-right: 30px;
vertical-align: middle;
}
.mx_RoomView_connectionLostBar {
margin-top: 19px;
height: 58px;
@ -204,7 +239,7 @@ limitations under the License.
.mx_RoomView_connectionLostBar_desc {
color: #454545;
font-size: 14px;
font-size: 13px;
opacity: 0.5;
}
@ -215,8 +250,8 @@ limitations under the License.
}
.mx_RoomView_typingBar {
margin-top: 10px;
margin-left: 63px;
margin-top: 6px;
margin-left: 65px;
color: #4a4a4a;
opacity: 0.5;
}
@ -228,6 +263,11 @@ limitations under the License.
float: left;
}
.mx_RoomView_typingText {
overflow-y: hidden;
display: block;
}
.mx_RoomView .mx_MessageComposer {
-webkit-box-ordinal-group: 5;
-moz-box-ordinal-group: 5;
@ -241,43 +281,6 @@ limitations under the License.
margin-right: 2px;
}
.mx_RoomView_uploadProgressOuter {
height: 4px;
margin-left: 63px;
margin-top: -1px;
}
.mx_RoomView_uploadProgressInner {
background-color: #76cfa6;
height: 4px;
}
.mx_RoomView_uploadFilename {
margin-top: 5px;
margin-left: 65px;
opacity: 0.5;
color: #4a4a4a;
}
.mx_RoomView_uploadIcon {
float: left;
margin-top: 1px;
margin-left: 14px;
}
.mx_RoomView_uploadCancel {
float: right;
margin-top: 5px;
margin-right: 10px;
}
.mx_RoomView_uploadBytes {
float: right;
margin-top: 5px;
margin-right: 30px;
color: #76cfa6;
}
.mx_RoomView_ongoingConfCallNotification {
width: 100%;
text-align: center;

View file

@ -14,6 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MatrixChat_splash {
position: relative;
height: 100%;
}
.mx_MatrixChat_splashButtons {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -moz-box;

View file

@ -55,7 +55,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
@ -68,12 +68,12 @@ limitations under the License.
height: 40px;
border: 0px;
background-color: #76cfa6;
font-size: 16px;
font-size: 15px;
color: #fff;
}
.mx_Login_label {
font-size: 14px;
font-size: 13px;
opacity: 0.8;
}
@ -85,7 +85,7 @@ limitations under the License.
display: block;
text-align: center;
width: 100%;
font-size: 14px;
font-size: 13px;
opacity: 0.8;
}
@ -97,7 +97,7 @@ limitations under the License.
display: block;
text-align: center;
width: 100%;
font-size: 14px;
font-size: 13px;
opacity: 0.8;
}