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 2px;
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_sender
67) {
68) 	margin: 0 2px;
69) 	
70) 	font-weight: bold;
71) 	
72) 	&:before
73) 	{
74) 		content: "[";
75) 	}
76) 	
77) 	&:after
78) 	{
79) 		content: "]";
80) 	}
81) }
82) 
83) .pane
84) {
85) 	background-color: hsl(@hue, 0%, 12.5%);
86) 	
87) 	height: 75vh;
88) 	overflow-y: auto;
89) 	
90) 	list-style-type: none;
91) 	
92) 	border: 1px solid hsl(@hue, 0%, 50%);
93) 	margin: 4px;
94) 	padding: 8px;
95) 	
96) 	& > li
97) 	{
98) 		margin: 4px 0;
99) 	}
100) }
101) 

102) body
103) {
104) 	&
105) 	{
106) 		& #connect {display: none;}
107) 		& #wait {display: none;}
108) 		& #main {display: none;}
109) 	}
110) 	
111) 	&.offline
112) 	{
113) 		& #connect {display: initial !important;}
114) 	}
115) 	
116) 	&.connecting
117) 	{
118) 		& #wait {display: initial !important;}
119) 	}
120) 	
121) 	&.online
122) 	{
123) 		& #main {display: initial !important;}
124) 	}
125) }
126) 

127) #head
128) {

129) 	display: flex;
130) 	flex-direction: row;
131) 	flex-wrap: wrap;
132) 	
133) 	& > #head_left
134) 	{
135) 		flex: 1;
136) 		text-align: left;
137) 	}
138) 	
139) 	& > #head_right
140) 	{
141) 		flex: 1;
142) 		text-align: right;
143) 	}

144) }
145) 

146) 

147) #middle
148) {
149) 	display: flex;
150) 	flex-direction: row;
151) 	

152) 	& #events {flex: 4;}	

153) 	& #users {flex: 1;}
154) }
155) 
156) #message
157) {
158) 	border: none;
159) 	
160) 	background-color: hsl(@hue, 0%, 25%);
161) 	color: hsl(@hue, 0%, 100%);
162) 	
163) 	padding: 8px;
164) 	margin: 4px;
165) }
166) 

167) #main > form

168) {

169) 	display: flex;
170) 	flex-direction: row;
171) 	flex-wrap: wrap;

172) 	

173) 	& > #message {flex: 7;}
174) 	& > #send {flex: 1;}