-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.styl
168 lines (161 loc) · 2.91 KB
/
index.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
*
box-sizing: border-box
.box
background: #7494c4
width: 400px
height: 660px
font-family: Helvetica Neue, sans-serif
margin: 10px
border: 1px solid #eaebed
border-radius: 5px
overflow: hidden
box-shadow: 0 2px 4px rgba(0,0,0,.2)
.box > .inner
position: relative
width: 100%
height: 100%
.head
position: absolute
top: 0
left: 0
width: 100%
height: 80px
padding-top: 44px
background: #263147
box-sizing: border-box
color: #fff
.bar
position: absolute
top: 0
left: 0
width: 100%
text-align: center
font-size: 0.9em
padding: 5px
.title
font-size: 22px
text-align: center
color: #fff
.content
padding: 8px
position: absolute
top: 80px
bottom: 55px
width: 100%
overflow-y: scroll
color: #fafbfc
.info
text-align: center
.inner
background: rgba(0,0,0,.3)
border-radius: 16px
text-align: center
color: #fff
display: inline-block
padding: 3px 16px
.talk
margin-bottom: 15px
clear: both
.name
margin-bottom: 5px
.bubble
color: #111
padding: 20px 20px 20px 30px
display: inline-block
min-width: 71px
min-height: 61px
font-size: 1.15em
line-height: 1.1em
.bubble.rev
padding: 20px 30px 20px 20px
.time
font-size: 0.85em
.inner
display: inline-block
vertical-align: top
padding: 0 6px
max-width: 260px
.time
display: inline-block
vertical-align: bottom
.foot
position: absolute
bottom: 0
left: 0
width: 100%
height: 55px
background: #f3f4f8
padding: 10px
box-sizing: border-box
border-top: 1px solid #bac2c5
display: flex
flex-wrap: nowrap
.icon
color: #8289a5
height: 34px
width: 30px
line-height: 36px
text-align: center
display: inline-block
vertical-align: middle
flex: 0 0 auto
.fa
font-size: 28px
input
width: 230px
flex: 1 0 auto
border: 1px solid #e0e1e5
border-radius: 3px
height: 34px
font-size: 1.2em
padding: 5px
color: #444
outline: none
vertical-align: middle
margin: 0 10px
.send
flex: 1 0 auto
vertical-align: middle
float: right
height: 34px
width: 60px
background: #5785e3
border-radius: 3px
padding: 5px
box-sizing: border-box
cursor: pointer
color: #fff
text-align: center
.icon, .fa
font-size: 24px
#talk-sample, #info-sample, #talk-sample-self
display: none
.avatar
width: 42px
height: 42px
display: inline-block
vertical-align: top
background-color: #eee
background-size: cover
.avatars
.avatar
margin: 0 5px 5px 0
cursor: pointer
.avatar.active
outline: 2px solid #f0f
.avatar
position: relative
overflow: hidden
i
position: relative
z-index: 1
input
position: absolute
left: 0
top: 0
z-index: 2
opacity: 0.01
::-webkit-file-upload-button
cursor: pointer
height: 100%
border: 0