wirc-frontend.git

1) @hue: 120;
2) 
3) body
4) {
5) 	background-color: hsl(@hue, 0%, 6.125%);
6) 	color: hsl(@hue, 0%, 93.75%);
7) 	
8) 	font-family: monospace;
9) 	font-size: 1.25em;
10) }
11) 
12) input,textarea,button
13) {
14) 	font-size: 1.25em;
15) }
16) 
17) button, input[type="submit"]
18) {
19) 	background-color: hsl(@hue, 50%, 37.5%);
20) 	color: hsl(@hue, 0%, 100%);
21) 	
22) 	border: none;

23) 	border-radius: 2px;

24) 	
25) 	padding: 8px;
26) 	
27) 	cursor: pointer;
28) }
29) 
30) label
31) {
32) 	display: block;
33) 	font-size: 1.0em;
34) 	font-weight: bold;

35) 	// text-transform: capitalize;

36) }
37) 
38) .field
39) {
40) 	display: block;
41) 	margin: 16px 0;
42) }
43) 

44) .entry > *

45) {
46) 	display: inline-block;
47) }
48) 

49) .entry_time

50) {

51) 	margin: 0 4px;

52) 	
53) 	color: hsl(@hue, 0%, 75%);
54) 	
55) 	&:before
56) 	{
57) 		content: "<";
58) 	}
59) 	
60) 	&:after
61) 	{
62) 		content: ">";
63) 	}
64) }
65) 

66) .entry_type

67) {
68) 	margin: 0 4px;
69) 	
70) 	color: hsl(@hue, 0%, 100%);
71) 	
72) 	&:before
73) 	{
74) 		content: "{";
75) 	}
76) 	
77) 	&:after
78) 	{
79) 		content: "}";
80) 	}
81) }
82) 

83) .entry_sender

84) {

85) 	margin: 0 4px;

86) 	

87) 	// font-weight: bold;

88) 	
89) 	&:before
90) 	{
91) 		content: "[";
92) 	}
93) 	
94) 	&:after
95) 	{
96) 		content: "]";
97) 	}
98) }
99) 
100) .pane
101) {
102) 	background-color: hsl(@hue, 0%, 12.5%);
103) 	

104) 	height: 93.75%;

105) 	overflow-y: auto;
106) 	
107) 	list-style-type: none;
108) 	
109) 	border: 1px solid hsl(@hue, 0%, 50%);
110) 	margin: 4px;
111) 	padding: 8px;
112) 	
113) 	& > li
114) 	{
115) 		margin: 4px 0;
116) 	}
117) }
118) 

119) body
120) {
121) 	&
122) 	{
123) 		& #connect {display: none;}
124) 		& #wait {display: none;}
125) 		& #main {display: none;}
126) 	}
127) 	
128) 	&.offline
129) 	{
130) 		& #connect {display: initial !important;}
131) 	}
132) 	
133) 	&.connecting
134) 	{
135) 		& #wait {display: initial !important;}
136) 	}
137) 	
138) 	&.online
139) 	{
140) 		& #main {display: initial !important;}
141) 	}
142) }
143) 

144) #head
145) {

146) 	display: flex;
147) 	flex-direction: row;
148) 	flex-wrap: wrap;
149) 	
150) 	& > #head_left
151) 	{
152) 		flex: 1;
153) 		text-align: left;
154) 	}
155) 	
156) 	& > #head_right
157) 	{
158) 		flex: 1;
159) 		text-align: right;
160) 	}

161) }
162) 

163) 

164) #middle
165) {
166) 	display: flex;

167) 	flex-direction: row-reverse;
168) 	flex-wrap: wrap;

169) 	

170) 	& #spots
171) 	{
172) 		flex-grow: 1;
173) 		flex-shrink: 1;
174) 		
175) 		min-width: 240px;
176) 		height: 75vh;
177) 	}
178) 	
179) 	& #entries

180) 	{
181) 		flex-grow: 4;
182) 		flex-shrink: 4;
183) 		
184) 		min-width: 480px;
185) 		height: 75vh;
186) 	}
187) 	
188) 	& #users
189) 	{
190) 		flex-grow: 1;
191) 		flex-shrink: 1;
192) 		
193) 		min-width: 240px;
194) 		height: 75vh;
195) 	}

196) }
197) 

198) #content

199) {
200) 	border: none;
201) 	
202) 	background-color: hsl(@hue, 0%, 25%);
203) 	color: hsl(@hue, 0%, 100%);
204) 	
205) 	padding: 8px;
206) 	margin: 4px;
207) }
208) 

209) #main > form

210) {

211) 	display: flex;
212) 	flex-direction: row;
213) 	flex-wrap: wrap;

214) 	

215) 	& > #content {flex: 7;}

216) 	& > #send {flex: 1;}