fix: 🚑 some css customizations not showing after 1.22.3 gitea update

.github/workflows/release.yml

@@ -17,6 +17,6 @@ jobs:
       - name: Create tarball
         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: ./gitea-lugit-theme.tar.gz

.gitignore

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

README.md

@@ -1,90 +1,90 @@
-<h1 align="center">
+<h1 align="center">
-	<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
+	<code>lucaslabs</code> › <a href="https://gitea.io">Gitea</a> theme
-</h1>
+</h1>
-
+
-*Theme for `lucaslabs` internal gitea server.*
+*Theme for `lucaslabs` internal gitea server.*
-
+
-## `dark`
+## `dark`
-
+
-![dark theme](figs/dark.png)
+![dark theme](figs/dark.png)
-
+
-## `light`
+## `light`
-
+
-![light theme](figs/light.png)
+![light theme](figs/light.png)
-
+
-## `auto`
+## `auto`
-
+
-Switches between `dark` and `light` automatically based on the user's system preference.
+Switches between `dark` and `light` automatically based on the user's system preference.
-
+
-## Usage
+## Usage
-
+
-1. Clone this repo
+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 files in the `dist` folder in your `$GITEA_CUSTOM` directory.
+2. Place the `templates` and `public` folder in your `$GITEA_CUSTOM` directory.
-3. Append the themes in your `app.ini` file:
+3. Append the themes in your `app.ini` file:
-
+
-```ini
+```ini
-[ui]
+[ui]
-THEMES=...,dark,light,auto
+THEMES=...,dark,light,auto
-DEFAULT_THEME=dark # optional
+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.
+> 💡 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`.
+4. Restart `gitea`.
-
+
-> 🗒️ **Note**\
+> [!NOTE]
-> Works with `gitea` version `v1.20`.
+> The latest version works with `gitea` version `v1.22.x`.
-
+
-## Credits
+## Credits
-
+
-- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
+- [`catppuccin/gitea`](https://github.com/catppuccin/gitea), these themes are based on them.
-
+
-## Dev
+## Development
-
+
-### build
+### build
-```bash
+```bash
-$ npm install
+$ npm install
-$ npm run build
+$ npm run build
-```
+```
-
+
-### serve
+### serve
-```bash
+```bash
-$ npm run serve -- --server path/to/gitea/custom
+$ npm run serve -- --server path/to/gitea/custom
-
+
-# e.g.
+# e.g.
-
+
-# on linux
+# on linux
-$ npm run serve -- --server ~/gitea/custom
+$ npm run serve -- --server ~/gitea/custom
-# on windows
+# on windows
-$ npm run serve -- -- --server c:/gitea/custom
+$ npm run serve -- -- --server c:/gitea/custom
-```
+```
-
+
-
+
-# Changes in templates
+# Changes in templates
-
+
-## `home.tmpl`
+## `home.tmpl`
-
+
-Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
+Here we remove everything (default gitea welcome page). We only keep the logo and the header with the login button.
-
+
-## `base/head_navbar.tmpl`
+## `base/head_navbar.tmpl`
-
+
-The only change here is to make the logo smaller.
+The only change here is to make the logo smaller.
-
+
-```diff
+```diff
-- <img height="30" width="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+- <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">
++ <img height="24" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
-```
+```
-
+
-## `repo/home.tmpl`
+## `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-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.)
++ 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.
+Later we use css to go from default 1 column layout to 2 column layout more similar to github's design.
-
+
-```diff
+```diff
-- <div class="ui container {{if .IsBlame}}fluid padded{{end}}>
+- <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}}">
++ <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.
+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,214 +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">
-		<!-- 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>

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="tw-mb-8 tw-px-8">
-		<div class="center">
-			<img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}">
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

dist/templates/repo/home.tmpl

@@ -1,162 +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="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="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 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>
-					<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 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)}}
-					{{end}}
-				</div>
-			{{end}}
-		</div>
-		<div class="lugit-repo-content">
-			{{template "repo/sub_menu" .}}
-			{{$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}}
-							{{$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 -->
-					{{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"{{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 $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 $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}}">{{$v}}</span>
-								{{- else -}}
-									{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
-								{{- end -}}
-							{{- end -}}
-						</span>
-					{{end}}
-				</div>
-				<div class="repo-button-row-right">
-					<!-- Only show clone panel in repository home page -->
-					{{if $isHomepage}}
-						<div class="clone-panel ui action tiny input">
-							{{template "repo/clone_buttons" .}}
-							<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 "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}}
-								</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 (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 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
-						</a>
-					{{end}}
-				</div>
-			</div>
-			{{if .IsViewFile}}
-				{{template "repo/view_file" .}}
-			{{else if .IsBlame}}
-				{{template "repo/blame" .}}
-			{{else}}{{/* IsViewDirectory */}}
-				{{template "repo/view_list" .}}
-			{{end}}
-			
-		</div>
-	</div>
-</div>
-{{template "base/footer" .}}

src/templates/repo/home.tmpl

@@ -1,7 +1,7 @@
 {{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" .}}

src/themes/scss/dark.scss

@@ -1,82 +1,83 @@
-@use '@lucas-labs/lui-micro' as lui;
+@use '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
+@use './utils/color-utils' as c;
-@use './theme' as theme;
+@use './theme' as theme;
-
+
-$is-dark: true;
+$is-dark: true;
-
+
-$brand: #a6c6f7;
+$brand: #a6c6f7;
-
+
-$colors: (
+$colors: (
-    theme: (
+    theme: (
-        'rosewater':  c.variants(#f5e0dc, $is-dark),
+        'rosewater':  c.variants(#f5e0dc, $is-dark),
-        'flamingo':   c.variants(#f2cdcd, $is-dark),
+        'flamingo':   c.variants(#f2cdcd, $is-dark),
-        'pink':       c.variants(#f5c2e7, $is-dark),
+        'pink':       c.variants(#f5c2e7, $is-dark),
-        'mauve':      c.variants($brand, $is-dark),
+        'mauve':      c.variants(#9b6bf5, $is-dark),
-        'red':        c.variants(#f38ba8, $is-dark),
+        'red':        c.variants(#f38ba8, $is-dark),
-        'maroon':     c.variants(#eba0ac, $is-dark),
+        'maroon':     c.variants(#eba0ac, $is-dark),
-        'peach':      c.variants(#fab387, $is-dark),
+        'peach':      c.variants(#fab387, $is-dark),
-        'yellow':     c.variants(#f9e2af, $is-dark),
+        'yellow':     c.variants(#f9e2af, $is-dark),
-        'green':      c.variants($brand, $is-dark),
+        'green':      c.variants($brand, $is-dark),
-        'dark-green': c.variants(#00E676, $is-dark),
+        'dark-green': c.variants(#00E676, $is-dark),
-        'teal':       c.variants(#94e2d5, $is-dark),
+        'teal':       c.variants(#94e2d5, $is-dark),
-        'sky':        c.variants(#89dceb, $is-dark),
+        'sky':        c.variants(#89dceb, $is-dark),
-        'sapphire':   c.variants(#74c7ec, $is-dark),
+        'sapphire':   c.variants(#74c7ec, $is-dark),
-        'blue':       c.variants(#89b4fa, $is-dark),
+        'blue':       c.variants(#89b4fa, $is-dark),
-        'lavender':   c.variants(#b4befe, $is-dark),
+        'lavender':   c.variants(#b4befe, $is-dark),
-        'black':      c.variants(#181825, $is-dark),
+        'black':      c.variants(#181825, $is-dark),
-        'white':      c.variants(#e6edf3, $is-dark),
+        'white':      c.variants(#e6edf3, $is-dark),
-    ),    
+    ),    
-    text: #e6edf3,
+    text: #e6edf3,
-    primary: c.variants($brand, $is-dark),
+    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
+    secondary: c.variants(#5d5f7a, $is-dark),
-    elevation: (
+    elevation: (
-        '1': #000000,  // crust
+        '1': #000000,  // crust
-        '2': #040407,  // mantle
+        '2': #040407,  // mantle
-        '3': #07070f,  // base
+        '3': #07070f,  // base
-        '4': #161720,  // surface0
+        '4': #161720,  // surface0
-        '5': #1a1a25,  // surface1
+        '5': #1a1a25,  // surface1
-        '6': #222330,  // surface2
+        '6': #222330,  // surface2
-        '7': #393c4d,  // overlay0
+        '7': #393c4d,  // overlay0
-        '8': #515569,  // overlay1
+        '8': #515569,  // overlay1
-        '9': #6b7188,  // overlay2
+        '9': #6b7188,  // overlay2
-        '10': #868ca5, // subtext0
+        '10': #868ca5, // subtext0
-        '11': #9aa2c2, // subtext1
+        '11': #9aa2c2, // subtext1
-        '12': #b6c0e0, // 
+        '12': #b6c0e0, // 
-    )
+    )
-);
+);
-
+
-// init lui-micro, css-vars only (no reboot, no basic)
+// init lui-micro, css-vars only (no reboot, no basic)
-@include lui.init(
+@include lui.init(
-    $theme: (
+    $theme: (
-        colors: $colors,
+        colors: $colors,
-        variables: (
+        variables: (
-            'base-font-size': 14px,
+            'small-font-size': 12px,
-            'font-family': '"Outfit", Inter, Roboto, sans-serif',
+            'base-font-size': 14px,
-            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
+            'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
-            'measure': (
+            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
-                '.25x': 4px,
+            'measure': (
-                '.5x': 8px,
+                '.25x': 4px,
-                '1x': 16px,
+                '.5x': 8px,
-                '1.25x': 20px,
+                '1x': 16px,
-                '1.5x': 24px,
+                '1.25x': 20px,
-                '2x': 32px,
+                '1.5x': 24px,
-                '3x': 48px,
+                '2x': 32px,
-                '4x': 64px,
+                '3x': 48px,
-            ),
+                '4x': 64px,
-            'repo-home': (
+            ),
-                'sidebar-width': 296px,
+            'repo-home': (
-            )
+                'sidebar-width': 296px,
-        ),
+            )
-    ),
+        ),
-    
+    ),
-    $options: (
+    
-        reboot: false,
+    $options: (
-        basic: false,
+        reboot: false,
-        fg-var-name: 'text',
+        basic: false,
-        bg-var-name: 'elevation/1',
+        fg-var-name: 'text',
-    ),
+        bg-var-name: 'elevation/1',
-);
+    ),
-
+);
-@include theme.make-theme(
+
-    $is-dark: $is-dark,
+@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 '@lucas-labs/lui-micro' as lui;
-@use './utils/color-utils' as c;
+@use './utils/color-utils' as c;
-@use './theme' as theme;
+@use './theme' as theme;
-
+
-$is-dark: true;
+$is-dark: true;
-
+
-$brand: #6296e2;
+$brand: #6296e2;
-
+
-$colors: (
+$colors: (
-    theme: (
+    theme: (
-        'rosewater':  c.variants(#dc8a78, $is-dark),
+        'rosewater':  c.variants(#dc8a78, $is-dark),
-        'flamingo':   c.variants(#dd7878, $is-dark),
+        'flamingo':   c.variants(#dd7878, $is-dark),
-        'pink':       c.variants(#ea76cb, $is-dark),
+        'pink':       c.variants(#ea76cb, $is-dark),
-        'mauve':      c.variants($brand, $is-dark),
+        'mauve':      c.variants($brand, $is-dark),
-        'red':        c.variants(#d20f39, $is-dark),
+        'red':        c.variants(#d20f39, $is-dark),
-        'maroon':     c.variants(#e64553, $is-dark),
+        'maroon':     c.variants(#e64553, $is-dark),
-        'peach':      c.variants(#fe640b, $is-dark),
+        'peach':      c.variants(#fe640b, $is-dark),
-        'yellow':     c.variants(#df8e1d, $is-dark),
+        'yellow':     c.variants(#df8e1d, $is-dark),
-        'green':      c.variants($brand, $is-dark),
+        'green':      c.variants($brand, $is-dark),
-        'dark-green': c.variants(#11752d, $is-dark),
+        'dark-green': c.variants(#11752d, $is-dark),
-        'teal':       c.variants(#179299, $is-dark),
+        'teal':       c.variants(#179299, $is-dark),
-        'sky':        c.variants(#04a5e5, $is-dark),
+        'sky':        c.variants(#04a5e5, $is-dark),
-        'sapphire':   c.variants(#209fb5, $is-dark),
+        'sapphire':   c.variants(#209fb5, $is-dark),
-        'blue':       c.variants(#1e66f5, $is-dark),
+        'blue':       c.variants(#1e66f5, $is-dark),
-        'lavender':   c.variants(#7287fd, $is-dark),
+        'lavender':   c.variants(#7287fd, $is-dark),
-        'black':      c.variants(#181825, $is-dark),
+        'black':      c.variants(#181825, $is-dark),
-        'white':      c.variants(#e6edf3, $is-dark),
+        'white':      c.variants(#e6edf3, $is-dark),
-    ),    
+    ),    
-    text: #4c4f69,
+    text: #4c4f69,
-    primary: c.variants($brand, $is-dark),
+    primary: c.variants($brand, $is-dark),
-    secondary: c.variants(#5d5f7a, $is-dark),
+    secondary: c.variants(#5d5f7a, $is-dark),
-    elevation: (
+    elevation: (
-        '1': #dce0e8,  // crust
+        '1': #dce0e8,  // crust
-        '2': #e6e9ef,  // mantle
+        '2': #e6e9ef,  // mantle
-        '3': #eff1f5,  // base
+        '3': #eff1f5,  // base
-        '4': #ccd0da,  // surface0
+        '4': #ccd0da,  // surface0
-        '5': #bcc0cc,  // surface1
+        '5': #bcc0cc,  // surface1
-        '6': #acb0be,  // surface2
+        '6': #acb0be,  // surface2
-        '7': #9ca0b0,  // overlay0
+        '7': #9ca0b0,  // overlay0
-        '8': #8c8fa1,  // overlay1
+        '8': #8c8fa1,  // overlay1
-        '9': #7c7f93,  // overlay2
+        '9': #7c7f93,  // overlay2
-        '10': #6c6f85, // subtext0
+        '10': #6c6f85, // subtext0
-        '11': #5c5f77, // subtext1
+        '11': #5c5f77, // subtext1
-        '12': #4c4f69, // 
+        '12': #4c4f69, // 
-    )
+    )
-);
+);
-
+
-// init lui-micro, css-vars only (no reboot, no basic)
+// init lui-micro, css-vars only (no reboot, no basic)
-@include lui.init(
+@include lui.init(
-    $theme: (
+    $theme: (
-        colors: $colors,
+        colors: $colors,
-        variables: (
+        variables: (
-            'base-font-size': 14px,
+            'small-font-size': 12px,
-            'font-family': '"Outfit", Inter, Roboto, sans-serif',
+            'base-font-size': 14px,
-            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
+            'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
-            'measure': (
+            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
-                '.25x': 4px,
+            'measure': (
-                '.5x': 8px,
+                '.25x': 4px,
-                '1x': 16px,
+                '.5x': 8px,
-                '1.25x': 20px,
+                '1x': 16px,
-                '1.5x': 24px,
+                '1.25x': 20px,
-                '2x': 32px,
+                '1.5x': 24px,
-                '3x': 48px,
+                '2x': 32px,
-                '4x': 64px,
+                '3x': 48px,
-            ),
+                '4x': 64px,
-            'repo-home': (
+            ),
-                'sidebar-width': 296px,
+            'repo-home': (
-            )
+                'sidebar-width': 296px,
-        ),
+            )
-    ),
+        ),
-    
+    ),
-    $options: (
+    
-        reboot: false,
+    $options: (
-        basic: false,
+        reboot: false,
-        fg-var-name: 'text',
+        basic: false,
-        bg-var-name: 'elevation/1',
+        fg-var-name: 'text',
-    ),
+        bg-var-name: 'elevation/1',
-);
+    ),
-
+);
-@include theme.make-theme(
+
-    $is-dark: $is-dark,
+@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%')};
@@ -231,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')};
@@ -405,6 +412,5 @@
     @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

@@ -4,4 +4,13 @@
             max-width: 100%;
         }
     }
+
+    .issue-content, .issue-list {
+        .labels-list {
+            .label {
+                
+            }
+        }
+    }
+    
 }

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')};
+                --item-margin-bottom: #{var.get('measure/.5x')} !important;
-                margin: var(--item-margin-bottom) var.get('measure/.5x');
+                margin: 0 var.get('measure/.5x') var(--item-margin-bottom) !important;
-                border-radius: var.get('measure/.25x');
+                border-radius: var.get('measure/.25x') !important;
-                padding: var.get('measure/.5x') var.get('measure/.5x');
+                padding: var.get('measure/.5x') var.get('measure/.5x') !important;
-                color: var(--color-text);
+                color: var(--color-text) !important;
-                border: none;
+                border: none !important;
+                position: relative; // Make the parent element positioned
 
                 svg {
-                    color: var(--color-text-light-3);
+                    color: var(--color-text-light-3) !important;
-                    margin-right: var.get('measure/.5x');
+                    margin-right: var.get('measure/.5x') !important;
+                }
+
+                &:hover {
+                    background-color: color.get('elevation/4') !important;
                 }
 
                 &.active {
-                    background-color: transparent;
+                    background-color: transparent !important;
-                    color: var(--color-text);
+                    color: var(--color-text) !important;
-                    border-radius: var.get('measure/.25x') !important;
+                    border-radius: 0 !important;
-                    font-weight: normal;
+                    // font-weight: normal !important;
-                    // border-bottom: 4px solid color.get('primary/base');;
+                    border-bottom: calc(var(--item-margin-bottom) - 1px) solid var(--color-secondary-nav-bg) !important;
-
+                    margin-bottom: 1px !important;
-                    &::after {
+                    box-shadow: 0px 2px 0px 0px color.get('primary/base') !important;
-                        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;
-                    }
                 }
 
                 .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/repo/_file-list.scss

@@ -3,9 +3,24 @@
 
 @mixin apply-styles {
 
-    #repo-topics {
+    #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 {
@@ -17,14 +32,6 @@
         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%;
@@ -58,7 +65,7 @@
             }
         }
 
-        @media (max-width: 1200px) {
+        @media (max-width: 1280px) {
             flex-direction: column;
             column-gap: 0;
             row-gap: 24px;
@@ -149,39 +156,6 @@
 
             .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%;
-                    }
-                }
             }
         }