Skip to content

Commit ad4e341

Browse files
ara4nara4n
committed
WIP of new CSS
1 parent 82affac commit ad4e341

39 files changed

+156
-98
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
node_modules
22
vector/bundle.*
33
lib
4+
bundle.css
5+
.DS_Store
6+
key.pem
7+
cert.pem
8+
build

‎src/skins/vector/css/common.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ html {
2222
}
2323

2424
body {
25-
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
25+
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
2626
font-size: 16px;
2727
color: #454545;
2828
border: 0px;
@@ -34,7 +34,7 @@ div.error {
3434
}
3535

3636
h2 {
37-
color: #80cef4;
37+
color: #454545;
3838
font-weight: 400;
3939
font-size: 20px;
4040
margin-top: 16px;
@@ -44,7 +44,7 @@ h2 {
4444
a:hover,
4545
a:link,
4646
a:visited {
47-
color: #80CEF4;
47+
color: #76cfa6;
4848
}
4949

5050
.mx_ContextualMenu_background {
@@ -149,7 +149,7 @@ a:visited {
149149
font-weight: 400;
150150
font-size: 16px;
151151
color: #fff;
152-
background-color: #80cef4;
152+
background-color: #76cfa6;
153153
margin-left: 8px;
154154
margin-right: 8px;
155155
padding-left: 1em;

‎src/skins/vector/css/hide.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.mx_RoomDropTarget,
2-
.mx_RoomList_favourites_label,
3-
.mx_RoomList_archive_label,
2+
.mx_RoomList_favouritesLabel,
3+
.mx_RoomList_archiveLabel,
44
.mx_RoomHeader_search,
55
.mx_RoomSettings_encrypt,
66
.mx_CreateRoom_encrypt,

‎src/skins/vector/css/molecules/EventTile.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ limitations under the License.
2222
}
2323

2424
.mx_EventTile_avatar {
25-
padding-left: 12px;
25+
padding-left: 18px;
2626
padding-right: 12px;
2727
margin-left: -64px;
28-
margin-top: -7px;
28+
margin-top: -4px;
2929
float: left;
3030
}
3131

@@ -48,9 +48,8 @@ limitations under the License.
4848
}
4949

5050
.mx_EventTile .mx_MessageTimestamp {
51-
color: #454545;
52-
opacity: 0.5;
53-
font-size: 14px;
51+
color: #acacac;
52+
font-size: 12px;
5453
float: right;
5554
}
5655

‎src/skins/vector/css/molecules/MImageTile.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ limitations under the License.
2323
}
2424

2525
.mx_MImageTile_download {
26-
color: #80cef4;
26+
color: #76cfa6;
2727
cursor: pointer;
2828
}
2929

3030
.mx_MImageTile_download a {
31-
color: #80cef4;
31+
color: #76cfa6;
3232
text-decoration: none;
3333
}
3434

‎src/skins/vector/css/molecules/MemberTile.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ limitations under the License.
2727
padding-top: 3px;
2828
padding-bottom: 3px;
2929
vertical-align: middle;
30-
width: 40px;
31-
height: 40px;
30+
width: 36px;
31+
height: 36px;
3232
position: relative;
3333
}
3434

@@ -60,8 +60,8 @@ limitations under the License.
6060

6161
.mx_MemberTile_power {
6262
position: absolute;
63-
width: 48px;
64-
height: 48px;
63+
width: 44px;
64+
height: 44px;
6565
left: 10px;
6666
top: -1px;
6767
}

‎src/skins/vector/css/molecules/MessageComposer.css‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,29 @@ limitations under the License.
1515
*/
1616

1717
.mx_MessageComposer_wrapper {
18-
max-width: 720px;
19-
height: 50px;
18+
max-width: 960px;
19+
height: 70px;
2020
vertical-align: middle;
2121
margin: auto;
2222
background-color: #fff;
23-
border-radius: 25px;
24-
border: 1px solid #a9dbf4;
23+
border-top: 2px solid #e1dddd;
2524
}
2625

2726
.mx_MessageComposer_row {
2827
display: table-row;
2928
width: 100%;
30-
height: 50px;
29+
height: 70px;
3130
}
3231

3332
.mx_MessageComposer .mx_MessageComposer_avatar {
3433
display: table-cell;
35-
padding-left: 5px;
36-
padding-right: 10px;
37-
height: 50px;
34+
padding-left: 10px;
35+
padding-right: 20px;
36+
height: 70px;
3837
}
3938

4039
.mx_MessageComposer .mx_MessageComposer_avatar img {
41-
margin-top: 5px;
40+
margin-top: 18px;
4241
border-radius: 20px;
4342
background-color: #dbdbdb;
4443
}
@@ -47,7 +46,7 @@ limitations under the License.
4746
display: table-cell;
4847
width: 100%;
4948
vertical-align: middle;
50-
height: 50px;
49+
height: 70px;
5150
}
5251

5352
.mx_MessageComposer_input textarea {
@@ -64,12 +63,16 @@ limitations under the License.
6463
box-shadow: none;
6564

6665
/* needed for FF */
67-
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
66+
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
6867
}
6968

7069
/* hack for FF as vertical alignment of custom placeholder text is broken */
7170
.mx_MessageComposer_input textarea::-moz-placeholder {
7271
line-height: 100%;
72+
color: #76cfa6;
73+
}
74+
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
75+
color: #76cfa6;
7376
}
7477

7578
.mx_MessageComposer_upload {

‎src/skins/vector/css/molecules/RoomHeader.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ limitations under the License.
1818
}
1919

2020
.mx_RoomHeader_wrapper {
21-
max-width: 720px;
21+
max-width: 960px;
2222
margin: auto;
2323
height: 88px;
24-
border-bottom: 1px solid #a8dbf3;
24+
border-bottom: 1px solid #eeeeee;
2525

2626
display: -webkit-box;
2727
display: -moz-box;
@@ -47,7 +47,7 @@ limitations under the License.
4747
.mx_RoomHeader_textButton {
4848
height: 48px;
4949
margin-top: 18px;
50-
background-color: #80cef4;
50+
background-color: #76cfa6;
5151
border-radius: 48px;
5252
margin-right: 8px;
5353
color: #fff;
@@ -92,7 +92,7 @@ limitations under the License.
9292

9393
.mx_RoomHeader_simpleHeader {
9494
line-height: 88px;
95-
color: #80cef4;
95+
color: #76cfa6;
9696
font-weight: 400;
9797
font-size: 20px;
9898
overflow: hidden;
@@ -102,8 +102,8 @@ limitations under the License.
102102
.mx_RoomHeader_name {
103103
vertical-align: middle;
104104
height: 28px;
105-
color: #80cef4;
106-
font-weight: 400;
105+
color: #454545;
106+
font-weight: 800;
107107
font-size: 20px;
108108
padding-left: 16px;
109109
padding-right: 16px;
@@ -133,7 +133,7 @@ limitations under the License.
133133
vertical-align: bottom;
134134
float: left;
135135
max-height: 38px;
136-
color: #70b5d7;
136+
color: #454545;
137137
font-weight: 300;
138138
padding-left: 16px;
139139
padding-right: 16px;

‎src/skins/vector/css/molecules/RoomSettings.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ limitations under the License.
6161
font-weight: 400;
6262
font-size: 16px;
6363
color: #fff;
64-
background-color: #80cef4;
64+
background-color: #76cfa6;
6565
width: auto;
6666
margin: auto;
6767
padding: 6px;

‎src/skins/vector/css/molecules/RoomTile.css‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,19 @@ limitations under the License.
1717
.mx_RoomTile {
1818
cursor: pointer;
1919
display: table-row;
20-
color: #818794;
20+
font-size: 14px;
2121
}
2222

2323
.mx_RoomTile_avatar {
2424
display: table-cell;
25-
padding-right: 10px;
25+
background: #eaf5f0;
26+
padding-right: 8px;
2627
padding-top: 3px;
2728
padding-bottom: 3px;
28-
padding-left: 10px;
29+
padding-left: 18px;
2930
vertical-align: middle;
30-
width: 36px;
31-
height: 36px;
31+
width: 24px;
32+
height: 24px;
3233
position: relative;
3334
}
3435

@@ -43,6 +44,8 @@ limitations under the License.
4344
overflow: hidden;
4445
text-overflow: ellipsis;
4546
padding-right: 16px;
47+
color: #454545;
48+
opacity: 0.8;
4649
}
4750

4851
.collapsed .mx_RoomTile_name {
@@ -63,7 +66,7 @@ limitations under the License.
6366
}
6467
6568
.mx_RoomTile_badge {
66-
background-color: #80cef4;
69+
background-color: #76cfa6;
6770
color: #fff;
6871
border-radius: 26px;
6972
font-weight: 400;
@@ -75,6 +78,7 @@ limitations under the License.
7578
}
7679
*/
7780

81+
/*
7882
.mx_RoomTile_badge {
7983
background-color: #ff0064;
8084
border: 3px solid #fff;
@@ -85,20 +89,37 @@ limitations under the License.
8589
right: 9px;
8690
bottom: 3px;
8791
}
92+
*/
93+
94+
.mx_RoomTile_highlight .mx_RoomTile_sidebadge,
95+
.mx_RoomTile_unread .mx_RoomTile_sidebadge {
96+
background-color: #76cfa6;
97+
width: 4px;
98+
position: absolute;
99+
left: 0px;
100+
}
88101

89102
.mx_RoomTile_unread,
90103
.mx_RoomTile_highlight,
91104
.mx_RoomTile_invited
92105
{
93106
font-weight: bold;
94-
color: #000;
95107
}
96108

97109
.mx_RoomTile_selected {
98-
background-color: #f3f8fa;
99-
color: #80cef4;
100110
font-weight: bold;
101111
}
102112

113+
.mx_RoomTile.mx_RoomTile_selected {
114+
background: url('img/selected.png');
115+
background-repeat: no-repeat;
116+
background-position: right center;
117+
}
118+
119+
.mx_RoomTile_arrow {
120+
position: absolute;
121+
right: 0px;
122+
}
123+
103124
.mx_RoomTile:hover {
104125
}

0 commit comments

Comments
 (0)