gorg_slack_chat 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,186 @@
1
+ /* Slack Chat CSS */
2
+ /* v1.5 */
3
+ .slackchat * {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ .slackchat.slack-chat-box {
8
+ display: none;
9
+ position: fixed;
10
+ width: 25%;
11
+ right: 0;
12
+ top: 0;
13
+ bottom: 0;
14
+ background: #fff;
15
+ z-index: 80001;
16
+ padding: 8px;
17
+ border-left: 1px solid #ddd;
18
+ box-shadow: 1px 1px 4px #aaa;
19
+ font-family: inherit;
20
+ }
21
+
22
+ .slackchat .slack-chat-header {
23
+ font-weight: 600;
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ height: 60px;
29
+ padding: 10px;
30
+ }
31
+
32
+ .slackchat .slack-message-box {
33
+ font-size: 12px;
34
+ border-top: 1px solid #ddd;
35
+ padding: 10px;
36
+ overflow: auto;
37
+ position: absolute;
38
+ bottom: 75px;
39
+ top: 60px;
40
+ left: 0;
41
+ right: 0;
42
+ }
43
+
44
+ .slackchat .slack-new-message {
45
+ max-width: 80%;
46
+ display: inline-block;
47
+ border-radius: 0;
48
+ border: 0;
49
+ box-shadow: none;
50
+ font-size: 12px;
51
+ padding: 5px;
52
+ min-height: 55px;
53
+ }
54
+
55
+ .slackchat .slack-new-message:focus,
56
+ .slackchat .slack-new-message:active {
57
+ border: 1px solid #ddd;
58
+ box-shadow: 0 0 1px #aaa;
59
+ }
60
+
61
+ .slackchat .slack-post-message {
62
+ font-size: 17px;
63
+ color: #fff;
64
+ background: #e22b2f;
65
+ border-radius: 50%;
66
+ padding: 5px;
67
+ height: 30px;
68
+ width: 30px;
69
+ text-align: center;
70
+ display: inline-block;
71
+ vertical-align: top;
72
+ margin-top: 10px;
73
+ margin-right: 10px;
74
+ float: right;
75
+ }
76
+
77
+ .slackchat .slack-post-message:hover {
78
+ background: #BD3235;
79
+ cursor: pointer;
80
+ }
81
+
82
+ .slackchat .slack-message-box .message-item {
83
+ margin-bottom: 5px;
84
+ color: #363636;
85
+ }
86
+
87
+ .slackchat .slack-message-box .message-item .username {
88
+ display:block;
89
+ font-weight: 600;
90
+ margin-bottom: 1px;
91
+ }
92
+
93
+ .slackchat .slack-message-box .message-item .timestamp {
94
+ color: #aaa;
95
+ font-size: 10px;
96
+ font-style: italic;
97
+ font-weight: 200;
98
+ }
99
+
100
+ .slackchat .slack-message-box .userImg {
101
+ display: inline-block;
102
+ width: 10%;
103
+ min-width: 30px;
104
+ margin-right: 5px;
105
+ vertical-align: top;
106
+ text-align: center;
107
+ }
108
+
109
+ .slackchat .slack-message-box .userImg img {
110
+ max-width: 100%;
111
+ }
112
+
113
+ .slackchat .slack-message-box .msgBox {
114
+ display: inline-block;
115
+ max-width: 88%;
116
+ vertical-align: top;
117
+ }
118
+
119
+ /*scrollbar styling*/
120
+ .slackchat .slack-message-box::-webkit-scrollbar-track
121
+ {
122
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
123
+ border-radius: 10px;
124
+ background-color: #F5F5F5;
125
+ }
126
+
127
+ .slackchat .slack-message-box::-webkit-scrollbar
128
+ {
129
+ width: 6px;
130
+ background-color: #F5F5F5;
131
+ }
132
+
133
+ .slackchat .slack-message-box::-webkit-scrollbar-thumb
134
+ {
135
+ border-radius: 5px;
136
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
137
+ background-color: #aaa;
138
+ }
139
+
140
+ .slackchat .presence {
141
+ overflow: hidden;
142
+ }
143
+
144
+ .slackchat .presence .presence-icon {
145
+ color: #E2A12B;
146
+ font-size: 28px;
147
+ display:inline;
148
+ margin: 0;
149
+ margin-right: 5px;
150
+ line-height: 20px;
151
+ float: left;
152
+ }
153
+
154
+ .slackchat .presence.active .presence-icon {
155
+ color: #36a64f;
156
+ }
157
+
158
+ .slackchat .presence > .presence-text {
159
+ color: #aaa;
160
+ font-size: 12px;
161
+ display: inline;
162
+ font-weight: 200;
163
+ float: left;
164
+ }
165
+
166
+ @media screen and (max-width:768px) {
167
+ .slackchat.slack-chat-box {
168
+ width: 85%;
169
+ }
170
+
171
+ .slackchat .slack-chat-header {
172
+ font-size: 13px;
173
+ }
174
+ }
175
+
176
+ .slackchat .send-area {
177
+ height: 75px;
178
+ display: block;
179
+ position: absolute;
180
+ left: 0;
181
+ right: 0;
182
+ bottom: 0;
183
+ border-top: 1px solid #ddd;
184
+ padding: 10px;
185
+ background: #fff;
186
+ }