wirc-frontend.git

1) @hue: 150;

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, 37.5%, 37.5%);

20) 	color: hsl(@hue, 0%, 100%);
21) 	

22) 	font-size: 1.00em;
23) 	

24) 	border: none;

25) 	border-radius: 2px;

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

37) 	// text-transform: capitalize;

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

46) .entry

47) {

48) 	& > *
49) 	{
50) 		display: inline-block;
51) 		margin: 0 4px;
52) 	}

53) 	

54) 	& .entry_time
55) 	{
56) 		color: hsl(@hue, 0%, 75%);
57) 		
58) 		&:before {content: "<";}
59) 		&:after {content: ">";}
60) 	}

61) 	

62) 	& .entry_sender
63) 	{
64) 		&:before {content: "[";}
65) 		&:after {content: "]";}
66) 	}

67) 	

68) 	&.entry_message
69) 	{
70) 		& .entry_content
71) 		{
72) 		}
73) 	}

74) 	

75) 	&.entry_info
76) 	{
77) 		& .entry_content
78) 		{
79) 			color: hsl(@hue, 0%, 50%);
80) 		}
81) 	}

82) }
83) 

84) .spot

85) {

86) 	cursor: pointer;

87) 	

88) 	margin: 0 4px;

89) 	

90) 	&.spot_active

91) 	{

92) 		font-weight: bold;

93) 	}
94) 	

95) 	& .spot_kind
96) 	{
97) 		display: none;
98) 		
99) 		padding: 4px;
100) 		
101) 		&:before {content: "[";}
102) 		&:after {content: "]";}
103) 	}

104) }
105) 

106) .user
107) {
108) 	cursor: pointer;
109) }
110) 

111) .pane
112) {
113) 	background-color: hsl(@hue, 0%, 12.5%);
114) 	

115) 	height: 93.75%;

116) 	overflow-y: auto;
117) 	
118) 	list-style-type: none;
119) 	
120) 	border: 1px solid hsl(@hue, 0%, 50%);
121) 	margin: 4px;
122) 	padding: 8px;
123) 	
124) 	& > li
125) 	{
126) 		margin: 4px 0;
127) 	}
128) }
129) 

130) body
131) {
132) 	&
133) 	{
134) 		& #connect {display: none;}
135) 		& #wait {display: none;}
136) 		& #main {display: none;}
137) 	}
138) 	
139) 	&.offline
140) 	{
141) 		& #connect {display: initial !important;}
142) 	}
143) 	
144) 	&.connecting
145) 	{
146) 		& #wait {display: initial !important;}
147) 	}
148) 	
149) 	&.online
150) 	{
151) 		& #main {display: initial !important;}
152) 	}
153) }
154) 

155) #head
156) {

157) 	display: flex;
158) 	flex-direction: row;
159) 	flex-wrap: wrap;
160) 	
161) 	& > #head_left
162) 	{
163) 		flex: 1;
164) 		text-align: left;
165) 	}
166) 	
167) 	& > #head_right
168) 	{
169) 		flex: 1;
170) 		text-align: right;
171) 	}

172) }
173) 

174) 

175) #middle
176) {
177) 	display: flex;

178) 	flex-direction: row;

179) 	flex-wrap: wrap;

180) 	

181) 	& #spots
182) 	{
183) 		flex-grow: 1;
184) 		flex-shrink: 1;
185) 		

186) 		flex-basis: 240px;

187) 		height: 75vh;
188) 	}
189) 	
190) 	& #entries

191) 	{
192) 		flex-grow: 4;
193) 		flex-shrink: 4;
194) 		

195) 		flex-basis: 480px;

196) 		height: 75vh;
197) 	}
198) 	
199) 	& #users
200) 	{
201) 		flex-grow: 1;
202) 		flex-shrink: 1;
203) 		

204) 		flex-basis: 240px;

205) 		height: 75vh;
206) 	}

207) }
208) 

209) #content

210) {
211) 	border: none;
212) 	
213) 	background-color: hsl(@hue, 0%, 25%);
214) 	color: hsl(@hue, 0%, 100%);
215) 	
216) 	padding: 8px;
217) 	margin: 4px;
218) }
219) 

220) #main > form

221) {

222) 	display: flex;
223) 	flex-direction: row;
224) 	flex-wrap: wrap;

225) 	

226) 	& > #container_content {flex: 7;}
227) 	& > #container_send {flex: 1;}
228) }
229) 
230) #content
231) {
232) 	width: 93.75%;