Merge pull request #265 from kellishaver/feature/client-side-less

Feature/client side less

.gitignore

@@ -3,3 +3,5 @@ php53.cgi
 include/ost-config.php
 *.sw[a-z]
 .DS_Store
+.vagrant
+Vagrantfile

assets/default/about-custom-themes.md

+Customizng Your Theme
+====
+
+When modifying the default theme, it is recommended that you do not
+edit the CSS files directly. Instead, you should use the included
+LESS files and recompile the CSS file with your edits.
+
+Even if you decide to edit the CSS directly, we recommend that you
+keep the LESS files, so that you can quickly rebuild the default
+theme should you need to recover it, or for upgrade purposes.
+
+*Please do not submit any CSS edits to the official branch, unless
+they are done within the LESS files.*
+

assets/default/css/print.css

-#header, #nav, #meta, #footer, #reply, #pagination, .reload, .refresh, form, .thread, hr, #kbAttachments, .back {
-  display: none;
-}
-
-th {
-  text-align: left;
-}
-
-a {
-  color: #000;
-  text-decoration: none;
-}
-
-caption {
-  text-align: left;
-  padding-bottom: 10px;
-  font-weight: bold;
-}
-
-.message, .response {
-  border-bottom: 1px solid #000;
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-}
-.message th, .response th {
-  font-size: 12pt;
-  font-weight: bold;
-  padding-bottom: 5px;
-}
+#header,#nav,#meta,#footer,#reply,#pagination,.reload,.refresh,form,.thread,hr,#kbAttachments,.back{display:none}th{text-align:left}a{color:#000;text-decoration:none}caption{text-align:left;padding-bottom:10px;font-weight:bold}.message,.response{border-bottom:1px solid #000;margin-bottom:20px;padding-bottom:10px}.message th,.response th{font-size:12pt;font-weight:bold;padding-bottom:5px}
\ No newline at end of file

assets/default/css/theme.min.css

+html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;font-size:13px;line-height:1.231;padding:0}body,input,select,textarea{font-family:sans-serif;color:#000}b,strong{font-weight:bold}blockquote{margin:1em 40px}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}small{font-size:85%}ul,ol{margin:1em 0;padding:0 0 0 30px}img{border:0;vertical-align:middle}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}input{line-height:normal;*overflow:visible}table input{*overflow:auto}input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"],input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}table{border-collapse:collapse;border-spacing:0}th,td{vertical-align:top}th{text-align:left;font-weight:normal}h1,h2,h3,h4,h5,h6,form,fieldset{margin:0;padding:0}a{color:#0072bc;text-decoration:none}h1{color:#00aeef;font-weight:normal;font-size:20px}h3{font-size:16px}h2{font-size:16px;color:#999}.centered{text-align:center}.clear{clear:both;height:1px;visibility:none}.hidden{display:none}.faded{color:#666}#pagination{border:0;margin:0 0 40px 0;padding:0}#pagination li{border:0;margin:0;padding:0;font-size:11px;list-style:none;display:inline}#pagination li a{margin-right:2px;display:block;float:left;padding:3px 6px;text-decoration:none}#pagination li a:hover{color:#ff0084}#pagination .previousOff,#pagination .nextOff{color:#666;display:block;float:left;font-weight:bold;padding:3px 4px}#pagination .next a,#pagination .previous a{font-weight:bold}#pagination .active{color:#000;font-weight:bold;margin-right:2px;display:block;float:left;padding:3px 6px;text-decoration:none}#msg_notice{margin:0;padding:5px 10px 5px 36px;height:16px;line-height:16px;margin-bottom:10px;border:1px solid #0a0;background:url('../images/icons/ok.png') 10px 50% no-repeat #e0ffe0}#msg_warning{margin:0;padding:5px 10px 5px 36px;height:16px;line-height:16px;margin-bottom:10px;border:1px solid #f26522;background:url('../images/icons/alert.png') 10px 50% no-repeat #ffd}#msg_error{margin:0;padding:5px 10px 5px 36px;height:16px;line-height:16px;margin-bottom:10px;border:1px solid #a00;background:url('../images/icons/error.png') 10px 50% no-repeat #fff0f0}.warning{background:#ffc;font-style:italic}.warning strong{text-transform:uppercase;color:#a00;font-style:normal}.error{color:#f00}.error input{border:1px solid #f00}.button,.button:visited{background:#222;display:inline-block;font-size:16px;padding:8px 16px 6px 16px;width:160px;text-align:center;color:#fff;font-weight:bold;text-decoration:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);text-shadow:0 -1px 1px rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.25);position:relative;cursor:pointer;font-family:helvetica,arial,sans-serif}.button:hover{background-color:#111;color:#fff}.button:active{top:1px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}.button,.button:visited,.green.button,.green.button:visited{background-color:#91bd09}.green.button:hover{background-color:#749a02}.blue.button,.blue.button:visited{background-color:#00aeef}.blue.button:hover{background-color:#0299d2}body{background:url('../images/page_bg.png') top left repeat-x #c8c8c8}#container{background:#fff;width:840px;margin:0 auto;box-shadow:0 0 6px rgba(0,0,0,0.5);-moz-box-shadow:0 0 6px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 6px rgba(0,0,0,0.5)}#header{position:relative;height:71px;padding:0 20px}#header #logo{width:220px;height:71px;float:left}#header p{width:400px;text-align:right;margin:0;padding:10px 0;float:right}#nav{margin:0 20px;padding:2px 10px;height:20px;background:url('../images/nav_bg.png') top left repeat-x;border-top:1px solid #aaa;box-shadow:0 3px 2px rgba(0,0,0,0.4);-moz-box-shadow:0 3px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 2px rgba(0,0,0,0.4)}#nav li{margin:0;padding:0;list-style:none;display:inline}#nav li a{display:block;width:auto;float:left;height:20px;line-height:20px;text-align:center;padding:0 10px 0 32px;margin-left:10px;color:#333;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;background-position:10px 50%;background-repeat:no-repeat}#nav li a.active,#nav li a:hover{background-color:#dbefff;color:#000}#nav li a:hover{background-color:#ededed;color:#0054a6}#nav li a.home{background-image:url('../images/icons/home.png')}#nav li a.kb{background-image:url('../images/icons/kb.png')}#nav li a.new{background-image:url('../images/icons/new.png')}#nav li a.status{background-image:url('../images/icons/status.png')}#nav li a.tickets{background-image:url('../images/icons/tix.png')}#content{padding:20px 0;margin:0 20px;height:auto!important;height:350px;min-height:350px}#footer{text-align:center;font-size:11px;color:#333}#footer a{color:#333}#footer p{margin:10px 0 0 0}#footer #poweredBy{display:block;width:126px;height:23px;outline:0;text-indent:-9999px;margin:0 auto;background:url('../images/poweredby.png') top left no-repeat}#landing_page #new_ticket{margin-top:40px;width:295px;padding-left:75px;float:left;background:url('../images/new_ticket_icon.png') top left no-repeat}#landing_page #check_status{margin-top:40px;width:295px;padding-left:75px;float:right;background:url('../images/check_status_icon.png') top left no-repeat}#faq{clear:both;margin:0;padding:5px}#faq ol{font-size:15px;margin-left:0;padding-left:0;border-top:1px solid #ddd}#faq ol li{list-style:none;margin:0;padding:0;color:#999}#faq ol li a{display:block;padding:5px 0;height:auto!important;overflow:hidden;margin:0;border-bottom:1px solid #ddd;line-height:16px;padding-left:24px;background:url('../images/icons/page.png') 0 50% no-repeat}#faq ol li a:hover{background-color:#e9f5ff}#faq .article-meta{padding:5px;background:#fafafa}#kb{margin:2px 0;padding:5px;overflow:hidden}#kb>li{padding:10px;height:auto!important;overflow:hidden;margin:0;background:url(../images/kb_category_bg.png) bottom left repeat-x;border-bottom:1px solid #ddd}#kb>li h4{padding-bottom:3px;margin-bottom:3px}#kb>li h4 span{color:#666}#kb>li h4 a{font-size:14px}#kb li i{display:block;width:32px;height:32px;float:left;margin-right:6px;background:url(../images/kb_large_folder.png) top left no-repeat}#kb-search{padding:10px 0;overflow:hidden}#kb-search div{clear:both;overflow:hidden;padding-top:5px}#kb-search #query{margin:0;display:inline-block;float:left;width:200px;margin-right:5px}#kb-search #cid{margin:0;display:inline-block;float:left;width:200px;margin-right:5px;position:relative;top:2px}#kb-search #topic-id{margin:0;display:inline-block;float:left;width:410px}#kb-search #searchSubmit{margin:0;display:inline-block;float:left;position:relative;top:2px}#kb-search #breadcrumbs{color:#333;margin-bottom:15px}#kb-search #breadcrumbs #breadcrumbs a{color:#555}#ticketForm div,#clientLogin div{clear:both;padding:3px 0;overflow:hidden}#ticketForm div label,#clientLogin div label{display:block;width:140px;float:left}#ticketForm div label.required,#clientLogin div label.required{font-weight:bold;text-align:left}#ticketForm div input,#clientLogin div input,#ticketForm div textarea,#clientLogin div textarea{width:auto;border:1px solid #aaa;background:#fff;margin-right:10px;display:block;float:left}#ticketForm div input[type=file],#clientLogin div input[type=file]{border:0}#ticketForm div select,#clientLogin div select{display:block;float:left}#ticketForm div div.captchaRow,#clientLogin div div.captchaRow{line-height:31px}#ticketForm div div.captchaRow input,#clientLogin div div.captchaRow input{position:relative;top:6px}#ticketForm td textarea,#clientLogin td textarea,#ticketForm div textarea,#clientLogin div textarea{width:600px}#ticketForm td em,#clientLogin td em,#ticketForm div em,#clientLogin div em{color:#777}#ticketForm td .captcha,#clientLogin td .captcha,#ticketForm div .captcha,#clientLogin div .captcha{width:88px;height:31px;background:#000;display:block;float:left;margin-right:20px}#ticketForm td label.inline,#clientLogin td label.inline,#ticketForm div label.inline,#clientLogin div label.inline{width:auto;padding:0 10px}#ticketForm div.error input,#clientLogin div.error input{border:1px solid #a00}#ticketForm div.error label,#clientLogin div.error label{color:#a00}#ticketTable th{width:160px;font-weight:normal;text-align:left}#ticketTable th.required,#ticketTable td.required{font-weight:bold;text-align:left}#clientLogin{width:400px;margin-top:20px;padding:10px 100px 10px 10px;border:1px solid #ccc;background:url('../images/lock.png?1319655200') 440px 50% no-repeat #f6f6f6}#clientLogin p{clear:both;text-align:center}#clientLogin strong{font-size:11px;color:#d00;display:block;padding-left:140px}#clientLogin #email{width:250px;margin-right:0}#clientLogin #ticketno{width:120px;margin-right:0}#reply{margin-top:20px;padding:10px 5px;background:#f9f9f9;border:1px solid #ccc}#reply h2{margin-bottom:10px}#reply table{width:800px}#reply table td{vertical-align:top}#reply textarea{width:628px!important}#reply input[type=text],#reply #response_options textarea{border:1px solid #aaa;background:#fff}#reply .attachments .uploads div{display:inline-block;padding-right:20px}#reply .file{display:inline-block;padding-left:20px;margin-right:20px;background:url('../images/icons/file.gif') 0 50% no-repeat}.uploads{display:inline-block;padding-right:20px}.uploads label{padding:3px;padding-right:10px;width:auto!important}.Icon{width:auto;padding-left:20px;background-position:top left;background-repeat:no-repeat;color:#069;text-decoration:none}.Icon.Ticket{background-image:url('../images/icons/ticket.gif')}.Icon.webTicket{background-image:url('../images/icons/ticket_source_web.gif')}.Icon.emailTicket{background-image:url('../images/icons/ticket_source_email.gif')}.Icon.phoneTicket{background-image:url('../images/icons/ticket_source_phone.gif')}.Icon.otherTicket{background-image:url('../images/icons/ticket_source_other.gif')}.Icon.attachment{background-image:url('../images/icons/attachment.gif')}.Icon.file{background-image:url('../images/icons/attachment.gif')}.Icon.refresh{background-image:url('../images/icons/refresh.gif')}.Icon.thread{font-weight:bold;font-size:1em;background-image:url('../images/icons/thread.gif?1319556657')}.Icon:hover{text-decoration:underline}#ticketTable{border:1px solid #aaa;border-left:none;border-bottom:0}#ticketTable caption{padding:5px;text-align:left;color:#000;background:#ddd;border:1px solid #aaa;border-bottom:0;font-weight:bold}#ticketTable th{height:24px;line-height:24px;background:#e1f2ff;border:1px solid #aaa;border-right:0;border-top:0}#ticketTable th a{color:#000}#ticketTable td{padding:2px;border:1px solid #aaa;border-right:0;border-top:0}#ticketTable tr.alt td{background:#f9f9f9}#ticketSearchForm{display:inline-block;float:left;padding:0 0 5px 0}a.refresh{display:block;width:auto;float:right;height:20px;line-height:20px;text-align:center;padding:0 10px 0 28px;border:1px solid #aaa;margin-left:10px;color:#333;background-position:5px 50%;background-repeat:no-repeat;background-image:url('../images/icons/refresh.png')}.infoTable{background:#f4faff}.infoTable th{text-align:left}#ticketThread table{margin-top:10px;border:1px solid #aaa;border-bottom:2px solid #aaa}#ticketThread table th{text-align:left;border-bottom:1px solid #aaa;font-size:12px;padding:5px}#ticketThread table th span{font-weight:normal;color:#888;padding-left:20px}#ticketThread table td{padding:5px}#ticketThread .message th{background:#d8efff}#ticketThread .response th{background:#ddd}#ticketThread .info{padding:2px;background:#f9f9f9;border-top:1px solid #ddd;height:16px;line-height:16px}#ticketThread .info a{display:inline-block;margin:5px 10px 5px 0;padding-left:24px;height:16px;line-height:16px;background-position:0 50%;background-repeat:no-repeat}
\ No newline at end of file

assets/default/less/base.less

+/* Typography */
+a {
+  color: #0072bc;
+  text-decoration: none;
+}
+
+h1 {
+  color: #00AEEF;
+  font-weight: normal;
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 16px;
+}
+
+h2 {
+  font-size: 16px;
+  color: #999;
+}
+
+/* Helpers */
+.centered { text-align: center;}
+
+.clear { clear:both; height: 1px; visibility: none;}
+
+.hidden { display: none;}
+
+.faded { color:#666;}
+
+/* Pagination */
+#pagination {
+  border: 0;
+  margin: 0 0 40px 0;
+  padding: 0;
+  li {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    font-size: 11px;
+    list-style: none;
+    display: inline;
+    a {
+      margin-right: 2px;
+      display: block;
+      float: left;
+      padding: 3px 6px;
+      text-decoration: none;
+    }
+    a:hover {
+      color: #ff0084;
+    }
+  }
+  .previousOff, .nextOff {
+    color: #666;
+    display: block;
+    float: left;
+    font-weight: bold;
+    padding: 3px 4px;
+  }
+  .next a, .previous a {
+    font-weight: bold;
+  }
+  .active {
+    color: #000;
+    font-weight: bold;
+    margin-right: 2px;
+    display: block;
+    float: left;
+    padding: 3px 6px;
+    text-decoration: none;
+  }
+}
+
+/* Alerts & Notices */
+
+#msg_notice { margin: 0; padding: 5px 10px 5px 36px; height: 16px; line-height: 16px; margin-bottom: 10px; border: 1px solid #0a0; background: url('../images/icons/ok.png') 10px 50% no-repeat #e0ffe0; }
+
+#msg_warning { margin: 0; padding: 5px 10px 5px 36px; height: 16px; line-height: 16px; margin-bottom: 10px; border: 1px solid #f26522; background: url('../images/icons/alert.png') 10px 50% no-repeat #ffffdd; }
+
+#msg_error { margin: 0; padding: 5px 10px 5px 36px; height: 16px; line-height: 16px; margin-bottom: 10px; border: 1px solid #a00; background: url('../images/icons/error.png') 10px 50% no-repeat #fff0f0; }
+
+
+.warning {
+  background: #ffc;
+  font-style: italic;
+  strong {
+    text-transform: uppercase;
+    color: #a00;
+    font-style: normal;
+  }
+}
+
+.error {
+  color:#f00;
+  input {
+    border:1px solid #f00;
+  }
+}
+
+
+.button, .button:visited {
+    background: #222;
+    display: inline-block;
+    font-size: 16px;
+    padding: 8px 16px 6px 16px;
+    width:160px;
+    text-align:center;
+    color: #fff;
+    font-weight:bold;
+    text-decoration: none;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+    border-bottom: 1px solid rgba(0,0,0,0.25);
+    position: relative;
+    cursor: pointer;
+    font-family:helvetica, arial, sans-serif;
+}
+
+.button:hover                          { background-color: #111; color: #fff; }
+.button:active                         { top: 1px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; }
+.button, .button:visited,
+.green.button, .green.button:visited      { background-color: #91bd09; }
+.green.button:hover                        { background-color: #749a02; }
+.blue.button, .blue.button:visited        { background-color: #00AEEF; }
+.blue.button:hover                         { background-color: #0299d2; }

assets/default/less/kb.less

+#kb {
+  margin: 2px 0;
+  padding: 5px;
+  overflow: hidden;
+
+  > li {
+    padding:10px;
+    height:auto !important;
+    overflow:hidden;
+    margin:0;
+    background:url(../images/kb_category_bg.png) bottom left repeat-x;
+    border-bottom:1px solid #ddd;
+    h4 {
+      padding-bottom:3px;
+      margin-bottom:3px;
+      span {
+        color:#666;
+      }
+      a {
+        font-size: 14px;
+      }
+    }
+  }
+
+  li {
+    i {
+      display:block;
+      width:32px;
+      height:32px;
+      float:left;
+      margin-right:6px;
+      background:url(../images/kb_large_folder.png) top left no-repeat;
+    }
+  }
+}
+
+#kb-search {
+  padding:10px 0;
+  overflow:hidden;
+
+  div {
+    clear:both;
+    overflow:hidden;
+    padding-top:5px;
+  }
+
+  #query {
+    margin:0;
+    display:inline-block;
+    float:left;
+    width:200px;
+    margin-right:5px;
+  }
+
+  #cid {
+    margin:0;
+    display:inline-block;
+    float:left;
+    width:200px;
+    margin-right:5px;
+    position:relative;
+    top:2px;
+  }
+
+  #topic-id {
+    margin:0;
+    display:inline-block;
+    float:left;
+    width:410px;
+  }
+
+  #searchSubmit {
+    margin:0;
+    display:inline-block;
+    float:left;
+    position:relative;
+    top:2px;
+  }
+
+  #breadcrumbs {
+    color: #333;
+    margin-bottom: 15px;
+
+    #breadcrumbs a {
+      color: #555;
+    }
+  }
+}

assets/default/less/landing-page.less

+#landing_page {
+  #new_ticket {
+    margin-top: 40px;
+    width: 295px;
+    padding-left: 75px;
+    float: left;
+    background: url('../images/new_ticket_icon.png') top left no-repeat;
+  }
+
+  #check_status {
+    margin-top: 40px;
+    width: 295px;
+    padding-left: 75px;
+    float: right;
+    background: url('../images/check_status_icon.png') top left no-repeat;
+  }
+}
+
+/* Landing page FAQ not yet implemented. */
+#faq {
+  clear: both;
+  margin: 0;
+  padding: 5px;
+
+  ol {
+    font-size: 15px;
+    margin-left: 0;
+    padding-left: 0;
+    border-top:1px solid #ddd;
+
+    li {
+      list-style: none;
+      margin: 0;
+      padding:0;
+      color: #999;
+      a {
+        display:block;
+        padding:5px 0;
+        height:auto !important;
+        overflow:hidden;
+        margin:0;
+        border-bottom:1px solid #ddd;
+        line-height: 16px;
+        padding-left: 24px;
+        background: url('../images/icons/page.png') 0 50% no-repeat;
+      }
+
+      a:hover {
+        background-color:#e9f5ff;
+      }
+    }
+  }
+  .article-meta {
+    padding:5px;
+    background:#fafafa;
+  }
+}
+

assets/default/less/main-layout.less

+body {
+  background: url('../images/page_bg.png') top left repeat-x #c8c8c8;
+}
+
+#container {
+  background: #fff;
+  width: 840px;
+  margin: 0 auto;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+#header {
+  position: relative;
+  height: 71px;
+  padding: 0 20px;
+
+  #logo {
+    width: 220px;
+    height: 71px;
+    float: left;
+  }
+
+  p {
+    width: 400px;
+    text-align: right;
+    margin: 0;
+    padding: 10px 0;
+    float: right;
+  }
+}
+
+#nav {
+  margin: 0 20px;
+  padding: 2px 10px;
+  height: 20px;
+  background: url('../images/nav_bg.png') top left repeat-x;
+  border-top: 1px solid #aaa;
+  box-shadow:0 3px 2px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow:0 3px 2px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow:0 3px 2px rgba(0, 0, 0, 0.4);
+
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: inline;
+    a {
+      display: block;
+      width: auto;
+      float: left;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      padding: 0 10px 0 32px;
+      margin-left: 10px;
+      color: #333;
+      border-radius: 20px;
+      -webkit-border-radius: 20px;
+      -moz-border-radius: 20px;
+      background-position: 10px 50%;
+      background-repeat: no-repeat;
+    }
+
+    a.active, a:hover {
+      background-color: #dbefff;
+      color: #000;
+    }
+
+    a:hover {
+      background-color: #ededed;
+      color: #0054a6;
+    }
+
+    a.home    { background-image: url('../images/icons/home.png'); }
+    a.kb      { background-image: url('../images/icons/kb.png'); }
+    a.new     {  background-image: url('../images/icons/new.png'); }
+    a.status  { background-image: url('../images/icons/status.png'); }
+    a.tickets { background-image: url('../images/icons/tix.png'); }
+  }
+}
+
+#content {
+  padding: 20px 0;
+  margin: 0 20px;
+  height: auto !important;
+  height: 350px;
+  min-height: 350px;
+}
+
+#footer {
+  text-align: center;
+  font-size: 11px;
+  color: #333;
+
+  a {
+    color: #333;
+  }
+
+  p {
+    margin: 10px 0 0 0;
+  }
+
+  #poweredBy {
+    display: block;
+    width: 126px;
+    height: 23px;
+    outline: none;
+    text-indent: -9999px;
+    margin: 0 auto;
+    background: url('../images/poweredby.png') top left no-repeat;
+  }
+}
\ No newline at end of file

assets/default/less/print.less

+#header, #nav, #meta, #footer, #reply, #pagination, .reload, .refresh, form, .thread, hr, #kbAttachments, .back {
+  display: none;
+}
+
+th {
+  text-align: left;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+caption {
+  text-align: left;
+  padding-bottom: 10px;
+  font-weight: bold;
+}
+
+.message, .response {
+  border-bottom: 1px solid #000;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+
+  th {
+    font-size: 12pt;
+    font-weight: bold;
+    padding-bottom: 5px;
+  }
+}

assets/default/less/reset.less

+html {
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.231;
+  padding: 0;
+}
+
+body, input, select, textarea {
+  font-family: sans-serif;
+  color: #000;
+}
+
+b, strong {
+  font-weight: bold;
+}
+
+blockquote {
+  margin: 1em 40px;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+small {
+  font-size: 85%;
+}
+
+ul, ol {
+  margin: 1em 0;
+  padding: 0 0 0 30px;
+}
+
+img {
+  border: 0;
+  vertical-align: middle;
+}
+
+form {
+  margin: 0;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  cursor: pointer;
+}
+
+input, select, textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+
+input {
+  line-height: normal;
+  *overflow: visible;
+}
+
+table input {
+  *overflow: auto;
+}
+
+input[type="button"], input[type="reset"], input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+
+input[type="checkbox"], input[type="radio"] {
+  box-sizing: border-box;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th, td {
+  vertical-align: top;
+}
+
+th { text-align: left; font-weight: normal; }
+
+h1, h2, h3, h4, h5, h6, form, fieldset {
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file

assets/default/less/theme.less

+@import 'reset';
+@import 'base';
+@import 'main-layout';
+@import 'landing-page';
+@import 'kb';
+@import 'ticket-forms';
+@import 'ticket';

assets/default/less/ticket-forms.less

+#ticketForm, #clientLogin {
+  div {
+    clear: both;
+    padding: 3px 0;
+    overflow: hidden;
+
+    label {
+      display: block;
+      width: 140px;
+      float: left;
+    }
+
+    label.required {
+        font-weight: bold;
+        text-align: left;
+    }
+
+    input, textarea {
+      width: auto;
+      border: 1px solid #aaa;
+      background: #fff;
+      margin-right: 10px;
+      display: block;
+      float: left;
+    }
+
+    input[type=file] {
+      border: 0;
+    }
+
+    select {
+      display: block;
+      float: left;
+    }
+    div.captchaRow {
+      line-height: 31px;
+
+      input {
+        position: relative;
+        top: 6px;
+      }
+    }
+
+  }
+
+  td, div {
+    textarea {
+      width: 600px;
+    }
+
+    em {
+      color: #777;
+    }
+
+    .captcha {
+      width: 88px;
+      height: 31px;
+      background: #000;
+      display: block;
+      float: left;
+      margin-right: 20px;
+    }
+
+    label.inline {
+      width: auto;
+      padding: 0 10px;
+    }
+  }
+
+  div.error {
+    input {
+      border: 1px solid #a00;
+    }
+    label {
+      color: #a00;
+    }
+  }
+}
+
+#ticketTable {
+  th {
+    width: 160px;
+    font-weight: normal;
+    text-align: left;
+  }
+  th.required, td.required {
+    font-weight: bold;
+    text-align: left;
+  }
+}
+
+#clientLogin {
+  width: 400px;
+  margin-top: 20px;
+  padding: 10px 100px 10px 10px;
+  border: 1px solid #ccc;
+  background: url('../images/lock.png?1319655200') 440px 50% no-repeat #f6f6f6;
+
+  p {
+    clear: both;
+    text-align: center;
+  }
+
+  strong {
+    font-size: 11px;
+    color: #d00;
+    display: block;
+    padding-left: 140px;
+  }
+
+  #email {
+    width: 250px;
+    margin-right: 0;
+  }
+
+  #ticketno {
+    width: 120px;
+    margin-right: 0;
+  }
+}
+
+#reply {
+  margin-top: 20px;
+  padding: 10px 5px;
+  background: #f9f9f9;
+  border: 1px solid #ccc;
+
+  h2 {
+    margin-bottom: 10px;
+  }
+
+  table {
+    width: 800px;
+
+    td {
+      vertical-align: top;
+    }
+  }
+
+  textarea {
+    width: 628px !important;
+  }
+
+  input[type=text], #response_options textarea {
+    border: 1px solid #aaa;
+    background: #fff;
+  }
+
+  .attachments .uploads div {
+    display: inline-block;
+    padding-right: 20px;
+  }
+  .file {
+    display: inline-block;
+    padding-left: 20px;
+    margin-right: 20px;
+    background: url('../images/icons/file.gif') 0 50% no-repeat;
+  }
+}
+
+.uploads {
+  display:inline-block;
+  padding-right:20px;
+
+  label {
+    padding:3px;
+    padding-right:10px;
+    width: auto !important
+  }
+}
\ No newline at end of file

assets/default/less/ticket.less

+/* Ticket icons */
+.Icon {
+  width: auto;
+  padding-left: 20px;
+  background-position: top left;
+  background-repeat: no-repeat;
+  color: #006699;
+  text-decoration: none;
+}
+
+.Icon.Ticket { background-image: url('../images/icons/ticket.gif') }
+.Icon.webTicket { background-image: url('../images/icons/ticket_source_web.gif'); }
+.Icon.emailTicket { background-image: url('../images/icons/ticket_source_email.gif'); }
+.Icon.phoneTicket { background-image: url('../images/icons/ticket_source_phone.gif'); }
+.Icon.otherTicket { background-image: url('../images/icons/ticket_source_other.gif'); }
+.Icon.attachment { background-image: url('../images/icons/attachment.gif'); }
+.Icon.file { background-image: url('../images/icons/attachment.gif'); }
+.Icon.refresh { background-image: url('../images/icons/refresh.gif'); }
+
+.Icon.thread {
+  font-weight: bold;
+  font-size: 1em;
+  background-image: url('../images/icons/thread.gif?1319556657');
+}
+
+.Icon:hover {
+  text-decoration: underline;
+}
+
+
+#ticketTable {
+  border: 1px solid #aaa;
+  border-left: none;
+  border-bottom: none;
+
+  caption {
+    padding: 5px;
+    text-align: left;
+    color: #000;
+    background: #ddd;
+    border: 1px solid #aaa;
+    border-bottom: none;
+    font-weight: bold;
+  }
+
+  th {
+    height: 24px;
+    line-height: 24px;
+    background: #e1f2ff;
+    border: 1px solid #aaa;
+    border-right: none;
+    border-top: none;
+
+    a {
+      color: #000;
+    }
+  }
+
+  td {
+    padding: 2px;
+    border: 1px solid #aaa;
+    border-right: none;
+    border-top: none;
+  }
+
+  tr.alt td {
+    background: #f9f9f9;
+  }
+}
+
+#ticketSearchForm {
+  display: inline-block;
+  float: left;
+  padding: 0 0 5px 0;
+}
+
+a.refresh {
+  display: block;
+  width: auto;
+  float: right;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  padding: 0 10px 0 28px;
+  border: 1px solid #aaa;
+  margin-left: 10px;
+  color: #333;
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+  background-image: url('../images/icons/refresh.png');
+}
+
+.infoTable {
+  background: #F4FAFF;
+  th {
+    text-align: left;
+  }
+}
+
+#ticketThread {
+  table {
+    margin-top: 10px;
+    border: 1px solid #aaa;
+    border-bottom: 2px solid #aaa;
+
+    th {
+      text-align: left;
+      border-bottom: 1px solid #aaa;
+      font-size: 12px;
+      padding: 5px;
+
+      span {
+          font-weight:normal;
+          color:#888;
+          padding-left:20px;
+      }
+    }
+
+    td {
+      padding: 5px;
+    }
+  }
+
+  .message th { background: #d8efff; }
+  .response th { background: #ddd; }
+
+  .info {
+    padding: 2px;
+    background: #f9f9f9;
+    border-top: 1px solid #ddd;
+    height: 16px;
+    line-height: 16px;
+
+    a {
+      display: inline-block;
+      margin: 5px 10px 5px 0;
+      padding-left: 24px;
+      height: 16px;
+      line-height: 16px;
+      background-position: 0 50%;
+      background-repeat: no-repeat;
+    }
+  }
+}
+

include/client/header.inc.php

@@ -10,7 +10,7 @@ header("Content-Type: text/html; charset=UTF-8\r\n");
     <meta name="description" content="customer support platform">
     <meta name="keywords" content="osTicket, Customer support system, support ticket system">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/theme.css" media="screen">
+    <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/theme.min.css" media="screen">
     <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/print.css" media="print">
     <script src="<?php echo ROOT_PATH; ?>js/jquery-1.7.2.min.js"></script>
     <script src="<?php echo ROOT_PATH; ?>js/jquery.multifile.js"></script>