Replace Less with CSS (#23481)

Ran most of the Less files through the Less compiler and Prettier and then followed up with a round of manual fixes. The Less compiler had unfortunately stripped all `//` style comments that I had to restore (It did preserve `/* */` comments). Other fixes include duplicate selector removal which were revealed after the transpilation and which weren't caught by stylelint before but now are. Fixes: https://github.com/go-gitea/gitea/issues/15565
3 months ago · 202803fc69
parent bf730528ca
commit 202803fc69
73 changed files with 8229 additions and 7791 deletions
--- a/.stylelintrc.yaml
+++ b/.stylelintrc.yaml
@ -5,8 +5,6 @@ ignoreFiles:
  - "**/*.go"

 overrides:
-  - files: ["**/*.less"]
-    customSyntax: postcss-less
  - files: ["**/chroma/*", "**/codemirror/*", "**/standalone/*", "**/console/*"]
    rules:
      scale-unlimited/declaration-strict-value: null
--- a/6
+++ b/6
@ -105,7 +105,7 @@ GO_TEST_PACKAGES ?= $(filter-out $(shell $(GO) list code.gitea.io/gitea/models/m

 FOMANTIC_WORK_DIR := web_src/fomantic

-WEBPACK_SOURCES := $(shell find web_src/js web_src/less -type f)
+WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
 WEBPACK_CONFIGS := webpack.config.js
 WEBPACK_DEST := public/js/index.js public/css/index.css
 WEBPACK_DEST_ENTRIES := public/js public/css public/fonts public/img/webpack public/serviceworker.js
@ -131,7 +131,7 @@ TEST_TAGS ?= sqlite sqlite_unlock_notify
 TAR_EXCLUDES := .git data indexers queues log node_modules $(EXECUTABLE) $(FOMANTIC_WORK_DIR)/node_modules $(DIST) $(MAKE_EVIDENCE_DIR) $(AIR_TMP_DIR) $(GO_LICENSE_TMP_DIR)

 GO_DIRS := cmd tests models modules routers build services tools
-WEB_DIRS := web_src/js web_src/less
+WEB_DIRS := web_src/js web_src/css

 GO_SOURCES := $(wildcard *.go)
 GO_SOURCES += $(shell find $(GO_DIRS) -type f -name "*.go" -not -path modules/options/bindata.go -not -path modules/public/bindata.go -not -path modules/templates/bindata.go)
@ -342,7 +342,7 @@ lint: lint-frontend lint-backend
 .PHONY: lint-frontend
 lint-frontend: node_modules
 	npx eslint --color --max-warnings=0 --ext js,vue web_src/js build *.config.js docs/assets/js tests/e2e
-	npx stylelint --color --max-warnings=0 web_src/less
+	npx stylelint --color --max-warnings=0 web_src/css
 	npx spectral lint -q -F hint $(SWAGGER_SPEC)
 	npx markdownlint docs *.md

--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/docs/content/doc/advanced/customizing-gitea.en-us.md
@ -354,7 +354,7 @@ To make a custom theme available to all users:

 Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gitea/awesome-gitea#themes).

-The `arc-green` theme source can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/less/themes/theme-arc-green.less).
+The `arc-green` theme source can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes/theme-arc-green.css).

 If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`.
 This allows Gitea to adjust the Monaco code editor's theme accordingly.
--- a/docs/content/doc/developers/guidelines-frontend.en-us.md
+++ b/docs/content/doc/developers/guidelines-frontend.en-us.md
@ -21,13 +21,13 @@ menu:

 ## Background

-Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue3](https://vuejs.org/) for its frontend.
+Gitea uses [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue3](https://vuejs.org/) for its frontend.

 The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template).

 The source files can be found in the following directories:

-* **Less styles:** `web_src/less/`
+* **CSS styles:** `web_src/css/`
 * **JavaScript files:** `web_src/js/`
 * **Vue components:** `web_src/js/components/`
 * **Go HTML templates:** `templates/`
--- a/package-lock.json
+++ b/package-lock.json
@ -28,8 +28,6 @@
        "jquery": "3.6.3",
        "jquery.are-you-sure": "1.9.0",
        "katex": "0.16.4",
-        "less": "4.1.3",
-        "less-loader": "11.1.0",
        "license-checker-webpack-plugin": "0.2.1",
        "mermaid": "10.0.2",
        "mini-css-extract-plugin": "2.7.2",
@ -64,7 +62,6 @@
        "eslint-plugin-vue": "9.9.0",
        "jsdom": "21.0.0",
        "markdownlint-cli": "0.33.0",
-        "postcss-less": "6.0.0",
        "stylelint": "15.2.0",
        "stylelint-declaration-strict-value": "1.9.2",
        "svgo": "3.0.2",
@ -2667,6 +2664,9 @@
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "is-what": "^3.14.1"
      },
@ -3813,7 +3813,9 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "dependencies": {
        "prr": "~1.0.1"
      },
@ -5240,7 +5242,9 @@
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "bin": {
        "image-size": "bin/image-size.js"
      },
@ -5675,7 +5679,10 @@
    "node_modules/is-what": {
      "version": "3.14.1",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/isarray": {
      "version": "0.0.1",
@ -5933,14 +5940,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/known-css-properties": {
      "version": "0.26.0",
      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz",
@ -5956,6 +5955,9 @@
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "copy-anything": "^2.0.1",
        "parse-node-version": "^1.0.1",
@ -5977,25 +5979,6 @@
        "source-map": "~0.6.0"
      }
    },
-    "node_modules/less-loader": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.0.tgz",
-      "integrity": "sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==",
-      "dependencies": {
-        "klona": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 14.15.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "less": "^3.5.0 || ^4.0.0",
-        "webpack": "^5.0.0"
-      }
-    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -6201,7 +6184,9 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "dependencies": {
        "pify": "^4.0.1",
        "semver": "^5.6.0"
@ -6214,7 +6199,9 @@
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "bin": {
        "semver": "bin/semver"
      }
@ -6505,7 +6492,9 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "bin": {
        "mime": "cli.js"
      },
@ -6637,7 +6626,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "devOptional": true
+      "dev": true
    },
    "node_modules/nanoid": {
      "version": "3.3.4",
@ -6660,7 +6649,9 @@
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "dependencies": {
        "debug": "^3.2.6",
        "iconv-lite": "^0.6.3",
@ -6677,7 +6668,9 @@
      "version": "3.2.7",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "dependencies": {
        "ms": "^2.1.1"
      }
@ -7047,6 +7040,9 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">= 0.10"
      }
@ -7148,7 +7144,9 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=6"
      }
@ -7288,18 +7286,6 @@
        "node": "^10 || ^12 || >=14"
      }
    },
-    "node_modules/postcss-less": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz",
-      "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.5"
-      }
-    },
    "node_modules/postcss-media-query-parser": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@ -7481,7 +7467,9 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/psl": {
      "version": "1.9.0",
@ -7987,7 +7975,9 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/saxes": {
      "version": "6.0.0",
@ -8917,7 +8907,8 @@
    "node_modules/tslib": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "dev": true
    },
    "node_modules/type-check": {
      "version": "0.4.0",
@ -11852,6 +11843,9 @@
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
      "requires": {
        "is-what": "^3.14.1"
      }
@ -12710,7 +12704,9 @@
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "requires": {
        "prr": "~1.0.1"
      }
@ -13783,7 +13779,9 @@
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "immer": {
      "version": "9.0.18",
@ -14076,7 +14074,10 @@
    "is-what": {
      "version": "3.14.1",
      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "isarray": {
      "version": "0.0.1",
@ -14269,11 +14270,6 @@
      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
    },
-    "klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
-    },
    "known-css-properties": {
      "version": "0.26.0",
      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz",
@ -14289,6 +14285,9 @@
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
      "requires": {
        "copy-anything": "^2.0.1",
        "errno": "^0.1.1",
@ -14302,14 +14301,6 @@
        "tslib": "^2.3.0"
      }
    },
-    "less-loader": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.0.tgz",
-      "integrity": "sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==",
-      "requires": {
-        "klona": "^2.0.4"
-      }
-    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -14484,7 +14475,9 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "requires": {
        "pify": "^4.0.1",
        "semver": "^5.6.0"
@ -14494,7 +14487,9 @@
          "version": "5.7.1",
          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "optional": true
+          "dev": true,
+          "optional": true,
+          "peer": true
        }
      }
    },
@ -14721,7 +14716,9 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "mime-db": {
      "version": "1.52.0",
@ -14817,7 +14814,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "devOptional": true
+      "dev": true
    },
    "nanoid": {
      "version": "3.3.4",
@ -14834,7 +14831,9 @@
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
      "optional": true,
+      "peer": true,
      "requires": {
        "debug": "^3.2.6",
        "iconv-lite": "^0.6.3",
@ -14845,7 +14844,9 @@
          "version": "3.2.7",
          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
          "optional": true,
+          "peer": true,
          "requires": {
            "ms": "^2.1.1"
          }
@ -15127,7 +15128,10 @@
    "parse-node-version": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "parse5": {
      "version": "7.1.2",
@ -15198,7 +15202,9 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "pkg-dir": {
      "version": "4.2.0",
@ -15296,13 +15302,6 @@
        "source-map-js": "^1.0.2"
      }
    },
-    "postcss-less": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz",
-      "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==",
-      "dev": true,
-      "requires": {}
-    },
    "postcss-media-query-parser": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@ -15433,7 +15432,9 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "psl": {
      "version": "1.9.0",
@ -15792,7 +15793,9 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "saxes": {
      "version": "6.0.0",
@ -16527,7 +16530,8 @@
    "tslib": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "dev": true
    },
    "type-check": {
      "version": "0.4.0",
--- a/package.json
+++ b/package.json
@ -28,8 +28,6 @@
    "jquery": "3.6.3",
    "jquery.are-you-sure": "1.9.0",
    "katex": "0.16.4",
-    "less": "4.1.3",
-    "less-loader": "11.1.0",
    "license-checker-webpack-plugin": "0.2.1",
    "mermaid": "10.0.2",
    "mini-css-extract-plugin": "2.7.2",
@ -64,7 +62,6 @@
    "eslint-plugin-vue": "9.9.0",
    "jsdom": "21.0.0",
    "markdownlint-cli": "0.33.0",
-    "postcss-less": "6.0.0",
    "stylelint": "15.2.0",
    "stylelint-declaration-strict-value": "1.9.2",
    "svgo": "3.0.2",
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@ -0,0 +1,110 @@
+.admin.hooks .list > .item:not(:first-child) {
+  border-top: 1px solid var(--color-secondary);
+  padding: 0.25rem 1rem;
+  margin: 12px -1rem -1rem;
+}
+
+.admin .table.segment {
+  padding: 0;
+  font-size: 13px;
+  overflow-x: auto;
+}
+
+.admin .table.segment:not(.striped) thead th:last-child {
+  padding-right: 5px !important;
+}
+
+.admin .table.segment th {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.admin .table.segment:not(.select) th:first-of-type,
+.admin .table.segment:not(.select) td:first-of-type {
+  padding-left: 15px !important;
+}
+
+.admin .table.segment form tbody button[type="submit"] {
+  padding: 5px 8px;
+}
+
+.admin .settings .button.adopt,
+.admin .settings .button.delete {
+  margin-top: -15px;
+  margin-bottom: -15px;
+}
+
+.admin .settings .button.adopt .label,
+.admin .settings .button.delete .label {
+  vertical-align: middle;
+}
+
+.admin.user .email {
+  max-width: 200px;
+}
+
+.admin dl.admin-dl-horizontal {
+  padding: 20px;
+  margin: 0;
+}
+
+.admin dl.admin-dl-horizontal dd {
+  margin-left: 275px;
+}
+
+@media (max-width: 767px) {
+  .admin dl.admin-dl-horizontal dd {
+    margin-left: 5%;
+  }
+}
+
+.admin dl.admin-dl-horizontal dt {
+  font-weight: 600;
+  float: left;
+  width: 285px;
+  clear: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 767px) {
+  .admin dl.admin-dl-horizontal dt {
+    width: auto;
+    margin-right: 0.5em;
+  }
+}
+
+.admin.config #test-mail-btn {
+  margin-left: 5px;
+}
+
+.admin code,
+.admin pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+@media (max-width: 767px) {
+  .admin #notice-table .notice-description {
+    max-width: 80vw;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .admin #notice-table .notice-description {
+    max-width: 360px;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1200px) {
+  .admin #notice-table .notice-description {
+    max-width: 510px;
+  }
+}
+
+@media (min-width: 1201px) {
+  .admin #notice-table .notice-description {
+    max-width: 640px;
+  }
+}
--- a/web_src/less/animations.less
+++ b/web_src/less/animations.less
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
--- a/web_src/less/chroma/base.less
+++ b/web_src/less/chroma/base.less
@ -29,14 +29,14 @@

 /* LineNumbersTable */
 .chroma .lnt {
-  margin-right: .4em;
-  padding: 0 .4em;
+  margin-right: 0.4em;
+  padding: 0 0.4em;
 }

 /* LineNumbers */
 .chroma .ln {
-  margin-right: .4em;
-  padding: 0 .4em;
+  margin-right: 0.4em;
+  padding: 0 0.4em;
 }

 /* GenericStrong */
--- a/web_src/less/chroma/dark.less
+++ b/web_src/less/chroma/dark.less
--- a/web_src/less/chroma/light.less
+++ b/web_src/less/chroma/light.less
--- a/web_src/less/code/linebutton.less
+++ b/web_src/less/code/linebutton.less
--- a/web_src/less/codemirror/base.less
+++ b/web_src/less/codemirror/base.less
@ -1,5 +1,5 @@
 .ui .field:not(:last-child) .EasyMDEContainer .editor-statusbar {
-  margin-bottom: -1em; // when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line
+  margin-bottom: -1em; /* when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line */
 }

 .EasyMDEContainer .CodeMirror {
@ -7,15 +7,15 @@
  background-color: var(--color-input-background);
  border-color: var(--color-secondary);
  font: 14px var(--fonts-monospace);
+}

-  &.cm-s-default {
-    border-radius: var(--border-radius);
-    padding: 0 !important;
-  }
+.EasyMDEContainer .CodeMirror.cm-s-default {
+  border-radius: var(--border-radius);
+  padding: 0 !important;
+}

-  &.CodeMirror-fullscreen.CodeMirror-focused {
-    border-right: 1px solid var(--color-primary) !important;
-  }
+.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused {
+  border-right: 1px solid var(--color-primary) !important;
 }

 .CodeMirror-cursor {
--- a/web_src/css/codemirror/dark.css
+++ b/web_src/css/codemirror/dark.css
@ -0,0 +1,106 @@
+.CodeMirror.cm-s-default .cm-property,
+.CodeMirror.cm-s-paper .cm-property {
+  color: #a0cc75;
+}
+
+.CodeMirror.cm-s-default .cm-header,
+.CodeMirror.cm-s-paper .cm-header {
+  color: #9daccc;
+}
+
+.CodeMirror.cm-s-default .cm-quote,
+.CodeMirror.cm-s-paper .cm-quote {
+  color: #009900;
+}
+
+.CodeMirror.cm-s-default .cm-keyword,
+.CodeMirror.cm-s-paper .cm-keyword {
+  color: #cc8a61;
+}
+
+.CodeMirror.cm-s-default .cm-atom,
+.CodeMirror.cm-s-paper .cm-atom {
+  color: #ef5e77;
+}
+
+.CodeMirror.cm-s-default .cm-number,
+.CodeMirror.cm-s-paper .cm-number {
+  color: #ff5656;
+}
+
+.CodeMirror.cm-s-default .cm-def,
+.CodeMirror.cm-s-paper .cm-def {
+  color: #e4e4e4;
+}
+
+.CodeMirror.cm-s-default .cm-variable-2,
+.CodeMirror.cm-s-paper .cm-variable-2 {
+  color: #00bdbf;
+}
+
+.CodeMirror.cm-s-default .cm-variable-3,
+.CodeMirror.cm-s-paper .cm-variable-3 {
+  color: #008855;
+}
+
+.CodeMirror.cm-s-default .cm-comment,
+.CodeMirror.cm-s-paper .cm-comment {
+  color: #8e9ab3;
+}
+
+.CodeMirror.cm-s-default .cm-string,
+.CodeMirror.cm-s-paper .cm-string {
+  color: #a77272;
+}
+
+.CodeMirror.cm-s-default .cm-string-2,
+.CodeMirror.cm-s-paper .cm-string-2 {
+  color: #ff5500;
+}
+
+.CodeMirror.cm-s-default .cm-meta,
+.CodeMirror.cm-s-paper .cm-meta,
+.CodeMirror.cm-s-default .cm-qualifier,
+.CodeMirror.cm-s-paper .cm-qualifier {
+  color: #ffb176;
+}
+
+.CodeMirror.cm-s-default .cm-builtin,
+.CodeMirror.cm-s-paper .cm-builtin {
+  color: #b7c951;
+}
+
+.CodeMirror.cm-s-default .cm-bracket,
+.CodeMirror.cm-s-paper .cm-bracket {
+  color: #999977;
+}
+
+.CodeMirror.cm-s-default .cm-tag,
+.CodeMirror.cm-s-paper .cm-tag {
+  color: #f1d273;
+}
+
+.CodeMirror.cm-s-default .cm-attribute,
+.CodeMirror.cm-s-paper .cm-attribute {
+  color: #bfcc70;
+}
+
+.CodeMirror.cm-s-default .cm-hr,
+.CodeMirror.cm-s-paper .cm-hr {
+  color: #999999;
+}
+
+.CodeMirror.cm-s-default .cm-url,
+.CodeMirror.cm-s-paper .cm-url {
+  color: #c5cfd0;
+}
+
+.CodeMirror.cm-s-default .cm-link,
+.CodeMirror.cm-s-paper .cm-link {
+  color: #d8c792;
+}
+
+.CodeMirror.cm-s-default .cm-error,
+.CodeMirror.cm-s-paper .cm-error {
+  color: #dbdbeb;
+}
--- a/web_src/less/codemirror/light.less
+++ b/web_src/less/codemirror/light.less
--- a/web_src/less/console/console.less
+++ b/web_src/less/console/console.less
@ -1,4 +1,4 @@
-// Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css
+/* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */

 .console {
  background: var(--color-console-bg);
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@ -0,0 +1,203 @@
+.dashboard.feeds .context.user.menu,
+.dashboard.issues .context.user.menu {
+  z-index: 101;
+  min-width: 200px;
+}
+
+.dashboard.feeds .context.user.menu .ui.header,
+.dashboard.issues .context.user.menu .ui.header {
+  font-size: 1rem;
+  text-transform: none;
+}
+
+.dashboard.feeds .filter.menu,
+.dashboard.issues .filter.menu {
+  width: initial;
+}
+
+.dashboard.feeds .filter.menu .item,
+.dashboard.issues .filter.menu .item {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dashboard.feeds .filter.menu .item .text,
+.dashboard.issues .filter.menu .item .text {
+  height: 16px;
+  vertical-align: middle;
+}
+
+.dashboard.feeds .filter.menu .item .text.truncate,
+.dashboard.issues .filter.menu .item .text.truncate {
+  width: 75%;
+}
+
+.dashboard.feeds .filter.menu .item .floating.label,
+.dashboard.issues .filter.menu .item .floating.label {
+  top: 7px;
+  left: 90%;
+  width: 15%;
+}
+
+@media (max-width: 767px) {
+  .dashboard.feeds .filter.menu .item .floating.label,
+  .dashboard.issues .filter.menu .item .floating.label {
+    top: 10px;
+    left: auto;
+    width: auto;
+    right: 13px;
+  }
+}
+
+/* Sort */
+.dashboard.feeds .filter.menu .jump.item,
+.dashboard.issues .filter.menu .jump.item {
+  margin: 1px;
+  padding-right: 0;
+}
+
+.dashboard.feeds .filter.menu .menu,
+.dashboard.issues .filter.menu .menu {
+  max-height: 300px;
+  overflow-x: auto;
+  right: 0 !important;
+  left: auto !important;
+}
+
+@media (max-width: 767px) {
+  .dashboard.feeds .filter.menu,
+  .dashboard.issues .filter.menu {
+    width: 100%;
+  }
+}
+
+.dashboard.feeds .right.stackable.menu > .item.active,
+.dashboard.issues .right.stackable.menu > .item.active {
+  color: var(--color-red);
+}
+
+.dashboard .dashboard-repos,
+.dashboard .dashboard-orgs {
+  margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
+}
+
+.dashboard .dashboard-navbar {
+  width: 100vw;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.dashboard .dashboard-navbar .org-visibility .label {
+  margin-left: 5px;
+}
+
+.dashboard .dashboard-navbar .ui.dropdown {
+  max-width: 100%;
+}
+
+@media (max-width: 767px) {
+  .dashboard .dashboard-navbar .ui.dropdown > .menu {
+    position: static;
+  }
+}
+
+.feeds .news li {
+  display: flex;
+  align-items: baseline;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.feeds .news li img {
+  align-self: flex-start;
+}
+
+.feeds .news li > * + * {
+  margin-left: 0.35rem;
+}
+
+.feeds .news > .ui.grid {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.feeds .news .left .ui.avatar {
+  margin-top: 13px;
+}
+
+.feeds .news .time-since {
+  font-size: 13px;
+}
+
+.feeds .news .issue.title {
+  width: 80%;
+  margin: 0 0 1em;
+}
+
+.feeds .news .push.news .content ul {
+  line-height: 18px;
+  font-size: 13px;
+  list-style: none;
+  padding-left: 10px;
+}
+
+.feeds .news .push.news .content ul .text.truncate {
+  width: 80%;
+}
+
+.feeds .news .commit-id {
+  font-family: var(--fonts-monospace);
+}
+
+.feeds .news code {
+  padding: 2px 4px;
+  border-radius: 3px;
+  background-color: var(--color-markup-code-block);
+  word-break: break-all;
+}
+
+.feeds .news:last-of-type .divider {
+  display: none !important;
+}
+
+.feeds .list ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.feeds .list ul li:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.feeds .list ul li.private {
+  background-color: var(--color-box-body-highlight);
+}
+
+.feeds .list ul li .repo-list-link {
+  padding: 6px 1em;
+  display: block;
+}
+
+.feeds .list ul li .repo-list-link .svg {
+  color: var(--color-text-light-2);
+}
+
+.feeds .list ul li .repo-list-link .star-num {
+  font-size: 12px;
+}
+
+.feeds .list #privateFilterCheckbox .svg {
+  color: var(--color-grey);
+  margin-right: 0.25rem;
+}
+
+.feeds .list .repo-owner-name-list .item-name {
+  min-width: 0;
+}
+
+.feeds .list .repo-owner-name-list .item-name svg {
+  min-width: 16px;
+}
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@ -0,0 +1,88 @@
+.explore .navbar {
+  justify-content: center;
+  margin-bottom: 15px !important;
+  background-color: var(--color-navbar) !important;
+  border-width: 1px !important;
+}
+
+.explore .navbar .svg {
+  width: 16px;
+  text-align: center;
+  margin-right: 5px;
+}
+
+.ui.repository.list .item {
+  padding-bottom: 1.5rem;
+}
+
+.ui.repository.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-secondary);
+  padding-top: 1.5rem;
+}
+
+.ui.repository.list .item .ui.header {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.ui.repository.list .item .ui.header .name {
+  word-break: break-all;
+}
+
+.ui.repository.list .item .ui.header .metas {
+  font-size: 14px;
+}
+
+.ui.repository.list .item .time {
+  font-size: 12px;
+}
+
+.ui.repository.list .item .ui.tags {
+  margin-bottom: 0.5rem;
+}
+
+.ui.repository.branches .info {
+  font-size: 12px;
+  color: var(--color-text-light);
+  display: flex;
+  white-space: pre;
+}
+
+.ui.repository.branches .info .commit-message {
+  max-width: 72em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ui.repository.branches .overflow-visible {
+  overflow: visible;
+}
+
+/* fix alignment of PR popup in branches table */
+.ui.repository.branches table .ui.popup {
+  text-align: left;
+}
+
+.ui.user.list .item {
+  padding-bottom: 25px;
+  display: flex;
+}
+
+.ui.user.list .item:not(:first-child) {
+  border-top: 1px solid var(--color-secondary);
+  padding-top: 25px;
+}
+
+.ui.user.list .item img.ui.avatar {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.ui.user.list .item .description {
+  margin-top: 5px;
+}
+
+.ui.user.list .item .description .svg:not(:first-child) {
+  margin-left: 5px;
+}
--- a/web_src/less/features/codeeditor.less
+++ b/web_src/less/features/codeeditor.less
--- a/web_src/less/features/dropzone.less
+++ b/web_src/less/features/dropzone.less
@ -1,15 +1,14 @@
-.ui .field {
-  .dropzone {
-    border: 2px dashed var(--color-secondary);
-    background: none;
-    box-shadow: none;
-    padding: 0;
-    border-radius: 4px;
-    min-height: 0;
-    .dz-message {
-      margin: 10px 0;
-    }
-  }
+.ui .field .dropzone {
+  border: 2px dashed var(--color-secondary);
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  border-radius: 4px;
+  min-height: 0;
+}
+
+.ui .field .dropzone .dz-message {
+  margin: 10px 0;
 }

 .dropzone .dz-button {
@ -50,5 +49,5 @@
 }

 .dropzone .dz-preview:hover .dz-image img {
-  filter: opacity(.5) !important;
+  filter: opacity(0.5) !important;
 }
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@ -0,0 +1,317 @@
+#git-graph-container {
+  overflow-x: auto;
+  width: 100%;
+  min-height: 350px;
+}
+
+#git-graph-container > .ui.segment.loading {
+  border: 0;
+  z-index: 1;
+  min-height: 246px;
+}
+
+#git-graph-container h2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#git-graph-container .color-buttons {
+  margin-right: 0;
+}
+
+#git-graph-container .ui.header.dividing {
+  padding-bottom: 10px;
+}
+
+#git-graph-container #flow-select-refs-dropdown {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  min-width: 250px;
+  border-right: none;
+}
+
+#git-graph-container #flow-select-refs-dropdown .ui.label {
+  max-width: 180px;
+  display: inline-flex !important;
+  align-items: center;
+}
+
+#git-graph-container #flow-select-refs-dropdown .ui.label .truncate {
+  display: inline-block;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+#git-graph-container #flow-select-refs-dropdown .dropdown.icon {
+  display: none;
+}
+
+#git-graph-container #flow-select-refs-dropdown .default.text {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+#git-graph-container #flow-select-refs-dropdown input.search {
+  position: relative;
+  top: 1px;
+}
+
+#git-graph-container li {
+  list-style-type: none;
+  height: 24px;
+  line-height: 24px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+#git-graph-container li .node-relation {
+  font-family: var(--fonts-monospace);
+}
+
+#git-graph-container li .author {
+  color: var(--color-text-light);
+}
+
+#git-graph-container li .time {
+  color: var(--color-text-light-3);
+  font-size: 80%;
+}
+
+#git-graph-container li a:not(.ui):hover {
+  text-decoration: underline;
+}
+
+#git-graph-container li a em {
+  color: var(--color-red);
+  border-bottom: 1px dotted var(--color-secondary);
+  text-decoration: none;
+  font-style: normal;
+}
+
+#git-graph-container #rel-container {
+  max-width: 30%;
+  overflow-x: auto;
+  float: left;
+}
+
+#git-graph-container #rev-container {
+  width: 100%;
+}
+
+#git-graph-container #rev-list {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+#git-graph-container #rev-list li.highlight.hover {
+  background-color: var(--color-secondary-alpha-30);
+}
+
+#git-graph-container #rev-list .tags a.button {
+  padding: 2px 4px;
+}
+
+#git-graph-container #rev-list .sha.label {
+  padding-top: 5px;
+  padding-bottom: 3px;
+}
+
+#git-graph-container #rev-list .sha.label .shortsha {
+  padding-top: 0;
+}
+
+#git-graph-container #rev-list .sha.label .shortsha-pad {
+  padding-right: 10px;
+}
+
+#git-graph-container #rev-list .sha.label .ui.detail.icon.button {
+  padding-top: 3px;
+  margin-top: -5px;
+  padding-bottom: 1px;
+}
+
+#git-graph-container #rev-list .author img.ui.avatar {
+  width: auto;
+  height: 18px;
+  max-width: none;
+}
+
+#git-graph-container #graph-raw-list {
+  margin: 0;
+}
+
+#git-graph-container.monochrome #rel-container .flow-group {
+  stroke: var(--color-secondary-dark-5);
+  fill: var(--color-secondary-dark-5);
+}
+
+#git-graph-container.monochrome #rel-container .flow-group.highlight {
+  stroke: var(--color-secondary-dark-12);
+  fill: var(--color-secondary-dark-12);
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
+  stroke: #499a37;
+  fill: #499a37;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 {
+  stroke: #ce4751;
+  fill: #ce4751;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 {
+  stroke: #8f9121;
+  fill: #8f9121;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 {
+  stroke: #ac32a6;
+  fill: #ac32a6;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 {
+  stroke: #7445e9;
+  fill: #7445e9;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 {
+  stroke: #c67d28;
+  fill: #c67d28;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 {
+  stroke: #4db392;
+  fill: #4db392;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
+  stroke: #aa4d30;
+  fill: #aa4d30;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 {
+  stroke: #2a6f84;
+  fill: #2a6f84;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 {
+  stroke: #c45327;
+  fill: #c45327;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 {
+  stroke: #3d965c;
+  fill: #3d965c;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 {
+  stroke: #792a93;
+  fill: #792a93;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 {
+  stroke: #439d73;
+  fill: #439d73;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 {
+  stroke: #103aad;
+  fill: #103aad;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 {
+  stroke: #982e85;
+  fill: #982e85;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 {
+  stroke: #7db233;
+  fill: #7db233;
+}