Merge pull request 'Port CSS commits' (#2863) from gusted/forgejo-port-css into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2863
This commit is contained in:
Earl Warren
commit
fc72f30bdc
34 changed files with 482 additions and 1174 deletions
|
|
@ -258,7 +258,7 @@ func renderBlame(ctx *context.Context, blameParts []*git.BlamePart, commitNames
|
|||
|
||||
var avatar string
|
||||
if commit.User != nil {
|
||||
avatar = string(avatarUtils.Avatar(commit.User, 18, "gt-mr-3"))
|
||||
avatar = string(avatarUtils.Avatar(commit.User, 18))
|
||||
} else {
|
||||
avatar = string(avatarUtils.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3"))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{template "base/head" .ctxData}}
|
||||
<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
|
||||
<div class="ui container gt-mb-4">
|
||||
<div class="ui container">
|
||||
{{template "base/alert" .ctxData}}
|
||||
</div>
|
||||
<div class="ui container fluid padded flex-container">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Link</h1>
|
||||
<div>
|
||||
<a href="#">normal</a>
|
||||
<a class="muted" href="#">muted</a>
|
||||
<a class="suppressed" href="#">suppressed</a>
|
||||
<a class="silenced" href="#">silenced</a>
|
||||
</div>
|
||||
<h1>Button</h1>
|
||||
<div>
|
||||
Style:
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
|
||||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
|
||||
<div class="overflow-menu-items tw-justify-center">
|
||||
<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
|
||||
{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
|
||||
|
|
|
|||
|
|
@ -50,11 +50,11 @@
|
|||
{{$row.Avatar}}
|
||||
</div>
|
||||
<div class="blame-message">
|
||||
<a href="{{$row.CommitURL}}" title="{{$row.CommitMessage}}">
|
||||
<a class="suppressed tw-text-text" href="{{$row.CommitURL}}" title="{{$row.CommitMessage}}">
|
||||
{{$row.CommitMessage}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="blame-time">
|
||||
<div class="blame-time not-mobile">
|
||||
{{$row.CommitSince}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
</td>
|
||||
<td class="lines-blame-btn">
|
||||
{{if $row.PreviousSha}}
|
||||
<a href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
|
||||
<a role="button" class="muted" href="{{$row.PreviousShaURL}}" data-tooltip-content='{{ctx.Locale.Tr "repo.blame_prior"}}'>
|
||||
{{svg "octicon-versions"}}
|
||||
</a>
|
||||
{{end}}
|
||||
|
|
@ -84,6 +84,12 @@
|
|||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="code-line-menu tippy-target">
|
||||
{{if $.Permission.CanRead $.UnitTypeIssues}}
|
||||
<a class="item ref-in-new-issue" role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
|
||||
{{end}}
|
||||
<a class="item copy-line-permalink" role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -110,8 +110,8 @@
|
|||
{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
|
||||
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
|
||||
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
|
||||
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header tw-flex tw-items-center tw-justify-between tw-flex-wrap">
|
||||
<div class="diff-file-name tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
|
||||
<h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap">
|
||||
<div class="diff-file-name tw-flex tw-items-center gt-gap-2 tw-flex-wrap">
|
||||
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} tw-invisible{{end}}">
|
||||
{{if $file.ShouldBeHidden}}
|
||||
{{svg "octicon-chevron-right" 18}}
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
|
||||
{{if .Diff.IsIncomplete}}
|
||||
<div class="diff-file-box diff-box file-content gt-mt-3" id="diff-incomplete">
|
||||
<h4 class="ui top attached normal header tw-flex tw-items-center tw-justify-between">
|
||||
<h4 class="ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between">
|
||||
{{ctx.Locale.Tr "repo.diff.too_many_files"}}
|
||||
<a class="ui basic tiny button" id="diff-show-more-files" data-href="?skip-to={{.Diff.End}}&file-only=true">{{ctx.Locale.Tr "repo.diff.show_more"}}</a>
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="header-wrapper">
|
||||
<div class="secondary-nav">
|
||||
{{with .Repository}}
|
||||
<div class="ui container">
|
||||
<div class="repo-header">
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
|
||||
<overflow-menu class="ui container secondary pointing tabular top attached borderless menu tw-pt-0 tw-my-0">
|
||||
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
|
||||
<div class="overflow-menu-items">
|
||||
{{if .Permission.CanRead $.UnitTypeCode}}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{{range $result := .SearchResults}}
|
||||
{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
|
||||
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
|
||||
<h4 class="ui top attached normal header tw-flex tw-flex-wrap">
|
||||
<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap">
|
||||
{{if not $.Repo}}
|
||||
<span class="file tw-flex-1">
|
||||
<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{template "base/head" .}}
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content user link-account">
|
||||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
|
||||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
|
||||
<div class="overflow-menu-items tw-justify-center">
|
||||
<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
|
||||
{{if not .AllowOnlyInternalRegistration}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{if or .EnableOpenIDSignIn .EnableSSPI}}
|
||||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
|
||||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar secondary-nav">
|
||||
<div class="overflow-menu-items tw-justify-center">
|
||||
<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
|
||||
{{ctx.Locale.Tr "auth.tab_signin"}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
|
||||
<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
|
||||
<div class="overflow-menu-items tw-justify-center">
|
||||
<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
|
||||
{{ctx.Locale.Tr "auth.openid_connect_title"}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="dashboard-navbar">
|
||||
<div class="secondary-nav tw-border-b tw-border-b-secondary">
|
||||
<div class="ui secondary stackable menu">
|
||||
<div class="item">
|
||||
<div class="ui floating dropdown jump">
|
||||
|
|
@ -105,4 +105,3 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider tw-mt-0"></div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ test('Test Register Form', async ({page}, workerInfo) => {
|
|||
await page.click('form button.ui.primary.button:visible');
|
||||
// Make sure we routed to the home page. Else login failed.
|
||||
await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`);
|
||||
await expect(page.locator('.dashboard-navbar span>img.ui.avatar')).toBeVisible();
|
||||
await expect(page.locator('.secondary-nav span>img.ui.avatar')).toBeVisible();
|
||||
await expect(page.locator('.ui.positive.message.flash-success')).toHaveText('Account was successfully created. Welcome!');
|
||||
|
||||
save_visual(page);
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export async function save_visual(page) {
|
|||
fullPage: true,
|
||||
timeout: 20000,
|
||||
mask: [
|
||||
page.locator('.dashboard-navbar span>img.ui.avatar'),
|
||||
page.locator('.secondary-nav span>img.ui.avatar'),
|
||||
page.locator('.ui.dropdown.jump.item span>img.ui.avatar'),
|
||||
],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -226,10 +226,14 @@ h1.error-code {
|
|||
a {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-decoration-line: none;
|
||||
text-decoration-skip-ink: all;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
/* a = always colored, underlined on hover */
|
||||
/* a.muted = colored on hover, underlined on hover */
|
||||
/* a.suppressed = never colored, underlined on hover */
|
||||
|
|
@ -256,7 +260,7 @@ a.suppressed:hover {
|
|||
}
|
||||
|
||||
a.silenced:hover {
|
||||
text-decoration: none;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
a.label,
|
||||
|
|
@ -264,7 +268,7 @@ a.label,
|
|||
.ui .menu a,
|
||||
.ui.cards a.card,
|
||||
.issue-keyword a {
|
||||
text-decoration: none !important;
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
|
||||
.ui.search > .results {
|
||||
|
|
@ -304,10 +308,6 @@ a.label,
|
|||
background-color: var(--color-markup-code-block);
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
|
||||
.ui.input > input {
|
||||
line-height: var(--line-height-default);
|
||||
|
|
@ -363,6 +363,10 @@ ol.ui.list li,
|
|||
border-right-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ui.menu,
|
||||
.ui.vertical.menu {
|
||||
background: var(--color-menu);
|
||||
|
|
@ -583,22 +587,10 @@ ol.ui.list li,
|
|||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.ui.error.header {
|
||||
background: var(--color-error-bg) !important;
|
||||
color: var(--color-error-text) !important;
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.error.segment {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.header {
|
||||
background: var(--color-warning-bg) !important;
|
||||
color: var(--color-warning-text) !important;
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.segment {
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
|
|
@ -749,40 +741,16 @@ img.ui.avatar,
|
|||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.page-content.new:is(.repo,.migrate,.org),
|
||||
.page-content.profile:is(.user,.organization) {
|
||||
padding-top: 15px;
|
||||
/* add margin below .secondary nav when it is the first child */
|
||||
.page-content > :first-child.secondary-nav {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - 64px);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* enable fluid page widths for medium size viewports */
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
max-width: calc(100% - 16px);
|
||||
}
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 8px;
|
||||
}
|
||||
/* add padding to all content when there is no .secondary.nav. this uses padding instead of
|
||||
margin because with the negative margin on .ui.grid we would have to set margin-top: 0,
|
||||
but that does not work universally for all pages */
|
||||
.page-content > :first-child:not(.secondary-nav) {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.ui.pagination.menu .active.item {
|
||||
|
|
@ -1085,10 +1053,6 @@ input:-webkit-autofill:active,
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui .normal.header {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.ui .form .autofill-dummy {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
|
@ -1246,17 +1210,6 @@ input:-webkit-autofill:active,
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.icon.header svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
float: none;
|
||||
display: block;
|
||||
line-height: var(--line-height-default);
|
||||
padding: 0;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.floating.dropdown .overflow.menu .scrolling.menu.items {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
|
|
@ -1284,15 +1237,6 @@ input:-webkit-autofill:active,
|
|||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.attention-header {
|
||||
padding: 0.5em 0.75em !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.attention-header :first-child {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.attention-icon {
|
||||
margin: auto 0.5em auto 0;
|
||||
}
|
||||
|
|
@ -1337,7 +1281,6 @@ strong.attention-caution, svg.attention-caution {
|
|||
}
|
||||
|
||||
overflow-menu {
|
||||
margin-bottom: 15px !important;
|
||||
border-bottom: 1px solid var(--color-secondary) !important;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1351,6 +1294,10 @@ overflow-menu .overflow-menu-items .item {
|
|||
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
|
||||
}
|
||||
|
||||
overflow-menu .ui.label {
|
||||
margin-left: 7px !important; /* save some space */
|
||||
}
|
||||
|
||||
.activity-bar-graph {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
|
|
@ -1423,18 +1370,15 @@ a.ui.active.label:hover {
|
|||
}
|
||||
|
||||
.lines-blame-btn {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: right !important;
|
||||
background-color: var(--color-code-sidebar-bg);
|
||||
width: 2%;
|
||||
padding: 0 0 0 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lines-num {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding: 0 8px;
|
||||
text-align: right !important;
|
||||
color: var(--color-text-light-1);
|
||||
color: var(--color-text-light-2);
|
||||
width: 1%;
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
|
|
@ -1488,22 +1432,34 @@ a.ui.active.label:hover {
|
|||
}
|
||||
|
||||
.lines-code {
|
||||
background-color: var(--color-code-bg);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.lines-code.active,
|
||||
.lines-code .active {
|
||||
background: var(--color-active-line) !important;
|
||||
.file-view tr.active {
|
||||
color: inherit !important;
|
||||
background: inherit !important;
|
||||
}
|
||||
|
||||
.blame .lines-num {
|
||||
padding: 0 !important;
|
||||
background-color: var(--color-code-sidebar-bg);
|
||||
.file-view tr.active .lines-num,
|
||||
.file-view tr.active .lines-code {
|
||||
background: var(--color-highlight-bg) !important;
|
||||
}
|
||||
|
||||
.blame .lines-code {
|
||||
padding: 0 !important;
|
||||
.file-view tr.active:last-of-type .lines-code {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.file-view tr.active .lines-num {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-view tr.active .lines-num::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: var(--color-highlight-fg);
|
||||
}
|
||||
|
||||
.code-inner {
|
||||
|
|
@ -1514,24 +1470,21 @@ a.ui.active.label:hover {
|
|||
}
|
||||
|
||||
.blame .code-inner {
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.lines-commit {
|
||||
vertical-align: top;
|
||||
color: var(--color-text-light-2);
|
||||
color: var(--color-text-light-1);
|
||||
padding: 0 !important;
|
||||
background: var(--color-code-sidebar-bg);
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.lines-commit .blame-info {
|
||||
width: 350px;
|
||||
max-width: 350px;
|
||||
width: min(26vw, 300px);
|
||||
display: block;
|
||||
padding: 0 0 0 10px;
|
||||
padding: 0 0 0 6px;
|
||||
line-height: 20px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
|
@ -1553,11 +1506,10 @@ a.ui.active.label:hover {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lines-commit .ui.avatar {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
.blame-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.top-line-blame {
|
||||
|
|
@ -1573,6 +1525,11 @@ a.ui.active.label:hover {
|
|||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-view {
|
||||
background: var(--color-code-bg);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.code-view table {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1749,35 +1706,6 @@ a.ui.basic.label:hover {
|
|||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
position: relative;
|
||||
background: var(--color-box-header);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* fix misaligned right buttons on box headers */
|
||||
.ui.attached.header > .ui.right {
|
||||
position: absolute;
|
||||
right: 0.78571429rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
||||
.ui.attached.header > .ui.right .ui.tiny.button {
|
||||
padding: 6px 10px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* if a .top.attached.header is followed by a .segment, add some margin */
|
||||
.ui.segments + .ui.top.attached.header,
|
||||
.ui.attached.segment + .ui.top.attached.header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.rss-icon {
|
||||
display: inline-flex;
|
||||
color: var(--color-text-light-1);
|
||||
|
|
@ -1833,24 +1761,10 @@ table th[data-sortt-desc] .svg {
|
|||
background: var(--color-secondary-dark-1) !important;
|
||||
}
|
||||
|
||||
/* https://github.com/go-gitea/gitea/pull/11486 */
|
||||
.ui.sub.header {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.tabular.menu {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item {
|
||||
padding: 11px 12px;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-body);
|
||||
|
|
@ -1867,31 +1781,34 @@ table th[data-sortt-desc] .svg {
|
|||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item,
|
||||
.ui.secondary.pointing.menu .item {
|
||||
padding: 11px 12px !important;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item:hover,
|
||||
.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus,
|
||||
.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus,
|
||||
.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
|
||||
.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.header {
|
||||
color: var(--color-text);
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item,
|
||||
.resize-for-semibold::before {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.ui.header .ui.label {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ui.header > .ui.label.compact {
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
color: var(--color-text-light-1);
|
||||
.resize-for-semibold::before {
|
||||
content: attr(data-text);
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.flash-error details code,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.chroma {
|
||||
background-color: var(--color-code-bg);
|
||||
}
|
||||
|
||||
/* LineTableTD */
|
||||
.chroma .lntd {
|
||||
vertical-align: top;
|
||||
|
|
|
|||
|
|
@ -77,22 +77,22 @@
|
|||
margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
|
||||
}
|
||||
|
||||
.dashboard .dashboard-navbar {
|
||||
padding: 4px 12px;
|
||||
.dashboard .secondary-nav {
|
||||
padding: 1px 12px; /* match .overflow-menu-items in height */
|
||||
}
|
||||
|
||||
.dashboard .dashboard-navbar .right.menu {
|
||||
.dashboard .secondary-nav .right.menu {
|
||||
gap: .35714286em;
|
||||
}
|
||||
|
||||
.dashboard .dashboard-navbar .right.menu div.item {
|
||||
.dashboard .secondary-nav .right.menu div.item {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard .dashboard-navbar .org-visibility .label {
|
||||
.dashboard .secondary-nav .org-visibility .label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dashboard .dashboard-navbar .ui.dropdown {
|
||||
.dashboard .secondary-nav .ui.dropdown {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
.explore .navbar {
|
||||
margin-bottom: 15px !important;
|
||||
background-color: var(--color-header-wrapper) !important;
|
||||
.explore .secondary-nav {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
.explore .navbar .svg {
|
||||
.explore .secondary-nav .svg {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
@import "./modules/svg.css";
|
||||
@import "./modules/flexcontainer.css";
|
||||
@import "./modules/message.css";
|
||||
@import "./modules/container.css";
|
||||
@import "./modules/header.css";
|
||||
|
||||
@import "./shared/flex-list.css";
|
||||
@import "./shared/milestone.css";
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
.ui.button:focus {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.page-content .ui.button {
|
||||
|
|
@ -63,11 +64,17 @@ It needs some tricks to tweak the left/right borders with active state */
|
|||
border-right: none;
|
||||
}
|
||||
|
||||
.ui.buttons .button:first-child {
|
||||
.ui.buttons .button:hover + .button {
|
||||
border-left: 1px solid var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons .button:first-child,
|
||||
.ui.buttons .button.gt-hidden:first-child + .button {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button:last-child {
|
||||
.ui.buttons .button:last-child,
|
||||
.ui.buttons .button:nth-last-child(2):has(+ .button.gt-hidden) {
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
|
|
@ -107,6 +114,7 @@ It needs some tricks to tweak the left/right borders with active state */
|
|||
.ui.basic.button:focus {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:active,
|
||||
|
|
|
|||
78
web_src/css/modules/container.css
Normal file
78
web_src/css/modules/container.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.container {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: auto;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 723px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 933px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 1127px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui[class*="center aligned"].container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* overwrite width of containers inside the main page content div (div with class "page-content") */
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - 64px);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* enable fluid page widths for medium size viewports */
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
max-width: calc(100% - 16px);
|
||||
}
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
171
web_src/css/modules/header.css
Normal file
171
web_src/css/modules/header.css
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.header {
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
padding: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1.28571429;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: -0.14285714em;
|
||||
}
|
||||
|
||||
.ui.header:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.header .ui.label {
|
||||
margin-left: 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > .ui.label.compact {
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.header > i.icon {
|
||||
display: table-cell;
|
||||
opacity: 1;
|
||||
font-size: 1.5em;
|
||||
padding-top: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > i.icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.ui.header + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2.ui.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
h2.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
h4.ui.header {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
h4.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: 0.14285714rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.icon.header svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
float: none;
|
||||
display: block;
|
||||
line-height: var(--line-height-default);
|
||||
padding: 0;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
position: relative;
|
||||
background: var(--color-box-header);
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* fix misaligned right buttons on box headers */
|
||||
.ui.attached.header > .ui.right {
|
||||
position: absolute;
|
||||
right: 0.78571429rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
|
||||
.ui.attached.header > .ui.right .ui.tiny.button {
|
||||
padding: 6px 10px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* if a .top.attached.header is followed by a .segment, add some margin */
|
||||
.ui.segments + .ui.top.attached.header,
|
||||
.ui.attached.segment + .ui.top.attached.header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.error.header {
|
||||
background: var(--color-error-bg) !important;
|
||||
color: var(--color-error-text) !important;
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.header {
|
||||
background: var(--color-warning-bg) !important;
|
||||
color: var(--color-warning-text) !important;
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
|
||||
.attention-header {
|
||||
padding: 0.5em 0.75em !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
|
@ -100,3 +100,15 @@
|
|||
color: var(--color-warning-text);
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
.ui.message > .close.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.ui.message > .close.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,3 +136,7 @@
|
|||
justify-content: center;
|
||||
z-index: 1; /* prevent menu button background from overlaying icon */
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,6 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.repository .navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.repository .navbar .ui.label {
|
||||
margin-left: 7px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.repository .owner.dropdown {
|
||||
min-width: 40% !important;
|
||||
}
|
||||
|
|
@ -1611,7 +1601,6 @@
|
|||
|
||||
.repository .diff-file-box .file-body.file-code .lines-num {
|
||||
text-align: right;
|
||||
color: var(--color-text-light);
|
||||
width: 1%;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
.header-wrapper .fork-flag {
|
||||
.repository .secondary-nav {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.repository .secondary-nav .fork-flag {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -8,6 +12,7 @@
|
|||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.repo-header .flex-item {
|
||||
|
|
@ -62,8 +67,3 @@
|
|||
.repo-buttons .ui.labeled.button.disabled > .button {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.repository .header-wrapper {
|
||||
padding-top: 12px;
|
||||
background-color: var(--color-header-wrapper);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,16 @@
|
|||
}
|
||||
|
||||
.code-line-button {
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text-light);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1px 10px;
|
||||
padding: 1px 4px !important;
|
||||
position: absolute;
|
||||
font-family: var(--fonts-regular);
|
||||
left: 0;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(calc(-50% + 6px));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-line-button:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-secondary) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
--color-body: #1c1f25;
|
||||
--color-box-header: #1a1d1f;
|
||||
--color-box-body: #14171a;
|
||||
--color-box-body-highlight: #121517;
|
||||
--color-box-body-highlight: #1c2227;
|
||||
--color-text-dark: #f8f8f9;
|
||||
--color-text: #d1d5d8;
|
||||
--color-text-light: #bdc3c7;
|
||||
|
|
@ -197,7 +197,6 @@
|
|||
--color-input-toggle-background: #2e353b;
|
||||
--color-input-border: var(--color-secondary);
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-header-wrapper: #181c20;
|
||||
--color-light: #00001728;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #e8e8ff28;
|
||||
|
|
@ -208,11 +207,10 @@
|
|||
--color-markup-table-row: #e8e8ff06;
|
||||
--color-markup-code-block: #e8e8ff16;
|
||||
--color-button: #151a1e;
|
||||
--color-code-bg: #191d20;
|
||||
--color-code-sidebar-bg: #1b1f22;
|
||||
--color-code-bg: #14171a;
|
||||
--color-shadow: #00001758;
|
||||
--color-secondary-bg: #2f3135;
|
||||
--color-expand-button: #414348;
|
||||
--color-secondary-bg: #2f3138;
|
||||
--color-expand-button: #2b353e;
|
||||
--color-placeholder-text: var(--color-text-light-3);
|
||||
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||
--color-project-board-bg: var(--color-secondary-light-2);
|
||||
|
|
@ -227,13 +225,15 @@
|
|||
--color-nav-bg: #16191c;
|
||||
--color-nav-hover-bg: var(--color-secondary-light-1);
|
||||
--color-nav-text: var(--color-text);
|
||||
--color-secondary-nav-bg: #181c20;
|
||||
--color-label-text: var(--color-text);
|
||||
--color-label-bg: #73828e4b;
|
||||
--color-label-hover-bg: #73828ea0;
|
||||
--color-label-active-bg: #73828eff;
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-active-line: #534d1b;
|
||||
--color-highlight-fg: #87651e;
|
||||
--color-highlight-bg: #352c1c;
|
||||
--color-overlay-backdrop: #080808c0;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: dark;
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
--color-body: #ffffff;
|
||||
--color-box-header: #f1f3f5;
|
||||
--color-box-body: #ffffff;
|
||||
--color-box-body-highlight: #f4faff;
|
||||
--color-box-body-highlight: #ecf5fd;
|
||||
--color-text-dark: #01050a;
|
||||
--color-text: #181c21;
|
||||
--color-text-light: #30363b;
|
||||
|
|
@ -197,7 +197,6 @@
|
|||
--color-input-toggle-background: #d0d7de;
|
||||
--color-input-border: var(--color-secondary);
|
||||
--color-input-border-hover: var(--color-secondary-dark-1);
|
||||
--color-header-wrapper: #f9fafb;
|
||||
--color-light: #00001706;
|
||||
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
|
||||
--color-light-border: #0000171d;
|
||||
|
|
@ -209,10 +208,9 @@
|
|||
--color-markup-code-block: #00001710;
|
||||
--color-button: #f8f9fb;
|
||||
--color-code-bg: #fafdff;
|
||||
--color-code-sidebar-bg: #f2f5f8;
|
||||
--color-shadow: #00001726;
|
||||
--color-secondary-bg: #f2f5f8;
|
||||
--color-expand-button: #d8efff;
|
||||
--color-expand-button: #cfe8fa;
|
||||
--color-placeholder-text: var(--color-text-light-3);
|
||||
--color-editor-line-highlight: var(--color-primary-light-6);
|
||||
--color-project-board-bg: var(--color-secondary-light-4);
|
||||
|
|
@ -227,13 +225,15 @@
|
|||
--color-nav-bg: #f6f7fa;
|
||||
--color-nav-hover-bg: var(--color-secondary-light-1);
|
||||
--color-nav-text: var(--color-text);
|
||||
--color-secondary-nav-bg: #f9fafb;
|
||||
--color-label-text: var(--color-text);
|
||||
--color-label-bg: #949da64b;
|
||||
--color-label-hover-bg: #949da6a0;
|
||||
--color-label-active-bg: #949da6ff;
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-6);
|
||||
--color-active-line: #fffbdd;
|
||||
--color-highlight-fg: #eed200;
|
||||
--color-highlight-bg: #fffbdd;
|
||||
--color-overlay-backdrop: #080808c0;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: light;
|
||||
|
|
|
|||
|
|
@ -125,10 +125,6 @@
|
|||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
#notification_div {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
#notification_table {
|
||||
background: var(--color-box-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
|
|
|
|||
892
web_src/fomantic/build/semantic.css
generated
892
web_src/fomantic/build/semantic.css
generated
|
|
@ -3032,163 +3032,6 @@
|
|||
.plus:before { content: '\e802'; }
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI - Container
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Container
|
||||
*******************************/
|
||||
|
||||
/* All Sizes */
|
||||
|
||||
.ui.container {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: auto;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.ui.ui.ui.grid.container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 723px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.ui.ui.grid.container {
|
||||
width: calc(723px + 2rem);
|
||||
}
|
||||
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: calc(723px + 3rem);
|
||||
}
|
||||
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: calc(723px + 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Monitor */
|
||||
|
||||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 933px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.ui.ui.grid.container {
|
||||
width: calc(933px + 2rem);
|
||||
}
|
||||
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: calc(933px + 3rem);
|
||||
}
|
||||
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: calc(933px + 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Monitor */
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.ui.ui.container:not(.fluid) {
|
||||
width: 1127px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.ui.ui.grid.container {
|
||||
width: calc(1127px + 2rem);
|
||||
}
|
||||
|
||||
.ui.ui.ui.relaxed.grid.container {
|
||||
width: calc(1127px + 3rem);
|
||||
}
|
||||
|
||||
.ui.ui.ui.very.relaxed.grid.container {
|
||||
width: calc(1127px + 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/* Text Container */
|
||||
|
||||
.ui.text.container {
|
||||
font-family: var(--fonts-regular);
|
||||
max-width: 700px;
|
||||
line-height: 1.5;
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui[class*="left aligned"].container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui[class*="center aligned"].container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui[class*="right aligned"].container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui.justified.container {
|
||||
text-align: justify;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
|
@ -7340,741 +7183,6 @@ select.ui.dropdown {
|
|||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
/*!
|
||||
* # Fomantic-UI - Header
|
||||
* http://github.com/fomantic/Fomantic-UI/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Header
|
||||
*******************************/
|
||||
|
||||
/* Standard */
|
||||
|
||||
.ui.header {
|
||||
border: none;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
padding: 0 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: 500;
|
||||
line-height: 1.28571429em;
|
||||
text-transform: none;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: -0.14285714em;
|
||||
}
|
||||
|
||||
.ui.header:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sub Header
|
||||
---------------*/
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2em;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.header > i.icon {
|
||||
display: table-cell;
|
||||
opacity: 1;
|
||||
font-size: 1.5em;
|
||||
padding-top: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* With Text Node */
|
||||
|
||||
.ui.header > i.icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Image
|
||||
--------------------*/
|
||||
|
||||
.ui.header > .image:not(.icon),
|
||||
.ui.header > img {
|
||||
display: inline-block;
|
||||
margin-top: 0.14285714em;
|
||||
width: 2.5em;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.header > .image:not(.icon):only-child,
|
||||
.ui.header > img:only-child {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.header .content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* After Image */
|
||||
|
||||
.ui.header > img + .content,
|
||||
.ui.header > .image + .content {
|
||||
padding-left: 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* After Icon */
|
||||
|
||||
.ui.header > i.icon + .content {
|
||||
padding-left: 0.75rem;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Loose Coupling
|
||||
---------------*/
|
||||
|
||||
.ui.header .ui.label {
|
||||
font-size: '';
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Positioning */
|
||||
|
||||
.ui.header + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
|
||||
h1.ui.header {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
h2.ui.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
h2.ui.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
h3.ui.header {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
|
||||
h3.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h4.ui.header {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
|
||||
h4.ui.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5.ui.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5.ui.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
h6.ui.header {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
|
||||
h6.ui.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content Heading
|
||||
---------------*/
|
||||
|
||||
.ui.mini.header {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.mini.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.mini.sub.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
|
||||
.ui.tiny.header {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.tiny.header .sub.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.tiny.sub.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
|
||||
.ui.small.header {
|
||||
font-size: 1.07142857em;
|
||||
}
|
||||
|
||||
.ui.small.header .sub.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.small.sub.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
|
||||
.ui.large.header {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
|
||||
.ui.large.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
.ui.large.sub.header {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
|
||||
.ui.big.header {
|
||||
font-size: 1.85714286em;
|
||||
}
|
||||
|
||||
.ui.big.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
.ui.big.sub.header {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.huge.header {
|
||||
font-size: 2em;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.ui.huge.header .sub.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
.ui.huge.sub.header {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.massive.header {
|
||||
font-size: 2.28571429em;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.ui.massive.header .sub.header {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
|
||||
.ui.massive.sub.header {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sub Heading
|
||||
---------------*/
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0;
|
||||
margin-bottom: 0.14285714rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.85714286em;
|
||||
text-transform: uppercase;
|
||||
color: '';
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Icon
|
||||
--------------------*/
|
||||
|
||||
.ui.icon.header {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
|
||||
.ui.icon.header:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.icon.header:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.icon.header > i.icon {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
font-size: 3em;
|
||||
margin: 0 auto 0.5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.icon.header .corner.icon {
|
||||
font-size: calc(3em * 0.45);
|
||||
}
|
||||
|
||||
.ui.icon.header .content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.icon.header > i.circular.icon {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.ui.icon.header > i.square.icon {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.ui.block.icon.header > i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.icon.header.aligned {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.disabled.header {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
.ui.primary.header {
|
||||
color: #2185D0;
|
||||
}
|
||||
|
||||
a.ui.primary.header:hover {
|
||||
color: #1678c2;
|
||||
}
|
||||
|
||||
.ui.primary.dividing.header {
|
||||
border-bottom: 2px solid #2185D0;
|
||||
}
|
||||
|
||||
.ui.secondary.header {
|
||||
color: #1B1C1D;
|
||||
}
|
||||
|
||||
a.ui.secondary.header:hover {
|
||||
color: #27292a;
|
||||
}
|
||||
|
||||
.ui.secondary.dividing.header {
|
||||
border-bottom: 2px solid #1B1C1D;
|
||||
}
|
||||
|
||||
.ui.red.header {
|
||||
color: #DB2828;
|
||||
}
|
||||
|
||||
a.ui.red.header:hover {
|
||||
color: #d01919;
|
||||
}
|
||||
|
||||
.ui.red.dividing.header {
|
||||
border-bottom: 2px solid #DB2828;
|
||||
}
|
||||
|
||||
.ui.orange.header {
|
||||
color: #F2711C;
|
||||
}
|
||||
|
||||
a.ui.orange.header:hover {
|
||||
color: #f26202;
|
||||
}
|
||||
|
||||
.ui.orange.dividing.header {
|
||||
border-bottom: 2px solid #F2711C;
|
||||
}
|
||||
|
||||
.ui.yellow.header {
|
||||
color: #FBBD08;
|
||||
}
|
||||
|
||||
a.ui.yellow.header:hover {
|
||||
color: #eaae00;
|
||||
}
|
||||
|
||||
.ui.yellow.dividing.header {
|
||||
border-bottom: 2px solid #FBBD08;
|
||||
}
|
||||
|
||||
.ui.olive.header {
|
||||
color: #B5CC18;
|
||||
}
|
||||
|
||||
a.ui.olive.header:hover {
|
||||
color: #a7bd0d;
|
||||
}
|
||||
|
||||
.ui.olive.dividing.header {
|
||||
border-bottom: 2px solid #B5CC18;
|
||||
}
|
||||
|
||||
.ui.green.header {
|
||||
color: #21BA45;
|
||||
}
|
||||
|
||||
a.ui.green.header:hover {
|
||||
color: #16ab39;
|
||||
}
|
||||
|
||||
.ui.green.dividing.header {
|
||||
border-bottom: 2px solid #21BA45;
|
||||
}
|
||||
|
||||
.ui.teal.header {
|
||||
color: #00B5AD;
|
||||
}
|
||||
|
||||
a.ui.teal.header:hover {
|
||||
color: #009c95;
|
||||
}
|
||||
|
||||
.ui.teal.dividing.header {
|
||||
border-bottom: 2px solid #00B5AD;
|
||||
}
|
||||
|
||||
.ui.blue.header {
|
||||
color: #2185D0;
|
||||
}
|
||||
|
||||
a.ui.blue.header:hover {
|
||||
color: #1678c2;
|
||||
}
|
||||
|
||||
.ui.blue.dividing.header {
|
||||
border-bottom: 2px solid #2185D0;
|
||||
}
|
||||
|
||||
.ui.violet.header {
|
||||
color: #6435C9;
|
||||
}
|
||||
|
||||
a.ui.violet.header:hover {
|
||||
color: #5829bb;
|
||||
}
|
||||
|
||||
.ui.violet.dividing.header {
|
||||
border-bottom: 2px solid #6435C9;
|
||||
}
|
||||
|
||||
.ui.purple.header {
|
||||
color: #A333C8;
|
||||
}
|
||||
|
||||
a.ui.purple.header:hover {
|
||||
color: #9627ba;
|
||||
}
|
||||
|
||||
.ui.purple.dividing.header {
|
||||
border-bottom: 2px solid #A333C8;
|
||||
}
|
||||
|
||||
.ui.pink.header {
|
||||
color: #E03997;
|
||||
}
|
||||
|
||||
a.ui.pink.header:hover {
|
||||
color: #e61a8d;
|
||||
}
|
||||
|
||||
.ui.pink.dividing.header {
|
||||
border-bottom: 2px solid #E03997;
|
||||
}
|
||||
|
||||
.ui.brown.header {
|
||||
color: #A5673F;
|
||||
}
|
||||
|
||||
a.ui.brown.header:hover {
|
||||
color: #975b33;
|
||||
}
|
||||
|
||||
.ui.brown.dividing.header {
|
||||
border-bottom: 2px solid #A5673F;
|
||||
}
|
||||
|
||||
.ui.grey.header {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
a.ui.grey.header:hover {
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
.ui.grey.dividing.header {
|
||||
border-bottom: 2px solid #767676;
|
||||
}
|
||||
|
||||
.ui.black.header {
|
||||
color: #1B1C1D;
|
||||
}
|
||||
|
||||
a.ui.black.header:hover {
|
||||
color: #27292a;
|
||||
}
|
||||
|
||||
.ui.black.dividing.header {
|
||||
border-bottom: 2px solid #1B1C1D;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui.left.aligned.header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui.right.aligned.header {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui.centered.header,
|
||||
.ui.center.aligned.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.justified.header {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.ui.justified.header:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.header,
|
||||
.ui[class*="left floated"].header {
|
||||
float: left;
|
||||
margin-top: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.ui[class*="right floated"].header {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
.ui.fitted.header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Dividing
|
||||
--------------------*/
|
||||
|
||||
.ui.dividing.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
border-bottom: 1px solid rgba(34, 36, 38, 0.15);
|
||||
}
|
||||
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: 0.21428571rem;
|
||||
}
|
||||
|
||||
.ui.dividing.header i.icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Block
|
||||
--------------------*/
|
||||
|
||||
.ui.block.header {
|
||||
background: #F3F4F5;
|
||||
padding: 0.78571429rem 1rem;
|
||||
box-shadow: none;
|
||||
border: 1px solid #D4D4D5;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.mini.block.header {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
|
||||
.ui.tiny.block.header {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
|
||||
.ui.small.block.header {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.large.block.header {
|
||||
font-size: 1.14285714rem;
|
||||
}
|
||||
|
||||
.ui.big.block.header {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
|
||||
.ui.huge.block.header {
|
||||
font-size: 1.42857143rem;
|
||||
}
|
||||
|
||||
.ui.massive.block.header {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Attached
|
||||
--------------------*/
|
||||
|
||||
.ui.attached.header {
|
||||
background: #FFFFFF;
|
||||
padding: 0.78571429rem 1rem;
|
||||
margin: 0 -1px 0 -1px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #D4D4D5;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.attached.block.header {
|
||||
background: #F3F4F5;
|
||||
}
|
||||
|
||||
.ui.attached:not(.top).header {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.top.attached.header {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.bottom.attached.header {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
/* Attached Sizes */
|
||||
|
||||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.mini.attached.header {
|
||||
font-size: 0.78571429em;
|
||||
}
|
||||
|
||||
.ui.tiny.attached.header {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
|
||||
.ui.small.attached.header {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
|
||||
.ui.large.attached.header {
|
||||
font-size: 1.14285714em;
|
||||
}
|
||||
|
||||
.ui.big.attached.header {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
.ui.huge.attached.header {
|
||||
font-size: 1.42857143em;
|
||||
}
|
||||
|
||||
.ui.massive.attached.header {
|
||||
font-size: 1.71428571em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizing
|
||||
--------------------*/
|
||||
|
||||
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: 1.28571429em;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
/*******************************
|
||||
Site Overrides
|
||||
*******************************/
|
||||
|
|
|
|||
|
|
@ -24,11 +24,9 @@
|
|||
"api",
|
||||
"button",
|
||||
"checkbox",
|
||||
"container",
|
||||
"dimmer",
|
||||
"dropdown",
|
||||
"form",
|
||||
"header",
|
||||
"input",
|
||||
"label",
|
||||
"list",
|
||||
|
|
|
|||
|
|
@ -16,8 +16,16 @@ function changeHash(hash) {
|
|||
}
|
||||
}
|
||||
|
||||
function selectRange($list, $select, $from) {
|
||||
$list.removeClass('active');
|
||||
function isBlame() {
|
||||
return Boolean(document.querySelector('div.blame'));
|
||||
}
|
||||
|
||||
function getLineEls() {
|
||||
return document.querySelectorAll(`.code-view td.lines-code${isBlame() ? '.blame-code' : ''}`);
|
||||
}
|
||||
|
||||
function selectRange($linesEls, $selectionEndEl, $selectionStartEls) {
|
||||
$linesEls.closest('tr').removeClass('active');
|
||||
|
||||
// add hashchange to permalink
|
||||
const $refInNewIssue = $('a.ref-in-new-issue');
|
||||
|
|
@ -25,7 +33,7 @@ function selectRange($list, $select, $from) {
|
|||
const $viewGitBlame = $('a.view_git_blame');
|
||||
|
||||
const updateIssueHref = function (anchor) {
|
||||
if ($refInNewIssue.length === 0) {
|
||||
if (!$refInNewIssue.length) {
|
||||
return;
|
||||
}
|
||||
const urlIssueNew = $refInNewIssue.attr('data-url-issue-new');
|
||||
|
|
@ -35,9 +43,7 @@ function selectRange($list, $select, $from) {
|
|||
};
|
||||
|
||||
const updateViewGitBlameFragment = function (anchor) {
|
||||
if ($viewGitBlame.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (!$viewGitBlame.length) return;
|
||||
let href = $viewGitBlame.attr('href');
|
||||
href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`;
|
||||
if (anchor.length !== 0) {
|
||||
|
|
@ -47,17 +53,15 @@ function selectRange($list, $select, $from) {
|
|||
};
|
||||
|
||||
const updateCopyPermalinkUrl = function(anchor) {
|
||||
if ($copyPermalink.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (!$copyPermalink.length) return;
|
||||
let link = $copyPermalink.attr('data-url');
|
||||
link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
|
||||
$copyPermalink.attr('data-url', link);
|
||||
};
|
||||
|
||||
if ($from) {
|
||||
let a = parseInt($select.attr('rel').slice(1));
|
||||
let b = parseInt($from.attr('rel').slice(1));
|
||||
if ($selectionStartEls) {
|
||||
let a = parseInt($selectionEndEl.attr('rel').slice(1));
|
||||
let b = parseInt($selectionStartEls.attr('rel').slice(1));
|
||||
let c;
|
||||
if (a !== b) {
|
||||
if (a > b) {
|
||||
|
|
@ -69,7 +73,9 @@ function selectRange($list, $select, $from) {
|
|||
for (let i = a; i <= b; i++) {
|
||||
classes.push(`[rel=L${i}]`);
|
||||
}
|
||||
$list.filter(classes.join(',')).addClass('active');
|
||||
$linesEls.filter(classes.join(',')).each(function () {
|
||||
$(this).closest('tr').addClass('active');
|
||||
});
|
||||
changeHash(`#L${a}-L${b}`);
|
||||
|
||||
updateIssueHref(`L${a}-L${b}`);
|
||||
|
|
@ -78,12 +84,12 @@ function selectRange($list, $select, $from) {
|
|||
return;
|
||||
}
|
||||
}
|
||||
$select.addClass('active');
|
||||
changeHash(`#${$select.attr('rel')}`);
|
||||
$selectionEndEl.closest('tr').addClass('active');
|
||||
changeHash(`#${$selectionEndEl.attr('rel')}`);
|
||||
|
||||
updateIssueHref($select.attr('rel'));
|
||||
updateViewGitBlameFragment($select.attr('rel'));
|
||||
updateCopyPermalinkUrl($select.attr('rel'));
|
||||
updateIssueHref($selectionEndEl.attr('rel'));
|
||||
updateViewGitBlameFragment($selectionEndEl.attr('rel'));
|
||||
updateCopyPermalinkUrl($selectionEndEl.attr('rel'));
|
||||
}
|
||||
|
||||
function showLineButton() {
|
||||
|
|
@ -96,10 +102,10 @@ function showLineButton() {
|
|||
}
|
||||
|
||||
// find active row and add button
|
||||
const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
|
||||
const td = tr.querySelector('td');
|
||||
const tr = document.querySelector('.code-view tr.active');
|
||||
const td = tr.querySelector('td.lines-num');
|
||||
const btn = document.createElement('button');
|
||||
btn.classList.add('code-line-button');
|
||||
btn.classList.add('code-line-button', 'ui', 'basic', 'button');
|
||||
btn.innerHTML = svg('octicon-kebab-horizontal');
|
||||
td.prepend(btn);
|
||||
|
||||
|
|
@ -123,14 +129,18 @@ function showLineButton() {
|
|||
export function initRepoCodeView() {
|
||||
if ($('.code-view .lines-num').length > 0) {
|
||||
$(document).on('click', '.lines-num span', function (e) {
|
||||
const $select = $(this);
|
||||
let $list;
|
||||
if ($('div.blame').length) {
|
||||
$list = $('.code-view td.lines-code.blame-code');
|
||||
} else {
|
||||
$list = $('.code-view td.lines-code');
|
||||
const linesEls = getLineEls();
|
||||
const selectedEls = Array.from(linesEls).filter((el) => {
|
||||
return el.matches(`[rel=${this.getAttribute('id')}]`);
|
||||
});
|
||||
|
||||
let from;
|
||||
if (e.shiftKey) {
|
||||
from = Array.from(linesEls).filter((el) => {
|
||||
return el.closest('tr').classList.contains('active');
|
||||
});
|
||||
}
|
||||
selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
|
||||
selectRange($(linesEls), $(selectedEls), from ? $(from) : null);
|
||||
|
||||
if (window.getSelection) {
|
||||
window.getSelection().removeAllRanges();
|
||||
|
|
@ -138,28 +148,20 @@ export function initRepoCodeView() {
|
|||
document.selection.empty();
|
||||
}
|
||||
|
||||
// show code view menu marker (don't show in blame page)
|
||||
if ($('div.blame').length === 0) {
|
||||
showLineButton();
|
||||
}
|
||||
showLineButton();
|
||||
});
|
||||
|
||||
$(window).on('hashchange', () => {
|
||||
let m = window.location.hash.match(rangeAnchorRegex);
|
||||
let $list;
|
||||
if ($('div.blame').length) {
|
||||
$list = $('.code-view td.lines-code.blame-code');
|
||||
} else {
|
||||
$list = $('.code-view td.lines-code');
|
||||
}
|
||||
const $linesEls = $(getLineEls());
|
||||
let $first;
|
||||
if (m) {
|
||||
$first = $list.filter(`[rel=${m[1]}]`);
|
||||
$first = $linesEls.filter(`[rel=${m[1]}]`);
|
||||
if ($first.length) {
|
||||
selectRange($list, $first, $list.filter(`[rel=${m[2]}]`));
|
||||
selectRange($linesEls, $first, $linesEls.filter(`[rel=${m[2]}]`));
|
||||
|
||||
// show code view menu marker (don't show in blame page)
|
||||
if ($('div.blame').length === 0) {
|
||||
if (!isBlame()) {
|
||||
showLineButton();
|
||||
}
|
||||
|
||||
|
|
@ -169,12 +171,12 @@ export function initRepoCodeView() {
|
|||
}
|
||||
m = window.location.hash.match(singleAnchorRegex);
|
||||
if (m) {
|
||||
$first = $list.filter(`[rel=L${m[2]}]`);
|
||||
$first = $linesEls.filter(`[rel=L${m[2]}]`);
|
||||
if ($first.length) {
|
||||
selectRange($list, $first);
|
||||
selectRange($linesEls, $first);
|
||||
|
||||
// show code view menu marker (don't show in blame page)
|
||||
if ($('div.blame').length === 0) {
|
||||
if (!isBlame()) {
|
||||
showLineButton();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -127,6 +127,25 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
|
|||
});
|
||||
|
||||
init() {
|
||||
// for horizontal menus where fomantic boldens active items, prevent this bold text from
|
||||
// enlarging the menu's active item replacing the text node with a div that renders a
|
||||
// invisible pseudo-element that enlarges the box.
|
||||
if (this.matches('.ui.secondary.pointing.menu, .ui.tabular.menu')) {
|
||||
for (const item of this.querySelectorAll('.item')) {
|
||||
for (const child of item.childNodes) {
|
||||
if (child.nodeType === Node.TEXT_NODE) {
|
||||
const text = child.textContent.trim(); // whitespace is insignificant inside flexbox
|
||||
if (!text) continue;
|
||||
const span = document.createElement('span');
|
||||
span.classList.add('resize-for-semibold');
|
||||
span.setAttribute('data-text', text);
|
||||
span.textContent = text;
|
||||
child.replaceWith(span);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which
|
||||
// also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon.
|
||||
this.resizeObserver = new ResizeObserver((entries) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue