more appreciable strike through line on closed tasks

- enhance styles for activities list
- reorganize styles for issue page

.jshintrc

@@ -0,0 +1,23 @@
+{
+    "camelcase"    : true,
+    "curly"        : true,
+    "eqeqeq"       : true,
+    "forin"        : true,
+    "indent"       : 4,
+    "latedef"      : true,
+    "newcap"       : true,
+    "nonew"        : false,
+    "quotmark"     : "double",
+    "undef"        : true,
+    "unused"       : true,
+    "strict"       : true,
+    "maxparams"    : 3,
+    "maxdepth"     : 3,
+    "maxstatements": 16,
+    "maxlen"       : 80,
+    "shadow"       : false,
+    "browser"      : true,
+    "jquery"       : true,
+    "globals"      : {
+    }
+}

Gruntfile.js

@@ -1,6 +1,8 @@
 module.exports = function(grunt) {
 
   grunt.initConfig({
+    src: "src/",
+
     sass: {
       options: {
         sourceMap: false,
@@ -8,29 +10,57 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'stylesheets/application.css': 'sass/application.scss'
+          'stylesheets/application.css': '<%= src %>sass/application.scss'
         }
       },
       redmine_backlogs: {
         files: {
-          'plugins/redmine_backlogs/global.css':         'sass/plugins/redmine_backlogs/global.scss',
-          'plugins/redmine_backlogs/master_backlog.css': 'sass/plugins/redmine_backlogs/master_backlog.scss',
-          'plugins/redmine_backlogs/statistics.css':     'sass/plugins/redmine_backlogs/statistics.scss',
-          'plugins/redmine_backlogs/taskboard.css':      'sass/plugins/redmine_backlogs/taskboard.scss'
+          'plugins/redmine_backlogs/global.css':
+            '<%= src %>sass/plugins/redmine_backlogs/global.scss',
+          'plugins/redmine_backlogs/master_backlog.css':
+            '<%= src %>sass/plugins/redmine_backlogs/master_backlog.scss',
+          'plugins/redmine_backlogs/statistics.css':
+            '<%= src %>sass/plugins/redmine_backlogs/statistics.scss',
+          'plugins/redmine_backlogs/taskboard.css':
+            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss',
+          'plugins/redmine_backlogs/jquery/jquery-ui.css':
+            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery-ui.scss',
+          'plugins/redmine_backlogs/jquery/jquery.multiselect.css':
+            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss',
+          'plugins/redmine_backlogs/jquery/jquery.qtip.css':
+            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss'
         }
       }
     },
 
+    uglify: {
+      build: {
+        src: [
+          '<%= src %>javascripts/modules/*.js',
+          '<%= src %>javascripts/theme.js'
+        ],
+        dest: 'javascripts/theme.js'
+      }
+    },
+
     watch: {
       css: {
-        files: ['sass/**/*.scss'],
-        tasks: ['sass']
+        files: ['<%= src %>sass/**/*.scss'],
+        tasks: ['css']
+      },
+      js: {
+        files: ['<%= src %>javascripts/**/*.js'],
+        tasks: ['js']
       }
     }
   });
 
   grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks("grunt-contrib-uglify");
 
-  grunt.registerTask('default', ['sass']);
+  grunt.registerTask('css', ['sass']);
+  grunt.registerTask('js', ['uglify']);
+
+  grunt.registerTask('default', ['css', 'js']);
 };

README.md

@@ -4,17 +4,19 @@ A free Redmine theme for modern browsers.
 
 ![Screenshot](https://github.com/HolonGlobe/PurpleMine2/raw/master/screenshots/issues-list.png)
 
-Compatible with Redmine 2.5+ and browsers: IE9+, latest Firefox and Google Chrome (others where not tested).
+Compatible with Redmine 2.5+ and browsers: IE9+, latest Firefox and Google Chrome (others were not tested).
 
-It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure and stuff.
+It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
 
 ## Main features
 
-* Bigger, easier to read fonts
-* Wiki content with Github-ish style
-* Sidebar moved to the left for better ergonomy (it's customizable via `_variables.scss`)
-* Coloring trackers links (on lists, issue pages and even in the wiki content)
-* Highlighting issues priority on the list and on the issue page
+* Bigger, easier to read fonts,
+* Github-like wiki content look,
+* Sidebar moved to the left for better ergonomy,
+* Coloring trackers links (on lists, issue pages and even in the wiki content),
+* Highlighting issues priority on the list and on the issue page,
+* Toggling sidebar visibility,
+* Easy to customize via variables.
 
 ## How install it
 
@@ -24,9 +26,99 @@ Then go to Redmine > Administration > Settings > Display and select PurpleMine2
 
 ## Plugins
 
-This theme also features new look for [Redmine Backlogs][redmine_backlogs] plugin.
+This theme also features a new look for [Redmine Backlogs][redmine_backlogs] plugin. To install it, simply copy stylesheets from `PurpleMine2/plugins/redmine_backlogs` and overwrite files in `{redmine}/plugins/redmine_backlogs/assets/stylesheets` and restart Redmine.
 
-To install it, simply copy stylesheets from `PurpleMine2/plugins/redmine_backlogs` and overwrite files in `{redmine}/public/plugin_assets/redmine_backlogs/stylesheets`.
+Also, [Redmine Time Tracker][redmine_time_tracker] and [Redmine People][redmine_crm_people] plugins should look nice with PurpleMine.
+
+## How to customize it
+
+If you want to customize PurpleMine to your needs, first, make sure that you have installed [node.js](http://nodejs.org/) and `npm` is available in your terminal.
+
+If haven't yet, you need to install grunt:
+
+    npm install grunt-cli -g
+
+Then, from the directory that contains PurpleMine run:
+
+    npm install
+
+Now all the dependencies should be ready to use. Run one more command:
+
+    grunt watch
+
+And now the grunt is watching for changes in files placed in `src/` folder. Just change what you need, and it'll run SASS preprocessor automatically.
+
+Regrettably, optional file include is not possible in SASS, so I would recommend creating a new file, e.g. `_my_variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
+
+## Changelog
+
+v1.4.1 (2015-04-14):
+
+* Fixed #3: Closed tasks will be more appreciable.
+
+v1.4.0 (2015-04-10):
+
++ Introduced option `$wiki-page-more-vertical-space` (by default `true`) to improve wiki pages' readability even more
+* Fixed bottom margin of `pre` tag
++ Added a few helper classes from Bootstrap
+* WYSIWYG's icons will squeeze a little bit on smaller screens
+* Images in headers will be aligned to the middle vertically
++ Introduced `text-normal` class for resetting font's weight
++ Added class `toc-active-prev` that will "highlight" TOC as "active".
+* Fixed #2: Make sure that `.sort` with Font Awesome icons won't have background image
+* Fixed attachments div's layout for wiki pages
+
+For more details, see [release v1.4.0](https://github.com/HolonGlobe/PurpleMine2/releases/tag/v1.4.0)
+
+v1.3.0 (2015-04-01):
+
+* Backlogs: make it possible to click on empty field
+* Corrected issue form columns widths so they will be equal in all fieldsets
+* Changesets will look similar to issue's journal
++ Improved revision page layout and added Font Awesome icons
++ Improved file content view
+* Fixed #1: Font Awesome icons will no longer break plugins' icons
++ Introduced styles for [People][redmine_crm_people] plugin
+* Enhanced styles for activities list
+* Regular buttons (e.g. `Cancel`) will look like links in dialog windows
+* Fixed look of collapsible arrow in Firefox
++ Overrode Redmine's revision graph function to make it look better
++ Animated collapsible fieldsets
++ Custom image based icons changed to base64 embedded data
+
+v1.2.0 (2015-03-03):
+
+* Fixed .warning style
++ Coloring status on issue page (it'll look like label)
+* Fixed master backlog sub-menu accessibility
++ Changed font weight to normal for sub-projects in project list
+* Fixed watch task path for .js
+- Removed unnecessary classes from .sidebar-toggler
+* Fixed external link icon, when URI contains the word 'edit'
+* Fixed wiki page headers links font-size
++ Changed some trackers default colors
++ Bolded user name on issue page if it's current user
+* Issue's journal appearance changed once again
++ Some improvements in wiki formatting
++ Introduced HistoryTabs for filtering issue journals
+* Improved issue page styles and adjusted default priority colors
+* Backlogs: added delay before hiding backlog menu
+* Changed ancestor project name in top to equal font size, but different weight
+* Fixed context menu position regression introduced by sidebar toggle
+
+v1.1.0 (2015-02-15):
+
++ Changed issue's journal appearance
++ jQuery UI menus look improved
++ Removed box-shadow from boxes
++ Bumped grunt-sass version
++ Toggling sidebar visibility
++ Recompressed images
++ Changelog added
+
+v1.0.0 (2015-02-06):
+
+Initial version
 
 ## License
 
@@ -35,4 +127,6 @@ To install it, simply copy stylesheets from `PurpleMine2/plugins/redmine_backlog
 [SCSS]: http://sass-lang.com/
 [normalize.css]: https://github.com/necolas/normalize.css
 [bootstrap-sass]: https://github.com/twbs/bootstrap-sass
-[redmine_backlogs]: https://github.com/backlogs/redmine_backlogs
+[redmine_backlogs]: https://github.com/backlogs/redmine_backlogs
+[redmine_time_tracker]: https://github.com/hicknhack-software/redmine_time_tracker
+[redmine_crm_people]: http://www.redminecrm.com/projects/people/

javascripts/theme.js

@@ -0,0 +1 @@
+var PurpleMine=PurpleMine||{};PurpleMine.HistoryTabs=function(){"use strict";function a(){b=this,this.$tabsContainer=null,this.$tabs=null,this.$history=$("#history"),this.lang=document.documentElement.lang,"undefined"===c[this.lang]&&(this.lang="en"),this._=c[this.lang],this.$history.length>0&&(this.buildTabs(),this.markFirstOfTypes())}var b,c={en:{all:"All",notes:"Notes",details:"Changes"},pl:{all:"Wszystko",notes:"Notatki",details:"Zmiany"}};return a.prototype.buildTabs=function(){var a="",b='<li><a href="javascript:;" class="',c='history-tab" data-tab="',d="</a></li>";a+='<div class="tabs"><ul>',a+=b+"selected "+c+'all">'+this._.all+d,a+=b+c+'notes">'+this._.notes+d,a+=b+c+'details">'+this._.details+d,a+="</ul></div>",this.$tabsContainer=$(a),$("#history > h3").after(this.$tabsContainer),this.$tabs=this.$tabsContainer.find(".history-tab"),this.$tabs.on("click",this.tabClick)},a.prototype.markFirstOfTypes=function(){this.$history.find(".has-notes:first").addClass("first-of-notes"),this.$history.find(".has-details:first").addClass("first-of-details")},a.prototype.tabClick=function(){var a=$(this),c=a.attr("data-tab");b.$tabs.removeClass("selected"),a.addClass("selected"),b.$history.removeClass("hide-details").removeClass("hide-notes"),"notes"===c?b.$history.addClass("hide-details"):"details"===c&&b.$history.addClass("hide-notes")},a}();var PurpleMine=PurpleMine||{};PurpleMine.RevisionGraph=function(a,b,c){"use strict";var d=20,e=17,f=b,g=$.map(f,function(a){return a}),h=g.length-1,i=$("table.changesets tr.changeset");null!==revisionGraph?revisionGraph.clear():revisionGraph=new Raphael(a);var j=revisionGraph.set(),k=i.first().find("td").first().position().left-$(a).position().left,l=$(a).position().top,m=k+(c+1)*d,n=i.last().position().top+i.last().height()-l;revisionGraph.setSize(m,n);var o=["#e74c3c","#584492","#019851","#ed820c","#4183c4"];if(c>=o.length){Raphael.getColor.reset();for(var p=0;c>=p;p++)o.push(Raphael.getColor(.9))}var q,r,s,t,u,v,w,x;$.each(g,function(a,b){b.hasOwnProperty("space")||(b.space=0),s=i.eq(h-b.rdmid).position().top-l+e,r=k+d/2+d*b.space,revisionGraph.circle(r,s,3.5).attr({fill:o[b.space],stroke:"none"}).toFront(),$.each(b.parent_scmids,function(a,c){q=f[c],q?(q.hasOwnProperty("space")||(q.space=0),u=i.eq(h-q.rdmid).position().top-l+e,t=k+d/2+d*q.space,v=revisionGraph.path(q.space===b.space?["M",r,s,"V",u]:["M",r,s,"C",r,s,r,s+(u-s)/2,r+(t-r)/2,s+(u-s)/2,"C",r+(t-r)/2,s+(u-s)/2,t,u-(u-s)/2,t,u])):v=revisionGraph.path(["M",r,s,"V",n]),v.attr({stroke:o[b.space],"stroke-width":1.5}).toBack()}),x=revisionGraph.circle(r,s,10),x.attr({fill:"#000",opacity:0,cursor:"pointer",href:b.href}),null!==b.refs&&b.refs.length>0&&(w=document.createElementNS(revisionGraph.canvas.namespaceURI,"title"),w.appendChild(document.createTextNode(b.refs)),x.node.appendChild(w)),j.push(x)}),j.toFront()},$(function(){"use strict";window.drawRevisionGraph&&(window.drawRevisionGraph=PurpleMine.RevisionGraph,$(window).resize())});var PurpleMine=PurpleMine||{};PurpleMine.SidebarToggler=function(){"use strict";function a(){b=this,this.sidebarVisible=!0,this.sidebarHiding=null,this.$toggler=null,this.$main=$("#main"),this.$sidebar=$("#sidebar"),"relative"===this.$main.css("position")&&$("#context-menu").appendTo("#wrapper3"),window.localStorage&&(this.sidebarVisible=null===localStorage.getItem("PurpleMine:sidebarHidden")),this.$sidebar.length>0&&!1===this.$main.hasClass("nosidebar")&&(this.buildButton(),this.bindKeyHandler(),!1===this.sidebarVisible&&this.hideSidebar(!0))}var b;return a.prototype.bindKeyHandler=function(){var a=document.getElementsByTagName("body")[0];window.onkeydown=function(c){a===c.target&&83===c.keyCode&&!1===c.ctrlKey&&!1===c.altKey&&!1===c.shiftKey&&b.toggleSidebar()}},a.prototype.buildButton=function(){var a,b="pl"===document.documentElement.lang?"Pokaż/ukryj panel boczny":"Toggle sidebar",c="sidebar-toggler";a='<a href="javascript:;" class="'+c+'" title="'+b+'"></a>',this.$toggler=$(a),this.$main.append(this.$toggler),this.$toggler.on("click",this.toggleSidebar)},a.prototype.toggleSidebar=function(){b.sidebarVisible?b.hideSidebar():b.showSidebar()},a.prototype.hideSidebar=function(a){!0===a?this.$sidebar.addClass("sidebar-hiding sidebar-hidden"):(this.$sidebar.addClass("sidebar-hiding"),this.sidebarHiding=setTimeout(function(){b.$sidebar.addClass("sidebar-hidden")},500)),this.$toggler.addClass("sidebar-hidden"),this.sidebarVisible=!1,window.localStorage&&localStorage.setItem("PurpleMine:sidebarHidden","x")},a.prototype.showSidebar=function(){clearTimeout(this.sidebarHiding),this.$sidebar.removeClass("sidebar-hidden",0).removeClass("sidebar-hiding"),this.$toggler.removeClass("sidebar-hidden"),this.sidebarVisible=!0,window.localStorage&&localStorage.removeItem("PurpleMine:sidebarHidden")},a}(),$(function(){"use strict";new PurpleMine.SidebarToggler,new PurpleMine.HistoryTabs});

package.json

@@ -20,7 +20,8 @@
   "homepage": "https://github.com/HolonGlobe/PurpleMine2",
   "devDependencies": {
     "grunt": "^0.4.5",
+    "grunt-contrib-uglify": "^0.7.0",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-sass": "^0.17.0"
+    "grunt-sass": "^0.18.0"
   }
 }

plugins/redmine_backlogs/jquery/jquery.multiselect.css

@@ -0,0 +1 @@
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 3px 8px rgba(0,0,0,0.07);z-index:10000}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:0.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}

plugins/redmine_backlogs/jquery/jquery.qtip.css

@@ -0,0 +1 @@
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 2px 2px rgba(0,0,0,0.2);overflow:hidden}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;margin:0 auto;border:0 none;background:transparent;overflow:hidden;z-index:10}

sass/components/_issue.scss

@@ -1,389 +0,0 @@
-//
-// Issue page
-// --------------------------------------------------
-
-.issue.details {
-    margin-bottom: $line-height-computed;
-    padding: $issue-padding;
-    border: 1px solid $issue-border;
-    border-radius: $border-radius-base;
-    background-color: $issue-bg;
-    color: $issue-text;
-    word-wrap: break-word;
-    box-shadow: $panel-shadow;
-
-    @if $use-gravatars
-    {
-        > img.gravatar {
-            width: $issue-gravatar-size;
-            height: $issue-gravatar-size;
-            margin-right: 10px;
-            margin-bottom: $line-height-computed / 2;
-            float: left;
-        }
-
-        table img.gravatar {
-            position: relative;
-            top: -3px;
-            margin-right: 5px;
-        }
-
-        > .subject,
-        > .author {
-            padding-left: $issue-gravatar-size + 10px;
-        }
-    }
-
-    > .subject {
-        h3 {
-            margin-bottom: 5px;
-            color: $gray-darkest;
-            font-size: $issue-heading-size * 1em;
-            font-weight: bold;
-            line-height: $headings-line-height;
-        }
-
-        p {
-            margin-bottom: 5px;
-            font-size: $font-size-small;
-        }
-    }
-
-    > .author {
-        margin-bottom: $line-height-computed;
-    }
-
-    > hr {
-        margin: $issue-padding (-$issue-padding);
-        border-top-color: $issue-border;
-    }
-
-    > .description {
-        > p {
-            margin-bottom: $issue-padding;
-        }
-
-        > .wiki {
-            margin: 0 (-$issue-padding) (-$issue-padding);
-            padding: $padding-wiki;
-            border-top: 1px solid $issue-border;
-            background: $body-bg;
-        }
-    }
-
-    .next-prev-links {
-        color: $gray-light;
-    }
-}
-
-div.fileover {
-    background-color: $highlight-bg;
-}
-
-div.attachments {
-    margin: $issue-padding (-$issue-padding) (-$issue-padding);
-    padding: $issue-padding;
-    border-top: 1px solid $issue-border;
-
-    p {
-        margin: 10px 0 0;
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-
-    img {
-        position: relative;
-        top: -1px;
-        vertical-align: middle;
-    }
-
-    .delete {
-        opacity: .5;
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    span.author {
-        color: $gray;
-        font-size: $font-size-small;
-    }
-}
-
-div.thumbnails {
-    margin-top: $issue-padding;
-
-    div {
-        display: inline;
-    }
-
-    a {
-        display: inline-block;
-        margin-right: 2px;
-        border: 1px solid $gray-lighter;
-        border-radius: $border-radius-base;
-        background-color: $body-bg;
-
-        &:hover {
-            border-color: $gray-light;
-        }
-    }
-
-    img {
-        top: 0;
-        margin: 3px;
-        border-radius: $border-radius-base - 1;
-    }
-}
-
-#issue_tree,
-#relations {
-    > p {
-        margin-bottom: 0;
-    }
-
-    .issues {
-        margin: ($line-height-computed / 2) 0 0;
-
-        tr:last-child > td {
-            border-bottom: 0 none;
-        }
-
-        td.checkbox {
-            display: none;
-        }
-
-        td.subject {
-            padding-left: 0;
-        }
-
-        td.buttons {
-            vertical-align: middle;
-        }
-    }
-}
-
-#relations {
-    td.checkbox {
-        display: none;
-    }
-
-    td.buttons {
-        padding: 0;
-    }
-}
-
-table.attributes {
-    width: 100%;
-
-    th,
-    td {
-        padding: $table-condensed-cell-padding $table-condensed-cell-padding $table-condensed-cell-padding 0;
-        text-align: left;
-        vertical-align: top;
-    }
-
-    > tbody > tr {
-        > th {
-            width: 15%;
-        }
-
-        > td {
-            width: 35%;
-        }
-    }
-}
-
-#new-relation-form {
-    text-align: right;
-
-    > p {
-        margin-bottom: 0;
-
-        > input {
-            margin-right: 5px;
-        }
-    }
-}
-
-$journal-gravatar: 24px;
-$journal-indent: 0;
-
-@if $use-gravatars {
-    $journal-indent: $journal-gravatar + 5px;
-}
-
-.journal {
-    margin-bottom: $line-height-computed / 2;
-    overflow: auto;
-
-    h4 {
-        margin-bottom: 5px;
-
-        > .gravatar {
-            margin-right: 5px;
-            float: left;
-        }
-    }
-
-    @if $bubble-journal-wiki-note {
-        &.has-details h4 {
-            border-bottom: 1px solid $gray-lighter;
-        }
-    } @else {
-        h4 {
-            border-bottom: 1px solid $gray-lighter;
-        }
-    }
-
-    .details {
-        padding-left: $journal-indent + 15px;
-
-        img {
-            margin: 0 0 -3px 4px;
-        }
-    }
-
-    .wiki {
-        margin-bottom: $line-height-computed / 2;
-        margin-left: $journal-indent;
-    }
-
-    @if $use-gravatars {
-        form {
-            margin-left: $journal-indent;
-
-            .wiki {
-                margin-left: 0;
-            }
-        }
-    }
-
-    i {
-        &:first-of-type,
-        &:last-of-type {
-            padding: $tracker-inline-padding;
-            border-radius: $border-radius-small;
-            font-size: .9285em;
-            font-style: normal;
-        }
-
-        &:first-of-type {
-            background-color: mix($body-bg, $diff-out-bg, 64%);
-            color: $diff-out-color;
-        }
-
-        &:last-of-type {
-            background-color: mix($body-bg, $diff-in-bg, 64%);
-            color: $diff-in-color;
-        }
-    }
-
-    @if $bubble-journal-wiki-note {
-        &.has-notes {
-            .wiki {
-                position: relative;
-                min-height: $line-height-computed;
-                padding: $padding-large-vertical $padding-base-horizontal;
-                border: 1px solid $gray-lighter;
-                border-left: 2px solid $gray-light;
-                border-radius: $panel-border-radius;
-                background: $body-bg;
-                box-shadow: 0 1px 2px rgba(#000, .1);
-
-                @if $use-gravatars {
-                    &:before,
-                    &:after {
-                        display: block;
-                        position: absolute;
-                        top: 6px;
-                        right: 100%;
-                        left: -16px;
-                        width: 0;
-                        height: 0;
-                        border-style: solid solid outset;
-                        border-color: transparent;
-                        content: " ";
-                        pointer-events: none;
-                    }
-
-                    &:after {
-                        margin-top: 1px;
-                        margin-left: 4px;
-                        border-width: 6px;
-                        border-top-color: $body-bg;
-                        border-right-color: $body-bg;
-                    }
-
-                    &:before {
-                        border-width: 8px;
-                        border-top-color: $gray-light;
-                        border-right-color: $gray-light;
-                    }
-                }
-            }
-
-            form .wiki {
-                background-color: #fffbe5;
-
-                .preview {
-                    padding-bottom: 0;
-                }
-            }
-        }
-    }
-}
-
-.private-notes {
-    @if $bubble-journal-wiki-note {
-        &.has-notes .wiki {
-            border-left-color: $brand-warning;
-
-            &:before {
-                border-top-color: $brand-warning;
-                border-right-color: $brand-warning;
-            }
-        }
-    } @else {
-        margin-left: -(3px + 3px);
-        padding-left: 3px;
-        border-left: 3px solid $brand-warning;
-        border-radius: $border-radius-base 0 0 $border-radius-base;
-    }
-}
-
-#activity dt,
-.journal {
-    clear: left;
-}
-
-.journal-link {
-    float: right;
-}
-
-span.private {
-    position: relative;
-    top: -1px;
-    padding: $tracker-inline-padding;
-    border-radius: $border-radius-small;
-    background: $brand-warning;
-    color: $brand-text;
-    font-size: .714em;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-
-div#issue-changesets {
-    width: 33%;
-    margin-bottom: $line-height-computed;
-    margin-left: $padding-side;
-    float: right;
-
-    div.changeset {
-        padding: $table-cell-padding;
-        border-bottom: 1px solid $gray-lighter;
-    }
-}

sass/components/_jstoolbar.scss

@@ -1,68 +0,0 @@
-//
-// WYSIWYG icons
-// --------------------------------------------------
-
-.jstElements {
-    @extend %clearfix;
-
-    .box & {
-        padding: 0;
-    }
-
-    button {
-        margin-bottom: 5px;
-        box-shadow: none;
-        vertical-align: top;
-    }
-
-    .jstb_help {
-        margin-right: 0;
-        margin-left: -6px;
-        float: right;
-    }
-}
-
-@if $use-font-awesome
-{
-    .jstElements {
-        button[type="button"] {
-            padding: 0;
-            background: $body-bg;
-            background-image: none;
-            color: $btn-default-color;
-            @include fa-icon();
-
-            &:before {
-                text-align: center;
-            }
-        }
-
-        .jstb_strong:before { content: $fa-var-bold; }
-        .jstb_em:before     { content: $fa-var-italic; }
-        .jstb_ins:before    { content: $fa-var-underline; }
-        .jstb_del:before    { content: $fa-var-strikethrough; }
-        .jstb_code:before   { content: $fa-var-code; }
-        .jstb_h1:before     { content: $fa-var-header; }
-        .jstb_h2:before     { content: $fa-var-header; font-size: 11px; }
-        .jstb_h3:before     { content: $fa-var-header; font-size: 9px; }
-        .jstb_ul:before     { content: $fa-var-list-ul; }
-        .jstb_ol:before     { content: $fa-var-list-ol; }
-        .jstb_bq:before     { content: $fa-var-indent; }
-        .jstb_unbq:before   { content: $fa-var-outdent; }
-        .jstb_pre:before    { content: $fa-var-terminal; }
-        .jstb_link:before   { content: $fa-var-link; }
-        .jstb_img:before    { content: $fa-var-image; }
-
-        button.jstb_help {
-            color: $link-color;
-
-            &:hover {
-                color: $link-hover-color;
-            }
-
-            &:before {
-                content: $fa-var-question-circle;
-            }
-        }
-    }
-}

sass/components/_plugins.scss

@@ -1,72 +0,0 @@
-//
-// Redmine Backlogs
-// --------------------------------------------------
-
-#backlogs_view_issues_sidebar {
-    > a {
-        display: block;
-        padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
-        border: 1px solid transparent;
-
-        @if $sidebar-position == "left" {
-            margin-right: -($sidebar-padding-horizontal);
-            border-left-width: 3px;
-            border-radius: $border-radius-large 0 0 $border-radius-large;
-        } @else {
-            margin-left: -($sidebar-padding-horizontal);
-            border-right-width: 3px;
-            border-radius: 0 $border-radius-large $border-radius-large 0;
-        }
-
-        &:hover {
-            background-color: $sidebar-link-hover-bg;
-            text-decoration: none;
-        }
-
-        + br {
-            display: none;
-        }
-    }
-}
-
-
-//
-// Redmine Time Tracker
-// --------------------------------------------------
-
-@if $use-font-awesome {
-    .icon.icon-start,
-    .icon.icon-stop {
-        background-image: none;
-    }
-
-    .icon.icon-start {
-        color: $icon-success-color;
-
-        &:hover,
-        &:focus {
-            color: $icon-success-color;
-        }
-
-        &:before {
-            content: $fa-var-clock-o;
-        }
-    }
-
-    .icon.icon-stop {
-        color: $icon-danger-color;
-
-        &:hover,
-        &:focus {
-            color: $icon-danger-color;
-        }
-
-        &:before {
-            content: $fa-var-history;
-        }
-    }
-
-    .time-tracker-quick-menu:empty {
-        display: none;
-    }
-}

src/javascripts/modules/HistoryTabs.js

@@ -0,0 +1,93 @@
+var PurpleMine = PurpleMine || {};
+
+PurpleMine.HistoryTabs = (function()
+{
+    "use strict";
+
+    var self; // Make it work for browsers without Function.prototype.bind
+    var translations = {
+        en: {
+            all    : "All",
+            notes  : "Notes",
+            details: "Changes"
+        },
+        pl: {
+            all    : "Wszystko",
+            notes  : "Notatki",
+            details: "Zmiany"
+        }
+    };
+
+    function HistoryTabs()
+    {
+        self = this;
+
+        this.$tabsContainer = null;
+        this.$tabs          = null;
+        this.$history       = $("#history");
+        this.lang           = document.documentElement.lang;
+
+        if ("undefined" === translations[this.lang])
+        {
+            this.lang = "en";
+        }
+
+        this._ = translations[this.lang];
+
+        if (this.$history.length > 0)
+        {
+            this.buildTabs();
+            this.markFirstOfTypes();
+        }
+    }
+
+    HistoryTabs.prototype.buildTabs = function()
+    {
+        var html = "",
+            liStart = "<li><a href=\"javascript:;\" class=\"",
+            liMid = "history-tab\" data-tab=\"",
+            liEnd = "</a></li>";
+
+        html += "<div class=\"tabs\"><ul>";
+        html += liStart + "selected " + liMid + "all\">" + this._.all + liEnd;
+        html += liStart + liMid + "notes\">" + this._.notes + liEnd;
+        html += liStart + liMid + "details\">" + this._.details + liEnd;
+        html += "</ul></div>";
+
+        this.$tabsContainer = $(html);
+        $("#history > h3").after(this.$tabsContainer);
+
+        this.$tabs = this.$tabsContainer.find(".history-tab");
+        this.$tabs.on("click", this.tabClick);
+    };
+
+    HistoryTabs.prototype.markFirstOfTypes = function()
+    {
+        this.$history.find(".has-notes:first").addClass("first-of-notes");
+        this.$history.find(".has-details:first").addClass("first-of-details");
+    };
+
+    HistoryTabs.prototype.tabClick = function()
+    {
+        var $this = $(this),
+            tab = $this.attr("data-tab");
+
+        self.$tabs.removeClass("selected");
+        $this.addClass("selected");
+
+        self.$history
+                .removeClass("hide-details")
+                .removeClass("hide-notes");
+
+        if ("notes" === tab)
+        {
+            self.$history.addClass("hide-details");
+        }
+        else if ("details" === tab)
+        {
+            self.$history.addClass("hide-notes");
+        }
+    };
+
+    return HistoryTabs;
+}());

src/javascripts/modules/RevisionGraph.js

@@ -0,0 +1,157 @@
+var PurpleMine = PurpleMine || {};
+/* global Raphael: false, revisionGraph: true */
+/* jshint camelcase: false */
+/* jshint maxstatements: false */
+/* jshint maxlen: 160 */
+
+PurpleMine.RevisionGraph = function(holder, commits_hash, graph_space)
+{
+    "use strict";
+
+    var XSTEP = 20,
+        CIRCLE_INROW_OFFSET = 17;
+    var commits_by_scmid = commits_hash,
+        commits = $.map(commits_by_scmid, function(val){return val;});
+    var max_rdmid = commits.length - 1;
+    var commit_table_rows = $("table.changesets tr.changeset");
+
+    // create graph
+    if (revisionGraph !== null)
+    {
+        revisionGraph.clear();
+    }
+    else
+    {
+        revisionGraph = new Raphael(holder);
+    }
+
+    var top = revisionGraph.set();
+
+    // init dimensions
+    var graph_x_offset = commit_table_rows.first().find("td").first().position().left - $(holder).position().left,
+        graph_y_offset = $(holder).position().top,
+        graph_right_side = graph_x_offset + (graph_space + 1) * XSTEP,
+        graph_bottom = commit_table_rows.last().position().top + commit_table_rows.last().height() - graph_y_offset;
+
+    revisionGraph.setSize(graph_right_side, graph_bottom);
+
+    // init colors
+    var colors = [
+        "#e74c3c",
+        "#584492",
+        "#019851",
+        "#ed820c",
+        "#4183c4"
+    ];
+
+    // get more colors if needed
+    if (graph_space >= colors.length)
+    {
+        Raphael.getColor.reset();
+
+        for (var k = 0; k <= graph_space; k++)
+        {
+            colors.push(Raphael.getColor(0.9));
+        }
+    }
+
+    var parent_commit;
+    var x, y, parent_x, parent_y;
+    var path, title;
+    var revision_dot_overlay;
+
+    $.each(commits, function(index, commit)
+    {
+        if (!commit.hasOwnProperty("space"))
+        {
+            commit.space = 0;
+        }
+
+        y = commit_table_rows.eq(max_rdmid - commit.rdmid).position().top - graph_y_offset + CIRCLE_INROW_OFFSET;
+        x = graph_x_offset + XSTEP / 2 + XSTEP * commit.space;
+
+        revisionGraph.circle(x, y, 3.5)
+            .attr({
+                fill: colors[commit.space],
+                stroke: "none"
+            }).toFront();
+
+        // paths to parents
+        $.each(commit.parent_scmids, function(index, parent_scmid)
+        {
+            parent_commit = commits_by_scmid[parent_scmid];
+
+            if (parent_commit)
+            {
+                if (!parent_commit.hasOwnProperty("space"))
+                {
+                    parent_commit.space = 0;
+                }
+
+                parent_y = commit_table_rows.eq(max_rdmid - parent_commit.rdmid).position().top - graph_y_offset + CIRCLE_INROW_OFFSET;
+                parent_x = graph_x_offset + XSTEP / 2 + XSTEP * parent_commit.space;
+
+                if (parent_commit.space === commit.space)
+                {
+                    // vertical path
+                    path = revisionGraph.path([
+                        "M", x, y,
+                        "V", parent_y]);
+                }
+                else
+                {
+                    // path to a commit in a different branch (Bezier curve)
+                    path = revisionGraph.path([
+                        "M", x, y,
+                        "C", x, y, x, y + (parent_y - y) / 2, x + (parent_x - x) / 2, y + (parent_y - y) / 2,
+                        "C", x + (parent_x - x) / 2, y + (parent_y - y) / 2, parent_x, parent_y-(parent_y-y)/2, parent_x, parent_y
+                    ]);
+                }
+            }
+            else
+            {
+                // vertical path ending at the bottom of the revisionGraph
+                path = revisionGraph.path([
+                    "M", x, y,
+                    "V", graph_bottom
+                ]);
+            }
+
+            path.attr({stroke: colors[commit.space], "stroke-width": 1.5}).toBack();
+        });
+
+        revision_dot_overlay = revisionGraph.circle(x, y, 10);
+        revision_dot_overlay
+            .attr({
+                fill   : "#000",
+                opacity: 0,
+                cursor : "pointer",
+                href   : commit.href
+            });
+
+        if (commit.refs !== null && commit.refs.length > 0)
+        {
+            title = document.createElementNS(revisionGraph.canvas.namespaceURI, "title");
+            title.appendChild(document.createTextNode(commit.refs));
+            revision_dot_overlay.node.appendChild(title);
+        }
+
+        top.push(revision_dot_overlay);
+    });
+
+    top.toFront();
+};
+
+$(function()
+{
+    "use strict";
+
+    if (window.drawRevisionGraph)
+    {
+        // override Redmine's function
+        window.drawRevisionGraph = PurpleMine.RevisionGraph;
+        // make graph redraw itself
+        $(window).resize();
+    }
+});
+

src/javascripts/modules/SidebarToggler.js

@@ -0,0 +1,128 @@
+var PurpleMine = PurpleMine || {};
+
+PurpleMine.SidebarToggler = (function()
+{
+    "use strict";
+
+    var self; // Make it work for browsers without Function.prototype.bind
+
+    function SidebarToggler()
+    {
+        self = this;
+
+        this.sidebarVisible = true;
+        this.sidebarHiding  = null;
+        this.$toggler       = null;
+        this.$main          = $("#main");
+        this.$sidebar       = $("#sidebar");
+
+        // Fix issue with context menu position
+        if ("relative" === this.$main.css("position"))
+        {
+            $("#context-menu").appendTo("#wrapper3");
+        }
+
+        if (window.localStorage)
+        {
+            this.sidebarVisible =
+                null === localStorage.getItem("PurpleMine:sidebarHidden");
+        }
+
+        if (this.$sidebar.length > 0 &&
+            false === this.$main.hasClass("nosidebar"))
+        {
+            this.buildButton();
+            this.bindKeyHandler();
+
+            if (false === this.sidebarVisible)
+            {
+                this.hideSidebar(true);
+            }
+        }
+    }
+
+    SidebarToggler.prototype.bindKeyHandler = function()
+    {
+        var body = document.getElementsByTagName("body")[0];
+
+        window.onkeydown = function(event)
+        {
+            if (body === event.target && 83 === event.keyCode && // "s"
+                false === event.ctrlKey && false === event.altKey &&
+                false === event.shiftKey)
+            {
+                self.toggleSidebar();
+            }
+        };
+    };
+
+    SidebarToggler.prototype.buildButton = function()
+    {
+        var togglerLabel = document.documentElement.lang === "pl" ?
+                            "Pokaż/ukryj panel boczny" :
+                            "Toggle sidebar",
+            togglerClass = "sidebar-toggler",
+            togglerHtml;
+
+        togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
+                        "\" title=\"" + togglerLabel + "\"></a>";
+        this.$toggler = $(togglerHtml);
+
+        this.$main.append(this.$toggler);
+        this.$toggler.on("click", this.toggleSidebar);
+    };
+
+    SidebarToggler.prototype.toggleSidebar = function()
+    {
+        if (self.sidebarVisible)
+        {
+            self.hideSidebar();
+        }
+        else
+        {
+            self.showSidebar();
+        }
+    };
+
+    SidebarToggler.prototype.hideSidebar = function(immediate)
+    {
+        if (true === immediate)
+        {
+            this.$sidebar.addClass("sidebar-hiding sidebar-hidden");
+        }
+        else
+        {
+            this.$sidebar.addClass("sidebar-hiding");
+            this.sidebarHiding = setTimeout(function sidebarTimeout()
+            {
+                self.$sidebar.addClass("sidebar-hidden");
+            }, 500);
+        }
+
+        this.$toggler.addClass("sidebar-hidden");
+        this.sidebarVisible = false;
+
+        if (window.localStorage)
+        {
+            localStorage.setItem("PurpleMine:sidebarHidden", "x");
+        }
+    };
+
+    SidebarToggler.prototype.showSidebar = function()
+    {
+        clearTimeout(this.sidebarHiding);
+        this.$sidebar
+                .removeClass("sidebar-hidden", 0)
+                .removeClass("sidebar-hiding");
+
+        this.$toggler.removeClass("sidebar-hidden");
+        this.sidebarVisible = true;
+
+        if (window.localStorage)
+        {
+            localStorage.removeItem("PurpleMine:sidebarHidden");
+        }
+    };
+
+    return SidebarToggler;
+}());

src/javascripts/theme.js

@@ -0,0 +1,8 @@
+$(function()
+{
+    /* global PurpleMine */
+    "use strict";
+
+    new PurpleMine.SidebarToggler();
+    new PurpleMine.HistoryTabs();
+});

src/sass/_mixins.scss

@@ -11,3 +11,4 @@
 @import "mixins/vendor-prefixes";
 
 @import "mixins/issues";
+@import "mixins/link-variant";

src/sass/_variables.scss

@@ -11,11 +11,12 @@ $sidebar-position:              left !default;
 $color-priorities:              true !default;
 $color-trackers:                true !default;
 $colored-issue:                 true !default;
+$color-status:                  true !default;
 $use-gravatars:                 true !default;
 $use-font-awesome:              true !default;
-$hide-sidebar-on-screen-xs:     true !default;
 $issue-subject-large:           true !default;
-$bubble-journal-wiki-note:      true !default;
+$enable-sidebar-toggler:        true !default;
+$wiki-page-more-vertical-space: true !default;
 
 
 //== Colors
@@ -36,7 +37,7 @@ $brand-accent:                  #deddef !default;
 
 $brand-success:                 #019851 !default;
 $brand-info:                    #409ae3 !default;
-$brand-warning:                 #f39412 !default;
+$brand-warning:                 #ed820c !default;
 $brand-danger:                  #e74c3c !default;
 
 $state-success:                 #b5fbb7 !default;
@@ -74,8 +75,8 @@ $font-size-large-px:            18px !default;
 $font-size-small:               .86em !default;
 $font-size-small-px:            12px !default;
 
-$font-size-h1:                  2.285em !default;
-$font-size-h2:                  1.857em !default;
+$font-size-h1:                  2.25em !default;
+$font-size-h2:                  1.75em !default;
 $font-size-h3:                  1.5em !default;
 $font-size-h4:                  1.286em !default;
 $font-size-h5:                  1em !default;
@@ -86,7 +87,7 @@ $line-height-large:             1.33 !default;
 $line-height-computed:          floor(($font-size-base * $line-height-base)) !default; // ~20px
 
 $headings-font-weight:          700 !default;
-$headings-line-height:          1.2 !default;
+$headings-line-height:          1.4 !default;
 
 
 //== Wiki
@@ -96,6 +97,10 @@ $wiki-text:                     #333 !default;
 $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
 
+$toc-active-link:               darken($link-color, 10%) !default;
+$toc-active-link-hover:         darken($toc-active-link, 10%) !default;
+$toc-active-border:             $link-color !default;
+
 
 //== Components
 //
@@ -129,6 +134,8 @@ $component-active-border:       $brand-primary !default;
 
 $font-size-list:                .92em !default;
 
+$collapsible-animation-time:    .3s !default;
+
 
 //== Tables
 //
@@ -137,7 +144,7 @@ $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;
 
 $table-bg:                      transparent !default;
-$table-bg-accent:               darken($body-bg, 3%) !default;
+$table-bg-accent:               rgba(#000, .03) !default;
 $table-bg-hover:                #f1f1f1 !default;
 $table-bg-active:               $table-bg-hover !default;
 
@@ -147,9 +154,9 @@ $table-border-color:            darken($body-bg, 13.5%) !default;
 //== Trackers priorities
 //
 
-$priority-lowest-bg:            #defacb !default;
-$priority-lowest-text:          #565 !default;
-$priority-lowest-link:          #265 !default;
+$priority-lowest-bg:            #dff4d0 !default;
+$priority-lowest-text:          #676 !default;
+$priority-lowest-link:          #096 !default;
 
 $priority-default-bg:           #fff !default;
 $priority-default-text:         $text-color !default;
@@ -157,15 +164,15 @@ $priority-default-link:         $link-color !default;
 
 $priority-high3-bg:             #d5eaff !default;
 $priority-high3-text:           #556 !default;
-$priority-high3-link:           #336 !default;
+$priority-high3-link:           #05a !default;
 
 $priority-high2-bg:             #ffe1d7 !default;
-$priority-high2-text:           #930 !default;
-$priority-high2-link:           #624 !default;
+$priority-high2-text:           #855 !default;
+$priority-high2-link:           #b04 !default;
 
 $priority-highest-bg:           #ffa5a5 !default;
-$priority-highest-text:         #900 !default;
-$priority-highest-link:         #403 !default;
+$priority-highest-text:         #944 !default;
+$priority-highest-link:         #a03 !default;
 
 
 //== Trackers links
@@ -177,13 +184,13 @@ $tracker-list-padding:          0 6px !default;
 $tracker-1-bg:                  $brand-danger !default;
 $tracker-1-text:                $brand-text !default;
 
-$tracker-2-bg:                  $brand-primary !default;
+$tracker-2-bg:                  $brand-info !default;
 $tracker-2-text:                $brand-text !default;
 
 $tracker-3-bg:                  $brand-success !default;
 $tracker-3-text:                $brand-text !default;
 
-$tracker-4-bg:                  $brand-info !default;
+$tracker-4-bg:                  $brand-primary !default;
 $tracker-4-text:                $brand-text !default;
 
 $tracker-5-bg:                  $brand-warning !default;
@@ -199,19 +206,42 @@ $tracker-7-text:                $brand-text !default;
 //== Diffs
 //
 
-$diff-out-color:                #522;
-$diff-out-bg:                   #fac0d8;
-$diff-out-bg-light:             #fcdcf1;
+$diff-out-color:                #511 !default;
+$diff-out-bg:                   #fbb !default;
+$diff-out-bg-light:             rgba($diff-out-bg, .3) !default;
+
+$diff-in-color:                 #350 !default;
+$diff-in-bg:                    #afa !default;
+$diff-in-bg-light:              rgba($diff-in-bg, .3) !default;
+
+
+//== Journal changes
+//
+$journal-old-value-color:       #430 !default;
+$journal-old-value-bg:          rgba(#ffeaaa, .3) !default;
+$journal-new-value-color:       #350 !default;
+$journal-new-value-bg:          rgba(#bffbbf, .3) !default;
+
+
+//== Changesets
+//
+
+$changeset-add-color:           $brand-success !default;
+$changeset-modified-color:      $brand-warning !default;
+$changeset-copied-color:        $brand-info !default;
+$changeset-renamed-color:       $brand-primary !default;
+$changeset-deleted-color:       $brand-danger !default;
 
-$diff-in-color:                 #350;
-$diff-in-bg:                    #c8fbbf;
-$diff-in-bg-light:              #e1fcd8;
 
 //== Buttons
 //
 
 $btn-font-weight:               normal !default;
 
+$btn-link-color:                $link-color !default;
+$btn-link-bg:                   $body-bg !default;
+$btn-link-border:               $body-bg !default;
+
 $btn-default-color:             $gray-darkest !default;
 $btn-default-bg:                $gray-lightest !default;
 $btn-default-border:            $gray-lighter !default;
@@ -249,14 +279,14 @@ $input-border-radius-large:     $border-radius-large !default;
 $input-border-focus:            #51a7e8 !default;
 $input-color-placeholder:       #999 !default;
 
-$input-padding-vertical:        3px;
-$input-padding-horizontal:      8px;
+$input-padding-vertical:        3px !default;
+$input-padding-horizontal:      8px !default;
 
 $input-height-base:             ($line-height-computed + ($input-padding-vertical * 2) + 2) !default;
 
-$label-width:                   160px;
-$label-wide-width:              280px;
-$label-space:                   10px;
+$label-width:                   160px !default;
+$label-wide-width:              280px !default;
+$label-space:                   10px !default;
 
 $legend-color:                  $gray-dark !default;
 $legend-border-color:           #e5e5e5 !default;
@@ -391,6 +421,17 @@ $issue-padding:                 15px !default;
 $issue-gravatar-size:           50px !default;
 $issue-heading-size:            1.5 !default;
 
+$issue-attribute-padding-v:     3px !default;
+$issue-attribute-padding-h:     5px !default;
+
+
+//== Speech "bubbles"
+//
+$bubble-gravatar-size:          24px !default;
+$bubble-gravatar-space:         12px !default;
+$bubble-padding-vertical:       8px !default;
+$bubble-padding-horizontal:     15px !default;
+
 
 //== Media queries breakpoints
 //
@@ -414,6 +455,6 @@ $screen-md-max:                 ($screen-lg-min - 1) !default;
 //== Content widths
 //
 
-$width-sm:                      $screen-sm - ($padding-side * 2);
-$width-md:                      $screen-md - ($padding-side * 2);
-$width-lg:                      $screen-lg - ($padding-side * 2);
+$width-sm:                      $screen-sm - ($padding-side * 2) !default;
+$width-md:                      $screen-md - ($padding-side * 2) !default;
+$width-lg:                      $screen-lg - ($padding-side * 2) !default;

src/sass/application.scss

@@ -29,6 +29,7 @@
 @import "components/icons";
 @import "components/jstoolbar";
 @import "components/flash";
+@import "components/image-base64";
 @import "components/print";
 
 
@@ -36,3 +37,9 @@
 //
 
 @import "components/plugins";
+
+
+//== Built-in JavaScript plugins
+//
+
+@import "javascripts/sidebar-toggler";

src/sass/components/_admin.scss

@@ -15,7 +15,7 @@
 
         a {
             display: inline-block;
-            padding-left: 8 + 16px;
+            padding-left: 5px + 20px;
             background-position: 0 center;
         }
     }
@@ -24,7 +24,7 @@
         list-style-type: none;
 
         > a {
-            padding-left: $sidebar-padding-horizontal + 8 + 16px;
+            padding-left: $sidebar-padding-horizontal + 5px + 20px;
             background-repeat: no-repeat;
             background-position: $sidebar-padding-horizontal center;
         }

src/sass/components/_buttons.scss

@@ -142,6 +142,10 @@ form[action*="repository/diff"] {
  */
 
 .query-columns {
+    select {
+        width: auto !important;
+    }
+
     .buttons {
         vertical-align: middle;
 
@@ -165,7 +169,7 @@ a[data-expands],
     padding: 2px 8px;
     border: 1px solid;
     border-radius: $border-radius-base;
-    background-image: url("../images/bullet_toggle_plus.png");
+    @extend %image-toggle-plus;
     background-repeat: no-repeat;
     background-position: 2px 2px;
     cursor: pointer;

src/sass/components/_content.scss

@@ -45,12 +45,6 @@
         }
     }
 
-    @if $hide-sidebar-on-screen-xs {
-        @media screen and (max-width: $screen-xs-max) {
-            display: none;
-        }
-    }
-
     .nosidebar & {
         width: 0;
         margin: 0;

src/sass/components/_elements.scss

@@ -48,13 +48,16 @@ a.collapsible,
         width: 0;
         height: 0;
         margin-right: 3px;
-        border-top:   5px solid;
-        border-right: 5px solid transparent;
-        border-left:  5px solid transparent;
+        border-top:   6px solid;
+        border-right: 4px solid transparent;
+        border-left:  4px solid transparent;
         content: "";
         vertical-align: middle;
         @include rotate(0);
-        @include transition-transform(.1s);
+
+        @if $collapsible-animation-time > 0 {
+            @include transition-transform($collapsible-animation-time);
+        }
     }
 }
 
@@ -65,6 +68,33 @@ a.collapsible.collapsed,
     }
 }
 
+@if $collapsible-animation-time > 0 {
+    fieldset.collapsible {
+        min-height: $line-height-computed;
+        max-height: 2500px; // should be enough with all the possible filters
+        overflow: hidden;
+        @include transition(max-height $collapsible-animation-time ease-out);
+
+        > div {
+            display: block !important;
+            opacity: 1;
+            visibility: visible;
+            @include transition(visibility 0s 0s, opacity $collapsible-animation-time);
+        }
+
+        &.collapsed {
+            max-height: 0;
+            @include transition(max-height $collapsible-animation-time);
+
+            > div {
+                opacity: 0;
+                visibility: hidden;
+                @include transition(visibility 0s $collapsible-animation-time, opacity $collapsible-animation-time);
+            }
+        }
+    }
+}
+
 
 /**
  * Elements with context menus (doesn't really work on Windows)
@@ -128,7 +158,6 @@ a.collapsible.collapsed,
     background-color: $panel-bg;
     color: $panel-color;
     word-wrap: break-word;
-    box-shadow: $panel-shadow;
 
     .ui-dialog-content & {
         padding: 0;
@@ -317,17 +346,58 @@ a.close-icon {
  */
 #content table.filecontent {
     width: 100%;
+    background: $body-bg;
+
+    th.filename {
+        border-color: $brand-primary;
+        border-bottom-color: darken($body-bg, 10%);
+        background-color: $brand-primary;
+        color: $brand-text;
+    }
+
+    tbody {
+        font-size: $font-size-list;
+    }
 
     tbody,
     td.line-code pre {
         font-family: $font-family-monospace;
     }
 
-    td.line-code {
-        padding: 2px 5px;
+    th.line-num {
+        border-color: darken($body-bg, 10%);
+        background-color: darken($body-bg, 5%);
+        color: $gray;
+    }
 
-        pre {
-            font-size: 13px;
+    th.line-num,
+    td.line-code {
+        padding: .15em .4em;
+    }
+
+    th.line-num,
+    td.line-code,
+    td.line-code pre {
+        font-size: 1em;
+    }
+
+    tr:hover {
+        background-color: darken($body-bg, 2%);
+
+        th.line-num {
+            background-color: darken($body-bg, 10%);
+        }
+    }
+
+    tr:target {
+        th.line-num {
+            border-color: darken(adjust-hue($highlight-bg, -8deg), 15%);
+            background-color: darken(adjust-hue($highlight-bg, -8deg), 7%);
+            color: $highlight-text;
+        }
+
+        td.line-code {
+            background-color: $highlight-bg;
         }
     }
 }
@@ -379,6 +449,10 @@ ul.projects {
     a.project {
         font-size: $font-size-h3;
         font-weight: bold;
+
+        &.child {
+            font-weight: normal;
+        }
     }
 }
 
@@ -402,11 +476,7 @@ ul.projects {
  * Time report
  */
 
-table#time-report {
-    td.hours {
-        text-align: right;
-    }
-
+#time-report {
     th {
         &.period,
         &.total {
@@ -431,8 +501,8 @@ table#time-report {
         }
     }
 
-    .hours-dec {
-        font-size: .9em;
+    td.hours {
+        text-align: right;
     }
 }
 
@@ -608,10 +678,10 @@ table.boards {
         > h4,
         > p {
             margin-bottom: 0;
-            padding: $padding-base-vertical $padding-base-horizontal;
+            padding: $bubble-padding-vertical $bubble-padding-horizontal;
             border-bottom: 1px solid mix($gray-lighter, $gray-lightest, 50%);
             color: $gray;
-            font-size: $font-size-small;
+            font-size: $font-size-list;
 
             a {
                 color: $gray-darker;
@@ -623,24 +693,24 @@ table.boards {
         }
 
         .wiki {
-            padding: $padding-base-horizontal;
+            padding: $bubble-padding-horizontal;
             border-radius: 0 0 $panel-border-radius $panel-border-radius;
             background: $body-bg;
         }
 
         .contextual {
             position: relative;
-            margin-right: $padding-base-vertical;
+            margin-right: $bubble-padding-vertical;
             z-index: 1;
 
             @if $use-font-awesome {
                 margin-top: $padding-small-vertical;
             } @else {
-                margin-top: $padding-base-vertical;
+                margin-top: $bubble-padding-vertical;
             }
 
             a {
-                margin-left: ceil($padding-base-vertical / 2);
+                margin-left: ceil($bubble-padding-vertical / 2);
             }
         }
     }
@@ -651,7 +721,7 @@ table.boards {
 
     @if $use-gravatars {
         .reply {
-            margin-left: 24px + $padding-base-horizontal;
+            margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
 
             > h4 {
                 position: relative;
@@ -660,7 +730,7 @@ table.boards {
                 &:after {
                     display: block;
                     position: absolute;
-                    top: 6px;
+                    top: 9px;
                     right: 100%;
                     left: -14px;
                     width: 0;
@@ -685,8 +755,8 @@ table.boards {
             }
 
             img.gravatar {
-                margin-top: $line-height-computed - 24px;
-                margin-left: -(24px + $padding-base-horizontal * 2 + 1px);
+                margin-top: $line-height-computed - $bubble-gravatar-size;
+                margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
                 float: left;
             }
         }
@@ -752,13 +822,30 @@ table.boards {
  * Repository view
  */
 
-#revision_selector {
-    display: inline;
+.revision-info {
+    margin-bottom: $line-height-computed;
+
+    tbody > tr > td {
+        padding-right: $table-cell-padding;
+        padding-bottom: $table-condensed-cell-padding;
+
+        + td {
+            font-family: $font-family-monospace;
+        }
+    }
 }
 
 #related-issues {
-    li img {
-        vertical-align: middle;
+    margin: $line-height-computed 0;
+
+    li > a {
+        margin-left: .5em;
+
+        @if $use-font-awesome == false {
+            img {
+                vertical-align: middle;
+            }
+        }
     }
 }
 
@@ -782,6 +869,10 @@ tr.changeset {
         background-color: #fffffb;
     }
 
+    td.id {
+        font-family: $font-family-monospace;
+    }
+
     td.author,
     td.committed_on {
         width: 15%;
@@ -800,3 +891,58 @@ tr.changeset {
         margin-bottom: 0;
     }
 }
+
+.revision-graph {
+    circle {
+        // @include translate(0, $table-cell-padding - 1px);
+    }
+}
+
+#content #changes-legend {
+    font-size: 1em;
+
+    .change {
+        background-position: 5px center;
+    }
+
+    .change-A { color: $changeset-add-color; }
+    .change-M { color: $changeset-modified-color; }
+    .change-C { color: $changeset-copied-color; }
+    .change-R { color: $changeset-renamed-color; }
+    .change-D { color: $changeset-deleted-color; }
+}
+
+.changeset-changes {
+    .change {
+        padding-top: $table-condensed-cell-padding;
+        color: $gray-dark;
+
+        a {
+            @include link-variant($gray-dark);
+        }
+    }
+
+    .change-A {
+        &:before { color: $changeset-add-color; }
+        a { @include link-variant($changeset-add-color); }
+    }
+
+    .change-M {
+        &:before { color: $changeset-modified-color; }
+        a { @include link-variant($changeset-modified-color); }
+    }
+
+    .change-C {
+        &:before { color: $changeset-copied-color; }
+        a { @include link-variant($changeset-copied-color); }
+    }
+
+    .change-R {
+        &:before { color: $changeset-renamed-color; }
+        a { @include link-variant($changeset-renamed-color); }
+    }
+
+    .change-D {
+        color: $changeset-deleted-color;
+    }
+}

src/sass/components/_flash.scss

@@ -57,16 +57,16 @@
     }
 }
 
-.flash.notice {
-    @include flash($flash-success-text, $flash-success-bg, $flash-success-border, $flash-success-link, "true");
-}
-
-.flash.warning,
+.warning,
 .conflict,
 .nodata {
     @include flash($flash-warning-text, $flash-warning-bg, $flash-warning-border, $flash-warning-link, "warning");
 }
 
+.flash.notice {
+    @include flash($flash-success-text, $flash-success-bg, $flash-success-border, $flash-success-link, "true");
+}
+
 #errorExplanation,
 .flash.error {
     @include flash($flash-error-text, $flash-error-bg, $flash-error-border, $flash-error-link, "exclamation");

src/sass/components/_forms.scss

@@ -3,11 +3,13 @@
 // --------------------------------------------------
 
 form {
-    // display: inline;
-
     td {
         padding: $table-condensed-cell-padding;
     }
+
+    .contextual > & {
+        display: inline;
+    }
 }
 
 button,
@@ -52,7 +54,9 @@ input[type="password"] {
     &[disabled],
     &[readonly],
     fieldset[disabled] & {
+        border-color: $input-border;
         background-color: $input-bg-disabled;
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
         opacity: 1;
     }
 }
@@ -84,7 +88,7 @@ input[type="range"] {
 
 input.autocomplete {
     padding-right: 30px;
-    background-image: url("../images/aci.png"); /* autocomplete indicator */
+    @extend %image-aci;
     background-repeat: no-repeat;
     background-position: right center;
 
@@ -99,11 +103,48 @@ select {
         height: auto;
     }
 
+    &[size="1"] {
+        height: $input-height-base;
+    }
+
     option[disabled] {
         color: $gray-lighter;
     }
 }
 
+/**
+ * Browser hacks: unfortunately every browser has different capabilities when it
+ * comes to styling <select> and <option> tags.
+ */
+
+
+// Mozilla Firefox
+@-moz-document url-prefix() {
+    select {
+        &[multiple] {
+            padding: 0;
+        }
+
+        option {
+            padding: $input-padding-vertical $input-padding-horizontal;
+            border-bottom: 1px dotted $gray-lighter;
+        }
+    }
+}
+
+// Google Chrome and Safari
+@supports (-webkit-appearance: none) {
+    select[multiple] {
+        padding: 0;
+    }
+
+    // For some reason nested selectors will not work
+    select[multiple] option {
+        padding: $input-padding-vertical $input-padding-horizontal;
+        border-bottom: 1px dotted $gray-lighter;
+    }
+}
+
 select:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 #000;
@@ -262,25 +303,6 @@ em.info {
     }
 }
 
-/**
- * Hack: first <p> in issue form ("private" option) is moved to the right with
- * inline styles. Don't allow it break the layout
- */
-#all_attributes > p[style] {
-    margin-right: 0 !important;
-    margin-bottom: 0;
-    padding-left: 0;
-
-    input {
-        top: 2px;
-    }
-
-    label {
-        margin-right: 0;
-        padding-left: 0;
-    }
-}
-
 
 /**
  * Hack: align description edit icon with label
@@ -322,8 +344,7 @@ label[for=closed] {
 #my_account_form select,
 #user_form select,
 #user_identity_url,
-#custom_field_possible_values,
-#custom_field_default_value {
+#custom_field_possible_values {
     width: 100%;
 }
 
@@ -349,7 +370,7 @@ select.bool_cf {
     $input-height-large:             (ceil($font-size-large-px * $line-height-large) + ($input-padding-large-vertical * 2) + 2);
 
     label[for="issue_subject"] {
-        margin-top: $input-padding-large-vertical * $line-height-large + 1px;
+        margin-top: floor($input-padding-large-vertical * $line-height-large + 1px);
     }
 
     #issue_subject {
@@ -375,20 +396,18 @@ select.bool_cf {
  */
 
 #attachments_fields {
-    input.description {
-        width: 340px;
-        margin-right: 5px;
-        margin-left: 5px;
-    }
-
     > span {
         display: block;
-        margin-bottom: $line-height-computed / 2;
-        white-space: nowrap;
+        margin-bottom: $line-height-computed / 4;
+    }
+
+    input {
+        width: 21.5em;
+        margin-right: .5em;
+        margin-bottom: $line-height-computed / 4;
     }
 
     input.filename {
-        width: 250px;
         padding-left: $input-padding-horizontal + 16px;
         background-image: url("../../../images/attachment.png");
         background-repeat: no-repeat;
@@ -434,7 +453,7 @@ select.bool_cf {
     }
 }
 
-#attributes {
+#issue-form {
     .splitcontentleft,
     .splitcontentright {
         width: 100%;
@@ -446,6 +465,13 @@ select.bool_cf {
             width: auto;
             min-width: 36em;
         }
+
+        textarea.text_cf,
+        input.string_cf,
+        input.link_cf,
+        select {
+            width: 90%;
+        }
     }
 
     .splitcontentleft {
@@ -454,22 +480,36 @@ select.bool_cf {
         }
     }
 
-    textarea.text_cf,
-    input.string_cf,
-    input.link_cf,
-    select {
-        width: 90%;
-    }
-
     #issue_estimated_hours,
     #issue_done_ratio {
-        width: 75px;
+        width: 5.5em;
         min-width: 1em;
-        padding-left: 5px;
+        padding-left: .2em;
         text-align: right;
     }
 }
 
+
+/**
+ * Hack: first <p> in issue form ("private" option) is moved to the right with
+ * inline styles. Don't allow it break the layout
+ */
+#all_attributes > p[style] {
+    margin-right: 0 !important;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    input {
+        top: 2px;
+    }
+
+    label {
+        margin-right: 0;
+        padding-left: 0;
+    }
+}
+
+
 #watchers_form {
     overflow: hidden;
 
@@ -480,12 +520,12 @@ select.bool_cf {
     // scss-lint:disable VendorPrefixes
     #watchers_inputs {
         display: block;
-        max-width: 80em;
+        max-width: 64em;
         margin-top: $input-padding-vertical + 1px;
         margin-bottom: $line-height-computed / 2;
-        -webkit-columns: 18em 4;
-           -moz-columns: 18em 4;
-                columns: 18em 4;
+        -webkit-columns: 18em 3;
+           -moz-columns: 18em 3;
+                columns: 18em 3;
         overflow: auto;
     }
 

src/sass/components/_icons.scss

@@ -52,7 +52,7 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
     }
 
     ul li a.submenu {
-        background-image: url("../images/bullet_arrow_right.png");
+        @extend %image-arrow-right;
     }
 }
 
@@ -64,6 +64,13 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
 {
     .icon {
         @extend %fa-icon;
+        padding-left: 20px;
+        background-repeat: no-repeat;
+        background-position: 0% 50%;
+
+        &:before {
+            margin-left: -20px;
+        }
 
         .contextual & {
             margin-left: .5em;
@@ -111,6 +118,12 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
     .icon-zoom-out:before              { content: $fa-var-search-minus; }
     .icon-passwd:before                { content: $fa-var-key; }
     .icon-test:before                  { content: $fa-var-arrow-circle-right; }
+    .icon-phone:before                 { content: $fa-var-phone; }
+    .icon-email:before                 { content: $fa-var-envelope; }
+    .icon-skype:before                 { content: $fa-var-skype; }
+    .icon-facebook:before              { content: $fa-var-facebook-square; }
+    .icon-linkedin:before              { content: $fa-var-linkedin-square; }
+    .icon-twitter:before               { content: $fa-var-twitter-square; }
 }
 @else
 {
@@ -169,21 +182,11 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
 .icon-add,
 .icon-edit,
 .icon-save {
-    color: $icon-success-color;
-
-    &:hover,
-    &:focus {
-        color: $icon-success-color;
-    }
+    @include link-variant($icon-success-color, $icon-success-hover-color);
 }
 
 .icon-del {
-    color: $icon-danger-color;
-
-    &:hover,
-    &:focus {
-        color: $icon-danger-hover-color;
-    }
+    @include link-variant($icon-danger-color, $icon-danger-hover-color);
 }
 
 
@@ -278,48 +281,115 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
  */
 @if $use-font-awesome
 {
+    %admin-icon {
+        @extend %fa-icon;
+
+        &:before {
+            width: 20px;
+            margin-left: -(5px + 20px);
+            color: $gray;
+            text-align: center;
+        }
+
+        &:hover:before {
+            color: $gray-darker;
+        }
+
+        &.selected:before {
+            color: $gray-darkest;
+        }
+    }
+
     #admin-menu {
         #admin-index > & {
             a {
-                padding-left: 0;
+                padding-left: 5px + 20px;
             }
         }
 
         li {
             > a {
-                @extend %fa-icon;
-                padding-left: $sidebar-padding-horizontal;
-
-                &:before {
-                    width: 1em;
-                    margin-right: .5em;
-                    color: $gray;
-                    text-align: center;
-                }
-
-                &:hover:before {
-                    color: $gray-darker;
-                }
-
-                &.selected:before {
-                    color: $gray-darkest;
-                }
+                padding-left: $sidebar-padding-horizontal + 5px + 20px;
             }
         }
 
-        .projects:before              { content: $fa-var-cubes; }
-        .users:before                 { content: $fa-var-user; }
-        .groups:before                { content: $fa-var-group; }
-        .roles:before                 { content: $fa-var-eye; }
-        .trackers:before              { content: $fa-var-ticket; }
-        .issue_statuses:before        { content: $fa-var-pencil-square; }
-        .workflows:before             { content: $fa-var-sitemap; }
-        .custom_fields:before         { content: $fa-var-edit; }
-        .enumerations:before          { content: $fa-var-list; }
-        .settings:before              { content: $fa-var-gear; }
-        .plugins:before               { content: $fa-var-puzzle-piece; }
-        .info:before                  { content: $fa-var-info-circle; }
-        .server_authentication:before { content: $fa-var-key; }
+        .projects {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-cubes; }
+        }
+
+        .users {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-user; }
+        }
+
+        .groups {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-group; }
+        }
+
+        .roles {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-eye; }
+        }
+
+        .trackers {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-ticket; }
+        }
+
+        .issue_statuses {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-pencil-square; }
+        }
+
+        .workflows {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-sitemap; }
+        }
+
+        .custom_fields {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-edit; }
+        }
+
+        .enumerations {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-list; }
+        }
+
+        .settings {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-gear; }
+        }
+
+        .plugins {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-puzzle-piece; }
+        }
+
+        .info {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-info-circle; }
+        }
+
+        .server_authentication {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-key; }
+        }
     }
 }
 @else
@@ -490,7 +560,8 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         }
     }
 
-    .issues .buttons a {
+    .issues .buttons a,
+    #related-issues li > a {
         &[data-method="delete"] {
             @extend %fa-icon;
 
@@ -538,6 +609,11 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
             margin-left: .2em;
         }
 
+        &.asc,
+        &.desc {
+            background-image: none;
+        }
+
         &.asc:after {
             content: $fa-var-sort-amount-asc;
         }
@@ -604,12 +680,7 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
             }
 
             &:nth-child(2) {
-                color: $icon-success-color;
-
-                &:hover,
-                &:focus {
-                    color: $icon-success-hover-color;
-                }
+                @include link-variant($icon-success-color, $icon-success-hover-color);
 
                 &:before {
                     content: $fa-var-pencil;
@@ -617,12 +688,7 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
             }
 
             &:nth-child(3) {
-                color: $icon-danger-color;
-
-                &:hover,
-                &:focus {
-                    color: $icon-danger-hover-color;
-                }
+                @include link-variant($icon-danger-color, $icon-danger-hover-color);
 
                 &:before {
                     content: $fa-var-trash;
@@ -702,15 +768,10 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
             }
         }
 
-        [href*="edit"] {
+        .contextual [href*="edit"] {
             @extend %fa-icon;
-            color: $icon-success-color;
             font-size: $font-size-base;
-
-            &:hover,
-            &:focus {
-                color: $icon-success-color;
-            }
+            @include link-variant($icon-success-color, $icon-success-hover-color);
 
             &:before {
                 content: $fa-var-pencil;
@@ -727,7 +788,13 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
 
         &:before {
             margin-right: .3em;
-            content: $fa-var-paperclip;
+            color: $icon-success-color;
+            content: $fa-var-plus;
+        }
+
+        &:hover:before,
+        &:focus:before {
+            color: $icon-success-hover-color;
         }
     }
 
@@ -772,6 +839,41 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
             }
         }
     }
+
+    #changes-legend > li.change,
+    .changeset-changes ul > li.change {
+        @extend %fa-icon;
+        background: transparent;
+
+        &:before {
+            position: relative;
+            top: -.12em;
+            font-size: .7143em;
+            content: $fa-var-circle;
+        }
+
+        &.folder:before          { top: 0; font-size: 1em; content: $fa-var-folder; }
+        &.folder.change-A:before { content: $fa-var-folder-open; }
+        &.folder.change-M:before { content: $fa-var-folder-open; }
+        &.change-A:before        { content: $fa-var-plus-circle; }
+        &.change-M:before        { content: $fa-var-circle; }
+        &.change-C:before        { content: $fa-var-arrow-circle-right; }
+        &.change-R:before        { content: $fa-var-check-circle; }
+        &.change-D:before        { content: $fa-var-minus-circle; }
+    }
+
+    .changeset-changes ul > li.change {
+        &.folder:before {
+            top: $table-condensed-cell-padding - 2px;
+            margin-left: -20px;
+        }
+
+        &:before {
+            top: $table-condensed-cell-padding;
+            margin-left: -(20px - $table-condensed-cell-padding);
+            float: left;
+        }
+    }
 }
 @else
 {
@@ -996,7 +1098,8 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         height: 14px;
         padding-left: 14px;
         box-sizing: border-box;
-        background: url("../images/calendar_555555_14.png") no-repeat;
+        @extend %image-calendar;
+        background-repeat: no-repeat;
     }
 
 

src/sass/components/_image-base64.scss

@@ -0,0 +1,28 @@
+//
+// Base64 encoded images
+// --------------------------------------------------
+
+/* ACI = AutoComplete Indicator */
+%image-aci {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-left {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-right {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACXRSTlMAgF1mUUUMBwa6cf6pAAAAIklEQVQI12PADwJgDBEYQ1ADxhBOgDIEFdBF1GG6EOYQCQC/wwKE7b2bNAAAAABJRU5ErkJggg==);
+}
+
+%image-calendar {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAIVBMVEUAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUMftYpAAAACnRSTlMArIDn/dahwzIKIC4f+wAAADxJREFUCNdjYEhJACEGBk8HEGIQXrDYeMFiAYZVK1YB0QKGVSAApBcwMQgwMSDohaKChqKCxItXgc0pAADUBx5bh1ZBCgAAAABJRU5ErkJggg==);
+}
+
+%image-toggle-minus {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAgJsrThgAAAAQSURBVAjXY8AK+D+AEDYAAC8fAf+FxiPoAAAAAElFTkSuQmCC);
+}
+
+%image-toggle-plus {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAgJsrThgAAAAVSURBVAjXY0AGjA1QxP8BiBBcJAAAdjIFBZTfDZQAAAAASUVORK5CYII=);
+}

src/sass/components/_issue.scss

@@ -0,0 +1,571 @@
+//
+// Issue page
+// --------------------------------------------------
+
+.issue {
+    &.details {
+        margin-bottom: $line-height-computed;
+        padding: $issue-padding;
+        border: 1px solid $issue-border;
+        border-radius: $border-radius-base;
+        background-color: $issue-bg;
+        color: $issue-text;
+        word-wrap: break-word;
+
+        @if $use-gravatars
+        {
+            > img.gravatar {
+                width: $issue-gravatar-size;
+                height: $issue-gravatar-size;
+                margin-right: 10px;
+                margin-bottom: $line-height-computed / 2;
+                float: left;
+            }
+
+            table img.gravatar {
+                position: relative;
+                top: -3px;
+                margin-right: 5px;
+            }
+
+            > .subject,
+            > .author {
+                padding-left: $issue-gravatar-size + 10px;
+            }
+        }
+
+        &.assigned-to-me {
+            .assigned-to .user {
+                font-weight: bold;
+            }
+        }
+
+        > .subject {
+            h3 {
+                margin-bottom: .3em;
+                color: $gray-darkest;
+                font-size: $issue-heading-size * 1em;
+                font-weight: bold;
+                line-height: 1.2;
+            }
+
+            p {
+                margin-bottom: 5px;
+                font-size: $font-size-small;
+            }
+        }
+
+        > .author {
+            margin-bottom: $line-height-computed;
+        }
+
+        > hr {
+            margin: $issue-padding (-$issue-padding);
+            border-top-color: $issue-border;
+        }
+
+        > .description {
+            > p {
+                margin-bottom: $issue-padding;
+            }
+
+            > .wiki {
+                margin: 0 (-$issue-padding) (-$issue-padding);
+                padding: $padding-wiki;
+                border-top: 1px solid $issue-border;
+                background: $body-bg;
+            }
+        }
+
+        .next-prev-links {
+            color: $gray-light;
+        }
+    }
+
+    .attributes {
+        width: 100%;
+
+        th,
+        td {
+            padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
+            text-align: left;
+            vertical-align: top;
+        }
+
+        > tbody > tr {
+            th {
+                font-weight: normal;
+            }
+
+            td {
+                color: $gray-darkest;
+            }
+        }
+
+        @media screen and (min-width: $screen-md-min) {
+            > tbody > tr {
+                > th,
+                > td {
+                    width: 25%;
+                }
+            }
+        }
+
+        @media screen and (min-width: $screen-lg-min) {
+            width: auto;
+
+            > tbody > tr {
+                > th {
+                    width: 14em;
+                }
+
+                > td {
+                    width: auto;
+                    min-width: 16em;
+                }
+            }
+        }
+    }
+
+    @if $color-status {
+        .attributes td.status {
+            display: inline-block;
+            width: auto;
+            min-width: 1em;
+            margin-top: $issue-attribute-padding-v;
+            padding: 1px $table-cell-padding;
+            border-radius: $border-radius-base;
+            background-color: $brand-primary;
+            color: $brand-text;
+            font-size: $font-size-small;
+            font-weight: bold;
+            text-align: center;
+            text-transform: uppercase;
+        }
+
+        &.status-1 .attributes td.status {
+            background-color: $brand-info;
+        }
+
+        &.closed .attributes td.status {
+            background-color: $brand-danger;
+        }
+    }
+
+    div.attachments {
+        margin: $issue-padding (-$issue-padding) (-$issue-padding);
+        padding: $issue-padding;
+    }
+}
+
+div.fileover {
+    background-color: $highlight-bg;
+}
+
+div.attachments {
+    padding: $line-height-computed 0;
+    border-top: 1px solid $issue-border;
+
+    p {
+        margin: 10px 0 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    img {
+        position: relative;
+        top: -1px;
+        vertical-align: middle;
+    }
+
+    .delete {
+        opacity: .5;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    span.author {
+        color: $gray;
+        font-size: $font-size-small;
+    }
+}
+
+div.thumbnails {
+    margin-top: $issue-padding;
+
+    div {
+        display: inline;
+    }
+
+    a {
+        display: inline-block;
+        margin-right: 2px;
+        border: 1px solid $gray-lighter;
+        border-radius: $border-radius-base;
+        background-color: $body-bg;
+
+        &:hover {
+            border-color: $gray-light;
+        }
+    }
+
+    img {
+        top: 0;
+        margin: 3px;
+        border-radius: $border-radius-base - 1;
+    }
+}
+
+#issue_tree,
+#relations {
+    > p {
+        margin-bottom: 0;
+    }
+
+    .issues {
+        margin: ($line-height-computed / 2) 0 0;
+
+        tr:last-child > td {
+            border-bottom: 0 none;
+        }
+
+        td.checkbox {
+            display: none;
+        }
+
+        td.subject {
+            padding-left: 0;
+        }
+
+        td.buttons {
+            vertical-align: middle;
+        }
+    }
+}
+
+#relations {
+    td.checkbox {
+        display: none;
+    }
+
+    td.buttons {
+        padding: 0;
+    }
+}
+
+#new-relation-form {
+    text-align: right;
+
+    > p {
+        margin-bottom: 0;
+
+        > input {
+            margin-right: 5px;
+        }
+    }
+}
+
+#history {
+    overflow: auto;
+
+    > .tabs {
+        margin-bottom: $line-height-computed + 2px * 2;
+    }
+
+    &.hide-details {
+        .journal,
+        .details,
+        .first-of-notes:before {
+            display: none;
+        }
+
+        .has-notes {
+            display: block;
+        }
+    }
+
+    &.hide-notes {
+        .journal,
+        .wiki,
+        .first-of-details:before {
+            display: none;
+        }
+
+        .has-details {
+            display: block;
+        }
+    }
+}
+
+.journal {
+    position: relative;
+    margin-bottom: $line-height-computed + 2px * 2;
+
+    @if $use-gravatars {
+        margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
+    }
+
+    &:before {
+        display: block;
+        position: absolute;
+        top: -($line-height-computed + 2px);
+        left: 22px;
+        width: 4px;
+        height: $line-height-computed;
+        background-color: darken($body-bg, 5%);
+        content: "";
+        z-index: -1;
+    }
+
+    .tabs + &:before {
+        display: none;
+    }
+
+    > div {
+        border: 1px solid $issue-border;
+        border-radius: $panel-border-radius;
+
+        &:target {
+            border-color: darken($issue-border, 25%);
+
+            @if $use-gravatars {
+                h4:before {
+                    border-right-color: darken($issue-border, 25%);
+                }
+            }
+        }
+    }
+
+    h4 {
+        margin: 0;
+        padding: $bubble-padding-vertical $bubble-padding-horizontal;
+        border-radius: $panel-border-radius $panel-border-radius 0 0;
+        background-color: $issue-bg;
+        color: $gray;
+        font-size: $font-size-list;
+
+        a {
+            color: $gray-darker;
+
+            &.user {
+                font-weight: bold;
+            }
+        }
+
+        .journal-link {
+            color: $gray;
+        }
+    }
+
+    @if $use-gravatars {
+        h4 {
+            position: relative;
+
+            &:before,
+            &:after {
+                display: block;
+                position: absolute;
+                top: 9px;
+                right: 100%;
+                left: -14px;
+                width: 0;
+                height: 0;
+                border-style: solid solid outset;
+                border-color: transparent;
+                content: " ";
+                pointer-events: none;
+            }
+
+            &:after {
+                margin-top: 1px;
+                margin-left: 2px;
+                border-width: 6px;
+                border-right-color: $issue-bg;
+            }
+
+            &:before {
+                border-width: 7px;
+                border-right-color: $issue-border;
+            }
+
+            > .gravatar {
+                margin-top: $line-height-computed - $bubble-gravatar-size;
+                margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
+                float: left;
+            }
+        }
+    }
+
+    .details {
+        margin: 0;
+        padding: $bubble-padding-vertical 0;
+        padding-left: $bubble-padding-horizontal * 3;
+        border-top: 1px solid mix($body-bg, $issue-border, 50%);
+        font-size: $font-size-list;
+        list-style: none;
+
+        li {
+            position: relative;
+            margin-bottom: $bubble-padding-vertical / 2;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &:before {
+                display: block;
+                position: absolute;
+                top: 5px;
+                left: -($bubble-padding-horizontal * 1.5 + 6px / 2);
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background-color: $gray-light;
+                content: "";
+            }
+        }
+
+        img {
+            margin: 0 0 -3px 4px;
+        }
+    }
+
+    .wiki,
+    form {
+        padding: $issue-padding;
+        border-top: 1px solid mix($body-bg, $issue-border, 50%);
+    }
+
+    form {
+        padding-top: 5px;
+        background-color: $gray-lightest;
+
+        > p {
+            margin-bottom: $issue-padding;
+        }
+
+        > .wiki {
+            margin: 0 (-$issue-padding) (-$issue-padding);
+            padding: 0;
+            border: 0 none;
+
+            .preview {
+                padding: $issue-padding;
+            }
+        }
+    }
+
+    i {
+        &:first-of-type,
+        &:last-of-type {
+            padding: 2px 4px;
+            border-radius: $border-radius-small;
+            font-size: .9285em;
+            font-style: normal;
+        }
+    }
+
+    del > i:first-of-type,
+    i:first-of-type {
+        background-color: $journal-old-value-bg;
+        color: $journal-old-value-color;
+    }
+
+    i:last-of-type {
+        background-color: $journal-new-value-bg;
+        color: $journal-new-value-color;
+    }
+}
+
+.private-notes {
+    > div {
+        border-left-color: $brand-warning;
+
+        h4:before {
+            border-right-color: $brand-warning;
+        }
+    }
+}
+
+#activity dt,
+.journal {
+    clear: left;
+}
+
+.journal-link {
+    float: right;
+}
+
+span.private {
+    padding: $tracker-inline-padding;
+    border-radius: $border-radius-small;
+    background: $brand-warning;
+    color: $brand-text;
+    font-size: $font-size-small;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+#issue-changesets {
+    margin-bottom: $line-height-computed;
+
+    @media screen and (min-width: $screen-md-min) {
+        width: 45%;
+        margin-left: $padding-side;
+        float: right;
+    }
+
+    @media screen and (min-width: $screen-lg-min) {
+        width: 33%;
+        min-width: 28em;
+    }
+
+    div.changeset {
+        margin-top: $line-height-computed / 2 + 2px * 2;
+        border: 1px solid $issue-border;
+        border-radius: $panel-border-radius;
+        background-color: $issue-bg;
+        font-size: $font-size-list;
+        overflow: hidden;
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+
+        > p {
+            margin: 0;
+            padding: $padding-base-vertical $padding-base-horizontal;
+            color: $gray;
+            @include clearfix;
+
+            > a {
+                margin-left: .5em;
+                float: right;
+                font-family: $font-family-monospace;
+                font-weight: bold;
+            }
+
+            .author a {
+                color: $gray-darker;
+
+                &.user {
+                    font-weight: bold;
+                }
+            }
+
+            > br {
+                display: none;
+            }
+        }
+
+        > .wiki {
+            padding: $padding-base-vertical $padding-base-horizontal;
+            border-top: 1px solid mix($body-bg, $issue-border, 50%);
+            background-color: $body-bg;
+        }
+    }
+}

src/sass/components/_jquery-ui.scss

@@ -39,6 +39,10 @@
     color: $header-text;
     font-weight: bold;
 
+    a {
+        color: $header-text;
+    }
+
     a,
     button {
         &.ui-state-default {
@@ -112,6 +116,10 @@
     background: $component-active-bg;
     color: $component-active-color;
     font-weight: normal;
+
+    .ui-icon {
+        background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+    }
 }
 
 .ui-state-active a,
@@ -126,6 +134,12 @@
  * Menu (e.g. autocomplete)
  */
 
+.ui-menu {
+    padding: 3px;
+    border-radius: $panel-border-radius;
+    box-shadow: $panel-shadow;
+}
+
 .ui-menu-item {
     border-radius: $panel-border-radius;
 }
@@ -156,9 +170,17 @@
         box-shadow: $panel-shadow;
     }
 
+    .ui-dialog-content {
+        padding: 1em;
+    }
+
     .ui-dialog-titlebar-close {
         right: .5em;
     }
+
+    input[type="button"] {
+        @include button-variant($btn-link-color, $btn-link-bg, $btn-link-border);
+    }
 }
 
 .ui-widget-overlay {
@@ -252,7 +274,8 @@ img.ui-datepicker-trigger {
             text-align: right;
 
             a {
-                padding: .25em .3em .25em 0;
+                padding-right: .4em;
+                padding-left: 0;
                 border-radius: $border-radius-base;
             }
 

src/sass/components/_jstoolbar.scss

@@ -0,0 +1,175 @@
+//
+// WYSIWYG icons
+// --------------------------------------------------
+
+.jstElements {
+    @extend %clearfix;
+
+    .box & {
+        padding: 0;
+    }
+
+    button {
+        margin-bottom: 5px;
+        box-shadow: none;
+        vertical-align: top;
+    }
+
+    .jstb_help {
+        margin-right: 0;
+        margin-left: -6px;
+        float: right;
+    }
+
+    .box & {
+        button {
+            margin-right: 2px;
+        }
+
+        .jstSpacer {
+            margin-right: 4px;
+        }
+
+        @media (min-width: $screen-lg) {
+            button {
+                margin-right: 4px;
+            }
+
+            .jstSpacer {
+                margin-right: 6px;
+            }
+        }
+    }
+}
+
+@if $use-font-awesome
+{
+    .jstElements {
+        %jstb-icon {
+            padding: 0;
+            background: $body-bg;
+            background-image: none;
+            color: $btn-default-color;
+            @include fa-icon();
+
+            &:before {
+                text-align: center;
+            }
+        }
+
+        .jstb_strong {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-bold; }
+        }
+
+        .jstb_em {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-italic; }
+        }
+
+        .jstb_ins {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-underline; }
+        }
+
+        .jstb_del {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-strikethrough; }
+        }
+
+        .jstb_code {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-code; }
+        }
+
+        .jstb_h1 {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-header; }
+        }
+
+        .jstb_h2 {
+            @extend %jstb-icon;
+
+            &:before { font-size: .7857em; content: $fa-var-header; }
+        }
+
+        .jstb_h3 {
+            @extend %jstb-icon;
+
+            &:before { font-size: .6429em; content: $fa-var-header; }
+        }
+
+        .jstb_ul {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-list-ul; }
+        }
+
+        .jstb_ol {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-list-ol; }
+        }
+
+        .jstb_bq {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-indent; }
+        }
+
+        .jstb_unbq {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-outdent; }
+        }
+
+        .jstb_pre {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-terminal; }
+        }
+
+        .jstb_link {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-link; }
+        }
+
+        .jstb_img {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-image; }
+        }
+
+        .jstb_cut {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-scissors; }
+        }
+
+        // For plugin https://github.com/mediatainment/redmine_codebutton
+        .jstb_codehighlight {
+            @extend %jstb-icon;
+            color: $brand-danger;
+
+            &:before { content: $fa-var-code; }
+        }
+
+        button.jstb_help {
+            @extend %jstb-icon;
+            color: $link-color;
+
+            &:hover {
+                color: $link-hover-color;
+            }
+
+            &:before { content: $fa-var-question-circle; }
+        }
+    }
+}

src/sass/components/_list.scss

@@ -25,12 +25,13 @@ table.list {
     td {
         padding: $table-cell-padding;
         border-bottom: 1px solid $table-border-color;
-        text-align: center;
+        text-align: left;
         vertical-align: top;
 
         &.checkbox {
             width: 15px;
             padding: $table-cell-padding 0 0;
+            text-align: center;
 
             input {
                 margin: 2px 0 0;
@@ -38,11 +39,10 @@ table.list {
         }
 
         &.id,
-        &.tracker,
         &.parent,
-        &.relations {
+        &.relations,
+        &.tracker {
             width: 2%;
-            text-align: center;
         }
 
         &.id {
@@ -50,20 +50,16 @@ table.list {
             text-align: right;
         }
 
-        &.name,
-        &.description,
-        &.subject,
-        &.comments,
-        &.roles {
-            text-align: left;
-        }
-
-        &.tick {
-            width: 15%;
+        &.estimated_hours,
+        &.remaining_hours,
+        &.spent_hours,
+        &.story_points,
+        &.int,
+        &.float {
+            text-align: right;
         }
 
         &.buttons {
-            width: 15%;
             text-align: right;
             white-space: nowrap;
 
@@ -72,9 +68,19 @@ table.list {
             }
         }
 
-        &.reorder {
-            width: 15%;
+        &.project,
+        &.created_on,
+        &.updated_on,
+        &.start_date,
+        &.due_date,
+        &.is_private,
+        &.reorder,
+        &.bool,
+        &.date {
             text-align: center;
+        }
+
+        &.reorder {
             white-space: nowrap;
         }
     }
@@ -99,7 +105,9 @@ tr.project {
 
     &.idnt .name span {
         padding-left: 16px;
-        background: url("../images/bullet_arrow_right.png") no-repeat -5px 50%;
+        @extend %image-arrow-right;
+        background-repeat: no-repeat;
+        background-position: -5px 50%;
     }
 
     @for $i from 1 through 9 {
@@ -142,7 +150,7 @@ tr.issue {
 
     &.idnt .subject a {
         padding-left: 16px;
-        background-image: url("../images/bullet_arrow_right.png");
+        @extend %image-arrow-right;
         background-repeat: no-repeat;
 
         @if $color-trackers {
@@ -193,13 +201,15 @@ tr {
     span.expander {
         margin-left: 0;
         padding-left: 8px;
-        background: url("../images/bullet_toggle_plus.png") no-repeat center center;
+        @extend %image-toggle-plus;
+        background-repeat: no-repeat;
+        background-position: center center;
         cursor: pointer;
         @include user-select(none);
     }
 
     &.open span.expander {
-        background-image: url("../images/bullet_toggle_minus.png");
+        @extend %image-toggle-minus;
     }
 }
 
@@ -260,7 +270,7 @@ tr.entry {
 /**
  * Priorities
  */
-
+// scss-lint:disable SpaceAfterComma
 @if $color-priorities {
     @include priority(".priority-lowest",  $priority-lowest-bg,  $priority-lowest-text,  $priority-lowest-link);
     @include priority(".priority-default", $priority-default-bg, $priority-default-text, $priority-default-link);
@@ -311,12 +321,14 @@ tr.group {
 
     .count {
         display: inline-block;
+        min-width: 1em;
         margin: 0 5px;
         padding: 1px 4px;
         border-radius: $border-radius-small;
         background-color: $brand-primary;
         color: $brand-text;
         font-size: $font-size-small;
+        text-align: center;
     }
 }
 
@@ -332,6 +344,16 @@ tr.group {
 tr.time-entry {
     text-align: center;
 
+    td.project,
+    td.spent_on,
+    td.activity {
+        width: 6em;
+    }
+
+    td.user {
+        width: 12em;
+    }
+
     td.issue,
     td.comments {
         text-align: left;
@@ -339,9 +361,16 @@ tr.time-entry {
     }
 
     td.hours {
-        padding-right: .5em;
         font-weight: bold;
+    }
+}
+
+.time-entries,
+tr.time-entry {
+    td.hours {
+        width: 1%;
         text-align: right;
+        white-space: nowrap;
 
         .hours-dec {
             font-size: .9em;
@@ -349,6 +378,19 @@ tr.time-entry {
     }
 }
 
+.mypage-box {
+    td.hours {
+        font-weight: bold;
+
+        em {
+            font-style: normal;
+        }
+    }
+
+    tr.time-entry td.hours {
+        font-weight: normal;
+    }
+}
 
 /**
  * Wiki page history entry
@@ -457,3 +499,18 @@ table.files {
         }
     }
 }
+
+/**
+ * Admin lists
+ */
+
+.controller-enumerations {
+    td.name {
+        width: 50%;
+    }
+
+    td.tick,
+    td.reorder {
+        width: 15%;
+    }
+}

src/sass/components/_plugins.scss

@@ -0,0 +1,219 @@
+//
+// Redmine Backlogs
+// https://github.com/HolonGlobe/redmine_backlogs
+// Forked from: https://github.com/backlogs/redmine_backlogs
+// --------------------------------------------------
+
+#backlogs_view_issues_sidebar {
+    > a {
+        display: block;
+        padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+        border: 1px solid transparent;
+
+        @if $sidebar-position == "left" {
+            margin-right: -($sidebar-padding-horizontal);
+            border-left-width: 3px;
+            border-radius: $border-radius-large 0 0 $border-radius-large;
+        } @else {
+            margin-left: -($sidebar-padding-horizontal);
+            border-right-width: 3px;
+            border-radius: 0 $border-radius-large $border-radius-large 0;
+        }
+
+        &:hover {
+            background-color: $sidebar-link-hover-bg;
+            text-decoration: none;
+        }
+
+        + br {
+            display: none;
+        }
+    }
+}
+
+
+//
+// Redmine Time Tracker
+// https://github.com/fernandokosh/redmine_time_tracker
+// --------------------------------------------------
+
+@if $use-font-awesome {
+    .icon.icon-start,
+    .icon.icon-stop {
+        background-image: none;
+    }
+
+    .icon.icon-start {
+        color: $icon-success-color;
+
+        &:hover,
+        &:focus {
+            color: $icon-success-color;
+        }
+
+        &:before {
+            content: $fa-var-clock-o;
+        }
+    }
+
+    .icon.icon-stop {
+        color: $icon-danger-color;
+
+        &:hover,
+        &:focus {
+            color: $icon-danger-color;
+        }
+
+        &:before {
+            content: $fa-var-history;
+        }
+    }
+
+    .time-tracker-quick-menu:empty {
+        display: none;
+    }
+}
+
+
+//
+// Redmine CRM People
+// http://www.redminecrm.com/projects/people/
+// --------------------------------------------------
+
+#content {
+    .person.details {
+        margin-bottom: $line-height-computed;
+        padding: $issue-padding;
+        border: 1px solid $issue-border;
+        border-radius: $border-radius-base;
+        background-color: $issue-bg;
+
+        .avatar {
+            width: 64px;
+            max-width: 64px;
+            overflow: hidden;
+        }
+
+        .name,
+        .subject_info {
+            padding: 0 0 0 $issue-padding;
+        }
+
+        .name {
+            > h1 {
+                margin-bottom: 5px;
+            }
+
+            > p {
+                margin-bottom: 0;
+            }
+        }
+
+        .subject_info {
+            border-left: 1px solid $issue-border;
+
+            > ul {
+                margin: 0;
+            }
+        }
+
+        @if $use-font-awesome {
+            .icon {
+                background-image: none;
+            }
+        }
+    }
+
+    .department.issue.details {
+        > p {
+            clear: both;
+        }
+
+        > .author {
+            margin-bottom: 0;
+            clear: none;
+        }
+    }
+}
+
+#sidebar {
+    .person.attributes {
+        font-size: $font-size-list;
+
+        th,
+        td {
+            padding: $table-condensed-cell-padding;
+            text-align: left;
+            vertical-align: top;
+        }
+
+        .icon {
+            padding-left: $table-condensed-cell-padding + 20px;
+            background-position: $table-condensed-cell-padding $table-condensed-cell-padding;
+        }
+
+        @if $use-font-awesome {
+            .icon {
+                background-image: none;
+
+                > a {
+                    @extend %fa-icon;
+                }
+            }
+        }
+
+        .email {
+            td a {
+                display: block;
+                max-width: floor($sidebar-width / 3);
+                text-overflow: ellipsis;
+                overflow: hidden;
+
+                &:hover {
+                    position: absolute;
+                    max-width: 100%;
+                    margin: -$table-condensed-cell-padding;
+                    padding: $table-condensed-cell-padding;
+                    background: $body-bg;
+                    box-shadow: $panel-shadow;
+                }
+            }
+        }
+    }
+
+    .person_data {
+        td.avatar,
+        td.name {
+            padding: 0 0 $table-cell-padding;
+        }
+
+        td.avatar {
+            width: 40px;
+        }
+
+        td.name {
+            h4 {
+                margin: 0;
+                letter-spacing: 0;
+            }
+        }
+    }
+}
+
+
+//
+// Redmine codebutton
+// https://github.com/mediatainment/redmine_codebutton
+// --------------------------------------------------
+
+#toolbar-code-options {
+    select {
+        width: 100%;
+    }
+
+    .buttons {
+        > input {
+            margin-left: .5em;
+        }
+    }
+}

src/sass/components/_progress.scss

@@ -9,6 +9,12 @@ table.progress {
     border: 1px solid rgba(#000, .1);
     empty-cells: show;
 
+    td.done_ratio & {
+        margin-right: auto;
+        margin-left: auto;
+        float: none;
+    }
+
     td {
         height: 12px;
         padding: 0;
@@ -26,6 +32,10 @@ table.progress {
             background-color: $progress-bg;
         }
     }
+
+    .issue & td {
+        padding: 0;
+    }
 }
 
 p {

src/sass/components/_simple-list.scss

@@ -2,21 +2,19 @@
 // Activity and search results list
 // --------------------------------------------------
 
-
-#search-results,
-div#activity dl {
+#activity dl,
+#search-results {
     margin-left: $padding-side;
 }
 
-div#activity,
+#activity,
 #search-results {
     dd {
         margin-bottom: $line-height-computed;
-        padding-left: $padding-side;
+        padding-top: .1em;
     }
 
     dt {
-        margin-bottom: 2px;
         padding-left: $padding-side;
         background-repeat: no-repeat;
         background-position: 0 center;
@@ -33,8 +31,29 @@ div#activity,
     }
 }
 
-div#activity {
+#activity {
+    $activity-avatar: 24px;
+    $activity-avatar-space: 5px;
+    $activity-indent: 20px;
+
+    @if $use-gravatars {
+        $activity-indent: $activity-indent + $activity-avatar + $activity-avatar-space;
+    }
+
+    h3,
+    h4 {
+        margin: 0 0 $line-height-computed;
+        padding-bottom: .2em;
+        border-bottom: 1px dotted $gray-light;
+        font-size: $font-size-h4;
+        font-weight: normal;
+    }
+
     dt {
+        &.grouped {
+            margin-left: $activity-indent;
+        }
+
         &.me .time {
             border-bottom: 1px solid $gray-lighter;
         }
@@ -42,19 +61,27 @@ div#activity {
         .time {
             color: $gray;
         }
+
+        @if $use-gravatars {
+            .gravatar {
+                margin-top: -2px;
+                margin-right: $activity-avatar-space;
+                float: left;
+            }
+        }
     }
 
     dd {
         font-size: $font-size-small;
-    }
+        overflow: hidden;
 
-    dt.grouped,
-    dd.grouped {
-        margin-left: $padding-side;
+        &.grouped {
+            margin-left: $activity-indent;
+        }
     }
 }
 
-div#search-results-counts {
+#search-results-counts {
     float: right;
 
     ul {

src/sass/components/_tabs.scss

@@ -24,10 +24,12 @@
 
             > a {
                 display: block;
+                min-width: 2em;
                 margin-right: 2px;
                 padding: $tab-padding-vertical $tab-padding-horizontal;
                 border: 1px solid transparent;
                 border-radius: $border-radius-base $border-radius-base 0 0;
+                text-align: center;
 
                 &:hover,
                 &:focus {
@@ -78,11 +80,11 @@
         }
 
         .tab-left {
-            background-image: url("../images/bullet_arrow_left.png");
+            @extend %image-arrow-left;
         }
 
         .tab-right {
-            background-image: url("../images/bullet_arrow_right.png");
+            @extend %image-arrow-right;
         }
     }
 }

src/sass/components/_top.scss

@@ -64,7 +64,7 @@
         }
 
         > .ancestor {
-            font-size: 80%;
+            font-weight: 500;
         }
     }
 
@@ -103,6 +103,15 @@
         }
     }
 
+    option {
+        background-color: $input-bg;
+        color: $input-color;
+
+        &[disabled] {
+            color: $gray-lighter;
+        }
+    }
+
     input {
         width: 200px;
     }

src/sass/components/_wiki.scss

@@ -1,6 +1,37 @@
-.wiki-page {
+.wiki.wiki-page {
     margin-bottom: $line-height-computed;
     font-size: $wiki-font-size;
+
+    @if $wiki-page-more-vertical-space {
+        /**
+         * Anchors will make headers more separated,
+         * and it will look better when you open page with hash in URL
+         */
+        a[name]:empty {
+            display: block;
+            overflow: hidden;
+        }
+
+        /**
+         * Add some space between list items
+         */
+        ul,
+        ol {
+            li {
+                margin-top: .25em;
+            }
+
+            ul,
+            ol {
+                margin-top: .25em;
+                margin-bottom: .25em;
+
+                li {
+                    margin-top: .125em;
+                }
+            }
+        }
+    }
 }
 
 .controller-wiki .wiki > .preview {
@@ -11,35 +42,40 @@ div.wiki {
     color: $wiki-text;
     line-height: $wiki-line-height;
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
+    //scss-lint:disable SingleLinePerSelector
+    h1, .h1,
+    h2, .h2,
+    h3, .h3,
+    h4, .h4,
+    h5, .h5,
+    h6, .h6 {
         margin-top: 1em;
-        margin-bottom: .5em;
+        margin-bottom: $wiki-font-size;
         font-weight: $headings-font-weight;
         line-height: $headings-line-height;
     }
 
-    h1 { font-size: $font-size-h1; }
-    h2 { font-size: $font-size-h2; }
-    h3 { font-size: $font-size-h3; }
-    h4 { font-size: $font-size-h4; }
-    h5 { font-size: $font-size-h5; }
-    h6 { font-size: $font-size-h6; }
+    h1, .h1 { font-size: $font-size-h1; line-height: 1.2; }
+    h2, .h2 { font-size: $font-size-h2; line-height: 1.225; }
+    h3, .h3 { font-size: $font-size-h3; line-height: 1.43; }
+    h4, .h4 { font-size: $font-size-h4; }
+    h5, .h5 { font-size: $font-size-h5; }
+    h6, .h6 { font-size: $font-size-h6; }
 
-    h1,
-    h2 {
+    h1, .h1,
+    h2, .h2 {
         padding-bottom: .3em;
         border-bottom: 1px solid $gray-lighter;
     }
 
-    h6 {
+    h6, .h6 {
         color: $gray;
     }
 
+    .text-normal {
+        font-weight: normal;
+    }
+
     > a:first-child {
         + h1,
         + h2,
@@ -55,6 +91,16 @@ div.wiki {
         margin-bottom: 0;
     }
 
+    blockquote {
+        >:first-child {
+            margin-top: 0;
+        }
+
+        >:last-child {
+            margin-bottom: 0;
+        }
+    }
+
     .contextual {
         a {
             opacity: .4;
@@ -65,16 +111,19 @@ div.wiki {
         }
     }
 
+    p,
     ul,
     ol {
-        padding-left: 2em;
+        margin-bottom: 1em;
+    }
 
+    ul,
+    ol {
+        padding-left: 1.5em;
+
+        ul,
         ol {
-            list-style-type: lower-roman;
-
-            ol {
-                list-style-type: lower-alpha;
-            }
+            margin-bottom: 0;
         }
     }
 
@@ -127,6 +176,7 @@ div.wiki {
     pre {
         // scss-lint:disable DuplicateProperty
         width: auto;
+        margin-bottom: 1.15em;
         padding: 4px 8px;
         border: 1px solid #e7e7e7;
         border-radius: $border-radius-base;
@@ -218,6 +268,20 @@ div.wiki {
             vertical-align: middle;
         }
     }
+
+    .toc-active-prev + .toc {
+        padding-left: $padding-large-horizontal;
+        border-left: 4px solid $toc-active-border;
+
+        a {
+            color: $toc-active-link;
+
+            &:focus,
+            &:hover {
+                color: $toc-active-link-hover;
+            }
+        }
+    }
 }
 
 h1,
@@ -241,6 +305,12 @@ h6 {
             display: inline;
         }
     }
+
+    img {
+        display: inline-block;
+        max-width: 100%;
+        vertical-align: middle;
+    }
 }
 
 p.footnote {
@@ -291,3 +361,102 @@ p.footnote {
         float: right;
     }
 }
+
+
+//
+// Custom classes for Bootstrap-like features
+// --------------------------------------------------
+
+/**
+ * Pager
+ * see: http://getbootstrap.com/components/#pagination-pager
+ */
+.wiki-pager {
+    > a {
+        display: inline-block;
+        padding: $padding-base-vertical $padding-base-horizontal;
+        border: 1px solid $btn-default-border;
+        border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) / 2;
+        background-color: $body-bg;
+        line-height: 1;
+        white-space: nowrap;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: $btn-default-bg;
+            text-decoration: none;
+        }
+    }
+
+    &.wiki-pager--aligned {
+        overflow: hidden;
+
+        > a:first-child {
+            float: left;
+        }
+
+        > a:last-child {
+            float: right;
+        }
+    }
+}
+
+/**
+ * Typographic helper classes
+ */
+
+// Lead body copy
+// see: http://getbootstrap.com/css/#lead-body-copy
+.lead {
+    margin-bottom: $line-height-computed;
+    font-size: floor(($font-size-base * 1.15));
+    font-weight: 300;
+    line-height: 1.4;
+
+    @media (min-width: $screen-sm-min) {
+        font-size: ($font-size-base * 1.5);
+    }
+}
+
+// Alignment
+// see: http://getbootstrap.com/css/#type-alignment
+.text-left       { text-align: left; }
+.text-right      { text-align: right; }
+.text-center     { text-align: center; }
+.text-justify    { text-align: justify; }
+.text-nowrap     { white-space: nowrap; }
+
+// Transformation
+// see: http://getbootstrap.com/css/#type-transformation
+.text-lowercase  { text-transform: lowercase; }
+.text-uppercase  { text-transform: uppercase; }
+.text-capitalize { text-transform: capitalize; }
+
+/**
+ * Other helper classes
+ * see: http://getbootstrap.com/css/#helper-classes
+ */
+
+.text-muted      { color: $gray-light; }
+.text-primary    { color: $brand-primary; }
+.text-success    { color: $brand-success; }
+.text-info       { color: $brand-info; }
+.text-warning    { color: $brand-warning; }
+.text-danger     { color: $brand-danger; }
+
+.bg-primary      { background-color: $brand-primary; color: $brand-text; }
+.bg-success      { background-color: $state-success; }
+.bg-info         { background-color: $state-info; }
+.bg-warning      { background-color: $state-warning; }
+.bg-danger       { background-color: $state-danger; }
+
+p {
+    &.bg-primary,
+    &.bg-success,
+    &.bg-info,
+    &.bg-warning,
+    &.bg-danger {
+        padding: $panel-body-padding;
+    }
+}

src/sass/javascripts/_sidebar-toggler.scss

@@ -0,0 +1,116 @@
+@if $enable-sidebar-toggler {
+    $toggler-position-v:        1px;
+    $toggler-position-h:        1px;
+    $arrow-right:               $fa-var-caret-square-o-right;
+    $arrow-left:                $fa-var-caret-square-o-left;
+
+    #main {
+        position: relative;
+    }
+
+    #sidebar {
+        @if $fixed-layout {
+            opacity: 1;
+            @include transition(margin .5s, opacity .5s);
+        } @else {
+            @include transition(margin .5s);
+        }
+
+        &.sidebar-hiding {
+            @if $fixed-layout {
+                opacity: 0;
+            }
+            @if $sidebar-position == "left" {
+                margin-left: -$sidebar-width;
+            } @else {
+                margin-right: -$sidebar-width;
+            }
+        }
+
+        &.sidebar-hidden {
+            display: none;
+        }
+    }
+
+    .sidebar-toggler {
+        @include user-select(none);
+
+        display: block;
+        position: absolute;
+        top: $toggler-position-v;
+
+        @if $use-font-awesome {
+            @extend %fa-icon;
+            color: $gray-light;
+            line-height: 1;
+
+            &:before {
+                margin-right: 0;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                color: $gray;
+            }
+        } @else {
+            width: 15px;
+            height: 15px;
+            border-radius: $border-radius-base;
+            background-repeat: no-repeat;
+            background-position: center center;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: $gray-lighter;
+            }
+        }
+
+        @if $sidebar-position == "left" {
+            left: $toggler-position-h;
+
+            @if $use-font-awesome {
+                &:before {
+                    content: $arrow-left;
+                }
+            } @else {
+                @extend %image-arrow-left;
+            }
+        } @else {
+            right: $toggler-position-h;
+
+            @if $use-font-awesome {
+                &:before {
+                    content: $arrow-right;
+                }
+            } @else {
+                @extend %image-arrow-right;
+            }
+        }
+
+        &.sidebar-hidden {
+            @if $sidebar-position == "left" {
+                @if $use-font-awesome {
+                    &:before {
+                        content: $arrow-right;
+                    }
+                } @else {
+                    @extend %image-arrow-right;
+                }
+            } @else {
+                @if $use-font-awesome {
+                    &:before {
+                        content: $arrow-left;
+                    }
+                } @else {
+                    @extend %image-arrow-left;
+                }
+            }
+        }
+    }
+} @else {
+    .sidebar-toggler {
+        display: none;
+    }
+}

src/sass/mixins/_issues.scss

@@ -1,11 +1,20 @@
 // Priority highlight
 
 @mixin priority($parent, $background, $color, $link) {
+    @if lightness($background) < 85% {
+        $background: lighten($background, 6%);
+    }
+
     $border-color: darken(desaturate($background, 30%), 13.5%);
 
     tr#{$parent} {
         background: $background;
-        color: $color;
+
+        @if ".priority-default" == $parent {
+            color: $color;
+        } @else {
+            color: darken($color, 10%);
+        }
 
         &.odd {
             background: darken($background, 3%);
@@ -32,11 +41,7 @@
                 $border-color: $issue-border;
                 background: $issue-bg;
             } @else {
-                @if lightness($background) < 85% {
-                    background: lighten($background, 6%);
-                } @else {
-                    background: $background;
-                }
+                background: $background;
             }
 
             &,
@@ -56,9 +61,11 @@
                 color: mix($color, $gray-light, 25%);
             }
 
-            .wiki {
+            > .description > .wiki {
                 border-top-color: $border-color;
+            }
 
+            .wiki {
                 a {
                     color: $link-color;
                     text-decoration: none;
@@ -77,7 +84,12 @@
 
             > .attachments {
                 border-top-color: lighten($border-color, 5%);
-                background-color: lighten($background, 5%);
+
+                @if ".priority-default" == $parent {
+                    background-color: lighten($issue-bg, 1.5%);
+                } @else {
+                    background-color: lighten($background, 5%);
+                }
 
                 span.author {
                     color: mix($color, $gray, 25%);
@@ -104,19 +116,47 @@
         color: $color;
 
         &:hover {
-            background-color: darken($background, 10%);
+            @if hue($background) > 15deg and hue($background) < 40deg {
+                background-color: darken(adjust-hue($background, -8deg), 8%);
+            } @else {
+                background-color: darken($background, 10%);
+            }
             color: $color;
             text-decoration: none;
         }
+
+        &:focus,
+        &:active {
+            text-decoration: none;
+        }
     }
 
     a#{$parent} {
         margin-right: 1px;
         padding: $tracker-inline-padding;
+        font-weight: normal;
 
         &.closed {
-            color: mix($color, $background, 50%);
-            text-decoration: $link-closed-decoration;
+            position: relative;
+            color: mix($color, $background, 75%);
+            text-decoration: none;
+
+            &:after {
+                display: block;
+                position: absolute;
+                right: 5px;
+                bottom: 0;
+                left: 5px;
+                height: calc(50% - 2px/2);
+                border-top: 2px solid rgba($color, .95);
+                content: "";
+                @include rotate(-4deg);
+                @include transition(border-color .1s);
+            }
+
+            &:hover:after {
+                border-top-color: rgba($color, .25);
+            }
         }
     }
 

src/sass/mixins/_link-variant.scss

@@ -0,0 +1,10 @@
+// Link variant
+
+@mixin link-variant($default-color, $hover-color: darken($default-color, 10%)) {
+    color: $default-color;
+
+    &:focus,
+    &:hover {
+        color: $hover-color;
+    }
+}

src/sass/plugins/redmine_backlogs/global.scss

@@ -251,24 +251,7 @@ ul.ui-sortable {
  * Story tooltip
  */
 .ui-tooltip {
-    .ui-tooltip-tip,
     .ui-tooltip-content {
-        border-color: $tooltip-border;
-        background-color: $tooltip-bg;
-    }
-
-    .ui-tooltip-content {
-        padding: $padding-base-vertical;
-        color: $tooltip-text;
-        font-size: $font-size-small;
-        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
-
-        > div {
-            max-height: 200px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
         hr {
             margin-top:    $line-height-computed / 2;
             margin-bottom: $line-height-computed / 2;
@@ -280,6 +263,30 @@ ul.ui-sortable {
             display: none;
         }
     }
+
+    .issue-description {
+        max-height: 10em;
+        margin-top: 12px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .issue-field {
+        margin: 2px 0 0;
+        padding-left: 160px;
+        overflow: hidden;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        > label {
+            margin-left: -160px;
+            padding-right: 5px;
+            float: left;
+            font-weight: bold;
+        }
+    }
 }
 
 .tooltip_text {
@@ -297,7 +304,7 @@ ul.ui-sortable {
 }
 
 .w-rb-header-collapsed {
-    height: 18px;
+    height: 27px; // 14px * .86 * 1.42857 + 2 * 5px
     overflow: hidden;
 }
 
@@ -318,141 +325,3 @@ body {
         }
     }
 }
-
-#ui-datepicker-div {
-    width: 16em;
-    padding: 3px;
-    border: 1px solid $panel-border;
-    background: $body-bg;
-    color: $text-color;
-    font-size: $font-size-base;
-    box-shadow: $panel-shadow;
-
-    .ui-widget-header {
-        border: 0 none;
-        background: $header-bg;
-        color: $header-text;
-        font-weight: bold;
-    }
-
-    .ui-state-default {
-        border: 1px solid $body-bg;
-        background: $body-bg;
-        color: $component-color;
-        font-weight: normal;
-        box-shadow: none;
-
-        a,
-        a:link,
-        a:visited {
-            color: $component-color;
-            text-decoration: none;
-        }
-    }
-
-    .ui-state-hover,
-    .ui-state-focus {
-        border: 1px solid $component-active-border;
-        background: $component-active-bg;
-        color: $component-active-color;
-        font-weight: normal;
-    }
-
-    .ui-datepicker-header {
-        padding: .3em;
-    }
-
-    .ui-datepicker-prev {
-        left: .3em;
-    }
-
-    .ui-datepicker-next {
-        right: .3em;
-    }
-
-    .ui-datepicker-prev,
-    .ui-datepicker-next {
-        top: .3em;
-        border: 0 none;
-        background: transparent;
-
-        .ui-icon {
-            background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
-        }
-
-        &.ui-state-hover {
-            border-color: darken($header-bg, 12%);
-            background: darken($header-bg, 10%);
-        }
-    }
-
-    .ui-datepicker-title {
-        margin: 0 (1.8em + .3em);
-    }
-
-    select.ui-datepicker-month,
-    select.ui-datepicker-year {
-        width: 49%;
-        height: 1.8em;
-        margin: 0;
-    }
-
-    select.ui-datepicker-year {
-        margin-left: 1%;
-    }
-
-    .ui-datepicker-calendar {
-        td {
-            text-align: right;
-
-            &.ui-datepicker-week-col {
-                padding-right: $table-condensed-cell-padding;
-            }
-        }
-    }
-
-    .ui-datepicker-today {
-        .ui-state-highlight {
-            border-color: $component-active-border;
-            background: $component-bg;
-            color: $component-color;
-        }
-
-        .ui-state-hover {
-            background: $component-active-bg;
-            color: $component-active-color;
-        }
-    }
-
-    .ui-datepicker-current-day {
-        .ui-state-active {
-            border-color: $highlight-border;
-            background: $highlight-bg;
-            color: $highlight-text;
-        }
-    }
-
-    .ui-datepicker-buttonpane {
-        button {
-            padding: $input-padding-vertical $input-padding-horizontal;
-        }
-
-        .ui-state-default {
-            border-color: $component-border;
-            background: $component-bg;
-        }
-
-        .ui-state-focus,
-        .ui-state-hover {
-            border-color: $component-active-bg;
-            background: $component-active-bg;
-            color: $component-active-color;
-        }
-
-        .ui-state-active {
-            border-color: $highlight-border;
-            background: $highlight-bg;
-            color: $highlight-text;
-        }
-    }
-}

src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss

@@ -0,0 +1,118 @@
+@import "../common";
+
+.ui-multiselect {
+    padding: 2px 0 2px 4px;
+    text-align: left;
+
+    span.ui-icon {
+        float: right;
+    }
+}
+
+.ui-multiselect-single .ui-multiselect-checkboxes {
+    input {
+        position: absolute !important;
+        top: auto !important;
+        left: -9999px;
+    }
+
+    label {
+        padding: 5px !important;
+    }
+}
+
+.ui-multiselect-header {
+    margin-bottom: 3px;
+    padding: 3px;
+
+    ul {
+        font-size: $font-size-list;
+
+        li {
+            padding: 0 10px 0 0;
+            float: left;
+        }
+    }
+
+    a {
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    span.ui-icon {
+        float: left;
+    }
+
+    li.ui-multiselect-close {
+        padding-right: 0;
+        float: right;
+        text-align: right;
+    }
+}
+
+.ui-multiselect-menu {
+    display: none;
+    position: absolute;
+    padding: 3px;
+    text-align: left;
+    box-shadow: $panel-shadow;
+    z-index: 10000;
+}
+
+.ui-multiselect-checkboxes {
+    position: relative;
+    padding-right: 2px;
+    overflow-y: scroll;
+
+    input[type="checkbox"] {
+        top: 0;
+        margin: 3px 0 0 -20px;
+        float: left;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    label {
+        display: block;
+        padding: 3px 1px;
+        padding-left: 20px + 6px;
+        border: 1px solid transparent;
+        cursor: default;
+        @include user-select(none);
+
+        input {
+            position: relative;
+            top: 1px;
+        }
+    }
+
+    li {
+        clear: both;
+        font-size: $font-size-list;
+
+        &.ui-multiselect-optgroup-label {
+            margin-bottom: 2px;
+            border-bottom: 1px solid $panel-border;
+            font-weight: bold;
+            text-align: center;
+
+            a {
+                display: block;
+                margin: 1px 0;
+                padding: 3px;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+/* remove label borders in IE6 because IE6 does not support transparency */
+
+* html .ui-multiselect-checkboxes label {
+    border: 0 none;
+}

src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss

@@ -0,0 +1,37 @@
+@import "../common";
+
+.qtip {
+    position: absolute;
+    top: -31000px;
+    left: -31000px;
+    width: auto;
+    max-width: 500px;
+    outline: none;
+}
+
+.ui-tooltip-content {
+    position: relative;
+    padding: 10px;
+    border: 1px solid $tooltip-border;
+    background-color: $tooltip-bg;
+    color: $tooltip-text;
+    font-size: $font-size-list;
+    text-align: left;
+    word-wrap: break-word;
+    box-shadow: 0 2px 2px rgba(#000, .2);
+    overflow: hidden;
+}
+
+.ui-tooltip-tip {
+    border-color: $tooltip-border;
+    background-color: $tooltip-bg;
+}
+
+.ui-tooltip-tip {
+    position: absolute;
+    margin: 0 auto;
+    border: 0 none;
+    background: transparent;
+    overflow: hidden;
+    z-index: 10;
+}

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -27,7 +27,11 @@ $story-sp-input-width:          50px;
         }
 
         &:hover {
-            background-color: darken($background, 10%);
+            @if hue($background) > 15deg and hue($background) < 40deg {
+                background-color: darken(adjust-hue($background, -8deg), 8%);
+            } @else {
+                background-color: darken($background, 10%);
+            }
             text-decoration: none;
         }
     }
@@ -304,18 +308,19 @@ $story-sp-input-width:          50px;
             position: relative;
             height: $header-line-height;
             border-right: 1px solid #888;
-            border-bottom: 0 none;
+            border-bottom: 1px solid $header-bg;
             border-radius: ($border-radius-large - 1px) 0 0;
             cursor: pointer;
             font-size: $font-size-small;
             line-height: $line-height-base;
             overflow: visible;
-            @include transition(background-color .07s);
+            @include transition(background-color 0s .1s, border-color 0s .1s);
 
             &:hover {
-                border-bottom: 1px solid $body-bg;
+                border-color: $body-bg;
                 background-color: $body-bg;
                 z-index: 1000;
+                @include transition(background-color 0s 0s, border-color 0s 0s);
             }
 
             .icon {
@@ -327,20 +332,21 @@ $story-sp-input-width:          50px;
                 background-position: -64px -16px;
             }
 
-            .items {
-                display: none;
+            ul {
                 position: absolute;
                 top: $header-line-height + 1px;
                 left: -1px;
                 margin: 0;
                 padding: $padding-small-vertical 0;
-                border: 1px solid $gray-light;
-                border-top: 0 none;
+                border: 1px solid $header-bg;
+                border-top-width: 0;
                 border-radius: 0 0 $border-radius-base $border-radius-base;
                 background-color: $body-bg;
                 list-style: none;
                 box-shadow: 0 2px 1px rgba(#000, .1);
+                visibility: hidden;
                 z-index: 999;
+                @include transition(visibility 0s .1s);
 
                 a {
                     color: $gray-darker;
@@ -348,11 +354,13 @@ $story-sp-input-width:          50px;
             }
 
             &:hover .items {
-                display: block;
+                visibility: visible;
+                @include transition(visibility 0s 0s);
             }
 
             .item {
-                min-width: 150px;
+                position: relative;
+                min-width: 100px;
                 white-space: nowrap;
 
                 > a {
@@ -366,19 +374,28 @@ $story-sp-input-width:          50px;
                     }
                 }
 
-                ul {
-                    display: none;
+                > .ui-icon {
                     position: absolute;
-                    top: 0;
-                    left: 160px;
-                    margin: 0;
-                    padding: 0;
-                    background-color: $gray-lightest;
-                    list-style: none;
+                    top: 4px;
+                    right: 8px;
+                    left: auto;
+                    background-position: -32px -16px;
                 }
 
-                &:hover ul {
-                    display: block;
+                ul {
+                    position: absolute;
+                    top: -($padding-small-vertical + 1px);
+                    left: 100%;
+                    border-width: 1px;
+                }
+
+                &:hover {
+                    background-color: darken($body-bg, 8%);
+
+                    ul {
+                        visibility: visible;
+                        @include transition(visibility 0s 0s);
+                    }
                 }
             }
         }
@@ -434,7 +451,7 @@ $story-sp-input-width:          50px;
     .story {
         display: block;
         margin: 0;
-        padding: $table-condensed-cell-padding;
+        padding: 0 $table-condensed-cell-padding;
         border-top: 1px solid $gray-lighter;
         background-color: $body-bg;
         background-repeat: no-repeat;
@@ -442,7 +459,7 @@ $story-sp-input-width:          50px;
         cursor: move;
 
         &:nth-child(2n) {
-            background-color: $table-bg-accent;
+            background-color: $gray-lightest;
         }
 
         &:hover {
@@ -466,6 +483,7 @@ $story-sp-input-width:          50px;
         .id {
             position: relative;
             width: $story-id-width;
+            margin: $table-condensed-cell-padding 0;
             float: left;
 
             .t {
@@ -493,11 +511,18 @@ $story-sp-input-width:          50px;
             }
         }
 
+        .fff-left > .project,
+        .fff-wrapmiddle > .subject,
+        .fff-right > .status_id,
+        .fff-right > .story_points {
+            min-height: floor(.92 * $font-size-base * $line-height-base);
+        }
+
         .project {
             display: block;
             position: relative;
             width: $story-project-width;
-            padding-left: 5px;
+            padding: $table-condensed-cell-padding 0 $table-condensed-cell-padding $table-condensed-cell-padding;
             float: left;
             text-align: center;
             white-space: nowrap;
@@ -510,6 +535,7 @@ $story-sp-input-width:          50px;
 
         .subject {
             @include text-overflow;
+            padding: $table-condensed-cell-padding 0;
         }
 
         &.closed .subject {
@@ -518,13 +544,14 @@ $story-sp-input-width:          50px;
 
         .status_id {
             width: $story-status-width;
-            padding-left: 5px;
+            padding: $table-condensed-cell-padding 0 $table-condensed-cell-padding $table-condensed-cell-padding;
             float: left;
             white-space: nowrap;
         }
 
         .story_points {
-            width: $story-right-width - ($story-status-width + $padding-base-horizontal);
+            width: $story-right-width - ($story-status-width + $padding-base-horizontal + 1px);
+            padding: $table-condensed-cell-padding $table-condensed-cell-padding $table-condensed-cell-padding 0;
             float: left;
             text-align: right;
         }
@@ -568,7 +595,9 @@ $story-sp-input-width:          50px;
             .editors {
                 display: block;
                 margin-left: $story-tracker-input-width + 5px;
+                padding: $table-condensed-cell-padding 0;
                 text-align: right;
+                @include clearfix;
 
                 label {
                     display: none;
@@ -593,14 +622,16 @@ $story-sp-input-width:          50px;
 
                 &.status_id {
                     width: $story-status-input-width;
+                    padding-right: 0;
                     float: left;
                 }
 
                 &.story_points {
                     width: $story-sp-input-width;
                     margin-right: 0;
-                    padding-left: 0;
+                    padding-right: 0;
                     float: left;
+                    text-align: left;
                 }
 
                 &.subject {
@@ -609,6 +640,7 @@ $story-sp-input-width:          50px;
                     width: calc(100% - #{$subject-width-minus}) !important;
                     height: 60px;
                     float: left;
+                    white-space: normal;
                     overflow: auto;
                 }