Skip to content
This repository was archived by the owner on Jun 27, 2019. It is now read-only.

Commit 2e0a929

Browse files
author
Monty Anderson
committed
Default styles
1 parent 52de380 commit 2e0a929

File tree

3 files changed

+137
-22
lines changed

3 files changed

+137
-22
lines changed

‎html/blank.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<script src="bundle.js"></script>

‎src/client.js

+8-20
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,13 @@ const fs = require('fs');
33
const io = require('socket.io-client');
44

55
document.addEventListener('DOMContentLoaded', () => {
6-
const $iframe = document.createElement('iframe');
7-
8-
document.body.appendChild($iframe);
9-
10-
const iframe = {
11-
document: $iframe.contentDocument
12-
};
13-
14-
iframe.document.head.innerHTML += `<style>${
6+
document.head.innerHTML += `<style>${
157
fs.readFileSync(`${__dirname}/style.css`, 'utf8')
168
}</style>`;
179

1810
const comments = fs.readFileSync(`${__dirname}/comments.svg`, 'utf8');
1911

20-
iframe.document.body.innerHTML += `
12+
document.body.innerHTML += `
2113
<div class='__embed_chat'>
2214
<span class="dot">
2315
${comments}
@@ -50,14 +42,12 @@ document.addEventListener('DOMContentLoaded', () => {
5042

5143
socket.emit('init', location.hostname);
5244

53-
const $name = iframe.document.querySelector('.__embed_chat .chat .name');
54-
const $messages = iframe.document.querySelector('.__embed_chat .chat .messages');
55-
const $input = iframe.document.querySelector('.__embed_chat .chat input');
56-
const $chat = iframe.document.querySelector('.__embed_chat .chat');
57-
const $dot = iframe.document.querySelector('.__embed_chat .dot');
58-
const $x = iframe.document.querySelector('.__embed_chat .chat .x');
59-
60-
console.log('name', $name);
45+
const $name = document.querySelector('.__embed_chat .chat .name');
46+
const $messages = document.querySelector('.__embed_chat .chat .messages');
47+
const $input = document.querySelector('.__embed_chat .chat input');
48+
const $chat = document.querySelector('.__embed_chat .chat');
49+
const $dot = document.querySelector('.__embed_chat .dot');
50+
const $x = document.querySelector('.__embed_chat .chat .x');
6151

6252
socket.on('name', name => {
6353
$name.innerHTML = name;
@@ -87,6 +77,4 @@ document.addEventListener('DOMContentLoaded', () => {
8777
$chat.style.display = 'none';
8878
$dot.style.display = 'block';
8979
});
90-
91-
9280
});

‎src/style.css

+128-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,134 @@
1-
.__embed_chat .chat, __embed_chat .chat * {
1+
.__embed_chat .chat, {
22
margin: 0;
33
padding: 0;
44
}
55

6+
.__embed_chat * {
7+
background-attachment: scroll!important;
8+
background-color: transparent!important;
9+
background-image: none!important;
10+
background-position: 0 0!important;
11+
background-repeat: repeat!important;
12+
border-color: currentcolor!important;
13+
border-style: none!important;
14+
border-width: medium!important;
15+
bottom: auto!important;
16+
clear: none!important;
17+
clip: auto!important;
18+
color: inherit!important;
19+
counter-increment: none!important;
20+
counter-reset: none!important;
21+
cursor: auto!important;
22+
direction: inherit!important;
23+
display: inline!important;
24+
float: none!important;
25+
font-size: inherit!important;
26+
font-style: inherit!important;
27+
font-variant: normal!important;
28+
font-weight: inherit!important;
29+
height: auto!important;
30+
left: auto!important;
31+
letter-spacing: normal!important;
32+
line-height: inherit!important;
33+
list-style-type: inherit!important;
34+
list-style-position: outside!important;
35+
list-style-image: none!important;
36+
margin: 0;
37+
max-height: none!important;
38+
max-width: none!important;
39+
min-height: 0!important;
40+
min-width: 0!important;
41+
outline: 0!important;
42+
overflow: visible!important;
43+
padding: 0;
44+
position: static!important;
45+
quotes: "" ""!important;
46+
right: auto!important;
47+
table-layout: auto!important;
48+
text-align: inherit!important;
49+
text-decoration: inherit!important;
50+
text-indent: 0!important;
51+
text-transform: none!important;
52+
text-rendering: auto!important;
53+
top: auto!important;
54+
unicode-bidi: normal!important;
55+
vertical-align: baseline!important;
56+
visibility: inherit!important;
57+
white-space: normal!important;
58+
width: auto!important;
59+
word-spacing: normal!important;
60+
z-index: auto!important;
61+
-webkit-background-origin: padding!important;
62+
-moz-background-origin: padding!important;
63+
-ms-background-origin: padding-box!important;
64+
-o-background-origin: padding-box!important;
65+
background-origin: padding-box!important;
66+
-webkit-background-clip: border!important;
67+
-moz-background-clip: border!important;
68+
background-clip: border-box!important;
69+
-webkit-background-size: auto!important;
70+
-moz-background-size: auto!important;
71+
-o-background-size: auto!important;
72+
background-size: auto!important;
73+
-moz-border-image: -moz--compass-list(none)!important;
74+
-webkit-border-image: -owg--compass-list(none)!important;
75+
-webkit-border-image: -webkit--compass-list(none)!important;
76+
-o-border-image: -o--compass-list(none)!important;
77+
border-image: none!important;
78+
-webkit-border-radius: 0!important;
79+
-moz-border-radius: 0!important;
80+
-ms-border-radius: 0!important;
81+
-o-border-radius: 0!important;
82+
border-radius: 0!important;
83+
-webkit-box-shadow: none!important;
84+
-moz-box-shadow: none!important;
85+
box-shadow: none!important;
86+
-webkit-box-sizing: content-box!important;
87+
-moz-box-sizing: content-box!important;
88+
box-sizing: content-box!important;
89+
column-count: auto!important;
90+
column-gap: normal!important;
91+
column-rule: medium none #000!important;
92+
column-width: auto!important;
93+
column-span: 1!important;
94+
-webkit-text-fill-color: currentcolor!important;
95+
-webkit-tap-highlight-color: transparent!important;
96+
-moz-tap-highlight-color: transparent!important;
97+
-ms-tap-highlight-color: transparent!important;
98+
-o-tap-highlight-color: transparent!important;
99+
font-feature-settings: normal!important;
100+
overflow-x: visible!important;
101+
overflow-y: visible!important;
102+
-webkit-hyphens: manual!important;
103+
-moz-hyphens: manual!important;
104+
-ms-hyphens: manual!important;
105+
hyphens: manual!important;
106+
-webkit-hyphenate-character: "‐"!important;
107+
hyphenate-character: "‐"!important;
108+
-webkit-perspective: none!important;
109+
-moz-perspective: none!important;
110+
-ms-perspective: none!important;
111+
-o-perspective: none!important;
112+
perspective: none!important;
113+
-webkit-perspective-origin: 50% 50%!important;
114+
-moz-perspective-origin: 50% 50%!important;
115+
-ms-perspective-origin: 50% 50%!important;
116+
-o-perspective-origin: 50% 50%!important;
117+
perspective-origin: 50% 50%!important;
118+
-webkit-backface-visibility: visible!important;
119+
-moz-backface-visibility: visible!important;
120+
-ms-backface-visibility: visible!important;
121+
-o-backface-visibility: visible!important;
122+
backface-visibility: visible!important;
123+
text-shadow: none!important;
124+
-webkit-transition: all 0s ease!important;
125+
-webkit-transition-delay: 0s!important;
126+
-moz-transition: all 0s ease 0s!important;
127+
-o-transition: all 0s ease 0s!important;
128+
transition: all 0s ease 0s!important;
129+
word-break: normal!important;
130+
}
131+
6132
.__embed_chat .chat {
7133
position: fixed;
8134
font-size: 17px;
@@ -29,7 +155,7 @@
29155

30156
.__embed_chat .chat .messages {
31157
overflow-y: scroll;
32-
height: calc(90% - 65px);
158+
height: calc(80% - 65px);
33159
padding-top: 10px;
34160
padding-bottom: 10px;
35161
border-bottom: 1px solid #D8D8D8;

0 commit comments

Comments
 (0)