Release v2.12.0

Merge pull request #203 from ifad/fix/wiki-pagination
fix pagination overlapping wiki content
2020-08-01 15:40:11 +01:00 · 2020-08-01 15:31:52 +01:00 · 2020-07-31 16:11:49 +02:00 · 2020-07-16 19:57:45 +01:00 · 2020-07-16 00:39:13 +00:00 · 2020-06-23 20:57:48 +01:00
99 changed files with 9344 additions and 4712 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+  "extends": "standard",
+  "globals": {
+    "$": "readonly",
+    "localStorage": "readonly",
+  },
+  "ignorePatterns": [
+    "/javascripts/",
+  ],
+};
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,33 @@
+name: Run linters
+
+on:
+  push:
+    branches:
+      - 'master'
+      - 'v*.*'
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-18.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: "10.x"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Eslint
+        run: npm run lint:js
+
+      - name: Stylelint
+        run: npm run lint:sass
+
+      - name: Check build
+        run: npm run build
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 /src/sass/_custom-variables.scss
 /.sublime-grunt.cache
 /images/logo
+/.stylelintcache
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  "src/**/*.js": files => [
+    `eslint "${files.join('" "')}"`,
+    'grunt js',
+    'git add javascripts/'
+  ],
+  "src/**/*.scss": files => [
+    `stylelint "${files.join('" "')}"`,
+    'grunt css',
+    'git add stylesheets/ plugins/'
+  ],
+}
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -1,178 +0,0 @@
-scss_files: "src/sass/**/*.scss"
-
-exclude: 'src/sass/lib/**'
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BorderZero:
-    enabled: true
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: true
-
-  DuplicateProperty:
-    enabled: true
-    ignore_consecutive:
-      - word-break
-
-  ElsePlacement:
-    enabled: true
-
-  EmptyLineBetweenBlocks:
-    enabled: true
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short
-
-  HexNotation:
-    enabled: true
-    style: lowercase
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: false
-
-  ImportantRule:
-    enabled: true
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    character: space
-    width: 2
-
-  LeadingZero:
-    enabled: true
-    style: exclude_zero
-
-  MergeableSelector:
-    enabled: false
-
-  NestingDepth:
-    enabled: true
-    max_depth: 6
-
-  PlaceholderInExtend:
-    enabled: true
-
-  PropertySortOrder:
-    enabled: true
-    order: smacss
-    ignore_unspecified: true
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: []
-
-  PseudoElement:
-    enabled: true
-
-  QualifyingElement:
-    enabled: false
-
-  SelectorDepth:
-    enabled: true
-    max_depth: 5
-
-  SelectorFormat:
-    enabled: false
-
-  Shorthand:
-    enabled: true
-
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: true
-
-  SpaceAfterComma:
-    enabled: true
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceAfterVariableName:
-    enabled: true
-
-  SpaceAroundOperator:
-    enabled: true
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingWhitespace:
-    enabled: true
-
-  TrailingZero:
-    enabled: true
-
-  TransitionAll:
-    enabled: true
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VendorPrefix:
-    enabled: true
-
-  ZeroUnit:
-    enabled: true
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -0,0 +1,498 @@
+module.exports = {
+  'ignoreFiles': [
+    'src/sass/lib/**'
+  ],
+  'plugins': [
+    'stylelint-order',
+    'stylelint-scss'
+  ],
+  'rules': {
+    'at-rule-name-case': 'lower',
+    'at-rule-name-space-after': 'always-single-line',
+    'at-rule-no-vendor-prefix': true,
+    'at-rule-semicolon-newline-after': 'always',
+    'at-rule-semicolon-space-before': 'never',
+    'block-closing-brace-empty-line-before': 'never',
+    'block-closing-brace-newline-after': [
+      'always',
+      {
+        'ignoreAtRules': [
+          'if',
+          'else'
+        ]
+      }
+    ],
+    'block-closing-brace-newline-before': 'always-multi-line',
+    'block-closing-brace-space-before': 'always-single-line',
+    'block-no-empty': true,
+    'block-opening-brace-newline-after': 'always-multi-line',
+    'block-opening-brace-space-after': 'always-single-line',
+    'block-opening-brace-space-before': 'always-multi-line',
+    'color-hex-case': 'lower',
+    'color-hex-length': 'short',
+    'color-no-invalid-hex': true,
+    'comment-no-empty': true,
+    'comment-whitespace-inside': 'always',
+    'custom-property-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'declaration-bang-space-after': 'never',
+    'declaration-bang-space-before': 'always',
+    'declaration-block-no-duplicate-properties': [
+      true,
+      {
+        'ignoreProperties': [
+          'word-break',
+        ]
+      }
+    ],
+    'declaration-block-no-redundant-longhand-properties': true,
+    'declaration-block-no-shorthand-property-overrides': true,
+    'declaration-block-semicolon-newline-after': 'always-multi-line',
+    'declaration-block-semicolon-space-after': 'always-single-line',
+    'declaration-block-semicolon-space-before': 'never',
+    'declaration-block-trailing-semicolon': 'always',
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    'declaration-no-important': true,
+    'font-family-no-duplicate-names': true,
+    'function-calc-no-unspaced-operator': true,
+    'function-comma-newline-after': 'always-multi-line',
+    'function-comma-newline-before': 'never-multi-line',
+    'function-comma-space-after': 'always-single-line',
+    'function-comma-space-before': 'never',
+    'function-linear-gradient-no-nonstandard-direction': true,
+    'function-max-empty-lines': 1,
+    'function-name-case': 'lower',
+    'function-parentheses-newline-inside': 'always-multi-line',
+    'function-parentheses-space-inside': 'never-single-line',
+    'function-url-no-scheme-relative': true,
+    'function-url-quotes': 'always',
+    'function-whitespace-after': 'always',
+    'indentation': 2,
+    'keyframe-declaration-no-important': true,
+    'length-zero-no-unit': true,
+    'max-nesting-depth': 7,
+    'media-feature-colon-space-after': 'always',
+    'media-feature-colon-space-before': 'never',
+    'media-feature-name-case': 'lower',
+    'media-feature-parentheses-space-inside': 'never',
+    'media-feature-range-operator-space-after': 'always',
+    'media-feature-range-operator-space-before': 'always',
+    'media-query-list-comma-newline-after': 'always-multi-line',
+    'media-query-list-comma-newline-before': 'never-multi-line',
+    'media-query-list-comma-space-after': 'always-single-line',
+    'media-query-list-comma-space-before': 'never',
+    'no-duplicate-at-import-rules': true,
+    'no-eol-whitespace': true,
+    'no-extra-semicolons': true,
+    'no-missing-end-of-source-newline': true,
+    'number-leading-zero': 'never',
+    'number-no-trailing-zeros': true,
+    'property-case': 'lower',
+    'property-no-unknown': true,
+    'property-no-vendor-prefix': true,
+    'selector-attribute-brackets-space-inside': 'never',
+    'selector-attribute-operator-space-after': 'never',
+    'selector-attribute-operator-space-before': 'never',
+    'selector-attribute-quotes': 'always',
+    'selector-combinator-space-after': 'always',
+    'selector-combinator-space-before': 'always',
+    'selector-descendant-combinator-no-non-space': true,
+    'selector-list-comma-newline-after': 'always',
+    'selector-list-comma-newline-before': 'never-multi-line',
+    'selector-list-comma-space-before': 'never',
+    'selector-max-compound-selectors': 5,
+    'selector-max-empty-lines': 0,
+    'selector-max-universal': 1,
+    'selector-no-qualifying-type': [
+      true,
+      {
+        'ignore': [
+          'attribute',
+          'class',
+          'id'
+        ]
+      }
+    ],
+    'selector-pseudo-class-case': 'lower',
+    'selector-pseudo-class-parentheses-space-inside': 'never',
+    'selector-pseudo-element-case': 'lower',
+    'selector-pseudo-element-colon-notation': 'double',
+    'selector-type-case': 'lower',
+    'shorthand-property-no-redundant-values': true,
+    'string-no-newline': true,
+    'string-quotes': 'double',
+    'unit-case': 'lower',
+    'unit-no-unknown': true,
+    'value-list-comma-newline-before': 'never-multi-line',
+    'value-list-comma-space-after': 'always-single-line',
+    'value-list-comma-space-before': 'never',
+    'value-list-max-empty-lines': 1,
+    'value-no-vendor-prefix': true,
+
+    'order/order': [
+      [
+        'custom-properties',
+        'dollar-variables',
+        'declarations',
+        'rules'
+      ]
+    ],
+    'order/properties-order': [
+      {
+        'properties': [
+          'content',
+          'quotes'
+        ]
+      },
+      {
+        'properties': [
+          'display',
+          'visibility'
+        ]
+      },
+      {
+        'properties': [
+          'position',
+          'z-index',
+          'top',
+          'right',
+          'bottom',
+          'left'
+        ]
+      },
+      {
+        'properties': [
+          'box-sizing'
+        ]
+      },
+      {
+        'properties': [
+          'grid',
+          'grid-area',
+          'grid-auto-columns',
+          'grid-auto-flow',
+          'grid-auto-rows',
+          'grid-column',
+          'grid-column-end',
+          'grid-column-gap',
+          'grid-column-start',
+          'grid-gap',
+          'grid-row',
+          'grid-row-end',
+          'grid-row-gap',
+          'grid-row-start',
+          'grid-template',
+          'grid-template-areas',
+          'grid-template-columns',
+          'grid-template-rows'
+        ]
+      },
+      {
+        'properties': [
+          'flex',
+          'flex-basis',
+          'flex-direction',
+          'flex-flow',
+          'flex-grow',
+          'flex-shrink',
+          'flex-wrap',
+          'box-decoration-break',
+          'align-content',
+          'align-items',
+          'align-self',
+          'justify-content',
+          'order'
+        ]
+      },
+      {
+        'properties': [
+          'width',
+          'min-width',
+          'max-width',
+          'height',
+          'min-height',
+          'max-height'
+        ]
+      },
+      {
+        'properties': [
+          'margin',
+          'margin-top',
+          'margin-right',
+          'margin-bottom',
+          'margin-left'
+        ]
+      },
+      {
+        'properties': [
+          'padding',
+          'padding-top',
+          'padding-right',
+          'padding-bottom',
+          'padding-left'
+        ]
+      },
+      {
+        'properties': [
+          'float',
+          'clear'
+        ]
+      },
+      {
+        'properties': [
+          'overflow',
+          'overflow-x',
+          'overflow-y'
+        ]
+      },
+      {
+        'properties': [
+          'clip',
+          'zoom'
+        ]
+      },
+      {
+        'properties': [
+          'columns',
+          'column-gap',
+          'column-fill',
+          'column-rule',
+          'column-span',
+          'column-count',
+          'column-width'
+        ]
+      },
+      {
+        'properties': [
+          'table-layout',
+          'empty-cells',
+          'caption-side',
+          'border-spacing',
+          'border-collapse'
+        ]
+      },
+      {
+        'properties': [
+          'list-style',
+          'list-style-position',
+          'list-style-type',
+          'list-style-image'
+        ]
+      },
+      {
+        'properties': [
+          'transform',
+          'transform-origin',
+          'transform-style',
+          'backface-visibility',
+          'perspective',
+          'perspective-origin'
+        ]
+      },
+      {
+        'properties': [
+          'transition',
+          'transition-property',
+          'transition-duration',
+          'transition-timing-function',
+          'transition-delay'
+        ]
+      },
+      {
+        'properties': [
+          'animation',
+          'animation-name',
+          'animation-duration',
+          'animation-play-state',
+          'animation-timing-function',
+          'animation-delay',
+          'animation-iteration-count',
+          'animation-direction'
+        ]
+      },
+      {
+        'properties': [
+          'border',
+          'border-top',
+          'border-right',
+          'border-bottom',
+          'border-left',
+          'border-width',
+          'border-top-width',
+          'border-right-width',
+          'border-bottom-width',
+          'border-left-width'
+        ]
+      },
+      {
+        'properties': [
+          'border-style',
+          'border-top-style',
+          'border-right-style',
+          'border-bottom-style',
+          'border-left-style'
+        ]
+      },
+      {
+        'properties': [
+          'border-radius',
+          'border-top-left-radius',
+          'border-top-right-radius',
+          'border-bottom-left-radius',
+          'border-bottom-right-radius'
+        ]
+      },
+      {
+        'properties': [
+          'border-color',
+          'border-top-color',
+          'border-right-color',
+          'border-bottom-color',
+          'border-left-color'
+        ]
+      },
+      {
+        'properties': [
+          'outline',
+          'outline-color',
+          'outline-offset',
+          'outline-style',
+          'outline-width'
+        ]
+      },
+      {
+        'properties': [
+          'stroke-width',
+          'stroke-linecap',
+          'stroke-dasharray',
+          'stroke-dashoffset',
+          'stroke'
+        ]
+      },
+      {
+        'properties': [
+          'opacity'
+        ]
+      },
+      {
+        'properties': [
+          'background',
+          'background-color',
+          'background-image',
+          'background-repeat',
+          'background-position',
+          'background-size',
+          'box-shadow',
+          'fill'
+        ]
+      },
+      {
+        'properties': [
+          'color'
+        ]
+      },
+      {
+        'properties': [
+          'font',
+          'font-family',
+          'font-size',
+          'font-size-adjust',
+          'font-stretch',
+          'font-effect',
+          'font-style',
+          'font-variant',
+          'font-weight'
+        ]
+      },
+      {
+        'properties': [
+          'font-emphasize',
+          'font-emphasize-position',
+          'font-emphasize-style'
+        ]
+      },
+      {
+        'properties': [
+          'letter-spacing',
+          'line-height',
+          'word-spacing'
+        ]
+      },
+      {
+        'properties': [
+          'text-align',
+          'text-align-last',
+          'text-decoration',
+          'text-indent',
+          'text-justify',
+          'text-overflow',
+          'text-overflow-ellipsis',
+          'text-overflow-mode',
+          'text-rendering',
+          'text-outline',
+          'text-shadow',
+          'text-transform',
+          'text-wrap',
+          'word-wrap',
+          'word-break'
+        ]
+      },
+      {
+        'properties': [
+          'text-emphasis',
+          'text-emphasis-color',
+          'text-emphasis-style',
+          'text-emphasis-position'
+        ]
+      },
+      {
+        'properties': [
+          'vertical-align',
+          'white-space',
+          'hyphens'
+        ]
+      },
+      {
+        'properties': [
+          'src'
+        ]
+      },
+      {
+        'properties': [
+          'tab-size',
+          'counter-reset',
+          'counter-increment',
+          'resize',
+          'cursor',
+          'pointer-events',
+          'speak',
+          'user-select',
+          'nav-index',
+          'nav-up',
+          'nav-right',
+          'nav-down',
+          'nav-left'
+        ]
+      }
+    ],
+
+    'scss/at-else-closing-brace-newline-after': 'always-last-in-chain',
+    'scss/at-else-closing-brace-space-after': 'always-intermediate',
+    'scss/at-else-empty-line-before': 'never',
+    'scss/at-else-if-parentheses-space-before': 'always',
+    'scss/at-function-parentheses-space-before': 'never',
+    'scss/at-function-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/at-if-closing-brace-newline-after': 'always-last-in-chain',
+    'scss/at-if-closing-brace-space-after': 'always-intermediate',
+    'scss/at-import-no-partial-leading-underscore': true,
+    'scss/at-mixin-argumentless-call-parentheses': 'never',
+    'scss/at-mixin-parentheses-space-before': 'never',
+    'scss/at-mixin-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/declaration-nested-properties-no-divided-groups': true,
+    'scss/dollar-variable-colon-space-before': 'never',
+    'scss/dollar-variable-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/operator-no-unspaced': true,
+    'scss/percent-placeholder-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/selector-no-redundant-nesting-selector': true,
+  }
+};
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,15 +0,0 @@
-dist: trusty
-language: node_js
-node_js:
-  - 8
-cache:
-  directories:
-    - node_modules
-before_install:
-  - rvm install 2.2
-  - rvm use 2.2 --fuzzy
-install:
-  - gem install scss_lint
-  - npm install
-script:
-  - npm run lint --silent
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -6,7 +6,13 @@ module.exports = function (grunt) {
      options: {
        implementation: require('node-sass'),
        sourceMap: false,
-        outputStyle: 'compressed'
+        outputStyle: 'compressed',
+        functions: {
+          'inline-svg': require('sass-inline-svg')('./svg', {
+            optimize: true,
+            encodingFormat: 'uri'
+          })
+        }
      },

      theme: {
@@ -32,7 +38,7 @@ module.exports = function (grunt) {
    postcss: {
      options: {
        processors: [
-          require('autoprefixer')({ browsers: 'last 2 versions' })
+          require('autoprefixer')()
        ]
      },

--- a/README.md
+++ b/README.md
@@ -2,13 +2,13 @@

 A free Redmine theme for modern browsers.

-![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![Build Status](https://travis-ci.org/mrliptontea/PurpleMine2.svg?branch=master)](https://travis-ci.org/mrliptontea/PurpleMine2) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
+![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) ![Run linters](https://github.com/mrliptontea/PurpleMine2/workflows/Run%20linters/badge.svg) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues)

 ---

 ![Screenshot](https://github.com/mrliptontea/PurpleMine2/raw/master/screenshots/issues.png)

-Compatible with Redmine 2.6+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
+Compatible with Redmine 3.0+ and browsers: IE10+/Edge, 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.

@@ -56,6 +56,110 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe

 ## Changelog

+v2.12.0 (2020-08-01):
+
+* Fixed #196 and #199: text wrapping in certain column types.
+* Merged #203: fixed pagination overlapping wiki content.
+
+v2.11.0 (2020-05-08):
+
+* Fixed #179: full screen mode issues when using redmine_wysiwyg_editor plugin.
+* Fixed #177: changed styling for icon-only buttons to resolve weird behavior on hover.
+* Added `$icon-width` variable.
+* Added margin in some places like after buttons, avatars.
+* Changed tooltip background to black.
+* Changed top menu styles.
+* Restored `$color-priorities` variable, `false` by default.
+* Added `parse-length($value, $side)` function for extracting length/width from margin/padding/border.
+* Fixed checkbox cell padding when issue table borders are enabled.
+* Added table icon to jstoolbar styles.
+* Refactored icons code.
+* Improved styles for [RedmineUP](https://www.redmineup.com/pages/plugins) plugins (Agile, Checklists, CRM, Tags).
+* Improved vertical alignment of certain form elements.
+* Improved styles for sortable elements.
+* Added new `.inline-flex` class.
+* Improved styles for [Redmine Banner](https://github.com/akiko-pusu/redmine_banner) plugin.
+
+v2.10.2 (2020-04-09):
+
+* Fixed #175: couldn't edit note when it's URL target.
+* Improved styling of some inline edit forms.
+
+v2.10.1 (2020-04-06):
+
+* Fixed #160: highlight color in jQuery UI menu, most notably in checklist plugin.
+
+v2.10.0 (2020-04-05):
+
+* Fixed #172 Collapsed/expended icons for completed versions.
+* Fixed #171 "Display" label in Gantt option.
+* Fixed #170 radio buttons in projects options.
+* Fixed #169 styles in the spent time tab.
+* Fixed #164: apply responsive overrides more generally
+* Fixed #159: wrapping long text in issue attributes.
+* Fixed #150: styling for query totals and expander in Agile plugin.
+* Fixed #148: full screen view for Dashboard plugin.
+* Fixed a "timeline" positioning in issue notes/changes.
+* Changed lightness of shades 50 and 950.
+* Changed loader styles.
+* Changed rouge syntax highlighter color scheme.
+
+v2.9.1 (2020-02-22):
+
+* Merged fix #155: $.load function removed from jQuery.
+* Fixed badge positioning in roadmap screen.
+
+v2.9.0 (2020-01-30):
+
+* Fixed #141: improved styling for issue edit form.
+* Fixed #142: TOC assumes `left` by default, also added new variables to control how it looks.
+* Fixed #143: `$main-menu-bg-hover` is now being used.
+* Resolved #144: added `$main-menu-bg-active` variable.
+* Resolved #145: added `$table-list-header-bg` variable.
+* Fixed #147: corrected forum edit attached files icon.
+* Fixed #153: improved styling for `label.block`.
+* Added styling for clear query button.
+* Improved responsive sidebar menu layout.
+
+v2.8.0 (2019-08-13):
+
+* Resolved #132: fixed spacing for headers on roadmap pages.
+* Merged fix #136: broken layout with large image attachment.
+
+v2.7.0 (2019-06-13):
+
+* Resolved #124: added support for [issue-id](http://projects.andriylesyuk.com/projects/issue-id/) plugin.
+
+v2.6.0 (2019-06-13):
+
+* Resolved #121: added support for [redmine_wiki_page_tree](https://github.com/ledsun/redmine_wiki_page_tree) plugin.
+
+v2.5.0 (2019-06-05):
+
+* Fixed #117, #118 and added many improvements to the responsive layout.
+
+v2.4.0 (2019-06-02):
+
+* Synchronized most application styles with Redmine's default theme.
+* Fixed #115: color overdue date in issue lists.
+
+v2.3.1 (2019-05-09):
+
+* Fixed #112: improved highlight contrast in text diffs.
+
+v2.3.0 (2019-05-09):
+
+* Fixed #107: nested lists in the sidebar via [Additionals](https://www.redmine.org/plugins/additionals) plugin.
+
+v2.2.0 (2019-04-09):
+
+* Fixed #101, #102: tooltip positioning
+
+v2.1.1 (2019-03-23):
+
+* Fixed sidebar toggler style when fixed layout is enabled
+* Fixed contextual dropdown padding in mobile view
+
 v1.11.0 (2019-03-22):

 * Backported fixes from v2:
@@ -72,6 +176,36 @@ v1.11.0 (2019-03-22):
  * Improved Redmine 4.0 compatibility
  * Updated Font Awesome icons to 4.7.0

+v2.1.0 (2019-03-22):
+
+* Added CSS grid layout support (off by default because of IE support)
+* Fixed styling of some flash messages
+* Fixed horizontal scrollbar appearing when sidebar is on the right
+* Fixed footer being mispositioned in Agile charts
+* Improved support for [Redmine Tags](https://www.redmineup.com/pages/plugins/tags) plugin
+* Fixed positioning of admin menu icons for some plugins
+* Added separator line between news on the news list
+* Fixed #93: Agile chart expanding indefinitely when Additional "Go to top" link is enabled
+* Fixed #94: subtasks indentation
+* Improved progress bar styling, avatar positioning, WYSIWYG button styling, wiki preview font sizes
+
+v2.0.2 (2019-03-20):
+
+* Fixed #89: [RM+ custom menu](http://rmplus.pro/en/redmine/plugins/custom_menu) breaking the layout
+
+v2.0.1 (2019-03-17):
+
+* Fixed #90: regression in some sidebar layouts
+* Removed reduntant `abbr[title]` styles
+
+v2.0 (2019-03-13):
+
+* Refreshed, modernized look & feel
+* Added priority icons
+* Removed `$color-priorities` setting and styles
+* Improved Redmine 4.0 compatibility
+* Updated Font Awesome icons to 4.7.0
+
 v1.10.0 (2019-03-12):

 * Fixed #86: added support for redmine_hearts plugin
--- a/images/draft-pl.png
+++ b/images/draft-pl.png
--- a/images/draft.png
+++ b/images/draft.png
--- a/javascripts/theme.js
+++ b/javascripts/theme.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "PurpleMine2",
+  "name": "purplemine",
  "description": "A free Redmine 2.6+ theme written in SCSS",
  "keywords": [
    "redmine",
@@ -20,27 +20,41 @@
  "scripts": {
    "build": "grunt",
    "watch": "grunt watch",
-    "lint": "standard && scss-lint"
+    "lint:js": "eslint src/javascripts/",
+    "lint:sass": "stylelint src/sass/**/*.scss",
+    "lint": "npm run -S lint:js && npm run -S lint:sass"
  },
  "dependencies": {
-    "autoprefixer": "^9.4.8",
-    "grunt": "^1.0.4",
-    "grunt-contrib-uglify": "^4.0.0",
+    "autoprefixer": "^9.8.0",
+    "grunt": "^1.1.0",
+    "grunt-contrib-uglify": "^4.0.1",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-postcss": "^0.9.0",
-    "grunt-sass": "^3.0.2",
-    "node-sass": "^4.11.0"
+    "grunt-sass": "^3.1.0",
+    "node-sass": "^4.14.1",
+    "sass-inline-svg": "^1.2.3"
  },
  "devDependencies": {
-    "standard": "^12.0.1"
+    "eslint": "^7.1.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.6",
+    "stylelint": "^13.5.0",
+    "stylelint-order": "^4.0.0",
+    "stylelint-scss": "^3.17.2"
  },
-  "standard": {
-    "globals": [
-      "$",
-      "localStorage"
-    ],
-    "ignore": [
-      "/javascripts"
-    ]
+  "browserslist": [
+    "last 2 versions",
+    "> 1%",
+    "not dead"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged --relative"
+    }
  }
 }
--- a/plugins/redmine_backlogs/global.css
+++ b/plugins/redmine_backlogs/global.css
--- a/plugins/redmine_backlogs/jquery/jquery-ui.css
+++ b/plugins/redmine_backlogs/jquery/jquery-ui.css
--- a/plugins/redmine_backlogs/jquery/jquery.multiselect.css
+++ b/plugins/redmine_backlogs/jquery/jquery.multiselect.css
@@ -1 +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:.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{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.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:.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}
+.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:.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{box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.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 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:.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #dadce7;font-weight:600;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}
--- a/plugins/redmine_backlogs/jquery/jquery.qtip.css
+++ b/plugins/redmine_backlogs/jquery/jquery.qtip.css
@@ -1 +1 @@
-.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);position:relative;padding:10px;overflow:hidden;border:1px solid #ccc;background-color:#fff;color:#555;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;background:transparent}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);position:relative;padding:10px;overflow:hidden;border:1px solid #d1d3e0;background-color:#fff;color:#3e425a;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;border-color:#d1d3e0;background:transparent;background-color:#fff}
--- a/plugins/redmine_backlogs/master_backlog.css
+++ b/plugins/redmine_backlogs/master_backlog.css
--- a/plugins/redmine_backlogs/taskboard.css
+++ b/plugins/redmine_backlogs/taskboard.css
--- a/screenshots/calendar.png
+++ b/screenshots/calendar.png
--- a/screenshots/issue-page.png
+++ b/screenshots/issue-page.png
--- a/screenshots/issues.png
+++ b/screenshots/issues.png
--- a/screenshots/new-issue.png
+++ b/screenshots/new-issue.png
--- a/screenshots/redmine-backlogs.png
+++ b/screenshots/redmine-backlogs.png
--- a/src/javascripts/modules/HistoryTabs.js
+++ b/src/javascripts/modules/HistoryTabs.js
@@ -55,7 +55,7 @@ PurpleMine.HistoryTabs = (function () {

    this._ = translations[this.lang]

-    if (this.$history.length > 0) {
+    if (this.$history.length > 0 && $('#history > h3').length > 0) {
      buildTabs()
      markFirstOfTypes()
    }
--- a/src/javascripts/modules/MenuCollapse.js
+++ b/src/javascripts/modules/MenuCollapse.js
@@ -47,6 +47,7 @@ PurpleMine.MenuCollapse = (function () {
    }

    for (var menu in this.menus) {
+      // eslint-disable-next-line no-prototype-builtins
      if (this.menus.hasOwnProperty(menu) && this.menus[menu].$el.length > 0) {
        handleMenu(menu)
      }
--- a/src/javascripts/modules/RevisionGraph.js
+++ b/src/javascripts/modules/RevisionGraph.js
@@ -52,6 +52,7 @@ PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
  var revisionDotOverlay

  $.each(commits, function (index, commit) {
+    // eslint-disable-next-line no-prototype-builtins
    if (!commit.hasOwnProperty('space')) {
      commit.space = 0
    }
@@ -72,6 +73,7 @@ PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
      parentCommit = commitsByScmid[parentScmid]

      if (parentCommit) {
+        // eslint-disable-next-line no-prototype-builtins
        if (!parentCommit.hasOwnProperty('space')) {
          parentCommit.space = 0
        }
--- a/src/javascripts/modules/SidebarToggler.js
+++ b/src/javascripts/modules/SidebarToggler.js
@@ -44,7 +44,7 @@ PurpleMine.SidebarToggler = (function () {

    // Fix issue with context menu position
    if (this.$main.css('position') === 'relative') {
-      $(window).load(function () {
+      $(window).on('load', function () {
        $('#context-menu').appendTo('#wrapper3')
      })
    }
--- a/src/sass/_functions.scss
+++ b/src/sass/_functions.scss
@@ -0,0 +1,4 @@
+// Functions
+// --------------------------------------------------
+
+@import "functions/parse-length";
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -2,19 +2,21 @@
 // Variables
 // --------------------------------------------------

+// stylelint-disable indentation

 //== Some key attributes
 //

 $fixed-layout:                  false !default;
+$css-grid-layout:               false !default;
 $flexbox-layout:                true !default;
 $sidebar-position:              left !default;
-$color-priorities:              true !default;
+$clean-issues:                  true !default;
 $color-trackers:                true !default;
-$colored-issue:                 true !default;
 $color-status:                  true !default;
+$color-priorities:              false !default;
+$priority-icon:                 true !default;
 $use-gravatars:                 true !default;
-$use-font-awesome:              true !default;
 $use-logo:                      false !default;
 $use-retina-logo:               false !default;
 $use-project-tiles:             true !default;
@@ -22,59 +24,117 @@ $issue-subject-large:           true !default;
 $enable-sidebar-toggler:        true !default;
 $wiki-page-more-vertical-space: true !default;
 $top-menu-collapse:             false !default;
+$agile-board-customize:         true !default;


 //== Colors
 //

-$gray-base:                     #808080 !default;
-$gray-darkest:                  darken($gray-base, 40%) !default;
-$gray-darker:                   darken($gray-base, 33%) !default;
-$gray-dark:                     darken($gray-base, 17%) !default;
-$gray:                          $gray-base !default;
-$gray-light:                    lighten($gray-base, 17%) !default;
-$gray-lighter:                  lighten($gray-base, 35%) !default;
-$gray-lightest:                 lighten($gray-base, 46%) !default;
+$blue:                          #0065ff !default;
+$indigo:                        #4e65e5 !default;
+$purple:                        #614ba6 !default;
+$pink:                          #eb5286 !default;
+$red:                           #e5123d !default;
+$orange:                        #fc8c12 !default;
+$yellow:                        #ffc107 !default;
+$green:                         #029934 !default;
+$teal:                          #00b3ad !default;

-$brand-primary:                 #584492 !default;
-$brand-text:                    #fff !default;
-$brand-accent:                  #deddef !default;
+$white:                         #fff !default;
+$black:                         #000 !default;
+$gray:                          hsl(hue($indigo), 20%, 85%) !default;

-$brand-success:                 #019851 !default;
-$brand-info:                    #409ae3 !default;
-$brand-warning:                 #ed820c !default;
-$brand-danger:                  #e74c3c !default;
+$shade-map: (
+  50:                           87.5%,
+  100:                          80%,
+  200:                          65%,
+  300:                          40%,
+  400:                          20%,
+  500:                          0%,
+  600:                          20%,
+  700:                          40%,
+  800:                          65%,
+  900:                          80%,
+  950:                          87.5%
+) !default;

-$state-success:                 #b5fbb7 !default;
-$state-info:                    #97cefb !default;
-$state-warning:                 #ffd699 !default;
-$state-danger:                  #f7a6a4 !default;
+@function shade($color, $shade: 500) {
+  $mixer: if($shade < 500, $white, $black);
+  $saturation: if($shade < 500, 0, ($shade - 500) / 20);
+  @return saturate(mix($mixer, $color, map-get($shade-map, $shade)), $saturation);
+}
+
+$gray-50:                       shade($gray, 50) !default;
+$gray-100:                      shade($gray, 100) !default;
+$gray-200:                      shade($gray, 200) !default;
+$gray-300:                      shade($gray, 300) !default;
+$gray-400:                      shade($gray, 400) !default;
+$gray-500:                      $gray !default;
+$gray-600:                      shade($gray, 600) !default;
+$gray-700:                      shade($gray, 700) !default;
+$gray-800:                      shade($gray, 800) !default;
+$gray-900:                      shade($gray, 900) !default;
+$gray-950:                      shade($gray, 950) !default;
+
+$brand-primary:                 $purple !default;
+$brand-text:                    $white !default;
+$brand-accent:                  shade($brand-primary, 100) !default;
+
+$brand-success:                 $green !default;
+$brand-info:                    $blue !default;
+$brand-warning:                 $orange !default;
+$brand-danger:                  $red !default;
+
+$state-success:                 shade($green, 100) !default;
+$state-info:                    shade($blue, 100) !default;
+$state-warning:                 shade($orange, 100) !default;
+$state-danger:                  shade($red, 100) !default;


 //== Scaffolding
 //

-$body-bg:                       #fff !default;
-$text-color:                    $gray-dark !default;
+$body-bg:                       $white !default;
+$text-color:                    $gray-800 !default;

-$link-color:                    #4183c4 !default;
-$link-hover-color:              darken($link-color, 10%) !default;
+$link-color:                    shade($blue, 600) !default;
+$link-hover-color:              $blue !default;
 $link-hover-decoration:         underline !default;
 $link-closed-decoration:        line-through !default;
-$link-color-issue-closed:       $gray !default;
-$link-color-project-closed:     $gray !default;
-$link-color-user-locked:        $gray !default;
+$link-color-issue-closed:       $gray-700 !default;
+$link-color-project-closed:     $gray-700 !default;
+$link-color-user-locked:        $gray-700 !default;


 //== Typography
 //

-$font-family-sans-serif:        "Helvetica Neue", Helvetica, Arial, freesans, sans-serif !default;
+$font-family-sans-serif:        system-ui,
+                                /* macOS 10.11-10.12 */ -apple-system,
+                                /* Windows 6+ */ Segoe UI,
+                                /* Android 4+ */ Roboto,
+                                /* Ubuntu 10.10+ */ Ubuntu,
+                                /* Gnome 3+ */ Cantarell,
+                                /* KDE Plasma 5+ */ Noto Sans,
+                                /* fallback */ sans-serif,
+                                /* macOS emoji */ "Apple Color Emoji",
+                                /* Windows emoji */ "Segoe UI Emoji",
+                                /* Windows emoji */ "Segoe UI Symbol",
+                                /* Linux emoji */ "Noto Color Emoji" !default;
+
+$font-family-monospace:         /* macOS 10.10+ */ Menlo,
+                                /* Windows 6+ */ Consolas,
+                                /* Android 4+ */ Roboto Mono,
+                                /* Ubuntu 10.10+ */ Ubuntu Monospace,
+                                /* KDE Plasma 5+ */ Noto Mono,
+                                /* KDE Plasma 4+ */ Oxygen Mono,
+                                /* Linux/OpenOffice fallback */ Liberation Mono,
+                                /* fallback */ monospace !default;

-$font-family-monospace:         Consolas, "Liberation Mono", Menlo, "Courier New", Courier, monospace !default;
 $font-family-base:              $font-family-sans-serif !default;
 $font-weight-normal:            normal !default;
-$font-weight-bold:              bold !default;
+$font-weight-semi-bold:         500 !default;
+$font-weight-bold:              600 !default;

 $font-size-base:                14px !default;
 $font-size-large:               1.285em !default;
@@ -94,22 +154,28 @@ $line-height-base:              1.428571429 !default; // 20/14
 $line-height-large:             1.33 !default;
 $line-height-computed:          floor(($font-size-base * $line-height-base)) !default; // ~20px

-$headings-font-weight:          700 !default;
+$headings-font-weight:          600 !default;
 $headings-line-height:          1.4 !default;
-$headings-anchor-color:         $gray-lighter !default;
-$headings-anchor-color-active:  $gray-light !default;
+$headings-anchor-color:         $gray-400 !default;
+$headings-anchor-color-active:  $gray-600 !default;


 //== Wiki
 //

-$wiki-text:                     #333 !default;
+$wiki-text:                     $gray-950 !default;
 $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
-$wiki-preview-bg:               #fcfcfc !default;
+$wiki-preview-bg:               $body-bg !default;

+$toc-bg:                        $gray-50 !default;
+$toc-border:                    $gray-300 !default;
+$toc-text:                      $text-color !default;
+$toc-link:                      $link-color !default;
+$toc-link-hover:                $link-hover-color !default;
+$toc-shadow:                    0 1px 3px rgba($black, .07) !default;
 $toc-active-link:               darken($link-color, 10%) !default;
-$toc-active-link-hover:         darken($toc-active-link, 10%) !default;
+$toc-active-link-hover:         shade($toc-active-link, 700) !default;
 $toc-active-border:             $link-color !default;


@@ -130,13 +196,13 @@ $border-radius-base:            3px !default;
 $border-radius-large:           4px !default;
 $border-radius-small:           2px !default;

-$hr-border:                     $gray-light !default;
-$abbr-border-color:             $gray-light !default;
-$blockquote-border-color:       rgba(#000, .15) !default;
+$hr-border:                     $gray-600 !default;
+$abbr-border-color:             $gray-600 !default;
+$blockquote-border-color:       rgba($black, .15) !default;

-$component-color:               $gray-dark !default;
-$component-bg:                  lighten($gray-lightest, 2%) !default;
-$component-border:              lighten($gray-lighter, 2%) !default;
+$component-color:               $text-color !default;
+$component-bg:                  $gray-50 !default;
+$component-border:              $gray-300 !default;

 $component-active-color:        $brand-text !default;
 $component-active-bg:           $brand-primary !default;
@@ -144,7 +210,10 @@ $component-active-border:       $brand-primary !default;

 $font-size-list:                .92em !default;

-$collapsible-animation-time:    .3s !default;
+$transition-time:               50ms !default;
+$transition-time-long:          150ms !default;
+
+$collapsible-animation-time:    300ms !default;
 $collapsible-max-height:        10000px !default;


@@ -154,44 +223,151 @@ $collapsible-max-height:        10000px !default;
 $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;

+$table-list-header-bg:          $body-bg !default;
 $table-list-header-border:      0 0 2px !default;
-$table-list-item-border:        0 0 1px !default;
+$table-list-item-border:        0 !default;
 $table-list-color-odd-rows:     true !default;
 $table-list-color-even-rows:    false !default;
-$table-list-highlight-rows:     false !default;
+$table-list-highlight-rows:     true !default;

 $table-bg:                      transparent !default;
-$table-accent-factor:           .03 !default;
-$table-hover-factor:            .03 !default;
-$table-bg-accent:               rgba(#000, $table-accent-factor) !default;
-$table-bg-hover:                rgba(#000, $table-hover-factor) !default;
+$table-accent-factor:           .15 !default;
+$table-hover-factor:            .4 !default;
+$table-bg-accent:               rgba($gray-500, $table-accent-factor) !default;
+$table-bg-hover:                rgba($gray-500, $table-hover-factor) !default;
 $table-bg-active:               $table-bg-hover !default;

-$table-border-color:            darken($body-bg, 13.5%) !default;
+$table-border-color:            $gray-300 !default;
+
+$table-color-odd-factor:        if($table-list-color-odd-rows, $table-accent-factor * .8, $table-accent-factor * .5) !default;
+$table-color-even-factor:       if($table-list-color-even-rows, $table-accent-factor * .8, $table-accent-factor * .5) !default;
+$table-color-hover-factor:      $table-hover-factor * .5 !default;
+$table-color-border-shade:      100 !default;
+
+
+//== Issue statuses
+//
+
+$status-default-bg:             $brand-primary !default;
+$status-default-color:          $brand-text !default;
+$status-default-colors-map: (
+  status-1: (
+    background:                 shade($blue, 500),
+    color:                      $white
+  ),
+  closed: (
+    background:                 shade($red, 500),
+    color:                      $white
+  )
+) !default;
+$status-custom-colors-map:      () !default;
+$status-colors-map:             map-merge($status-default-colors-map, $status-custom-colors-map);


 //== Trackers priorities
 //

-$priority-lowest-bg:            #dff4d0 !default;
-$priority-lowest-text:          #676 !default;
-$priority-lowest-link:          #096 !default;
+$priority-icon-size:            14px !default;
+$priority-icon-space:           5px !default;
+$priority-default-icons-map: (
+  lowest: (
+    icon:                       "priority-minor.svg",
+    color:                      $green
+  ),
+  low2: (
+    icon:                       "priority-lowest.svg",
+    color:                      mix($teal, $green)
+  ),
+  low3: (
+    icon:                       "priority-low.svg",
+    color:                      $teal
+  ),
+  default: (
+    icon:                       "priority-medium.svg",
+    color:                      $blue
+  ),
+  high5: (
+    icon:                       "priority-high.svg",
+    color:                      $purple
+  ),
+  high4: (
+    icon:                       "priority-high.svg",
+    color:                      $orange
+  ),
+  high3: (
+    icon:                       "priority-highest.svg",
+    color:                      mix($red, $orange)
+  ),
+  high2: (
+    icon:                       "priority-major.svg",
+    color:                      $red
+  ),
+  highest: (
+    icon:                       "priority-critical.svg",
+    color:                      shade($red, 600)
+  )
+) !default;
+$priority-custom-icons-map:     () !default;
+$priority-icons-map:            map-merge($priority-default-icons-map, $priority-custom-icons-map);

-$priority-default-bg:           #fff !default;
-$priority-default-text:         $text-color !default;
-$priority-default-link:         $link-color !default;
-
-$priority-high3-bg:             #d5eaff !default;
-$priority-high3-text:           #556 !default;
-$priority-high3-link:           #05a !default;
-
-$priority-high2-bg:             #ffe1d7 !default;
-$priority-high2-text:           #855 !default;
-$priority-high2-link:           #b04 !default;
-
-$priority-highest-bg:           #ffa5a5 !default;
-$priority-highest-text:         #944 !default;
-$priority-highest-link:         #a03 !default;
+$priority-default-color-map: (
+  lowest: (
+    border:                     shade($green, $table-color-border-shade),
+    background:                 $green,
+    color:                      $text-color,
+    link:                       shade($green, 700),
+  ),
+  low2: (
+    border:                     shade(mix($teal, $green), $table-color-border-shade),
+    background:                 mix($teal, $green),
+    color:                      $text-color,
+    link:                       shade(mix($teal, $green), 700),
+  ),
+  low3: (
+    border:                     shade($teal, $table-color-border-shade),
+    background:                 $teal,
+    color:                      $text-color,
+    link:                       shade($teal, 700),
+  ),
+  default: (
+    border:                     shade($blue, $table-color-border-shade),
+    background:                 $blue,
+    color:                      $text-color,
+    link:                       shade($blue, 700),
+  ),
+  high5: (
+    border:                     shade($purple, $table-color-border-shade),
+    background:                 $purple,
+    color:                      $text-color,
+    link:                       shade($purple, 700),
+  ),
+  high4: (
+    border:                     shade($orange, $table-color-border-shade),
+    background:                 $orange,
+    color:                      $text-color,
+    link:                       shade($orange, 700),
+  ),
+  high3: (
+    border:                     shade(mix($red, $orange), $table-color-border-shade),
+    background:                 mix($red, $orange),
+    color:                      $text-color,
+    link:                       shade(mix($red, $orange), 700),
+  ),
+  high2: (
+    border:                     shade($red, $table-color-border-shade),
+    background:                 $red,
+    color:                      $text-color,
+    link:                       shade($red, 700),
+  ),
+  highest: (
+    border:                     shade($red, $table-color-border-shade),
+    background:                 $red,
+    color:                      $text-color,
+    link:                       shade($red, 700),
+  )
+) !default;
+$priority-custom-color-map:     () !default;
+$priority-color-map:            map-merge($priority-default-color-map, $priority-custom-color-map);


 //== Trackers links
@@ -200,37 +376,37 @@ $priority-highest-link:         #a03 !default;
 $tracker-inline-padding:        1px 5px !default;
 $tracker-list-padding:          0 6px !default;

-$tracker-default-bg:            #668 !default;
-$tracker-default-text:          $brand-text !default;
+$tracker-default-bg:            $gray-700 !default;
+$tracker-default-text:          $white !default;

 $tracker-default-colors-map: (
  1: (
-    background:                 $brand-danger,
-    color:                      $brand-text
+    background:                 $red,
+    color:                      $white
  ),
  2: (
-    background:                 $brand-info,
-    color:                      $brand-text
+    background:                 $blue,
+    color:                      $white
  ),
  3: (
-    background:                 $brand-success,
-    color:                      $brand-text
+    background:                 $green,
+    color:                      $white
  ),
  4: (
-    background:                 $brand-primary,
-    color:                      $brand-text
+    background:                 $purple,
+    color:                      $white
  ),
  5: (
-    background:                 $brand-warning,
-    color:                      $brand-text
+    background:                 $orange,
+    color:                      $white
  ),
  6: (
-    background:                 mix($brand-success, $brand-info, 50%),
-    color:                      $brand-text
+    background:                 $teal,
+    color:                      $white
  ),
  7: (
-    background:                 mix($brand-primary, $brand-warning, 50%),
-    color:                      $brand-text
+    background:                 $indigo,
+    color:                      $white
  )
 ) !default;
 $tracker-custom-colors-map:     () !default;
@@ -240,32 +416,30 @@ $tracker-colors-map:            map-merge($tracker-default-colors-map, $tracker-
 //== Diffs
 //

-$diff-out-color:                #511 !default;
-$diff-out-bg:                   #fbb !default;
-$diff-out-bg-light:             rgba($diff-out-bg, .3) !default;
+$diff-out-bg:                   saturate(shade($red, 100), 50%) !default;
+$diff-out-bg-light:             rgba($diff-out-bg, .4) !default;

-$diff-in-color:                 #350 !default;
-$diff-in-bg:                    #afa !default;
-$diff-in-bg-light:              rgba($diff-in-bg, .3) !default;
+$diff-in-bg:                    saturate(shade($green, 100), 50%) !default;
+$diff-in-bg-light:              rgba($diff-in-bg, .4) !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;
+$journal-old-value-color:       saturate(shade($orange, 800), 25%) !default;
+$journal-old-value-bg:          saturate(shade($orange, 50), 50%) !default;
+$journal-new-value-color:       saturate(shade($green, 800), 25%) !default;
+$journal-new-value-bg:          saturate(shade($green, 50), 50%) !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;
+$changeset-added-color:         $green !default;
+$changeset-modified-color:      $orange !default;
+$changeset-copied-color:        $purple !default;
+$changeset-renamed-color:       $blue !default;
+$changeset-deleted-color:       $red !default;


 //== Buttons
@@ -280,44 +454,67 @@ $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;
+$btn-default-color:             $gray-900 !default;
+$btn-default-bg:                $gray-100 !default;
+$btn-default-border:            $gray-500 !default;
+$btn-default-icon-color:        $gray-700 !default;

-$btn-primary-color:             #fff !default;
-$btn-primary-bg:                $brand-info !default;
+$btn-primary-color:             $white !default;
+$btn-primary-bg:                $blue !default;
 $btn-primary-border:            $btn-primary-bg !default;

-$btn-success-color:             #fff !default;
-$btn-success-bg:                $brand-success !default;
+$btn-success-color:             $white !default;
+$btn-success-bg:                $green !default;
 $btn-success-border:            $btn-success-bg !default;


+//== Action icons
+//
+
+$icon-width:                    20px !default;
+$icon-opacity:                  .7 !default;
+$icon-hover-opacity:            1 !default;
+$icon-color-map: (
+  default: (
+    normal:                     shade($brand-info, 600),
+    hover:                      shade($brand-info, 500)
+  ),
+  success: (
+    normal:                     shade($brand-success, 600),
+    hover:                      shade($brand-success, 500)
+  ),
+  danger: (
+    normal:                     shade($brand-danger, 600),
+    hover:                      shade($brand-danger, 500)
+  )
+) !default;
+
+
 //== Highlights
 //

-$highlight-bg:                  #fff9c8 !default;
-$highlight-border:              #ccb37b !default;
-$highlight-text:                #755e40 !default;
-$highlight-link:                #005f97 !default;
+$highlight-bg:                  shade($yellow, 200) !default;
+$highlight-border:              shade($yellow, 600) !default;
+$highlight-text:                shade($yellow, 800) !default;
+$highlight-link:                mix($yellow, $link-color) !default;


 //== Forms
 //

-$input-bg:                      #fff !default;
-$input-bg-disabled:             $gray-lighter !default;
+$input-bg:                      $white !default;
+$input-bg-disabled:             $gray-300 !default;

-$input-color:                   $gray-dark !default;
-$input-border:                  #ccc !default;
+$input-color:                   $text-color !default;
+$input-border:                  $gray-500 !default;

 $input-border-radius:           $border-radius-small !default;
 $input-border-radius-large:     $border-radius-large !default;

-$input-border-focus:            $brand-primary !default;
+$input-border-focus:            saturate($brand-primary, 25%) !default;
 $input-border-focus-alpha:      .6 !default;
 $input-shadow-focus-alpha:      .2 !default;
-$input-color-placeholder:       #999 !default;
+$input-color-placeholder:       $gray-600 !default;

 $input-padding-vertical:        $btn-padding-vertical !default;
 $input-padding-horizontal:      8px !default;
@@ -328,11 +525,12 @@ $label-width:                   160px !default;
 $label-wide-width:              280px !default;
 $label-space:                   10px !default;

-$legend-color:                  $gray-dark !default;
-$legend-border-color:           #e5e5e5 !default;
+$legend-color:                  $gray-800 !default;
+$legend-border-color:           $gray-200 !default;

-$check-input-gutter:            20px !default;
+$check-input-gutter:            18px !default;
 $check-input-margin-vertical:   3px !default;
+$check-input-margin-btn-v:      7px !default;
 $check-input-margin-horizontal: 8px !default;

 $check-list-max-height:         20 * $line-height-computed;
@@ -341,10 +539,10 @@ $check-list-offset-top:         $input-padding-vertical + 1px;
 //== Top
 //

-$top-menu-bg:                   darken($brand-primary, 15%) !default;
-$top-menu-text:                 $brand-accent !default;
-$top-menu-link:                 $brand-accent !default;
-$top-menu-link-hover:           $brand-text !default;
+$top-menu-bg:                   shade($brand-primary, 700) !default;
+$top-menu-text:                 shade($brand-primary, 100) !default;
+$top-menu-link:                 shade($brand-primary, 100) !default;
+$top-menu-link-hover:           shade($brand-primary, 50) !default;

 $header-bg:                     $brand-primary !default;
 $header-text:                   $brand-text !default;
@@ -357,21 +555,21 @@ $header-title-line-height:      $line-height-computed * 1.5 !default;

 $responsive-header-height:      54px !default;

-$flyout-menu-bg:                darken($header-bg, 15%) !default;
-$flyout-menu-text:              #fff !default;
-$flyout-menu-link:              #fff !default;
-$flyout-menu-link-active-bg:    $header-bg !default;
-$flyout-menu-link-active:       #fff !default;
-$flyout-menu-header-bg:         darken($header-bg, 25%) !default;
-$flyout-menu-header-border:     darken($header-bg, 25%) !default;
-$flyout-menu-header-text:       #fff !default;
+$flyout-menu-bg:                shade($header-bg, 700) !default;
+$flyout-menu-text:              $white !default;
+$flyout-menu-link:              $white !default;
+$flyout-menu-link-active-bg:    shade($header-bg, 50) !default;
+$flyout-menu-link-active:       $text-color !default;
+$flyout-menu-header-bg:         shade($header-bg, 800) !default;
+$flyout-menu-header-border:     shade($header-bg, 800) !default;
+$flyout-menu-header-text:       $white !default;

 $quick-search-width:            200px !default;
-$quick-search-border:           darken($header-bg, 15%) !default;
-$quick-search-border-focus:     lighten($header-bg, 25%) !default;
+$quick-search-border:           shade($header-bg, 800) !default;
+$quick-search-border-focus:     shade($header-bg, 400) !default;
 $quick-search-box-width:        300px !default;
 $quick-search-dropdown-bg:      $body-bg !default;
-$quick-search-dropdown-border:  $gray-lighter !default;
+$quick-search-dropdown-border:  $gray-400 !default;

 $logo-image-width:              60px !default;
 $logo-image-height:             40px !default;
@@ -379,17 +577,18 @@ $logo-position-horizontal:      $header-padding-vertical !default;
 $logo-position-vertical:        center !default;
 $logo-space:                    floor($header-padding-vertical / 2) !default;

-$main-menu-bg:                  $gray-lightest !default;
-$main-menu-bg-hover:            $gray-lightest !default;
-$main-menu-link:                $gray-darker !default;
-$main-menu-link-active:         #000 !default;
-$main-menu-border:              $gray-lighter !default;
-$main-menu-shadow-hover:        $gray-light !default;
+$main-menu-bg:                  $gray-100 !default;
+$main-menu-bg-hover:            $gray-100 !default;
+$main-menu-bg-active:           transparent !default;
+$main-menu-link:                $gray-900 !default;
+$main-menu-link-active:         $black !default;
+$main-menu-border:              $gray-400 !default;
+$main-menu-shadow-hover:        $gray-600 !default;
 $main-menu-shadow-width:        3px !default;
 $main-menu-shadow-active:       $brand-primary !default;
 $main-menu-padding-vertical:    $padding-large-vertical !default;
 $main-menu-padding-horizontal:  5px !default;
-$main-menu-dropdown-bg:         lighten($main-menu-bg, 3%);
+$main-menu-dropdown-bg:         $gray-50;


 //== Pagination
@@ -398,21 +597,21 @@ $main-menu-dropdown-bg:         lighten($main-menu-bg, 3%);
 $pagination-padding-vertical:   $btn-padding-vertical !default;
 $pagination-padding-horizontal: 10px !default;

-$pagination-color:              $link-color !default;
-$pagination-bg:                 #fafafa !default;
-$pagination-border:             #ddd !default;
+$pagination-color:              $gray-900 !default;
+$pagination-bg:                 $gray-200 !default;
+$pagination-border:             $gray-200 !default;

-$pagination-hover-color:        $link-hover-color !default;
-$pagination-hover-bg:           $gray-lightest !default;
-$pagination-hover-border:       #bbb !default;
+$pagination-hover-color:        $gray-900 !default;
+$pagination-hover-bg:           $gray-300 !default;
+$pagination-hover-border:       $gray-300 !default;

-$pagination-active-color:       #fff !default;
+$pagination-active-color:       $brand-text !default;
 $pagination-active-bg:          $brand-primary !default;
 $pagination-active-border:      $brand-primary !default;

-$pagination-inactive-color:     #ccc !default;
-$pagination-inactive-bg:        #fff !default;
-$pagination-inactive-border:    #eee !default;
+$pagination-inactive-color:     $gray-500 !default;
+$pagination-inactive-bg:        $gray-50 !default;
+$pagination-inactive-border:    $gray-100 !default;


 //== Tabs
@@ -420,8 +619,9 @@ $pagination-inactive-border:    #eee !default;

 $tab-padding-vertical:          5px !default;
 $tab-padding-horizontal:        8px !default;
-$tab-border:                    $gray-lighter !default;
-$tab-hover-bg:                  $gray-lightest !default;
+$tab-border:                    $gray-500 !default;
+$tab-hover-bg:                  $gray-100 !default;
+$tab-hover-text:                $gray-950 !default;
 $tab-hover-border:              $tab-hover-bg !default;
 $tab-active-bg:                 $body-bg !default;
 $tab-active-text:               $text-color !default;
@@ -435,40 +635,47 @@ $sidebar-width:                 270px !default;
 $sidebar-padding-vertical:      $padding-base-vertical !default;
 $sidebar-padding-horizontal:    $padding-side !default;
 $sidebar-width-computed:        $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px !default;
-$sidebar-link-hover-bg:         $gray-lightest !default;
+$sidebar-link-hover-bg:         $gray-200 !default;
+$sidebar-link-hover-text:       $gray-900 !default;
 $sidebar-link-active-bg:        $body-bg !default;
-$sidebar-link-active-border:    $gray-lighter !default;
-$sidebar-link-active-side:      $brand-danger !default;
-$sidebar-link-active-text:      $gray-darkest !default;
+$sidebar-link-active-border:    $gray-400 !default;
+$sidebar-link-active-side:      $red !default;
+$sidebar-link-active-text:      $gray-950 !default;


 //== Flash messages (alerts)
 //

-$flash-success-bg:              #5cb85c !default;
-$flash-success-border:          darken($flash-success-bg, 5%) !default;
-$flash-success-text:            #fff !default;
-$flash-success-link:            #fff !default;
+$flash-success-bg:              shade($green, 400) !default;
+$flash-success-border:          shade($green, 500) !default;
+$flash-success-text:            $white !default;
+$flash-success-link:            $white !default;

-$flash-warning-bg:              #fde3a7 !default;
-$flash-warning-border:          darken($flash-warning-bg, 15%) !default;
-$flash-warning-text:            #b45e10 !default;
-$flash-warning-link:            #a0540e !default;
+$flash-info-bg:                 shade($blue, 100) !default;
+$flash-info-border:             shade($blue, 200) !default;
+$flash-info-text:               shade($blue, 800) !default;
+$flash-info-link:               shade($blue, 900) !default;

-$flash-error-bg:                #d9534f !default;
-$flash-error-border:            darken($flash-error-bg, 5%) !default;
-$flash-error-text:              #fff !default;
-$flash-error-link:              #fff !default;
+$flash-warning-bg:              shade($yellow, 200) !default;
+$flash-warning-border:          shade($yellow, 300) !default;
+$flash-warning-text:            shade($yellow, 800) !default;
+$flash-warning-link:            shade($yellow, 900) !default;
+
+$flash-error-bg:                $red !default;
+$flash-error-border:            shade($red, 600) !default;
+$flash-error-text:              $white !default;
+$flash-error-link:              $white !default;


 //== Progress bars
 //

-$progress-bg:                   #fff !default;
+$progress-height:               12px !default;
+$progress-bg:                   rgba($gray-500, .5) !default;
 $progress-bar-bg:               $brand-primary !default;
-$progress-bar-success-bg:       lighten($brand-success, 10%) !default;
-$progress-bar-danger-bg:        lighten($brand-danger, 10%) !default;
-$progress-bar-info-bg:          lighten($brand-info, 20%) !default;
+$progress-bar-success-bg:       $brand-success !default;
+$progress-bar-danger-bg:        $brand-danger !default;
+$progress-bar-info-bg:          $brand-info !default;


 //== Panels
@@ -477,34 +684,34 @@ $progress-bar-info-bg:          lighten($brand-info, 20%) !default;
 $panel-body-padding-vertical:   15px !default;
 $panel-body-padding-horizontal: 15px !default;
 $panel-body-padding:            $panel-body-padding-vertical $panel-body-padding-horizontal !default;
-$panel-color:                   #555 !default;
-$panel-bg:                      #f9f9f9 !default;
-$panel-border:                  #ccc !default;
+$panel-color:                   $text-color !default;
+$panel-bg:                      $gray-50 !default;
+$panel-border:                  $gray-400 !default;
 $panel-border-radius:           $border-radius-base !default;
-$panel-shadow:                  0 1px 2px rgba(#000, .1),
-                                0 3px 8px rgba(#000, .07) !default;
+$panel-shadow:                  0 1px 2px rgba($black, .07),
+                                0 3px 8px rgba($black, .04) !default;


 //== Tooltips
 //

-$tooltip-bg:                    #fff !default;
+$tooltip-bg:                    $white !default;
 $tooltip-border-width:          0 !default;
-$tooltip-border:                #ccc !default;
-$tooltip-text:                  $gray-dark !default;
+$tooltip-border:                $gray-500 !default;
+$tooltip-text:                  $gray-800 !default;
 $tooltip-link:                  $link-color !default;


 //== Issue
 //

-$issue-bg:                      #f9f9f9 !default;
-$issue-border:                  #ccc !default;
+$issue-bg:                      $gray-50 !default;
+$issue-border:                  $gray-500 !default;
 $issue-text:                    $text-color !default;

 $issue-padding:                 15px !default;
 $issue-gravatar-size:           50px !default;
-$issue-heading-size:            1.5 !default;
+$issue-heading-size:            1.75 !default;

 $issue-attribute-padding-v:     3px !default;
 $issue-attribute-padding-h:     5px !default;
@@ -513,10 +720,26 @@ $issue-attribute-padding-h:     5px !default;
 //== Speech "bubbles"
 //

+$bubble-bg:                     $issue-bg !default;
+$bubble-border:                 $issue-border !default;
+$bubble-text:                   $issue-text !default;
 $bubble-gravatar-size:          24px !default;
 $bubble-gravatar-space:         12px !default;
 $bubble-padding-vertical:       8px !default;
-$bubble-padding-horizontal:     15px !default;
+$bubble-padding-horizontal:     12px !default;
+$bubble-target-border:          saturate($brand-primary, 25%) !default;
+$bubble-target-shadow-alpha:    .2 !default;
+
+
+//== Badges
+//
+
+$badge-space:                   2px !default;
+$badge-padding-v:               0 !default;
+$badge-padding-h:               5px !default;
+$badge-border-radius:           $border-radius-base !default;
+$badge-font-size:               $font-size-small !default;
+$badge-font-weight:             $font-weight-bold !default;


 //== Media queries breakpoints
@@ -563,3 +786,67 @@ $login-form-adjustments-map: (
 $width-sm:                      $screen-sm - ($padding-side * 2) !default;
 $width-md:                      $screen-md - ($padding-side * 2) !default;
 $width-lg:                      $screen-lg - ($padding-side * 2) !default;
+
+
+//== Redmine Agile plugin
+// https://www.redmineup.com/pages/plugins/agile
+//
+
+$agile-board-background:        $gray-100 !default;
+$agile-issue-card-margin:       8px 10px !default;
+$agile-issue-card-padding:      7px !default;
+$agile-issue-card-border:       $gray-500;
+$agile-issue-card-border-width: 0 0 0 5px;
+$agile-issue-card-border-radius: $border-radius-large !default;
+$agile-issue-card-background:   $white !default;
+$agile-issue-card-color:        $text-color !default;
+$agile-issue-card-closed-background: $gray-300 !default;
+$agile-issue-card-default-color-map: (
+  bk-green: (
+    border: $green,
+    background: scale-color($green, $saturation: -5%, $lightness: 80%),
+    link: shade($green, 700),
+  ),
+  bk-blue: (
+    border: $blue,
+    background: scale-color($blue, $saturation: 50%, $lightness: 80%),
+    link: shade($blue, 700),
+  ),
+  bk-turquoise: (
+    border: $teal,
+    background: scale-color($teal, $saturation: -5%, $lightness: 80%),
+    link: shade($teal, 700),
+  ),
+  bk-lightgreen: (
+    border: adjust-color($green, $hue: -45deg),
+    background: scale-color(adjust-color($green, $hue: -45deg), $saturation: 75%, $lightness: 80%),
+    link: shade(adjust-color($green, $hue: -45deg), 700),
+  ),
+  bk-yellow: (
+    border: scale-color($yellow, $hue: 2deg),
+    background: scale-color($yellow, $hue: 2deg, $saturation: 75%, $lightness: 80%),
+    link: shade($yellow, 700),
+  ),
+  bk-orange: (
+    border: $orange,
+    background: scale-color($orange, $saturation: 75%, $lightness: 80%),
+    link: shade($orange, 700),
+  ),
+  bk-red: (
+    border: $red,
+    background: scale-color($red, $saturation: 75%, $lightness: 85%),
+    link: shade($red, 700),
+  ),
+  bk-purple: (
+    border: $purple,
+    background: scale-color($purple, $saturation: 75%, $lightness: 85%),
+    link: shade($purple, 700),
+  ),
+  bk-gray: (
+    border: $gray-600,
+    background: $gray-300,
+    link: $link-color,
+  ),
+) !default;
+$agile-issue-card-custom-color-map: () !default;
+$agile-issue-card-color-map:    map-merge($agile-issue-card-default-color-map, $agile-issue-card-custom-color-map);
--- a/src/sass/application.scss
+++ b/src/sass/application.scss
@@ -1,4 +1,5 @@
@import "variables";
+@import "functions";
@import "mixins";

@import "lib/normalize";
@@ -9,11 +10,13 @@
 //

@import "components/base";
+@import "components/badges";
@import "components/buttons";
@import "components/forms";
@import "components/tabs";
@import "components/pagination";
@import "components/content";
+@import "components/context-menu";
@import "components/gravatar";
@import "components/list";
@import "components/simple-list";
--- a/src/sass/components/_admin.scss
+++ b/src/sass/components/_admin.scss
@@ -8,7 +8,7 @@
      list-style-type: none;

      > a:not(.icon-only) {
-        padding-left: $sidebar-padding-horizontal + 5px + 20px;
+        padding-left: $sidebar-padding-horizontal + 5px + $icon-width;
        background-repeat: no-repeat;
        background-position: $sidebar-padding-horizontal center;
      }
@@ -27,7 +27,7 @@

    a {
      display: inline-block;
-      padding-left: 5px + 20px;
+      padding-left: 5px + $icon-width;
      background-position: 0 center;
    }
  }
@@ -50,8 +50,8 @@ table.memberships {

 table.permissions {
  td.role {
-    color: $gray;
-    font-weight: normal;
+    color: $gray-700;
+    font-weight: $font-weight-normal;
    text-align: center;
    vertical-align: bottom;
  }
@@ -61,6 +61,13 @@ table.permissions {
 //== Workflows
 //

+.controller-workflows {
+  table.list,
+  fieldset.collapsible {
+    margin-bottom: $line-height-computed;
+  }
+}
+
 table.transitions {
  td.enabled {
    background: $state-success;
@@ -78,7 +85,7 @@ table.transitions {

 table.fields_permissions {
  td.readonly {
-    background: $gray-light;
+    background: $gray-600;
  }

  td.required {
@@ -87,6 +94,29 @@ table.fields_permissions {
 }


+//== Custom fields -> Issues -> Key values
+//
+
+#custom_field_enumerations {
+  padding-left: 0;
+  list-style: none;
+
+  li {
+    min-height: $input-height-base;
+    padding: 1px 0;
+
+    .sort-handle,
+    label {
+      line-height: $input-height-base;
+    }
+
+    label input {
+      vertical-align: baseline;
+    }
+  }
+}
+
+
 //== Settings labels
 //

--- a/src/sass/components/_badges.scss
+++ b/src/sass/components/_badges.scss
@@ -0,0 +1,54 @@
+tr.group .count,
+span.private,
+.badge {
+  display: inline-block;
+  position: relative;
+  top: -1px;
+  box-sizing: border-box;
+  min-width: 1em;
+  margin-right: $badge-space;
+  margin-left: $badge-space;
+  padding: $badge-padding-v $badge-padding-h;
+  border: 1px solid;
+  border-radius: $badge-border-radius;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+span.private,
+.badge-private {
+  padding: ($badge-padding-v + 1px) ($badge-padding-h + 1px);
+  border: 0;
+  background: $brand-warning;
+  color: $brand-text;
+
+  h3 & {
+    font-size: $font-size-small-px;
+  }
+}
+
+tr.group .count,
+.badge-count {
+  padding: ($badge-padding-v + 1px) ($badge-padding-h + 1px);
+  border: 0;
+  background: $brand-primary;
+  color: $brand-text;
+}
+
+.badge-status-open {
+  border-color: $blue;
+  color: $blue;
+}
+
+.badge-status-locked {
+  border-color: $gray-600;
+  color: $gray-600;
+}
+
+.badge-status-closed {
+  border-color: $green;
+  color: $green;
+}
--- a/src/sass/components/_base.scss
+++ b/src/sass/components/_base.scss
@@ -57,16 +57,17 @@ textarea,

 h1 {
  margin: 0;
-  font-size: 2em;             // ~28px
-  line-height: 30px;
+  font-size: 2em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large * .825;
 }

 h2 {
  margin-top: 0;
  margin-bottom: $line-height-computed;
-  font-size: 1.43em;          // ~20px
-  font-weight: 500;
-  line-height: $line-height-computed;
+  font-size: 1.43em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large;

  img {
    vertical-align: middle;
@@ -76,15 +77,16 @@ h2 {
 h3 {
  margin-top: 0;
  margin-bottom: $line-height-computed;
-  font-size: 1.14em;          // ~16px
-  font-weight: 500;
-  line-height: $line-height-computed;
+  font-size: 1.14em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large;
 }

 h4 {
  margin-top: 0;
  font-size: 1em;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-base;
 }

 p {
@@ -96,16 +98,35 @@ small {
 }

 table {
+  th {
+    font-weight: $font-weight-bold;
+  }
+
  th,
  td {
    padding: $table-condensed-cell-padding $table-cell-padding;
  }
+
+  p {
+    margin: 0;
+  }
+
+  form {
+    p {
+      margin-bottom: ($line-height-computed / 2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }

 ul,
 ol {
  margin-top: 0;
  margin-bottom: ($line-height-computed / 2);
+  padding-left: 1.5em;

  ul,
  ol {
@@ -137,32 +158,27 @@ samp {
 }

 hr {
-  margin-top:    $line-height-computed;
+  margin-top: $line-height-computed;
  margin-bottom: $line-height-computed;
  border: 0;
  border-top: 1px solid $hr-border;

  li & {
-    margin-top:    $line-height-computed / 2;
+    margin-top: $line-height-computed / 2;
    margin-bottom: $line-height-computed / 2;
  }
 }

-abbr[title] {
-  border-bottom: 1px dotted $abbr-border-color;
-  cursor: help;
-}
-
 blockquote {
  margin: 0 0 $line-height-computed;
  padding: floor($line-height-computed / 4) $padding-large-horizontal;
  border-left: 4px solid $blockquote-border-color;

-  >:first-child {
+  > :first-child {
    margin-top: 0;
  }

-  >:last-child {
+  > :last-child {
    margin-bottom: 0;
  }
 }
--- a/src/sass/components/_buttons.scss
+++ b/src/sass/components/_buttons.scss
@@ -9,27 +9,24 @@ button {
  @include button-size($btn-padding-vertical, $btn-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
  display: inline-block;
  margin-bottom: 0;
-  transition: background-color ease-in-out .07s,
-              border-color ease-in-out .07s,
-              box-shadow ease-in-out .07s;
+  transition:
+    border-color $transition-time ease-in-out,
+    background-color $transition-time ease-in-out,
+    box-shadow $transition-time ease-in-out;
  border: 1px solid;
  font-weight: $btn-font-weight;
  text-align: center;
+  vertical-align: top;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); // scss-lint:disable DeclarationOrder
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);

  &:hover,
  &:focus {
-    outline: 0;
    text-decoration: none;
  }

-  &:active {
-    outline: 0;
-  }
-
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
@@ -45,17 +42,17 @@ button {

 form {
  input[type="submit"] {
-    margin-right: 5px;
+    margin-right: 2px;

    + input {
      @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
    }

-    + a {
-      margin-right: 5px;
+    ~ a {
+      margin-right: 2px;

      + a {
-        margin-left: 5px;
+        margin-left: 2px;
      }
    }
  }
@@ -88,37 +85,87 @@ form[action*="repository/diff"] {
 //
 p.buttons,
 .other-formats > span,
-#wiki_add_attachment > p {
-  > a {
+#wiki_add_attachment > p,
+#content > .contextual,
+#content > .contextual > span:not(.drdn),
+#query_form > .contextual,
+#query_form_with_buttons > .contextual {
+  > a,
+  > span:not(.drdn) {
    display: inline-block;
+    margin-right: 1px;
+    margin-left: 1px;
    padding: $btn-padding-vertical $btn-padding-horizontal-small;
-    border: 1px solid $pagination-border;
+    transition:
+      border-color $transition-time ease-in-out,
+      background-color $transition-time ease-in-out,
+      color $transition-time ease-in-out;
+    border: 1px solid;
    border-radius: $border-radius-base;
-    background-color: $pagination-bg;
-
-    &:hover,
-    &:focus {
-      border-color: $pagination-hover-border;
-      outline: 0;
-      background-color: $pagination-hover-bg;
-      text-decoration: none;
-    }
-
-    &:active {
-      outline: 0;
-      box-shadow: inset 0 3px 4px -2px rgba(#000, .1);
-    }
+    font-size: $font-size-base;

    &.icon {
      padding-left: 20px + $btn-padding-horizontal-small;
      background-position: $btn-padding-horizontal-small 50%;
    }
+  }

-    @if $use-font-awesome == false {
-      &.atom {
-        padding-left: 20px + $btn-padding-horizontal-small;
-        background-position: $btn-padding-horizontal-small 50%;
-      }
+  > a {
+    border-color: $pagination-border;
+    background-color: $pagination-bg;
+    color: $pagination-color;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover,
+    &:focus {
+      border-color: $pagination-hover-border;
+      background-color: $pagination-hover-bg;
+      color: $pagination-hover-color;
+      text-decoration: none;
+    }
+  }
+
+  > span:not(.drdn) {
+    border-color: $pagination-inactive-border;
+    background-color: $pagination-inactive-bg;
+    color: $pagination-inactive-color;
+  }
+}
+
+
+//== Submit + cancel
+//
+
+#issue-form,
+.mypage-box,
+.journal,
+.edit_news,
+.edit_content,
+.edit_time_entry,
+.edit_membership {
+  input[type="submit"] + a {
+    margin-left: ceil($btn-padding-horizontal-small / 2);
+  }
+}
+
+
+//== Apply + clear
+//
+
+form {
+  input,
+  button,
+  select {
+    ~ a {
+      margin-left: ceil($btn-padding-horizontal-small / 2);
+      line-height: $input-height-base;
    }
  }
 }
@@ -139,10 +186,21 @@ p.buttons {
  margin: $line-height-computed 0 0;
  text-align: right;

-  .pagination + &,
-  #wiki_add_attachment + & {
-    margin-top: 0;
-    float: right;
+  > span {
+    margin-right: 1px;
+    margin-left: 1px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (min-width: $redmine-responsive-min) {
+    .pagination + &,
+    #wiki_add_attachment + & {
+      margin-top: 0;
+      float: right;
+    }
  }
 }

@@ -152,10 +210,14 @@ p.buttons {

 .query-columns {
  select {
-    width: auto !important; // scss-lint:disable ImportantRule
+    width: auto !important; // stylelint-disable-line declaration-no-important
    min-width: 130px;
  }

+  label + & {
+    margin-left: $padding-side;
+  }
+
  @at-root span#{&} {
    > span {
      display: inline-block;
@@ -166,6 +228,7 @@ p.buttons {
    label {
      display: block;
      margin-bottom: $line-height-computed / 2;
+      line-height: initial;
    }
  }

@@ -182,7 +245,7 @@ p.buttons {
      margin-bottom: 4px;
      padding-right: 1px;
      padding-left: 1px;
-      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
    }
  }
 }
@@ -193,24 +256,28 @@ p.buttons {

 a[data-expands],
 .toggle-multiselect {
-  @extend %image-toggle-plus;
+  display: inline-block;
  position: relative;
  top: 3px;
-  padding: 2px 8px;
+  padding: 10px;
  border: 1px solid;
  border-radius: $border-radius-base;
+  background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
  background-repeat: no-repeat;
  background-position: 2px 2px;
+  font-size: 0;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
-  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+
+  &.icon-only::before {
+    content: none;
+  }
 }

 a[data-expands] {
-  display: inline-block;
  margin-right: 10px;
-  padding: 10px;

  > .toggle-multiselect {
    padding: 0;
@@ -222,3 +289,8 @@ a[data-expands] {
    display: none;
  }
 }
+
+a.icon-toggle-minus[data-expands],
+select[multiple="multiple"] + .toggle-multiselect {
+  background-image: inline-svg("minus.svg", (path: (fill: $btn-default-icon-color)));
+}
--- a/src/sass/components/_calendar.scss
+++ b/src/sass/components/_calendar.scss
@@ -11,7 +11,7 @@ table.cal {
  thead th {
    width: 14%;
    padding: $table-condensed-cell-padding;
-    background-color: $table-bg-hover;
+    background-color: $table-bg-active;

    &.week-number {
      width: auto;
@@ -30,7 +30,7 @@ table.cal {

    &.week-number {
      border: 0 none;
-      background-color: $table-bg-hover;
+      background-color: $table-bg-active;
      font-size: 1em;
      text-align: right;
    }
@@ -42,7 +42,11 @@ table.cal {
    }

    &.odd p.day-num {
-      color: $gray-light;
+      color: $gray-600;
+    }
+
+    &.nwday {
+      background: $table-bg-accent;
    }

    &.today {
@@ -59,22 +63,30 @@ table.cal .starting a,
 p.cal.legend .starting,
 table.cal .ending a,
 p.cal.legend .ending {
-  padding-left: 20px;
-  background-image: url("../../../images/bullet_go.png");
-  background-repeat: no-repeat;
-  background-position: 0 center;
+  @extend %fa-icon;
+
+  &::before {
+    content: $fa-var-caret-right;
+    width: 10px;
+    text-align: right;
+  }
 }

 table.cal .ending a,
 p.cal.legend .ending {
-  padding-left: 20px;
-  background-image: url("../../../images/bullet_end.png");
+  &::before {
+    content: $fa-var-caret-left;
+    text-align: left;
+  }
 }

 table.cal .starting.ending a,
 p.cal.legend .starting.ending {
-  padding-left: 20px;
-  background-image: url("../../../images/bullet_diamond.png");
+  &::before {
+    content: $fa-var-square;
+    transform: scale(.6) rotate(45deg);
+    text-align: center;
+  }
 }

 p.cal.legend {
--- a/src/sass/components/_coderay.scss
+++ b/src/sass/components/_coderay.scss
@@ -18,7 +18,7 @@
  }

  .debug {
-    // scss-lint:disable ImportantRule
+    // stylelint-disable declaration-no-important
    background: #00f !important;
    color: #fff !important;
  }
--- a/src/sass/components/_content.scss
+++ b/src/sass/components/_content.scss
@@ -1,5 +1,20 @@
 #main {
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    @if $sidebar-position == "left" {
+      grid-template-areas:
+        "sidebar content"
+        "footer footer";
+      grid-template-columns: auto 1fr;
+    } @else {
+      grid-template-areas:
+        "content sidebar"
+        "footer footer";
+      grid-template-columns: 1fr auto;
+    }
+  } @else if $flexbox-layout {
    display: flex;
  } @else {
    @extend %clearfix;
@@ -14,7 +29,9 @@
 #content {
  padding: $padding-side;

-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    grid-area: content;
+  } @else if $flexbox-layout {
    $side-space: $sidebar-width + $padding-side * 2;
    flex: 1 1 auto;
    width: calc(100% - #{$side-space});
@@ -38,7 +55,9 @@
    padding: 0;
    border: 0 none;

-    @if $flexbox-layout {
+    @if $css-grid-layout {
+      width: 0;
+    } @else if $flexbox-layout {
      flex: 0 0 auto;
    } @else {
      width: 0;
@@ -46,7 +65,10 @@
    }
  }

-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    grid-area: sidebar;
+    width: $sidebar-width-computed;
+  } @else if $flexbox-layout {
    flex: 0 0 $sidebar-width-computed;

    @if $sidebar-position == "left" {
@@ -79,7 +101,7 @@

  > h3:first-child,
  > form:first-child > h3 {
-    margin-top: 0;
+    margin-top: $line-height-computed * .25;
  }

  ul {
@@ -107,12 +129,14 @@
            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;
+            color: $sidebar-link-hover-text;
            text-decoration: none;
          }

@@ -127,7 +151,7 @@
              border-left-color: $sidebar-link-active-side;
              box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
            } @else {
-              margin-left: -1px;
+              margin-left: -($sidebar-padding-horizontal + 1px);
              border-right-color: $sidebar-link-active-side;
              border-left-color: $body-bg;
              box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
@@ -136,6 +160,55 @@
        }
      }
    }
+
+    &.queries {
+      > li {
+        position: relative;
+
+        > a.query {
+          padding-right: $sidebar-padding-horizontal * 1.5;
+        }
+
+        > a.icon-only {
+          position: absolute;
+          top: $sidebar-padding-vertical;
+          right: $sidebar-padding-horizontal / 2;
+          line-height: $line-height-computed;
+
+          &::before {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+
+    &.pages-hierarchy {
+      .pages-hierarchy {
+        margin-left: $sidebar-padding-horizontal + 3px;
+        border-left: 2px solid $gray-400;
+
+        @if $sidebar-position == "right" {
+          margin-left: 3px;
+        } @else {
+          margin-right: 0;
+        }
+
+        li {
+          > a:not(.icon-only) {
+            padding-right: $sidebar-padding-horizontal / 2;
+            padding-left: $sidebar-padding-horizontal / 2;
+
+            @if $sidebar-position == "right" {
+              margin-left: 0;
+            }
+          }
+
+          .pages-hierarchy {
+            margin-left: $sidebar-padding-horizontal / 2 + 3px;
+          }
+        }
+      }
+    }
  }

  // Special treatment for anchor tags directly under sidebar tag
@@ -149,14 +222,122 @@
      margin-left: 0;
    }
  }
+
+  // For plugin https://github.com/ledsun/redmine_wiki_page_tree
+  div.page-tree {
+    margin: 0;
+    padding: 0;
+
+    .page-tree__title {
+      margin-left: 0;
+    }
+
+    .page-tree__list {
+      .page-tree__list {
+        margin-left: $sidebar-padding-horizontal + 3px;
+        border-left: 2px solid $gray-400;
+
+        @if $sidebar-position == "right" {
+          margin-left: 3px;
+        } @else {
+          margin-right: 0;
+        }
+
+        .page-tree__list {
+          margin-left: $sidebar-padding-horizontal / 2 + 3px;
+        }
+
+        summary {
+          padding-left: $sidebar-padding-horizontal + 8px;
+
+          @if $sidebar-position == "right" {
+            margin-left: 0;
+          }
+
+          &::before {
+            left: 6px;
+          }
+        }
+      }
+
+      li {
+        > a:not(.icon-only) {
+          padding-right: $sidebar-padding-horizontal / 2;
+          padding-left: $sidebar-padding-horizontal / 2;
+
+          @if $sidebar-position == "right" {
+            margin-left: 0;
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    details {
+      summary {
+        display: block;
+        position: relative;
+        padding: 0 $sidebar-padding-horizontal;
+        padding-left: $sidebar-padding-horizontal * 1.5 + 8px;
+
+        @if $sidebar-position == "left" {
+          border-radius: $border-radius-large 0 0 $border-radius-large;
+        } @else {
+          margin-left: -($sidebar-padding-horizontal);
+          border-radius: 0 $border-radius-large $border-radius-large 0;
+        }
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: ($sidebar-padding-vertical + 1px) + ($line-height-computed - 16px) / 2;
+          left: $sidebar-padding-horizontal / 2 + 6px;
+          width: 16px;
+          height: 16px;
+          background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
+          background-repeat: no-repeat;
+        }
+
+        &:hover {
+          background-color: $sidebar-link-hover-bg;
+        }
+
+        a {
+          display: inline-block;
+          padding-top: ($sidebar-padding-vertical + 1px);
+          padding-bottom: ($sidebar-padding-vertical + 1px);
+
+          &:hover {
+            color: $sidebar-link-hover-text;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &[open] > summary::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
 }

 #footer {
  margin: 0 $padding-side $line-height-computed;
  padding-top: $line-height-computed;
-  border-top: 1px solid $gray-lighter;
-  color: $gray-light;
+  border-top: 1px solid $gray-400;
+  color: $gray-600;
  font-size: $font-size-small;
+
+  @if $css-grid-layout {
+    grid-area: footer;
+  }
 }

@if $fixed-layout {
--- a/src/sass/components/_context-menu.scss
+++ b/src/sass/components/_context-menu.scss
@@ -0,0 +1,61 @@
+#wrapper {
+  .context-menu-selection {
+    &,
+    > td {
+      background-color: $brand-primary !important; // stylelint-disable-line declaration-no-important
+      color: $brand-text !important; // stylelint-disable-line declaration-no-important
+    }
+  }
+
+  #context-menu {
+    > ul,
+    > ul > li > ul {
+      @include nice-shadow(2);
+      border: 0 none !important; // stylelint-disable-line declaration-no-important
+    }
+
+    ul {
+      padding: 3px;
+    }
+
+    li {
+      padding: 0;
+      border: 0 none;
+      border-radius: $border-radius-small;
+      background: transparent;
+
+      &:hover {
+        background-color: $pagination-hover-bg;
+      }
+    }
+
+    a {
+      @extend %fa-icon;
+      padding: 3px 10px 3px 20px;
+      border-radius: $border-radius-small;
+
+      &::before {
+        margin-top: 2px;
+        margin-left: -16px;
+        float: left;
+      }
+
+      &:hover {
+        border-color: $pagination-hover-border;
+        background-color: $pagination-hover-bg;
+      }
+
+      &.disabled {
+        color: rgba($pagination-color, .5);
+      }
+
+      &.icon-checked {
+        background: transparent;
+      }
+
+      &.submenu {
+        background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
+      }
+    }
+  }
+}
--- a/src/sass/components/_dropdown.scss
+++ b/src/sass/components/_dropdown.scss
@@ -31,7 +31,7 @@
  &-items {
    max-height: 400px;
    overflow: auto;
-    color: $gray-light;
+    color: $gray-600;

    &:empty {
      border: 0;
@@ -40,38 +40,32 @@
    &.selection {
      > a,
      > span {
+        @extend %fa-icon;
+
        &::before {
          content: " ";
          display: inline-block;
          width: 1em;
          font-weight: $font-weight-bold;
        }
-
-        @if $use-font-awesome {
-          @extend %fa-icon;
-        }
      }

      > .selected::before {
-        @if $use-font-awesome {
-          content: $fa-var-check;
-        } @else {
-          content: "\2713 ";
-        }
+        content: $fa-var-check;
      }
    }

-    > a,
-    > span {
+    > * {
      display: block;
-      margin: 0;
-      padding: $btn-padding-vertical $btn-padding-horizontal-small;
+      margin: 1px;
+      padding: ($btn-padding-vertical - 1px) ($btn-padding-horizontal-small - 1px);
+      border-radius: $border-radius-base - 1px;

      &.icon {
-        padding-left: 20px + $btn-padding-horizontal-small;
+        padding-left: $icon-width + $btn-padding-horizontal-small;

        &::before {
-          width: 20px;
+          width: $icon-width;
          margin-top: 3px;
          float: left;
          text-align: center;
@@ -83,9 +77,32 @@

 .contextual {
  .drdn {
+    &.expanded {
+      > .drdn-trigger {
+        border-color: $pagination-active-border;
+        background-color: $pagination-active-bg;
+        color: $pagination-active-color;
+      }
+    }
+
    &-trigger {
-      > .icon-only::before {
-        margin: 0 1px;
+      padding: $btn-padding-vertical $btn-padding-horizontal-small;
+      border: 1px solid $pagination-border;
+      border-radius: $border-radius-base;
+      background-color: $pagination-bg;
+      box-shadow: none;
+      color: $pagination-color;
+      text-align: center;
+
+      > .icon-only {
+        margin: 0 -4px;
+      }
+
+      &:hover,
+      &:focus {
+        border-color: $pagination-hover-border;
+        background-color: $pagination-hover-bg;
+        color: $pagination-hover-color;
      }
    }

--- a/src/sass/components/_elements.scss
+++ b/src/sass/components/_elements.scss
@@ -7,27 +7,29 @@
 //

 a.collapsible,
+a.collapsible.icon,
 .collapsible > legend {
  color: $link-color;
  cursor: pointer;
  user-select: none;

-  &:hover {
+  &:hover,
+  &:focus {
    color: $link-hover-color;
+    text-decoration: none;
  }

  &::before {
-    content: "";
-    display: inline-block;
+    @include fa-icon;
+    content: $fa-var-chevron-down;
    position: relative;
-    top: -1px;
-    width: 0;
-    height: 0;
+    top: -.1em;
+    width: 1em;
+    height: 1em;
    margin-right: 3px;
    transform: rotate(0);
-    border-top:   6px solid;
-    border-right: 4px solid transparent;
-    border-left:  4px solid transparent;
+    color: $gray-600;
+    font-size: 12px;
    vertical-align: middle;

    @if $collapsible-animation-time > 0 {
@@ -37,6 +39,7 @@ a.collapsible,
 }

 a.collapsible.collapsed,
+a.collapsible.icon-collapsed,
 .collapsible.collapsed > legend {
  &::before {
    transform: rotate(-90deg);
@@ -51,7 +54,7 @@ a.collapsible.collapsed,
    transition: max-height $collapsible-animation-time ease-out;

    > div {
-      display: block !important; // scss-lint:disable ImportantRule
+      display: block !important; // stylelint-disable-line declaration-no-important
      visibility: visible;
      transition: visibility 0s 0s, opacity $collapsible-animation-time;
      opacity: 1;
@@ -91,20 +94,6 @@ a.collapsible.collapsed,
  select {
    font-size: .9em;
  }
-
-  a {
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  a,
-  .drdn {
-    margin-left: $padding-small-vertical;
-  }
-
-  > :first-child {
-    margin-left: 0;
-  }
 }


@@ -112,19 +101,42 @@ a.collapsible.collapsed,
 //

 .hidden-for-sighted {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+  // stylelint-disable declaration-no-important
+  position: absolute !important;
+  top: auto !important;
+  left: -10000px !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  // stylelint-enable declaration-no-important
 }

+img {
+  image-orientation: from-image;
+}
+
+.filecontent-container {
+  position: relative;
+  min-height: 200px;
+  margin-bottom: $line-height-computed;
+
+  > .filecontent {
+    position: absolute;
+    max-width: 100%;
+    max-height: 100%;
+
+    &.wiki {
+      position: static;
+      padding-bottom: $line-height-computed;
+    }
+  }
+}

 //== Responsive autoscroll
 //

 .autoscroll {
+  position: relative;
  margin-bottom: $line-height-computed;
  overflow-x: auto;
 }
@@ -150,7 +162,7 @@ a.collapsible.collapsed,
  }

  &:last-child,
-  >:last-child {
+  > :last-child {
    margin-bottom: 0;
  }

@@ -188,20 +200,6 @@ a.collapsible.collapsed,
 }


-//== Watchers selection list
-//
-
-#users_for_watcher {
-  height: 200px;
-  overflow: auto;
-
-  label {
-    @include check;
-    display: block;
-  }
-}
-
-
 //== Watchers list
 //

@@ -229,13 +227,18 @@ a.collapsible.collapsed,
        background: transparent;
      }

+      > .icon-only {
+        &::before {
+          line-height: inherit;
+        }
+      }
+
      > .delete {
        float: right;
-        opacity: .5;
-        vertical-align: middle;
+        opacity: $icon-opacity;

        &:hover {
-          opacity: 1;
+          opacity: $icon-hover-opacity;
        }
      }

@@ -255,6 +258,10 @@ a.collapsible.collapsed,
    @include check;
    display: block;
  }
+
+  .gravatar {
+    margin-right: $padding-small-vertical;
+  }
 }

 .roles-selection {
@@ -282,11 +289,13 @@ p.subtitle {
 }

 .block-receiver {
+  box-sizing: border-box;
  min-height: 20px;
-  margin: $padding-side / -2;
  margin-bottom: $line-height-computed;
-  padding: $padding-side / 2;
-  outline: 2px dashed $gray-light;
+
+  .dragging & {
+    outline: 2px dashed $gray-600;
+  }
 }

 .mypage-box {
@@ -298,15 +307,15 @@ p.subtitle {

  &.ui-sortable-handle {
    overflow: hidden;
-    outline: 1px solid $gray-lighter;
+    outline: 1px solid $gray-400;

    &:hover {
-      outline: 1px solid $gray-light;
+      outline: 1px solid $gray-600;
    }
  }

  &.ui-sortable-placeholder {
-    visibility: visible !important; // scss-lint:disable ImportantRule
+    visibility: visible !important; // stylelint-disable-line declaration-no-important
    outline: 1px dashed $highlight-border;
    background: $highlight-bg;
  }
@@ -338,25 +347,9 @@ a.close-icon {

 // For Redmine 3.4+
 #my-page {
-  .block-receiver {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    outline: none;
-  }
-
-  &.dragging .block-receiver {
-    box-sizing: border-box;
-    min-height: 20px;
-    margin: $padding-side / -2;
-    margin-bottom: $line-height-computed;
-    padding: $padding-side / 2;
-    outline: 2px dashed $gray-light;
-  }
-
  .mypage-box {
    > .contextual {
-      transition: opacity .2s;
+      transition: opacity $transition-time;
      opacity: 0;
    }

@@ -405,7 +398,7 @@ a.close-icon {
  th.line-num {
    border-color: darken($body-bg, 10%);
    background-color: darken($body-bg, 5%);
-    color: $gray;
+    color: $gray-700;
  }

  th.line-num,
@@ -499,7 +492,7 @@ ul.projects {
  }

  ul.projects {
-    border-left: 2px solid $gray-lighter;
+    border-left: 2px solid $gray-400;
  }

  li.root {
@@ -515,7 +508,7 @@ ul.projects {
    font-weight: $font-weight-bold;

    &.child {
-      font-weight: normal;
+      font-weight: $font-weight-normal;
    }
  }
 }
@@ -549,11 +542,11 @@ ul.projects {

  tbody tr {
    &.subtotal {
-      color: $gray;
+      color: $gray-700;
      font-style: italic;

      td.hours {
-        color: $gray-light;
+        color: $gray-600;
      }
    }

@@ -586,25 +579,49 @@ ul.projects {
 //

 div#roadmap {
+  article {
+    margin-bottom: $line-height-computed;
+  }
+
  .related-issues {
    margin-bottom: $line-height-computed;

    td.checkbox {
      display: none;
    }
+
+    td.assigned_to {
+      width: 1px;
+      padding-right: 0;
+      white-space: nowrap;
+    }
  }

  table.progress {
    td {
-      height: 16px;
+      height: $progress-height;
    }

    + .percent {
      position: relative;
-      top: 2px;
+      top: 0;
    }
  }

+  header {
+    display: block;
+
+    > h3 {
+      display: inline-block;
+    }
+  }
+
+  header > h3,
+  h3.version {
+    margin-bottom: 0;
+    padding-right: 0;
+  }
+
  .wiki {
    h1 {
      &:first-child {
@@ -651,16 +668,22 @@ div#version-summary {
 //== Ajax indicator
 //

+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 #ajax-indicator {
  @include nice-shadow(3);
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
+  box-sizing: border-box;
  width: 200px;
-  margin: (($line-height-computed + $padding-large-vertical * 2 + 1px * 2) / -2) ((200px + $padding-large-horizontal * 2 + 1px * 2) / -2);
+  margin: (($padding-large-vertical * 2 + 1px * 2 + $line-height-computed) / -2) (200px / -2);
  padding: $padding-large-vertical $padding-large-horizontal;
  border: 1px solid $highlight-border;
+  border-radius: $border-radius-base;
  opacity: .9;
  background-color: $highlight-bg;
  color: $highlight-text;
@@ -668,11 +691,21 @@ div#version-summary {
  text-align: center;

  span {
-    padding-left: 26px;
-    background-image: url("../../../images/loading.gif");
-    background-repeat: no-repeat;
-    background-position: 0% 40%;
-    vertical-align: bottom;
+    line-height: $line-height-computed;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      box-sizing: border-box;
+      width: $line-height-computed;
+      height: $line-height-computed;
+      margin-right: $line-height-computed / 2;
+      animation: spin 1s linear infinite;
+      border: 3px solid rgba($highlight-text, .3);
+      border-radius: 50%;
+      border-top-color: $highlight-text;
+      vertical-align: bottom;
+    }
  }
 }

@@ -682,7 +715,7 @@ div#version-summary {

 tr.message {
  &.locked {
-    color: $gray;
+    color: $gray-700;
  }

  &.sticky td.subject {
@@ -736,20 +769,19 @@ div.table-list.boards {
  }

  .message {
-    border: 1px solid $gray-lighter;
+    border: 1px solid $bubble-border;
    border-radius: $panel-border-radius;
-    background: $gray-lightest;
+    background: $bubble-bg;

    > h4,
    > p {
      margin-bottom: 0;
      padding: $bubble-padding-vertical $bubble-padding-horizontal;
-      border-bottom: 1px solid mix($gray-lighter, $gray-lightest, 50%);
-      color: $gray;
+      color: $gray-700;
      font-size: $font-size-list;

      a {
-        color: $gray-darker;
+        color: $gray-900;

        &.user {
          font-weight: $font-weight-bold;
@@ -758,7 +790,8 @@ div.table-list.boards {
    }

    .wiki {
-      padding: $bubble-padding-horizontal;
+      padding: $panel-body-padding;
+      border-top: 1px solid $bubble-border;
      border-radius: 0 0 $panel-border-radius $panel-border-radius;
      background: $body-bg;
    }
@@ -766,18 +799,17 @@ div.table-list.boards {
    .contextual {
      position: relative;
      z-index: 1;
-      margin-right: $bubble-padding-vertical;
-
-      @if $use-font-awesome {
-        margin-top: $padding-small-vertical;
-      } @else {
-        margin-top: $bubble-padding-vertical;
-      }
+      padding: ($bubble-padding-vertical - 1px) $bubble-padding-vertical 0 0;

      a {
-        margin-left: ceil($bubble-padding-vertical / 2);
+        display: inline-block;
      }
    }
+
+    .attachments {
+      padding: $bubble-padding-horizontal;
+      border-top-color: $bubble-border;
+    }
  }

  .reply {
@@ -810,12 +842,12 @@ div.table-list.boards {
          margin-top: 1px;
          margin-left: 2px;
          border-width: 6px;
-          border-right-color: $panel-bg;
+          border-right-color: $bubble-bg;
        }

        &::before {
          border-width: 7px;
-          border-right-color: $panel-border;
+          border-right-color: $bubble-border;
        }
      }

@@ -882,8 +914,7 @@ div.table-list.boards {

  header {
    h3 {
-      margin-bottom: .3em;
-      line-height: 1.2;
+      margin-bottom: $line-height-computed / 2;

      > a {
        font-weight: $font-weight-bold;
@@ -893,7 +924,11 @@ div.table-list.boards {
 }

 .author {
-  color: $gray;
+  color: $gray-700;
+
+  .flyout-menu & {
+    color: inherit;
+  }

  .user {
    font-weight: $font-weight-bold;
@@ -930,6 +965,8 @@ div.table-list.boards {
  border-radius: $panel-border-radius;
  background: $body-bg;
  color: $panel-color;
+  font-family: $font-family-monospace;
+  white-space: pre-wrap;
 }

 .diff_out {
@@ -948,6 +985,16 @@ div.table-list.boards {
  }
 }

+.text-diff {
+  .diff_out {
+    background: $diff-out-bg;
+  }
+
+  .diff_in {
+    background: $diff-in-bg;
+  }
+}
+

 //== Repository view
 //
@@ -970,18 +1017,12 @@ div.table-list.boards {

  li > a {
    margin-left: .5em;
-
-    @if $use-font-awesome == false {
-      img {
-        vertical-align: middle;
-      }
-    }
  }
 }

 ul.properties {
  padding: 0;
-  color: $gray;
+  color: $gray-700;
  font-size: $font-size-small;

  li {
@@ -1026,47 +1067,58 @@ tr.changeset {
  font-size: 1em;

  .change {
-    background-position: 5px center;
+    margin-left: 8px;
  }
-
-  .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;
+    margin-top: $table-condensed-cell-padding;
+    color: $gray-800;
+  }
+}

-    a {
-      @include link-variant($gray-dark);
+#changes-legend > li.change,
+.changeset-changes ul > li.change {
+  padding-left: 18px;
+  background: transparent;
+  background-repeat: no-repeat;
+  background-position: 0 center;
+
+  &.folder {
+    @extend %fa-icon;
+
+    &::before {
+      content: $fa-var-folder;
+      top: 0;
+      margin-right: 0;
+      margin-left: -18px;
+      font-size: 1em;
+    }
+
+    &.change-A::before,
+    &.change-M::before {
+      content: $fa-var-folder-open;
    }
  }

-  .change-A {
-    &::before { color: $changeset-add-color; }
-    a { @include link-variant($changeset-add-color); }
+  &.change-A {
+    background-image: inline-svg("diff-added.svg", (path: (fill: $changeset-added-color)));
  }

-  .change-M {
-    &::before { color: $changeset-modified-color; }
-    a { @include link-variant($changeset-modified-color); }
+  &.change-M {
+    background-image: inline-svg("diff-modified.svg", (path: (fill: $changeset-modified-color)));
  }

-  .change-C {
-    &::before { color: $changeset-copied-color; }
-    a { @include link-variant($changeset-copied-color); }
+  &.change-C {
+    background-image: inline-svg("diff-copied.svg", (path: (fill: $changeset-copied-color)));
  }

-  .change-R {
-    &::before { color: $changeset-renamed-color; }
-    a { @include link-variant($changeset-renamed-color); }
+  &.change-R {
+    background-image: inline-svg("diff-renamed.svg", (path: (fill: $changeset-renamed-color)));
  }

-  .change-D {
-    color: $changeset-deleted-color;
+  &.change-D {
+    background-image: inline-svg("diff-deleted.svg", (path: (fill: $changeset-deleted-color)));
  }
 }
--- a/src/sass/components/_flash.scss
+++ b/src/sass/components/_flash.scss
@@ -8,6 +8,7 @@
 .nodata,
 .warning,
 .conflict {
+  @extend %fa-icon;
  margin-bottom: $line-height-computed;
  padding: $padding-large-vertical $padding-large-horizontal;
  padding-left: $padding-large-horizontal + 8px + 16px;
@@ -16,40 +17,32 @@
  background-repeat: no-repeat;
  background-position: $padding-large-horizontal 50%;

-  @if $use-font-awesome {
-    @extend %fa-icon;
-
-    &::before {
-      margin-left: -(8px + 16px);
-      float: left;
-      line-height: $line-height-computed;
-    }
+  &::before {
+    margin-left: -(8px + 16px);
+    float: left;
+    line-height: $line-height-computed;
  }

-  >:last-child {
+  > :last-child {
    margin-bottom: 0;
  }
 }

@mixin flash($color, $background, $border, $link, $icon) {
-  color: $color;
-  background-color: $background;
  border-color: $border;
+  background-color: $background;
+  color: $color;

-  @if $use-font-awesome {
-    @if $icon == "true" {
-      $icon: $fa-var-check;
-    } @elseif $icon == "warning" {
-      $icon: $fa-var-warning;
-    } @elseif $icon == "exclamation" {
-      $icon: $fa-var-exclamation-circle;
-    }
+  @if $icon == "true" {
+    $icon: $fa-var-check;
+  } @else if $icon == "warning" {
+    $icon: $fa-var-warning;
+  } @else if $icon == "exclamation" {
+    $icon: $fa-var-exclamation-circle;
+  }

-    &::before {
-      content: $icon;
-    }
-  } @else {
-    background-image: url(../../../images/#{$icon}.png);
+  &::before {
+    content: $icon;
  }

  a {
@@ -83,11 +76,9 @@
    }
  }

-  @if $use-font-awesome {
-    &::before {
-      margin-left: 0;
-      float: none;
-    }
+  &::before {
+    margin-left: 0;
+    float: none;
  }
 }

--- a/src/sass/components/_forms.scss
+++ b/src/sass/components/_forms.scss
@@ -7,8 +7,49 @@ form {
    padding: $table-condensed-cell-padding;
  }

+  fieldset {
+    > button,
+    > input,
+    > select {
+      margin-right: 5px;
+      margin-bottom: $line-height-computed / 2;
+    }
+  }
+
+  label {
+    line-height: $input-height-base;
+    vertical-align: top;
+
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
+  }
+
+  span.field label,
+  span.field ~ label,
+  .box label {
+    line-height: $line-height-base;
+
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-vertical;
+    }
+  }
+
+  .add-filter label,
+  .filter label {
+    line-height: $input-height-base;
+  }
+
  .contextual > & {
    display: inline-block;
+    line-height: $input-height-base;
+    vertical-align: top;
+
+    label {
+      line-height: inherit;
+    }
  }
 }

@@ -51,7 +92,10 @@ input[type="password"] {
  @extend %form-field;
  @include form-control-focus;
  @include placeholder;
-  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
+  transition:
+    border-color $transition-time ease-in-out,
+    box-shadow $transition-time ease-in-out;
+  vertical-align: top;

  &[disabled],
  &[readonly],
@@ -74,14 +118,15 @@ textarea {
 }

 input[type="search"] {
-  -webkit-appearance: none;
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
 }

 input[type="radio"],
 input[type="checkbox"] {
-  margin: 4px 5px 0 0;
+  margin: 4px 3px 0 5px;
  margin-top: 1px \9; // IE8-9
  line-height: normal;
+  vertical-align: top;
 }

 input[type="file"] {
@@ -115,6 +160,7 @@ select {
  &[multiple],
  &[size] {
    height: auto;
+    min-height: $input-height-base;
  }

  &[size="1"] {
@@ -122,7 +168,7 @@ select {
  }

  option[disabled] {
-    color: $gray-lighter;
+    color: $gray-400;
  }

  &.expandable {
@@ -130,7 +176,7 @@ select {
  }

  &.bool_cf {
-    width: auto !important; // scss-lint:disable ImportantRule
+    width: auto !important; // stylelint-disable-line declaration-no-important
  }
 }

@@ -141,7 +187,7 @@ select {

 // Mozilla Firefox

-@-moz-document url-prefix() {
+@-moz-document url-prefix("") {
  select {
    &[multiple] {
      padding: 0;
@@ -150,7 +196,7 @@ select {
    option,
    optgroup::before {
      padding: $input-padding-vertical $input-padding-horizontal;
-      border-bottom: 1px dotted $gray-lighter;
+      border-bottom: 1px dotted $gray-400;
    }

    optgroup > option {
@@ -170,7 +216,7 @@ select {
  // For some reason nested selectors will not work
  select[multiple] option {
    padding: $input-padding-vertical $input-padding-horizontal;
-    border-bottom: 1px dotted $gray-lighter;
+    border-bottom: 1px dotted $gray-400;
  }
 }

@@ -204,9 +250,9 @@ span.required {
  position: relative;
  top: 3px;
  margin-left: -.2em;
-  color: #d00;
+  color: $red;
  font-size: 1.5em;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
  line-height: 0;
 }

@@ -217,9 +263,10 @@ span.required {
 em.info {
  display: block;
  padding: 2px 0;
-  color: $gray;
+  color: $gray-700;
  font-size: $font-size-small;
  font-style: normal;
+  line-height: $line-height-base;
 }


@@ -253,10 +300,22 @@ em.info {
    margin: 0 0 ($line-height-computed / 2);
    padding-left: $label-width + $label-space;
    clear: left;
+    line-height: $input-height-base;

    .jstEditor {
      margin-bottom: 0;
    }
+
+    .bool_cf:not(.check_box_group) {
+      display: block;
+      padding-top: $input-padding-vertical + 1px;
+      line-height: $line-height-base;
+
+      > input[type="checkbox"],
+      > input[type="radio"] {
+        margin-left: 0;
+      }
+    }
  }

  input,
@@ -270,23 +329,17 @@ em.info {
    resize: vertical;
  }

-  input[type="radio"],
-  input[type="checkbox"] {
-    position: relative;
-    top: 3px;
-    vertical-align: baseline;
-  }
-
  span[title] {
-    border-bottom: 1px dotted #aaa;
+    border-bottom: 1px dotted $gray-600;
  }

  label {
    width: $label-width;
-    margin-top: $input-padding-vertical + 1px;
    margin-bottom: $input-padding-vertical + 1px;
    margin-left: -($label-width + $label-space);
+    padding-top: $input-padding-vertical + 1px;
    float: left;
+    line-height: $line-height-base;
    text-align: right;
    user-select: none;

@@ -301,10 +354,16 @@ em.info {
      display: block;
      width: auto;
      margin-left: 0;
-      padding-left: 16px;
+      padding-left: $check-input-gutter;
      float: none;
      text-align: left;
      cursor: pointer;
+
+      > input[type="checkbox"],
+      > input[type="radio"] {
+        margin-left: -$check-input-gutter;
+        float: left;
+      }
    }

    &.inline {
@@ -315,32 +374,47 @@ em.info {
      padding-left: 34px;
    }

-    > input[type="radio"],
-    > input[type="checkbox"] {
-      top: 1px;
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-vertical;
+      margin-left: 0;
+    }
+
+    ~ input[type="checkbox"],
+    ~ input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+      margin-left: 0;
    }
  }
 }

 label.inline {
  display: inline-block;
-  margin-right: $padding-base-horizontal;
-  padding-left: 16px;
+  margin-right: $check-input-margin-horizontal;
+  padding-left: $check-input-gutter;
  float: none;
-  text-align: left;
-  cursor: pointer;

  &:last-child {
    margin-right: 0;
  }
+
+  > input {
+    margin-left: -$check-input-gutter;
+    float: left;
+  }
+
+  input + & {
+    padding-left: 0;
+  }
 }

-label.inline,
 label.block {
+  display: block;
+  width: auto;
+
  > input {
-    margin-top: .2em;
-    margin-left: -16px;
-    float: left;
+    margin-right: 3px;
+    margin-left: 3px;
  }
 }

@@ -348,9 +422,8 @@ label.block {
 //== Hack: align description edit icon with label
 //

-label[for=issue_description] + a {
+label[for="issue_description"] + a {
  display: inline-block;
-  margin-top: $input-padding-vertical + 1px;

  img {
    vertical-align: middle;
@@ -361,9 +434,7 @@ label[for=issue_description] + a {
 //== Hack: better looking filter checkbox in sidebar in projects list
 //

-label[for=closed] {
-  @include check;
-  display: block;
+label[for="closed"] {
  margin-bottom: $line-height-computed / 2;
 }

@@ -394,7 +465,7 @@ label[for=closed] {
  $input-height-large:             (ceil($font-size-large-px * $line-height-large) + ($input-padding-large-vertical * 2) + 2);

  label[for="issue_subject"] {
-    margin-top: floor($input-padding-large-vertical * $line-height-large + 1px);
+    padding-top: $input-padding-large-vertical;
  }

  #issue_subject {
@@ -528,34 +599,43 @@ label[for=closed] {

 #issue_is_private_wrap,
 #all_attributes > p[style] {
-  margin-right: 0 !important; // scss-lint:disable ImportantRule
+  margin-right: 0 !important; // stylelint-disable-line declaration-no-important
  margin-bottom: 0;
  padding-left: 0;
  float: right;

  input {
-    top: 2px;
+    margin-top: $check-input-margin-btn-v;
+    margin-right: 3px;
  }

  label {
+    display: inline-block !important; // stylelint-disable-line declaration-no-important
    margin-right: 0;
    padding-left: 0;
  }
 }


+#users_for_watcher,
 #watchers_inputs {
  display: block;
-  max-width: 64em;
  max-height: $check-list-max-height;
  margin-bottom: $line-height-computed / 2;
-  padding-top: $check-list-offset-top;
  overflow: auto;
-  columns: 18em 3;

-  label.floating {
+  label {
    @include check-list;
  }
+
+  .gravatar {
+    margin-right: $padding-small-vertical;
+  }
+}
+
+#watchers_inputs {
+  max-width: 64em;
+  columns: 18em 3;
 }


@@ -566,20 +646,21 @@ label[for=closed] {
  display: block;
  width: 90%;
  max-height: $check-list-max-height;
-  padding-top: $check-list-offset-top;
  overflow-y: auto;

  label {
    @include check-list;
  }

-  // Boolean field displayed as inline radio buttons
-  &.bool_cf {
-    overflow: initial;
+  @media screen and (min-width: $redmine-responsive-min) {
+    // Boolean field displayed as inline radio buttons
+    &.bool_cf {
+      overflow: initial;

-    label {
-      display: inline-block;
-      margin-right: $check-input-margin-horizontal;
+      label {
+        display: inline-block;
+        margin-right: $check-input-margin-horizontal;
+      }
    }
  }
 }
@@ -595,14 +676,14 @@ fieldset#filters {
    }
  }

-  .add-filter {
-    text-align: right;
-  }
-
  td {
    &.field {
-      min-width: 180px;
      padding-right: $table-cell-padding * 2;
+      white-space: nowrap;
+
+      @media screen and (min-width: $screen-sm-min) {
+        min-width: 180px;
+      }
    }

    &.operator {
@@ -625,13 +706,22 @@ fieldset#filters {

    &.add-filter {
      padding-top: $table-condensed-cell-padding * 2;
-      vertical-align: top;
+      text-align: right;
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
    }
  }

  div.add-filter {
    padding-top: $table-condensed-cell-padding;
-    float: right;
+
+    @media screen and (min-width: $redmine-responsive-min) {
+      float: right;
+      text-align: right;
+    }
  }
 }

@@ -640,6 +730,38 @@ fieldset#filters {
 }


+#activity_scope_form {
+  li {
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
+  }
+}
+
+
+#query_form {
+  p {
+    input,
+    select,
+    label,
+    .icon,
+    .icon-only,
+    > span > a {
+      line-height: inherit;
+      vertical-align: middle;
+    }
+  }
+}
+
+.query_sort_criteria_count {
+  display: inline-block;
+  min-width: 1em;
+  margin-bottom: $line-height-computed / 4;
+  line-height: $input-height-base;
+}
+
+
 //== Reset label style for trackers selector in custom field editor
 //

@@ -648,5 +770,6 @@ label.no-css {
  margin-left: 0;
  float: none;
  font-weight: inherit;
+  line-height: inherit;
  text-align: left;
 }
--- a/src/sass/components/_gantt.scss
+++ b/src/sass/components/_gantt.scss
@@ -2,25 +2,113 @@
 // Gantt chart
 // --------------------------------------------------

+div.gantt_content {
+  overflow: auto;
+}
+
+.controller-gantts form + table,
+table.gantt-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    padding: 0;
+    vertical-align: top;
+  }
+}
+
 .gantt_hdr {
  position: absolute;
  top: 0;
  height: 16px;
  overflow: hidden;
-  border: 1px solid $gray-lighter;
-  border-left-width: 0;
+  border: 1px solid $gray-500;
  text-align: center;

+  &[style*="background"] {
+    background: $gray-200 !important; // stylelint-disable-line declaration-no-important
+  }
+
  &.nwday {
-    background-color: $gray-lightest;
+    background-color: $gray-200;
+    color: $gray-950;
+  }
+
+  #gantt_area & {
+    border-right-width: 1px;
+    border-left-width: 0;
+  }
+
+  .gantt_subjects_container:not(.draw_selected_columns) &,
+  .last_gantt_selected_column & {
+    z-index: 1;
+  }
+}
+
+.gantt_subjects_container .gantt_subjects {
+  z-index: 2;
+}
+
+.gantt_subjects_column {
+  .gantt_hdr {
+    border-left: 1px solid $gray-500 !important; // stylelint-disable-line declaration-no-important
+  }
+
+  + td {
+    padding: 0;
  }
 }

 .gantt_subjects {
-  font-size: $font-size-small;
+  .issue-subject {
+    &:hover {
+      background-color: $table-bg-hover;
+    }

+    img.icon-gravatar {
+      float: none;
+    }
+  }
+}
+
+.gantt_hdr_selected_column_name {
+  @include text-overflow;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  transform: translateY(-50%);
+  font-size: $font-size-small;
+}
+
+td.gantt_selected_column {
+  width: 60px;
+}
+
+td.gantt_selected_column .gantt_hdr,
+.gantt_selected_column_container {
+  width: 60px - 1px;
+  border-left-width: 0;
+}
+
+.gantt_subjects {
+  position: relative;
+  z-index: 1;
+  font-size: $font-size-small;
+}
+
+.gantt_selected_column_content {
+  div {
+    box-sizing: border-box;
+    padding-right: $table-condensed-cell-padding;
+    padding-left: $table-condensed-cell-padding;
+  }
+}
+
+.gantt_subjects,
+.gantt_selected_column_content {
  div {
    @include text-overflow;
+    width: 100%;
    height: 16px;
    line-height: 16px;
  }
@@ -118,12 +206,20 @@
 .version-behind-schedule,
 .issue-behind-schedule {
  color: $brand-warning;
+
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }

 .version-overdue,
 .issue-overdue,
 .project-overdue {
  color: $brand-danger;
+
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }


@@ -137,20 +233,20 @@
  &:hover {
    z-index: 25;

-    .tip {
+    span.tip {
      display: block;
    }
  }

-  .tip {
+  span.tip {
    @include nice-shadow(3);
    display: none;
    position: absolute;
-    top: 9px;
-    left: 24px;
+    top: 12px;
    width: 270px;
    padding: $padding-base-vertical;
    border: $tooltip-border-width solid $tooltip-border;
+    border-radius: $border-radius-small;
    background-color: $tooltip-bg;
    color: $tooltip-text;
    font-size: $font-size-small;
@@ -158,9 +254,9 @@
  }

  @if $sidebar-position == "left" {
-    tr > td:last-child & {
-      .tip {
-        right: 2px;
+    .list & {
+      span.tip {
+        right: 0;
        left: auto;
      }
    }
--- a/src/sass/components/_icons.scss
+++ b/src/sass/components/_icons.scss
--- a/src/sass/components/_image-base64.scss
+++ b/src/sass/components/_image-base64.scss
@@ -4,41 +4,5 @@

 // ACI = AutoComplete Indicator
 %image-aci {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
-}
-
-%image-arrow-up {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgFIFe2wwFmA2CKQAAAArSURBVAjXYyASGBlAGYoKEJpNUAzCKBEUKQDRzIGCgsEgBpOgoKAQA5kAAOOzAuqv1pGxAAAAAElFTkSuQmCC);
-}
-
-%image-arrow-right {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACXRSTlMAgF1mUUUMBwa6cf6pAAAAIklEQVQI12PADwJgDBEYQ1ADxhBOgDIEFdBF1GG6EOYQCQC/wwKE7b2bNAAAAABJRU5ErkJggg==);
-}
-
-%image-arrow-down {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgFIFbDAWVn1ccuIAAAAsSURBVAjXYyANMAkKCgqBGMyOgoLOYKFEQcEEMINVUBSqSlEByjA3YCARAADFOwKnW3vw7AAAAABJRU5ErkJggg==);
-}
-
-%image-arrow-left {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
-}
-
-%image-arrow-up-white {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR4Xu2SMQqAMAxFVUxOID2FQ+9R3cRjesX4A5lCoaUFB2nhkeQPLxQyi8jU8xbwYwGBC1CrIIFda4sgKq6vFgS/1eZQI2BwZ/5NlnNJcIAtt8ny04ermx/l4zsYgheccgigTIfmMAAAAABJRU5ErkJggg==);
-}
-
-%image-arrow-down-white {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMAgFIFbBZWMTBl3YBFAAAALElEQVQI12MgDTAJCgoKgRjMjoKCzmChQEHBADCDQ1AcqkpRAcowM2AgEQAAvM4CiwrixCQAAAAASUVORK5CYII=);
-}
-
-%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=);
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==");
 }
--- a/src/sass/components/_issue.scss
+++ b/src/sass/components/_issue.scss
@@ -3,13 +3,18 @@
 // --------------------------------------------------

 .issue {
+  @if not $clean-issues {
+    &.details {
+      padding: $issue-padding;
+      border: 1px solid $issue-border;
+      border-radius: $border-radius-base;
+      background-color: $issue-bg;
+      color: $issue-text;
+    }
+  }
+
  &.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 {
@@ -67,10 +72,10 @@
    > .subject {
      h3 {
        margin-bottom: .3em;
-        color: $gray-darkest;
+        color: $gray-950;
        font-size: $issue-heading-size * 1em;
        font-weight: $font-weight-bold;
-        line-height: 1.2;
+        line-height: 1.1;
      }

      p {
@@ -83,8 +88,13 @@
      margin-bottom: $line-height-computed;
    }

-    > hr {
-      margin: $issue-padding (-$issue-padding);
+    > hr,
+    .attribute > hr {
+      @if $clean-issues {
+        margin: $issue-padding 0;
+      } @else {
+        margin: $issue-padding (-$issue-padding);
+      }
      border-top-color: $issue-border;
    }

@@ -94,19 +104,65 @@
      }

      > .wiki {
-        margin: 0 (-$issue-padding) (-$issue-padding);
-        padding: $padding-wiki;
-        border-top: 1px solid $issue-border;
-        background: $body-bg;
+        @if $clean-issues {
+          margin: 0 0 $issue-padding;
+        } @else {
+          margin: 0 (-$issue-padding) (-$issue-padding);
+          padding: $padding-wiki;
+          border-top: 1px solid $issue-border;
+          background: $body-bg;
+        }
      }
    }

    .next-prev-links {
-      color: $gray-light;
+      margin: 0 0 $line-height-computed;
+      float: none;
+      color: $gray-600;
+
+      @media screen and (min-width: $screen-md-min) {
+        margin: 0;
+        float: right;
+      }
    }
  }

-  .attributes {
+  @if $color-status {
+    .attributes td.status,
+    .attributes .attribute.status .value {
+      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: $status-default-bg;
+      color: $status-default-color;
+      font-size: $font-size-small;
+      font-weight: $font-weight-bold;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    @each $status, $status-colors in $status-colors-map {
+      &.#{$status} {
+        .attributes td.status,
+        .attributes .attribute.status .value {
+          background-color: map-get($status-colors, background);
+          color: map-get($status-colors, color);
+        }
+      }
+    }
+  }
+
+  @if $priority-icon {
+    .attributes td.priority,
+    .attribute.priority .value {
+      @include priority-icon-base;
+    }
+  }
+
+  table.attributes {
    width: 100%;

    th,
@@ -118,74 +174,77 @@

    > tbody > tr {
      th {
-        font-weight: normal;
+        color: $gray-700;
+        font-weight: $font-weight-normal;
      }

      td {
-        color: $gray-darkest;
+        color: $gray-950;
      }
    }

    @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;
+          width: $label-width;
        }

        > td {
-          width: auto;
-          min-width: 16em;
+          min-width: $label-width;
        }
      }
    }
  }

-  @if $color-status {
-    .attributes td.status,
-    .attribute.status .value {
-      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: $font-weight-bold;
-      text-align: center;
-      text-transform: uppercase;
-    }
+  div.attributes {
+    @if $css-grid-layout {
+      display: grid;
+      grid-gap: 0 $padding-side;
+      grid-template-columns: auto;

-    &.status-1 {
-      .attributes td.status,
-      .attribute.status .value {
-        background-color: $brand-info;
+      @media screen and (min-width: $screen-lg-min) {
+        grid-template-columns: repeat(2, minmax(auto, max-content));
+
+        .attribute .value {
+          min-width: $label-width;
+        }
      }
-    }

-    &.closed {
-      .attributes td.status,
-      .attribute.status .value {
-        background-color: $brand-danger;
+      .splitcontent {
+        display: contents;
+
+        &::after {
+          content: none;
+        }
+      }
+
+      .splitcontentleft {
+        width: auto;
+        padding-right: 0;
+        padding-left: 0;
+        float: none;
+      }
+    } @else {
+      @media screen and (min-width: $screen-lg-min) {
+        .splitcontentleft {
+          width: auto;
+        }
+
+        .attribute .value {
+          min-width: $label-width;
+        }
      }
    }
  }

-  .splitcontentleft {
-    @media screen and (min-width: $screen-lg-min) {
-      width: auto;
+  .splitcontent {
+    .attribute {
+      padding-left: $label-width;
+
+      .label {
+        width: $label-width;
+        margin-left: -$label-width;
+      }
    }
  }

@@ -198,20 +257,20 @@
    }

    .label {
-      width: 25%;
+      box-sizing: border-box;
      float: left;
-
-      @media screen and (min-width: $screen-lg-min) {
-        width: 14em;
-      }
+      color: $gray-700;
    }

    .value {
-      color: $gray-darkest;
+      color: $gray-950;

-      @media screen and (min-width: $screen-lg-min) {
-        width: auto;
-        min-width: 14em + 16em;
+      &:empty::after {
+        content: "-";
+      }
+
+      *:last-child {
+        margin-bottom: 0;
      }
    }
  }
@@ -231,13 +290,18 @@
    padding: $issue-padding;
    border-top: 1px solid $issue-border;
  }
+
+  // Restore margin below buttons in reverse chronological mode
+  + div[style] + .contextual {
+    margin-bottom: $line-height-computed;
+  }
 }

 div.fileover {
  background-color: $highlight-bg;
 }

-div.attachments {
+div.attachments:not(.box) {
  padding: $line-height-computed 0;
  border-top: 1px solid $issue-border;

@@ -262,15 +326,15 @@ div.attachments {
  }

  .delete {
-    opacity: .5;
+    opacity: $icon-opacity;

    &:hover {
-      opacity: 1;
+      opacity: $icon-hover-opacity;
    }
  }

  span.author {
-    color: $gray;
+    color: $gray-700;
    font-size: $font-size-small;
  }
 }
@@ -285,12 +349,12 @@ div.thumbnails {
  a {
    display: inline-block;
    margin-right: 2px;
-    border: 1px solid $gray-lighter;
+    border: 1px solid $gray-400;
    border-radius: $border-radius-base;
    background-color: $body-bg;

    &:hover {
-      border-color: $gray-light;
+      border-color: $gray-600;
    }
  }

@@ -298,6 +362,7 @@ div.thumbnails {
    top: 0;
    margin: 3px;
    border-radius: $border-radius-base - 1;
+    vertical-align: middle;
  }
 }

@@ -329,10 +394,27 @@ div.thumbnails {
    td.buttons {
      width: 3em;
      vertical-align: middle;
+
+      a:not(:first-child) {
+        margin-left: 2px;
+      }
    }
  }
 }

+#trackers_description {
+  display: none;
+
+  dt {
+    margin: 0 0 ($line-height-computed / 4);
+  }
+
+  dd {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
 #new-relation-form {
  text-align: right;

@@ -345,9 +427,13 @@ div.thumbnails {
  }
 }

-#history {
-  overflow: auto;
+#update > form {
+  margin-bottom: $line-height-computed;
+  padding-bottom: $line-height-computed;
+  border-bottom: 1px solid $issue-border;
+}

+#history {
  > .tabs {
    margin-bottom: $line-height-computed + 2px * 2;
  }
@@ -379,61 +465,88 @@ div.thumbnails {

 .journal {
  position: relative;
-  margin-bottom: $line-height-computed + 2px * 2;
+  margin-bottom: $line-height-computed;
+  border: 1px solid $bubble-border;
+  border-radius: $panel-border-radius;

  @if $use-gravatars {
    margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
  }

-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    z-index: -1;
-    top: -($line-height-computed + 2px);
-    left: 22px;
-    width: 4px;
-    height: $line-height-computed;
-    background-color: darken($body-bg, 5%);
-  }
+  &.changeset {
+    h4 + p {
+      margin-bottom: 0;
+      padding-bottom: $bubble-padding-vertical;
+      background-color: $bubble-bg;
+      font-size: $font-size-list;

-  .tabs + &::before {
-    display: none;
+      > a:first-child {
+        font-family: $font-family-monospace;
+        font-weight: $font-weight-bold;
+      }
+    }
  }

  > div {
-    border: 1px solid $issue-border;
-    border-radius: $panel-border-radius;
-
    &:target {
-      border-color: darken($issue-border, 25%);
+      $border: $bubble-target-border;
+      $shadow: rgba($bubble-target-border, $bubble-target-shadow-alpha);
+      position: relative;
+      margin-top: -($responsive-header-height + 4px);
+      padding-top: ($responsive-header-height + 4px);
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: ($responsive-header-height + 4px);
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: $panel-border-radius - 1px;
+        box-shadow: 0 0 0 1px $border, 0 0 0 4px $shadow;
+        pointer-events: none;
+      }

      @if $use-gravatars {
-        h4::before {
-          border-right-color: darken($issue-border, 25%);
+        > h4::before {
+          border-right-color: $border;
+          filter: drop-shadow(-4px 0 0 $shadow);
+        }
+      }
+
+      @media screen and (min-width: $redmine-responsive-min) {
+        margin-top: -$line-height-computed;
+        padding-top: $line-height-computed;
+
+        &::before {
+          top: $line-height-computed;
        }
      }
    }
  }

  // For Redmine 4.0+
-  > div > .contextual {
+  > div > .contextual,
+  > .contextual {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: $bubble-padding-vertical $bubble-padding-horizontal;
    font-size: $font-size-list;

-    > .journal-actions > a {
-      opacity: .5;
+    a {
+      opacity: $icon-opacity;

      &:hover {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
      }
    }

    > a.journal-link {
-      color: $gray;
+      padding-left: $issue-attribute-padding-h;
+      opacity: 1;
+      color: $gray-700;

      &::before {
        content: "";
@@ -441,16 +554,18 @@ div.thumbnails {
    }
  }

-  > div > h4 {
+  > div > h4,
+  > 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;
+    background-color: $bubble-bg;
+    color: $gray-700;
    font-size: $font-size-list;
+    font-weight: $font-weight-normal;

    a {
-      color: $gray-darker;
+      color: $gray-900;

      &.user {
        font-weight: $font-weight-bold;
@@ -458,12 +573,13 @@ div.thumbnails {
    }

    .journal-link {
-      color: $gray;
+      color: $gray-700;
    }
  }

  @if $use-gravatars {
-    > div > h4 {
+    > div > h4,
+    > h4 {
      position: relative;

      &::before,
@@ -485,12 +601,12 @@ div.thumbnails {
        margin-top: 1px;
        margin-left: 2px;
        border-width: 6px;
-        border-right-color: $issue-bg;
+        border-right-color: $bubble-bg;
      }

      &::before {
        border-width: 7px;
-        border-right-color: $issue-border;
+        border-right-color: $bubble-border;
      }

      > .gravatar {
@@ -502,35 +618,27 @@ div.thumbnails {
    }
  }

+  > p {
+    padding-right: $bubble-padding-horizontal;
+    padding-left: $bubble-padding-horizontal;
+
+    &:empty {
+      margin-bottom: 0;
+    }
+  }
+
+  form,
+  .wiki,
+  .details {
+    border-top: 1px solid $bubble-border;
+  }
+
  .details {
    margin: 0;
    padding: $bubble-padding-vertical 0;
-    padding-left: $bubble-padding-horizontal * 3;
-    list-style: none;
-    border-top: 1px solid mix($body-bg, $issue-border, 50%);
+    padding-left: $bubble-padding-horizontal + 20px;
    font-size: $font-size-list;

-    li {
-      position: relative;
-      margin-bottom: $bubble-padding-vertical / 2;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &::before {
-        content: "";
-        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;
-      }
-    }
-
    img {
      margin: 0 0 -3px 4px;
    }
@@ -545,18 +653,26 @@ div.thumbnails {
    }
  }

-  .wiki,
-  form {
+  .wiki {
    padding: $issue-padding;
-    border-top: 1px solid mix($body-bg, $issue-border, 50%);
  }

  form {
-    padding-top: 5px;
-    background-color: $gray-lightest;
+    padding: $bubble-padding-vertical $bubble-padding-horizontal $bubble-padding-horizontal;
+    background-color: $bubble-bg;

    > p {
      margin-bottom: $issue-padding;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    > label {
+      display: inline-block;
+      margin-bottom: $line-height-computed / 2;
+      line-height: $line-height-base;
    }

    > .wiki {
@@ -593,12 +709,10 @@ div.thumbnails {
 }

 .private-notes {
-  > div {
-    border-left-color: $brand-warning;
+  border-left-color: $brand-warning;

-    h4::before {
-      border-right-color: $brand-warning;
-    }
+  > div > h4::before {
+    border-right-color: $brand-warning;
  }
 }

@@ -626,21 +740,29 @@ span.private {

  @media screen and (min-width: $screen-md-min) {
    width: 45%;
-    margin-left: $padding-side;
    float: right;
+
+    + #history {
+      margin-right: 45%;
+      padding-right: $padding-side;
+    }
  }

  @media screen and (min-width: $screen-lg-min) {
    width: 33%;
-    min-width: 28em;
+
+    + #history {
+      margin-right: 33%;
+    }
  }

  div.changeset {
    margin-top: $line-height-computed / 2 + 2px * 2;
+    padding: 0;
    overflow: hidden;
-    border: 1px solid $issue-border;
+    border: 1px solid $bubble-border;
    border-radius: $panel-border-radius;
-    background-color: $issue-bg;
+    background-color: $bubble-bg;
    font-size: $font-size-list;

    &:first-of-type {
@@ -651,15 +773,15 @@ span.private {
      @include clearfix;
      margin: 0;
      padding: $padding-base-vertical $padding-base-horizontal;
-      color: $gray;
+      color: $gray-700;

-      > a {
+      > a:first-child {
        font-family: $font-family-monospace;
        font-weight: $font-weight-bold;
      }

      .author a {
-        color: $gray-darker;
+        color: $gray-900;

        &.user {
          font-weight: $font-weight-bold;
@@ -673,7 +795,7 @@ span.private {

    > .wiki {
      padding: $padding-base-vertical $padding-base-horizontal;
-      border-top: 1px solid mix($body-bg, $issue-border, 50%);
+      border-top: 1px solid $bubble-border;
      background-color: $body-bg;
    }
  }
--- a/src/sass/components/_jquery-ui.scss
+++ b/src/sass/components/_jquery-ui.scss
@@ -127,6 +127,7 @@
 }

 .ui-sortable-helper {
+  background-color: $body-bg;
  @include nice-shadow(4);
 }

@@ -138,6 +139,23 @@
  @include nice-shadow(2);
  padding: 3px;
  border-radius: $panel-border-radius;
+
+  .ui-menu-item {
+    &.ui-state-focus,
+    &.ui-state-active {
+      border-color: $pagination-hover-border;
+      background-color: $pagination-hover-bg;
+      color: $pagination-hover-color;
+
+      a {
+        color: $pagination-hover-color;
+      }
+
+      .ui-icon {
+        background-image: url("../../../stylesheets/jquery/images/ui-icons_222222_256x240.png");
+      }
+    }
+  }
 }

 .ui-menu-item {
@@ -282,7 +300,7 @@ img.ui-datepicker-trigger {

      &.ui-datepicker-week-col {
        padding-right: $table-condensed-cell-padding;
-        color: $gray-light;
+        color: $gray-600;
      }
    }
  }
@@ -298,3 +316,17 @@ img.ui-datepicker-trigger {
    }
  }
 }
+
+.ui-tooltip {
+  @include nice-shadow(1);
+  padding: $padding-small-vertical $padding-small-horizontal;
+  border: 0 none;
+  background: $black;
+  color: $white;
+  font-size: $font-size-small-px;
+  pointer-events: none;
+
+  &.qtip {
+    pointer-events: initial;
+  }
+}
--- a/src/sass/components/_jstoolbar.scss
+++ b/src/sass/components/_jstoolbar.scss
@@ -6,35 +6,50 @@
 #content {
  div.jstTabs.tabs {
    height: auto;
+
    @if $flexbox-layout {
      @media screen and (max-width: $redmine-responsive-max) {
        clear: both;
      }
    }

-    ul {
+    > ul {
      width: 100%;
      height: auto;

-      li {
+      > li {
        height: auto;
        margin: 0;

+        > a {
+          &:hover,
+          &:focus {
+            border-color: darken($tab-hover-border, 3%) darken($tab-hover-border, 3%) $tab-border;
+            background-color: darken($tab-hover-bg, 3%);
+          }
+
+          &.selected {
+            border-color: $tab-active-border $tab-active-border $tab-active-bg;
+            background: $tab-active-bg;
+            color: $tab-active-text;
+
+            &.tab-preview {
+              border-bottom-color: $wiki-preview-bg;
+              background-color: $wiki-preview-bg;
+            }
+          }
+        }
+
+        @if $flexbox-layout {
+          align-self: flex-end;
+        }
+
        &::before {
          content: none;
        }

-        &:not(.tab-elements) {
-          @if $flexbox-layout {
-            align-self: flex-end;
-          }
-
-          .selected {
-            border-color: $input-border $input-border $tab-active-bg;
-          }
-        }
-
        &.tab-elements {
+          flex: 1;
          margin-left: 5px;
        }
      }
@@ -47,7 +62,7 @@

  .jstEditor {
    .wiki-preview {
-      padding: $input-padding-vertical $input-padding-horizontal;
+      padding: $panel-body-padding;
      border: 1px solid $input-border;
      border-radius: $input-border-radius;
      background-color: $wiki-preview-bg;
@@ -61,14 +76,12 @@

 div.jstElements {
  @extend %clearfix;
+  line-height: normal;

  .box & {
+    display: block;
    padding: 0;

-    button {
-      margin-right: 2px;
-    }
-
    .jstSpacer {
      margin-right: 4px;
    }
@@ -80,153 +93,155 @@ div.jstElements {
        float: right;
      }
    }
-
-    @media (min-width: $screen-lg) {
-      button {
-        margin-right: 4px;
-      }
-
-      .jstSpacer {
-        margin-right: 6px;
-      }
-    }
  }

  button {
-    margin-bottom: 5px;
+    margin-right: 2px;
+    margin-bottom: 4px;
    padding: 0;
-    background-color: $body-bg;
+    border: 0;
+    opacity: 1;
+    background-color: transparent;
    box-shadow: none;
-    color: $btn-default-color;
+    color: $gray-800;
    vertical-align: top;

    &::before {
      text-align: center;
    }
-  }
-}

-@if $use-font-awesome {
-  .jstElements {
-    %jstb-icon {
-      @include fa-icon;
-      background-image: none;
-    }
-
-    .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 { content: $fa-var-header; font-size: .7857em; }
-    }
-
-    .jstb_h3 {
-      @extend %jstb-icon;
-
-      &::before { content: $fa-var-header; font-size: .6429em; }
-    }
-
-    .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; }
-    }
-
-    .jstb_precode,
-    // 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; }
+    &:hover,
+    &:focus {
+      background-color: darken($tab-hover-bg, 3%);
+      color: $gray-900;
    }
  }
+
+  %jstb-icon {
+    @include fa-icon;
+    background: transparent;
+    background-image: none;
+  }
+
+  .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 { content: $fa-var-header; font-size: .7857em; }
+  }
+
+  .jstb_h3 {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-header; font-size: .6429em; }
+  }
+
+  .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; }
+  }
+
+  .jstb_precode,
+  // For plugin https://github.com/mediatainment/redmine_codebutton
+  .jstb_codehighlight {
+    @extend %jstb-icon;
+    color: $brand-danger;
+
+    &::before { content: $fa-var-code; }
+  }
+
+  .jstb_table {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-table; }
+  }
+
+  button.jstb_help {
+    @extend %jstb-icon;
+    color: $link-color;
+
+    &:hover {
+      color: $link-hover-color;
+    }
+
+    &::before { content: $fa-var-question-circle; }
+  }
 }
--- a/src/sass/components/_list.scss
+++ b/src/sass/components/_list.scss
@@ -2,6 +2,11 @@
 // Lists
 // --------------------------------------------------

+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
 table.list {
  width: 100%;
  margin-bottom: $line-height-computed;
@@ -20,11 +25,18 @@ table.list {
    padding: $table-cell-padding;
    border: 2px solid $table-border-color;
    border-width: $table-list-header-border;
-    color: $gray;
+    background-color: $table-list-header-bg;
+    color: $gray-700;
    vertical-align: bottom;

+    @if $table-list-header-bg == $body-bg {
+      @at-root .box & {
+        background-color: $panel-bg;
+      }
+    }
+
    a {
-      color: $gray-darker;
+      color: $gray-900;
    }
  }

@@ -32,12 +44,6 @@ table.list {
    background-color: $highlight-bg;
  }

-  @if $table-list-highlight-rows {
-    > tbody > tr:hover {
-      background-color: $table-bg-hover;
-    }
-  }
-
  td {
    padding: $table-cell-padding;
    border: 1px solid $table-border-color;
@@ -45,22 +51,23 @@ table.list {
    text-align: center;
    vertical-align: top;

-    @if $use-font-awesome {
-      &.icon {
-        padding-left: $table-cell-padding + 20px;
-      }
+    &.icon {
+      padding-left: $table-cell-padding + $icon-width;
    }

    &.id,
+    &.issue_id,
+    &.legacy_id,
    &.parent,
    &.relations,
    &.tracker {
      width: 2%;
    }

-    &.id {
+    &.id,
+    &.issue_id,
+    &.legacy_id {
      font-weight: $font-weight-bold;
-      text-align: right;
    }

    &.reorder {
@@ -79,15 +86,17 @@ table.list {
      padding-right: $table-cell-padding;
      padding-left: $table-cell-padding;

+      @if (parse-length($table-list-item-border, right) == 0) {
+        &:first-child {
+          padding-right: 0;
+        }
+      }
+
      input {
        margin: 2px 0 0;
      }
    }

-    &.id {
-      text-align: right;
-    }
-
    &.activity,
    &.assigned_to,
    &.attachments,
@@ -111,6 +120,8 @@ table.list {
      text-align: left;
    }

+    &.id,
+    &.legacy_id,
    &.estimated_hours,
    &.float,
    &.int,
@@ -128,10 +139,10 @@ table.list {
      white-space: nowrap;

      a {
-        padding-right: 5px;
+        margin-right: $padding-small-vertical;

        &.icon-only {
-          padding: 0;
+          margin-right: 0;
        }
      }

@@ -162,11 +173,11 @@ tr.project {
  &.archived,
  &.closed a,
  &.archived a {
-    color: #aaa;
+    color: $gray-600;
  }

  &.idnt td.name {
-    @extend %image-arrow-right;
+    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
    background-repeat: no-repeat;
  }

@@ -182,10 +193,15 @@ tr.issue {
  text-align: center;
  white-space: nowrap;

+  .category,
+  .enumeration,
+  .list,
+  .parent-subject,
+  .parent,
+  .relations,
  .string,
-  .text,
  .subject,
-  .category {
+  .text {
    white-space: normal;
  }

@@ -210,10 +226,14 @@ tr.issue {
  }

  &.idnt td.subject {
-    @extend %image-arrow-right;
+    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
    background-repeat: no-repeat;
  }

+  &.overdue td.due_date {
+    color: $brand-danger;
+  }
+
  @for $i from 1 through 9 {
    &.idnt-#{$i} td.subject {
      padding-left: $table-cell-padding + 16px * $i;
@@ -223,10 +243,23 @@ tr.issue {
 }

 .issues {
+  .block_column,
  .description,
  .last_notes {
-    padding: $table-cell-padding;
+    padding: 0;
    text-align: left;
+    white-space: normal;
+
+    > span {
+      display: block;
+      margin-bottom: $line-height-computed / 4;
+      padding: $table-cell-padding;
+      font-weight: $font-weight-bold;
+    }
+
+    pre {
+      white-space: normal;
+    }

    @media screen and (min-width: $screen-sm-min) {
      > .wiki {
@@ -235,26 +268,39 @@ tr.issue {
        overflow: auto;
      }
    }
-
-    pre {
-      white-space: normal;
-    }
  }
 }

 tr {
  span.expander {
-    @extend %image-toggle-plus;
-    margin-left: 0;
-    padding-left: 8px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    cursor: pointer;
-    user-select: none;
+    display: inline-block;
+    padding: 0;
+    float: left;
+
+    &.icon {
+      padding-left: 18px;
+      text-align: center;
+
+      &::before {
+        margin: 0 0 0 -18px;
+        color: $gray-600;
+        font-size: 12px;
+      }
+    }
+
+    &:not(.icon) {
+      width: 18px;
+      padding: 0;
+      background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
+      background-repeat: no-repeat;
+      background-position: center center;
+      cursor: pointer;
+      user-select: none;
+    }
  }

-  &.open span.expander {
-    @extend %image-toggle-minus;
+  &.open span.expander:not(.icon) {
+    background-image: inline-svg("minus.svg", (path: (fill: $btn-default-icon-color)));
  }
 }

@@ -262,16 +308,41 @@ td.center {
  text-align: center;
 }

+td.assigned_to,
+td.last_updated_by {
+  white-space: normal;
+}
+
 .issue-report {
  table-layout: fixed;
 }

+.issue-report-graph {
+  width: 75%;
+  margin: $line-height-computed auto;
+}
+
+.sample-data {
+  margin: $line-height-computed / 2;
+  margin-bottom: $line-height-computed;
+  border: 1px solid $table-border-color;
+
+  td {
+    border: 1px solid $table-border-color;
+  }
+
+  tr:first-child td {
+    font-weight: $font-weight-bold;
+    text-align: center;
+  }
+}
+
 tr.builtin td.name {
  font-style: italic;
 }

 tr.entry {
-  border: 1px solid $gray-lighter;
+  border: 1px solid $gray-400;

  td {
    white-space: nowrap;
@@ -303,22 +374,40 @@ tr.entry {
  &.file td {
    &.filename a,
    &.filename_no_report a {
-      margin-left: 16px;
+      margin-left: 18px;
    }
  }
 }

@if $table-list-color-odd-rows {
-  table.list:not(.odd-even) tbody tr:nth-child(odd),
+  table.list:not(.odd-even) tbody tr:nth-child(odd):not(.ui-sortable-helper),
  .odd {
-    background-color: $table-bg-accent;
+    > td {
+      background-color: $table-bg-accent;
+    }
  }
 }

@if $table-list-color-even-rows {
-  table.list:not(.odd-even) tbody tr:nth-child(even),
+  table.list:not(.odd-even) tbody tr:nth-child(even):not(.ui-sortable-helper),
  .even {
-    background-color: $table-bg-accent;
+    > td {
+      background-color: $table-bg-accent;
+    }
+  }
+}
+
+@if $table-list-highlight-rows {
+  table.list > tbody > tr:nth-child(n):hover:not(.ui-sortable-helper) {
+    background-color: $table-bg-hover;
+
+    @if $color-priorities {
+      @each $priority-id, $priority-color in $priority-color-map {
+        &.priority-#{$priority-id} {
+          background-color: rgba(map-get($priority-color, background), $table-color-hover-factor);
+        }
+      }
+    }
  }
 }

@@ -326,17 +415,49 @@ tr.entry {
 //== Priorities
 //

+@if $priority-icon {
+  table.list tbody tr {
+    .priority {
+      @include priority-icon-base;
+    }
+  }
+
+  @each $priority-id, $priority-icon in $priority-icons-map {
+    @include priority-icon(
+      ".priority-#{$priority-id}",
+      map-get($priority-icon, color),
+      map-get($priority-icon, icon)
+    );
+  }
+}
+
@if $color-priorities {
-  // scss-lint:disable SpaceAfterComma
-  @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);
-  @include priority(".priority-high3",   $priority-high3-bg,   $priority-high3-text,   $priority-high3-link);
-  @include priority(".priority-high2",   $priority-high2-bg,   $priority-high2-text,   $priority-high2-link);
-  @include priority(".priority-highest", $priority-highest-bg, $priority-highest-text, $priority-highest-link);
+  @each $priority-id, $priority-color in $priority-color-map {
+    tr.priority-#{$priority-id} {
+      &.odd td {
+        background-color: rgba(map-get($priority-color, background), $table-color-odd-factor);
+      }
+
+      &.even td {
+        background-color: rgba(map-get($priority-color, background), $table-color-even-factor);
+      }
+
+      td {
+        border-color: map-get($priority-color, border);
+        color: map-get($priority-color, color);
+      }
+
+      a {
+        color: map-get($priority-color, link);
+      }
+    }
+  }
 }

@if $color-trackers {
  tr.issue .id > a,
+  tr.issue .issue_id > a,
+  tr.issue .legacy_id > a,
  a.issue,
  .relations > span > a.issue,
  .parent > a.issue {
@@ -359,7 +480,7 @@ tr.entry {
  a.issue {
    margin-right: 1px;
    padding: $tracker-inline-padding;
-    font-weight: normal;
+    font-weight: $font-weight-normal;

    &.closed {
      position: relative;
@@ -373,9 +494,9 @@ tr.entry {
        right: 5px;
        bottom: 0;
        left: 5px;
-        height: calc(50% - 2px/2);
+        height: calc(50% - 2px / 2);
        transform: rotate(-4deg);
-        transition: border-color .1s;
+        transition: border-color $transition-time;
        border-top: 2px solid rgba($tracker-default-text, .95);
      }

@@ -385,7 +506,8 @@ tr.entry {
    }
  }

-  tr.issue .id > a {
+  tr.issue .id > a,
+  tr.issue .legacy_id > a {
    display: block;
    padding: $tracker-list-padding;

@@ -395,14 +517,9 @@ tr.entry {
    }
  }

-  @if $colored-issue {
-    .issue.details a.issue,
-    .issue.details .wiki a.issue {
-      &,
-      &:hover {
-        color: $tracker-default-text;
-      }
-    }
+  tr.issue .issue_id > a {
+    display: inline-block;
+    padding: $tracker-list-padding;
  }

  @each $tracker-id, $tracker-colors in $tracker-colors-map {
@@ -431,25 +548,13 @@ tr.group {

  .toggle-all {
    display: none;
-    color: $gray-light;
-    font-weight: normal;
+    color: $gray-600;
+    font-weight: $font-weight-normal;
  }

  &:hover .toggle-all {
    display: inline;
  }
-
-  .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;
-  }
 }

 .toggle-all:hover {
@@ -507,7 +612,7 @@ tr.time-entry {
  }

  tr.time-entry td.hours {
-    font-weight: normal;
+    font-weight: $font-weight-normal;
  }
 }

@@ -526,10 +631,10 @@ tr.wiki-page-version {

 tr.version {
  &.closed {
-    color: $gray;
+    color: $gray-700;

    a {
-      color: $gray;
+      color: $gray-700;
    }
  }

@@ -568,7 +673,7 @@ tr.user {
  &.registered,
  &.locked a,
  &.registered a {
-    color: $gray-light;
+    color: $gray-600;
  }
 }

@@ -604,7 +709,7 @@ table.files {

  tr.file td {
    &.filename {
-      padding-left: 20px + $table-cell-padding;
+      padding-left: $icon-width + $table-cell-padding;
      text-align: left;
    }

@@ -647,6 +752,15 @@ table.list.enumerations {
 //

 .query-totals {
+  #content & {
+    margin-top: 0;
+
+    @media screen and (min-width: $redmine-responsive-min) {
+      margin-top: -($line-height-computed * 2 + $btn-padding-vertical);
+      text-align: right;
+    }
+  }
+
  > span {
    margin-right: $padding-base-horizontal;

--- a/src/sass/components/_login.scss
+++ b/src/sass/components/_login.scss
@@ -4,7 +4,7 @@

 #login-form {
  box-sizing: border-box;
-  margin: $line-height-computed * 2 auto;
+  margin: $line-height-computed * 2 auto $line-height-computed;

  label,
  input:not([type="checkbox"]) {
@@ -15,6 +15,7 @@
    display: block;
    margin-bottom: $padding-base-vertical;
    font-weight: $font-weight-bold;
+    line-height: inherit;

    &[for="autologin"] {
      @include check;
@@ -32,6 +33,11 @@
    margin-bottom: $panel-body-padding-vertical;
  }

+  #login-submit {
+    padding-top: $padding-base-vertical;
+    padding-bottom: $padding-base-vertical;
+  }
+
  table {
    margin: auto;
    table-layout: fixed;
--- a/src/sass/components/_plugins.scss
+++ b/src/sass/components/_plugins.scss
@@ -1,3 +1,45 @@
+//
+// Additionals
+// https://www.redmine.org/plugins/additionals
+// --------------------------------------------------
+
+#sidebar .sidebar-additionals {
+  ul,
+  ol {
+    margin: 0 0 ($line-height-computed / 2);
+    padding-left: 1.5em;
+
+    ul,
+    ol {
+      margin-bottom: 0;
+    }
+  }
+
+  ul {
+    // stylelint-disable selector-max-compound-selectors
+    li {
+      list-style-type: disc;
+
+      li {
+        list-style-type: circle;
+
+        li {
+          list-style-type: square;
+        }
+      }
+    }
+  }
+}
+
+.action-login .login-additionals {
+  font-size: 1em;
+
+  @media screen and (min-width: $login-form-box-breakpoint) {
+    max-width: $login-form-width;
+  }
+}
+
+
 //
 // Redmine Backlogs
 // https://github.com/HolonGlobe/redmine_backlogs
@@ -44,12 +86,122 @@
 }


+//
+// Redmine Banner
+// https://github.com/akiko-pusu/redmine_banner
+// --------------------------------------------------
+
+#global_banner {
+  .box {
+    margin-bottom: $line-height-computed;
+  }
+}
+
+.banner_area {
+  @media screen and (max-width: $redmine-responsive-max) {
+    #main #content > & {
+      margin-bottom: $line-height-computed;
+    }
+  }
+
+  .banner {
+    @extend %fa-icon;
+    margin: 0;
+    padding: $padding-large-vertical $padding-large-horizontal;
+    padding-left: $padding-large-horizontal + 8px + 16px;
+    border: 1px solid $component-border;
+    border-radius: $border-radius-base;
+    background: $component-bg;
+    color: $component-color;
+
+    @media screen and (min-width: $redmine-responsive-min) {
+      border-radius: 0;
+    }
+
+    &::before {
+      content: $fa-var-info;
+      margin-left: -(8px + 16px);
+      float: left;
+      line-height: $line-height-computed;
+    }
+
+    &_info {
+      border-color: $flash-info-border;
+      background-color: $flash-info-bg;
+      color: $flash-info-text;
+
+      &::before {
+        content: $fa-var-info-circle;
+      }
+    }
+
+    &_warn {
+      border-color: $flash-warning-border;
+      background-color: $flash-warning-bg;
+      color: $flash-warning-text;
+
+      &::before {
+        content: $fa-var-warning;
+      }
+
+      a,
+      ~ div a {
+        color: $flash-warning-link;
+      }
+    }
+
+    &_alert {
+      border-color: $flash-error-border;
+      background-color: $flash-error-bg;
+      color: $flash-error-text;
+
+      &::before {
+        content: $fa-var-exclamation-circle;
+      }
+
+      a,
+      ~ div a {
+        color: $flash-error-link;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol {
+      margin-bottom: $line-height-computed / 2;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  .banner_edit {
+    a {
+      margin-left: 5px;
+    }
+  }
+}
+
+
 //
 // Redmine Hearts
 // https://github.com/cat-in-136/redmine_hearts
 // --------------------------------------------------

 .journal > div + .contextual {
+  padding-top: 0;
+  padding-bottom: 0;
  border: 0;

  > .heart-link-with-count {
@@ -63,9 +215,10 @@
  }
 }

-@if $use-font-awesome {
-  .icon.icon-heart,
-  .icon.icon-heart-off {
+.contextual {
+  .icon-heart,
+  .icon-heart-off {
+    margin-left: $padding-small-vertical;
    background-image: none;
  }

@@ -90,58 +243,102 @@
  }
 }

+#content > .contextual {
+  > span.heart-link-with-count {
+    padding: 0;
+    border: 0;
+    background: transparent;
+
+    > a:first-child {
+      margin-right: 0;
+      margin-left: 4px;
+      padding-right: floor($btn-padding-horizontal-small / 2);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      + a {
+        min-width: unset;
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}
+

 //
 // Redmine Time Tracker
 // https://github.com/fernandokosh/redmine_time_tracker
 // --------------------------------------------------

-@if $use-font-awesome {
-  .tt_list_button {
-    @extend %fa-icon;
-    font-size: $fa-font-size-base;
+.tt_list_button {
+  @extend %fa-icon;
+  font-size: $fa-font-size-base;
+}
+
+.icon,
+.tt_list_button {
+  &.icon-start,
+  &.icon-stop {
+    background-image: none;
  }

-  .icon,
-  .tt_list_button {
-    &.icon-start,
-    &.icon-stop {
-      background-image: none;
-    }
+  &.icon-start {
+    @include link-variant(success);

-    &.icon-start {
-      color: $icon-success-color;
-
-      &:hover,
-      &:focus {
-        color: $icon-success-color;
-      }
-
-      &::before {
-        content: $fa-var-clock-o;
-      }
-    }
-
-    &.icon-stop {
-      color: $icon-danger-color;
-
-      &:hover,
-      &:focus {
-        color: $icon-danger-color;
-      }
-
-      &::before {
-        content: $fa-var-history;
-      }
+    &::before {
+      content: $fa-var-clock-o;
    }
  }

-  .time-tracker-quick-menu:empty {
-    display: none;
+  &.icon-stop {
+    @include link-variant(danger);
+
+    &::before {
+      content: $fa-var-history;
+    }
+  }
+}
+
+.time-tracker-quick-menu:empty {
+  display: none;
+}
+
+#user-time-bookings-list {
+  clear: both;
+}
+
+
+//
+// RedmineUP
+// https://www.redmineup.com/pages/plugins
+// --------------------------------------------------
+
+h2 {
+  .scope_title,
+  .live_search,
+  .tags {
+    vertical-align: top;
  }

-  #user-time-bookings-list {
-    clear: both;
+  .live_search {
+    margin-left: $padding-side / 2;
+  }
+
+  .tags {
+    .tag_list {
+      margin-top: 0;
+    }
+  }
+}
+
+div.details {
+  &.contact,
+  &.product {
+    padding: 0;
+    border: 0;
+    background: transparent;
  }
 }

@@ -151,8 +348,123 @@
 // https://www.redmineup.com/pages/plugins/agile
 // --------------------------------------------------

+html.agile-board-fullscreen .icon.icon-fullscreen {
+  padding: ($padding-small-vertical - 1px) $padding-small-vertical;
+  font-size: 0;
+  text-align: center;
+  text-indent: 0;
+  @include nice-shadow(1);
+
+  &::before {
+    margin: 0;
+  }
+}
+
+@if $agile-board-customize {
+  .agile-board {
+    table.list.issues-board {
+      tbody tr {
+        background-color: $body-bg;
+
+        > td.issue-status-col {
+          padding: 0;
+          padding-left: parse-length($agile-issue-card-margin, left);
+          background-color: $agile-board-background;
+
+          &.closed .issue-card {
+            background: $agile-issue-card-closed-background;
+          }
+        }
+      }
+    }
+
+    .issue-card {
+      margin: $agile-issue-card-margin;
+      margin-left: 0;
+      padding: $agile-issue-card-padding;
+      border: 1px solid $agile-issue-card-border;
+      border-width: $agile-issue-card-border-width;
+      border-radius: $agile-issue-card-border-radius;
+      background-color: $agile-issue-card-background;
+      color: $agile-issue-card-color;
+      @include nice-shadow(1);
+
+      &.ui-sortable-helper {
+        @include nice-shadow(4);
+      }
+
+      &:not(.context-menu-selection) {
+        .attributes,
+        em.info,
+        span.hours {
+          color: $text-color;
+        }
+      }
+
+      @each $class, $color in $agile-issue-card-color-map {
+        &.#{$class} {
+          border-color: map-get($color, border);
+          background-color: map-get($color, background);
+        }
+      }
+
+      .checklist,
+      .info,
+      .sub-issues {
+        border-color: rgba($black, .15);
+      }
+
+      p.issue-id,
+      p.name {
+        margin-bottom: 5px;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      p.issue-id {
+        line-height: 1;
+      }
+
+      p.project {
+        border-radius: $agile-issue-card-border-radius - 1px;
+        border-color: rgba($black, .15);
+        background-clip: padding-box;
+      }
+
+      p.name {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  @each $class, $color in $agile-issue-card-color-map {
+    @if map-get($color, link) != $link-color {
+      .#{$class} {
+        a {
+          color: map-get($color, link);
+        }
+      }
+    }
+  }
+}
+
+.agile-board {
+  .quick-comment {
+    textarea {
+      margin-bottom: parse-length($agile-issue-card-padding, bottom);
+    }
+  }
+}
+
+
 .controller-agile_charts #main {
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    > div:not(#content):not(#sidebar) {
+      grid-area: footer;
+    }
+  } @else if $flexbox-layout {
    flex-wrap: wrap;

    > #footer {
@@ -171,6 +483,42 @@
 }


+//
+// Redmine CRM
+// https://www.redmineup.com/pages/plugins/crm
+// --------------------------------------------------
+
+table.sidebar.attributes {
+  tr {
+    th,
+    td {
+      padding: parse-length($table-condensed-cell-padding, top) 0;
+      vertical-align: top;
+    }
+
+    th {
+      padding-right: parse-length($table-condensed-cell-padding, right);
+    }
+  }
+}
+
+div.add-note {
+  input,
+  textarea {
+    margin-bottom: $line-height-computed;
+  }
+}
+
+@if $table-list-highlight-rows {
+  table.contacts.index,
+  table.contacts.index {
+    > tbody > tr:nth-child(n):hover {
+      background-color: $table-bg-hover;
+    }
+  }
+}
+
+
 //
 // Redmine Tags
 // https://www.redmineup.com/pages/plugins/tags
@@ -182,15 +530,43 @@
    margin: 0;
  }

-  &.select2-container.select2-container--default {
-    .select2-selection--multiple {
-      line-height: $line-height-base;
+  &-container.select2-container--default {
+    color: $text-color;

+    .select2-selection--single,
+    .select2-selection--multiple {
+      min-height: $input-height-base;
+      line-height: $line-height-base;
+    }
+
+    .select2-selection--single {
+      height: $input-height-base;
+
+      .select2-selection__rendered {
+        padding-top: $input-padding-vertical;
+        padding-bottom: $input-padding-vertical;
+        border: 0;
+        font-size: $font-size-base;
+        line-height: $line-height-base;
+      }
+
+      .select2-selection__arrow {
+        height: $input-height-base;
+      }
+
+      .select2-selection__clear {
+        border: 0;
+      }
+    }
+
+    .select2-selection--multiple {
      .select2-selection__rendered {
        padding: 0 3px 3px;
      }

      .select2-selection__choice {
+        margin-top: 3px;
+        margin-right: 3px;
        padding-top: 0;
        padding-bottom: 0;
      }
@@ -206,18 +582,126 @@
    }

    .select2-selection {
-      transition: border-color 50ms ease-in-out,
-                  box-shadow 50ms ease-in-out;
+      transition:
+        border-color $transition-time ease-in-out,
+        box-shadow $transition-time ease-in-out;
      border-color: $input-border;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
-    }
+      background-clip: padding-box;

-    &.select2-container--focus {
-      .select2-selection {
-        border-color: rgba($input-border-focus, $input-border-focus-alpha);
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
+      &.icon {
+        padding-left: 18px + 8px;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 8px;
+          margin: ($fa-font-size-base / -2) 0 0;
+        }
      }
    }
+
+    &.select2-container {
+      &:focus,
+      * {
+        outline: none;
+      }
+
+      &--open,
+      &--focus {
+        .select2-selection {
+          border-color: rgba($input-border-focus, $input-border-focus-alpha);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
+        }
+      }
+    }
+
+    .select2-search__field {
+      &:focus {
+        border-color: rgba($input-border-focus, $input-border-focus-alpha);
+      }
+    }
+  }
+}
+
+span.tag-label-color {
+  @at-root body & {
+    padding: 0 !important; // stylelint-disable-line declaration-no-important
+    border: 0 !important; // stylelint-disable-line declaration-no-important
+    border-radius: $badge-border-radius;
+    box-shadow: inset 0 -1px 0 rgba($black, .12);
+    font-size: $font-size-small-px;
+
+    a,
+    span {
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    > a,
+    > span {
+      display: inline-block;
+      padding: 1px 5px;
+      text-shadow: 0 1px 0 rgba($black, .2);
+    }
+
+    a {
+      &:hover {
+        opacity: .8;
+      }
+    }
+  }
+}
+
+.list td.tags {
+  padding-bottom: max(parse-length($table-cell-padding, bottom) - 2px - 1px, 0);
+
+  span.tag-label-color {
+    margin-bottom: 2px;
+    margin-left: 0;
+    transform: translateY(-1px);
+  }
+}
+
+
+//
+// Redmine Checklists
+// https://www.redmineup.com/pages/plugins/checklists
+// --------------------------------------------------
+
+.checklist {
+  li {
+    a {
+      margin: 0;
+      line-height: inherit;
+    }
+  }
+}
+
+#checklist_form_items {
+  .checklist-item {
+    display: block;
+    margin: 0 0 2px;
+
+    &.new {
+      margin: $padding-base-vertical 0 0;
+    }
+
+    input[type="checkbox"] {
+      position: relative;
+      top: 2px;
+      vertical-align: baseline;
+    }
+
+    input[type="button"] {
+      margin-right: 4px;
+    }
+  }
+}
+
+#checklist-menu.ui-menu {
+  a {
+    padding: 2px 0 2px 24px;
  }
 }

@@ -282,138 +766,6 @@
 }


-//
-// Redmine CRM People
-// http://www.redminecrm.com/projects/people/
-// --------------------------------------------------
-
-#people_list {
-  table.index {
-    margin-bottom: $line-height-computed;
-  }
-}
-
-#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);
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &: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
@@ -492,11 +844,9 @@
      width: 80%;
      margin: 0;

-      @if $use-font-awesome {
-        a {
-          img {
-            display: none;
-          }
+      a {
+        img {
+          display: none;
        }
      }
    }
@@ -525,23 +875,15 @@

 div.wiking {
  &.flash {
-    @if $use-font-awesome {
-      &.warning,
-      &.notice,
-      &.tip {
-        background-image: none;
-      }
+    &.warning,
+    &.notice,
+    &.tip {
+      background-image: none;
+    }

-      &.tip {
-        &::before {
-          content: $fa-var-lightbulb-o;
-        }
-      }
-    } @else {
-      &.warning,
-      &.notice,
-      &.tip {
-        background-position: $padding-large-horizontal 50%;
+    &.tip {
+      &::before {
+        content: $fa-var-lightbulb-o;
      }
    }
  }
--- a/src/sass/components/_print.scss
+++ b/src/sass/components/_print.scss
@@ -24,17 +24,17 @@

  #main {
    display: block;
-    overflow: visible !important; // scss-lint:disable ImportantRule
-    background: #fff;
+    overflow: visible !important; // stylelint-disable-line declaration-no-important
+    background: $white;
  }

  #content {
    width: 100%;
    margin: 0;
    padding: 0;
-    overflow: visible !important; // scss-lint:disable ImportantRule
+    overflow: visible !important; // stylelint-disable-line declaration-no-important
    border: 0;
-    background: #fff;
+    background: $white;
  }

  .autoscroll {
@@ -42,10 +42,10 @@
  }

  a {
-    // scss-lint:disable ImportantRule
+    // stylelint-disable declaration-no-important
    padding: 0 !important;
    background-color: transparent !important;
-    color: #000 !important;
+    color: $black !important;

    &::before,
    &::after {
@@ -64,7 +64,7 @@

    th,
    td {
-      border: 1px solid #aaa;
+      border: 1px solid $gray-500;
      background-color: transparent;

      &.buttons {
--- a/src/sass/components/_progress.scss
+++ b/src/sass/components/_progress.scss
@@ -4,11 +4,11 @@

 table.progress {
  width: 80px;
-  margin-top: 1px;
+  margin-top: 3px;
  margin-right: 5px;
  float: left;
  empty-cells: show;
-  border: 1px solid rgba(#000, .1);
+  border: 0 none;

  .version-overview & {
    width: 40em;
@@ -20,27 +20,46 @@ table.progress {
    float: none;
  }

+  tr {
+    background: transparent !important; // stylelint-disable-line declaration-no-important
+  }
+
  td {
-    height: 12px;
+    height: $progress-height;
    padding: 0;
    border: 0 none;

-    &.closed {
-      background-color: $progress-bar-success-bg;
+    &:first-child {
+      border-top-left-radius: $progress-height / 2;
+      border-bottom-left-radius: $progress-height / 2;
+    }
+
+    &:last-child {
+      border-top-right-radius: $progress-height / 2;
+      border-bottom-right-radius: $progress-height / 2;
    }

    &.done {
-      background-color: mix($progress-bar-success-bg, $progress-bg, 50%);
+      background-color: $progress-bar-bg !important; // stylelint-disable-line declaration-no-important
+    }
+
+    &.closed {
+      background-color: $progress-bar-success-bg !important; // stylelint-disable-line declaration-no-important
    }

    &.todo {
-      background-color: $progress-bg;
+      background-color: $progress-bg !important; // stylelint-disable-line declaration-no-important
+      mix-blend-mode: multiply;
    }
  }

  .issue & td {
    padding: 0;
  }
+
+  .context-menu-selection & td.todo {
+    mix-blend-mode: screen;
+  }
 }

 p {
@@ -50,10 +69,8 @@ p {
  }

  &.progress-info {
-    margin-top: -4px;
-    margin-bottom: 0;
    clear: left;
-    color: #777;
+    color: $gray-700;
    font-size: 80%;
  }
 }
--- a/src/sass/components/_responsive.scss
+++ b/src/sass/components/_responsive.scss
@@ -1,5 +1,18 @@
-// scss-lint:disable SelectorDepth
-.theme-Purplemine2 {
+.hidden,
+.mobile-show {
+  display: none;
+}
+
+.inline-flex {
+  display: inline-flex;
+
+  body.controller-issues h2 & {
+    padding-right: 0;
+  }
+}
+
+// stylelint-disable selector-max-compound-selectors
+body {
  @media screen and (max-width: $redmine-responsive-max) {
    .flyout-menu + div {
      #header {
@@ -30,34 +43,59 @@
      #project-jump {
        padding: 0 $responsive-header-height 0 0;

+        &.expanded {
+          .drdn-trigger {
+            &::before {
+              padding: 0;
+              transform: rotate(180deg);
+            }
+          }
+        }
+
        .drdn-trigger {
+          @include text-overflow;
          display: block;
          height: $responsive-header-height;
-          padding: 0 0 0 ($padding-base-horizontal + 30px);
+          padding: 0;
          background-color: transparent;
          box-shadow: none;
+          font-size: $font-size-large;
+          font-weight: $font-weight-normal;
          line-height: $responsive-header-height;

          &::before {
-            padding-left: $padding-base-horizontal;
-            font-size: 1.2em;
-            font-weight: normal;
-            line-height: $responsive-header-height * .9;
+            @include fa-icon;
+            content: $fa-var-chevron-down;
+            position: relative;
+            top: -.1em;
+            width: $responsive-header-height * .75;
+            padding: 0;
+            transform: none;
+            font-size: .8em;
+            text-align: center;
          }

-          @if $use-font-awesome {
-            &::after {
-              display: none;
-            }
+          &::after {
+            display: none;
          }
        }

        .drdn-content {
          top: $responsive-header-height;
+          font-size: $font-size-base;
        }
      }
    }

+    #content {
+      overflow: auto;
+    }
+
+    #ajax-indicator {
+      left: 50%;
+      width: 200px;
+    }
+
    .mobile-toggle-button {
      width: $responsive-header-height;
      height: $responsive-header-height;
@@ -72,6 +110,10 @@
      background-color: $flyout-menu-bg;
      color: $flyout-menu-text;

+      .search-magnifier {
+        left: 18px;
+      }
+
      &__search {
        height: $responsive-header-height;
        padding: ($padding-side / 2);
@@ -83,43 +125,155 @@
        }
      }

+      &__avatar {
+        img.gravatar {
+          top: 0;
+        }
+      }
+
+      &__sidebar {
+        p {
+          padding-left: $padding-large-horizontal;
+        }
+      }
+
+      ul {
+        li:nth-child(n) {
+          a:not(.icon-only) {
+            height: auto;
+            padding: $padding-large-vertical $padding-large-horizontal;
+            line-height: $line-height-base;
+          }
+        }
+
+        &.queries {
+          li {
+            display: flex;
+
+            a {
+              flex: 1 1 auto;
+            }
+
+            .icon-only {
+              flex: 0;
+              padding-right: 0;
+              padding-left: 40px;
+              text-align: center;
+              text-overflow: initial;
+
+              &::before {
+                width: 40px;
+                margin-left: -40px;
+              }
+            }
+          }
+        }
+      }
+
      a {
        &,
        &:hover,
        &:focus {
          color: $flyout-menu-link;
+
+          &::before,
+          span {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
+          }
+        }
+
+        &.selected {
+          background-color: $flyout-menu-link-active-bg;
+          color: $flyout-menu-link-active;
        }
      }

-      h3 {
+      h3,
+      h4 {
+        height: auto;
+        margin: 0;
+        padding: $padding-base-vertical $padding-base-horizontal;
        border-top: 1px solid $flyout-menu-header-border;
        border-bottom: 1px solid $flyout-menu-header-border;
        background-color: $flyout-menu-header-bg;
        color: $flyout-menu-header-text;
+        line-height: $line-height-base;
+
+        + p {
+          margin-top: $padding-large-vertical;
+        }
      }

-      #admin-menu {
-        a {
-          background-position: 8px center;
+      h4 {
+        padding: 0 $padding-base-horizontal;
+      }

-          @if $use-font-awesome {
-            &,
-            &:hover,
-            &:focus {
-              &::before {
-                color: $flyout-menu-link;
+      form {
+        padding-left: 0;
+
+        > ul {
+          margin-left: 0;
+
+          li:nth-child(n) {
+            padding-left: $padding-large-horizontal;
+            line-height: inherit;
+
+            label {
+              a {
+                display: block;
+                padding: $padding-base-vertical $padding-base-horizontal;
              }
            }
          }

-          &.selected {
-            background-color: $body-bg;
-            color: $text-color;
+          + p {
+            margin-top: $padding-large-vertical;
+          }
+        }
+      }

-            @if $use-font-awesome {
-              &::before {
-                color: $text-color;
-              }
+      #admin-menu {
+        a {
+          background-position: 8px center !important; // stylelint-disable-line declaration-no-important
+
+          &.additionals {
+            padding-left: 32px !important; // stylelint-disable-line declaration-no-important
+
+            &::before {
+              margin-right: $padding-small-vertical;
+              font-size: $fa-font-size-base;
+            }
+          }
+        }
+      }
+
+      #watchers {
+        .contextual {
+          padding-top: $line-height-computed / 2;
+          padding-bottom: $line-height-computed / 2;
+        }
+
+        .watchers {
+          li {
+            margin: ($line-height-computed / 2) 0 0;
+            padding: 0;
+
+            img.gravatar {
+              top: 0;
+            }
+
+            a {
+              height: auto;
+              border-top: 0;
+              line-height: initial;
+            }
+
+            .delete {
+              margin-right: $padding-large-vertical;
+              margin-left: auto;
+              float: none;
+              text-align: center;
+              text-overflow: initial;
            }
          }
        }
@@ -175,44 +329,65 @@
    p.buttons,
    .other-formats > span,
    #wiki_add_attachment > p,
-    #content > .contextual {
+    #content > .contextual,
+    #content > .contextual > span,
+    #query_form > .contextual,
+    #query_form_with_buttons > .contextual {
      margin-bottom: $line-height-computed - $padding-small-horizontal;
      padding: 0;
      float: none;
      text-align: left;

      a {
-        display: inline-block;
-        margin: 0 $padding-small-vertical $padding-small-horizontal 0;
-        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
+        padding: $btn-padding-vertical $btn-padding-horizontal-small;
        border: 1px solid $pagination-border;
        border-radius: $border-radius-base;
        background-color: $pagination-bg;
-        background-position: $btn-padding-horizontal center;
-        font-weight: $btn-font-weight;
+        color: $pagination-color;
+        font-weight: $font-weight-normal;

-        &:active,
        &:hover,
        &:focus {
          border-color: $pagination-hover-border;
          background-color: $pagination-hover-bg;
+          color: $pagination-hover-color;
          text-decoration: none;
        }

-        &:last-child {
-          margin-right: 0;
-        }
-
        &.icon {
-          padding-left: 20px + $btn-padding-horizontal;
-        }
-
-        @if $use-font-awesome == false {
-          &.atom {
-            padding-left: 20px + $btn-padding-horizontal;
-          }
+          padding-left: 20px + $btn-padding-horizontal-small;
+          background-position: $btn-padding-horizontal-small 50%;
        }
      }
+
+      a,
+      input,
+      select,
+      label {
+        margin-top: 0;
+        margin-bottom: 5px;
+      }
+
+      label {
+        display: inline-block;
+
+        input[type="checkbox"],
+        input[type="radio"] {
+          margin-top: $check-input-margin-btn-v;
+        }
+      }
+    }
+
+    #content > .contextual > span {
+      margin-bottom: 0;
+    }
+
+    #content > .contextual > a,
+    #content > .contextual .drdn,
+    p.buttons a {
+      display: inline-block;
+      margin: 0 2px 5px 0;
+      float: none;
    }

    // For Redmine 4.0+
@@ -221,24 +396,14 @@
      border: 0;

      .drdn-trigger {
-        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
-        border: 1px solid $pagination-border;
-        border-radius: $border-radius-base;
-        background-color: $pagination-bg;
-
-        &:active,
-        &:hover,
-        &:focus {
-          border-color: $pagination-hover-border;
-          background-color: $pagination-hover-bg;
-          text-decoration: none;
-        }
+        padding: $btn-padding-vertical $btn-padding-horizontal;
      }

      .drdn-items {
        a {
-          display: block;
          margin: 3px 0 0;
+          padding-top: $btn-padding-vertical;
+          padding-bottom: $btn-padding-vertical;

          &:first-child {
            margin-top: 0;
@@ -261,5 +426,39 @@
        float: none;
      }
    }
+
+    div#issue-changesets {
+      div.changeset {
+        padding: 0;
+      }
+    }
+
+    #admin-index > #admin-menu li {
+      padding: 0;
+
+      a {
+        background-position: 8px center !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+  }
+
+  // Tweaks for smartphones, touchscreens
+  @media (hover: none) and (pointer: coarse) {
+    .mobile-toggle-button::after {
+      margin-top: 0;
+    }
+
+    .query-columns {
+      span {
+        display: block;
+        margin-bottom: $line-height-computed / 2;
+      }
+
+      .buttons {
+        input[type="button"] {
+          display: inline-block;
+        }
+      }
+    }
  }
 }
--- a/src/sass/components/_rouge.scss
+++ b/src/sass/components/_rouge.scss
@@ -1,9 +1,5 @@
-//
-// Syntax highlight - Rouge
-// --------------------------------------------------
-
 .syntaxhl {
-  background: #fafafa;
+  color: #24292e;

  .hll {
    background-color: #ffc;
@@ -11,92 +7,59 @@

  // Comment
  .c {
-    color: #888;
-  }
-
-  // Error
-  .err {
-    background-color: #faa;
-    color: #f00;
+    color: #6a737d;
  }

  // Keyword
  .k {
-    color: #080;
-    font-weight: bold;
-  }
-
-  // Operator
-  .o {
-    color: #333;
+    color: #d73a49;
  }

  // Comment.Hashbang
  .ch {
-    color: #888;
+    color: #6a737d;
  }

  // Comment.Multiline
  .cm {
-    color: #888;
+    color: #6a737d;
  }

  // Comment.Preproc
  .cp {
-    color: #579;
+    color: #d73a49;
  }

  // Comment.PreprocFile
  .cpf {
-    color: #888;
+    color: #032f62;
  }

  // Comment.Single
  .c1 {
-    color: #888;
+    color: #6a737d;
  }

  // Comment.Special
  .cs {
-    color: #c00;
-    font-weight: bold;
+    color: #6a737d;
  }

  // Generic.Deleted
  .gd {
-    color: #a00000;
-  }
-
-  // Generic.Emph
-  .ge {
-    font-style: italic;
-  }
-
-  // Generic.Error
-  .gr {
-    color: #f00;
+    background-color: #ffeef0;
+    color: #b31d28;
  }

  // Generic.Heading
  .gh {
-    color: #000080;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Generic.Inserted
  .gi {
-    color: #00a000;
-  }
-
-  // Generic.Output
-  .go {
-    color: #888;
-  }
-
-  // Generic.Prompt
-  .gp {
-    color: #c65d09;
-    font-weight: bold;
+    background-color: #f0fff4;
+    color: #22863a;
  }

  // Generic.Strong
@@ -106,7 +69,7 @@

  // Generic.Subheading
  .gu {
-    color: #800080;
+    color: #6f42c1;
    font-weight: bold;
  }

@@ -117,123 +80,112 @@

  // Keyword.Constant
  .kc {
-    color: #080;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Keyword.Declaration
  .kd {
-    color: #080;
-    font-weight: bold;
+    color: #d73a49;
  }

  // Keyword.Namespace
  .kn {
-    color: #080;
-    font-weight: bold;
+    color: #d73a49;
  }

  // Keyword.Pseudo
  .kp {
-    color: #038;
-    font-weight: bold;
+    color: #d73a49;
  }

  // Keyword.Reserved
  .kr {
-    color: #080;
-    font-weight: bold;
+    color: #d73a49;
  }

  // Keyword.Type
  .kt {
-    color: #339;
-    font-weight: bold;
+    color: #d73a49;
  }

  // Literal.Number
  .m {
-    color: #60e;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Literal.String
  .s {
-    background-color: #fff0f0;
+    color: #032f62;
  }

  // Name.Attribute
  .na {
-    color: #00c;
+    color: #005cc5;
  }

  // Name.Builtin
  .nb {
-    color: #007020;
+    color: #005cc5;
  }

  // Name.Class
  .nc {
-    color: #b06;
-    font-weight: bold;
+    color: #6f42c1;
  }

  // Name.Constant
  .no {
-    color: #036;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Name.Decorator
  .nd {
-    color: #555;
-    font-weight: bold;
+    color: #6f42c1;
  }

  // Name.Entity
  .ni {
-    color: #800;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Name.Exception
  .ne {
-    color: #f00;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Name.Function
  .nf {
-    color: #06b;
-    font-weight: bold;
+    color: #6f42c1;
  }

  // Name.Label
  .nl {
-    color: #970;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Name.Namespace
  .nn {
-    color: #0e84b5;
-    font-weight: bold;
+    color: #6f42c1;
  }

  // Name.Tag
  .nt {
-    color: #070;
+    color: #22863a;
  }

  // Name.Variable
  .nv {
-    color: #963;
+    color: #24292e;
+  }
+
+  // Operator
+  .o {
+    color: #d73a49;
  }

  // Operator.Word
  .ow {
-    color: #000;
-    font-weight: bold;
+    color: #d73a49;
  }

  // Text.Whitespace
@@ -243,138 +195,126 @@

  // Literal.Number.Bin
  .mb {
-    color: #60e;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Literal.Number.Float
  .mf {
-    color: #60e;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Literal.Number.Hex
  .mh {
-    color: #058;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Literal.Number.Integer
  .mi {
-    color: #00d;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Literal.Number.Oct
  .mo {
-    color: #40e;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Literal.String.Affix
  .sa {
-    background-color: #fff0f0;
+    color: #d73a49;
  }

  // Literal.String.Backtick
  .sb {
-    background-color: #fff0f0;
+    color: #032f62;
  }

  // Literal.String.Char
  .sc {
-    color: #04d;
+    color: #032f62;
  }

  // Literal.String.Delimiter
  .dl {
-    background-color: #fff0f0;
+    color: #d73a49;
  }

  // Literal.String.Doc
  .sd {
-    color: #d42;
+    color: #032f62;
  }

  // Literal.String.Double
  .s2 {
-    background-color: #fff0f0;
+    color: #032f62;
  }

  // Literal.String.Escape
  .se {
-    background-color: #fff0f0;
-    color: #666;
-    font-weight: bold;
+    color: #032f62;
  }

  // Literal.String.Heredoc
  .sh {
-    background-color: #fff0f0;
+    color: #032f62;
  }

  // Literal.String.Interpol
  .si {
-    background-color: #eee;
+    color: #005cc5;
  }

  // Literal.String.Other
  .sx {
-    background-color: #fff0f0;
-    color: #d20;
+    color: #032f62;
  }

  // Literal.String.Regex
  .sr {
-    background-color: #fff0ff;
-    color: #000;
+    color: #032f62;
  }

  // Literal.String.Single
  .s1 {
-    background-color: #fff0f0;
+    color: #032f62;
  }

  // Literal.String.Symbol
  .ss {
-    color: #a60;
+    color: #005cc5;
  }

  // Name.Builtin.Pseudo
  .bp {
-    color: #007020;
+    color: #005cc5;
  }

  // Name.Function.Magic
  .fm {
-    color: #06b;
-    font-weight: bold;
+    color: #005cc5;
  }

  // Name.Variable.Class
  .vc {
-    color: #369;
+    color: #24292e;
  }

  // Name.Variable.Global
  .vg {
-    color: #d70;
-    font-weight: bold;
+    color: #24292e;
  }

  // Name.Variable.Instance
  .vi {
-    color: #33b;
+    color: #24292e;
  }

  // Name.Variable.Magic
  .vm {
-    color: #963;
+    color: #005cc5;
  }

  // Literal.Number.Integer.Long
  .il {
-    color: #00d;
-    font-weight: bold;
+    color: #005cc5;
  }
 }
--- a/src/sass/components/_simple-list.scss
+++ b/src/sass/components/_simple-list.scss
@@ -26,7 +26,7 @@

  span.description {
    display: block;
-    color: $gray;
+    color: $gray-700;
    font-style: italic;
  }
 }
@@ -44,9 +44,9 @@
  h4 {
    margin: 0 0 $line-height-computed;
    padding-bottom: .2em;
-    border-bottom: 1px dotted $gray-light;
+    border-bottom: 1px dotted $gray-600;
    font-size: $font-size-h4;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
  }

  dt {
@@ -55,11 +55,11 @@
    }

    &.me .time {
-      border-bottom: 1px solid $gray-lighter;
+      border-bottom: 1px solid $gray-400;
    }

    .time {
-      color: $gray;
+      color: $gray-700;
    }

    @if $use-gravatars {
@@ -105,10 +105,17 @@
  input,
  select {
    margin-right: 5px;
+    margin-bottom: $line-height-computed / 2;
  }

  label {
    @include check-inline;
+    line-height: $input-height-base;
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
  }

  p:last-child {
@@ -120,9 +127,21 @@
 // Search results highlight

 .highlight {
-  background-color: #fe8;
+  background-color: saturate(shade($yellow, 100), 25%);
+  color: saturate(shade($yellow, 800), 25%);

-  &.token-1 { background-color: #fba; }
-  &.token-2 { background-color: #afb; }
-  &.token-3 { background-color: #aef; }
+  &.token-1 {
+    background-color: saturate(shade($red, 100), 25%);
+    color: saturate(shade($red, 800), 25%);
+  }
+
+  &.token-2 {
+    background-color: saturate(shade($green, 100), 25%);
+    color: saturate(shade($green, 800), 25%);
+  }
+
+  &.token-3 {
+    background-color: saturate(shade($blue, 100), 25%);
+    color: saturate(shade($blue, 800), 25%);
+  }
 }
--- a/src/sass/components/_tabs.scss
+++ b/src/sass/components/_tabs.scss
@@ -65,10 +65,10 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
      margin: 0;
      padding: 0;
      float: left;
-      transition: opacity .1s;
+      transition: opacity $transition-time;
      border: 0 none;
      border-radius: 0;
-      opacity: .8;
+      opacity: $icon-opacity;
      background-color: $body-bg;
      background-repeat: no-repeat;
      background-position: center center;
@@ -76,7 +76,7 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;

      &:hover,
      &:active {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
      }

      &:active {
@@ -84,16 +84,16 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
      }

      &.disabled {
-        opacity: .4;
+        opacity: $icon-opacity / 2;
      }
    }

    .tab-left {
-      @extend %image-arrow-left;
+      background-image: inline-svg("chevron-left.svg", (path: (fill: $btn-default-icon-color)));
    }

    .tab-right {
-      @extend %image-arrow-right;
+      background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
    }
  }
 }
@@ -122,7 +122,7 @@ div.tabs:not(#main-menu) {
        &:focus {
          border-color: $tab-hover-border $tab-hover-border $tab-border;
          background-color: $tab-hover-bg;
-          color: $link-hover-color;
+          color: $tab-hover-text;
          text-decoration: none;
        }

@@ -167,7 +167,7 @@ div.tabs:not(#main-menu) {
      margin-bottom: 3px;
    }

-    label[for=principal_search] {
+    label[for="principal_search"] {
      padding-left: 0;
    }
  }
--- a/src/sass/components/_top.scss
+++ b/src/sass/components/_top.scss
@@ -3,18 +3,21 @@
 // --------------------------------------------------

 #top-menu {
+  $top-menu-padding-vertical:   $padding-small-vertical + 1px;
+  $top-menu-padding-horizontal: $padding-side;
  @extend %clearfix;
-  position: relative;
-  padding: $padding-small-vertical $padding-side;
+  box-sizing: border-box;
+  padding: $top-menu-padding-vertical $top-menu-padding-horizontal;
  background: $top-menu-bg;
  color: $top-menu-text;
  font-size: $font-size-small;

  @if $top-menu-collapse {
-    $toggler-position-v:    $padding-small-vertical + 1px;
+    $toggler-position-v:    $top-menu-padding-vertical + 1px;
    $toggler-position-h:    1px;

-    max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $padding-small-vertical;
+    position: relative;
+    max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $top-menu-padding-vertical * 2;
    padding-bottom: 0;
    overflow: hidden;

@@ -24,11 +27,12 @@

    a {
      display: inline-block;
-      margin-bottom: $padding-small-vertical;
+      margin-bottom: $top-menu-padding-vertical;
      white-space: nowrap;
    }

    .top-menu-toggler {
+      @extend %fa-icon;
      display: block;
      position: absolute;
      top: $toggler-position-v;
@@ -37,46 +41,25 @@
      } @else {
        right: $toggler-position-h;
      }
+      color: mix($top-menu-link, $top-menu-bg, 33%);
+      font-size: $fa-font-size-base;
+      line-height: 1;
      user-select: none;

-      @if $use-font-awesome {
-        @extend %fa-icon;
-        color: mix($top-menu-link, $top-menu-bg, 33%);
-        font-size: $fa-font-size-base;
-        line-height: 1;
+      &::before {
+        content: $fa-var-caret-square-o-down;
+        margin-right: 0;
+      }

-        &::before {
-          content: $fa-var-caret-square-o-down;
-          margin-right: 0;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: mix($top-menu-link-hover, $top-menu-bg, 50%);
-        }
-      } @else {
-        @extend %image-arrow-down-white;
-        width: 15px;
-        height: 15px;
-        border-radius: $border-radius-base;
-        background-repeat: no-repeat;
-        background-position: center center;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: lighten($top-menu-bg, 15%);
-        }
+      &:hover,
+      &:focus,
+      &:active {
+        color: mix($top-menu-link-hover, $top-menu-bg, 50%);
      }

      &.expanded {
-        @if $use-font-awesome {
-          &::before {
-            content: $fa-var-caret-square-o-up;
-          }
-        } @else {
-          @extend %image-arrow-up-white;
+        &::before {
+          content: $fa-var-caret-square-o-up;
        }
      }

@@ -152,11 +135,11 @@

    .root {
      color: $header-root;
-      font-weight: 500;
+      font-weight: $font-weight-semi-bold;
    }

    .ancestor {
-      font-weight: 500;
+      font-weight: $font-weight-semi-bold;
    }

    .root,
@@ -182,6 +165,10 @@
    color: $header-text;
  }

+  > * {
+    vertical-align: top;
+  }
+
  form {
    display: inline-block;

@@ -204,7 +191,7 @@
    color: $input-color;

    &[disabled] {
-      color: $gray-lighter;
+      color: $gray-400;
    }
  }
 }
@@ -220,12 +207,8 @@
      border-color: $quick-search-dropdown-bg;
      background-color: $quick-search-dropdown-bg;

-      @if $use-font-awesome {
-        &::after {
-          content: $fa-var-caret-up;
-        }
-      } @else {
-        @extend %image-arrow-up;
+      &::after {
+        content: $fa-var-caret-up;
      }
    }
  }
@@ -233,22 +216,15 @@
  .drdn {
    &-trigger {
      @extend %form-field;
+      @extend %fa-icon-after;
      min-width: $quick-search-width;
      border-color: $quick-search-border;

-      @if $use-font-awesome {
-        @extend %fa-icon-after;
-
-        &::after {
-          content: $fa-var-caret-down;
-          position: absolute;
-          top: ($font-size-base / 2);
-          right: $input-padding-horizontal;
-        }
-      } @else {
-        @extend %image-arrow-down;
-        background-repeat: no-repeat;
-        background-position: right ($input-padding-horizontal / 2) center;
+      &::after {
+        content: $fa-var-caret-down;
+        position: absolute;
+        top: ($font-size-base / 2);
+        right: $input-padding-horizontal;
      }
    }

@@ -311,6 +287,7 @@
      > li {
        > a {
          height: $tabs-height;
+          margin: 0;
          border: 0 none;
          border-radius: 0;
          background: transparent;
@@ -328,7 +305,6 @@

    > li {
      position: relative;
-      margin-right: .5em;
      float: left;

      &:hover {
@@ -338,14 +314,14 @@
        }

        > .menu-children {
-          display: block;
+          visibility: visible;
        }
      }

      > a {
        display: block;
        padding: $main-menu-padding-vertical $main-menu-padding-horizontal;
-        transition: box-shadow .15s;
+        transition: box-shadow $transition-time-long;
        color: $main-menu-link;
        line-height: $line-height-computed;
        white-space: nowrap;
@@ -357,7 +333,7 @@

        &:hover,
        &:focus {
-          outline: 0 none;
+          background-color: $main-menu-bg-hover;
          box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
          text-decoration: none;
        }
@@ -365,22 +341,29 @@
        &.selected {
          padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
          border-bottom: 3px solid $main-menu-shadow-active;
+          background-color: $main-menu-bg-active;
          box-shadow: none;
          color: $main-menu-link-active;
-          font-weight: $font-weight-bold;
+          font-weight: $font-weight-semi-bold;
        }

        &.new-object {
          position: relative;
-          min-width: 1.6em;
+          width: $tabs-height;
+          margin-right: $main-menu-padding-horizontal;
          padding-bottom: $main-menu-padding-vertical - 1px;
          border: 1px solid $main-menu-border;
          border-width: 0 1px;
          background-color: $main-menu-dropdown-bg;
-          color: $icon-success-color;
-          font-size: 2em;
-          font-weight: bold;
-          text-align: center;
+          font-size: 0;
+
+          &::before {
+            @include fa-icon;
+            content: $fa-var-plus;
+            font-size: $fa-font-size-base;
+            line-height: $line-height-computed;
+            text-align: center;
+          }

          &:hover,
          &:focus {
@@ -397,7 +380,8 @@

  .menu-children {
    @include nice-shadow(2);
-    display: none;
+    display: block;
+    visibility: hidden;
    position: absolute;
    z-index: 1001;
    min-width: 130px;
@@ -405,11 +389,12 @@
    padding: 0;
    overflow: hidden;
    list-style: none;
+    transition: visibility 0ms 50ms;
    border-radius: 0 0 $border-radius-base $border-radius-base;
    background: $main-menu-dropdown-bg;

    &.visible {
-      display: block;
+      visibility: visible;
    }

    a {
@@ -420,7 +405,6 @@

      &:hover,
      &:focus {
-        outline: 0 none;
        background-color: $component-active-bg;
        color: $component-active-color;
        text-decoration: none;
@@ -433,7 +417,7 @@
  }

  .tabs-buttons {
-    display: none !important; // scss-lint:disable ImportantRule
+    display: none !important; // stylelint-disable-line declaration-no-important
    padding-left: 0;
    border-color: $main-menu-border;
    background-color: $main-menu-bg;
@@ -442,10 +426,14 @@
      box-sizing: border-box;
      height: $tabs-height - 1px;
      background-color: $main-menu-bg;
+
+      &:hover {
+        background-color: $main-menu-bg-hover;
+      }
    }
  }

  ul + .tabs-buttons {
-    display: block !important; // scss-lint:disable ImportantRule
+    display: block !important; // stylelint-disable-line declaration-no-important
  }
 }
--- a/src/sass/components/_wiki.scss
+++ b/src/sass/components/_wiki.scss
@@ -34,7 +34,7 @@ div.wiki {
  color: $wiki-text;
  line-height: $wiki-line-height;

-  //scss-lint:disable SingleLinePerSelector
+  // stylelint-disable selector-list-comma-newline-after
  h1, .h1,
  h2, .h2,
  h3, .h3,
@@ -49,14 +49,14 @@ div.wiki {

  h1, .h1 {
    padding-bottom: .3em;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-400;
    font-size: $font-size-h1;
    line-height: 1.2;
  }

  h2, .h2 {
    padding-bottom: .3em;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-400;
    font-size: $font-size-h2;
    line-height: 1.225;
  }
@@ -75,12 +75,12 @@ div.wiki {
  }

  h6, .h6 {
-    color: $gray;
+    color: $gray-700;
    font-size: $font-size-h6;
  }

  .text-normal {
-    font-weight: normal;
+    font-weight: $font-weight-normal;
  }

  > a:first-child {
@@ -106,31 +106,33 @@ div.wiki {
        width: .7em;
        margin-left: -.7em;
        color: $headings-anchor-color-active;
-        font-weight: normal;
+        font-weight: $font-weight-normal;
      }
    }
  }

-  >:last-child {
+  > :last-child {
    margin-bottom: 0;
  }

  blockquote {
-    >:first-child {
+    margin-bottom: 1em;
+
+    > :first-child {
      margin-top: 0;
    }

-    >:last-child {
+    > :last-child {
      margin-bottom: 0;
    }
  }

  .contextual {
    a {
-      opacity: .5;
+      opacity: $icon-opacity;

      &:hover {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
      }
    }
  }
@@ -157,7 +159,8 @@ div.wiki {
  }

  li > p {
-    margin-top: ($line-height-computed / 2);
+    margin-top: .25em;
+    margin-bottom: 0;
  }

  table {
@@ -169,7 +172,10 @@ div.wiki {
    word-break: keep-all;
  }

-  tr:nth-child(2n) {
+  // Textile
+  tbody:first-child tr:nth-child(2n),
+  // Markdown
+  thead + tbody tr:nth-child(2n-1) {
    background-color: $table-bg-accent;
  }

@@ -179,7 +185,8 @@ div.wiki {
    border: 1px solid $table-border-color;
  }

-  .noborder {
+  .noborder,
+  .wiki-class-noborder {
    border: 0 none;

    td,
@@ -195,20 +202,18 @@ div.wiki {
  code {
    padding: .2em .33em;
    border-radius: $border-radius-base;
-    background-color: rgba(#000, .04);
+    background-color: rgba($gray-500, .3);
    font-size: $font-size-small;
  }

  pre {
    width: auto;
    margin-bottom: 1.15em;
-    padding: 4px 8px;
+    padding: 12px 15px;
    overflow-x: auto;
    overflow-y: hidden;
-    border: 1px solid #e7e7e7;
    border-radius: $border-radius-base;
-    border-color: rgba(#000, .068);
-    background-color: rgba(#000, .03);
+    background-color: rgba($gray-500, .15);
    font-size: $font-size-small;

    code {
@@ -225,30 +230,27 @@ div.wiki {
  }

  .toc {
+    display: table;
+    max-width: 45%;
    margin-bottom: $line-height-computed;
    margin-left: 0;
-    padding: 0;
+    padding: $padding-small-vertical $padding-small-horizontal;
    list-style-type: none;
+    border: 1px solid $toc-border;
+    border-radius: $border-radius-base;
+    background-color: $toc-bg;
+    box-shadow: $toc-shadow;
+    color: $toc-text;
+    font-size: $font-size-small;

-    &.right,
-    &.left {
-      max-width: 45%;
-      padding: 8px;
-      border: 1px solid $highlight-border;
-      border-radius: $border-radius-base;
-      background-color: $highlight-bg;
-      box-shadow: $panel-shadow;
-      font-size: $font-size-small;
+    a {
+      color: $toc-link;
+      font-weight: $font-weight-normal;
+      text-decoration: none;

-      a {
-        color: $highlight-text;
-        font-weight: normal;
-        text-decoration: none;
-
-        &:hover {
-          color: darken($highlight-text, 10%);
-          text-decoration: underline;
-        }
+      &:hover {
+        color: $toc-link-hover;
+        text-decoration: underline;
      }
    }

@@ -275,7 +277,7 @@ div.wiki {
    }

    li {
-      // scss-lint:disable SelectorDepth
+      // stylelint-disable selector-max-compound-selectors
      margin: 0;

      li {
@@ -316,12 +318,9 @@ h5,
 h6 {
  .wiki-anchor {
    display: none;
-    position: relative;
-    top: -(1em - $font-size-small);
    margin-left: 5px;
-    color: $headings-anchor-color !important; // scss-lint:disable ImportantRule
-    font-size: $font-size-small;
-    text-decoration: none !important; // scss-lint:disable ImportantRule
+    color: $headings-anchor-color !important; // stylelint-disable-line declaration-no-important
+    text-decoration: none !important; // stylelint-disable-line declaration-no-important
  }

  &:hover {
@@ -344,9 +343,9 @@ p.footnote {
    content: "";
    display: block;
    width: 300px;
-    margin-top:  $line-height-computed;
+    margin-top: $line-height-computed;
    padding-top: $line-height-computed / 2;
-    border-top: 1px solid $gray-lighter;
+    border-top: 1px solid $gray-400;
  }

  + p.footnote::before {
@@ -354,21 +353,26 @@ p.footnote {
  }
 }

+.ltr,
+.wiki-class-ltr {
+  direction: ltr;
+}
+
+.rtl,
+.wiki-class-rtl {
+  direction: rtl;
+}
+
 .preview {
  margin-top: $line-height-computed;
  padding: $padding-wiki;
-  background-color: #fffbe5;
-  background-image: url("../images/draft.png");
-  background-position: center center;
-
-  html[lang="pl"] & {
-    background-image: url("../images/draft-pl.png");
-  }
+  border: 1px solid $gray-400;
+  background-color: $body-bg;
 }

 #wiki_add_attachment {
  padding-top: $line-height-computed;
-  border-top: 1px solid $gray-lighter;
+  border-top: 1px solid $gray-400;

  > p {
    margin-bottom: 0;
@@ -470,7 +474,7 @@ p.footnote {
 // Other helper classes
 // see: http://getbootstrap.com/css/#helper-classes

-.text-muted      { color: $gray-light; }
+.text-muted      { color: $gray-600; }
 .text-primary    { color: $brand-primary; }
 .text-success    { color: $brand-success; }
 .text-info       { color: $brand-info; }
--- a/src/sass/functions/_parse-length.scss
+++ b/src/sass/functions/_parse-length.scss
@@ -0,0 +1,49 @@
+// Extract the length of margin/padding/border
+// for given side from a shorthand syntax.
+//
+// Examples:
+// parse-length(1px, top) -> 1px
+// parse-length(1px 2px, right) -> 2px
+// parse-length(1px 2px 3px 4px, bottom) -> 3px
+// parse-length(1px 2px 3px 4px, left) -> 4px
+//
+@function parse-length($value, $side) {
+  $index: 1;
+
+  // Top values are always at index 1. The same for when the list has only one item
+  @if ($side == top or length($value) == 1) {
+    $index: 1;
+  }
+  // Covers "vertical horizontal" style
+  @else if (length($value) == 2) {
+    @if ($side == left or $side == right) {
+      $index: 2;
+    }
+    @if ($side == bottom) {
+      $index: 1;
+    }
+  }
+  // Covers "top horizontal bottom" style
+  @else if (length($value) == 3) {
+    @if ($side == left or $side == right) {
+      $index: 2;
+    }
+    @if ($side == bottom) {
+      $index: 3;
+    }
+  }
+  // Covers "top right bottom left" style
+  @else if (length($value) == 4) {
+    @if ($side == right) {
+      $index: 2;
+    }
+    @if ($side == bottom) {
+      $index: 3;
+    }
+    @if ($side == left) {
+      $index: 4;
+    }
+  }
+
+  @return nth($value, $index);
+}
--- a/src/sass/javascripts/_sidebar-toggler.scss
+++ b/src/sass/javascripts/_sidebar-toggler.scss
@@ -1,9 +1,12 @@
@if $enable-sidebar-toggler {
-  $toggler-position-v:          1px;
-  $toggler-position-h:          1px;
-
  #main {
    position: relative;
+
+    // Fix full screen view for dashboard plugin
+    // https://github.com/jgraichen/redmine_dashboard
+    @at-root .controller-rdb_taskboard & {
+      position: static;
+    }
  }

  #sidebar {
@@ -35,80 +38,51 @@
  .sidebar-toggler {
    display: block;
    position: absolute;
-    top: $toggler-position-v;
+    top: 1px;
+    width: 14px;
+    height: 16px;
+    border: 2px solid $gray-700;
+    border-radius: $border-radius-base;
+    background-color: $gray-200;
+    background-position: center;
+    line-height: 1;
    user-select: none;

    @media print {
      display: none;
    }

-    @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;
-      }
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $gray-300;
    }

    @if $sidebar-position == "left" {
-      left: $toggler-position-h;
+      left: 0;
+      background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));

-      @if $use-font-awesome {
-        &::before {
-          content: $fa-var-caret-square-o-left;
-        }
-      } @else {
-        @extend %image-arrow-left;
+      @if not $fixed-layout {
+        border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
      }
    } @else {
-      right: $toggler-position-h;
+      right: 0;
+      background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));

-      @if $use-font-awesome {
-        &::before {
-          content: $fa-var-caret-square-o-right;
-        }
-      } @else {
-        @extend %image-arrow-right;
+      @if not $fixed-layout {
+        border-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
      }
    }

    &.sidebar-hidden {
      @if $sidebar-position == "left" {
-        @if $use-font-awesome {
-          &::before {
-            content: $fa-var-caret-square-o-right;
-          }
-        } @else {
-          @extend %image-arrow-right;
-        }
+        background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
      } @else {
-        @if $use-font-awesome {
-          &::before {
-            content: $fa-var-caret-square-o-left;
-          }
-        } @else {
-          @extend %image-arrow-left;
-        }
+        background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
      }
    }
  }
--- a/src/sass/lib/_normalize.scss
+++ b/src/sass/lib/_normalize.scss
@@ -1,162 +1,116 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

-//
-// 1. Set default font family to sans-serif.
-// 2. Prevent iOS text size adjust after orientation change, without disabling
-//    user zoom.
-//
+/* Document
+   ========================================================================== */

-html {
-  font-family: sans-serif; // 1
-  -ms-text-size-adjust: 100%; // 2
-  -webkit-text-size-adjust: 100%; // 2
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }

-//
-// Remove default margin.
-//
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */

 body {
  margin: 0;
 }

-// HTML5 display definitions
-// ==========================================================================
+/**
+ * Render the `main` element consistently in IE.
+ */

-//
-// Correct `block` display not defined for any HTML5 element in IE 8/9.
-// Correct `block` display not defined for `details` or `summary` in IE 10/11
-// and Firefox.
-// Correct `block` display not defined for `main` in IE 11.
-//
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
+main {
  display: block;
 }

-//
-// 1. Correct `inline-block` display not defined in IE 8/9.
-// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
-//
+/* Grouping content
+   ========================================================================== */

-audio,
-canvas,
-progress,
-video {
-  display: inline-block; // 1
-  vertical-align: baseline; // 2
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }

-//
-// Prevent modern browsers from displaying `audio` without controls.
-// Remove excess height in iOS 5 devices.
-//
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */

-audio:not([controls]) {
-  display: none;
-  height: 0;
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }

-//
-// Address `[hidden]` styling not present in IE 8/9/10.
-// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
-//
+/* Text-level semantics
+   ========================================================================== */

-[hidden],
-template {
-  display: none;
-}
-
-// Links
-// ==========================================================================
-
-//
-// Remove the gray background color from active links in IE 10.
-//
+/**
+ * Remove the gray background on active links in IE 10.
+ */

 a {
  background-color: transparent;
 }

-//
-// Improve readability when focused and also mouse hovered in all browsers.
-//
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-// Text-level semantics
-// ==========================================================================
-
-//
-// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
-//
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */

 abbr[title] {
-  border-bottom: 1px dotted;
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }

-//
-// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
-//
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */

 b,
 strong {
  font-weight: $font-weight-bold;
 }

-//
-// Address styling not present in Safari and Chrome.
-//
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */

-dfn {
-  font-style: italic;
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }

-//
-// Address variable `h1` font-size and margin within `section` and `article`
-// contexts in Firefox 4+, Safari, and Chrome.
-//
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-//
-// Address styling not present in IE 8/9.
-//
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-//
-// Address inconsistent and variable font size in all browsers.
-//
+/**
+ * Add the correct font size in all browsers.
+ */

 small {
  font-size: 80%;
 }

-//
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
-//
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */

 sub,
 sup {
@@ -166,262 +120,220 @@ sup {
  vertical-align: baseline;
 }

-sup {
-  top: -0.5em;
-}
-
 sub {
  bottom: -0.25em;
 }

-// Embedded content
-// ==========================================================================
+sup {
+  top: -0.5em;
+}

-//
-// Remove border when inside `a` element in IE 8/9/10.
-//
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */

 img {
-  border: 0;
+  border-style: none;
 }

-//
-// Correct overflow not hidden in IE 9/10/11.
-//
+/* Forms
+   ========================================================================== */

-svg:not(:root) {
-  overflow: hidden;
-}
-
-// Grouping content
-// ==========================================================================
-
-//
-// Address margin not present in IE 8/9 and Safari.
-//
-
-figure {
-  margin: 1em 40px;
-}
-
-//
-// Address differences between Firefox and other browsers.
-//
-
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-
-//
-// Contain overflow in all browsers.
-//
-
-pre {
-  overflow: auto;
-}
-
-//
-// Address odd `em`-unit font size rendering in all browsers.
-//
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-// Forms
-// ==========================================================================
-
-//
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `select`, unless a `border` property is set.
-//
-
-//
-// 1. Correct color not being inherited.
-//    Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
-//
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */

 button,
 input,
 optgroup,
 select,
 textarea {
-  color: inherit; // 1
-  font: inherit; // 2
-  margin: 0; // 3
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }

-//
-// Address `overflow` set to `hidden` in IE 8/9/10/11.
-//
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */

-button {
+button,
+input { /* 1 */
  overflow: visible;
 }

-//
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
-// All other form control elements do not inherit `text-transform` values.
-// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
-// Correct `select` style inheritance in Firefox.
-//
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */

 button,
-select {
+select { /* 1 */
  text-transform: none;
 }

-//
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
-//    and `video` controls.
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-//    `input` and others.
-//
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */

 button,
-html input[type="button"], // 1
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; // 2
-  cursor: pointer; // 3
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
 }

-//
-// Re-set default cursor for disabled elements.
-//
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-//
-// Remove inner padding and border in Firefox 4+.
-//
+/**
+ * Remove the inner border and padding in Firefox.
+ */

 button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
  padding: 0;
 }

-//
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in
-// the UA stylesheet.
-//
+/**
+ * Restore the focus styles unset by the previous rule.
+ */

-input {
-  line-height: normal;
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }

-//
-// It's recommended that you don't attempt to style these elements.
-// Firefox's implementation doesn't respect box-sizing, padding, or width.
-//
-// 1. Address box sizing set to `content-box` in IE 8/9/10.
-// 2. Remove excess padding in IE 8/9/10.
-//
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-//
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
-//
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-//
-// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
-// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
-//    (include `-moz` to future-proof).
-//
-
-input[type="search"] {
-  -webkit-appearance: textfield; // 1
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; // 2
-  box-sizing: content-box;
-}
-
-//
-// Remove inner padding and search cancel button in Safari and Chrome on OS X.
-// Safari (but not Chrome) clips the cancel button when the search input has
-// padding (and `textfield` appearance).
-//
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-//
-// Define consistent border, margin, and padding.
-//
+/**
+ * Correct the padding in Firefox.
+ */

 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.75em 0.625em;
 }

-//
-// 1. Correct `color` not being inherited in IE 8/9/10/11.
-// 2. Remove padding so people aren't caught out if they zero out fieldsets.
-//
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */

 legend {
-  border: 0; // 1
-  padding: 0; // 2
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }

-//
-// Remove default vertical scrollbar in IE 8/9/10/11.
-//
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */

 textarea {
  overflow: auto;
 }

-//
-// Don't inherit the `font-weight` (applied by a rule above).
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
-//
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */

-optgroup {
-  font-weight: $font-weight-bold;
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }

-// Tables
-// ==========================================================================
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */

-//
-// Remove most spacing between table cells.
-//
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
 }

-td,
-th {
-  padding: 0;
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
 }
--- a/src/sass/lib/font-awesome/_variables.scss
+++ b/src/sass/lib/font-awesome/_variables.scss
@@ -796,3 +796,4 @@ $fa-var-yoast:                  "\f2b1";
 $fa-var-youtube:                "\f167";
 $fa-var-youtube-play:           "\f16a";
 $fa-var-youtube-square:         "\f166";
+
--- a/src/sass/mixins/_buttons.scss
+++ b/src/sass/mixins/_buttons.scss
@@ -1,9 +1,9 @@
 // Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
+  border-radius: $border-radius;
  font-size: $font-size;
  line-height: $line-height;
-  border-radius: $border-radius;
 }

@mixin button-variant($color, $bg, $border) {
--- a/src/sass/mixins/_center-block.scss
+++ b/src/sass/mixins/_center-block.scss
@@ -2,6 +2,6 @@

@mixin center-block() {
  display: block;
-  margin-left: auto;
  margin-right: auto;
+  margin-left: auto;
 }
--- a/src/sass/mixins/_forms.scss
+++ b/src/sass/mixins/_forms.scss
@@ -44,8 +44,9 @@
  @extend %clearfix;
  position: relative;
  padding-left: $check-input-gutter;
-  text-align: left;
  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
+  text-align: left;

  input[type="checkbox"],
  input[type="radio"] {
@@ -66,10 +67,12 @@
  @include check;
  display: block;
  width: auto;
-  margin: $btn-padding-vertical 0;
+  margin: 0;
+  padding-top: $check-list-offset-top;
+  padding-bottom: $check-list-offset-top;
  float: none;

  @media screen and (min-width: $screen-sm-min) {
-    margin: 0;
+    padding-bottom: 0;
  }
 }
--- a/src/sass/mixins/_image.scss
+++ b/src/sass/mixins/_image.scss
@@ -3,12 +3,12 @@

@mixin img-retina($file-2x, $width-1x, $height-1x) {
  @media
-  only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (min--moz-device-pixel-ratio: 2),
-  only screen and (-o-min-device-pixel-ratio: 2/1),
-  only screen and (min-device-pixel-ratio: 2),
-  only screen and (min-resolution: 192dpi),
-  only screen and (min-resolution: 2dppx) {
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2 / 1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
    background-image: url("#{$file-2x}");
    background-size: $width-1x $height-1x;
  }
--- a/src/sass/mixins/_issues.scss
+++ b/src/sass/mixins/_issues.scss
@@ -1,146 +1,23 @@
-// Priority highlight
+// Priority icon

-@mixin priority($parent, $background, $color, $link) {
-  @if lightness($background) < 85% {
-    $background: lighten($background, 6%);
+@mixin priority-icon-base() {
+  &::before {
+    content: "\00a0";
+    display: inline-block;
+    width: $priority-icon-size;
+    margin-right: $priority-icon-space;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $priority-icon-size;
  }
+}

-  $border-color: darken(desaturate($background, 30%), 13.5%);
-
-  table.list:not(.odd-even) tbody tr#{$parent} {
-    @if $table-list-color-odd-rows {
-      &:nth-child(odd) {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-
-    @if $table-list-color-even-rows {
-      &:nth-child(even) {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-  }
-
-  tr#{$parent} {
-    background: $background;
-
-    @if ".priority-default" == $parent {
-      color: $color;
-    } @else {
-      color: darken($color, 10%);
-    }
-
-    @if $table-list-color-odd-rows {
-      &.odd {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-
-    @if $table-list-color-even-rows {
-      &.even {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-
-    td {
-      border-color: $border-color;
-    }
-
-    a {
-      color: $link;
-
-      &:hover {
-        color: darken($link, 10%);
-      }
-    }
-  }
-
-  @if $table-list-highlight-rows {
-    table.list > tbody > tr#{$parent}:hover {
-      background: darken($background, $table-hover-factor * 100%);
-    }
-
-    @if $table-list-color-odd-rows {
-      &.odd {
-        background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
-      }
-    }
-
-    @if $table-list-color-even-rows {
-      &.even {
-        background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
-      }
-    }
-  }
-
-  @if $colored-issue {
-    .issue.details#{$parent} {
-      color: $color;
-
-      @if ".priority-default" == $parent {
-        $border-color: $issue-border;
-        background: $issue-bg;
-      } @else {
-        background: $background;
-      }
-
-      &,
-      hr {
-        border-color: $border-color;
-      }
-
-      a {
-        color: $link;
-
-        &:hover {
-          color: darken($link, 10%);
-        }
-      }
-
-      .next-prev-links {
-        color: mix($color, $gray-light, 25%);
-      }
-
-      > .description > .wiki {
-        border-top-color: $border-color;
-      }
-
-      .wiki {
-        a {
-          color: $link-color;
-          text-decoration: none;
-
-          &:hover,
-          &:focus {
-            color: $link-hover-color;
-            text-decoration: $link-hover-decoration;
-          }
-
-          &.new {
-            color: $brand-danger;
-          }
-        }
-      }
-
-      > .attachments {
-        span.author {
-          color: mix($color, $gray, 25%);
-        }
-      }
-
-      > .description + .attachments {
-        border-top-color: lighten($border-color, 5%);
-
-        @if ".priority-default" == $parent {
-          background-color: lighten($issue-bg, 1.5%);
-        } @else {
-          background-color: lighten($background, 5%);
-        }
-      }
-
-      .list td {
-        border-bottom-color: $border-color;
-      }
+@mixin priority-icon($parent, $color, $icon) {
+  table.list tbody tr#{$parent} .priority,
+  .issue.details#{$parent} .attributes td.priority,
+  .issue.details#{$parent} .attribute.priority .value {
+    &::before {
+      background-image: inline-svg($icon, (path: (fill: $color)));
    }
  }
 }
@@ -150,6 +27,8 @@

@mixin tracker($parent, $background, $color) {
  tr#{$parent} .id > a,
+  tr#{$parent} .issue_id > a,
+  a#{$parent}.issue,
  a#{$parent},
  .relations > span > a#{$parent},
  .parent > a#{$parent} {
@@ -185,14 +64,4 @@
      color: mix($color, $background, 50%);
    }
  }
-
-  @if $colored-issue {
-    .issue.details a#{$parent},
-    .issue.details .wiki a#{$parent} {
-      &,
-      &:hover {
-        color: $color;
-      }
-    }
-  }
 }
--- a/src/sass/mixins/_link-variant.scss
+++ b/src/sass/mixins/_link-variant.scss
@@ -1,10 +1,29 @@
 // Link variant

-@mixin link-variant($default-color, $hover-color: darken($default-color, 10%)) {
-  color: $default-color;
+@mixin link-variant($variant, $focus-hover: true) {
+  $colors: map-get($icon-color-map, $variant);
+
+  color: map-get($colors, normal);
+
+  @if $focus-hover {
+    &:focus,
+    &:hover {
+      color: map-get($colors, hover);
+    }
+  }
+}
+
+@mixin icon-variant($variant) {
+  $colors: map-get($icon-color-map, $variant);
+
+  &::before {
+    color: map-get($colors, normal);
+  }

  &:focus,
  &:hover {
-    color: $hover-color;
+    &::before {
+      color: map-get($colors, hover);
+    }
  }
 }
--- a/src/sass/mixins/_shadows.scss
+++ b/src/sass/mixins/_shadows.scss
@@ -4,15 +4,15 @@
  $shadow: none;

  @if ($depth == 1) {
-    $shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24);
-  } @elseif ($depth == 2) {
-    $shadow: 0 3px 6px rgba(#000, .16), 0 3px 6px rgba(#000, .23);
-  } @elseif ($depth == 3) {
-    $shadow: 0 10px 18px rgba(#000, .19), 0 6px 8px rgba(#000, .23);
-  } @elseif ($depth == 4) {
-    $shadow: 0 14px 28px rgba(#000, .25), 0 10px 10px rgba(#000, .22);
-  } @elseif ($depth == 5) {
-    $shadow: 0 19px 38px rgba(#000, .3), 0 15px 12px rgba(#000, .22);
+    $shadow: 0 1px 2px rgba(#000, .25);
+  } @else if ($depth == 2) {
+    $shadow: 0 5px 8px -2px rgba(#000, .25), 0 1px 2px rgba(#000, .3);
+  } @else if ($depth == 3) {
+    $shadow: 0 8px 16px -3px rgba(#000, .25), 0 2px 4px rgba(#000, .3);
+  } @else if ($depth == 4) {
+    $shadow: 0 14px 24px -4px rgba(#000, .25), 0 3px 10px rgba(#000, .3);
+  } @else if ($depth == 5) {
+    $shadow: 0 20px 32px -2px rgba(#000, .25), 0 4px 12px rgba(#000, .3);
  }

  box-shadow: $shadow;
--- a/src/sass/plugins/redmine_backlogs/global.scss
+++ b/src/sass/plugins/redmine_backlogs/global.scss
@@ -10,7 +10,7 @@ body {
  height: 100%;
  margin: 0;
  padding: 0;
-  background-color: mix($gray-lighter, $header-bg, 70%);
+  background-color: mix($gray-400, $header-bg, 70%);
  color: $text-color;
  font-family: $font-family-base;
  font-size: $font-size-base;
@@ -67,7 +67,9 @@ input.editor,
  @include placeholder;
  height: $input-height-base;
  padding: $input-padding-vertical $input-padding-horizontal;
-  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
+  transition:
+    border-color $transition-time ease-in-out,
+    box-shadow $transition-time ease-in-out;
  border: 1px solid $input-border;
  border-radius: $input-border-radius;
  background-color: $input-bg;
@@ -90,7 +92,9 @@ button.ui-multiselect {
  height: $input-height-base;
  padding: $input-padding-vertical $input-padding-horizontal;
  overflow: hidden;
-  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
+  transition:
+    border-color $transition-time ease-in-out,
+    box-shadow $transition-time ease-in-out;
  border: 1px solid $input-border;
  background: $input-bg;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
@@ -168,6 +172,10 @@ button.ui-multiselect {
  .links {
    float: right;

+    input {
+      vertical-align: initial;
+    }
+
    a {
      padding-left: 5px;
      cursor: pointer;
@@ -248,7 +256,7 @@ ul.ui-sortable {
 .ui-tooltip {
  .ui-tooltip-content {
    hr {
-      margin-top:    $line-height-computed / 2;
+      margin-top: $line-height-computed / 2;
      margin-bottom: $line-height-computed / 2;
      border: 0;
      border-top: 1px solid $hr-border;
@@ -294,7 +302,7 @@ ul.ui-sortable {
 .rb-sortable-disabled,
 .ui-sortable-disabled {
  opacity: .5;
-  background-color: $gray-lighter;
+  background-color: $gray-400;
 }

 .w-rb-header-collapsed {
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable Comment
+// stylelint-disable comment-whitespace-inside, no-duplicate-selectors
@import "../common";

 /*
@@ -66,7 +66,7 @@
 ----------------------------------*/

 .ui-state-disabled {
-  cursor: default !important; // scss-lint:disable ImportantRule
+  cursor: default !important; // stylelint-disable-line declaration-no-important
 }

 /* Icons
@@ -158,7 +158,7 @@
  background: $component-bg;
  box-shadow: none;
  color: $component-color;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }

 .ui-state-default a,
@@ -177,7 +177,7 @@
  border: 1px solid $component-active-border;
  background: $component-active-bg;
  color: $component-active-color;
-  font-weight: normal;
+  font-weight: $font-weight-normal;

  .ui-icon {
    background-image: url("../images/ui-icons_ffffff_256x240.png");
@@ -202,7 +202,7 @@
  border: 1px solid $component-active-border;
  background: $component-active-bg;
  color: $component-active-color;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }

 .ui-state-active a,
@@ -222,24 +222,24 @@

 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight {
-  border: 1px solid #fcefa1;
-  background: #fbf9ee;
-  color: #363636;
+  border: 1px solid shade($yellow, 600);
+  background: shade($yellow, 200);
+  color: shade($yellow, 800);

  a {
-    color: #363636;
+    color: shade($yellow, 800);
  }
 }


 .ui-state-error,
 .ui-widget-content .ui-state-error {
-  border: 1px solid #cd0a0a;
-  background: #fef1ec;
-  color: #cd0a0a;
+  border: 1px solid $red;
+  background: shade($red, 50);
+  color: $red;

  a {
-    color: #cd0a0a;
+    color: $red;
  }
 }

@@ -251,7 +251,7 @@
 .ui-priority-secondary,
 .ui-widget-content .ui-priority-secondary {
  opacity: .7;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }

 .ui-state-disabled,
@@ -521,7 +521,7 @@

 .ui-widget-overlay {
  opacity: .3;
-  background: #000;
+  background: $black;
 }

 .ui-widget-shadow {
@@ -529,7 +529,7 @@
  padding: 8px;
  border-radius: 8px;
  opacity: .3;
-  background: #aaa;
+  background: $gray-600;
 }

 /* Resizable
@@ -631,7 +631,7 @@
  }

  .ui-accordion-header-active {
-    border-bottom: 0 !important; // scss-lint:disable ImportantRule
+    border-bottom: 0 !important; // stylelint-disable-line declaration-no-important
  }

  .ui-accordion-header a {
@@ -734,7 +734,7 @@
  overflow: visible;
  zoom: 1;
  text-align: center;
-  text-decoration: none !important; // scss-lint:disable ImportantRule
+  text-decoration: none !important; // stylelint-disable-line declaration-no-important
  cursor: pointer;
 }

@@ -1007,7 +1007,7 @@ button.ui-button::-moz-focus-inner {
      padding: 0;
      float: left;
      list-style: none;
-      border-bottom: 0 !important; // scss-lint:disable ImportantRule
+      border-bottom: 0 !important; // stylelint-disable-line declaration-no-important
      white-space: nowrap;

      a {
@@ -1048,7 +1048,7 @@ button.ui-button::-moz-focus-inner {
  }

  .ui-tabs-hide {
-    display: none !important; // scss-lint:disable ImportantRule
+    display: none !important; // stylelint-disable-line declaration-no-important
  }
 }

@@ -1083,7 +1083,7 @@ button.ui-button::-moz-focus-inner {
    background: $body-bg;
    box-shadow: none;
    color: $component-color;
-    font-weight: normal;
+    font-weight: $font-weight-normal;

    a,
    a:link,
@@ -1098,7 +1098,7 @@ button.ui-button::-moz-focus-inner {
    border: 1px solid $component-active-border;
    background: $component-active-bg;
    color: $component-active-color;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
  }

  .ui-datepicker-prev,
@@ -1361,7 +1361,7 @@ button.ui-button::-moz-focus-inner {
  }
 }

- /* Progressbar
+/* Progressbar
 ----------------------------------*/

 .ui-progressbar {
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss
@@ -11,13 +11,13 @@

 .ui-multiselect-single .ui-multiselect-checkboxes {
  input {
-    position: absolute !important; // scss-lint:disable ImportantRule
-    top: auto !important; // scss-lint:disable ImportantRule
+    position: absolute !important; // stylelint-disable-line declaration-no-important
+    top: auto !important; // stylelint-disable-line declaration-no-important
    left: -9999px;
  }

  label {
-    padding: 5px !important; // scss-lint:disable ImportantRule
+    padding: 5px !important; // stylelint-disable-line declaration-no-important
  }
 }

@@ -71,10 +71,6 @@
    top: 0;
    margin: 3px 0 0 -20px;
    float: left;
-
-    &:focus {
-      outline: none;
-    }
  }

  label {
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss
@@ -22,16 +22,13 @@
  word-wrap: break-word;
 }

-.ui-tooltip-tip {
-  border-color: $tooltip-border;
-  background-color: $tooltip-bg;
-}
-
 .ui-tooltip-tip {
  position: absolute;
  z-index: 10;
  margin: 0 auto;
  overflow: hidden;
  border: 0 none;
+  border-color: $tooltip-border;
  background: transparent;
+  background-color: $tooltip-bg;
 }
--- a/src/sass/plugins/redmine_backlogs/master_backlog.scss
+++ b/src/sass/plugins/redmine_backlogs/master_backlog.scss
@@ -160,7 +160,7 @@ $story-sp-input-width:          50px;
    position: relative;
    margin: 0 0 ($padding-side / 2);
    border-radius: $border-radius-large $border-radius-large 0 0;
-    background-color: $gray-lightest;
+    background-color: $gray-100;

    @media screen and (min-width: $screen-md-min) {
      margin: 0 0 $padding-side;
@@ -189,9 +189,10 @@ $story-sp-input-width:          50px;

      &:focus {
        border-color: lighten($header-bg, 25%);
-        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2),
-              0 0 0 1px lighten($header-bg, 25%);
-        color: $gray-darkest;
+        box-shadow:
+          inset 0 1px 3px rgba(0, 0, 0, .2),
+          0 0 0 1px lighten($header-bg, 25%);
+        color: $gray-950;
      }
    }

@@ -279,7 +280,7 @@ $story-sp-input-width:          50px;
        $name-width-minus: $header-right-width-wider + 35px;

        position: relative;
-        width: calc(100% - #{$name-width-minus}) !important; // scss-lint:disable ImportantRule
+        width: calc(100% - #{$name-width-minus}) !important; // stylelint-disable-line declaration-no-important
        min-width: 128px;
        margin-left: $header-line-height - 2px;
        float: left;
@@ -341,7 +342,7 @@ $story-sp-input-width:          50px;
        box-shadow: 0 2px 1px rgba(#000, .1);

        a {
-          color: $gray-darker;
+          color: $gray-900;
        }
      }

@@ -434,7 +435,7 @@ $story-sp-input-width:          50px;

    .placeholder {
      min-height: ($line-height-computed + $table-condensed-cell-padding * 2);
-      background-color: $gray;
+      background-color: $gray-700;
    }
  }

@@ -442,14 +443,14 @@ $story-sp-input-width:          50px;
    display: block;
    margin: 0;
    padding: 0 $table-condensed-cell-padding;
-    border-top: 1px solid $gray-lighter;
+    border-top: 1px solid $gray-400;
    background-color: $body-bg;
    background-repeat: no-repeat;
    background-position: center;
    cursor: move;

    &:nth-child(2n) {
-      background-color: $gray-lightest;
+      background-color: $gray-100;
    }

    &:hover {
@@ -458,7 +459,7 @@ $story-sp-input-width:          50px;

    &.saving {
      background-image: url("images/ajax.gif");
-      color: $gray-light;
+      color: $gray-600;
    }

    &.error {
@@ -485,8 +486,8 @@ $story-sp-input-width:          50px;
            background-color: $tracker-default-bg;
            color: $tracker-default-text;
          } @else {
-            background-color: darken($gray-lightest, 3%);
-            color: $gray-dark;
+            background-color: darken($gray-100, 3%);
+            color: $gray-800;
          }
          font-weight: $font-weight-bold;
          text-align: right;
@@ -497,16 +498,16 @@ $story-sp-input-width:          50px;
            @if $color-trackers {
              color: mix($tracker-default-text, $tracker-default-bg, 50%);
            } @else {
-              color: $gray-light;
+              color: $gray-600;
            }
-            font-weight: normal;
+            font-weight: $font-weight-normal;
          }

          &:hover {
            @if $color-trackers {
              background-color: darken($tracker-default-bg, 10%);
            } @else {
-              background-color: $gray-lighter;
+              background-color: $gray-400;
            }
            text-decoration: none;
          }
@@ -592,9 +593,10 @@ $story-sp-input-width:          50px;

        &:focus {
          border-color: darken($highlight-border, 15%);
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075),
-                0 0 5px rgba(darken($highlight-border, 15%), .5);
-          color: $gray-darkest;
+          box-shadow:
+            inset 0 1px 2px rgba(0, 0, 0, .075),
+            0 0 5px rgba(darken($highlight-border, 15%), .5);
+          color: $gray-950;
        }
      }

@@ -643,7 +645,7 @@ $story-sp-input-width:          50px;
        &.subject {
          $subject-width-minus: $story-status-input-width + $story-sp-input-width + 5px * 2;

-          width: calc(100% - #{$subject-width-minus}) !important; // scss-lint:disable ImportantRule
+          width: calc(100% - #{$subject-width-minus}) !important; // stylelint-disable-line declaration-no-important
          height: 60px;
          float: left;
          overflow: auto;
@@ -755,9 +757,10 @@ $story-sp-input-width:          50px;
      @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
      display: inline-block;
      margin-bottom: 0;
-      transition: background-color ease-in-out .07s,
-                  border-color ease-in-out .07s,
-                  box-shadow ease-in-out .07s;
+      transition:
+        background-color ease-in-out .07s,
+        border-color ease-in-out .07s,
+        box-shadow ease-in-out .07s;
      border: 1px solid;
      font-weight: $btn-font-weight;
      text-align: center;
@@ -821,7 +824,7 @@ $story-sp-input-width:          50px;

 #show_completed_sprints {
  margin-left: $padding-side / 2;
-  color: $gray-darkest;
+  color: $gray-950;
  cursor: pointer;
 }

--- a/src/sass/plugins/redmine_backlogs/taskboard.scss
+++ b/src/sass/plugins/redmine_backlogs/taskboard.scss
@@ -86,7 +86,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }

 .board {
-  border: 1px solid $gray;
+  border: 1px solid $gray-700;
  border-top: 0 none;
  background-color: $body-bg;
  color: $text-color;
@@ -141,7 +141,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }

 .story {
-  color: $gray-darker;
+  color: $gray-900;

  .id {
    margin-bottom: 5px;
@@ -157,11 +157,11 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
    .remaininghours {
      margin-left: 4px;
      float: right;
-      font-weight: normal;
+      font-weight: $font-weight-normal;
    }

    a {
-      color: $gray-darkest;
+      color: $gray-950;
      font-size: $font-size-small-px;
      font-weight: $font-weight-bold;
    }
@@ -226,8 +226,8 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
    float: left;
    border: 0 none;
    border-radius: $border-radius-large;
-    background-color: $gray-lighter;
-    color: $gray-darker;
+    background-color: $gray-400;
+    color: $gray-900;
    font-size: 10px;
    line-height: 1.3;
    cursor: move;
@@ -259,7 +259,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
    }

    a {
-      color: $gray-darkest;
+      color: $gray-950;
    }
  }

--- a/stylesheets/application.css
+++ b/stylesheets/application.css
--- a/svg/calendar.svg
+++ b/svg/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="880.5 896.5 16 16"><path fill="red" d="M882.5 910.5h2.3v-2.3h-2.3v2.3zm2.8 0h2.5v-2.3h-2.5v2.3zm-2.8-2.8h2.3v-2.5h-2.3v2.5zm2.8 0h2.5v-2.5h-2.5v2.5zm-2.8-3h2.3v-2.2h-2.3v2.3zm5.8 5.8h2.5v-2.3h-2.5v2.3zm-3-5.8h2.5v-2.2h-2.5v2.3zm6 5.8h2.2v-2.3h-2.3v2.3zm-3-2.8h2.5v-2.5h-2.5v2.5zm-2.8-6.7v-2.3-.1l-.2-.1h-.7l-.1.2v2.5H885.5l.1-.2zm5.8 6.8h2.2v-2.5h-2.3v2.5zm-3-3h2.5v-2.3h-2.5v2.3zm3 0h2.2v-2.3h-2.3v2.3zm.2-3.8v-2.3-.1l-.2-.1h-.7l-.1.2v2.5H891.5l.1-.2zm3-.5v10c0 .3-.1.5-.3.7s-.4.3-.7.3h-11c-.3 0-.5-.1-.7-.3s-.3-.4-.3-.7v-10c0-.3.1-.5.3-.7s.4-.3.7-.3h1v-.8c0-.3.1-.6.4-.8s.5-.4.8-.4h.5c.4 0 .7.1 1 .4s.3.5.3.8v.8h3v-.8c0-.3.1-.6.4-.8s.5-.4.8-.4h.5c.4 0 .7.1 1 .4s.3.5.3.8v.8h1c.3 0 .5.1.7.3s.3.4.3.7z"/></svg>
--- a/svg/chevron-left.svg
+++ b/svg/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M8.996 12.659l-3.5-4a1.002 1.002 0 0 1 0-1.317l3.5-4a1 1 0 1 1 1.503 1.317L7.576 8l2.924 3.342a1 1 0 1 1-1.504 1.317z"/></svg>
--- a/svg/chevron-right.svg
+++ b/svg/chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M6.25 13a1 1 0 0 1-.752-1.658L8.422 8 5.499 4.659a1 1 0 1 1 1.503-1.317l3.5 4c.329.377.329.94 0 1.317l-3.5 4A.993.993 0 0 1 6.25 13z"/></svg>
--- a/svg/diff-added.svg
+++ b/svg/diff-added.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-14.5 16.5 14 14"><path fill="red" d="M-1.5 16.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12zm-7-5h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/></svg>
--- a/svg/diff-copied.svg
+++ b/svg/diff-copied.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-7.5 8.5 14 14"><path fill="red" d="M5.5 8.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12z"/><path fill="red" d="M4 13l-6 6-3-3 1.5-1.5L-2 16l4.5-4.5z"/></svg>
--- a/svg/diff-deleted.svg
+++ b/svg/diff-deleted.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-7.5 9.5 14 14"><path fill="red" d="M5.5 9.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12zm-2-5h-8v-2h8v2z"/></svg>
--- a/svg/diff-modified.svg
+++ b/svg/diff-modified.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-14.5 16.5 14 14"><path fill="red" d="M-1.5 16.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12zm-9-6c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"/></svg>
--- a/svg/diff-renamed.svg
+++ b/svg/diff-renamed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-7.5 9.5 14 14"><path fill="red" d="M-1.5 17.5h-3v-2h3v-3l5 4-5 4v-3zm8-7v12c0 .55-.45 1-1 1h-12c-.55 0-1-.45-1-1v-12c0-.55.45-1 1-1h12c.55 0 1 .45 1 1zm-1 0h-12v12h12v-12z"/></svg>
--- a/svg/minus.svg
+++ b/svg/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M4 7h8v2H4z"/></svg>
--- a/svg/plus.svg
+++ b/svg/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-1 -1 16 16"><path fill="red" d="M11 6H8V3H6v3H3v2h3v3h2V8h3z"/></svg>
--- a/svg/priority-blocker.svg
+++ b/svg/priority-blocker.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M7 1.25C3.829 1.25 1.25 3.829 1.25 7S3.829 12.75 7 12.75s5.75-2.579 5.75-5.75S10.171 1.25 7 1.25zM10.5 8h-7a1 1 0 1 1 0-2h7a1 1 0 1 1 0 2z"/></svg>
--- a/svg/priority-critical.svg
+++ b/svg/priority-critical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.6 4.2l-4-3a.999.999 0 0 0-1.2 0l-4 3A1 1 0 0 0 2 5v7a1.001 1.001 0 0 0 1.6.8L7 10.25l3.4 2.55a.995.995 0 0 0 1.047.095c.339-.17.553-.516.553-.895V5a1 1 0 0 0-.4-.8z"/></svg>
--- a/svg/priority-high.svg
+++ b/svg/priority-high.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M10.999 9.5a.996.996 0 0 1-.599-.2L7 6.75 3.6 9.3a1 1 0 0 1-1.2-1.6l4-3a.996.996 0 0 1 1.2 0l4 3a.999.999 0 0 1-.601 1.8z"/></svg>
--- a/svg/priority-highest.svg
+++ b/svg/priority-highest.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="red"><path d="M10.999 7a.994.994 0 0 1-.599-.2L7 4.25 3.6 6.8a1 1 0 0 1-1.2-1.6l4-3a.995.995 0 0 1 1.199 0l4 3a.998.998 0 0 1 .2 1.399.992.992 0 0 1-.8.401z"/><path opacity=".7" d="M10.999 12a.994.994 0 0 1-.599-.2L7 9.25 3.6 11.8a1 1 0 0 1-1.2-1.599l4-3a.995.995 0 0 1 1.199 0l4 3a.998.998 0 0 1-.6 1.799z"/></g></svg>
--- a/svg/priority-low.svg
+++ b/svg/priority-low.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M7 9.5a.995.995 0 0 1-.6-.2l-4-3a1 1 0 0 1 1.2-1.6L7 7.25l3.4-2.55a1 1 0 0 1 1.2 1.599l-4 3A.99.99 0 0 1 7 9.5z"/></svg>
--- a/svg/priority-lowest.svg
+++ b/svg/priority-lowest.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="red"><path d="M7 12a.995.995 0 0 1-.6-.2l-4-3a1 1 0 0 1 1.2-1.6L7 9.75l3.4-2.55a1 1 0 0 1 1.2 1.599l-4 3A.99.99 0 0 1 7 12z"/><path opacity=".7" d="M7 7a.995.995 0 0 1-.6-.2l-4-3a1 1 0 0 1 1.2-1.6L7 4.75l3.4-2.55a1 1 0 0 1 1.2 1.599l-4 3A.99.99 0 0 1 7 7z"/></g></svg>
--- a/svg/priority-major.svg
+++ b/svg/priority-major.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.707 5.293l-4-4a.999.999 0 0 0-1.414 0l-4 4a.999.999 0 1 0 1.414 1.414L6 4.414V12a1 1 0 1 0 2 0V4.414l2.293 2.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"/></svg>
--- a/svg/priority-medium.svg
+++ b/svg/priority-medium.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.5 6h-9a1 1 0 1 1 0-2h9a1 1 0 1 1 0 2zM11.5 10h-9a1 1 0 1 1 0-2h9a1 1 0 1 1 0 2z"/></svg>
--- a/svg/priority-minor.svg
+++ b/svg/priority-minor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.707 7.293a.999.999 0 0 0-1.414 0L8 9.586V2a1 1 0 1 0-2 0v7.586L3.707 7.293a.999.999 0 1 0-1.414 1.414l4 4a.997.997 0 0 0 1.414 0l4-4a.999.999 0 0 0 0-1.414z"/></svg>
--- a/svg/priority-trivial.svg
+++ b/svg/priority-trivial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M7 13c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM7 3C4.794 3 3 4.794 3 7s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
Author	SHA1	Message	Date
mrliptontea	2ef0ebd380	Release v2.12.0	2020-08-01 15:40:11 +01:00
Grzegorz Rajchman	fce7bcffd3	Merge pull request #203 from ifad/fix/wiki-pagination fix pagination overlapping wiki content	2020-08-01 15:31:52 +01:00
Marcello Barnaba	32366f5679	fix pagination overlapping wiki content	2020-07-31 16:11:49 +02:00
Grzegorz Rajchman	13297491d0	Merge pull request #202 from mrliptontea/dependabot/npm_and_yarn/lodash-4.17.19 Bump lodash from 4.17.15 to 4.17.19	2020-07-16 19:57:45 +01:00
dependabot[bot]	6dc24b6911	Bump lodash from 4.17.15 to 4.17.19 Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19) Signed-off-by: dependabot[bot] <support@github.com>	2020-07-16 00:39:13 +00:00
Grzegorz Rajchman	25e00a217d	Merge pull request #200 from mrliptontea/issue-199-wrap-key-values Fix #199 wrap key-values in issues list	2020-06-23 20:57:48 +01:00
mrliptontea	54d0136aa5	Fix #199 wrap key-values in issues list	2020-06-23 20:54:37 +01:00
mrliptontea	670830cf3e	Use npm script for linters lint-action doesn't work for forks	2020-06-15 21:00:20 +01:00
Grzegorz Rajchman	06ac7eff64	Merge pull request #197 from mrliptontea/issue-196 Fix text wrapping in issue list	2020-06-15 20:59:30 +01:00
mrliptontea	f87c391547	Fix text wrapping in issue list	2020-06-15 20:51:07 +01:00
mrliptontea	8bf71cf947	Replace lint badge	2020-06-14 15:04:26 +01:00
Grzegorz Rajchman	bfa2376653	Merge pull request #195 from mrliptontea/dependabot/npm_and_yarn/websocket-extensions-0.1.4 Bump websocket-extensions from 0.1.3 to 0.1.4	2020-06-14 15:01:33 +01:00
dependabot[bot]	cfec912d12	Bump websocket-extensions from 0.1.3 to 0.1.4 Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. - [Release notes](https://github.com/faye/websocket-extensions-node/releases) - [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md) - [Commits](https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4) Signed-off-by: dependabot[bot] <support@github.com>	2020-06-06 11:30:30 +00:00
Grzegorz Rajchman	8c26cacebc	Merge pull request #194 from mrliptontea/updates Updates	2020-05-25 22:35:06 +01:00
mrliptontea	71fb78a3b7	Add husky and lint-staged git hooks	2020-05-25 22:09:58 +01:00
mrliptontea	dfce2e0b13	Update workflow - Bump checkout action to v2 - Run on pull_request and on push to branches	2020-05-24 16:02:47 +01:00
mrliptontea	491fde75bb	Update packages	2020-05-24 16:01:52 +01:00
mrliptontea	5e671bb9b7	Release v2.11.0	2020-05-08 23:32:34 +01:00
Grzegorz Rajchman	604a00561b	Merge pull request #190 from mrliptontea/redmineup-improvements Bulk improvements	2020-05-08 23:31:01 +01:00
mrliptontea	1d5b42235e	Add Redmine Banner styles	2020-05-08 23:28:42 +01:00
mrliptontea	2b492be04a	RedmineUP improvements	2020-05-08 23:28:27 +01:00
mrliptontea	4245d5daf6	Add table icon to jstoolbar	2020-04-25 18:40:01 +01:00
mrliptontea	06e7e4fded	Fix checkbox padding when table borders are enabled	2020-04-25 18:38:45 +01:00
mrliptontea	36000bd02c	Restore $color-priorities	2020-04-25 18:35:37 +01:00
Grzegorz Rajchman	510a32ec41	Merge pull request #180 from mrliptontea/issue-179-full-screen-mode-issues Fix #179 full screen mode issues	2020-04-14 21:14:50 +01:00
mrliptontea	80105407af	Fix #179 full screen mode issues	2020-04-14 21:12:53 +01:00
Grzegorz Rajchman	6e9e834816	Merge pull request #178 from mrliptontea/issue-177-icon-lose-hover Fix #177 change styling for icon-only buttons	2020-04-13 20:13:32 +01:00
mrliptontea	0d1daf1a22	Fix #177 change styling for icon-only buttons	2020-04-13 20:05:18 +01:00
mrliptontea	e7500035e3	Release v2.10.2	2020-04-09 15:37:37 +01:00
Grzegorz Rajchman	d3ed59dc9b	Merge pull request #176 from mrliptontea/fix-175-target-note-edit Fix target note cannot be edited	2020-04-09 09:21:58 +01:00
mrliptontea	edbe4feca8	Fix #175 target note cannot be edited	2020-04-09 09:20:38 +01:00
mrliptontea	942f23f2cb	Release v2.10.1	2020-04-06 18:53:33 +01:00
Grzegorz Rajchman	3fc4660203	Merge pull request #163 from mrliptontea/issue-160-checklist-menu-hover Fix #160 checklist plugin menu highlight color	2020-04-06 18:52:50 +01:00
mrliptontea	1fa4a87da7	Fix #160 checklist plugin menu highlight color	2020-04-06 18:49:52 +01:00
mrliptontea	07a08db560	Release v2.10.0	2020-04-05 22:17:14 +01:00
Grzegorz Rajchman	2eb5d83f59	Merge pull request #174 from mrliptontea/issues-169-170-171-172 * Fix #172 Collapsed/expended icons for completed versions. * Fix #171 "Display" label in Gantt option. * Fix #170 radio buttons in projects options. * Fix #169 styles in the spent time tab. * Change lightness of shades 50 and 950. * Change loader styles. * Change rouge syntax highlighter color scheme.	2020-04-05 22:15:01 +01:00
mrliptontea	1bdfab795a	Change rouge syntax highlighter color scheme	2020-04-05 22:10:20 +01:00
mrliptontea	aa4c59a48c	Fix some styling issues in Redmine 4. * Fix #172 Collapsed/expended icons for completed versions. * Fix #171 "Display" label in Gantt option. * Fix #170 radio buttons in projects options. * Fix #169 styles in the spent time tab. * Change lightness of shades 50 and 950. * Change loader styles.	2020-04-05 18:53:53 +01:00
Grzegorz Rajchman	aaddd2e10b	Merge pull request #168 from mrliptontea/issues-148-150-dashboard-agile-plugins Fix styling issues in Dashboard and Agile plugins	2020-03-28 13:10:05 +00:00
mrliptontea	5c14dbbf62	Simpler workflow trigger	2020-03-28 13:04:59 +00:00
mrliptontea	f8609cbbbb	Fix styling issues in Dashboard and Agile plugins - Fix #150 styling for query totals and expander in Agile plugin. - Fix #148 full screen view for Dashboard plugin.	2020-03-28 13:01:29 +00:00
Grzegorz Rajchman	6443eba8c2	Merge pull request #166 from mrliptontea/issue-164-responsive-theme-not-applied Fix #164 Apply responsive override more generally	2020-03-28 11:37:00 +00:00
mrliptontea	70c88722fb	Fix #164 Apply responsive override more generally	2020-03-27 18:15:12 +00:00
Grzegorz Rajchman	4b10532cea	Upgrade packages and improve linter action (#167 )	2020-03-27 18:14:49 +00:00
Grzegorz Rajchman	77a9633984	Merge pull request #162 from mrliptontea/issue-159/long-text-wrapping Fix #159 wrapping long text in issue attributes	2020-03-15 21:35:01 +00:00
mrliptontea	92e92e75b9	Fix #159 wrapping long text in issue attributes	2020-03-15 21:29:40 +00:00
Grzegorz Rajchman	e4c69d5d86	Merge pull request #161 from mrliptontea/dependabot/npm_and_yarn/acorn-7.1.1 Bump acorn from 7.1.0 to 7.1.1	2020-03-15 21:25:34 +00:00
dependabot[bot]	4d82879d90	Bump acorn from 7.1.0 to 7.1.1 Bumps [acorn](https://github.com/acornjs/acorn) from 7.1.0 to 7.1.1. - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](https://github.com/acornjs/acorn/compare/7.1.0...7.1.1) Signed-off-by: dependabot[bot] <support@github.com>	2020-03-13 21:27:39 +00:00
mrliptontea	a2b49b6ff1	Release v2.9.1	2020-02-22 14:55:25 +00:00
mrliptontea	205109ac30	Fix roadmap badge positioning	2020-02-22 14:54:33 +00:00
mrliptontea	e981dc4ec0	Merge branch '1resu-patch-1'	2020-02-22 14:45:55 +00:00
mrliptontea	955aca022e	Build updated JS	2020-02-22 14:41:40 +00:00
1resu	164391c6c2	Fix url.indexOf is Not a Function Error The sidebar toogler isn't working with newer jquery versions (https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed)	2020-02-20 22:20:12 +01:00
mrliptontea	e5b9b5fdf9	Release v2.9.0	2020-01-30 21:14:20 +00:00
Grzegorz Rajchman	e7e68125b3	Merge pull request #154 from mrliptontea/resolve-issues Resolve issues	2020-01-30 20:59:03 +00:00
mrliptontea	57a60673a7	Resolve issues * Fixed #141: improved styling for issue edit form. * Fixed #142: TOC assumes `left` by default, also added new variables to control how it looks. * Fixed #143: `$main-menu-bg-hover` is now being used. * Resolved #144: added `$main-menu-bg-active` variable. * Resolved #145: added `$table-list-header-bg` variable. * Fixed #147: corrected forum edit attached files icon. * Fixed #153: improved styling for `label.block`.	2020-01-30 20:55:46 +00:00
mrliptontea	136cf02394	Update dependencies	2020-01-28 20:20:28 +00:00
mrliptontea	9f7d02e511	Update badges	2019-08-13 23:04:19 +01:00
Grzegorz Rajchman	6b64af35a5	Merge pull request #137 from mrliptontea/actions Set up actions	2019-08-13 22:46:28 +01:00
mrliptontea	e716b92e67	Set up actions	2019-08-13 22:42:48 +01:00
mrliptontea	9418139adb	Release v2.8.0	2019-08-13 22:09:07 +01:00
mrliptontea	ca3ead0abf	Update README	2019-08-13 22:07:47 +01:00
Grzegorz Rajchman	7745e4b617	Merge pull request #136 from two-pack/fixes_pos_pagination Invalid position of pagination with large image attachment	2019-08-13 22:05:03 +01:00
two-pack	1207548232	Fixes lint errors.	2019-08-13 09:30:52 +09:00
two-pack	9f451017c5	Fixes position of pagination with large image attachment.	2019-08-13 09:03:50 +09:00
mrliptontea	a28d215f31	Update package-lock.json Also, delete accidentally commited yarn.lock	2019-08-11 19:50:13 +01:00
mrliptontea	22ec5e09f5	Ignore no-prototype-builtins rule where not applicable	2019-08-10 18:29:41 +01:00
mrliptontea	9371b797b3	Update browserlist config	2019-08-06 23:16:29 +01:00
mrliptontea	924a5a94ed	Update dependencies	2019-08-06 23:11:03 +01:00
mrliptontea	53fffa3b5c	Update build badge	2019-08-06 23:08:43 +01:00
mrliptontea	42e5ce1217	Fix spacing for headers on roadmap pages Resolves #132	2019-08-06 23:08:04 +01:00
mrliptontea	fc5b48aabe	Release v2.7.0	2019-06-13 20:51:48 +01:00
Grzegorz Rajchman	5e04839cfd	Merge pull request #126 from mrliptontea/issue-124/support-issue-id-plugin Support issue-id plugin	2019-06-13 20:41:51 +01:00
mrliptontea	ad138b9331	Support issue-id plugin Resolves #124 http://projects.andriylesyuk.com/project/redmine/issue-id	2019-06-13 20:36:12 +01:00
mrliptontea	6a78cb45c1	Release v2.6.0	2019-06-13 00:04:08 +01:00
Grzegorz Rajchman	b14206a585	Merge pull request #122 from mrliptontea/issue-121/support-redmine_wiki_page_tree-plugin Add support for redmine_wiki_page_tree plugin	2019-06-13 00:03:40 +01:00
mrliptontea	a1d18834d3	Add support for redmine_wiki_page_tree plugin Resolves #121	2019-06-13 00:01:01 +01:00
mrliptontea	df3e0fb696	Release v2.5.0	2019-06-05 20:54:41 +01:00
Grzegorz Rajchman	d17f4d2542	Merge pull request #119 from mrliptontea/issues/117-118-responsive-layout-fixes Improvements for responsive layout	2019-06-05 20:52:47 +01:00
mrliptontea	51ba1deb36	Improvements for responsive layout	2019-06-05 20:49:27 +01:00
mrliptontea	b5d02128f5	Release v2.4.0	2019-06-02 21:43:35 +01:00
Grzegorz Rajchman	aa8738c749	Merge pull request #116 from mrliptontea/sync-with-default-theme Bring up to speed with the default theme	2019-06-02 21:41:03 +01:00
mrliptontea	0282ba6695	Bring up to speed with the default theme	2019-06-02 21:38:42 +01:00
mrliptontea	0c4be053dc	Release v2.3.1	2019-05-21 20:10:40 +01:00
Grzegorz Rajchman	319f97d468	Merge pull request #113 from mrliptontea/issue-112/diff-colors Improve the color contrast in text diffs	2019-05-21 20:09:08 +01:00
mrliptontea	7bbdb230a8	Improve the color contrast in text diffs	2019-05-21 20:01:26 +01:00
mrliptontea	dd23f453e5	Release v2.3.0	2019-05-09 22:33:54 +01:00
Grzegorz Rajchman	8a8551b821	Merge pull request #108 from mrliptontea/issue-107/nested-lis Issue 107/nested lis	2019-05-09 22:31:27 +01:00
mrliptontea	1ce3d3121f	Merge branch 'master' into issue-107/nested-lis	2019-05-09 22:11:23 +01:00
Grzegorz Rajchman	3b9128bf1b	Merge pull request #109 from mrliptontea/stylelint Use stylelint	2019-05-09 22:08:44 +01:00
mrliptontea	a2e8955488	Use stylelint	2019-05-09 22:05:30 +01:00
mrliptontea	759d8424b9	Support lists in the sidebar via additionals plugin	2019-05-09 20:35:07 +01:00
mrliptontea	d365120f67	Support pages hierarchy list in the sidebar and main content Resolves #107	2019-05-09 20:01:48 +01:00
mrliptontea	2ababdc027	Release v2.2.0	2019-04-09 22:37:10 +01:00
Grzegorz Rajchman	f60eac82e3	Merge pull request #104 from mrliptontea/resolve-tooltip-positioning-issues Resolve tooltip positioning issues	2019-04-09 22:36:07 +01:00
mrliptontea	e68f8a1aa3	Remove margin from paragraphs in tables That's what Redmine's default theme does.	2019-04-09 22:27:47 +01:00
mrliptontea	0bb9a27140	Fix tooltip positioning on gantt chart and agile board Resolves #101, #102	2019-04-09 22:18:05 +01:00
mrliptontea	15368c666e	Version 2.1.1	2019-03-23 00:00:32 +00:00
Grzegorz Rajchman	9f1a1bf3eb	Merge pull request #99 from mrliptontea/fix-sidebar-toggler-in-fixed-layout Fix sidebar toggler in fixed layout	2019-03-22 23:58:38 +00:00
mrliptontea	97502b8372	Fix contextual dropdown padding in mobile view	2019-03-22 23:54:37 +00:00
mrliptontea	aa985c34c6	Merge branch 'v1.x' into fix-sidebar-toggler-in-fixed-layout	2019-03-22 23:48:16 +00:00
mrliptontea	c4f2ccff3f	Fix sidebar toggle style with fixed layout enabled	2019-03-22 23:36:10 +00:00
mrliptontea	a9160256cf	Release v2.1.0	2019-03-22 21:23:53 +00:00
Grzegorz Rajchman	672c1b45a2	Merge pull request #97 from mrliptontea/improvements Add a few improvements	2019-03-22 21:23:05 +00:00
mrliptontea	e3e194bb95	Add a few improvements - Improve progress bar styling - Improve avatar positioning - Improve WYSIWYG button styling - Make wiki preview font sizes consistent with presentation	2019-03-22 21:17:40 +00:00
Grzegorz Rajchman	91eb640575	Merge pull request #95 from mrliptontea/issue-94-subtasks-formatting-is-off Improve hierarchy list indentation	2019-03-22 19:16:37 +00:00
mrliptontea	06df2c2740	Merge branch 'master' into issue-94-subtasks-formatting-is-off	2019-03-22 19:13:32 +00:00
Grzegorz Rajchman	64c6f7707d	Merge pull request #96 from mrliptontea/issue-93-agile-chart-endlessly-expanding Add a hack to stop Agile chart from expanding forever	2019-03-22 19:12:30 +00:00
mrliptontea	ccdb344082	Add a hack to stop Agile chart from expanding forever Page layout on Agile charts is broken, and with "Go to top" link from https://github.com/alphanodes/additionals plugin enabled the chart expands and resize event is triggered indefinitely. Fixes #93	2019-03-21 22:36:55 +00:00
mrliptontea	3d8aeb0e7d	Improve hierarchy list indentation Fixes #94	2019-03-21 21:01:10 +00:00
mrliptontea	b8a1dcc913	Improvements - Add CSS grid layout support (off by default because of IE support) - Fix styling of some flash messages - Fix horizontal scrollbar appearing when sidebar is on the right - Fix footer being mispositioned in Agile charts - Improve support for [Redmine Tags](https://www.redmineup.com/pages/plugins/tags) plugin - Fix positioning of admin menu icons for some plugins - Add separator line between news on the news list	2019-03-21 00:09:38 +00:00
mrliptontea	5cf3d1f645	Release v2.0.2	2019-03-20 20:25:40 +00:00
Grzegorz Rajchman	8bdf41aa9a	Merge pull request #92 from mrliptontea/issue-89-custom-menu-plugin-breaks-layout Fix top menu layout with custom_menu plugin	2019-03-20 20:25:08 +00:00
mrliptontea	97b68972f7	Fix top menu layout with custom_menu plugin Fixes #89	2019-03-19 23:59:11 +00:00
Grzegorz Rajchman	d429f35dfc	Merge pull request #91 from mrliptontea/issue-90-misaligned-delete-icon-in-watchers-list Resolve regression in sidebar layouts	2019-03-18 22:20:05 +00:00
mrliptontea	8dab6dc92b	Remove reduntant abbr style	2019-03-18 22:13:37 +00:00
mrliptontea	25ba736e7d	Resolve regression in sidebar layouts Fixes #90	2019-03-17 22:40:26 +00:00
Grzegorz Rajchman	99ad2c5213	Merge pull request #87 from mrliptontea/v2.0 Version 2.0	2019-03-13 22:37:17 +00:00
mrliptontea	0ec8791d41	Version 2.0	2019-03-13 22:26:25 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="880.5 896.5 16 16"><path fill="red" d="M882.5 910.5h2.3v-2.3h-2.3v2.3zm2.8 0h2.5v-2.3h-2.5v2.3zm-2.8-2.8h2.3v-2.5h-2.3v2.5zm2.8 0h2.5v-2.5h-2.5v2.5zm-2.8-3h2.3v-2.2h-2.3v2.3zm5.8 5.8h2.5v-2.3h-2.5v2.3zm-3-5.8h2.5v-2.2h-2.5v2.3zm6 5.8h2.2v-2.3h-2.3v2.3zm-3-2.8h2.5v-2.5h-2.5v2.5zm-2.8-6.7v-2.3-.1l-.2-.1h-.7l-.1.2v2.5H885.5l.1-.2zm5.8 6.8h2.2v-2.5h-2.3v2.5zm-3-3h2.5v-2.3h-2.5v2.3zm3 0h2.2v-2.3h-2.3v2.3zm.2-3.8v-2.3-.1l-.2-.1h-.7l-.1.2v2.5H891.5l.1-.2zm3-.5v10c0 .3-.1.5-.3.7s-.4.3-.7.3h-11c-.3 0-.5-.1-.7-.3s-.3-.4-.3-.7v-10c0-.3.1-.5.3-.7s.4-.3.7-.3h1v-.8c0-.3.1-.6.4-.8s.5-.4.8-.4h.5c.4 0 .7.1 1 .4s.3.5.3.8v.8h3v-.8c0-.3.1-.6.4-.8s.5-.4.8-.4h.5c.4 0 .7.1 1 .4s.3.5.3.8v.8h1c.3 0 .5.1.7.3s.3.4.3.7z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M8.996 12.659l-3.5-4a1.002 1.002 0 0 1 0-1.317l3.5-4a1 1 0 1 1 1.503 1.317L7.576 8l2.924 3.342a1 1 0 1 1-1.504 1.317z"/></svg>`