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

pull/5/head
Lucas Colombo 4 months ago
parent 1569eacdcf
commit ecd34de22f
No known key found for this signature in database
GPG Key ID: EF34786CFEFFAE35

@ -17,6 +17,6 @@ jobs:
- name: Create tarball - name: Create tarball
run: tar czf gitea-lugit-theme.tar.gz --directory=./dist . run: tar czf gitea-lugit-theme.tar.gz --directory=./dist .
- name: Add zips to release - name: Add zips to release
uses: softprops/action-gh-release@v1 uses: softprops/action-gh-release@v2
with: with:
files: ./gitea-lugit-theme.tar.gz files: ./gitea-lugit-theme.tar.gz

328
.gitignore vendored

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

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

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 171 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 151 B

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

Before

Width:  |  Height:  |  Size: 171 B

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

Before

Width:  |  Height:  |  Size: 517 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

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

Before

Width:  |  Height:  |  Size: 296 B

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

@ -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" .}}

@ -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" .}}

@ -1,7 +1,7 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}"> <div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
{{template "repo/header" .}} {{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"> <div class="lugit-repo-header-data">
{{template "base/alert" .}} {{template "base/alert" .}}
{{template "repo/code/recently_pushed_new_branches" .}} {{template "repo/code/recently_pushed_new_branches" .}}

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

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

@ -58,6 +58,9 @@
--color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8); --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-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: #{color.get('elevation/5')};
--color-secondary-dark-1: #{color.get('secondary/light/3%')}; --color-secondary-dark-1: #{color.get('secondary/light/3%')};
@ -231,13 +234,17 @@
--color-secondary-bg: #{color.get('elevation/4')}; --color-secondary-bg: #{color.get('elevation/4')};
--color-text-focus: #{color.get('text')}; --color-text-focus: #{color.get('text')};
--color-expand-button: #{color.get('elevation/6')}; --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-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: #{color.get('elevation/2')}; --color-project-board-bg: #{color.get('elevation/2')};
--color-caret: var(--color-text); --color-caret: var(--color-text);
--color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07); --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
--color-reaction-active-bg: var(--color-primary-alpha-40); --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-nav-bg: #{$lvl2};
--color-secondary-nav-bg: #{$lvl2};
--color-nav-text: #{color.get('text')};
--color-nav-hover-bg: #{color.get('elevation/6')}; --color-nav-hover-bg: #{color.get('elevation/6')};
--color-label-active-bg: #{color.get('elevation/6')}; --color-label-active-bg: #{color.get('elevation/6')};
--color-label-text: #{color.get('primary/base', 'contrast')}; --color-label-text: #{color.get('primary/base', 'contrast')};
@ -405,6 +412,5 @@
@include chroma.make-chroma-styles; @include chroma.make-chroma-styles;
@include codemirror.make-code-mirror-styles; @include codemirror.make-code-mirror-styles;
@include monaco.make-monaco-styles($is-dark: true); @include monaco.make-monaco-styles($is-dark: true);
@include custom.apply-custom-styles; @include custom.apply-custom-styles;
} }

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

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

@ -3,9 +3,24 @@
@mixin apply-styles { @mixin apply-styles {
#repo-topics { #repo-topics, #topic_edit, .label-list {
row-gap: var.get('measure/.5x'); row-gap: var.get('measure/.5x');
margin-top: 0 !important; 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 { .ui.table>tr>td, .ui.table>tbody>tr>td {
@ -17,14 +32,6 @@
flex-direction: row-reverse; flex-direction: row-reverse;
column-gap: 24px; 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) { @media (max-width: 1100px) {
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
@ -58,7 +65,7 @@
} }
} }
@media (max-width: 1200px) { @media (max-width: 1280px) {
flex-direction: column; flex-direction: column;
column-gap: 0; column-gap: 0;
row-gap: 24px; row-gap: 24px;
@ -149,39 +156,6 @@
.field.gt-f1.gt-mr-3 { .field.gt-f1.gt-mr-3 {
margin: 0px !important; 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%;
}
}
} }
} }

Loading…
Cancel
Save