2025-07-18 00:01:32 -04:00
80 changed files with 4264 additions and 8340 deletions
--- a/.stylelintrc.yaml
+++ b/.stylelintrc.yaml
@ -5,6 +5,8 @@ ignoreFiles:
  - "**/*.go"
 overrides:
  - files: ["**/*.less"]
    customSyntax: postcss-less
  - files: ["**/chroma/*", "**/codemirror/*", "**/standalone/*", "**/console/*"]
    rules:
      scale-unlimited/declaration-strict-value: null
--- a/6
+++ b/6
@ -105,7 +105,7 @@ GO_TEST_PACKAGES ?= $(filter-out $(shell $(GO) list code.gitea.io/gitea/models/m
 FOMANTIC_WORK_DIR := web_src/fomantic
-WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
+WEBPACK_SOURCES := $(shell find web_src/js web_src/less -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/css
+WEB_DIRS := web_src/js web_src/less
 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)
@ -341,7 +341,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/css
+	npx stylelint --color --max-warnings=0 web_src/less
 	npx spectral lint -q -F hint $(SWAGGER_SPEC)
 	npx markdownlint docs *.md
--- a/assets/go-licenses.json
+++ b/assets/go-licenses.json
--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/docs/content/doc/advanced/customizing-gitea.en-us.md
@ -354,7 +354,7 @@ To make a custom theme available to all users:
 Community themes are listed in [gitea/awesome-gitea#themes](https://gitea.com/gitea/awesome-gitea#themes).
-The `arc-green` theme source can be found [here](https://github.com/go-gitea/gitea/blob/main/web_src/css/themes/theme-arc-green.css).
+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).
 If your custom theme is considered a dark theme, set the global css variable `--is-dark-theme` to `true`.
 This allows Gitea to adjust the Monaco code editor's theme accordingly.
--- a/docs/content/doc/developers/guidelines-frontend.en-us.md
+++ b/docs/content/doc/developers/guidelines-frontend.en-us.md
@ -21,13 +21,13 @@ menu:
 ## Background
-Gitea uses [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 [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.
 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:
-* **CSS styles:** `web_src/css/`
+* **Less styles:** `web_src/less/`
 * **JavaScript files:** `web_src/js/`
 * **Vue components:** `web_src/js/components/`
 * **Go HTML templates:** `templates/`
--- a/go.mod
+++ b/go.mod
@ -41,7 +41,7 @@ require (
 	github.com/go-chi/cors v1.2.1
 	github.com/go-enry/go-enry/v2 v2.8.3
 	github.com/go-fed/httpsig v1.1.1-0.20201223112313-55836744818e
-	github.com/go-git/go-billy/v5 v5.4.1
+	github.com/go-git/go-billy/v5 v5.4.0
 	github.com/go-git/go-git/v5 v5.5.2
 	github.com/go-ldap/ldap/v3 v3.4.4
 	github.com/go-redis/redis/v8 v8.11.5
@ -77,7 +77,7 @@ require (
 	github.com/microcosm-cc/bluemonday v1.0.21
 	github.com/minio/minio-go/v7 v7.0.46
 	github.com/msteinert/pam v1.1.0
-	github.com/nektos/act v0.2.43
+	github.com/nektos/act v0.0.0
 	github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
 	github.com/niklasfasching/go-org v1.6.5
 	github.com/oliamb/cutter v0.2.2
@ -105,7 +105,7 @@ require (
 	golang.org/x/crypto v0.4.0
 	golang.org/x/net v0.7.0
 	golang.org/x/oauth2 v0.3.0
-	golang.org/x/sys v0.6.0
+	golang.org/x/sys v0.5.0
 	golang.org/x/text v0.7.0
 	golang.org/x/tools v0.1.12
 	google.golang.org/grpc v1.47.0
@ -172,6 +172,7 @@ require (
 	github.com/go-asn1-ber/asn1-ber v1.5.4 // indirect
 	github.com/go-enry/go-oniguruma v1.2.1 // indirect
 	github.com/go-git/gcfg v1.5.0 // indirect
 	github.com/go-ini/ini v1.67.0 // indirect
 	github.com/go-openapi/analysis v0.21.4 // indirect
 	github.com/go-openapi/errors v0.20.3 // indirect
 	github.com/go-openapi/inflect v0.19.0 // indirect
@ -238,7 +239,7 @@ require (
 	github.com/prometheus/client_model v0.3.0 // indirect
 	github.com/prometheus/common v0.37.0 // indirect
 	github.com/prometheus/procfs v0.8.0 // indirect
-	github.com/rhysd/actionlint v1.6.23 // indirect
+	github.com/rhysd/actionlint v1.6.22 // indirect
 	github.com/rivo/uniseg v0.4.3 // indirect
 	github.com/robfig/cron v1.2.0 // indirect
 	github.com/rogpeppe/go-internal v1.9.0 // indirect
@ -270,7 +271,7 @@ require (
 	go.uber.org/multierr v1.9.0 // indirect
 	go.uber.org/zap v1.24.0 // indirect
 	golang.org/x/mod v0.7.0 // indirect
-	golang.org/x/sync v0.1.0 // indirect
+	golang.org/x/sync v0.0.0-20220819030929-7fc1605a5dde // indirect
 	golang.org/x/time v0.3.0 // indirect
 	google.golang.org/appengine v1.6.7 // indirect
 	google.golang.org/genproto v0.0.0-20220616135557-88e70c0c3a90 // indirect
@ -285,7 +286,7 @@ replace github.com/shurcooL/vfsgen => github.com/lunny/vfsgen v0.0.0-20220105142
 replace github.com/blevesearch/zapx/v15 v15.3.6 => github.com/zeripath/zapx/v15 v15.3.6-alignment-fix
-replace github.com/nektos/act => gitea.com/gitea/act v0.243.1
+replace github.com/nektos/act => gitea.com/gitea/act v0.234.2-0.20230131074955-e46ede1b1744
 exclude github.com/gofrs/uuid v3.2.0+incompatible
--- a/go.sum
+++ b/go.sum
@ -70,8 +70,8 @@ codeberg.org/gusted/mcaptcha v0.0.0-20220723083913-4f3072e1d570/go.mod h1:IIAjsi
 dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU=
 git.sr.ht/~mariusor/go-xsd-duration v0.0.0-20220703122237-02e73435a078 h1:cliQ4HHsCo6xi2oWZYKWW4bly/Ory9FuTpFPRxj/mAg=
 git.sr.ht/~mariusor/go-xsd-duration v0.0.0-20220703122237-02e73435a078/go.mod h1:g/V2Hjas6Z1UHUp4yIx6bATpNzJ7DYtD0FG3+xARWxs=
-gitea.com/gitea/act v0.243.1 h1:zIVlhGOLE4SHFPW++u3+5Y/jX5mub3QIhB13oNf6rtA=
+gitea.com/gitea/act v0.234.2-0.20230131074955-e46ede1b1744 h1:cqzKmGlX0wynSXO04NILpL25eBGwogDrKpkkbwmIpj4=
-gitea.com/gitea/act v0.243.1/go.mod h1:iLHCXqOPUElA2nSyHo4wtxSmvdkym3WU7CkP3AxF39Q=
+gitea.com/gitea/act v0.234.2-0.20230131074955-e46ede1b1744/go.mod h1:2C/WbTalu1VPNgbVaZJaZDzlOtAKqkXJhdOClxkMy14=
 gitea.com/go-chi/binding v0.0.0-20221013104517-b29891619681 h1:MMSPgnVULVwV9kEBgvyEUhC9v/uviZ55hPJEMjpbNR4=
 gitea.com/go-chi/binding v0.0.0-20221013104517-b29891619681/go.mod h1:77TZu701zMXWJFvB8gvTbQ92zQ3DQq/H7l5wAEjQRKc=
 gitea.com/go-chi/cache v0.0.0-20210110083709-82c4c9ce2d5e/go.mod h1:k2V/gPDEtXGjjMGuBJiapffAXTv76H4snSmlJRLUhH0=
@ -402,9 +402,8 @@ github.com/go-fed/httpsig v1.1.1-0.20201223112313-55836744818e/go.mod h1:RCMrTZv
 github.com/go-git/gcfg v1.5.0 h1:Q5ViNfGF8zFgyJWPqYwA7qGFoMTEiBmdlkcfRmpIMa4=
 github.com/go-git/gcfg v1.5.0/go.mod h1:5m20vg6GwYabIxaOonVkTdrILxQMpEShl1xiMF4ua+E=
 github.com/go-git/go-billy/v5 v5.3.1/go.mod h1:pmpqyWchKfYfrkb/UVH4otLvyi/5gJlGI4Hb3ZqZ3W0=
 github.com/go-git/go-billy/v5 v5.4.0 h1:Vaw7LaSTRJOUric7pe4vnzBSgyuf2KrLsu2Y4ZpQBDE=
 github.com/go-git/go-billy/v5 v5.4.0/go.mod h1:vjbugF6Fz7JIflbVpl1hJsGjSHNltrSw45YK/ukIvQg=
 github.com/go-git/go-billy/v5 v5.4.1 h1:Uwp5tDRkPr+l/TnbHOQzp+tmJfLceOlbVucgpTz8ix4=
 github.com/go-git/go-billy/v5 v5.4.1/go.mod h1:vjbugF6Fz7JIflbVpl1hJsGjSHNltrSw45YK/ukIvQg=
 github.com/go-git/go-git-fixtures/v4 v4.3.1 h1:y5z6dd3qi8Hl+stezc8p3JxDkoTRqMAlKnXHuzrfjTQ=
 github.com/go-git/go-git-fixtures/v4 v4.3.1/go.mod h1:8LHG1a3SRW71ettAD/jW13h8c6AqjVSeL11RAdgaqpo=
 github.com/go-git/go-git/v5 v5.5.2 h1:v8lgZa5k9ylUw+OR/roJHTxR4QItsNFI5nKtAXFuynw=
@ -412,6 +411,8 @@ github.com/go-git/go-git/v5 v5.5.2/go.mod h1:BE5hUJ5yaV2YMxhmaP4l6RBQ08kMxKSPD4B
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20191125211704-12ad95a8df72/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20200222043503-6f7a984d4dc4/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-ini/ini v1.67.0 h1:z6ZrTEZqSWOTyH2FlglNbNgARyHG8oLW9gMELqKr06A=
 github.com/go-ini/ini v1.67.0/go.mod h1:ByCAeIL28uOIIG0E3PJtZPDL8WnHpFKFOtgjp+3Ies8=
 github.com/go-kit/kit v0.8.0/go.mod h1:xBxKIO96dXMWWy0MnWVtmwkA9/13aqxPnvrjFYMA2as=
 github.com/go-kit/kit v0.9.0/go.mod h1:xBxKIO96dXMWWy0MnWVtmwkA9/13aqxPnvrjFYMA2as=
 github.com/go-kit/kit v0.10.0/go.mod h1:xUsJbQ/Fp4kEt7AFgCuvyX4a71u8h9jB8tj/ORgOZ7o=
@ -790,7 +791,7 @@ github.com/jhillyerd/enmime v0.10.1 h1:3VP8gFhK7R948YJBrna5bOgnTXEuPAoICo79kKkBK
 github.com/jhillyerd/enmime v0.10.1/go.mod h1:Qpe8EEemJMFAF8+NZoWdpXvK2Yb9dRF0k/z6mkcDHsA=
 github.com/jmespath/go-jmespath v0.0.0-20180206201540-c2b33e8439af/go.mod h1:Nht3zPeWKUH0NzdCt2Blrr5ys8VGpn0CEB0cQHVjt7k=
 github.com/joho/godotenv v1.3.0/go.mod h1:7hK45KPybAkOC6peb+G5yklZfMxEjkZhHbwpqxOKXbg=
-github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.4.0 h1:3l4+N6zfMWnkbPEXKng2o2/MR5mSwTrBih4ZEkkz1lg=
 github.com/jonboulle/clockwork v0.1.0/go.mod h1:Ii8DK3G1RaLaWxj9trq07+26W01tbo22gdxWY5EU2bo=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
@ -1098,8 +1099,8 @@ github.com/rcrowley/go-metrics v0.0.0-20181016184325-3113b8401b8a/go.mod h1:bCqn
 github.com/rcrowley/go-metrics v0.0.0-20190826022208-cac0b30c2563/go.mod h1:bCqnVzQkZxMG4s8nGwiZ5l3QUCyqpo9Y+/ZMZ9VjZe4=
 github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0 h1:OdAsTTz6OkFY5QxjkYwrChwuRruF69c169dPK26NUlk=
 github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/rhysd/actionlint v1.6.23 h1:041VOXgZddfvSJa9Il+WT3Iwuo/j0Nmu4bhpAScrds4=
+github.com/rhysd/actionlint v1.6.22 h1:cAEf2PGNwJXhdcTVF2xS/0ORqWS+ueUHwjQYsqFsGSk=
-github.com/rhysd/actionlint v1.6.23/go.mod h1:o5qc1K3I9taGMBhL7mVkpRd64hx3YqI+3t8ewGfYXfE=
+github.com/rhysd/actionlint v1.6.22/go.mod h1:gIKOdxtV40mBOcD0ZR8EBa8NqjEXToAZioroS3oedMg=
 github.com/rivo/uniseg v0.1.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.3 h1:utMvzDsuh3suAEnhH0RdHmoPbU648o6CvXxTx4SBMOw=
@ -1500,8 +1501,8 @@ golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220601150217-0de741cfad7f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.1.0 h1:wsuoTGHzEhffawBOhz5CYhcrV4IdKZbEyZjBMuTp12o=
+golang.org/x/sync v0.0.0-20220819030929-7fc1605a5dde h1:ejfdSekXMDxDLbRrJMwUk6KnSLZ2McaUCVcIKM+N6jc=
-golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220819030929-7fc1605a5dde/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20180823144017-11551d06cbcc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180905080454-ebe1bf3edb33/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@ -1609,14 +1610,14 @@ golang.org/x/sys v0.0.0-20220825204002-c680a09ffe64/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.2.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0 h1:MVltZSvRTcU2ljQOhs94SXPftV6DCNnZViHeQps87pQ=
+golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201117132131-f5c789dd3221/go.mod h1:Nr5EML6q2oocZ2LXRh80K7BxOlk5/8JxuGnuhpl+muw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.0.0-20220722155259-a9ba230a4035/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.2.0/go.mod h1:TVmDHMZPmdnySmBfhjOoOdhjzdE1h4u1VwSiw2l1Nuc=
-golang.org/x/term v0.6.0 h1:clScbb1cHjoCkyRbWwBEUZ5H/tIFu5TAXIqaZD0Gcjw=
+golang.org/x/term v0.5.0 h1:n2a8QNdAb0sZNpU9R1ALUXBbY+w51fCQDN+7EdxNBsY=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
--- a/modules/timeutil/since.go
+++ b/modules/timeutil/since.go
@ -233,7 +233,7 @@ func TimeSince(then time.Time, lang translation.Locale) template.HTML {
 }
 func htmlTimeSince(then, now time.Time, lang translation.Locale) template.HTML {
-	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s" data-tooltip-interactive="true">%s</span>`,
+	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s">%s</span>`,
 		then.In(setting.DefaultUILocation).Format(GetTimeFormat(lang.Language())),
 		timeSince(then, now, lang)))
 }
@ -244,7 +244,7 @@ func TimeSinceUnix(then TimeStamp, lang translation.Locale) template.HTML {
 }
 func htmlTimeSinceUnix(then, now TimeStamp, lang translation.Locale) template.HTML {
-	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s" data-tooltip-interactive="true">%s</span>`,
+	return template.HTML(fmt.Sprintf(`<span class="time-since tooltip" data-content="%s">%s</span>`,
 		then.FormatInLocation(GetTimeFormat(lang.Language()), setting.DefaultUILocation),
 		timeSinceUnix(int64(then), int64(now), lang)))
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -28,9 +28,11 @@
        "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.4",
+        "mini-css-extract-plugin": "2.7.2",
        "monaco-editor": "0.34.1",
        "monaco-editor-webpack-plugin": "7.0.1",
        "pretty-ms": "8.0.0",
@ -43,7 +45,7 @@
        "vue-bar-graph": "2.0.0",
        "vue-loader": "17.0.1",
        "vue3-calendar-heatmap": "2.0.0",
-        "webpack": "5.76.2",
+        "webpack": "5.76.0",
        "webpack-cli": "5.0.1",
        "workbox-routing": "6.5.4",
        "workbox-strategies": "6.5.4",
@ -62,6 +64,7 @@
        "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",
@ -2664,9 +2667,6 @@
      "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,9 +3813,7 @@
      "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"
      },
@ -5242,9 +5240,7 @@
      "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"
      },
@ -5679,10 +5675,7 @@
    "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",
@ -5940,6 +5933,14 @@
        "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",
@ -5955,9 +5956,6 @@
      "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",
@ -5979,6 +5977,25 @@
        "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",
@ -6184,9 +6201,7 @@
      "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"
@ -6199,9 +6214,7 @@
      "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"
      }
@ -6492,9 +6505,7 @@
      "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"
      },
@ -6531,9 +6542,9 @@
      }
    },
    "node_modules/mini-css-extract-plugin": {
-      "version": "2.7.4",
+      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz",
-      "integrity": "sha512-V5zkjajQx9gnedglDap7ZjD1mNFNISzyllzrc+9+R4iwPRUAR0St20ADflQbWkVUQ2u/QU55t8mKaxUek8Cciw==",
+      "integrity": "sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==",
      "dependencies": {
        "schema-utils": "^4.0.0"
      },
@ -6626,7 +6637,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/nanoid": {
      "version": "3.3.4",
@ -6649,9 +6660,7 @@
      "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",
@ -6668,9 +6677,7 @@
      "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"
      }
@ -7040,9 +7047,6 @@
      "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"
      }
@ -7144,9 +7148,7 @@
      "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"
      }
@ -7286,6 +7288,18 @@
        "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",
@ -7467,9 +7481,7 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
+      "optional": true
      "optional": true,
      "peer": true
    },
    "node_modules/psl": {
      "version": "1.9.0",
@ -7975,9 +7987,7 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true,
+      "optional": true
      "optional": true,
      "peer": true
    },
    "node_modules/saxes": {
      "version": "6.0.0",
@ -8907,8 +8917,7 @@
    "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",
@ -9404,9 +9413,9 @@
      }
    },
    "node_modules/webpack": {
-      "version": "5.76.2",
+      "version": "5.76.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz",
-      "integrity": "sha512-Th05ggRm23rVzEOlX8y67NkYCHa9nTNcwHPBhdg+lKG+mtiW7XgggjAeeLnADAe7mLjJ6LUNfgHAuRRh+Z6J7w==",
+      "integrity": "sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==",
      "dependencies": {
        "@types/eslint-scope": "^3.7.3",
        "@types/estree": "^0.0.51",
@ -11843,9 +11852,6 @@
      "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"
      }
@ -12704,9 +12710,7 @@
      "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"
      }
@ -13779,9 +13783,7 @@
      "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
      "optional": true,
      "peer": true
    },
    "immer": {
      "version": "9.0.18",
@ -14074,10 +14076,7 @@
    "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",
@ -14270,6 +14269,11 @@
      "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",
@ -14285,9 +14289,6 @@
      "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",
@ -14301,6 +14302,14 @@
        "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",
@ -14475,9 +14484,7 @@
      "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"
@ -14487,9 +14494,7 @@
          "version": "5.7.1",
          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true,
+          "optional": true
          "optional": true,
          "peer": true
        }
      }
    },
@ -14716,9 +14721,7 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
+      "optional": true
      "optional": true,
      "peer": true
    },
    "mime-db": {
      "version": "1.52.0",
@ -14740,9 +14743,9 @@
      "dev": true
    },
    "mini-css-extract-plugin": {
-      "version": "2.7.4",
+      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz",
-      "integrity": "sha512-V5zkjajQx9gnedglDap7ZjD1mNFNISzyllzrc+9+R4iwPRUAR0St20ADflQbWkVUQ2u/QU55t8mKaxUek8Cciw==",
+      "integrity": "sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==",
      "requires": {
        "schema-utils": "^4.0.0"
      }
@ -14814,7 +14817,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "devOptional": true
    },
    "nanoid": {
      "version": "3.3.4",
@ -14831,9 +14834,7 @@
      "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",
@ -14844,9 +14845,7 @@
          "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"
          }
@ -15128,10 +15127,7 @@
    "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",
@ -15202,9 +15198,7 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
+      "optional": true
      "optional": true,
      "peer": true
    },
    "pkg-dir": {
      "version": "4.2.0",
@ -15302,6 +15296,13 @@
        "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",
@ -15432,9 +15433,7 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
+      "optional": true
      "optional": true,
      "peer": true
    },
    "psl": {
      "version": "1.9.0",
@ -15793,9 +15792,7 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true,
+      "optional": true
      "optional": true,
      "peer": true
    },
    "saxes": {
      "version": "6.0.0",
@ -16530,8 +16527,7 @@
    "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",
@ -16851,9 +16847,9 @@
      "dev": true
    },
    "webpack": {
-      "version": "5.76.2",
+      "version": "5.76.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz",
-      "integrity": "sha512-Th05ggRm23rVzEOlX8y67NkYCHa9nTNcwHPBhdg+lKG+mtiW7XgggjAeeLnADAe7mLjJ6LUNfgHAuRRh+Z6J7w==",
+      "integrity": "sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==",
      "requires": {
        "@types/eslint-scope": "^3.7.3",
        "@types/estree": "^0.0.51",
--- a/package.json
+++ b/package.json
@ -28,9 +28,11 @@
    "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.4",
+    "mini-css-extract-plugin": "2.7.2",
    "monaco-editor": "0.34.1",
    "monaco-editor-webpack-plugin": "7.0.1",
    "pretty-ms": "8.0.0",
@ -43,7 +45,7 @@
    "vue-bar-graph": "2.0.0",
    "vue-loader": "17.0.1",
    "vue3-calendar-heatmap": "2.0.0",
-    "webpack": "5.76.2",
+    "webpack": "5.76.0",
    "webpack-cli": "5.0.1",
    "workbox-routing": "6.5.4",
    "workbox-strategies": "6.5.4",
@ -62,6 +64,7 @@
    "eslint-plugin-vue": "9.9.0",
    "jsdom": "21.0.0",
    "markdownlint-cli": "0.33.0",
    "postcss-less": "6.0.0",
    "stylelint": "15.2.0",
    "stylelint-declaration-strict-value": "1.9.2",
    "svgo": "3.0.2",
--- a/routers/api/v1/admin/repo.go
+++ b/routers/api/v1/admin/repo.go
@ -32,8 +32,6 @@ func CreateRepo(ctx *context.APIContext) {
 	// responses:
 	//   "201":
 	//     "$ref": "#/responses/Repository"
 	//   "400":
 	//     "$ref": "#/responses/error"
 	//   "403":
 	//     "$ref": "#/responses/forbidden"
 	//   "404":
--- a/routers/api/v1/repo/repo.go
+++ b/routers/api/v1/repo/repo.go
@ -231,13 +231,6 @@ func CreateUserRepo(ctx *context.APIContext, owner *user_model.User, opt api.Cre
 	if opt.AutoInit && opt.Readme == "" {
 		opt.Readme = "Default"
 	}
 	// If the readme template does not exist, a 400 will be returned.
 	if opt.AutoInit && len(opt.Readme) > 0 && !util.SliceContains(repo_module.Readmes, opt.Readme) {
 		ctx.Error(http.StatusBadRequest, "", fmt.Errorf("readme template does not exist, available templates: %v", repo_module.Readmes))
 		return
 	}
 	repo, err := repo_service.CreateRepository(ctx.Doer, owner, repo_module.CreateRepoOptions{
 		Name:          opt.Name,
 		Description:   opt.Description,
@ -290,8 +283,6 @@ func Create(ctx *context.APIContext) {
 	// responses:
 	//   "201":
 	//     "$ref": "#/responses/Repository"
 	//   "400":
 	//     "$ref": "#/responses/error"
 	//   "409":
 	//     description: The repository with the same name already exists.
 	//   "422":
@ -473,8 +464,6 @@ func CreateOrgRepo(ctx *context.APIContext) {
 	// responses:
 	//   "201":
 	//     "$ref": "#/responses/Repository"
 	//   "400":
 	//     "$ref": "#/responses/error"
 	//   "404":
 	//     "$ref": "#/responses/notFound"
 	//   "403":
--- a/templates/swagger/v1_json.tmpl
+++ b/templates/swagger/v1_json.tmpl
@ -713,9 +713,6 @@
          "201": {
            "$ref": "#/responses/Repository"
          },
          "400": {
            "$ref": "#/responses/error"
          },
          "403": {
            "$ref": "#/responses/forbidden"
          },
@ -1929,9 +1926,6 @@
          "201": {
            "$ref": "#/responses/Repository"
          },
          "400": {
            "$ref": "#/responses/error"
          },
          "403": {
            "$ref": "#/responses/forbidden"
          },
@ -13235,9 +13229,6 @@
          "201": {
            "$ref": "#/responses/Repository"
          },
          "400": {
            "$ref": "#/responses/error"
          },
          "409": {
            "description": "The repository with the same name already exists."
          },
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@ -1,110 +0,0 @@
 .admin.hooks .list > .item:not(:first-child) {
  border-top: 1px solid var(--color-secondary);
  padding: 0.25rem 1rem;
  margin: 12px -1rem -1rem;
 }
 .admin .table.segment {
  padding: 0;
  font-size: 13px;
  overflow-x: auto;
 }
 .admin .table.segment:not(.striped) thead th:last-child {
  padding-right: 5px !important;
 }
 .admin .table.segment th {
  padding-top: 5px;
  padding-bottom: 5px;
 }
 .admin .table.segment:not(.select) th:first-of-type,
 .admin .table.segment:not(.select) td:first-of-type {
  padding-left: 15px !important;
 }
 .admin .table.segment form tbody button[type="submit"] {
  padding: 5px 8px;
 }
 .admin .settings .button.adopt,
 .admin .settings .button.delete {
  margin-top: -15px;
  margin-bottom: -15px;
 }
 .admin .settings .button.adopt .label,
 .admin .settings .button.delete .label {
  vertical-align: middle;
 }
 .admin.user .email {
  max-width: 200px;
 }
 .admin dl.admin-dl-horizontal {
  padding: 20px;
  margin: 0;
 }
 .admin dl.admin-dl-horizontal dd {
  margin-left: 275px;
 }
@media (max-width: 767px) {
  .admin dl.admin-dl-horizontal dd {
    margin-left: 5%;
  }
 }
 .admin dl.admin-dl-horizontal dt {
  font-weight: 600;
  float: left;
  width: 285px;
  clear: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
@media (max-width: 767px) {
  .admin dl.admin-dl-horizontal dt {
    width: auto;
    margin-right: 0.5em;
  }
 }
 .admin.config #test-mail-btn {
  margin-left: 5px;
 }
 .admin code,
 .admin pre {
  white-space: pre-wrap;
  word-wrap: break-word;
 }
@media (max-width: 767px) {
  .admin #notice-table .notice-description {
    max-width: 80vw;
  }
 }
@media (min-width: 768px) and (max-width: 991px) {
  .admin #notice-table .notice-description {
    max-width: 360px;
  }
 }
@media (min-width: 992px) and (max-width: 1200px) {
  .admin #notice-table .notice-description {
    max-width: 510px;
  }
 }
@media (min-width: 1201px) {
  .admin #notice-table .notice-description {
    max-width: 640px;
  }
 }
--- a/web_src/css/codemirror/dark.css
+++ b/web_src/css/codemirror/dark.css
@ -1,106 +0,0 @@
 .CodeMirror.cm-s-default .cm-property,
 .CodeMirror.cm-s-paper .cm-property {
  color: #a0cc75;
 }
 .CodeMirror.cm-s-default .cm-header,
 .CodeMirror.cm-s-paper .cm-header {
  color: #9daccc;
 }
 .CodeMirror.cm-s-default .cm-quote,
 .CodeMirror.cm-s-paper .cm-quote {
  color: #009900;
 }
 .CodeMirror.cm-s-default .cm-keyword,
 .CodeMirror.cm-s-paper .cm-keyword {
  color: #cc8a61;
 }
 .CodeMirror.cm-s-default .cm-atom,
 .CodeMirror.cm-s-paper .cm-atom {
  color: #ef5e77;
 }
 .CodeMirror.cm-s-default .cm-number,
 .CodeMirror.cm-s-paper .cm-number {
  color: #ff5656;
 }
 .CodeMirror.cm-s-default .cm-def,
 .CodeMirror.cm-s-paper .cm-def {
  color: #e4e4e4;
 }
 .CodeMirror.cm-s-default .cm-variable-2,
 .CodeMirror.cm-s-paper .cm-variable-2 {
  color: #00bdbf;
 }
 .CodeMirror.cm-s-default .cm-variable-3,
 .CodeMirror.cm-s-paper .cm-variable-3 {
  color: #008855;
 }
 .CodeMirror.cm-s-default .cm-comment,
 .CodeMirror.cm-s-paper .cm-comment {
  color: #8e9ab3;
 }
 .CodeMirror.cm-s-default .cm-string,
 .CodeMirror.cm-s-paper .cm-string {
  color: #a77272;
 }
 .CodeMirror.cm-s-default .cm-string-2,
 .CodeMirror.cm-s-paper .cm-string-2 {
  color: #ff5500;
 }
 .CodeMirror.cm-s-default .cm-meta,
 .CodeMirror.cm-s-paper .cm-meta,
 .CodeMirror.cm-s-default .cm-qualifier,
 .CodeMirror.cm-s-paper .cm-qualifier {
  color: #ffb176;
 }
 .CodeMirror.cm-s-default .cm-builtin,
 .CodeMirror.cm-s-paper .cm-builtin {
  color: #b7c951;
 }
 .CodeMirror.cm-s-default .cm-bracket,
 .CodeMirror.cm-s-paper .cm-bracket {
  color: #999977;
 }
 .CodeMirror.cm-s-default .cm-tag,
 .CodeMirror.cm-s-paper .cm-tag {
  color: #f1d273;
 }
 .CodeMirror.cm-s-default .cm-attribute,
 .CodeMirror.cm-s-paper .cm-attribute {
  color: #bfcc70;
 }
 .CodeMirror.cm-s-default .cm-hr,
 .CodeMirror.cm-s-paper .cm-hr {
  color: #999999;
 }
 .CodeMirror.cm-s-default .cm-url,
 .CodeMirror.cm-s-paper .cm-url {
  color: #c5cfd0;
 }
 .CodeMirror.cm-s-default .cm-link,
 .CodeMirror.cm-s-paper .cm-link {
  color: #d8c792;
 }
 .CodeMirror.cm-s-default .cm-error,
 .CodeMirror.cm-s-paper .cm-error {
  color: #dbdbeb;
 }
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@ -1,203 +0,0 @@
 .dashboard.feeds .context.user.menu,
 .dashboard.issues .context.user.menu {
  z-index: 101;
  min-width: 200px;
 }
 .dashboard.feeds .context.user.menu .ui.header,
 .dashboard.issues .context.user.menu .ui.header {
  font-size: 1rem;
  text-transform: none;
 }
 .dashboard.feeds .filter.menu,
 .dashboard.issues .filter.menu {
  width: initial;
 }
 .dashboard.feeds .filter.menu .item,
 .dashboard.issues .filter.menu .item {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .dashboard.feeds .filter.menu .item .text,
 .dashboard.issues .filter.menu .item .text {
  height: 16px;
  vertical-align: middle;
 }
 .dashboard.feeds .filter.menu .item .text.truncate,
 .dashboard.issues .filter.menu .item .text.truncate {
  width: 75%;
 }
 .dashboard.feeds .filter.menu .item .floating.label,
 .dashboard.issues .filter.menu .item .floating.label {
  top: 7px;
  left: 90%;
  width: 15%;
 }
@media (max-width: 767px) {
  .dashboard.feeds .filter.menu .item .floating.label,
  .dashboard.issues .filter.menu .item .floating.label {
    top: 10px;
    left: auto;
    width: auto;
    right: 13px;
  }
 }
 /* Sort */
 .dashboard.feeds .filter.menu .jump.item,
 .dashboard.issues .filter.menu .jump.item {
  margin: 1px;
  padding-right: 0;
 }
 .dashboard.feeds .filter.menu .menu,
 .dashboard.issues .filter.menu .menu {
  max-height: 300px;
  overflow-x: auto;
  right: 0 !important;
  left: auto !important;
 }
@media (max-width: 767px) {
  .dashboard.feeds .filter.menu,
  .dashboard.issues .filter.menu {
    width: 100%;
  }
 }
 .dashboard.feeds .right.stackable.menu > .item.active,
 .dashboard.issues .right.stackable.menu > .item.active {
  color: var(--color-red);
 }
 .dashboard .dashboard-repos,
 .dashboard .dashboard-orgs {
  margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
 }
 .dashboard .dashboard-navbar {
  width: 100vw;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
 }
 .dashboard .dashboard-navbar .org-visibility .label {
  margin-left: 5px;
 }
 .dashboard .dashboard-navbar .ui.dropdown {
  max-width: 100%;
 }
@media (max-width: 767px) {
  .dashboard .dashboard-navbar .ui.dropdown > .menu {
    position: static;
  }
 }
 .feeds .news li {
  display: flex;
  align-items: baseline;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
 }
 .feeds .news li img {
  align-self: flex-start;
 }
 .feeds .news li > * + * {
  margin-left: 0.35rem;
 }
 .feeds .news > .ui.grid {
  margin-left: auto;
  margin-right: auto;
 }
 .feeds .news .left .ui.avatar {
  margin-top: 13px;
 }
 .feeds .news .time-since {
  font-size: 13px;
 }
 .feeds .news .issue.title {
  width: 80%;
  margin: 0 0 1em;
 }
 .feeds .news .push.news .content ul {
  line-height: 18px;
  font-size: 13px;
  list-style: none;
  padding-left: 10px;
 }
 .feeds .news .push.news .content ul .text.truncate {
  width: 80%;
 }
 .feeds .news .commit-id {
  font-family: var(--fonts-monospace);
 }
 .feeds .news code {
  padding: 2px 4px;
  border-radius: 3px;
  background-color: var(--color-markup-code-block);
  word-break: break-all;
 }
 .feeds .news:last-of-type .divider {
  display: none !important;
 }
 .feeds .list ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
 }
 .feeds .list ul li:not(:last-child) {
  border-bottom: 1px solid var(--color-secondary);
 }
 .feeds .list ul li.private {
  background-color: var(--color-box-body-highlight);
 }
 .feeds .list ul li .repo-list-link {
  padding: 6px 1em;
  display: block;
 }
 .feeds .list ul li .repo-list-link .svg {
  color: var(--color-text-light-2);
 }
 .feeds .list ul li .repo-list-link .star-num {
  font-size: 12px;
 }
 .feeds .list #privateFilterCheckbox .svg {
  color: var(--color-grey);
  margin-right: 0.25rem;
 }
 .feeds .list .repo-owner-name-list .item-name {
  min-width: 0;
 }
 .feeds .list .repo-owner-name-list .item-name svg {
  min-width: 16px;
 }
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@ -1,88 +0,0 @@
 .explore .navbar {
  justify-content: center;
  margin-bottom: 15px !important;
  background-color: var(--color-navbar) !important;
  border-width: 1px !important;
 }
 .explore .navbar .svg {
  width: 16px;
  text-align: center;
  margin-right: 5px;
 }
 .ui.repository.list .item {
  padding-bottom: 1.5rem;
 }
 .ui.repository.list .item:not(:first-child) {
  border-top: 1px solid var(--color-secondary);
  padding-top: 1.5rem;
 }
 .ui.repository.list .item .ui.header {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
 }
 .ui.repository.list .item .ui.header .name {
  word-break: break-all;
 }
 .ui.repository.list .item .ui.header .metas {
  font-size: 14px;
 }
 .ui.repository.list .item .time {
  font-size: 12px;
 }
 .ui.repository.list .item .ui.tags {
  margin-bottom: 0.5rem;
 }
 .ui.repository.branches .info {
  font-size: 12px;
  color: var(--color-text-light);
  display: flex;
  white-space: pre;
 }
 .ui.repository.branches .info .commit-message {
  max-width: 72em;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .ui.repository.branches .overflow-visible {
  overflow: visible;
 }
 /* fix alignment of PR popup in branches table */
 .ui.repository.branches table .ui.popup {
  text-align: left;
 }
 .ui.user.list .item {
  padding-bottom: 25px;
  display: flex;
 }
 .ui.user.list .item:not(:first-child) {
  border-top: 1px solid var(--color-secondary);
  padding-top: 25px;
 }
 .ui.user.list .item img.ui.avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
 }
 .ui.user.list .item .description {
  margin-top: 5px;
 }
 .ui.user.list .item .description .svg:not(:first-child) {
  margin-left: 5px;
 }
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@ -1,317 +0,0 @@
 #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;
 }
--- a/web_src/css/features/heatmap.css
+++ b/web_src/css/features/heatmap.css
@ -1,68 +0,0 @@
 #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;
  }
 }
--- a/web_src/css/features/imagediff.css
+++ b/web_src/css/features/imagediff.css
@ -1,107 +0,0 @@
 .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;
 }
--- a/web_src/css/font_i18n.css
+++ b/web_src/css/font_i18n.css
@ -1,393 +0,0 @@
 :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;
  }
 }
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@ -1,547 +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: 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;
  }
 }
--- a/web_src/css/home.css
+++ b/web_src/css/home.css
@ -1,53 +0,0 @@
 .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;
  }
 }
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@ -1,40 +0,0 @@
@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";
--- a/web_src/css/install.css
+++ b/web_src/css/install.css
@ -1,65 +0,0 @@
 .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;
 }
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@ -1,559 +0,0 @@
 .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;
 }
--- a/web_src/css/organization.css
+++ b/web_src/css/organization.css
@ -1,250 +0,0 @@
 #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;
 }
--- a/web_src/css/package.css
+++ b/web_src/css/package.css
@ -1,7 +0,0 @@
 .container-labels td:nth-child(1) {
  vertical-align: top;
 }
 .container-labels td:nth-child(2) {
  overflow-wrap: anywhere;
 }
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@ -1,322 +0,0 @@
 .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);
 }
--- a/web_src/css/runner.css
+++ b/web_src/css/runner.css
@ -1,54 +0,0 @@
 .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);
 }
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@ -1,166 +0,0 @@
 .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);
 }
--- a/web_src/css/themes/theme-auto.css
+++ b/web_src/css/themes/theme-auto.css
@ -1 +0,0 @@
@import "./theme-arc-green.css" (prefers-color-scheme: dark);
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@ -1,173 +0,0 @@
 .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;
 }
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@ -282,59 +282,39 @@ export function initRepositoryActionView() {
 </script>
-<style scoped>
+<style scoped lang="less">
 .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;
-.action-view-header .run_cancel {
+    color: var(--color-red);
-  border: none;
+    background-color: transparent;
-  color: var(--color-red);
+    outline: none;
-  background-color: transparent;
+    cursor: pointer;
-  outline: none;
+    transition:transform 0.2s;
-  cursor: pointer;
+  };
-  transition: transform 0.2s;
+  .run_cancel:hover{
-}
+    transform:scale(130%);
-
+  };
 .action-view-header .run_cancel:hover {
  transform:scale(130%);
 }
 .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;
  padding: 0 10px;
  display: flex;
 }
-.action-info-summary .action-title {
+// ================
-  padding: 0 5px;
+// action view left
 }
 /* ================ */
 /* action view left */
 .action-view-left {
  width: 30%;
@ -343,52 +323,51 @@ export function initRepositoryActionView() {
  margin-left: 10px;
 }
-.job-group-section .job-group-summary {
+.job-group-section {
-  margin: 5px 0;
+  .job-group-summary {
-  padding: 10px;
+    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;
+// action view right
  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;
 }
 .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;
@ -396,50 +375,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 {
+.job-info-header {
-  font-size: 150%;
+  .job-info-header-title {
-  padding: 10px;
+    font-size: 150%;
-}
+    padding: 10px;
-
+  }
-.job-info-header .job-info-header-detail {
+  .job-info-header-detail {
-  padding: 0 10px 10px;
+    padding: 0 10px 10px;
-  border-bottom: 1px solid var(--color-grey);
+    border-bottom: 1px solid var(--color-grey);
  }
 }
 .job-step-container {
  max-height: 100%;
  overflow: auto;
 }
-.job-step-container .job-step-summary {
+  .job-step-summary {
-  cursor: pointer;
+    cursor: pointer;
-  padding: 5px 10px;
+    padding: 5px 10px;
-  display: flex;
+    display: flex;
 }
-.job-step-container .job-step-summary .step-summary-msg {
+    .step-summary-msg {
-  flex: 1;
+      flex: 1;
-}
+    }
-
+    .step-summary-dur {
-.job-step-container .job-step-summary .step-summary-dur {
+      margin-left: 16px;
-  margin-left: 16px;
+    }
-}
+  }
-
+  .job-step-summary:hover {
-.job-step-container .job-step-summary:hover {
+    background-color: var(--color-black-light);
-  background-color: var(--color-black-light);
+  }
 }
 </style>
-<style>
+<style lang="less">
-/* some elements are not managed by vue, so we need to use global 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);
@ -448,44 +427,37 @@ 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 {
+    // TODO: group support
-  font-family: monospace, monospace;
+    .job-log-group {
-}
+    }
-.job-step-section .job-step-logs .job-log-line {
+    .job-log-group-summary {
-  display: flex;
+    }
 }
 .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>
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@ -33,7 +33,6 @@ export function initTooltip(el, props = {}) {
    content,
    delay: 100,
    role: 'tooltip',
    ...(el.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
    ...props,
  });
 }
--- a/web_src/less/_admin.less
+++ b/web_src/less/_admin.less
@ -0,0 +1,115 @@
 .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;
      }
    }
  }
 }
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@ -0,0 +1,198 @@
 .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;
    }
  }
 }
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
--- a/web_src/less/_explore.less
+++ b/web_src/less/_explore.less
@ -0,0 +1,93 @@
 .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;
      }
    }
  }
 }
--- a/web_src/less/_font_i18n.less
+++ b/web_src/less/_font_i18n.less
@ -0,0 +1,130 @@
 /* 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));
 }
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@ -0,0 +1,378 @@
 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;
    }
  }
 }
--- a/web_src/less/_home.less
+++ b/web_src/less/_home.less
@ -0,0 +1,61 @@
 .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;
    }
  }
 }
--- a/web_src/less/_install.less
+++ b/web_src/less/_install.less
@ -0,0 +1,72 @@
 .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;
    }
  }
 }
--- a/web_src/less/_organization.less
+++ b/web_src/less/_organization.less
@ -0,0 +1,200 @@
 .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;
    }
  }
 }
--- a/web_src/less/_package.less
+++ b/web_src/less/_package.less
@ -0,0 +1,9 @@
 .container-labels {
  td:nth-child(1) {
    vertical-align: top;
  }
  td:nth-child(2) {
    overflow-wrap: anywhere;
  }
 }
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@ -0,0 +1,324 @@
@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);
 }
--- a/web_src/less/_runner.less
+++ b/web_src/less/_runner.less
@ -0,0 +1,45 @@
@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);
  }
 }
--- a/web_src/less/_svg.less
+++ b/web_src/less/_svg.less
@ -2,8 +2,8 @@
  display: inline-block;
  vertical-align: text-top;
  fill: currentcolor;
 }
-.middle .svg {
+  .middle & {
-  vertical-align: middle;
+    vertical-align: middle;
  }
 }
--- a/web_src/less/_tribute.less
+++ b/web_src/less/_tribute.less
@ -1,8 +1,8 @@
@import "tributejs/dist/tribute.css";
 .tribute-container {
-  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
-  border-radius: 0.25rem;
+  border-radius: .25rem;
 }
 .tribute-container ul {
@ -11,12 +11,12 @@
 }
 .tribute-container li {
-  padding: 3px 0.5rem !important;
+  padding: 3px .5rem !important;
 }
 .tribute-container li span.fullname {
  font-weight: normal;
-  font-size: 0.8rem;
+  font-size: .8rem;
  margin-left: 3px;
 }
@ -33,7 +33,7 @@
 .tribute-item .emoji,
 .tribute-item img[src*="/avatar/"] {
-  margin-right: 0.5rem;
+  margin-right: .5rem;
 }
 .tribute-container img {
--- a/web_src/less/_user.less
+++ b/web_src/less/_user.less
@ -0,0 +1,183 @@
@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;
 }
--- a/web_src/less/animations.less
+++ b/web_src/less/animations.less
--- a/web_src/less/chroma/base.less
+++ b/web_src/less/chroma/base.less
@ -29,14 +29,14 @@
 /* LineNumbersTable */
 .chroma .lnt {
-  margin-right: 0.4em;
+  margin-right: .4em;
-  padding: 0 0.4em;
+  padding: 0 .4em;
 }
 /* LineNumbers */
 .chroma .ln {
-  margin-right: 0.4em;
+  margin-right: .4em;
-  padding: 0 0.4em;
+  padding: 0 .4em;
 }
 /* GenericStrong */
--- a/web_src/less/chroma/chroma-style-diff.go
+++ b/web_src/less/chroma/chroma-style-diff.go
@ -0,0 +1,79 @@
 // 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)
 		}
 	}
 }
--- a/web_src/less/chroma/dark.less
+++ b/web_src/less/chroma/dark.less
--- a/web_src/less/chroma/light.less
+++ b/web_src/less/chroma/light.less
--- a/web_src/less/code/linebutton.less
+++ b/web_src/less/code/linebutton.less
--- a/web_src/less/codemirror/base.less
+++ b/web_src/less/codemirror/base.less
@ -1,5 +1,5 @@
 .ui .field:not(:last-child) .EasyMDEContainer .editor-statusbar {
-  margin-bottom: -1em; /* when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line */
+  margin-bottom: -1em; // when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line
 }
 .EasyMDEContainer .CodeMirror {
@ -7,15 +7,15 @@
  background-color: var(--color-input-background);
  border-color: var(--color-secondary);
  font: 14px var(--fonts-monospace);
 }
-.EasyMDEContainer .CodeMirror.cm-s-default {
+  &.cm-s-default {
-  border-radius: var(--border-radius);
+    border-radius: var(--border-radius);
-  padding: 0 !important;
+    padding: 0 !important;
-}
+  }
-.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused {
+  &.CodeMirror-fullscreen.CodeMirror-focused {
-  border-right: 1px solid var(--color-primary) !important;
+    border-right: 1px solid var(--color-primary) !important;
  }
 }
 .CodeMirror-cursor {
--- a/web_src/less/codemirror/dark.less
+++ b/web_src/less/codemirror/dark.less
@ -0,0 +1,89 @@
 .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;
    }
  }
 }
--- a/web_src/less/codemirror/light.less
+++ b/web_src/less/codemirror/light.less
--- a/web_src/less/console/console.less
+++ b/web_src/less/console/console.less
@ -1,4 +1,4 @@
-/* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */
+// Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css
 .console {
  background: var(--color-console-bg);
--- a/web_src/less/features/codeeditor.less
+++ b/web_src/less/features/codeeditor.less
--- a/web_src/less/features/dropzone.less
+++ b/web_src/less/features/dropzone.less
@ -1,14 +1,15 @@
-.ui .field .dropzone {
+.ui .field {
-  border: 2px dashed var(--color-secondary);
+  .dropzone {
-  background: none;
+    border: 2px dashed var(--color-secondary);
-  box-shadow: none;
+    background: none;
-  padding: 0;
+    box-shadow: none;
-  border-radius: 4px;
+    padding: 0;
-  min-height: 0;
+    border-radius: 4px;
-}
+    min-height: 0;
-
+    .dz-message {
-.ui .field .dropzone .dz-message {
+      margin: 10px 0;
-  margin: 10px 0;
+    }
  }
 }
 .dropzone .dz-button {
@ -49,5 +50,5 @@
 }
 .dropzone .dz-preview:hover .dz-image img {
-  filter: opacity(0.5) !important;
+  filter: opacity(.5) !important;
 }
--- a/web_src/less/features/gitgraph.less
+++ b/web_src/less/features/gitgraph.less
@ -0,0 +1,325 @@
 #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;
      }
    }
  }
 }
--- a/web_src/less/features/heatmap.less
+++ b/web_src/less/features/heatmap.less
@ -0,0 +1,67 @@
 #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;
  }
 }
--- a/web_src/less/features/imagediff.less
+++ b/web_src/less/features/imagediff.less
@ -0,0 +1,105 @@
 .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;
    }
  }
 }
--- a/web_src/less/features/projects.less
+++ b/web_src/less/features/projects.less
@ -3,14 +3,14 @@
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
-  margin: 0 0.5em;
+  margin: 0 .5em;
 }
 .board-column {
  background-color: var(--color-project-board-bg) !important;
  border: 1px solid var(--color-secondary) !important;
-  margin: 0 0.5rem !important;
+  margin: 0 .5rem !important;
-  padding: 0.5rem !important;
+  padding: .5rem !important;
  width: 320px;
  height: calc(100vh - 450px);
  min-height: 60vh;
@ -24,22 +24,21 @@
 .board-column-header {
  display: flex;
  justify-content: space-between;
 }
-.board-column-header.dark-label {
+  &.dark-label {
-  color: var(--color-project-board-dark-label) !important;
+    color: var(--color-project-board-dark-label) !important;
 }
-.board-column-header.dark-label .board-label {
+    .board-label {
-  color: var(--color-project-board-dark-label) !important;
+      color: var(--color-project-board-dark-label) !important;
-}
+    }
  }
  &.light-label {
    color: var(--color-project-board-light-label) !important;
-.board-column-header.light-label {
+    .board-label {
-  color: var(--color-project-board-light-label) !important;
+      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 {
@ -82,7 +81,7 @@
  border-radius: 5px !important;
  cursor: move;
  width: calc(100% - 4px) !important;
-  padding: 0.5rem !important;
+  padding: .5rem !important;
  min-height: auto !important;
 }
@ -125,23 +124,24 @@
 .color-field .minicolors.minicolors-theme-default {
  display: block;
  .minicolors-input {
    height: 38px;
    padding-left: 2rem;
  }
  .minicolors-swatch {
    top: 10px;
  }
 }
-.color-field .minicolors.minicolors-theme-default .minicolors-input {
+.edit-project-board,
-  height: 38px;
+.new-board-modal {
-  padding-left: 2rem;
+  .color.picker.column {
-}
+    display: flex;
-.color-field .minicolors.minicolors-theme-default .minicolors-swatch {
+    .minicolors {
-  top: 10px;
+      flex: 1;
-}
+    }
-
+  }
 .edit-project-board .color.picker.column,
 .new-board-modal .color.picker.column {
  display: flex;
 }
 .edit-project-board .color.picker.column .minicolors,
 .new-board-modal .color.picker.column .minicolors {
  flex: 1;
 }
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@ -196,7 +196,7 @@
 .gt-content-center { align-content: center !important; }
-@media (max-width: 767px) {
+@media @mediaSm {
  .gt-db-small { display: block !important; }
  .gt-w-100-small { width: 100% !important; }
  .gt-js-small { justify-content: flex-start !important; }
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@ -0,0 +1,42 @@
@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";
--- a/web_src/less/markup/asciicast.less
+++ b/web_src/less/markup/asciicast.less
--- a/web_src/less/markup/codecopy.less
+++ b/web_src/less/markup/codecopy.less
@ -9,7 +9,7 @@
  right: 6px;
  padding: 9px;
  visibility: hidden;
-  animation: fadeout 0.2s both;
+  animation: fadeout .2s both;
 }
 /* adjustments for comment content having only 14px font size */
@ -23,7 +23,6 @@
 .markup .code-copy:hover {
  background: var(--color-secondary) !important;
 }
 .markup .code-copy:active {
  background: var(--color-secondary-dark-1) !important;
 }
@ -31,5 +30,5 @@
 .markup .code-block:hover .code-copy,
 .markup .mermaid-block:hover .code-copy {
  visibility: visible;
-  animation: fadein 0.2s both;
+  animation: fadein .2s both;
 }
--- a/web_src/less/markup/content.less
+++ b/web_src/less/markup/content.less
@ -0,0 +1,559 @@
 .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;
 }
--- a/web_src/less/modules/tippy.less
+++ b/web_src/less/modules/tippy.less
@ -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: 0.5rem 1rem;
+  padding: .5rem 1rem;
 }
 .tippy-box[data-theme="menu"] .tippy-content {
--- a/web_src/less/shared/issuelist.less
+++ b/web_src/less/shared/issuelist.less
@ -0,0 +1,167 @@
 .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);
  }
 }
--- a/web_src/less/standalone/swagger.less
+++ b/web_src/less/standalone/swagger.less
@ -27,5 +27,5 @@ body {
 .swagger-back-link svg {
  color: inherit;
  fill: currentcolor;
-  margin-right: 0.5rem;
+  margin-right: .5rem;
 }
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@ -1,6 +1,6 @@
-@import "../chroma/base.css";
+@import "../chroma/base.less";
-@import "../chroma/dark.css";
+@import "../chroma/dark.less";
-@import "../codemirror/dark.css";
+@import "../codemirror/dark.less";
 :root {
  --is-dark-theme: true;
--- a/web_src/less/themes/theme-auto.less
+++ b/web_src/less/themes/theme-auto.less
@ -0,0 +1,3 @@
@media (prefers-color-scheme: dark) {
  @import "theme-arc-green.less";
 }
--- a/web_src/less/variables.less
+++ b/web_src/less/variables.less
@ -0,0 +1,14 @@
 // 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)";
--- a/webpack.config.js
+++ b/webpack.config.js
@ -21,7 +21,7 @@ const glob = (pattern) => fastGlob.sync(pattern, {
 });
 const themes = {};
-for (const path of glob('web_src/css/themes/*.css')) {
+for (const path of glob('web_src/less/themes/*.less')) {
  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/css/index.css', import.meta.url)),
+      fileURLToPath(new URL('web_src/less/index.less', 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/css/standalone/swagger.css', import.meta.url)),
+      fileURLToPath(new URL('web_src/less/standalone/swagger.less', 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,6 +151,29 @@ 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)),
		`@ -1 +0,0 @@`
			`@import "./theme-arc-green.css" (prefers-color-scheme: dark);`