release: 🔖 v0.2.1

feat: ✨ auto switch dark-light themes

.github/workflows/release.yml

@@ -8,15 +8,15 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - run: npm ci
       - run: npm run build
       - name: Create tarball
-        run: tar czf catppuccin-gitea.tar.gz --directory=./dist .
+        run: tar czf gitea-lugit-theme.tar.gz --directory=./dist .
       - name: Add zips to release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
-          files: ./lugit-theme.tar.gz
+          files: ./gitea-lugit-theme.tar.gz

.gitignore

@@ -1,164 +1,164 @@
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-# dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
-
-# Optional stylelint cache
-
-# SvelteKit build / generate output
-.svelte-kit
-
-### VisualStudioCode ###
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-!.vscode/*.code-snippets
-
-# Local History for Visual Studio Code
-.history/
-
-# Built Visual Studio Code Extensions
-*.vsix
-
-### VisualStudioCode Patch ###
-# Ignore all local history of files
-.history
-.ionide
-
-# Support for Project snippet scope
-
-# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
-# Support for Project snippet scope
-
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
+# Support for Project snippet scope
+

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.2.1] - 2024-10-19
+
+### Fixes
+- fix: 🚑 some css customizations not showing after 1.22.3 gitea update
+
+## [0.2.0] - 2024-10-19
+
+### Added
+- Pinned the project to the Gitea 1.22.3 version.

README.md

@@ -1,90 +1,90 @@
-<h1 align="center">
-	<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
-</h1>
-
-*Theme for `lucaslabs` internal gitea server.*
-
-## `dark`
-
-![dark theme](figs/dark.png)
-
-## `light`
-
-![light theme](figs/light.png)
-
-## `auto`
-
-Switches between `dark` and `light` automatically based on the user's system preference.
-
-## Usage
-
-1. Clone this repo
-2. Place the files in the `dist` folder in your `$GITEA_CUSTOM` directory.
-3. Append the themes in your `app.ini` file:
-
-```ini
-[ui]
-THEMES=...,dark,light,auto
-DEFAULT_THEME=dark # optional
-```
-
-> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
-
-4. Restart `gitea`.
-
-> 🗒️ **Note**\
-> Works with `gitea` version `v1.20`.
-
-## Credits
-
-- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
-
-## Dev
-
-### build
-```bash
-$ npm install
-$ npm run build
-```
-
-### serve
-```bash
-$ npm run serve -- --server path/to/gitea/custom
-
-# e.g.
-
-# on linux
-$ npm run serve -- --server ~/gitea/custom
-# on windows
-$ npm run serve -- -- --server c:/gitea/custom
-```
-
-
-# Changes in templates
-
-## `home.tmpl`
-
-Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
-
-## `base/head_navbar.tmpl`
-
-The only change here is to make the logo smaller.
-
-```diff
-- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-+ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-```
-
-## `repo/home.tmpl`
-
-+ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
-+ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
-
-Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
-
-```diff
-- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
-+ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
-```
-
-Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.
+<h1 align="center">
+	<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
+</h1>
+
+*Theme for `lucaslabs` internal gitea server.*
+
+## `dark`
+
+![dark theme](figs/dark.png)
+
+## `light`
+
+![light theme](figs/light.png)
+
+## `auto`
+
+Switches between `dark` and `light` automatically based on the user's system preference.
+
+## Usage
+
+1. Go to the [releases page](https://github.com/lucas-labs/gitea-lugit-theme/releases) and get the latest `gitea-lugit-theme.tar.gz` release file.
+2. Place the `templates` and `public` folder in your `$GITEA_CUSTOM` directory.
+3. Append the themes in your `app.ini` file:
+
+```ini
+[ui]
+THEMES=...,dark,light,auto
+DEFAULT_THEME=dark # optional
+```
+
+> 💡 You can change the names of the themes by changing the name of the theme files in `public/css/theme-{name}.css` and in the `app.ini` file, accordingly.
+
+4. Restart `gitea`.
+
+> [!NOTE]
+> The latest version works with `gitea` version `v1.22.x`.
+
+## Credits
+
+- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
+
+## Development
+
+### build
+```bash
+$ npm install
+$ npm run build
+```
+
+### serve
+```bash
+$ npm run serve -- --server path/to/gitea/custom
+
+# e.g.
+
+# on linux
+$ npm run serve -- --server ~/gitea/custom
+# on windows
+$ npm run serve -- -- --server c:/gitea/custom
+```
+
+
+# Changes in templates
+
+## `home.tmpl`
+
+Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
+
+## `base/head_navbar.tmpl`
+
+The only change here is to make the logo smaller.
+
+```diff
+- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
++ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+```
+
+## `repo/home.tmpl`
+
++ adds `<div class="lugit-repo-header-data">...</div>` as a wrapper for the repo header data (description + labels)
++ adds `<div class="lugit-repo-content">` as a wrapper for the repo content (files, commits, branches, etc.)
+
+Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
+
+```diff
+- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
++ <div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IIsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
+```
+
+Adds the class `lugit-repo-list-view` to the container of the repo content (only when we are not viewing a file or in blame view). This allows us to change the layout of the main repo view, except when viewing a file or in blame view.

dist/public/assets/css/theme-auto.css

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

dist/public/assets/img/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" height="32"><path d="M32 0v160H0V0Zm48 0v32h48v32H80V32H48v64h80v32H72v32h88V0Z" style="fill:#a6c6f7"/></svg>

dist/public/assets/img/loading.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 160">
-  <defs>
-    <style>
-      .a, .b {
-        fill: #a6c6f7;
-      }
-
-      .a {
-        opacity: 0.4;
-      }
-    </style>
-  </defs>
-  <path class="a" d="M432,48V80H320V48h48V0h32V48ZM48,80H80V0H48Zm96,0h32V32H144ZM0,80H32V0H0ZM224,0V32h48V64H224V32H192V80H304V0ZM352,0H320V32h32Z"/>
-  <path class="b" d="M352,160H320V80h32Zm48-32V80H368v80h80V128ZM80,80H48v48H80Zm64,0v48H80v32h96V80ZM32,80H0v80H32Zm160,0V96h80v32H216v32h88V80Z"/>
-</svg>

dist/public/assets/img/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 160" height="32"><path d="M32 0v160H0V0Zm368 128V80.701h32V48h-32V0h-32v48h-48v112h32V80.701h16V160h80v-32ZM48 0v128h32V0Zm96 32v96H80v32h96V32Zm80-32v32h48v32h-48V32h-32v64h80v32h-56v32h88V0Zm128 0h-32v32h32Z" style="fill:#a6c6f7"/></svg>

dist/templates/base/head_navbar.tmpl

@@ -1,205 +0,0 @@
-{{$notificationUnreadCount := 0}}
-{{if and .IsSigned .NotificationUnreadCount}}
-	{{$notificationUnreadCount = call .NotificationUnreadCount}}
-{{end}}
-
-<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
-	<div class="navbar-left ui secondary menu">
-		<!-- the logo -->
-		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
-			<img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-		</a>
-
-		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right">
-			{{if .IsSigned}}
-			<a id="mobile-notifications-icon" class="item gt-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
-		</div>
-
-		<!-- navbar links non-mobile -->
-		{{if and .IsSigned .MustChangePassword}}
-			{{/* No links */}}
-		{{else if .IsSigned}}
-			{{if not .UnitIssuesGlobalDisabled}}
-				<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{ctx.Locale.Tr "issues"}}</a>
-			{{end}}
-			{{if not .UnitPullsGlobalDisabled}}
-				<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{ctx.Locale.Tr "pull_requests"}}</a>
-			{{end}}
-			{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
-				{{if .ShowMilestonesDashboardPage}}
-					<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
-				{{end}}
-			{{end}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{else if .IsLandingPageOrganizations}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a>
-		{{else}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{end}}
-
-		{{template "custom/extra_links" .}}
-
-		{{if not .IsSigned}}
-			<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a>
-		{{end}}
-	</div>
-
-	<!-- the full dropdown menus -->
-	<div class="navbar-right ui secondary menu">
-		{{if and .IsSigned .MustChangePassword}}
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else if .IsSigned}}
-			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
-				<div class="gt-relative">
-					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
-				</div>
-				<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
-			</a>
-			<div class="active-stopwatch-popup item tippy-target gt-p-3">
-				<div class="gt-df gt-ac">
-					<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui primary label stopwatch-time gt-my-0 gt-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
-							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
-						</span>
-					</a>
-					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
-						>{{svg "octicon-square-fill"}}</button>
-					</form>
-					<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
-						>{{svg "octicon-trash"}}</button>
-					</form>
-				</div>
-			</div>
-			{{end}}
-
-			<a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
-				<span class="text">
-					{{svg "octicon-plus"}}
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-					<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
-				</span>
-				<div class="menu">
-					<a class="item" href="{{AppSubUrl}}/repo/create">
-						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
-					</a>
-					{{if not .DisableMigrations}}
-						<a class="item" href="{{AppSubUrl}}/repo/migrate">
-							{{svg "octicon-repo-push"}} {{ctx.Locale.Tr "new_migrate"}}
-						</a>
-					{{end}}
-					{{if .SignedUser.CanCreateOrganization}}
-					<a class="item" href="{{AppSubUrl}}/org/create">
-						{{svg "octicon-organization"}} {{ctx.Locale.Tr "new_org"}}
-					</a>
-					{{end}}
-				</div><!-- end content create new menu -->
-			</div><!-- end dropdown menu create new -->
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item" href="{{.SignedUser.HomeLink}}">
-						{{svg "octicon-person"}}
-						{{ctx.Locale.Tr "your_profile"}}
-					</a>
-					{{if not .DisableStars}}
-						<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
-							{{svg "octicon-star"}}
-							{{ctx.Locale.Tr "your_starred"}}
-						</a>
-					{{end}}
-					<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
-						{{svg "octicon-bell"}}
-						{{ctx.Locale.Tr "notification.subscriptions"}}
-					</a>
-					<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
-						{{svg "octicon-tools"}}
-						{{ctx.Locale.Tr "your_settings"}}
-					</a>
-					<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">
-						{{svg "octicon-question"}}
-						{{ctx.Locale.Tr "help"}}
-					</a>
-					{{if .IsAdmin}}
-						<div class="divider"></div>
-
-						<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
-							{{svg "octicon-server"}}
-							{{ctx.Locale.Tr "admin_panel"}}
-						</a>
-					{{end}}
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else}}
-			{{if .ShowRegistrationButton}}
-				<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
-					{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}
-				</a>
-			{{end}}
-			<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
-				{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
-			</a>
-		{{end}}
-	</div><!-- end full right menu -->
-</nav>

dist/templates/home.tmpl

@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
-	<div class="gt-mb-5 gt-px-5">
-		<div class="center">
-			<img class="logo" width="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

dist/templates/repo/home.tmpl

@@ -1,170 +0,0 @@
-{{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
-	{{template "repo/header" .}}
-	<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
-		<div class="lugit-repo-header-data">
-			{{template "base/alert" .}}
-			{{template "repo/code/recently_pushed_new_branches" .}}
-			{{if and (not .HideRepoInfo) (not .IsBlame)}}
-			<div class="ui repo-description gt-word-break">
-				<div id="repo-desc" class="gt-font-16">
-					<h5>{{ctx.Locale.Tr "repo.repo_desc"}}</h5>
-					{{$description := .Repository.DescriptionHTML $.Context}}
-					{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
-					<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
-				</div>
-				{{if .RepoSearchEnabled}}
-					<div class="ui repo-search">
-						<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
-							<div class="field">
-								<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{ctx.Locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
-									<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "repo.search.search_repo"}}">
-									{{if .CodeIndexerUnavailable}}
-										<i class="icon">{{svg "octicon-alert"}}</i>
-									{{end}}
-									<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
-										{{svg "octicon-search"}}
-									</button>
-								</div>
-							</div>
-						</form>
-					</div>
-				{{end}}
-			</div>
-			<div class="gt-df gt-ac gt-fw gt-gap-2" id="repo-topics">
-				{{range .Topics}}<a class="ui repo-topic large label topic gt-m-0" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-				{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg gt-font-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
-			</div>
-			{{end}}
-			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-			<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
-				<div class="field gt-f1 gt-mr-3">
-					<div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
-						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
-						{{range .Topics}}
-							{{/* keey the same layout as Fomantic UI generated labels */}}
-							<a class="ui label transition visible gt-cursor-default gt-dib" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
-						{{end}}
-						<div class="text"></div>
-					</div>
-				</div>
-				<div>
-					<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
-					<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
-				</div>
-			</div>
-			{{end}}
-			{{if .Repository.IsArchived}}
-				<div class="ui warning message gt-text-center">
-					{{if .Repository.ArchivedUnix.IsZero}}
-						{{ctx.Locale.Tr "repo.archive.title"}}
-					{{else}}
-						{{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix) | Safe}}
-					{{end}}
-				</div>
-			{{end}}
-		</div>
-		<div class="lugit-repo-content">
-			{{template "repo/sub_menu" .}}
-			<div class="repo-button-row">
-				<div class="gt-df gt-ac gt-fw gt-gap-y-3">
-					{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
-					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
-						{{$cmpBranch := ""}}
-						{{if ne .Repository.ID .BaseRepo.ID}}
-							{{$cmpBranch = printf "%s/%s:" (.Repository.OwnerName|PathEscape) (.Repository.Name|PathEscape)}}
-						{{end}}
-						{{$cmpBranch = print $cmpBranch (.BranchName|PathEscapeSegments)}}
-						{{$compareLink := printf "%s/compare/%s...%s" .BaseRepo.Link (.BaseRepo.DefaultBranch|PathEscapeSegments) $cmpBranch}}
-						<a id="new-pull-request" role="button" class="ui compact basic button" href="{{$compareLink}}"
-							data-tooltip-content="{{if .PullRequestCtx.Allowed}}{{ctx.Locale.Tr "repo.pulls.compare_changes"}}{{else}}{{ctx.Locale.Tr "action.compare_branch"}}{{end}}">
-							{{svg "octicon-git-pull-request"}}
-						</a>
-					{{end}}
-					<!-- Show go to file and breadcrumbs if not on home page -->
-					{{$n := len .TreeNames}}
-					{{$l := Eval $n "-" 1}}
-					{{if eq $n 0}}
-						<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
-					{{end}}
-
-					{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-						<button class="ui dropdown basic compact jump button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-							{{ctx.Locale.Tr "repo.editor.add_file"}}
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-							<div class="menu">
-								<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.new_file"}}
-								</a>
-								{{if .RepositoryUploadEnabled}}
-								<a class="item" href="{{.RepoLink}}/_upload/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.upload_file"}}
-								</a>
-								{{end}}
-								<a class="item" href="{{.RepoLink}}/_diffpatch/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
-									{{ctx.Locale.Tr "repo.editor.patch"}}
-								</a>
-							</div>
-						</button>
-					{{end}}
-
-					{{if and (eq $n 0) (.Repository.IsTemplate)}}
-						<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
-							{{ctx.Locale.Tr "repo.use_template"}}
-						</a>
-					{{end}}
-					{{if ne $n 0}}
-						<span class="breadcrumb repo-path gt-ml-2">
-							<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
-							{{- range $i, $v := .TreeNames -}}
-								<span class="breadcrumb-divider">/</span>
-								{{- if eq $i $l -}}
-									<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
-								{{- else -}}
-									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span>
-								{{- end -}}
-							{{- end -}}
-						</span>
-					{{end}}
-				</div>
-				<div class="gt-df gt-ac">
-					<!-- Only show clone panel in repository home page -->
-					{{if eq $n 0}}
-						<div class="ui action tiny input" id="clone-panel">
-							{{template "repo/clone_buttons" .}}
-							<button id="more-btn" class="ui basic small compact jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
-								{{svg "octicon-kebab-horizontal"}}
-								<div class="menu">
-									{{if not $.DisableDownloadSourceArchives}}
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
-										{{if .CitiationExist}}
-											<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
-										{{end}}
-									{{end}}
-									<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.clone_in_vsc"}}</a>
-								</div>
-							</button>
-							{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
-						</div>
-						{{template "repo/cite/cite_modal" .}}
-					{{end}}
-					{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
-						<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-							{{svg "octicon-history" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.file_history"}}
-						</a>
-					{{end}}
-				</div>
-			</div>
-			{{if .IsViewFile}}
-				{{template "repo/view_file" .}}
-			{{else if .IsBlame}}
-				{{template "repo/blame" .}}
-			{{else}}
-				{{template "repo/view_list" .}}
-			{{end}}
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lucas-labs/lugit-theme",
-    "version": "0.1.0",
+    "version": "0.2.1",
     "type": "module",
     "description": "Custom theme for lucaslabs' internal git server",
     "main": "index.js",

src/templates/base/head_navbar.tmpl

@@ -1,205 +1,214 @@
-{{$notificationUnreadCount := 0}}
-{{if and .IsSigned .NotificationUnreadCount}}
-	{{$notificationUnreadCount = call .NotificationUnreadCount}}
-{{end}}
-
-<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
-	<div class="navbar-left ui secondary menu">
-		<!-- the logo -->
-		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
-			<img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-		</a>
-
-		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
-		<div class="ui secondary menu item navbar-mobile-right">
-			{{if .IsSigned}}
-			<a id="mobile-notifications-icon" class="item gt-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-			{{end}}
-			<button class="item gt-w-auto ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
-		</div>
-
-		<!-- navbar links non-mobile -->
-		{{if and .IsSigned .MustChangePassword}}
-			{{/* No links */}}
-		{{else if .IsSigned}}
-			{{if not .UnitIssuesGlobalDisabled}}
-				<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{ctx.Locale.Tr "issues"}}</a>
-			{{end}}
-			{{if not .UnitPullsGlobalDisabled}}
-				<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{ctx.Locale.Tr "pull_requests"}}</a>
-			{{end}}
-			{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
-				{{if .ShowMilestonesDashboardPage}}
-					<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
-				{{end}}
-			{{end}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{else if .IsLandingPageOrganizations}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a>
-		{{else}}
-			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
-		{{end}}
-
-		{{template "custom/extra_links" .}}
-
-		{{if not .IsSigned}}
-			<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a>
-		{{end}}
-	</div>
-
-	<!-- the full dropdown menus -->
-	<div class="navbar-right ui secondary menu">
-		{{if and .IsSigned .MustChangePassword}}
-			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else if .IsSigned}}
-			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
-				<div class="gt-relative">
-					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
-				</div>
-				<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
-			</a>
-			<div class="active-stopwatch-popup item tippy-target gt-p-3">
-				<div class="gt-df gt-ac">
-					<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui primary label stopwatch-time gt-my-0 gt-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
-							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
-						</span>
-					</a>
-					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
-						>{{svg "octicon-square-fill"}}</button>
-					</form>
-					<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
-						{{.CsrfTokenHtml}}
-						<button
-							type="submit"
-							class="ui button mini compact basic icon"
-							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
-						>{{svg "octicon-trash"}}</button>
-					</form>
-				</div>
-			</div>
-			{{end}}
-
-			<a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
-				<div class="gt-relative">
-					{{svg "octicon-bell"}}
-					<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
-				</div>
-			</a>
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
-				<span class="text">
-					{{svg "octicon-plus"}}
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-					<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
-				</span>
-				<div class="menu">
-					<a class="item" href="{{AppSubUrl}}/repo/create">
-						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
-					</a>
-					{{if not .DisableMigrations}}
-						<a class="item" href="{{AppSubUrl}}/repo/migrate">
-							{{svg "octicon-repo-push"}} {{ctx.Locale.Tr "new_migrate"}}
-						</a>
-					{{end}}
-					{{if .SignedUser.CanCreateOrganization}}
-					<a class="item" href="{{AppSubUrl}}/org/create">
-						{{svg "octicon-organization"}} {{ctx.Locale.Tr "new_org"}}
-					</a>
-					{{end}}
-				</div><!-- end content create new menu -->
-			</div><!-- end dropdown menu create new -->
-
-			<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
-				<span class="text gt-df gt-ac">
-					{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
-					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
-					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
-				</span>
-				<div class="menu user-menu">
-					<div class="ui header">
-						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
-					</div>
-
-					<div class="divider"></div>
-					<a class="item" href="{{.SignedUser.HomeLink}}">
-						{{svg "octicon-person"}}
-						{{ctx.Locale.Tr "your_profile"}}
-					</a>
-					{{if not .DisableStars}}
-						<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
-							{{svg "octicon-star"}}
-							{{ctx.Locale.Tr "your_starred"}}
-						</a>
-					{{end}}
-					<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
-						{{svg "octicon-bell"}}
-						{{ctx.Locale.Tr "notification.subscriptions"}}
-					</a>
-					<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
-						{{svg "octicon-tools"}}
-						{{ctx.Locale.Tr "your_settings"}}
-					</a>
-					<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">
-						{{svg "octicon-question"}}
-						{{ctx.Locale.Tr "help"}}
-					</a>
-					{{if .IsAdmin}}
-						<div class="divider"></div>
-
-						<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
-							{{svg "octicon-server"}}
-							{{ctx.Locale.Tr "admin_panel"}}
-						</a>
-					{{end}}
-
-					<div class="divider"></div>
-					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
-						{{svg "octicon-sign-out"}}
-						{{ctx.Locale.Tr "sign_out"}}
-					</a>
-				</div><!-- end content avatar menu -->
-			</div><!-- end dropdown avatar menu -->
-		{{else}}
-			{{if .ShowRegistrationButton}}
-				<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
-					{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}
-				</a>
-			{{end}}
-			<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
-				{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
-			</a>
-		{{end}}
-	</div><!-- end full right menu -->
-</nav>
+{{$notificationUnreadCount := 0}}
+{{if and .IsSigned .NotificationUnreadCount}}
+	{{$notificationUnreadCount = call .NotificationUnreadCount}}
+{{end}}
+
+<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
+	<div class="navbar-left">
+		<!-- the logo -->
+		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
+			<img height="20" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+		</a>
+
+		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
+		<div class="ui secondary menu item navbar-mobile-right only-mobile">
+			{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
+			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
+				<div class="tw-relative">
+					{{svg "octicon-stopwatch"}}
+					<span class="header-stopwatch-dot"></span>
+				</div>
+			</a>
+			{{end}}
+			{{if .IsSigned}}
+			<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
+				<div class="tw-relative">
+					{{svg "octicon-bell"}}
+					<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
+				</div>
+			</a>
+			{{end}}
+			<button class="item tw-w-auto ui icon mini button tw-p-2 tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{svg "octicon-three-bars"}}</button>
+		</div>
+
+		<!-- navbar links non-mobile -->
+		{{if and .IsSigned .MustChangePassword}}
+			{{/* No links */}}
+		{{else if .IsSigned}}
+			{{if not .UnitIssuesGlobalDisabled}}
+				<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{ctx.Locale.Tr "issues"}}</a>
+			{{end}}
+			{{if not .UnitPullsGlobalDisabled}}
+				<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{ctx.Locale.Tr "pull_requests"}}</a>
+			{{end}}
+			{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
+				{{if .ShowMilestonesDashboardPage}}
+					<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
+				{{end}}
+			{{end}}
+			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
+		{{else if .IsLandingPageOrganizations}}
+			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a>
+		{{else}}
+			<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a>
+		{{end}}
+
+		{{template "custom/extra_links" .}}
+
+		{{if not .IsSigned}}
+			<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a>
+		{{end}}
+	</div>
+
+	<!-- the full dropdown menus -->
+	<div class="navbar-right">
+		{{if and .IsSigned .MustChangePassword}}
+			<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
+				<span class="text tw-flex tw-items-center">
+					{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
+					<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
+					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+				</span>
+				<div class="menu user-menu">
+					<div class="ui header">
+						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
+					</div>
+
+					<div class="divider"></div>
+					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
+						{{svg "octicon-sign-out"}}
+						{{ctx.Locale.Tr "sign_out"}}
+					</a>
+				</div><!-- end content avatar menu -->
+			</div><!-- end dropdown avatar menu -->
+		{{else if .IsSigned}}
+			{{if and EnableTimetracking .ActiveStopwatch}}
+			<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
+				<div class="tw-relative">
+					{{svg "octicon-stopwatch"}}
+					<span class="header-stopwatch-dot"></span>
+				</div>
+			</a>
+			{{end}}
+
+			<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
+				<div class="tw-relative">
+					{{svg "octicon-bell"}}
+					<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
+				</div>
+			</a>
+
+			<div class="ui dropdown jump item tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
+				<span class="text">
+					{{svg "octicon-plus"}}
+					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+					<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
+				</span>
+				<div class="menu">
+					<a class="item" href="{{AppSubUrl}}/repo/create">
+						{{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
+					</a>
+					{{if not .DisableMigrations}}
+						<a class="item" href="{{AppSubUrl}}/repo/migrate">
+							{{svg "octicon-repo-push"}} {{ctx.Locale.Tr "new_migrate"}}
+						</a>
+					{{end}}
+					{{if .SignedUser.CanCreateOrganization}}
+					<a class="item" href="{{AppSubUrl}}/org/create">
+						{{svg "octicon-organization"}} {{ctx.Locale.Tr "new_org"}}
+					</a>
+					{{end}}
+				</div><!-- end content create new menu -->
+			</div><!-- end dropdown menu create new -->
+
+			<div class="ui dropdown jump item tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
+				<span class="text tw-flex tw-items-center">
+					{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
+					<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
+					<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
+				</span>
+				<div class="menu user-menu">
+					<div class="ui header">
+						{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
+					</div>
+
+					<div class="divider"></div>
+					<a class="item" href="{{.SignedUser.HomeLink}}">
+						{{svg "octicon-person"}}
+						{{ctx.Locale.Tr "your_profile"}}
+					</a>
+					{{if not .DisableStars}}
+						<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
+							{{svg "octicon-star"}}
+							{{ctx.Locale.Tr "your_starred"}}
+						</a>
+					{{end}}
+					<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
+						{{svg "octicon-bell"}}
+						{{ctx.Locale.Tr "notification.subscriptions"}}
+					</a>
+					<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
+						{{svg "octicon-tools"}}
+						{{ctx.Locale.Tr "your_settings"}}
+					</a>
+					<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">
+						{{svg "octicon-question"}}
+						{{ctx.Locale.Tr "help"}}
+					</a>
+					{{if .IsAdmin}}
+						<div class="divider"></div>
+
+						<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
+							{{svg "octicon-server"}}
+							{{ctx.Locale.Tr "admin_panel"}}
+						</a>
+					{{end}}
+
+					<div class="divider"></div>
+					<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout">
+						{{svg "octicon-sign-out"}}
+						{{ctx.Locale.Tr "sign_out"}}
+					</a>
+				</div><!-- end content avatar menu -->
+			</div><!-- end dropdown avatar menu -->
+		{{else}}
+			{{if .ShowRegistrationButton}}
+				<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
+					{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}
+				</a>
+			{{end}}
+			<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
+				{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
+			</a>
+		{{end}}
+	</div><!-- end full right menu -->
+
+	{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
+		<div class="active-stopwatch-popup tippy-target">
+			<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
+				<a class="stopwatch-link tw-flex tw-items-center tw-gap-2 muted" href="{{.ActiveStopwatch.IssueLink}}">
+					{{svg "octicon-issue-opened" 16}}
+					<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
+				</a>
+				<div class="tw-flex tw-gap-1">
+					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
+						{{.CsrfTokenHtml}}
+						<button
+							type="submit"
+							class="ui button mini compact basic icon tw-mr-0"
+							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
+						>{{svg "octicon-square-fill"}}</button>
+					</form>
+					<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
+						{{.CsrfTokenHtml}}
+						<button
+							type="submit"
+							class="ui button mini compact basic icon tw-mr-0"
+							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
+						>{{svg "octicon-trash"}}</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	{{end}}
+</nav>

src/templates/home.tmpl

@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}" class="page-content home">
-	<div class="gt-mb-5 gt-px-5">
+	<div class="tw-mb-8 tw-px-8">
 		<div class="center">
-			<img class="logo" width="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.locale.Tr "logo"}}">
+			<img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}">
 		</div>
 	</div>
 </div>

src/templates/repo/home.tmpl

@@ -1,52 +1,31 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
 	{{template "repo/header" .}}
-	<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame)}}lugit-repo-list-view{{end}}">
+	<div class="ui container {{if .IsBlame}}fluid padded{{end}} {{if and (not .IsViewFile) (not .IsBlame) (not .HideRepoInfo)}}lugit-repo-list-view{{end}}">
 		<div class="lugit-repo-header-data">
 			{{template "base/alert" .}}
 			{{template "repo/code/recently_pushed_new_branches" .}}
 			{{if and (not .HideRepoInfo) (not .IsBlame)}}
-			<div class="ui repo-description gt-word-break">
-				<div id="repo-desc" class="gt-font-16">
-					<h5>{{ctx.Locale.Tr "repo.repo_desc"}}</h5>
-					{{$description := .Repository.DescriptionHTML $.Context}}
-					{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
-					<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
-				</div>
-				{{if .RepoSearchEnabled}}
-					<div class="ui repo-search">
-						<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
-							<div class="field">
-								<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{ctx.Locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
-									<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{ctx.Locale.Tr "repo.search.search_repo"}}">
-									{{if .CodeIndexerUnavailable}}
-										<i class="icon">{{svg "octicon-alert"}}</i>
-									{{end}}
-									<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
-										{{svg "octicon-search"}}
-									</button>
-								</div>
-							</div>
-						</form>
-					</div>
-				{{end}}
+			<div class="repo-description gt-word-break">
+				{{- $description := .Repository.DescriptionHTML ctx -}}
+				{{if $description}}{{$description | RenderCodeBlock}}{{end}}
+				{{if .Repository.Website}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
 			</div>
-			<div class="gt-df gt-ac gt-fw gt-gap-2" id="repo-topics">
-				{{range .Topics}}<a class="ui repo-topic large label topic gt-m-0" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-				{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg gt-font-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
+			<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
+				{{/* it should match the code in issue-home.js */}}
+				{{range .Topics}}<a class="repo-topic ui large label" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+				{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 			</div>
 			{{end}}
 			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-			<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
-				<div class="field gt-f1 gt-mr-3">
-					<div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{ctx.Locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{ctx.Locale.Tr "repo.topic.format_prompt"}}">
-						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
-						{{range .Topics}}
-							{{/* keey the same layout as Fomantic UI generated labels */}}
-							<a class="ui label transition visible gt-cursor-default gt-dib" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
-						{{end}}
-						<div class="text"></div>
-					</div>
+			<div class="ui form tw-hidden tw-flex tw-gap-2 tw-my-2" id="topic_edit">
+				<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
+					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
+					{{range .Topics}}
+						{{/* keep the same layout as Fomantic UI generated labels */}}
+						<a class="ui label transition visible tw-cursor-default tw-inline-block" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+					{{end}}
+					<div class="text"></div>
 				</div>
 				<div>
 					<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
@@ -55,20 +34,23 @@
 			</div>
 			{{end}}
 			{{if .Repository.IsArchived}}
-				<div class="ui warning message gt-text-center">
+				<div class="ui warning message tw-text-center">
 					{{if .Repository.ArchivedUnix.IsZero}}
 						{{ctx.Locale.Tr "repo.archive.title"}}
 					{{else}}
-						{{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix) | Safe}}
+						{{ctx.Locale.Tr "repo.archive.title_date" (DateTime "long" .Repository.ArchivedUnix)}}
 					{{end}}
 				</div>
 			{{end}}
 		</div>
 		<div class="lugit-repo-content">
 			{{template "repo/sub_menu" .}}
-			<div class="repo-button-row">
-				<div class="gt-df gt-ac gt-fw gt-gap-y-3">
-					{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
+			{{$n := len .TreeNames}}
+			{{$l := Eval $n "-" 1}}
+			{{$isHomepage := (eq $n 0)}}
+			<div class="repo-button-row" data-is-homepage="{{$isHomepage}}">
+				<div class="repo-button-row-left">
+					{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
 					{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 						{{$cmpBranch := ""}}
 						{{if ne .Repository.ID .BaseRepo.ID}}
@@ -82,14 +64,12 @@
 						</a>
 					{{end}}
 					<!-- Show go to file and breadcrumbs if not on home page -->
-					{{$n := len .TreeNames}}
-					{{$l := Eval $n "-" 1}}
-					{{if eq $n 0}}
+					{{if $isHomepage}}
 						<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
 					{{end}}
 
 					{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-						<button class="ui dropdown basic compact jump button gt-mr-2"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+						<button class="ui dropdown basic compact jump button"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
 							{{ctx.Locale.Tr "repo.editor.add_file"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
@@ -108,51 +88,62 @@
 						</button>
 					{{end}}
 
-					{{if and (eq $n 0) (.Repository.IsTemplate)}}
+					{{if and $isHomepage (.Repository.IsTemplate)}}
 						<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
 							{{ctx.Locale.Tr "repo.use_template"}}
 						</a>
 					{{end}}
-					{{if ne $n 0}}
-						<span class="breadcrumb repo-path gt-ml-2">
+					{{if $isHomepage}}
+						{{/* only show the "code search" on the repo home page, it only does global search,
+							so do not show it when viewing file or directory to avoid misleading users (it doesn't search in a directory) */}}
+						<form class="ignore-dirty tw-flex tw-flex-1" action="{{.RepoLink}}/search" method="get">
+							<div class="ui small action input tw-flex-1">
+								<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
+								{{template "shared/search/button"}}
+							</div>
+						</form>
+					{{else}}
+						<span class="breadcrumb repo-path tw-ml-1">
 							<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
 							{{- range $i, $v := .TreeNames -}}
 								<span class="breadcrumb-divider">/</span>
 								{{- if eq $i $l -}}
-									<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
+									<span class="active section" title="{{$v}}">{{$v}}</span>
 								{{- else -}}
-									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span>
+									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
 								{{- end -}}
 							{{- end -}}
 						</span>
 					{{end}}
 				</div>
-				<div class="gt-df gt-ac">
+				<div class="repo-button-row-right">
 					<!-- Only show clone panel in repository home page -->
-					{{if eq $n 0}}
-						<div class="ui action tiny input" id="clone-panel">
+					{{if $isHomepage}}
+						<div class="clone-panel ui action tiny input">
 							{{template "repo/clone_buttons" .}}
-							<button id="more-btn" class="ui basic small compact jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
+							<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
 								{{svg "octicon-kebab-horizontal"}}
 								<div class="menu">
 									{{if not $.DisableDownloadSourceArchives}}
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
-										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
-										{{if .CitiationExist}}
-											<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
-										{{end}}
+										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_zip"}}</a>
+										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_tar"}}</a>
+										<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.RefName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.download_bundle"}}</a>
+									{{end}}
+									{{if .CitiationExist}}
+										<a class="item" id="cite-repo-button">{{svg "octicon-cross-reference" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.cite_this_repo"}}</a>
+									{{end}}
+									{{range .OpenWithEditorApps}}
+										<a class="item js-clone-url-editor" data-href-template="{{.OpenURL}}">{{.IconHTML}}{{ctx.Locale.Tr "repo.open_with_editor" .DisplayName}}</a>
 									{{end}}
-									<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.clone_in_vsc"}}</a>
 								</div>
 							</button>
 							{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
 						</div>
 						{{template "repo/cite/cite_modal" .}}
 					{{end}}
-					{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
+					{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
 						<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
-							{{svg "octicon-history" 16 "gt-mr-3"}}{{ctx.Locale.Tr "repo.file_history"}}
+							{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
 						</a>
 					{{end}}
 				</div>
@@ -161,9 +152,10 @@
 				{{template "repo/view_file" .}}
 			{{else if .IsBlame}}
 				{{template "repo/blame" .}}
-			{{else}}
+			{{else}}{{/* IsViewDirectory */}}
 				{{template "repo/view_list" .}}
 			{{end}}
+			
 		</div>
 	</div>
 </div>

src/themes/scss/dark.scss

@@ -1,82 +1,83 @@
-@use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
-@use './theme' as theme;
-
-$is-dark: true;
-
-$brand: #a6c6f7;
-
-$colors: (
-    theme: (
-        'rosewater':  c.variants(#f5e0dc, $is-dark),
-        'flamingo':   c.variants(#f2cdcd, $is-dark),
-        'pink':       c.variants(#f5c2e7, $is-dark),
-        'mauve':      c.variants($brand, $is-dark),
-        'red':        c.variants(#f38ba8, $is-dark),
-        'maroon':     c.variants(#eba0ac, $is-dark),
-        'peach':      c.variants(#fab387, $is-dark),
-        'yellow':     c.variants(#f9e2af, $is-dark),
-        'green':      c.variants($brand, $is-dark),
-        'dark-green': c.variants(#00E676, $is-dark),
-        'teal':       c.variants(#94e2d5, $is-dark),
-        'sky':        c.variants(#89dceb, $is-dark),
-        'sapphire':   c.variants(#74c7ec, $is-dark),
-        'blue':       c.variants(#89b4fa, $is-dark),
-        'lavender':   c.variants(#b4befe, $is-dark),
-        'black':      c.variants(#181825, $is-dark),
-        'white':      c.variants(#e6edf3, $is-dark),
-    ),    
-    text: #e6edf3,
-    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
-    elevation: (
-        '1': #000000,  // crust
-        '2': #040407,  // mantle
-        '3': #07070f,  // base
-        '4': #161720,  // surface0
-        '5': #1a1a25,  // surface1
-        '6': #222330,  // surface2
-        '7': #393c4d,  // overlay0
-        '8': #515569,  // overlay1
-        '9': #6b7188,  // overlay2
-        '10': #868ca5, // subtext0
-        '11': #9aa2c2, // subtext1
-        '12': #b6c0e0, // 
-    )
-);
-
-// init lui-micro, css-vars only (no reboot, no basic)
-@include lui.init(
-    $theme: (
-        colors: $colors,
-        variables: (
-            'base-font-size': 14px,
-            'font-family': '"Outfit", Inter, Roboto, sans-serif',
-            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
-            'measure': (
-                '.25x': 4px,
-                '.5x': 8px,
-                '1x': 16px,
-                '1.25x': 20px,
-                '1.5x': 24px,
-                '2x': 32px,
-                '3x': 48px,
-                '4x': 64px,
-            ),
-            'repo-home': (
-                'sidebar-width': 296px,
-            )
-        ),
-    ),
-    
-    $options: (
-        reboot: false,
-        basic: false,
-        fg-var-name: 'text',
-        bg-var-name: 'elevation/1',
-    ),
-);
-
-@include theme.make-theme(
-    $is-dark: $is-dark,
+@use '@lucas-labs/lui-micro' as lui;
+@use './utils/color-utils' as c;
+@use './theme' as theme;
+
+$is-dark: true;
+
+$brand: #a6c6f7;
+
+$colors: (
+    theme: (
+        'rosewater':  c.variants(#f5e0dc, $is-dark),
+        'flamingo':   c.variants(#f2cdcd, $is-dark),
+        'pink':       c.variants(#f5c2e7, $is-dark),
+        'mauve':      c.variants(#9b6bf5, $is-dark),
+        'red':        c.variants(#f38ba8, $is-dark),
+        'maroon':     c.variants(#eba0ac, $is-dark),
+        'peach':      c.variants(#fab387, $is-dark),
+        'yellow':     c.variants(#f9e2af, $is-dark),
+        'green':      c.variants($brand, $is-dark),
+        'dark-green': c.variants(#00E676, $is-dark),
+        'teal':       c.variants(#94e2d5, $is-dark),
+        'sky':        c.variants(#89dceb, $is-dark),
+        'sapphire':   c.variants(#74c7ec, $is-dark),
+        'blue':       c.variants(#89b4fa, $is-dark),
+        'lavender':   c.variants(#b4befe, $is-dark),
+        'black':      c.variants(#181825, $is-dark),
+        'white':      c.variants(#e6edf3, $is-dark),
+    ),    
+    text: #e6edf3,
+    primary: c.variants($brand, $is-dark),
+    secondary: c.variants(#5d5f7a, $is-dark),
+    elevation: (
+        '1': #000000,  // crust
+        '2': #040407,  // mantle
+        '3': #07070f,  // base
+        '4': #161720,  // surface0
+        '5': #1a1a25,  // surface1
+        '6': #222330,  // surface2
+        '7': #393c4d,  // overlay0
+        '8': #515569,  // overlay1
+        '9': #6b7188,  // overlay2
+        '10': #868ca5, // subtext0
+        '11': #9aa2c2, // subtext1
+        '12': #b6c0e0, // 
+    )
+);
+
+// init lui-micro, css-vars only (no reboot, no basic)
+@include lui.init(
+    $theme: (
+        colors: $colors,
+        variables: (
+            'small-font-size': 12px,
+            'base-font-size': 14px,
+            'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
+            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
+            'measure': (
+                '.25x': 4px,
+                '.5x': 8px,
+                '1x': 16px,
+                '1.25x': 20px,
+                '1.5x': 24px,
+                '2x': 32px,
+                '3x': 48px,
+                '4x': 64px,
+            ),
+            'repo-home': (
+                'sidebar-width': 296px,
+            )
+        ),
+    ),
+    
+    $options: (
+        reboot: false,
+        basic: false,
+        fg-var-name: 'text',
+        bg-var-name: 'elevation/1',
+    ),
+);
+
+@include theme.make-theme(
+    $is-dark: $is-dark,
 );

src/themes/scss/light.scss

@@ -1,82 +1,83 @@
-@use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
-@use './theme' as theme;
-
-$is-dark: true;
-
-$brand: #6296e2;
-
-$colors: (
-    theme: (
-        'rosewater':  c.variants(#dc8a78, $is-dark),
-        'flamingo':   c.variants(#dd7878, $is-dark),
-        'pink':       c.variants(#ea76cb, $is-dark),
-        'mauve':      c.variants($brand, $is-dark),
-        'red':        c.variants(#d20f39, $is-dark),
-        'maroon':     c.variants(#e64553, $is-dark),
-        'peach':      c.variants(#fe640b, $is-dark),
-        'yellow':     c.variants(#df8e1d, $is-dark),
-        'green':      c.variants($brand, $is-dark),
-        'dark-green': c.variants(#11752d, $is-dark),
-        'teal':       c.variants(#179299, $is-dark),
-        'sky':        c.variants(#04a5e5, $is-dark),
-        'sapphire':   c.variants(#209fb5, $is-dark),
-        'blue':       c.variants(#1e66f5, $is-dark),
-        'lavender':   c.variants(#7287fd, $is-dark),
-        'black':      c.variants(#181825, $is-dark),
-        'white':      c.variants(#e6edf3, $is-dark),
-    ),    
-    text: #4c4f69,
-    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
-    elevation: (
-        '1': #dce0e8,  // crust
-        '2': #e6e9ef,  // mantle
-        '3': #eff1f5,  // base
-        '4': #ccd0da,  // surface0
-        '5': #bcc0cc,  // surface1
-        '6': #acb0be,  // surface2
-        '7': #9ca0b0,  // overlay0
-        '8': #8c8fa1,  // overlay1
-        '9': #7c7f93,  // overlay2
-        '10': #6c6f85, // subtext0
-        '11': #5c5f77, // subtext1
-        '12': #4c4f69, // 
-    )
-);
-
-// init lui-micro, css-vars only (no reboot, no basic)
-@include lui.init(
-    $theme: (
-        colors: $colors,
-        variables: (
-            'base-font-size': 14px,
-            'font-family': '"Outfit", Inter, Roboto, sans-serif',
-            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
-            'measure': (
-                '.25x': 4px,
-                '.5x': 8px,
-                '1x': 16px,
-                '1.25x': 20px,
-                '1.5x': 24px,
-                '2x': 32px,
-                '3x': 48px,
-                '4x': 64px,
-            ),
-            'repo-home': (
-                'sidebar-width': 296px,
-            )
-        ),
-    ),
-    
-    $options: (
-        reboot: false,
-        basic: false,
-        fg-var-name: 'text',
-        bg-var-name: 'elevation/1',
-    ),
-);
-
-@include theme.make-theme(
-    $is-dark: $is-dark,
+@use '@lucas-labs/lui-micro' as lui;
+@use './utils/color-utils' as c;
+@use './theme' as theme;
+
+$is-dark: true;
+
+$brand: #6296e2;
+
+$colors: (
+    theme: (
+        'rosewater':  c.variants(#dc8a78, $is-dark),
+        'flamingo':   c.variants(#dd7878, $is-dark),
+        'pink':       c.variants(#ea76cb, $is-dark),
+        'mauve':      c.variants($brand, $is-dark),
+        'red':        c.variants(#d20f39, $is-dark),
+        'maroon':     c.variants(#e64553, $is-dark),
+        'peach':      c.variants(#fe640b, $is-dark),
+        'yellow':     c.variants(#df8e1d, $is-dark),
+        'green':      c.variants($brand, $is-dark),
+        'dark-green': c.variants(#11752d, $is-dark),
+        'teal':       c.variants(#179299, $is-dark),
+        'sky':        c.variants(#04a5e5, $is-dark),
+        'sapphire':   c.variants(#209fb5, $is-dark),
+        'blue':       c.variants(#1e66f5, $is-dark),
+        'lavender':   c.variants(#7287fd, $is-dark),
+        'black':      c.variants(#181825, $is-dark),
+        'white':      c.variants(#e6edf3, $is-dark),
+    ),    
+    text: #4c4f69,
+    primary: c.variants($brand, $is-dark),
+    secondary: c.variants(#5d5f7a, $is-dark),
+    elevation: (
+        '1': #dce0e8,  // crust
+        '2': #e6e9ef,  // mantle
+        '3': #eff1f5,  // base
+        '4': #ccd0da,  // surface0
+        '5': #bcc0cc,  // surface1
+        '6': #acb0be,  // surface2
+        '7': #9ca0b0,  // overlay0
+        '8': #8c8fa1,  // overlay1
+        '9': #7c7f93,  // overlay2
+        '10': #6c6f85, // subtext0
+        '11': #5c5f77, // subtext1
+        '12': #4c4f69, // 
+    )
+);
+
+// init lui-micro, css-vars only (no reboot, no basic)
+@include lui.init(
+    $theme: (
+        colors: $colors,
+        variables: (
+            'small-font-size': 12px,
+            'base-font-size': 14px,
+            'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
+            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
+            'measure': (
+                '.25x': 4px,
+                '.5x': 8px,
+                '1x': 16px,
+                '1.25x': 20px,
+                '1.5x': 24px,
+                '2x': 32px,
+                '3x': 48px,
+                '4x': 64px,
+            ),
+            'repo-home': (
+                'sidebar-width': 296px,
+            )
+        ),
+    ),
+    
+    $options: (
+        reboot: false,
+        basic: false,
+        fg-var-name: 'text',
+        bg-var-name: 'elevation/1',
+    ),
+);
+
+@include theme.make-theme(
+    $is-dark: $is-dark,
 );

src/themes/scss/theme/index.scss

@@ -58,6 +58,9 @@
         --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8);
         --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9);
 
+
+        --color-primary-hover: #{color.get('primary/light/3%')};
+        --color-primary-active: #{color.get('primary/light/6%')};
         --color-secondary: #{color.get('elevation/5')};
 
         --color-secondary-dark-1: #{color.get('secondary/light/3%')};
@@ -188,6 +191,7 @@
         --color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')};
         --color-git: #{color.get('theme/peach/base')};
         --color-label-bg: #{color.get('primary/base')};
+        --color-label-hover-bg: #{color.get('primary/light/6%')};
 
         /* target-based colors */
         --color-body: #{$lvl1};
@@ -230,13 +234,17 @@
         --color-secondary-bg: #{color.get('elevation/4')};
         --color-text-focus: #{color.get('text')};
         --color-expand-button: #{color.get('elevation/6')};
-        --color-placeholder-text: #{color.get('elevation/6')};
+        --color-placeholder-text: #{color.get('elevation/9')};
         --color-editor-line-highlight: var(--color-primary-light-5);
         --color-project-board-bg: #{color.get('elevation/2')};
         --color-caret: var(--color-text);
         --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
         --color-reaction-active-bg: var(--color-primary-alpha-40);
+        --color-tooltip-text: #{color.get('primary/base')};
+        --color-tooltip-bg: #{color.get('primary/base', 'contrast')};
         --color-nav-bg: #{$lvl2};
+        --color-secondary-nav-bg: #{$lvl2};
+        --color-nav-text: #{color.get('text')};
         --color-nav-hover-bg: #{color.get('elevation/6')};
         --color-label-active-bg: #{color.get('elevation/6')};
         --color-label-text: #{color.get('primary/base', 'contrast')};
@@ -344,15 +352,19 @@
         }
     }
 
-    .label.isSigned.isVerified {
+    .label.isSigned {
         margin: 0px .25em !important;
-        padding: 0;
-        display: inline-flex;
-        gap: 0px;
-        border-radius: 16px;
+        padding: 0 !important;
+        display: inline-flex !important;
+        gap: 0px !important;
+        border-radius: 16px !important;
 
+        --color-light-border: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
+        --color-label-bg: none !important;
+        --color-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
         --color-green-badge-bg: none !important;
         --color-green-badge-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important;
+        --color-label-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important;
         --color-label-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
         --color-green-badge: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
 
@@ -361,21 +373,44 @@
         }
 
         .ui.detail.icon.button {
-            opacity: 1;
-            padding: 4px 12px 4px 6px !important;
+            opacity: 1 !important;
+            padding: 4px 8px 4px 6px !important;
             margin: 0 !important;
             background: none !important;
             border-color: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
         }
+
+        &.isVerified {
+            .ui.detail.icon.button {
+                padding: 4px 12px 4px 6px !important;
+            }
+        }
     }
 
     #commits-table {
         --color-light: transparent !important;
     }
 
+    .flex-list {
+        .flex-item {
+            .flex-item-main {
+                gap: var.get('measure/.25x');
+
+                .flex-item-header {
+                    .flex-item-title {
+                        gap: var.get('measure/.5x');
+                    }
+                }
+
+                .flex-item-body:not(:last-child) {
+                    margin-bottom: var.get('measure/1x');
+                }
+            }
+        }
+    }
+
     @include chroma.make-chroma-styles;
     @include codemirror.make-code-mirror-styles;
     @include monaco.make-monaco-styles($is-dark: true);
-
     @include custom.apply-custom-styles;
 }

src/themes/scss/theme/modules/custom/_issue-content.scss

@@ -0,0 +1,16 @@
+@mixin apply-styles {
+    .issue-content {
+        img {
+            max-width: 100%;
+        }
+    }
+
+    .issue-content, .issue-list {
+        .labels-list {
+            .label {
+                
+            }
+        }
+    }
+    
+}

src/themes/scss/theme/modules/custom/_project.scss

@@ -1,19 +1,19 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-    #project-board {
-        .project-column-header {
-            .project-column-title {
-                .circular.label {
-                    display: flex;
-                    padding: 0 !important;
-                    align-items: center;
-                    justify-content: center;
-                    line-height: 16px;
-                    padding: 0 var.get('measure/.25x') !important;
-                }
-            }
-        }
-    }    
-}
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin apply-styles {
+    #project-board {
+        .project-column-header {
+            .project-column-title {
+                .circular.label {
+                    display: flex;
+                    padding: 0 !important;
+                    align-items: center;
+                    justify-content: center;
+                    line-height: 16px;
+                    padding: 0 var.get('measure/.25x') !important;
+                }
+            }
+        }
+    }    
+}

src/themes/scss/theme/modules/custom/_repo-header.scss

@@ -2,7 +2,7 @@
 @use '@lucas-labs/lui-micro/color' as color;
 
 @mixin apply-styles {
-    .header-wrapper {
+    .secondary-nav {
         display: flex;
         flex-direction: column;
         margin-bottom: var.get('measure/1x');
@@ -21,40 +21,34 @@
         .ui.tabs.divider {
             margin-bottom: 0;
         }
-        
-        .ui.tabular.menu.navbar {
+
+        overflow-menu {
             .item {
-                --item-margin-bottom: #{var.get('measure/1x')};
-                margin: var(--item-margin-bottom) var.get('measure/.5x');
-                border-radius: var.get('measure/.25x');
-                padding: var.get('measure/.5x') var.get('measure/.5x');
-                color: var(--color-text);
-                border: none;
+                --item-margin-bottom: #{var.get('measure/.5x')} !important;
+                margin: 0 var.get('measure/.5x') var(--item-margin-bottom) !important;
+                border-radius: var.get('measure/.25x') !important;
+                padding: var.get('measure/.5x') var.get('measure/.5x') !important;
+                color: var(--color-text) !important;
+                border: none !important;
+                position: relative; // Make the parent element positioned
 
                 svg {
-                    color: var(--color-text-light-3);
-                    margin-right: var.get('measure/.5x');
+                    color: var(--color-text-light-3) !important;
+                    margin-right: var.get('measure/.5x') !important;
+                }
+
+                &:hover {
+                    background-color: color.get('elevation/4') !important;
                 }
 
                 &.active {
-                    background-color: transparent;
-                    color: var(--color-text);
-                    border-radius: var.get('measure/.25x') !important;
-                    font-weight: normal;
-                    // border-bottom: 4px solid color.get('primary/base');;
-
-                    &::after {
-                        background: color.get('primary/base');
-                        border-radius: 6px;
-                        bottom: calc(0px - var(--item-margin-bottom));
-                        content: "";
-                        height: 2px;
-                        position: absolute;
-                        right: 50%;
-                        transform: translate(50%, -50%);
-                        width: 100%;
-                        z-index: 1;
-                    }
+                    background-color: transparent !important;
+                    color: var(--color-text) !important;
+                    border-radius: 0 !important;
+                    // font-weight: normal !important;
+                    border-bottom: calc(var(--item-margin-bottom) - 1px) solid var(--color-secondary-nav-bg) !important;
+                    margin-bottom: 1px !important;
+                    box-shadow: 0px 2px 0px 0px color.get('primary/base') !important;
                 }
 
                 .small.label {
@@ -69,11 +63,7 @@
                     align-items: center;
                     justify-content: center;
                 }
-
-                &:hover {
-                    background-color: color.get('elevation/4');
-                }
             }
         }
-    }    
+    }
 }

src/themes/scss/theme/modules/custom/index.scss

@@ -3,6 +3,7 @@
 @use './project';
 @use './home';
 @use './markup';
+@use './issue-content';
 
 @mixin apply-custom-styles {
     @include repo-header.apply-styles();
@@ -10,4 +11,5 @@
     @include project.apply-styles();
     @include home.apply-styles();
     @include markup.apply-styles();
+    @include issue-content.apply-styles();
 }

src/themes/scss/theme/modules/custom/repo/_file-list.scss

@@ -1,193 +1,166 @@
-@use '@lucas-labs/lui-micro/var' as var;
-@use '@lucas-labs/lui-micro/color' as color;
-
-@mixin apply-styles {
-
-    #repo-topics {
-        row-gap: var.get('measure/.5x');
-        margin-top: 0 !important;
-    }
-
-    .ui.table>tr>td, .ui.table>tbody>tr>td {
-        border-top-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.04);
-    }
-
-    .page-content.repository.file.list > .ui.container.lugit-repo-list-view {
-        display: flex;
-        flex-direction: row-reverse;
-        column-gap: 24px;
-
-        .ui.repo-topic.large.label.topic {
-            background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3);
-            color: color.get('primary/base');
-            border-radius: var.get('measure/2x');
-            border: 1px solid rgba(#{color.get('theme/blue/base', 'rgb')}, 0.4);
-            line-height: 14px;
-        }
-
-        @media (max-width: 1100px) {
-            width: 100%;
-            min-width: 100%;
-            margin: 0;
-            padding: 0 var.get('measure/2x');
-
-            .lugit-repo-header-data {
-                min-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
-                max-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
-                width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
-            }
-
-            .repo-button-row {
-                .gt-gap-y-3 {
-                    column-gap: var.get('measure/.5x');
-    
-                    #new-pull-request {
-                        display: none;
-                    }
-
-                    [role=menu] {
-                        display: none;
-                    }
-                }
-    
-                #clone-panel {
-                    #repo-clone-url {
-                        display: none;
-                    }
-                }
-            }
-        }
-
-        @media (max-width: 1200px) {
-            flex-direction: column;
-            column-gap: 0;
-            row-gap: 24px;
-
-            .lugit-repo-header-data {
-                min-width: 100%!important;
-                max-width: 100%!important;
-                width: 100%!important;
-            }
-
-            #repo-topics {
-                display: none !important;
-            }
-
-            #repo-desc {
-                display: flex;
-                flex-direction: column;
-                font-size: 1em;
-                row-gap: var.get('measure/1x');
-
-                h5 {
-                    display: none;
-                }
-
-                span {
-                    font-size: 1.2em !important;
-                    font-style: italic !important;
-                    color: var(--color-text-light-3);
-                }
-
-                a {
-                    font-size: 1.1em;
-                }
-            }
-
-        }
-
-        .repo-button-row {
-            .gt-gap-y-3 {
-                column-gap: var.get('measure/.5x');
-            }
-
-            #clone-panel {
-                #repo-clone-url {
-                    width: unset;
-                }
-            }
-        }        
-
-        .lugit-repo-header-data {
-            min-width: var.get('repo-home/sidebar-width');
-            max-width: var.get('repo-home/sidebar-width');
-            width: var.get('repo-home/sidebar-width');
-
-            #repo-desc {
-                display: flex;
-                flex-direction: column;
-                font-size: 1em;
-                row-gap: var.get('measure/1x');
-
-                * {
-                    margin: 0;
-                }
-
-                h5 {
-                    font-size: 1.1em;
-                }
-
-                span {
-                    font-size: 1.1em;
-                }
-
-                a {
-                    font-size: 1.1em;
-                }
-            }
-        }
-
-        .lugit-repo-content {
-            display: flex;
-            flex-direction: column;
-            row-gap: var.get('measure/1x');
-        }
-
-        #topic_edit {
-            flex-direction: column;
-            row-gap: var.get('measure/1x');
-
-            .field.gt-f1.gt-mr-3 { 
-                margin: 0px !important;
-
-
-                // topic selection editing (task list
-                div.fluid.multiple.search.selection.dropdown {
-                    display: flex;
-                    flex-wrap: wrap;
-                    box-shadow: none;
-                    padding: var.get('measure/.25x') var.get('measure/.5x');
-                    
-                    .item {
-                        border: none;
-                    }
-
-                    .menu {
-                        top: calc(100% + 1px);
-                    }
-                }
-                
-                .dropdown {
-                    display: none;
-                }
-
-                // Cancel, Save buttons
-                +div {
-                    display: flex;
-                    column-gap: var.get('measure/1x');
-                    
-                    button {
-                        display: block !important;
-                        margin: 0px !important;
-                        width: 100%;
-                    }
-                }
-            }
-        }
-
-        #repo-topics {
-            margin-top: var.get('measure/1x') !important;
-        }
-
-    }
-}
+@use '@lucas-labs/lui-micro/var' as var;
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin apply-styles {
+
+    #repo-topics, #topic_edit, .label-list {
+        row-gap: var.get('measure/.5x');
+        margin-top: 0 !important;
+
+        .label:not(.basic) {
+            font-size: var.get('small-font-size') !important;
+            background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.1);
+            color: color.get('primary/base');
+            border-radius: var.get('measure/2x');
+            line-height: 14px;
+            transition: background-color 0.2s ease;
+
+            &:hover {
+                background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3) !important;
+                color: color.get('primary/base') !important;
+            }
+        }
+
+    }
+
+    .ui.table>tr>td, .ui.table>tbody>tr>td {
+        border-top-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.04);
+    }
+
+    .page-content.repository.file.list > .ui.container.lugit-repo-list-view {
+        display: flex;
+        flex-direction: row-reverse;
+        column-gap: 24px;
+
+        @media (max-width: 1100px) {
+            width: 100%;
+            min-width: 100%;
+            margin: 0;
+            padding: 0 var.get('measure/2x');
+
+            .lugit-repo-header-data {
+                min-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
+                max-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
+                width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
+            }
+
+            .repo-button-row {
+                .gt-gap-y-3 {
+                    column-gap: var.get('measure/.5x');
+    
+                    #new-pull-request {
+                        display: none;
+                    }
+
+                    [role=menu] {
+                        display: none;
+                    }
+                }
+    
+                #clone-panel {
+                    #repo-clone-url {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        @media (max-width: 1280px) {
+            flex-direction: column;
+            column-gap: 0;
+            row-gap: 24px;
+
+            .lugit-repo-header-data {
+                min-width: 100%!important;
+                max-width: 100%!important;
+                width: 100%!important;
+            }
+
+            #repo-topics {
+                display: none !important;
+            }
+
+            #repo-desc {
+                display: flex;
+                flex-direction: column;
+                font-size: 1em;
+                row-gap: var.get('measure/1x');
+
+                h5 {
+                    display: none;
+                }
+
+                span {
+                    font-size: 1.2em !important;
+                    font-style: italic !important;
+                    color: var(--color-text-light-3);
+                }
+
+                a {
+                    font-size: 1.1em;
+                }
+            }
+
+        }
+
+        .repo-button-row {
+            .gt-gap-y-3 {
+                column-gap: var.get('measure/.5x');
+            }
+
+            #clone-panel {
+                #repo-clone-url {
+                    width: unset;
+                }
+            }
+        }        
+
+        .lugit-repo-header-data {
+            min-width: var.get('repo-home/sidebar-width');
+            max-width: var.get('repo-home/sidebar-width');
+            width: var.get('repo-home/sidebar-width');
+
+            #repo-desc {
+                display: flex;
+                flex-direction: column;
+                font-size: 1em;
+                row-gap: var.get('measure/1x');
+
+                * {
+                    margin: 0;
+                }
+
+                h5 {
+                    font-size: 1.1em;
+                }
+
+                span {
+                    font-size: 1.1em;
+                }
+
+                a {
+                    font-size: 1.1em;
+                }
+            }
+        }
+
+        .lugit-repo-content {
+            display: flex;
+            flex-direction: column;
+            row-gap: var.get('measure/1x');
+        }
+
+        #topic_edit {
+            flex-direction: column;
+            row-gap: var.get('measure/1x');
+
+            .field.gt-f1.gt-mr-3 { 
+                margin: 0px !important;
+            }
+        }
+
+        #repo-topics {
+            margin-top: var.get('measure/1x') !important;
+        }
+    }
+}