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) .event > *
45) {
46) 	display: inline-block;
47) }
48) 
49) .event_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) .event_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) .event_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) 	& #events
171) 	{
172) 		flex-grow: 4;
173) 		flex-shrink: 4;
174) 		
175) 		min-width: 480px;
176) 		height: 75vh;
177) 	}
178) 	
179) 	& #users
180) 	{
181) 		flex-grow: 1;
182) 		flex-shrink: 1;
183) 		
184) 		min-width: 240px;
185) 		height: 75vh;
186) 	}

187) }
188) 
189) #message
190) {
191) 	border: none;
192) 	
193) 	background-color: hsl(@hue, 0%, 25%);
194) 	color: hsl(@hue, 0%, 100%);
195) 	
196) 	padding: 8px;
197) 	margin: 4px;
198) }
199) 

200) #main > form

201) {

202) 	display: flex;
203) 	flex-direction: row;
204) 	flex-wrap: wrap;

205) 	

206) 	& > #message {flex: 7;}
207) 	& > #send {flex: 1;}