SD-SimpleDesk

1) /**********************************
2) * General stuff used all around the helpdesk 	*
3) ***********************************/

4) /* Make sure the hidden class is here */
5) .hidden {
6) 	display: none;
7) }
8) 

9) /* SimpleDesk icons */

10) .shd_icon {

11) 	position: relative;
12) 	top: 3px;
13) }

14) .shd_tinyicon {

15) 	width: 9px;
16) 	height: 9px;
17) }
18) 

19) .shd_main_hd {

20) 	margin-top: -3px;
21) }
22) 

23) .shd_no_margin {

24) 	margin: 0;
25) }
26) 

27) .shd_hide_bottom_border {

28) 	border-bottom: 0;
29) }
30) 

31) .shd_staffresources ul {

32) 	list-style-type: none;
33) 	padding: 0;
34) 	margin: 0;
35) }

36) .shd_staffresources li {

37) 	margin-bottom: 3px;
38) }
39) 

40) .shd_gototicket {

41) 	display: block;
42) 	float: right;
43) 	margin-left: 1em;
44) }
45) 

46) .shd_assignees {

47) 	background-color:inherit;
48) 	padding-left: 1em;
49) }
50) 

51) .shd_assignees:hover {

52) 	background-color: #bbbbbb;
53) }
54) 

55) .shd_assign_button, .shd_assignees {

56) 	cursor: pointer;
57) }
58) 

59) .stats .shd_assignees_list {
60) 	width: 100%;
61) }
62) 

63) .information li dt {

64) 	color: gray;
65) 	font-weight: bold;
66) 	float: left;
67) }
68) 

69) .information li dd {

70) 	float: left;
71) 	margin: 0;
72) 	padding: 0 4px 0 7px;
73) }
74) 

75) dd#urgency_button, dd#assigned_button {

76) 	padding: 1px 0;
77) }
78) 

79) span.shd_new_tickets {

80) 	margin-left: 5px;
81)     padding: 1px 5px 3px 4px;
82) }
83) 

84) .shd_smallicon {
85) 	max-width: initial;
86) }
87) 

88) /* The page index color looks ugly with our theme. */

89) .shd_cat_bar .current_page, .shd_pages .current_page {

90) 	color: #fff;

91) 	padding: 0;
92) }

93) .bot_page .current_page {

94) 	padding: 0;

95) }
96) 

97) /**********************************
98) * Stuff used within the actual tickets 	*
99) ***********************************/
100) 
101) /* This is done to position icons perfectly in the ticket header (i.e the navigation)*/

102) h3.ticketheader img {

103) 	top: 2px;
104) 	position: relative;
105) 	margin-right: 2px;
106) }
107) 
108) /* Ticket details (Left-floated box) */

109) .shd_ticket_side_column {

110) 	float: left;

111) 	width: 23%;

112) 	padding: 0 5px 5px 5px;

113) }

114) .shd_ticketdetails {

115) 	overflow: auto;

116) 	float: left;

117) 	width: 100%;

118) }

119) .shd_ticketdetails .shd_smallicon {

120) 	padding-top: 7px;
121) }

122) .shd_customfields {

123) 	width: 66%;
124) 	margin-bottom: 0;
125) 	margin-top: 5px;
126) }

127) .shd_additional_details {

128) 	overflow: auto;

129) 	float: left;

130) 	width: 100%;

131) }

132) .shd_ticket_side_column li {

133) 	line-height: 1.8em;
134) }

135) 
136) /* The ticket container */

137) form#postmodify .shd_ticket_roundframe {

138) 	padding: 12px 16px;
139) }

140) .shd_ticket {

141) 	min-height: 250px;

142) }

143) .shd_ticket_description {

144) 	margin-left: 23%;

145) }
146) 

147) #shd_ticket_text {

148) 	min-height: 100px;
149) }
150) 
151) /* The left column in the ticket display */

152) .shd_ticket_leftcolumn {

153) 	width: 25%;

154) }

155) .shd_ticket_leftcolumn .roundframe {

156) 	margin: 0;

157) }
158) /* The right column in the ticket display */

159) .shd_ticket_rightcolumn {

160) 	width: 75%;
161) }
162) 
163) /* The Respond, Edit, Delete etc links */

164) .shd_ticketlinks a {

165) 	margin-right: 10px;
166) }

167) .shd_ticketlinks a#last {

168) 	margin-right: 0px;
169) }
170) 

171) .shd_ticket_avatar {

172) 	margin: 1em auto;
173) 	text-align: center;
174) }
175) 

176) .shd_modified {

177) 	margin-top: 20px;
178) }
179) 

180) .postreply {

181) 	margin: 0;
182) }
183) 

184) .postmodify {

185) 	margin: 0;
186) }
187) 
188) /* The 'Go to the main log' link in ticket logs */

189) .shd_main_log {

190) 	font-size: 80%;
191) }

192) .shd_main_log img {

193) 	position: relative;
194) 	top: 3px;
195) 	margin-right: 2px;
196) }

197) #shd_ticket_log_expand {

198) 	margin-top: 8px;

199) 	position: relative;
200) 	left: 4px;

201) }

202) .shd_customfields input[type="text"]

203) {
204) 	width: 85%;
205) }

206) .shd_ticket_log_expand_container {

207) 	margin-right: 3px;
208) }
209) 

210) #quickReplyExpand {

211) 	margin-top: 8px;
212) }
213) 
214) /* Override editor margins */

215) #quickReplyOptions form textarea {

216) 	margin-bottom: 0!important;
217) }
218) 
219) /**********************************
220)  * Huge buttons :D			 	*
221) ***********************************/
222) 
223) /* The big reply button */

224) .shd_replybutton {
225) 	background: url(../images/simpledesk/respond.png) no-repeat left;

226) 	background-position: 10px;

227) 	padding: 8px 10px 10px 40px;

228) 	font-weight: bold;
229) 	font-size: 100%;
230) 	margin-bottom: 10px;

231) 	border: 1px solid #ddd;
232) 	border-radius: 7px;

233) }
234) /* The big quote button */

235) .shd_quotebutton {
236) 	background: url(../images/simpledesk/quote.png) no-repeat left;

237) 	background-position: 10px;

238) 	padding: 8px 10px 10px 40px;

239) 	font-weight: bold;
240) 	font-size: 100%;

241) 	margin-bottom: 10px;

242) 	margin-right: 10px;

243) 	border: 1px solid #ddd;
244) 	border-radius: 7px;

245) }
246) /* Go advanced! */

247) .shd_advancedbutton {
248) 	background: url(../images/simpledesk/advanced.png) no-repeat left;

249) 	background-position: 10px;
250) 	padding: 10px;
251) 	padding-left: 40px;
252) 	padding-top: 8px;
253) 	font-weight: bold;
254) 	font-size: 100%;
255) 	margin-right: 10px;

256) 	border-top: 1px solid #ddd;
257) 	border-radius: 7px;

258) }
259) 
260) /* Edit settings*/

261) .shd_editpreferences {

262) 	height: 15px;

263) 	background: url(../images/simpledesk/edit.png) no-repeat left;

264) 	background-position: 10px;
265) 	padding: 10px;
266) 	padding-left: 40px;
267) 	padding-top: 8px;
268) 	font-weight: bold;
269) 	font-size: 100%;
270) 	margin-right: 10px;
271) }
272) 
273) /* Show tickets */

274) .shd_showtickets {

275) 	height: 15px;
276) 	padding: 10px;
277) 	padding-left: 40px;
278) 	padding-top: 8px;
279) 	font-weight: bold;
280) 	font-size: 100%;
281) 	margin-right: 10px;
282) }

283) #shd_showtickets {
284) 	background: url(../images/simpledesk/details.png) no-repeat left;

285) 	background-position: 10px;
286) }

287) #shd_post_proxy {
288) 	background: url(../images/simpledesk/proxy.png) no-repeat left;

289) 	background-position: 10px;

290) }

291) #shd_post_ticket {
292) 	background: url(../images/simpledesk/ticket.png) no-repeat left;

293) 	background-position: 10px;
294) }

295) 
296) /**********************************
297) * Ticket replies				 *
298) ***********************************/

299) .shd_posterinfo {

300) 	width: 14em;

301) 	text-align: center;
302) 	margin-left: 3px;

303) 	overflow: hidden;

304) }

305) .shd_postername {

306) 	font-size: 120%;
307) }

308) .shd_groupmargin {

309) 	margin-bottom: 10px;
310) }

311) .shd_posteravatar img {

312) 	padding: 0px;
313) 	max-width: 10.5em;
314) }

315) .shd_replyarea {

316) 	padding-left: 14em;

317) 	margin-left: 10px;
318) }
319) 

320) .shd_reply .avatar {

321) 	margin-bottom: 10px;
322) }
323) 

324) .shd_ajax_head {

325) 	font-weight: bold;
326) }

327) .shd_ajaxnotify {

328) 	width: 40%;
329) 	margin-right: 5%;
330) 	float: left;
331) }

332) dl.settings dt.shd_cust_fields_largetext, .shd_cust_fields_largetext textarea {
333) 	width: 100%;
334) }
335) 

336) 

337) /**********************************

338) * Attachment stuff				  *

339) ***********************************/

340) .shd_reply_attachments {

341) 	margin-bottom: 0;
342) 	margin-top: 5px;
343) }

344) .shd_reply_attachments ul, .shd_reply_attachments li {

345) 	display: block;
346) 	list-style-type: none;
347) }
348) 

349) .shd_reply_attachments li {

350) 	float: left;
351) 	width: 30%;
352) }
353) 

354) .shd_attachment {

355) 	padding-bottom: 5px;
356) 	font-size: 85%;
357) }

358) .shd_attachmentpreview {

359) 	text-align: center;
360) }

361) .shd_attachmentpreview img {

362) 	max-width: 75px;
363) 	margin: 3px;
364) 	margin-top: 6px;
365) }

366) .shd_attachmentpreview .description {

367) 	padding: 0;
368) }

369) .shd_removeattachment {

370) 	margin-left: -8px;
371) 	margin-right: 3px;
372) }

373) .shd_attachmentcolumn {

374) 	margin-right: 20px;
375) }

376) .shd_thumb {

377) 	border: 0;
378) 	display: block;
379) 	margin-left: auto;
380) 	margin-right: auto;
381) }
382) 

383) #shd_notifications_div {
384) 	margin-top: 1em;
385) }
386) 

387) /**********************************
388) * Posting and editing tickets/replies		 *
389) ***********************************/

390) #shd_bbcbox {

391)    margin: 0 0 0.5em 0;
392) }

393) #shd_bbcbox div {

394) 	margin: 0.2em 0;
395) 	vertical-align: top;

396) }

397) #shd_bbcbox div img {

398) 	margin: 0 1px 0 0;
399) 	vertical-align: top;

400) }

401) #shd_bbcbox select {

402) 	margin: 0 2px;

403) }
404) /* The smiley strip */

405) #shd_smileybox {

406) 	margin: 0.75em 0 0.5em 0;

407) }

408) #canned_replies {

409) 	margin-top: 1em;
410) }

411) #canned_replies #canned_title {
412) 	font-weight:bold;
413) }

414) 
415) /**********************************
416) * General actions				 *
417) ***********************************/

418) .pm_message {

419) 	margin-top: 1ex;
420) }
421) 
422) /* The 'Empty log' link in the action log */

423) .shd_empty_log {

424) 	font-size: 80%;
425) }

426) .shd_empty_log img {

427) 	position: relative;
428) 	top: 3px;
429) 	margin-right: 2px;
430) }
431) 
432) /**********************************
433) * The profile				 	*
434) ***********************************/

435) .shd_profile_navigation {

436) 	margin-right: 20px;
437) }

438) .shd_profile_nav_list, .shd_profile_nav_list ul, .shd_profile_nav_list li {

439) 	margin: 0;
440) 	padding: 0;
441) 	list-style-type: none;
442) }

443) .shd_profile_nav_inline, .shd_profile_nav_inline ul, .shd_profile_nav_inline li {

444) 	margin: 0;
445) 	padding: 0;
446) 	list-style-type: none;
447) 	float: left;
448) }

449) .shd_profile_nav_inline li {

450) 	margin-right: 10px;
451) 	border-right: 1px solid #cccccc;
452) 	padding-right: 10px;
453) }

454) .shd_profile_nav_inline img {

455) 	margin-left: 4px;
456) }
457) 

458) .shd_profile_nav_inline li.shd_inline_last {

459) 	border-right: none;

460) }
461) 

462) /* I'm not sure about the above, I'll rewrite them later */

463) .bot_page {

464) 	border: 1px solid #DDD;
465) 	border-top: none;
466) }

467) #ticket_log_header {

468) 	clear: both;
469) }
470) 
471) /* Urgency stuff */

472) .generic_icons.urgency_increase::before {

473) 	width: 16px;
474) 	height: 16px;
475) 	display: inline-block;
476) 	content: '';
477) 	background: url(../images/simpledesk/move_up.png) no-repeat;

478) }

479) .generic_icons.urgency_decrease::before {

480) 	width: 16px;
481) 	height: 16px;
482) 	display: inline-block;
483) 	content: '';
484) 	background: url(../images/simpledesk/move_down.png) no-repeat;

485) }
486) 
487) /* We need some adjustments */

488) dl.stats dd span, dl.stats dt span {

489) 	position: relative;

490) 	padding: 0;

491) }
492) 
493) /* We need something like winfo in helpdesk */

494) .noup {

495) 	border-top-left-radius: 0;
496) 	border-top-right-radius: 0;
497) 	margin: 0 !important;
498) }
499) 

500) .shd_icon_fullhead {

501) 	position: relative;

502) }
503) 
504) /* Something to keep it look good */

505) #replies .windowbg:last-of-type {

506) 	border-bottom-left-radius: 0;
507) 	border-bottom-right-radius: 0;

508) }
509) 

510) /* Helpdesk table-width*/

511) .shd_5 {

512) 	width: 5%;
513) }

514) .shd_10 {

515) 	width: 10%;
516) }

517) .shd_20 {

518) 	width: 20%;
519) }

520) .shd_25 {

521) 	width: 25%;
522) }

523) .shd_33 {

524) 	width: 33%;
525) }

526) .shd_50 {

527) 	width: 50%;
528) }

529) .shd_75 {

530) 	width: 75%;
531) }
532) 
533) /* Start of responsiveness */
534) /* This will be moved to its file once it gets more work on it */

535) @media (max-width: 480px) {
536) 	.shd_ticket_rightcolumn, .shd_ticket_leftcolumn {

537) 		width: 100%;
538) 		padding: 0;
539) 	}

540) 	.shd_ticket_rightcolumn {

541) 		margin-top: 10px;
542) 	}

543) 	.shd_profile_navigation {

544) 		margin-right: 0;
545) 	}

546) 	input[type="checkbox"]
547) 	{

548) 		height: 15px;
549) 		width: 15px;
550) 	}