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) 	vertical-align: middle;

87) }
88) 

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

90) .shd_cat_bar .current_page, .shd_pages .current_page {

91) 	color: #fff;

92) 	padding: 0;
93) }

94) .bot_page .current_page {

95) 	padding: 0;

96) }
97) 

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

103) h3.ticketheader img {

104) 	top: 2px;
105) 	position: relative;
106) 	margin-right: 2px;
107) }
108) 

109) #ticket img {
110) 	vertical-align: middle;
111) }
112) 

113) /* Ticket details (Left-floated box) */

114) .shd_ticket_side_column {

115) 	min-width: 23%;

116) 	padding: 0;

117) }

118) .shd_ticketdetails {

119) 	overflow: auto;

120) 	float: left;

121) 	width: 100%;

122) }

123) .shd_ticketdetails img.shd_smallicon {
124) 	vertical-align: middle;

125) }

126) .shd_customfields {

127) 	width: 66%;
128) 	margin-bottom: 0;
129) 	margin-top: 5px;
130) }

131) .shd_additional_details {

132) 	overflow: auto;

133) 	float: left;

134) 	width: 100%;

135) }

136) .shd_ticket_side_column li {

137) 	line-height: 1.8em;
138) }

139) 
140) /* The ticket container */

141) form#postmodify .shd_ticket_roundframe {

142) 	padding: 12px 16px;
143) }

144) .shd_ticket {

145) 	min-height: 250px;

146) 	display: flex;
147) 	gap: 20px;

148) }

149) .shd_ticket_description {

150) 	flex-grow: 2;

151) }
152) 

153) #shd_ticket_text {

154) 	min-height: 100px;
155) }
156) 

157) .sd_lower_columns {
158) 	display: flex;
159) 	margin: 15px 0 5px;
160) 	gap: 15px;
161) }
162) 

163) /* The left column in the ticket display */

164) .shd_ticket_leftcolumn {

165) 	width: 25%;

166) }

167) .shd_ticket_leftcolumn .roundframe {

168) 	margin: 0;

169) }
170) /* The right column in the ticket display */

171) .shd_ticket_rightcolumn {

172) 	width: 75%;
173) }

174) /* Notif preferences */
175) .sd_notif_element:not(:last-child, :first-child),
176) .sd_notif_element:first-child:not(:last-child) {
177) 	border-bottom: 1px solid #ccc;
178) 	padding-bottom: 10px;
179) 	margin-bottom: 5px;
180) }

181) 
182) /* The Respond, Edit, Delete etc links */

183) .shd_ticketlinks a {

184) 	margin-right: 10px;
185) }

186) .shd_ticketlinks a#last {

187) 	margin-right: 0px;
188) }
189) 

190) .shd_ticket_avatar {

191) 	margin: 1em auto;
192) 	text-align: center;
193) }
194) 

195) .shd_modified {

196) 	margin-top: 20px;
197) }
198) 

199) .postreply {

200) 	margin: 0;
201) }
202) 

203) .postmodify {

204) 	margin: 0;
205) }
206) 
207) /* The 'Go to the main log' link in ticket logs */

208) .shd_main_log {

209) 	font-size: 80%;
210) }

211) .shd_main_log img {

212) 	position: relative;
213) 	top: 3px;
214) 	margin-right: 2px;
215) }

216) #shd_ticket_log_expand {

217) 	margin-top: 8px;

218) 	position: relative;
219) 	left: 4px;

220) }

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

222) {
223) 	width: 85%;
224) }

225) .shd_ticket_log_expand_container {

226) 	margin-right: 3px;
227) }
228) 

229) #quickReplyExpand {

230) 	margin-top: 8px;
231) }
232) 
233) /* Override editor margins */

234) #quickReplyOptions form textarea {

235) 	margin-bottom: 0!important;
236) }
237) 
238) /**********************************
239)  * Huge buttons :D			 	*
240) ***********************************/
241) 
242) /* The big reply button */

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

245) 	background-position: 10px;

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

247) 	font-weight: bold;
248) 	font-size: 100%;
249) 	margin-bottom: 10px;

250) 	border: 1px solid #ddd;
251) 	border-radius: 7px;

252) }
253) /* The big quote button */

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

256) 	background-position: 10px;

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

258) 	font-weight: bold;
259) 	font-size: 100%;

260) 	margin-bottom: 10px;

261) 	margin-right: 10px;

262) 	border: 1px solid #ddd;
263) 	border-radius: 7px;

264) }
265) /* Go advanced! */

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

268) 	background-position: 10px;
269) 	padding: 10px;
270) 	padding-left: 40px;
271) 	padding-top: 8px;
272) 	font-weight: bold;
273) 	font-size: 100%;
274) 	margin-right: 10px;

275) 	border-top: 1px solid #ddd;
276) 	border-radius: 7px;

277) }
278) 
279) /* Edit settings*/

280) .shd_editpreferences {

281) 	height: 15px;

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

283) 	background-position: 10px;
284) 	padding: 10px;
285) 	padding-left: 40px;
286) 	padding-top: 8px;
287) 	font-weight: bold;
288) 	font-size: 100%;
289) 	margin-right: 10px;
290) }
291) 
292) /* Show tickets */

293) .shd_showtickets {

294) 	height: 15px;
295) 	padding: 10px;
296) 	padding-left: 40px;
297) 	padding-top: 8px;
298) 	font-weight: bold;
299) 	font-size: 100%;
300) 	margin-right: 10px;
301) }

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

304) 	background-position: 10px;
305) }

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

308) 	background-position: 10px;

309) }

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

312) 	background-position: 10px;
313) }

314) 
315) /**********************************
316) * Ticket replies				 *
317) ***********************************/

318) .ticket_replies_container {
319) 	display: flex;
320) 	gap: 15px;
321) 	flex-wrap: wrap;
322) }
323) /* Something to keep it look good */
324) #replies .ticket_replies_container:last-of-type {
325) 	border-bottom-left-radius: 0;
326) 	border-bottom-right-radius: 0;
327) }
328) .ticket_replies_container .postarea {
329) 	margin: 0;
330) 	flex-grow: 2;
331) }

332) .shd_posterinfo {

333) 	width: 14em;

334) 	text-align: center;

335) 	overflow: hidden;

336) }

337) .shd_postername {

338) 	font-size: 120%;
339) }

340) .shd_groupmargin {

341) 	margin-bottom: 10px;
342) }

343) .shd_posteravatar img {

344) 	padding: 0px;
345) 	max-width: 10.5em;
346) }

347) .shd_replyarea {

348) 	flex-grow: 2;

349) }
350) 

351) .shd_reply .avatar {

352) 	margin-bottom: 10px;
353) }
354) 

355) .shd_ajax_head {

356) 	font-weight: bold;
357) }

358) .shd_ajaxnotify {

359) 	width: 40%;
360) 	margin-right: 5%;
361) 	float: left;
362) }

363) dl.settings dt.shd_cust_fields_largetext, .shd_cust_fields_largetext textarea {
364) 	width: 100%;
365) }
366) 

367) 

368) /**********************************

369) * Attachment stuff				  *

370) ***********************************/

371) .shd_reply_attachments {

372) 	margin-bottom: 0;
373) 	margin-top: 5px;
374) }

375) .shd_reply_attachments ul, .shd_reply_attachments li {

376) 	display: block;
377) 	list-style-type: none;
378) }
379) 

380) .shd_reply_attachments li {

381) 	float: left;
382) 	width: 30%;
383) }
384) 

385) .shd_attachment {

386) 	padding-bottom: 5px;
387) 	font-size: 85%;
388) }

389) .shd_attachmentpreview {

390) 	text-align: center;
391) }

392) .shd_attachmentpreview img {

393) 	max-width: 75px;
394) 	margin: 3px;
395) 	margin-top: 6px;
396) }

397) .shd_attachmentpreview .description {

398) 	padding: 0;
399) }

400) .shd_removeattachment {

401) 	margin-left: -8px;
402) 	margin-right: 3px;
403) }

404) .shd_thumb {

405) 	border: 0;
406) 	display: block;
407) 	margin-left: auto;
408) 	margin-right: auto;
409) }
410) 

411) #shd_notifications_div {
412) 	margin-top: 1em;
413) }
414) 

415) /**********************************
416) * Posting and editing tickets/replies		 *
417) ***********************************/

418) #shd_bbcbox {

419)    margin: 0 0 0.5em 0;
420) }

421) #shd_bbcbox div {

422) 	margin: 0.2em 0;
423) 	vertical-align: top;

424) }

425) #shd_bbcbox div img {

426) 	margin: 0 1px 0 0;
427) 	vertical-align: top;

428) }

429) #shd_bbcbox select {

430) 	margin: 0 2px;

431) }
432) /* The smiley strip */

433) #shd_smileybox {

434) 	margin: 0.75em 0 0.5em 0;

435) }

436) #canned_replies {

437) 	margin-top: 1em;
438) }

439) #canned_replies #canned_title {
440) 	font-weight:bold;
441) }

442) 
443) /**********************************
444) * General actions				 *
445) ***********************************/

446) .pm_message {

447) 	margin-top: 1ex;
448) }
449) 
450) /* The 'Empty log' link in the action log */

451) .shd_empty_log {

452) 	font-size: 80%;
453) }

454) .shd_empty_log img {

455) 	position: relative;
456) 	top: 3px;
457) 	margin-right: 2px;
458) }
459) 
460) /**********************************
461) * The profile				 	*
462) ***********************************/

463) .shd_profile_navigation {

464) 	margin-right: 20px;
465) }

466) .shd_profile_nav_list, .shd_profile_nav_list ul, .shd_profile_nav_list li {

467) 	margin: 0;
468) 	padding: 0;
469) 	list-style-type: none;
470) }

471) .shd_profile_nav_inline, .shd_profile_nav_inline ul, .shd_profile_nav_inline li {

472) 	margin: 0;
473) 	padding: 0;
474) 	list-style-type: none;
475) 	float: left;
476) }

477) .shd_profile_nav_inline li {

478) 	margin-right: 10px;
479) 	border-right: 1px solid #cccccc;
480) 	padding-right: 10px;
481) }

482) .shd_profile_nav_inline img {

483) 	margin-left: 4px;
484) }
485) 

486) .shd_profile_nav_inline li.shd_inline_last {

487) 	border-right: none;

488) }
489) 

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

491) .bot_page {

492) 	border: 1px solid #DDD;
493) 	border-top: none;
494) }

495) #ticket_log_header {

496) 	clear: both;
497) }
498) 
499) /* Urgency stuff */

500) .generic_icons.urgency_increase::before {

501) 	width: 16px;
502) 	height: 16px;
503) 	display: inline-block;
504) 	content: '';
505) 	background: url(../images/simpledesk/move_up.png) no-repeat;

506) }

507) .generic_icons.urgency_decrease::before {

508) 	width: 16px;
509) 	height: 16px;
510) 	display: inline-block;
511) 	content: '';
512) 	background: url(../images/simpledesk/move_down.png) no-repeat;

513) }
514) 
515) /* We need some adjustments */

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

517) 	position: relative;

518) 	padding: 0;

519) }
520) 
521) /* We need something like winfo in helpdesk */

522) .noup {

523) 	border-top-left-radius: 0;
524) 	border-top-right-radius: 0;
525) 	margin: 0 !important;
526) }
527) 

528) .shd_icon_fullhead {

529) 	position: relative;

530) }
531) 

532) /* Helpdesk table-width*/

533) .shd_5 {

534) 	width: 5%;
535) }

536) .shd_10 {

537) 	width: 10%;
538) }

539) .shd_20 {

540) 	width: 20%;
541) }

542) .shd_25 {

543) 	width: 25%;
544) }

545) .shd_33 {

546) 	width: 33%;
547) }

548) .shd_50 {

549) 	width: 50%;
550) }

551) .shd_75 {

552) 	width: 75%;
553) }
554) 

555) /* Unread */

556) .sd_unread_title {

557) 	display: flex;
558) 	min-height: 35px;
559) 	flex-wrap: wrap;
560) 	align-items: center;
561) 	padding: 0 4px;
562) }

563) .sd_unread_content div.sd_unread_row {
564) 	display: flex;
565) 	min-height: 35px;
566) 	flex-wrap: wrap;
567) 	align-items: center;
568) 	padding: 0 4px;
569) }
570) 

571) .sd_unread_title span {
572) 	flex-basis: auto;
573) 	flex-grow: 1;
574) }

575) .sd_unread_content div.sd_unread_row span {

576) 	flex-basis: auto;
577) 	flex-shrink: 0;
578) 	flex-grow: 1;
579) }
580) 
581) @media screen and (max-width: 991px) {
582) 	.sd_unread_title span:not(:nth-child(1), :nth-child(2), :nth-child(5)),

583) 	.sd_unread_content div.sd_unread_row span:not(:nth-child(1), :nth-child(2), :nth-child(5)) {

584) 		display: none;

585) 	}

586) }
587) 
588) .sd_wordbreak {
589) 	overflow-wrap: break-word;