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) 	display: inline-block;
49) }
50) 

51) .entry_time

52) {

53) 	margin: 0 4px;

54) 	
55) 	color: hsl(@hue, 0%, 75%);
56) 	

57) 	&:before {content: "<";}
58) 	&:after {content: ">";}

59) }
60) 

61) .entry_sender

62) {
63) 	margin: 0 4px;
64) 	

65) 	// font-weight: bold;

66) 	

67) 	&:before {content: "[";}
68) 	&:after {content: "]";}

69) }
70) 

71) .spot

72) {

73) 	cursor: pointer;

74) 	

75) 	margin: 0 4px;

76) 	

77) 	&.spot_active

78) 	{

79) 		font-weight: bold;

80) 	}

81) }
82) 
83) .spot_kind
84) {
85) 	display: none;

86) 	

87) 	padding: 4px;
88) 	
89) 	&:before {content: "[";}
90) 	&:after {content: "]";}

91) }
92) 
93) .pane
94) {
95) 	background-color: hsl(@hue, 0%, 12.5%);
96) 	

97) 	height: 93.75%;

98) 	overflow-y: auto;
99) 	
100) 	list-style-type: none;
101) 	
102) 	border: 1px solid hsl(@hue, 0%, 50%);
103) 	margin: 4px;
104) 	padding: 8px;
105) 	
106) 	& > li
107) 	{
108) 		margin: 4px 0;
109) 	}
110) }
111) 

112) body
113) {
114) 	&
115) 	{
116) 		& #connect {display: none;}
117) 		& #wait {display: none;}
118) 		& #main {display: none;}
119) 	}
120) 	
121) 	&.offline
122) 	{
123) 		& #connect {display: initial !important;}
124) 	}
125) 	
126) 	&.connecting
127) 	{
128) 		& #wait {display: initial !important;}
129) 	}
130) 	
131) 	&.online
132) 	{
133) 		& #main {display: initial !important;}
134) 	}
135) }
136) 

137) #head
138) {

139) 	display: flex;
140) 	flex-direction: row;
141) 	flex-wrap: wrap;
142) 	
143) 	& > #head_left
144) 	{
145) 		flex: 1;
146) 		text-align: left;
147) 	}
148) 	
149) 	& > #head_right
150) 	{
151) 		flex: 1;
152) 		text-align: right;
153) 	}

154) }
155) 

156) 

157) #middle
158) {
159) 	display: flex;

160) 	flex-direction: row-reverse;
161) 	flex-wrap: wrap;

162) 	

163) 	& #spots
164) 	{
165) 		flex-grow: 1;
166) 		flex-shrink: 1;
167) 		
168) 		min-width: 240px;
169) 		height: 75vh;
170) 	}
171) 	
172) 	& #entries

173) 	{
174) 		flex-grow: 4;
175) 		flex-shrink: 4;
176) 		
177) 		min-width: 480px;
178) 		height: 75vh;
179) 	}
180) 	
181) 	& #users
182) 	{
183) 		flex-grow: 1;
184) 		flex-shrink: 1;
185) 		
186) 		min-width: 240px;
187) 		height: 75vh;
188) 	}

189) }
190) 

191) #content

192) {
193) 	border: none;
194) 	
195) 	background-color: hsl(@hue, 0%, 25%);
196) 	color: hsl(@hue, 0%, 100%);
197) 	
198) 	padding: 8px;
199) 	margin: 4px;
200) }
201) 

202) #main > form

203) {

204) 	display: flex;
205) 	flex-direction: row;
206) 	flex-wrap: wrap;

207) 	

208) 	& > #container_content {flex: 7;}
209) 	& > #container_send {flex: 1;}
210) }
211) 
212) #content
213) {
214) 	width: 93.75%;