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) .user
94) {
95) 	cursor: pointer;
96) }
97) 

98) .pane
99) {
100) 	background-color: hsl(@hue, 0%, 12.5%);
101) 	

102) 	height: 93.75%;

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

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

142) #head
143) {

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

159) }
160) 

161) 

162) #middle
163) {
164) 	display: flex;

165) 	flex-direction: row-reverse;
166) 	flex-wrap: wrap;

167) 	

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

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

194) }
195) 

196) #content

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

207) #main > form

208) {

209) 	display: flex;
210) 	flex-direction: row;
211) 	flex-wrap: wrap;

212) 	

213) 	& > #container_content {flex: 7;}
214) 	& > #container_send {flex: 1;}
215) }
216) 
217) #content
218) {
219) 	width: 93.75%;