snapshot of https://github.com/go-gitea/gitea.git (main, 2026-09-15; blobs > 131072B omitted)
Some checks failed
cache-seeder / prune (push) Has been skipped
cache-seeder / frontend (push) Failing after 3s
cache-seeder / python (push) Failing after 3s
cache-seeder / gobuild (push) Failing after 4s
cache-seeder / lint (bindata, lint-backend) (push) Failing after 3s
giteabot backport / giteabot (push) Has been skipped
giteabot / giteabot (push) Has been skipped
cache-prune / prune (push) Has been skipped
release-nightly-snapcraft / build-and-publish (ubuntu-24.04) (push) Has been cancelled
release-nightly-snapcraft / build-and-publish (ubuntu-24.04-arm) (push) Has been cancelled
release-nightly / nightly-binary (push) Has been cancelled
release-nightly / nightly-container (push) Has been cancelled
cron-renovate / cron-renovate (push) Has been skipped
Some checks failed
cache-seeder / prune (push) Has been skipped
cache-seeder / frontend (push) Failing after 3s
cache-seeder / python (push) Failing after 3s
cache-seeder / gobuild (push) Failing after 4s
cache-seeder / lint (bindata, lint-backend) (push) Failing after 3s
giteabot backport / giteabot (push) Has been skipped
giteabot / giteabot (push) Has been skipped
cache-prune / prune (push) Has been skipped
release-nightly-snapcraft / build-and-publish (ubuntu-24.04) (push) Has been cancelled
release-nightly-snapcraft / build-and-publish (ubuntu-24.04-arm) (push) Has been cancelled
release-nightly / nightly-binary (push) Has been cancelled
release-nightly / nightly-container (push) Has been cancelled
cron-renovate / cron-renovate (push) Has been skipped
This commit is contained in:
upstream-mirror
96
web_src/css/actions.css
Normal file
96
web_src/css/actions.css
Normal file
@@ -0,0 +1,96 @@
|
||||
.runner-container {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.runner-container .ui.table.segment {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.runner-container .task-status-success {
|
||||
background-color: var(--color-green);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.runner-container .task-status-failure {
|
||||
background-color: var(--color-red-light);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.runner-container .task-status-running {
|
||||
background-color: var(--color-blue);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.runner-container .task-status-cancelled,
|
||||
.runner-container .task-status-blocked {
|
||||
background-color: var(--color-yellow);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.run-list-item-right {
|
||||
width: 130px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 3px;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.run-list-item-right .run-list-meta {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: .25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.run-list-item-trailing {
|
||||
display: flex;
|
||||
gap: var(--gap-block);
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
flex-wrap: nowrap;
|
||||
width: 280px;
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
|
||||
.ui.label.run-list-ref {
|
||||
display: inline-block;
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.run-list-item-trailing {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
max-width: 30%;
|
||||
flex: 0 0 30%;
|
||||
}
|
||||
.run-list-item-right {
|
||||
max-width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.repository.actions .ui.vertical.menu details.scoped-workflow-group > .item {
|
||||
display: flex;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
.repository.actions .ui.vertical.menu details.scoped-workflow-group > .item > .gt-ellipsis {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.repository.actions .ui.vertical.menu details.scoped-workflow-group > .item > .label {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.repository.actions .ui.vertical.menu details.scoped-workflow-group > summary {
|
||||
justify-content: flex-start;
|
||||
gap: var(--gap-block);
|
||||
padding: 0.92857143em 1.14285714em;
|
||||
}
|
||||
.repository.actions .ui.vertical.menu details.scoped-workflow-group > summary::after {
|
||||
order: 1;
|
||||
}
|
||||
.repository.actions .ui.vertical.menu details.scoped-workflow-group > summary > .label {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
}
|
||||
53
web_src/css/admin.css
Normal file
53
web_src/css/admin.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.admin dl.admin-dl-horizontal {
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin dl.admin-dl-horizontal dt,
|
||||
.admin dl.admin-dl-horizontal dd {
|
||||
line-height: var(--line-height-default);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.admin dl.admin-dl-horizontal dt {
|
||||
width: 300px;
|
||||
max-width: calc(100% - 100px - 1em);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.admin dl.admin-dl-horizontal dd {
|
||||
margin-left: auto;
|
||||
width: calc(100% - 300px - 1em);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.admin code,
|
||||
.admin pre {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.admin .ui.table.segment {
|
||||
overflow-x: auto; /* if the screen width is small, many wide tables (eg: user list) need scroll bars */
|
||||
}
|
||||
|
||||
.admin .table th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-responsive-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.site-banner-content-editor .render-content.render-preview {
|
||||
/* use the styles from ".ui.message" */
|
||||
padding: 1em 1.5em;
|
||||
border: 1px solid var(--color-info-border);
|
||||
background: var(--color-info-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
125
web_src/css/avatar.css
Normal file
125
web_src/css/avatar.css
Normal file
@@ -0,0 +1,125 @@
|
||||
img.ui.avatar,
|
||||
.ui.avatar img,
|
||||
.ui.avatar svg {
|
||||
border-radius: var(--border-radius);
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.avatar-stack-names {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.avatar-stack-names > a.muted,
|
||||
.avatar-stack-names > .avatar-stack-name,
|
||||
.avatar-stack-names > .avatar-stack-popup-trigger {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.avatar-stack-names > a,
|
||||
.avatar-stack-names > .avatar-stack-popup-trigger {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
/* template emits children reversed; row-reverse re-orders visually and keeps the author last-painted (on top) */
|
||||
.avatar-stack {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.avatar-stack > * {
|
||||
margin-left: -16px;
|
||||
transition: transform 0.15s ease, opacity 0.15s ease;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.avatar-stack > *:last-child { margin-left: 0; }
|
||||
.avatar-stack > *:nth-last-child(2) { margin-left: -14px; }
|
||||
|
||||
/* hover spreads via transform (no layout shift); positions count from visual-left = last DOM child = :nth-last-child */
|
||||
.avatar-stack:hover > *:nth-last-child(2) { transform: translateX(14px); }
|
||||
.avatar-stack:hover > *:nth-last-child(3) { transform: translateX(30px); }
|
||||
.avatar-stack:hover > *:nth-last-child(4) { transform: translateX(46px); }
|
||||
.avatar-stack:hover > *:nth-last-child(5) { transform: translateX(62px); }
|
||||
.avatar-stack:hover > *:nth-last-child(6) { transform: translateX(78px); }
|
||||
.avatar-stack:hover > *:nth-last-child(7) { transform: translateX(94px); }
|
||||
.avatar-stack:hover > *:nth-last-child(8) { transform: translateX(110px); }
|
||||
.avatar-stack:hover > *:nth-last-child(9) { transform: translateX(126px); }
|
||||
.avatar-stack:hover > *:nth-last-child(10) { transform: translateX(142px); }
|
||||
.avatar-stack:hover > *:nth-last-child(11) { transform: translateX(158px); }
|
||||
|
||||
.avatar-stack .avatar {
|
||||
border: 1px solid var(--color-body);
|
||||
background: var(--color-body);
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.avatar-stack:hover .avatar {
|
||||
background-color: var(--color-body);
|
||||
}
|
||||
|
||||
.avatar-stack-overflow-chip {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
margin-left: 0;
|
||||
border: 0 solid var(--color-body);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.avatar-stack:hover .avatar-stack-overflow-chip {
|
||||
width: 20px;
|
||||
margin-left: -16px;
|
||||
border-width: 1px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.avatar-stack-popup-trigger {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.avatar-stack-popup-trigger:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.avatar-stack-popup {
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.avatar-stack-popup > a {
|
||||
padding: 6px 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.avatar-stack-popup > a:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.avatar-stack-names {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
882
web_src/css/base.css
Normal file
882
web_src/css/base.css
Normal file
@@ -0,0 +1,882 @@
|
||||
:root {
|
||||
/* fonts */
|
||||
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
|
||||
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
|
||||
/* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
|
||||
Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
|
||||
So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
|
||||
--fonts-emoji: -emoji-fallback;
|
||||
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--line-height-default: normal; /* line-height: use the default value as "modules/normalize.css" */
|
||||
--line-height-code: 20px; /* line-height for code, also used by the editor */
|
||||
/* images */
|
||||
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill-rule="evenodd" d="M11.78.22a.75.75 0 0 1 0 1.061L4.52 8.541a.75.75 0 0 1-1.062 0L.202 5.285a.75.75 0 0 1 1.061-1.061l2.725 2.723L10.718.22a.75.75 0 0 1 1.062 0"/></svg>');
|
||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>');
|
||||
--octicon-alert-fill: 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.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"/></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>');
|
||||
--octicon-x: 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="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.75.75 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215L8 9.06l-3.22 3.22a.75.75 0 0 1-1.042-.018.75.75 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06"/></svg>');
|
||||
--select-arrows: 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="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
|
||||
/* other variables */
|
||||
--border-radius: 4px;
|
||||
--border-radius-medium: 6px;
|
||||
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
|
||||
--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 */
|
||||
--tab-size: 4;
|
||||
--checkbox-size: 14px; /* height and width of checkbox and radio inputs */
|
||||
--page-spacing: 16px; /* space between page elements */
|
||||
--page-margin-x: 32px; /* minimum space on left and right side of page */
|
||||
--page-space-bottom: 64px; /* space between last page element and footer */
|
||||
--transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */
|
||||
|
||||
/* z-index */
|
||||
--z-index-modal: 1001; /* modal dialog */
|
||||
--z-index-toast: 1002; /* should be larger than modal */
|
||||
|
||||
--font-size-label: 12px; /* font size of individual labels */
|
||||
|
||||
--gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
|
||||
--gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
|
||||
|
||||
--background-view-image: repeating-conic-gradient(var(--color-transparency-grid-dark) 0 25%, var(--color-transparency-grid-light) 0 50%) 0 0 / 18px 18px;
|
||||
--box-shadow-kbd: inset 0 -1px 0 var(--color-secondary);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
:root {
|
||||
--page-margin-x: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
:root {
|
||||
--page-margin-x: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:root * {
|
||||
--fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
/* these are needed for tailwind borders to work because we do not load tailwind's base
|
||||
https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 20px;
|
||||
font-family: var(--fonts-regular);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-body);
|
||||
tab-size: var(--tab-size);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: visible;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: var(--fonts-regular);
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
samp,
|
||||
.tw-font-mono {
|
||||
font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
|
||||
}
|
||||
|
||||
/* there are many <code> blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers, for example: translation strings, etc,
|
||||
so we need to make <code> have default global styles, ".markup code" has its own styles and these styles sometimes conflict.
|
||||
TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line, then drop this ":not" patch */
|
||||
code:where(:not(.code-inner)) {
|
||||
padding: 1px 4px;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-markup-code-inline);
|
||||
}
|
||||
|
||||
b,
|
||||
strong,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
line-height: 1.28571429;
|
||||
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
min-height: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.71428571rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.28571429rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.07142857rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1:last-child,
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
line-height: 1.4285;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0.5em 0;
|
||||
padding: 0 0 0 1.5em;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
background: var(--color-secondary-dark-1);
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background: var(--color-secondary-dark-1);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
progress {
|
||||
outline: 1px solid CanvasText;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
caret-color: var(--color-caret);
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text-light);
|
||||
background: var(--color-light);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
::file-selector-button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
::selection,
|
||||
relative-time::part(root)::selection {
|
||||
background: var(--color-primary-light-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--color-placeholder-text) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.unselectable,
|
||||
.btn,
|
||||
.button,
|
||||
.lines-num,
|
||||
.lines-commit,
|
||||
.lines-commit .blame-info,
|
||||
.ellipsis-button {
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container-disabled {
|
||||
opacity: var(--opacity-disabled);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
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 */
|
||||
/* a.silenced = never colored, never underlined */
|
||||
|
||||
a.muted,
|
||||
a.suppressed,
|
||||
a.silenced,
|
||||
.muted-links a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a.muted:hover,
|
||||
.muted-links a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a.silenced:hover,
|
||||
a.suppressed:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* keyboard focus ring for interactive elements */
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
.ui.button:focus-visible,
|
||||
[role="button"]:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
a.silenced:hover {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
a.label,
|
||||
.ui .menu a,
|
||||
.ui.cards a.card {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
|
||||
.native-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.native-select > select {
|
||||
appearance: none; /* hide default triangle */
|
||||
padding: 6px 26px 6px 10px;
|
||||
border: 1px solid var(--color-light-border) !important;
|
||||
color: var(--color-text);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* ::before and ::after pseudo elements don't work on select elements,
|
||||
so we need to put it on the parent wrapper element. */
|
||||
.native-select::after {
|
||||
position: absolute;
|
||||
pointer-events: none; /* make the click event can pass through the svg to the select element */
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 5px;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-size: cover;
|
||||
mask-image: var(--select-arrows);
|
||||
background: currentcolor;
|
||||
}
|
||||
|
||||
.empty-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.inline-code-block {
|
||||
padding: 2px 4px;
|
||||
border-radius: .24em;
|
||||
background-color: var(--color-label-bg);
|
||||
}
|
||||
|
||||
.ui.menu .dropdown.item:hover,
|
||||
.ui.menu a.item:hover,
|
||||
.ui.menu details.item summary:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
/* slightly more contrast for filters on issue list */
|
||||
.ui.ui.menu .dropdown.item.disabled {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.full.height {
|
||||
flex-grow: 1;
|
||||
padding-bottom: var(--page-space-bottom);
|
||||
}
|
||||
|
||||
.status-page-error {
|
||||
margin-top: max(45vh - 90px, 80px);
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.status-page-error-title {
|
||||
font-size: 48px;
|
||||
margin-bottom: 14px; /* some elements below may use tw-my-4 or tw-my-8, so use 14px as a minimal margin */
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
/* add margin below .secondary nav when it is the first child */
|
||||
.page-content > :first-child.secondary-nav {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* add margin to all pages when there is no .secondary.nav */
|
||||
.page-content > :first-child:not(.secondary-nav) {
|
||||
margin-top: var(--page-spacing);
|
||||
}
|
||||
/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
|
||||
to compensate here */
|
||||
.page-content > :first-child.ui.grid {
|
||||
margin-top: calc(var(--page-spacing) - 1rem);
|
||||
}
|
||||
|
||||
.ui .sha.label {
|
||||
font-family: var(--fonts-monospace);
|
||||
font-size: 13px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ui .migrate {
|
||||
color: var(--color-text-light-2) !important;
|
||||
}
|
||||
|
||||
.ui .migrate a {
|
||||
color: var(--color-text-light) !important;
|
||||
}
|
||||
|
||||
.ui .migrate a:hover {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.user-menu > .item {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
display: inline-block;
|
||||
margin-left: 0.4em;
|
||||
height: 0.67em;
|
||||
width: 0.67em;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.attention-icon {
|
||||
margin: 2px 6px 0 0;
|
||||
}
|
||||
|
||||
blockquote.attention-note {
|
||||
border-left-color: var(--color-info-text);
|
||||
}
|
||||
strong.attention-note, svg.attention-note {
|
||||
color: var(--color-info-text);
|
||||
}
|
||||
|
||||
blockquote.attention-tip {
|
||||
border-left-color: var(--color-success-text);
|
||||
}
|
||||
strong.attention-tip, svg.attention-tip {
|
||||
color: var(--color-success-text);
|
||||
}
|
||||
|
||||
blockquote.attention-important {
|
||||
border-left-color: var(--color-priority-text);
|
||||
}
|
||||
strong.attention-important, svg.attention-important {
|
||||
color: var(--color-priority-text);
|
||||
}
|
||||
|
||||
blockquote.attention-warning {
|
||||
border-left-color: var(--color-warning-text);
|
||||
}
|
||||
strong.attention-warning, svg.attention-warning {
|
||||
color: var(--color-warning-text);
|
||||
}
|
||||
|
||||
blockquote.attention-caution {
|
||||
border-left-color: var(--color-error-text);
|
||||
}
|
||||
strong.attention-caution, svg.attention-caution {
|
||||
color: var(--color-error-text);
|
||||
}
|
||||
|
||||
/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
overflow-menu {
|
||||
border-bottom: 1px solid var(--color-secondary) !important;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* hide until JS has arranged the items, so the un-collapsed menu is never painted */
|
||||
overflow-menu:not([data-ready]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup::before,
|
||||
overflow-menu .overflow-menu-popup::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
border: 8px solid transparent;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup::before {
|
||||
bottom: 100%;
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup::after {
|
||||
bottom: calc(100% - 1px);
|
||||
border-bottom-color: var(--color-menu);
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup > .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 18px !important;
|
||||
color: var(--color-text) !important;
|
||||
background: transparent !important;
|
||||
text-decoration: none;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup > .item:hover,
|
||||
overflow-menu .overflow-menu-popup > .item:focus {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-popup > .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-items {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-items .item {
|
||||
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-items .item-flex-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* match the styles of ".ui.secondary.pointing.menu .active.item" */
|
||||
overflow-menu.ui.secondary.pointing.menu .overflow-menu-button.active {
|
||||
padding: 2px 0 0;
|
||||
border-bottom: 2px solid currentcolor;
|
||||
background-color: transparent;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
overflow-menu .overflow-menu-button:hover {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
overflow-menu .ui.label {
|
||||
margin-left: 7px !important; /* save some space */
|
||||
font-variant-numeric: tabular-nums; /* equal-width digits so counts don't reflow the row */
|
||||
}
|
||||
|
||||
/* count not loaded yet, keep the reserved space so filling it in does not shift the row */
|
||||
overflow-menu .ui.label:empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.activity-bar-graph {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.activity-bar-graph-alt {
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.oauth2-authorize-application-box {
|
||||
margin-top: 3em !important;
|
||||
}
|
||||
|
||||
.lines-blame-btn {
|
||||
padding: 0 0 0 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lines-num {
|
||||
padding: 0 8px;
|
||||
text-align: right !important;
|
||||
color: var(--color-text-light-2);
|
||||
width: 1%; /* this apparently needs to be a percentage so that code column stretches in diffs */
|
||||
min-width: 72px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.code-diff .lines-num {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.lines-num span::after {
|
||||
content: attr(data-line-number);
|
||||
line-height: var(--line-height-code) !important;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lines-type-marker {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lines-num,
|
||||
.lines-escape,
|
||||
.lines-code {
|
||||
font-size: 12px;
|
||||
font-family: var(--fonts-monospace);
|
||||
line-height: var(--line-height-code);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.lines-escape {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lines-code {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.code-inner {
|
||||
font: 12px var(--fonts-monospace);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: inherit; /* needed for inline code preview in markup */
|
||||
}
|
||||
|
||||
.code-inner:has(.diff-line-truncated) {
|
||||
text-decoration: underline dashed 1px;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.code-inner .diff-line-truncated {
|
||||
margin-left: var(--gap-inline);
|
||||
padding: 0 4px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.blame .code-inner {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.lines-commit {
|
||||
vertical-align: top;
|
||||
color: var(--color-text-light-1);
|
||||
padding: 0 !important;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.lines-commit .blame-info {
|
||||
width: min(26vw, 300px);
|
||||
display: block;
|
||||
padding: 0 0 0 6px;
|
||||
line-height: var(--line-height-code);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.lines-commit .blame-info .blame-data {
|
||||
display: flex;
|
||||
font-family: var(--fonts-regular);
|
||||
}
|
||||
|
||||
.lines-commit .blame-info .blame-data .blame-message {
|
||||
flex-grow: 2;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.lines-commit .blame-info .blame-data .blame-time,
|
||||
.lines-commit .blame-info .blame-data .blame-avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.blame-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
tr.top-line-blame {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
tr.top-line-blame:first-of-type {
|
||||
border-top: none; /* merge code lines belonging to the same commit into one block */
|
||||
}
|
||||
|
||||
.migrate .svg.gitea-git {
|
||||
color: var(--color-git);
|
||||
}
|
||||
|
||||
.color-icon {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius-full);
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.icon-size-8 {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.rss-icon {
|
||||
display: inline-flex;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
table th[data-sortt-asc]:hover,
|
||||
table th[data-sortt-desc]:hover {
|
||||
background: var(--color-hover) !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
table th[data-sortt-asc] .svg,
|
||||
table th[data-sortt-desc] .svg {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* for "image" emojis like ":git:" ":gitea:" and ":github:" (see CUSTOM_EMOJIS config option) */
|
||||
.emoji img {
|
||||
border-width: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
vertical-align: -0.15em;
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item,
|
||||
.ui.secondary.pointing.menu .item {
|
||||
padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item:hover,
|
||||
.ui.secondary.pointing.menu a.item:hover {
|
||||
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);
|
||||
}
|
||||
|
||||
.resize-for-semibold::before {
|
||||
content: attr(data-text);
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.flash-error details code,
|
||||
.flash-warning details code {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui.button.ellipsis-button {
|
||||
padding: 0 5px 8px;
|
||||
display: inline-block;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 8px;
|
||||
vertical-align: middle;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.ui.ui.dropdown,
|
||||
.flex-text-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-inline);
|
||||
vertical-align: middle;
|
||||
max-width: 100%; /* the inner part might have "gt-ellipsis" */
|
||||
min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
|
||||
}
|
||||
|
||||
.ui.ui.labeled.button {
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */
|
||||
.ui.modal .header.flex-left-right,
|
||||
.flex-left-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.list.flex-items-block > .item,
|
||||
.ui.vertical.menu .item.flex-text-block,
|
||||
.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
|
||||
.flex-items-block > .item,
|
||||
.flex-text-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.flex-left-right > .ui.button,
|
||||
.flex-text-block > .ui.button,
|
||||
.flex-text-inline > .ui.button {
|
||||
margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
|
||||
}
|
||||
|
||||
.svg.octicon-file-directory-fill,
|
||||
.svg.octicon-file-directory-open-fill,
|
||||
.svg.octicon-file-submodule {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.svg.octicon-file,
|
||||
.svg.octicon-file-symlink-file,
|
||||
.svg.octicon-file-directory-symlink {
|
||||
color: var(--color-secondary-dark-7);
|
||||
}
|
||||
60
web_src/css/dashboard.css
Normal file
60
web_src/css/dashboard.css
Normal file
@@ -0,0 +1,60 @@
|
||||
.dashboard.feeds .context.user.menu,
|
||||
.dashboard.issues .context.user.menu {
|
||||
z-index: 101;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.dashboard.issues .context.user.menu .ui.header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dashboard.issues .filter.menu {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.dashboard.issues .filter.menu .item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Sort */
|
||||
.dashboard.issues .filter.menu .jump.item {
|
||||
margin: 1px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.dashboard.issues .filter.menu .menu {
|
||||
max-height: 300px;
|
||||
overflow-x: auto;
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.dashboard.issues .filter.menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard.issues .right.stackable.menu > .item.active {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
.dashboard .dashboard-repos,
|
||||
.dashboard .dashboard-orgs {
|
||||
margin: 0 1px; /* Accommodate for Semantic's 1px hacks on .attached elements */
|
||||
}
|
||||
|
||||
.dashboard .secondary-nav {
|
||||
padding: 1px 12px; /* match .overflow-menu-items in height */
|
||||
}
|
||||
|
||||
.dashboard .secondary-nav .org-visibility .label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dashboard .secondary-nav .ui.dropdown {
|
||||
max-width: 100%;
|
||||
}
|
||||
20
web_src/css/devtest.css
Normal file
20
web_src/css/devtest.css
Normal file
@@ -0,0 +1,20 @@
|
||||
h1, h2 {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.button-sample-groups {
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
|
||||
.button-sample-groups .sample-group {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
}
|
||||
|
||||
.button-sample-groups .sample-group .ui.button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.fetch-action-demo-forms .form-fetch-action {
|
||||
border: 1px red dashed; /* show the border for demo purpose */
|
||||
}
|
||||
432
web_src/css/easymde.css
Normal file
432
web_src/css/easymde.css
Normal file
@@ -0,0 +1,432 @@
|
||||
/* Inlined styles from easymde.min.css (includes EasyMDE and CodeMirror base) */
|
||||
.EasyMDEContainer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* CodeMirror base layout (from codemirror.css) */
|
||||
.EasyMDEContainer .CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
padding: 10px;
|
||||
font: 14px var(--fonts-monospace);
|
||||
z-index: 0;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--color-input-text);
|
||||
background-color: var(--color-input-background);
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-lines {
|
||||
padding: 4px 0;
|
||||
cursor: text;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror pre.CodeMirror-line,
|
||||
.EasyMDEContainer .CodeMirror pre.CodeMirror-line-like {
|
||||
padding: 0 4px;
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
overflow-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-wrap pre.CodeMirror-line,
|
||||
.EasyMDEContainer .CodeMirror-wrap pre.CodeMirror-line-like {
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-scroll {
|
||||
overflow: scroll !important; /* things will break if this is overridden */
|
||||
margin-bottom: -50px;
|
||||
margin-right: -50px;
|
||||
padding-bottom: 50px;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 50px solid transparent;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-vscrollbar,
|
||||
.EasyMDEContainer .CodeMirror-hscrollbar,
|
||||
.EasyMDEContainer .CodeMirror-scrollbar-filler,
|
||||
.EasyMDEContainer .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-vscrollbar {
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-hscrollbar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-scrollbar-filler {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Cursor */
|
||||
.EasyMDEContainer .CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-left: 1px solid var(--color-caret);
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.EasyMDEContainer div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.EasyMDEContainer div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
.EasyMDEContainer .CodeMirror-selected {
|
||||
background: var(--color-primary-light-1);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
|
||||
background: var(--color-primary-light-1);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-line::selection,
|
||||
.EasyMDEContainer .CodeMirror-line > span::selection,
|
||||
.EasyMDEContainer .CodeMirror-line > span > span::selection {
|
||||
background: var(--color-primary-light-1);
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
.EasyMDEContainer .cm-tab {
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-rtl pre {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-code {
|
||||
font: 14px var(--fonts-monospace);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-scroll,
|
||||
.EasyMDEContainer .CodeMirror-sizer {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-measure pre {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-composing {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.EasyMDEContainer span.CodeMirror-selectedtext {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.EasyMDEContainer .CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Default theme overrides */
|
||||
.EasyMDEContainer .cm-header,
|
||||
.EasyMDEContainer .cm-strong {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .cm-em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .cm-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .cm-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .cm-comment {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
.EasyMDEContainer .CodeMirror-placeholder {
|
||||
color: var(--color-placeholder-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.EasyMDEContainer .CodeMirror-focused {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Fullscreen */
|
||||
.EasyMDEContainer .CodeMirror-fullscreen {
|
||||
background: var(--color-body);
|
||||
position: fixed;
|
||||
inset: 50px 0 0;
|
||||
height: auto;
|
||||
z-index: 8;
|
||||
border-right: none;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-focused {
|
||||
border-right: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* Statusbar */
|
||||
.ui .field:not(:last-child) .EasyMDEContainer .editor-statusbar {
|
||||
margin-bottom: -1em; /* when there is a statusbar, the "margin-bottom: 1em" of the "field" is not needed, because the statusbar is likely a blank line */
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.EasyMDEContainer .editor-toolbar {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
padding: 9px 10px;
|
||||
border-top: 1px solid var(--color-input-border);
|
||||
border-left: 1px solid var(--color-input-border);
|
||||
border-right: 1px solid var(--color-input-border);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar.fullscreen {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-body);
|
||||
border: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button {
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-weight: var(--font-weight-bold);
|
||||
min-width: 30px;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar i.separator {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
border-left: none;
|
||||
border-right: 1px solid var(--color-input-border);
|
||||
color: transparent;
|
||||
text-indent: -10px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button::after {
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 65%;
|
||||
vertical-align: text-bottom;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button.heading-1::after {
|
||||
content: "1";
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button.heading-2::after {
|
||||
content: "2";
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button.heading-3::after {
|
||||
content: "3";
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button.heading-bigger::after {
|
||||
content: "\25B2";
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar button.heading-smaller::after {
|
||||
content: "\25BC";
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-toolbar.disabled-for-preview button:not(.no-disable) {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* hide preview button, we have the preview tab for this */
|
||||
.EasyMDEContainer .editor-toolbar:not(.fullscreen) .preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Statusbar */
|
||||
.EasyMDEContainer .editor-statusbar {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-light);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-statusbar span {
|
||||
display: inline-block;
|
||||
min-width: 4em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-statusbar .lines::before {
|
||||
content: "lines: ";
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-statusbar .words::before {
|
||||
content: "words: ";
|
||||
}
|
||||
|
||||
/* Preview */
|
||||
.EasyMDEContainer .editor-preview-full {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 7;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview-side {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--color-secondary);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview-active-side {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview {
|
||||
padding: 10px;
|
||||
background-color: var(--color-body);
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview > p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview pre {
|
||||
background: var(--color-markup-code-block);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .editor-preview table td,
|
||||
.EasyMDEContainer .editor-preview table th {
|
||||
border: 1px solid var(--color-secondary);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror .cm-attribute { color: var(--color-syntax-name); }
|
||||
.EasyMDEContainer .CodeMirror .cm-bracket { color: var(--color-syntax-operator); }
|
||||
.EasyMDEContainer .CodeMirror .cm-comment { color: var(--color-syntax-comment); }
|
||||
.EasyMDEContainer .CodeMirror .cm-error { color: var(--color-syntax-invalid); }
|
||||
.EasyMDEContainer .CodeMirror .cm-hr { color: var(--color-syntax-operator); }
|
||||
.EasyMDEContainer .CodeMirror .cm-link { color: var(--color-syntax-link); }
|
||||
.EasyMDEContainer .CodeMirror .cm-quote { color: var(--color-syntax-comment); }
|
||||
.EasyMDEContainer .CodeMirror .cm-tag { color: var(--color-syntax-type); }
|
||||
.EasyMDEContainer .CodeMirror .cm-url { color: var(--color-syntax-link); }
|
||||
102
web_src/css/editor/combomarkdowneditor.css
Normal file
102
web_src/css/editor/combomarkdowneditor.css
Normal file
@@ -0,0 +1,102 @@
|
||||
.combo-markdown-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.combo-markdown-editor markdown-toolbar {
|
||||
cursor: default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .markdown-toolbar-group {
|
||||
display: flex;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .markdown-toolbar-group:first-child {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.combo-markdown-editor .markdown-toolbar-group:last-child {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
border-right: none;
|
||||
border-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .markdown-toolbar-button {
|
||||
border: none;
|
||||
background: none;
|
||||
user-select: none;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.combo-markdown-editor .markdown-toolbar-button:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.combo-markdown-editor md-header {
|
||||
position: relative;
|
||||
}
|
||||
.combo-markdown-editor md-header::after {
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
}
|
||||
.combo-markdown-editor md-header[level="1"]::after {
|
||||
content: "1";
|
||||
}
|
||||
.combo-markdown-editor md-header[level="2"]::after {
|
||||
content: "2";
|
||||
}
|
||||
.combo-markdown-editor md-header[level="3"]::after {
|
||||
content: "3";
|
||||
}
|
||||
|
||||
.ui.form .combo-markdown-editor textarea.markdown-text-editor,
|
||||
.combo-markdown-editor textarea.markdown-text-editor {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - var(--min-height-textarea));
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .CodeMirror-scroll {
|
||||
max-height: calc(100vh - var(--min-height-textarea));
|
||||
}
|
||||
|
||||
/* use the same styles as markup/content.css */
|
||||
.combo-markdown-editor .CodeMirror-scroll .cm-header-1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .CodeMirror-scroll .cm-header-2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .CodeMirror-scroll .cm-header-3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .CodeMirror-scroll .cm-header-4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .CodeMirror-scroll .cm-header-5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.combo-editor-container[data-combo-editor-page="previewer"] .form-field-dropzone,
|
||||
.combo-editor-container[data-combo-editor-page="previewer"] .dropzone {
|
||||
display: none;
|
||||
}
|
||||
13
web_src/css/explore.css
Normal file
13
web_src/css/explore.css
Normal file
@@ -0,0 +1,13 @@
|
||||
/* FIXME: need to refactor the repo branches list page and move these styles to proper place */
|
||||
.ui.repository.branches .info {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-light);
|
||||
display: flex;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.ui.repository.branches .info .commit-message {
|
||||
max-width: 72em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
32
web_src/css/features/captcha.css
Normal file
32
web_src/css/features/captcha.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.m-captcha-style {
|
||||
width: 100%;
|
||||
height: 5em;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.g-recaptcha-style,
|
||||
.h-captcha-style {
|
||||
margin: 0 auto !important;
|
||||
width: 304px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.g-recaptcha-style iframe,
|
||||
.h-captcha-style iframe {
|
||||
border-radius: var(--border-radius) !important;
|
||||
width: 302px !important;
|
||||
height: 76px !important;
|
||||
}
|
||||
.m-captcha-style {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 575px) {
|
||||
.g-recaptcha-style,
|
||||
.h-captcha-style {
|
||||
transform: scale(0.77);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
65
web_src/css/features/colorpicker.css
Normal file
65
web_src/css/features/colorpicker.css
Normal file
@@ -0,0 +1,65 @@
|
||||
.color-picker-combo {
|
||||
display: flex;
|
||||
position: relative; /* to position the preview square */
|
||||
}
|
||||
|
||||
.color-picker-combo input {
|
||||
padding-left: 32px !important;
|
||||
}
|
||||
|
||||
.color-picker-combo .preview-square {
|
||||
position: absolute;
|
||||
aspect-ratio: 1;
|
||||
height: 16px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 2px;
|
||||
background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
|
||||
background-position: 0 0, 4px 4px;
|
||||
background-size: 8px 8px;
|
||||
}
|
||||
|
||||
.color-picker-combo .preview-square::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background-color: currentcolor;
|
||||
}
|
||||
|
||||
.color-picker-combo .precolors {
|
||||
display: flex;
|
||||
margin-left: 1em;
|
||||
align-items: center;
|
||||
gap: 0.125em;
|
||||
}
|
||||
|
||||
.color-picker-combo .precolors .generate-random-color {
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.color-picker-combo .precolors .color {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
hex-color-picker {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
hex-color-picker::part(hue-pointer),
|
||||
hex-color-picker::part(saturation-pointer) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
hex-color-picker::part(hue) {
|
||||
flex-basis: 16px;
|
||||
}
|
||||
364
web_src/css/features/console.css
Normal file
364
web_src/css/features/console.css
Normal file
@@ -0,0 +1,364 @@
|
||||
/* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */
|
||||
/* stylelint-disable scale-unlimited/declaration-strict-value -- terminal ANSI palette uses literal hex values */
|
||||
|
||||
.console {
|
||||
background: var(--color-console-bg);
|
||||
color: var(--color-console-fg);
|
||||
font-family: var(--fonts-monospace);
|
||||
border-radius: var(--border-radius);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.console img { max-width: 100%; }
|
||||
|
||||
.console a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
.console a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
50% {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* SGR attributes emitted by web_src/js/render/ansi.ts */
|
||||
|
||||
.ansi-bold { font-weight: var(--font-weight-semibold); }
|
||||
.ansi-italic { font-style: italic; }
|
||||
.ansi-blink { animation: blink-animation 1s step-end infinite; }
|
||||
.ansi-faint { color: color-mix(in srgb, currentcolor 70%, transparent); }
|
||||
.ansi-conceal { color: transparent; }
|
||||
.ansi-inverse-fg { color: var(--color-console-bg); }
|
||||
.ansi-inverse-bg { background-color: var(--color-console-fg); }
|
||||
|
||||
.ansi-underline { text-decoration-line: underline; }
|
||||
.ansi-line-through { text-decoration-line: line-through; }
|
||||
.ansi-overline { text-decoration-line: overline; }
|
||||
.ansi-underline.ansi-line-through { text-decoration-line: underline line-through; }
|
||||
.ansi-underline.ansi-overline { text-decoration-line: underline overline; }
|
||||
.ansi-line-through.ansi-overline { text-decoration-line: line-through overline; }
|
||||
.ansi-underline.ansi-line-through.ansi-overline { text-decoration-line: underline line-through overline; }
|
||||
|
||||
.ansi-double { text-decoration-style: double; }
|
||||
.ansi-wavy { text-decoration-style: wavy; }
|
||||
.ansi-dotted { text-decoration-style: dotted; }
|
||||
.ansi-dashed { text-decoration-style: dashed; }
|
||||
|
||||
/* ANSI colors used in actions */
|
||||
|
||||
.ansi-black-fg { color: var(--color-ansi-black); }
|
||||
.ansi-red-fg { color: var(--color-ansi-red); }
|
||||
.ansi-green-fg { color: var(--color-ansi-green); }
|
||||
.ansi-yellow-fg { color: var(--color-ansi-yellow); }
|
||||
.ansi-blue-fg { color: var(--color-ansi-blue); }
|
||||
.ansi-magenta-fg { color: var(--color-ansi-magenta); }
|
||||
.ansi-cyan-fg { color: var(--color-ansi-cyan); }
|
||||
.ansi-white-fg { color: var(--color-ansi-white); }
|
||||
|
||||
.ansi-bright-black-fg { color: var(--color-ansi-bright-black); }
|
||||
.ansi-bright-red-fg { color: var(--color-ansi-bright-red); }
|
||||
.ansi-bright-green-fg { color: var(--color-ansi-bright-green); }
|
||||
.ansi-bright-yellow-fg { color: var(--color-ansi-bright-yellow); }
|
||||
.ansi-bright-blue-fg { color: var(--color-ansi-bright-blue); }
|
||||
.ansi-bright-magenta-fg { color: var(--color-ansi-bright-magenta); }
|
||||
.ansi-bright-cyan-fg { color: var(--color-ansi-bright-cyan); }
|
||||
.ansi-bright-white-fg { color: var(--color-ansi-bright-white); }
|
||||
|
||||
.ansi-black-bg { background-color: var(--color-ansi-black); }
|
||||
.ansi-red-bg { background-color: var(--color-ansi-red); }
|
||||
.ansi-green-bg { background-color: var(--color-ansi-green); }
|
||||
.ansi-yellow-bg { background-color: var(--color-ansi-yellow); }
|
||||
.ansi-blue-bg { background-color: var(--color-ansi-blue); }
|
||||
.ansi-magenta-bg { background-color: var(--color-ansi-magenta); }
|
||||
.ansi-cyan-bg { background-color: var(--color-ansi-cyan); }
|
||||
.ansi-white-bg { background-color: var(--color-ansi-white); }
|
||||
|
||||
.ansi-bright-black-bg { background-color: var(--color-ansi-bright-black); }
|
||||
.ansi-bright-red-bg { background-color: var(--color-ansi-bright-red); }
|
||||
.ansi-bright-green-bg { background-color: var(--color-ansi-bright-green); }
|
||||
.ansi-bright-yellow-bg { background-color: var(--color-ansi-bright-yellow); }
|
||||
.ansi-bright-blue-bg { background-color: var(--color-ansi-bright-blue); }
|
||||
.ansi-bright-magenta-bg { background-color: var(--color-ansi-bright-magenta); }
|
||||
.ansi-bright-cyan-bg { background-color: var(--color-ansi-bright-cyan); }
|
||||
.ansi-bright-white-bg { background-color: var(--color-ansi-bright-white); }
|
||||
|
||||
/* term colors used in console rendering */
|
||||
|
||||
.term-fg2 { color: var(--color-ansi-bright-black); } /* faint (decreased intensity) - same as gray really */
|
||||
.term-fg3 { font-style: italic; } /* italic */
|
||||
.term-fg4 { text-decoration: underline; } /* underline */
|
||||
.term-fg5 { animation: blink-animation 1s step-end infinite; } /* blink */
|
||||
.term-fg9 { text-decoration: line-through; } /* crossed-out */
|
||||
|
||||
.term-fg30 { color: var(--color-ansi-black); } /* black (but we can't use black, so a diff color) */
|
||||
.term-fg31 { color: var(--color-ansi-red); } /* red */
|
||||
.term-fg32 { color: var(--color-ansi-green); } /* green */
|
||||
.term-fg33 { color: var(--color-ansi-yellow); } /* yellow */
|
||||
.term-fg34 { color: var(--color-ansi-blue); } /* blue */
|
||||
.term-fg35 { color: var(--color-ansi-magenta); } /* magenta */
|
||||
.term-fg36 { color: var(--color-ansi-cyan); } /* cyan */
|
||||
|
||||
/* high intense colors */
|
||||
.term-fgi1 { color: var(--color-ansi-bright-green); }
|
||||
.term-fgi90 { color: var(--color-ansi-bright-black); } /* grey */
|
||||
.term-fgi91 { color: var(--color-ansi-bright-red); } /* red */
|
||||
.term-fgi92 { color: var(--color-ansi-bright-green); } /* green */
|
||||
.term-fgi93 { color: var(--color-ansi-bright-yellow); } /* yellow */
|
||||
.term-fgi94 { color: var(--color-ansi-bright-blue); } /* blue */
|
||||
.term-fgi95 { color: var(--color-ansi-bright-magenta); } /* magenta */
|
||||
.term-fgi96 { color: var(--color-ansi-bright-cyan); } /* cyan */
|
||||
|
||||
/* background colors */
|
||||
.term-bg40 { background: var(--color-ansi-bright-black); } /* grey */
|
||||
.term-bg41 { background: var(--color-ansi-red); } /* red */
|
||||
.term-bg42 { background: var(--color-ansi-green); } /* green */
|
||||
|
||||
/* custom foreground/background combos for readability */
|
||||
.term-fg31.term-bg40 { color: var(--color-ansi-bright-red); }
|
||||
|
||||
/* xterm colors */
|
||||
.term-fgx16 { color: #000000; }
|
||||
.term-fgx17 { color: #00005f; }
|
||||
.term-fgx18 { color: #000087; }
|
||||
.term-fgx19 { color: #0000af; }
|
||||
.term-fgx20 { color: #0000d7; }
|
||||
.term-fgx21 { color: #0000ff; }
|
||||
.term-fgx22 { color: #005f00; }
|
||||
.term-fgx23 { color: #005f5f; }
|
||||
.term-fgx24 { color: #005f87; }
|
||||
.term-fgx25 { color: #005faf; }
|
||||
.term-fgx26 { color: #005fd7; }
|
||||
.term-fgx27 { color: #005fff; }
|
||||
.term-fgx28 { color: #008700; }
|
||||
.term-fgx29 { color: #00875f; }
|
||||
.term-fgx30 { color: #008787; }
|
||||
.term-fgx31 { color: #0087af; }
|
||||
.term-fgx32 { color: #0087d7; }
|
||||
.term-fgx33 { color: #0087ff; }
|
||||
.term-fgx34 { color: #00af00; }
|
||||
.term-fgx35 { color: #00af5f; }
|
||||
.term-fgx36 { color: #00af87; }
|
||||
.term-fgx37 { color: #00afaf; }
|
||||
.term-fgx38 { color: #00afd7; }
|
||||
.term-fgx39 { color: #00afff; }
|
||||
.term-fgx40 { color: #00d700; }
|
||||
.term-fgx41 { color: #00d75f; }
|
||||
.term-fgx42 { color: #00d787; }
|
||||
.term-fgx43 { color: #00d7af; }
|
||||
.term-fgx44 { color: #00d7d7; }
|
||||
.term-fgx45 { color: #00d7ff; }
|
||||
.term-fgx46 { color: #00ff00; }
|
||||
.term-fgx47 { color: #00ff5f; }
|
||||
.term-fgx48 { color: #00ff87; }
|
||||
.term-fgx49 { color: #00ffaf; }
|
||||
.term-fgx50 { color: #00ffd7; }
|
||||
.term-fgx51 { color: #00ffff; }
|
||||
.term-fgx52 { color: #5f0000; }
|
||||
.term-fgx53 { color: #5f005f; }
|
||||
.term-fgx54 { color: #5f0087; }
|
||||
.term-fgx55 { color: #5f00af; }
|
||||
.term-fgx56 { color: #5f00d7; }
|
||||
.term-fgx57 { color: #5f00ff; }
|
||||
.term-fgx58 { color: #5f5f00; }
|
||||
.term-fgx59 { color: #5f5f5f; }
|
||||
.term-fgx60 { color: #5f5f87; }
|
||||
.term-fgx61 { color: #5f5faf; }
|
||||
.term-fgx62 { color: #5f5fd7; }
|
||||
.term-fgx63 { color: #5f5fff; }
|
||||
.term-fgx64 { color: #5f8700; }
|
||||
.term-fgx65 { color: #5f875f; }
|
||||
.term-fgx66 { color: #5f8787; }
|
||||
.term-fgx67 { color: #5f87af; }
|
||||
.term-fgx68 { color: #5f87d7; }
|
||||
.term-fgx69 { color: #5f87ff; }
|
||||
.term-fgx70 { color: #5faf00; }
|
||||
.term-fgx71 { color: #5faf5f; }
|
||||
.term-fgx72 { color: #5faf87; }
|
||||
.term-fgx73 { color: #5fafaf; }
|
||||
.term-fgx74 { color: #5fafd7; }
|
||||
.term-fgx75 { color: #5fafff; }
|
||||
.term-fgx76 { color: #5fd700; }
|
||||
.term-fgx77 { color: #5fd75f; }
|
||||
.term-fgx78 { color: #5fd787; }
|
||||
.term-fgx79 { color: #5fd7af; }
|
||||
.term-fgx80 { color: #5fd7d7; }
|
||||
.term-fgx81 { color: #5fd7ff; }
|
||||
.term-fgx82 { color: #5fff00; }
|
||||
.term-fgx83 { color: #5fff5f; }
|
||||
.term-fgx84 { color: #5fff87; }
|
||||
.term-fgx85 { color: #5fffaf; }
|
||||
.term-fgx86 { color: #5fffd7; }
|
||||
.term-fgx87 { color: #5fffff; }
|
||||
.term-fgx88 { color: #870000; }
|
||||
.term-fgx89 { color: #87005f; }
|
||||
.term-fgx90 { color: #870087; }
|
||||
.term-fgx91 { color: #8700af; }
|
||||
.term-fgx92 { color: #8700d7; }
|
||||
.term-fgx93 { color: #8700ff; }
|
||||
.term-fgx94 { color: #875f00; }
|
||||
.term-fgx95 { color: #875f5f; }
|
||||
.term-fgx96 { color: #875f87; }
|
||||
.term-fgx97 { color: #875faf; }
|
||||
.term-fgx98 { color: #875fd7; }
|
||||
.term-fgx99 { color: #875fff; }
|
||||
.term-fgx100 { color: #878700; }
|
||||
.term-fgx101 { color: #87875f; }
|
||||
.term-fgx102 { color: #878787; }
|
||||
.term-fgx103 { color: #8787af; }
|
||||
.term-fgx104 { color: #8787d7; }
|
||||
.term-fgx105 { color: #8787ff; }
|
||||
.term-fgx106 { color: #87af00; }
|
||||
.term-fgx107 { color: #87af5f; }
|
||||
.term-fgx108 { color: #87af87; }
|
||||
.term-fgx109 { color: #87afaf; }
|
||||
.term-fgx110 { color: #87afd7; }
|
||||
.term-fgx111 { color: #87afff; }
|
||||
.term-fgx112 { color: #87d700; }
|
||||
.term-fgx113 { color: #87d75f; }
|
||||
.term-fgx114 { color: #87d787; }
|
||||
.term-fgx115 { color: #87d7af; }
|
||||
.term-fgx116 { color: #87d7d7; }
|
||||
.term-fgx117 { color: #87d7ff; }
|
||||
.term-fgx118 { color: #87ff00; }
|
||||
.term-fgx119 { color: #87ff5f; }
|
||||
.term-fgx120 { color: #87ff87; }
|
||||
.term-fgx121 { color: #87ffaf; }
|
||||
.term-fgx122 { color: #87ffd7; }
|
||||
.term-fgx123 { color: #87ffff; }
|
||||
.term-fgx124 { color: #af0000; }
|
||||
.term-fgx125 { color: #af005f; }
|
||||
.term-fgx126 { color: #af0087; }
|
||||
.term-fgx127 { color: #af00af; }
|
||||
.term-fgx128 { color: #af00d7; }
|
||||
.term-fgx129 { color: #af00ff; }
|
||||
.term-fgx130 { color: #af5f00; }
|
||||
.term-fgx131 { color: #af5f5f; }
|
||||
.term-fgx132 { color: #af5f87; }
|
||||
.term-fgx133 { color: #af5faf; }
|
||||
.term-fgx134 { color: #af5fd7; }
|
||||
.term-fgx135 { color: #af5fff; }
|
||||
.term-fgx136 { color: #af8700; }
|
||||
.term-fgx137 { color: #af875f; }
|
||||
.term-fgx138 { color: #af8787; }
|
||||
.term-fgx139 { color: #af87af; }
|
||||
.term-fgx140 { color: #af87d7; }
|
||||
.term-fgx141 { color: #af87ff; }
|
||||
.term-fgx142 { color: #afaf00; }
|
||||
.term-fgx143 { color: #afaf5f; }
|
||||
.term-fgx144 { color: #afaf87; }
|
||||
.term-fgx145 { color: #afafaf; }
|
||||
.term-fgx146 { color: #afafd7; }
|
||||
.term-fgx147 { color: #afafff; }
|
||||
.term-fgx148 { color: #afd700; }
|
||||
.term-fgx149 { color: #afd75f; }
|
||||
.term-fgx150 { color: #afd787; }
|
||||
.term-fgx151 { color: #afd7af; }
|
||||
.term-fgx152 { color: #afd7d7; }
|
||||
.term-fgx153 { color: #afd7ff; }
|
||||
.term-fgx154 { color: #afff00; }
|
||||
.term-fgx155 { color: #afff5f; }
|
||||
.term-fgx156 { color: #afff87; }
|
||||
.term-fgx157 { color: #afffaf; }
|
||||
.term-fgx158 { color: #afffd7; }
|
||||
.term-fgx159 { color: #afffff; }
|
||||
.term-fgx160 { color: #d70000; }
|
||||
.term-fgx161 { color: #d7005f; }
|
||||
.term-fgx162 { color: #d70087; }
|
||||
.term-fgx163 { color: #d700af; }
|
||||
.term-fgx164 { color: #d700d7; }
|
||||
.term-fgx165 { color: #d700ff; }
|
||||
.term-fgx166 { color: #d75f00; }
|
||||
.term-fgx167 { color: #d75f5f; }
|
||||
.term-fgx168 { color: #d75f87; }
|
||||
.term-fgx169 { color: #d75faf; }
|
||||
.term-fgx170 { color: #d75fd7; }
|
||||
.term-fgx171 { color: #d75fff; }
|
||||
.term-fgx172 { color: #d78700; }
|
||||
.term-fgx173 { color: #d7875f; }
|
||||
.term-fgx174 { color: #d78787; }
|
||||
.term-fgx175 { color: #d787af; }
|
||||
.term-fgx176 { color: #d787d7; }
|
||||
.term-fgx177 { color: #d787ff; }
|
||||
.term-fgx178 { color: #d7af00; }
|
||||
.term-fgx179 { color: #d7af5f; }
|
||||
.term-fgx180 { color: #d7af87; }
|
||||
.term-fgx181 { color: #d7afaf; }
|
||||
.term-fgx182 { color: #d7afd7; }
|
||||
.term-fgx183 { color: #d7afff; }
|
||||
.term-fgx184 { color: #d7d700; }
|
||||
.term-fgx185 { color: #d7d75f; }
|
||||
.term-fgx186 { color: #d7d787; }
|
||||
.term-fgx187 { color: #d7d7af; }
|
||||
.term-fgx188 { color: #d7d7d7; }
|
||||
.term-fgx189 { color: #d7d7ff; }
|
||||
.term-fgx190 { color: #d7ff00; }
|
||||
.term-fgx191 { color: #d7ff5f; }
|
||||
.term-fgx192 { color: #d7ff87; }
|
||||
.term-fgx193 { color: #d7ffaf; }
|
||||
.term-fgx194 { color: #d7ffd7; }
|
||||
.term-fgx195 { color: #d7ffff; }
|
||||
.term-fgx196 { color: #ff0000; }
|
||||
.term-fgx197 { color: #ff005f; }
|
||||
.term-fgx198 { color: #ff0087; }
|
||||
.term-fgx199 { color: #ff00af; }
|
||||
.term-fgx200 { color: #ff00d7; }
|
||||
.term-fgx201 { color: #ff00ff; }
|
||||
.term-fgx202 { color: #ff5f00; }
|
||||
.term-fgx203 { color: #ff5f5f; }
|
||||
.term-fgx204 { color: #ff5f87; }
|
||||
.term-fgx205 { color: #ff5faf; }
|
||||
.term-fgx206 { color: #ff5fd7; }
|
||||
.term-fgx207 { color: #ff5fff; }
|
||||
.term-fgx208 { color: #ff8700; }
|
||||
.term-fgx209 { color: #ff875f; }
|
||||
.term-fgx210 { color: #ff8787; }
|
||||
.term-fgx211 { color: #ff87af; }
|
||||
.term-fgx212 { color: #ff87d7; }
|
||||
.term-fgx213 { color: #ff87ff; }
|
||||
.term-fgx214 { color: #ffaf00; }
|
||||
.term-fgx215 { color: #ffaf5f; }
|
||||
.term-fgx216 { color: #ffaf87; }
|
||||
.term-fgx217 { color: #ffafaf; }
|
||||
.term-fgx218 { color: #ffafd7; }
|
||||
.term-fgx219 { color: #ffafff; }
|
||||
.term-fgx220 { color: #ffd700; }
|
||||
.term-fgx221 { color: #ffd75f; }
|
||||
.term-fgx222 { color: #ffd787; }
|
||||
.term-fgx223 { color: #ffd7af; }
|
||||
.term-fgx224 { color: #ffd7d7; }
|
||||
.term-fgx225 { color: #ffd7ff; }
|
||||
.term-fgx226 { color: #ffff00; }
|
||||
.term-fgx227 { color: #ffff5f; }
|
||||
.term-fgx228 { color: #ffff87; }
|
||||
.term-fgx229 { color: #ffffaf; }
|
||||
.term-fgx230 { color: #ffffd7; }
|
||||
.term-fgx231 { color: #ffffff; }
|
||||
.term-fgx232 { color: #080808; }
|
||||
.term-fgx233 { color: #121212; }
|
||||
.term-fgx234 { color: #1c1c1c; }
|
||||
.term-fgx235 { color: #262626; }
|
||||
.term-fgx236 { color: #303030; }
|
||||
.term-fgx237 { color: #3a3a3a; }
|
||||
.term-fgx238 { color: #444444; }
|
||||
.term-fgx239 { color: #4e4e4e; }
|
||||
.term-fgx240 { color: #585858; }
|
||||
.term-fgx241 { color: #626262; }
|
||||
.term-fgx242 { color: #6c6c6c; }
|
||||
.term-fgx243 { color: #767676; }
|
||||
.term-fgx244 { color: #808080; }
|
||||
.term-fgx245 { color: #8a8a8a; }
|
||||
.term-fgx246 { color: #949494; }
|
||||
.term-fgx247 { color: #9e9e9e; }
|
||||
.term-fgx248 { color: #a8a8a8; }
|
||||
.term-fgx249 { color: #b2b2b2; }
|
||||
.term-fgx250 { color: #bcbcbc; }
|
||||
.term-fgx251 { color: #c6c6c6; }
|
||||
.term-fgx252 { color: #d0d0d0; }
|
||||
.term-fgx253 { color: #dadada; }
|
||||
.term-fgx254 { color: #e4e4e4; }
|
||||
.term-fgx255 { color: #eeeeee; }
|
||||
6
web_src/css/features/cropper.css
Normal file
6
web_src/css/features/cropper.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import "cropperjs/dist/cropper.css";
|
||||
|
||||
.avatar-file-with-cropper + .cropper-panel .cropper-wrapper {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
}
|
||||
104
web_src/css/features/dropzone.css
Normal file
104
web_src/css/features/dropzone.css
Normal file
@@ -0,0 +1,104 @@
|
||||
/* because dropzone css is imported after our css, so use double class selector to override dropzone styles */
|
||||
.dropzone.dropzone {
|
||||
border: 2px dashed var(--color-secondary);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
border-radius: var(--border-radius-medium);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dropzone.dropzone .dz-message {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.dropzone.dropzone .dz-preview .dz-success-mark svg,
|
||||
.dropzone.dropzone .dz-preview .dz-error-mark svg {
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.dropzone.dropzone .dz-preview .dz-progress {
|
||||
/* by default the progress-bar is vertically centered (top: 50%), it's better to put it after the "details (size, filename)",
|
||||
then the layout from top to bottom is: size, filename, progress */
|
||||
top: 7em;
|
||||
}
|
||||
|
||||
.dropzone .dz-default.dz-message .dz-button {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.dropzone .dz-default.dz-message .dz-button:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.dz-custom-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
margin-top: var(--gap-block);
|
||||
}
|
||||
|
||||
.dz-custom-buttons button {
|
||||
background: transparent;
|
||||
color: var(--color-text-light);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dz-custom-buttons button:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.dropzone a.dz-filename,
|
||||
.dropzone a.dz-filename *,
|
||||
.dz-custom-buttons button {
|
||||
cursor: pointer !important; /* override ".dz-clickable *" */
|
||||
}
|
||||
|
||||
.dropzone .dz-filename span[data-dz-name] {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dropzone .dz-filename span[data-dz-name]:hover {
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dropzone .dz-error-message {
|
||||
top: 145px !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-image {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-file-preview .dz-image {
|
||||
background: var(--color-secondary-bg) !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-image img {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-image-preview,
|
||||
.dropzone-attachments .thumbnails img {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.dropzone-attachments .thumbnails img {
|
||||
height: 120px !important;
|
||||
width: 120px !important;
|
||||
object-fit: contain !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview:hover .dz-image img {
|
||||
filter: opacity(0.5) !important;
|
||||
}
|
||||
92
web_src/css/features/expander.css
Normal file
92
web_src/css/features/expander.css
Normal file
@@ -0,0 +1,92 @@
|
||||
text-expander .suggestions,
|
||||
.tribute-container {
|
||||
position: absolute;
|
||||
max-height: min(300px, 95vh);
|
||||
max-width: min(500px, 95vw);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap;
|
||||
background: var(--color-menu);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--color-secondary);
|
||||
z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */
|
||||
}
|
||||
|
||||
text-expander {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
text-expander .suggestions {
|
||||
padding: 0;
|
||||
margin-top: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
text-expander .suggestions li,
|
||||
.tribute-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
gap: 6px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
text-expander .suggestions li,
|
||||
.tribute-container li {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
text-expander .suggestions li + li,
|
||||
.tribute-container li + li {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
text-expander .suggestions li:first-child {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
text-expander .suggestions li:last-child {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
text-expander .suggestions li:only-child {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
text-expander .suggestions .fullname,
|
||||
.tribute-container li .fullname {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text-light-1);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
text-expander .suggestions li:hover,
|
||||
text-expander .suggestions li:hover *,
|
||||
text-expander .suggestions li[aria-selected="true"],
|
||||
text-expander .suggestions li[aria-selected="true"] *,
|
||||
.tribute-container li.highlight,
|
||||
.tribute-container li.highlight * {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
text-expander .suggestions img,
|
||||
.tribute-item img {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
object-fit: contain;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.tribute-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tribute-container ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
165
web_src/css/features/gitgraph.css
Normal file
165
web_src/css/features/gitgraph.css
Normal file
@@ -0,0 +1,165 @@
|
||||
#git-graph-container {
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
#git-graph-container h2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#git-graph-container #flow-select-refs-dropdown {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
min-width: 250px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#git-graph-container #flow-select-refs-dropdown .ui.label {
|
||||
max-width: 180px;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#git-graph-container li {
|
||||
list-style-type: none;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#git-graph-container li > span {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#git-graph-container li > span.message {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#git-graph-container li .ui.label.commit-id-short {
|
||||
padding: 2px 4px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#git-graph-container li .time {
|
||||
color: var(--color-text-light-3);
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#git-graph-container #rel-container {
|
||||
max-width: 30%;
|
||||
overflow-x: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#git-graph-container #rev-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#git-graph-container #rev-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#git-graph-container li .commit-refs .ui.button,
|
||||
#git-graph-container li .commit-refs .ui.label.tag-label {
|
||||
padding: 2px 4px;
|
||||
margin-right: 0.25em;
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: var(--line-height-default);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#git-graph-container.monochrome #rel-container .flow-group {
|
||||
stroke: var(--color-secondary-dark-5);
|
||||
fill: var(--color-secondary-dark-5);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 {
|
||||
stroke: var(--color-series-16-0);
|
||||
fill: var(--color-series-16-0);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
|
||||
stroke: var(--color-series-16-1);
|
||||
fill: var(--color-series-16-1);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 {
|
||||
stroke: var(--color-series-16-2);
|
||||
fill: var(--color-series-16-2);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 {
|
||||
stroke: var(--color-series-16-3);
|
||||
fill: var(--color-series-16-3);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 {
|
||||
stroke: var(--color-series-16-4);
|
||||
fill: var(--color-series-16-4);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 {
|
||||
stroke: var(--color-series-16-5);
|
||||
fill: var(--color-series-16-5);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 {
|
||||
stroke: var(--color-series-16-6);
|
||||
fill: var(--color-series-16-6);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 {
|
||||
stroke: var(--color-series-16-7);
|
||||
fill: var(--color-series-16-7);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
|
||||
stroke: var(--color-series-16-8);
|
||||
fill: var(--color-series-16-8);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 {
|
||||
stroke: var(--color-series-16-9);
|
||||
fill: var(--color-series-16-9);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 {
|
||||
stroke: var(--color-series-16-10);
|
||||
fill: var(--color-series-16-10);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 {
|
||||
stroke: var(--color-series-16-11);
|
||||
fill: var(--color-series-16-11);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 {
|
||||
stroke: var(--color-series-16-12);
|
||||
fill: var(--color-series-16-12);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 {
|
||||
stroke: var(--color-series-16-13);
|
||||
fill: var(--color-series-16-13);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 {
|
||||
stroke: var(--color-series-16-14);
|
||||
fill: var(--color-series-16-14);
|
||||
}
|
||||
|
||||
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 {
|
||||
stroke: var(--color-series-16-15);
|
||||
fill: var(--color-series-16-15);
|
||||
}
|
||||
60
web_src/css/features/heatmap.css
Normal file
60
web_src/css/features/heatmap.css
Normal file
@@ -0,0 +1,60 @@
|
||||
#user-heatmap {
|
||||
width: 100%;
|
||||
font-size: 9px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activity-heatmap-container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@container (width > 0) {
|
||||
#user-heatmap {
|
||||
/* Set element to fixed height so that it does not resize after load. The calculation is complex
|
||||
because the element does not scale with a fixed aspect ratio. */
|
||||
height: calc((100cqw / 5) - (100cqw / 25) + 20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback height adjustment above for browsers that don't support container queries */
|
||||
@supports not (container-type: inline-size) {
|
||||
/* Before the Vue component is mounted, show a loading indicator with dummy size */
|
||||
/* The ratio is guesswork for legacy browsers, new browsers use the "@container" approach above */
|
||||
#user-heatmap.is-loading {
|
||||
aspect-ratio: 5.4823972051; /* the size is about 816 x 148.84 */
|
||||
}
|
||||
.user.profile #user-heatmap.is-loading {
|
||||
aspect-ratio: 5.6290608387; /* the size is about 953 x 169.3 */
|
||||
}
|
||||
}
|
||||
|
||||
#user-heatmap text {
|
||||
fill: currentcolor !important;
|
||||
}
|
||||
|
||||
#user-heatmap .heatmap-footer {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* "Less [colors] More" scale */
|
||||
#user-heatmap .heatmap-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#user-heatmap .heatmap-legend-svg {
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
#user-heatmap .heatmap-legend > div:first-child,
|
||||
#user-heatmap .heatmap-legend > div:last-child {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#user-heatmap .heatmap-day:hover {
|
||||
outline: 1.5px solid var(--color-text);
|
||||
}
|
||||
112
web_src/css/features/imagediff.css
Normal file
112
web_src/css/features/imagediff.css
Normal file
@@ -0,0 +1,112 @@
|
||||
.image-diff-tabs {
|
||||
min-height: 60px;
|
||||
|
||||
}
|
||||
.image-diff-tabs.is-loading .tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-diff-container {
|
||||
text-align: center;
|
||||
padding: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
.image-diff-container img {
|
||||
border: 1px solid var(--color-primary-light-7);
|
||||
background: var(--background-view-image);
|
||||
}
|
||||
|
||||
.image-diff-container .before-container {
|
||||
border: 1px solid var(--color-red);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-diff-container .after-container {
|
||||
border: 1px solid var(--color-green);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-side-by-side .side {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
vertical-align: top;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-side-by-side .side .side-header {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe {
|
||||
margin: auto;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .before-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .swipe-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: block;
|
||||
border-left: 2px solid var(--color-secondary-dark-8);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .swipe-bar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
|
||||
background: var(--color-secondary-dark-8);
|
||||
left: -5px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle {
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle {
|
||||
bottom: -14px;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-overlay {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-overlay .overlay-frame {
|
||||
margin: 1em auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-overlay .before-container,
|
||||
.image-diff-container .diff-overlay .after-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.image-diff-container .diff-overlay input {
|
||||
max-width: 300px;
|
||||
}
|
||||
122
web_src/css/features/projects.css
Normal file
122
web_src/css/features/projects.css
Normal file
@@ -0,0 +1,122 @@
|
||||
#project-board {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
margin: 0 0.5em;
|
||||
min-height: max(calc(100vh - 400px), 300px);
|
||||
max-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
padding: 0.5em 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-header h2 {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project-column {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-project-column-bg);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin: 0 0.5rem;
|
||||
padding: 0.5rem;
|
||||
width: 320px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.project-column-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.ui.label.project-column-issue-count {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.project-column > .ui.cards {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
overflow: clip auto;
|
||||
gap: .25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.project-column > .divider {
|
||||
margin: 5px 0;
|
||||
border-color: currentcolor;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.project-column:first-child {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.project-column:last-child {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.card-attachment-images {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
cursor: default;
|
||||
scroll-snap-type: x mandatory;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-attachment-images img {
|
||||
display: inline-block;
|
||||
max-height: 50px;
|
||||
border-radius: var(--border-radius);
|
||||
text-align: left;
|
||||
scroll-snap-align: center;
|
||||
margin-right: 2px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.card-attachment-images img:only-child {
|
||||
max-height: 90px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card-ghost {
|
||||
border-color: var(--color-secondary-dark-4) !important;
|
||||
border-style: dashed !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.card-ghost * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fullscreen.projects-view {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */
|
||||
.fullscreen.projects-view .project-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fullscreen.projects-view #project-board {
|
||||
flex: 1;
|
||||
max-height: unset;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
393
web_src/css/font_i18n.css
Normal file
393
web_src/css/font_i18n.css
Normal file
@@ -0,0 +1,393 @@
|
||||
:root :lang(ja) {
|
||||
--fonts-override: var(--fonts-default-override-ja);
|
||||
}
|
||||
|
||||
:root :lang(zh-CN) {
|
||||
--fonts-override: var(--fonts-default-override-zh-cn);
|
||||
}
|
||||
|
||||
:root :lang(zh-TW) {
|
||||
--fonts-override: var(--fonts-default-override-zh-tw);
|
||||
}
|
||||
|
||||
:root :lang(zh-HK) {
|
||||
--fonts-override: var(--fonts-default-override-zh-hk);
|
||||
}
|
||||
|
||||
:root :lang(ko) {
|
||||
--fonts-override: var(--fonts-default-override-ko);
|
||||
}
|
||||
|
||||
[lang] {
|
||||
font-family: var(--fonts-regular);
|
||||
}
|
||||
|
||||
:root {
|
||||
--fonts-default-override-ja: system-ui-ja, var(--fonts-proportional);
|
||||
--fonts-default-override-zh-cn: system-ui-zh-cn, var(--fonts-proportional);
|
||||
--fonts-default-override-zh-tw: system-ui-zh-tw, var(--fonts-proportional);
|
||||
--fonts-default-override-zh-hk: system-ui-zh-hk, var(--fonts-proportional);
|
||||
--fonts-default-override-ko: system-ui-ko, var(--fonts-proportional);
|
||||
}
|
||||
|
||||
/* Special handling for Firefox on Windows/Linux */
|
||||
@supports (-moz-appearance: none) {
|
||||
:root {
|
||||
--fonts-default-override-ja: var(--fonts-proportional), system-ui-ja;
|
||||
--fonts-default-override-zh-cn: var(--fonts-proportional), system-ui-zh-cn;
|
||||
--fonts-default-override-zh-tw: var(--fonts-proportional), system-ui-zh-tw;
|
||||
--fonts-default-override-zh-hk: var(--fonts-proportional), system-ui-zh-hk;
|
||||
--fonts-default-override-ko: var(--fonts-proportional), system-ui-ko;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ja;
|
||||
src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
|
||||
local("HiraginoSans-W2"), local("Source Han Sans JP Light"),
|
||||
local("SourceHanSansJP-Light"), local("Source Han Sans J Light"),
|
||||
local("SourceHanSansJ-Light"), local("Noto Sans CJK JP Light"),
|
||||
local("NotoSansCJKJP-Light"), local("Source Han Sans Light"),
|
||||
local("SourceHanSans-Light"), local("Yu Gothic Regular"),
|
||||
local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
|
||||
local("MS PGothic");
|
||||
font-weight: 300;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ja;
|
||||
src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
|
||||
local("HiraginoSans-W4"), local("Source Han Sans JP Regular"),
|
||||
local("SourceHanSansJP-Regular"), local("Source Han Sans J Regular"),
|
||||
local("SourceHanSansJ-Regular"), local("Noto Sans CJK JP Regular"),
|
||||
local("NotoSansCJKJP-Regular"), local("Source Han Sans Regular"),
|
||||
local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
|
||||
local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
|
||||
local("MS PGothic");
|
||||
font-weight: 400;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ja;
|
||||
src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"),
|
||||
local("HiraginoSans-W5"), local("Source Han Sans JP Medium"),
|
||||
local("SourceHanSansJP-Medium"), local("Source Han Sans J Medium"),
|
||||
local("SourceHanSansJ-Medium"), local("Noto Sans CJK JP Medium"),
|
||||
local("NotoSansCJKJP-Medium"), local("Source Han Sans Medium"),
|
||||
local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
|
||||
local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
|
||||
local("MS PGothic");
|
||||
font-weight: 500;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ja;
|
||||
src: local("HiraKakuProN-W6"), local("Hiragino Kaku Gothic ProN W6"),
|
||||
local("HiraginoSans-W6"), local("Source Han Sans JP Bold"),
|
||||
local("SourceHanSansJP-Bold"), local("Source Han Sans J Bold"),
|
||||
local("SourceHanSansJ-Bold"), local("Noto Sans CJK JP Bold"),
|
||||
local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
|
||||
local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
|
||||
local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
|
||||
font-weight: 600;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
/* Safari on macOS/iOS */
|
||||
@font-face {
|
||||
font-family: system-ui-ja;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+A0;
|
||||
}
|
||||
|
||||
/* Other browsers on macOS/iOS */
|
||||
@supports not (-webkit-hyphens: none) {
|
||||
@font-face {
|
||||
font-family: system-ui-ja;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+20;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-cn;
|
||||
src: local("PingFangSC-Light"), local("Source Han Sans CN Light"),
|
||||
local("SourceHanSansCN-Light"), local("Source Han Sans SC Light"),
|
||||
local("SourceHanSansSC-Light"), local("Noto Sans CJK SC Light"),
|
||||
local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
|
||||
local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
|
||||
local("Heiti SC Light"), local("SimHei");
|
||||
font-weight: 300;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-cn;
|
||||
src: local("PingFangSC-Regular"), local("Source Han Sans CN Regular"),
|
||||
local("SourceHanSansCN-Regular"), local("Source Han Sans SC Regular"),
|
||||
local("SourceHanSansSC-Regular"), local("Noto Sans CJK SC Regular"),
|
||||
local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
|
||||
local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
|
||||
local("Heiti SC Light"), local("SimHei");
|
||||
font-weight: 400;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-cn;
|
||||
src: local("PingFangSC-Medium"), local("Source Han Sans CN Medium"),
|
||||
local("SourceHanSansCN-Medium"), local("Source Han Sans SC Medium"),
|
||||
local("SourceHanSansSC-Medium"), local("Noto Sans CJK SC Medium"),
|
||||
local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
|
||||
local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
|
||||
local("Heiti SC Light"), local("SimHei");
|
||||
font-weight: 500;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-cn;
|
||||
src: local("PingFangSC-Semibold"), local("Source Han Sans CN Bold"),
|
||||
local("SourceHanSansCN-Bold"), local("Source Han Sans SC Bold"),
|
||||
local("SourceHanSansSC-Bold"), local("Noto Sans CJK SC Bold"),
|
||||
local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
|
||||
local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
|
||||
local("Heiti SC Medium"), local("SimHei");
|
||||
font-weight: 600;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
/* Safari on macOS/iOS */
|
||||
@font-face {
|
||||
font-family: system-ui-zh-cn;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+A0;
|
||||
}
|
||||
|
||||
/* Other browsers on macOS/iOS */
|
||||
@supports not (-webkit-hyphens: none) {
|
||||
@font-face {
|
||||
font-family: system-ui-zh-cn;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+20;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-tw;
|
||||
src: local("PingFangTC-Light"), local("Source Han Sans TW Light"),
|
||||
local("SourceHanSansTW-Light"), local("Source Han Sans TC Light"),
|
||||
local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
|
||||
local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
|
||||
local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
|
||||
local("Heiti TC Light"), local("PMingLiU");
|
||||
font-weight: 300;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-tw;
|
||||
src: local("PingFangTC-Regular"), local("Source Han Sans TW Regular"),
|
||||
local("SourceHanSansTW-Regular"), local("Source Han Sans TC Regular"),
|
||||
local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
|
||||
local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
|
||||
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
|
||||
local("Heiti TC Light"), local("PMingLiU");
|
||||
font-weight: 400;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-tw;
|
||||
src: local("PingFangTC-Medium"), local("Source Han Sans TW Medium"),
|
||||
local("SourceHanSansTW-Medium"), local("Source Han Sans TC Medium"),
|
||||
local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
|
||||
local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
|
||||
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
|
||||
local("Heiti TC Light"), local("PMingLiU");
|
||||
font-weight: 500;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-tw;
|
||||
src: local("PingFangTC-Semibold"), local("Source Han Sans TW Bold"),
|
||||
local("SourceHanSansTW-Bold"), local("Source Han Sans TC Bold"),
|
||||
local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
|
||||
local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
|
||||
local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
|
||||
local("Heiti TC Medium"), local("PMingLiU");
|
||||
font-weight: 600;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
/* Safari on macOS/iOS */
|
||||
@font-face {
|
||||
font-family: system-ui-zh-tw;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+A0;
|
||||
}
|
||||
|
||||
/* Other browsers on macOS/iOS */
|
||||
@supports not (-webkit-hyphens: none) {
|
||||
@font-face {
|
||||
font-family: system-ui-zh-tw;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+20;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-hk;
|
||||
src: local("PingFangHK-Light"), local("Source Han Sans HK Light"),
|
||||
local("SourceHanSansHK-Light"), local("Source Han Sans HC Light"),
|
||||
local("SourceHanSansHC-Light"), local("Noto Sans CJK HK Light"),
|
||||
local("NotoSansCJKHK-Light"), local("Source Han Sans TC Light"),
|
||||
local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"),
|
||||
local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
|
||||
local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
|
||||
local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
|
||||
font-weight: 300;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-hk;
|
||||
src: local("PingFangHK-Regular"), local("Source Han Sans HK Regular"),
|
||||
local("SourceHanSansHK-Regular"), local("Source Han Sans HC Regular"),
|
||||
local("SourceHanSansHC-Regular"), local("Noto Sans CJK HK Regular"),
|
||||
local("NotoSansCJKHK-Regular"), local("Source Han Sans TC Regular"),
|
||||
local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"),
|
||||
local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
|
||||
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
|
||||
local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
|
||||
font-weight: 400;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-hk;
|
||||
src: local("PingFangHK-Medium"), local("Source Han Sans HK Medium"),
|
||||
local("SourceHanSansHK-Medium"), local("Source Han Sans HC Medium"),
|
||||
local("SourceHanSansHC-Medium"), local("Noto Sans CJK HK Medium"),
|
||||
local("NotoSansCJKHK-Medium"), local("Source Han Sans TC Medium"),
|
||||
local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"),
|
||||
local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
|
||||
local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
|
||||
local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
|
||||
font-weight: 500;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-zh-hk;
|
||||
src: local("PingFangHK-Semibold"), local("Source Han Sans HK Bold"),
|
||||
local("SourceHanSansHK-Bold"), local("Source Han Sans HC Bold"),
|
||||
local("SourceHanSansHC-Bold"), local("Noto Sans CJK HK Bold"),
|
||||
local("NotoSansCJKHK-Bold"), local("Source Han Sans TC Bold"),
|
||||
local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"),
|
||||
local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
|
||||
local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
|
||||
local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
|
||||
font-weight: 600;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
/* Safari on macOS/iOS */
|
||||
@font-face {
|
||||
font-family: system-ui-zh-hk;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+A0;
|
||||
}
|
||||
|
||||
/* Other browsers on macOS/iOS */
|
||||
@supports not (-webkit-hyphens: none) {
|
||||
@font-face {
|
||||
font-family: system-ui-zh-hk;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+20;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ko;
|
||||
src: local("AppleSDGothicNeo-Light"), local("Source Han Sans KR Light"),
|
||||
local("SourceHanSansKR-Light"), local("Source Han Sans K Light"),
|
||||
local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
|
||||
local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
|
||||
local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
|
||||
font-weight: 300;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ko;
|
||||
src: local("AppleSDGothicNeo-Regular"), local("Source Han Sans KR Regular"),
|
||||
local("SourceHanSansKR-Regular"), local("Source Han Sans K Regular"),
|
||||
local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
|
||||
local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
|
||||
local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
|
||||
font-weight: 400;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ko;
|
||||
src: local("AppleSDGothicNeo-Medium"), local("Source Han Sans KR Medium"),
|
||||
local("SourceHanSansKR-Medium"), local("Source Han Sans K Medium"),
|
||||
local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
|
||||
local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
|
||||
local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
|
||||
font-weight: 500;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: system-ui-ko;
|
||||
src: local("AppleSDGothicNeo-SemiBold"), local("Source Han Sans KR Bold"),
|
||||
local("SourceHanSansKR-Bold"), local("Source Han Sans K Bold"),
|
||||
local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
|
||||
local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
|
||||
local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
|
||||
font-weight: 600;
|
||||
unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
|
||||
U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
|
||||
}
|
||||
|
||||
/* Safari on macOS/iOS */
|
||||
@font-face {
|
||||
font-family: system-ui-ko;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+A0;
|
||||
}
|
||||
|
||||
/* Other browsers on macOS/iOS */
|
||||
@supports not (-webkit-hyphens: none) {
|
||||
@font-face {
|
||||
font-family: system-ui-ko;
|
||||
src: local("HelveticaNeue");
|
||||
unicode-range: U+20;
|
||||
}
|
||||
}
|
||||
78
web_src/css/helpers.css
Normal file
78
web_src/css/helpers.css
Normal file
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
|
||||
Gitea's private styles use `g-` prefix.
|
||||
*/
|
||||
|
||||
.gt-ellipsis {
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
.g-table-auto-ellipsis td.auto-ellipsis {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.g-table-auto-ellipsis td.auto-ellipsis span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: inherit;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.interact-fg { color: inherit !important; }
|
||||
.interact-fg:hover { color: var(--color-primary) !important; }
|
||||
.interact-fg:active { color: var(--color-primary-active) !important; }
|
||||
|
||||
.interact-bg { background: transparent !important; }
|
||||
.interact-bg:hover { background: var(--color-hover) !important; }
|
||||
.interact-bg:active { background: var(--color-active) !important; }
|
||||
|
||||
/* primary-color dot centered on the top-right corner of the element */
|
||||
.indicator-dot {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.indicator-dot::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
border: 1px solid var(--color-secondary);
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
/* double selector so it wins over .tw-flex (old .gt-df) etc */
|
||||
.not-mobile.not-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 767.98px) {
|
||||
.only-mobile.only-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-size-1 { tab-size: 1 !important; }
|
||||
.tab-size-2 { tab-size: 2 !important; }
|
||||
.tab-size-3 { tab-size: 3 !important; }
|
||||
.tab-size-4 { tab-size: 4 !important; }
|
||||
.tab-size-5 { tab-size: 5 !important; }
|
||||
.tab-size-6 { tab-size: 6 !important; }
|
||||
.tab-size-7 { tab-size: 7 !important; }
|
||||
.tab-size-8 { tab-size: 8 !important; }
|
||||
.tab-size-9 { tab-size: 9 !important; }
|
||||
.tab-size-10 { tab-size: 10 !important; }
|
||||
.tab-size-11 { tab-size: 11 !important; }
|
||||
.tab-size-12 { tab-size: 12 !important; }
|
||||
.tab-size-13 { tab-size: 13 !important; }
|
||||
.tab-size-14 { tab-size: 14 !important; }
|
||||
.tab-size-15 { tab-size: 15 !important; }
|
||||
.tab-size-16 { tab-size: 16 !important; }
|
||||
106
web_src/css/home.css
Normal file
106
web_src/css/home.css
Normal file
@@ -0,0 +1,106 @@
|
||||
.home .logo {
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.home .hero h1 {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
.home .hero h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.home .hero h1 {
|
||||
font-size: 5.5em;
|
||||
}
|
||||
.home .hero h2 {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.home .hero .svg {
|
||||
color: var(--color-logo);
|
||||
height: 40px;
|
||||
width: 50px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.home .hero.header {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.home p.large {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.home .stackable {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.home a {
|
||||
color: var(--color-logo);
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--color-footer);
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.page-footer .left-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.page-footer .right-links {
|
||||
min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.page-footer .right-links > a {
|
||||
border-left: 1px solid var(--color-secondary-dark-1);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/* the theme item is also used for the menu's "default text" display */
|
||||
.page-footer .ui.dropdown .theme-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
/* Fomantic UI dropdown "remote items by API" can't change parent "item" element,
|
||||
so we use "theme-menu-item" in the "item" and add tooltip to the inner one.
|
||||
Then the inner one needs to get padding and parent "item" padding needs to be removed */
|
||||
.page-footer .menu.theme-menu > .item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-footer .menu.theme-menu > .item > .theme-menu-item {
|
||||
padding: 11px 16px;
|
||||
}
|
||||
|
||||
.page-footer .ui.dropdown .menu.language-menu,
|
||||
.page-footer .ui.dropdown .menu.theme-menu {
|
||||
max-height: min(500px, calc(100vh - 60px));
|
||||
overflow-y: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.page-footer {
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
90
web_src/css/index.css
Normal file
90
web_src/css/index.css
Normal file
@@ -0,0 +1,90 @@
|
||||
@import "./modules/normalize.css";
|
||||
@import "./modules/animations.css";
|
||||
|
||||
/* fomantic replacements */
|
||||
@import "./modules/button.css";
|
||||
@import "./modules/container.css";
|
||||
@import "./modules/divider.css";
|
||||
@import "./modules/header.css";
|
||||
@import "./modules/input.css";
|
||||
@import "./modules/label.css";
|
||||
@import "./modules/list.css";
|
||||
@import "./modules/segment.css";
|
||||
@import "./modules/grid.css";
|
||||
@import "./modules/menu.css";
|
||||
@import "./modules/message.css";
|
||||
@import "./modules/table.css";
|
||||
@import "./modules/card.css";
|
||||
@import "./modules/checkbox.css";
|
||||
@import "./modules/dimmer.css";
|
||||
@import "./modules/modal.css";
|
||||
@import "./modules/search.css";
|
||||
@import "./modules/tab.css";
|
||||
@import "./modules/form.css";
|
||||
@import "./modules/dropdown.css";
|
||||
@import "./modules/transition.css";
|
||||
|
||||
@import "./modules/shortcut.css";
|
||||
@import "./modules/tippy.css";
|
||||
@import "./modules/breadcrumb.css";
|
||||
@import "./modules/comment.css";
|
||||
@import "./modules/navbar.css";
|
||||
@import "./modules/toast.css";
|
||||
@import "./modules/svg.css";
|
||||
@import "./modules/flexcontainer.css";
|
||||
@import "./modules/codeeditor.css";
|
||||
@import "./modules/chroma.css";
|
||||
@import "./modules/charescape.css";
|
||||
|
||||
@import "./shared/flex-list.css";
|
||||
@import "./shared/settings.css";
|
||||
|
||||
@import "./features/dropzone.css";
|
||||
@import "./features/gitgraph.css";
|
||||
@import "./features/heatmap.css";
|
||||
@import "./features/imagediff.css";
|
||||
@import "./features/projects.css";
|
||||
@import "./features/expander.css";
|
||||
@import "./features/cropper.css";
|
||||
@import "./features/console.css";
|
||||
@import "./features/captcha.css";
|
||||
|
||||
@import "./markup/content.css";
|
||||
@import "./markup/codeblock.css";
|
||||
@import "./markup/codepreview.css";
|
||||
@import "./markup/jupyter.css";
|
||||
|
||||
@import "./font_i18n.css";
|
||||
@import "./base.css";
|
||||
@import "./avatar.css";
|
||||
@import "./home.css";
|
||||
@import "./install.css";
|
||||
|
||||
@import "./repo.css";
|
||||
@import "./repo/release-tag.css";
|
||||
@import "./repo/issue-card.css";
|
||||
@import "./repo/issue-label.css";
|
||||
@import "./repo/issue-list.css";
|
||||
@import "./repo/list-header.css";
|
||||
@import "./repo/file-view.css";
|
||||
@import "./repo/wiki.css";
|
||||
@import "./repo/home.css";
|
||||
@import "./repo/home-file-list.css";
|
||||
@import "./repo/reactions.css";
|
||||
@import "./repo/clone.css";
|
||||
@import "./repo/commit-sign.css";
|
||||
@import "./repo/packages.css";
|
||||
|
||||
@import "./editor/combomarkdowneditor.css";
|
||||
|
||||
@import "./org.css";
|
||||
@import "./user.css";
|
||||
@import "./dashboard.css";
|
||||
@import "./admin.css";
|
||||
@import "./explore.css";
|
||||
@import "./review.css";
|
||||
@import "./actions.css";
|
||||
|
||||
@import "./helpers.css";
|
||||
|
||||
@tailwind utilities;
|
||||
55
web_src/css/install.css
Normal file
55
web_src/css/install.css
Normal file
@@ -0,0 +1,55 @@
|
||||
.page-content.install .install-config-container {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.page-content.install form.ui.form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 30%;
|
||||
padding-right: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.page-content.install .ui.form .field > .help,
|
||||
.page-content.install .ui.form .field > .ui.checkbox:first-child,
|
||||
.page-content.install .ui.form .field > .right-content {
|
||||
margin-left: calc(30% + 5px);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.page-content.install form.ui.form input:not([type="checkbox"],[type="radio"]),
|
||||
.page-content.install form.ui.form .ui.selection.dropdown {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.page-content.install form.ui.form details.optional.field[open] {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.page-content.install form.ui.form details.optional.field[open]:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--color-secondary);
|
||||
}
|
||||
.page-content.install form.ui.form details.optional.field[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-content.install form.ui.form details.optional.field * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-content.install form.ui.form .field {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-content.install .ui .reinstall-message {
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
color: var(--color-red);
|
||||
text-align: left;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.page-content.install .ui .reinstall-confirm {
|
||||
width: 70%;
|
||||
text-align: left;
|
||||
margin: 10px auto;
|
||||
}
|
||||
10
web_src/css/markup/codeblock.css
Normal file
10
web_src/css/markup/codeblock.css
Normal file
@@ -0,0 +1,10 @@
|
||||
.markup .ui.button.code-copy {
|
||||
top: 8px;
|
||||
right: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markup .mermaid-block .view-controller {
|
||||
right: 6px;
|
||||
bottom: 5px;
|
||||
}
|
||||
36
web_src/css/markup/codepreview.css
Normal file
36
web_src/css/markup/codepreview.css
Normal file
@@ -0,0 +1,36 @@
|
||||
.markup .code-preview-container {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
.markup .code-preview-container .code-preview-header {
|
||||
color: var(--color-text-light-1);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
padding: 0.5em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markup .code-preview-container table {
|
||||
width: 100%;
|
||||
max-height: 240px; /* 12 lines at 20px per line */
|
||||
overflow-y: auto;
|
||||
margin: 0; /* override ".markup table {margin}" */
|
||||
}
|
||||
|
||||
/* workaround to hide empty p before container - more details are in "html_codepreview.go" */
|
||||
.markup p:empty:has(+ .code-preview-container) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* override the polluted styles from the content.css: ".markup table ..." */
|
||||
.markup .code-preview-container table tr {
|
||||
border: 0 !important;
|
||||
}
|
||||
.markup .code-preview-container table td {
|
||||
border: 0 !important;
|
||||
padding: 0 0 0 5px !important;
|
||||
}
|
||||
.markup .code-preview-container table tr:nth-child(2n) {
|
||||
background: none !important;
|
||||
}
|
||||
513
web_src/css/markup/content.css
Normal file
513
web_src/css/markup/content.css
Normal file
@@ -0,0 +1,513 @@
|
||||
.markup {
|
||||
overflow: hidden;
|
||||
font-size: 14px; /* 14px for comments, overridden to 16px for .file-view below. */
|
||||
line-height: 1.5 !important;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.markup > *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.markup > *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.markup a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markup .anchor {
|
||||
float: left;
|
||||
padding-inline-end: 4px;
|
||||
margin-inline-start: -20px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.markup .anchor .svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markup .anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.markup h1 .anchor {
|
||||
margin-top: -2px; /* re-align to center */
|
||||
}
|
||||
|
||||
.markup h1 .anchor .svg,
|
||||
.markup h2 .anchor .svg,
|
||||
.markup h3 .anchor .svg,
|
||||
.markup h4 .anchor .svg,
|
||||
.markup h5 .anchor .svg,
|
||||
.markup h6 .anchor .svg {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markup h1:hover .anchor .svg,
|
||||
.markup h2:hover .anchor .svg,
|
||||
.markup h3:hover .anchor .svg,
|
||||
.markup h4:hover .anchor .svg,
|
||||
.markup h5:hover .anchor .svg,
|
||||
.markup h6:hover .anchor .svg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.markup h2 .anchor .svg,
|
||||
.markup h3 .anchor .svg,
|
||||
.markup h4 .anchor .svg {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.markup h1,
|
||||
.markup h2,
|
||||
.markup h3,
|
||||
.markup h4,
|
||||
.markup h5,
|
||||
.markup h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.markup h1 tt,
|
||||
.markup h1 code,
|
||||
.markup h2 tt,
|
||||
.markup h2 code,
|
||||
.markup h3 tt,
|
||||
.markup h3 code,
|
||||
.markup h4 tt,
|
||||
.markup h4 code,
|
||||
.markup h5 tt,
|
||||
.markup h5 code,
|
||||
.markup h6 tt,
|
||||
.markup h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.markup h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.markup h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.markup h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markup h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markup h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.markup h6 {
|
||||
font-size: 0.85em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.markup p,
|
||||
.markup blockquote,
|
||||
.markup details,
|
||||
.markup ul,
|
||||
.markup ol,
|
||||
.markup dl,
|
||||
.markup table,
|
||||
.markup pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* override p:last-child from base.css.
|
||||
Fomantic assumes that <p>/<hX> elements only have margins between elements, but not for the first's top or last's bottom.
|
||||
In markup content, we always use bottom margin for all elements */
|
||||
.markup p:last-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markup hr {
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
background-color: var(--color-secondary);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markup ul,
|
||||
.markup ol {
|
||||
padding-inline-start: 2em;
|
||||
}
|
||||
|
||||
.markup .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.markup .task-list-item > ul {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.markup .task-list-item p + ul {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markup .task-list-item input[type="checkbox"] {
|
||||
margin-bottom: 0.25em;
|
||||
margin-inline: -1.4em 0.6em;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markup .task-list-item input[type="checkbox"] + p {
|
||||
margin-inline-start: -0.2em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.markup .task-list-item > p {
|
||||
margin-inline: 16px;
|
||||
}
|
||||
|
||||
.markup .task-list-item + .task-list-item {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.markup input[type="checkbox"] {
|
||||
margin-inline-end: .25em;
|
||||
margin-bottom: .25em;
|
||||
cursor: default;
|
||||
opacity: 1 !important; /* override fomantic on edit preview */
|
||||
pointer-events: auto !important; /* override fomantic on edit preview */
|
||||
vertical-align: middle !important; /* override fomantic on edit preview */
|
||||
}
|
||||
|
||||
.markup ul ul,
|
||||
.markup ul ol,
|
||||
.markup ol ol,
|
||||
.markup ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markup ol ol,
|
||||
.markup ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.markup li > p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markup li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.markup dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markup dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.markup dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markup blockquote {
|
||||
margin-inline-start: 0;
|
||||
padding: 0 15px;
|
||||
color: var(--color-text-light-2);
|
||||
border-left: 0.25em solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.markup blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markup blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markup table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markup table th {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.markup table th,
|
||||
.markup table td {
|
||||
padding: 6px 13px !important;
|
||||
border: 1px solid var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
.markup table tr {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.markup table tr:nth-child(2n) {
|
||||
background-color: var(--color-markup-table-row);
|
||||
}
|
||||
|
||||
.markup img,
|
||||
.markup video {
|
||||
max-width: 100%;
|
||||
box-sizing: initial;
|
||||
}
|
||||
|
||||
/* GitHub-style dark/light image switching.
|
||||
These fragments are kept in the rendered HTML as part of the `src` attribute.
|
||||
We decide which to show via `data-gitea-theme-dark` on `<html>`, which is
|
||||
mirrored from `--is-dark-theme` in JS (so it also works with auto/custom themes).
|
||||
*/
|
||||
html[data-gitea-theme-dark="true"] .markup a[href*="#gh-light-mode-only"],
|
||||
html[data-gitea-theme-dark="true"] .markup img[src*="#gh-light-mode-only"],
|
||||
html[data-gitea-theme-dark="false"] .markup a[href*="#gh-dark-mode-only"],
|
||||
html[data-gitea-theme-dark="false"] .markup img[src*="#gh-dark-mode-only"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-view.markup {
|
||||
padding: 1em 2em;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-view.markup:has(.file-not-rendered-prompt) {
|
||||
padding: 0; /* let the file-not-rendered-prompt layout itself */
|
||||
}
|
||||
|
||||
/* this background ensures images can break <hr>. We can only do this on
|
||||
cases where the background is known and not transparent. */
|
||||
.file-view.markup img,
|
||||
.file-view.markup video,
|
||||
.comment-body .markup img, /* regular comment */
|
||||
.comment-body .markup video,
|
||||
.comment-content .markup img, /* code comment */
|
||||
.comment-content .markup video,
|
||||
.wiki .markup img,
|
||||
.wiki .markup video {
|
||||
background: var(--color-box-body);
|
||||
}
|
||||
|
||||
.markup img[align="right"],
|
||||
.markup video[align="right"] {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
.markup img[align="left"],
|
||||
.markup video[align="left"] {
|
||||
padding-inline-end: 28px;
|
||||
}
|
||||
|
||||
.markup code,
|
||||
.markup tt {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
white-space: break-spaces;
|
||||
background-color: var(--color-markup-code-inline);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.markup code br,
|
||||
.markup tt br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markup pre > code {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.markup .code-block,
|
||||
.markup .code-block-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markup .code-block-container.code-overflow-wrap pre > code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.markup .code-block-container.code-overflow-scroll pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markup .code-block-container.code-overflow-scroll pre > code {
|
||||
white-space: pre;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.markup .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markup .highlight pre,
|
||||
.markup pre {
|
||||
padding: 16px;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: var(--color-markup-code-block);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.markup .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markup pre code,
|
||||
.markup pre tt {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markup pre code::before,
|
||||
.markup pre code::after,
|
||||
.markup pre tt::before,
|
||||
.markup pre tt::after {
|
||||
content: normal;
|
||||
}
|
||||
|
||||
.markup kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: var(--color-text-light);
|
||||
vertical-align: middle;
|
||||
background-color: var(--color-markup-code-inline);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow-kbd);
|
||||
}
|
||||
|
||||
.markup details.frontmatter-content summary {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.markup details.frontmatter-content svg {
|
||||
vertical-align: middle;
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
||||
.external-render-iframe {
|
||||
display: block; /* removes the inline baseline gap below the iframe */
|
||||
width: 100%;
|
||||
height: max(300px, 80vh);
|
||||
border: none;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.markup-content-iframe {
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: var(--height-loading); /* actual height is set in JS after loading */
|
||||
overflow: hidden;
|
||||
color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */
|
||||
}
|
||||
|
||||
.markup-block-error {
|
||||
display: block !important; /* override fomantic .ui.form .error.message {display: none} */
|
||||
border: none !important;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
font-size: 85% !important;
|
||||
white-space: pre-wrap !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.markup-block-error + pre {
|
||||
border-top: none !important;
|
||||
margin-top: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.file-view.markup.orgmode li.unchecked::before {
|
||||
content: "[ ] ";
|
||||
}
|
||||
|
||||
.file-view.markup.orgmode li.checked::before {
|
||||
content: "[x] ";
|
||||
}
|
||||
|
||||
.file-view.markup.orgmode li.indeterminate::before {
|
||||
content: "[-] ";
|
||||
}
|
||||
|
||||
/* This is only needed for <p> because they are literally acting as paragraphs,
|
||||
* and thus having an ::before on the same line would force the paragraph to
|
||||
* move to the next line. This can be avoided by an inline-block display that
|
||||
* avoids that property while still having the other properties of the block
|
||||
* display. */
|
||||
.file-view.markup.orgmode li.unchecked > p,
|
||||
.file-view.markup.orgmode li.checked > p,
|
||||
.file-view.markup.orgmode li.indeterminate > p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* auto-hide-control is a control element or a container for control elements,
|
||||
it floats over the code-block and only shows when the code-block is hovered. */
|
||||
.markup .auto-hide-control {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
visibility: hidden; /* prevent from click events even opacity=0 */
|
||||
opacity: 0;
|
||||
transition: var(--transition-hover-fade);
|
||||
}
|
||||
|
||||
/* all rendered code-block elements are in their container,
|
||||
the manually written code-block elements on "packages" pages don't have the container */
|
||||
.markup .code-block-container:hover .auto-hide-control,
|
||||
.markup .code-block:hover .auto-hide-control {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.markup .auto-hide-control {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* can not use regular transparent button colors for hover and active states
|
||||
because we need opaque colors here as code can appear behind the button */
|
||||
.markup .auto-hide-control.ui.button:hover,
|
||||
.markup .auto-hide-control .ui.button:hover {
|
||||
background: var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
.markup .auto-hide-control.ui.button:active,
|
||||
.markup .auto-hide-control .ui.button:active {
|
||||
background: var(--color-secondary-dark-1) !important;
|
||||
}
|
||||
93
web_src/css/markup/jupyter.css
Normal file
93
web_src/css/markup/jupyter.css
Normal file
@@ -0,0 +1,93 @@
|
||||
.markup.jupyter-render {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook {
|
||||
padding: 20px;
|
||||
background: var(--color-body);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
font-family: var(--fonts-monospace);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
/* cell code */
|
||||
.markup .jupyter-notebook .cell-line {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-left {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-prompt {
|
||||
padding: 10px 0;
|
||||
color: var(--color-text-light-2);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-left.cell-prompt {
|
||||
padding-left: 10px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-right.cell-prompt {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-input,
|
||||
.markup .jupyter-notebook .cell-output {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-input pre,
|
||||
.markup .jupyter-notebook .cell-output pre {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-input pre {
|
||||
background-color: var(--color-code-bg);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-output {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-type-code {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-output-unsupported {
|
||||
color: var(--color-text-light-2);
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.markup .jupyter-notebook .cell-output-error {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* cell markdown */
|
||||
.markup .jupyter-notebook .cell-right .embedded-markdown {
|
||||
padding: 0 16px; /* match cell code right padding */
|
||||
}
|
||||
112
web_src/css/modules/animations.css
Normal file
112
web_src/css/modules/animations.css
Normal file
@@ -0,0 +1,112 @@
|
||||
@keyframes isloadingspin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
pointer-events: none !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.is-loading > * {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.btn.is-loading > *,
|
||||
.btn-octicon.is-loading > *,
|
||||
.button.is-loading > * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: var(--loading-size, min(4em, 66.6%));
|
||||
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: isloadingspin 1000ms infinite linear;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
|
||||
.is-loading.loading-icon-2px::after {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.is-loading.loading-icon-3px::after {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
|
||||
form.single-button-form.is-loading > * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
form.single-button-form.is-loading .button {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.markup pre.is-loading,
|
||||
.editor-loading.is-loading {
|
||||
height: var(--height-loading);
|
||||
}
|
||||
|
||||
.markup .is-loading > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markup .is-loading {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* TODO: not needed, use "is-loading loading-icon-2px" instead */
|
||||
code.language-math.is-loading::after {
|
||||
padding: 0;
|
||||
border-width: 2px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
|
||||
@keyframes pulse-1p5 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* pulse animation for scale(1.5) in 200ms */
|
||||
.pulse-1p5-200 {
|
||||
animation: pulse-1p5 200ms linear;
|
||||
}
|
||||
|
||||
.rotate-clockwise {
|
||||
animation: rotate-clockwise-keyframes 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate-clockwise-keyframes {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
11
web_src/css/modules/breadcrumb.css
Normal file
11
web_src/css/modules/breadcrumb.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.breadcrumb .breadcrumb-divider {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
358
web_src/css/modules/button.css
Normal file
358
web_src/css/modules/button.css
Normal file
@@ -0,0 +1,358 @@
|
||||
.ui.button {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
outline: none;
|
||||
font-family: var(--fonts-regular);
|
||||
margin: 0 0.25em 0 0;
|
||||
font-weight: var(--font-weight-normal);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: var(--border-radius);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
justify-content: center;
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.button {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.button.hover-opaque:hover {
|
||||
/* ".ui.button:hover" uses alpha channel to "highlight", it doesn't work when the background is not body: the inherited color is not right
|
||||
for such case, use this opaque color */
|
||||
background: var(--color-hover-opaque);
|
||||
}
|
||||
|
||||
.ui.active.button,
|
||||
.ui.button:active,
|
||||
.ui.active.button:active,
|
||||
.ui.active.button:hover {
|
||||
background: var(--color-active);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.buttons .disabled.button:not(.basic),
|
||||
.ui.disabled.button,
|
||||
.ui.button:disabled,
|
||||
.ui.disabled.button:hover,
|
||||
.ui.disabled.active.button {
|
||||
cursor: default;
|
||||
opacity: var(--opacity-disabled) !important;
|
||||
background-image: none;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* there is no "ui labeled icon button" support" because it is not used */
|
||||
.ui.labeled.button:not(.icon) {
|
||||
flex-direction: row;
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
min-height: unset;
|
||||
}
|
||||
.ui.labeled.button > .button {
|
||||
margin: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.ui.labeled.button > .label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 -1px !important;
|
||||
font-size: 1em;
|
||||
border-color: var(--color-light-border);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.ui.labeled.button > .label:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
.ui.labeled.button > .button:hover + .label {
|
||||
border-left-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.button > .icon:not(.button) {
|
||||
height: auto;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
|
||||
margin: 0 0.42857143em 0 -0.21428571em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
|
||||
.ui.button { /* stylelint-disable-line no-duplicate-selectors -- deliberate second block for the reference sizes */
|
||||
gap: var(--gap-block);
|
||||
min-height: 38px;
|
||||
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
|
||||
}
|
||||
.ui.compact.buttons .button,
|
||||
.ui.compact.button {
|
||||
gap: var(--gap-inline);
|
||||
padding: 6px 15px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.compact.icon.buttons .button,
|
||||
.ui.compact.icon.button {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
|
||||
.ui.ui.ui.ui.mini.button {
|
||||
gap: var(--gap-inline);
|
||||
font-size: 11px;
|
||||
min-height: 30px;
|
||||
}
|
||||
.ui.ui.ui.ui.mini.button.compact {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
|
||||
.ui.tiny.buttons .dropdown,
|
||||
.ui.tiny.buttons .dropdown .menu > .item,
|
||||
.ui.tiny.buttons .button,
|
||||
.ui.ui.ui.ui.tiny.button {
|
||||
gap: var(--gap-inline);
|
||||
font-size: 12px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.ui.ui.ui.tiny.button.compact {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
|
||||
.ui.small.buttons .dropdown,
|
||||
.ui.small.buttons .dropdown .menu > .item,
|
||||
.ui.small.buttons .button,
|
||||
.ui.ui.ui.ui.small.button {
|
||||
font-size: 13px;
|
||||
min-height: 34px;
|
||||
}
|
||||
.ui.ui.ui.ui.small.button.compact {
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.ui.icon.buttons .button,
|
||||
.ui.icon.button:not(.compact) {
|
||||
padding: 0.57em;
|
||||
}
|
||||
.ui.icon.buttons .button > .icon,
|
||||
.ui.icon.button > .icon {
|
||||
margin: 0 !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.basic.button {
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--color-text-light);
|
||||
background: var(--color-button);
|
||||
}
|
||||
|
||||
.ui.basic.button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.button:active,
|
||||
.ui.basic.active.button,
|
||||
.ui.basic.active.button:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.fluid.button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.ui.primary.button:active,
|
||||
.ui.primary.buttons .button:active {
|
||||
background: var(--color-primary-active);
|
||||
}
|
||||
|
||||
.ui.basic.primary.button {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.primary.button:hover {
|
||||
color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.ui.basic.primary.button:active {
|
||||
color: var(--color-primary-active);
|
||||
border-color: var(--color-primary-active);
|
||||
}
|
||||
|
||||
.ui.red.button,
|
||||
.ui.red.buttons .button {
|
||||
color: var(--color-white);
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.red.button:hover,
|
||||
.ui.red.buttons .button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.red.button:active,
|
||||
.ui.red.buttons .button:active {
|
||||
background: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.red.button {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.red.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.red.button:active {
|
||||
color: var(--color-red-dark-2);
|
||||
border-color: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
.ui.green.button {
|
||||
color: var(--color-white);
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.green.button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.green.button:active {
|
||||
background: var(--color-green-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.green.button {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.basic.green.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.green.button:active {
|
||||
color: var(--color-green-dark-2);
|
||||
border-color: var(--color-green-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
font-size: 0;
|
||||
vertical-align: baseline;
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
|
||||
|
||||
.btn {
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:active {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.btn,
|
||||
a.btn:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn.tiny {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
|
||||
And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
|
||||
It needs some tricks to tweak the left/right borders with active state */
|
||||
|
||||
.ui.buttons .button {
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ui.buttons .button:first-child {
|
||||
border-left: none;
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
.ui.buttons .button:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.buttons .button:hover {
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
.ui.buttons .button:hover + .button {
|
||||
border-left: 1px solid var(--color-secondary-dark-2);
|
||||
}
|
||||
|
||||
/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
|
||||
.ui.buttons .button:first-child,
|
||||
.ui.buttons .button.tw-hidden:first-child + .button {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button:last-child,
|
||||
.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button.active {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
border-right: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.buttons .button.active + .button {
|
||||
border-left: none;
|
||||
}
|
||||
107
web_src/css/modules/card.css
Normal file
107
web_src/css/modules/card.css
Normal file
@@ -0,0 +1,107 @@
|
||||
/* Below styles are a subset of the full fomantic card styles which are */
|
||||
/* needed to get all current uses of fomantic cards working. */
|
||||
/* TODO: remove all these styles and use custom styling instead */
|
||||
|
||||
.ui.card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.card:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.cards > .card,
|
||||
.ui.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
width: 290px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
box-shadow: none;
|
||||
overflow-wrap: break-word;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.ui.cards {
|
||||
display: flex;
|
||||
margin: -0.875em -0.5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui.cards > .card {
|
||||
display: flex;
|
||||
margin: 0.875em 0.5em;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content,
|
||||
.ui.card > .content {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
max-width: 100%;
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header + .description,
|
||||
.ui.card > .content > .header + .description {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header:not(.ui),
|
||||
.ui.card > .content > .header:not(.ui) {
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 1.28571429em;
|
||||
margin-top: -.21425em;
|
||||
line-height: 1.28571429;
|
||||
}
|
||||
|
||||
.ui.card > .content:first-child {
|
||||
border-top: none;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.ui.cards > .card > :last-child,
|
||||
.ui.card > :last-child {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.card > :only-child {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.ui.card > .extra,
|
||||
.ui.cards > .card > .extra a:not(.ui),
|
||||
.ui.card > .extra a:not(.ui) {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.card > .extra a:not(.ui):hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .header,
|
||||
.ui.card > .content > .header {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards > .card > .content > .description,
|
||||
.ui.card > .content > .description {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.cards a.card:hover,
|
||||
a.ui.card:hover {
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-card);
|
||||
}
|
||||
|
||||
.ui.card > .extra {
|
||||
color: var(--color-text);
|
||||
border-top-color: var(--color-secondary-light-1) !important;
|
||||
}
|
||||
55
web_src/css/modules/charescape.css
Normal file
55
web_src/css/modules/charescape.css
Normal file
@@ -0,0 +1,55 @@
|
||||
/*
|
||||
Show the escaped and hide the real char:
|
||||
<span class="broken-code-point" data-escaped="␡"><span class="char">{real-char}</span></span>
|
||||
Only show the real-char:
|
||||
<span class="broken-code-point">{real-char}</span>
|
||||
*/
|
||||
.broken-code-point:not([data-escaped]) {
|
||||
border-radius: 4px;
|
||||
padding: 0 2px;
|
||||
border: 1px var(--color-yellow) solid;
|
||||
}
|
||||
|
||||
.broken-code-point[data-escaped] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.broken-code-point[data-escaped]::before {
|
||||
visibility: visible;
|
||||
content: attr(data-escaped);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
border: 1px var(--color-yellow) solid;
|
||||
}
|
||||
|
||||
.broken-code-point[data-escaped] .char {
|
||||
/* keep the original character selectable/copyable while showing the escaped label via ::before */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Show the escaped and hide the real-char:
|
||||
<span class="unicode-escaped">
|
||||
<span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
|
||||
</span>
|
||||
Hide the escaped and show the real-char:
|
||||
<span>
|
||||
<span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
|
||||
</span>
|
||||
*/
|
||||
.unicode-escaped .escaped-code-point[data-escaped]::before {
|
||||
visibility: visible;
|
||||
content: attr(data-escaped);
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
.unicode-escaped .escaped-code-point .char {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unicode-escaped .ambiguous-code-point {
|
||||
border: 1px var(--color-yellow) solid;
|
||||
}
|
||||
206
web_src/css/modules/checkbox.css
Normal file
206
web_src/css/modules/checkbox.css
Normal file
@@ -0,0 +1,206 @@
|
||||
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 50%;
|
||||
background: var(--color-input-background);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
background: var(--color-white);
|
||||
border: 4px solid var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
display: inline-grid;
|
||||
place-content: center;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 3px;
|
||||
background: var(--color-input-background);
|
||||
overflow: hidden;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
content: "";
|
||||
background: var(--color-white);
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
clip-path: inset(var(--checkbox-size) 0 0 0);
|
||||
mask-image: var(--checkbox-mask-checked);
|
||||
mask-size: 75%;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="checkbox"]:indeterminate {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
clip-path: inset(0);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled:checked,
|
||||
input[type="checkbox"]:disabled:indeterminate {
|
||||
background: var(--color-secondary-dark-4);
|
||||
border-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
input[type="radio"]:disabled:checked {
|
||||
border-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:indeterminate::before {
|
||||
clip-path: inset(0);
|
||||
mask-image: var(--checkbox-mask-indeterminate);
|
||||
mask-size: 75%;
|
||||
}
|
||||
|
||||
.ui.checkbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
min-height: var(--checkbox-size);
|
||||
line-height: var(--checkbox-size);
|
||||
min-width: var(--checkbox-size);
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.ui.checkbox input[type="checkbox"],
|
||||
.ui.checkbox input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: var(--checkbox-size);
|
||||
height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
.ui.checkbox label {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.checkbox label,
|
||||
.ui.radio.checkbox label {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.ui.checkbox + label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.disabled.checkbox input,
|
||||
.ui.disabled.checkbox label,
|
||||
.ui.checkbox input[disabled] ~ label {
|
||||
cursor: default !important;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.radio.checkbox {
|
||||
min-height: var(--checkbox-size);
|
||||
}
|
||||
|
||||
/* "switch" styled checkbox */
|
||||
|
||||
.ui.toggle.checkbox {
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.ui.toggle.checkbox input {
|
||||
width: 3.5rem;
|
||||
height: 21px;
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
.ui.toggle.checkbox label {
|
||||
min-height: 1.5rem;
|
||||
padding-left: 4.5rem;
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
.ui.toggle.checkbox label::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 49px;
|
||||
height: 21px;
|
||||
border-radius: 500rem;
|
||||
left: 0;
|
||||
}
|
||||
.ui.toggle.checkbox label::after {
|
||||
background: var(--color-white);
|
||||
box-shadow: 1px 1px 4px 1px var(--color-shadow);
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 1.5px;
|
||||
left: 1.5px;
|
||||
border-radius: 500rem;
|
||||
transition: background 0.3s ease, left 0.3s ease;
|
||||
}
|
||||
.ui.toggle.checkbox input ~ label::after {
|
||||
left: 1.5px;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::after {
|
||||
left: 29px;
|
||||
}
|
||||
.ui.toggle.checkbox input:focus ~ label::before,
|
||||
.ui.toggle.checkbox label::before {
|
||||
background: var(--color-input-toggle-background);
|
||||
}
|
||||
.ui.toggle.checkbox label,
|
||||
.ui.toggle.checkbox input:checked ~ label,
|
||||
.ui.toggle.checkbox input:focus:checked ~ label {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
.ui.toggle.checkbox input:checked ~ label::before,
|
||||
.ui.toggle.checkbox input:focus:checked ~ label::before {
|
||||
background: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="checkbox"]:indeterminate {
|
||||
background: CanvasText;
|
||||
border-color: CanvasText;
|
||||
}
|
||||
input[type="checkbox"]:disabled:checked,
|
||||
input[type="checkbox"]:disabled:indeterminate {
|
||||
background: GrayText;
|
||||
border-color: GrayText;
|
||||
}
|
||||
input[type="radio"]:disabled:checked {
|
||||
border-color: GrayText;
|
||||
}
|
||||
.ui.toggle.checkbox label::before {
|
||||
outline: 1px solid CanvasText;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.ui.toggle.checkbox label::after {
|
||||
background: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
label.gt-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.ui.form .field > label.gt-checkbox {
|
||||
display: flex;
|
||||
}
|
||||
79
web_src/css/modules/chroma.css
Normal file
79
web_src/css/modules/chroma.css
Normal file
@@ -0,0 +1,79 @@
|
||||
/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
|
||||
|
||||
/* structural */
|
||||
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
.chroma .hl { display: block; width: 100%; }
|
||||
.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em; }
|
||||
.chroma .ln { margin-right: 0.4em; padding: 0 0.4em; }
|
||||
|
||||
/* tokens */
|
||||
.chroma .bp { color: var(--color-syntax-name-pseudo); } /* NameBuiltinPseudo */
|
||||
.chroma .c { color: var(--color-syntax-comment); } /* Comment */
|
||||
.chroma .c1 { color: var(--color-syntax-comment); } /* CommentSingle */
|
||||
.chroma .ch { color: var(--color-syntax-comment); } /* CommentHashbang */
|
||||
.chroma .cm { color: var(--color-syntax-comment); } /* CommentMultiline */
|
||||
.chroma .cp { color: var(--color-syntax-preproc); } /* CommentPreproc */
|
||||
.chroma .cpf { color: var(--color-syntax-preproc-file); } /* CommentPreprocFile */
|
||||
.chroma .cs { color: var(--color-syntax-comment-special); } /* CommentSpecial */
|
||||
.chroma .dl { color: var(--color-syntax-string); } /* LiteralStringDelimiter */
|
||||
.chroma .gd { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-deleted-bg); } /* GenericDeleted */
|
||||
.chroma .ge { color: var(--color-syntax-emph); } /* GenericEmph */
|
||||
.chroma .gh { color: var(--color-syntax-heading); } /* GenericHeading */
|
||||
.chroma .gi { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-inserted-bg); } /* GenericInserted */
|
||||
.chroma .gl { text-decoration: underline; } /* GenericUnderline */
|
||||
.chroma .go { color: var(--color-syntax-output); } /* GenericOutput */
|
||||
.chroma .gp { color: var(--color-syntax-prompt); } /* GenericPrompt */
|
||||
.chroma .gr { color: var(--color-syntax-invalid); } /* GenericError */
|
||||
.chroma .gs { color: var(--color-syntax-strong); font-weight: var(--font-weight-semibold); } /* GenericStrong */
|
||||
.chroma .gt { color: var(--color-syntax-traceback); } /* GenericTraceback */
|
||||
.chroma .gu { color: var(--color-syntax-subheading); } /* GenericSubheading */
|
||||
.chroma .il { color: var(--color-syntax-number); } /* LiteralNumberIntegerLong */
|
||||
.chroma .k { color: var(--color-syntax-keyword); } /* Keyword */
|
||||
.chroma .kc { color: var(--color-syntax-bool); } /* KeywordConstant */
|
||||
.chroma .kd { color: var(--color-syntax-keyword); } /* KeywordDeclaration */
|
||||
.chroma .kn { color: var(--color-syntax-control); } /* KeywordNamespace */
|
||||
.chroma .kp { color: var(--color-syntax-keyword); } /* KeywordPseudo */
|
||||
.chroma .kr { color: var(--color-syntax-keyword); } /* KeywordReserved */
|
||||
.chroma .kt { color: var(--color-syntax-type); } /* KeywordType */
|
||||
.chroma .m { color: var(--color-syntax-number); } /* LiteralNumber */
|
||||
.chroma .mb { color: var(--color-syntax-number); } /* LiteralNumberBin */
|
||||
.chroma .mf { color: var(--color-syntax-number); } /* LiteralNumberFloat */
|
||||
.chroma .mh { color: var(--color-syntax-number); } /* LiteralNumberHex */
|
||||
.chroma .mi { color: var(--color-syntax-number); } /* LiteralNumberInteger */
|
||||
.chroma .mo { color: var(--color-syntax-number); } /* LiteralNumberOct */
|
||||
.chroma .n { color: var(--color-syntax-text); } /* Name */
|
||||
.chroma .na { color: var(--color-syntax-attribute); } /* NameAttribute */
|
||||
.chroma .nb { color: var(--color-syntax-name); } /* NameBuiltin */
|
||||
.chroma .nc { color: var(--color-syntax-type); } /* NameClass */
|
||||
.chroma .nd { color: var(--color-syntax-decorator); } /* NameDecorator */
|
||||
.chroma .ne { color: var(--color-syntax-keyword); } /* NameException */
|
||||
.chroma .nf { color: var(--color-syntax-name); } /* NameFunction */
|
||||
.chroma .ni { color: var(--color-syntax-entity); } /* NameEntity */
|
||||
.chroma .nl { color: var(--color-syntax-keyword); } /* NameLabel */
|
||||
.chroma .nn { color: var(--color-syntax-namespace); } /* NameNamespace */
|
||||
.chroma .no { color: var(--color-syntax-variable); } /* NameConstant */
|
||||
.chroma .nt { color: var(--color-syntax-tag); } /* NameTag */
|
||||
.chroma .nv { color: var(--color-syntax-variable); } /* NameVariable */
|
||||
.chroma .nx { color: var(--color-syntax-text-alt); } /* NameOther */
|
||||
.chroma .o { color: var(--color-syntax-operator); } /* Operator */
|
||||
.chroma .ow { color: var(--color-syntax-operator); } /* OperatorWord */
|
||||
.chroma .p { color: var(--color-syntax-punctuation); } /* Punctuation */
|
||||
.chroma .s { color: var(--color-syntax-string); } /* LiteralString */
|
||||
.chroma .s1 { color: var(--color-syntax-string); } /* LiteralStringSingle */
|
||||
.chroma .s2 { color: var(--color-syntax-string); } /* LiteralStringDouble */
|
||||
.chroma .sa { color: var(--color-syntax-string-special); } /* LiteralStringAffix */
|
||||
.chroma .sb { color: var(--color-syntax-string); } /* LiteralStringBacktick */
|
||||
.chroma .sc { color: var(--color-syntax-string-special); } /* LiteralStringChar */
|
||||
.chroma .sd { color: var(--color-syntax-string); } /* LiteralStringDoc */
|
||||
.chroma .se { color: var(--color-syntax-escape); } /* LiteralStringEscape */
|
||||
.chroma .sh { color: var(--color-syntax-string); } /* LiteralStringHeredoc */
|
||||
.chroma .si { color: var(--color-syntax-string-special); } /* LiteralStringInterpol */
|
||||
.chroma .sr { color: var(--color-syntax-regexp); } /* LiteralStringRegex */
|
||||
.chroma .ss { color: var(--color-syntax-escape); } /* LiteralStringSymbol */
|
||||
.chroma .sx { color: var(--color-syntax-string); } /* LiteralStringOther */
|
||||
.chroma .vc { color: var(--color-syntax-variable); } /* NameVariableClass */
|
||||
.chroma .vg { color: var(--color-syntax-variable); } /* NameVariableGlobal */
|
||||
.chroma .vi { color: var(--color-syntax-variable); } /* NameVariableInstance */
|
||||
.chroma .w { color: var(--color-syntax-whitespace); } /* TextWhitespace */
|
||||
.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
|
||||
552
web_src/css/modules/codeeditor.css
Normal file
552
web_src/css/modules/codeeditor.css
Normal file
@@ -0,0 +1,552 @@
|
||||
.code-editor-options {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-loading {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.editor-loading.is-loading {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.code-editor-container {
|
||||
position: relative; /* for command panel */
|
||||
background-color: var(--color-code-bg); /* fully colorize the container and editor */
|
||||
}
|
||||
|
||||
.ui.bottom.attached.segment .code-editor-container,
|
||||
.ui.bottom.attached.segment .code-editor-container .cm-scroller {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius); /* avoid overflow parent's border with radius */
|
||||
}
|
||||
|
||||
/* editor layout */
|
||||
.code-editor-container .cm-editor {
|
||||
color: var(--color-text);
|
||||
font-family: var(--fonts-monospace);
|
||||
font-size: 12px;
|
||||
/* it was written as "min-height: 90vh; max-height: 90vh", so maybe the author prefer to always use about 90vh.
|
||||
here, minus 80px to keep spaces for the top toolbar */
|
||||
height: max(200px, calc(95vh - 80px));
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused {
|
||||
outline: none; /* don't show the default focus outline when the editor gets focused */
|
||||
}
|
||||
|
||||
.code-editor-container .cm-content {
|
||||
caret-color: var(--color-caret);
|
||||
padding: 0; /* avoid the small top and bottom padding */
|
||||
}
|
||||
|
||||
.code-editor-container .cm-cursor,
|
||||
.code-editor-container .cm-dropCursor {
|
||||
border-left-color: var(--color-caret);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
|
||||
.code-editor-container .cm-selectionBackground {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panels {
|
||||
background-color: var(--color-body);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary);
|
||||
font-family: var(--fonts-regular);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search::after {
|
||||
content: "";
|
||||
flex-basis: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search .cm-textfield {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search br + input.cm-textfield,
|
||||
.code-editor-container .cm-panel.cm-search br + input.cm-textfield ~ * {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search input,
|
||||
.code-editor-container .cm-panel.cm-search button,
|
||||
.code-editor-container .cm-panel.cm-search label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search .cm-button + label,
|
||||
.code-editor-container .cm-panel.cm-search label + label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor .cm-panel button[name="close"] {
|
||||
font-size: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--octicon-x);
|
||||
mask-size: cover;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-search button[name="close"] {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor .cm-panel button[name="close"]:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-activeLine,
|
||||
.code-editor-container .cm-activeLineGutter {
|
||||
background-color: var(--color-editor-line-highlight);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters {
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-secondary-dark-6);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters .cm-lineNumbers .cm-gutterElement {
|
||||
min-width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldGutter .cm-gutterElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldGutter .cm-gutterElement svg {
|
||||
color: var(--color-text-light-2);
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters:hover .cm-foldGutter .cm-gutterElement svg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldGutter .cm-gutterElement:hover svg {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutters .cm-lineNumbers .cm-activeLineGutter {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor .cm-line ::selection,
|
||||
.code-editor-container .cm-editor .cm-line::selection {
|
||||
color: currentcolor;
|
||||
background-color: var(--color-editor-selection);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldPlaceholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-light-2);
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
padding: 0 1px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-foldPlaceholder:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-searchMatch {
|
||||
background-color: var(--color-highlight-bg);
|
||||
outline: 1px solid var(--color-highlight-fg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-searchMatch-selected {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-selectionMatch {
|
||||
background-color: var(--color-highlight-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip {
|
||||
background-color: var(--color-body);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-completionIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
padding-right: 4px;
|
||||
color: var(--color-text-light);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip-autocomplete ul li[aria-selected] {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-completionMatchedText {
|
||||
text-decoration: none;
|
||||
color: var(--color-primary-dark-1);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-placeholder {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-button {
|
||||
background-image: none;
|
||||
background-color: var(--color-button);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-button:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-textfield {
|
||||
background-color: var(--color-input-background);
|
||||
color: var(--color-input-text);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-textfield:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-specialChar {
|
||||
color: var(--color-syntax-invalid);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-trailingSpace {
|
||||
background-color: var(--color-error-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-activeLine .cm-trailingSpace {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.code-editor-container.cm-mod-held .cm-url {
|
||||
text-decoration: underline dotted var(--color-syntax-link);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused .cm-matchingBracket {
|
||||
background-color: var(--color-syntax-matching-bracket-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-editor.cm-focused .cm-nonmatchingBracket {
|
||||
background-color: var(--color-syntax-nonmatching-bracket-bg);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panels-top {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panels-bottom {
|
||||
border-top-color: var(--color-secondary);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-snippetField {
|
||||
background-color: var(--color-primary-alpha-10);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-snippetFieldPosition {
|
||||
border-left-color: var(--color-text-light-3);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {
|
||||
border-bottom-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* command palette */
|
||||
|
||||
.cm-command-palette {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 301;
|
||||
width: 400px;
|
||||
max-width: min(calc(100% - 16px), 90vw);
|
||||
background-color: var(--color-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
box-shadow: 0 4px 12px var(--color-shadow);
|
||||
font-family: var(--fonts-regular);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.cm-command-palette-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 6px !important;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-input-background);
|
||||
color: var(--color-input-text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cm-command-palette-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.cm-command-palette-list {
|
||||
position: relative;
|
||||
max-height: calc(8 * 24px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cm-command-palette-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-command-palette-item[aria-selected="true"] {
|
||||
background-color: var(--color-primary-alpha-30);
|
||||
}
|
||||
|
||||
.cm-command-palette-empty {
|
||||
color: var(--color-text-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cm-command-palette-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cm-command-palette-label mark {
|
||||
background: none;
|
||||
color: var(--color-primary-dark-1);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.cm-command-palette-keys {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutter-lint {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-gutter-lint .cm-gutterElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lint-marker-error {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-red);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lint-marker-warning {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintRange-error {
|
||||
background-image: none;
|
||||
text-decoration: wavy underline var(--color-red);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintRange-warning {
|
||||
background-image: none;
|
||||
text-decoration: wavy underline var(--color-yellow);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintPoint-error::after {
|
||||
border-bottom-color: var(--color-red);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-lintPoint-warning::after {
|
||||
border-bottom-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-tooltip-lint {
|
||||
background-color: var(--color-body);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-panel-lint button[name="close"] {
|
||||
top: 4px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-panel-lint ul {
|
||||
max-height: 120px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-panel.cm-panel-lint [aria-selected] {
|
||||
background-color: var(--color-primary-alpha-30) !important;
|
||||
}
|
||||
|
||||
.code-editor-container .cm-diagnostic.cm-diagnostic-error {
|
||||
border-left-color: var(--color-red);
|
||||
}
|
||||
|
||||
.code-editor-container .cm-diagnostic.cm-diagnostic-warning {
|
||||
border-left-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
/* syntax highlighting classes from @lezer/highlight classHighlighter */
|
||||
.code-editor-container .tok-keyword,
|
||||
.code-editor-container .tok-atom { color: var(--color-syntax-keyword); }
|
||||
.code-editor-container .tok-bool { color: var(--color-syntax-bool); }
|
||||
.code-editor-container .tok-variableName { color: var(--color-syntax-variable); }
|
||||
.code-editor-container .tok-variableName2 { color: var(--color-syntax-keyword); }
|
||||
.code-editor-container .tok-propertyName { color: var(--color-syntax-property); }
|
||||
.code-editor-container .tok-typeName,
|
||||
.code-editor-container .tok-className { color: var(--color-syntax-type); }
|
||||
.code-editor-container .tok-namespace { color: var(--color-syntax-namespace); }
|
||||
.code-editor-container .tok-macroName { color: var(--color-syntax-name); }
|
||||
.code-editor-container .tok-labelName { color: var(--color-syntax-name); }
|
||||
.code-editor-container .tok-number { color: var(--color-syntax-number); }
|
||||
.code-editor-container .tok-string { color: var(--color-syntax-string); }
|
||||
.code-editor-container .tok-string2 { color: var(--color-syntax-regexp); }
|
||||
.code-editor-container .tok-operator { color: var(--color-syntax-operator); }
|
||||
.code-editor-container .tok-punctuation { color: var(--color-syntax-punctuation); }
|
||||
.code-editor-container .tok-comment { color: var(--color-syntax-comment); }
|
||||
.code-editor-container .tok-meta { color: var(--color-syntax-preproc); }
|
||||
.code-editor-container .tok-invalid { color: var(--color-syntax-invalid); }
|
||||
.code-editor-container .tok-link { color: var(--color-syntax-link); }
|
||||
.code-editor-container .tok-heading { color: var(--color-syntax-heading); }
|
||||
.code-editor-container .tok-emphasis { color: var(--color-syntax-emph); font-style: italic; }
|
||||
.code-editor-container .tok-strong { font-weight: var(--font-weight-bold); }
|
||||
.code-editor-container .tok-inserted { color: var(--color-syntax-string); }
|
||||
.code-editor-container .tok-deleted { color: var(--color-syntax-invalid); }
|
||||
|
||||
/* language-specific overrides */
|
||||
.code-editor-container[data-language="json"] .tok-propertyName,
|
||||
.code-editor-container[data-language="json5"] .tok-propertyName,
|
||||
.code-editor-container[data-language="yaml"] .tok-propertyName { color: var(--color-syntax-tag); }
|
||||
.code-editor-container[data-language="css"] .tok-propertyName { color: var(--color-syntax-name); }
|
||||
.code-editor-container[data-language="html"] .tok-propertyName,
|
||||
.code-editor-container[data-language="xml"] .tok-propertyName { color: var(--color-syntax-attribute); }
|
||||
|
||||
/* context menu — uses tippy "menu" theme for base styling */
|
||||
.cm-context-menu {
|
||||
min-width: 200px;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cm-context-menu .item {
|
||||
height: 24px !important;
|
||||
padding: 0 12px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-context-menu .item.disabled {
|
||||
color: var(--color-text-light-3);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cm-context-menu-keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-left: auto;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.cm-context-menu-separator {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
margin: 4px 0;
|
||||
}
|
||||
47
web_src/css/modules/comment.css
Normal file
47
web_src/css/modules/comment.css
Normal file
@@ -0,0 +1,47 @@
|
||||
/* These are the remnants of the fomantic comment module */
|
||||
/* TODO: remove all of these rules */
|
||||
|
||||
.ui.comments {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.ui.comments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: none;
|
||||
margin: 3px 0 0;
|
||||
padding: 0.5em 0 0;
|
||||
border: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.edit-content-zone .comment {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ui.comments .comment:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: 0.25em 0 0.5em;
|
||||
font-size: 1em;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.3;
|
||||
}
|
||||
39
web_src/css/modules/container.css
Normal file
39
web_src/css/modules/container.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/* 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 {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.container.medium-width {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.ui.message.site-banner-container {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#navbar + .ui.message.site-banner-container,
|
||||
.ui.message.site-banner-container + .ui.message.site-banner-container {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.message.site-banner-container > .site-banner-content {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.ui.message.site-banner-container > button.site-banner-close {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
}
|
||||
27
web_src/css/modules/dimmer.css
Normal file
27
web_src/css/modules/dimmer.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/* These are the remnants of the fomantic dimmer module */
|
||||
|
||||
.ui.dimmer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
inset: 0;
|
||||
background: var(--color-overlay-backdrop);
|
||||
opacity: 0;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
animation-name: fadein;
|
||||
animation-duration: .2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui.active.dimmer {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.dimmer > .ui.modal {
|
||||
position: static;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
46
web_src/css/modules/divider.css
Normal file
46
web_src/css/modules/divider.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.divider {
|
||||
margin: 10px 0;
|
||||
height: 0;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h4.divider {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.divider:not(.divider-text) {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.divider.divider-text::before,
|
||||
.divider.divider-text::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.divider.divider-text::before {
|
||||
margin-right: .75em;
|
||||
}
|
||||
|
||||
.divider.divider-text::after {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.inline-divider {
|
||||
display: inline-block;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
margin: 0 var(--gap-inline);
|
||||
}
|
||||
939
web_src/css/modules/dropdown.css
Normal file
939
web_src/css/modules/dropdown.css
Normal file
@@ -0,0 +1,939 @@
|
||||
/* These are the remnants of the fomantic dropdown module */
|
||||
|
||||
.ui.dropdown {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu {
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
display: none;
|
||||
outline: none;
|
||||
top: 100%;
|
||||
min-width: max-content;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--color-menu);
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
z-index: 11;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.dropdown > input:not(.search):first-child,
|
||||
.ui.dropdown > select {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.dropdown > .dropdown.icon {
|
||||
line-height: 1;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
backface-visibility: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.labeled) > .dropdown.icon {
|
||||
position: relative;
|
||||
width: auto;
|
||||
font-size: 0.85714286em;
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.ui.dropdown > .text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border: none;
|
||||
height: auto;
|
||||
min-height: 2.57142857rem;
|
||||
text-align: left;
|
||||
border-top: none;
|
||||
line-height: var(--line-height-default);
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
padding: 0.78571429rem 1.14285714rem !important;
|
||||
text-transform: none;
|
||||
font-weight: var(--font-weight-normal);
|
||||
box-shadow: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .hidden { /* for hidden items and dividers */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header {
|
||||
margin: 1rem 0 0.75rem;
|
||||
padding: 0 1.14285714rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header:not(.ui) {
|
||||
color: var(--color-text);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .divider {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
height: 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.ui.dropdown.dropdown .menu > .input {
|
||||
width: auto;
|
||||
display: flex;
|
||||
margin: 1.14285714rem 0.78571429rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .header + .input {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .input:not(.transparent) input {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .input:not(.transparent) .button,
|
||||
.ui.dropdown .menu > .input:not(.transparent) i.icon,
|
||||
.ui.dropdown .menu > .input:not(.transparent) .label {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.ui.dropdown > .text > .description,
|
||||
.ui.dropdown .menu > .item > .description {
|
||||
float: right;
|
||||
margin: 0 0 0 1em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .message {
|
||||
padding: 0.78571429rem 1.14285714rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .message:not(.ui) {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
/* Remove Menu Item Divider */
|
||||
.ui.menu .ui.dropdown .menu > .item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Prevent Menu Item Border */
|
||||
.ui.menu .ui.dropdown .menu .active.item {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* Automatically float dropdown menu right on last menu item */
|
||||
.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui.button.dropdown .menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
select.ui.dropdown {
|
||||
height: 38px;
|
||||
padding: 0.5em;
|
||||
border: 1px solid var(--color-input-border);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown {
|
||||
cursor: pointer;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1em;
|
||||
white-space: normal;
|
||||
outline: 0;
|
||||
transform: rotateZ(0deg);
|
||||
min-width: 14em;
|
||||
min-height: 2.71428571em;
|
||||
background: var(--color-input-background);
|
||||
display: inline-block;
|
||||
padding: 0.78571429em 3.2em 0.78571429em 1em;
|
||||
color: var(--color-input-text);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown.visible,
|
||||
.ui.selection.dropdown.active {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown > .dropdown.icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1.21428571em;
|
||||
top: 0.78571429em;
|
||||
right: 1em;
|
||||
z-index: 3;
|
||||
margin: -0.78571429em;
|
||||
padding: 0.91666667em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
border-top-width: 0 !important;
|
||||
outline: none;
|
||||
margin: 0 -1px;
|
||||
min-width: calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu::after,
|
||||
.ui.selection.dropdown .menu::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu > .message {
|
||||
padding: 0.78571429rem 1.14285714rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 8.01428571rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 10.68571429rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 16.02857143rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.selection.dropdown .menu {
|
||||
max-height: 21.37142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu > .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
padding: 0.78571429rem 1.14285714rem !important;
|
||||
white-space: normal;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu .item:first-of-type {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown .menu > .hidden.addition.item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown .menu {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:focus .menu {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.visible.dropdown > .text:not(.default) {
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.selection.active.dropdown:hover .menu {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.active.selection.dropdown > .dropdown.icon,
|
||||
.ui.visible.selection.dropdown > .dropdown.icon {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.ui.active.empty.selection.dropdown {
|
||||
border-radius: 0.28571429rem !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.active.empty.selection.dropdown .menu {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.search.dropdown > input.search {
|
||||
background: none transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
cursor: text;
|
||||
top: 0;
|
||||
left: 1px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: inherit;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui.search.dropdown > .text {
|
||||
cursor: text;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.ui.search.selection.dropdown > input.search {
|
||||
line-height: 1.21428571em;
|
||||
padding: 0.67857143em 3.2em 0.67857143em 1em;
|
||||
}
|
||||
|
||||
.ui.search.selection.dropdown > span.sizer {
|
||||
line-height: 1.21428571em;
|
||||
padding: 0.67857143em 3.2em 0.67857143em 1em;
|
||||
display: none;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.ui.search.dropdown.active > input.search,
|
||||
.ui.search.dropdown.visible > input.search {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.ui.search.dropdown.active > .text,
|
||||
.ui.search.dropdown.visible > .text {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.active.search.dropdown input.search:focus + .text i.icon {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.active.search.dropdown input.search:focus + .text {
|
||||
color: var(--color-placeholder-text) !important;
|
||||
}
|
||||
|
||||
.ui.search.dropdown .menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 8.01428571rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 10.68571429rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 16.02857143rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.search.dropdown .menu {
|
||||
max-height: 21.37142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dropdown > .remove.icon {
|
||||
cursor: pointer;
|
||||
font-size: 0.85714286em;
|
||||
margin: -0.78571429em;
|
||||
padding: 0.91666667em;
|
||||
right: 3em;
|
||||
top: 0.78571429em;
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.ui.clearable.dropdown .text,
|
||||
.ui.clearable.dropdown a:last-of-type {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.ui.dropdown select.noselection ~ .remove.icon,
|
||||
.ui.dropdown input[value=""] ~ .remove.icon,
|
||||
.ui.dropdown input:not([value]) ~ .remove.icon,
|
||||
.ui.dropdown.loading > .remove.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.ui.multiple.dropdown {
|
||||
padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown .menu {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label {
|
||||
white-space: normal;
|
||||
font-size: 1em;
|
||||
padding: 0.35714286em 0.78571429em;
|
||||
margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
|
||||
box-shadow: 0 0 0 1px var(--color-secondary) inset;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label img {
|
||||
width: auto;
|
||||
max-height: 20px;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.ui.multiple.dropdown > .text {
|
||||
position: static;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
margin: 0.45238095em 0 0.45238095em 0.64285714em;
|
||||
line-height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .text.default {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label ~ input.search {
|
||||
margin-left: 0.14285714em !important;
|
||||
}
|
||||
|
||||
.ui.multiple.dropdown > .label ~ .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown,
|
||||
.ui.multiple.search.dropdown > input.search {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > .text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: inherit;
|
||||
margin: 0.45238095em 0 0.45238095em 0.64285714em;
|
||||
line-height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > .label ~ .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.multiple.search.dropdown > input.search {
|
||||
position: static;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
margin: 0.45238095em 0 0.45238095em 0.64285714em;
|
||||
width: 2.2em;
|
||||
line-height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .active.item {
|
||||
background: var(--color-active);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--color-text);
|
||||
box-shadow: none;
|
||||
z-index: 12;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
z-index: 13;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item:active {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.button) > .default.text {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.ui.dropdown:not(.button) > input:focus ~ .default.text {
|
||||
color: var(--color-placeholder-text);
|
||||
}
|
||||
|
||||
.ui.loading.dropdown > i.icon {
|
||||
height: 1em !important;
|
||||
}
|
||||
|
||||
.ui.loading.selection.dropdown > i.icon {
|
||||
padding: 1.5em 1.28571429em !important;
|
||||
}
|
||||
|
||||
.ui.loading.dropdown > i.icon::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -0.64285714em 0 0 -0.64285714em;
|
||||
width: 1.28571429em;
|
||||
height: 1.28571429em;
|
||||
border-radius: 500rem;
|
||||
border: 0.2em solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.loading.dropdown > i.icon::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
margin: -0.64285714em 0 0 -0.64285714em;
|
||||
width: 1.28571429em;
|
||||
height: 1.28571429em;
|
||||
animation: loader 0.6s infinite linear;
|
||||
border: 0.2em solid var(--color-text-light-2);
|
||||
border-radius: 500rem;
|
||||
}
|
||||
|
||||
.ui.dropdown .loading.menu {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.ui.dropdown > .loading.menu {
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
.ui.dropdown > .menu .loading.menu {
|
||||
left: 100% !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .selected.item {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.dropdown > .filtered.text {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.dropdown .filtered.item {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.disabled.dropdown,
|
||||
.ui.dropdown .menu > .disabled.item {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.dropdown > .left.menu {
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.upward.dropdown > .menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.upward.selection.dropdown .menu {
|
||||
border-top-width: 1px !important;
|
||||
border-bottom-width: 0 !important;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.upward.selection.dropdown:hover {
|
||||
box-shadow: 0 0 2px 0 var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.active.upward.selection.dropdown {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.upward.selection.dropdown.visible {
|
||||
box-shadow: 0 0 3px 0 var(--color-shadow);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.upward.active.selection.dropdown:hover {
|
||||
box-shadow: 0 0 3px 0 var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.upward.active.selection.dropdown:hover .menu {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
min-width: 100% !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.ui.dropdown .scrolling.menu {
|
||||
position: static;
|
||||
overflow-y: auto;
|
||||
border: none;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
min-width: 100% !important;
|
||||
width: auto !important;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu .item.item.item,
|
||||
.ui.dropdown .scrolling.menu > .item.item.item {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.scrolling.dropdown .menu .item:first-child,
|
||||
.ui.dropdown .scrolling.menu .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.dropdown > .animating.menu .scrolling.menu,
|
||||
.ui.dropdown > .visible.menu .scrolling.menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 10.28571429rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 15.42857143rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 20.57142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.scrolling.dropdown .menu,
|
||||
.ui.dropdown .scrolling.menu {
|
||||
max-height: 20.57142857rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.fluid.dropdown {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.fluid.dropdown > .dropdown.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ui.floating.dropdown .menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
box-shadow: 0 6px 18px var(--color-shadow) !important;
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.floating.dropdown > .menu {
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui:not(.upward).floating.dropdown > .menu {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.ui.upward.floating.dropdown > .menu {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.ui.pointing.dropdown > .menu {
|
||||
top: 100%;
|
||||
margin-top: 0.78571429rem;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.pointing.dropdown > .menu:not(.hidden)::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
visibility: visible;
|
||||
transform: rotate(45deg);
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
box-shadow: -1px -1px 0 0 var(--color-secondary);
|
||||
background: var(--color-menu);
|
||||
z-index: 2;
|
||||
top: -0.25em;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -0.25em;
|
||||
}
|
||||
|
||||
.ui.top.right.pointing.dropdown > .menu {
|
||||
inset: 100% 0 auto auto;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.ui.top.pointing.dropdown > .left.menu::after,
|
||||
.ui.top.right.pointing.dropdown > .menu::after {
|
||||
top: -0.25em;
|
||||
left: auto !important;
|
||||
right: 1em !important;
|
||||
margin: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.ui.dropdown,
|
||||
.ui.dropdown .menu > .item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.mini.dropdown,
|
||||
.ui.mini.dropdown .menu > .item {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
|
||||
.ui.tiny.dropdown,
|
||||
.ui.tiny.dropdown .menu > .item {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
|
||||
.ui.small.dropdown,
|
||||
.ui.small.dropdown .menu > .item {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
/* This rule must come AFTER .ui.selection.dropdown because both have
|
||||
specificity (0,3,0) and source order determines the winner.
|
||||
In the original codebase this was in base.css which loaded after fomantic. */
|
||||
.ui.dropdown:not(.button) {
|
||||
line-height: var(--line-height-default);
|
||||
}
|
||||
|
||||
/* Icons / Flags / Labels / Image */
|
||||
.ui.dropdown > .text > img,
|
||||
.ui.dropdown .menu > .item > img {
|
||||
margin: -0.25rem 0.78571429rem -0.25rem 0;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item > svg {
|
||||
margin-right: 0.78rem;
|
||||
}
|
||||
|
||||
/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
|
||||
.ui.dropdown > .text > .img {
|
||||
margin-left: 0;
|
||||
float: none;
|
||||
margin-right: 0.78571429rem;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item:first-of-type {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item:last-of-type {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
|
||||
.ui.ui.dropdown > .icon.icon {
|
||||
position: initial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .icon.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.ui.button.dropdown > .icon.icon,
|
||||
.ui.ui.selection.dropdown > .icon.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .dropdown.icon {
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .remove.icon {
|
||||
right: 2em;
|
||||
}
|
||||
|
||||
.ui.dropdown.mini.button,
|
||||
.ui.dropdown.tiny.button {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.ui.dropdown.button {
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
.ui.multiple.selection.dropdown {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown.selection {
|
||||
min-width: 14em;
|
||||
}
|
||||
|
||||
.ui.dropdown .ui.label .svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.dropdown > .ui.button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* popover box shadow for menu dropdown */
|
||||
.ui.menu .dropdown.item .menu {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu.context-user-switch .scrolling.menu {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
max-width: 80vw;
|
||||
}
|
||||
|
||||
.scrolling.menu .item.selected {
|
||||
font-weight: var(--font-weight-semibold) !important;
|
||||
}
|
||||
|
||||
/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
|
||||
the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */
|
||||
.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu.flex-items-menu > .item img,
|
||||
.ui.dropdown .menu.flex-items-menu > .item svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu.items-width-limit .item {
|
||||
max-width: min(500px, calc(100vw - 2em));
|
||||
}
|
||||
|
||||
.ui.dropdown.ellipsis-text-items {
|
||||
/* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.dropdown.ellipsis-text-items > .text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 2.71;
|
||||
}
|
||||
|
||||
.ui.dropdown.ellipsis-text-items .menu > .item {
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
33
web_src/css/modules/flexcontainer.css
Normal file
33
web_src/css/modules/flexcontainer.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* container for full-page content with sidebar on left */
|
||||
|
||||
.flex-container {
|
||||
display: flex !important;
|
||||
gap: var(--page-spacing);
|
||||
margin-top: var(--page-spacing);
|
||||
}
|
||||
|
||||
/* small options menu on the left, used in settings/admin pages */
|
||||
.flex-container-nav {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
/* wide sidebar on the right, used in frontpage */
|
||||
.flex-container-sidebar {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.flex-container-main {
|
||||
flex: 1;
|
||||
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-container-nav,
|
||||
.flex-container-sidebar {
|
||||
order: -1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
413
web_src/css/modules/form.css
Normal file
413
web_src/css/modules/form.css
Normal file
@@ -0,0 +1,413 @@
|
||||
.ui.form {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ui.form > p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.ui.form .field {
|
||||
clear: both;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.ui.form .fields .fields,
|
||||
.ui.form .field:last-child,
|
||||
.ui.form .fields:last-child .field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.form .fields .field {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.form .field > label {
|
||||
display: block;
|
||||
margin: 0 0 0.28571429rem;
|
||||
color: var(--color-text);
|
||||
font-size: 0.92857143em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.form textarea,
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]) {
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.form ::-webkit-datetime-edit,
|
||||
.ui.form ::-webkit-inner-spin-button {
|
||||
height: 1.21428571em;
|
||||
}
|
||||
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.search > .prompt {
|
||||
font-family: var(--fonts-regular);
|
||||
margin: 0;
|
||||
outline: none;
|
||||
line-height: 1.21428571;
|
||||
padding: 0.67857143em 1em;
|
||||
font-size: 1em;
|
||||
color: var(--color-text);
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.form textarea {
|
||||
margin: 0;
|
||||
padding: 0.78571429em 1em;
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
border-radius: 0.28571429rem;
|
||||
font-size: 1em;
|
||||
font-family: var(--fonts-regular);
|
||||
line-height: 1.2857;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ui.form textarea:not([rows]) {
|
||||
height: var(--min-height-textarea);
|
||||
min-height: var(--min-height-textarea);
|
||||
max-height: 24em;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
textarea,
|
||||
.ui.input > input,
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.form select,
|
||||
.ui.form textarea,
|
||||
.ui.selection.dropdown,
|
||||
.ui.search > .prompt {
|
||||
background: var(--color-input-background);
|
||||
border: 1px solid var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"], [type="radio"]):focus,
|
||||
textarea:focus,
|
||||
.ui.input input:focus,
|
||||
.ui.form input:not([type="checkbox"], [type="radio"]):focus,
|
||||
.ui.form select:focus,
|
||||
.ui.form textarea:focus,
|
||||
.ui.search > .prompt:focus {
|
||||
background: var(--color-input-background);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.form input:not([type="checkbox"], [type="radio"])[readonly],
|
||||
.ui.form textarea[readonly],
|
||||
.ui.form select[readonly],
|
||||
.ui.form .ui.selection.dropdown[readonly] {
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.form textarea,
|
||||
.ui.form input[type="checkbox"] {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
.ui.form .field > .selection.dropdown {
|
||||
min-width: 14em; /* matches the default min width */
|
||||
width: 100%;
|
||||
}
|
||||
.ui.form .field > .selection.dropdown > .dropdown.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ui.form .inline.field > .selection.dropdown {
|
||||
width: auto;
|
||||
}
|
||||
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.ui.form .field .ui.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.form .inline.field .ui.input {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.form .field .ui.input input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui.form .error.message,
|
||||
.ui.form .error.message:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.form .message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.form .ui.action.input:not([class*="left action"]) input:focus {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui.form.error .error.message:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.form .field.error .error.message:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
.ui.form .field.error textarea,
|
||||
.ui.form .field.error select,
|
||||
.ui.form .field.error input {
|
||||
background-color: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
.ui.form .field.error textarea:focus,
|
||||
.ui.form .field.error select:focus,
|
||||
.ui.form .field.error input:focus {
|
||||
background-color: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.form .field.error select {
|
||||
appearance: menulist-button;
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown {
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
.ui.form .field.error .ui.dropdown:hover {
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown .menu .item:hover {
|
||||
background-color: var(--color-error-bg-hover);
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown .menu .active.item {
|
||||
background-color: var(--color-error-bg-active) !important;
|
||||
}
|
||||
|
||||
.ui.form .disabled.fields .field,
|
||||
.ui.form .disabled.field,
|
||||
.ui.form .field :disabled {
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
.ui.form .field.disabled > label {
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
.ui.form .field.disabled :disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.form .required.field > label::after,
|
||||
.ui.form .required.field > .checkbox::after,
|
||||
.ui.form label.required::after {
|
||||
margin: -0.2em 0 0 0.2em;
|
||||
content: "*";
|
||||
color: var(--color-red);
|
||||
}
|
||||
.ui.form .required.field > label::after,
|
||||
.ui.form label.required::after {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.form .required.field > .checkbox::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.ui.form .grouped.fields {
|
||||
display: block;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.ui.form .grouped.fields:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.form .grouped.fields .field {
|
||||
display: block;
|
||||
margin: 0.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.form .fields {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 -0.5em 1em;
|
||||
}
|
||||
.ui.form .fields > .field {
|
||||
flex: 0 1 auto;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.form .fields > .field:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.form .fields {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.form .fields > .fields,
|
||||
.ui.form .fields > .field {
|
||||
width: 100%;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.form .inline.fields {
|
||||
margin: 0 0 1em;
|
||||
align-items: center;
|
||||
}
|
||||
.ui.form .inline.fields .field {
|
||||
margin: 0;
|
||||
padding: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields > label,
|
||||
.ui.form .inline.field > label,
|
||||
.ui.form .inline.field > p {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: baseline;
|
||||
font-size: 0.92857143em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields > label {
|
||||
margin: 0.035714em 1em 0 0;
|
||||
}
|
||||
|
||||
.ui.form .inline.field > input,
|
||||
.ui.form .inline.field > select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.form .inline.fields .field > :first-child,
|
||||
.ui.form .inline.field > :first-child {
|
||||
margin: 0 0.85714286em 0 0;
|
||||
}
|
||||
.ui.form .inline.fields .field > :only-child,
|
||||
.ui.form .inline.field > :only-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.form,
|
||||
.ui.form .field .dropdown,
|
||||
.ui.form .field .dropdown .menu > .item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* previously from web_src/css/form.css */
|
||||
|
||||
.ui .form .autofill-dummy {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -10000;
|
||||
}
|
||||
|
||||
.ui.form .field.error .ui.dropdown,
|
||||
.ui.form .field.error .ui.dropdown:hover {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.form .field.error .dropdown .menu {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important;
|
||||
border-color: var(--color-primary-light-4) !important;
|
||||
}
|
||||
|
||||
.form .help {
|
||||
color: var(--color-secondary-dark-5);
|
||||
margin-top: 0.25em;
|
||||
padding-bottom: 0.6em;
|
||||
display: inline-block;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.form .help code {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.form .help pre.command-block {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
margin: 0.25em 0 0.25em 1em;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field > label {
|
||||
text-align: right;
|
||||
width: 250px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field > .help {
|
||||
display: block;
|
||||
margin-left: calc(250px + 15px);
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.form.left-right-form .inline.field .ui.dropdown,
|
||||
.ui.form.left-right-form .inline.field textarea {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field .ui.dropdown input.search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.form.left-right-form .inline.field .inline-right {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.form.left-right-form .inline.field > label {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.ui.form.left-right-form .inline.field > .help {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.form.left-right-form .inline.field input:not([type="checkbox"], [type="radio"]),
|
||||
.ui.form.left-right-form .inline.field .ui.dropdown,
|
||||
.ui.form.left-right-form .inline.field textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
226
web_src/css/modules/grid.css
Normal file
226
web_src/css/modules/grid.css
Normal file
@@ -0,0 +1,226 @@
|
||||
/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.ui[class*="very relaxed"].grid {
|
||||
margin-left: -2.5rem;
|
||||
margin-right: -2.5rem;
|
||||
}
|
||||
|
||||
.ui.grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .column:not(.row),
|
||||
.ui.grid > .row > .column {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 6.25%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.grid > * {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: inherit;
|
||||
align-items: stretch;
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.grid > .column:not(.row) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.ui.grid > .row > .column {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid > .row > .column > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ui.grid > .column:last-child > .horizontal.segment {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 3%;
|
||||
padding-right: 3%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.page.grid {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 23%;
|
||||
padding-right: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.grid > .column:only-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui[class*="two column"].grid > .column:not(.row) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ui.grid > [class*="two column"].row > .column {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.ui.grid > .column.row > [class*="one wide"].column,
|
||||
.ui.grid > [class*="one wide"].column,
|
||||
.ui.column.grid > [class*="one wide"].column {
|
||||
width: 6.25% !important;
|
||||
}
|
||||
.ui.grid > .column.row > [class*="two wide"].column,
|
||||
.ui.grid > [class*="two wide"].column,
|
||||
.ui.column.grid > [class*="two wide"].column {
|
||||
width: 12.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="three wide"].column {
|
||||
width: 18.75% !important;
|
||||
}
|
||||
.ui.grid > [class*="four wide"].column {
|
||||
width: 25% !important;
|
||||
}
|
||||
.ui.grid > [class*="five wide"].column {
|
||||
width: 31.25% !important;
|
||||
}
|
||||
.ui.grid > [class*="six wide"].column {
|
||||
width: 37.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="seven wide"].column {
|
||||
width: 43.75% !important;
|
||||
}
|
||||
.ui.grid > [class*="eight wide"].column {
|
||||
width: 50% !important;
|
||||
}
|
||||
.ui.grid > [class*="ten wide"].column {
|
||||
width: 62.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="eleven wide"].column {
|
||||
width: 68.75% !important;
|
||||
}
|
||||
.ui.grid > [class*="twelve wide"].column {
|
||||
width: 75% !important;
|
||||
}
|
||||
.ui.grid > [class*="thirteen wide"].column {
|
||||
width: 81.25% !important;
|
||||
}
|
||||
.ui.grid > [class*="fourteen wide"].column {
|
||||
width: 87.5% !important;
|
||||
}
|
||||
.ui.grid > [class*="sixteen wide"].column {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui.centered.grid {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row) {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.grid > .centered.column {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui[class*="very relaxed"].grid > .column:not(.row) {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.ui.grid [class*="very relaxed"].row + .ui.divider {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui[class*="mobile reversed"].grid {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.ui.stackable[class*="mobile reversed"] {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.grid {
|
||||
width: auto;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.grid > .wide.column,
|
||||
.ui.stackable.grid > .column:not(.row) {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
box-shadow: none !important;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.ui.container > .ui.stackable.grid > .column {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.ui.grid .ui.stackable.grid {
|
||||
margin-left: -1rem !important;
|
||||
margin-right: -1rem !important;
|
||||
}
|
||||
}
|
||||
143
web_src/css/modules/header.css
Normal file
143
web_src/css/modules/header.css
Normal file
@@ -0,0 +1,143 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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 .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 + 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px); /* the same as "ui attached segment" */
|
||||
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.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.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;
|
||||
}
|
||||
167
web_src/css/modules/input.css
Normal file
167
web_src/css/modules/input.css
Normal file
@@ -0,0 +1,167 @@
|
||||
/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.input {
|
||||
position: relative;
|
||||
font-weight: var(--font-weight-normal);
|
||||
display: inline-flex;
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
.ui.input > input {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
flex: 1 0 auto;
|
||||
outline: none;
|
||||
font-family: var(--fonts-regular);
|
||||
padding: 0.67857143em 1em;
|
||||
border: 1px solid var(--color-input-border);
|
||||
color: var(--color-input-text);
|
||||
border-radius: 0.28571429rem;
|
||||
line-height: var(--line-height-default);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ui.input:not(.disabled) input[disabled] {
|
||||
opacity: var(--opacity-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui.input > input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.input.error > input {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 2.67142857em;
|
||||
opacity: 0.5;
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
pointer-events: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon.is-loading {
|
||||
position: absolute !important;
|
||||
height: 28px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon.is-loading > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.ui.ui.ui.icon.input > input {
|
||||
padding-right: 2.67142857em;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input > i.icon {
|
||||
right: auto;
|
||||
left: 1px;
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.ui.ui.ui[class*="left icon"].input > input {
|
||||
padding-left: 2.67142857em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.ui.icon.input > input:focus ~ .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.action.input.error > .ui.button {
|
||||
border-top: 1px solid var(--color-error-border);
|
||||
border-bottom: 1px solid var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.action.input > .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
padding-top: 0.78571429em;
|
||||
padding-bottom: 0.78571429em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.action.input:not([class*="left action"]) > input,
|
||||
.ui.action.input:not([class*="left action"]) > .ui.input > input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ui.action.input > .dropdown:first-child,
|
||||
.ui.action.input > .button:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.action.input > .dropdown:not(:first-child),
|
||||
.ui.action.input > .button:not(:first-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.action.input > .dropdown:last-child,
|
||||
.ui.action.input > .button:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
|
||||
.ui.fluid.input {
|
||||
display: flex;
|
||||
}
|
||||
.ui.fluid.input > input {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.ui.tiny.input {
|
||||
font-size: 0.85714286em;
|
||||
}
|
||||
.ui.small.input {
|
||||
font-size: 0.92857143em;
|
||||
}
|
||||
|
||||
.ui.action.input .ui.ui.button {
|
||||
border-color: var(--color-input-border);
|
||||
padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* currently used for search bar dropdowns in repo search and explore code */
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
|
||||
min-width: 10em;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
|
||||
border-right: none;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
|
||||
border-color: var(--color-input-border);
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input,
|
||||
.ui.action.input:not([class*="left action"]) > input:hover {
|
||||
border-right: none;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .button,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
|
||||
.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
|
||||
border-left-color: var(--color-primary);
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > input:focus {
|
||||
border-right-color: var(--color-primary);
|
||||
}
|
||||
294
web_src/css/modules/label.css
Normal file
294
web_src/css/modules/label.css
Normal file
@@ -0,0 +1,294 @@
|
||||
/* based on Fomantic UI label module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
gap: var(--gap-inline);
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-size-label);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: 0 solid transparent;
|
||||
border-radius: var(--border-radius);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a.ui.label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.label > .icon {
|
||||
width: auto;
|
||||
margin: 0 0.75em 0 0;
|
||||
}
|
||||
|
||||
.ui.label > .detail {
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-left: 0.5em; /* our .ui.label already provides flex gap, so the margin here shouldn't be too large */
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ui.label > .delete.icon {
|
||||
cursor: pointer;
|
||||
font-size: 0.92857143em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ui.label > .delete.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.label:not(.icon) > .delete.icon {
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
|
||||
a.ui.label:hover {
|
||||
background: var(--color-label-hover-bg);
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
.ui.basic.label {
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
a.ui.basic.label:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-secondary-dark-2);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.ui.ui.primary.label {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary-dark-2);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
a.ui.ui.ui.primary.label:hover {
|
||||
background: var(--color-primary-dark-3);
|
||||
border-color: var(--color-primary-dark-3);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
.ui.ui.ui.basic.primary.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
a.ui.ui.ui.basic.primary.label:hover {
|
||||
background: var(--color-hover);
|
||||
border-color: var(--color-primary-dark-1);
|
||||
color: var(--color-primary-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.red.label {
|
||||
background: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.red.label:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.red.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-red);
|
||||
}
|
||||
a.ui.ui.ui.basic.red.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-red-dark-1);
|
||||
color: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.orange.label {
|
||||
background: var(--color-orange);
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.orange.label:hover {
|
||||
background: var(--color-orange-dark-1);
|
||||
border-color: var(--color-orange-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.orange.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-orange);
|
||||
}
|
||||
a.ui.ui.ui.basic.orange.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-orange-dark-1);
|
||||
color: var(--color-orange-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.yellow.label {
|
||||
background: var(--color-yellow);
|
||||
border-color: var(--color-yellow);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.yellow.label:hover {
|
||||
background: var(--color-yellow-dark-1);
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.yellow.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-yellow);
|
||||
color: var(--color-yellow);
|
||||
}
|
||||
a.ui.ui.ui.basic.yellow.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
color: var(--color-yellow-dark-1);
|
||||
}
|
||||
.ui.ui.ui.green.label {
|
||||
background: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.green.label:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.ui.ui.ui.basic.green.label {
|
||||
background: transparent;
|
||||
border-color: var(--color-green);
|
||||
color: var(--color-green);
|
||||
}
|
||||
a.ui.ui.ui.basic.green.label:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-green-dark-1);
|
||||
color: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
.ui.ui.ui.purple.label {
|
||||
background: var(--color-purple);
|
||||
border-color: var(--color-purple);
|
||||
color: var(--color-white);
|
||||
}
|
||||
a.ui.ui.ui.purple.label:hover {
|
||||
background: var(--color-purple-dark-1);
|
||||
border-color: var(--color-purple-dark-1);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.ui.ui.ui.grey.label {
|
||||
background: var(--color-label-bg);
|
||||
border-color: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
a.ui.ui.ui.grey.label:hover {
|
||||
background: var(--color-label-hover-bg);
|
||||
border-color: var(--color-label-hover-bg);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */
|
||||
.ui.horizontal.label {
|
||||
margin: 0 0.5em 0 0;
|
||||
padding: 0.4em 0.833em;
|
||||
min-width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.circular.label {
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
padding: 0.5em !important;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
border-radius: 500rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui.mini.label {
|
||||
font-size: 0.64285714rem;
|
||||
}
|
||||
.ui.tiny.label {
|
||||
font-size: 0.71428571rem;
|
||||
}
|
||||
.ui.small.label {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.large.label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* labels-list layout: span.labels-list > a.item > span.ui.label,
|
||||
by default, the labels list is rendered as "display: inline",
|
||||
it can also be rendered as flex by adding flex-related classes (the general ".item" selector also applies) */
|
||||
.labels-list {
|
||||
max-width: 100%; /* for ellipsis */
|
||||
font-size: var(--font-size-label); /* must match the label font size, otherwise the height mismatches */
|
||||
}
|
||||
|
||||
.labels-list > .item {
|
||||
max-width: 100%; /* for ellipsis */
|
||||
}
|
||||
|
||||
.labels-list a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.labels-list .ui.label {
|
||||
min-height: 20px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* to align with different font sizes, these styles need to be written separately */
|
||||
#issue-list .labels-list > .item {
|
||||
margin-right: 4px; /* margin-right (not margin-left) keeps wrapped labels left-aligned */
|
||||
vertical-align: 2.5px; /* compensates inline-flex baseline so labels center with text */
|
||||
}
|
||||
|
||||
.timeline-item .labels-list > .item {
|
||||
margin-right: 4px;
|
||||
vertical-align: 1.5px;
|
||||
}
|
||||
|
||||
/* Scoped labels with different colors on left and right */
|
||||
.ui.label.scope-parent {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.ui.label.scope-parent > .ui.label {
|
||||
margin: 0 !important; /* scoped label's margin is handled by the parent */
|
||||
}
|
||||
|
||||
.ui.label.scope-left {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.scope-middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.scope-right {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.ui.label.archived-label {
|
||||
filter: grayscale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ui.label {
|
||||
outline: 1px solid CanvasText;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
161
web_src/css/modules/list.css
Normal file
161
web_src/css/modules/list.css
Normal file
@@ -0,0 +1,161 @@
|
||||
/* based on Fomantic UI list module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.list {
|
||||
list-style-type: none;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.list:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.list:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.list > .item,
|
||||
.ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
.ui.list .list:not(.icon) {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0.75em 0 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.ui.list .list > .item {
|
||||
padding: 0.14285714em 0;
|
||||
}
|
||||
|
||||
.ui.list > .item > i.icon {
|
||||
display: table-cell;
|
||||
min-width: 1.55em;
|
||||
padding-top: 0;
|
||||
transition: color 0.1s ease;
|
||||
padding-right: 0.28571429em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list > .item > i.icon:only-child {
|
||||
display: inline-block;
|
||||
min-width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ui.list > .item > .image {
|
||||
display: table-cell;
|
||||
background-color: transparent;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list > .item > .image:not(:only-child):not(img) {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.ui.list > .item > .image img {
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list .list > .item > .image:only-child,
|
||||
.ui.list > .item > img.image,
|
||||
.ui.list > .item > .image:only-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.list .list > .item > .content,
|
||||
.ui.list > .item > .content {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.list > .item > i.icon + .content {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
padding: 0 0 0 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.list > .item > img.image + .content {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.ui.list > .item > .content > .list {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .item .header,
|
||||
.ui.list > .item .header {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.list .list > .item .description,
|
||||
.ui.list > .item .description {
|
||||
display: block;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.list > .item a,
|
||||
.ui.list .list > .item a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.menu .ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
background-color: transparent;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
padding: 0.21428571em 0;
|
||||
}
|
||||
.ui.menu .ui.list > .item::before {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.ui.menu .ui.list > .item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.ui.menu .ui.list > .item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.list .list > .disabled.item,
|
||||
.ui.list > .disabled.item {
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.list > a.item:hover > .icons,
|
||||
.ui.list .list > a.item:hover > i.icon,
|
||||
.ui.list > a.item:hover > i.icon {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.divided.list > .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.divided.list .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .item .list > .item {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child,
|
||||
.ui.divided.list > .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.ui.relaxed.list > .item:not(:first-child) {
|
||||
padding-top: 0.42857143em;
|
||||
}
|
||||
.ui.relaxed.list > .item:not(:last-child) {
|
||||
padding-bottom: 0.42857143em;
|
||||
}
|
||||
594
web_src/css/modules/menu.css
Normal file
594
web_src/css/modules/menu.css
Normal file
@@ -0,0 +1,594 @@
|
||||
.ui.menu {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin: 1rem 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-normal);
|
||||
background: var(--color-menu);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
min-height: 2.85714286em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.menu:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.menu:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.menu .menu {
|
||||
margin: 0;
|
||||
}
|
||||
.ui.menu:not(.vertical) > .menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap-inline);
|
||||
}
|
||||
|
||||
.ui.menu .item {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
line-height: var(--line-height-default);
|
||||
text-decoration: none;
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
padding: 0.92857143em 1.14285714em;
|
||||
color: var(--color-text);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.ui.menu > .item:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.menu .item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.menu .item > .svg {
|
||||
margin-right: 0.35em;
|
||||
}
|
||||
|
||||
.ui.menu .item > a:not(.ui) {
|
||||
line-height: 1.3;
|
||||
}
|
||||
.ui.menu .item > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .item > .button {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: -0.5em 0;
|
||||
padding: 0.58928571em 1.125em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ui.menu > .container {
|
||||
display: flex;
|
||||
align-items: inherit;
|
||||
flex-direction: inherit;
|
||||
}
|
||||
|
||||
.ui.menu .header.item,
|
||||
.ui.vertical.menu .header.item {
|
||||
margin: 0;
|
||||
font-size: 1.1em;
|
||||
background: var(--color-box-header);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.menu .dropdown.item .menu {
|
||||
min-width: calc(100% - 1px);
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
background: var(--color-body);
|
||||
margin: 0;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown .menu > .item {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
font-size: 1em !important;
|
||||
padding: 0.78571429em 1.14285714em !important;
|
||||
background: transparent !important;
|
||||
color: var(--color-text) !important;
|
||||
font-weight: var(--font-weight-normal) !important;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .item:hover {
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .selected.item {
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
.ui.menu .ui.dropdown .menu > .active.item {
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-active) !important;
|
||||
font-weight: var(--font-weight-medium) !important;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown.item .menu .item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .dropdown.item > .menu {
|
||||
border-radius: 0.28571429rem;
|
||||
margin-top: 0.35714286em;
|
||||
}
|
||||
|
||||
.ui.menu .item > .label {
|
||||
background: var(--color-label-bg);
|
||||
color: var(--color-label-text);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.menu > .ui.container {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.menu .dropdown.item:hover,
|
||||
.ui.menu a.item:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.menu a.item:active {
|
||||
color: var(--color-text);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui.menu .active.item {
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.ui.ui.menu .item.disabled {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
opacity: var(--opacity-disabled);
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .left.menu {
|
||||
display: flex;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ui.menu:not(.vertical) .right.menu {
|
||||
display: flex;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.ui.menu .right.menu > .item::before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
background: var(--color-menu);
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item {
|
||||
display: block;
|
||||
background: none;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
.ui.vertical.menu > .item:first-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.vertical.menu > .item:last-child {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
.ui.vertical.menu .item:first-child::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item > .menu {
|
||||
margin: 0.5em -1.14285714em 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .menu .item {
|
||||
background: none;
|
||||
padding: 0.5em 1.33333333em;
|
||||
font-size: 0.85714286em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu .item {
|
||||
color: var(--color-text-light-2);
|
||||
text-indent: 16px;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu .item:hover,
|
||||
.ui.vertical.menu .item .menu a.item:hover {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu .active.item {
|
||||
background-color: transparent;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.vertical.menu .item .menu a.item:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.vertical.menu .menu .item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.vertical.menu .active.item {
|
||||
background: var(--color-active);
|
||||
border-radius: 0;
|
||||
}
|
||||
.ui.vertical.menu > .active.item:first-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.vertical.menu > .active.item:last-child {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.vertical.menu > .active.item:only-child {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.tabular.menu {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: none transparent;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.tabular.menu .item {
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
.ui.tabular.menu .item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.tabular.menu .item:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-body);
|
||||
border-top-width: 1px;
|
||||
border-color: var(--color-secondary);
|
||||
color: var(--color-text-dark);
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
|
||||
}
|
||||
|
||||
.ui.tabular.menu + .attached:not(.top).segment,
|
||||
.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
|
||||
border-top: none;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.pagination.menu {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.pagination.menu .item:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
.ui.compact.menu .item:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
.ui.pagination.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
.ui.pagination.menu .item {
|
||||
min-width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.pagination.menu .active.item,
|
||||
.ui.pagination.menu .active.item:hover {
|
||||
border-top: none;
|
||||
padding-top: 0.92857143em;
|
||||
color: var(--color-text);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.ui.pagination.menu .item:not(.active,.navigation),
|
||||
.ui.pagination.menu .item.navigation span.navigation_label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.pagination.menu.narrow .item {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.secondary.menu {
|
||||
background: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
gap: .35714286em;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .item {
|
||||
align-self: center;
|
||||
border: none;
|
||||
padding: 0.78571429em 0.92857143em;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .item::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .dropdown.item:hover,
|
||||
.ui.secondary.menu a.item:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item {
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item,
|
||||
.ui.secondary.menu .active.item:hover {
|
||||
color: var(--color-text-dark);
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
border: none;
|
||||
margin: 0 0 0.35714286em;
|
||||
border-radius: 0.28571429rem !important;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-bottom: 2px solid var(--color-secondary);
|
||||
}
|
||||
.ui.secondary.pointing.menu .item {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
align-self: flex-end;
|
||||
margin: 0 0 -2px;
|
||||
padding: 0.85714286em 1.14285714em;
|
||||
}
|
||||
.ui.secondary.pointing.menu .item > .label:not(.floating) {
|
||||
margin-top: -0.3em;
|
||||
margin-bottom: -0.3em;
|
||||
}
|
||||
.ui.secondary.pointing.menu .item > .circular.label {
|
||||
margin-top: -0.5em;
|
||||
margin-bottom: -0.5em;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu a.item:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu a.item:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .active.item {
|
||||
background-color: transparent;
|
||||
border-color: currentcolor;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item:hover {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.stackable.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
.ui.stackable.menu .item {
|
||||
width: 100% !important;
|
||||
}
|
||||
.ui.stackable.menu .left.menu {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ui.stackable.menu .right.menu,
|
||||
.ui.stackable.menu .left.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.borderless.menu .item::before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.ui.compact.menu {
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ui.compact.menu:not(.secondary) .item:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
.ui.compact.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.menu.fluid,
|
||||
.ui.vertical.menu.fluid {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui.item.menu,
|
||||
.ui.item.menu .item {
|
||||
width: 100%;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui.item.menu .item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
.ui.menu.two.item .item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .item::after {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
background: none;
|
||||
margin: 0.5px 0 0;
|
||||
width: 0.57142857em;
|
||||
height: 0.57142857em;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-right: 1px solid var(--color-secondary);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .active.item::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .active.item .menu .active.item::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.pointing.menu .active.item::after,
|
||||
.ui.pointing.menu .active.item:hover::after {
|
||||
background-color: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.attached.menu {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
}
|
||||
|
||||
.ui[class*="top attached"].menu {
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.menu[class*="top attached"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.top.attached.menu > .item:first-child {
|
||||
border-radius: 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.attached.tabular.menu {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.mini.menu {
|
||||
font-size: 0.78571429rem;
|
||||
}
|
||||
.ui.tiny.menu {
|
||||
font-size: 0.85714286rem;
|
||||
}
|
||||
.ui.small.menu,
|
||||
.ui.small.menu .dropdown,
|
||||
.ui.small.menu .dropdown .menu > .item {
|
||||
font-size: 0.92857143rem;
|
||||
}
|
||||
|
||||
.ui.segment .ui.tabular.menu .active.item,
|
||||
.ui.segment .ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-box-body);
|
||||
}
|
||||
|
||||
.small-menu-items {
|
||||
min-height: 35.4px !important; /* match .small.button in height */
|
||||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.small-menu-items .item {
|
||||
background: var(--color-menu) !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item:hover {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
100
web_src/css/modules/message.css
Normal file
100
web_src/css/modules/message.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/* based on Fomantic UI message module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.message {
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
position: relative;
|
||||
min-height: 1em;
|
||||
margin: 1em 0;
|
||||
padding: 1em 1.5em;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
details.ui.message {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details.ui.message summary {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
|
||||
details.ui.message pre {
|
||||
margin: -1.25em 0 0;
|
||||
padding: 0.5em 1.5em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
details.ui.message:not(:has(pre)) summary {
|
||||
list-style: none;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ui.message.flash-message pre {
|
||||
white-space: pre-line;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.message:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ui.message:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.attached.message {
|
||||
margin-bottom: -1px;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
|
||||
margin-top: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui.message .header {
|
||||
color: inherit;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.ui.info.message,
|
||||
.ui.attached.info.message,
|
||||
.ui.blue.message,
|
||||
.ui.attached.blue.message {
|
||||
background: var(--color-info-bg);
|
||||
border-color: var(--color-info-border);
|
||||
}
|
||||
|
||||
.ui.success.message,
|
||||
.ui.positive.message {
|
||||
background: var(--color-success-bg);
|
||||
border-color: var(--color-success-border);
|
||||
}
|
||||
|
||||
.ui.error.message,
|
||||
.ui.red.message,
|
||||
.ui.negative.message {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.ui.warning.message {
|
||||
background: var(--color-warning-bg);
|
||||
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;
|
||||
}
|
||||
305
web_src/css/modules/modal.css
Normal file
305
web_src/css/modules/modal.css
Normal file
@@ -0,0 +1,305 @@
|
||||
/* These are the remnants of the fomantic modal module */
|
||||
|
||||
.ui.modal {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: var(--z-index-modal);
|
||||
text-align: left;
|
||||
background: var(--color-body);
|
||||
border: none;
|
||||
box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
|
||||
transform-origin: 50% 25%;
|
||||
flex: 0 0 auto;
|
||||
border-radius: var(--border-radius);
|
||||
user-select: text;
|
||||
will-change: top, left, margin, transform, opacity;
|
||||
}
|
||||
|
||||
.ui.modal > :first-child:not(.icon) {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > :last-child {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -2.5rem;
|
||||
right: -2.5rem;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
font-size: 1.25em;
|
||||
color: var(--color-white);
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0.625rem 0 0;
|
||||
}
|
||||
|
||||
.ui.modal > .close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.modal > .header {
|
||||
display: block;
|
||||
font-family: var(--fonts-regular);
|
||||
background: var(--color-body);
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: none;
|
||||
color: var(--color-text-dark);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .header:not(.ui) {
|
||||
font-size: 1.42857143rem;
|
||||
line-height: 1.28571429em;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.ui.modal > .header .svg {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui.modal > .content,
|
||||
.ui.modal form > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
padding: 1.5em;
|
||||
background: var(--color-body);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .actions,
|
||||
.ui.modal .content + .actions,
|
||||
.ui.modal .content + form > .actions {
|
||||
background: var(--color-secondary-bg);
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
text-align: right;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal .actions > .button {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.modal {
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.modal {
|
||||
width: 850px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.modal {
|
||||
width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.modal {
|
||||
width: 950px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991.98px) {
|
||||
.ui.modal > .header {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: 1.0535rem;
|
||||
right: 1rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.modal > .header {
|
||||
padding: 0.75rem 1rem !important;
|
||||
padding-right: 2.25rem !important;
|
||||
}
|
||||
.ui.modal > .content {
|
||||
display: block;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
.ui.modal > .close {
|
||||
top: 0.5rem !important;
|
||||
right: 0.5rem !important;
|
||||
}
|
||||
.ui.modal > .actions {
|
||||
padding: 1rem 1rem 0 !important;
|
||||
}
|
||||
.ui.modal .actions > .button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.active.modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.modal > .close.inside + .header {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
.ui.modal > .close.inside {
|
||||
top: 1.0535rem;
|
||||
right: 1rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui.modal > .close.icon[height="16"] {
|
||||
top: 0.7em;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.mini.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.mini.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.mini.modal {
|
||||
width: 35.2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.mini.modal {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.mini.modal {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.mini.modal {
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.tiny.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.tiny.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.tiny.modal {
|
||||
width: 52.8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.tiny.modal {
|
||||
width: 510px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.tiny.modal {
|
||||
width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.tiny.modal {
|
||||
width: 570px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.small.modal > .header:not(.ui) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.small.modal {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.ui.small.modal {
|
||||
width: 70.4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
.ui.small.modal {
|
||||
width: 680px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.ui.small.modal {
|
||||
width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1920px) {
|
||||
.ui.small.modal {
|
||||
width: 760px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.modal.g-modal-confirm {
|
||||
max-width: min(800px, 90vw);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.ui.modal .content > form > .actions,
|
||||
.ui.modal .content > .actions {
|
||||
padding-top: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button.danger {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button .svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
151
web_src/css/modules/navbar.css
Normal file
151
web_src/css/modules/navbar.css
Normal file
@@ -0,0 +1,151 @@
|
||||
#navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color-nav-bg);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#navbar .navbar-left,
|
||||
#navbar .navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 49px; /* +1px border-bottom */
|
||||
}
|
||||
|
||||
.navbar-left > .item,
|
||||
.navbar-right > .item,
|
||||
.navbar-mobile-right > .item {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-nav-text);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#navbar .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
#navbar a.item:hover,
|
||||
#navbar button.item:hover {
|
||||
background: var(--color-nav-hover-bg);
|
||||
}
|
||||
|
||||
#navbar .item.ui.dropdown {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#navbar {
|
||||
align-items: stretch;
|
||||
}
|
||||
/* hide all items */
|
||||
#navbar .navbar-left > .item,
|
||||
#navbar .navbar-right > .item {
|
||||
display: none;
|
||||
}
|
||||
#navbar #navbar-logo {
|
||||
display: flex;
|
||||
}
|
||||
/* show the first navbar item (logo and its mobile right items) */
|
||||
#navbar .navbar-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#navbar .navbar-mobile-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
#navbar .navbar-mobile-right > .item {
|
||||
display: flex;
|
||||
width: auto;
|
||||
}
|
||||
/* show items if the navbar is open */
|
||||
#navbar.navbar-menu-open {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
#navbar.navbar-menu-open,
|
||||
#navbar.navbar-menu-open .navbar-right {
|
||||
flex-direction: column;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left > .item,
|
||||
#navbar.navbar-menu-open .navbar-right > .item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left #navbar-logo {
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
|
||||
justify-content: flex-end;
|
||||
min-height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar a.item:hover .notification_count,
|
||||
#navbar a.item:hover .header-stopwatch-dot,
|
||||
#navbar .item.active .navbar-admin-badge {
|
||||
border-color: var(--color-nav-hover-bg);
|
||||
}
|
||||
|
||||
#navbar a.item .notification_count,
|
||||
#navbar a.item .header-stopwatch-dot,
|
||||
#navbar .item .navbar-admin-badge {
|
||||
color: var(--color-nav-bg);
|
||||
padding: 0 3.75px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
background: var(--color-primary);
|
||||
border: 2px solid var(--color-nav-bg);
|
||||
position: absolute;
|
||||
left: calc(100% - 9px);
|
||||
bottom: calc(100% - 9px);
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1; /* prevent menu button background from overlaying icon */
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navbar-avatar {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#navbar .item .navbar-admin-badge {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: -7px;
|
||||
bottom: -5px;
|
||||
padding: 1.5px;
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
|
||||
}
|
||||
|
||||
.issue-navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
204
web_src/css/modules/normalize.css
vendored
Normal file
204
web_src/css/modules/normalize.css
vendored
Normal file
@@ -0,0 +1,204 @@
|
||||
/*
|
||||
This is copy of modern-normalize with these changes done:
|
||||
|
||||
- Remove html font-family, we set our own
|
||||
- Remove html tab-size, we set our own
|
||||
- Remove b,strong font-weight, we set our own
|
||||
- Remove b,code,samp,pre font-size, we set our own
|
||||
- Keep the browser's default line-height on html, it is font-dependent and roughly 1.2
|
||||
- Keep the hr color that v3 dropped, it keeps the separator colored like the surrounding text
|
||||
- Keep the :-moz-focusring outline that v3 dropped, checkboxes and radios have no other focus style
|
||||
*/
|
||||
|
||||
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: normal;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- no unprefixed support in Safari or Firefox */
|
||||
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0; /* Remove the margin in all browsers. */
|
||||
}
|
||||
|
||||
/*
|
||||
Grouping content
|
||||
================
|
||||
*/
|
||||
|
||||
hr {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to 'inherit' in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix -- upstream v3.0.1 still ships the prefix */
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
86
web_src/css/modules/search.css
Normal file
86
web_src/css/modules/search.css
Normal file
@@ -0,0 +1,86 @@
|
||||
/* These are the remnants of the fomantic search module */
|
||||
|
||||
.ui.search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui.search > .results {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
background: var(--color-body);
|
||||
margin-top: 0.5em;
|
||||
width: 18em;
|
||||
border-radius: 0.28571429rem;
|
||||
box-shadow: 0 2px 4px 0 var(--color-shadow), 0 2px 10px 0 var(--color-shadow);
|
||||
border: 1px solid var(--color-secondary);
|
||||
z-index: 998;
|
||||
transform-origin: center top;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.ui.search > .results > :first-child {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.search > .results > :last-child {
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.search > .results .result {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0.85714286em 1.14285714em;
|
||||
color: var(--color-text);
|
||||
line-height: 1.33;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
background: var(--color-body);
|
||||
}
|
||||
|
||||
.ui.search > .results .result:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .image {
|
||||
overflow: hidden;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .image img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui.search > .results .result .title {
|
||||
margin: -0.14285714em 0 0;
|
||||
font-family: var(--fonts-regular);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.ui.search > .results .result .description {
|
||||
font-size: 0.92857143em;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.ui.search > .results .result:hover,
|
||||
.ui.search > .results .result.active {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.fluid.search .results {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.search .results {
|
||||
max-width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
180
web_src/css/modules/segment.css
Normal file
180
web_src/css/modules/segment.css
Normal file
@@ -0,0 +1,180 @@
|
||||
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.segment {
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
padding: 1em;
|
||||
border-radius: 0.28571429rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.segment:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.segment:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.grid.segment {
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment.tab:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.segments {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.segments:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.segments:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.segments > .segment {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.segments:not(.horizontal) > .segment:first-child {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:last-child {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:only-child,
|
||||
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
|
||||
border-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.horizontal.segments {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.28571429rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.horizontal.segments > .segment {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-left: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.horizontal.segments:not(.stackable) > .segment:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:first-child {
|
||||
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:last-child {
|
||||
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
||||
}
|
||||
|
||||
.ui.clearing.segment::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ui.secondary.segment {
|
||||
background: var(--color-secondary-bg);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.attached.segment:last-child,
|
||||
.ui.attached.segment:has(+ :not(.ui.attached.segment)) {
|
||||
border-bottom-left-radius: 0.28571429rem;
|
||||
border-bottom-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui[class*="top attached"].segment {
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 1rem;
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.segment[class*="top attached"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui[class*="top attached"].segment:last-child {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui.segment[class*="bottom attached"]:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ui.fitted.segment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.segments .segment,
|
||||
.ui.segment {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ui.error.segment {
|
||||
border-color: var(--color-error-border) !important;
|
||||
}
|
||||
|
||||
.ui.warning.segment {
|
||||
border-color: var(--color-warning-border) !important;
|
||||
}
|
||||
26
web_src/css/modules/shortcut.css
Normal file
26
web_src/css/modules/shortcut.css
Normal file
@@ -0,0 +1,26 @@
|
||||
.global-shortcut-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
padding: 2px 4px;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
color: var(--color-text-light-2);
|
||||
background-color: var(--color-box-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow-kbd);
|
||||
}
|
||||
|
||||
.global-shortcut-wrapper > kbd {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
54
web_src/css/modules/svg.css
Normal file
54
web_src/css/modules/svg.css
Normal file
@@ -0,0 +1,54 @@
|
||||
/* some material icons have "fill=none" (e.g.: ".txt -> document"), so the CSS styles shouldn't overwrite it,
|
||||
and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */
|
||||
.svg:not(.git-entry-icon) {
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* middle is the best choice for different font sizes from 1px to 36px when no flex */
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
/* some browsers like Chrome have a bug: when a SVG is in a "display: none" container and referenced
|
||||
somewhere else by `<use href="#id">`, it won't be rendered correctly. e.g.: ".kts -> kotlin" */
|
||||
.svg-icon-container {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
|
||||
here are cherry-picked for our use cases, feel free to add more. after
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
|
||||
supported in browsers, use `attr(width px)` instead for a generic
|
||||
solution. */
|
||||
|
||||
.svg[height="12"] { min-height: 12px; }
|
||||
.svg[height="13"] { min-height: 13px; }
|
||||
.svg[height="14"] { min-height: 14px; }
|
||||
.svg[height="15"] { min-height: 15px; }
|
||||
.svg[height="16"] { min-height: 16px; }
|
||||
.svg[height="18"] { min-height: 18px; }
|
||||
.svg[height="20"] { min-height: 20px; }
|
||||
.svg[height="22"] { min-height: 22px; }
|
||||
.svg[height="24"] { min-height: 24px; }
|
||||
.svg[height="36"] { min-height: 36px; }
|
||||
.svg[height="48"] { min-height: 48px; }
|
||||
.svg[height="56"] { min-height: 56px; }
|
||||
|
||||
.svg[width="12"] { min-width: 12px; }
|
||||
.svg[width="13"] { min-width: 13px; }
|
||||
.svg[width="14"] { min-width: 14px; }
|
||||
.svg[width="15"] { min-width: 15px; }
|
||||
.svg[width="16"] { min-width: 16px; }
|
||||
.svg[width="18"] { min-width: 18px; }
|
||||
.svg[width="20"] { min-width: 20px; }
|
||||
.svg[width="22"] { min-width: 22px; }
|
||||
.svg[width="24"] { min-width: 24px; }
|
||||
.svg[width="36"] { min-width: 36px; }
|
||||
.svg[width="48"] { min-width: 48px; }
|
||||
.svg[width="56"] { min-width: 56px; }
|
||||
|
||||
/* when the svg is used in menu or item, it's certain that we don't want it to be shrunk */
|
||||
.menu .svg,
|
||||
.item .svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
7
web_src/css/modules/tab.css
Normal file
7
web_src/css/modules/tab.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.ui.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.tab.active {
|
||||
display: block;
|
||||
}
|
||||
272
web_src/css/modules/table.css
Normal file
272
web_src/css/modules/table.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
|
||||
unused rules here after refactoring, please remove them. */
|
||||
|
||||
.ui.table {
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 0.28571429rem;
|
||||
vertical-align: middle;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
color: var(--color-text);
|
||||
background: var(--color-box-body);
|
||||
border-color: var(--color-secondary);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.ui.table:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui.table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ui.table > thead,
|
||||
.ui.table > tbody {
|
||||
text-align: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.ui.table > thead > tr > th {
|
||||
background: var(--color-box-header);
|
||||
text-align: inherit;
|
||||
color: var(--color-text);
|
||||
padding: 6px 5px;
|
||||
vertical-align: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > thead > tr > th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:first-child {
|
||||
border-radius: 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:last-child {
|
||||
border-radius: 0 0.28571429rem 0 0;
|
||||
}
|
||||
.ui.table > thead > tr:first-child > th:only-child {
|
||||
border-radius: 0.28571429rem 0.28571429rem 0 0;
|
||||
}
|
||||
|
||||
.ui.table > tfoot > tr > th {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
text-align: inherit;
|
||||
color: var(--color-text);
|
||||
padding: 0.78571429em;
|
||||
vertical-align: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.ui.table > tfoot > tr > th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:first-child {
|
||||
border-radius: 0 0 0 0.28571429rem;
|
||||
}
|
||||
.ui.table > tfoot > tr:first-child > th:last-child {
|
||||
border-radius: 0 0 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.table > tr > td,
|
||||
.ui.table > tbody > tr > td {
|
||||
border-top: 1px solid var(--color-secondary-alpha-50);
|
||||
padding: 6px 5px;
|
||||
text-align: inherit;
|
||||
}
|
||||
.ui.table > tr:first-child > td,
|
||||
.ui.table > tbody > tr:first-child > td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui.table.segment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.ui.table:not(.unstackable) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.ui.table:not(.unstackable) > thead,
|
||||
.ui.table:not(.unstackable) > thead > tr,
|
||||
.ui.table:not(.unstackable) > tbody,
|
||||
.ui.table:not(.unstackable) > tr,
|
||||
.ui.table:not(.unstackable) > tbody > tr,
|
||||
.ui.table:not(.unstackable) > tr > th,
|
||||
.ui.table:not(.unstackable) > thead > tr > th,
|
||||
.ui.table:not(.unstackable) > tbody > tr > th,
|
||||
.ui.table:not(.unstackable) > tr > td,
|
||||
.ui.table:not(.unstackable) > tbody > tr > td {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
}
|
||||
.ui.table:not(.unstackable) > thead {
|
||||
display: block;
|
||||
}
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tr > td,
|
||||
.ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25em 0.75em;
|
||||
}
|
||||
.ui.table:not(.unstackable) > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > thead > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tbody > tr > th:first-child,
|
||||
.ui.table:not(.unstackable) > tr > td:first-child,
|
||||
.ui.table:not(.unstackable) > tbody > tr > td:first-child {
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.ui.table th.collapsing,
|
||||
.ui.table td.collapsing {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.fixed.table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.ui.selectable.table > tbody > tr:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.attached.table {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
margin: 0 -1px;
|
||||
width: calc(100% + 2px);
|
||||
max-width: calc(100% + 2px);
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.attached + .ui.attached.table:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.ui[class*="bottom attached"].table {
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
margin-bottom: 1em;
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
.ui[class*="bottom attached"].table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.table[class*="single line"],
|
||||
.ui.table [class*="single line"] {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Column Width */
|
||||
.ui.table th.one.wide,
|
||||
.ui.table td.one.wide {
|
||||
width: 6.25%;
|
||||
}
|
||||
.ui.table th.two.wide,
|
||||
.ui.table td.two.wide {
|
||||
width: 12.5%;
|
||||
}
|
||||
.ui.table th.three.wide,
|
||||
.ui.table td.three.wide {
|
||||
width: 18.75%;
|
||||
}
|
||||
.ui.table th.four.wide,
|
||||
.ui.table td.four.wide {
|
||||
width: 25%;
|
||||
}
|
||||
.ui.table th.five.wide,
|
||||
.ui.table td.five.wide {
|
||||
width: 31.25%;
|
||||
}
|
||||
.ui.table th.six.wide,
|
||||
.ui.table td.six.wide {
|
||||
width: 37.5%;
|
||||
}
|
||||
.ui.table th.eight.wide,
|
||||
.ui.table td.eight.wide {
|
||||
width: 50%;
|
||||
}
|
||||
.ui.table th.ten.wide,
|
||||
.ui.table td.ten.wide {
|
||||
width: 62.5%;
|
||||
}
|
||||
.ui.table th.eleven.wide,
|
||||
.ui.table td.eleven.wide {
|
||||
width: 68.75%;
|
||||
}
|
||||
|
||||
.ui.basic.table {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.basic.table > thead > tr > th,
|
||||
.ui.basic.table > tbody > tr > th,
|
||||
.ui.basic.table > tr > th {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
}
|
||||
.ui.basic.table > tbody > tr {
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
.ui.basic.table > tbody > tr > td,
|
||||
.ui.basic.table > tr > td {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui[class*="very basic"].table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui.celled.table > tr > th,
|
||||
.ui.celled.table > thead > tr > th,
|
||||
.ui.celled.table > tbody > tr > th,
|
||||
.ui.celled.table > tr > td,
|
||||
.ui.celled.table > tbody > tr > td {
|
||||
border-left: 1px solid var(--color-secondary-alpha-50);
|
||||
}
|
||||
.ui.celled.table > tr > th:first-child,
|
||||
.ui.celled.table > thead > tr > th:first-child,
|
||||
.ui.celled.table > tbody > tr > th:first-child,
|
||||
.ui.celled.table > tr > td:first-child,
|
||||
.ui.celled.table > tbody > tr > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.compact.table > tr > th,
|
||||
.ui.compact.table > thead > tr > th,
|
||||
.ui.compact.table > tbody > tr > th {
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
}
|
||||
.ui.compact.table > tr > td,
|
||||
.ui.compact.table > tbody > tr > td {
|
||||
padding: 0.5em 0.7em;
|
||||
}
|
||||
|
||||
/* use more horizontal padding on first and last items for visuals */
|
||||
.ui.table > thead > tr > th:first-of-type,
|
||||
.ui.table > tbody > tr > td:first-of-type,
|
||||
.ui.table > tr > td:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.ui.table > thead > tr > th:last-of-type,
|
||||
.ui.table > tbody > tr > td:last-of-type,
|
||||
.ui.table > tr > td:last-of-type {
|
||||
padding-right: 10px;
|
||||
}
|
||||
195
web_src/css/modules/tippy.css
Normal file
195
web_src/css/modules/tippy.css
Normal file
@@ -0,0 +1,195 @@
|
||||
/* styles are based on node_modules/tippy.js/dist/tippy.css */
|
||||
|
||||
/* class to hide tippy target elements on page load */
|
||||
.tippy-target {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* show target element once it's been moved by tippy.js */
|
||||
.tippy-content .tippy-target {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
[data-tippy-root] {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
/* opt-in via createTippy's "limitSizeToViewport" */
|
||||
[data-tippy-limit-size] .tippy-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: var(--tippy-max-width, none);
|
||||
max-height: var(--tippy-max-height, none);
|
||||
}
|
||||
|
||||
[data-tippy-limit-size] .tippy-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tippy-box {
|
||||
position: relative;
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="default"] {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
/* bare theme, no styling at all, except box-shadow */
|
||||
.tippy-box[data-theme="bare"] {
|
||||
border: none;
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="bare"] .tippy-content {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* tooltip theme for text tooltips */
|
||||
|
||||
.tippy-box[data-theme="tooltip"] {
|
||||
background-color: var(--color-tooltip-bg);
|
||||
color: var(--color-tooltip-text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="tooltip"] .tippy-content {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
|
||||
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
|
||||
fill: var(--color-tooltip-bg);
|
||||
}
|
||||
|
||||
/* menu theme for .ui.menu */
|
||||
|
||||
.tippy-box[data-theme="menu"] {
|
||||
background-color: var(--color-menu);
|
||||
color: var(--color-text);
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .tippy-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-menu);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9px 18px;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
text-decoration: none;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item:focus-visible {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="menu"] .divider {
|
||||
margin: 4px 0; /* fit the menu's vertical padding */
|
||||
}
|
||||
|
||||
/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
|
||||
|
||||
.tippy-box[data-theme="box-with-header"] {
|
||||
box-shadow: 0 6px 18px var(--color-shadow);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"] .tippy-content {
|
||||
background: var(--color-box-body);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-box-body);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner {
|
||||
fill: var(--color-box-header);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
|
||||
top: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
|
||||
transform: rotate(90deg);
|
||||
top: calc(50% - 3px);
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
|
||||
.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
|
||||
transform: rotate(-90deg);
|
||||
top: calc(50% - 3px);
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow,
|
||||
.tippy-svg-arrow > svg {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tippy-svg-arrow-outer {
|
||||
fill: var(--color-secondary);
|
||||
}
|
||||
|
||||
.tippy-svg-arrow-inner {
|
||||
fill: var(--color-menu);
|
||||
}
|
||||
121
web_src/css/modules/toast.css
Normal file
121
web_src/css/modules/toast.css
Normal file
@@ -0,0 +1,121 @@
|
||||
.toastify {
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-secondary);
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
transition: all .2s ease;
|
||||
z-index: var(--z-index-toast);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 8px 24px var(--color-shadow);
|
||||
display: flex;
|
||||
max-width: 50vw;
|
||||
min-width: 300px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.toastify.on {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background: var(--color-success-bg);
|
||||
border-color: var(--color-success-border);
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background: var(--color-info-bg);
|
||||
border-color: var(--color-info-border);
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background: var(--color-warning-bg);
|
||||
border-color: var(--color-warning-border);
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background: var(--color-error-bg);
|
||||
border-color: var(--color-error-border);
|
||||
}
|
||||
|
||||
.toast-success .toast-icon { color: var(--color-success-text); }
|
||||
.toast-info .toast-icon { color: var(--color-info-text); }
|
||||
.toast-warning .toast-icon { color: var(--color-warning-text); }
|
||||
.toast-error .toast-icon { color: var(--color-error-text); }
|
||||
|
||||
.toast-body {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.toast-body pre {
|
||||
white-space: pre-wrap; /* online editor, when git hook fails, the rendered message uses "pre" */
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
border-radius: var(--border-radius);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
display: inline-flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-duplicate-number::before {
|
||||
content: "(";
|
||||
}
|
||||
.toast-duplicate-number {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
.toast-duplicate-number::after {
|
||||
content: ")";
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.toast-close:active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.toastify-right {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.toastify-left {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.toastify-top {
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.toastify-bottom {
|
||||
bottom: -150px;
|
||||
}
|
||||
|
||||
.toastify-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.toastify-right, .toastify-left {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: fit-content;
|
||||
}
|
||||
}
|
||||
23
web_src/css/modules/transition.css
Normal file
23
web_src/css/modules/transition.css
Normal file
@@ -0,0 +1,23 @@
|
||||
/* styles for Fomantic transition (toggle): dimmer, modal, dropdown menu */
|
||||
|
||||
/* this is the only place using "hidden" and "visible" classes, it can safely work with tailwind without prefix in the future */
|
||||
.ui.modal.transition.hidden,
|
||||
.ui.dropdown > .menu.transition.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.modal.transition.visible,
|
||||
.ui.dropdown > .menu.transition.visible {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* dimmer uses "active" but not "hidden/visible" classes, no special classes for it here */
|
||||
|
||||
/* only modal and dimmer need animation, dropdown menu doesn't */
|
||||
.ui.modal.transition {
|
||||
animation-name: fadein;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
12
web_src/css/org.css
Normal file
12
web_src/css/org.css
Normal file
@@ -0,0 +1,12 @@
|
||||
.page-content.organization .team-item-box > .team-item-header {
|
||||
min-height: 50px; /* the header sometimes contains a mini button, sometimes not, so we set a min-height to make sure the layout is consistent */
|
||||
}
|
||||
|
||||
.page-content.organization .team-item-box .team-item-description {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-light-3);
|
||||
}
|
||||
1814
web_src/css/repo.css
Normal file
1814
web_src/css/repo.css
Normal file
File diff suppressed because it is too large
Load Diff
39
web_src/css/repo/clone.css
Normal file
39
web_src/css/repo/clone.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/* only used by "repo/empty.tmpl" */
|
||||
.clone-buttons-combo {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.clone-buttons-combo > .ui.button:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.ui.action.input.clone-buttons-combo input {
|
||||
border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */
|
||||
}
|
||||
|
||||
/* used by the clone-panel popup */
|
||||
.clone-panel-field,
|
||||
.clone-panel-list {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.clone-panel-tab .item {
|
||||
padding: 5px 10px;
|
||||
background: none;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.clone-panel-tab .item.active {
|
||||
color: var(--color-text-dark);
|
||||
border-bottom: 3px solid currentcolor;
|
||||
}
|
||||
|
||||
.clone-panel-tab + .divider {
|
||||
margin: -1px 0 0;
|
||||
}
|
||||
|
||||
.clone-panel-list .item {
|
||||
margin: 5px 0;
|
||||
}
|
||||
65
web_src/css/repo/commit-sign.css
Normal file
65
web_src/css/repo/commit-sign.css
Normal file
@@ -0,0 +1,65 @@
|
||||
.ui.label.commit-id-short,
|
||||
.ui.label.commit-sign-badge {
|
||||
border: 1px solid var(--color-light-border);
|
||||
font-size: 13px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding: 3px 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ui.label.commit-sign-badge > * {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ui.label.commit-id-short {
|
||||
font-family: var(--fonts-monospace);
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.ui.label.commit-id-short > .commit-sign-badge {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ui.label.commit-id-short > .commit-sign-badge:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-trusted {
|
||||
border: 1px solid var(--color-green-badge) !important;
|
||||
background: var(--color-green-badge-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-trusted:hover {
|
||||
background: var(--color-green-badge-hover-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-untrusted {
|
||||
border: 1px solid var(--color-yellow-badge) !important;
|
||||
background: var(--color-yellow-badge-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-untrusted:hover {
|
||||
background: var(--color-yellow-badge-hover-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-unmatched {
|
||||
border: 1px solid var(--color-orange-badge) !important;
|
||||
background: var(--color-orange-badge-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-unmatched:hover {
|
||||
background: var(--color-orange-badge-hover-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-warning {
|
||||
border: 1px solid var(--color-red-badge) !important;
|
||||
background: var(--color-red-badge-bg) !important;
|
||||
}
|
||||
|
||||
.commit-is-signed.sign-warning:hover {
|
||||
background: var(--color-red-badge-hover-bg) !important;
|
||||
}
|
||||
97
web_src/css/repo/file-view.css
Normal file
97
web_src/css/repo/file-view.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.file-view-container {
|
||||
padding: 0 !important; /* the file-view itself provides padding */
|
||||
}
|
||||
|
||||
.file-view tr.active .lines-num,
|
||||
.file-view tr.active .lines-escape,
|
||||
.file-view tr.active .lines-code {
|
||||
background: var(--color-highlight-bg);
|
||||
}
|
||||
|
||||
/* set correct border radius on the last active lines, to avoid border overflow */
|
||||
.file-view tr.active:last-of-type .lines-code {
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.file-view tr.active .lines-num {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* add a darker "handler" at the beginning of the active line */
|
||||
.file-view tr.active .lines-num::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: var(--color-highlight-fg);
|
||||
}
|
||||
|
||||
.file-view .file-not-rendered-prompt {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 1rem !important; /* use consistent styles for various containers (code, markup, etc) */
|
||||
line-height: var(--line-height-default) !important; /* same as above */
|
||||
}
|
||||
|
||||
/* ".code-view" is always used with ".file-view", to show the code of a file */
|
||||
.file-view.code-view {
|
||||
background: var(--color-code-bg);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.file-view.code-view table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-view.code-view .lines-num span::after {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-view.code-view .lines-num:hover {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.file-view.code-view .ui.button.code-line-button {
|
||||
border: 1px solid var(--color-secondary);
|
||||
padding: 1px 4px;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.file-view.code-view .ui.button.code-line-button:hover {
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.view-raw {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-raw > * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.view-raw audio,
|
||||
.view-raw video,
|
||||
.view-raw img {
|
||||
margin: 1rem;
|
||||
border-radius: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.view-raw img[src$=".svg" i] {
|
||||
max-height: 600px !important;
|
||||
max-width: 600px !important;
|
||||
background: var(--background-view-image);
|
||||
}
|
||||
|
||||
.file-view-render-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-view-render-container :last-child {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius); /* to match the "ui segment" bottom radius */
|
||||
}
|
||||
99
web_src/css/repo/home-file-list.css
Normal file
99
web_src/css/repo/home-file-list.css
Normal file
@@ -0,0 +1,99 @@
|
||||
#repo-files-table {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr auto;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-box-body);
|
||||
border-radius: var(--border-radius);
|
||||
margin: 10px 0; /* match the "clone-panel-popup" margin to avoid "visual double-border" */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#repo-files-table {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-item {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-item:hover > .repo-file-cell,
|
||||
#repo-files-table .parent-link:hover {
|
||||
background: var(--color-hover-opaque);
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-line,
|
||||
#repo-files-table .repo-file-cell {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-line:first-child {
|
||||
border-top: none;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-item:last-child .repo-file-cell:first-child {
|
||||
border-bottom-left-radius: calc(var(--border-radius) - 1px);
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-item:last-child .repo-file-cell:last-child {
|
||||
border-bottom-right-radius: calc(var(--border-radius) - 1px);
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-line {
|
||||
grid-column: 1 / span 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-last-commit {
|
||||
min-width: 0; /* otherwise the flex axis is not limited and the text might overflow in Pale Moon */
|
||||
background: var(--color-box-header);
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-cell.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-cell.name > a,
|
||||
#repo-files-table .repo-file-cell.name > span {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-cell.name .entry-name {
|
||||
flex-shrink: 1;
|
||||
min-width: 1ch; /* leave about one letter space when shrinking, need to fine tune the "shrinks" in this grid in the future */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#repo-files-table .repo-file-cell.name {
|
||||
max-width: 35vw;
|
||||
}
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-cell.message {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-cell.age {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
#repo-files-table .repo-file-cell.is-loading::after {
|
||||
height: 40%;
|
||||
border-width: 2px;
|
||||
}
|
||||
110
web_src/css/repo/home.css
Normal file
110
web_src/css/repo/home.css
Normal file
@@ -0,0 +1,110 @@
|
||||
.repo-grid-filelist-sidebar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 280px;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: var(--page-spacing);
|
||||
}
|
||||
|
||||
.repo-home-filelist {
|
||||
min-width: 0;
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 4;
|
||||
}
|
||||
|
||||
.repo-home-sidebar-top {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.repo-home-sidebar-bottom {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.repo-home-sidebar-top a:hover,
|
||||
.repo-home-sidebar-bottom a:hover {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.repo-home-sidebar-header {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 16px;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.repo-grid-filelist-sidebar {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
.repo-home-filelist {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.repo-home-sidebar-top {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
.repo-home-sidebar-bottom {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-view-container {
|
||||
display: flex;
|
||||
gap: var(--page-spacing);
|
||||
}
|
||||
|
||||
.repo-view-file-tree-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 15%;
|
||||
min-width: 0;
|
||||
max-height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.repo-view-file-tree-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-view-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.language-stats {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 0;
|
||||
height: 10px;
|
||||
white-space: nowrap;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.language-stats-details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.language-stats-details .item {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25em;
|
||||
padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
|
||||
text-decoration: none;
|
||||
}
|
||||
44
web_src/css/repo/issue-card.css
Normal file
44
web_src/css/repo/issue-card.css
Normal file
@@ -0,0 +1,44 @@
|
||||
.issue-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: stretch;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--color-secondary);
|
||||
background: var(--color-card);
|
||||
color: var(--color-text); /* it can't inherit from parent because the card already has its own background */
|
||||
}
|
||||
|
||||
.issue-card-icon,
|
||||
.issue-card-unpin {
|
||||
margin-top: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.issue-card-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.issue-card.sortable-chosen .issue-card-title {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.issue-card-bottom {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.issue-card-bottom-part {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: fit-content;
|
||||
max-height: fit-content;
|
||||
}
|
||||
58
web_src/css/repo/issue-label.css
Normal file
58
web_src/css/repo/issue-label.css
Normal file
@@ -0,0 +1,58 @@
|
||||
.issue-label-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.issue-label-list > .item {
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
display: flex;
|
||||
padding: 1em 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.issue-label-list > .item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.issue-label-list > .item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.issue-label-list > .item .label-title {
|
||||
width: 33%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.issue-label-list > .item .label-issues {
|
||||
width: 33%;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.issue-label-list > .item .label-operation {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.issue-label-list > .item .label-operation a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.issue-label-list > .item.org-label {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.label-operation .label {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.archived-label-hint {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 5px;
|
||||
}
|
||||
130
web_src/css/repo/issue-list.css
Normal file
130
web_src/css/repo/issue-list.css
Normal file
@@ -0,0 +1,130 @@
|
||||
.issue-list-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.issue-list-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.issue-list-toolbar-right .filter.menu {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.issue-list-toolbar-right .dropdown .menu {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
}
|
||||
.issue-list-navbar {
|
||||
order: 0;
|
||||
}
|
||||
.issue-list-new {
|
||||
order: 1;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.issue-list-search {
|
||||
order: 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#issue-list .branches {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#issue-list .branches .branch {
|
||||
background-color: var(--color-secondary-alpha-50);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#issue-list .branches .truncated-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#issue-list .checklist progress {
|
||||
margin-left: 2px;
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#issue-list .checklist progress::-webkit-progress-value {
|
||||
background-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
#issue-list .checklist progress::-moz-progress-bar {
|
||||
background-color: var(--color-secondary-dark-4);
|
||||
}
|
||||
|
||||
.label-filter-archived-toggle {
|
||||
margin: 8px 10px;
|
||||
font-size: 12px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.label-filter-exclude-info {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
margin-right: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* for "title (#123)":
|
||||
<span "title-full-link-hover">
|
||||
<a "title-full-link muted">title (</a>
|
||||
<a "muted">#123</a>
|
||||
<a "title-full-link muted">)</a>
|
||||
</span>
|
||||
* hover on "title": also highlight the right parentheses
|
||||
* hover on "#123": don't highlight other parts
|
||||
*/
|
||||
.title-full-link-hover:not(:has(:not(.title-full-link):hover)):hover > a.title-full-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.list-item-large-title {
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.list-item-title-progress {
|
||||
width: 200px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.list-item-secondary-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap-block);
|
||||
justify-content: space-between;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.list-item-secondary-bar a {
|
||||
color: var(--color-text-light-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.list-item-secondary-bar a:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
44
web_src/css/repo/list-header.css
Normal file
44
web_src/css/repo/list-header.css
Normal file
@@ -0,0 +1,44 @@
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.list-header-search {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
min-width: 200px; /* to enable flexbox wrapping on mobile */
|
||||
}
|
||||
|
||||
.list-header-search > .ui.input {
|
||||
flex: 1;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.list-header-search > .ui.input .ui.dropdown {
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
.list-header-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-header-filters > .item {
|
||||
padding: 5px 0 5px 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.list-header-search {
|
||||
order: 0;
|
||||
}
|
||||
.list-header-toggle {
|
||||
order: 1;
|
||||
}
|
||||
.list-header-filters {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
43
web_src/css/repo/packages.css
Normal file
43
web_src/css/repo/packages.css
Normal file
@@ -0,0 +1,43 @@
|
||||
.packages-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.packages-content-left {
|
||||
margin: 0 !important;
|
||||
width: calc(100% - 250px - 16px);
|
||||
}
|
||||
|
||||
.packages-content-left .markup {
|
||||
margin: var(--gap-block) 0;
|
||||
}
|
||||
|
||||
.packages-content-left .markup pre.code-block {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.package-manual-vars {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.package-manual-vars select {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.packages-content-right {
|
||||
margin: 0 !important;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.packages-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.packages-content-left,
|
||||
.packages-content-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
70
web_src/css/repo/reactions.css
Normal file
70
web_src/css/repo/reactions.css
Normal file
@@ -0,0 +1,70 @@
|
||||
.bottom-reactions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin: 0 1em 1em;
|
||||
}
|
||||
|
||||
.timeline-item .conversation-holder .bottom-reactions {
|
||||
margin: 1em 0 0 24px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label {
|
||||
padding: 2px 6px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label.primary {
|
||||
background-color: var(--color-reaction-active-bg) !important;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label:hover {
|
||||
background-color: var(--color-reaction-hover-bg) !important;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label.disabled {
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label .reaction {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottom-reactions .ui.label .reaction img {
|
||||
height: 16px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.bottom-reactions .reaction-count {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ui.dropdown.select-reaction .menu.visible {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.ui.dropdown.select-reaction .menu > .item {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 16px;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bottom-reactions .select-reaction {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.bottom-reactions .select-reaction:not(.active) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bottom-reactions:hover .select-reaction {
|
||||
visibility: visible;
|
||||
}
|
||||
97
web_src/css/repo/release-tag.css
Normal file
97
web_src/css/repo/release-tag.css
Normal file
@@ -0,0 +1,97 @@
|
||||
#release-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--page-spacing);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#release-list .release-list-title {
|
||||
font-size: 2rem;
|
||||
font-weight: var(--font-weight-normal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#release-list .release-entry {
|
||||
display: flex;
|
||||
gap: var(--page-spacing);
|
||||
}
|
||||
|
||||
#release-list .release-entry .meta {
|
||||
flex: 0 0 150px;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#release-list .release-entry .detail {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#release-list .release-entry {
|
||||
flex-direction: column;
|
||||
gap: var(--page-spacing);
|
||||
}
|
||||
#release-list .release-entry .meta {
|
||||
margin-left: 6px;
|
||||
flex-direction: row;
|
||||
flex-basis: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#release-list .release-branch-tag-selector {
|
||||
margin-left: auto;
|
||||
}
|
||||
#release-list .branch-selector-dropdown .menu { /* open menu to left */
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#release-list .release-entry .detail .author img {
|
||||
margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */
|
||||
}
|
||||
|
||||
#release-list .release-entry .attachment-list {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#release-list .release-entry .attachment-list > .item {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#release-list .release-entry .attachment-list > .item a {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#release-list .release-entry .attachment-list .attachment-right-info {
|
||||
flex-shrink: 0;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#release-list .release-entry .detail .download[open] summary {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#release-list .download-icon {
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
#release-list .release-entry .detail .download .list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#tags-table .tag-list-row-title {
|
||||
font-size: 18px;
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
57
web_src/css/repo/wiki.css
Normal file
57
web_src/css/repo/wiki.css
Normal file
@@ -0,0 +1,57 @@
|
||||
.repository.wiki .wiki-pages-list .wiki-git-entry {
|
||||
margin-left: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-pages-list tr:hover .wiki-git-entry {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.repository.wiki .markup {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-content-parts .markup {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-content-main.with-sidebar {
|
||||
float: left;
|
||||
width: 80%;
|
||||
max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-content-sidebar {
|
||||
float: right;
|
||||
width: calc(20% - 1em);
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-content-footer {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-content-toc ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 5px 0 5px 1em;
|
||||
}
|
||||
|
||||
.repository.wiki .wiki-content-toc ul ul {
|
||||
border-left: 1px var(--color-secondary);
|
||||
border-left-style: dashed;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.repository.wiki .wiki-content-main.with-sidebar,
|
||||
.repository.wiki .wiki-content-sidebar {
|
||||
float: none;
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
197
web_src/css/review.css
Normal file
197
web_src/css/review.css
Normal file
@@ -0,0 +1,197 @@
|
||||
.ui.button.add-code-comment {
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
margin-left: -22px;
|
||||
min-height: 0;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
transform: scale(1);
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.ui.button.add-code-comment:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.lines-escape .toggle-escape-button {
|
||||
margin: -1px 2px 0;
|
||||
}
|
||||
|
||||
.lines-escape .toggle-escape-button::before {
|
||||
content: "";
|
||||
display: inline-flex;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: var(--color-yellow); /* TODO: maybe it needs a new kind of color, there is no suitable "warning" color in the current palette */
|
||||
mask-image: var(--octicon-alert-fill);
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.repository .diff-file-box .code-diff td.lines-escape {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.diff-file-box .lines-code:hover .ui.button.add-code-comment {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.button.add-code-comment:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repository .diff-file-box .code-diff .add-comment-left,
|
||||
.repository .diff-file-box .code-diff .add-comment-right {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.comment-code-cloud {
|
||||
padding: 0.5rem !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-diff .conversation-holder .comment-code-cloud {
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.comment-code-cloud .comments .comment {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comment-code-cloud .editor-statusbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-code-cloud .footer {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.diff-file-body .comment-form {
|
||||
margin: 0 0 0 3em;
|
||||
}
|
||||
|
||||
.file-comment {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.code-expander-buttons {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-expander-buttons .code-comment-more {
|
||||
position: absolute;
|
||||
line-height: 12px;
|
||||
padding: 2px 4px;
|
||||
font-size: 10px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
border-radius: 8px !important;
|
||||
left: -12px;
|
||||
top: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.code-expander-button {
|
||||
border: none;
|
||||
color: var(--color-text-light);
|
||||
height: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: var(--color-expand-button);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* expand direction "updown" is both ways with two buttons */
|
||||
.code-expander-buttons[data-expand-direction="updown"] .code-expander-button {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.code-expander-button:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.review-box-panel .ui.segment {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* See the comment of createCommentEasyMDE() for the review editor */
|
||||
/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
|
||||
.review-box-panel .CodeMirror-scroll {
|
||||
min-height: 80px;
|
||||
max-height: calc(100vh - 360px);
|
||||
}
|
||||
|
||||
.review-box-panel .combo-markdown-editor {
|
||||
width: 730px; /* this width matches current EasyMDE's toolbar's width */
|
||||
max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
|
||||
}
|
||||
|
||||
#review-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#review-box .review-comments-counter {
|
||||
background-color: var(--color-primary-light-4);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
#review-box:hover .review-comments-counter {
|
||||
background-color: var(--color-primary-light-5);
|
||||
}
|
||||
|
||||
#review-box .review-comments-counter[data-pending-comment-number="0"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pull.files.diff .comment {
|
||||
scroll-margin-top: 99px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.pull.files.diff .comment {
|
||||
scroll-margin-top: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.changed-since-last-review {
|
||||
border: 1px var(--color-accent) solid;
|
||||
background-color: var(--color-small-accent);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px 8px;
|
||||
margin: -8px 0; /* just like other buttons in the diff box header */
|
||||
font-size: 0.857rem; /* just like .ui.tiny.button */
|
||||
}
|
||||
|
||||
.viewed-file-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.857rem; /* just like .ui.tiny.button */
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.viewed-file-form {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.viewed-file-form input {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.viewed-file-checked-form {
|
||||
background-color: var(--color-small-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
#viewed-files-summary {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
}
|
||||
124
web_src/css/shared/flex-list.css
Normal file
124
web_src/css/shared/flex-list.css
Normal file
@@ -0,0 +1,124 @@
|
||||
/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
|
||||
.flex-relaxed-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap-block);
|
||||
min-width: 0; /* keep the same style as "flex-text-block" etc, make the text content wrap/ellipse correctly */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.flex-relaxed-list > .divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* items have dividers between them, the dividers align with items */
|
||||
.flex-divided-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.flex-divided-list > .item {
|
||||
padding: 10px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex-divided-list > .item + .item {
|
||||
border-top: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.items-with-main > .item {
|
||||
display: flex;
|
||||
gap: var(--gap-block);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-leading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap-inline);
|
||||
flex-grow: 1;
|
||||
flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */
|
||||
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-header {
|
||||
display: flex;
|
||||
gap: var(--gap-inline);
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-with-main > .item a:not(.label, .button):hover {
|
||||
color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-trailing {
|
||||
display: flex;
|
||||
gap: var(--gap-block);
|
||||
align-items: center;
|
||||
flex-grow: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-title {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--gap-inline);
|
||||
max-width: 100%;
|
||||
color: var(--color-text);
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
overflow-wrap: anywhere;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-title a {
|
||||
color: var(--color-text);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap-inline);
|
||||
color: var(--color-text-light-2);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.items-with-main > .item .item-body a {
|
||||
color: inherit;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* special rules to make the list work with existing UI elements */
|
||||
.flex-divided-list.items-px-default > .item {
|
||||
padding-left: 1em; /* matches ".ui.segment" padding */
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* If there is a divider besides the flex-list, some padding/margin are not needs */
|
||||
.divider + .flex-divided-list > .item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.flex-divided-list + .divider {
|
||||
margin-top: 0;
|
||||
}
|
||||
53
web_src/css/shared/settings.css
Normal file
53
web_src/css/shared/settings.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.ui.vertical.menu > details.item {
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item summary {
|
||||
display: flex;
|
||||
justify-content: space-between; /* make the "::after" right-aligned */
|
||||
align-items: center;
|
||||
padding: 16px 13px; /* match Fomantic menu item padding */
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item > summary::marker, /* Chrome, Edge, Firefox */
|
||||
.ui.vertical.menu > details.item > summary::-webkit-details-marker /* Safari */ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item > summary::after {
|
||||
transition: transform 0.25s ease;
|
||||
content: "";
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
mask-size: cover;
|
||||
mask-image: var(--octicon-chevron-right);
|
||||
background: currentcolor;
|
||||
border: 1px solid var(--color-body); /* workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 */
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item[open] > summary::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* default toggleable details menu: items don't have menu item padding, don't change background color on hover or active */
|
||||
.ui.vertical.menu > details.item > .menu {
|
||||
margin: 0 0 10px; /* only need the space between the current details menu and next item */
|
||||
}
|
||||
|
||||
/* full width toggleable details menu: items have menu item padding, change background color on hover and active */
|
||||
.ui.vertical.menu > details.item > .menu.items-full-width {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item > .menu.items-full-width > .item {
|
||||
padding: 16px 13px; /* match Fomantic menu item padding */
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item > .menu.items-full-width > .item.active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.vertical.menu > details.item > .menu.items-full-width > .item:hover {
|
||||
background: var(--color-hover); /* ".ui.vertical.menu .menu .item" resets the hover background, so we need to add it again */
|
||||
}
|
||||
13
web_src/css/swagger-render.css
Normal file
13
web_src/css/swagger-render.css
Normal file
@@ -0,0 +1,13 @@
|
||||
@import "swagger-ui-dist/swagger-ui.css";
|
||||
|
||||
html,
|
||||
html body,
|
||||
html .swagger-ui,
|
||||
html .swagger-ui .scheme-container {
|
||||
background: var(--gitea-iframe-bgcolor, var(--color-box-body)) !important;
|
||||
}
|
||||
|
||||
/* swagger's bug: the selector was incorrectly written in "thead": "html.dark-mode .swagger-ui .opblock.opblock-get thead tr td" */
|
||||
html.dark-mode .swagger-ui table.headers td {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
60
web_src/css/swagger-standalone.css
Normal file
60
web_src/css/swagger-standalone.css
Normal file
@@ -0,0 +1,60 @@
|
||||
@import "swagger-render.css";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.swagger-page-links {
|
||||
/* overlay the top-right of the info block by replicating swagger-ui's ".wrapper" and ".info" metrics */
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 1460px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
pointer-events: none; /* only the links themselves are clickable */
|
||||
}
|
||||
|
||||
/* below this width the links would overlap the title, flow above swagger-ui instead */
|
||||
@media (max-width: 991.98px) {
|
||||
.swagger-page-links {
|
||||
position: static;
|
||||
padding: 10px 20px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* mimic the regular gitea button, the main site CSS is not loaded on this page */
|
||||
.swagger-page-links a {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.swagger-page-links a:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.swagger-page-links a:active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.swagger-page-links svg {
|
||||
fill: currentcolor;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "./theme-gitea-light-protanopia-deuteranopia.css" (prefers-color-scheme: light);
|
||||
@import "./theme-gitea-dark-protanopia-deuteranopia.css" (prefers-color-scheme: dark);
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Auto";
|
||||
--theme-colorblind-type: "red-green";
|
||||
--theme-color-scheme: "auto";
|
||||
}
|
||||
8
web_src/css/themes/theme-gitea-auto-tritanopia.css
Normal file
8
web_src/css/themes/theme-gitea-auto-tritanopia.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "./theme-gitea-light-tritanopia.css" (prefers-color-scheme: light);
|
||||
@import "./theme-gitea-dark-tritanopia.css" (prefers-color-scheme: dark);
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Auto";
|
||||
--theme-colorblind-type: "blue-yellow";
|
||||
--theme-color-scheme: "auto";
|
||||
}
|
||||
7
web_src/css/themes/theme-gitea-auto.css
Normal file
7
web_src/css/themes/theme-gitea-auto.css
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "./theme-gitea-light.css" (prefers-color-scheme: light);
|
||||
@import "./theme-gitea-dark.css" (prefers-color-scheme: dark);
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Auto";
|
||||
--theme-color-scheme: "auto";
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "./theme-gitea-dark.css";
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Dark";
|
||||
--theme-colorblind-type: "red-green";
|
||||
--theme-color-scheme: "dark";
|
||||
}
|
||||
|
||||
/* red/green colorblind-friendly colors */
|
||||
:root {
|
||||
--color-diff-added-fg: #58a6ff;
|
||||
--color-diff-added-linenum-bg: #243d5d;
|
||||
--color-diff-added-row-bg: #132339;
|
||||
--color-diff-added-word-bg: #214d87;
|
||||
--color-diff-removed-fg: #f0883e;
|
||||
--color-diff-removed-linenum-bg: #5b361c;
|
||||
--color-diff-removed-row-bg: #3c2419;
|
||||
--color-diff-removed-word-bg: #824e1f;
|
||||
}
|
||||
15
web_src/css/themes/theme-gitea-dark-tritanopia.css
Normal file
15
web_src/css/themes/theme-gitea-dark-tritanopia.css
Normal file
@@ -0,0 +1,15 @@
|
||||
@import "./theme-gitea-dark.css";
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Dark";
|
||||
--theme-colorblind-type: "blue-yellow";
|
||||
--theme-color-scheme: "dark";
|
||||
}
|
||||
|
||||
/* blue/yellow colorblind-friendly colors */
|
||||
:root {
|
||||
--color-diff-added-fg: #58a6ff;
|
||||
--color-diff-added-linenum-bg: #243d5d;
|
||||
--color-diff-added-row-bg: #132339;
|
||||
--color-diff-added-word-bg: #214d87;
|
||||
}
|
||||
337
web_src/css/themes/theme-gitea-dark.css
Normal file
337
web_src/css/themes/theme-gitea-dark.css
Normal file
@@ -0,0 +1,337 @@
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Dark";
|
||||
--theme-color-scheme: "dark";
|
||||
}
|
||||
|
||||
:root {
|
||||
--is-dark-theme: true;
|
||||
--color-primary: #4183c4;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-primary-dark-1: #548fca;
|
||||
--color-primary-dark-2: #679cd0;
|
||||
--color-primary-dark-3: #7aa8d6;
|
||||
--color-primary-dark-4: #8db5dc;
|
||||
--color-primary-dark-5: #b3cde7;
|
||||
--color-primary-dark-6: #d9e6f3;
|
||||
--color-primary-dark-7: #f4f8fb;
|
||||
--color-primary-light-1: #3876b3;
|
||||
--color-primary-light-2: #31699f;
|
||||
--color-primary-light-3: #2b5c8b;
|
||||
--color-primary-light-4: #254f77;
|
||||
--color-primary-light-5: #193450;
|
||||
--color-primary-light-6: #0c1a28;
|
||||
--color-primary-light-7: #04080c;
|
||||
--color-primary-alpha-10: #4183c419;
|
||||
--color-primary-alpha-20: #4183c433;
|
||||
--color-primary-alpha-30: #4183c44b;
|
||||
--color-primary-alpha-40: #4183c466;
|
||||
--color-primary-alpha-50: #4183c480;
|
||||
--color-primary-alpha-60: #4183c499;
|
||||
--color-primary-alpha-70: #4183c4b3;
|
||||
--color-primary-alpha-80: #4183c4cc;
|
||||
--color-primary-alpha-90: #4183c4e1;
|
||||
--color-primary-hover: var(--color-primary-light-1);
|
||||
--color-primary-active: var(--color-primary-light-2);
|
||||
--color-secondary: #3f4248;
|
||||
--color-secondary-dark-1: #46494f;
|
||||
--color-secondary-dark-2: #4f5259;
|
||||
--color-secondary-dark-3: #5e626a;
|
||||
--color-secondary-dark-4: #6f747d;
|
||||
--color-secondary-dark-5: #7d828c;
|
||||
--color-secondary-dark-6: #8b8f98;
|
||||
--color-secondary-dark-7: #999da4;
|
||||
--color-secondary-dark-8: #a8abb1;
|
||||
--color-secondary-dark-9: #aeb1b8;
|
||||
--color-secondary-dark-10: #bbbec3;
|
||||
--color-secondary-dark-11: #c8cacf;
|
||||
--color-secondary-dark-12: #d2d4d7;
|
||||
--color-secondary-dark-13: #d5d6d9;
|
||||
--color-secondary-light-1: #35373c;
|
||||
--color-secondary-light-2: #2c2e32;
|
||||
--color-secondary-light-3: #1f2124;
|
||||
--color-secondary-light-4: #191a1c;
|
||||
--color-secondary-alpha-10: #3f424819;
|
||||
--color-secondary-alpha-20: #3f424833;
|
||||
--color-secondary-alpha-30: #3f42484b;
|
||||
--color-secondary-alpha-40: #3f424866;
|
||||
--color-secondary-alpha-50: #3f424880;
|
||||
--color-secondary-alpha-60: #3f424899;
|
||||
--color-secondary-alpha-70: #3f4248b3;
|
||||
--color-secondary-alpha-80: #3f4248cc;
|
||||
--color-secondary-alpha-90: #3f4248e1;
|
||||
--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 colors - used for actions console and console files */
|
||||
--color-console-fg: #f8f8f8;
|
||||
--color-console-fg-subtle: #c1c3c8;
|
||||
--color-console-bg: #191a1c;
|
||||
--color-console-border: #313338;
|
||||
--color-console-hover-bg: #2a2c30;
|
||||
--color-console-active-bg: #313338;
|
||||
--color-console-menu-bg: #292b2e;
|
||||
--color-console-menu-border: #46494f;
|
||||
--color-console-link: #969aa1;
|
||||
/* named colors */
|
||||
--color-red: #cc4848;
|
||||
--color-orange: #cc580c;
|
||||
--color-yellow: #cc9903;
|
||||
--color-olive: #91a313;
|
||||
--color-green: #87ab63;
|
||||
--color-teal: #00918a;
|
||||
--color-blue: #3a8ac6;
|
||||
--color-violet: #906ae1;
|
||||
--color-purple: #b259d0;
|
||||
--color-pink: #d22e8b;
|
||||
--color-brown: #a47252;
|
||||
--color-black: #202225;
|
||||
/* light variants - produced via Sass scale-color(color, $lightness: +10%) */
|
||||
--color-red-light: #d15a5a;
|
||||
--color-orange-light: #f6a066;
|
||||
--color-yellow-light: #eaaf03;
|
||||
--color-olive-light: #abc016;
|
||||
--color-green-light: #93b373;
|
||||
--color-teal-light: #00b6ad;
|
||||
--color-blue-light: #4e96cc;
|
||||
--color-violet-light: #9b79e4;
|
||||
--color-purple-light: #ba6ad5;
|
||||
--color-pink-light: #d74397;
|
||||
--color-brown-light: #b08061;
|
||||
--color-black-light: #45484e;
|
||||
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
|
||||
--color-red-dark-1: #c23636;
|
||||
--color-orange-dark-1: #f38236;
|
||||
--color-yellow-dark-1: #b88a03;
|
||||
--color-olive-dark-1: #839311;
|
||||
--color-green-dark-1: #7a9e55;
|
||||
--color-teal-dark-1: #00837c;
|
||||
--color-blue-dark-1: #347cb3;
|
||||
--color-violet-dark-1: #7b4edb;
|
||||
--color-purple-dark-1: #a742c9;
|
||||
--color-pink-dark-1: #be297d;
|
||||
--color-brown-dark-1: #94674a;
|
||||
--color-black-dark-1: #2e3033;
|
||||
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
|
||||
--color-red-dark-2: #ad3030;
|
||||
--color-orange-dark-2: #f16e17;
|
||||
--color-yellow-dark-2: #a37a02;
|
||||
--color-olive-dark-2: #74820f;
|
||||
--color-green-dark-2: #6c8c4c;
|
||||
--color-teal-dark-2: #00746e;
|
||||
--color-blue-dark-2: #2e6e9f;
|
||||
--color-violet-dark-2: #6733d6;
|
||||
--color-purple-dark-2: #9834b9;
|
||||
--color-pink-dark-2: #a9246f;
|
||||
--color-brown-dark-2: #835b42;
|
||||
--color-black-dark-2: #292b2e;
|
||||
/* ansi colors used for actions console and console files */
|
||||
--color-ansi-black: #202225;
|
||||
--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: #45484e;
|
||||
--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);
|
||||
/* 16-color series */
|
||||
--color-series-16-0: #7db233;
|
||||
--color-series-16-1: #499a37;
|
||||
--color-series-16-2: #ce4751;
|
||||
--color-series-16-3: #8f9121;
|
||||
--color-series-16-4: #ac32a6;
|
||||
--color-series-16-5: #7445e9;
|
||||
--color-series-16-6: #c67d28;
|
||||
--color-series-16-7: #4db392;
|
||||
--color-series-16-8: #aa4d30;
|
||||
--color-series-16-9: #2a6f84;
|
||||
--color-series-16-10: #c45327;
|
||||
--color-series-16-11: #3d965c;
|
||||
--color-series-16-12: #792a93;
|
||||
--color-series-16-13: #439d73;
|
||||
--color-series-16-14: #103aad;
|
||||
--color-series-16-15: #982e85;
|
||||
/* other colors */
|
||||
--color-grey: #3d3f44;
|
||||
--color-grey-light: #898d96;
|
||||
--color-gold: #b1983b;
|
||||
--color-white: #ffffff;
|
||||
--color-diff-added-fg: #93b373;
|
||||
--color-diff-added-linenum-bg: #274227;
|
||||
--color-diff-added-row-bg: #203224;
|
||||
--color-diff-added-row-border: #314a37;
|
||||
--color-diff-added-word-bg: #3c653c;
|
||||
--color-diff-moved-row-bg: #818044;
|
||||
--color-diff-moved-row-border: #bcca6f;
|
||||
--color-diff-removed-fg: #fb5f5b;
|
||||
--color-diff-removed-linenum-bg: #482121;
|
||||
--color-diff-removed-row-bg: #301e1e;
|
||||
--color-diff-removed-row-border: #634343;
|
||||
--color-diff-removed-word-bg: #6f3333;
|
||||
--color-diff-inactive: #25272a;
|
||||
--color-error-border: #763232;
|
||||
--color-error-bg: #322226;
|
||||
--color-error-bg-active: #49262a;
|
||||
--color-error-bg-hover: #3c2427;
|
||||
--color-error-text: #f85149;
|
||||
--color-success-border: #225633;
|
||||
--color-success-bg: #1c3329;
|
||||
--color-success-text: #3fb950;
|
||||
--color-warning-border: #5f481a;
|
||||
--color-warning-bg: #342e1f;
|
||||
--color-warning-text: #d29922;
|
||||
--color-info-border: #254a7e;
|
||||
--color-info-bg: #1b283a;
|
||||
--color-info-text: #2f81f7;
|
||||
--color-priority-border: #4a268d;
|
||||
--color-priority-bg: #251c39;
|
||||
--color-priority-text: #a371f7;
|
||||
--color-red-badge: #db2828;
|
||||
--color-red-badge-bg: #db28281a;
|
||||
--color-red-badge-hover-bg: #db28284d;
|
||||
--color-green-badge: #21ba45;
|
||||
--color-green-badge-bg: #21ba451a;
|
||||
--color-green-badge-hover-bg: #21ba454d;
|
||||
--color-yellow-badge: #fbbd08;
|
||||
--color-yellow-badge-bg: #fbbd081a;
|
||||
--color-yellow-badge-hover-bg: #fbbd084d;
|
||||
--color-orange-badge: #f2711c;
|
||||
--color-orange-badge-bg: #f2711c1a;
|
||||
--color-orange-badge-hover-bg: #f2711c4d;
|
||||
--color-git: #f05133;
|
||||
--color-logo: #609926;
|
||||
/* target-based colors */
|
||||
--color-body: #1e1f20;
|
||||
--color-box-header: #1b1c1e;
|
||||
--color-box-body: #161718;
|
||||
--color-box-body-highlight: #202124;
|
||||
--color-text-dark: #f8f8f8;
|
||||
--color-text: #d2d4d8;
|
||||
--color-text-light: #c0c2c7;
|
||||
--color-text-light-1: #aaadb4;
|
||||
--color-text-light-2: #969aa1;
|
||||
--color-text-light-3: #80858f;
|
||||
--color-footer: var(--color-nav-bg);
|
||||
--color-timeline: #383b40;
|
||||
--color-input-text: var(--color-text-dark);
|
||||
--color-input-background: #191a1c;
|
||||
--color-input-toggle-background: #323438;
|
||||
--color-input-border: var(--color-secondary-dark-1);
|
||||
--color-light: #0b0b0c28;
|
||||
--color-light-border: #f3f3f428;
|
||||
--color-hover: #f3f3f419;
|
||||
--color-hover-opaque: #232528; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
|
||||
--color-active: #f3f3f424;
|
||||
--color-menu: #191a1c;
|
||||
--color-card: #191a1c;
|
||||
--color-markup-table-row: #f3f3f40f;
|
||||
--color-markup-code-block: #f3f3f412;
|
||||
--color-markup-code-inline: #f3f3f428;
|
||||
--color-button: #191a1c;
|
||||
--color-code-bg: #161718;
|
||||
--color-shadow: #0b0b0c58;
|
||||
--color-shadow-opaque: #0b0b0c;
|
||||
--color-secondary-bg: #2e3033;
|
||||
--color-expand-button: #333539;
|
||||
--color-placeholder-text: var(--color-text-light-3);
|
||||
--color-editor-line-highlight: var(--color-secondary-alpha-40);
|
||||
--color-editor-selection: var(--color-primary-alpha-50);
|
||||
--color-project-column-bg: var(--color-secondary-light-2);
|
||||
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
|
||||
--color-reaction-bg: #f3f3f412;
|
||||
--color-reaction-hover-bg: var(--color-primary-light-4);
|
||||
--color-reaction-active-bg: var(--color-primary-light-5);
|
||||
--color-tooltip-text: #fafafa;
|
||||
--color-tooltip-bg: #2b2e33;
|
||||
--color-nav-bg: #18191b;
|
||||
--color-nav-hover-bg: var(--color-secondary-light-1);
|
||||
--color-nav-text: var(--color-text);
|
||||
--color-secondary-nav-bg: #1a1b1e;
|
||||
--color-label-text: var(--color-text);
|
||||
--color-label-bg: #7a7f8a4b;
|
||||
--color-label-hover-bg: #7a7f8aa0;
|
||||
--color-label-active-bg: #7a7f8aff;
|
||||
--color-accent: var(--color-primary-light-1);
|
||||
--color-small-accent: var(--color-primary-light-5);
|
||||
--color-highlight-fg: #87651e;
|
||||
--color-highlight-bg: #443a27;
|
||||
--color-overlay-backdrop: #080808c0;
|
||||
--color-danger: var(--color-red);
|
||||
--color-transparency-grid-light: #2a2a2a;
|
||||
--color-transparency-grid-dark: #1a1a1a;
|
||||
--color-workflow-edge-hover: #666a73;
|
||||
--color-syntax-keyword: #ff8854;
|
||||
--color-syntax-bool: #25bbc9;
|
||||
--color-syntax-control: #dd9e17;
|
||||
--color-syntax-name: #fabd2f;
|
||||
--color-syntax-type: #eb8cb3;
|
||||
--color-syntax-number: #63b2dd;
|
||||
--color-syntax-operator: #ff8854;
|
||||
--color-syntax-regexp: #b89de4;
|
||||
--color-syntax-string: #95b62a;
|
||||
--color-syntax-comment: #8898b0;
|
||||
--color-syntax-invalid: #ff8686;
|
||||
--color-syntax-link: var(--color-primary);
|
||||
--color-syntax-tag: #ff8854;
|
||||
--color-syntax-attribute: #c792ff;
|
||||
--color-syntax-property: #55afff;
|
||||
--color-syntax-variable: #e29b33;
|
||||
--color-syntax-string-special: #dd9e17;
|
||||
--color-syntax-escape: #c7a618;
|
||||
--color-syntax-entity: #c792ff;
|
||||
--color-syntax-preproc: #4cbe7a;
|
||||
--color-syntax-preproc-file: #63b2dd;
|
||||
--color-syntax-decorator: #4cbe7a;
|
||||
--color-syntax-namespace: #c9d1d9;
|
||||
--color-syntax-name-pseudo: #c792ff;
|
||||
--color-syntax-comment-special: #b89de4;
|
||||
--color-syntax-text: #c9d1d9;
|
||||
--color-syntax-text-alt: #b9bcc7;
|
||||
--color-syntax-punctuation: #d2d4db;
|
||||
--color-syntax-whitespace: #7f8699;
|
||||
--color-syntax-diff-fg: #ffffff;
|
||||
--color-syntax-deleted-bg: #5f3737;
|
||||
--color-syntax-inserted-bg: #3a523a;
|
||||
--color-syntax-emph: #d1a242;
|
||||
--color-syntax-strong: #e29b33;
|
||||
--color-syntax-heading: #dd9e17;
|
||||
--color-syntax-subheading: #95b62a;
|
||||
--color-syntax-output: #8898b0;
|
||||
--color-syntax-prompt: #e29b33;
|
||||
--color-syntax-traceback: #ff8686;
|
||||
--color-syntax-matching-bracket-bg: #00918a48;
|
||||
--color-syntax-nonmatching-bracket-bg: #cc484848;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: 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);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import "./theme-gitea-light.css";
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Light";
|
||||
--theme-colorblind-type: "red-green";
|
||||
--theme-color-scheme: "light";
|
||||
}
|
||||
|
||||
/* red/green colorblind-friendly colors */
|
||||
:root {
|
||||
--color-diff-added-fg: #0860cc;
|
||||
--color-diff-added-linenum-bg: #b6e3ff;
|
||||
--color-diff-added-row-bg: #ddf4ff;
|
||||
--color-diff-added-word-bg: #b6e3ff;
|
||||
--color-diff-removed-fg: #a84400;
|
||||
--color-diff-removed-linenum-bg: #ffd8b5;
|
||||
--color-diff-removed-row-bg: #fff1e5;
|
||||
--color-diff-removed-word-bg: #ffd8b5;
|
||||
}
|
||||
15
web_src/css/themes/theme-gitea-light-tritanopia.css
Normal file
15
web_src/css/themes/theme-gitea-light-tritanopia.css
Normal file
@@ -0,0 +1,15 @@
|
||||
@import "./theme-gitea-light.css";
|
||||
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Light";
|
||||
--theme-colorblind-type: "blue-yellow";
|
||||
--theme-color-scheme: "light";
|
||||
}
|
||||
|
||||
/* blue/yellow colorblind-friendly colors */
|
||||
:root {
|
||||
--color-diff-added-fg: #0860cc;
|
||||
--color-diff-added-linenum-bg: #b6e3ff;
|
||||
--color-diff-added-row-bg: #ddf4ff;
|
||||
--color-diff-added-word-bg: #b6e3ff;
|
||||
}
|
||||
313
web_src/css/themes/theme-gitea-light.css
Normal file
313
web_src/css/themes/theme-gitea-light.css
Normal file
@@ -0,0 +1,313 @@
|
||||
gitea-theme-meta-info {
|
||||
--theme-display-name: "Light";
|
||||
--theme-color-scheme: "light";
|
||||
}
|
||||
|
||||
:root {
|
||||
--is-dark-theme: false;
|
||||
--color-primary: #4183c4;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-primary-dark-1: #3876b3;
|
||||
--color-primary-dark-2: #31699f;
|
||||
--color-primary-dark-3: #2b5c8b;
|
||||
--color-primary-dark-4: #254f77;
|
||||
--color-primary-dark-5: #193450;
|
||||
--color-primary-dark-6: #0c1a28;
|
||||
--color-primary-dark-7: #04080c;
|
||||
--color-primary-light-1: #548fca;
|
||||
--color-primary-light-2: #679cd0;
|
||||
--color-primary-light-3: #7aa8d6;
|
||||
--color-primary-light-4: #8db5dc;
|
||||
--color-primary-light-5: #b3cde7;
|
||||
--color-primary-light-6: #d9e6f3;
|
||||
--color-primary-light-7: #f4f8fb;
|
||||
--color-primary-alpha-10: #4183c419;
|
||||
--color-primary-alpha-20: #4183c433;
|
||||
--color-primary-alpha-30: #4183c44b;
|
||||
--color-primary-alpha-40: #4183c466;
|
||||
--color-primary-alpha-50: #4183c480;
|
||||
--color-primary-alpha-60: #4183c499;
|
||||
--color-primary-alpha-70: #4183c4b3;
|
||||
--color-primary-alpha-80: #4183c4cc;
|
||||
--color-primary-alpha-90: #4183c4e1;
|
||||
--color-primary-hover: var(--color-primary-dark-1);
|
||||
--color-primary-active: var(--color-primary-dark-2);
|
||||
--color-secondary: #d0d7de;
|
||||
--color-secondary-dark-1: #c7ced5;
|
||||
--color-secondary-dark-2: #b9c0c7;
|
||||
--color-secondary-dark-3: #99a0a7;
|
||||
--color-secondary-dark-4: #899097;
|
||||
--color-secondary-dark-5: #7a8188;
|
||||
--color-secondary-dark-6: #6a7178;
|
||||
--color-secondary-dark-7: #5b6269;
|
||||
--color-secondary-dark-8: #4b5259;
|
||||
--color-secondary-dark-9: #3c434a;
|
||||
--color-secondary-dark-10: #2c333a;
|
||||
--color-secondary-dark-11: #1d242b;
|
||||
--color-secondary-dark-12: #0d141b;
|
||||
--color-secondary-dark-13: #00040b;
|
||||
--color-secondary-light-1: #dee5ec;
|
||||
--color-secondary-light-2: #e4ebf2;
|
||||
--color-secondary-light-3: #ebf2f9;
|
||||
--color-secondary-light-4: #f1f8ff;
|
||||
--color-secondary-alpha-10: #d0d7de19;
|
||||
--color-secondary-alpha-20: #d0d7de33;
|
||||
--color-secondary-alpha-30: #d0d7de4b;
|
||||
--color-secondary-alpha-40: #d0d7de66;
|
||||
--color-secondary-alpha-50: #d0d7de80;
|
||||
--color-secondary-alpha-60: #d0d7de99;
|
||||
--color-secondary-alpha-70: #d0d7deb3;
|
||||
--color-secondary-alpha-80: #d0d7decc;
|
||||
--color-secondary-alpha-90: #d0d7dee1;
|
||||
--color-secondary-button: var(--color-secondary-dark-4);
|
||||
--color-secondary-hover: var(--color-secondary-dark-5);
|
||||
--color-secondary-active: var(--color-secondary-dark-6);
|
||||
/* console colors - used for actions console and console files */
|
||||
--color-console-fg: #0d1117;
|
||||
--color-console-fg-subtle: #40474d;
|
||||
--color-console-bg: #ffffff;
|
||||
--color-console-border: #d0d7de;
|
||||
--color-console-hover-bg: #f1f3f5;
|
||||
--color-console-active-bg: #d0d7de;
|
||||
--color-console-menu-bg: #f8f9fb;
|
||||
--color-console-menu-border: #d0d7de;
|
||||
--color-console-link: #5c656d;
|
||||
/* named colors */
|
||||
--color-red: #db2828;
|
||||
--color-orange: #f2711c;
|
||||
--color-yellow: #fbbd08;
|
||||
--color-olive: #b5cc18;
|
||||
--color-green: #21ba45;
|
||||
--color-teal: #00b5ad;
|
||||
--color-blue: #2185d0;
|
||||
--color-violet: #6435c9;
|
||||
--color-purple: #a333c8;
|
||||
--color-pink: #e03997;
|
||||
--color-brown: #a5673f;
|
||||
--color-black: #1d2328;
|
||||
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
|
||||
--color-red-light: #e45e5e;
|
||||
--color-orange-light: #f59555;
|
||||
--color-yellow-light: #fcce46;
|
||||
--color-olive-light: #d3e942;
|
||||
--color-green-light: #46de6a;
|
||||
--color-teal-light: #08fff4;
|
||||
--color-blue-light: #51a5e3;
|
||||
--color-violet-light: #8b67d7;
|
||||
--color-purple-light: #bb64d8;
|
||||
--color-pink-light: #e86bb1;
|
||||
--color-brown-light: #c58b66;
|
||||
--color-black-light: #4b5b68;
|
||||
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
|
||||
--color-red-dark-1: #c82121;
|
||||
--color-orange-dark-1: #e6630d;
|
||||
--color-yellow-dark-1: #e5ac04;
|
||||
--color-olive-dark-1: #a3b816;
|
||||
--color-green-dark-1: #1ea73e;
|
||||
--color-teal-dark-1: #00a39c;
|
||||
--color-blue-dark-1: #1e78bb;
|
||||
--color-violet-dark-1: #5a30b5;
|
||||
--color-purple-dark-1: #932eb4;
|
||||
--color-pink-dark-1: #db228a;
|
||||
--color-brown-dark-1: #955d39;
|
||||
--color-black-dark-1: #2c3339;
|
||||
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
|
||||
--color-red-dark-2: #b11e1e;
|
||||
--color-orange-dark-2: #cc580c;
|
||||
--color-yellow-dark-2: #cc9903;
|
||||
--color-olive-dark-2: #91a313;
|
||||
--color-green-dark-2: #1a9537;
|
||||
--color-teal-dark-2: #00918a;
|
||||
--color-blue-dark-2: #1a6aa6;
|
||||
--color-violet-dark-2: #502aa1;
|
||||
--color-purple-dark-2: #8229a0;
|
||||
--color-pink-dark-2: #c21e7b;
|
||||
--color-brown-dark-2: #845232;
|
||||
--color-black-dark-2: #131619;
|
||||
/* ansi colors used 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: #46494d;
|
||||
--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);
|
||||
/* 16-color series */
|
||||
--color-series-16-0: #7db233;
|
||||
--color-series-16-1: #499a37;
|
||||
--color-series-16-2: #ce4751;
|
||||
--color-series-16-3: #8f9121;
|
||||
--color-series-16-4: #ac32a6;
|
||||
--color-series-16-5: #7445e9;
|
||||
--color-series-16-6: #c67d28;
|
||||
--color-series-16-7: #4db392;
|
||||
--color-series-16-8: #aa4d30;
|
||||
--color-series-16-9: #2a6f84;
|
||||
--color-series-16-10: #c45327;
|
||||
--color-series-16-11: #3d965c;
|
||||
--color-series-16-12: #792a93;
|
||||
--color-series-16-13: #439d73;
|
||||
--color-series-16-14: #103aad;
|
||||
--color-series-16-15: #982e85;
|
||||
/* other colors */
|
||||
--color-grey: #697077;
|
||||
--color-grey-light: #7c838a;
|
||||
--color-gold: #a1882b;
|
||||
--color-white: #ffffff;
|
||||
--color-diff-added-fg: #177231;
|
||||
--color-diff-added-linenum-bg: #d1f8d9;
|
||||
--color-diff-added-row-bg: #e6ffed;
|
||||
--color-diff-added-row-border: #e6ffed;
|
||||
--color-diff-added-word-bg: #acf2bd;
|
||||
--color-diff-moved-row-bg: #f1f8d1;
|
||||
--color-diff-moved-row-border: #d0e27f;
|
||||
--color-diff-removed-fg: #c61f2b;
|
||||
--color-diff-removed-linenum-bg: #ffcecb;
|
||||
--color-diff-removed-row-bg: #ffeef0;
|
||||
--color-diff-removed-row-border: #f1c0c0;
|
||||
--color-diff-removed-word-bg: #fdb8c0;
|
||||
--color-diff-inactive: #f0f2f4;
|
||||
--color-error-border: #ff818266;
|
||||
--color-error-bg: #ffebe9;
|
||||
--color-error-bg-active: #ffcecb;
|
||||
--color-error-bg-hover: #ffdcd7;
|
||||
--color-error-text: #d1242f;
|
||||
--color-success-border: #4ac26b66;
|
||||
--color-success-bg: #dafbe1;
|
||||
--color-success-text: #1a7f37;
|
||||
--color-warning-border: #d4a72c66;
|
||||
--color-warning-bg: #fff8c5;
|
||||
--color-warning-text: #9a6700;
|
||||
--color-info-border: #54aeff66;
|
||||
--color-info-bg: #ddf4ff;
|
||||
--color-info-text: #0969da;
|
||||
--color-priority-border: #b9a1ff66;
|
||||
--color-priority-bg: #f3e7ff;
|
||||
--color-priority-text: #8250df;
|
||||
--color-red-badge: #db2828;
|
||||
--color-red-badge-bg: #db28281a;
|
||||
--color-red-badge-hover-bg: #db28284d;
|
||||
--color-green-badge: #21ba45;
|
||||
--color-green-badge-bg: #21ba451a;
|
||||
--color-green-badge-hover-bg: #21ba454d;
|
||||
--color-yellow-badge: #fbbd08;
|
||||
--color-yellow-badge-bg: #fbbd081a;
|
||||
--color-yellow-badge-hover-bg: #fbbd084d;
|
||||
--color-orange-badge: #f2711c;
|
||||
--color-orange-badge-bg: #f2711c1a;
|
||||
--color-orange-badge-hover-bg: #f2711c4d;
|
||||
--color-git: #f05133;
|
||||
--color-logo: #609926;
|
||||
/* target-based colors */
|
||||
--color-body: #ffffff;
|
||||
--color-box-header: #f1f3f5;
|
||||
--color-box-body: #ffffff;
|
||||
--color-box-body-highlight: #ecf5fd;
|
||||
--color-text-dark: #01050a;
|
||||
--color-text: #181c21;
|
||||
--color-text-light: #30363b;
|
||||
--color-text-light-1: #40474d;
|
||||
--color-text-light-2: #5b6167;
|
||||
--color-text-light-3: #747c84;
|
||||
--color-footer: var(--color-nav-bg);
|
||||
--color-timeline: #d0d7de;
|
||||
--color-input-text: var(--color-text-dark);
|
||||
--color-input-background: #fff;
|
||||
--color-input-toggle-background: #d0d7de;
|
||||
--color-input-border: var(--color-secondary-dark-1);
|
||||
--color-light: #00001706;
|
||||
--color-light-border: #0000171d;
|
||||
--color-hover: #00001708;
|
||||
--color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
|
||||
--color-active: #00001714;
|
||||
--color-menu: #f8f9fb;
|
||||
--color-card: #f8f9fb;
|
||||
--color-markup-table-row: #0030600a;
|
||||
--color-markup-code-block: #00306010;
|
||||
--color-markup-code-inline: #00306012;
|
||||
--color-button: #f8f9fb;
|
||||
--color-code-bg: #fafdff;
|
||||
--color-shadow: #00001726;
|
||||
--color-shadow-opaque: #c7ced5;
|
||||
--color-secondary-bg: #f2f5f8;
|
||||
--color-expand-button: #cfe8fa;
|
||||
--color-placeholder-text: var(--color-text-light-3);
|
||||
--color-editor-line-highlight: var(--color-secondary-alpha-30);
|
||||
--color-editor-selection: var(--color-primary-alpha-30);
|
||||
--color-project-column-bg: var(--color-secondary-light-4);
|
||||
--color-caret: var(--color-text-dark);
|
||||
--color-reaction-bg: #0000170a;
|
||||
--color-reaction-hover-bg: var(--color-primary-light-5);
|
||||
--color-reaction-active-bg: var(--color-primary-light-6);
|
||||
--color-tooltip-text: #fbfdff;
|
||||
--color-tooltip-bg: #25292e;
|
||||
--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-highlight-fg: #eed200;
|
||||
--color-highlight-bg: #f5efc5;
|
||||
--color-overlay-backdrop: #080808c0;
|
||||
--color-danger: var(--color-red);
|
||||
--color-transparency-grid-light: #fafafa;
|
||||
--color-transparency-grid-dark: #e2e2e2;
|
||||
--color-workflow-edge-hover: #b1b7bd;
|
||||
--color-syntax-keyword: #a73a00;
|
||||
--color-syntax-bool: #076872;
|
||||
--color-syntax-control: #7d5700;
|
||||
--color-syntax-name: #785900;
|
||||
--color-syntax-type: #ae2368;
|
||||
--color-syntax-number: #105ead;
|
||||
--color-syntax-operator: #a73a00;
|
||||
--color-syntax-regexp: #773dc5;
|
||||
--color-syntax-string: #456800;
|
||||
--color-syntax-comment: #506070;
|
||||
--color-syntax-invalid: #c00000;
|
||||
--color-syntax-link: var(--color-primary);
|
||||
--color-syntax-tag: #a73a00;
|
||||
--color-syntax-attribute: #6f41c5;
|
||||
--color-syntax-property: #2060a0;
|
||||
--color-syntax-variable: #944a00;
|
||||
--color-syntax-string-special: #7d5700;
|
||||
--color-syntax-escape: #785900;
|
||||
--color-syntax-entity: #6f41c5;
|
||||
--color-syntax-preproc: #2d6a4b;
|
||||
--color-syntax-preproc-file: #105ead;
|
||||
--color-syntax-decorator: #2d6a4b;
|
||||
--color-syntax-namespace: #555555;
|
||||
--color-syntax-name-pseudo: #6f41c5;
|
||||
--color-syntax-comment-special: #773dc5;
|
||||
--color-syntax-text: inherit;
|
||||
--color-syntax-text-alt: #47525b;
|
||||
--color-syntax-punctuation: inherit;
|
||||
--color-syntax-whitespace: #bbbbbb;
|
||||
--color-syntax-diff-fg: #000000;
|
||||
--color-syntax-deleted-bg: #ffdddd;
|
||||
--color-syntax-inserted-bg: #ddffdd;
|
||||
--color-syntax-emph: #8b5000;
|
||||
--color-syntax-strong: inherit;
|
||||
--color-syntax-heading: #7d5700;
|
||||
--color-syntax-subheading: #456800;
|
||||
--color-syntax-output: #506070;
|
||||
--color-syntax-prompt: #944a00;
|
||||
--color-syntax-traceback: #c00000;
|
||||
--color-syntax-matching-bracket-bg: #00b5ad38;
|
||||
--color-syntax-nonmatching-bracket-bg: #db282838;
|
||||
accent-color: var(--color-accent);
|
||||
color-scheme: light;
|
||||
}
|
||||
87
web_src/css/user.css
Normal file
87
web_src/css/user.css
Normal file
@@ -0,0 +1,87 @@
|
||||
.user.profile img.profile-avatar-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.user.profile img.profile-avatar-image {
|
||||
width: 30vw;
|
||||
}
|
||||
}
|
||||
|
||||
.user.link-account:not(.icon) {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-badge-item {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.user-badges img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.user-badge-chip {
|
||||
max-width: none !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
white-space: nowrap;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
#readme_profile {
|
||||
padding: 1em 2em;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
#notification_table {
|
||||
background: var(--color-box-body);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.notifications-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.notifications-item:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.notifications-buttons {
|
||||
display: none;
|
||||
min-width: 74px;
|
||||
}
|
||||
|
||||
.notifications-updated {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.notifications-item:hover .notifications-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.notifications-item:hover .notifications-updated {
|
||||
display: none;
|
||||
}
|
||||
61
web_src/fomantic/_site/globals/site.variables
Normal file
61
web_src/fomantic/_site/globals/site.variables
Normal file
@@ -0,0 +1,61 @@
|
||||
/* https://github.com/fomantic/Fomantic-UI/blob/develop/src/themes/default/globals/site.variables */
|
||||
|
||||
@headerFont: var(--fonts-regular);
|
||||
@pageFont: var(--fonts-regular);
|
||||
@bold: 500;
|
||||
@useCustomScrollbars: false;
|
||||
@disabledOpacity: var(--opacity-disabled);
|
||||
@linkHoverUnderline: underline;
|
||||
@pageOverflowX: visible;
|
||||
|
||||
@variationAccordionInverted: false;
|
||||
@variationBreadcrumbInverted: false;
|
||||
@variationButtonAnimated: false;
|
||||
@variationButtonAnimatedFade: false;
|
||||
@variationButtonAttached: false;
|
||||
@variationButtonInverted: false;
|
||||
@variationButtonSocial: false;
|
||||
@variationButtonTertiary: false;
|
||||
@variationCalendarInverted: false;
|
||||
@variationCardInverted: false;
|
||||
@variationCheckboxInverted: false;
|
||||
@variationCommentInverted: false;
|
||||
@variationDimmerInverted: false;
|
||||
@variationDividerInverted: false;
|
||||
@variationDropdownInverted: false;
|
||||
@variationFeedInverted: false;
|
||||
@variationFlyoutInverted: false;
|
||||
@variationFormInverted: false;
|
||||
@variationFormTransparent: false;
|
||||
@variationGridDoubling: false;
|
||||
@variationGridInverted: false;
|
||||
@variationHeaderInverted: false;
|
||||
@variationIconInverted: false;
|
||||
@variationInputInverted: false;
|
||||
@variationItemInverted: false;
|
||||
@variationLabelCorner: false;
|
||||
@variationLabelImage: false;
|
||||
@variationLabelInverted: false;
|
||||
@variationLabelRibbon: false;
|
||||
@variationLabelTag: false;
|
||||
@variationListInverted: false;
|
||||
@variationMenuInverted: false;
|
||||
@variationMessageInverted: false;
|
||||
@variationModalInverted: false;
|
||||
@variationNagInverted: false;
|
||||
@variationPlaceholderInverted: false;
|
||||
@variationPopupInverted: false;
|
||||
@variationPopupTooltip: false;
|
||||
@variationProgressInverted: false;
|
||||
@variationSegmentInverted: false;
|
||||
@variationSegmentPiled: false;
|
||||
@variationSegmentStacked: false;
|
||||
@variationSliderInverted: false;
|
||||
@variationStatisticInverted: false;
|
||||
@variationStepInverted: false;
|
||||
@variationTableInverted: false;
|
||||
@variationTableMarked: false;
|
||||
@variationTableStackable: false;
|
||||
@variationTextInverted: false;
|
||||
@variationToastInverted: false;
|
||||
@variationTransitionInverted: false;
|
||||
1155
web_src/fomantic/build/components/api.js
Normal file
1155
web_src/fomantic/build/components/api.js
Normal file
File diff suppressed because it is too large
Load Diff
1209
web_src/fomantic/build/components/modal.js
Normal file
1209
web_src/fomantic/build/components/modal.js
Normal file
File diff suppressed because it is too large
Load Diff
5
web_src/fomantic/build/fomantic.js
Normal file
5
web_src/fomantic/build/fomantic.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import './components/api.js';
|
||||
import './components/dropdown.js';
|
||||
import './components/modal.js';
|
||||
|
||||
// Hard-forked from Fomantic UI 2.8.7, patches are commented with "GITEA-PATCH"
|
||||
27
web_src/fomantic/semantic.json
Normal file
27
web_src/fomantic/semantic.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"version": "2.8.7",
|
||||
"base": "node_modules/fomantic-ui",
|
||||
"paths": {
|
||||
"source": {
|
||||
"config": "src/theme.config",
|
||||
"definitions": "src/definitions/",
|
||||
"site": "src/site/",
|
||||
"themes": "src/themes/"
|
||||
},
|
||||
"output": {
|
||||
"packaged": "../../build/",
|
||||
"uncompressed": "../../build/components/",
|
||||
"compressed": "../../build/components/",
|
||||
"themes": "../../build/themes/"
|
||||
},
|
||||
"clean": "../../build/"
|
||||
},
|
||||
"permission": false,
|
||||
"autoInstall": false,
|
||||
"rtl": false,
|
||||
"admin": false,
|
||||
"components": [
|
||||
"api",
|
||||
"tab"
|
||||
]
|
||||
}
|
||||
85
web_src/fomantic/theme.config.less
Normal file
85
web_src/fomantic/theme.config.less
Normal file
@@ -0,0 +1,85 @@
|
||||
/* To override a theme for an individual element, specify theme name below */
|
||||
|
||||
/* Global */
|
||||
@site : 'default';
|
||||
@reset : 'default';
|
||||
|
||||
/* Elements */
|
||||
@button : 'default';
|
||||
@container : 'default';
|
||||
@divider : 'default';
|
||||
@emoji : 'default';
|
||||
@flag : 'default';
|
||||
@header : 'default';
|
||||
@icon : 'default';
|
||||
@image : 'default';
|
||||
@input : 'default';
|
||||
@label : 'default';
|
||||
@list : 'default';
|
||||
@loader : 'default';
|
||||
@placeholder: 'default';
|
||||
@rail : 'default';
|
||||
@reveal : 'default';
|
||||
@segment : 'default';
|
||||
@step : 'default';
|
||||
@text : 'default';
|
||||
|
||||
/* Collections */
|
||||
@breadcrumb : 'default';
|
||||
@form : 'default';
|
||||
@grid : 'default';
|
||||
@menu : 'default';
|
||||
@message : 'default';
|
||||
@table : 'default';
|
||||
|
||||
/* Modules */
|
||||
@calendar : 'default';
|
||||
@checkbox : 'default';
|
||||
@dimmer : 'default';
|
||||
@dropdown : 'default';
|
||||
@embed : 'default';
|
||||
@modal : 'default';
|
||||
@nag : 'default';
|
||||
@popup : 'default';
|
||||
@progress : 'default';
|
||||
@slider : 'default';
|
||||
@rating : 'default';
|
||||
@shape : 'default';
|
||||
@sidebar : 'default';
|
||||
@sticky : 'default';
|
||||
@tab : 'default';
|
||||
@toast : 'default';
|
||||
@transition : 'default';
|
||||
|
||||
/* Views */
|
||||
@ad : 'default';
|
||||
@card : 'default';
|
||||
@comment : 'default';
|
||||
@feed : 'default';
|
||||
@item : 'default';
|
||||
@statistic : 'default';
|
||||
|
||||
/*******************************
|
||||
Folders
|
||||
*******************************/
|
||||
|
||||
/* Path to theme packages */
|
||||
@themesFolder : 'themes';
|
||||
|
||||
/* Path to site override folder */
|
||||
@siteFolder : '_site/';
|
||||
|
||||
|
||||
/*******************************
|
||||
Import Theme
|
||||
*******************************/
|
||||
|
||||
@import (multiple) "theme.less";
|
||||
|
||||
/*******************************
|
||||
Theme Overrides
|
||||
*******************************/
|
||||
|
||||
@importGoogleFonts : false;
|
||||
|
||||
/* End Config */
|
||||
25
web_src/js/bootstrap.ts
Normal file
25
web_src/js/bootstrap.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import {showGlobalErrorMessage, processWindowErrorEvent} from './modules/errors.ts';
|
||||
|
||||
// window.config is initialized here
|
||||
try {
|
||||
window.config = JSON.parse(document.querySelector('#global-window-config')!.textContent);
|
||||
// in case some pages don't render the pageData, we make sure it is an object to prevent null access
|
||||
window.config.pageData ??= {};
|
||||
} catch {
|
||||
showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
|
||||
}
|
||||
|
||||
// A module should not be imported twice, otherwise there will be bugs when a module has its internal states.
|
||||
// A real example is "generateElemId" in "utils/dom.ts", if it is imported twice in different module scopes,
|
||||
// It will generate duplicate IDs (ps: don't try to use "random" to fix, it is just a real example to show the importance of "do not import a module twice")
|
||||
if (!window._globalHandlerErrors?._inited) {
|
||||
// we added an event handler for window error at the very beginning of <script> of page head the
|
||||
// handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before
|
||||
// this init then in this init, we can collect all error events and show them.
|
||||
for (const e of (window._globalHandlerErrors as Iterable<ErrorEvent & PromiseRejectionEvent>) || []) {
|
||||
processWindowErrorEvent(e);
|
||||
}
|
||||
// then, change _globalHandlerErrors to an object with push method, to process further error
|
||||
// events directly
|
||||
window._globalHandlerErrors = {_inited: true, push: (e: ErrorEvent & PromiseRejectionEvent) => processWindowErrorEvent(e)} as any;
|
||||
}
|
||||
36
web_src/js/components/ActionRunArtifacts.test.ts
Normal file
36
web_src/js/components/ActionRunArtifacts.test.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import {buildArtifactTooltipHtml} from './ActionRunArtifacts.ts';
|
||||
import {normalizeTestHtml} from '../utils/testhelper.ts';
|
||||
|
||||
describe('buildArtifactTooltipHtml', () => {
|
||||
test('active artifact', () => {
|
||||
const expiresUnix = Date.UTC(2026, 2, 20, 12, 0, 0) / 1000;
|
||||
const expiresLocal = new Date(expiresUnix * 1000).toLocaleString();
|
||||
const result = buildArtifactTooltipHtml({
|
||||
name: 'artifact.zip',
|
||||
size: 1024 * 1024,
|
||||
status: 'completed',
|
||||
expiresUnix,
|
||||
}, 'Expires at %s (extra)');
|
||||
|
||||
expect(normalizeTestHtml(result)).toBe(normalizeTestHtml(`<span class="flex-text-inline">
|
||||
<span>Expires at </span>
|
||||
<relative-time datetime="${expiresUnix}" threshold="P0Y" prefix="" weekday="" year="numeric" month="short" hour="numeric" minute="2-digit">
|
||||
${expiresLocal}
|
||||
</relative-time>
|
||||
<span> (extra)</span>
|
||||
<span class="inline-divider">,</span>
|
||||
<span>1.0 MiB</span>
|
||||
</span>
|
||||
`));
|
||||
});
|
||||
|
||||
test('no expiry', () => {
|
||||
const result = buildArtifactTooltipHtml({
|
||||
name: 'artifact.zip',
|
||||
size: 512,
|
||||
status: 'completed',
|
||||
expiresUnix: 0,
|
||||
}, 'Expires at %s');
|
||||
expect(normalizeTestHtml(result)).toBe(`<span class="flex-text-inline">512 B</span>`);
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user