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

.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

Makefile

@@ -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
 

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.

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/`

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",

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",

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;
+  }
+}

web_src/less/chroma/base.less → web_src/css/chroma/base.css

@@ -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 */

web_src/less/codemirror/base.less → web_src/css/codemirror/base.css

@@ -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 {

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;
+}

web_src/less/console/console.less → web_src/css/console/console.css

@@ -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);

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;
+}

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;
+}

web_src/less/features/dropzone.less → web_src/css/features/dropzone.css

@@ -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;
 }

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;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-1 {
+  stroke: #5ac144;
+  fill: #5ac144;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-2 {
+  stroke: #ed5a8b;
+  fill: #ed5a8b;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-3 {
+  stroke: #ced049;
+  fill: #ced048;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-4 {
+  stroke: #db61d7;
+  fill: #db62d6;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-5 {
+  stroke: #8455f9;
+  fill: #8455f9;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-6 {
+  stroke: #e6a151;
+  fill: #e6a151;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-7 {
+  stroke: #44daaa;
+  fill: #44daaa;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-8 {
+  stroke: #dd7a5c;
+  fill: #dd7a5c;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-9 {
+  stroke: #38859c;
+  fill: #38859c;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-10 {
+  stroke: #d95520;
+  fill: #d95520;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-11 {
+  stroke: #42ae68;
+  fill: #42ae68;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-12 {
+  stroke: #9126b5;
+  fill: #9126b5;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-13 {
+  stroke: #4ab080;
+  fill: #4ab080;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-14 {
+  stroke: #284fb8;
+  fill: #284fb8;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-15 {
+  stroke: #971c80;
+  fill: #971c80;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-0 {
+  stroke: #87ca28;
+  fill: #87ca28;
+}

web_src/css/features/heatmap.css

@@ -0,0 +1,68 @@
+#user-heatmap {
+  width: 100%;
+  font-size: 9px;
+  position: relative;
+  min-height: 125px;
+}
+
+#user-heatmap text {
+  fill: currentcolor !important;
+}
+
+/* for the "Less" and "More" legend */
+#user-heatmap .vch__legend .vch__legend {
+  display: flex;
+  font-size: 11px;
+  align-items: center;
+  justify-content: right;
+}
+
+#user-heatmap .vch__legend .vch__legend div:first-child,
+#user-heatmap .vch__legend .vch__legend div:last-child {
+  display: inline-block;
+  padding: 0 5px;
+}
+
+/* move the "? contributions in the last ? months" text from top to bottom */
+#user-heatmap .total-contributions {
+  font-size: 11px;
+  position: absolute;
+  bottom: 0;
+  left: 25px;
+}
+
+@media (max-width: 1200px) {
+  #user-heatmap {
+    min-height: 105px;
+  }
+  #user-heatmap .total-contributions {
+    left: 21px;
+  }
+}
+
+@media (max-width: 1000px) {
+  #user-heatmap {
+    min-height: 80px;
+  }
+  #user-heatmap .total-contributions {
+    font-size: 10px;
+    left: 17px;
+    bottom: -4px;
+  }
+}
+
+.user.profile #user-heatmap {
+  min-height: 135px;
+}
+
+@media (max-width: 1200px) {
+  .user.profile #user-heatmap {
+    min-height: 115px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .user.profile #user-heatmap {
+    min-height: 90px;
+  }
+}

web_src/css/features/imagediff.css

@@ -0,0 +1,107 @@
+.image-diff-container {
+  text-align: center;
+  padding: 1em 0;
+}
+
+.image-diff-container img {
+  border: 1px solid var(--color-primary-light-7);
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
+}
+
+.image-diff-container .before-container {
+  border: 1px solid var(--color-red);
+  display: block;
+}
+
+.image-diff-container .after-container {
+  border: 1px solid var(--color-green);
+  display: block;
+}
+
+.image-diff-container .diff-side-by-side .side {
+  display: inline-block;
+  line-height: 0;
+  vertical-align: top;
+  margin: 0 1em;
+}
+
+.image-diff-container .diff-side-by-side .side .side-header {
+  font-weight: bold;
+}
+
+.image-diff-container .diff-swipe {
+  margin: auto;
+}
+
+.image-diff-container .diff-swipe .swipe-frame {
+  position: absolute;
+}
+
+.image-diff-container .diff-swipe .swipe-frame .before-container {
+  position: absolute;
+}
+
+.image-diff-container .diff-swipe .swipe-frame .swipe-container {
+  position: absolute;
+  right: 0;
+  display: block;
+  border-left: 2px solid var(--color-secondary-dark-8);
+  height: 100%;
+  overflow: hidden;
+}
+
+.image-diff-container
+  .diff-swipe
+  .swipe-frame
+  .swipe-container
+  .after-container {
+  position: absolute;
+  right: 0;
+}
+
+.image-diff-container .diff-swipe .swipe-frame .swipe-bar {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
+  background: var(--color-secondary-dark-8);
+  left: -5px;
+  height: 12px;
+  width: 12px;
+  position: absolute;
+  transform: rotate(45deg);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle {
+  top: -12px;
+}
+
+.image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle {
+  bottom: -14px;
+}
+
+.image-diff-container .diff-overlay {
+  margin: 0 auto;
+}
+
+.image-diff-container .diff-overlay .overlay-frame {
+  margin: 0 auto;
+  position: relative;
+}
+
+.image-diff-container .diff-overlay .before-container,
+.image-diff-container .diff-overlay .after-container {
+  position: absolute;
+}
+
+.image-diff-container .diff-overlay input {
+  max-width: 300px;
+}

web_src/less/features/projects.less → web_src/css/features/projects.css

@@ -3,14 +3,14 @@
   flex-direction: row;
   flex-wrap: nowrap;
   overflow-x: auto;
-  margin: 0 .5em;
+  margin: 0 0.5em;
 }
 
 .board-column {
   background-color: var(--color-project-board-bg) !important;
   border: 1px solid var(--color-secondary) !important;
-  margin: 0 .5rem !important;
-  padding: .5rem !important;
+  margin: 0 0.5rem !important;
+  padding: 0.5rem !important;
   width: 320px;
   height: calc(100vh - 450px);
   min-height: 60vh;
@@ -24,21 +24,22 @@
 .board-column-header {
   display: flex;
   justify-content: space-between;
+}
 
-  &.dark-label {
-    color: var(--color-project-board-dark-label) !important;
+.board-column-header.dark-label {
+  color: var(--color-project-board-dark-label) !important;
+}
 
-    .board-label {
-      color: var(--color-project-board-dark-label) !important;
-    }
-  }
-  &.light-label {
-    color: var(--color-project-board-light-label) !important;
+.board-column-header.dark-label .board-label {
+  color: var(--color-project-board-dark-label) !important;
+}
+
+.board-column-header.light-label {
+  color: var(--color-project-board-light-label) !important;
+}
 
-    .board-label {
-      color: var(--color-project-board-light-label) !important;
-    }
-  }
+.board-column-header.light-label .board-label {
+  color: var(--color-project-board-light-label) !important;
 }
 
 .board-label {
@@ -81,7 +82,7 @@
   border-radius: 5px !important;
   cursor: move;
   width: calc(100% - 4px) !important;
-  padding: .5rem !important;
+  padding: 0.5rem !important;
   min-height: auto !important;
 }
 
@@ -124,24 +125,23 @@
 
 .color-field .minicolors.minicolors-theme-default {
   display: block;
+}
 
-  .minicolors-input {
-    height: 38px;
-    padding-left: 2rem;
-  }
+.color-field .minicolors.minicolors-theme-default .minicolors-input {
+  height: 38px;
+  padding-left: 2rem;
+}
 
-  .minicolors-swatch {
-    top: 10px;
-  }
+.color-field .minicolors.minicolors-theme-default .minicolors-swatch {
+  top: 10px;
 }
 
-.edit-project-board,
-.new-board-modal {
-  .color.picker.column {
-    display: flex;
+.edit-project-board .color.picker.column,
+.new-board-modal .color.picker.column {
+  display: flex;
+}
 
-    .minicolors {
-      flex: 1;
-    }
-  }
+.edit-project-board .color.picker.column .minicolors,
+.new-board-modal .color.picker.column .minicolors {
+  flex: 1;
 }

web_src/css/font_i18n.css

@@ -0,0 +1,393 @@
+:root :lang(ja) {
+  --fonts-override: var(--fonts-default-override-ja);
+}
+
+:root :lang(zh-CN) {
+  --fonts-override: var(--fonts-default-override-zh-cn);
+}
+
+:root :lang(zh-TW) {
+  --fonts-override: var(--fonts-default-override-zh-tw);
+}
+
+:root :lang(zh-HK) {
+  --fonts-override: var(--fonts-default-override-zh-hk);
+}
+
+:root :lang(ko) {
+  --fonts-override: var(--fonts-default-override-ko);
+}
+
+[lang] {
+  font-family: var(--fonts-regular);
+}
+
+:root {
+  --fonts-default-override-ja: system-ui-ja, var(--fonts-proportional);
+  --fonts-default-override-zh-cn: system-ui-zh-cn, var(--fonts-proportional);
+  --fonts-default-override-zh-tw: system-ui-zh-tw, var(--fonts-proportional);
+  --fonts-default-override-zh-hk: system-ui-zh-hk, var(--fonts-proportional);
+  --fonts-default-override-ko: system-ui-ko, var(--fonts-proportional);
+}
+
+/* Special handling for Firefox on Windows/Linux */
+@supports (-moz-appearance: none) {
+  :root {
+    --fonts-default-override-ja: var(--fonts-proportional), system-ui-ja;
+    --fonts-default-override-zh-cn: var(--fonts-proportional), system-ui-zh-cn;
+    --fonts-default-override-zh-tw: var(--fonts-proportional), system-ui-zh-tw;
+    --fonts-default-override-zh-hk: var(--fonts-proportional), system-ui-zh-hk;
+    --fonts-default-override-ko: var(--fonts-proportional), system-ui-ko;
+  }
+}
+
+@font-face {
+  font-family: system-ui-ja;
+  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraginoSans-W2"), local("Source Han Sans JP Light"),
+    local("SourceHanSansJP-Light"), local("Source Han Sans J Light"),
+    local("SourceHanSansJ-Light"), local("Noto Sans CJK JP Light"),
+    local("NotoSansCJKJP-Light"), local("Source Han Sans Light"),
+    local("SourceHanSans-Light"), local("Yu Gothic Regular"),
+    local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
+    local("MS PGothic");
+  font-weight: 300;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-ja;
+  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraginoSans-W4"), local("Source Han Sans JP Regular"),
+    local("SourceHanSansJP-Regular"), local("Source Han Sans J Regular"),
+    local("SourceHanSansJ-Regular"), local("Noto Sans CJK JP Regular"),
+    local("NotoSansCJKJP-Regular"), local("Source Han Sans Regular"),
+    local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
+    local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
+    local("MS PGothic");
+  font-weight: 400;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-ja;
+  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraginoSans-W5"), local("Source Han Sans JP Medium"),
+    local("SourceHanSansJP-Medium"), local("Source Han Sans J Medium"),
+    local("SourceHanSansJ-Medium"), local("Noto Sans CJK JP Medium"),
+    local("NotoSansCJKJP-Medium"), local("Source Han Sans Medium"),
+    local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
+    local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
+    local("MS PGothic");
+  font-weight: 500;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-ja;
+  src: local("HiraKakuProN-W6"), local("Hiragino Kaku Gothic ProN W6"),
+    local("HiraginoSans-W6"), local("Source Han Sans JP Bold"),
+    local("SourceHanSansJP-Bold"), local("Source Han Sans J Bold"),
+    local("SourceHanSansJ-Bold"), local("Noto Sans CJK JP Bold"),
+    local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
+    local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
+    local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
+  font-weight: 700;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+/* Safari on macOS/iOS */
+@font-face {
+  font-family: system-ui-ja;
+  src: local("HelveticaNeue");
+  unicode-range: U+A0;
+}
+
+/* Other browsers on macOS/iOS */
+@supports not (-webkit-hyphens: none) {
+  @font-face {
+    font-family: system-ui-ja;
+    src: local("HelveticaNeue");
+    unicode-range: U+20;
+  }
+}
+
+@font-face {
+  font-family: system-ui-zh-cn;
+  src: local("PingFangSC-Light"), local("Source Han Sans CN Light"),
+    local("SourceHanSansCN-Light"), local("Source Han Sans SC Light"),
+    local("SourceHanSansSC-Light"), local("Noto Sans CJK SC Light"),
+    local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
+    local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
+    local("Heiti SC Light"), local("SimHei");
+  font-weight: 300;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-cn;
+  src: local("PingFangSC-Regular"), local("Source Han Sans CN Regular"),
+    local("SourceHanSansCN-Regular"), local("Source Han Sans SC Regular"),
+    local("SourceHanSansSC-Regular"), local("Noto Sans CJK SC Regular"),
+    local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
+    local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
+    local("Heiti SC Light"), local("SimHei");
+  font-weight: 400;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-cn;
+  src: local("PingFangSC-Medium"), local("Source Han Sans CN Medium"),
+    local("SourceHanSansCN-Medium"), local("Source Han Sans SC Medium"),
+    local("SourceHanSansSC-Medium"), local("Noto Sans CJK SC Medium"),
+    local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
+    local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
+    local("Heiti SC Light"), local("SimHei");
+  font-weight: 500;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-cn;
+  src: local("PingFangSC-Semibold"), local("Source Han Sans CN Bold"),
+    local("SourceHanSansCN-Bold"), local("Source Han Sans SC Bold"),
+    local("SourceHanSansSC-Bold"), local("Noto Sans CJK SC Bold"),
+    local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
+    local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
+    local("Heiti SC Medium"), local("SimHei");
+  font-weight: 700;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+/* Safari on macOS/iOS */
+@font-face {
+  font-family: system-ui-zh-cn;
+  src: local("HelveticaNeue");
+  unicode-range: U+A0;
+}
+
+/* Other browsers on macOS/iOS */
+@supports not (-webkit-hyphens: none) {
+  @font-face {
+    font-family: system-ui-zh-cn;
+    src: local("HelveticaNeue");
+    unicode-range: U+20;
+  }
+}
+
+@font-face {
+  font-family: system-ui-zh-tw;
+  src: local("PingFangTC-Light"), local("Source Han Sans TW Light"),
+    local("SourceHanSansTW-Light"), local("Source Han Sans TC Light"),
+    local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
+    local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
+    local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
+    local("Heiti TC Light"), local("PMingLiU");
+  font-weight: 300;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-tw;
+  src: local("PingFangTC-Regular"), local("Source Han Sans TW Regular"),
+    local("SourceHanSansTW-Regular"), local("Source Han Sans TC Regular"),
+    local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
+    local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
+    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
+    local("Heiti TC Light"), local("PMingLiU");
+  font-weight: 400;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-tw;
+  src: local("PingFangTC-Medium"), local("Source Han Sans TW Medium"),
+    local("SourceHanSansTW-Medium"), local("Source Han Sans TC Medium"),
+    local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
+    local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
+    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
+    local("Heiti TC Light"), local("PMingLiU");
+  font-weight: 500;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-tw;
+  src: local("PingFangTC-Semibold"), local("Source Han Sans TW Bold"),
+    local("SourceHanSansTW-Bold"), local("Source Han Sans TC Bold"),
+    local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
+    local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
+    local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
+    local("Heiti TC Medium"), local("PMingLiU");
+  font-weight: 700;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+/* Safari on macOS/iOS */
+@font-face {
+  font-family: system-ui-zh-tw;
+  src: local("HelveticaNeue");
+  unicode-range: U+A0;
+}
+
+/* Other browsers on macOS/iOS */
+@supports not (-webkit-hyphens: none) {
+  @font-face {
+    font-family: system-ui-zh-tw;
+    src: local("HelveticaNeue");
+    unicode-range: U+20;
+  }
+}
+
+@font-face {
+  font-family: system-ui-zh-hk;
+  src: local("PingFangHK-Light"), local("Source Han Sans HK Light"),
+    local("SourceHanSansHK-Light"), local("Source Han Sans HC Light"),
+    local("SourceHanSansHC-Light"), local("Noto Sans CJK HK Light"),
+    local("NotoSansCJKHK-Light"), local("Source Han Sans TC Light"),
+    local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
+    local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
+    local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
+    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
+  font-weight: 300;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-hk;
+  src: local("PingFangHK-Regular"), local("Source Han Sans HK Regular"),
+    local("SourceHanSansHK-Regular"), local("Source Han Sans HC Regular"),
+    local("SourceHanSansHC-Regular"), local("Noto Sans CJK HK Regular"),
+    local("NotoSansCJKHK-Regular"), local("Source Han Sans TC Regular"),
+    local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
+    local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
+    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
+    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
+  font-weight: 400;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-hk;
+  src: local("PingFangHK-Medium"), local("Source Han Sans HK Medium"),
+    local("SourceHanSansHK-Medium"), local("Source Han Sans HC Medium"),
+    local("SourceHanSansHC-Medium"), local("Noto Sans CJK HK Medium"),
+    local("NotoSansCJKHK-Medium"), local("Source Han Sans TC Medium"),
+    local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
+    local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
+    local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
+    local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
+  font-weight: 500;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-zh-hk;
+  src: local("PingFangHK-Semibold"), local("Source Han Sans HK Bold"),
+    local("SourceHanSansHK-Bold"), local("Source Han Sans HC Bold"),
+    local("SourceHanSansHC-Bold"), local("Noto Sans CJK HK Bold"),
+    local("NotoSansCJKHK-Bold"), local("Source Han Sans TC Bold"),
+    local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
+    local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
+    local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
+    local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
+  font-weight: 700;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+/* Safari on macOS/iOS */
+@font-face {
+  font-family: system-ui-zh-hk;
+  src: local("HelveticaNeue");
+  unicode-range: U+A0;
+}
+
+/* Other browsers on macOS/iOS */
+@supports not (-webkit-hyphens: none) {
+  @font-face {
+    font-family: system-ui-zh-hk;
+    src: local("HelveticaNeue");
+    unicode-range: U+20;
+  }
+}
+
+@font-face {
+  font-family: system-ui-ko;
+  src: local("AppleSDGothicNeo-Light"), local("Source Han Sans KR Light"),
+    local("SourceHanSansKR-Light"), local("Source Han Sans K Light"),
+    local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
+    local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
+    local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
+  font-weight: 300;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-ko;
+  src: local("AppleSDGothicNeo-Regular"), local("Source Han Sans KR Regular"),
+    local("SourceHanSansKR-Regular"), local("Source Han Sans K Regular"),
+    local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
+    local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
+    local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
+  font-weight: 400;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-ko;
+  src: local("AppleSDGothicNeo-Medium"), local("Source Han Sans KR Medium"),
+    local("SourceHanSansKR-Medium"), local("Source Han Sans K Medium"),
+    local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
+    local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
+    local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
+  font-weight: 500;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+@font-face {
+  font-family: system-ui-ko;
+  src: local("AppleSDGothicNeo-SemiBold"), local("Source Han Sans KR Bold"),
+    local("SourceHanSansKR-Bold"), local("Source Han Sans K Bold"),
+    local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
+    local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
+    local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
+  font-weight: 700;
+  unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
+    U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
+}
+
+/* Safari on macOS/iOS */
+@font-face {
+  font-family: system-ui-ko;
+  src: local("HelveticaNeue");
+  unicode-range: U+A0;
+}
+
+/* Other browsers on macOS/iOS */
+@supports not (-webkit-hyphens: none) {
+  @font-face {
+    font-family: system-ui-ko;
+    src: local("HelveticaNeue");
+    unicode-range: U+20;
+  }
+}

web_src/css/form.css

@@ -0,0 +1,547 @@
+input,
+textarea,
+.ui.input > input,
+.ui.form input:not([type]),
+.ui.form select,
+.ui.form textarea,
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="file"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="text"],
+.ui.form input[type="time"],
+.ui.form input[type="url"],
+.ui.selection.dropdown,
+.ui.checkbox label::before,
+.ui.checkbox input:checked ~ label::before,
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
+  background: var(--color-input-background);
+  border-color: var(--color-input-border);
+  color: var(--color-input-text);
+}
+
+input:hover,
+textarea:hover,
+.ui.input input:hover,
+.ui.form input:not([type]):hover,
+.ui.form select:hover,
+.ui.form textarea:hover,
+.ui.form input[type="date"]:hover,
+.ui.form input[type="datetime-local"]:hover,
+.ui.form input[type="email"]:hover,
+.ui.form input[type="file"]:hover,
+.ui.form input[type="number"]:hover,
+.ui.form input[type="password"]:hover,
+.ui.form input[type="search"]:hover,
+.ui.form input[type="tel"]:hover,
+.ui.form input[type="text"]:hover,
+.ui.form input[type="time"]:hover,
+.ui.form input[type="url"]:hover,
+.ui.selection.dropdown:hover,
+.ui.checkbox label:hover::before,
+.ui.checkbox label:active::before,
+.ui.radio.checkbox label::after,
+.ui.radio.checkbox input:focus ~ label::before,
+.ui.radio.checkbox input:checked ~ label::before {
+  background: var(--color-input-background);
+  border-color: var(--color-input-border-hover);
+  color: var(--color-input-text);
+}
+
+input:focus,
+textarea:focus,
+.ui.input input:focus,
+.ui.form input:not([type]):focus,
+.ui.form select:focus,
+.ui.form textarea:focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="file"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="url"]:focus,
+.ui.selection.dropdown:focus,
+.ui.checkbox input:focus ~ label::before,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
+.ui.checkbox input:checked:focus ~ label::before,
+.ui.radio.checkbox input:focus:checked ~ label::before {
+  background: var(--color-input-background);
+  border-color: var(--color-primary);
+  color: var(--color-input-text);
+}
+
+.ui.form .field > label,
+.ui.form .inline.fields > label,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.checkbox label,
+.ui.checkbox + label,
+.ui.checkbox label:hover,
+.ui.checkbox + label:hover,
+.ui.checkbox input:focus ~ label,
+.ui.checkbox input:active ~ label {
+  color: var(--color-text);
+}
+
+.ui.input,
+.ui.checkbox input:focus ~ label::after,
+.ui.checkbox input:checked ~ label::after,
+.ui.checkbox label:active::after,
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
+.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
+.ui.checkbox input:checked:focus ~ label::after,
+.ui.disabled.checkbox label,
+.ui.checkbox input[disabled] ~ label {
+  color: var(--color-input-text);
+}
+
+.ui.radio.checkbox input:focus ~ label::after,
+.ui.radio.checkbox input:checked ~ label::after,
+.ui.radio.checkbox input:focus:checked ~ label::after {
+  background: var(--color-input-text);
+}
+
+.ui.toggle.checkbox label::before {
+  background: var(--color-input-toggle-background);
+}
+
+.ui.toggle.checkbox label,
+.ui.toggle.checkbox input:checked ~ label,
+.ui.toggle.checkbox input:focus:checked ~ label {
+  color: var(--color-text) !important;
+}
+
+.ui.toggle.checkbox input:checked ~ label::before,
+.ui.toggle.checkbox input:focus:checked ~ label::before {
+  background: var(--color-primary) !important;
+}
+
+/* match <select> padding to <input> */
+.ui.form select {
+  padding: 0.67857143em 1em;
+}
+
+.form .help {
+  color: var(--color-secondary-dark-5);
+  padding-bottom: 0.6em;
+  display: inline-block;
+}
+
+#create-page-form form {
+  margin: auto;
+}
+
+#create-page-form form .ui.message {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  #create-page-form form {
+    width: 800px !important;
+  }
+  #create-page-form form .header {
+    padding-left: 280px !important;
+  }
+  #create-page-form form .inline.field > label,
+  #create-page-form form .inline.field.captcha-field > span {
+    text-align: right;
+    width: 250px !important;
+    word-wrap: break-word;
+  }
+  #create-page-form form .help {
+    margin-left: 265px !important;
+  }
+  #create-page-form form .optional .title {
+    margin-left: 250px !important;
+  }
+  #create-page-form form .inline.field > input,
+  #create-page-form form .inline.field > textarea {
+    width: 50%;
+  }
+}
+
+@media (max-width: 767px) {
+  #create-page-form form .optional .title {
+    margin-left: 15px;
+  }
+  #create-page-form form .inline.field > label {
+    display: block;
+  }
+}
+
+.signin .oauth2 div {
+  display: inline-block;
+}
+
+.signin .oauth2 div p {
+  margin: 10px 5px 0 0;
+  float: left;
+}
+
+.signin .oauth2 a {
+  margin-right: 3px;
+}
+
+.signin .oauth2 a:last-child {
+  margin-right: 0;
+}
+
+.signin .oauth2 img {
+  width: 32px;
+  height: 32px;
+}
+
+.signin .oauth2 img.openidConnect {
+  width: auto;
+}
+
+@media (min-width: 768px) {
+  .g-recaptcha-style,
+  .h-captcha-style {
+    margin: 0 auto !important;
+    width: 304px;
+    padding-left: 30px;
+  }
+  .g-recaptcha-style iframe,
+  .h-captcha-style iframe {
+    border-radius: 5px !important;
+    width: 302px !important;
+    height: 76px !important;
+  }
+}
+
+@media (max-height: 575px) {
+  #rc-imageselect,
+  .g-recaptcha-style,
+  .h-captcha-style {
+    transform: scale(0.77);
+    transform-origin: 0 0;
+  }
+}
+
+.user.activate form,
+.user.forgot.password form,
+.user.reset.password form,
+.user.link-account form,
+.user.signin form,
+.user.signup form {
+  margin: auto;
+  width: 700px !important;
+}
+
+.user.activate form .ui.message,
+.user.forgot.password form .ui.message,
+.user.reset.password form .ui.message,
+.user.link-account form .ui.message,
+.user.signin form .ui.message,
+.user.signup form .ui.message {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .user.activate form,
+  .user.forgot.password form,
+  .user.reset.password form,
+  .user.link-account form,
+  .user.signin form,
+  .user.signup form {
+    width: 800px !important;
+  }
+  .user.activate form .header,
+  .user.forgot.password form .header,
+  .user.reset.password form .header,
+  .user.link-account form .header,
+  .user.signin form .header,
+  .user.signup form .header {
+    padding-left: 280px !important;
+  }
+  .user.activate form .inline.field > label,
+  .user.forgot.password form .inline.field > label,
+  .user.reset.password form .inline.field > label,
+  .user.link-account form .inline.field > label,
+  .user.signin form .inline.field > label,
+  .user.signup form .inline.field > label,
+  .user.activate form .inline.field.captcha-field > span,
+  .user.forgot.password form .inline.field.captcha-field > span,
+  .user.reset.password form .inline.field.captcha-field > span,
+  .user.link-account form .inline.field.captcha-field > span,
+  .user.signin form .inline.field.captcha-field > span,
+  .user.signup form .inline.field.captcha-field > span {
+    text-align: right;
+    width: 250px !important;
+    word-wrap: break-word;
+  }
+  .user.activate form .help,
+  .user.forgot.password form .help,
+  .user.reset.password form .help,
+  .user.link-account form .help,
+  .user.signin form .help,
+  .user.signup form .help {
+    margin-left: 265px !important;
+  }
+  .user.activate form .optional .title,
+  .user.forgot.password form .optional .title,
+  .user.reset.password form .optional .title,
+  .user.link-account form .optional .title,
+  .user.signin form .optional .title,
+  .user.signup form .optional .title {
+    margin-left: 250px !important;
+  }
+  .user.activate form .inline.field > input,
+  .user.forgot.password form .inline.field > input,
+  .user.reset.password form .inline.field > input,
+  .user.link-account form .inline.field > input,
+  .user.signin form .inline.field > input,
+  .user.signup form .inline.field > input,
+  .user.activate form .inline.field > textarea,
+  .user.forgot.password form .inline.field > textarea,
+  .user.reset.password form .inline.field > textarea,
+  .user.link-account form .inline.field > textarea,
+  .user.signin form .inline.field > textarea,
+  .user.signup form .inline.field > textarea {
+    width: 50%;
+  }
+}
+
+@media (max-width: 767px) {
+  .user.activate form .optional .title,
+  .user.forgot.password form .optional .title,
+  .user.reset.password form .optional .title,
+  .user.link-account form .optional .title,
+  .user.signin form .optional .title,
+  .user.signup form .optional .title {
+    margin-left: 15px;
+  }
+  .user.activate form .inline.field > label,
+  .user.forgot.password form .inline.field > label,
+  .user.reset.password form .inline.field > label,
+  .user.link-account form .inline.field > label,
+  .user.signin form .inline.field > label,
+  .user.signup form .inline.field > label {
+    display: block;
+  }
+}
+
+.user.activate form .header,
+.user.forgot.password form .header,
+.user.reset.password form .header,
+.user.link-account form .header,
+.user.signin form .header,
+.user.signup form .header {
+  padding-left: 0 !important;
+  text-align: center;
+}
+
+.user.activate form .inline.field > label,
+.user.forgot.password form .inline.field > label,
+.user.reset.password form .inline.field > label,
+.user.link-account form .inline.field > label,
+.user.signin form .inline.field > label,
+.user.signup form .inline.field > label {
+  width: 200px;
+}
+
+@media (max-width: 767px) {
+  .user.activate form .inline.field > label,
+  .user.forgot.password form .inline.field > label,
+  .user.reset.password form .inline.field > label,
+  .user.link-account form .inline.field > label,
+  .user.signin form .inline.field > label,
+  .user.signup form .inline.field > label,
+  .user.activate form input,
+  .user.forgot.password form input,
+  .user.reset.password form input,
+  .user.link-account form input,
+  .user.signin form input,
+  .user.signup form input {
+    width: 100% !important;
+  }
+}
+
+.user.activate form input[type="number"],
+.user.forgot.password form input[type="number"],
+.user.reset.password form input[type="number"],
+.user.link-account form input[type="number"],
+.user.signin form input[type="number"],
+.user.signup form input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.user.activate form input::-webkit-outer-spin-button,
+.user.forgot.password form input::-webkit-outer-spin-button,
+.user.reset.password form input::-webkit-outer-spin-button,
+.user.link-account form input::-webkit-outer-spin-button,
+.user.signin form input::-webkit-outer-spin-button,
+.user.signup form input::-webkit-outer-spin-button,
+.user.activate form input::-webkit-inner-spin-button,
+.user.forgot.password form input::-webkit-inner-spin-button,
+.user.reset.password form input::-webkit-inner-spin-button,
+.user.link-account form input::-webkit-inner-spin-button,
+.user.signin form input::-webkit-inner-spin-button,
+.user.signup form input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.user.signin.webauthn-prompt {
+  margin-top: 15px;
+}
+
+.repository.new.repo form,
+.repository.new.migrate form,
+.repository.new.fork form {
+  margin: auto;
+}
+
+.repository.new.repo form .ui.message,
+.repository.new.migrate form .ui.message,
+.repository.new.fork form .ui.message {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .repository.new.repo form,
+  .repository.new.migrate form,
+  .repository.new.fork form {
+    width: 800px !important;
+  }
+  .repository.new.repo form .header,
+  .repository.new.migrate form .header,
+  .repository.new.fork form .header {
+    padding-left: 280px !important;
+  }
+  .repository.new.repo form .inline.field > label,
+  .repository.new.migrate form .inline.field > label,
+  .repository.new.fork form .inline.field > label,
+  .repository.new.repo form .inline.field.captcha-field > span,
+  .repository.new.migrate form .inline.field.captcha-field > span,
+  .repository.new.fork form .inline.field.captcha-field > span {
+    text-align: right;
+    width: 250px !important;
+    word-wrap: break-word;
+  }
+  .repository.new.repo form .help,
+  .repository.new.migrate form .help,
+  .repository.new.fork form .help {
+    margin-left: 265px !important;
+  }
+  .repository.new.repo form .optional .title,
+  .repository.new.migrate form .optional .title,
+  .repository.new.fork form .optional .title {
+    margin-left: 250px !important;
+  }
+  .repository.new.repo form .inline.field > input,
+  .repository.new.migrate form .inline.field > input,
+  .repository.new.fork form .inline.field > input,
+  .repository.new.repo form .inline.field > textarea,
+  .repository.new.migrate form .inline.field > textarea,
+  .repository.new.fork form .inline.field > textarea {
+    width: 50%;
+  }
+}
+
+@media (max-width: 767px) {
+  .repository.new.repo form .optional .title,
+  .repository.new.migrate form .optional .title,
+  .repository.new.fork form .optional .title {
+    margin-left: 15px;
+  }
+  .repository.new.repo form .inline.field > label,
+  .repository.new.migrate form .inline.field > label,
+  .repository.new.fork form .inline.field > label {
+    display: block;
+  }
+}
+
+.repository.new.repo form .dropdown .text,
+.repository.new.migrate form .dropdown .text,
+.repository.new.fork form .dropdown .text {
+  margin-right: 0 !important;
+}
+
+.repository.new.repo form .header,
+.repository.new.migrate form .header,
+.repository.new.fork form .header {
+  padding-left: 0 !important;
+  text-align: center;
+}
+
+.repository.new.repo form .selection.dropdown,
+.repository.new.migrate form .selection.dropdown,
+.repository.new.fork form .selection.dropdown {
+  vertical-align: middle;
+  width: 50% !important;
+}
+
+@media (max-width: 767px) {
+  .repository.new.repo form label,
+  .repository.new.migrate form label,
+  .repository.new.fork form label,
+  .repository.new.repo form input,
+  .repository.new.migrate form input,
+  .repository.new.fork form input,
+  .repository.new.repo form .selection.dropdown,
+  .repository.new.migrate form .selection.dropdown,
+  .repository.new.fork form .selection.dropdown {
+    width: 100% !important;
+  }
+  .repository.new.repo form .field button,
+  .repository.new.migrate form .field button,
+  .repository.new.fork form .field button,
+  .repository.new.repo form .field a,
+  .repository.new.migrate form .field a,
+  .repository.new.fork form .field a {
+    margin-bottom: 1em;
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .repository.new.repo .ui.form #auto-init {
+    margin-left: 265px !important;
+  }
+}
+
+.repository.new.repo .ui.form .selection.dropdown:not(.owner) {
+  width: 50% !important;
+}
+
+@media (max-width: 767px) {
+  .repository.new.repo .ui.form .selection.dropdown:not(.owner) {
+    width: 100% !important;
+  }
+}
+
+.new.webhook form .help {
+  margin-left: 25px;
+}
+
+.new.webhook .events.fields .column {
+  padding-left: 40px;
+}
+
+.githook textarea {
+  font-family: var(--fonts-monospace);
+}
+
+@media (max-width: 767px) {
+  .new.org .ui.form .field button,
+  .new.org .ui.form .field a {
+    margin-bottom: 1em;
+    width: 100%;
+  }
+  .new.org .ui.form .field input {
+    width: 100% !important;
+  }
+}

web_src/less/helpers.less → web_src/css/helpers.css

@@ -196,7 +196,7 @@
 
 .gt-content-center { align-content: center !important; }
 
-@media @mediaSm {
+@media (max-width: 767px) {
   .gt-db-small { display: block !important; }
   .gt-w-100-small { width: 100% !important; }
   .gt-js-small { justify-content: flex-start !important; }

web_src/css/home.css

@@ -0,0 +1,53 @@
+.home .logo {
+  max-width: 220px;
+}
+
+@media (max-width: 767px) {
+  .home .hero h1 {
+    font-size: 3.5em;
+  }
+  .home .hero h2 {
+    font-size: 2em;
+  }
+}
+
+@media (min-width: 768px) {
+  .home .hero h1 {
+    font-size: 5.5em;
+  }
+  .home .hero h2 {
+    font-size: 3em;
+  }
+}
+
+.home .hero .svg {
+  color: var(--color-green);
+  height: 40px;
+  width: 50px;
+  vertical-align: bottom;
+}
+
+.home .hero.header {
+  font-size: 20px;
+}
+
+.home p.large {
+  font-size: 16px;
+}
+
+.home .stackable {
+  padding-top: 30px;
+}
+
+.home a {
+  color: var(--color-green);
+}
+
+@media (max-width: 880px) {
+  footer .ui.container .left,
+  footer .ui.container .right {
+    display: block;
+    text-align: center;
+    float: none;
+  }
+}

web_src/css/index.css

@@ -0,0 +1,40 @@
+@import "font-awesome/css/font-awesome.css";
+
+@import "./animations.css";
+@import "./shared/issuelist.css";
+@import "./features/dropzone.css";
+@import "./features/gitgraph.css";
+@import "./features/heatmap.css";
+@import "./features/imagediff.css";
+@import "./features/codeeditor.css";
+@import "./features/projects.css";
+@import "./modules/tippy.css";
+@import "./code/linebutton.css";
+@import "./markup/content.css";
+@import "./markup/codecopy.css";
+@import "./markup/asciicast.css";
+
+@import "./chroma/base.css";
+@import "./chroma/light.css";
+@import "./codemirror/base.css";
+@import "./codemirror/light.css";
+@import "./console/console.css";
+
+@import "./svg.css";
+@import "./tribute.css";
+@import "./font_i18n.css";
+@import "./base.css";
+@import "./home.css";
+@import "./install.css";
+@import "./form.css";
+@import "./repository.css";
+@import "./editor.css";
+@import "./organization.css";
+@import "./user.css";
+@import "./dashboard.css";
+@import "./admin.css";
+@import "./explore.css";
+@import "./review.css";
+@import "./package.css";
+@import "./runner.css";
+@import "./helpers.css";

web_src/css/install.css

@@ -0,0 +1,65 @@
+.page-content.install {
+  padding-top: 45px;
+}
+
+.page-content.install form.ui.form .inline.field > label {
+  text-align: right;
+  width: 30%;
+  padding-right: 10px;
+  margin-right: 0;
+}
+
+.page-content.install form.ui.form .inline.field > .ui.checkbox:first-child {
+  margin-left: 30%;
+  padding-left: 5px;
+}
+
+.page-content.install form.ui.form .inline.field > .ui.checkbox:first-child label {
+  width: auto;
+}
+
+.page-content.install form.ui.form .title {
+  margin-left: 30%;
+  padding-left: 5px;
+}
+
+.page-content.install form.ui.form input {
+  width: 60%;
+}
+
+.page-content.install form.ui.form details.optional.field[open] {
+  border-bottom: 1px solid var(--color-secondary);
+  padding-bottom: 10px;
+}
+
+.page-content.install form.ui.form details.optional.field[open] summary {
+  margin-bottom: 10px;
+}
+
+.page-content.install form.ui.form details.optional.field * {
+  box-sizing: border-box;
+}
+
+.page-content.install form.ui.form .field {
+  text-align: left;
+}
+
+.page-content.install form.ui.form .field .help {
+  margin-left: 30%;
+  padding-left: 5px;
+  width: 60%;
+}
+
+.page-content.install .ui .reinstall-message {
+  width: 70%;
+  margin: 20px auto;
+  color: var(--color-red);
+  text-align: left;
+  font-weight: bold;
+}
+
+.page-content.install .ui .reinstall-confirm {
+  width: 70%;
+  text-align: left;
+  margin: 10px auto;
+}

web_src/less/markup/codecopy.less → web_src/css/markup/codecopy.css

@@ -9,7 +9,7 @@
   right: 6px;
   padding: 9px;
   visibility: hidden;
-  animation: fadeout .2s both;
+  animation: fadeout 0.2s both;
 }
 
 /* adjustments for comment content having only 14px font size */
@@ -23,6 +23,7 @@
 .markup .code-copy:hover {
   background: var(--color-secondary) !important;
 }
+
 .markup .code-copy:active {
   background: var(--color-secondary-dark-1) !important;
 }
@@ -30,5 +31,5 @@
 .markup .code-block:hover .code-copy,
 .markup .mermaid-block:hover .code-copy {
   visibility: visible;
-  animation: fadein .2s both;
+  animation: fadein 0.2s both;
 }

web_src/css/markup/content.css

@@ -0,0 +1,559 @@
+.markup {
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 1.5 !important;
+  word-wrap: break-word;
+}
+
+.markup.ui.segment {
+  padding: 3em;
+}
+
+.markup.file-view {
+  padding: 2em !important;
+}
+
+.markup > *:first-child {
+  margin-top: 0 !important;
+}
+
+.markup > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markup a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markup .absent {
+  color: var(--color-red);
+}
+
+.markup .anchor {
+  padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
+  color: inherit;
+}
+
+.markup .anchor .svg {
+  vertical-align: middle;
+}
+
+.markup .anchor:focus {
+  outline: none;
+}
+
+.markup h1 .anchor .svg,
+.markup h2 .anchor .svg,
+.markup h3 .anchor .svg,
+.markup h4 .anchor .svg,
+.markup h5 .anchor .svg,
+.markup h6 .anchor .svg {
+  visibility: hidden;
+}
+
+.markup h1:hover .anchor .svg,
+.markup h2:hover .anchor .svg,
+.markup h3:hover .anchor .svg,
+.markup h4:hover .anchor .svg,
+.markup h5:hover .anchor .svg,
+.markup h6:hover .anchor .svg {
+  visibility: visible;
+}
+
+.markup h2 .anchor .svg,
+.markup h3 .anchor .svg,
+.markup h4 .anchor .svg {
+  position: relative;
+  top: -2px;
+}
+
+.markup h1,
+.markup h2,
+.markup h3,
+.markup h4,
+.markup h5,
+.markup h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markup h1 tt,
+.markup h1 code,
+.markup h2 tt,
+.markup h2 code,
+.markup h3 tt,
+.markup h3 code,
+.markup h4 tt,
+.markup h4 code,
+.markup h5 tt,
+.markup h5 code,
+.markup h6 tt,
+.markup h6 code {
+  font-size: inherit;
+}
+
+.markup h1 {
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.markup h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.markup h3 {
+  font-size: 1.25em;
+}
+
+.markup h4 {
+  font-size: 1em;
+}
+
+.markup h5 {
+  font-size: 0.875em;
+}
+
+.markup h6 {
+  font-size: 0.85em;
+  color: var(--color-text-light-2);
+}
+
+.markup p,
+.markup blockquote,
+.markup details,
+.markup ul,
+.markup ol,
+.markup dl,
+.markup table,
+.markup pre {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markup hr {
+  height: 4px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: var(--color-secondary);
+  border: 0;
+}
+
+.markup ul,
+.markup ol {
+  padding-left: 2em;
+}
+
+.markup ul.no-list,
+.markup ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+
+.markup .task-list-item {
+  list-style-type: none;
+  position: relative;
+  line-height: 1.5rem;
+  min-height: 1.5rem; /* // to render a checkbox list without content `- [ ]`, we need this min-height to make sure the <li> can be visible */
+}
+
+.markup .task-list-item input[type="checkbox"] {
+  position: absolute;
+  top: 0.25em;
+  left: -1.6em;
+}
+
+.markup .task-list-item p {
+  line-height: 1.5rem;
+}
+
+.markup .task-list-item + .task-list-item {
+  margin-top: 3px;
+}
+
+.markup input[type="checkbox"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  border: 1px solid var(--color-secondary);
+  border-radius: 2px;
+  background: var(--color-input-background);
+  height: 14px;
+  width: 14px;
+  opacity: 1 !important; /* override fomantic on edit preview */
+  pointer-events: auto !important; /* override fomantic on edit preview */
+  vertical-align: middle !important; /* override fomantic on edit preview */
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+}
+
+.markup input[type="checkbox"]:not([disabled]):hover,
+.markup input[type="checkbox"]:not([disabled]):active {
+  border-color: var(--color-primary);
+}
+
+.markup input[type="checkbox"]::after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  background: var(--color-text);
+  mask-size: cover;
+  -webkit-mask-size: cover;
+}
+
+.markup input[type="checkbox"]:checked::after {
+  content: "";
+  mask-image: var(--checkbox-mask-checked);
+  -webkit-mask-image: var(--checkbox-mask-checked);
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+}
+
+.markup input[type="checkbox"]:indeterminate::after {
+  content: "";
+  mask-image: var(--checkbox-mask-indeterminate);
+  -webkit-mask-image: var(--checkbox-mask-indeterminate);
+}
+
+.markup ul ul,
+.markup ul ol,
+.markup ol ol,
+.markup ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markup ol ol,
+.markup ul ol {
+  list-style-type: lower-roman;
+}
+
+.markup li > p {
+  margin-top: 16px;
+}
+
+.markup li + li {
+  margin-top: 0.25em;
+}
+
+.markup dl {
+  padding: 0;
+}
+
+.markup dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markup dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markup blockquote {
+  margin-left: 0;
+  padding: 0 15px;
+  color: var(--color-text-light-2);
+  border-left: 4px solid var(--color-secondary);
+}
+
+.markup blockquote > :first-child {
+  margin-top: 0;
+}
+
+.markup blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.markup table {
+  display: block;
+  width: 100%;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.markup table th {
+  font-weight: 600;
+}
+
+.markup table th,
+.markup table td {
+  padding: 6px 13px !important;
+  border: 1px solid var(--color-secondary) !important;
+}
+
+.markup table tr {
+  border-top: 1px solid var(--color-secondary);
+}
+
+.markup table tr:nth-child(2n) {
+  background-color: var(--color-markup-table-row);
+}
+
+.markup img {
+  max-width: 100%;
+  box-sizing: initial;
+}
+
+.markup img[align="right"] {
+  padding-left: 20px;
+}
+
+.markup img[align="left"] {
+  padding-right: 20px;
+}
+
+.markup .emoji {
+  max-width: none;
+  vertical-align: text-top;
+}
+
+.markup span.frame {
+  display: block;
+  overflow: hidden;
+}
+
+.markup span.frame > span {
+  display: block;
+  float: left;
+  width: auto;
+  padding: 7px;
+  margin: 13px 0 0;
+  overflow: hidden;
+  border: 1px solid var(--color-secondary);
+}
+
+.markup span.frame span img {
+  display: block;
+  float: left;
+}
+
+.markup span.frame span span {
+  display: block;
+  padding: 5px 0 0;
+  clear: both;
+  color: var(--color-text);
+}
+
+.markup span.align-center {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markup span.align-center > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+
+.markup span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.markup span.align-right {
+  display: block;
+  overflow: hidden;
+  clear: both;
+}
+
+.markup span.align-right > span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markup span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+
+.markup span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+
+.markup span.float-left span {
+  margin: 13px 0 0;
+}
+
+.markup span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+
+.markup span.float-right > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+
+.markup code,
+.markup tt {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  background-color: var(--color-markup-code-block);
+  border-radius: 4px;
+}
+
+.markup code br,
+.markup tt br {
+  display: none;
+}
+
+.markup del code {
+  text-decoration: inherit;
+}
+
+.markup pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  background: transparent;
+  border: 0;
+}
+
+.markup .highlight {
+  margin-bottom: 16px;
+}
+
+.markup .highlight pre,
+.markup pre {
+  padding: 16px;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: var(--color-markup-code-block);
+  border-radius: 4px;
+}
+
+.markup .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markup pre {
+  word-wrap: normal;
+}
+
+.markup pre code,
+.markup pre tt {
+  display: inline;
+  max-width: initial;
+  padding: 0;
+  margin: 0;
+  overflow: initial;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.markup pre code::before,
+.markup pre code::after,
+.markup pre tt::before,
+.markup pre tt::after {
+  content: normal;
+}
+
+.markup kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  color: var(--color-text-light);
+  vertical-align: middle;
+  background-color: var(--color-markup-code-block);
+  border: 1px solid var(--color-secondary);
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 var(--color-secondary);
+}
+
+.markup .ui.list .list,
+.markup ol.ui.list ol,
+.markup ul.ui.list ul {
+  padding-left: 2em;
+}
+
+.repository.wiki.revisions .ui.container > .ui.stackable.grid {
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header {
+  margin-top: 0;
+}
+
+.repository.wiki.revisions .ui.container > .ui.stackable.grid > .header .sub.header {
+  padding-left: 52px;
+  word-break: break-word;
+}
+
+.file-revisions-btn {
+  display: block;
+  float: left;
+  margin-bottom: 2px !important;
+  padding: 11px !important;
+  margin-right: 10px !important;
+}
+
+.file-revisions-btn i {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.markup-render {
+  display: block;
+  border: none;
+  width: 100%;
+  height: var(--height-loading); /* actual height is set in JS after loading */
+  overflow: hidden;
+  color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */
+}
+
+.markup-block-error {
+  border: 1px solid var(--color-error-border) !important;
+  margin-bottom: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  box-shadow: none !important;
+  font-size: 85% !important;
+  white-space: pre-wrap !important;
+  padding: 0.5rem 1rem !important;
+  text-align: left !important;
+}
+
+.markup-block-error + pre {
+  border-top: none !important;
+  margin-top: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}

web_src/less/modules/tippy.less → web_src/css/modules/tippy.css

@@ -1,6 +1,6 @@
 /* styles are based on node_modules/tippy.js/dist/tippy.css */
 
-// class to hide tippy target elements on page load
+/* class to hide tippy target elements on page load */
 .tippy-target {
   display: none !important;
 }
@@ -40,7 +40,7 @@
 }
 
 .tippy-box[data-theme="tooltip"] .tippy-content {
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
 }
 
 .tippy-box[data-theme="menu"] .tippy-content {

web_src/css/organization.css

@@ -0,0 +1,250 @@
+#create-page-form form {
+  margin: auto;
+}
+
+#create-page-form form .ui.message {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  #create-page-form form {
+    width: 800px !important;
+  }
+  #create-page-form form .header {
+    padding-left: 280px !important;
+  }
+  #create-page-form form .inline.field > label,
+  #create-page-form form .inline.field.captcha-field > span {
+    text-align: right;
+    width: 250px !important;
+    word-wrap: break-word;
+  }
+  #create-page-form form .help {
+    margin-left: 265px !important;
+  }
+  #create-page-form form .optional .title {
+    margin-left: 250px !important;
+  }
+  #create-page-form form .inline.field > input,
+  #create-page-form form .inline.field > textarea {
+    width: 50%;
+  }
+}
+
+@media (max-width: 767px) {
+  #create-page-form form .optional .title {
+    margin-left: 15px;
+  }
+  #create-page-form form .inline.field > label {
+    display: block;
+  }
+}
+
+.organization .head .ui.header .text {
+  vertical-align: middle;
+  font-size: 1.6rem;
+  margin-left: 15px;
+}
+
+.organization .head .ui.header .org-visibility .label {
+  margin-left: 5px;
+  margin-top: 5px;
+}
+
+.organization .head .ui.header .ui.right {
+  margin-top: 5px;
+}
+
+.organization .ui.secondary.stackable.pointing.menu {
+  flex-wrap: wrap;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.organization.new.org form {
+  margin: auto;
+}
+
+.organization.new.org form .ui.message {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .organization.new.org form {
+    width: 800px !important;
+  }
+  .organization.new.org form .header {
+    padding-left: 280px !important;
+  }
+  .organization.new.org form .inline.field > label,
+  .organization.new.org form .inline.field.captcha-field > span {
+    text-align: right;
+    width: 250px !important;
+    word-wrap: break-word;
+  }
+  .organization.new.org form .help {
+    margin-left: 265px !important;
+  }
+  .organization.new.org form .optional .title {
+    margin-left: 250px !important;
+  }
+  .organization.new.org form .inline.field > input,
+  .organization.new.org form .inline.field > textarea {
+    width: 50%;
+  }
+}
+
+@media (max-width: 767px) {
+  .organization.new.org form .optional .title {
+    margin-left: 15px;
+  }
+  .organization.new.org form .inline.field > label {
+    display: block;
+  }
+}
+
+.organization.new.org form .header {
+  padding-left: 0 !important;
+  text-align: center;
+}
+
+.organization.options input {
+  min-width: 300px;
+}
+
+.organization.profile .org-avatar {
+  width: 100px;
+  height: 100px;
+  margin-right: 15px;
+}
+
+.organization.profile #org-info {
+  overflow-wrap: anywhere;
+}
+
+.organization.profile #org-info .ui.header {
+  display: flex;
+  align-items: center;
+  font-size: 36px;
+  margin-bottom: 0;
+}
+
+.organization.profile #org-info .ui.header .org-visibility .label {
+  margin-left: 5px;
+  margin-top: 2px;
+}
+
+.organization.profile #org-info .desc {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.organization.profile #org-info .meta .item {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.organization.profile #org-info .meta .item .icon {
+  margin-right: 5px;
+}
+
+.organization.profile .ui.top.header .ui.right {
+  margin-top: 0;
+}
+
+.organization.profile .teams .item {
+  padding: 10px 15px;
+}
+
+.organization.teams .members a:hover,
+.organization.profile .members a:hover {
+  text-decoration: none;
+}
+
+.organization.teams .members .ui.avatar,
+.organization.profile .members .ui.avatar {
+  width: 48px;
+  height: 48px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
+.organization.invite #invite-box {
+  margin: 50px auto auto;
+  width: 500px !important;
+}
+
+.organization.invite #invite-box #search-user-box input {
+  margin-left: 0;
+  width: 300px;
+}
+
+.organization.invite #invite-box .ui.button {
+  margin-left: 5px;
+  margin-top: -3px;
+}
+
+.organization.invite .ui.avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.organization.members .list .item {
+  margin-left: 0;
+  margin-right: 0;
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.organization.members .list .item .ui.avatar {
+  width: 48px;
+  height: auto;
+  margin-right: 1rem;
+  align-self: flex-start;
+}
+
+.organization.members .list .item .meta {
+  line-height: 24px;
+  word-break: break-word;
+  min-width: 2em;
+}
+
+.organization.teams .detail .item {
+  padding: 10px 15px;
+}
+
+.organization.teams .detail .item:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.organization.teams .repositories .item,
+.organization.teams .members .item {
+  padding: 10px 20px;
+  line-height: 32px;
+}
+
+.organization.teams .repositories .item:not(:last-child),
+.organization.teams .members .item:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.organization.teams .repositories .item .button,
+.organization.teams .members .item .button {
+  padding: 9px 10px;
+}
+
+.organization.teams #add-repo-form input,
+.organization.teams #repo-multiple-form input,
+.organization.teams #add-member-form input {
+  margin-left: 0;
+}
+
+.organization.teams #add-repo-form .ui.button,
+.organization.teams #repo-multiple-form .ui.button,
+.organization.teams #add-member-form .ui.button {
+  margin-left: 5px;
+  margin-top: -3px;
+}
+
+.organization.teams #repo-top-segment {
+  height: 60px;
+}

web_src/css/package.css

@@ -0,0 +1,7 @@
+.container-labels td:nth-child(1) {
+  vertical-align: top;
+}
+
+.container-labels td:nth-child(2) {
+  overflow-wrap: anywhere;
+}

web_src/css/review.css

@@ -0,0 +1,322 @@
+.show-outdated,
+.hide-outdated {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ui.button.add-code-comment {
+  padding: 2px;
+  position: absolute;
+  margin-left: -22px;
+  z-index: 5;
+  opacity: 0;
+  transition: transform 0.1s ease-in-out;
+  transform: scale(1);
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.ui.button.add-code-comment:hover {
+  transform: scale(1.1);
+}
+
+.lines-escape a.toggle-escape-button::before {
+  visibility: visible;
+  content: "⚠️";
+  font-family: var(--fonts-emoji);
+  color: var(--color-red);
+}
+
+.repository .diff-file-box .code-diff td.lines-escape {
+  padding-left: 0 !important;
+}
+
+.diff-file-box .lines-code:hover .ui.button.add-code-comment {
+  opacity: 1;
+}
+
+.repository .diff-file-box .code-diff .add-comment-left,
+.repository .diff-file-box .code-diff .add-comment-right,
+.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
+.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
+.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.add-comment-left.add-comment-right .ui.attached.header {
+  border: 1px solid var(--color-secondary);
+}
+
+.add-comment-left.add-comment-right .ui.attached.header:not(.top) {
+  margin-bottom: 0.5em;
+}
+
+.add-comment .lines-num,
+.add-comment .lines-escape,
+.add-comment .lines-type-marker {
+  display: none;
+}
+
+.show-outdated:hover,
+.hide-outdated:hover {
+  text-decoration: underline;
+}
+
+.comment-code-cloud {
+  padding: 0.5rem 1rem !important;
+  position: relative;
+  margin: 0 auto;
+  max-width: 1000px;
+}
+
+@media (max-width: 767px) {
+  .comment-code-cloud {
+    max-width: none;
+    padding: 0.75rem !important;
+  }
+  .comment-code-cloud .code-comment-buttons {
+    margin: 0.5rem 0 0.25rem !important;
+  }
+  .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
+    width: 100%;
+  }
+  .comment-code-cloud .ui.buttons {
+    width: 100%;
+    margin: 0 !important;
+  }
+  .comment-code-cloud .ui.buttons .button {
+    flex: 1;
+  }
+}
+
+.comment-code-cloud .comments .comment {
+  padding: 0;
+}
+
+@media (max-width: 767px) {
+  .comment-code-cloud .comments .comment {
+    display: flex;
+  }
+  .comment-code-cloud
+    .comments
+    .comment
+    .comment-header-right.actions
+    .ui.basic.label {
+    display: none;
+  }
+  .comment-code-cloud .comments .comment .avatar {
+    width: auto;
+    float: none;
+    margin: 0 0.5rem 0 0;
+    flex-shrink: 0;
+  }
+  .comment-code-cloud .comments .comment .avatar ~ .content {
+    margin-left: 1em;
+  }
+  .comment-code-cloud .comments .comment img.avatar {
+    margin: 0 !important;
+  }
+  .comment-code-cloud .comments .comment .comment-content {
+    margin-left: 0 !important;
+  }
+  .comment-code-cloud .comments .comment .comment-container {
+    width: 100%;
+  }
+  .comment-code-cloud .comments .comment.code-comment {
+    padding: 0 0 0.5rem !important;
+  }
+}
+
+.comment-code-cloud .attached.tab {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.comment-code-cloud .attached.header {
+  padding: 0.1rem 1rem;
+}
+
+.comment-code-cloud .attached.header .text {
+  margin: 0;
+}
+
+.comment-code-cloud .right.menu.options .item {
+  padding: 0.85714286em 0.442857em;
+  cursor: pointer;
+}
+
+.comment-code-cloud .ui.active.tab {
+  padding: 0.5em;
+}
+
+.comment-code-cloud .ui.active.tab.markup {
+  padding: 1em;
+  min-height: 168px;
+}
+
+.comment-code-cloud .ui.tabular.menu {
+  margin: 0.5em;
+}
+
+.comment-code-cloud .footer {
+  border-top: 1px solid var(--color-secondary);
+  padding: 10px 0;
+}
+
+.comment-code-cloud .footer .markup-info {
+  display: inline-block;
+  margin: 5px 0;
+  font-size: 12px;
+  color: var(--color-text-light);
+}
+
+.comment-code-cloud .footer .ui.right.floated {
+  padding-top: 6px;
+}
+
+.comment-code-cloud .footer::after {
+  clear: both;
+  content: "";
+  display: block;
+}
+
+@media (max-width: 767px) {
+  .comment-code-cloud .button {
+    width: 100%;
+    margin: 0 !important;
+    margin-bottom: 0.75rem !important;
+  }
+}
+
+.diff-file-body .comment-form {
+  margin: 0 0 0 3em;
+}
+
+.file-comment {
+  color: var(--color-text);
+}
+
+a.blob-excerpt {
+  color: var(--color-text-light);
+  height: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background: var(--color-expand-button);
+}
+
+a.blob-excerpt:hover {
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+
+/* See the comment of createCommentEasyMDE() for the review editor */
+/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
+.review-box-panel .CodeMirror-scroll {
+  min-height: 80px;
+  max-height: calc(100vh - 360px);
+}
+
+@media (max-width: 767px) {
+  .review-box-panel .CodeMirror-scroll {
+    max-width: calc(100vw - 70px);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .review-box-panel .CodeMirror-scroll {
+    max-width: 700px;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1200px) {
+  .review-box-panel .CodeMirror-scroll {
+    max-width: 800px;
+  }
+}
+
+@media (min-width: 1201px) {
+  .review-box-panel .CodeMirror-scroll {
+    max-width: 900px;
+  }
+}
+
+#review-box {
+  position: relative;
+}
+
+.review-box-panel {
+  position: absolute;
+  min-width: max-content;
+  top: 45px;
+  right: -5px;
+  z-index: 2;
+}
+
+#review-box .review-comments-counter {
+  background-color: var(--color-primary-light-4);
+  color: var(--color-primary-contrast);
+}
+
+#review-box:hover .review-comments-counter {
+  background-color: var(--color-primary-light-5);
+}
+
+#review-box .review-comments-counter[data-pending-comment-number="0"] {
+  display: none;
+}
+
+.pull.files.diff [id] {
+  scroll-margin-top: 99px;
+}
+
+@media (max-width: 991px) {
+  .pull.files.diff [id] {
+    scroll-margin-top: 130px;
+  }
+}
+
+.changed-since-last-review {
+  border: 1px var(--color-accent) solid;
+  background-color: var(--color-small-accent);
+  border-radius: 15px;
+  padding: 4px 8px;
+  margin: -8px 0; /* just like other buttons in the diff box header */
+  font-size: 0.857rem; /* just like .ui.tiny.button */
+}
+
+.viewed-file-form {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+  padding: 4px 8px;
+  margin: -8px 0; /* just like other buttons in the diff box header */
+  border-radius: 0.285rem; /* just like .ui.tiny.button */
+  font-size: 0.857rem; /* just like .ui.tiny.button */
+}
+
+.viewed-file-form input {
+  margin-right: 4px;
+}
+
+.viewed-file-checked-form {
+  background-color: var(--color-small-accent);
+  border-color: var(--color-accent);
+}
+
+#viewed-files-summary {
+  width: 72px;
+  height: 10px;
+}
+
+.diff-file-box {
+  border-radius: 0.285rem; /* Just like ui.top.attached.header */
+}
+
+.diff-file-box:target {
+  box-shadow: 0 0 0 3px var(--color-accent);
+}

web_src/css/runner.css

@@ -0,0 +1,54 @@
+.runner-container {
+  padding-bottom: 30px;
+}
+
+.runner-container .runner-ops > a {
+  margin-left: 0.5em;
+}
+
+.runner-container .runner-ops-delete {
+  color: var(--color-red-light);
+}
+
+.runner-container .runner-basic-info .gt-dib {
+  margin-right: 1em;
+}
+
+.runner-container .runner-status-online {
+  padding: 0.3em 0.5em;
+  background-color: var(--color-green);
+  color: var(--color-white);
+}
+
+.runner-container .runner-new-text {
+  color: var(--color-white);
+}
+
+.runner-container #runner-new:hover .runner-new-text {
+  color: var(--color-white) !important;
+}
+
+.runner-container .runner-new-menu {
+  width: 300px;
+}
+
+.runner-container .task-status-success {
+  background-color: var(--color-green);
+  color: var(--color-white);
+}
+
+.runner-container .task-status-failure {
+  background-color: var(--color-red-light);
+  color: var(--color-white);
+}
+
+.runner-container .task-status-running {
+  background-color: var(--color-blue);
+  color: var(--color-white);
+}
+
+.runner-container .task-status-cancelled,
+.runner-container .task-status-blocked {
+  background-color: var(--color-yellow);
+  color: var(--color-white);
+}

web_src/css/shared/issuelist.css

@@ -0,0 +1,166 @@
+.issue.list {
+  list-style: none;
+  margin-top: 1rem;
+}
+
+.issue.list a:not(.label):hover {
+  color: var(--color-primary) !important;
+}
+
+.issue.list > .item .issue-checkbox {
+  margin-top: 1px;
+}
+
+.issue.list > .item .issue-item-icon svg {
+  margin-right: 0.75rem;
+  margin-top: 1px;
+}
+
+.issue.list > .item .issue-item-icons-right > * + * {
+  margin-left: 0.5rem;
+}
+
+.issue.list > .item .issue-item-main {
+  width: 100%;
+}
+
+.issue.list > .item .action-item-main {
+  width: 80%;
+}
+
+.issue.list > .item .issue-item-right {
+  width: 15%;
+}
+
+.issue.list > .item .issue-item-top-row {
+  max-width: 100%;
+  color: var(--color-text);
+  font-size: 16px;
+  min-width: 0;
+  font-weight: 600;
+}
+
+.issue.list > .item .issue-item-top-row a.index {
+  max-width: fit-content;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.issue.list > .item .labels-list {
+  position: relative;
+  top: -1.5px;
+}
+
+.issue.list > .item .issue-item-bottom-row {
+  font-size: 13px;
+}
+
+.issue.list > .item .title {
+  color: var(--color-text);
+  word-break: break-word;
+}
+
+.issue.list > .item .issue-item-icon-right {
+  min-width: 2rem;
+}
+
+.issue.list > .item .assignee {
+  position: relative;
+  top: -2px;
+}
+
+.issue.list > .item .assignee img {
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
+}
+
+.issue.list > .item .desc {
+  color: var(--color-text-light-2);
+}
+
+.issue.list > .item .desc a {
+  color: inherit;
+}
+
+.issue.list > .item .desc .time-since,
+.issue.list > .item .desc a {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.issue.list > .item .desc .waiting,
+.issue.list > .item .desc .approvals,
+.issue.list > .item .desc .rejects {
+  padding-left: 5px;
+}
+
+.issue.list > .item .desc .checklist {
+  padding-left: 5px;
+}
+
+.issue.list > .item .desc .checklist progress {
+  margin-left: 2px;
+  width: 80px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 3px;
+  vertical-align: 2px !important;
+}
+
+.issue.list > .item .desc .checklist progress::-webkit-progress-value {
+  background-color: var(--color-secondary-dark-4);
+}
+
+.issue.list > .item .desc .checklist progress::-moz-progress-bar {
+  background-color: var(--color-secondary-dark-4);
+}
+
+.issue.list > .item .desc .conflicting {
+  padding-left: 5px;
+}
+
+.issue.list > .item .desc .due-date {
+  padding-left: 5px;
+}
+
+.issue.list > .item .desc a.milestone,
+.issue.list > .item .desc a.project {
+  margin-left: 5px;
+}
+
+.issue.list > .item .desc a.ref {
+  margin-left: 8px;
+}
+
+.issue.list > .item .desc a.ref span {
+  margin-right: -4px;
+}
+
+.issue.list > .item .desc .overdue {
+  color: var(--color-red);
+}
+
+.issue.list .branches {
+  display: inline-flex;
+  padding: 0 4px;
+}
+
+.issue.list .branches .branch {
+  background-color: var(--color-secondary);
+  border-radius: 3px;
+}
+
+.issue.list .branches .truncated-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 10em;
+}
+
+.issue.list > .item + .item {
+  border-top: 1px solid var(--color-secondary);
+}

web_src/less/standalone/swagger.less → web_src/css/standalone/swagger.css

@@ -27,5 +27,5 @@ body {
 .swagger-back-link svg {
   color: inherit;
   fill: currentcolor;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }

web_src/less/_svg.less → web_src/css/svg.css

@@ -2,8 +2,8 @@
   display: inline-block;
   vertical-align: text-top;
   fill: currentcolor;
+}
 
-  .middle & {
-    vertical-align: middle;
-  }
+.middle .svg {
+  vertical-align: middle;
 }

web_src/less/themes/theme-arc-green.less → web_src/css/themes/theme-arc-green.css

@@ -1,6 +1,6 @@
-@import "../chroma/base.less";
-@import "../chroma/dark.less";
-@import "../codemirror/dark.less";
+@import "../chroma/base.css";
+@import "../chroma/dark.css";
+@import "../codemirror/dark.css";
 
 :root {
   --is-dark-theme: true;

web_src/css/themes/theme-auto.css

@@ -0,0 +1 @@
+@import "./theme-arc-green.css" (prefers-color-scheme: dark);

web_src/less/_tribute.less → web_src/css/tribute.css

@@ -1,8 +1,8 @@
 @import "tributejs/dist/tribute.css";
 
 .tribute-container {
-  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
-  border-radius: .25rem;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+  border-radius: 0.25rem;
 }
 
 .tribute-container ul {
@@ -11,12 +11,12 @@
 }
 
 .tribute-container li {
-  padding: 3px .5rem !important;
+  padding: 3px 0.5rem !important;
 }
 
 .tribute-container li span.fullname {
   font-weight: normal;
-  font-size: .8rem;
+  font-size: 0.8rem;
   margin-left: 3px;
 }
 
@@ -33,7 +33,7 @@
 
 .tribute-item .emoji,
 .tribute-item img[src*="/avatar/"] {
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }
 
 .tribute-container img {

web_src/css/user.css

@@ -0,0 +1,173 @@
+.user.profile .ui.card .header {
+  display: block;
+  font-weight: 600;
+  font-size: 1.3rem;
+  margin-top: -0.2rem;
+  line-height: 1.3rem;
+}
+
+.user.profile .ui.card .profile-avatar-name {
+  border-top: none;
+  text-align: center;
+}
+
+.user.profile .ui.card .extra.content {
+  padding: 0;
+}
+
+.user.profile .ui.card .extra.content ul {
+  margin: 0;
+  padding: 0;
+}
+
+.user.profile .ui.card .extra.content ul li {
+  padding: 10px;
+  list-style: none;
+}
+
+.user.profile .ui.card .extra.content ul li:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.user.profile .ui.card .extra.content ul li .svg {
+  margin-left: 1px;
+  margin-right: 5px;
+}
+
+.user.profile .ui.card .extra.content ul li.follow .ui.button {
+  width: 100%;
+}
+
+.user.profile .ui.card #profile-avatar {
+  background: none;
+  padding: 1rem 1rem 0.25rem;
+  justify-content: center;
+}
+
+.user.profile .ui.card #profile-avatar img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  margin: 0;
+}
+
+@media (max-width: 767px) {
+  .user.profile .ui.card #profile-avatar img {
+    width: 30vw;
+  }
+}
+
+@media (max-width: 767px) {
+  .user.profile .ui.card {
+    width: 100%;
+  }
+}
+
+.user.profile .ui.repository.list {
+  margin-top: 25px;
+}
+
+.user.profile #loading-heatmap {
+  margin-bottom: 1em;
+}
+
+.user.profile .ui.secondary.stackable.pointing.menu {
+  flex-wrap: wrap;
+}
+
+.user.followers .header.name {
+  font-size: 20px;
+  line-height: 24px;
+  vertical-align: middle;
+}
+
+.user.followers .follow .ui.button {
+  padding: 8px 15px;
+}
+
+.user.notification .svg {
+  float: left;
+  font-size: 2em;
+}
+
+.user.notification .svg.green {
+  color: var(--color-green);
+}
+
+.user.notification .svg.red {
+  color: var(--color-red);
+}
+
+.user.notification .svg.purple {
+  color: var(--color-purple);
+}
+
+.user.notification .svg.blue {
+  color: var(--color-blue);
+}
+
+.user.notification .content {
+  float: left;
+  margin-left: 7px;
+}
+
+.user.notification table form {
+  display: inline-block;
+}
+
+.user.notification table button {
+  padding: 3px 3px 3px 5px;
+}
+
+.user.notification table tr {
+  cursor: pointer;
+}
+
+.user .button.adopt,
+.user .button.delete {
+  margin-top: -15px;
+  margin-bottom: -15px;
+}
+
+.user .button.adopt .label,
+.user .button.delete .label {
+  vertical-align: middle;
+}
+
+.user.link-account:not(.icon) {
+  padding-top: 15px;
+  padding-bottom: 5px;
+}
+
+.user.settings .iconFloat {
+  float: left;
+}
+
+.user-orgs {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0;
+  margin: -3px !important;
+}
+
+.user-orgs li {
+  display: flex;
+  border-bottom: 0 !important;
+  padding: 3px !important;
+  width: 20%;
+  max-width: 60px;
+}
+
+.user-badges {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 64px);
+  gap: 2px;
+}
+
+.user-badges img {
+  object-fit: contain;
+}
+
+#notification_div .tab.segment {
+  overflow-x: auto;
+}

web_src/js/components/RepoActionView.vue

@@ -286,51 +286,54 @@ export function initRepositoryActionView() {
 
 </script>
 
-<style scoped lang="less">
-
+<style scoped>
 .action-view-body {
   display: flex;
-  height: calc(100vh - 266px); // fine tune this value to make the main view has full height
+  height: calc(100vh - 266px); /* fine tune this value to make the main view has full height */
 }
 
-// ================
-// action view header
+/* ================ */
+/* action view header */
 
 .action-view-header {
   margin: 0 20px 20px 20px;
-  .run_cancel {
-    border: none;
-    color: var(--color-red);
-    background-color: transparent;
-    outline: none;
-    cursor: pointer;
-    transition:transform 0.2s;
-  };
-  .run_approve {
-    border: none;
-    color: var(--color-green);
-    background-color: transparent;
-    outline: none;
-    cursor: pointer;
-    transition:transform 0.2s;
-  };
-  .run_cancel:hover, .run_approve:hover {
-    transform:scale(130%);
-  };
+}
+
+.action-view-header .run_cancel {
+  border: none;
+  color: var(--color-red);
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.action-view-header .run_approve {
+  border: none;
+  color: var(--color-green);
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.action-view-header .run_cancel:hover,
+.action-view-header .run_approve:hover {
+  transform: scale(130%);
 }
 
 .action-info-summary {
   font-size: 150%;
   height: 20px;
   display: flex;
+}
 
-  .action-title {
-    padding: 0 5px;
-  }
+.action-info-summary .action-title {
+  padding: 0 5px;
 }
 
-// ================
-// action view left
+/* ================ */
+/* action view left */
 
 .action-view-left {
   width: 30%;
@@ -339,51 +342,52 @@ export function initRepositoryActionView() {
   margin-left: 10px;
 }
 
-.job-group-section {
-  .job-group-summary {
-    margin: 5px 0;
-    padding: 10px;
-  }
+.job-group-section .job-group-summary {
+  margin: 5px 0;
+  padding: 10px;
+}
 
-  .job-brief-list {
-    .job-brief-item {
-      margin: 5px 0;
-      padding: 10px;
-      background: var(--color-info-bg);
-      border-radius: 5px;
-      text-decoration: none;
-      display: flex;
-      justify-items: center;
-      flex-wrap: nowrap;
-      .job-brief-rerun {
-        float: right;
-        border: none;
-        background-color: transparent;
-        outline: none;
-        cursor: pointer;
-        transition:transform 0.2s;
-      };
-      .job-brief-rerun:hover{
-        transform:scale(130%);
-      };
-      .job-brief-link {
-        flex-grow: 1;
-        display: flex;
-        span {
-          margin-right: 8px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-    .job-brief-item:hover {
-      background-color: var(--color-secondary);
-    }
-  }
+.job-group-section .job-brief-list .job-brief-item {
+  margin: 5px 0;
+  padding: 10px;
+  background: var(--color-info-bg);
+  border-radius: 5px;
+  text-decoration: none;
+  display: flex;
+  justify-items: center;
+  flex-wrap: nowrap;
+}
+
+.job-group-section .job-brief-list .job-brief-item .job-brief-rerun {
+  float: right;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.2s;
 }
 
-// ================
-// action view right
+.job-group-section .job-brief-list .job-brief-item .job-brief-rerun:hover {
+  transform: scale(130%);
+}
+
+.job-group-section .job-brief-list .job-brief-item .job-brief-link {
+  flex-grow: 1;
+  display: flex;
+}
+
+.job-group-section .job-brief-list .job-brief-item .job-brief-link span {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.job-group-section .job-brief-list .job-brief-item:hover {
+  background-color: var(--color-secondary);
+}
+
+/* ================ */
+/* action view right */
 
 .action-view-right {
   flex: 1;
@@ -391,50 +395,50 @@ export function initRepositoryActionView() {
   color: var(--color-console-fg);
   max-height: 100%;
   margin-right: 10px;
-
   display: flex;
   flex-direction: column;
 }
 
-.job-info-header {
-  .job-info-header-title {
-    font-size: 150%;
-    padding: 10px;
-  }
-  .job-info-header-detail {
-    padding: 0 10px 10px;
-    border-bottom: 1px solid var(--color-grey);
-  }
+.job-info-header .job-info-header-title {
+  font-size: 150%;
+  padding: 10px;
+}
+
+.job-info-header .job-info-header-detail {
+  padding: 0 10px 10px;
+  border-bottom: 1px solid var(--color-grey);
 }
 
 .job-step-container {
   max-height: 100%;
   overflow: auto;
+}
 
-  .job-step-summary {
-    cursor: pointer;
-    padding: 5px 10px;
-    display: flex;
-
-    .step-summary-msg {
-      flex: 1;
-    }
-    .step-summary-dur {
-      margin-left: 16px;
-    }
-  }
-  .job-step-summary:hover {
-    background-color: var(--color-black-light);
-  }
+.job-step-container .job-step-summary {
+  cursor: pointer;
+  padding: 5px 10px;
+  display: flex;
 }
-</style>
 
-<style lang="less">
-// some elements are not managed by vue, so we need to use global style
+.job-step-container .job-step-summary .step-summary-msg {
+  flex: 1;
+}
 
+.job-step-container .job-step-summary .step-summary-dur {
+  margin-left: 16px;
+}
+
+.job-step-container .job-step-summary:hover {
+  background-color: var(--color-black-light);
+}
+</style>
+
+<style>
+/* some elements are not managed by vue, so we need to use global style */
 .job-status-rotate {
   animation: job-status-rotate-keyframes 1s linear infinite;
 }
+
 @keyframes job-status-rotate-keyframes {
   100% {
     transform: rotate(360deg);
@@ -443,37 +447,44 @@ export function initRepositoryActionView() {
 
 .job-step-section {
   margin: 10px;
-  .job-step-logs {
-    font-family: monospace, monospace;
-    .job-log-line {
-      display: flex;
-      .line-num {
-        width: 48px;
-        color: var(--color-grey-light);
-        text-align: right;
-      }
-      .log-time {
-        color: var(--color-grey-light);
-        margin-left: 10px;
-        white-space: nowrap;
-      }
-      .log-msg {
-        flex: 1;
-        word-break: break-all;
-        white-space: break-spaces;
-        margin-left: 10px;
-      }
-    }
+}
+
+.job-step-section .job-step-logs {
+  font-family: monospace, monospace;
+}
 
-    // TODO: group support
-    .job-log-group {
-    }
+.job-step-section .job-step-logs .job-log-line {
+  display: flex;
+}
 
-    .job-log-group-summary {
-    }
+.job-step-section .job-step-logs .job-log-line .line-num {
+  width: 48px;
+  color: var(--color-grey-light);
+  text-align: right;
+}
+
+.job-step-section .job-step-logs .job-log-line .log-time {
+  color: var(--color-grey-light);
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.job-step-section .job-step-logs .job-log-line .log-msg {
+  flex: 1;
+  word-break: break-all;
+  white-space: break-spaces;
+  margin-left: 10px;
+}
+
+/* TODO: group support */
+
+.job-log-group {
+
+}
+.job-log-group-summary {
+
+}
+.job-log-list {
 
-    .job-log-list {
-    }
-  }
 }
 </style>

web_src/less/_admin.less

@@ -1,115 +0,0 @@
-.admin {
-  &.hooks .list {
-    > .item {
-      &:not(:first-child) {
-        border-top: 1px solid var(--color-secondary);
-        padding: .25rem 1rem;
-        margin: 12px -1rem -1rem;
-      }
-    }
-  }
-
-  .table.segment {
-    padding: 0;
-    font-size: 13px;
-    overflow-x: auto;
-
-    &:not(.striped) {
-      thead {
-        th:last-child {
-          padding-right: 5px !important;
-        }
-      }
-    }
-
-    th {
-      padding-top: 5px;
-      padding-bottom: 5px;
-    }
-
-    &:not(.select) {
-      th,
-      td {
-        &:first-of-type {
-          padding-left: 15px !important;
-        }
-      }
-    }
-
-    form tbody button[type='submit'] {
-      padding: 5px 8px;
-    }
-
-  }
-
-  .settings .button.adopt,
-  .settings .button.delete {
-    margin-top: -15px;
-    margin-bottom: -15px;
-    .label {
-      vertical-align: middle;
-    }
-  }
-
-  &.user {
-    .email {
-      max-width: 200px;
-    }
-  }
-
-  dl.admin-dl-horizontal {
-    padding: 20px;
-    margin: 0;
-
-    dd {
-      margin-left: 275px;
-      @media @mediaSm {
-        margin-left: 5%;
-      }
-    }
-
-    dt {
-      font-weight: 600;
-      float: left;
-      width: 285px;
-      clear: left;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      @media @mediaSm {
-        width: auto;
-        margin-right: .5em;
-      }
-    }
-  }
-
-  &.config {
-    #test-mail-btn {
-      margin-left: 5px;
-    }
-  }
-
-  code,
-  pre {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-
-  #notice-table {
-    .notice-description {
-      @media @mediaSm {
-        max-width: 80vw;
-      }
-      @media @mediaMd {
-        max-width: 360px;
-      }
-      @media @mediaLg {
-        max-width: 510px;
-      }
-      @media @mediaXl {
-        max-width: 640px;
-      }
-    }
-  }
-}

web_src/less/_dashboard.less

@@ -1,198 +0,0 @@
-.dashboard {
-  &.feeds,
-  &.issues {
-    .context.user.menu {
-      z-index: 101;
-      min-width: 200px;
-
-      .ui.header {
-        font-size: 1rem;
-        text-transform: none;
-      }
-    }
-
-    .filter.menu {
-      width: initial;
-
-      .item {
-        text-align: left;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .text {
-          height: 16px;
-          vertical-align: middle;
-
-          &.truncate {
-            width: 75%;
-          }
-        }
-
-        .floating.label {
-          top: 7px;
-          left: 90%;
-          width: 15%;
-
-          @media @mediaSm {
-            top: 10px;
-            left: auto;
-            width: auto;
-            right: 13px;
-          }
-        }
-      }
-
-      // Sort
-      .jump.item {
-        margin: 1px;
-        padding-right: 0;
-      }
-
-      .menu {
-        max-height: 300px;
-        overflow-x: auto;
-        right: 0 !important;
-        left: auto !important;
-      }
-
-      @media @mediaSm {
-        width: 100%;
-      }
-    }
-
-    .right.stackable.menu > .item.active {
-      color: var(--color-red);
-    }
-  }
-
-  .dashboard-repos,
-  .dashboard-orgs {
-    margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
-  }
-
-  .dashboard-navbar {
-    width: 100vw;
-    padding-left: .5rem;
-    padding-right: .5rem;
-    .org-visibility .label {
-      margin-left: 5px;
-    }
-
-    .ui.dropdown {
-      max-width: 100%;
-
-      @media @mediaSm {
-        > .menu {
-          position: static;
-        }
-      }
-    }
-  }
-}
-
-&.feeds {
-  .news {
-    li {
-      display: flex;
-      align-items: baseline;
-      margin-top: .5rem;
-      margin-bottom: .5rem;
-
-      img {
-        align-self: flex-start;
-      }
-    }
-    li > * + * {
-      margin-left: .35rem;
-    }
-
-    > .ui.grid {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .left .ui.avatar {
-      margin-top: 13px;
-    }
-
-    .time-since {
-      font-size: 13px;
-    }
-
-    .issue.title {
-      width: 80%;
-      margin: 0 0 1em;
-    }
-
-    .push.news .content ul {
-      line-height: 18px;
-      font-size: 13px;
-      list-style: none;
-      padding-left: 10px;
-
-      .text.truncate {
-        width: 80%;
-      }
-    }
-
-    .commit-id {
-      font-family: var(--fonts-monospace);
-    }
-
-    code {
-      padding: 2px 4px;
-      border-radius: 3px;
-      background-color: var(--color-markup-code-block);
-      word-break: break-all;
-    }
-
-    &:last-of-type .divider {
-      display: none !important;
-    }
-  }
-
-  .list {
-    ul {
-      list-style: none;
-      margin: 0;
-      padding-left: 0;
-
-      li {
-        &:not(:last-child) {
-          border-bottom: 1px solid var(--color-secondary);
-        }
-
-        &.private {
-          background-color: var(--color-box-body-highlight);
-        }
-
-        .repo-list-link {
-          padding: 6px 1em;
-          display: block;
-
-          .svg {
-            color: var(--color-text-light-2);
-          }
-
-          .star-num {
-            font-size: 12px;
-          }
-        }
-      }
-    }
-
-    #privateFilterCheckbox .svg {
-      color: var(--color-grey);
-      margin-right: .25rem;
-    }
-
-    .repo-owner-name-list .item-name {
-      min-width: 0;
-    }
-
-    .repo-owner-name-list .item-name svg {
-      min-width: 16px;
-    }
-  }
-}

web_src/less/_explore.less

@@ -1,93 +0,0 @@
-.explore {
-  .navbar {
-    justify-content: center;
-    margin-bottom: 15px !important;
-    background-color: var(--color-navbar) !important;
-    border-width: 1px !important;
-
-    .svg {
-      width: 16px;
-      text-align: center;
-      margin-right: 5px;
-    }
-  }
-}
-
-.ui.repository.list {
-  .item {
-    padding-bottom: 1.5rem;
-
-    &:not(:first-child) {
-      border-top: 1px solid var(--color-secondary);
-      padding-top: 1.5rem;
-    }
-
-    .ui.header {
-      font-size: 1.5rem;
-      margin-bottom: .5rem;
-
-      .name {
-        word-break: break-all;
-      }
-
-      .metas {
-        font-size: 14px;
-      }
-    }
-
-    .time {
-      font-size: 12px;
-    }
-
-    .ui.tags {
-      margin-bottom: .5rem;
-    }
-  }
-}
-
-.ui.repository.branches {
-  .info {
-    font-size: 12px;
-    color: var(--color-text-light);
-    display: flex;
-    white-space: pre;
-    .commit-message {
-      max-width: 72em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .overflow-visible {
-    overflow: visible;
-  }
-  /* fix alignment of PR popup in branches table */
-  table .ui.popup {
-    text-align: left;
-  }
-}
-
-.ui.user.list {
-  .item {
-    padding-bottom: 25px;
-    display: flex;
-
-    &:not(:first-child) {
-      border-top: 1px solid var(--color-secondary);
-      padding-top: 25px;
-    }
-
-    img.ui.avatar {
-      width: 40px;
-      height: 40px;
-      margin-right: 10px;
-    }
-
-    .description {
-      margin-top: 5px;
-
-      .svg:not(:first-child) {
-        margin-left: 5px;
-      }
-    }
-  }
-}

web_src/less/_font_i18n.less

@@ -1,130 +0,0 @@
-/* font i18n */
-:root {
-  /* customizable localized variables */
-  :lang(ja) {
-    --fonts-override: var(--fonts-default-override-ja);
-  }
-  :lang(zh-CN) {
-    --fonts-override: var(--fonts-default-override-zh-cn);
-  }
-  :lang(zh-TW) {
-    --fonts-override: var(--fonts-default-override-zh-tw);
-  }
-  :lang(zh-HK) {
-    --fonts-override: var(--fonts-default-override-zh-hk);
-  }
-  :lang(ko) {
-    --fonts-override: var(--fonts-default-override-ko);
-  }
-}
-
-[lang] {
-  font-family: var(--fonts-regular);
-}
-
-each(@fonts, {
-  @weights: .gen-weights-all(@value);
-  @locale: replace(@key, "@", "-");
-  .font-face-cjk(~"system-ui@{locale}", @weights[@light], 300);
-  .font-face-cjk(~"system-ui@{locale}", @weights[@regular], 400);
-  .font-face-cjk(~"system-ui@{locale}", @weights[@medium], 500);
-  .font-face-cjk(~"system-ui@{locale}", @weights[@bold], 700);
-  /* Safari on macOS/iOS */
-  @font-face {
-    font-family: ~"system-ui@{locale}";
-    src: local("HelveticaNeue");
-    unicode-range: U+A0;
-  }
-  /* Other browsers on macOS/iOS */
-  @supports not (-webkit-hyphens:none) {
-    @font-face {
-      font-family: ~"system-ui@{locale}";
-      src: local("HelveticaNeue");
-      unicode-range: U+20;
-    }
-  }
-  :root {
-    /* Special handling for Firefox on Windows/Linux */
-    @supports (-moz-appearance:none) {
-      --fonts-default-override@{locale}: ~"var(--fonts-proportional), system-ui@{locale}";
-    }
-    --fonts-default-override@{locale}: ~"system-ui@{locale}, var(--fonts-proportional)";
-  }
-});
-
-@fonts: {
-  @ja:
-    "HiraKakuProN-:{W3,W6}", "Hiragino Kaku Gothic ProN :{W3,W6}", "HiraginoSans-:{W2,W4,W5,W6}",
-    .shs("JP")[], .shs("J")[], .noto("JP")[], .shs("")[],
-    /* https://acetaminophen.hatenablog.com/entry/2016/02/15/225009 */
-    "Yu Gothic :{Regular,Medium,Bold}", "YuGothic :{Regular,Medium,Bold}",
-    "Droid Sans Japanese:{}", "Meiryo:{, Bold}", "MS PGothic:{}";
-  @zh-cn:
-    .pingfang("SC")[],
-    .shs("CN")[], .shs("SC")[], .noto("SC")[],
-    "HiraginoSansGB-:{W3,W6}", "Hiragino Sans GB :{W3,W6}",
-    "Microsoft YaHei:{ Light,, Bold}", "Heiti SC :{Light,Medium}", "SimHei:{}";
-  @zh-tw:
-    .pingfang("TC")[],
-    .shs("TW")[], .shs("TC")[], .noto("TC")[],
-    "HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}",
-    "Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU:{}";
-  @zh-hk:
-    .pingfang("HK")[],
-    .shs("HK")[], .shs("HC")[], .noto("HK")[], .shs("TC")[], .noto("TC")[],
-    "HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}",
-    "Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU_HKSCS:{}", "PMingLiU:{}";
-  @ko:
-    "AppleSDGothicNeo-:{Light,Regular,Medium,SemiBold}",
-    .shs("KR")[], .shs("K")[], .noto("KR")[],
-    "NanumBarunGothic:{ Light,, Bold}",
-    "Malgun Gothic:{ Semilight,, Bold}", "Nanum Gothic:{, Bold}", "Dotum:{}";
-}
-
-.noto(@suffix) { @value: "Noto Sans CJK @{suffix} ", "NotoSansCJK@{suffix}-"; }
-.shs(@suffix) { @value: replace("Source Han Sans @{suffix} ", "  ", " "), "SourceHanSans@{suffix}-"; }
-.pingfang(@suffix) { @value: "PingFang@{suffix}-:{Light,Regular,Medium,Semibold}"; }
-.font-face-cjk(@family, @src, @weight) {
-  @font-face {
-    font-family: @family;
-    src: @src;
-    font-weight: @weight;
-    unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
-  }
-}
-
-.gen-weights(@family) when (isstring(@family)) {
-  @family-str: replace(@family, ":\{.*\}$", "");
-  // apply standard style names if none is given
-  // should the font have no styles, use :{}, as in "SimHei:{}"
-  @weights-str: if(@family = @family-str, "Light,Regular,Medium,Bold", replace(@family, ".*:\{(.*)\}$", "$1"));
-  @lightest: replace(@weights-str, ",.*", "");
-  @boldest: replace(@weights-str, ".*,", "");
-  @2ndboldest: replace(@weights-str, "(?:.*,|)([^,]*),.*$", "$1");
-  @2ndlightest: if(@2ndboldest = @lightest, @lightest, replace(@weights-str, "^.*?,([^,]*).*", "$1"));
-
-  @light: local("@{family-str}@{lightest}");
-  @regular: local("@{family-str}@{2ndlightest}");
-  @medium: local("@{family-str}@{2ndboldest}");
-  @bold: local("@{family-str}@{boldest}");
-}
-.gen-weights(@family) when not (isstring(@family)) {
-  .gen-weights-all(@family);
-}
-.gen-weights(@family, @last) {
-  @this: .gen-weights(@family);
-
-  @light: @last[@light], @this[@light];
-  @regular: @last[@regular], @this[@regular];
-  @medium: @last[@medium], @this[@medium];
-  @bold: @last[@bold], @this[@bold];
-}
-.gen-weights-all(@family) when not (isstring(@family)) {
-  .gen-weights-all(@family, length(@family));
-}
-.gen-weights-all(@family, 1) when not (isstring(@family)) {
-  .gen-weights(extract(@family, 1));
-}
-.gen-weights-all(@family, @ctr) when not (isstring(@family)) and (@ctr > 1) and (@ctr <= length(@family)) {
-  .gen-weights(extract(@family, @ctr), .gen-weights-all(@family, @ctr - 1));
-}

web_src/less/_form.less

@@ -1,378 +0,0 @@
-input,
-textarea,
-.ui.input > input,
-.ui.form input:not([type]),
-.ui.form select,
-.ui.form textarea,
-.ui.form input[type="date"],
-.ui.form input[type="datetime-local"],
-.ui.form input[type="email"],
-.ui.form input[type="file"],
-.ui.form input[type="number"],
-.ui.form input[type="password"],
-.ui.form input[type="search"],
-.ui.form input[type="tel"],
-.ui.form input[type="text"],
-.ui.form input[type="time"],
-.ui.form input[type="url"],
-.ui.selection.dropdown,
-.ui.checkbox label::before,
-.ui.checkbox input:checked ~ label::before,
-.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
-  background: var(--color-input-background);
-  border-color: var(--color-input-border);
-  color: var(--color-input-text);
-}
-
-input:hover,
-textarea:hover,
-.ui.input input:hover,
-.ui.form input:not([type]):hover,
-.ui.form select:hover,
-.ui.form textarea:hover,
-.ui.form input[type="date"]:hover,
-.ui.form input[type="datetime-local"]:hover,
-.ui.form input[type="email"]:hover,
-.ui.form input[type="file"]:hover,
-.ui.form input[type="number"]:hover,
-.ui.form input[type="password"]:hover,
-.ui.form input[type="search"]:hover,
-.ui.form input[type="tel"]:hover,
-.ui.form input[type="text"]:hover,
-.ui.form input[type="time"]:hover,
-.ui.form input[type="url"]:hover,
-.ui.selection.dropdown:hover,
-.ui.checkbox label:hover::before,
-.ui.checkbox label:active::before,
-.ui.radio.checkbox label::after,
-.ui.radio.checkbox input:focus ~ label::before,
-.ui.radio.checkbox input:checked ~ label::before {
-  background: var(--color-input-background);
-  border-color: var(--color-input-border-hover);
-  color: var(--color-input-text);
-}
-
-input:focus,
-textarea:focus,
-.ui.input input:focus,
-.ui.form input:not([type]):focus,
-.ui.form select:focus,
-.ui.form textarea:focus,
-.ui.form input[type="date"]:focus,
-.ui.form input[type="datetime-local"]:focus,
-.ui.form input[type="email"]:focus,
-.ui.form input[type="file"]:focus,
-.ui.form input[type="number"]:focus,
-.ui.form input[type="password"]:focus,
-.ui.form input[type="search"]:focus,
-.ui.form input[type="tel"]:focus,
-.ui.form input[type="text"]:focus,
-.ui.form input[type="time"]:focus,
-.ui.form input[type="url"]:focus,
-.ui.selection.dropdown:focus,
-.ui.checkbox input:focus ~ label::before,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
-.ui.checkbox input:checked:focus ~ label::before,
-.ui.radio.checkbox input:focus:checked ~ label::before {
-  background: var(--color-input-background);
-  border-color: var(--color-primary);
-  color: var(--color-input-text);
-}
-
-.ui.form .field > label,
-.ui.form .inline.fields > label,
-.ui.form .inline.fields .field > label,
-.ui.form .inline.fields .field > p,
-.ui.form .inline.field > label,
-.ui.form .inline.field > p,
-.ui.checkbox label,
-.ui.checkbox + label,
-.ui.checkbox label:hover,
-.ui.checkbox + label:hover,
-.ui.checkbox input:focus ~ label,
-.ui.checkbox input:active ~ label {
-  color: var(--color-text);
-}
-
-.ui.input,
-.ui.checkbox input:focus ~ label::after,
-.ui.checkbox input:checked ~ label::after,
-.ui.checkbox label:active::after,
-.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
-.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
-.ui.checkbox input:checked:focus ~ label::after,
-.ui.disabled.checkbox label,
-.ui.checkbox input[disabled] ~ label {
-  color: var(--color-input-text);
-}
-
-.ui.radio.checkbox input:focus ~ label::after,
-.ui.radio.checkbox input:checked ~ label::after,
-.ui.radio.checkbox input:focus:checked ~ label::after {
-  background: var(--color-input-text);
-}
-
-.ui.toggle.checkbox label::before {
-  background: var(--color-input-toggle-background);
-}
-
-.ui.toggle.checkbox label,
-.ui.toggle.checkbox input:checked ~ label,
-.ui.toggle.checkbox input:focus:checked ~ label {
-  color: var(--color-text) !important;
-}
-
-.ui.toggle.checkbox input:checked ~ label::before,
-.ui.toggle.checkbox input:focus:checked ~ label::before {
-  background: var(--color-primary) !important;
-}
-
-/* match <select> padding to <input> */
-.ui.form select {
-  padding: .67857143em 1em;
-}
-
-.form {
-  .help {
-    color: var(--color-secondary-dark-5);
-    padding-bottom: .6em;
-    display: inline-block;
-  }
-}
-
-@create-page-form-input-padding: 250px !important;
-#create-page-form {
-  form {
-    margin: auto;
-
-    .ui.message {
-      text-align: center;
-    }
-
-    @media @mediaMdAndUp {
-      width: 800px !important;
-
-      .header {
-        padding-left: @create-page-form-input-padding+30px;
-      }
-
-      .inline.field > label,
-      .inline.field.captcha-field > span {
-        text-align: right;
-        width: @create-page-form-input-padding;
-        word-wrap: break-word;
-      }
-
-      .help {
-        margin-left: @create-page-form-input-padding+15px;
-      }
-
-      .optional .title {
-        margin-left: @create-page-form-input-padding;
-      }
-
-      .inline.field > input,
-      .inline.field > textarea {
-        width: 50%;
-      }
-    }
-
-    @media @mediaSm {
-      .optional .title {
-        margin-left: 15px;
-      }
-
-      .inline.field > label {
-        display: block;
-      }
-    }
-  }
-}
-
-.signin {
-  .oauth2 {
-    div {
-      display: inline-block;
-
-      p {
-        margin: 10px 5px 0 0;
-        float: left;
-      }
-    }
-
-    a {
-      margin-right: 3px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    img {
-      width: 32px;
-      height: 32px;
-
-      &.openidConnect {
-        width: auto;
-      }
-    }
-  }
-}
-
-@media @mediaMdAndUp {
-  .g-recaptcha-style,
-  .h-captcha-style {
-    margin: 0 auto !important;
-    width: 304px;
-    padding-left: 30px;
-
-    iframe {
-      border-radius: 5px !important;
-      width: 302px !important;
-      height: 76px !important;
-    }
-  }
-}
-
-@media (max-height: 575px) {
-  #rc-imageselect,
-  .g-recaptcha-style,
-  .h-captcha-style {
-    transform: scale(.77);
-    transform-origin: 0 0;
-  }
-}
-
-.user.activate,
-.user.forgot.password,
-.user.reset.password,
-.user.link-account,
-.user.signin,
-.user.signup {
-  @input-padding: 200px;
-  #create-page-form();
-
-  form {
-    width: 700px !important;
-
-    .header {
-      padding-left: 0 !important;
-      text-align: center;
-    }
-
-    .inline.field > label {
-      width: @input-padding;
-    }
-
-    .inline.field > label,
-    input {
-      @media @mediaSm {
-        width: 100% !important;
-      }
-    }
-
-    input[type="number"] {
-      -moz-appearance: textfield;
-    }
-
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-}
-
-.user.signin.webauthn-prompt {
-  margin-top: 15px;
-}
-
-.repository {
-  &.new.repo,
-  &.new.migrate,
-  &.new.fork {
-    #create-page-form();
-
-    form {
-      .dropdown .text {
-        margin-right: 0 !important;
-      }
-
-      .header {
-        padding-left: 0 !important;
-        text-align: center;
-      }
-
-      .selection.dropdown {
-        vertical-align: middle;
-        width: 50% !important;
-      }
-
-      @media @mediaSm {
-        label,
-        input,
-        .selection.dropdown {
-          width: 100% !important;
-        }
-
-        .field button,
-        .field a {
-          margin-bottom: 1em;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  &.new.repo {
-    .ui.form {
-      @media @mediaMdAndUp {
-        #auto-init {
-          margin-left: @create-page-form-input-padding+15px;
-        }
-      }
-
-      .selection.dropdown:not(.owner) {
-        width: 50% !important;
-
-        @media @mediaSm {
-          width: 100% !important;
-        }
-      }
-    }
-  }
-}
-
-.new.webhook {
-  form {
-    .help {
-      margin-left: 25px;
-    }
-  }
-
-  .events.fields {
-    .column {
-      padding-left: 40px;
-    }
-  }
-}
-
-.githook {
-  textarea {
-    font-family: var(--fonts-monospace);
-  }
-}
-
-.new.org .ui.form {
-  @media @mediaSm {
-    .field button,
-    .field a {
-      margin-bottom: 1em;
-      width: 100%;
-    }
-
-    .field input {
-      width: 100% !important;
-    }
-  }
-}

web_src/less/_home.less

@@ -1,61 +0,0 @@
-.home {
-  .logo {
-    max-width: 220px;
-  }
-
-  .hero {
-    @media @mediaSm {
-      h1 {
-        font-size: 3.5em;
-      }
-
-      h2 {
-        font-size: 2em;
-      }
-    }
-
-    @media @mediaMdAndUp {
-      h1 {
-        font-size: 5.5em;
-      }
-
-      h2 {
-        font-size: 3em;
-      }
-    }
-
-    .svg {
-      color: var(--color-green);
-      height: 40px;
-      width: 50px;
-      vertical-align: bottom;
-    }
-
-    &.header {
-      font-size: 20px;
-    }
-  }
-
-  p.large {
-    font-size: 16px;
-  }
-
-  .stackable {
-    padding-top: 30px;
-  }
-
-  a {
-    color: var(--color-green);
-  }
-}
-
-footer {
-  .ui.container .left,
-  .ui.container .right {
-    @media (max-width: 880px) {
-      display: block;
-      text-align: center;
-      float: none;
-    }
-  }
-}

web_src/less/_install.less

@@ -1,72 +0,0 @@
-.page-content.install {
-  padding-top: 45px;
-
-  form.ui.form {
-    @input-padding: 30%;
-
-    .inline.field > label {
-      text-align: right;
-      width: @input-padding;
-      padding-right: 10px;
-      margin-right: 0;
-    }
-
-    .inline.field > .ui.checkbox:first-child {
-      margin-left: @input-padding;
-      padding-left: 5px;
-      label {
-        width: auto;
-      }
-    }
-
-    .title {
-      margin-left: @input-padding;
-      padding-left: 5px;
-    }
-
-    input {
-      width: 60%;
-    }
-
-    details.optional.field {
-      &[open] {
-        border-bottom: 1px solid var(--color-secondary);
-        padding-bottom: 10px;
-
-        summary {
-          margin-bottom: 10px;
-        }
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-    }
-
-    .field {
-      text-align: left;
-
-      .help {
-        margin-left: @input-padding;
-        padding-left: 5px;
-        width: 60%;
-      }
-
-    }
-  }
-
-  .ui {
-    .reinstall-message {
-      width: 70%;
-      margin: 20px auto;
-      color: var(--color-red);
-      text-align: left;
-      font-weight: bold;
-    }
-    .reinstall-confirm {
-      width: 70%;
-      text-align: left;
-      margin: 10px auto;
-    }
-  }
-}

web_src/less/_organization.less

@@ -1,200 +0,0 @@
-.organization {
-  .head {
-    .ui.header {
-      .text {
-        vertical-align: middle;
-        font-size: 1.6rem;
-        margin-left: 15px;
-      }
-      .org-visibility .label {
-        margin-left: 5px;
-        margin-top: 5px;
-      }
-      .ui.right {
-        margin-top: 5px;
-      }
-    }
-  }
-
-  .ui.secondary.stackable.pointing.menu {
-    flex-wrap: wrap;
-    margin-top: 5px;
-    margin-bottom: 10px;
-  }
-
-  &.new.org {
-    #create-page-form();
-
-    form {
-      .header {
-        padding-left: 0 !important;
-        text-align: center;
-      }
-    }
-  }
-
-  &.options {
-    input {
-      min-width: 300px;
-    }
-  }
-
-  &.profile {
-    .org-avatar {
-      width: 100px;
-      height: 100px;
-      margin-right: 15px;
-    }
-
-    #org-info {
-      overflow-wrap: anywhere;
-
-      .ui.header {
-        display: flex;
-        align-items: center;
-        font-size: 36px;
-        margin-bottom: 0;
-        .org-visibility .label {
-          margin-left: 5px;
-          margin-top: 2px;
-        }
-      }
-
-      .desc {
-        font-size: 16px;
-        margin-bottom: 10px;
-      }
-
-      .meta {
-        .item {
-          display: inline-block;
-          margin-right: 10px;
-
-          .icon {
-            margin-right: 5px;
-          }
-        }
-      }
-    }
-
-    .ui.top.header {
-      .ui.right {
-        margin-top: 0;
-      }
-    }
-
-    .teams {
-      .item {
-        padding: 10px 15px;
-      }
-    }
-  }
-
-  &.teams,
-  &.profile {
-    .members {
-      a:hover {
-        text-decoration: none;
-      }
-
-      .ui.avatar {
-        width: 48px;
-        height: 48px;
-        margin-right: 5px;
-        margin-bottom: 5px;
-      }
-    }
-  }
-
-  &.invite {
-    #invite-box {
-      margin: 50px auto auto;
-      width: 500px !important;
-
-      #search-user-box {
-        input {
-          margin-left: 0;
-          width: 300px;
-        }
-      }
-
-      .ui.button {
-        margin-left: 5px;
-        margin-top: -3px;
-      }
-    }
-
-    .ui.avatar {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &.members {
-    .list {
-      .item {
-        margin-left: 0;
-        margin-right: 0;
-        border-bottom: 1px solid var(--color-secondary);
-
-        .ui.avatar {
-          width: 48px;
-          height: auto;
-          margin-right: 1rem;
-          align-self: flex-start;
-        }
-
-        .meta {
-          line-height: 24px;
-          word-break: break-word;
-          min-width: 2em;
-        }
-      }
-    }
-  }
-
-  &.teams {
-    .detail {
-      .item {
-        padding: 10px 15px;
-
-        &:not(:last-child) {
-          border-bottom: 1px solid var(--color-secondary);
-        }
-      }
-    }
-
-    .repositories,
-    .members {
-      .item {
-        padding: 10px 20px;
-        line-height: 32px;
-
-        &:not(:last-child) {
-          border-bottom: 1px solid var(--color-secondary);
-        }
-
-        .button {
-          padding: 9px 10px;
-        }
-      }
-    }
-
-    #add-repo-form,
-    #repo-multiple-form,
-    #add-member-form {
-      input {
-        margin-left: 0;
-      }
-
-      .ui.button {
-        margin-left: 5px;
-        margin-top: -3px;
-      }
-    }
-
-    #repo-top-segment {
-      height: 60px;
-    }
-  }
-}

web_src/less/_package.less

@@ -1,9 +0,0 @@
-.container-labels {
-  td:nth-child(1) {
-    vertical-align: top;
-  }
-
-  td:nth-child(2) {
-    overflow-wrap: anywhere;
-  }
-}

web_src/less/_review.less

@@ -1,324 +0,0 @@
-@import "variables.less";
-
-.ui.button.add-code-comment {
-  padding: 2px;
-  position: absolute;
-  margin-left: -22px;
-  z-index: 5;
-  opacity: 0;
-  transition: transform .1s ease-in-out;
-  transform: scale(1);
-  box-shadow: none !important;
-  border: none !important;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-}
-
-.lines-escape a.toggle-escape-button::before {
-  visibility: visible;
-  content: '⚠️';
-  font-family: var(--fonts-emoji);
-  color: var(--color-red);
-}
-
-.repository .diff-file-box .code-diff td.lines-escape {
-  padding-left: 0 !important;
-}
-
-.diff-file-box .lines-code:hover .ui.button.add-code-comment {
-  opacity: 1;
-}
-
-.repository .diff-file-box .code-diff .add-comment-left,
-.repository .diff-file-box .code-diff .add-comment-right,
-.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
-.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
-.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.add-comment-left.add-comment-right .ui.attached.header {
-  border: 1px solid var(--color-secondary);
-
-  &:not(.top) {
-    margin-bottom: .5em;
-  }
-}
-
-.add-comment .lines-num,
-.add-comment .lines-escape,
-.add-comment .lines-type-marker {
-  display: none;
-}
-
-.show-outdated,
-.hide-outdated {
-  &:extend(.unselectable);
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.comment-code-cloud {
-  padding: .5rem 1rem !important;
-  position: relative;
-  margin: 0 auto;
-  max-width: 1000px;
-
-  @media @mediaSm {
-    max-width: none;
-    padding: .75rem !important;
-
-    .code-comment-buttons {
-      margin: .5rem 0 .25rem !important;
-
-      .code-comment-buttons-buttons {
-        width: 100%;
-      }
-    }
-
-    .ui.buttons {
-      width: 100%;
-      margin: 0 !important;
-
-      .button {
-        flex: 1;
-      }
-    }
-  }
-
-  .comments .comment {
-    padding: 0;
-
-    @media @mediaSm {
-      display: flex;
-
-      .comment-header-right.actions .ui.basic.label {
-        display: none;
-      }
-
-      .avatar {
-        width: auto;
-        float: none;
-        margin: 0 .5rem 0 0;
-        flex-shrink: 0;
-
-        ~ .content {
-          margin-left: 1em;
-        }
-      }
-
-      img.avatar {
-        margin: 0 !important;
-      }
-
-      .comment-content {
-        margin-left: 0 !important;
-      }
-
-      .comment-container {
-        width: 100%;
-      }
-
-      &.code-comment {
-        padding: 0 0 .5rem !important;
-      }
-    }
-  }
-
-  .attached {
-    &.tab {
-      border: 0;
-      padding: 0;
-      margin: 0;
-    }
-
-    &.header {
-      padding: .1rem 1rem;
-
-      .text {
-        margin: 0;
-      }
-    }
-  }
-
-  .right.menu.options .item {
-    padding: .85714286em .442857em;
-    cursor: pointer;
-  }
-
-  .ui.active.tab {
-    padding: .5em;
-
-    &.markup {
-      padding: 1em;
-      min-height: 168px;
-    }
-  }
-
-  .ui.tabular.menu {
-    margin: .5em;
-  }
-
-  .footer {
-    border-top: 1px solid var(--color-secondary);
-    padding: 10px 0;
-
-    .markup-info {
-      display: inline-block;
-      margin: 5px 0;
-      font-size: 12px;
-      color: var(--color-text-light);
-    }
-
-    .ui.right.floated {
-      padding-top: 6px;
-    }
-
-    &::after {
-      clear: both;
-      content: "";
-      display: block;
-    }
-  }
-
-  @media @mediaSm {
-    .button {
-      width: 100%;
-      margin: 0 !important;
-      margin-bottom: .75rem !important;
-    }
-  }
-}
-
-.diff-file-body .comment-form {
-  margin: 0 0 0 3em;
-}
-
-.file-comment {
-  color: var(--color-text);
-}
-
-a.blob-excerpt {
-  color: var(--color-text-light);
-  height: 28px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  background: var(--color-expand-button);
-}
-
-a.blob-excerpt:hover {
-  background: var(--color-primary);
-  color: var(--color-primary-contrast);
-}
-
-// See the comment of createCommentEasyMDE() for the review editor
-// EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code
-.review-box-panel .CodeMirror-scroll {
-  min-height: 80px;
-  max-height: calc(100vh - 360px);
-}
-
-@media @mediaSm {
-  .review-box-panel .CodeMirror-scroll {
-    max-width: calc(100vw - 70px);
-  }
-}
-
-@media @mediaMd {
-  .review-box-panel .CodeMirror-scroll {
-    max-width: 700px;
-  }
-}
-
-@media @mediaLg {
-  .review-box-panel .CodeMirror-scroll {
-    max-width: 800px;
-  }
-}
-
-@media @mediaXl {
-  .review-box-panel .CodeMirror-scroll {
-    max-width: 900px;
-  }
-}
-
-#review-box {
-  position: relative;
-}
-
-.review-box-panel {
-  position: absolute;
-  min-width: max-content;
-  top: 45px;
-  right: -5px;
-  z-index: 2;
-}
-
-#review-box .review-comments-counter {
-  background-color: var(--color-primary-light-4);
-  color: var(--color-primary-contrast);
-}
-
-#review-box:hover .review-comments-counter {
-  background-color: var(--color-primary-light-5);
-}
-
-#review-box .review-comments-counter[data-pending-comment-number="0"] {
-  display: none;
-}
-
-.pull.files.diff [id] {
-  scroll-margin-top: 99px;
-
-  @media @mediaMdAndDown {
-    scroll-margin-top: 130px;
-  }
-}
-
-.changed-since-last-review {
-  border: 1px var(--color-accent) solid;
-  background-color: var(--color-small-accent);
-  border-radius: 15px;
-  padding: 4px 8px;
-  margin: -8px 0; // just like other buttons in the diff box header
-  font-size: .857rem; // just like .ui.tiny.button
-}
-
-.viewed-file-form {
-  display: flex;
-  align-items: center;
-  border: 1px solid transparent;
-  padding: 4px 8px;
-  margin: -8px 0; // just like other buttons in the diff box header
-  border-radius: .285rem; // just like .ui.tiny.button
-  font-size: .857rem; // just like .ui.tiny.button
-}
-
-.viewed-file-form input {
-  margin-right: 4px;
-}
-
-.viewed-file-checked-form {
-  background-color: var(--color-small-accent);
-  border-color: var(--color-accent);
-}
-
-#viewed-files-summary {
-  width: 72px;
-  height: 10px;
-}
-
-.diff-file-box {
-  border-radius: .285rem; // Just like ui.top.attached.header
-}
-
-.diff-file-box:target {
-  box-shadow: 0 0 0 3px var(--color-accent);
-}

web_src/less/_runner.less

@@ -1,45 +0,0 @@
-@import "variables.less";
-
-.runner-container {
-  padding-bottom: 30px;
-  .runner-ops > a {
-    margin-left: .5em;
-  }
-  .runner-ops-delete {
-    color: var(--color-red-light);
-  }
-  .runner-basic-info .gt-dib {
-    margin-right: 1em;
-  }
-  .runner-status-online {
-    .ui.label;
-    background-color: var(--color-green);
-    color: var(--color-white);
-  }
-  .runner-new-text {
-    color: var(--color-white);
-  }
-  #runner-new:hover .runner-new-text {
-    color: var(--color-white) !important;
-  }
-  .runner-new-menu {
-    width: 300px;
-  }
-  .task-status-success {
-    background-color: var(--color-green);
-    color: var(--color-white);
-  }
-  .task-status-failure {
-    background-color: var(--color-red-light);
-    color: var(--color-white);
-  }
-  .task-status-running {
-    background-color: var(--color-blue);
-    color: var(--color-white);
-  }
-  .task-status-cancelled,
-  .task-status-blocked {
-    background-color: var(--color-yellow);
-    color: var(--color-white);
-  }
-}

web_src/less/_user.less

@@ -1,183 +0,0 @@
-@import "variables.less";
-
-.user {
-  &.profile {
-    .ui.card {
-      .header {
-        display: block;
-        font-weight: 600;
-        font-size: 1.3rem;
-        margin-top: -.2rem;
-        line-height: 1.3rem;
-      }
-
-      .profile-avatar-name {
-        border-top: none;
-        text-align: center;
-      }
-
-      .extra.content {
-        padding: 0;
-
-        ul {
-          margin: 0;
-          padding: 0;
-
-          li {
-            padding: 10px;
-            list-style: none;
-
-            &:not(:last-child) {
-              border-bottom: 1px solid var(--color-secondary);
-            }
-
-            .svg {
-              margin-left: 1px;
-              margin-right: 5px;
-            }
-
-            &.follow {
-              .ui.button {
-                width: 100%;
-              }
-            }
-          }
-        }
-      }
-      #profile-avatar {
-        background: none;
-        padding: 1rem 1rem .25rem;
-        justify-content: center;
-        img {
-          width: 100%;
-          height: auto;
-          object-fit: contain;
-          margin: 0;
-          @media @mediaSm {
-            width: 30vw;
-          }
-        }
-
-      }
-
-      @media @mediaSm {
-        width: 100%;
-      }
-    }
-
-    .ui.repository.list {
-      margin-top: 25px;
-    }
-
-    #loading-heatmap {
-      margin-bottom: 1em;
-    }
-    .ui.secondary.stackable.pointing.menu {
-      flex-wrap: wrap;
-    }
-  }
-
-  &.followers {
-    .header.name {
-      font-size: 20px;
-      line-height: 24px;
-      vertical-align: middle;
-    }
-
-    .follow {
-      .ui.button {
-        padding: 8px 15px;
-      }
-    }
-  }
-
-  &.notification {
-    .svg {
-      float: left;
-      font-size: 2em;
-
-      &.green {
-        color: var(--color-green);
-      }
-
-      &.red {
-        color: var(--color-red);
-      }
-
-      &.purple {
-        color: var(--color-purple);
-      }
-
-      &.blue {
-        color: var(--color-blue);
-      }
-    }
-
-    .content {
-      float: left;
-      margin-left: 7px;
-    }
-
-    table {
-      form {
-        display: inline-block;
-      }
-
-      button {
-        padding: 3px 3px 3px 5px;
-      }
-
-      tr {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .button.adopt,
-  .button.delete {
-    margin-top: -15px;
-    margin-bottom: -15px;
-    .label {
-      vertical-align: middle;
-    }
-  }
-
-  &.link-account:not(.icon) {
-    padding-top: 15px;
-    padding-bottom: 5px;
-  }
-
-  &.settings {
-    .iconFloat {
-      float: left;
-    }
-  }
-}
-
-.user-orgs {
-  display: flex;
-  flex-flow: row wrap;
-  padding: 0;
-  margin: -3px !important;
-
-  li {
-    display: flex;
-    border-bottom: 0 !important;
-    padding: 3px !important;
-    width: 20%;
-    max-width: 60px;
-  }
-}
-
-.user-badges {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 64px);
-  gap: 2px;
-}
-
-.user-badges img {
-  object-fit: contain;
-}
-#notification_div .tab.segment {
-  overflow-x: auto;
-}

web_src/less/chroma/chroma-style-diff.go

@@ -1,79 +0,0 @@
-// Copyright 2023 The Gitea Authors. All rights reserved.
-// SPDX-License-Identifier: MIT
-
-//go:build ignore
-
-/*
-This tool is used to compare the CSS names in a chroma builtin styles with the Gitea theme CSS names.
-
-It outputs the difference between the two sets of CSS names, eg:
-
-```
-CSS names not in builtin:
-.chroma .ln
-----
-Builtin CSS names not in file:
-.chroma .vm
-```
-
-Developers could use this tool to re-sync the CSS names in the Gitea theme.
-*/
-
-package main
-
-import (
-	"os"
-	"regexp"
-	"strings"
-
-	"github.com/alecthomas/chroma/v2"
-)
-
-func main() {
-	if len(os.Args) != 2 {
-		println("Usage: chroma-style-diff css-or-less-file")
-		os.Exit(1)
-	}
-
-	data, err := os.ReadFile(os.Args[1])
-	if err != nil {
-		println(err.Error())
-		os.Exit(1)
-	}
-
-	content := string(data)
-
-	// a simple CSS parser to collect CSS names
-	content = regexp.MustCompile("//.*\r?\n").ReplaceAllString(content, "\n")
-	content = regexp.MustCompile("/\\*.*?\\*/").ReplaceAllString(content, "")
-	matches := regexp.MustCompile("\\s*([-.#:\\w\\s]+)\\s*\\{[^}]*}").FindAllStringSubmatch(content, -1)
-
-	cssNames := map[string]bool{}
-	for _, matchGroup := range matches {
-		cssName := strings.TrimSpace(matchGroup[1])
-		cssNames[cssName] = true
-	}
-
-	// collect Chroma builtin CSS names
-	builtin := map[string]bool{}
-	for tokenType, cssName := range chroma.StandardTypes {
-		if tokenType > 0 && cssName != "" {
-			builtin[".chroma ."+cssName] = true
-		}
-	}
-
-	// show the diff
-	println("CSS names not in builtin:")
-	for cssName := range cssNames {
-		if !builtin[cssName] {
-			println(cssName)
-		}
-	}
-	println("----")
-	println("Builtin CSS names not in file:")
-	for cssName := range builtin {
-		if !cssNames[cssName] {
-			println(cssName)
-		}
-	}
-}

web_src/less/codemirror/dark.less

@@ -1,89 +0,0 @@
-.CodeMirror {
-  &.cm-s-default,
-  &.cm-s-paper {
-    .cm-property {
-      color: #a0cc75;
-    }
-
-    .cm-header {
-      color: #9daccc;
-    }
-
-    .cm-quote {
-      color: #009900;
-    }
-
-    .cm-keyword {
-      color: #cc8a61;
-    }
-
-    .cm-atom {
-      color: #ef5e77;
-    }
-
-    .cm-number {
-      color: #ff5656;
-    }
-
-    .cm-def {
-      color: #e4e4e4;
-    }
-
-    .cm-variable-2 {
-      color: #00bdbf;
-    }
-
-    .cm-variable-3 {
-      color: #008855;
-    }
-
-    .cm-comment {
-      color: #8e9ab3;
-    }
-
-    .cm-string {
-      color: #a77272;
-    }
-
-    .cm-string-2 {
-      color: #ff5500;
-    }
-
-    .cm-meta,
-    .cm-qualifier {
-      color: #ffb176;
-    }
-
-    .cm-builtin {
-      color: #b7c951;
-    }
-
-    .cm-bracket {
-      color: #999977;
-    }
-
-    .cm-tag {
-      color: #f1d273;
-    }
-
-    .cm-attribute {
-      color: #bfcc70;
-    }
-
-    .cm-hr {
-      color: #999999;
-    }
-
-    .cm-url {
-      color: #c5cfd0;
-    }
-
-    .cm-link {
-      color: #d8c792;
-    }
-
-    .cm-error {
-      color: #dbdbeb;
-    }
-  }
-}

web_src/less/features/gitgraph.less

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

web_src/less/features/heatmap.less

@@ -1,67 +0,0 @@
-#user-heatmap {
-  width: 100%;
-  font-size: 9px;
-  position: relative;
-  min-height: 125px;
-
-  text {
-    fill: currentcolor !important;
-  }
-
-  // for the "Less" and "More" legend
-  .vch__legend .vch__legend {
-    display: flex;
-    font-size: 11px;
-    align-items: center;
-    justify-content: right;
-  }
-  .vch__legend .vch__legend div:first-child,
-  .vch__legend .vch__legend div:last-child {
-    display: inline-block;
-    padding: 0 5px;
-  }
-
-  // move the "? contributions in the last ? months" text from top to bottom
-  .total-contributions {
-    font-size: 11px;
-    position: absolute;
-    bottom: 0;
-    left: 25px;
-  }
-
-  @media @mediaLgAndDown {
-    & {
-      min-height: 105px;
-    }
-    .total-contributions {
-      left: 21px;
-    }
-  }
-
-  @media (max-width: 1000px) {
-    & {
-      min-height: 80px;
-    }
-    .total-contributions {
-      font-size: 10px;
-      left: 17px;
-      bottom: -4px;
-    }
-  }
-}
-
-.user.profile #user-heatmap {
-  min-height: 135px;
-}
-
-@media @mediaLgAndDown {
-  .user.profile #user-heatmap {
-    min-height: 115px;
-  }
-}
-
-@media (max-width: 1000px) {
-  .user.profile #user-heatmap {
-    min-height: 90px;
-  }
-}

web_src/less/features/imagediff.less

@@ -1,105 +0,0 @@
-.image-diff-container {
-  text-align: center;
-  padding: 1em 0;
-
-  img {
-    border: 1px solid var(--color-primary-light-7);
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
-  }
-
-  .before-container {
-    border: 1px solid var(--color-red);
-    display: block;
-  }
-
-  .after-container {
-    border: 1px solid var(--color-green);
-    display: block;
-  }
-
-  .diff-side-by-side {
-    .side {
-      display: inline-block;
-      line-height: 0;
-      vertical-align: top;
-      margin: 0 1em;
-
-      .side-header {
-        font-weight: bold;
-      }
-    }
-  }
-
-  .diff-swipe {
-    margin: auto;
-
-    .swipe-frame {
-      position: absolute;
-
-      .before-container {
-        position: absolute;
-      }
-
-      .swipe-container {
-        position: absolute;
-        right: 0;
-        display: block;
-        border-left: 2px solid var(--color-secondary-dark-8);
-        height: 100%;
-        overflow: hidden;
-
-        .after-container {
-          position: absolute;
-          right: 0;
-        }
-      }
-
-      .swipe-bar {
-        position: absolute;
-        height: 100%;
-        top: 0;
-        left: 0;
-
-        .handle {
-          background: var(--color-secondary-dark-8);
-          left: -5px;
-          height: 12px;
-          width: 12px;
-          position: absolute;
-          transform: rotate(45deg);
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-
-        .top-handle {
-          top: -12px;
-        }
-
-        .bottom-handle {
-          bottom: -14px;
-        }
-      }
-    }
-  }
-
-  .diff-overlay {
-    margin: 0 auto;
-
-    .overlay-frame {
-      margin: 0 auto;
-      position: relative;
-    }
-
-    .before-container,
-    .after-container {
-      position: absolute;
-    }
-
-    input {
-      max-width: 300px;
-    }
-  }
-}

web_src/less/index.less

@@ -1,42 +0,0 @@
-@import "font-awesome/css/font-awesome.css";
-
-@import "./variables.less";
-@import "./animations.less";
-@import "./shared/issuelist.less";
-@import "./features/dropzone.less";
-@import "./features/gitgraph.less";
-@import "./features/heatmap.less";
-@import "./features/imagediff.less";
-@import "./features/codeeditor.less";
-@import "./features/projects.less";
-@import "./modules/tippy.less";
-@import "./markup/content.less";
-@import "./markup/codecopy.less";
-@import "./code/linebutton.less";
-@import "./markup/asciicast.less";
-
-@import "./chroma/base.less";
-@import "./chroma/light.less";
-@import "./codemirror/base.less";
-@import "./codemirror/light.less";
-@import "./console/console.less";
-
-@import "_svg";
-@import "_tribute";
-@import "_font_i18n";
-@import "_base";
-@import "_home";
-@import "_install";
-@import "_form";
-@import "_repository";
-@import "_editor";
-@import "_organization";
-@import "_user";
-@import "_dashboard";
-@import "_admin";
-@import "_explore";
-@import "_review";
-@import "_package";
-@import "_runner";
-
-@import "./helpers.less";

web_src/less/markup/content.less

@@ -1,559 +0,0 @@
-.markup {
-  overflow: hidden;
-  font-size: 16px;
-  line-height: 1.5 !important;
-  word-wrap: break-word;
-
-  &.ui.segment {
-    padding: 3em;
-  }
-
-  &.file-view {
-    padding: 2em !important;
-  }
-
-  > *:first-child {
-    margin-top: 0 !important;
-  }
-
-  > *:last-child {
-    margin-bottom: 0 !important;
-  }
-
-  a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  .absent {
-    color: var(--color-red);
-  }
-
-  .anchor {
-    padding-right: 4px;
-    margin-left: -20px;
-    line-height: 1;
-    color: inherit;
-  }
-
-  .anchor .svg {
-    vertical-align: middle;
-  }
-
-  .anchor:focus {
-    outline: none;
-  }
-
-  h1 .anchor .svg,
-  h2 .anchor .svg,
-  h3 .anchor .svg,
-  h4 .anchor .svg,
-  h5 .anchor .svg,
-  h6 .anchor .svg {
-    visibility: hidden;
-  }
-
-  h1:hover .anchor .svg,
-  h2:hover .anchor .svg,
-  h3:hover .anchor .svg,
-  h4:hover .anchor .svg,
-  h5:hover .anchor .svg,
-  h6:hover .anchor .svg {
-    visibility: visible;
-  }
-
-  h2 .anchor .svg,
-  h3 .anchor .svg,
-  h4 .anchor .svg {
-    position: relative;
-    top: -2px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-  }
-
-  h1 tt,
-  h1 code,
-  h2 tt,
-  h2 code,
-  h3 tt,
-  h3 code,
-  h4 tt,
-  h4 code,
-  h5 tt,
-  h5 code,
-  h6 tt,
-  h6 code {
-    font-size: inherit;
-  }
-
-  h1 {
-    padding-bottom: .3em;
-    font-size: 2em;
-    border-bottom: 1px solid var(--color-secondary);
-  }
-
-  h2 {
-    padding-bottom: .3em;
-    font-size: 1.5em;
-    border-bottom: 1px solid var(--color-secondary);
-  }
-
-  h3 {
-    font-size: 1.25em;
-  }
-
-  h4 {
-    font-size: 1em;
-  }
-
-  h5 {
-    font-size: .875em;
-  }
-
-  h6 {
-    font-size: .85em;
-    color: var(--color-text-light-2);
-  }
-
-  p,
-  blockquote,
-  details,
-  ul,
-  ol,
-  dl,
-  table,
-  pre {
-    margin-top: 0;
-    margin-bottom: 16px;
-  }
-
-  hr {
-    height: 4px;
-    padding: 0;
-    margin: 16px 0;
-    background-color: var(--color-secondary);
-    border: 0;
-  }
-
-  ul,
-  ol {
-    padding-left: 2em;
-  }
-
-  ul.no-list,
-  ol.no-list {
-    padding: 0;
-    list-style-type: none;
-  }
-
-  .task-list-item {
-    list-style-type: none;
-    position: relative;
-    line-height: 1.5rem;
-    min-height: 1.5rem; // to render a checkbox list without content `- [ ]`, we need this min-height to make sure the <li> can be visible
-
-    input[type="checkbox"] {
-      position: absolute;
-      top: .25em;
-      left: -1.6em;
-    }
-
-    p {
-      line-height: 1.5rem;
-    }
-  }
-
-  .task-list-item + .task-list-item {
-    margin-top: 3px;
-  }
-
-  input[type="checkbox"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    position: relative;
-    border: 1px solid var(--color-secondary);
-    border-radius: 2px;
-    background: var(--color-input-background);
-    height: 14px;
-    width: 14px;
-    opacity: 1 !important; // override fomantic on edit preview
-    pointer-events: auto !important; // override fomantic on edit preview
-    vertical-align: middle !important; // override fomantic on edit preview
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-
-  input[type="checkbox"]:not([disabled]):hover,
-  input[type="checkbox"]:not([disabled]):active {
-    border-color: var(--color-primary);
-  }
-
-  input[type="checkbox"]::after {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    pointer-events: none;
-    background: var(--color-text);
-    mask-size: cover;
-    -webkit-mask-size: cover;
-  }
-
-  input[type="checkbox"]:checked::after {
-    content: "";
-    mask-image: var(--checkbox-mask-checked);
-    -webkit-mask-image: var(--checkbox-mask-checked);
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-
-  input[type="checkbox"]:indeterminate::after {
-    content: "";
-    mask-image: var(--checkbox-mask-indeterminate);
-    -webkit-mask-image: var(--checkbox-mask-indeterminate);
-  }
-
-  ul ul,
-  ul ol,
-  ol ol,
-  ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  ol ol,
-  ul ol {
-    list-style-type: lower-roman;
-  }
-
-  li > p {
-    margin-top: 16px;
-  }
-
-  li + li {
-    margin-top: .25em;
-  }
-
-  dl {
-    padding: 0;
-  }
-
-  dl dt {
-    padding: 0;
-    margin-top: 16px;
-    font-size: 1em;
-    font-style: italic;
-    font-weight: 600;
-  }
-
-  dl dd {
-    padding: 0 16px;
-    margin-bottom: 16px;
-  }
-
-  blockquote {
-    margin-left: 0;
-    padding: 0 15px;
-    color: var(--color-text-light-2);
-    border-left: 4px solid var(--color-secondary);
-  }
-
-  blockquote > :first-child {
-    margin-top: 0;
-  }
-
-  blockquote > :last-child {
-    margin-bottom: 0;
-  }
-
-  table {
-    display: block;
-    width: 100%;
-    width: max-content;
-    max-width: 100%;
-    overflow: auto;
-  }
-
-  table th {
-    font-weight: 600;
-  }
-
-  table th,
-  table td {
-    padding: 6px 13px !important;
-    border: 1px solid var(--color-secondary) !important;
-  }
-
-  table tr {
-    border-top: 1px solid var(--color-secondary);
-  }
-
-  table tr:nth-child(2n) {
-    background-color: var(--color-markup-table-row);
-  }
-
-  img {
-    max-width: 100%;
-    box-sizing: initial;
-  }
-
-  img[align="right"] {
-    padding-left: 20px;
-  }
-
-  img[align="left"] {
-    padding-right: 20px;
-  }
-
-  .emoji {
-    max-width: none;
-    vertical-align: text-top;
-  }
-
-  span.frame {
-    display: block;
-    overflow: hidden;
-  }
-
-  span.frame > span {
-    display: block;
-    float: left;
-    width: auto;
-    padding: 7px;
-    margin: 13px 0 0;
-    overflow: hidden;
-    border: 1px solid var(--color-secondary);
-  }
-
-  span.frame span img {
-    display: block;
-    float: left;
-  }
-
-  span.frame span span {
-    display: block;
-    padding: 5px 0 0;
-    clear: both;
-    color: var(--color-text);
-  }
-
-  span.align-center {
-    display: block;
-    overflow: hidden;
-    clear: both;
-  }
-
-  span.align-center > span {
-    display: block;
-    margin: 13px auto 0;
-    overflow: hidden;
-    text-align: center;
-  }
-
-  span.align-center span img {
-    margin: 0 auto;
-    text-align: center;
-  }
-
-  span.align-right {
-    display: block;
-    overflow: hidden;
-    clear: both;
-  }
-
-  span.align-right > span {
-    display: block;
-    margin: 13px 0 0;
-    overflow: hidden;
-    text-align: right;
-  }
-
-  span.align-right span img {
-    margin: 0;
-    text-align: right;
-  }
-
-  span.float-left {
-    display: block;
-    float: left;
-    margin-right: 13px;
-    overflow: hidden;
-  }
-
-  span.float-left span {
-    margin: 13px 0 0;
-  }
-
-  span.float-right {
-    display: block;
-    float: right;
-    margin-left: 13px;
-    overflow: hidden;
-  }
-
-  span.float-right > span {
-    display: block;
-    margin: 13px auto 0;
-    overflow: hidden;
-    text-align: right;
-  }
-
-  code,
-  tt {
-    padding: .2em .4em;
-    margin: 0;
-    font-size: 85%;
-    white-space: break-spaces;
-    background-color: var(--color-markup-code-block);
-    border-radius: 4px;
-  }
-
-  code br,
-  tt br {
-    display: none;
-  }
-
-  del code {
-    text-decoration: inherit;
-  }
-
-  pre > code {
-    padding: 0;
-    margin: 0;
-    font-size: 100%;
-    white-space: pre-wrap;
-    word-break: break-all;
-    overflow-wrap: break-word;
-    background: transparent;
-    border: 0;
-  }
-
-  .highlight {
-    margin-bottom: 16px;
-  }
-
-  .highlight pre,
-  pre {
-    padding: 16px;
-    font-size: 85%;
-    line-height: 1.45;
-    background-color: var(--color-markup-code-block);
-    border-radius: 4px;
-  }
-
-  .highlight pre {
-    margin-bottom: 0;
-    word-break: normal;
-  }
-
-  pre {
-    word-wrap: normal;
-  }
-
-  pre code,
-  pre tt {
-    display: inline;
-    max-width: initial;
-    padding: 0;
-    margin: 0;
-    overflow: initial;
-    line-height: inherit;
-    word-wrap: normal;
-    background-color: transparent;
-    border: 0;
-  }
-
-  pre code::before,
-  pre code::after,
-  pre tt::before,
-  pre tt::after {
-    content: normal;
-  }
-
-  kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: var(--color-text-light);
-    vertical-align: middle;
-    background-color: var(--color-markup-code-block);
-    border: 1px solid var(--color-secondary);
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 var(--color-secondary);
-  }
-
-  .ui.list .list,
-  ol.ui.list ol,
-  ul.ui.list ul {
-    padding-left: 2em;
-  }
-}
-
-.repository.wiki.revisions {
-  .ui.container > .ui.stackable.grid {
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-
-    > .header {
-      margin-top: 0;
-
-      .sub.header {
-        padding-left: 52px;
-        word-break: break-word;
-      }
-    }
-  }
-}
-
-.file-revisions-btn {
-  display: block;
-  float: left;
-  margin-bottom: 2px !important;
-  padding: 11px !important;
-  margin-right: 10px !important;
-
-  i {
-    &:extend(.unselectable);
-  }
-}
-
-.markup-render {
-  display: block;
-  border: none;
-  width: 100%;
-  height: var(--height-loading); // actual height is set in JS after loading
-  overflow: hidden;
-  color-scheme: normal; // match the value inside the iframe to allow it to become transparent
-}
-
-.markup-block-error {
-  border: 1px solid var(--color-error-border) !important;
-  margin-bottom: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  box-shadow: none !important;
-  font-size: 85% !important;
-  white-space: pre-wrap !important;
-  padding: .5rem 1rem !important;
-  text-align: left !important;
-}
-
-.markup-block-error + pre {
-  border-top: none !important;
-  margin-top: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-}

web_src/less/shared/issuelist.less

@@ -1,167 +0,0 @@
-.issue.list {
-  list-style: none;
-  margin-top: 1rem;
-
-  a:not(.label):hover {
-    color: var(--color-primary) !important;
-  }
-
-  > .item {
-    .issue-checkbox {
-      margin-top: 1px;
-    }
-
-    .issue-item-icon svg {
-      margin-right: .75rem;
-      margin-top: 1px;
-    }
-
-    .issue-item-icons-right > * + * {
-      margin-left: .5rem;
-    }
-
-    .issue-item-main {
-      width: 100%;
-    }
-    
-    .action-item-main {
-      width: 80%;
-    }
-
-    .issue-item-right {
-      width: 15%;
-    }
-
-    .issue-item-top-row {
-      max-width: 100%;
-      color: var(--color-text);
-      font-size: 16px;
-      min-width: 0;
-      font-weight: 600;
-      a.index {
-        max-width: fit-content;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        word-break:break-all;
-      }
-    }
-
-    .labels-list {
-      position: relative;
-      top: -1.5px;
-    }
-
-    .issue-item-bottom-row {
-      font-size: 13px;
-    }
-
-    .title {
-      color: var(--color-text);
-      word-break: break-word;
-    }
-
-    .issue-item-icon-right {
-      min-width: 2rem;
-    }
-
-    .assignee {
-      position: relative;
-      top: -2px;
-    }
-
-    .assignee img {
-      width: 20px;
-      height: 20px;
-      margin-right: 2px;
-    }
-
-    .desc {
-      color: var(--color-text-light-2);
-
-      a {
-        color: inherit;
-      }
-
-      .time-since,
-      a {
-        margin-left: .25rem;
-        margin-right: .25rem;
-      }
-
-      .waiting,
-      .approvals,
-      .rejects {
-        padding-left: 5px;
-      }
-
-      .checklist {
-        padding-left: 5px;
-
-        progress {
-          margin-left: 2px;
-          width: 80px;
-          height: 6px;
-          display: inline-block;
-          border-radius: 3px;
-          vertical-align: 2px !important;
-        }
-
-        progress::-webkit-progress-value {
-          background-color: var(--color-secondary-dark-4);
-        }
-
-        progress::-moz-progress-bar {
-          background-color: var(--color-secondary-dark-4);
-        }
-      }
-
-      .conflicting {
-        padding-left: 5px;
-      }
-
-      .due-date {
-        padding-left: 5px;
-      }
-
-      a.milestone,
-      a.project {
-        margin-left: 5px;
-      }
-
-      a.ref {
-        margin-left: 8px;
-
-        span {
-          margin-right: -4px;
-        }
-      }
-
-      .overdue {
-        color: var(--color-red);
-      }
-    }
-  }
-
-  .branches {
-    display: inline-flex;
-    padding: 0 4px;
-
-    .branch {
-      background-color: var(--color-secondary);
-      border-radius: 3px;
-    }
-
-    .truncated-name {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 10em;
-    }
-  }
-
-  > .item + .item {
-    border-top: 1px solid var(--color-secondary);
-  }
-}

web_src/less/themes/theme-auto.less

@@ -1,3 +0,0 @@
-@media (prefers-color-scheme: dark) {
-  @import "theme-arc-green.less";
-}

web_src/less/variables.less

@@ -1,14 +0,0 @@
-// here a standard set of media queries is defined, that is compatible with the
-// responsive grid used in fomantic css. As there only is a precompiled build
-// of fomantic checked in (since 946bbbe), we can't use their less variables
-// here, but these breakpoints shouldn't change in the foreseeable future.
-
-@mediaMdAndUp:   ~"(min-width: 768px)";
-@mediaMdAndDown: ~"(max-width: 991px)";
-@mediaLgAndUp:   ~"(min-width: 992px)";
-@mediaLgAndDown: ~"(max-width: 1200px)";
-
-@mediaSm: ~"(max-width: 767px)";
-@mediaMd: @mediaMdAndUp and @mediaMdAndDown;
-@mediaLg: @mediaLgAndUp and @mediaLgAndDown;
-@mediaXl: ~"(min-width: 1201px)";

webpack.config.js

@@ -21,7 +21,7 @@ const glob = (pattern) => fastGlob.sync(pattern, {
 });
 
 const themes = {};
-for (const path of glob('web_src/less/themes/*.less')) {
+for (const path of glob('web_src/css/themes/*.css')) {
   themes[parse(path).name] = [path];
 }
 
@@ -57,14 +57,14 @@ export default {
       fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
       fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
       fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
-      fileURLToPath(new URL('web_src/less/index.less', import.meta.url)),
+      fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
     ],
     webcomponents: [
       fileURLToPath(new URL('web_src/js/webcomponents/GiteaOriginUrl.js', import.meta.url)),
     ],
     swagger: [
       fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
-      fileURLToPath(new URL('web_src/less/standalone/swagger.less', import.meta.url)),
+      fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),
     ],
     serviceworker: [
       fileURLToPath(new URL('web_src/js/serviceworker.js', import.meta.url)),
@@ -136,7 +136,7 @@ export default {
         ],
       },
       {
-        test: /.css$/i,
+        test: /\.css$/i,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -151,29 +151,6 @@ export default {
           },
         ],
       },
-      {
-        test: /.less$/i,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              importLoaders: 1,
-              url: {filter: filterCssImport},
-              import: {filter: filterCssImport},
-            },
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
       {
         test: /\.svg$/,
         include: fileURLToPath(new URL('public/img/svg', import.meta.url)),