feat: ✨ support gitea 1.23
Lucas Colombo
1 month ago
parent
ffec5c6916
commit
44a25e5c29
@ -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) (not .HideRepoInfo)}}lugit-repo-list-view{{end}}">
|
||||
<div class="lugit-repo-header-data">
|
||||
{{template "base/alert" .}}
|
||||
{{template "repo/code/recently_pushed_new_branches" .}}
|
||||
{{if and (not .HideRepoInfo) (not .IsBlame)}}
|
||||
<div class="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" .}}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,100 @@
|
||||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
|
||||
@function light-change($color, $amount) {
|
||||
@return color.adjust($color, $lightness: $amount * -1);
|
||||
}
|
||||
|
||||
@function alpha-change($color, $alpha) {
|
||||
@return color.change($color, $alpha: $alpha);
|
||||
}
|
||||
|
||||
@function color-variants-light($color, $with-base: false) {
|
||||
$set: (
|
||||
'3%': light-change($color, -3%),
|
||||
'6%': light-change($color, -6%),
|
||||
'9%': light-change($color, -9%),
|
||||
'10%': light-change($color, -10%),
|
||||
'12%': light-change($color, -12%),
|
||||
'15%': light-change($color, -15%),
|
||||
'20%': light-change($color, -20%),
|
||||
'25%': light-change($color, -25%),
|
||||
'30%': light-change($color, -30%),
|
||||
'35%': light-change($color, -35%),
|
||||
'40%': light-change($color, -40%),
|
||||
'45%': light-change($color, -45%),
|
||||
'50%': light-change($color, -50%),
|
||||
'55%': light-change($color, -55%),
|
||||
'60%': light-change($color, -60%),
|
||||
'65%': light-change($color, -65%),
|
||||
'70%': light-change($color, -70%),
|
||||
'75%': light-change($color, -75%),
|
||||
'80%': light-change($color, -80%),
|
||||
'85%': light-change($color, -85%),
|
||||
'90%': light-change($color, -90%),
|
||||
'95%': light-change($color, -95%),
|
||||
'100%': light-change($color, -100%)
|
||||
);
|
||||
|
||||
@if $with-base {
|
||||
$set: map.merge((base: $color), $set);
|
||||
}
|
||||
|
||||
@return $set;
|
||||
}
|
||||
|
||||
@function color-variants-dark($color, $with-base: false) {
|
||||
$set: (
|
||||
'3%': light-change($color, 3%),
|
||||
'6%': light-change($color, 6%),
|
||||
'9%': light-change($color, 9%),
|
||||
'10%': light-change($color, 10%),
|
||||
'12%': light-change($color, 12%),
|
||||
'15%': light-change($color, 15%),
|
||||
'20%': light-change($color, 20%),
|
||||
'25%': light-change($color, 25%),
|
||||
'30%': light-change($color, 30%),
|
||||
'35%': light-change($color, 35%),
|
||||
'40%': light-change($color, 40%),
|
||||
'45%': light-change($color, 45%),
|
||||
'50%': light-change($color, 50%),
|
||||
'55%': light-change($color, 55%),
|
||||
'60%': light-change($color, 60%),
|
||||
'65%': light-change($color, 65%),
|
||||
'70%': light-change($color, 70%),
|
||||
'75%': light-change($color, 75%),
|
||||
'80%': light-change($color, 80%),
|
||||
'85%': light-change($color, 85%),
|
||||
'90%': light-change($color, 90%),
|
||||
'95%': light-change($color, 95%),
|
||||
'100%': light-change($color, 100%)
|
||||
);
|
||||
|
||||
@if $with-base {
|
||||
$set: map.merge((base: $color), $set);
|
||||
}
|
||||
|
||||
@return $set;
|
||||
}
|
||||
|
||||
@function variants($color, $light: true, $dark: true, $base: true, $override-base-with: null) {
|
||||
$set: ();
|
||||
|
||||
@if $light {
|
||||
$set: map.merge($set, (light: color-variants-light($color)));
|
||||
}
|
||||
|
||||
@if $dark {
|
||||
$set: map.merge($set, (dark: color-variants-dark($color)));
|
||||
}
|
||||
|
||||
@if $base {
|
||||
@if $override-base-with {
|
||||
$set: map.merge($set, (base: $override-base-with));
|
||||
} @else {
|
||||
$set: map.merge($set, (base: $color));
|
||||
}
|
||||
}
|
||||
|
||||
@return $set;
|
||||
}
|
||||
@ -1,2 +1,2 @@
|
||||
@import "./theme-light.css" (prefers-color-scheme: light);
|
||||
// @import "./theme-light.css" (prefers-color-scheme: light);
|
||||
@import "./theme-dark.css" (prefers-color-scheme: dark);
|
||||
@ -1,83 +1,90 @@
|
||||
@use '@lucas-labs/lui-micro' as lui;
|
||||
@use './utils/color-utils' as c;
|
||||
@use './theme' as theme;
|
||||
// @use '@lucas-labs/lui-micro' as lui;
|
||||
// @use './utils/color-utils' as c;
|
||||
// @use './theme' as theme;
|
||||
|
||||
$is-dark: true;
|
||||
// $is-dark: false;
|
||||
|
||||
$brand: #6296e2;
|
||||
// $brand: #6296e2;
|
||||
|
||||
$colors: (
|
||||
theme: (
|
||||
'rosewater': c.variants(#dc8a78, $is-dark),
|
||||
'flamingo': c.variants(#dd7878, $is-dark),
|
||||
'pink': c.variants(#ea76cb, $is-dark),
|
||||
'mauve': c.variants($brand, $is-dark),
|
||||
'red': c.variants(#d20f39, $is-dark),
|
||||
'maroon': c.variants(#e64553, $is-dark),
|
||||
'peach': c.variants(#fe640b, $is-dark),
|
||||
'yellow': c.variants(#df8e1d, $is-dark),
|
||||
'green': c.variants($brand, $is-dark),
|
||||
'dark-green': c.variants(#11752d, $is-dark),
|
||||
'teal': c.variants(#179299, $is-dark),
|
||||
'sky': c.variants(#04a5e5, $is-dark),
|
||||
'sapphire': c.variants(#209fb5, $is-dark),
|
||||
'blue': c.variants(#1e66f5, $is-dark),
|
||||
'lavender': c.variants(#7287fd, $is-dark),
|
||||
'black': c.variants(#181825, $is-dark),
|
||||
'white': c.variants(#e6edf3, $is-dark),
|
||||
),
|
||||
text: #4c4f69,
|
||||
primary: c.variants($brand, $is-dark),
|
||||
secondary: c.variants(#5d5f7a, $is-dark),
|
||||
elevation: (
|
||||
'1': #dce0e8, // crust
|
||||
'2': #e6e9ef, // mantle
|
||||
'3': #eff1f5, // base
|
||||
'4': #ccd0da, // surface0
|
||||
'5': #bcc0cc, // surface1
|
||||
'6': #acb0be, // surface2
|
||||
'7': #9ca0b0, // overlay0
|
||||
'8': #8c8fa1, // overlay1
|
||||
'9': #7c7f93, // overlay2
|
||||
'10': #6c6f85, // subtext0
|
||||
'11': #5c5f77, // subtext1
|
||||
'12': #4c4f69, //
|
||||
)
|
||||
);
|
||||
// $colors: (
|
||||
// theme: (
|
||||
// 'rosewater': c.variants(#dc8a78),
|
||||
// 'flamingo': c.variants(#dd7878),
|
||||
// 'pink': c.variants(#ea76cb),
|
||||
// 'mauve': c.variants(#8652e7),
|
||||
// 'red': c.variants(#d20f39),
|
||||
// 'maroon': c.variants(#e64553),
|
||||
// 'peach': c.variants(#fe640b),
|
||||
// 'yellow': c.variants(#df8e1d),
|
||||
// 'green': c.variants(#11752d),
|
||||
// 'teal': c.variants(#179299),
|
||||
// 'sky': c.variants(#04a5e5),
|
||||
// 'sapphire': c.variants(#209fb5),
|
||||
// 'blue': c.variants(#1e66f5),
|
||||
// 'lavender': c.variants(#7287fd),
|
||||
// 'black': c.variants(#181825),
|
||||
// 'white': c.variants(#e6edf3),
|
||||
// ),
|
||||
// text: #4c4f69,
|
||||
// primary: c.variants($brand),
|
||||
// secondary: c.variants(#999cc5),
|
||||
// elevation: (
|
||||
// '1': #dce0e8, // crust
|
||||
// '2': #e6e9ef, // mantle
|
||||
// '3': #eff1f5, // base
|
||||
// '4': #dcdfe7, // surface0
|
||||
// '5': #bcc0cc, // surface1
|
||||
// '6': #acb0be, // surface2
|
||||
// '7': #9ca0b0, // overlay0
|
||||
// '8': #8c8fa1, // overlay1
|
||||
// '9': #7c7f93, // overlay2
|
||||
// '10': #6c6f85, // subtext0
|
||||
// '11': #5c5f77, // subtext1
|
||||
// '12': #4c4f69, //
|
||||
// )
|
||||
// );
|
||||
|
||||
// init lui-micro, css-vars only (no reboot, no basic)
|
||||
@include lui.init(
|
||||
$theme: (
|
||||
colors: $colors,
|
||||
variables: (
|
||||
'small-font-size': 12px,
|
||||
'base-font-size': 14px,
|
||||
'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
|
||||
'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
|
||||
'measure': (
|
||||
'.25x': 4px,
|
||||
'.5x': 8px,
|
||||
'1x': 16px,
|
||||
'1.25x': 20px,
|
||||
'1.5x': 24px,
|
||||
'2x': 32px,
|
||||
'3x': 48px,
|
||||
'4x': 64px,
|
||||
),
|
||||
'repo-home': (
|
||||
'sidebar-width': 296px,
|
||||
)
|
||||
),
|
||||
),
|
||||
// // init lui-micro, css-vars only (no reboot, no basic)
|
||||
// @include lui.init(
|
||||
// $theme: (
|
||||
// colors: $colors,
|
||||
// variables: (
|
||||
// 'font-size': (
|
||||
// 'xs': .75rem,
|
||||
// 'sm': .875rem,
|
||||
// 'md': 1rem,
|
||||
// 'lg': 1.125rem,
|
||||
// 'xl': 1.25rem,
|
||||
// ),
|
||||
// 'font-family': '"Outfit", Inter, Roboto, "Segoe UI", sans-serif',
|
||||
// 'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
|
||||
// 'measure': (
|
||||
// '.25x': 4px,
|
||||
// '.375x': 6px,
|
||||
// '.5x': 8px,
|
||||
// '.75x': 12px,
|
||||
// '1x': 16px,
|
||||
// '1.25x': 20px,
|
||||
// '1.5x': 24px,
|
||||
// '2x': 32px,
|
||||
// '2.5x': 40px,
|
||||
// '3x': 48px,
|
||||
// '4x': 64px,
|
||||
// ),
|
||||
// 'repo-home': (
|
||||
// 'sidebar-width': 296px,
|
||||
// )
|
||||
// ),
|
||||
// ),
|
||||
|
||||
$options: (
|
||||
reboot: false,
|
||||
basic: false,
|
||||
fg-var-name: 'text',
|
||||
bg-var-name: 'elevation/1',
|
||||
),
|
||||
);
|
||||
// $options: (
|
||||
// reboot: false,
|
||||
// basic: false,
|
||||
// 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,
|
||||
// );
|
||||
@ -0,0 +1,135 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin editor {
|
||||
#comment-form, .edit-content-zone {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
|
||||
.combo-markdown-editor {
|
||||
.top.tabular.menu {
|
||||
background-color: var(--color-box-header);
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
min-height: 0px;
|
||||
margin-bottom: var.get('measure/1x') !important;
|
||||
|
||||
.item {
|
||||
margin: -1px 0 0 -1px; // merge borders
|
||||
border-top-left-radius: var(--border-radius) !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-text);
|
||||
&:after {
|
||||
// a hacky 1 pixel "button border" to make the border
|
||||
// of the whole menu disappear under the active tab
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-body);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
.EasyMDEContainer { // legacy editor
|
||||
border: none !important;
|
||||
|
||||
.editor-toolbar {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
markdown-toolbar, .EasyMDEContainer .editor-toolbar {
|
||||
padding: 0 10px !important;
|
||||
|
||||
.markdown-toolbar-group {
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&:not(:last-child) {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 1px;
|
||||
flex: 1;
|
||||
margin: var.get('measure/.375x') var.get('measure/.375x') !important;
|
||||
background-color: color.get('elevation/6');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-toolbar-button, button {
|
||||
line-height: 0;
|
||||
display: inline-block;
|
||||
color: var(--color-text-light-2) !important;
|
||||
padding: var.get('measure/.375x') !important;
|
||||
transition: background-color .1s ease;
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
height: auto;
|
||||
min-width: fit-content;
|
||||
|
||||
&:hover {
|
||||
background-color: color.get('elevation/5') !important;
|
||||
}
|
||||
|
||||
// if has attribute level
|
||||
&[level] {
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
// if aria-checked is true
|
||||
&[aria-checked="true"] {
|
||||
background-color: color.get('elevation/4');
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&:after {
|
||||
vertical-align: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
padding: var.get('measure/1x') var.get('measure/1x') !important;
|
||||
}
|
||||
|
||||
.editor-statusbar {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&.markup {
|
||||
padding: 0 var.get('measure/1x') var.get('measure/1x');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field:first-child {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
&:focus-within {
|
||||
outline: 2px solid var(--color-accent);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: var.get('measure/1x') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin menu {
|
||||
.ui.dropdown>.menu {
|
||||
--border-radius: 0;
|
||||
opacity: 0;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
top: calc(100% + var.get('measure/.5x')) !important;
|
||||
border-radius: var.get('measure/.75x') !important;
|
||||
transition: opacity .2s ease !important;
|
||||
box-shadow: 0px 6px 12px -3px rgba(#{color.get('elevation/1', 'rgb')}, 0.5),
|
||||
0px 6px 18px 0px rgba(#{color.get('elevation/1', 'rgb')}, 0.1) !important;
|
||||
|
||||
.divider {
|
||||
margin-top: var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 0 var.get('measure/.5x') !important;
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
line-height: 1 !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
width: auto;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&.clear-selection {
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"], input[name="search"] {
|
||||
--color-input-background: #{color.get('elevation/1')};
|
||||
--color-input-border: #{color.get('elevation/5')};
|
||||
|
||||
min-height: var.get('measure/2x') !important;
|
||||
padding: 0 var.get('measure/.5x') !important;
|
||||
font-size: var.get('font-size/md') !important;
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
|
||||
&:focus {
|
||||
--color-primary: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.scrolling.menu {
|
||||
.item {
|
||||
gap: var.get('measure/.5x') !important;
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: -8px;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
content: "";
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-check-mark {
|
||||
background-color: color.get('elevation/6');
|
||||
visibility: visible !important;
|
||||
display: inline-flex;
|
||||
padding: 2px;
|
||||
border-radius: var.get('measure/.375x');
|
||||
border: 1px solid color.get('elevation/8');
|
||||
|
||||
svg {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.item-secondary-info {
|
||||
flex-basis: 100%;
|
||||
padding: 0 0 0 var.get('measure/.5x');
|
||||
color: color.get('subtle');
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.item-check-mark {
|
||||
background-color: var(--color-accent);
|
||||
|
||||
svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
|
||||
@mixin signed-label {
|
||||
.label.isSigned {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
margin: 0px .25em !important;
|
||||
padding: 0 !important;
|
||||
display: inline-flex !important;
|
||||
gap: 0px !important;
|
||||
border-radius: 16px !important;
|
||||
|
||||
--color-light-border: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
--color-label-bg: none !important;
|
||||
--color-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
--color-green-badge-bg: none !important;
|
||||
--color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
|
||||
--color-label-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.05) !important;
|
||||
--color-label-text: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
--color-green-badge: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
|
||||
.shortsha {
|
||||
padding: 2px 6px 2px 8px !important;
|
||||
}
|
||||
|
||||
.ui.detail.icon.button {
|
||||
opacity: 1 !important;
|
||||
padding: 2px 8px 2px 6px !important;
|
||||
margin: 0 !important;
|
||||
background: none !important;
|
||||
border-color: rgba(#{color.get('palette/green/base', 'rgb')}, 1) !important;
|
||||
}
|
||||
|
||||
&.isVerified {
|
||||
.ui.detail.icon.button {
|
||||
padding: 2px 8px 2px 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin hollow {
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
button, .button {
|
||||
border-color: color.get('elevation/6') !important;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
|
||||
+.label {
|
||||
border-left-color: color.get('elevation/7') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
border-color: color.get('elevation/6') !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: color.get('elevation/7') !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
@forward './signed-label';
|
||||
@forward './editor';
|
||||
@forward './menu';
|
||||
@ -1,425 +1,17 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use './modules/chroma' as chroma;
|
||||
@use './modules/monaco' as monaco;
|
||||
@use './modules/codemirror' as codemirror;
|
||||
@use './modules/custom' as custom;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use './vars';
|
||||
@use './components';
|
||||
@use './modules';
|
||||
|
||||
@mixin make-theme($is-dark: true) {
|
||||
$lvl1: #{color.get('elevation/3')};
|
||||
$lvl1-rgb: #{color.get('elevation/3', 'rgb')};
|
||||
$lvl2: #{color.get('elevation/2')};
|
||||
$lvl2-rgb: #{color.get('elevation/2', 'rgb')};
|
||||
$lvl3: #{color.get('elevation/1')};
|
||||
$lvl3-rgb: #{color.get('elevation/1', 'rgb')};
|
||||
@include vars.base;
|
||||
@include vars.colors($is-dark);
|
||||
|
||||
:root {
|
||||
* {
|
||||
--fonts-regular: #{var.get('font-family')};
|
||||
--fonts-monospace: #{var.get('code-font-family')};
|
||||
}
|
||||
|
||||
@if $is-dark {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
} @else {
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
}
|
||||
|
||||
accent-color: #{color.get('primary/base')};
|
||||
|
||||
--color-primary: #{color.get('primary/base')};
|
||||
--color-primary-contrast: #{color.get('primary/base', 'contrast')};
|
||||
|
||||
--color-primary-dark-1: #{color.get('primary/dark/3%')};
|
||||
--color-primary-dark-2: #{color.get('primary/dark/6%')};
|
||||
--color-primary-dark-3: #{color.get('primary/dark/9%')};
|
||||
--color-primary-dark-4: #{color.get('primary/dark/12%')};
|
||||
--color-primary-dark-5: #{color.get('primary/dark/15%')};
|
||||
--color-primary-dark-6: #{color.get('primary/dark/18%')};
|
||||
--color-primary-dark-7: #{color.get('primary/dark/21%')};
|
||||
|
||||
--color-primary-light-1: #{color.get('primary/light/3%')};
|
||||
--color-primary-light-2: #{color.get('primary/light/6%')};
|
||||
--color-primary-light-3: #{color.get('primary/light/9%')};
|
||||
--color-primary-light-4: #{color.get('primary/light/12%')};
|
||||
--color-primary-light-5: #{color.get('primary/light/15%')};
|
||||
--color-primary-light-6: #{color.get('primary/light/18%')};
|
||||
--color-primary-light-7: #{color.get('primary/light/21%')};
|
||||
|
||||
--color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1);
|
||||
--color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2);
|
||||
--color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3);
|
||||
--color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4);
|
||||
--color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5);
|
||||
--color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6);
|
||||
--color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7);
|
||||
--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%')};
|
||||
--color-secondary-dark-2: #{color.get('secondary/light/6%')};
|
||||
--color-secondary-dark-3: #{color.get('secondary/light/9%')};
|
||||
--color-secondary-dark-4: #{color.get('secondary/light/12%')};
|
||||
--color-secondary-dark-5: #{color.get('secondary/light/15%')};
|
||||
--color-secondary-dark-6: #{color.get('secondary/light/18%')};
|
||||
--color-secondary-dark-7: #{color.get('secondary/light/21%')};
|
||||
--color-secondary-dark-8: #{color.get('secondary/light/24%')};
|
||||
--color-secondary-dark-9: #{color.get('secondary/light/27%')};
|
||||
--color-secondary-dark-10: #{color.get('secondary/light/30%')};
|
||||
--color-secondary-dark-11: #{color.get('secondary/light/33%')};
|
||||
--color-secondary-dark-12: #{color.get('secondary/light/36%')};
|
||||
--color-secondary-dark-13: #{color.get('secondary/light/39%')};
|
||||
|
||||
--color-secondary-light-1: #{color.get('secondary/dark/3%')};
|
||||
--color-secondary-light-2: #{color.get('secondary/dark/6%')};
|
||||
--color-secondary-light-3: #{color.get('secondary/dark/9%')};
|
||||
--color-secondary-light-4: #{color.get('secondary/dark/12%')};
|
||||
|
||||
--color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1);
|
||||
--color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2);
|
||||
--color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3);
|
||||
--color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4);
|
||||
--color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5);
|
||||
--color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6);
|
||||
--color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7);
|
||||
--color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8);
|
||||
--color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9);
|
||||
|
||||
/* colors */
|
||||
--color-red: #{color.get('theme/red/base')};
|
||||
--color-orange: #{color.get('theme/peach/base')};
|
||||
--color-yellow: #{color.get('theme/yellow/base')};
|
||||
--color-olive: #{color.get('theme/green/base')};
|
||||
--color-green: #{color.get('theme/green/base')};
|
||||
--color-teal: #{color.get('theme/teal/base')};
|
||||
--color-blue: #{color.get('theme/blue/base')};
|
||||
--color-violet: #{color.get('theme/lavender/base')};
|
||||
--color-purple: #{color.get('theme/mauve/base')};
|
||||
--color-pink: #{color.get('theme/pink/base')};
|
||||
--color-brown: #{color.get('theme/flamingo/base')};
|
||||
--color-grey: #{color.get('elevation/9')};
|
||||
--color-black: #{color.get('elevation/1')};
|
||||
|
||||
/* dark variants */
|
||||
--color-red-dark-1: #{color.get('theme/red/dark/12%')};
|
||||
--color-orange-dark-1: #{color.get('theme/peach/dark/12%')};
|
||||
--color-yellow-dark-1: #{color.get('theme/yellow/dark/12%')};
|
||||
--color-olive-dark-1: #{color.get('theme/green/dark/12%')};
|
||||
--color-green-dark-1: #{color.get('theme/green/dark/12%')};
|
||||
--color-teal-dark-1: #{color.get('theme/teal/dark/12%')};
|
||||
--color-blue-dark-1: #{color.get('theme/blue/dark/12%')};
|
||||
--color-violet-dark-1: #{color.get('theme/lavender/dark/12%')};
|
||||
--color-purple-dark-1: #{color.get('theme/mauve/dark/12%')};
|
||||
--color-pink-dark-1: #{color.get('theme/pink/dark/12%')};
|
||||
--color-brown-dark-1: #{color.get('theme/flamingo/dark/12%')};
|
||||
|
||||
--color-red-dark-2: #{color.get('theme/red/dark/15%')};
|
||||
--color-orange-dark-2: #{color.get('theme/peach/dark/15%')};
|
||||
--color-yellow-dark-2: #{color.get('theme/yellow/dark/15%')};
|
||||
--color-olive-dark-2: #{color.get('theme/green/dark/15%')};
|
||||
--color-green-dark-2: #{color.get('theme/green/dark/15%')};
|
||||
--color-teal-dark-2: #{color.get('theme/teal/dark/15%')};
|
||||
--color-blue-dark-2: #{color.get('theme/blue/dark/15%')};
|
||||
--color-violet-dark-2: #{color.get('theme/lavender/dark/15%')};
|
||||
--color-purple-dark-2: #{color.get('theme/mauve/dark/15%')};
|
||||
--color-pink-dark-2: #{color.get('theme/pink/dark/15%')};
|
||||
--color-brown-dark-2: #{color.get('theme/flamingo/dark/15%')};
|
||||
|
||||
/* light variants */
|
||||
--color-red-light: #{color.get('theme/red/light/12%')};
|
||||
--color-orange-light: #{color.get('theme/peach/light/12%')};
|
||||
--color-yellow-light: #{color.get('theme/yellow/light/12%')};
|
||||
--color-olive-light: #{color.get('theme/green/light/12%')};
|
||||
--color-green-light: #{color.get('theme/green/light/12%')};
|
||||
--color-teal-light: #{color.get('theme/teal/light/12%')};
|
||||
--color-blue-light: #{color.get('theme/blue/light/12%')};
|
||||
--color-violet-light: #{color.get('theme/lavender/light/12%')};
|
||||
--color-purple-light: #{color.get('theme/mauve/light/12%')};
|
||||
--color-pink-light: #{color.get('theme/pink/light/12%')};
|
||||
--color-brown-light: #{color.get('theme/flamingo/light/12%')};
|
||||
--color-grey-light: #{color.get('elevation/11')};
|
||||
--color-black-light: #{if(
|
||||
is-dark,
|
||||
color.get('theme/black/light/12%'),
|
||||
color.get('theme/white/light/12%')
|
||||
)};
|
||||
|
||||
/* other colors */
|
||||
--color-gold: #{color.get('theme/rosewater/base')};
|
||||
--color-white: #{color.get('text')};
|
||||
--color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
|
||||
--color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
|
||||
--color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
|
||||
--color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
|
||||
--color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
|
||||
--color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
|
||||
--color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
|
||||
--color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
|
||||
--color-diff-inactive: #{color.get('elevation/9')};
|
||||
--color-error-border: #{color.get('theme/red/base')};
|
||||
--color-error-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
|
||||
--color-error-bg-active: #{color.get('theme/red/light/6%')};
|
||||
--color-error-bg-hover: #{color.get('theme/red/light/12%')};
|
||||
--color-error-text: #{color.get('theme/red/base')};
|
||||
--color-success-border: #{color.get('theme/green/light/12%')};
|
||||
--color-success-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
|
||||
--color-success-text: #{color.get('text')};
|
||||
--color-warning-border: #{color.get('theme/yellow/light/12%')};
|
||||
--color-warning-bg: #{color.get('theme/yellow/base')};
|
||||
--color-warning-text: #{$lvl1};
|
||||
--color-info-border: #{color.get('theme/blue/light/12%')};
|
||||
--color-info-bg: #{$lvl1};
|
||||
--color-info-text: #{color.get('text')};
|
||||
--color-red-badge: #{color.get('theme/red/light/12%')};
|
||||
--color-red-badge-bg: #{$lvl1};
|
||||
--color-red-badge-hover-bg: #{color.get('theme/red/light/6%')};
|
||||
--color-green-badge: #{color.get('theme/green/base')};
|
||||
--color-green-badge-bg: #{$lvl1};
|
||||
--color-green-badge-hover-bg: #{color.get('theme/green/light/6%')};
|
||||
--color-yellow-badge: #{color.get('theme/yellow/base')};
|
||||
--color-yellow-badge-bg: #{$lvl1};
|
||||
--color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')};
|
||||
--color-orange-badge: #{color.get('theme/peach/base')};
|
||||
--color-orange-badge-bg: #{$lvl1};
|
||||
--color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')};
|
||||
--color-git: #{color.get('theme/peach/base')};
|
||||
--color-label-bg: #{color.get('primary/base')};
|
||||
--color-label-hover-bg: #{color.get('primary/light/6%')};
|
||||
|
||||
/* target-based colors */
|
||||
--color-body: #{$lvl1};
|
||||
--color-box-header: #{rgba(color.get('elevation/2', 'rgb'), 1)};
|
||||
--color-box-body: var(--color-body);
|
||||
--color-box-body-highlight: #{color.get('elevation/4')};
|
||||
--color-text-dark: #{color.get('elevation/10')};
|
||||
--color-text: #{color.get('text')};
|
||||
--color-text-light: #{color.get('elevation/12')};
|
||||
--color-text-light-1: #{color.get('elevation/11')};
|
||||
--color-text-light-2: #{color.get('elevation/10')};
|
||||
--color-text-light-3: #{color.get('elevation/9')};
|
||||
--color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
|
||||
--color-timeline: #{color.get('elevation/4')};
|
||||
--color-input-text: #{color.get('text')};
|
||||
--color-input-background: #{color.get('elevation/4')};
|
||||
--color-input-toggle-background: #{color.get('elevation/4')};
|
||||
--color-input-border: #{color.get('elevation/5')};
|
||||
--color-input-border-hover: #{color.get('elevation/6')};
|
||||
--color-header-wrapper: #{$lvl2};
|
||||
--color-header-wrapper-transparent: #00000000;
|
||||
--color-light: #{color.get('elevation/6')};
|
||||
--color-light-mimic-enabled: rgba(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
|
||||
);
|
||||
--color-light-border: #{color.get('elevation/6')};
|
||||
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.1);
|
||||
--color-active: rgba(#{color.get('text', 'rgb')}, 0.1);
|
||||
--color-menu: #{color.get('elevation/3')};
|
||||
--color-card: #{color.get('elevation/3')};
|
||||
--color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
|
||||
--color-markup-code-block: #{color.get('elevation/2')};
|
||||
--color-button: #{color.get('elevation/4')};
|
||||
--color-code-bg: $lvl1;
|
||||
--color-code-sidebar-bg: #{color.get('elevation/4')};
|
||||
--color-shadow: rgba(#{$lvl1-rgb}, 0.1);
|
||||
--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/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')};
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-active-line: #{color.get('elevation/5')};
|
||||
}
|
||||
|
||||
@if $is-dark {
|
||||
/* invert emojis that are hard to read otherwise */
|
||||
.emoji[aria-label='check mark'],
|
||||
.emoji[aria-label='currency exchange'],
|
||||
.emoji[aria-label='TOP arrow'],
|
||||
.emoji[aria-label='END arrow'],
|
||||
.emoji[aria-label='ON! arrow'],
|
||||
.emoji[aria-label='SOON arrow'],
|
||||
.emoji[aria-label='heavy dollar sign'],
|
||||
.emoji[aria-label='copyright'],
|
||||
.emoji[aria-label='registered'],
|
||||
.emoji[aria-label='trade mark'],
|
||||
.emoji[aria-label='multiply'],
|
||||
.emoji[aria-label='plus'],
|
||||
.emoji[aria-label='minus'],
|
||||
.emoji[aria-label='divide'],
|
||||
.emoji[aria-label='curly loop'],
|
||||
.emoji[aria-label='double curly loop'],
|
||||
.emoji[aria-label='wavy dash'],
|
||||
.emoji[aria-label='paw prints'],
|
||||
.emoji[aria-label='musical note'],
|
||||
.emoji[aria-label='musical notes'] {
|
||||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:-webkit-autofill:active, .ui.form .field.field input:-webkit-autofill, .ui.form .field.field input:-webkit-autofill:focus, .ui.form .field.field input:-webkit-autofill:hover, .ui.form .field.field input:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: var(--color-secondary);
|
||||
box-shadow: 0 0 0 100px var(--color-primary-light-3) inset !important;
|
||||
border-color: var(--color-primary-light-3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.ui.ui.button:not(.inverted, .basic),
|
||||
.ui.ui.ui.label:not(.inverted, .basic) {
|
||||
&.primary,
|
||||
&.green,
|
||||
&.red,
|
||||
&.teal {
|
||||
color: $lvl1;
|
||||
&:hover {
|
||||
color: $lvl3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.success.message, .ui.attached.success.message, .ui.positive.message, .ui.attached.positive.message {
|
||||
background: var(--color-success-bg);
|
||||
color: var(--color-success-text);
|
||||
border-color: var(--color-success-border);
|
||||
}
|
||||
|
||||
.ui.grey.labels .label, .ui.ui.ui.grey.label {
|
||||
background-color: color.get('primary/base');
|
||||
border-color: color.get('primary/base');
|
||||
color: $lvl1;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ui.label, .ui.menu .item>.label {
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.ui.basic.modal {
|
||||
background-color: $lvl3;
|
||||
}
|
||||
|
||||
.ui.error.message .header, .ui.negative.message .header, .ui.red.message .header {
|
||||
color: var(--color-error-text);
|
||||
}
|
||||
|
||||
// modal text color for the "Remove GPG Key" modal
|
||||
.ui.basic.modal,
|
||||
.ui.basic.modal > .header,
|
||||
.ui.inverted.button {
|
||||
color: color.get('text') !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var.get('base-font-size');
|
||||
}
|
||||
|
||||
footer {
|
||||
justify-content: flex-end !important;
|
||||
|
||||
.right-links {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.right-links>a {
|
||||
border-left: none !important;
|
||||
padding-left: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu {
|
||||
left: -50% !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.label.isSigned {
|
||||
margin: 0px .25em !important;
|
||||
padding: 0 !important;
|
||||
display: inline-flex !important;
|
||||
gap: 0px !important;
|
||||
border-radius: 16px !important;
|
||||
|
||||
--color-light-border: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
|
||||
--color-label-bg: none !important;
|
||||
--color-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
|
||||
--color-green-badge-bg: none !important;
|
||||
--color-green-badge-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important;
|
||||
--color-label-hover-bg: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 0.05) !important;
|
||||
--color-label-text: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
|
||||
--color-green-badge: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
|
||||
|
||||
.shortsha {
|
||||
padding: 4px 6px 4px 12px !important;
|
||||
}
|
||||
|
||||
.ui.detail.icon.button {
|
||||
opacity: 1 !important;
|
||||
padding: 4px 8px 4px 6px !important;
|
||||
margin: 0 !important;
|
||||
background: none !important;
|
||||
border-color: rgba(#{color.get('theme/dark-green/base', 'rgb')}, 1) !important;
|
||||
}
|
||||
|
||||
&.isVerified {
|
||||
.ui.detail.icon.button {
|
||||
padding: 4px 12px 4px 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#commits-table {
|
||||
--color-light: transparent !important;
|
||||
}
|
||||
|
||||
.flex-list {
|
||||
.flex-item {
|
||||
.flex-item-main {
|
||||
gap: var.get('measure/.25x');
|
||||
|
||||
.flex-item-header {
|
||||
.flex-item-title {
|
||||
gap: var.get('measure/.5x');
|
||||
}
|
||||
}
|
||||
|
||||
.flex-item-body:not(:last-child) {
|
||||
margin-bottom: var.get('measure/1x');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// components
|
||||
@include components.signed-label; // label for GPG signed commits
|
||||
@include components.editor; // github-style (kinda) markdown editor in comments, issues, etc.
|
||||
@include components.menu; // github-style dropdown menus
|
||||
|
||||
@include chroma.make-chroma-styles;
|
||||
@include codemirror.make-code-mirror-styles;
|
||||
@include monaco.make-monaco-styles($is-dark: true);
|
||||
@include custom.apply-custom-styles;
|
||||
// modules
|
||||
@include modules.repo; // repo page
|
||||
@include modules.issues; // issues page
|
||||
}
|
||||
|
||||
@ -1,304 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
|
||||
|
||||
@mixin make-chroma-styles {
|
||||
.chroma .code-inner{
|
||||
font: 14px var.get('code-font-family');
|
||||
}
|
||||
|
||||
/* NameBuiltinPseudo */
|
||||
.chroma .bp {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* Comment */
|
||||
.chroma .c {
|
||||
color: color.get('elevated/7');
|
||||
}
|
||||
/* CommentSingle */
|
||||
.chroma .c1 {
|
||||
color: color.get('elevated/7');
|
||||
}
|
||||
/* CommentHashbang */
|
||||
.chroma .ch {
|
||||
color: color.get('elevated/7');
|
||||
}
|
||||
/* CommentMultiline */
|
||||
.chroma .cm {
|
||||
color: color.get('elevated/7');
|
||||
}
|
||||
/* CommentPreproc */
|
||||
.chroma .cp {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
/* CommentPreprocFile */
|
||||
.chroma .cpf {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
/* CommentSpecial */
|
||||
.chroma .cs {
|
||||
color: color.get('elevated/7');
|
||||
}
|
||||
/* LiteralStringDelimiter */
|
||||
.chroma .dl {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
/* NameFunctionMagic */
|
||||
.chroma .fm {
|
||||
}
|
||||
/* Generic */
|
||||
.chroma .g {
|
||||
}
|
||||
/* GenericDeleted */
|
||||
.chroma .gd {
|
||||
color: color.get('theme');
|
||||
background-color: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
|
||||
}
|
||||
/* GenericEmph */
|
||||
.chroma .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
/* GenericHeading */
|
||||
.chroma .gh {
|
||||
color: color.get('theme/sky/base');
|
||||
}
|
||||
/* GenericInserted */
|
||||
.chroma .gi {
|
||||
color: color.get('theme');
|
||||
background-color: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
|
||||
}
|
||||
/* GenericUnderline */
|
||||
.chroma .gl {
|
||||
}
|
||||
/* GenericOutput */
|
||||
.chroma .go {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* GenericPrompt */
|
||||
.chroma .gp {
|
||||
color: color.get('elevated/7');
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericError */
|
||||
.chroma .gr {
|
||||
color: color.get('theme/maroon/base');
|
||||
}
|
||||
/* GenericStrong */
|
||||
.chroma .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* GenericTraceback */
|
||||
.chroma .gt {
|
||||
color: color.get('theme/maroon/base');
|
||||
}
|
||||
/* GenericSubheading */
|
||||
.chroma .gu {
|
||||
color: color.get('theme/sky/base');
|
||||
}
|
||||
/* LiteralNumberIntegerLong */
|
||||
.chroma .il {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* Keyword */
|
||||
.chroma .k {
|
||||
color: color.get('theme/mauve/base');
|
||||
}
|
||||
/* KeywordConstant */
|
||||
.chroma .kc {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* KeywordDeclaration */
|
||||
.chroma .kd {
|
||||
color: color.get('theme/mauve/base');
|
||||
}
|
||||
/* KeywordNamespace */
|
||||
.chroma .kn {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* KeywordPseudo */
|
||||
.chroma .kp {
|
||||
color: color.get('theme/mauve/base');
|
||||
font-weight: bold;
|
||||
}
|
||||
/* KeywordReserved */
|
||||
.chroma .kr {
|
||||
color: color.get('theme/mauve/base');
|
||||
}
|
||||
/* KeywordType */
|
||||
.chroma .kt {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* Literal */
|
||||
.chroma .l {
|
||||
}
|
||||
/* LiteralDate */
|
||||
.chroma .ld {
|
||||
}
|
||||
/* LiteralNumber */
|
||||
.chroma .m {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* LiteralNumberBin */
|
||||
.chroma .mb {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* LiteralNumberFloat */
|
||||
.chroma .mf {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* LiteralNumberHex */
|
||||
.chroma .mh {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* LiteralNumberInteger */
|
||||
.chroma .mi {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* LiteralNumberOct */
|
||||
.chroma .mo {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* Name */
|
||||
.chroma .n {
|
||||
color: color.get('theme/lavender/base');
|
||||
}
|
||||
/* NameAttribute */
|
||||
.chroma .na {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameBuiltin */
|
||||
.chroma .nb {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* NameClass */
|
||||
.chroma .nc {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameDecorator */
|
||||
.chroma .nd {
|
||||
color: color.get('theme/pink/base');
|
||||
}
|
||||
/* NameException */
|
||||
.chroma .ne {
|
||||
color: color.get('theme/maroon/base');
|
||||
}
|
||||
/* NameFunction */
|
||||
.chroma .nf {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
/* NameEntity */
|
||||
.chroma .ni {
|
||||
color: color.get('theme/pink/base');
|
||||
}
|
||||
/* NameLabel */
|
||||
.chroma .nl {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameNamespace */
|
||||
.chroma .nn {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameConstant */
|
||||
.chroma .no {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameTag */
|
||||
.chroma .nt {
|
||||
color: color.get('theme/mauve/base');
|
||||
}
|
||||
/* NameVariable */
|
||||
.chroma .nv {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* NameOther */
|
||||
.chroma .nx {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* Operator */
|
||||
.chroma .o {
|
||||
color: color.get('theme/sky/base');
|
||||
}
|
||||
/* OperatorWord */
|
||||
.chroma .ow {
|
||||
color: color.get('theme/sky/base');
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Punctuation */
|
||||
.chroma .p {
|
||||
color: color.get('elevated/9');
|
||||
}
|
||||
/* NameProperty */
|
||||
.chroma .py {
|
||||
}
|
||||
/* LiteralString */
|
||||
.chroma .s {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringSingle */
|
||||
.chroma .s1 {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringDouble */
|
||||
.chroma .s2 {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringAffix */
|
||||
.chroma .sa {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringBacktick */
|
||||
.chroma .sb {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringChar */
|
||||
.chroma .sc {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringDoc */
|
||||
.chroma .sd {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringEscape */
|
||||
.chroma .se {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
/* LiteralStringHeredoc */
|
||||
.chroma .sh {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringInterpol */
|
||||
.chroma .si {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringRegex */
|
||||
.chroma .sr {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
/* LiteralStringSymbol */
|
||||
.chroma .ss {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* LiteralStringOther */
|
||||
.chroma .sx {
|
||||
color: color.get('theme/green/base');
|
||||
}
|
||||
/* NameVariableClass */
|
||||
.chroma .vc {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameVariableGlobal */
|
||||
.chroma .vg {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
/* NameVariableInstance */
|
||||
.chroma .vi {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
/* NameVariableMagic */
|
||||
.chroma .vm {
|
||||
}
|
||||
/* TextWhitespace */
|
||||
.chroma .w {
|
||||
color: color.get('elevated/4');
|
||||
}
|
||||
}
|
||||
@ -1,95 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin make-code-mirror-styles {
|
||||
.CodeMirror,
|
||||
.CodeMirror.cm-s-default,
|
||||
.CodeMirror.cm-s-paper {
|
||||
.cm-property {
|
||||
color: color.get('text')
|
||||
}
|
||||
|
||||
.cm-header {
|
||||
color: color.get('text')
|
||||
}
|
||||
|
||||
.cm-quote {
|
||||
color: color.get('theme/green/base')
|
||||
}
|
||||
|
||||
.cm-keyword {
|
||||
color: color.get('theme/mauve/base');
|
||||
}
|
||||
|
||||
.cm-atom {
|
||||
color: color.get('theme/red/base');
|
||||
}
|
||||
|
||||
.cm-number {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
|
||||
.cm-def {
|
||||
color: color.get('text')
|
||||
}
|
||||
|
||||
.cm-variable-2 {
|
||||
color: color.get('theme/sky/base');
|
||||
}
|
||||
|
||||
.cm-variable-3 {
|
||||
color: color.get('theme/teal/base');
|
||||
}
|
||||
|
||||
.cm-comment {
|
||||
color: color.get('elevation/6')
|
||||
}
|
||||
|
||||
.cm-string {
|
||||
color: color.get('theme/green')
|
||||
}
|
||||
|
||||
.cm-string-2 {
|
||||
color: color.get('theme/green')
|
||||
}
|
||||
|
||||
.cm-meta {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
|
||||
.cm-qualifier {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
|
||||
.cm-builtin {
|
||||
color: color.get('theme/peach/base');
|
||||
}
|
||||
|
||||
.cm-bracket {
|
||||
color: color.get('text')
|
||||
}
|
||||
|
||||
.cm-tag {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
|
||||
.cm-attribute {
|
||||
color: color.get('theme/yellow/base');
|
||||
}
|
||||
|
||||
.cm-hr {
|
||||
color: color.get('elevation/9');
|
||||
}
|
||||
|
||||
.cm-url {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
color: color.get('theme/blue/base');
|
||||
}
|
||||
|
||||
.cm-error {
|
||||
color: color.get('theme/red/base');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,155 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin make-monaco-styles($is-dark: true) {
|
||||
$surface0: #{color.get('elevation/4')};
|
||||
$subtext0: #{color.get('elevation/10')};
|
||||
$overlay2: #{color.get('elevation/9')};
|
||||
$mantle: #{color.get('elevation/0')};
|
||||
$base: #{color.get('elevation/3')};
|
||||
$accent: #{color.get('primary/base')};
|
||||
$text: #{color.get('text')};
|
||||
$mauve: #{color.get('theme/sapphire/base')};
|
||||
$peach: #{color.get('theme/peach/base')};
|
||||
$teal: #{color.get('theme/teal/base')};
|
||||
$green: #{color.get('theme/green/base')};
|
||||
$blue: #{color.get('theme/blue/base')};
|
||||
$pink: #{color.get('theme/pink/base')};
|
||||
|
||||
.monaco-editor {
|
||||
--vscode-editor-background: #{$mantle} !important;
|
||||
--vscode-editorGutter-background: #{$mantle} !important;
|
||||
|
||||
// selected text
|
||||
.selected-text {
|
||||
background-color: $surface0 !important;
|
||||
}
|
||||
// line numbers
|
||||
.margin-view-overlays .line-numbers {
|
||||
color: $subtext0 !important;
|
||||
}
|
||||
.line-numbers.active-line-number {
|
||||
color: $accent !important;
|
||||
}
|
||||
|
||||
// current / cursor line
|
||||
.view-overlays .current-line,
|
||||
.margin-view-overlays .current-line-margin {
|
||||
background-color: #{color.get('elevation/2')} !important;
|
||||
}
|
||||
|
||||
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
|
||||
|
||||
// plaintext
|
||||
.mtk1 {
|
||||
color: $text !important;
|
||||
}
|
||||
.mtk2 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// decorators
|
||||
.mtk3 {
|
||||
color: $peach !important;
|
||||
}
|
||||
// shell arguments
|
||||
.mtk4 {
|
||||
color: $teal !important;
|
||||
}
|
||||
// css constants & pre-defineds
|
||||
.mtk5 {
|
||||
color: $text !important;
|
||||
}
|
||||
// keywords
|
||||
.mtk6 {
|
||||
color: $mauve !important;
|
||||
}
|
||||
// numbers
|
||||
.mtk7 {
|
||||
color: $peach !important;
|
||||
}
|
||||
// comments
|
||||
.mtk8 {
|
||||
color: $overlay2 !important;
|
||||
}
|
||||
// sometimes a keyword, apparently
|
||||
.mtk9 {
|
||||
color: $mauve !important;
|
||||
}
|
||||
// braces, brackets, parentheses
|
||||
.mtk10 {
|
||||
color: $subtext0 !important;
|
||||
}
|
||||
// arrow brackets & equal signs in HTML
|
||||
.mtk11 {
|
||||
color: $teal !important;
|
||||
}
|
||||
// @ sign in javascript ¯\_(ツ)_/¯
|
||||
.mtk12 {
|
||||
color: $teal !important;
|
||||
}
|
||||
.mtk13 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
.mtk14 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// regex, css classnames, and HTML keywords (huh)
|
||||
.mtk15 {
|
||||
color: $mauve !important;
|
||||
}
|
||||
// shebangs
|
||||
.mtk16 {
|
||||
color: $overlay2 !important;
|
||||
}
|
||||
.mtk17 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
.mtk18 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// glob operator i guess
|
||||
.mtk19 {
|
||||
color: $teal !important;
|
||||
}
|
||||
.mtk20 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// strings
|
||||
.mtk21 {
|
||||
color: $green !important;
|
||||
}
|
||||
.mtk22 {
|
||||
color: #ff69b4 !important;
|
||||
}
|
||||
// functions
|
||||
.mtk23 {
|
||||
color: $blue !important;
|
||||
}
|
||||
// shell variables
|
||||
.mtk24 {
|
||||
color: $peach !important;
|
||||
}
|
||||
// weird variables
|
||||
.mtk25 {
|
||||
color: $pink !important;
|
||||
}
|
||||
|
||||
// .bracket-highlighting-0 {
|
||||
// color: color.mix($text, $red, 40%) !important;
|
||||
// }
|
||||
// .bracket-highlighting-1 {
|
||||
// color: color.mix($text, $peach, 40%) !important;
|
||||
// }
|
||||
// .bracket-highlighting-2 {
|
||||
// color: color.mix($text, $yellow, 40%) !important;
|
||||
// }
|
||||
// .bracket-highlighting-3 {
|
||||
// color: color.mix($text, $green, 40%) !important;
|
||||
// }
|
||||
// .bracket-highlighting-4 {
|
||||
// color: color.mix($text, $blue, 40%) !important;
|
||||
// }
|
||||
// .bracket-highlighting-5 {
|
||||
// color: color.mix($text, $mauve, 40%) !important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
.page-content.home {
|
||||
div.center {
|
||||
img {
|
||||
// background-color: color.get('primary/base');
|
||||
// border-radius: var.get('measure/4x');
|
||||
// padding: var.get('measure/1.25x');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
@mixin apply-styles {
|
||||
.issue-content {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.issue-content, .issue-list {
|
||||
.labels-list {
|
||||
.label {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles() {
|
||||
.markup {
|
||||
table {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
#project-board {
|
||||
.project-column-header {
|
||||
.project-column-title {
|
||||
.circular.label {
|
||||
display: flex;
|
||||
padding: 0 !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 16px;
|
||||
padding: 0 var.get('measure/.25x') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
.secondary-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: var.get('measure/1x');
|
||||
|
||||
.ui.container {
|
||||
margin: 0 0 0 0 !important;
|
||||
max-width: unset !important;
|
||||
width: 100% !important;
|
||||
padding: 0 var.get('measure/1x');
|
||||
}
|
||||
|
||||
.repo-header {
|
||||
margin: 0 0 var.get('measure/1x') 0;
|
||||
}
|
||||
|
||||
.ui.tabs.divider {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
overflow-menu {
|
||||
.item {
|
||||
--item-margin-bottom: #{var.get('measure/.5x')} !important;
|
||||
margin: 0 var.get('measure/.5x') var(--item-margin-bottom) !important;
|
||||
border-radius: var.get('measure/.25x') !important;
|
||||
padding: var.get('measure/.5x') var.get('measure/.5x') !important;
|
||||
color: var(--color-text) !important;
|
||||
border: none !important;
|
||||
position: relative; // Make the parent element positioned
|
||||
|
||||
svg {
|
||||
color: var(--color-text-light-3) !important;
|
||||
margin-right: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: color.get('elevation/4') !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text) !important;
|
||||
border-radius: 0 !important;
|
||||
// font-weight: normal !important;
|
||||
border-bottom: calc(var(--item-margin-bottom) - 1px) solid var(--color-secondary-nav-bg) !important;
|
||||
margin-bottom: 1px !important;
|
||||
box-shadow: 0px 2px 0px 0px color.get('primary/base') !important;
|
||||
}
|
||||
|
||||
.small.label {
|
||||
background-color: color.get('elevation/7');
|
||||
border: 1px solid color.get('elevation/7');
|
||||
border-radius: var.get('measure/2x');
|
||||
color: var(--color-text);
|
||||
font-weight: var(--base-text-weight-medium, 500);
|
||||
min-width: calc(var.get('measure/1.25x') + 6px);
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
@use './repo-header';
|
||||
@use './repo';
|
||||
@use './project';
|
||||
@use './home';
|
||||
@use './markup';
|
||||
@use './issue-content';
|
||||
|
||||
@mixin apply-custom-styles {
|
||||
@include repo-header.apply-styles();
|
||||
@include repo.apply-styles();
|
||||
@include project.apply-styles();
|
||||
@include home.apply-styles();
|
||||
@include markup.apply-styles();
|
||||
@include issue-content.apply-styles();
|
||||
}
|
||||
@ -1,207 +0,0 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
|
||||
#repo-topics, #topic_edit, .label-list {
|
||||
row-gap: var.get('measure/.5x');
|
||||
margin-top: 0 !important;
|
||||
|
||||
.label:not(.basic) {
|
||||
font-size: var.get('small-font-size') !important;
|
||||
background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.1);
|
||||
color: color.get('primary/base');
|
||||
border-radius: var.get('measure/2x');
|
||||
line-height: 14px;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.3) !important;
|
||||
color: color.get('primary/base') !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ui.table>tr>td, .ui.table>tbody>tr>td {
|
||||
border-top-color: rgba(#{color.get('theme/blue/base', 'rgb')}, 0.04);
|
||||
}
|
||||
|
||||
.page-content.repository.file.list > .ui.container.lugit-repo-list-view {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
column-gap: 24px;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 var.get('measure/2x');
|
||||
|
||||
.lugit-repo-header-data {
|
||||
min-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
|
||||
max-width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
|
||||
width: calc(#{var.get('repo-home/sidebar-width')} * 0.87) !important;
|
||||
}
|
||||
|
||||
.repo-button-row {
|
||||
.gt-gap-y-3 {
|
||||
column-gap: var.get('measure/.5x');
|
||||
|
||||
#new-pull-request {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[role=menu] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#clone-panel {
|
||||
#repo-clone-url {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
flex-direction: column;
|
||||
column-gap: 0;
|
||||
row-gap: 24px;
|
||||
|
||||
.lugit-repo-header-data {
|
||||
min-width: 100%!important;
|
||||
max-width: 100%!important;
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
#repo-topics {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#repo-desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
row-gap: var.get('measure/1x');
|
||||
|
||||
h5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2em !important;
|
||||
font-style: italic !important;
|
||||
color: var(--color-text-light-3);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.repo-button-row {
|
||||
.gt-gap-y-3 {
|
||||
column-gap: var.get('measure/.5x');
|
||||
}
|
||||
|
||||
#clone-panel {
|
||||
#repo-clone-url {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lugit-repo-header-data {
|
||||
min-width: var.get('repo-home/sidebar-width');
|
||||
max-width: var.get('repo-home/sidebar-width');
|
||||
width: var.get('repo-home/sidebar-width');
|
||||
|
||||
#repo-desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
row-gap: var.get('measure/1x');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lugit-repo-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: var.get('measure/1x');
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#repo-files-table {
|
||||
.commit-list {
|
||||
.latest-commit {
|
||||
gap: var.get('measure/.5x');
|
||||
}
|
||||
|
||||
.isSigned, .isVerified {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
.shortsha {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detail {
|
||||
border-left: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
div {
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.commit-summary {
|
||||
color: var(--color-text-light-2) !important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic_edit {
|
||||
flex-direction: column;
|
||||
row-gap: var.get('measure/1x');
|
||||
|
||||
.field.gt-f1.gt-mr-3 {
|
||||
margin: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#repo-topics {
|
||||
margin-top: var.get('measure/1x') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
@use './file-list';
|
||||
|
||||
@mixin apply-styles {
|
||||
@include file-list.apply-styles();
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@forward './repo';
|
||||
@forward './issues';
|
||||
@ -0,0 +1,274 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '../../components/button' as button;
|
||||
|
||||
@mixin sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none !important;
|
||||
color: var(--color-text-light-2) !important;
|
||||
padding: 0 !important;
|
||||
|
||||
// reset padding and margin for all children
|
||||
>*, .issue-sidebar-combo>*, >text+*, >.ui>* {
|
||||
margin: unset !important;
|
||||
padding: unset !important;
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
}
|
||||
|
||||
// alignment for main children elements
|
||||
>.ui, >.text, >.ui {
|
||||
padding-left: var.get('measure/.5x') !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.ui.ui.compact.grid>.column:not(.row), .ui.ui.ui.compact.grid>.row>.column {
|
||||
padding-left: unset;
|
||||
padding-right: unset;
|
||||
}
|
||||
|
||||
// reset for all actionable elements
|
||||
button, input, .dropdown, .ui.grid>.row>[class*="two wide"].column, .ui.grid>.column.row>[class*="two wide"].column, .ui.grid>[class*="two wide"].column, .ui.column.grid>[class*="two wide"].column {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
min-height: 0 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------- //
|
||||
// ---------------------- Elements Styling ---------------------- //
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.ui.label {
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
// dividers
|
||||
>.divider {
|
||||
width: calc(100% - var.get('measure/.5x')) !important;
|
||||
align-self: flex-end;
|
||||
margin: var.get('measure/.875x') 0 !important;
|
||||
}
|
||||
|
||||
|
||||
// select branch dropdown
|
||||
.select-branch {
|
||||
align-self: flex-end;
|
||||
|
||||
.branch-dropdown-button {
|
||||
@include button.hollow;
|
||||
}
|
||||
|
||||
+.divider {
|
||||
border: none !important;
|
||||
margin: var.get('measure/.5x') 0 !important;
|
||||
}
|
||||
|
||||
.menu {
|
||||
--color-menu: #{color.get('elevation/3')};
|
||||
|
||||
.branch-tag-item.active, .reference-list-menu, .reference-list-menu .item {
|
||||
--color-menu: #{color.get('elevation/4')} !important;
|
||||
}
|
||||
|
||||
.branch-tag-item {
|
||||
--border-radius: #{var.get('measure/.5x')};
|
||||
|
||||
&:hover {
|
||||
color: currentColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issue-sidebar-combo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
|
||||
> * {
|
||||
padding-left: var.get('measure/.5x') !important;
|
||||
padding-right: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
padding-top: var.get('measure/.375x') !important;
|
||||
padding-bottom: var.get('measure/.375x') !important;
|
||||
font-size: var.get('font-size/sm');
|
||||
transition: background-color .1s ease;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
>a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
color: currentColor !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#{color.get('elevation/6', 'rgb')}, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// direct text children
|
||||
>.text {
|
||||
// background-color: orange !important;
|
||||
flex: 1;
|
||||
display: flex !important;
|
||||
justify-content: space-between;
|
||||
font-weight: 500 !important;
|
||||
margin-bottom: var.get('measure/.75x') !important;
|
||||
|
||||
strong {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.watching, .depending {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.75x') !important;
|
||||
}
|
||||
|
||||
.watching {
|
||||
button {
|
||||
font-weight: 500;
|
||||
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
svg {
|
||||
color: color.get('subtle') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.depending {
|
||||
.divided.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/1x') !important;
|
||||
|
||||
.dependency {
|
||||
border: none !important;
|
||||
|
||||
.item-left {
|
||||
a { // issue
|
||||
|
||||
}
|
||||
|
||||
div.text { // repo
|
||||
font-size: var.get('font-size/xs') !important;
|
||||
}
|
||||
}
|
||||
|
||||
// if not the first dependency in the list, we add a :before element to serve as divider
|
||||
&:not(:first-child) {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: color.get('elevation/4');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selection.dropdown {
|
||||
padding: var.get('measure/.375x') var.get('measure/.75x') !important;
|
||||
|
||||
input {
|
||||
padding: var.get('measure/.375x') var.get('measure/.75x') !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: var.get('measure/.5x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
// reference
|
||||
div.ui.equal.width.compact.grid {
|
||||
button {
|
||||
@include button.hollow;
|
||||
display: flex;
|
||||
color: color.get('subtle') !important;
|
||||
width: unset !important;
|
||||
// padding: var.get('measure/.5x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
// issue due date form
|
||||
.issue-due-form {
|
||||
* {
|
||||
color: color.get('subtle') !important;
|
||||
}
|
||||
|
||||
// input of type date
|
||||
input[type="date"] {
|
||||
padding: var.get('measure/.5x') var.get('measure/.75x') !important;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: var.get('measure/.5x') !important;
|
||||
border-top-right-radius: var(--border-radius) !important;
|
||||
border-bottom-right-radius: var(--border-radius) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// direct form child
|
||||
>form, .form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
// buttons at the end of the sidebar
|
||||
>form button, >button {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
justify-content: start !important;
|
||||
gap: var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.25x') !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
|
||||
svg {
|
||||
color: color.get('subtle') !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color.get('elevation/4') !important;
|
||||
}
|
||||
|
||||
// if the data-modal attr is #sidebar-delete-issue, make the color red
|
||||
&[data-modal="#sidebar-delete-issue"] {
|
||||
color: color.get('palette/red/base') !important;
|
||||
svg {
|
||||
color: color.get('palette/red/base') !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(#{color.get('palette/red/dark/15%', 'rgb')}, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,133 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '../../components/button' as button;
|
||||
@use './issue-sidebar';
|
||||
|
||||
@mixin apply-styles {
|
||||
.issue-content-right {
|
||||
@include issue-sidebar.sidebar;
|
||||
}
|
||||
|
||||
.issue-title-header {
|
||||
margin-bottom: var.get('measure/1.5x');
|
||||
padding-bottom: var.get('measure/.75x');
|
||||
border-bottom: 1px solid color.get('elevation/5');
|
||||
|
||||
.issue-title {
|
||||
.index {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.issue-title-meta {
|
||||
color: color.get('subtle');
|
||||
}
|
||||
}
|
||||
|
||||
.issue-content {
|
||||
column-gap: var.get('measure/1.5x');
|
||||
}
|
||||
|
||||
.issue-content-left {
|
||||
.timeline-avatar img {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
&.comment {
|
||||
.content {
|
||||
background-color: transparent !important;
|
||||
|
||||
>.comment-header, >.ui.segment {
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
padding: var.get('measure/.25x') var.get('measure/.25x') var.get('measure/.25x') var.get('measure/1x') !important;
|
||||
|
||||
.comment-header-left {
|
||||
.text {
|
||||
color: color.get('subtle') !important;
|
||||
|
||||
.author {
|
||||
color: color.get('text') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-header-right {
|
||||
* {
|
||||
color: color.get('subtle') !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: var.get('measure/1.25x', 1.25rem) !important;
|
||||
padding: 0px var.get('measure/.375x') !important;
|
||||
border-radius: var.get('measure/1x') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// comment form at the end
|
||||
&.form {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: var(--color-body);
|
||||
gap: var.get('measure/1x');
|
||||
left: -68px !important;
|
||||
width: calc(100% + 68px - 16px) !important;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
left: 0 !important;
|
||||
margin-left: -16px !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.timeline-avatar {
|
||||
display: block;
|
||||
position: relative !important;
|
||||
left: unset !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
// fake title to mimic github new issue page
|
||||
&:before {
|
||||
display: block;
|
||||
content: 'Add a comment';
|
||||
font-weight: 600;
|
||||
margin-bottom: var.get('measure/1x');
|
||||
margin-top: var.get('measure/.5x');
|
||||
font-size: var.get('font-size/lg');
|
||||
}
|
||||
|
||||
display: block;
|
||||
position: relative !important;
|
||||
margin-left: 0 !important;
|
||||
flex: 1;
|
||||
|
||||
.ui.segment {
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment>.content>div:last-child {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment>.content>div:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
.page-content.repository.issue-list, .page-content.dashboard.issues {
|
||||
.secondary-nav {
|
||||
margin-bottom: var.get('measure/1.5x');
|
||||
}
|
||||
|
||||
#issue-filters {
|
||||
margin: var.get('measure/2x') 0 var.get('measure/1x') 0;
|
||||
gap: var.get('measure/3x');
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#issue-list {
|
||||
.flex-item {
|
||||
padding: var.get('measure/.75x') 0 var.get('measure/.75x') 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.branch {
|
||||
background-color: color.get('elevation/1');
|
||||
}
|
||||
|
||||
.flex-item-icon {
|
||||
svg {
|
||||
&.green {
|
||||
color: color.get('palette/green/base') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
margin-bottom: var.get('measure/1.5x');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
@use './list';
|
||||
@use './issue';
|
||||
|
||||
@mixin issues {
|
||||
@include list.apply-styles();
|
||||
@include issue.apply-styles();
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '../../components/button' as button;
|
||||
|
||||
@mixin apply-styles {
|
||||
.repo-button-row-left {
|
||||
.button {
|
||||
@include button.hollow;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-home-filelist {
|
||||
> div {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: var.get('measure/1x');
|
||||
|
||||
// file list table
|
||||
#repo-files-table {
|
||||
// header
|
||||
.repo-file-last-commit {
|
||||
padding: var.get('measure/.75x') var.get('measure/1x') !important;
|
||||
|
||||
.commit-summary {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.latest-commit {
|
||||
gap: var.get('measure/.5x');
|
||||
|
||||
img {
|
||||
// make it a circle (avatar)
|
||||
border-radius: 50%;
|
||||
width: var.get('measure/1.25x');
|
||||
height: var.get('measure/1.25x');
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
// boton con icono y avatar
|
||||
.detail.icon.button img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cells
|
||||
.repo-file-cell {
|
||||
padding: var.get('measure/.5x') var.get('measure/1x') !important;
|
||||
|
||||
&.name {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
column-gap: var.get('measure/.5x');
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin apply-styles {
|
||||
// description, labels, info
|
||||
.repo-home-sidebar-top {
|
||||
@media (max-width: 768px) {
|
||||
border-bottom: 1px solid color.get('elevation/6');
|
||||
margin-bottom: var.get('measure/1x');
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#repo-topics, #topic_edit, .label-list {
|
||||
row-gap: var.get('measure/.5x');
|
||||
margin-top: 0 !important;
|
||||
|
||||
.label:not(.basic) {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.1);
|
||||
color: color.get('primary/base');
|
||||
border-radius: var.get('measure/2x');
|
||||
line-height: 22px !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#{color.get('palette/blue/base', 'rgb')}, 0.3) !important;
|
||||
color: color.get('primary/base') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu {
|
||||
border-color: color.get('elevation/6')
|
||||
}
|
||||
}
|
||||
|
||||
.repo-description {
|
||||
margin-bottom: var.get('measure/1x');
|
||||
}
|
||||
|
||||
.flex-text-block {
|
||||
gap: var.get('measure/.25x') !important;
|
||||
font-size: var.get('font-size/md') !important;
|
||||
|
||||
svg {
|
||||
margin-right: var.get('measure/.25x') !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.repo-description {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#repo-topics, #manage_topic, .flex-item-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-item-body>div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// releases + languages section
|
||||
.repo-home-sidebar-bottom {
|
||||
.flex-list .flex-item .flex-item-main {
|
||||
.flex-item {
|
||||
padding: 0 !important;
|
||||
|
||||
.flex-item-main {
|
||||
gap: 0 !important;
|
||||
|
||||
.flex-item-header {
|
||||
* {
|
||||
font-size: var.get('font-size/md') !important;
|
||||
}
|
||||
|
||||
.flex-item-title {
|
||||
gap: var.get('measure/.5x') !important;
|
||||
.green.label {
|
||||
border-radius: var.get('measure/2x');
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid color.get('palette/green/base') !important;
|
||||
color: color.get('palette/green/base') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-item-body {
|
||||
.time {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// languages
|
||||
.flex-item-body {
|
||||
gap: 0 !important;
|
||||
|
||||
.language-stats {
|
||||
background-color: red !important;
|
||||
margin: 0 !important;
|
||||
height: var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
.language-stats-details {
|
||||
gap: var.get('measure/1x') !important;
|
||||
.item {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
padding: 0;
|
||||
gap: var.get('measure/.25x') !important;
|
||||
|
||||
.color-icon {
|
||||
height: var.get('measure/.5x') !important;
|
||||
width: var.get('measure/.5x') !important;
|
||||
margin-right: var.get('measure/.25x') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repo-home-sidebar-bottom, .repo-home-sidebar-top {
|
||||
padding-left: var.get('measure/1.5x');
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.flex-item-title .item {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: var.get('measure/.5x');
|
||||
text-decoration: none;
|
||||
|
||||
.small.label {
|
||||
background-color: color.get('elevation/7');
|
||||
border: 1px solid color.get('elevation/7');
|
||||
border-radius: var.get('measure/2x');
|
||||
color: color.get('text');
|
||||
font-weight: var(--base-text-weight-medium, 500);
|
||||
min-width: 20px;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
>.flex-list>.flex-item {
|
||||
padding-top: var.get('measure/1x');
|
||||
padding-bottom: var.get('measure/1x');
|
||||
|
||||
>.flex-item-main {
|
||||
gap: var.get('measure/1x');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,171 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '../../components/button' as button;
|
||||
|
||||
@mixin apply-styles {
|
||||
.secondary-nav {
|
||||
margin-bottom: var.get('measure/1.5x') !important;
|
||||
|
||||
.ui.container {
|
||||
margin: 0 0 0 0 !important;
|
||||
max-width: unset !important;
|
||||
width: 100% !important;
|
||||
padding: 0 var.get('measure/1x');
|
||||
}
|
||||
|
||||
// header
|
||||
.repo-header {
|
||||
margin: 0 0 var.get('measure/1x') 0;
|
||||
|
||||
// repo image
|
||||
img.avatar {
|
||||
width: var.get('measure/2x') !important;
|
||||
height: var.get('measure/2x') !important;
|
||||
}
|
||||
|
||||
// repo title (repo "owner / name" text)
|
||||
.flex-item-title {
|
||||
gap: var.get('measure/.25x') !important;
|
||||
font-size: var.get('font-size/md') !important;
|
||||
font-weight: normal !important;
|
||||
color: color.get('elevation/10') !important;
|
||||
|
||||
a {
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
border-radius: var.get('measure/.25x');
|
||||
|
||||
&:hover {
|
||||
background-color: color.get('elevation/4') !important;
|
||||
color: color.get('text') !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// repo name only
|
||||
a:last-child {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// "public/private" label
|
||||
.flex-item-trailing {
|
||||
.label {
|
||||
padding: var.get('measure/.25x') var.get('measure/.5x');
|
||||
font-size: var.get('font-size/sm');
|
||||
border-radius: var.get('measure/1x');
|
||||
background-color: transparent;
|
||||
color: color.get('elevation/10');
|
||||
}
|
||||
|
||||
// lock icon
|
||||
svg {
|
||||
color: color.get('elevation/10');
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
// repo title (repo "owner / name" text)
|
||||
.flex-item-title {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
padding: 0 var.get('measure/.5x') !important;
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
a {
|
||||
padding: 0 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
color: color.get('primary/base') !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
float: left;
|
||||
margin-right: var.get('measure/.5x');
|
||||
color: color.get('elevation/10') !important;
|
||||
font-weight: 500 !important;
|
||||
|
||||
&:hover {
|
||||
color: color.get('primary/base') !important;
|
||||
}
|
||||
}
|
||||
|
||||
// repo name only
|
||||
a:last-child {
|
||||
font-size: var.get('font-size/md') !important;
|
||||
clear: left;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// header navbar menu
|
||||
overflow-menu.ui.secondary.pointing.menu {
|
||||
.overflow-menu-items {
|
||||
gap: var.get('measure/.25x') !important;
|
||||
}
|
||||
|
||||
// navbar menu items
|
||||
.item {
|
||||
padding: var.get('measure/.375x') var.get('measure/.5x') !important;
|
||||
margin-bottom: var.get('measure/.5x') !important;
|
||||
border-radius: var.get('measure/.25x');
|
||||
border: none !important;
|
||||
|
||||
// icon
|
||||
svg {
|
||||
color: var(--color-text-light-3) !important;
|
||||
margin-right: var.get('measure/.5x') !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: color.get('elevation/4') !important;
|
||||
color: var(--color-text-light-2) !important;
|
||||
}
|
||||
|
||||
// when the represents the current route
|
||||
&.active {
|
||||
border: none !important;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
top: calc(100% + #{var.get('measure/.375x')} - 1px);
|
||||
background-color: color.get('primary/base');
|
||||
transform: unset;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// numeric badge/label (e.g. indicating the number of issues)
|
||||
.small.label {
|
||||
background-color: color.get('elevation/7');
|
||||
border: 1px solid color.get('elevation/7');
|
||||
border-radius: var.get('measure/2x');
|
||||
color: color.get('text');
|
||||
font-weight: var(--base-text-weight-medium, 500);
|
||||
min-width: calc(var.get('measure/1x') + 1px);
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// buttons at the right of the header (unwatch, star, fork, etc.)
|
||||
.repo-buttons {
|
||||
.button {
|
||||
font-size: var.get('font-size/sm') !important;
|
||||
@include button.hollow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@use './home';
|
||||
@use './secondary-navbar';
|
||||
@use './file-list';
|
||||
|
||||
@mixin repo {
|
||||
@include home.apply-styles();
|
||||
@include secondary-navbar.apply-styles();
|
||||
@include file-list.apply-styles();
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
|
||||
@mixin base {
|
||||
:root {
|
||||
// ┌───────┐
|
||||
// │ fonts │
|
||||
// └───────┘
|
||||
--fonts-proportional: #{var.get('font-family')};
|
||||
--fonts-monospace: #{var.get('code-font-family')};
|
||||
--fonts-emoji: #{var.get('emoji-font-family')};
|
||||
|
||||
// ┌───────┬───────────────────┐
|
||||
// │ fonts │ weights & heights │
|
||||
// └───────┴───────────────────┘
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--line-height-default: normal;
|
||||
|
||||
// ┌────────┐
|
||||
// │ images │
|
||||
// └────────┘
|
||||
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
||||
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
|
||||
|
||||
// ┌────────┐
|
||||
// │ radius │
|
||||
// └────────┘
|
||||
--border-radius: #{var.get('measure/.5x')};
|
||||
--border-radius-medium: #{var.get('measure/1x')};
|
||||
--border-radius-full: calc(infinity * 1px);
|
||||
|
||||
// ┌────────┐
|
||||
// │ others │
|
||||
// └────────┘
|
||||
--opacity-disabled: 0.55;
|
||||
--height-loading: 16rem;
|
||||
--min-height-textarea: 132px; // padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported
|
||||
--checkbox-size: 15px; // height and width of checkbox and radio inputs
|
||||
--page-spacing: 24px; // space between page elements
|
||||
--page-margin-x: 32px; // minimum space on left and right side of page
|
||||
--tab-size: 4;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
:root {
|
||||
--page-margin-x: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
:root {
|
||||
--page-margin-x: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,398 @@
|
||||
@use '@lucas-labs/lui-micro/var' as var;
|
||||
@use '@lucas-labs/lui-micro/color' as color;
|
||||
|
||||
@mixin colors($is-dark: true) {
|
||||
$scheme: if($is-dark, 'dark', 'light');
|
||||
$scheme-inverted: if($is-dark, 'light', 'dark');
|
||||
|
||||
:root {
|
||||
accent-color: var(--color-accent);
|
||||
|
||||
@if $is-dark {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
} @else {
|
||||
color-scheme: light;
|
||||
--is-dark-theme: false;
|
||||
}
|
||||
|
||||
// ┌─────────┐
|
||||
// │ primary │
|
||||
// └─────────┘
|
||||
--color-primary: #{color.get('primary/base')};
|
||||
--color-primary-contrast: #{color.get('primary/base', 'contrast')};
|
||||
|
||||
// dark
|
||||
--color-primary-dark-1: #{color.get('primary/' + $scheme-inverted + '/3%')};
|
||||
--color-primary-dark-2: #{color.get('primary/' + $scheme-inverted + '/6%')};
|
||||
--color-primary-dark-3: #{color.get('primary/' + $scheme-inverted + '/9%')};
|
||||
--color-primary-dark-4: #{color.get('primary/' + $scheme-inverted + '/10%')};
|
||||
--color-primary-dark-5: #{color.get('primary/' + $scheme-inverted + '/20%')};
|
||||
--color-primary-dark-6: #{color.get('primary/' + $scheme-inverted + '/25%')};
|
||||
--color-primary-dark-7: #{color.get('primary/' + $scheme-inverted + '/30%')};
|
||||
|
||||
// light
|
||||
--color-primary-light-1: #{color.get('primary/' + $scheme + '/3%')};
|
||||
--color-primary-light-2: #{color.get('primary/' + $scheme + '/6%')};
|
||||
--color-primary-light-3: #{color.get('primary/' + $scheme + '/10%')};
|
||||
--color-primary-light-4: #{color.get('primary/' + $scheme + '/15%')};
|
||||
--color-primary-light-5: #{color.get('primary/' + $scheme + '/20%')};
|
||||
--color-primary-light-6: #{color.get('primary/' + $scheme + '/30%')};
|
||||
--color-primary-light-7: #{color.get('primary/' + $scheme + '/40%')};
|
||||
|
||||
// alpha
|
||||
--color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1);
|
||||
--color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2);
|
||||
--color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3);
|
||||
--color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4);
|
||||
--color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5);
|
||||
--color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6);
|
||||
--color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7);
|
||||
--color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8);
|
||||
--color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9);
|
||||
|
||||
// states
|
||||
--color-primary-hover: var(--color-primary-light-1);
|
||||
--color-primary-active: var(--color-primary-light-3);
|
||||
|
||||
// ┌───────────┐
|
||||
// │ secondary │ » secondary
|
||||
// └───────────┘
|
||||
--color-secondary: #{color.get('secondary/base')};
|
||||
|
||||
// dark
|
||||
--color-secondary-dark-1: #{color.get('secondary/' + $scheme-inverted + '/3%')};
|
||||
--color-secondary-dark-2: #{color.get('secondary/' + $scheme-inverted + '/6%')};
|
||||
--color-secondary-dark-3: #{color.get('secondary/' + $scheme-inverted + '/9%')};
|
||||
--color-secondary-dark-4: #{color.get('secondary/' + $scheme-inverted + '/12%')};
|
||||
--color-secondary-dark-5: #{color.get('secondary/' + $scheme-inverted + '/15%')};
|
||||
--color-secondary-dark-6: #{color.get('secondary/' + $scheme-inverted + '/20%')};
|
||||
--color-secondary-dark-7: #{color.get('secondary/' + $scheme-inverted + '/25%')};
|
||||
--color-secondary-dark-8: #{color.get('secondary/' + $scheme-inverted + '/30%')};
|
||||
--color-secondary-dark-9: #{color.get('secondary/' + $scheme-inverted + '/35%')};
|
||||
--color-secondary-dark-10: #{color.get('secondary/' + $scheme-inverted + '/40%')};
|
||||
--color-secondary-dark-11: #{color.get('secondary/' + $scheme-inverted + '/45%')};
|
||||
--color-secondary-dark-12: #{color.get('secondary/' + $scheme-inverted + '/50%')};
|
||||
--color-secondary-dark-13: #{color.get('secondary/' + $scheme-inverted + '/55%')};
|
||||
|
||||
// light
|
||||
--color-secondary-light-1: #{color.get('secondary/' + $scheme + '/3%')};
|
||||
--color-secondary-light-2: #{color.get('secondary/' + $scheme + '/6%')};
|
||||
--color-secondary-light-3: #{color.get('secondary/' + $scheme + '/9%')};
|
||||
--color-secondary-light-4: #{color.get('secondary/' + $scheme + '/12%')};
|
||||
|
||||
// alpha
|
||||
--color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1);
|
||||
--color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2);
|
||||
--color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3);
|
||||
--color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4);
|
||||
--color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5);
|
||||
--color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6);
|
||||
--color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7);
|
||||
--color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8);
|
||||
--color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9);
|
||||
|
||||
// states
|
||||
--color-secondary-button: var(--color-secondary-dark-4);
|
||||
--color-secondary-hover: var(--color-secondary-dark-3);
|
||||
--color-secondary-active: var(--color-secondary-dark-2);
|
||||
|
||||
// ┌─────────┐
|
||||
// │ console │ » used for actions console and console files
|
||||
// └─────────┘
|
||||
--color-console-fg: #f7f8f9;
|
||||
--color-console-fg-subtle: #bdc4cc;
|
||||
--color-console-bg: #171b1e;
|
||||
--color-console-border: #2e353b;
|
||||
--color-console-hover-bg: #272d33;
|
||||
--color-console-active-bg: #2e353b;
|
||||
--color-console-menu-bg: #262b31;
|
||||
--color-console-menu-border: #414b55;
|
||||
|
||||
// ┌───────┐
|
||||
// │ named │
|
||||
// └───────┘
|
||||
--color-red: #{color.get('palette/red/base')};
|
||||
--color-orange: #{color.get('palette/orange/base')};
|
||||
--color-yellow: #{color.get('palette/yellow/base')};
|
||||
--color-olive: #{color.get('palette/olive/base')};
|
||||
--color-green: #{color.get('palette/green/base')};
|
||||
--color-teal: #{color.get('palette/teal/base')};
|
||||
--color-blue: #{color.get('palette/blue/base')};
|
||||
--color-violet: #{color.get('palette/violet/base')};
|
||||
--color-purple: #{color.get('palette/purple/base')};
|
||||
--color-pink: #{color.get('palette/pink/base')};
|
||||
--color-brown: #{color.get('palette/brown/base')};
|
||||
--color-black: #{color.get('elevation/1')};
|
||||
|
||||
// ┌───────┐
|
||||
// │ named │ » light variants
|
||||
// └───────┘
|
||||
--color-red-light: #{color.get('palette/red/light/10%')};
|
||||
--color-orange-light: #{color.get('palette/orange/light/10%')};
|
||||
--color-yellow-light: #{color.get('palette/yellow/light/10%')};
|
||||
--color-olive-light: #{color.get('palette/olive/light/10%')};
|
||||
--color-green-light: #{color.get('palette/green/light/10%')};
|
||||
--color-teal-light: #{color.get('palette/teal/light/10%')};
|
||||
--color-blue-light: #{color.get('palette/blue/light/10%')};
|
||||
--color-violet-light: #{color.get('palette/violet/light/10%')};
|
||||
--color-purple-light: #{color.get('palette/purple/light/10%')};
|
||||
--color-pink-light: #{color.get('palette/pink/light/10%')};
|
||||
--color-brown-light: #{color.get('palette/brown/light/10%')};
|
||||
--color-black-light: #{if(
|
||||
is-dark,
|
||||
color.get('palette/black/light/10%'),
|
||||
color.get('palette/white/light/10%')
|
||||
)};
|
||||
|
||||
// ┌───────┐
|
||||
// │ named │ » dark 1 variants
|
||||
// └───────┘
|
||||
--color-red-dark-1: #{color.get('palette/red/dark/10%')};
|
||||
--color-orange-dark-1: #{color.get('palette/orange/dark/10%')};
|
||||
--color-yellow-dark-1: #{color.get('palette/yellow/dark/10%')};
|
||||
--color-olive-dark-1: #{color.get('palette/olive/dark/10%')};
|
||||
--color-green-dark-1: #{color.get('palette/green/dark/10%')};
|
||||
--color-teal-dark-1: #{color.get('palette/teal/dark/10%')};
|
||||
--color-blue-dark-1: #{color.get('palette/blue/dark/10%')};
|
||||
--color-violet-dark-1: #{color.get('palette/violet/dark/10%')};
|
||||
--color-purple-dark-1: #{color.get('palette/purple/dark/10%')};
|
||||
--color-pink-dark-1: #{color.get('palette/pink/dark/10%')};
|
||||
--color-brown-dark-1: #{color.get('palette/brown/dark/10%')};
|
||||
--color-black-dark-1: #{if(
|
||||
is-dark,
|
||||
color.get('palette/black/dark/10%'),
|
||||
color.get('palette/white/dark/10%')
|
||||
)};
|
||||
|
||||
// ┌───────┐
|
||||
// │ named │ » dark 2 variants
|
||||
// └───────┘
|
||||
--color-red-dark-2: #{color.get('palette/red/dark/20%')};
|
||||
--color-orange-dark-2: #{color.get('palette/orange/dark/20%')};
|
||||
--color-yellow-dark-2: #{color.get('palette/yellow/dark/20%')};
|
||||
--color-olive-dark-2: #{color.get('palette/olive/dark/20%')};
|
||||
--color-green-dark-2: #{color.get('palette/green/dark/20%')};
|
||||
--color-teal-dark-2: #{color.get('palette/teal/dark/20%')};
|
||||
--color-blue-dark-2: #{color.get('palette/blue/dark/20%')};
|
||||
--color-violet-dark-2: #{color.get('palette/violet/dark/20%')};
|
||||
--color-purple-dark-2: #{color.get('palette/purple/dark/20%')};
|
||||
--color-pink-dark-2: #{color.get('palette/pink/dark/20%')};
|
||||
--color-brown-dark-2: #{color.get('palette/brown/dark/20%')};
|
||||
--color-black-dark-2: #{if(
|
||||
is-dark,
|
||||
color.get('palette/black/dark/20%'),
|
||||
color.get('palette/white/dark/20%')
|
||||
)};
|
||||
|
||||
// ┌──────┐
|
||||
// │ ansi │ » for actions console and console files
|
||||
// └──────┘
|
||||
--color-ansi-black: #1e2327;
|
||||
--color-ansi-red: #cc4848;
|
||||
--color-ansi-green: #87ab63;
|
||||
--color-ansi-yellow: #cc9903;
|
||||
--color-ansi-blue: #3a8ac6;
|
||||
--color-ansi-magenta: #d22e8b;
|
||||
--color-ansi-cyan: #00918a;
|
||||
--color-ansi-white: var(--color-console-fg-subtle);
|
||||
--color-ansi-bright-black: #424851;
|
||||
--color-ansi-bright-red: #d15a5a;
|
||||
--color-ansi-bright-green: #93b373;
|
||||
--color-ansi-bright-yellow: #eaaf03;
|
||||
--color-ansi-bright-blue: #4e96cc;
|
||||
--color-ansi-bright-magenta: #d74397;
|
||||
--color-ansi-bright-cyan: #00b6ad;
|
||||
--color-ansi-bright-white: var(--color-console-fg);
|
||||
|
||||
// ┌───────┐
|
||||
// │ other │
|
||||
// └───────┘
|
||||
--color-grey: #{color.get('elevation/9')};
|
||||
--color-grey-light: #{color.get('elevation/11')};
|
||||
--color-gold: #{color.get('palette/yellow/dark/20%')};
|
||||
--color-white: #{if(is-dark, color.get('palette/black/base'), color.get('palette/white/base'))};
|
||||
--color-git: #f05133;
|
||||
|
||||
// ┌──────┐
|
||||
// │ diff │
|
||||
// └──────┘
|
||||
--color-diff-added-linenum-bg: #{color.get('palette/teal/dark/50%')};
|
||||
--color-diff-added-row-bg: #{color.get('palette/teal/dark/60%')};
|
||||
--color-diff-added-row-border: #{color.get('palette/teal/dark/40%')};;
|
||||
--color-diff-added-word-bg: #{color.get('palette/teal/dark/50%')};
|
||||
--color-diff-moved-row-bg: #{color.get('palette/yellow/dark/75%')};
|
||||
--color-diff-moved-row-border: #{color.get('palette/yellow/dark/65%')};
|
||||
--color-diff-removed-linenum-bg: #{color.get('palette/red/dark/60%')};
|
||||
--color-diff-removed-row-bg: #{color.get('palette/red/dark/65%')};
|
||||
--color-diff-removed-row-border: #{color.get('palette/red/dark/50%')};;
|
||||
--color-diff-removed-word-bg: #{color.get('palette/red/dark/55%')};
|
||||
--color-diff-inactive: #{color.get('elevation/6')};
|
||||
|
||||
// ┌────────┐
|
||||
// │ status │
|
||||
// └────────┘
|
||||
--color-error-border: #{color.get('palette/red/base')};
|
||||
--color-error-bg: rgba(#{color.get('palette/red/base', 'rgb')}, 0.15);
|
||||
--color-error-bg-active: #{color.get('palette/red/light/6%')};
|
||||
--color-error-bg-hover: #{color.get('palette/red/light/12%')};
|
||||
--color-error-text: #{color.get('palette/red/base')};
|
||||
--color-success-border: #{color.get('palette/green/light/12%')};
|
||||
--color-success-bg: rgba(#{color.get('palette/green/base', 'rgb')}, 0.15);
|
||||
--color-success-text: #{color.get('text')};
|
||||
--color-warning-border: #{color.get('palette/yellow/light/12%')};
|
||||
--color-warning-bg: #{color.get('palette/yellow/base')};
|
||||
--color-warning-text: #{color.get('elevation/3')};
|
||||
--color-info-border: #{color.get('palette/blue/light/12%')};
|
||||
--color-info-bg: #{color.get('elevation/3')};
|
||||
--color-info-text: #{color.get('text')};
|
||||
|
||||
// ┌───────┐
|
||||
// │ badge │
|
||||
// └───────┘
|
||||
--color-red-badge: #{color.get('palette/red/dark/20%')};
|
||||
--color-red-badge-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .1);
|
||||
--color-red-badge-hover-bg: rgba(#{color.get('palette/red/dark/20%', 'rgb')}, .2);
|
||||
|
||||
--color-green-badge: #{color.get('palette/green/base')};
|
||||
--color-green-badge-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .1);
|
||||
--color-green-badge-hover-bg: rgba(#{color.get('palette/green/base', 'rgb')}, .2);
|
||||
|
||||
--color-yellow-badge: #{color.get('palette/yellow/dark/10%')};
|
||||
--color-yellow-badge-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .1);
|
||||
--color-yellow-badge-hover-bg: rgba(#{color.get('palette/yellow/dark/10%', 'rgb')}, .2);
|
||||
|
||||
--color-orange-badge: #{color.get('palette/orange/dark/10%')};
|
||||
--color-orange-badge-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .1);
|
||||
--color-orange-badge-hover-bg: rgba(#{color.get('palette/orange/dark/10%', 'rgb')}, .2);
|
||||
|
||||
// ┌──────────────┐
|
||||
// │ target-based │
|
||||
// └──────────────┘
|
||||
|
||||
// body colors
|
||||
--color-body: #{color.get('elevation/3')};
|
||||
--color-text-dark: #{color.get('text')};
|
||||
--color-text: #{color.get('text')};
|
||||
--color-text-light: #{color.get('subtle')};
|
||||
--color-text-light-1: #{color.get('subtle')};
|
||||
--color-text-light-2: #{color.get('subtle')};
|
||||
--color-text-light-3: #{color.get('subtle')};
|
||||
--color-footer: rgba(#{color.get('elevation/2', 'rgb')}, 0.2);
|
||||
--color-timeline: #{color.get('elevation/4')};
|
||||
|
||||
// box
|
||||
--color-box-header: #{rgba(color.get('elevation/4', 'rgb'), 1)};
|
||||
--color-box-body: #{color.get('elevation/3')};
|
||||
--color-box-body-highlight: #1e2226;
|
||||
|
||||
// input
|
||||
--color-input-text: var(--color-text-dark);
|
||||
--color-input-background: #{color.get('elevation/4')};
|
||||
--color-input-toggle-background: #{color.get('elevation/4')};
|
||||
--color-input-border: #{color.get('elevation/5')};
|
||||
--color-input-border-hover: #{color.get('elevation/6')};
|
||||
|
||||
// light
|
||||
--color-light: #00001728;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #{color.get('elevation/6')};
|
||||
--color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.5);
|
||||
--color-hover-opaque: var(--color-box-header);
|
||||
--color-active: #{color.get('elevation/4')};
|
||||
--color-menu: #{color.get('elevation/4')};
|
||||
--color-card: #{color.get('elevation/4')};
|
||||
--color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
|
||||
--color-markup-code-block: #{color.get('elevation/5')};
|
||||
--color-markup-code-inline: #{color.get('elevation/5')};
|
||||
--color-button: #{color.get('elevation/4')};
|
||||
--color-code-bg: #{color.get('elevation/3')};
|
||||
--color-shadow: rgba(#{color.get('elevation/1', 'rgb')}, 0.5);
|
||||
--color-shadow-opaque: #{color.get('elevation/1')};
|
||||
--color-secondary-bg: #{color.get('elevation/4')};
|
||||
--color-expand-button: #{color.get('elevation/6')};
|
||||
--color-placeholder-text: #{color.get('elevation/9')};
|
||||
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||
--color-project-column-bg: var(--color-secondary-light-2);
|
||||
--color-caret: var(--color-text);
|
||||
--color-reaction-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .1);;
|
||||
--color-reaction-hover-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .2);;
|
||||
--color-reaction-active-bg: rgba(#{color.get('primary/dark/30%', 'rgb')}, .05);;
|
||||
--color-tooltip-text: var(--color-text);
|
||||
--color-tooltip-bg: #{color.get('elevation/7')};
|
||||
--color-overlay-backdrop: rgba(#{color.get('elevation/1', 'rgb')}, 0.8);
|
||||
|
||||
// navbar
|
||||
--color-nav-bg: #{color.get('elevation/2')};;
|
||||
--color-nav-hover-bg: #{color.get('elevation/5')};
|
||||
--color-nav-text: var(--color-text);
|
||||
--color-secondary-nav-bg: #{color.get('elevation/2')};;
|
||||
|
||||
// label
|
||||
--color-label-text: var(--color-text);
|
||||
--color-label-bg: #7282924b;
|
||||
--color-label-hover-bg: #728292a0;
|
||||
--color-label-active-bg: #728292ff;
|
||||
|
||||
// accents
|
||||
--color-accent: #{color.get('palette/blue/dark/25%')};
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-highlight-fg: #{color.get('palette/yellow/dark/20%')};
|
||||
--color-highlight-bg: #{color.get('palette/yellow/dark/75%')};
|
||||
}
|
||||
|
||||
#commits-table {
|
||||
// even rows color
|
||||
--color-light: transparent !important;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
#navbar-logo {
|
||||
img {
|
||||
height: var.get('navbar-logo/height') !important;
|
||||
width: var.get('navbar-logo/width') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markup {
|
||||
code {
|
||||
border-radius: var.get('measure/.375x') !important;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #{color.get('primary/dark/60%')};
|
||||
color: #{color.get('primary/dark/60%', 'contrast')};
|
||||
}
|
||||
|
||||
// // In dark mode, invert emojis that are hard to read otherwise
|
||||
@if $is-dark {
|
||||
.emoji[aria-label="check mark"],
|
||||
.emoji[aria-label="currency exchange"],
|
||||
.emoji[aria-label="TOP arrow"],
|
||||
.emoji[aria-label="END arrow"],
|
||||
.emoji[aria-label="ON! arrow"],
|
||||
.emoji[aria-label="SOON arrow"],
|
||||
.emoji[aria-label="heavy dollar sign"],
|
||||
.emoji[aria-label="copyright"],
|
||||
.emoji[aria-label="registered"],
|
||||
.emoji[aria-label="trade mark"],
|
||||
.emoji[aria-label="multiply"],
|
||||
.emoji[aria-label="plus"],
|
||||
.emoji[aria-label="minus"],
|
||||
.emoji[aria-label="divide"],
|
||||
.emoji[aria-label="curly loop"],
|
||||
.emoji[aria-label="double curly loop"],
|
||||
.emoji[aria-label="wavy dash"],
|
||||
.emoji[aria-label="paw prints"],
|
||||
.emoji[aria-label="musical note"],
|
||||
.emoji[aria-label="musical notes"] {
|
||||
filter: invert(100%) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@forward './base';
|
||||
@forward './colors';
|
||||
@ -1,85 +0,0 @@
|
||||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
|
||||
@function light-change($color, $amount, $isDark) {
|
||||
$multiplier: if($isDark, -1, 1);
|
||||
@return color.adjust($color, $lightness: $amount * $multiplier);
|
||||
}
|
||||
|
||||
@function alpha-change($color, $alpha) {
|
||||
@return color.change($color, $alpha: $alpha);
|
||||
}
|
||||
|
||||
@function color-variants-light($color, $is-dark, $with-base: false) {
|
||||
$set: (
|
||||
'3%': light-change($color, -3%, $is-dark),
|
||||
'6%': light-change($color, -6%, $is-dark),
|
||||
'9%': light-change($color, -9%, $is-dark),
|
||||
'12%': light-change($color, -12%, $is-dark),
|
||||
'15%': light-change($color, -15%, $is-dark),
|
||||
'18%': light-change($color, -18%, $is-dark),
|
||||
'21%': light-change($color, -21%, $is-dark),
|
||||
'24%': light-change($color, -24%, $is-dark),
|
||||
'27%': light-change($color, -27%, $is-dark),
|
||||
'30%': light-change($color, -30%, $is-dark),
|
||||
'33%': light-change($color, -33%, $is-dark),
|
||||
'36%': light-change($color, -36%, $is-dark),
|
||||
'39%': light-change($color, -39%, $is-dark)
|
||||
);
|
||||
|
||||
@if $with-base {
|
||||
$set: map.merge((base: $color), $set);
|
||||
}
|
||||
|
||||
@return $set;
|
||||
}
|
||||
|
||||
@function color-variants-dark($color, $is-dark, $with-base: false) {
|
||||
$set: (
|
||||
'3%': light-change($color, 3%, $is-dark),
|
||||
'6%': light-change($color, 6%, $is-dark),
|
||||
'9%': light-change($color, 9%, $is-dark),
|
||||
'12%': light-change($color, 12%, $is-dark),
|
||||
'15%': light-change($color, 15%, $is-dark),
|
||||
'18%': light-change($color, 18%, $is-dark),
|
||||
'21%': light-change($color, 21%, $is-dark),
|
||||
'24%': light-change($color, 24%, $is-dark),
|
||||
'27%': light-change($color, 27%, $is-dark),
|
||||
'30%': light-change($color, 30%, $is-dark),
|
||||
'33%': light-change($color, 33%, $is-dark),
|
||||
'36%': light-change($color, 36%, $is-dark),
|
||||
'39%': light-change($color, 39%, $is-dark),
|
||||
);
|
||||
|
||||
@if $with-base {
|
||||
$set: map.merge((base: $color), $set);
|
||||
}
|
||||
|
||||
@return $set;
|
||||
}
|
||||
|
||||
@function variants($color, $is-dark, $light: true, $dark: true, $base: true, $override-base-with: null) {
|
||||
$set: ();
|
||||
|
||||
// base: $color,
|
||||
// light: color-variants-light($color, $is-dark),
|
||||
// dark: color-variants-dark($color, $is-dark),
|
||||
|
||||
@if $light {
|
||||
$set: map.merge($set, (light: color-variants-light($color, $is-dark)));
|
||||
}
|
||||
|
||||
@if $dark {
|
||||
$set: map.merge($set, (dark: color-variants-dark($color, $is-dark)));
|
||||
}
|
||||
|
||||
@if $base {
|
||||
@if $override-base-with {
|
||||
$set: map.merge($set, (base: $override-base-with));
|
||||
} @else {
|
||||
$set: map.merge($set, (base: $color));
|
||||
}
|
||||
}
|
||||
|
||||
@return $set;
|
||||
}
|
||||
Loading…
Reference in New Issue