diff options
Diffstat (limited to '')
88 files changed, 15410 insertions, 0 deletions
diff --git a/web_src/css/actions.css b/web_src/css/actions.css new file mode 100644 index 0000000..c89a70e --- /dev/null +++ b/web_src/css/actions.css @@ -0,0 +1,96 @@ +.runner-container { + padding-bottom: 30px; +} + +.runner-container .ui.table.segment { + overflow-x: auto; +} + +.runner-container .runner-ops > a { + margin-left: 0.5em; +} + +.runner-container .runner-ops-delete { + color: var(--color-red-light); +} + +.runner-container .runner-new-text { + color: var(--color-white); +} + +.runner-container #runner-new:hover .runner-new-text { + color: var(--color-white) !important; +} + +.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 .flex-item-trailing { + flex-wrap: nowrap; + width: 280px; + flex: 0 0 280px; +} + +.run-list-ref { + display: inline-block !important; +} + +@media (max-width: 767.98px) { + .run-list .flex-item-trailing { + flex-direction: column; + align-items: flex-end; + width: auto; + flex-basis: auto; + } + .run-list-item-right, + .run-list-ref { + max-width: 110px; + } +} + +#workflow_dispatch_dropdown { + min-width: min-content; +} +#workflow_dispatch_dropdown > button { + white-space: nowrap; +} +@media (max-width: 640px) or (767.98px < width < 854px) { + #workflow_dispatch_dropdown .menu { + left: auto; + right: 0; + } +} diff --git a/web_src/css/admin.css b/web_src/css/admin.css new file mode 100644 index 0000000..e6866b2 --- /dev/null +++ b/web_src/css/admin.css @@ -0,0 +1,51 @@ +.admin.hooks .list > .item:not(:first-child) { + border-top: 1px solid var(--color-secondary); + padding: 0.25rem 1rem; + margin: 12px -1rem -1rem; +} + +.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; + word-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; +} diff --git a/web_src/css/base.css b/web_src/css/base.css new file mode 100644 index 0000000..4c1317b --- /dev/null +++ b/web_src/css/base.css @@ -0,0 +1,1586 @@ +: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); + --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; + /* 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: use the default value as "modules/normalize.css" */ + --line-height-default: normal; + /* images */ + --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'); + --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>'); + --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>'); + /* 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; + --repo-header-issue-min-height: 41px; + --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */ + --tab-size: 4; + --checkbox-size: 15px; /* 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 */ +} + +@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, +kbd, +samp, +.tw-font-mono { + font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */ +} + +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; +} + +button { + cursor: pointer; +} + +details summary { + cursor: pointer; +} + +details summary > * { + display: inline; +} + +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); +} + +h1.error-code { + font-size: 15em; + font-weight: var(--font-weight-bold); + color: transparent; + --error-code-color-1: #a2a2a2; + --error-code-color-2: #797979; + --gradient: repeating-linear-gradient(45deg, var(--error-code-color-1), var(--error-code-color-1) 10px, var(--error-code-color-2) 10px, var(--error-code-color-2) 20px); + background: var(--gradient); + background-clip: text; +} + +* { + 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 { + background: var(--color-primary-light-1); + color: var(--color-white); +} + +::placeholder, +.ui.dropdown:not(.button) > .default.text, +.ui.default.dropdown:not(.button) > .text { + color: var(--color-placeholder-text) !important; + opacity: 1 !important; +} + +.unselectable, +.button, +.lines-num, +.lines-commit, +.lines-commit .blame-info, +.ellipsis-button { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +.button-row { + gap: 0.5rem; +} + +.button-row .ui.button { + margin-right: 0; +} + +.ui.partial.secondary.menu { + margin-bottom: 0; +} + +a { + color: var(--color-primary); + cursor: pointer; + text-decoration-line: none; + text-decoration-skip-ink: all; +} + +a:hover { + text-decoration-line: underline; +} + +/* a = always colored, underlined on hover */ +/* a.muted = colored on hover, underlined on hover */ +/* a.suppressed = never colored, underlined on hover */ +/* a.silenced = never colored, never underlined */ + +a.muted, +a.suppressed, +a.silenced, +.muted-links a { + color: inherit; +} + +a:hover, +a.suppressed:hover, +a.muted:hover, +a.muted:hover [class*="color-text"], +.muted-links a:hover { + color: var(--color-primary); +} + +a.silenced:hover, +a.suppressed:hover { + color: inherit; +} + +a.silenced:hover { + text-decoration-line: none; +} + +a.label, +.ui.search .results a, +.ui .menu a, +.ui.cards a.card, +.issue-keyword a { + text-decoration-line: none !important; +} + +.ui.search > .results { + background: var(--color-body); + border-color: var(--color-secondary); + overflow-wrap: anywhere; /* allow text to wrap as fomantic limits this to 18em width */ +} + +.ui.search > .results .result { + background: var(--color-body); + border-color: var(--color-secondary); + display: flex; + align-items: center; +} + +.ui.search > .results .result .title { + color: var(--color-text-dark); +} + +.ui.search > .results .result .description { + color: var(--color-text-light-2); +} + +.ui.search > .results .result .image { + width: auto; + height: auto; +} + +.ui.search > .results .result:hover, +.ui.category.search > .results .category .result:hover { + background: var(--color-hover); +} + +.inline-code-block { + padding: 2px 4px; + border-radius: .24em; + background-color: var(--color-label-bg); +} + +.ui.menu { + display: flex; +} + +.ui.menu, +.ui.vertical.menu { + background: var(--color-menu); + border-color: var(--color-secondary); + box-shadow: none; +} + +.ui.menu .item { + color: var(--color-text); + user-select: auto; + line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */ +} + +.ui.menu .item > .svg { + margin-right: 0.35em; +} + +.ui.menu .dropdown.item:hover, +.ui.menu a.item:hover, +.ui.menu details.item summary:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.menu .active.item, +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item, +.ui.vertical.menu .active.item:hover { + color: var(--color-text); + background: var(--color-active); +} + +.ui.menu a.item:active { + color: var(--color-text); + background: none; +} + +.ui.ui.menu .item.disabled { + color: var(--color-text-light-3); +} + +.ui.menu .item::before, .ui.vertical.menu .item::before { + background: var(--color-secondary); +} + +/* sub menu of vertical menu */ +.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 { + color: var(--color-text); +} + +/* slightly more contrast for filters on issue list */ +.ui.ui.menu .dropdown.item.disabled { + color: var(--color-text-light-2); +} + +.ui.dropdown .menu { + background: var(--color-menu); + border-color: var(--color-secondary); +} + +.ui.dropdown .menu > .header:not(.ui) { + color: var(--color-text); +} + +.ui.dropdown .menu > .item { + color: var(--color-text); + overflow: hidden; + text-overflow: ellipsis; +} + +.ui.dropdown .menu > .item:hover { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.dropdown .menu > .item:active { + color: var(--color-text); + background: var(--color-active); +} + +.ui.dropdown .menu .active.item { + color: var(--color-text); + background: var(--color-active); + border-radius: 0; + font-weight: var(--font-weight-normal); +} + +/* fix misaligned images in webhook dropdown */ +.ui.dropdown .menu > .item > img { + margin-top: -0.25rem; + margin-bottom: -0.25rem; +} +.ui.dropdown .menu > .item > svg { + margin-right: .78rem; /* use the same margin as for <img> */ +} + +.ui.selection.dropdown .menu > .item { + border-color: var(--color-secondary); + white-space: nowrap; +} + +.ui.selection.visible.dropdown > .text:not(.default) { + color: var(--color-text); +} + +.ui.dropdown.selected, +.ui.dropdown .menu .selected.item { + color: var(--color-text); + background: var(--color-hover); +} + +.ui.menu .ui.dropdown .menu > .selected.item { + color: var(--color-text) !important; + background: var(--color-hover) !important; +} + +.ui.dropdown .menu > .message:not(.ui) { + color: var(--color-text-light-2); +} + +/* 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 > .text > .description, +.ui.dropdown .menu > .item > .description { + color: var(--color-text-light-2); +} + +/* replace item margin on secondary menu items with gap and remove both the + negative margins on the menu as well as margin on the items */ +.ui.secondary.menu { + margin-left: 0; + margin-right: 0; + gap: .35714286em; +} +.ui.secondary.menu .item { + margin-left: 0; + margin-right: 0; +} + +.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, +.ui.secondary.menu .active.item:hover { + color: var(--color-text); + background: var(--color-active); +} + +.ui.secondary.menu.tight .item { + padding-left: 0.85714286em; + padding-right: 0.85714286em; +} + +/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */ +.ui.menu::after { + content: normal; +} + +.ui.menu .dropdown.item .menu { + background: var(--color-body); +} + +.ui.menu .ui.dropdown .menu > .item { + color: var(--color-text) !important; +} + +.ui.menu .ui.dropdown .menu > .item:hover { + 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; +} + +.ui.form textarea:not([rows]) { + height: var(--min-height-textarea); /* override fomantic default 12em */ + min-height: var(--min-height-textarea); /* override fomantic default 8em */ +} + +/* styles from removed fomantic transition module */ +.hidden.transition { + visibility: hidden; + display: none; +} +.visible.transition { + display: block !important; + visibility: visible !important; +} + +.ui.selection.active.dropdown, +.ui.selection.active.dropdown:hover, +.ui.selection.active.dropdown .menu, +.ui.selection.active.dropdown:hover .menu { + border-color: var(--color-primary); +} + +.ui.pointing.dropdown > .menu:not(.hidden)::after { + background: var(--color-menu); + box-shadow: -1px -1px 0 0 var(--color-secondary); +} + +.ui.pointing.upward.dropdown .menu::after, +.ui.top.pointing.upward.dropdown .menu::after { + box-shadow: 1px 1px 0 0 var(--color-secondary); +} + +.ui.comments .comment .text { + margin: 0; +} + +.ui.comments .comment .text, +.ui.comments .comment .author { + color: var(--color-text); +} + +.ui.comments .comment a.author:hover { + color: var(--color-primary); +} + +.ui.comments .comment .metadata { + color: var(--color-text-light-2); +} + +.ui.comments .comment .actions a { + color: var(--color-text-light); +} + +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: var(--color-primary); +} + +img.ui.avatar, +.ui.avatar img, +.ui.avatar svg { + border-radius: var(--border-radius); + object-fit: contain; + aspect-ratio: 1; +} + +.ui.error.message .header, +.ui.warning.message .header { + color: inherit; + filter: saturate(2); +} + +.full.height { + flex-grow: 1; + padding-bottom: 80px; +} + +/* 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.pagination.menu .active.item { + color: var(--color-text); + background: var(--color-active); +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="file"], +.ui.form .fields.error .field input[type="url"], +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item, +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="file"], +.ui.form .field.error input[type="url"], +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background-color: var(--color-error-bg); + border-color: var(--color-error-border); + color: var(--color-error-text); +} + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: var(--color-error-border) !important; +} + +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: var(--color-error-bg-hover); +} + +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: var(--color-error-bg-active) !important; +} + +.ui.form .fields.error .dropdown .menu, +.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, +.ui.form .field.field input:-webkit-autofill, +.ui.form .field.field input:-webkit-autofill:focus, +.ui.form .field.field input:-webkit-autofill:hover, +.ui.form .field.field input:-webkit-autofill:active { + -webkit-background-clip: text; + -webkit-text-fill-color: var(--color-text); + box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important; + border-color: var(--color-primary-light-4) !important; +} + +.ui.form .field.muted { + opacity: var(--opacity-disabled); +} + +.text.primary { + color: var(--color-primary) !important; +} + +.text.red { + color: var(--color-red) !important; +} + +.text.orange { + color: var(--color-orange) !important; +} + +.text.yellow { + color: var(--color-yellow) !important; +} + +.text.olive { + color: var(--color-olive) !important; +} + +.text.green { + color: var(--color-green) !important; +} + +.text.teal { + color: var(--color-teal) !important; +} + +.text.blue { + color: var(--color-blue) !important; +} + +.text.violet { + color: var(--color-violet) !important; +} + +.text.purple { + color: var(--color-purple) !important; +} + +.text.pink { + color: var(--color-pink) !important; +} + +.text.brown { + color: var(--color-brown) !important; +} + +.text.black { + color: var(--color-text) !important; +} + +.text.grey { + color: var(--color-text-light) !important; +} + +.text.light { + color: var(--color-text-light) !important; +} + +.text.light-2 { + color: var(--color-text-light-2) !important; +} + +.text.light-3 { + color: var(--color-text-light-3) !important; +} + +.text.light.grey { + color: var(--color-grey-light) !important; +} + +.text.gold { + color: var(--color-gold) !important; +} + +.text.small { + font-size: 0.75em; +} + +.ui.form .ui.button { + font-weight: var(--font-weight-normal); +} + +/* replace fomantic popover box shadows */ +.ui.dropdown .menu, +.ui.upward.dropdown > .menu, +.ui.menu .dropdown.item .menu, +.ui.selection.active.dropdown .menu, +.ui.upward.selection.dropdown .menu, +.ui.selection.active.dropdown:hover .menu, +.ui.upward.active.selection.dropdown:hover .menu { + box-shadow: 0 6px 18px var(--color-shadow); +} +.ui.floating.dropdown .menu { + box-shadow: 0 6px 18px var(--color-shadow) !important; +} + +.ui.dimmer { + background: var(--color-overlay-backdrop); +} + +/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */ +/* This fixes the commit graph button on the commits page */ +/* modal svg icons, copied from fomantic except width and height */ +/* center text in fomantic modal dialogs */ +.ui .menu:not(.vertical) .item > .button.compact { + padding: 0.58928571em 1.125em; +} + +.ui .menu:not(.vertical) .item > .button.small { + font-size: 0.92857143rem; +} + +.ui.menu .ui.dropdown.item .menu .item { + width: 100%; +} + +.ui.dropdown .menu > .header { + font-size: 0.8em; +} + +.ui .text.left { + text-align: left !important; +} + +.ui .text.right { + text-align: right !important; +} + +.ui .text.truncate { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; +} + +.ui .message.flash-message { + text-align: center; +} + +.ui .message > ul { + margin-left: auto; + margin-right: auto; + display: table; + text-align: left; +} + +.ui .header > i + .content { + padding-left: 0.75rem; + vertical-align: middle; +} + +.ui .form .autofill-dummy { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + z-index: -10000; +} + +.ui .form .sub.field { + margin-left: 25px; +} + +.ui .sha.label { + font-family: var(--fonts-monospace); + font-size: 13px; + font-weight: var(--font-weight-normal); + margin: 0 6px; + padding: 5px 10px; + flex-shrink: 0; +} + +.ui .sha.label .shortsha { + display: inline-block; /* not sure whether it is still needed */ +} + +.ui .button.truncate { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + margin-right: 6px; +} + +.ui.status.buttons .svg { + margin-right: 4px; +} + +.ui.inline.delete-button { + padding: 8px 15px; + font-weight: var(--font-weight-normal); +} + +.ui .background.red { + background-color: var(--color-red) !important; +} + +.ui .background.blue { + background-color: var(--color-blue) !important; +} + +.ui .background.black { + background-color: var(--color-black) !important; +} + +.ui .background.grey { + background-color: var(--color-grey) !important; +} + +.ui .background.light.grey { + background-color: var(--color-grey) !important; +} + +.ui .background.green { + background-color: var(--color-green) !important; +} + +.ui .background.purple { + background-color: var(--color-purple) !important; +} + +.ui .background.yellow { + background-color: var(--color-yellow) !important; +} + +.ui .background.orange { + background-color: var(--color-orange) !important; +} + +.ui .background.gold { + background-color: var(--color-gold) !important; +} + +.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; +} + +.ui .border { + border: 1px solid; +} + +.ui .border.red { + border-color: var(--color-red) !important; +} + +.ui .border.blue { + border-color: var(--color-blue) !important; +} + +.ui .border.black { + border-color: var(--color-black) !important; +} + +.ui .border.grey { + border-color: var(--color-grey) !important; +} + +.ui .border.light.grey { + border-color: var(--color-grey) !important; +} + +.ui .border.green { + border-color: var(--color-green) !important; +} + +.ui .border.purple { + border-color: var(--color-purple) !important; +} + +.ui .border.yellow { + border-color: var(--color-yellow) !important; +} + +.ui .border.orange { + border-color: var(--color-orange) !important; +} + +.ui .border.gold { + border-color: var(--color-gold) !important; +} + +@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.pagination.menu.narrow .item .icon { + margin-right: 0; +} + +.ui.floating.dropdown .overflow.menu .scrolling.menu.items { + border-radius: 0 !important; + box-shadow: none !important; + border-bottom: 1px solid var(--color-secondary); +} + +.user-menu > .item { + width: 100%; + border-radius: 0 !important; +} + +.scrolling.menu .item.selected { + font-weight: var(--font-weight-semibold) !important; +} + +.ui.dropdown .scrolling.menu { + border-color: var(--color-secondary); +} + +.color-preview { + display: inline-block; + margin-left: 0.4em; + height: 0.67em; + width: 0.67em; + border-radius: var(--border-radius); +} + +.attention-icon { + margin: auto 0.5em auto 0; +} + +.attention-title { + align-items: center; + display: flex; +} + +blockquote.attention-note { + border-left-color: var(--color-blue-dark-1); +} +strong.attention-note, svg.attention-note { + color: var(--color-blue-dark-1); +} + +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-violet-dark-1); +} +strong.attention-important, svg.attention-important { + color: var(--color-violet-dark-1); +} + +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-red-dark-1); +} +strong.attention-caution, svg.attention-caution { + color: var(--color-red-dark-1); +} + +.center:not(.popup) { + text-align: center; +} + +overflow-menu { + border-bottom: 1px solid var(--color-secondary) !important; + display: flex; +} + +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 .ui.label { + margin-left: 7px !important; /* save some space */ +} + +.activity-bar-graph { + background-color: var(--color-primary); + color: var(--color-primary-contrast); +} + +.archived-icon { + color: var(--color-secondary-dark-2) !important; +} + +/* colors of colorful icons */ +svg.text.green, +.text.green svg { + color: var(--color-icon-green) !important; +} +svg.text.red, +.text.red svg { + color: var(--color-icon-red) !important; +} +svg.text.purple, +.text.purple svg { + color: var(--color-icon-purple) !important; +} + +.oauth2-authorize-application-box { + margin-top: 3em !important; +} + +/* multiple radio or checkboxes as inline element */ +.inline-grouped-list { + display: inline-block; + vertical-align: top; +} + +.inline-grouped-list > .ui { + display: block; + margin-top: 5px; + margin-bottom: 10px; +} + +.inline-grouped-list > .ui:first-child { + margin-top: 1px; +} + +.ui.menu .item > .label { + background: var(--color-label-bg); + color: var(--color-label-text); +} + +.ui.menu .active.item > .label, +.ui.menu.tabs-with-labels .item:hover > .label { + background: var(--color-label-bg-alt, var(--color-label-bg)); +} + +.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%; + font-family: var(--fonts-monospace); +} + +.lines-num span.bottom-line::after { + border-bottom: 1px solid var(--color-secondary); +} + +.lines-num span::after { + content: attr(data-line-number); + line-height: 20px !important; + padding: 0 10px; + cursor: pointer; + display: block; +} + +.lines-type-marker { + vertical-align: top; +} + +.lines-num, +.lines-code { + font-size: 12px; + font-family: var(--fonts-monospace); + line-height: 20px; + padding-top: 0; + padding-bottom: 0; + vertical-align: top; +} + +.lines-num pre, +.lines-code pre, +.lines-num ol, +.lines-code ol { + background-color: inherit; + margin: 0; + padding: 0 !important; +} + +.lines-num pre li, +.lines-code pre li, +.lines-num ol li, +.lines-code ol li { + display: block; + width: calc(100% - 1ch); + padding-left: 1ch; +} + +.lines-escape { + width: 0; +} + +.lines-code { + padding-left: 5px; +} + +.file-view tr.active { + color: inherit !important; + background: inherit !important; +} + +.file-view tr.active .lines-num, +.file-view tr.active .lines-code { + background: var(--color-highlight-bg) !important; +} + +.file-view tr.active:last-of-type .lines-code { + border-bottom-right-radius: var(--border-radius); +} + +.file-view tr.active .lines-num { + position: relative; +} + +.file-view tr.active .lines-num::before { + content: ""; + position: absolute; + left: 0; + width: 2px; + height: 100%; + background: var(--color-highlight-fg); +} + +.code-inner { + font: 12px var(--fonts-monospace); + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: anywhere; + line-height: inherit; /* needed for inline code preview in markup */ +} + +.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: 20px; + 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: 4px; +} + +.top-line-blame { + border-top: 1px solid var(--color-secondary); +} + +.code-view tr.top-line-blame:first-of-type { + border-top: none; +} + +.lines-code .bottom-line, +.lines-commit .bottom-line { + border-bottom: 1px solid var(--color-secondary); +} + +.code-view { + background: var(--color-code-bg); + border-radius: var(--border-radius); +} + +.code-view table { + width: 100%; +} + +.migrate .svg.gitea-git { + color: var(--color-git); +} + +.color-icon { + display: inline-block; + border-radius: var(--border-radius-full); + height: 14px; + width: 14px; +} + +.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; +} + +.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); +} + +.ui.multiple.dropdown > .label { + box-shadow: 0 0 0 1px var(--color-secondary) inset; +} + +.emoji, +.reaction { + font-size: 1.25em; + line-height: var(--line-height-default); + font-style: normal !important; + font-weight: var(--font-weight-normal) !important; + vertical-align: -0.075em; +} + +.emoji img, +.reaction img { + border-width: 0 !important; + margin: 0 !important; + width: 1em !important; + height: 1em !important; + vertical-align: -0.15em; +} + +.ui.tabular.menu { + border-color: var(--color-secondary); +} + +.ui.tabular.menu .active.item, +.ui.tabular.menu .active.item:hover { + background: var(--color-body); + border-color: var(--color-secondary); + color: var(--color-text); +} + +.ui.segment .ui.tabular.menu .active.item, +.ui.segment .ui.tabular.menu .active.item:hover { + background: var(--color-box-body); +} + +.ui.secondary.pointing.menu { + border-color: var(--color-secondary); +} + +.ui.tabular.menu .item, +.ui.secondary.pointing.menu .item { + padding: 11px 12px !important; + color: var(--color-text-light-2); +} + +.ui.tabular.menu .item:hover, +.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus { + color: var(--color-text); +} + +.ui.secondary.pointing.menu .active.item, +.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus, +.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus { + color: var(--color-text-dark); +} + +.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; +} + +.truncated-item-container { + display: flex !important; + align-items: center; +} + +.ellipsis-button { + padding: 0 5px 8px !important; + display: inline-block !important; + font-weight: var(--font-weight-semibold) !important; + line-height: 6px !important; + vertical-align: middle !important; +} + +.truncated-item-name { + line-height: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: -0.5em; + margin-bottom: -0.5em; +} + +.precolors { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 1em; +} + +.precolors .color { + display: inline-block; + width: 15px; + height: 15px; +} + +.ui.dropdown:not(.button) { + line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ +} + +/* dropdown has some kinds of icons: +- "> .dropdown.icon": the arrow for opening the dropdown +- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown +- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown +*/ + +.ui.dropdown.mini.button, +.ui.dropdown.tiny.button { + padding-right: 20px; +} +.ui.dropdown.button { + padding-right: 22px; +} +.ui.dropdown.large.button { + padding-right: 24px; +} + +/* 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; /* plain dropdown and button dropdown use flex layout for icons */ + 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; /* selection dropdown uses absolute layout for icons */ + top: 50%; + transform: translateY(-50%); +} + +.ui.ui.dropdown > .dropdown.icon { + right: 0.5em; +} + +.ui.ui.dropdown > .remove.icon { + right: 2em; +} + +.btn, +.ui.ui.button, +.ui.ui.dropdown, +.flex-items-inline > .item, +.flex-text-inline { + display: inline-flex; + align-items: center; + gap: .25rem; + vertical-align: middle; + min-width: 0; +} + +.ui.ui.button { + justify-content: center; +} + +.ui.dropdown .ui.label .svg { + vertical-align: middle; +} + +.ui.ui.labeled.button { + gap: 0; + align-items: stretch; +} + +.flex-items-block > .item, +.flex-text-block { + display: flex; + align-items: center; + gap: .25rem; + min-width: 0; +} diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css new file mode 100644 index 0000000..bce1333 --- /dev/null +++ b/web_src/css/chroma/base.css @@ -0,0 +1,46 @@ +/* LineTableTD */ +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; +} + +/* LineTable */ +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + width: auto; + overflow: auto; + display: block; +} + +/* LineHighlight */ +.chroma .hl { + display: block; + width: 100%; +} + +/* LineNumbersTable */ +.chroma .lnt { + margin-right: 0.4em; + padding: 0 0.4em; +} + +/* LineNumbers */ +.chroma .ln { + margin-right: 0.4em; + padding: 0 0.4em; +} + +/* GenericStrong */ +.chroma .gs { + font-weight: var(--font-weight-semibold); +} + +/* GenericUnderline */ +.chroma .gl { + text-decoration: underline; +} diff --git a/web_src/css/chroma/dark.css b/web_src/css/chroma/dark.css new file mode 100644 index 0000000..bfe9d69 --- /dev/null +++ b/web_src/css/chroma/dark.css @@ -0,0 +1,76 @@ +/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */ +.chroma .bp { color: #fabd2f; } /* NameBuiltinPseudo */ +.chroma .c { color: #777e94; } /* Comment */ +.chroma .c1 { color: #777e94; } /* CommentSingle */ +.chroma .ch { color: #777e94; } /* CommentHashbang */ +.chroma .cm { color: #777e94; } /* CommentMultiline */ +.chroma .cp { color: #8ec07c; } /* CommentPreproc */ +.chroma .cpf { color: #649bc4; } /* CommentPreprocFile */ +.chroma .cs { color: #9075cd; } /* CommentSpecial */ +.chroma .dl { color: #649bc4; } /* LiteralStringDelimiter */ +.chroma .fm {} /* NameFunctionMagic */ +.chroma .g {} /* Generic */ +.chroma .gd { color: #ffffff; background-color: #5f3737; } /* GenericDeleted */ +.chroma .ge { color: #ddee30; } /* GenericEmph */ +.chroma .gh { color: #ffaa10; } /* GenericHeading */ +.chroma .gi { color: #ffffff; background-color: #3a523a; } /* GenericInserted */ +.chroma .gl {} /* GenericUnderline */ +.chroma .go { color: #777e94; } /* GenericOutput */ +.chroma .gp { color: #ebdbb2; } /* GenericPrompt */ +.chroma .gr { color: #ff4433; } /* GenericError */ +.chroma .gs { color: #ebdbb2; } /* GenericStrong */ +.chroma .gt { color: #ff7540; } /* GenericTraceback */ +.chroma .gu { color: #b8bb26; } /* GenericSubheading */ +.chroma .il { color: #649bc4; } /* LiteralNumberIntegerLong */ +.chroma .k { color: #ff7540; } /* Keyword */ +.chroma .kc { color: #649bc4; } /* KeywordConstant */ +.chroma .kd { color: #ff7540; } /* KeywordDeclaration */ +.chroma .kn { color: #ffaa10; } /* KeywordNamespace */ +.chroma .kp { color: #5f8700; } /* KeywordPseudo */ +.chroma .kr { color: #ff7540; } /* KeywordReserved */ +.chroma .kt { color: #ff7b72; } /* KeywordType */ +.chroma .l {} /* Literal */ +.chroma .ld {} /* LiteralDate */ +.chroma .m { color: #649bc4; } /* LiteralNumber */ +.chroma .mb { color: #649bc4; } /* LiteralNumberBin */ +.chroma .mf { color: #649bc4; } /* LiteralNumberFloat */ +.chroma .mh { color: #649bc4; } /* LiteralNumberHex */ +.chroma .mi { color: #649bc4; } /* LiteralNumberInteger */ +.chroma .mo { color: #649bc4; } /* LiteralNumberOct */ +.chroma .n { color: #c9d1d9; } /* Name */ +.chroma .na { color: #fabd2f; } /* NameAttribute */ +.chroma .nb { color: #fabd2f; } /* NameBuiltin */ +.chroma .nc { color: #ffaa10; } /* NameClass */ +.chroma .nd { color: #8ec07c; } /* NameDecorator */ +.chroma .ne { color: #ff7540; } /* NameException */ +.chroma .nf { color: #fabd2f; } /* NameFunction */ +.chroma .ni { color: #fabd2f; } /* NameEntity */ +.chroma .nl { color: #ff7540; } /* NameLabel */ +.chroma .nn { color: #c9d1d9; } /* NameNamespace */ +.chroma .no { color: #649bc4; } /* NameConstant */ +.chroma .nt { color: #ff7540; } /* NameTag */ +.chroma .nv { color: #ebdbb2; } /* NameVariable */ +.chroma .nx { color: #b6bac5; } /* NameOther */ +.chroma .o { color: #ff7540; } /* Operator */ +.chroma .ow { color: #5f8700; } /* OperatorWord */ +.chroma .p { color: #d2d4db; } /* Punctuation */ +.chroma .py {} /* NameProperty */ +.chroma .s { color: #b8bb26; } /* LiteralString */ +.chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */ +.chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */ +.chroma .sa { color: #ffaa10; } /* LiteralStringAffix */ +.chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */ +.chroma .sc { color: #ffaa10; } /* LiteralStringChar */ +.chroma .sd { color: #b8bb26; } /* LiteralStringDoc */ +.chroma .se { color: #ff8540; } /* LiteralStringEscape */ +.chroma .sh { color: #b8bb26; } /* LiteralStringHeredoc */ +.chroma .si { color: #ffaa10; } /* LiteralStringInterpol */ +.chroma .sr { color: #9075cd; } /* LiteralStringRegex */ +.chroma .ss { color: #ff8540; } /* LiteralStringSymbol */ +.chroma .sx { color: #ffaa10; } /* LiteralStringOther */ +.chroma .vc { color: #649bee; } /* NameVariableClass */ +.chroma .vg { color: #649bee; } /* NameVariableGlobal */ +.chroma .vi { color: #649bee; } /* NameVariableInstance */ +.chroma .vm {} /* NameVariableMagic */ +.chroma .w { color: #7f8699; } /* TextWhitespace */ +.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */ diff --git a/web_src/css/chroma/light.css b/web_src/css/chroma/light.css new file mode 100644 index 0000000..c1e4cb3 --- /dev/null +++ b/web_src/css/chroma/light.css @@ -0,0 +1,76 @@ +/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */ +.chroma .bp { color: #999999; } /* NameBuiltinPseudo */ +.chroma .c { color: #6a737d; } /* Comment */ +.chroma .c1 { color: #6a737d; } /* CommentSingle */ +.chroma .ch { color: #6a737d; } /* CommentHashbang */ +.chroma .cm { color: #999988; } /* CommentMultiline */ +.chroma .cp { color: #109295; } /* CommentPreproc */ +.chroma .cpf { color: #4c4dbc; } /* CommentPreprocFile */ +.chroma .cs { color: #999999; } /* CommentSpecial */ +.chroma .dl { color: #106303; } /* LiteralStringDelimiter */ +.chroma .fm {} /* NameFunctionMagic */ +.chroma .g {} /* Generic */ +.chroma .gd { color: #000000; background-color: #ffdddd; } /* GenericDeleted */ +.chroma .ge { color: #000000; } /* GenericEmph */ +.chroma .gh { color: #999999; } /* GenericHeading */ +.chroma .gi { color: #000000; background-color: #ddffdd; } /* GenericInserted */ +.chroma .gl {} /* GenericUnderline */ +.chroma .go { color: #888888; } /* GenericOutput */ +.chroma .gp { color: #555555; } /* GenericPrompt */ +.chroma .gr { color: #aa0000; } /* GenericError */ +.chroma .gs {} /* GenericStrong */ +.chroma .gt { color: #aa0000; } /* GenericTraceback */ +.chroma .gu { color: #aaaaaa; } /* GenericSubheading */ +.chroma .il { color: #009999; } /* LiteralNumberIntegerLong */ +.chroma .k { color: #d73a49; } /* Keyword */ +.chroma .kc { color: #d73a49; } /* KeywordConstant */ +.chroma .kd { color: #d73a49; } /* KeywordDeclaration */ +.chroma .kn { color: #d73a49; } /* KeywordNamespace */ +.chroma .kp { color: #d73a49; } /* KeywordPseudo */ +.chroma .kr { color: #d73a49; } /* KeywordReserved */ +.chroma .kt { color: #445588; } /* KeywordType */ +.chroma .l {} /* Literal */ +.chroma .ld {} /* LiteralDate */ +.chroma .m { color: #009999; } /* LiteralNumber */ +.chroma .mb { color: #009999; } /* LiteralNumberBin */ +.chroma .mf { color: #009999; } /* LiteralNumberFloat */ +.chroma .mh { color: #009999; } /* LiteralNumberHex */ +.chroma .mi { color: #009999; } /* LiteralNumberInteger */ +.chroma .mo { color: #009999; } /* LiteralNumberOct */ +.chroma .n {} /* Name */ +.chroma .na { color: #d73a49; } /* NameAttribute */ +.chroma .nb { color: #005cc5; } /* NameBuiltin */ +.chroma .nc { color: #445588; } /* NameClass */ +.chroma .nd { color: #3c5d5d; } /* NameDecorator */ +.chroma .ne { color: #990000; } /* NameException */ +.chroma .nf { color: #005cc5; } /* NameFunction */ +.chroma .ni { color: #6f42c1; } /* NameEntity */ +.chroma .nl { color: #990000; } /* NameLabel */ +.chroma .nn { color: #555555; } /* NameNamespace */ +.chroma .no { color: #008080; } /* NameConstant */ +.chroma .nt { color: #22863a; } /* NameTag */ +.chroma .nv { color: #008080; } /* NameVariable */ +.chroma .nx { color: #24292e; } /* NameOther */ +.chroma .o { color: #d73a49; } /* Operator */ +.chroma .ow { color: #d73a49; } /* OperatorWord */ +.chroma .p {} /* Punctuation */ +.chroma .py {} /* NameProperty */ +.chroma .s { color: #106303; } /* LiteralString */ +.chroma .s1 { color: #106303; } /* LiteralStringSingle */ +.chroma .s2 { color: #106303; } /* LiteralStringDouble */ +.chroma .sa { color: #cc7a00; } /* LiteralStringAffix */ +.chroma .sb { color: #106303; } /* LiteralStringBacktick */ +.chroma .sc { color: #cc7a00; } /* LiteralStringChar */ +.chroma .sd { color: #106303; } /* LiteralStringDoc */ +.chroma .se { color: #994400; } /* LiteralStringEscape */ +.chroma .sh { color: #106303; } /* LiteralStringHeredoc */ +.chroma .si { color: #cc7a00; } /* LiteralStringInterpol */ +.chroma .sr { color: #4c4dbc; } /* LiteralStringRegex */ +.chroma .ss { color: #994400; } /* LiteralStringSymbol */ +.chroma .sx { color: #106303; } /* LiteralStringOther */ +.chroma .vc { color: #008080; } /* NameVariableClass */ +.chroma .vg { color: #008080; } /* NameVariableGlobal */ +.chroma .vi { color: #008080; } /* NameVariableInstance */ +.chroma .vm {} /* NameVariableMagic */ +.chroma .w { color: #bbbbbb; } /* TextWhitespace */ +.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */ diff --git a/web_src/css/codemirror/base.css b/web_src/css/codemirror/base.css new file mode 100644 index 0000000..aedf7d8 --- /dev/null +++ b/web_src/css/codemirror/base.css @@ -0,0 +1,49 @@ +.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 */ +} + +.EasyMDEContainer .CodeMirror { + color: var(--color-input-text); + background-color: var(--color-input-background); + border-color: var(--color-secondary); + font: 14px var(--fonts-monospace); +} + +.EasyMDEContainer .CodeMirror.cm-s-default { + border-radius: var(--border-radius); + padding: 0 !important; +} + +.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused { + border-right: 1px solid var(--color-primary) !important; +} + +.CodeMirror-cursor { + border-color: var(--color-caret) !important; +} + +.CodeMirror .cm-comment { + background: inherit !important; +} + +.CodeMirror .CodeMirror-code { + font: 14px var(--fonts-monospace); +} + +.CodeMirror-selected { + background: var(--color-primary-light-1) !important; + color: var(--color-white) !important; +} + +.CodeMirror-placeholder { + color: var(--color-placeholder-text) !important; + opacity: 1 !important; +} + +.CodeMirror-focused { + border-color: var(--color-primary) !important; +} + +.CodeMirror :focus { + outline: none; +} diff --git a/web_src/css/codemirror/dark.css b/web_src/css/codemirror/dark.css new file mode 100644 index 0000000..8a20d1c --- /dev/null +++ b/web_src/css/codemirror/dark.css @@ -0,0 +1,106 @@ +.CodeMirror.cm-s-default .cm-property, +.CodeMirror.cm-s-paper .cm-property { + color: #a0cc75; +} + +.CodeMirror.cm-s-default .cm-header, +.CodeMirror.cm-s-paper .cm-header { + color: #9daccc; +} + +.CodeMirror.cm-s-default .cm-quote, +.CodeMirror.cm-s-paper .cm-quote { + color: #009900; +} + +.CodeMirror.cm-s-default .cm-keyword, +.CodeMirror.cm-s-paper .cm-keyword { + color: #cc8a61; +} + +.CodeMirror.cm-s-default .cm-atom, +.CodeMirror.cm-s-paper .cm-atom { + color: #ef5e77; +} + +.CodeMirror.cm-s-default .cm-number, +.CodeMirror.cm-s-paper .cm-number { + color: #ff5656; +} + +.CodeMirror.cm-s-default .cm-def, +.CodeMirror.cm-s-paper .cm-def { + color: #e4e4e4; +} + +.CodeMirror.cm-s-default .cm-variable-2, +.CodeMirror.cm-s-paper .cm-variable-2 { + color: #00bdbf; +} + +.CodeMirror.cm-s-default .cm-variable-3, +.CodeMirror.cm-s-paper .cm-variable-3 { + color: #008855; +} + +.CodeMirror.cm-s-default .cm-comment, +.CodeMirror.cm-s-paper .cm-comment { + color: #8e9ab3; +} + +.CodeMirror.cm-s-default .cm-string, +.CodeMirror.cm-s-paper .cm-string { + color: #a77272; +} + +.CodeMirror.cm-s-default .cm-string-2, +.CodeMirror.cm-s-paper .cm-string-2 { + color: #ff5500; +} + +.CodeMirror.cm-s-default .cm-meta, +.CodeMirror.cm-s-paper .cm-meta, +.CodeMirror.cm-s-default .cm-qualifier, +.CodeMirror.cm-s-paper .cm-qualifier { + color: #ffb176; +} + +.CodeMirror.cm-s-default .cm-builtin, +.CodeMirror.cm-s-paper .cm-builtin { + color: #b7c951; +} + +.CodeMirror.cm-s-default .cm-bracket, +.CodeMirror.cm-s-paper .cm-bracket { + color: #999977; +} + +.CodeMirror.cm-s-default .cm-tag, +.CodeMirror.cm-s-paper .cm-tag { + color: #f1d273; +} + +.CodeMirror.cm-s-default .cm-attribute, +.CodeMirror.cm-s-paper .cm-attribute { + color: #bfcc70; +} + +.CodeMirror.cm-s-default .cm-hr, +.CodeMirror.cm-s-paper .cm-hr { + color: #999999; +} + +.CodeMirror.cm-s-default .cm-url, +.CodeMirror.cm-s-paper .cm-url { + color: #c5cfd0; +} + +.CodeMirror.cm-s-default .cm-link, +.CodeMirror.cm-s-paper .cm-link { + color: #d8c792; +} + +.CodeMirror.cm-s-default .cm-error, +.CodeMirror.cm-s-paper .cm-error { + color: #dbdbeb; +} diff --git a/web_src/css/codemirror/light.css b/web_src/css/codemirror/light.css new file mode 100644 index 0000000..aa89263 --- /dev/null +++ b/web_src/css/codemirror/light.css @@ -0,0 +1 @@ +/* Placeholder, there is no light theme, it uses CM defaults */ diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css new file mode 100644 index 0000000..4bb9fa3 --- /dev/null +++ b/web_src/css/dashboard.css @@ -0,0 +1,81 @@ +.dashboard.feeds .context.user.menu, +.dashboard.issues .context.user.menu { + z-index: 101; + min-width: 200px; +} + +.dashboard.feeds .context.user.menu .ui.header, +.dashboard.issues .context.user.menu .ui.header { + font-size: 1rem; + text-transform: none; +} + +.dashboard.feeds .filter.menu, +.dashboard.issues .filter.menu { + width: initial; +} + +.dashboard.feeds .filter.menu .item, +.dashboard.issues .filter.menu .item { + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; +} + +.dashboard.feeds .filter.menu .item .text.truncate, +.dashboard.issues .filter.menu .item .text.truncate { + width: 75%; +} + +/* Sort */ +.dashboard.feeds .filter.menu .jump.item, +.dashboard.issues .filter.menu .jump.item { + margin: 1px; + padding-right: 0; +} + +.dashboard.feeds .filter.menu .menu, +.dashboard.issues .filter.menu .menu { + max-height: 300px; + overflow-x: auto; + right: 0 !important; + left: auto !important; +} + +@media (max-width: 767.98px) { + .dashboard.feeds .filter.menu, + .dashboard.issues .filter.menu { + width: 100%; + } +} + +.dashboard.feeds .right.stackable.menu > .item.active, +.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 .right.menu { + gap: .35714286em; +} + +.dashboard .secondary-nav .right.menu div.item { + padding-left: 0.5rem; +} + +.dashboard .secondary-nav .org-visibility .label { + margin-left: 5px; +} + +.dashboard .secondary-nav .ui.dropdown { + max-width: 100%; +} diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css new file mode 100644 index 0000000..f190c7e --- /dev/null +++ b/web_src/css/editor/combomarkdowneditor.css @@ -0,0 +1,136 @@ +.combo-markdown-editor { + width: 100%; +} + +.combo-markdown-editor markdown-toolbar { + cursor: default; + display: flex; + align-items: center; + padding-bottom: 10px; + gap: .5rem; + flex-wrap: wrap; +} + +.combo-markdown-editor .markdown-toolbar-group { + display: flex; +} + +.combo-markdown-editor .markdown-toolbar-group:last-child { + flex: 1; + justify-content: flex-end; +} + +.combo-markdown-editor .markdown-toolbar-button { + border: none; + background: none; + user-select: none; + padding: 5px; + cursor: pointer; + color: var(--color-text); + line-height: 20px; +} + +.combo-markdown-editor .markdown-toolbar-button:hover { + color: var(--color-primary); +} + +.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; +} + +text-expander { + display: block; + position: relative; +} + +text-expander .suggestions { + position: absolute; + min-width: 180px; + padding: 0; + margin-top: 24px; + list-style: none; + background: var(--color-box-body); + border-radius: var(--border-radius); + border: 1px solid var(--color-secondary); + box-shadow: 0 .5rem 1rem var(--color-shadow); + z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ +} + +text-expander .suggestions li { + display: flex; + align-items: center; + cursor: pointer; + padding: 4px 8px; + font-weight: var(--font-weight-medium); +} + +text-expander .suggestions li + li { + border-top: 1px solid var(--color-secondary-alpha-40); +} + +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 li:hover { + background: var(--color-hover); +} + +text-expander .suggestions .fullname { + font-weight: var(--font-weight-normal); + margin-left: 4px; + color: var(--color-text-light-1); +} + +text-expander .suggestions li[aria-selected="true"], +text-expander .suggestions li[aria-selected="true"] span { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +text-expander .suggestions img { + width: 24px; + height: 24px; + margin-right: 8px; +} diff --git a/web_src/css/editor/fileeditor.css b/web_src/css/editor/fileeditor.css new file mode 100644 index 0000000..444ee8c --- /dev/null +++ b/web_src/css/editor/fileeditor.css @@ -0,0 +1,85 @@ +.repository.file.editor .tab[data-tab="write"] { + padding: 0 !important; +} + +.repository.file.editor .tab[data-tab="write"] .editor-toolbar { + border: 0 !important; +} + +.repository.file.editor .tab[data-tab="write"] .CodeMirror { + border-left: 0; + border-right: 0; + border-bottom: 0; +} + +.repo-editor-header { + display: flex; + margin: 1rem 0; + padding: 3px 0; +} + +.editor-toolbar { + border-color: var(--color-secondary); +} + +.editor-toolbar.fullscreen { + background: var(--color-body); +} + +.editor-toolbar button { + border: none !important; + color: var(--color-text-light); +} + +.editor-toolbar button:not(:hover) { + background-color: transparent !important; +} + +.editor-toolbar i.separator { + border-left: none; + border-right-color: var(--color-secondary); +} + +.editor-toolbar button:hover { + background: var(--color-hover); +} + +.editor-toolbar button.active { + background: var(--color-active); +} + +/* hide preview button, we have the preview tab for this */ +.editor-toolbar:not(.fullscreen) .preview { + display: none; +} + +/* hide revert button in fullscreen, it breaks the page */ +.editor-toolbar.fullscreen .revert-to-textarea { + display: none; +} + +.editor-preview { + background-color: var(--color-body); +} + +.editor-preview-side { + border-color: var(--color-secondary); +} + +.editor-statusbar { + color: var(--color-text-light); +} + +.editor-loading { + padding: 1rem; + text-align: center; +} + +.edit-diff { + padding: 0 !important; +} + +.edit-diff > div > .ui.table { + border-top: none !important; + border-bottom: none !important; +} diff --git a/web_src/css/explore.css b/web_src/css/explore.css new file mode 100644 index 0000000..5cdee82 --- /dev/null +++ b/web_src/css/explore.css @@ -0,0 +1,31 @@ +.explore .secondary-nav { + border-width: 1px !important; +} + +.explore .secondary-nav .svg { + width: 16px; + text-align: center; + margin-right: 5px; +} + +.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; +} + +.ui.repository.branches .overflow-visible { + overflow: visible; +} + +/* fix alignment of PR popup in branches table */ +.ui.repository.branches table .ui.popup { + text-align: left; +} diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css new file mode 100644 index 0000000..34a104c --- /dev/null +++ b/web_src/css/features/codeeditor.css @@ -0,0 +1,48 @@ +.monaco-editor-container, +.editor-loading.is-loading { + width: 100%; + min-height: 200px; + height: 90vh; +} + +.edit.githook .monaco-editor-container { + border: 1px solid var(--color-secondary); + height: 70vh; +} + +/* overwrite conflicting styles from fomantic */ +.monaco-editor-container .inputarea { + min-height: 0 !important; + margin: 0 !important; + padding: 0 !important; + resize: none !important; + border: none !important; + color: transparent !important; + background-color: transparent !important; +} + +/* these seem unthemeable */ +.monaco-scrollable-element > .scrollbar > .slider { + background: var(--color-primary) !important; +} +.monaco-scrollable-element > .scrollbar > .slider:hover { + background: var(--color-primary-dark-1) !important; +} +.monaco-scrollable-element > .scrollbar > .slider:active { + background: var(--color-primary-dark-2) !important; +} + +/* fomantic styles destroy this element only visible on IOS, restore it */ +.monaco-editor .iPadShowKeyboard { + border: none !important; + width: 58px !important; + min-width: 0 !important; + height: 36px !important; + min-height: 0 !important; + margin: 0 !important; + padding: 0 !important; + position: absolute !important; + resize: none !important; + overflow: hidden !important; + border-radius: var(--border-radius-medium) !important; +} diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css new file mode 100644 index 0000000..b743678 --- /dev/null +++ b/web_src/css/features/colorpicker.css @@ -0,0 +1,47 @@ +.js-color-picker-input { + display: flex; + position: relative; +} + +.js-color-picker-input input { + padding-top: 8px !important; + padding-bottom: 8px !important; + padding-left: 32px !important; +} + +.js-color-picker-input .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); /* stylelint-disable-line scale-unlimited/declaration-strict-value */ + background-position: 0 0, 4px 4px; + background-size: 8px 8px; +} + +.js-color-picker-input .preview-square::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + border-radius: inherit; + background-color: currentcolor; +} + +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; +} diff --git a/web_src/css/features/console.css b/web_src/css/features/console.css new file mode 100644 index 0000000..e2d3327 --- /dev/null +++ b/web_src/css/features/console.css @@ -0,0 +1,338 @@ +/* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */ + +.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 { + to { + visibility: hidden; + } +} + +/* ansi_up 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 steps(3, start) 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; } diff --git a/web_src/css/features/dropzone.css b/web_src/css/features/dropzone.css new file mode 100644 index 0000000..cbc32df --- /dev/null +++ b/web_src/css/features/dropzone.css @@ -0,0 +1,59 @@ +.ui .field .dropzone { + border: 2px dashed var(--color-secondary); + background: none; + box-shadow: none; + padding: 0; + border-radius: var(--border-radius-medium); + min-height: 0; +} + +.ui .field .dropzone .dz-message { + margin: 10px 0; +} + +.dropzone .dz-button { + color: var(--color-text-light) !important; +} + +.dropzone:hover .dz-button { + color: var(--color-text) !important; +} + +.dropzone .dz-error-message { + top: 145px !important; +} + +.dropzone .dz-image { + display: flex !important; + align-items: center !important; + justify-content: center !important; + border-radius: 0 !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; +} + +.ui .field .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; +} diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css new file mode 100644 index 0000000..4da871d --- /dev/null +++ b/web_src/css/features/gitgraph.css @@ -0,0 +1,309 @@ +#git-graph-content { + overflow-x: auto; + width: 100%; + min-height: 250px; +} + +#git-graph-heading { + display: flex; + justify-content: space-between; + padding-bottom: 20px; +} + +#git-graph-heading-left { + display: flex; + gap: 1rem; +} + +#git-graph-heading h2 { + margin: 0; +} + +@media (min-width: 767.98px) { + #git-graph-heading { + align-items: center; + } +} + +@media (max-width: 767.98px) { + #git-graph-heading, + #git-graph-heading-left { + flex-direction: column; + } + + #git-graph-heading-left { + margin-bottom: 1rem; + } + + h2, + #flow-select-refs-dropdown { + max-width: 100%; + } +} + +#git-graph-container #flow-select-refs-dropdown { + min-width: 250px; +} + +#git-graph-container #flow-select-refs-dropdown .ui.label { + max-width: 180px; + display: inline-flex !important; + align-items: center; +} + +#git-graph-container #flow-select-refs-dropdown .default.text { + padding-top: 4px; + padding-bottom: 4px; +} + +#git-graph-container #flow-select-refs-dropdown input.search { + position: relative; + top: 1px; +} + +#git-graph-container li { + list-style-type: none; + height: 24px; + line-height: 24px; + white-space: nowrap; + display: flex; + align-items: center; +} + +#git-graph-container li .node-relation { + font-family: var(--fonts-monospace); +} + +#git-graph-container li .author { + color: var(--color-text-light); +} + +#git-graph-container li .time { + color: var(--color-text-light-3); +} + +#git-graph-container li a:not(.ui):hover { + text-decoration: underline; +} + +#git-graph-container li a em { + color: var(--color-red); + border-bottom: 1px dotted var(--color-secondary); + text-decoration: none; + font-style: normal; +} + +#git-graph-container #rel-container { + max-width: 30%; + overflow-x: auto; + float: left; +} + +#git-graph-container #rev-list { + margin: 0; + padding: 0; +} + +#git-graph-container #rev-list li.highlight.hover { + background-color: var(--color-secondary-alpha-30); +} + +#git-graph-container #rev-list .commit-refs .button { + padding: 2px 4px; + margin-right: 0.25em; + display: inline-block; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; +} + +#git-graph-container #rev-list .sha.label { + padding-top: 5px; + padding-bottom: 3px; +} + +#git-graph-container #rev-list .sha.label .ui.detail.icon.button { + padding-top: 3px; + margin-top: -5px; + padding-bottom: 1px; +} + +#git-graph-container #rev-list .author img.ui.avatar { + width: auto; + height: 18px; + max-width: none; +} + +#git-graph-container #graph-raw-list { + margin: 0; +} + +#git-graph-container.monochrome #rel-container .flow-group { + stroke: var(--color-secondary-dark-5); + fill: var(--color-secondary-dark-5); +} + +#git-graph-container.monochrome #rel-container .flow-group.highlight { + stroke: var(--color-secondary-dark-12); + fill: var(--color-secondary-dark-12); +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 { + stroke: #499a37; + fill: #499a37; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 { + stroke: #ce4751; + fill: #ce4751; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 { + stroke: #8f9121; + fill: #8f9121; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 { + stroke: #ac32a6; + fill: #ac32a6; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 { + stroke: #7445e9; + fill: #7445e9; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 { + stroke: #c67d28; + fill: #c67d28; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 { + stroke: #4db392; + fill: #4db392; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 { + stroke: #aa4d30; + fill: #aa4d30; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 { + stroke: #2a6f84; + fill: #2a6f84; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 { + stroke: #c45327; + fill: #c45327; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 { + stroke: #3d965c; + fill: #3d965c; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 { + stroke: #792a93; + fill: #792a93; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 { + stroke: #439d73; + fill: #439d73; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 { + stroke: #103aad; + fill: #103aad; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 { + stroke: #982e85; + fill: #982e85; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 { + stroke: #7db233; + fill: #7db233; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-1 { + stroke: #5ac144; + fill: #5ac144; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-2 { + stroke: #ed5a8b; + fill: #ed5a8b; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-3 { + stroke: #ced049; + fill: #ced048; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-4 { + stroke: #db61d7; + fill: #db62d6; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-5 { + stroke: #8455f9; + fill: #8455f9; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-6 { + stroke: #e6a151; + fill: #e6a151; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-7 { + stroke: #44daaa; + fill: #44daaa; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-8 { + stroke: #dd7a5c; + fill: #dd7a5c; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-9 { + stroke: #38859c; + fill: #38859c; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-10 { + stroke: #d95520; + fill: #d95520; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-11 { + stroke: #42ae68; + fill: #42ae68; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-12 { + stroke: #9126b5; + fill: #9126b5; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-13 { + stroke: #4ab080; + fill: #4ab080; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-14 { + stroke: #284fb8; + fill: #284fb8; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-15 { + stroke: #971c80; + fill: #971c80; +} + +#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-0 { + stroke: #87ca28; + fill: #87ca28; +} diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css new file mode 100644 index 0000000..c064590 --- /dev/null +++ b/web_src/css/features/heatmap.css @@ -0,0 +1,58 @@ +#user-heatmap { + width: 100%; + font-size: 9px; + position: relative; +} + +/* before the Vue component is mounted, show a loading indicator with dummy size */ +/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */ +#user-heatmap.is-loading { + aspect-ratio: 5.415; /* the size is about 790 x 145 */ +} +.user.profile #user-heatmap.is-loading { + aspect-ratio: 5.645; /* the size is about 953 x 169 */ +} + +#user-heatmap text { + fill: currentcolor !important; +} + +/* for the "Less" and "More" legend */ +#user-heatmap .vch__legend .vch__legend { + display: flex; + font-size: 11px; + align-items: center; + justify-content: right; +} + +#user-heatmap .vch__legend .vch__legend div:first-child, +#user-heatmap .vch__legend .vch__legend div:last-child { + display: inline-block; + padding: 0 5px; +} + +#user-heatmap .vch__day__square:hover { + outline: 1.5px solid var(--color-text); +} + +/* move the "? contributions in the last ? months" text from top to bottom */ +#user-heatmap .total-contributions { + font-size: 11px; + position: absolute; + bottom: 0; + left: 25px; +} + +@media (max-width: 1200px) { + #user-heatmap .total-contributions { + left: 21px; + } +} + +@media (max-width: 1000px) { + #user-heatmap .total-contributions { + font-size: 10px; + left: 17px; + bottom: -4px; + } +} diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css new file mode 100644 index 0000000..c8ead2b --- /dev/null +++ b/web_src/css/features/imagediff.css @@ -0,0 +1,114 @@ +.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); + --gradient: conic-gradient(var(--checkerboard-color-1) 90deg, var(--checkerboard-color-2) 90deg 180deg, var(--checkerboard-color-1) 180deg 270deg, var(--checkerboard-color-2) 270deg); + background: var(--gradient); + background-size: 20px 20px; +} + +.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; +} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css new file mode 100644 index 0000000..1401916 --- /dev/null +++ b/web_src/css/features/projects.css @@ -0,0 +1,108 @@ +.board { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + margin: 0 0.5em; +} + +.project-column { + background-color: var(--color-project-column-bg) !important; + border: 1px solid var(--color-secondary) !important; + border-radius: var(--border-radius); + margin: 0 0.5rem !important; + padding: 0.5rem !important; + width: 320px; + height: calc(100vh - 450px); + min-height: 60vh; + overflow-y: scroll; + flex: 0 0 auto; + overflow: visible; + display: flex; + flex-direction: column; + cursor: default; +} + +.project-column .issue-card { + color: var(--color-text); +} + +.project-column-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.project-column-title { + background: none !important; + line-height: 1.25 !important; + color: inherit !important; + cursor: inherit; +} + +.project-column-title-label { + overflow: hidden; + text-overflow: ellipsis; +} + +.project-column-header > .dropdown { + flex-shrink: 0; +} + +.project-column > .cards { + flex: 1; + display: flex; + align-content: baseline; + margin: 0 !important; + padding: 0 !important; + flex-wrap: nowrap !important; + flex-direction: column; + overflow-x: auto; + gap: .25rem; +} + +.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: scroll; + cursor: default; + text-align: center; +} + +.card-attachment-images img { + display: inline-block; + max-height: 50px; + border-radius: var(--border-radius); + text-align: left; + margin-right: 2px; + aspect-ratio: 1; +} + +.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; +} diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css new file mode 100644 index 0000000..bd84367 --- /dev/null +++ b/web_src/css/features/tribute.css @@ -0,0 +1,42 @@ +@import "tributejs/dist/tribute.css"; + +.tribute-container { + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); + border-radius: var(--border-radius); +} + +.tribute-container ul { + margin-top: 0 !important; + background: var(--color-body) !important; +} + +.tribute-container li { + padding: 3px 0.5rem !important; +} + +.tribute-container li span.fullname { + font-weight: var(--font-weight-normal); + font-size: 0.8rem; + margin-left: 3px; +} + +.tribute-container li.highlight, +.tribute-container li:hover { + background: var(--color-primary) !important; + color: var(--color-primary-contrast) !important; +} + +.tribute-item { + display: flex; + align-items: center; +} + +.tribute-item .emoji, +.tribute-item img[src*="/avatar/"] { + margin-right: 0.5rem; +} + +.tribute-container img { + width: 1.5rem !important; + height: 1.5rem !important; +} diff --git a/web_src/css/font_i18n.css b/web_src/css/font_i18n.css new file mode 100644 index 0000000..0ac4c83 --- /dev/null +++ b/web_src/css/font_i18n.css @@ -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; + } +} diff --git a/web_src/css/form.css b/web_src/css/form.css new file mode 100644 index 0000000..fb9364d --- /dev/null +++ b/web_src/css/form.css @@ -0,0 +1,520 @@ +fieldset { + margin: 0.5em 0 1em; + padding: 0; +} + +fieldset legend { + font-weight: var(--font-weight-medium); + margin-bottom: 0.75em; +} + +fieldset label { + display: block; + margin-bottom: 0.6em; +} + +fieldset label:has(input[type="text"]), +fieldset label:has(input[type="number"]) { + font-weight: var(--font-weight-medium); +} + +fieldset .help { + font-weight: var(--font-weight-normal); +} + +.form fieldset .help { /* overrides other .form .help rules in this file, remove when obsolete */ + display: block !important; + padding-bottom: 0; +} + +fieldset input[type="checkbox"], +fieldset input[type="radio"] { + margin-right: 0.75em; + vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */ +} + +@media (min-width: 768px) { + .optionmatrix input[type="radio"] { + margin: 0; + } + + /* center columns except first */ + .optionmatrix td + td, .optionmatrix th + th { + min-width: 10em; + text-align: center !important; /* overrides table.css "inherit" rule */ + } +} + +/* if an element with class "hide-unless-checked" follows a label + * that has no checked input, it will be hidden.*/ +label:not(:has(input:checked)) + .hide-unless-checked { + display: none; +} + +.ui.input textarea, +.ui.form textarea, +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="file"], +.ui.form input[type="url"] { + transition: none; +} + +input, +textarea, +.ui.input > input, +.ui.form input:not([type]), +.ui.form select, +.ui.form textarea, +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="file"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="text"], +.ui.form input[type="time"], +.ui.form input[type="url"], +.ui.selection.dropdown { + background: var(--color-input-background); + border-color: var(--color-input-border); + color: var(--color-input-text); +} + +/* fix fomantic small dropdown having inconsistent padding with input */ +.ui.small.selection.dropdown { + padding: .67857143em 1.6em .67857143em 1em; +} + +input:hover, +textarea:hover, +.ui.input input:hover, +.ui.form input:not([type]):hover, +.ui.form select:hover, +.ui.form textarea:hover, +.ui.form input[type="date"]:hover, +.ui.form input[type="datetime-local"]:hover, +.ui.form input[type="email"]:hover, +.ui.form input[type="file"]:hover, +.ui.form input[type="number"]:hover, +.ui.form input[type="password"]:hover, +.ui.form input[type="search"]:hover, +.ui.form input[type="tel"]:hover, +.ui.form input[type="text"]:hover, +.ui.form input[type="time"]:hover, +.ui.form input[type="url"]:hover, +.ui.selection.dropdown:hover { + background: var(--color-input-background); + border-color: var(--color-input-border-hover); + color: var(--color-input-text); +} + +input:focus, +textarea:focus, +.ui.input input:focus, +.ui.form input:not([type]):focus, +.ui.form select:focus, +.ui.form textarea:focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="datetime-local"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="file"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="url"]:focus, +.ui.selection.dropdown:focus { + background: var(--color-input-background); + border-color: var(--color-primary); + color: var(--color-input-text); +} + +.ui.form .field > label, +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + color: var(--color-text); +} + +.ui.form .required.fields > .field > label::after, +.ui.form .required.field > label::after, +.ui.form label.required::after { + color: var(--color-red); +} + +.ui.input { + color: var(--color-input-text); +} + +/* match <select> padding to <input> */ +.ui.form select { + padding: 0.67857143em 1em; +} + +.form .help { + color: var(--color-secondary-dark-8); + padding-bottom: 0.6em; + display: inline-block; +} + +#create-page-form form { + margin: auto; +} + +#create-page-form form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + #create-page-form form { + width: 800px !important; + } + #create-page-form form .header { + padding-left: 280px !important; + } + #create-page-form form .inline.field > label { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + #create-page-form form .help { + margin-left: 265px !important; + } + #create-page-form form .optional .title { + margin-left: 250px !important; + } + #create-page-form form .inline.field > input, + #create-page-form form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767.98px) { + #create-page-form form .optional .title { + margin-left: 15px; + } + #create-page-form form .inline.field > label { + display: block; + } +} + +.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 { + width: 50%; + } +} + +@media (max-height: 575px) { + #rc-imageselect, + .g-recaptcha-style, + .h-captcha-style { + transform: scale(0.77); + transform-origin: 0 0; + } +} + +.user.forgot.password form, +.user.reset.password form, +.user.signup form { + margin: auto; + width: 700px !important; +} + +.user.activate form .ui.message, +.user.forgot.password form .ui.message, +.user.reset.password form .ui.message, +.user.link-account form .ui.message, +.user.signin form .ui.message, +.user.signup form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + .user.activate form, + .user.forgot.password form, + .user.reset.password form, + .user.link-account form, + .user.signin form, + .user.signup form { + width: 800px !important; + } + .user.activate form .header, + .user.forgot.password form .header, + .user.reset.password form .header, + .user.link-account form .header, + .user.signin form .header, + .user.signup form .header { + padding-left: 280px !important; + } + .user.activate form .inline.field > label { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + .user.activate form .help, + .user.forgot.password form .help, + .user.reset.password form .help, + .user.link-account form .help, + .user.signin form .help, + .user.signup form .help { + margin-left: 265px !important; + } + .user.activate form .optional .title, + .user.forgot.password form .optional .title, + .user.reset.password form .optional .title, + .user.link-account form .optional .title, + .user.signin form .optional .title, + .user.signup form .optional .title { + margin-left: 250px !important; + } +} + +@media (max-width: 767.98px) { + .user.activate form .optional .title, + .user.forgot.password form .optional .title, + .user.reset.password form .optional .title, + .user.link-account form .optional .title, + .user.signin form .optional .title, + .user.signup form .optional .title { + margin-left: 15px; + } + .user.activate form .inline.field > label, + .user.forgot.password form .inline.field > label, + .user.reset.password form .inline.field > label, + .user.link-account form .inline.field > label, + .user.signin form .inline.field > label, + .user.signup form .inline.field > label { + display: block; + } +} + +.user.activate form .header, +.user.forgot.password form .header, +.user.reset.password form .header, +.user.link-account form .header, +.user.signin form .header, +.user.signup form .header { + padding-left: 0 !important; + text-align: center; +} + +.user.activate form .inline.field > label, +.user.forgot.password form .inline.field > label, +.user.reset.password form .inline.field > label, +.user.link-account form .inline.field > label, +.user.signin form .inline.field > label, +.user.signup form .inline.field > label { + width: 200px; +} + +@media (max-width: 767.98px) { + .user.activate form .inline.field > label, + .user.forgot.password form .inline.field > label, + .user.reset.password form .inline.field > label, + .user.link-account form .inline.field > label, + .user.signin form .inline.field > label, + .user.signup form .inline.field > label { + width: 100% !important; + } +} + +.user.activate form input[type="number"], +.user.forgot.password form input[type="number"], +.user.reset.password form input[type="number"], +.user.link-account form input[type="number"], +.user.signin form input[type="number"], +.user.signup form input[type="number"] { + -moz-appearance: textfield; +} + +.user.activate form input::-webkit-outer-spin-button, +.user.forgot.password form input::-webkit-outer-spin-button, +.user.reset.password form input::-webkit-outer-spin-button, +.user.link-account form input::-webkit-outer-spin-button, +.user.signin form input::-webkit-outer-spin-button, +.user.signup form input::-webkit-outer-spin-button, +.user.activate form input::-webkit-inner-spin-button, +.user.forgot.password form input::-webkit-inner-spin-button, +.user.reset.password form input::-webkit-inner-spin-button, +.user.link-account form input::-webkit-inner-spin-button, +.user.signin form input::-webkit-inner-spin-button, +.user.signup form input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.repository.new.repo form, +.repository.new.migrate form, +.repository.new.fork form { + margin: auto; +} + +.repository.new.repo form .ui.message, +.repository.new.migrate form .ui.message, +.repository.new.fork form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + .repository.new.repo form, + .repository.new.migrate form, + .repository.new.fork form { + width: 800px !important; + } + .repository.new.repo form .header, + .repository.new.migrate form .header, + .repository.new.fork form .header { + padding-left: 280px !important; + } + .repository.new.repo form .inline.field > label, + .repository.new.migrate form .inline.field > label, + .repository.new.fork form .inline.field > label { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + .repository.new.repo form .help, + .repository.new.migrate form .help, + .repository.new.fork form .help { + margin-left: 265px !important; + } + .repository.new.repo form .optional .title, + .repository.new.migrate form .optional .title, + .repository.new.fork form .optional .title { + margin-left: 250px !important; + } + .repository.new.repo form .inline.field > input, + .repository.new.migrate form .inline.field > input, + .repository.new.fork form .inline.field > input, + .repository.new.repo form .inline.field > textarea, + .repository.new.migrate form .inline.field > textarea, + .repository.new.fork form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767.98px) { + .repository.new.repo form .optional .title, + .repository.new.migrate form .optional .title, + .repository.new.fork form .optional .title { + margin-left: 15px; + } + .repository.new.repo form .inline.field > label, + .repository.new.migrate form .inline.field > label, + .repository.new.fork form .inline.field > label { + display: block; + } +} + +.repository.new.repo form .dropdown .text, +.repository.new.migrate form .dropdown .text, +.repository.new.fork form .dropdown .text { + margin-right: 0 !important; +} + +.repository.new.repo form .header, +.repository.new.migrate form .header, +.repository.new.fork form .header { + padding-left: 0 !important; + text-align: center; +} + +.repository.new.repo form .selection.dropdown, +.repository.new.migrate form .selection.dropdown, +.repository.new.fork form .selection.dropdown, +.repository.new.fork form .field a { + vertical-align: middle; + width: 50% !important; +} + +@media (max-width: 767.98px) { + .repository.new.repo form label, + .repository.new.migrate form label, + .repository.new.fork form label, + .repository.new.repo form .inline.field > input, + .repository.new.migrate form .inline.field > input, + .repository.new.fork form .inline.field > input, + .repository.new.fork form .field a, + .repository.new.repo form .selection.dropdown, + .repository.new.migrate form .selection.dropdown, + .repository.new.fork form .selection.dropdown { + width: 100% !important; + } + .repository.new.repo form .field button, + .repository.new.migrate form .field button, + .repository.new.fork form .field button, + .repository.new.repo form .field a, + .repository.new.migrate form .field a { + margin-bottom: 1em; + width: 100%; + } +} + +@media (min-width: 768px) { + .repository.new.repo .ui.form #auto-init { + margin-left: 265px !important; + } +} + +.repository.new.repo .ui.form .selection.dropdown:not(.owner) { + width: 50% !important; +} + +@media (max-width: 767.98px) { + .repository.new.repo .ui.form .selection.dropdown:not(.owner) { + width: 100% !important; + } +} + +.ui.form .field > .selection.dropdown { + min-width: 14em; /* matches the default min width */ +} + +.githook textarea { + font-family: var(--fonts-monospace); +} + +@media (max-width: 767.98px) { + .new.org .ui.form .field button, + .new.org .ui.form .field a { + margin-bottom: 1em; + width: 100%; + } + .new.org .ui.form .field input:not([type="checkbox"], [type="radio"]) { + width: 100% !important; + } +} diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css new file mode 100644 index 0000000..42d06e2 --- /dev/null +++ b/web_src/css/helpers.css @@ -0,0 +1,60 @@ +/* +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; } + +@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; } diff --git a/web_src/css/home.css b/web_src/css/home.css new file mode 100644 index 0000000..22f1a2d --- /dev/null +++ b/web_src/css/home.css @@ -0,0 +1,87 @@ +.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-primary); + 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-primary); +} + +.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.25em; +} + +.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; +} + +.page-footer .right-links > a { + border-left: 1px solid var(--color-secondary-dark-1); + padding-left: 8px; + margin-left: 5px; +} + +.page-footer .ui.dropdown.language .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; + } +} diff --git a/web_src/css/index.css b/web_src/css/index.css new file mode 100644 index 0000000..49ceb2c --- /dev/null +++ b/web_src/css/index.css @@ -0,0 +1,78 @@ +@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/message.css"; +@import "./modules/table.css"; +@import "./modules/card.css"; +@import "./modules/checkbox.css"; +@import "./modules/modal.css"; + +@import "./modules/select.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 "./shared/flex-list.css"; +@import "./shared/milestone.css"; +@import "./shared/repoorg.css"; +@import "./shared/settings.css"; + +@import "./features/dropzone.css"; +@import "./features/gitgraph.css"; +@import "./features/heatmap.css"; +@import "./features/imagediff.css"; +@import "./features/codeeditor.css"; +@import "./features/projects.css"; +@import "./features/tribute.css"; +@import "./features/console.css"; + +@import "./markup/content.css"; +@import "./markup/codecopy.css"; +@import "./markup/asciicast.css"; +@import "./markup/filepreview.css"; + +@import "./chroma/base.css"; +@import "./codemirror/base.css"; +@import "./font_i18n.css"; +@import "./base.css"; +@import "./home.css"; +@import "./install.css"; +@import "./form.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/linebutton.css"; +@import "./repo/wiki.css"; +@import "./repo/header.css"; + +@import "./editor/fileeditor.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"; + +@tailwind utilities; +@import "./helpers.css"; diff --git a/web_src/css/install.css b/web_src/css/install.css new file mode 100644 index 0000000..df2a7cb --- /dev/null +++ b/web_src/css/install.css @@ -0,0 +1,62 @@ +.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] 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; +} + +.page-content.install details.collapsible { + border: 1px solid var(--color-light-border); + border-radius: 0.28571429rem; +} +.page-content.install .collapsible summary { + background: transparent; + margin: auto; + text-align: center; +} diff --git a/web_src/css/markup/asciicast.css b/web_src/css/markup/asciicast.css new file mode 100644 index 0000000..89696bc --- /dev/null +++ b/web_src/css/markup/asciicast.css @@ -0,0 +1,8 @@ +.asciinema-player-container { + width: 100%; + height: auto; +} + +.ap-terminal { + overflow: hidden !important; +} diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css new file mode 100644 index 0000000..e3017ae --- /dev/null +++ b/web_src/css/markup/codecopy.css @@ -0,0 +1,35 @@ +.markup .code-block, +.markup .mermaid-block { + position: relative; +} + +.markup .code-copy { + position: absolute; + top: 8px; + right: 6px; + padding: 9px; + visibility: hidden; + animation: fadeout 0.2s both; +} + +/* adjustments for comment content having only 14px font size */ +.repository.view.issue .comment-list .comment .markup .code-copy { + right: 5px; + padding: 8px; +} + +/* 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 .code-copy:hover { + background: var(--color-secondary) !important; +} + +.markup .code-copy:active { + background: var(--color-secondary-dark-1) !important; +} + +.markup .code-block:hover .code-copy, +.markup .mermaid-block:hover .code-copy { + visibility: visible; + animation: fadein 0.2s both; +} diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css new file mode 100644 index 0000000..947480a --- /dev/null +++ b/web_src/css/markup/content.css @@ -0,0 +1,585 @@ +.markup { + overflow: hidden; + font-size: 16px; + line-height: 1.5 !important; + word-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 .absent { + color: var(--color-red); +} + +.markup .anchor { + float: left; + padding-right: 4px; + margin-left: -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 !important; + 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; +} + +.markup hr { + height: 4px; + padding: 0; + margin: 16px 0; + background-color: var(--color-secondary); + border: 0; +} + +.markup ul, +.markup ol { + padding-left: 2em; +} + +.markup ul.no-list, +.markup ol.no-list { + padding: 0; + list-style-type: none; +} + +.markup .task-list-item { + list-style-type: none; +} + +.markup .task-list-item p + ul { + margin-top: 16px; +} + +.markup .task-list-item input[type="checkbox"] { + margin: 0 .3em .25em -1.4em; + vertical-align: middle; + padding: 0; +} + +.markup .task-list-item input[type="checkbox"] + p { + margin-left: -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"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + background: var(--color-input-background); + height: 14px; + width: 14px; + 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 */ + -webkit-print-color-adjust: exact; + color-adjust: exact; +} + +.markup input[type="checkbox"]:not([disabled]):hover, +.markup input[type="checkbox"]:not([disabled]):active { + border-color: var(--color-primary); +} + +.markup input[type="checkbox"]::after { + position: absolute; + inset: 0; + pointer-events: none; + background: var(--color-text); + mask-size: cover; + -webkit-mask-size: cover; +} + +.markup input[type="checkbox"]:checked::after { + content: ""; + mask-image: var(--checkbox-mask-checked); + -webkit-mask-image: var(--checkbox-mask-checked); + -webkit-print-color-adjust: exact; + color-adjust: exact; +} + +.markup input[type="checkbox"]:indeterminate::after { + content: ""; + mask-image: var(--checkbox-mask-indeterminate); + -webkit-mask-image: var(--checkbox-mask-indeterminate); +} + +.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-left: 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%; + width: max-content; + 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; +} + +/* this background ensures images can break <hr>. We can only do this on + cases where the background is known and not transparent. */ +.markup.file-view img, +.markup.file-view 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-left: 20px; +} + +.markup img[align="left"], +.markup video[align="left"] { + padding-right: 28px; +} + +.markup .emoji { + max-width: none; + vertical-align: text-top; +} + +.markup span.frame { + display: block; + overflow: hidden; +} + +.markup span.frame > span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid var(--color-secondary); +} + +.markup span.frame span img, +.markup span.frame span video { + display: block; + float: left; +} + +.markup span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: var(--color-text); +} + +.markup span.align-center { + display: block; + overflow: hidden; + clear: both; +} + +.markup span.align-center > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; +} + +.markup span.align-center span img +.markup span.align-center span video { + margin: 0 auto; + text-align: center; +} + +.markup span.align-right { + display: block; + overflow: hidden; + clear: both; +} + +.markup span.align-right > span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; +} + +.markup span.align-right span img, +.markup span.align-right span video { + margin: 0; + text-align: right; +} + +.markup span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; +} + +.markup span.float-left span { + margin: 13px 0 0; +} + +.markup span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; +} + +.markup span.float-right > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; +} + +.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 del code { + text-decoration: inherit; +} + +.markup pre > code, +.markup .file-preview code { + padding: 0; + margin: 0; + font-size: 100%; + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: break-word; + background: transparent; + border: 0; +} + +.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 { + word-wrap: normal; +} + +.markup pre code, +.markup pre tt { + display: inline; + padding: 0; + line-height: inherit; + word-wrap: normal; + 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: inset 0 -1px 0 var(--color-secondary); +} + +.markup .ui.list .list, +.markup ol.ui.list ol, +.markup ul.ui.list ul { + padding-left: 2em; +} + +.file-revisions-btn { + display: block; + float: left; + margin-bottom: 2px !important; + padding: 11px !important; + margin-right: 10px !important; +} + +.file-revisions-btn i { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +.markup-render { + 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; +} diff --git a/web_src/css/markup/dark.css b/web_src/css/markup/dark.css new file mode 100644 index 0000000..700a485 --- /dev/null +++ b/web_src/css/markup/dark.css @@ -0,0 +1,13 @@ +.markup [src$="#gh-light-mode-only"], +.markup [src$="#light-mode-only"], +.markup [href$="#gh-light-mode-only"], +.markup [href$="#light-mode-only"] { + display: none; +} + +.markup [src$="#gh-dark-mode-only"], +.markup [src$="#dark-mode-only"], +.markup [href$="#gh-dark-mode-only"], +.markup [href$="#dark-mode-only"] { + display: unset; +} diff --git a/web_src/css/markup/filepreview.css b/web_src/css/markup/filepreview.css new file mode 100644 index 0000000..d2ec16e --- /dev/null +++ b/web_src/css/markup/filepreview.css @@ -0,0 +1,41 @@ +.markup table.file-preview { + margin-bottom: 0; +} + +.markup table.file-preview td { + padding: 0 10px !important; + border: none !important; +} + +.markup table.file-preview tr { + border-top: none; + background-color: inherit !important; +} + +.markup .file-preview-box { + margin-bottom: 16px; +} + +.markup .file-preview-box .header { + padding: .5rem; + padding-left: 1rem; + border: 1px solid var(--color-secondary); + border-bottom: none; + border-radius: 0.28571429rem 0.28571429rem 0 0; + background: var(--color-box-header); +} + +.markup .file-preview-box .warning { + border-radius: 0; + margin: 0; + padding: .5rem .5rem .5rem 1rem; +} + +.markup .file-preview-box .header > a { + display: block; +} + +.markup .file-preview-box .table { + margin-top: 0; + border-radius: 0 0 0.28571429rem 0.28571429rem; +} diff --git a/web_src/css/markup/light.css b/web_src/css/markup/light.css new file mode 100644 index 0000000..88fc4b7 --- /dev/null +++ b/web_src/css/markup/light.css @@ -0,0 +1,6 @@ +.markup [src$="#gh-dark-mode-only"], +.markup [src$="#dark-mode-only"], +.markup [href$="#gh-dark-mode-only"], +.markup [href$="#dark-mode-only"] { + display: none; +} diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css new file mode 100644 index 0000000..a86c923 --- /dev/null +++ b/web_src/css/modules/animations.css @@ -0,0 +1,116 @@ +@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 > *, +.button.is-loading > * { + opacity: 0; +} + +.is-loading::after { + content: ""; + position: absolute; + display: block; + left: 50%; + top: 50%; + height: 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: 4px; + 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, +.pdf-content.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; + } +} + +@keyframes fadeout { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.8); + } + 100% { + transform: scale(1); + } +} + +.pulse { + animation: pulse 2s linear; +} + +.ui.modal, +.ui.dimmer.transition { + animation-name: fadein; + animation-duration: 100ms; + animation-timing-function: ease-in-out; +} diff --git a/web_src/css/modules/breadcrumb.css b/web_src/css/modules/breadcrumb.css new file mode 100644 index 0000000..ca488c2 --- /dev/null +++ b/web_src/css/modules/breadcrumb.css @@ -0,0 +1,14 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 3px; +} + +.breadcrumb .breadcrumb-divider { + color: var(--color-text-light-2); +} + +.breadcrumb > * { + display: inline; +} diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css new file mode 100644 index 0000000..0799ab8 --- /dev/null +++ b/web_src/css/modules/button.css @@ -0,0 +1,756 @@ +/* this contains override styles for buttons and related elements */ + +/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */ +.ui.button { + background: var(--color-button); + border: 1px solid var(--color-light-border); + color: var(--color-text); +} + +.ui.button:hover, +.ui.button:focus { + background: var(--color-hover); + color: var(--color-text); +} + +.page-content .ui.button { + box-shadow: none !important; +} + +.ui.active.button, +.ui.button:active, +.ui.active.button:active, +.ui.active.button:hover, +.ui.active.button:focus { + background: var(--color-active); + color: var(--color-text); +} + +.delete-button, +.delete-button:hover, +.delete-button:focus { + color: var(--color-red); +} + +/* 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, +.btn:focus { + background: none; + border: none; +} + +a.btn, +a.btn:hover { + color: inherit; +} + +/* 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; +} + +.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; +} + +.ui.basic.buttons .button, +.ui.basic.button, +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + box-shadow: none; +} + +/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they + would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */ +.ui.small.button:not(.compact):has(.svg) { + padding-top: 0.58928571em; + padding-bottom: 0.58928571em; +} + +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: var(--color-text-light); + background: var(--color-button); +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover, +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + color: var(--color-text); + background: var(--color-hover); + border-color: var(--color-secondary-dark-2); +} + +.ui.basic.buttons .button:active, +.ui.basic.button:active, +.ui.basic.buttons .active.button, +.ui.basic.active.button, +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover, +.ui.basic.buttons .active.button:focus, +.ui.basic.active.button:focus { + color: var(--color-text); + background: var(--color-active); +} + +.ui.labeled.button > .label { + border-color: var(--color-light-border); +} + +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + background: var(--color-hover); +} + +/* primary */ + +.ui.primary.labels .label, +.ui.ui.ui.primary.label, +.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, +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { + 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.buttons .button, +.ui.basic.primary.button { + color: var(--color-primary); + border-color: var(--color-primary); +} + +.ui.basic.primary.buttons .button:hover, +.ui.basic.primary.button:hover, +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { + color: var(--color-primary-hover); + border-color: var(--color-primary-hover); +} + +.ui.basic.primary.buttons .button:active, +.ui.basic.primary.button:active { + color: var(--color-primary-active); + border-color: var(--color-primary-active); +} + +/* secondary */ + +.ui.secondary.labels .label, +.ui.ui.ui.secondary.label, +.ui.secondary.button, +.ui.secondary.buttons .button, +.ui.secondary.button:focus, +.ui.secondary.buttons .button:focus { + background: var(--color-secondary-button); +} + +.ui.secondary.button:hover, +.ui.secondary.buttons .button:hover { + background: var(--color-secondary-hover); +} + +.ui.secondary.button:active, +.ui.secondary.buttons .button:active { + background: var(--color-secondary-active); +} + +.ui.basic.secondary.buttons .button, +.ui.basic.secondary.button { + color: var(--color-secondary-button); + border-color: var(--color-secondary-button); +} + +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover, +.ui.basic.secondary.button:focus, +.ui.basic.secondary.buttons .button:focus { + color: var(--color-secondary-hover); + border-color: var(--color-secondary-hover); +} + +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + color: var(--color-secondary-active); + border-color: var(--color-secondary-active); +} + +/* red */ + +.ui.red.labels .label, +.ui.ui.ui.red.label, +.ui.red.button, +.ui.red.buttons .button { + background: var(--color-red); +} + +.ui.red.button:hover, +.ui.red.buttons .button:hover, +.ui.red.button:focus, +.ui.red.buttons .button:focus { + background: var(--color-red-dark-1); +} + +.ui.red.button:active, +.ui.red.buttons .button:active { + background: var(--color-red-dark-2); +} + +.ui.basic.red.buttons .button, +.ui.basic.red.button { + color: var(--color-red); + border-color: var(--color-red); +} + +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover, +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + color: var(--color-red-dark-1); + border-color: var(--color-red-dark-1); +} + +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + color: var(--color-red-dark-2); + border-color: var(--color-red-dark-2); +} + +/* orange */ + +.ui.orange.labels .label, +.ui.ui.ui.orange.label, +.ui.orange.button, +.ui.orange.buttons .button, +.ui.orange.button:focus, +.ui.orange.buttons .button:focus { + background: var(--color-orange); +} + +.ui.orange.button:hover, +.ui.orange.buttons .button:hover { + background: var(--color-orange-dark-1); +} + +.ui.orange.button:active, +.ui.orange.buttons .button:active { + background: var(--color-orange-dark-2); +} + +.ui.basic.orange.buttons .button, +.ui.basic.orange.button, +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { + color: var(--color-orange); + border-color: var(--color-orange); +} + +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + color: var(--color-orange-dark-1); + border-color: var(--color-orange-dark-1); +} + +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + color: var(--color-orange-dark-2); + border-color: var(--color-orange-dark-2); +} + +/* yellow */ + +.ui.yellow.labels .label, +.ui.ui.ui.yellow.label, +.ui.yellow.button, +.ui.yellow.buttons .button, +.ui.yellow.button:focus, +.ui.yellow.buttons .button:focus { + background: var(--color-yellow); +} + +.ui.yellow.button:hover, +.ui.yellow.buttons .button:hover { + background: var(--color-yellow-dark-1); +} + +.ui.yellow.button:active, +.ui.yellow.buttons .button:active { + background: var(--color-yellow-dark-2); +} + +.ui.basic.yellow.buttons .button, +.ui.basic.yellow.button, +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { + color: var(--color-yellow); + border-color: var(--color-yellow); +} + +.ui.basic.yellow.buttons .button:hover, +.ui.basic.yellow.button:hover { + color: var(--color-yellow-dark-1); + border-color: var(--color-yellow-dark-1); +} + +.ui.basic.yellow.buttons .button:active, +.ui.basic.yellow.button:active { + color: var(--color-yellow-dark-2); + border-color: var(--color-yellow-dark-2); +} + +/* olive */ + +.ui.olive.labels .label, +.ui.ui.ui.olive.label, +.ui.olive.button, +.ui.olive.buttons .button, +.ui.olive.button:focus, +.ui.olive.buttons .button:focus { + background: var(--color-olive); +} + +.ui.olive.button:hover, +.ui.olive.buttons .button:hover { + background: var(--color-olive-dark-1); +} + +.ui.olive.button:active, +.ui.olive.buttons .button:active { + background: var(--color-olive-dark-2); +} + +.ui.basic.olive.buttons .button, +.ui.basic.olive.button, +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { + color: var(--color-olive); + border-color: var(--color-olive); +} + +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + color: var(--color-olive-dark-1); + border-color: var(--color-olive-dark-1); +} + +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + color: var(--color-olive-dark-2); + border-color: var(--color-olive-dark-2); +} + +/* green */ + +.ui.green.labels .label, +.ui.ui.ui.green.label, +.ui.green.button, +.ui.green.buttons .button, +.ui.green.button:focus, +.ui.green.buttons .button:focus { + background: var(--color-green); +} + +.ui.green.button:hover, +.ui.green.buttons .button:hover { + background: var(--color-green-dark-1); +} + +.ui.green.button:active, +.ui.green.buttons .button:active { + background: var(--color-green-dark-2); +} + +.ui.basic.green.buttons .button, +.ui.basic.green.button, +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { + color: var(--color-green); + border-color: var(--color-green); +} + +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + color: var(--color-green-dark-1); + border-color: var(--color-green-dark-1); +} + +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + color: var(--color-green-dark-2); + border-color: var(--color-green-dark-2); +} + +/* teal */ + +.ui.teal.labels .label, +.ui.ui.ui.teal.label, +.ui.teal.button, +.ui.teal.buttons .button, +.ui.teal.button:focus, +.ui.teal.buttons .button:focus { + background: var(--color-teal); +} + +.ui.teal.button:hover, +.ui.teal.buttons .button:hover { + background: var(--color-teal-dark-1); +} + +.ui.teal.button:active, +.ui.teal.buttons .button:active { + background: var(--color-teal-dark-2); +} + +.ui.basic.teal.buttons .button, +.ui.basic.teal.button, +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { + color: var(--color-teal); + border-color: var(--color-teal); +} + +.ui.basic.teal.buttons .button:hover, +.ui.basic.teal.button:hover { + color: var(--color-teal-dark-1); + border-color: var(--color-teal-dark-1); +} + +.ui.basic.teal.buttons .button:active, +.ui.basic.teal.button:active { + color: var(--color-teal-dark-2); + border-color: var(--color-teal-dark-2); +} + +/* blue */ + +.ui.blue.labels .label, +.ui.ui.ui.blue.label, +.ui.blue.button, +.ui.blue.buttons .button, +.ui.blue.button:focus, +.ui.blue.buttons .button:focus { + background: var(--color-blue); +} + +.ui.blue.button:hover, +.ui.blue.buttons .button:hover { + background: var(--color-blue-dark-1); +} + +.ui.blue.button:active, +.ui.blue.buttons .button:active { + background: var(--color-blue-dark-2); +} + +.ui.basic.blue.buttons .button, +.ui.basic.blue.button, +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { + color: var(--color-blue); + border-color: var(--color-blue); +} + +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + color: var(--color-blue-dark-1); + border-color: var(--color-blue-dark-1); +} + +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + color: var(--color-blue-dark-2); + border-color: var(--color-blue-dark-2); +} + +/* violet */ + +.ui.violet.labels .label, +.ui.ui.ui.violet.label, +.ui.violet.button, +.ui.violet.buttons .button, +.ui.violet.button:focus, +.ui.violet.buttons .button:focus { + background: var(--color-violet); +} + +.ui.violet.button:hover, +.ui.violet.buttons .button:hover { + background: var(--color-violet-dark-1); +} + +.ui.violet.button:active, +.ui.violet.buttons .button:active { + background: var(--color-violet-dark-2); +} + +.ui.basic.violet.buttons .button, +.ui.basic.violet.button, +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { + color: var(--color-violet); + border-color: var(--color-violet); +} + +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + color: var(--color-violet-dark-1); + border-color: var(--color-violet-dark-1); +} + +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + color: var(--color-violet-dark-2); + border-color: var(--color-violet-dark-2); +} + +/* purple */ + +.ui.purple.labels .label, +.ui.ui.ui.purple.label, +.ui.purple.button, +.ui.purple.buttons .button, +.ui.purple.button:focus, +.ui.purple.buttons .button:focus { + background: var(--color-purple); +} + +.ui.purple.button:hover, +.ui.purple.buttons .button:hover { + background: var(--color-purple-dark-1); +} + +.ui.purple.button:active, +.ui.purple.buttons .button:active { + background: var(--color-purple-dark-2); +} + +.ui.basic.purple.buttons .button, +.ui.basic.purple.button, +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { + color: var(--color-purple); + border-color: var(--color-purple); +} + +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + color: var(--color-purple-dark-1); + border-color: var(--color-purple-dark-1); +} + +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + color: var(--color-purple-dark-2); + border-color: var(--color-purple-dark-2); +} + +/* pink */ + +.ui.pink.labels .label, +.ui.ui.ui.pink.label, +.ui.pink.button, +.ui.pink.buttons .button, +.ui.pink.button:focus, +.ui.pink.buttons .button:focus { + background: var(--color-pink); +} + +.ui.pink.button:hover, +.ui.pink.buttons .button:hover { + background: var(--color-pink-dark-1); +} + +.ui.pink.button:active, +.ui.pink.buttons .button:active { + background: var(--color-pink-dark-2); +} + +.ui.basic.pink.buttons .button, +.ui.basic.pink.button, +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { + color: var(--color-pink); + border-color: var(--color-pink); +} + +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + color: var(--color-pink-dark-1); + border-color: var(--color-pink-dark-1); +} + +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + color: var(--color-pink-dark-2); + border-color: var(--color-pink-dark-2); +} + +/* brown */ + +.ui.brown.labels .label, +.ui.ui.ui.brown.label, +.ui.brown.button, +.ui.brown.buttons .button, +.ui.brown.button:focus, +.ui.brown.buttons .button:focus { + background: var(--color-brown); +} + +.ui.brown.button:hover, +.ui.brown.buttons .button:hover { + background: var(--color-brown-dark-1); +} + +.ui.brown.button:active, +.ui.brown.buttons .button:active { + background: var(--color-brown-dark-2); +} + +.ui.basic.brown.buttons .button, +.ui.basic.brown.button, +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { + color: var(--color-brown); + border-color: var(--color-brown); +} + +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + color: var(--color-brown-dark-1); + border-color: var(--color-brown-dark-1); +} + +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + color: var(--color-brown-dark-2); + border-color: var(--color-brown-dark-2); +} + +/* negative */ + +.ui.negative.buttons .button, +.ui.negative.button, +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background: var(--color-red); +} + +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background: var(--color-red-dark-1); +} + +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background: var(--color-red-dark-2); +} + +.ui.basic.negative.buttons .button, +.ui.basic.negative.button, +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { + color: var(--color-red); + border-color: var(--color-red); +} + +.ui.basic.negative.buttons .button:hover, +.ui.basic.negative.button:hover { + color: var(--color-red-dark-1); + border-color: var(--color-red-dark-1); +} + +.ui.basic.negative.buttons .button:active, +.ui.basic.negative.button:active { + color: var(--color-red-dark-2); + border-color: var(--color-red-dark-2); +} + +/* positive */ + +.ui.positive.buttons .button, +.ui.positive.button, +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background: var(--color-green); +} + +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background: var(--color-green-dark-1); +} + +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background: var(--color-green-dark-2); +} + +.ui.basic.positive.buttons .button, +.ui.basic.positive.button, +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { + color: var(--color-green); + border-color: var(--color-green); +} + +.ui.basic.positive.buttons .button:hover, +.ui.basic.positive.button:hover { + color: var(--color-green-dark-1); + border-color: var(--color-green-dark-1); +} + +.ui.basic.positive.buttons .button:active, +.ui.basic.positive.button:active { + color: var(--color-green-dark-2); + border-color: var(--color-green-dark-2); +} diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css new file mode 100644 index 0000000..2406def --- /dev/null +++ b/web_src/css/modules/card.css @@ -0,0 +1,134 @@ +/* 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; + word-wrap: break-word; +} + +.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 > .meta + .description, +.ui.cards > .card > .content > .header + .description, +.ui.card > .content > .meta + .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.cards > .card > .content:first-child, +.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.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: var(--border-radius) !important; +} + +.ui.cards > .card > .extra, +.ui.card > .extra, +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: var(--color-text); +} + +.ui.cards > .card > .extra a:not(.ui):hover, +.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 > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: var(--color-text-light-2); +} + +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: var(--color-text); +} + +.ui.cards a.card:hover, +a.ui.card:hover { + border: 1px solid var(--color-secondary); + background: var(--color-card); +} + +.ui.cards > .card > .extra, +.ui.card > .extra { + color: var(--color-text); + border-top-color: var(--color-secondary-light-1) !important; +} + +.ui.three.cards { + margin-left: -1em; + margin-right: -1em; +} + +.ui.three.cards > .card { + width: calc(33.33333333333333% - 2em); + margin-left: 1em; + margin-right: 1em; +} diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css new file mode 100644 index 0000000..8d73573 --- /dev/null +++ b/web_src/css/modules/checkbox.css @@ -0,0 +1,121 @@ +/* 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="checkbox"], +input[type="radio"] { + width: var(--checkbox-size); + height: var(--checkbox-size); +} + +.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 input[type="checkbox"]:enabled, +.ui.checkbox input[type="radio"]:enabled, +.ui.checkbox label:enabled { + cursor: pointer; +} + +.ui.checkbox label { + cursor: auto; + position: relative; + display: block; + user-select: none; +} + +.ui.checkbox label, +.ui.radio.checkbox label { + margin-left: 1.85714em; +} + +.ui.checkbox + label { + vertical-align: middle; +} + +.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; +} diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css new file mode 100644 index 0000000..799eeb8 --- /dev/null +++ b/web_src/css/modules/comment.css @@ -0,0 +1,90 @@ +/* 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 { + position: relative; + background: none; + margin: 0.5em 0 0; + padding: 0.5em 0 0; + border: none; + border-top: none; + line-height: 1.2; +} + +.ui.comments .comment:first-child { + margin-top: 0; + padding-top: 0; +} + +.ui.comments .comment > .comments { + margin: 0 0 0.5em 0.5em; + padding: 1em 0 1em 1em; +} + +.ui.comments .comment > .comments::before { + position: absolute; + top: 0; + left: 0; +} + +.ui.comments .comment > .comments .comment { + border: none; + border-top: none; + background: none; +} + +.ui.comments .comment .avatar { + float: left; + width: 2.5em; +} + +.ui.comments .comment > .content { + display: block; +} + +.ui.comments .comment > .avatar ~ .content { + margin-left: 3.5em; +} + +.ui.comments .comment .author { + font-size: 1em; + font-weight: var(--font-weight-medium); +} + +.ui.comments .comment a.author { + cursor: pointer; +} + +.ui.comments .comment .metadata { + display: inline-block; + margin-left: 0.5em; + font-size: 0.875em; +} + +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0 0.5em 0 0; +} + +.ui.comments .comment .metadata > :last-child { + margin-right: 0; +} + +.ui.comments .comment .text { + margin: 0.25em 0 0.5em; + font-size: 1em; + word-wrap: break-word; + line-height: 1.3; +} diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css new file mode 100644 index 0000000..95c71b2 --- /dev/null +++ b/web_src/css/modules/container.css @@ -0,0 +1,66 @@ +/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any + unused rules here after refactoring, please remove them. */ + +.ui.container { + display: block; + --container-width: 100%; + max-width: var(--container-width); +} + +@media (max-width: 767.98px) { + .ui.ui.ui.container:not(.fluid) { + --container-width: auto; + width: var(--container-width); + margin-left: 1em; + margin-right: 1em; + } +} + +@media (min-width: 768px) and (max-width: 991.98px) { + .ui.ui.ui.container:not(.fluid) { + --container-width: 723px; + width: var(--container-width); + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 992px) and (max-width: 1199.98px) { + .ui.ui.ui.container:not(.fluid) { + --container-width: 933px; + width: var(--container-width); + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 1200px) { + .ui.ui.ui.container:not(.fluid) { + --container-width: 1127px; + width: var(--container-width); + margin-left: auto; + margin-right: auto; + } +} + +.ui.fluid.container { + --container-width: 100%; + width: var(--container-width); +} + +.ui[class*="center aligned"].container { + text-align: center; +} + +/* overwrite width of containers inside the main page content div (div with class "page-content") */ +.page-content .ui.ui.ui.container:not(.fluid) { + --container-width: 1280px; + width: var(--container-width); + max-width: calc(100% - calc(2 * var(--page-margin-x))); + margin-left: auto; + margin-right: auto; +} + +.ui.container.fluid.padded { + padding: 0 var(--page-margin-x); +} diff --git a/web_src/css/modules/divider.css b/web_src/css/modules/divider.css new file mode 100644 index 0000000..acc8408 --- /dev/null +++ b/web_src/css/modules/divider.css @@ -0,0 +1,43 @@ +.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; +} + +.ui.dropdown .menu > .divider { + border-top: 1px solid var(--color-secondary); + margin: 4px 0; +} diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css new file mode 100644 index 0000000..5d4e12c --- /dev/null +++ b/web_src/css/modules/flexcontainer.css @@ -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; + } +} diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css new file mode 100644 index 0000000..1df9a11 --- /dev/null +++ b/web_src/css/modules/grid.css @@ -0,0 +1,524 @@ +.simple-grid { + display: grid; + gap: 1em 2em; +} + +@media (min-width: 30em) { + .simple-grid.grid-2 { + grid-template-columns: repeat(2, 1fr); + } +} + +/* 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.relaxed.grid { + margin-left: -1.5rem; + margin-right: -1.5rem; +} +.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 > img, +.ui.grid > .row > .column > img { + max-width: 100%; +} + +.ui.grid > .ui.grid:first-child { + margin-top: 0; +} +.ui.grid > .ui.grid:last-child { + margin-bottom: 0; +} + +.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), +.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { + width: 100%; +} + +.ui.grid .row + .ui.divider { + flex-grow: 1; + margin: 1rem; +} +.ui.grid .column + .ui.vertical.divider { + height: calc(50% - 1rem); +} + +.ui.grid > .row > .column:last-child > .horizontal.segment, +.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, +.ui.grid > .row > .column:only-child { + width: 100%; +} + +.ui[class*="one column"].grid > .row > .column, +.ui[class*="one column"].grid > .column:not(.row) { + width: 100%; +} +.ui[class*="two column"].grid > .row > .column, +.ui[class*="two column"].grid > .column:not(.row) { + width: 50%; +} +.ui[class*="three column"].grid > .row > .column, +.ui[class*="three column"].grid > .column:not(.row) { + width: 33.33333333%; +} +.ui[class*="four column"].grid > .row > .column, +.ui[class*="four column"].grid > .column:not(.row) { + width: 25%; +} +.ui[class*="five column"].grid > .row > .column, +.ui[class*="five column"].grid > .column:not(.row) { + width: 20%; +} +.ui[class*="six column"].grid > .row > .column, +.ui[class*="six column"].grid > .column:not(.row) { + width: 16.66666667%; +} +.ui[class*="seven column"].grid > .row > .column, +.ui[class*="seven column"].grid > .column:not(.row) { + width: 14.28571429%; +} +.ui[class*="eight column"].grid > .row > .column, +.ui[class*="eight column"].grid > .column:not(.row) { + width: 12.5%; +} +.ui[class*="nine column"].grid > .row > .column, +.ui[class*="nine column"].grid > .column:not(.row) { + width: 11.11111111%; +} +.ui[class*="ten column"].grid > .row > .column, +.ui[class*="ten column"].grid > .column:not(.row) { + width: 10%; +} +.ui[class*="eleven column"].grid > .row > .column, +.ui[class*="eleven column"].grid > .column:not(.row) { + width: 9.09090909%; +} +.ui[class*="twelve column"].grid > .row > .column, +.ui[class*="twelve column"].grid > .column:not(.row) { + width: 8.33333333%; +} +.ui[class*="thirteen column"].grid > .row > .column, +.ui[class*="thirteen column"].grid > .column:not(.row) { + width: 7.69230769%; +} +.ui[class*="fourteen column"].grid > .row > .column, +.ui[class*="fourteen column"].grid > .column:not(.row) { + width: 7.14285714%; +} +.ui[class*="fifteen column"].grid > .row > .column, +.ui[class*="fifteen column"].grid > .column:not(.row) { + width: 6.66666667%; +} +.ui[class*="sixteen column"].grid > .row > .column, +.ui[class*="sixteen column"].grid > .column:not(.row) { + width: 6.25%; +} + +.ui.grid > [class*="one column"].row > .column { + width: 100% !important; +} +.ui.grid > [class*="two column"].row > .column { + width: 50% !important; +} +.ui.grid > [class*="three column"].row > .column { + width: 33.33333333% !important; +} +.ui.grid > [class*="four column"].row > .column { + width: 25% !important; +} +.ui.grid > [class*="five column"].row > .column { + width: 20% !important; +} +.ui.grid > [class*="six column"].row > .column { + width: 16.66666667% !important; +} +.ui.grid > [class*="seven column"].row > .column { + width: 14.28571429% !important; +} +.ui.grid > [class*="eight column"].row > .column { + width: 12.5% !important; +} +.ui.grid > [class*="nine column"].row > .column { + width: 11.11111111% !important; +} +.ui.grid > [class*="ten column"].row > .column { + width: 10% !important; +} +.ui.grid > [class*="eleven column"].row > .column { + width: 9.09090909% !important; +} +.ui.grid > [class*="twelve column"].row > .column { + width: 8.33333333% !important; +} +.ui.grid > [class*="thirteen column"].row > .column { + width: 7.69230769% !important; +} +.ui.grid > [class*="fourteen column"].row > .column { + width: 7.14285714% !important; +} +.ui.grid > [class*="fifteen column"].row > .column { + width: 6.66666667% !important; +} +.ui.grid > [class*="sixteen column"].row > .column { + width: 6.25% !important; +} + +.ui.grid > .row > [class*="one wide"].column, +.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 > .row > [class*="two wide"].column, +.ui.grid > .column.row > [class*="two wide"].column, +.ui.grid > [class*="two wide"].column, +.ui.column.grid > [class*="two wide"].column { + width: 12.5% !important; +} +.ui.grid > .row > [class*="three wide"].column, +.ui.grid > .column.row > [class*="three wide"].column, +.ui.grid > [class*="three wide"].column, +.ui.column.grid > [class*="three wide"].column { + width: 18.75% !important; +} +.ui.grid > .row > [class*="four wide"].column, +.ui.grid > .column.row > [class*="four wide"].column, +.ui.grid > [class*="four wide"].column, +.ui.column.grid > [class*="four wide"].column { + width: 25% !important; +} +.ui.grid > .row > [class*="five wide"].column, +.ui.grid > .column.row > [class*="five wide"].column, +.ui.grid > [class*="five wide"].column, +.ui.column.grid > [class*="five wide"].column { + width: 31.25% !important; +} +.ui.grid > .row > [class*="six wide"].column, +.ui.grid > .column.row > [class*="six wide"].column, +.ui.grid > [class*="six wide"].column, +.ui.column.grid > [class*="six wide"].column { + width: 37.5% !important; +} +.ui.grid > .row > [class*="seven wide"].column, +.ui.grid > .column.row > [class*="seven wide"].column, +.ui.grid > [class*="seven wide"].column, +.ui.column.grid > [class*="seven wide"].column { + width: 43.75% !important; +} +.ui.grid > .row > [class*="eight wide"].column, +.ui.grid > .column.row > [class*="eight wide"].column, +.ui.grid > [class*="eight wide"].column, +.ui.column.grid > [class*="eight wide"].column { + width: 50% !important; +} +.ui.grid > .row > [class*="nine wide"].column, +.ui.grid > .column.row > [class*="nine wide"].column, +.ui.grid > [class*="nine wide"].column, +.ui.column.grid > [class*="nine wide"].column { + width: 56.25% !important; +} +.ui.grid > .row > [class*="ten wide"].column, +.ui.grid > .column.row > [class*="ten wide"].column, +.ui.grid > [class*="ten wide"].column, +.ui.column.grid > [class*="ten wide"].column { + width: 62.5% !important; +} +.ui.grid > .row > [class*="eleven wide"].column, +.ui.grid > .column.row > [class*="eleven wide"].column, +.ui.grid > [class*="eleven wide"].column, +.ui.column.grid > [class*="eleven wide"].column { + width: 68.75% !important; +} +.ui.grid > .row > [class*="twelve wide"].column, +.ui.grid > .column.row > [class*="twelve wide"].column, +.ui.grid > [class*="twelve wide"].column, +.ui.column.grid > [class*="twelve wide"].column { + width: 75% !important; +} +.ui.grid > .row > [class*="thirteen wide"].column, +.ui.grid > .column.row > [class*="thirteen wide"].column, +.ui.grid > [class*="thirteen wide"].column, +.ui.column.grid > [class*="thirteen wide"].column { + width: 81.25% !important; +} +.ui.grid > .row > [class*="fourteen wide"].column, +.ui.grid > .column.row > [class*="fourteen wide"].column, +.ui.grid > [class*="fourteen wide"].column, +.ui.column.grid > [class*="fourteen wide"].column { + width: 87.5% !important; +} +.ui.grid > .row > [class*="fifteen wide"].column, +.ui.grid > .column.row > [class*="fifteen wide"].column, +.ui.grid > [class*="fifteen wide"].column, +.ui.column.grid > [class*="fifteen wide"].column { + width: 93.75% !important; +} +.ui.grid > .row > [class*="sixteen wide"].column, +.ui.grid > .column.row > [class*="sixteen wide"].column, +.ui.grid > [class*="sixteen wide"].column, +.ui.column.grid > [class*="sixteen wide"].column { + width: 100% !important; +} + +.ui.centered.grid, +.ui.centered.grid > .row, +.ui.grid > .centered.row { + text-align: center; + justify-content: center; +} +.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), +.ui.centered.grid > .row > .column:not(.aligned):not(.justified), +.ui.grid .centered.row > .column:not(.aligned):not(.justified) { + text-align: left; +} +.ui.grid > .centered.column, +.ui.grid > .row > .centered.column { + display: block; + margin-left: auto; + margin-right: auto; +} + +.ui.relaxed.grid > .column:not(.row), +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.ui[class*="very relaxed"].grid > .column:not(.row), +.ui[class*="very relaxed"].grid > .row > .column, +.ui.grid > [class*="very relaxed"].row > .column { + padding-left: 2.5rem; + padding-right: 2.5rem; +} + +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { + margin-left: 1.5rem; + margin-right: 1.5rem; +} +.ui[class*="very relaxed"].grid .row + .ui.divider, +.ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: 2.5rem; + margin-right: 2.5rem; +} + +.ui[class*="middle aligned"].grid > .column:not(.row), +.ui[class*="middle aligned"].grid > .row > .column, +.ui.grid > [class*="middle aligned"].row > .column, +.ui.grid > [class*="middle aligned"].column:not(.row), +.ui.grid > .row > [class*="middle aligned"].column { + flex-direction: column; + vertical-align: middle; + align-self: center !important; +} + +.ui[class*="left aligned"].grid > .column, +.ui[class*="left aligned"].grid > .row > .column, +.ui.grid > [class*="left aligned"].row > .column, +.ui.grid > [class*="left aligned"].column.column, +.ui.grid > .row > [class*="left aligned"].column.column { + text-align: left; + align-self: inherit; +} + +.ui[class*="center aligned"].grid > .column, +.ui[class*="center aligned"].grid > .row > .column, +.ui.grid > [class*="center aligned"].row > .column, +.ui.grid > [class*="center aligned"].column.column, +.ui.grid > .row > [class*="center aligned"].column.column { + text-align: center; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + justify-content: center; +} + +.ui[class*="right aligned"].grid > .column, +.ui[class*="right aligned"].grid > .row > .column, +.ui.grid > [class*="right aligned"].row > .column, +.ui.grid > [class*="right aligned"].column.column, +.ui.grid > .row > [class*="right aligned"].column.column { + text-align: right; + align-self: inherit; +} + +.ui[class*="equal width"].grid > .column:not(.row), +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: inline-block; + flex-grow: 1; +} +.ui[class*="equal width"].grid > .wide.column, +.ui[class*="equal width"].grid > .row > .wide.column, +.ui.grid > [class*="equal width"].row > .wide.column { + flex-grow: 0; +} + +@media only screen and (max-width: 767.98px) { + .ui[class*="mobile reversed"].grid, + .ui[class*="mobile reversed"].grid > .row, + .ui.grid > [class*="mobile reversed"].row { + 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 > .row > .wide.column, + .ui.stackable.grid > .wide.column, + .ui.stackable.grid > .column.grid > .column, + .ui.stackable.grid > .column.row > .column, + .ui.stackable.grid > .row > .column, + .ui.stackable.grid > .column:not(.row), + .ui.grid > .stackable.stackable.stackable.row > .column { + width: 100% !important; + margin: 0 !important; + box-shadow: none !important; + padding: 1rem; + } + .ui.stackable.grid:not(.vertically) > .row { + margin: 0; + padding: 0; + } + + .ui.container > .ui.stackable.grid > .column, + .ui.container > .ui.stackable.grid > .row > .column { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .ui.grid .ui.stackable.grid, + .ui.segment:not(.vertical) .ui.stackable.page.grid { + margin-left: -1rem !important; + margin-right: -1rem !important; + } +} + +.ui.ui.ui.compact.grid > .column:not(.row), +.ui.ui.ui.compact.grid > .row > .column { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.ui.ui.ui.compact.grid > * { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.ui.ui.ui.compact.grid > .row { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.ui.ui.ui.compact.grid > .column:not(.row) { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css new file mode 100644 index 0000000..9cec5fc --- /dev/null +++ b/web_src/css/modules/header.css @@ -0,0 +1,176 @@ +/* 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 > .ui.label.compact { + margin-top: inherit; +} + +.ui.header .sub.header { + display: block; + font-weight: var(--font-weight-normal); + padding: 0; + margin: 0; + font-size: 1rem; + line-height: 1.2; + color: var(--color-text-light-1); +} + +.ui.header > i.icon { + display: table-cell; + opacity: 1; + font-size: 1.5em; + padding-top: 0; + vertical-align: middle; +} + +.ui.header > i.icon:only-child { + display: inline-block; + padding: 0; + margin-right: 0.75rem; +} + +.ui.header + p { + margin-top: 0; +} + +h2.ui.header { + font-size: 1.71428571rem; +} +h2.ui.header .sub.header { + font-size: 1.14285714rem; +} + +h4.ui.header { + font-size: 1.07142857rem; +} +h4.ui.header .sub.header { + font-size: 1rem; +} + +.ui.sub.header { + padding: 0; + margin-bottom: 0.14285714rem; + font-weight: var(--font-weight-normal); + font-size: 0.85714286em; +} + +.ui.icon.header svg { + width: 3em; + height: 3em; + float: none; + display: block; + line-height: var(--line-height-default); + padding: 0; + margin: 0 auto 0.5rem; + opacity: 1; +} + +.ui.header:not(h1,h2,h3,h4,h5,h6) { + font-size: 1.28571429em; +} + +.ui.attached.header { + position: relative; + background: var(--color-box-header); + padding: 0.78571429rem 1rem; + margin: 0 -1px; + border-radius: 0; + border: 1px solid var(--color-secondary); +} + +.ui.attached:not(.top).header { + border-top: none; +} + +.ui.top.attached.header { + border-radius: 0.28571429rem 0.28571429rem 0 0; +} + +.ui.bottom.attached.header { + border-radius: 0 0 0.28571429rem 0.28571429rem; +} + +.ui.attached.header:not(h1,h2,h3,h4,h5,h6) { + font-size: 1em; +} + +/* fix misaligned right buttons on box headers */ +.ui.attached.header > .ui.right { + position: absolute; + right: 0.78571429rem; + top: 0; + bottom: 0; + display: flex; + align-items: center; + gap: 0.25em; +} + +/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */ +.ui.attached.header > .ui.right .ui.tiny.button { + padding: 6px 10px; + font-weight: var(--font-weight-normal); +} + +/* open dropdown menus to the left in right-attached headers */ +.ui.attached.header > .ui.right .ui.dropdown .menu { + right: 0; + left: auto; +} + +/* if a .top.attached.header is followed by a .segment, add some margin */ +.ui.segments + .ui.top.attached.header, +.ui.attached.segment + .ui.top.attached.header { + margin-top: 1rem; +} + +.ui.dividing.header { + border-bottom-color: var(--color-secondary); +} + +.ui.dividing.header .sub.header { + padding-bottom: 0.21428571rem; +} + +.ui.dividing.header i.icon { + margin-bottom: 0; +} + +.ui.error.header { + background: var(--color-error-bg) !important; + color: var(--color-error-text) !important; + border-color: var(--color-error-border) !important; +} + +.ui.warning.header { + background: var(--color-warning-bg) !important; + color: var(--color-warning-text) !important; + border-color: var(--color-warning-border) !important; +} + +.attention-header { + padding: 0.5em 0.75em !important; + color: var(--color-text) !important; +} diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css new file mode 100644 index 0000000..18b785a --- /dev/null +++ b/web_src/css/modules/input.css @@ -0,0 +1,197 @@ +/* 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.disabled.input, +.ui.input:not(.disabled) input[disabled] { + opacity: var(--opacity-disabled); +} +.ui.disabled.input > input, +.ui.input:not(.disabled) input[disabled] { + pointer-events: none; +} + +.ui.input.focus > input, +.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-error-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 > textarea, +.ui.ui.ui.ui.icon.input > input { + padding-right: 2.67142857em; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: 0.35em; + right: 0.5em; +} + +.ui[class*="left icon"].input > i.icon { + right: auto; + left: 1px; + border-radius: 0.28571429rem 0 0 0.28571429rem; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: 0.5em; +} +.ui.ui.ui.ui[class*="left icon"].input > textarea, +.ui.ui.ui.ui[class*="left icon"].input > input { + padding-left: 2.67142857em; + padding-right: 1em; +} + +.ui.icon.input > textarea:focus ~ .icon, +.ui.icon.input > input:focus ~ .icon { + opacity: 1; +} + +.ui.icon.input > textarea ~ i.icon { + height: 3em; +} + +.ui.form .field.error > .ui.action.input > .ui.button, +.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, +.ui.action.input > .buttons { + display: flex; + align-items: center; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: 0.78571429em; + padding-bottom: 0.78571429em; + margin: 0; +} + +.ui.action.input:not([class*="left action"]) > 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, +.ui.action.input > .buttons:first-child > .button { + border-radius: 0.28571429rem 0 0 0.28571429rem; +} +.ui.action.input > .dropdown:not(:first-child), +.ui.action.input > .button:not(:first-child), +.ui.action.input > .buttons:not(:first-child) > .button { + border-radius: 0; +} +.ui.action.input > .dropdown:last-child, +.ui.action.input > .button:last-child, +.ui.action.input > .buttons:last-child > .button { + 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 + .icon + .button, +.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover { + border-left-color: var(--color-primary); +} +.ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: var(--color-primary); +} diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css new file mode 100644 index 0000000..bc30baa --- /dev/null +++ b/web_src/css/modules/label.css @@ -0,0 +1,303 @@ +/* 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; + gap: .25rem; + min-width: 0; + vertical-align: middle; + line-height: 1; + background: var(--color-label-bg); + color: var(--color-label-text); + padding: 0.3em 0.5em; + font-size: 0.85714286rem; + font-weight: var(--font-weight-medium); + border: 0 solid transparent; + border-radius: 0.28571429rem; + white-space: nowrap; +} + +.ui.label:first-child { + margin-left: 0; +} +.ui.label:last-child { + margin-right: 0; +} + +a.ui.label { + cursor: pointer; +} + +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: 0.75; +} +.ui.label > a:hover { + opacity: 1; +} + +.ui.label > img { + width: auto; + vertical-align: middle; + height: 2.1666em; +} + +.ui.label > .color-icon { + margin-left: 0; +} + +.ui.label > .icon { + width: auto; + margin: 0 0.75em 0 0; +} + +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: var(--font-weight-medium); + margin-left: 1em; + opacity: 0.8; +} +.ui.label > .detail .icon { + margin: 0 0.25em 0 0; +} + +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + font-size: 0.92857143em; + opacity: 0.5; +} +.ui.label > .close.icon:hover, +.ui.label > .delete.icon:hover { + opacity: 1; +} + +.ui.label.left.icon > .close.icon, +.ui.label.left.icon > .delete.icon { + margin: 0 0.5em 0 0; +} +.ui.label:not(.icon) > .close.icon, +.ui.label:not(.icon) > .delete.icon { + margin: 0 0 0 0.5em; +} + +.ui.header > .ui.label { + margin-top: -0.29165em; +} + +a.ui.label:hover { + background: var(--color-label-hover-bg); + border-color: var(--color-label-hover-bg); + color: var(--color-label-text); +} + +.ui.label.visible:not(.dropdown) { + display: inline-block !important; +} + +.ugc-labels .item { + text-overflow: unset !important; +} + +.ugc-labels .item .ui.label { + text-wrap: auto; + overflow-wrap: anywhere; +} + +.ui.basic.label { + background: var(--color-button); + border: 1px solid var(--color-light-border); + color: var(--color-text-light); + padding: calc(0.5833em - 1px) calc(0.833em - 1px); +} +a.ui.basic.label:hover { + text-decoration: none; + color: var(--color-text); + border-color: var(--color-light-border); + 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.olive.label { + background: var(--color-olive); + border-color: var(--color-olive); + color: var(--color-white); +} + +.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.basic.purple.label { + background: transparent; + border-color: var(--color-purple); + color: var(--color-purple); +} +a.ui.ui.ui.basic.purple.label:hover { + background: transparent; + border-color: var(--color-purple-dark-1); + color: var(--color-purple-dark-1); +} + +.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); +} +.ui.ui.ui.basic.grey.label { + background: transparent; + border-color: var(--color-label-bg); + color: var(--color-label-text); +} +a.ui.ui.ui.basic.grey.label:hover { + background: transparent; + border-color: var(--color-label-hover-bg); + color: var(--color-label-hover-bg); +} + +.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; +} diff --git a/web_src/css/modules/list.css b/web_src/css/modules/list.css new file mode 100644 index 0000000..32c71e8 --- /dev/null +++ b/web_src/css/modules/list.css @@ -0,0 +1,193 @@ +/* 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; + font-size: 1em; +} + +.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 > .item::after, +.ui.list > .item::after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.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 .list > .item > i.icon, +.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 .list > .item > i.icon:only-child, +.ui.list > .item > i.icon:only-child { + display: inline-block; + min-width: auto; + vertical-align: top; +} + +.ui.list .list > .item > .image, +.ui.list > .item > .image { + display: table-cell; + background-color: transparent; + vertical-align: top; +} +.ui.list .list > .item > .image:not(:only-child):not(img), +.ui.list > .item > .image:not(:only-child):not(img) { + padding-right: 0.5em; +} +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { + vertical-align: top; +} +.ui.list .list > .item > img.image, +.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 .list > .item > .image + .content, +.ui.list .list > .item > i.icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > i.icon + .content { + display: table-cell; + width: 100%; + padding: 0 0 0 0.5em; + vertical-align: top; +} +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { + display: inline-block; + width: auto; +} +.ui.list .list > .item > .content > .list, +.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.list .list > .item [class*="right floated"], +.ui.list > .item [class*="right floated"] { + float: right; + margin: 0 0 0 1em; +} + +.ui.menu .ui.list > .item, +.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 .list > .item::before, +.ui.menu .ui.list > .item::before { + border: none; + background: none; +} +.ui.menu .ui.list .list > .item:first-child, +.ui.menu .ui.list > .item:first-child { + padding-top: 0; +} +.ui.menu .ui.list .list > .item:last-child, +.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 .list > a.item:hover > .icons, +.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; +} diff --git a/web_src/css/modules/message.css b/web_src/css/modules/message.css new file mode 100644 index 0000000..c62dbdd --- /dev/null +++ b/web_src/css/modules/message.css @@ -0,0 +1,114 @@ +/* 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); +} + +.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.bottom.attached.message { + margin-top: -1px; + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: 1em; +} + +.ui.info.message .header, +.ui.blue.message .header { + color: var(--color-blue); +} + +.ui.info.message, +.ui.attached.info.message, +.ui.blue.message, +.ui.attached.blue.message { + background: var(--color-info-bg); + color: var(--color-info-text); + border-color: var(--color-info-border); +} + +.ui.success.message .header, +.ui.positive.message .header, +.ui.green.message .header { + color: var(--color-green); +} + +.ui.success.message, +.ui.attached.success.message, +.ui.positive.message, +.ui.attached.positive.message { + background: var(--color-success-bg); + color: var(--color-success-text); + border-color: var(--color-success-border); +} + +.ui.error.message .header, +.ui.negative.message .header, +.ui.red.message .header { + color: var(--color-red); +} + +.ui.error.message, +.ui.attached.error.message, +.ui.red.message, +.ui.attached.red.message, +.ui.negative.message, +.ui.attached.negative.message { + background: var(--color-error-bg); + color: var(--color-error-text); + border-color: var(--color-error-border); +} + +.ui.warning.message .header, +.ui.yellow.message .header { + color: var(--color-yellow); +} + +.ui.warning.message, +.ui.attached.warning.message, +.ui.yellow.message, +.ui.attached.yellow.message { + background: var(--color-warning-bg); + color: var(--color-warning-text); + border-color: var(--color-warning-border); +} + +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + top: 9px; + right: 9px; + opacity: .7; +} + +.ui.message > .close.icon:hover { + opacity: 1; +} diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css new file mode 100644 index 0000000..54a4ef8 --- /dev/null +++ b/web_src/css/modules/modal.css @@ -0,0 +1,86 @@ +.ui.modal.g-modal-confirm { + max-width: min(800px, 90vw); + width: fit-content; +} + +.ui.modal.g-modal-confirm > .inside.close.icon { + padding: 0; + width: 1em; + height: 1em; + top: 1.2em; +} + +.ui.modal > .close.icon[height="16"] { + top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */ + color: var(--color-text-dark); +} + +.ui.modal > .header { + /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */ + color: var(--color-text-dark); + background: var(--color-body); + border-color: var(--color-secondary); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + vertical-align: middle; +} + +.ui.modal > .header .svg { + vertical-align: middle; + display: inline-block; +} + +.ui.modal { + background: var(--color-body); + box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow); +} + +/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly +Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div> +However, Gitea uses the following layouts: +* <div .modal><div .content><div .actions/></div></div> +* <div .modal><form><div .content/><div .actions/></form></div> +* <div .modal><div .content><form><div .actions/></form></div></div> +* <div .modal><div .content></div><form><div .actions/></form></div> +* ... +These inconsistent layouts should be refactored to simple ones. +*/ + +.ui.modal > .content, +.ui.modal form > .content { + padding: 1.5em; + background: var(--color-body); +} + +.ui.modal > .actions, +.ui.modal .content + .actions, +.ui.modal .content + form > .actions { + background: var(--color-secondary-bg); + border-color: var(--color-secondary); + padding: 1rem; + text-align: right; +} + +.ui.modal .content > .actions { + padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */ + text-align: right; +} + +/* positive/negative action buttons */ +.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; +} diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css new file mode 100644 index 0000000..02d470f --- /dev/null +++ b/web_src/css/modules/navbar.css @@ -0,0 +1,147 @@ +#navbar { + display: flex; + align-items: center; + justify-content: space-between; + background: var(--color-nav-bg); + border-bottom: 1px solid var(--color-secondary); + margin: 0 !important; + padding: 0 10px; +} + +#navbar, +#navbar .navbar-left, +#navbar .navbar-right { + min-height: 49px; /* +1px border-bottom */ +} + +#navbar .navbar-left, +#navbar .navbar-right { + margin: 0; + display: flex; + align-items: center; +} + +#navbar-logo { + margin: 0; +} + +#navbar .item { + min-height: 36px; + min-width: 36px; + padding-top: 3px; + padding-bottom: 3px; + display: flex; +} + +#navbar > .menu > .item { + color: var(--color-nav-text); +} + +#navbar .dropdown .item { + justify-content: stretch; +} + +#navbar a.item:hover, #navbar a.item:focus, +#navbar button.item:hover, #navbar button.item:focus { + background: var(--color-nav-hover-bg); +} + +#navbar .secondary.menu > .item > .svg, +#navbar .right.menu > .item > .svg { + margin-right: 0; +} + +@media (max-width: 767.98px) { + #navbar { + align-items: stretch; + } + /* hide all items */ + #navbar .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; + margin-left: auto !important; + width: auto !important; + } + #navbar .navbar-mobile-right > .item { + display: flex; + width: auto !important; + } + /* 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 { + display: flex; + flex-wrap: wrap; + } + #navbar.navbar-menu-open .item { + display: flex; + width: 100%; + margin: 0; + } + #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; + width: 50%; + min-height: 48px; + } + #navbar #mobile-notifications-icon { + margin-right: 6px !important; + } +} + +#navbar a.item .notification_count { + color: var(--color-nav-bg); + padding: 0 3.75px; + font-size: 12px; + line-height: 12px; + font-weight: var(--font-weight-bold); +} + +#navbar a.item:hover .notification_count, +#navbar a.item:hover .header-stopwatch-dot { + border-color: var(--color-nav-hover-bg); +} + +#navbar a.item .notification_count, +#navbar a.item .header-stopwatch-dot { + background: var(--color-primary); + border: 2px solid var(--color-nav-bg); + position: absolute; + left: 6px; + top: -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 */ +} + +.secondary-nav { + background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */ +} + +.issue-navbar { + display: flex; + justify-content: space-between; +} diff --git a/web_src/css/modules/normalize.css b/web_src/css/modules/normalize.css new file mode 100644 index 0000000..63fb04a --- /dev/null +++ b/web_src/css/modules/normalize.css @@ -0,0 +1,243 @@ +/* + 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 +*/ + +/*! modern-normalize v2.0.0 | 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; /* 1. (not following the "modern-normalize") Do not change the browser's default line-height, the default value is font-dependent and roughly 1.2 */ + -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 +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + text-decoration: underline dotted; +} + +/** +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 +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +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 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +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"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -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 { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css new file mode 100644 index 0000000..04543f0 --- /dev/null +++ b/web_src/css/modules/segment.css @@ -0,0 +1,203 @@ +/* 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 { + border-radius: 0.214285717rem; +} +.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */ + border-radius: 0.28571429rem; +} + +.ui.segments > .ui.segments { + border-top: 1px solid var(--color-secondary); + margin: 1rem; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0; +} + +.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.segments > .horizontal.segments:first-child { + border-top: none; +} +.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[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +.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:has(+ .ui[class*="top attached"].header), +.ui.attached.segment:last-child { + border-radius: 0 0 0.28571429rem 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.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:not(.horizontally) { + padding-top: 0; + padding-bottom: 0; +} +.ui.fitted.segment:not(.vertically) { + padding-left: 0; + padding-right: 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; +} diff --git a/web_src/css/modules/select.css b/web_src/css/modules/select.css new file mode 100644 index 0000000..1d7d749 --- /dev/null +++ b/web_src/css/modules/select.css @@ -0,0 +1,25 @@ +.gitea-select { + position: relative; +} + +.gitea-select select { + appearance: none; /* hide default triangle */ +} + +/* ::before and ::after pseudo elements don't work on select elements, + so we need to put it on the parent. */ +.gitea-select::after { + position: absolute; + top: 12px; + right: 8px; + pointer-events: none; + content: ""; + width: 14px; + height: 14px; + mask-size: cover; + -webkit-mask-size: cover; + mask-image: var(--octicon-chevron-right); + -webkit-mask-image: var(--octicon-chevron-right); + transform: rotate(90deg); /* point the chevron down */ + background: currentcolor; +} diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css new file mode 100644 index 0000000..b3060bd --- /dev/null +++ b/web_src/css/modules/svg.css @@ -0,0 +1,41 @@ +.svg { + display: inline-block; + vertical-align: text-top; + fill: currentcolor; +} + +.middle .svg { + vertical-align: middle; +} + +/* 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; } diff --git a/web_src/css/modules/table.css b/web_src/css/modules/table.css new file mode 100644 index 0000000..4fb9d42 --- /dev/null +++ b/web_src/css/modules/table.css @@ -0,0 +1,385 @@ +/* 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, +.ui.table > tfoot > tr > td { + 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, +.ui.table > tfoot > tr > td:first-child { + border-left: none; +} +.ui.table > tfoot > tr:first-child > th:first-child, +.ui.table > tfoot > tr:first-child > td:first-child { + border-radius: 0 0 0 0.28571429rem; +} +.ui.table > tfoot > tr:first-child > th:last-child, +.ui.table > tfoot > tr:first-child > td:last-child { + border-radius: 0 0 0.28571429rem; +} +.ui.table > tfoot > tr:first-child > th:only-child, +.ui.table > tfoot > tr:first-child > td:only-child { + border-radius: 0 0 0.28571429rem 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; +} +.ui.table.segment::after { + display: none; +} + +@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) > tfoot, + .ui.table:not(.unstackable) > tfoot > 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) > tfoot > tr > th, + .ui.table:not(.unstackable) > tr > td, + .ui.table:not(.unstackable) > tbody > tr > td, + .ui.table:not(.unstackable) > tfoot > tr > td { + display: block !important; + width: auto !important; + } + .ui.table:not(.unstackable) > thead { + display: block; + } + .ui.table:not(.unstackable) > tfoot { + 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, + .ui.ui.ui.ui.table:not(.unstackable) > tfoot > 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, + .ui.ui.ui.ui.table:not(.unstackable) > tfoot > 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) > tfoot > tr > th:first-child, + .ui.table:not(.unstackable) > tr > td:first-child, + .ui.table:not(.unstackable) > tbody > tr > td:first-child, + .ui.table:not(.unstackable) > tfoot > tr > td:first-child { + font-weight: var(--font-weight-normal); + } +} + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} + +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} + +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} + +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +.ui.fixed.table { + table-layout: fixed; +} +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + +.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.striped.table > tr:nth-child(2n), +.ui.striped.table > tbody > tr:nth-child(2n) { + background: var(--color-light); +} + +.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.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.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.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} + +.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 > tfoot > 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 > tfoot > tr > td, +.ui.basic.table > tr > td { + background: transparent; +} +.ui.basic.striped.table > tbody > tr:nth-child(2n) { + background: var(--color-light); +} + +.ui[class*="very basic"].table { + border: none; +} +.ui[class*="very basic"].table:not(.striped) > tr > th:first-child, +.ui[class*="very basic"].table:not(.striped) > thead > tr > th:first-child, +.ui[class*="very basic"].table:not(.striped) > tbody > tr > th:first-child, +.ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:first-child, +.ui[class*="very basic"].table:not(.striped) > tr > td:first-child, +.ui[class*="very basic"].table:not(.striped) > tbody > tr > td:first-child, +.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:first-child { + padding-left: 0; +} +.ui[class*="very basic"].table:not(.striped) > tr > th:last-child, +.ui[class*="very basic"].table:not(.striped) > thead > tr > th:last-child, +.ui[class*="very basic"].table:not(.striped) > tbody > tr > th:last-child, +.ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:last-child, +.ui[class*="very basic"].table:not(.striped) > tr > td:last-child, +.ui[class*="very basic"].table:not(.striped) > tbody > tr > td:last-child, +.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:last-child { + padding-right: 0; +} +.ui[class*="very basic"].table:not(.striped) > thead > tr:first-child > th { + padding-top: 0; +} + +.ui.celled.table > tr > th, +.ui.celled.table > thead > tr > th, +.ui.celled.table > tbody > tr > th, +.ui.celled.table > tfoot > tr > th, +.ui.celled.table > tr > td, +.ui.celled.table > tbody > tr > td, +.ui.celled.table > tfoot > 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 > tfoot > tr > th:first-child, +.ui.celled.table > tr > td:first-child, +.ui.celled.table > tbody > tr > td:first-child, +.ui.celled.table > tfoot > tr > td:first-child { + border-left: none; +} + +.ui.compact.table > tr > th, +.ui.compact.table > thead > tr > th, +.ui.compact.table > tbody > tr > th, +.ui.compact.table > tfoot > tr > th { + padding-left: 0.7em; + padding-right: 0.7em; +} +.ui.compact.table > tr > td, +.ui.compact.table > tbody > tr > td, +.ui.compact.table > tfoot > 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; +} diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css new file mode 100644 index 0000000..6ac7c37 --- /dev/null +++ b/web_src/css/modules/tippy.css @@ -0,0 +1,170 @@ +/* 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); +} + +.tippy-box { + position: relative; + background-color: var(--color-body); + color: var(--color-secondary-dark-6); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + font-size: 1rem; +} + +.tippy-content { + position: relative; + padding: 1rem; /* if you need different padding, use different data-theme */ + z-index: 1; +} + +/* 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: 0.5rem 1rem; +} + +.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; + text-decoration: none; + gap: 10px; +} + +.tippy-box[data-theme="menu"] .item:hover { + background: var(--color-hover); +} + +.tippy-box[data-theme="menu"] .item:focus { + background: var(--color-active); +} + +/* 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-body); +} diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css new file mode 100644 index 0000000..2a9f78e --- /dev/null +++ b/web_src/css/modules/toast.css @@ -0,0 +1,77 @@ +.toastify { + color: var(--color-white); + position: fixed; + opacity: 0; + transition: all .2s ease; + z-index: 500; + 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-body { + flex: 1; + padding: 5px 0; + overflow-wrap: anywhere; +} + +.toast-close, +.toast-icon { + color: currentcolor; + border-radius: var(--border-radius); + background: transparent; + border: none; + display: flex; + width: 30px; + height: 30px; + justify-content: center; + align-items: center; +} + +.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; + } +} diff --git a/web_src/css/org.css b/web_src/css/org.css new file mode 100644 index 0000000..6853a26 --- /dev/null +++ b/web_src/css/org.css @@ -0,0 +1,192 @@ +#create-page-form form { + margin: auto; +} + +#create-page-form form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + #create-page-form form { + width: 800px !important; + } + #create-page-form form .header { + padding-left: 280px !important; + } + #create-page-form form .inline.field > label { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + #create-page-form form .help { + margin-left: 265px !important; + } + #create-page-form form .optional .title { + margin-left: 250px !important; + } + #create-page-form form .inline.field > input, + #create-page-form form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767.98px) { + #create-page-form form .optional .title { + margin-left: 15px; + } + #create-page-form form .inline.field > label { + display: block; + } +} + +.organization .head .ui.header .ui.right { + margin-top: 5px; +} + +.organization.new.org form { + margin: auto; +} + +.organization.new.org form .ui.message { + text-align: center; +} + +@media (min-width: 768px) { + .organization.new.org form { + width: 800px !important; + } + .organization.new.org form .header { + padding-left: 280px !important; + } + .organization.new.org form .inline.field > label { + text-align: right; + width: 250px !important; + word-wrap: break-word; + } + .organization.new.org form .help { + margin-left: 265px !important; + } + .organization.new.org form .optional .title { + margin-left: 250px !important; + } + .organization.new.org form .inline.field > input, + .organization.new.org form .inline.field > textarea { + width: 50%; + } +} + +@media (max-width: 767.98px) { + .organization.new.org form .optional .title { + margin-left: 15px; + } + .organization.new.org form .inline.field > label { + display: block; + } +} + +.organization.new.org form .header { + padding-left: 0 !important; + text-align: center; +} + +.page-content.organization .org-avatar { + margin-right: 15px; +} + +.page-content.organization #org-info { + overflow-wrap: anywhere; + flex: 1; +} + +.page-content.organization #org-info .ui.header { + display: flex; + align-items: center; + font-size: 36px; + margin-bottom: 0; +} + +@media (max-width: 767.98px) { + .page-content.organization #org-info .ui.header { + flex-direction: column; + margin-bottom: 1rem; + } + .page-content.organization #org-info .org-title { + width: 100%; + margin-bottom: 0.5rem; + } +} + +.page-content.organization #org-info .desc { + font-size: 16px; + margin-bottom: 10px; +} + +.page-content.organization #org-info .meta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; +} + +.page-content.organization .ui.top.header .ui.right { + margin-top: 0; +} + +.page-content.organization .teams .item { + padding: 10px 15px; +} + +.page-content.organization .members .ui.avatar { + width: 48px; + height: 48px; + margin-right: 5px; + margin-bottom: 5px; +} + +.organization.invite #invite-box { + margin: 50px auto auto; + width: 500px !important; +} + +.organization.invite #invite-box #search-user-box input { + margin-left: 0; + width: 300px; +} + +.organization.invite #invite-box .ui.button { + margin-left: 5px; + margin-top: -3px; +} + +.organization.invite .ui.avatar { + width: 100%; + height: 100%; +} + +.organization.teams .detail .item { + padding: 10px 15px; +} + +.organization.teams .detail .item:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.organization.teams .repositories .item, +.organization.teams .members .item { + padding: 10px 19px; +} + +.organization.teams .repositories .item:not(:last-child), +.organization.teams .members .item:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.organization.teams .repositories .item .button, +.organization.teams .members .item .button { + padding: 9px 10px; + margin: 0; +} + +.org-team-navbar .active.item { + background: var(--color-box-body) !important; +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css new file mode 100644 index 0000000..3bc1a1e --- /dev/null +++ b/web_src/css/repo.css @@ -0,0 +1,3007 @@ +.repository .data-table .line-num, +.repository .diff-file-box .file-body.file-code .lines-num, +.repository .diff-file-box .code-diff tbody tr .lines-type-marker { + user-select: none; +} + +.repository .owner.dropdown { + min-width: 40% !important; +} + +.repository .unicode-escaped .escaped-code-point[data-escaped]::before { + visibility: visible; + content: attr(data-escaped); + font-family: var(--fonts-monospace); + color: var(--color-red); +} + +.repository .unicode-escaped .escaped-code-point .char { + display: none; +} + +.repository .broken-code-point { + font-family: var(--fonts-monospace); + color: var(--color-blue); +} + +.repository .unicode-escaped .ambiguous-code-point { + border: 1px var(--color-yellow) solid; +} + +.issue-content { + display: flex; + align-items: flex-start; + gap: 16px; +} + +@media (max-width: 767.98px) { + .issue-content { + flex-direction: column; + } +} + +.issue-content-left { + margin: 0 !important; + width: calc(100% - 316px); +} + +.issue-content-right { + margin: 0 !important; + width: 300px; +} + +.issue-content-right .dropdown > .menu { + max-width: 270px; + min-width: 0; +} + +@media (max-width: 767.98px) { + .issue-content-left, + .issue-content-right { + width: 100%; + } +} + +.repository .issue-content-right .ui.list .dependency { + padding: 0; + white-space: nowrap; +} + +.repository .issue-content-right .ui.list .title { + overflow: hidden; + text-overflow: ellipsis; +} + +.repository .issue-content-right #deadlineForm input { + width: 12.8rem; + border-radius: var(--border-radius) 0 0 var(--border-radius); + border-right: 0; + white-space: nowrap; +} + +.repository .issue-content-right .filter.menu { + max-height: 500px; + overflow-x: auto; +} + +.repository .filter.menu.labels .label-filter .menu .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; +} + +.repository .filter.menu.labels .label-filter .menu .info code { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + padding: 1px 2px; + font-size: 11px; +} + +/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */ +.repository .filter.menu .ui.dropdown .menu { + max-height: 500px; + max-width: 300px; + overflow-x: hidden; + right: 0; + left: auto; +} + +/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */ +.repository .filter.menu .ui.dropdown.label-filter .menu { + min-width: max-content; + right: unset; + left: 0; +} + +.repository .select-label .desc { + padding-left: 23px; +} + +/* For the secondary pointing menu, respect its own border-bottom */ +/* style reference: https://semantic-ui.com/collections/menu.html#pointing */ +.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) { + border-bottom: 0; +} + +.repository .ui.tabs.divider { + margin-top: -1px; + margin-bottom: 12px; +} + +.repository .clone-panel #repo-clone-url { + width: 320px; + border-radius: 0; +} + +@media (max-width: 991.98px) { + .repository .clone-panel #repo-clone-url { + width: 200px; + } +} + +.repository .ui.action.input.clone-panel > button + button, +.repository .ui.action.input.clone-panel > button + input { + margin-left: -1px; /* make the borders overlap to avoid double borders */ +} + +.repository .clone-panel > button:first-of-type { + border-radius: var(--border-radius) 0 0 var(--border-radius) !important; +} + +.repository .clone-panel > button:last-of-type { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} + +.repository .clone-panel .dropdown .menu { + right: 0 !important; + left: auto !important; +} + +.repository.file.list .repo-description { + display: flex; + justify-content: space-between; + align-items: center; + gap: 5px; + margin-bottom: 5px; +} + +@media (max-width: 767.98px) { + .repository.file.list .repo-description { + flex-direction: column; + align-items: stretch; + } +} + +.commit-summary { + flex: 1; + overflow-wrap: anywhere; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.commit-header .commit-summary, +td .commit-summary { + white-space: normal; +} + +.commit-list .js-toggle-commit-body { + margin: 0 0 0 0.25em; +} + +.commit-list .commit-status { + margin: 0 0 0 0.25em; +} + +.latest-commit { + display: flex; + flex: 1; + align-items: center; + overflow: hidden; + text-overflow: ellipsis; +} + +.latest-commit .commit-status { + margin-right: 0.25em; +} + +@media (max-width: 767.98px) { + .latest-commit .sha { + display: none; + } + .latest-commit .commit-summary { + margin-left: 8px; + } +} + +.repo-path { + display: flex; + overflow-wrap: anywhere; +} + +/* this is what limits the commit table width to a value that works on all viewport sizes */ +#repo-files-table th:first-of-type { + max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x))); +} + +.repository.file.list #repo-files-table thead th { + font-weight: var(--font-weight-normal); +} + +.repository.file.list #repo-files-table tbody .svg { + margin-left: 3px; + margin-right: 5px; +} + +.repository.file.list #repo-files-table tbody .svg.octicon-reply { + margin-right: 10px; +} + +.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, +.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: var(--color-primary); +} + +.repository.file.list #repo-files-table tbody .svg.octicon-file, +.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file, +.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink { + color: var(--color-secondary-dark-7); +} + +.repository.file.list #repo-files-table td { + padding-top: 0; + padding-bottom: 0; + overflow: initial; +} + +.repository.file.list #repo-files-table td.name { + width: 33%; + max-width: calc(100vw - 140px); +} + +@media (min-width: 1201px) { + .repository.file.list #repo-files-table td.name { + max-width: 150px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + .repository.file.list #repo-files-table td.name { + max-width: 200px; + } +} + +@media (min-width: 768px) and (max-width: 991.98px) { + .repository.file.list #repo-files-table td.name { + max-width: 300px; + } +} + +.repository.file.list #repo-files-table td.message { + color: var(--color-text-light-1); + width: 66%; +} + +@media (min-width: 1201px) { + .repository.file.list #repo-files-table td.message { + max-width: 400px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + .repository.file.list #repo-files-table td.message { + max-width: 350px; + } +} + +@media (min-width: 768px) and (max-width: 991.98px) { + .repository.file.list #repo-files-table td.message { + max-width: 250px; + } +} + +.repository.file.list #repo-files-table td.age { + color: var(--color-text-light-1); +} + +.repository.file.list #repo-files-table td .truncate { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + padding-top: 8px; + padding-bottom: 8px; +} + +.repository.file.list #repo-files-table td a { + padding-top: 8px; + padding-bottom: 8px; +} + +.repository.file.list #repo-files-table td .at { + margin-left: 3px; + margin-right: 3px; +} + +.repository.file.list #repo-files-table td > * { + vertical-align: middle; +} + +.repository.file.list #repo-files-table td.message .isSigned { + cursor: default; +} + +.repository.file.list #repo-files-table tr:last-of-type td:first-child { + border-bottom-left-radius: var(--border-radius); +} + +.repository.file.list #repo-files-table tr:last-of-type td:last-child { + border-bottom-right-radius: var(--border-radius); +} + +.repository.file.list #repo-files-table tr:hover { + background-color: var(--color-hover); +} + +.repository.file.list #repo-files-table tr.has-parent a { + display: inline-block; + padding-top: 8px; + padding-bottom: 8px; + width: calc(100% - 1.25rem); +} + +.repository.file.list .non-diff-file-content .header .icon { + font-size: 1em; +} + +.repository.file.list .non-diff-file-content .header .small.icon { + font-size: 0.75em; +} + +.repository.file.list .non-diff-file-content .header .tiny.icon { + font-size: 0.5em; +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon { + line-height: var(--line-height-default); + padding: 8px; + vertical-align: middle; + color: var(--color-text); +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover { + color: var(--color-primary); +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover { + color: var(--color-red); +} + +.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled { + color: inherit; + opacity: var(--opacity-disabled); + cursor: default; +} + +.view-raw { + display: flex; + justify-content: center; + align-items: center; +} + +.view-raw > * { + max-width: 100%; +} + +.view-raw audio, +.view-raw video, +.view-raw img { + margin: 1rem 0; + border-radius: 0; + object-fit: contain; +} + +.view-raw img[src$=".svg" i] { + max-height: 600px !important; + max-width: 600px !important; +} + +.pdf-content { + width: 100%; + height: 100vh; + border: none !important; + display: flex; + align-items: center; + justify-content: center; +} + +.pdf-content .pdf-fallback-button { + margin: 50px auto; +} + +.repository.file.list .non-diff-file-content .plain-text { + padding: 1em 2em; +} + +.repository.file.list .non-diff-file-content .plain-text pre { + overflow-wrap: anywhere; + white-space: pre-wrap; +} + +.repository.file.list .non-diff-file-content .csv { + overflow-x: auto; + padding: 0 !important; +} + +.repository.file.list .non-diff-file-content pre { + overflow: auto; +} + +.repository.file.list .non-diff-file-content .asciicast { + padding: 0 !important; +} + +.non-diff-file-content .pdfobject { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.repository.file.list .sidebar { + padding-left: 0; +} + +.repository.file.list .sidebar .svg { + width: 16px; +} + +.repo-editor-header { + width: 100%; +} + +.repo-editor-header input { + vertical-align: middle !important; + width: auto !important; + padding: 7px 8px !important; + margin-right: 5px !important; +} + +.repository.file.editor .tabular.menu .svg { + margin-right: 5px; +} + +.repository.file.editor .commit-form-wrapper { + padding-left: 64px; +} + +.repository.file.editor .commit-form-wrapper .commit-avatar { + float: left; + margin-left: -64px; + width: 3em; + height: auto; +} + +.repository.file.editor .commit-form-wrapper .commit-form { + position: relative; + padding: 15px; + margin-bottom: 10px; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + border-radius: var(--border-radius); +} + +.repository.file.editor .commit-form-wrapper .commit-form::before, +.repository.file.editor .commit-form-wrapper .commit-form::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.file.editor .commit-form-wrapper .commit-form::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.file.editor .commit-form-wrapper .commit-form::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name { + display: inline-block; + padding: 2px 4px; + font: 12px var(--fonts-monospace); + color: var(--color-text); + background: var(--color-secondary); + border-radius: var(--border-radius); + margin: 0 2px; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { + position: relative; + margin-left: 25px; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { + width: 240px !important; + padding-left: 26px !important; +} + +.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { + position: absolute; + top: 9px; + left: 10px; + color: var(--color-grey); +} + +.repository.options #interval { + width: 100px !important; + min-width: 100px; +} + +.repository.new.issue .comment.form .comment .avatar { + width: 3em; +} + +.repository.new.issue .comment.form .content { + margin-left: 4em; +} + +.repository.new.issue .comment.form .content::before, +.repository.new.issue .comment.form .content::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.new.issue .comment.form .content::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.new.issue .comment.form .content::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.new.issue .comment.form .content .markup { + font-size: 14px; +} + +.repository.view.issue .instruct-toggle { + display: inline-block; +} + +.issue-title-header { + width: 100%; + padding-bottom: 4px; + margin-bottom: 1rem; +} + +.issue-title-meta { + display: flex; + align-items: center; +} + +.issue-title .button-row, +.repository.releases .button-row { + display: flex; +} + +@media (max-width: 767.98px) { + .repository.view.issue .issue-title { + flex-direction: column; + } + .issue-title .button-row { + width: 100%; + margin-top: .5rem; + justify-content: space-between; + } + .comment.form .issue-content-left .avatar { + display: none; + } + .comment.form .issue-content-left .content { + margin-left: 0 !important; + } + .comment.form .issue-content-left .content::before, + .comment.form .issue-content-left .content::after, + .comment.form .content .form::before, + .comment.form .content .form::after { + display: none; + } + + .repository.view.issue .issue-title.edit-active h1 { + padding-right: 0; + } +} + +.repository.view.issue .issue-title { + display: flex; + align-items: center; + gap: 0.5em; + margin-bottom: 8px; + min-height: var(--repo-header-issue-min-height); +} + +.repository.view.issue .issue-title h1 { + flex: 1; + width: 100%; + font-weight: var(--font-weight-normal); + font-size: 32px; + line-height: 40px; + margin: 0; + padding-right: 0.5rem; +} + +.repository.view.issue .issue-title .ui.input { + font-size: 16px; +} + +.repository.view.issue .issue-title .ui.input input { + font-size: 1.5em; + padding: 2px .5rem; +} + +.repository.view.issue .issue-title .index { + color: var(--color-text-light-2); +} + +.repository.view.issue .issue-title .label { + margin-right: 10px; +} + +.issue-state-label { + display: flex !important; + align-items: center !important; + font-size: 14px !important; + padding: 7px 10px !important; + border-radius: var(--border-radius-medium) !important; + flex-shrink: 0; +} + +.issue-state-label .svg { + margin-right: 4px; +} + +.repository.view.issue .pull-desc code { + color: var(--color-primary); +} + +.repository.view.issue .pull-desc a[data-clipboard-text] { + cursor: pointer; +} + +.repository.view.issue .pull-desc a[data-clipboard-text] svg { + vertical-align: middle; + position: relative; + top: -2px; + right: 1px; +} + +.repository.view.issue .pull.tabs.container { + width: 100%; + max-width: 100%; +} + +.repository.view.issue .pull.tabular.menu { + margin-bottom: 0; + overflow-x: auto; + overflow-y: hidden; +} + +.repository.view.issue .pull.tabular.menu .svg { + margin-right: 5px; +} + +.repository.view.issue .merge.box .branch-update.grid .row { + padding-bottom: 1rem; +} + +.repository.view.issue .merge.box .branch-update.grid .row .icon { + margin-top: 1.1rem; +} + +.repository.view.issue .comment-list:not(.prevent-before-timeline)::before { + display: block; + content: ""; + position: absolute; + margin-top: 12px; + margin-bottom: 14px; + top: 0; + bottom: 0; + left: 96px; + width: 2px; + background-color: var(--color-timeline); + z-index: -1; +} + +.repository.view.issue .comment-list .timeline { + position: relative; + display: block; + margin-left: 40px; + padding-left: 16px; +} + +.repository.view.issue .comment-list .timeline::before { /* ciara */ + display: block; + content: ""; + position: absolute; + margin-top: 12px; + margin-bottom: 14px; + top: 0; + bottom: 0; + left: 30px; + width: 2px; + background-color: var(--color-timeline); + z-index: -1; +} + +.repository.view.issue .comment-list .timeline-item, +.repository.view.issue .comment-list .timeline-item-group { + padding: 16px 0; +} + +.repository.view.issue .comment-list .timeline-item-group .timeline-item { + padding-top: 8px; + padding-bottom: 8px; +} + +.repository.view.issue .comment-list .timeline-avatar-offset { + margin-top: 48px; +} + +.repository.view.issue .comment-list .timeline-item { + margin-left: 16px; + position: relative; +} + +.repository.view.issue .comment-list .timeline-item .timeline-avatar { + position: absolute; + left: -68px; +} + +/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */ +.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar { + display: none; +} + +.repository.view.issue .comment-list .timeline-item:first-child:not(.commit) { + padding-top: 0 !important; +} + +.repository.view.issue .comment-list .timeline-item:last-child:not(.commit) { + padding-bottom: 0 !important; +} + +.repository.view.issue .comment-list .timeline-item .badge.badge-commit { + border-color: transparent; + background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat; +} + +.repository.view.issue .comment-list .timeline-item .badge { + width: 34px; + height: 34px; + background-color: var(--color-timeline); + border-radius: var(--border-radius-full); + display: flex; + float: left; + margin-left: -33px; + margin-right: 8px; + color: var(--color-text); + align-items: center; + justify-content: center; +} + +.repository.view.issue .comment-list .timeline-item .badge .svg { + width: 22px; + height: 22px; + padding: 3px; +} + +.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment { + margin-top: 2px; +} + +.repository.view.issue .comment-list .timeline-item.comment > .content { + margin-left: -16px; +} + +.repository.view.issue .comment-list .timeline-item.event > .text { + line-height: 32px; + vertical-align: middle; +} + +.repository.view.issue .comment-list .timeline-item.commits-list { + padding-left: 15px; + padding-top: 0; +} + +.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar, +.repository.view.issue .comment-list .timeline-item.event .ui.avatar { + margin-right: 0.25em; +} + +.singular-commit { + display: flex; + align-items: center; +} + +.singular-commit .badge { + height: 30px !important; +} + +.singular-commit .shabox .sha.label { + margin: 0; + border: 1px solid var(--color-light-border); +} + +.singular-commit .shabox .sha.label.isSigned.isWarning { + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isWarning:hover { + background: var(--color-red-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label.isSigned.isVerified { + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isVerified:hover { + background: var(--color-green-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted { + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover { + background: var(--color-yellow-badge-hover-bg) !important; +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched { + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); +} + +.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover { + background: var(--color-orange-badge-hover-bg) !important; +} + +.repository.view.issue .comment-list .timeline-item .comparebox { + line-height: 32px; + vertical-align: middle; +} + +.repository.view.issue .comment-list .timeline-item .comparebox .compare.label { + font-size: 1rem; + margin: 0; + border: 1px solid var(--color-light-border); +} + +@media (max-width: 767.98px) { + .repository.view.issue .comment-list .timeline-item .ui.segments { + margin-left: -2rem; + } +} + +.repository.view.issue .comment-list .ui.comments { + max-width: 100%; +} + +.repository.view.issue .comment-list .comment > .content > div:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.repository.view.issue .comment-list .comment > .content > div:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.repository.view.issue .comment-list .comment .comment-container { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); +} + +@media (max-width: 767.98px) { + .repository.view.issue .comment-list .comment .content .form .button { + width: 100%; + margin: 0; + } + .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) { + margin-bottom: 1rem; + } +} + +.repository.view.issue .comment-list .comment .merge-section { + background-color: var(--color-box-body); +} + +.repository.view.issue .comment-list .comment .merge-section .item-section { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0; + gap: 0.5em; +} + +.repository.view.issue .comment-list .comment .merge-section .divider { + margin-left: -1rem; + width: calc(100% + 2rem); +} + +.repository.view.issue .comment-list .comment .merge-section.no-header::before, +.repository.view.issue .comment-list .comment .merge-section.no-header::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.view.issue .comment-list .comment .merge-section.no-header::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.view.issue .comment-list .comment .merge-section.no-header::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.merge-section-info code { + border: 1px solid var(--color-light-border); + border-radius: var(--border-radius); + padding: 2px 4px; + background: var(--color-light); +} + +.repository.view.issue .comment-list .comment .markup { + font-size: 14px; +} + +.repository.view.issue .comment-list .comment .no-content { + color: var(--color-text-light-2); + font-style: italic; +} + +.repository.view.issue .comment-list .comment .ui.form .field:first-child { + clear: none; +} + +.repository.view.issue .comment-list .comment .ui.form .field.footer { + overflow: hidden; +} + +.repository.view.issue .comment-list .comment .ui.form .field .tab.markup { + min-height: 5rem; +} + +.repository.view.issue .comment-list .comment .edit.buttons { + margin-top: 10px; +} + +.repository.view.issue .comment-list .code-comment { + border: 1px solid transparent; + margin: 0; +} + +.repository.view.issue .comment-list .code-comment .comment-header { + background: transparent; + border-bottom: 0 !important; + padding: 0 !important; +} + +.repository.view.issue .comment-list .code-comment .comment-header::after, +.repository.view.issue .comment-list .code-comment .comment-header::before { + display: none; +} + +.repository.view.issue .comment-list .code-comment .comment-content { + margin-left: 36px; +} + +.repository.view.issue .comment-list .comment > .avatar { + margin-top: 6px; +} + +.repository.view.issue .comment-list .comment > .avatar ~ .content { + margin-left: 42px; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions { + margin-top: 16px !important; + margin-bottom: -8px !important; + border-top: none !important; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label { + border: 1px solid; + padding: 5px 8px !important; + margin: 0 2px; + border-radius: var(--border-radius); + border-color: var(--color-secondary-dark-1) !important; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary { + background-color: var(--color-reaction-active-bg) !important; + border-color: var(--color-primary-alpha-80) !important; +} + +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover { + background-color: var(--color-reaction-hover-bg) !important; + border-color: var(--color-primary-alpha-80) !important; +} + +.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { + margin: 0; +} + +.repository.view.issue .comment-list .event { + padding-left: 15px; +} + +.repository.view.issue .comment-list .event .detail { + margin-top: 4px; + margin-left: 15px; +} + +.repository.view.issue .comment-list .event .detail .text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.repository.view.issue .comment-list .event .segments { + box-shadow: none; +} + +@media (max-width: 767.98px) { + .repository.view.issue .comment-list { + padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */ + } +} + +.repository.view.issue .ui.depending .item.is-closed .title { + text-decoration: line-through; +} + +.repository .comment.form .content .field:first-child { + clear: none; +} + +.repository .comment.form .content .form::before, +.repository .comment.form .content .form::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository .comment.form .content .form::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository .comment.form .content .form::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.new.milestone textarea { + height: 200px; +} + +.milestone-progress-big { + width: min(420px, 96vw); + height: 10px; +} + +.repository.compare.pull .show-form-container { + text-align: left; +} + +.repository .choose.branch { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.repository .choose .compare-separator { + width: 100%; + margin-top: -1rem; + text-align: center; +} + +.repository.compare.pull .comment.form .content::before, +.repository.compare.pull .comment.form .content::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.repository.compare.pull .comment.form .content::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.repository.compare.pull .comment.form .content::after { + border-right-color: var(--color-box-body); + border-width: 8px; + margin-top: -8px; +} + +.repository.compare.pull .pullrequest-form { + margin-top: 16px; + margin-bottom: 16px; +} + +.repository.compare.pull .markup { + font-size: 14px; +} + +.repository.compare.pull .title .issue-title { + margin-bottom: 0.5rem; +} + +.repository.compare.pull .title .issue-title .index { + color: var(--color-text-light-2); +} + +.repository.branches .commit-divergence .bar-group { + position: relative; + float: left; + padding-bottom: 6px; + width: 50%; + max-width: 90px; +} + +.repository.branches .commit-divergence .bar-group:last-child { + border-left: 1px solid var(--color-secondary-dark-2); +} + +.repository.branches .commit-divergence .count { + margin: 0 3px; +} + +.repository.branches .commit-divergence .count.count-ahead { + text-align: left; +} + +.repository.branches .commit-divergence .count.count-behind { + text-align: right; +} + +.repository.branches .commit-divergence .bar { + height: 4px; + position: absolute; + background-color: var(--color-secondary-dark-2); +} + +.repository.branches .commit-divergence .bar.bar-behind { + right: 0; +} + +.repository.branches .commit-divergence .bar.bar-ahead { + left: 0; +} + +.repository.commits .header .search input { + font-weight: var(--font-weight-normal); + padding: 5px 10px; +} + +.repository #commits-table td:not(.message) { + white-space: nowrap; +} +.repository #commits-table thead .sha { + width: 200px; +} + +.repository #commits-table thead .shatd { + text-align: center; +} + +.repository #commits-table td.sha .sha.label { + margin: 0; +} + +.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: var(--color-light) !important; +} + +.repository #commits-table td.sha .sha.label, +.repository #repo-files-table .sha.label, +.repository #repo-file-commit-box .sha.label, +.repository #rev-list .sha.label, +.repository .timeline-item.commits-list .singular-commit .sha.label { + border: 1px solid var(--color-light-border); +} + +.repository #commits-table td.sha .sha.label .ui.signature.avatar, +.repository #repo-files-table .sha.label .ui.signature.avatar, +.repository #repo-file-commit-box .sha.label .ui.signature.avatar, +.repository #rev-list .sha.label .ui.signature.avatar, +.repository .timeline-item.commits-list .singular-commit .sha.label .ui.signature.avatar { + height: 16px; + margin-bottom: 0; + width: 16px; +} + +.repository #commits-table td.sha .sha.label .detail.icon, +.repository #repo-files-table .sha.label .detail.icon, +.repository #repo-file-commit-box .sha.label .detail.icon, +.repository #rev-list .sha.label .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { + background: var(--color-light); + margin: -6px -10px -4px 0; + padding: 5px 4px 5px 6px; + border-left: 1px solid var(--color-light-border); + border-top: 0; + border-right: 0; + border-bottom: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon img, +.repository #repo-files-table .sha.label .detail.icon img, +.repository #repo-file-commit-box .sha.label .detail.icon img, +.repository #rev-list .sha.label .detail.icon img, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon img { + margin-right: 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon .svg, +.repository #repo-files-table .sha.label .detail.icon .svg, +.repository #repo-file-commit-box .sha.label .detail.icon .svg, +.repository #rev-list .sha.label .detail.icon .svg, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon .svg { + margin: 0 0.25em 0 0; +} + +.repository #commits-table td.sha .sha.label .detail.icon > div, +.repository #repo-files-table .sha.label .detail.icon > div, +.repository #repo-file-commit-box .sha.label .detail.icon > div, +.repository #rev-list .sha.label .detail.icon > div, +.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon > div { + display: flex; + align-items: center; +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning, +.repository #repo-files-table .sha.label.isSigned.isWarning, +.repository #repo-file-commit-box .sha.label.isSigned.isWarning, +.repository #rev-list .sha.label.isSigned.isWarning, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning { + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isWarning .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isWarning .detail.icon, +.repository #rev-list .sha.label.isSigned.isWarning .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning .detail.icon { + border-left: 1px solid var(--color-red-badge); + color: var(--color-red-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isWarning:hover, +.repository #repo-files-table .sha.label.isSigned.isWarning:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isWarning:hover, +.repository #rev-list .sha.label.isSigned.isWarning:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isWarning:hover { + background: var(--color-red-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified, +.repository #repo-files-table .sha.label.isSigned.isVerified, +.repository #repo-file-commit-box .sha.label.isSigned.isVerified, +.repository #rev-list .sha.label.isSigned.isVerified, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerified .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerified .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon { + border-left: 1px solid var(--color-green-badge); + color: var(--color-green-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover, +.repository #repo-files-table .sha.label.isSigned.isVerified:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isVerified:hover, +.repository #rev-list .sha.label.isSigned.isVerified:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified:hover { + background: var(--color-green-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted { + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted .detail.icon { + border-left: 1px solid var(--color-yellow-badge); + color: var(--color-yellow-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository #rev-list .sha.label.isSigned.isVerifiedUntrusted:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUntrusted:hover { + background: var(--color-yellow-badge-hover-bg) !important; +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched { + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched .detail.icon, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched .detail.icon { + border-left: 1px solid var(--color-orange-badge); + color: var(--color-orange-badge); +} + +.repository #commits-table td.sha .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #repo-files-table .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #repo-file-commit-box .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository #rev-list .sha.label.isSigned.isVerifiedUnmatched:hover, +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerifiedUnmatched:hover { + background: var(--color-orange-badge-hover-bg) !important; +} + +.repository .data-table { + width: 100%; +} + +.repository .data-table tr { + border-top: 0; +} + +.repository .data-table td, +.repository .data-table th { + padding: 5px !important; + overflow: hidden; + font-size: 12px; + text-align: left; + white-space: nowrap; + border: 1px solid var(--color-secondary); +} + +/* the border css competes with .markup where all tables have outer border which would add a double + border here, remove only the outer borders from this table */ +.repository .data-table tr:first-child :is(td,th) { + border-top: none !important; +} +.repository .data-table tr:last-child :is(td,th) { + border-bottom: none !important; +} +.repository .data-table tr :is(td,th):first-child { + border-left: none !important; +} +.repository .data-table tr :is(td,th):last-child { + border-right: none !important; +} + +.repository .data-table td { + white-space: pre-line; +} + +.repository .data-table th { + font-weight: var(--font-weight-semibold); + background: var(--color-box-header); + border-top: 0; +} + +.repository .data-table td.added, +.repository .data-table th.added, +.repository .data-table tr.added { + background-color: var(--color-diff-added-row-bg) !important; +} + +.repository .data-table td.removed, +.repository .data-table th.removed, +.repository .data-table tr.removed { + background-color: var(--color-diff-removed-row-bg) !important; +} + +.repository .data-table td.moved, +.repository .data-table th.moved, +.repository .data-table tr.moved { + background-color: var(--color-diff-moved-row-bg) !important; +} + +.repository .data-table tbody.section { + border-top: 2px solid var(--color-secondary); +} + +.repository .data-table .line-num { + width: 1%; + min-width: 50px; + font-family: monospace; + line-height: 20px; + color: var(--color-text-light-1); + white-space: nowrap; + vertical-align: top; + cursor: pointer; + text-align: right; + background: var(--color-body); + border: 0; +} + +.repository .diff-detail-box { + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 8; + padding: 7px 5px; + margin: 0 -5px; /* negative margin so it covers active file shadow */ + height: 44px; /* this height should match sticky-2nd-row */ + background: var(--color-body); +} + +@media (max-width: 480px) { + .repository .diff-detail-box { + flex-wrap: wrap; + } +} +.repository .diff-detail-box .diff-detail-stats strong { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +/* Because the translations contain the <strong> we need to style with nth-of-type */ + +.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) { + color: var(--color-yellow); +} + +.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) { + color: var(--color-green); +} + +.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) { + color: var(--color-red); +} + +@media (max-width: 800px) { + .repository .diff-detail-box .diff-detail-stats { + display: none !important; + } +} + +.diff-detail-actions { + display: flex; + align-items: center; + justify-content: end; +} + +.diff-detail-actions > *, +.diff-detail-actions .button { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.repository .diff-detail-box span.status { + display: inline-block; + width: 12px; + height: 12px; + margin-right: 8px; + vertical-align: middle; +} + +.repository .diff-detail-box span.status.modify { + background-color: var(--color-yellow); +} + +.repository .diff-detail-box span.status.add { + background-color: var(--color-green); +} + +.repository .diff-detail-box span.status.del { + background-color: var(--color-red); +} + +.repository .diff-detail-box span.status.rename { + background-color: var(--color-teal); +} + +.repository .diff-detail-box .ui.button { + padding: 0 1.125em; + height: 30px; +} + +.repository .diff-box .header:not(.resolved-placeholder) .file { + min-width: 0; +} + +.repository .diff-box .header:not(.resolved-placeholder) .file .file-link { + max-width: fit-content; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.repository .diff-box .header:not(.resolved-placeholder) .button { + padding: 0 1.125em; + flex: 0 0 auto; + margin-right: 0; + height: 30px; +} + +.repository .diff-box .resolved-placeholder { + display: flex; + align-items: center; + font-size: 14px !important; + height: 36px; + padding-top: 0; + padding-bottom: 0; +} + +.repository .diff-box .resolved-placeholder .button { + padding: 8px 12px; +} + +.repository .diff-file-box .header { + background-color: var(--color-box-header); +} + +.repository .diff-file-box .file-body.file-code { + background: var(--color-code-bg); +} + +.repository .diff-file-box .file-body.file-code .lines-num { + text-align: right; + width: 1%; + min-width: 50px; +} + +.repository .diff-file-box .file-body.file-code .lines-num span.fold { + display: block; + text-align: center; +} + +.repository .diff-file-box .code-diff td { + padding: 0 0 0 10px !important; + border-top: 0; +} + +.repository .diff-file-box .code-diff .lines-num { + padding: 0 5px !important; +} + +.repository .diff-file-box .code-diff .tag-code .lines-num, +.repository .diff-file-box .code-diff .tag-code td { + padding: 0 !important; +} + +.repository .diff-file-box .code-diff table { + table-layout: fixed; +} + +.repository .diff-file-box .code-diff tbody tr td.lines-num, +.repository .diff-file-box .code-diff tbody tr td.lines-escape, +.repository .diff-file-box .code-diff tbody tr td.lines-type-marker { + white-space: nowrap; +} + +.repository .diff-file-box .code-diff tbody tr td.center { + text-align: center; +} + +.repository .diff-file-box .code-diff tbody tr [data-line-num]::before { + content: attr(data-line-num); + text-align: right; +} + +.repository .diff-file-box .code-diff tbody tr .lines-type-marker { + width: 10px; + min-width: 10px; +} + +.repository .diff-file-box .code-diff tbody tr [data-type-marker]::before { + content: attr(data-type-marker); + text-align: right; + display: inline-block; +} + +.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner { + padding-left: 10px !important; +} + +.repository .diff-file-box .code-diff-split table, +.repository .diff-file-box .code-diff-split tbody { + width: 100%; +} + +.repository .diff-file-box.file-content { + clear: right; +} + +.repository .diff-file-box.file-content .image-diff img { + max-width: 100%; + padding: 0; + border-radius: 0; +} + +.repository .diff-file-box .ui.bottom.attached.table.segment { + padding-top: 5px; + padding-bottom: 5px; +} + +.diff-file-box { + border: 1px solid transparent; + border-radius: var(--border-radius); + scroll-margin-top: 47px; /* match .repository .diff-detail-box */ +} + +.file.editor .diff-file-box { + border: none; +} + +.file.editor .diff-file-box .ui.attached.table { + border: none; +} + +/* TODO: this can potentially be made "global" by removing the class prefix */ +.diff-file-box .ui.attached.header, +.diff-file-box .ui.attached.table { + margin: 0; /* remove fomantic negative margins */ + width: initial; /* remove fomantic over 100% width */ + max-width: initial; /* remove fomantic over 100% width */ +} + +.repository .diff-stats { + clear: both; + margin-bottom: 5px; + max-height: 200px; + height: fit-content; + overflow: auto; + padding-left: 0; +} + +.repository .diff-stats li { + list-style: none; + padding-bottom: 4px; + margin-bottom: 4px; + padding-left: 6px; +} + +.repository .diff-stats li + li { + border-top: 1px solid var(--color-secondary); +} + +.repository .repo-search-result { + padding-top: 10px; + padding-bottom: 10px; +} + +.repository .repo-search-result .lines-num a { + color: inherit; +} + +/* workaround for safari as it does not support 'display: list-item' for summary tags yet +** see https://codeberg.org/forgejo/forgejo/issues/5259 */ +details.repo-search-result summary::-webkit-details-marker, +details.repo-search-result summary::marker { + display: none; +} + +.search-highlight { + background: var(--color-primary-alpha-40); +} + +.repository.quickstart .guide .item { + padding: 1em; +} + +.repository.quickstart .guide .item small { + font-weight: var(--font-weight-normal); +} + +.repository.quickstart .guide #repo-clone-url { + border-radius: 0; + padding: 5px 10px; + font-size: 1.2em; + line-height: 1.4; + flex: 1 +} + +.empty-placeholder { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 40px; + padding-bottom: 40px; +} + +.repository.packages .file-size { + white-space: nowrap; +} + +.file-view.markup { + padding: 2em; +} +.repository .activity-header { + display: flex; + justify-content: space-between; + gap: 8px; + flex-wrap: wrap; +} + +/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */ +.repository.settings.branches .branch-protection .ui.checkbox .help, +.repository.settings.branches .branch-protection .checkbox-sub-item { + padding-left: 26px; +} + +.repository.settings.branches .branch-protection .status-check-matched-mark { + font-weight: var(--font-weight-semibold); + font-style: italic; +} + +.repository .ui.attached.isSigned.isWarning { + border-left: 1px solid var(--color-error-border); + border-right: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isWarning.top, +.repository .ui.attached.isSigned.isWarning.message { + border-top: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isWarning.message { + box-shadow: none; + background-color: var(--color-error-bg); + color: var(--color-error-text); +} + +.repository .ui.attached.isSigned.isWarning.message .ui.text { + color: var(--color-error-text); +} + +.repository .ui.attached.isSigned.isWarning:last-child, +.repository .ui.attached.isSigned.isWarning.bottom { + border-bottom: 1px solid var(--color-error-border); +} + +.repository .ui.attached.isSigned.isVerified { + border-left: 1px solid var(--color-success-border); + border-right: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerified.top, +.repository .ui.attached.isSigned.isVerified.message { + border-top: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerified.message { + box-shadow: none; + background-color: var(--color-success-bg); + color: var(--color-success-text); +} + +.repository .ui.attached.isSigned.isVerified.message .pull-right { + color: var(--color-text); +} + +.repository .ui.attached.isSigned.isVerified.message .ui.text { + color: var(--color-success-text); +} + +.repository .ui.attached.isSigned.isVerified:last-child, +.repository .ui.attached.isSigned.isVerified.bottom { + border-bottom: 1px solid var(--color-success-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted, +.repository .ui.attached.isSigned.isVerifiedUnmatched { + border-left: 1px solid var(--color-warning-border); + border-right: 1px solid var(--color-warning-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.top, +.repository .ui.attached.isSigned.isVerifiedUnmatched.top, +.repository .ui.attached.isSigned.isVerifiedUntrusted.message, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message { + border-top: 1px solid var(--color-warning-border); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.message, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message { + box-shadow: none; + background-color: var(--color-warning-bg); + color: var(--color-warning-text); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text, +.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text { + color: var(--color-warning-text); +} + +.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child, +.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child, +.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom, +.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom { + border-bottom: 1px solid var(--color-warning-border); +} + +.repository .release-tag-name .ui.label.isSigned, +.repository .release-list-title .ui.label.isSigned { + padding: 0 0.5em; + box-shadow: none; +} + +.repository .release-tag-name .ui.label.isSigned .avatar, +.repository .release-list-title .ui.label.isSigned .avatar { + margin-left: .5rem; +} + +.repository .release-tag-name .ui.label.isSigned.isVerified, +.repository .release-list-title .ui.label.isSigned.isVerified { + border: 1px solid var(--color-success-border); + background-color: var(--color-success-bg); + color: var(--color-success-text); +} + +.repository .release-tag-name .ui.label.isSigned.isWarning, +.repository .release-list-title .ui.label.isSigned.isWarning { + border: 1px solid var(--color-warning-border); + background-color: var(--color-warning-bg); + color: var(--color-warning-text); +} + +.repository .segment.reactions.dropdown .menu, +.repository .select-reaction.dropdown .menu { + right: 0 !important; + left: auto !important; + min-width: 170px; +} + +.repository .segment.reactions.dropdown .menu > .header, +.repository .select-reaction.dropdown .menu > .header { + margin: 0.75rem 0 0.5rem; +} + +.repository .segment.reactions.dropdown .menu > .item, +.repository .select-reaction.dropdown .menu > .item { + float: left; + margin: 4px; + font-size: 20px; + width: 34px; + height: 34px; + min-height: 0 !important; + border-radius: var(--border-radius); + display: flex !important; + align-items: center; + justify-content: center; +} + +.repository .segment.reactions { + padding: 0; + display: flex; + border: none !important; + border-top: 1px solid var(--color-secondary) !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +.repository .segment.reactions .ui.label { + max-height: 40px; + padding: 8px 16px !important; + display: flex !important; + align-items: center; + border: 0; + border-right: 1px solid; + border-radius: 0; + margin: 0; + font-size: 12px; + font-weight: var(--font-weight-normal); + border-color: var(--color-secondary) !important; + background: var(--color-reaction-bg); +} + +.repository .segment.reactions .ui.label:first-of-type { + border-bottom-left-radius: 3px; +} + +.repository .segment.reactions .ui.label.disabled { + cursor: default; + opacity: 1; +} + +.repository .segment.reactions .ui.label.basic.primary { + color: var(--color-primary) !important; + background-color: var(--color-reaction-active-bg) !important; + border-color: var(--color-secondary-dark-1) !important; +} + +.repository .segment.reactions .ui.label.basic:hover { + background-color: var(--color-reaction-hover-bg) !important; +} + +.repository .segment.reactions .reaction-count { + margin-left: 0.5rem; +} + +.repository .segment.reactions .select-reaction { + display: flex; + align-items: center; +} + +.repository .segment.reactions .select-reaction a { + padding: 0 14px; +} + +.repository .segment.reactions .select-reaction:not(.active) a { + display: none; +} + +.repository .segment.reactions:hover .select-reaction a { + display: block; +} + +.repository .ui.fluid.action.input .ui.search.action.input { + flex: auto; +} + +.repository .repository-summary { + box-shadow: none; +} + +.repository .repository-summary .segment.sub-menu { + border: none; + display: flex; + align-items: center; + padding: 0; + overflow: hidden; +} + +.repository .repository-summary .sub-menu .item { + flex: 1; + height: 30px; + line-height: var(--line-height-default); + 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; +} + +.repository .repository-summary .sub-menu .item.active { + background: var(--color-secondary); +} + +.repository .repository-summary .segment.language-stats { + display: flex; + gap: 2px; + padding: 0; + height: 10px; + white-space: nowrap; + border-radius: 0 0 3px 3px !important; + overflow: hidden; +} + +#cite-repo-modal #citation-panel { + display: flex; + width: 100%; +} + +#cite-repo-modal #citation-panel input { + border-radius: 0; + padding: 5px 10px; + width: 50%; + line-height: 1.4; +} + +#cite-repo-modal #citation-panel #citation-copy-content { + border-radius: 0; + padding: 5px 10px; + font-size: 1.2em; + line-height: 1.4; + flex: 1; +} + +#cite-repo-modal #citation-panel #citation-copy-bibtex { + font-size: 13px; + padding: 7.5px 5px; + border-right: none; +} + +#cite-repo-modal #citation-panel #goto-citation-btn { + border-left: none; +} + +#cite-repo-modal #citation-panel > :first-child { + border-radius: var(--border-radius) 0 0 var(--border-radius) !important; +} + +#cite-repo-modal #citation-panel > :last-child { + border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; +} + +#cite-repo-modal #citation-panel .icon.button { + padding: 0 10px; +} + +.user-cards .list { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + margin: 0 0 10px; + padding: 0; +} + +@media (max-width: 767.98px) { + .user-cards .list { + grid-template-columns: repeat(1, 1fr); + } +} + +@media (max-width: 900px) { + .user.profile .user-cards .list { + grid-template-columns: repeat(1, 1fr); + } +} + +.user-cards .list .card { + display: flex; + flex-direction: row; + width: 100%; + margin: 0; + padding: 14px; + border-radius: 0.28571429rem; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); +} + +.user-cards .list .card .avatar { + width: 48px; + height: 48px; + margin-right: 14px; +} + +.user-cards .list .card .name { + margin-top: 0; + margin-bottom: 0; + font-weight: var(--font-weight-normal); +} + +.user-cards .list .card .meta { + margin-top: 5px; +} + +#search-user-box .results .result .image { + order: 0; + margin-right: 12px; + width: 2em; + height: 2em; + min-width: 2em; + min-height: 2em; +} + +#search-user-box .results .result .content { + margin: 0; /* remove margin reserved for avatar because we move it to left via `order: 0` */ +} + +.ui.menu .item > img:not(.ui) { + width: auto; +} + +.page.buttons { + padding-top: 15px; +} + +.commit-header-row, +.tag-signature-row { + min-height: 50px !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.ui.attached.message.tag-signature-row { + border-radius: var(--border-radius); +} + +.tag-signature-row div { + margin-top: auto !important; + margin-bottom: auto !important; + display: inline-block !important; +} + +.commit-header-buttons { + display: flex; + gap: 4px; + align-items: flex-start; + white-space: nowrap; +} + +@media (max-width: 767.98px) { + .commit-header-buttons { + flex-direction: column; + align-items: stretch; + } +} + +.settings.webhooks .list > .item:not(:first-child), +.settings.githooks .list > .item:not(:first-child), +.settings.actions .list > .item:not(:first-child) { + padding: 0.25rem 1rem; + margin: 12px -1rem -1rem; +} + +.settings .list > .item:not(:first-child) { + border-top: 1px solid var(--color-secondary); + padding: 1rem; + margin: 16px -1rem -1rem; +} + +.settings .list > .item > .svg { + display: table-cell; +} + +.settings .list > .item > .svg + .content { + display: table-cell; + padding: 0 0 0 0.5em; + vertical-align: top; +} + +.settings .list > .item .info { + margin-top: 10px; +} + +.settings .list > .item .info .tab.segment { + border: 0; + padding: 10px 0 0; +} + +.ui.vertical.menu .header.item { + font-size: 1.1em; + background: var(--color-box-header); +} + +.comment:target .comment-container { + border-color: var(--color-primary) !important; + box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; +} + +.comment:target .header::before { + border-right-color: var(--color-primary) !important; + filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important; +} + +.code-comment:target, +.diff-file-box:target { + border-color: var(--color-primary) !important; + border-radius: var(--border-radius) !important; + box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; +} + +.code-comment:target .content { + box-shadow: none !important; +} + +.comment-header { + border: none !important; + background: var(--color-box-header); + border-bottom: 1px solid var(--color-secondary) !important; + font-weight: var(--font-weight-normal) !important; + padding: 0.5rem 1rem; + margin: 0 !important; + position: relative; + color: var(--color-text); + min-height: var(--repo-header-issue-min-height); + background-color: var(--color-box-header); + display: flex; + justify-content: space-between; + align-items: center; +} + +.comment-header::before, +.comment-header::after { + right: 100%; + top: 20px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.comment-header::before { + border-right-color: var(--color-secondary); + border-width: 9px; + margin-top: -9px; +} + +.comment-header::after { + border-right-color: var(--color-box-header); + border-width: 8px; + margin-top: -8px; +} + +.comment-header.arrow-top::before, +.comment-header.arrow-top::after { + transform: rotate(90deg); +} + +.comment-header.arrow-top::before { + top: -9px; + left: 6px; +} + +.comment-header.arrow-top::after { + top: -8px; + left: 7px; +} + +.comment-header .actions a:not(.label) { + padding: 0.5rem !important; +} + +.comment-header .actions .label { + margin: 0 !important; +} + +.comment-header-left, +.comment-header-right { + gap: 4px; +} + +.comment-body { + background: var(--color-box-body); + border: none !important; + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + padding: 1em; +} + +.edit-label.modal .form .column, +.new-label.modal .form .column { + padding-right: 0; +} + +.edit-label.modal .form .buttons, +.new-label.modal .form .buttons { + margin-left: auto; + padding-top: 15px; +} + +.stats-table { + display: table; + width: 100%; + margin: 6px 0; + border-spacing: 2px; +} + +.stats-table .table-cell { + display: table-cell; +} + +.stats-table .table-cell.tiny { + height: 8px; +} + +.stats-table .table-cell:first-child { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.stats-table .table-cell:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.labels-list { + display: inline-flex; + flex-wrap: wrap; + gap: 2.5px; + align-items: center; +} + +.labels-list .label { + padding: 0 6px; + min-height: 20px; + line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */ +} + +/* 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-left { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin-right: 0; +} + +.ui.label.scope-right { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: 0; +} + +.archived-label { + filter: grayscale(0.25) saturate(0.75); +} + +.repo-button-row { + margin: 10px 0; + display: flex; + align-items: center; + gap: 0.5em; + flex-wrap: wrap; + justify-content: space-between; +} + +.repo-button-row .button { + padding: 6px 10px !important; + height: 30px; +} + +.repo-button-row .button.dropdown:not(.icon) { + padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */ +} + +.repo-button-row input { + height: 30px; +} + +tbody.commit-list { + vertical-align: baseline; +} + +.message-wrapper, +.author-wrapper { + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: inline-block; + vertical-align: middle; +} + +.author-wrapper { + max-width: 180px; + align-self: center; + white-space: nowrap; +} + +/* in the commit list, messages can wrap so we can use inline */ +.commit-list .message-wrapper { + display: inline; + overflow-wrap: anywhere; +} + +/* but in the repo-files-table we cannot */ +#repo-files-table .commit-list .message-wrapper { + display: inline-block; +} + +@media (max-width: 767.98px) { + tr.commit-list { + width: 100%; + } + .author-wrapper { + max-width: 80px; + } +} + +@media (min-width: 768px) and (max-width: 991.98px) { + tr.commit-list { + width: 723px; + } +} + +@media (min-width: 992px) and (max-width: 1200px) { + tr.commit-list { + width: 933px; + } +} + +@media (min-width: 1201px) { + tr.commit-list { + width: 1127px; + } +} + +.commit-body { + margin: 0.25em 0; + white-space: pre-wrap; + overflow-wrap: anywhere; + line-height: initial; +} + +.git-notes.top { + text-align: left; +} + +.comment-diff-data { + background: var(--color-code-bg); + min-height: 12em; + max-height: calc(100vh - 10.5rem); + overflow-y: auto; + tab-size: 4; +} + +.comment-diff-data pre { + line-height: 18px; + margin: 1em; + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: break-word; +} + +.content-history-detail-dialog .header .avatar { + position: relative; + top: -2px; +} + +#repo-topics .repo-topic { + font-weight: var(--font-weight-normal); + cursor: pointer; + margin: 0; +} + +#new-dependency-drop-list.ui.selection.dropdown { + min-width: 0; + width: 100%; + border-radius: var(--border-radius) 0 0 var(--border-radius); + border-right: 0; + white-space: nowrap; +} + +#new-dependency-drop-list .text { + width: 100%; + overflow: hidden; +} + +.tag-code { + height: 28px; +} + +.tag-code, +.tag-code td, +.tag-code .blob-excerpt { + background-color: var(--color-box-body-highlight); + vertical-align: middle; +} + +.resolved-placeholder { + font-weight: var(--font-weight-normal) !important; + border: 1px solid var(--color-secondary) !important; + border-radius: var(--border-radius) !important; + margin: 4px !important; +} + +.resolved-placeholder + .comment-code-cloud { + padding-top: 0 !important; +} + +.blob-excerpt { + background-color: var(--color-secondary-alpha-30); +} + +.issue-keyword { + border-bottom: 1px dotted var(--color-text-light-3) !important; +} + +.issue-keyword:hover { + border-bottom: none !important; +} + +.file-header { + align-items: center; + display: flex; + justify-content: space-between; + overflow-x: auto; + padding: 6px 12px !important; + font-size: 13px !important; +} + +.file-info { + display: flex; + align-items: center; +} + +.file-info-entry { + display: flex; + align-items: center; + width: max-content; +} + +.file-info-entry + .file-info-entry { + border-left: 1px solid currentcolor; + margin-left: 8px; + padding-left: 8px; +} + +#diff-container { + display: flex; +} + +#diff-file-boxes { + flex: 1; + max-width: 100%; + display: flex; + flex-direction: column; + gap: 8px; +} + +#diff-file-tree { + flex: 0 0 20%; + max-width: 380px; + line-height: inherit; + position: sticky; + padding-top: 0; + top: 47px; + max-height: calc(100vh - 47px); + height: 100%; + overflow-y: auto; +} + +.ui.message.unicode-escape-prompt { + margin-bottom: 0; + border-radius: 0; + display: flex; + flex-direction: column; +} + +/* fomantic's last-child selector does not work with hidden last child */ +.ui.buttons .unescape-button { + border-top-right-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} + +.webhook-info { + padding: 7px 12px; + margin: 10px 0; + background-color: var(--color-markup-code-block); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + font-size: 13px; + line-height: 1.5; + overflow: auto; +} + +.title_wip_desc { + margin-top: 1em; +} + +.sidebar-item-link { + display: inline-flex; + align-items: center; + overflow-wrap: anywhere; +} + +.diff-file-header { + padding: 5px 8px !important; +} + +.diff-file-box[data-folded="true"] .diff-file-body { + display: none; +} + +.diff-file-box[data-folded="true"] .diff-file-header { + border-radius: var(--border-radius) !important; +} + +.ui.attached.header.diff-file-header.sticky-2nd-row { + position: sticky; + top: 44px; /* match .repository .diff-detail-box */ + z-index: 7; +} + +.diff-file-name { + flex: auto; + min-width: 100px; +} + +.diff-file-name .ui.label { + margin-left: 0 !important; +} + +.diff-stats-bar { + display: inline-block; + background-color: var(--color-red); + height: 12px; + width: 44px; +} + +.diff-stats-bar .diff-stats-add-bar { + background-color: var(--color-green); + height: 100%; +} + +.ui.form .right .ui.button { + margin-left: 0.25em; + margin-right: 0; +} + +.removed-code { + background: var(--color-diff-removed-word-bg); +} + +.added-code { + background: var(--color-diff-added-word-bg); +} + +.code-diff-unified .del-code, +.code-diff-unified .del-code td, +.code-diff-split .del-code .lines-num-old, +.code-diff-split .del-code .lines-escape-old, +.code-diff-split .del-code .lines-type-marker-old, +.code-diff-split .del-code .lines-code-old { + background: var(--color-diff-removed-row-bg); + border-color: var(--color-diff-removed-row-border); +} + +.code-diff-unified .add-code, +.code-diff-unified .add-code td, +.code-diff-split .add-code .lines-num-new, +.code-diff-split .add-code .lines-type-marker-new, +.code-diff-split .add-code .lines-escape-new, +.code-diff-split .add-code .lines-code-new, +.code-diff-split .del-code .add-code.lines-num-new, +.code-diff-split .del-code .add-code.lines-type-marker-new, +.code-diff-split .del-code .add-code.lines-escape-new, +.code-diff-split .del-code .add-code.lines-code-new { + background: var(--color-diff-added-row-bg); + border-color: var(--color-diff-added-row-border); +} + +.code-diff-split .del-code .lines-num-new, +.code-diff-split .del-code .lines-type-marker-new, +.code-diff-split .del-code .lines-code-new, +.code-diff-split .del-code .lines-escape-new, +.code-diff-split .add-code .lines-num-old, +.code-diff-split .add-code .lines-escape-old, +.code-diff-split .add-code .lines-type-marker-old, +.code-diff-split .add-code .lines-code-old { + background: var(--color-diff-inactive); +} + +.code-diff-split tbody tr td:nth-child(5), +.code-diff-split tbody tr td.add-comment-right { + border-left: 1px solid var(--color-secondary); +} + +.migrate-entries { + display: grid !important; + grid-template-columns: repeat(3, 1fr); + gap: 25px; + margin: 0 !important; +} + +@media (max-width: 767.98px) { + .migrate-entries { + grid-template-columns: repeat(1, 1fr); + } +} + +.migrate-entry { + transition: all 0.1s ease-in-out; + box-shadow: none !important; + border: 1px solid var(--color-secondary); + color: var(--color-text) !important; + width: auto !important; + margin: 0 !important; +} + +.migrate-entry:hover { + transform: scale(105%); + box-shadow: 0 0.5rem 1rem var(--color-shadow) !important; +} + +.migrate-entry .description { + text-wrap: balance; +} + +.commits-table .commits-table-right form { + display: flex; + align-items: center; + gap: 0.75em; + justify-content: center; + flex-wrap: wrap; +} + +@media (max-width: 767.98px) { + .repository.file.list #repo-files-table .entry, + .repository.file.list #repo-files-table .commit-list { + align-items: center; + display: flex !important; + padding-top: 4px; + padding-bottom: 4px; + } + .repository.file.list #repo-files-table .entry td.age, + .repository.file.list #repo-files-table .commit-list td.age, + .repository.file.list #repo-files-table .entry th.age, + .repository.file.list #repo-files-table .commit-list th.age { + margin-left: auto; + } + .repository.file.list #repo-files-table .entry td.message, + .repository.file.list #repo-files-table .commit-list td.message, + .repository.file.list #repo-files-table .entry span.commit-summary, + .repository.file.list #repo-files-table .commit-list tr span.commit-summary { + display: none !important; + } + .repository.view.issue .comment-list .timeline, + .repository.view.issue .comment-list .timeline-item { + margin-left: 0; + } + .repository.view.issue .comment-list .timeline::before { + left: 14px; + } + .repository.view.issue .comment-list .timeline .inline-timeline-avatar { + display: flex; + margin-bottom: auto; + margin-left: 6px; + margin-right: 2px; + } + .repository.view.issue .comment-list .timeline .comment-header { + padding-left: 4px; + } + .repository.view.issue .comment-list .timeline .comment-header::before, + .repository.view.issue .comment-list .timeline .comment-header::after { + content: unset; + } + /* Don't show the general avatar, we show the inline avatar on mobile. + * And don't show the role labels, there's no place for that. */ + .repository.view.issue .comment-list .timeline .timeline-avatar, + .repository.view.issue .comment-list .timeline .comment-header-right .role-label { + display: none; + } + .commit-header-row .ui.horizontal.list { + width: 100%; + overflow-x: auto; + margin-top: 2px; + } + .commit-header-row .ui.horizontal.list .item { + align-items: center; + display: flex; + } + .commit-header-row .author { + padding: 3px 0; + } + .commit-header h3 { + flex-basis: auto !important; + margin-bottom: 0.5rem !important; + } + .commits-table { + flex-direction: column; + } + .commits-table .commits-table-left { + align-items: initial !important; + margin-bottom: 6px; + } + .commits-table .commits-table-right form > div:nth-child(1) { + order: 1; /* the "commit search" input */ + } + .commits-table .commits-table-right form > div:nth-child(2) { + order: 3; /* the "search all" checkbox */ + } + .commits-table .commits-table-right form > button:nth-child(3) { + order: 2; /* the "search" button */ + } + .commit-table { + overflow-x: auto; + } + .commit-table td.sha, + .commit-table th.sha { + display: none !important; + } + .comment-header { + flex-wrap: wrap; + } + .comment-header .comment-header-left { + flex-wrap: wrap; + } + .comment-header .comment-header-right { + margin-left: auto; + } +} + +.branch-dropdown-button { + max-width: 340px; + vertical-align: bottom !important; +} + +@media (min-width: 768px) and (max-width: 991.98px) { + .branch-dropdown-button { + max-width: 185px; + } +} + +@media (max-width: 767.98px) { + .branch-dropdown-button { + max-width: 165px; + } +} + +.commit-status-header { + /* reset the default ".ui.attached.header" styles, to use the outer border */ + border: none !important; + /* add a bottom border to make sure the there is always a divider between the header and list when the list is scrolling */ + border-bottom: 1px solid var(--color-secondary) !important; + /* use negative margin to avoid the newly added border conflict with the list's top border */ + margin: 0 0 -1px !important; +} + +.commit-status-list { + max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */ + overflow-x: hidden; + transition: max-height .2s; +} + +.commit-status-item { + height: 40px; + padding: 0 10px; + display: flex; + gap: 8px; + align-items: center; +} + +.commit-status-item + .commit-status-item { + border-top: 1px solid var(--color-secondary); +} + +.commit-status-item .commit-status { + flex-shrink: 0; +} + +.commit-status-item .status-context { + color: var(--color-text); + flex: 1; +} + +.commit-status-item .status-details { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; +} + +@media (max-width: 767.98px) { + .commit-status-item .status-details { + flex-direction: column; + align-items: flex-end; + justify-content: center; + } +} + +.commit-status-item .status-details > span { + padding-right: 0.5em; /* To match the alignment with the "required" label */ +} + +.search-fullname { + color: var(--color-text-light-2); +} + +#issue-pins { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + margin-bottom: 8px; +} + +@media (max-width: 767.98px) { + #issue-pins { + grid-template-columns: repeat(1, 1fr); + } +} + +#cherry-pick-modal .scrolling.menu { + max-height: 200px; +} + +/* Branch tag selector - TODO: Merge this into the same selector on repo page */ +.repository .issue-content .issue-content-right .ui.grid .column.row { + padding: 10px; + padding-bottom: 0; +} +.repository .issue-content .issue-content-right .ui.grid .column.muted { + padding: 0; +} +.repository .issue-content .issue-content-right .ui.grid .column.muted .text { + display: inline-block; + padding: 10px; + width: 100%; + text-align: center; + border: 1px solid transparent; + border-bottom: none; +} +.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black { + border-color: var(--color-secondary); + background: var(--color-menu); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} +.repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu { + border-top: none; +} +.repository .issue-content .issue-content-right .branch-tag-divider { + margin-top: -1px; + border-top: 1px solid var(--color-secondary); +} +#issue-info-popup .emoji { + font-size: inherit; + line-height: inherit; +} + +#repo-activity-top-authors-chart { + height: 150px; /* Pre-allocate the height that will be taken up by the chart, to avoid the container 'jumping'. */ +} diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css new file mode 100644 index 0000000..9da5fe6 --- /dev/null +++ b/web_src/css/repo/header.css @@ -0,0 +1,68 @@ +.repository .secondary-nav { + padding-top: 12px; +} + +.repository .secondary-nav .fork-flag { + margin-top: 0.5rem; + font-size: 12px; +} + +.repo-header { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + gap: 0.5rem; + margin-bottom: 4px; +} + +.repo-header .flex-item { + padding: 0; +} + +.repo-header .flex-item-main { + flex: 0; + flex-basis: unset; +} + +.repo-header .flex-item-trailing { + flex-wrap: nowrap; +} + +.repo-buttons { + align-items: center; + display: flex; + flex-flow: row wrap; + word-break: keep-all; +} + +.repo-buttons .ui.labeled.button > .label:hover { + color: var(--color-primary-light-2); + background: var(--color-light); +} + +.repo-buttons button[disabled] ~ .label { + opacity: var(--opacity-disabled); + color: var(--color-text-dark); + background: var(--color-light-mimic-enabled) !important; +} + +.repo-buttons button[disabled] ~ .label:hover { + color: var(--color-primary-dark-1); +} + +.repo-buttons .ui.labeled.button.disabled { + pointer-events: inherit !important; +} + +.repo-buttons .ui.labeled.button.disabled > .label { + color: var(--color-text-dark); + background: var(--color-light-mimic-enabled) !important; +} + +.repo-buttons .ui.labeled.button.disabled > .label:hover { + color: var(--color-primary-dark-1); +} + +.repo-buttons .ui.labeled.button.disabled > .button { + pointer-events: none !important; +} diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css new file mode 100644 index 0000000..fb832bd --- /dev/null +++ b/web_src/css/repo/issue-card.css @@ -0,0 +1,40 @@ +.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); +} + +.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: 0.25em; +} + +.issue-card-assignees { + display: flex; + align-items: center; + gap: 0.25em; + justify-content: end; + flex-wrap: wrap; +} diff --git a/web_src/css/repo/issue-label.css b/web_src/css/repo/issue-label.css new file mode 100644 index 0000000..9b4b144 --- /dev/null +++ b/web_src/css/repo/issue-label.css @@ -0,0 +1,52 @@ +.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%; +} + +.issue-label-list .item .label-issues { + width: 33%; +} + +.issue-label-list .item .label-operation { + width: 33%; +} + +.issue-label-list .item a { + font-size: 12px; + padding-right: 10px; + color: var(--color-text-light); +} + +.issue-label-list .item.org-label { + opacity: 0.7; +} + +.label-operation .label { + height: fit-content; +} + +.archived-label-hint { + float: right; + margin: -12px; +} diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css new file mode 100644 index 0000000..9143b01 --- /dev/null +++ b/web_src/css/repo/issue-list.css @@ -0,0 +1,112 @@ +.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; +} + +.issue-list-new.button { + margin-right: 0; +} + +.list-header-issues { + min-height: var(--repo-header-issue-min-height); +} + +@media (max-width: 767.98px) { + .issue-list-navbar { + order: 0; + } + .issue-list-new { + order: 1; + margin-left: auto !important; + } + .issue-list-search { + order: 2 !important; + } + /* Don't use flex wrap on mobile as it takes too much vertical space. + * Only set overflow properties on mobile screens, because while the + * CSS trick to pop out from overflowing works on desktop screen, it + * has a massive flaw that it cannot inherited any max width from it's 'real' + * parent and therefor ends up taking more vertical space than is desired. + **/ + .issue-list-toolbar-right .filter.menu { + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; + } + + /* The following few CSS was created with care and built with the information + * from CSS-Tricks: https://css-tricks.com/popping-hidden-overflow/ + */ + + /* It's important that every element up to .issue-list-toolbar-right doesn't + * have a position set, such that element that wants to pop out will use + * .issue-list-toolbar-right as 'clip parent' and thereby avoids the + * overflow-y: hidden. + */ + .issue-list-toolbar-right .filter.menu > .dropdown.item { + position: initial; + } + /* It's important that this element and not an child has `position` set. + * Set width so that overflow-x knows where to stop overflowing. + */ + .issue-list-toolbar-right { + position: relative; + width: 100%; + } +} + +#issue-list .flex-item-body .branches { + display: inline-flex; +} + +#issue-list .flex-item-body .branches .branch { + background-color: var(--color-secondary-alpha-50); + border-radius: var(--border-radius); + padding: 0 4px; +} + +#issue-list .flex-item-body .branches .truncated-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; + display: inline-block; + vertical-align: top; +} + +#issue-list .flex-item-body .checklist progress { + margin-left: 2px; + width: 80px; + height: 6px; + display: inline-block; +} + +#issue-list .flex-item-body .checklist progress::-webkit-progress-value { + background-color: var(--color-secondary-dark-4); +} + +#issue-list .flex-item-body .checklist progress::-moz-progress-bar { + background-color: var(--color-secondary-dark-4); +} + +.archived-label-filter { + margin-left: 10px; + font-size: 12px; + display: flex !important; + margin-bottom: 8px; + min-width: fit-content; +} diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css new file mode 100644 index 0000000..d32899a --- /dev/null +++ b/web_src/css/repo/linebutton.css @@ -0,0 +1,19 @@ +.code-view .lines-num:hover, +.file-preview .lines-num:hover { + color: var(--color-text-dark) !important; +} + +.code-line-button { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + padding: 1px 4px !important; + position: absolute; + font-family: var(--fonts-regular); + left: 0; + transform: translateX(calc(-50% + 6px)); + cursor: pointer; +} + +.code-line-button:hover { + background: var(--color-secondary) !important; +} diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css new file mode 100644 index 0000000..304cfbc --- /dev/null +++ b/web_src/css/repo/list-header.css @@ -0,0 +1,58 @@ +.list-header { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .5rem; +} + +.list-header-sort { + display: flex; + align-items: center; + padding-left: 1rem; + padding-right: 1rem; +} + +.list-header-search { + display: flex; + flex: 1; + align-items: center; + flex-wrap: wrap; + justify-content: center; + min-width: 200px; /* to enable flexbox wrapping on mobile */ +} + +.list-header-search .input { + flex: 1; +} + +.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 */ +} + +.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; +} + +@media (max-width: 767.98px) { + .list-header-search { + order: 0; + } + .list-header-toggle { + order: 1; + } + .list-header-sort { + order: 2; + margin-left: auto; + } +} diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css new file mode 100644 index 0000000..9860813 --- /dev/null +++ b/web_src/css/repo/release-tag.css @@ -0,0 +1,121 @@ +.repository.releases #release-list { + margin-top: 12px; + padding-top: 12px; + padding-left: 0; +} + +.repository.releases #release-list .release-list-title { + font-size: 2rem; + font-weight: var(--font-weight-normal); + display: flex; + align-items: center; + gap: 0.25em; + margin: 0; +} + +.repository.releases #release-list > li .meta { + padding-top: 25px; + position: relative; + text-align: right; + display: flex; + flex-direction: column; + gap: 1em; +} + +.repository.releases #release-list > li .detail { + padding-bottom: 20px; + border-left: 1px solid var(--color-secondary); +} + +.repository.releases #release-list > li .detail .author img { + margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */ +} + +.repository.releases #release-list > li .detail .download .list { + padding-left: 0; +} + +.repository.releases #release-list > li .detail .download .list li { + background: var(--color-light); + border: 1px solid var(--color-secondary); + border-top: none; + display: flex; + justify-content: space-between; + padding: 8px; +} + +.repository.releases #release-list > li .detail .download .list :is(li:first-child, .start-gap + hr + li) { + border-top: 1px solid var(--color-secondary); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +.repository.releases #release-list > li .detail .download .list :is(li:last-child, .start-gap) { + border-bottom: 1px solid var(--color-secondary); + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +.repository.releases #release-list > li .detail .download .list hr { + height: 8px; + margin: 0; +} + +.repository.releases #release-list > li .detail .dot { + width: 10px; + height: 10px; + background-color: var(--color-secondary-dark-3); + position: absolute; + left: -5.5px; + top: 30px; + border-radius: var(--border-radius-full); + border: 2.5px solid var(--color-body); +} + +.repository.tags #tags-table .tag { + padding: 8px 12px; +} + +.repository.tags #tags-table .release-tag-name { + font-size: 18px; + font-weight: var(--font-weight-normal); +} + +.repository.new.release .target { + min-width: 500px; +} + +.repository.new.release .target #tag-name { + margin-top: -4px; +} + +.repository.new.release .target .at { + margin-left: -5px; + margin-right: 5px; +} + +.repository.new.release .target .selection.dropdown { + padding-top: 10px; + padding-bottom: 10px; +} + +@media (max-width: 438px) { + .repository.new.release .field button, + .repository.new.release .field input { + width: 100%; + } +} + +@media (max-width: 767.98px) { + .repository.new.release .field button { + margin-bottom: 1em; + } +} + +.repository.new.release .field .attachment_edit { + max-width: 48em; +} + +.repository.new.release .markup { + min-height: 240px; +} diff --git a/web_src/css/repo/wiki.css b/web_src/css/repo/wiki.css new file mode 100644 index 0000000..ba502d3 --- /dev/null +++ b/web_src/css/repo/wiki.css @@ -0,0 +1,72 @@ +.repository.wiki .wiki-pages-list tr:hover { + background-color: var(--color-hover); +} + +.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 .markup[data-tab-panel="markdown-previewer"] { + min-height: 340px; /* This height matches the markdown editor's height */ +} + +.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-sidebar .ui.message.unicode-escape-prompt p { + display: none; +} + +.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 .clone-panel #repo-clone-url { + width: 160px; + } + .repository.wiki .wiki-content-main.with-sidebar, + .repository.wiki .wiki-content-sidebar { + float: none; + width: 100%; + min-width: unset; + max-width: unset; + } +} diff --git a/web_src/css/review.css b/web_src/css/review.css new file mode 100644 index 0000000..a198edf --- /dev/null +++ b/web_src/css/review.css @@ -0,0 +1,297 @@ +.show-outdated, +.hide-outdated { + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; +} + +.ui.button.add-code-comment { + padding: 2px; + position: absolute; + margin-left: -22px; + 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::before { + visibility: visible; + content: "⚠️"; + font-family: var(--fonts-emoji); + color: var(--color-red); +} + +.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, +.repository .diff-file-box .code-diff .add-code-comment .add-comment-left, +.repository .diff-file-box .code-diff .add-code-comment .add-comment-right, +.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.add-comment-left.add-comment-right .ui.attached.header { + border: 1px solid var(--color-secondary); +} + +.add-comment-left.add-comment-right .ui.attached.header:not(.top) { + margin-bottom: 0.5em; +} + +.show-outdated:hover, +.hide-outdated:hover { + text-decoration: underline; +} + +.comment-code-cloud { + padding: 0.5rem 1rem !important; + position: relative; +} + +.code-diff .conversation-holder .comment-code-cloud { + max-width: 820px; +} + +@media (max-width: 767.98px) { + .comment-code-cloud { + max-width: none; + padding: 0.75rem !important; + } + .comment-code-cloud .code-comment-buttons { + margin: 0.5rem 0 0.25rem !important; + } + .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons { + width: 100%; + } + .comment-code-cloud .ui.buttons { + width: 100%; + margin: 0 !important; + } + .comment-code-cloud .ui.buttons .button { + flex: 1; + } +} + +.comment-code-cloud .comments .comment { + padding: 0; +} + +@media (max-width: 767.98px) { + .comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label { + display: none; + } + .comment-code-cloud .comments .comment .avatar { + width: auto; + float: none; + margin: 0 0.5rem 0 0; + flex-shrink: 0; + } + .comment-code-cloud .comments .comment .avatar ~ .content { + margin-left: 1em; + } + .comment-code-cloud .comments .comment img.avatar { + margin: 0 !important; + } + .comment-code-cloud .comments .comment .comment-content { + margin-left: 0 !important; + } + .comment-code-cloud .comments .comment .comment-container { + width: 100%; + } + .comment-code-cloud .comments .comment.code-comment { + padding: 0 0 0.5rem !important; + } +} + +.comment-code-cloud .attached.tab { + border: 0; + padding: 0; + margin: 0; +} + +.comment-code-cloud .attached.header { + padding: 1px 8px 1px 12px; +} + +.comment-code-cloud .attached.header .text { + margin: 0; +} + +.comment-code-cloud .right.menu.options .item { + padding: 0.85714286em 0.442857em; + cursor: pointer; +} + +.comment-code-cloud .ui.active.tab { + padding: 0.5em; +} + +.comment-code-cloud .ui.active.tab.markup { + padding: 1em; + min-height: 168px; +} + +.comment-code-cloud .ui.tab.markup { + font-size: 14px; +} + +.comment-code-cloud .ui.tabular.menu { + margin: 0.5em; +} + +.comment-code-cloud .editor-statusbar { + display: none; +} + +.comment-code-cloud .footer { + padding: 10px 0; +} + +.comment-code-cloud .footer .markup-info { + display: inline-block; + margin: 5px 0; + font-size: 12px; + color: var(--color-text-light); +} + +.comment-code-cloud .footer .ui.right.floated { + padding-top: 6px; +} + +.comment-code-cloud .footer::after { + clear: both; + content: ""; + display: block; +} + +@media (max-width: 767.98px) { + .comment-code-cloud .button { + width: 100%; + margin: 0 !important; + margin-bottom: 0.75rem !important; + } +} + +.diff-file-body .comment-form { + margin: 0 0 0 3em; +} + +.diff-file-body.binary { + padding: 5px 10px; +} + +.file-comment { + color: var(--color-text); +} + +.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; +} + +.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; + margin: -8px 0; /* just like other buttons in the diff box header */ + border-radius: var(--border-radius); + font-size: 0.857rem; /* just like .ui.tiny.button */ +} + +.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; +} diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css new file mode 100644 index 0000000..0f54779 --- /dev/null +++ b/web_src/css/shared/flex-list.css @@ -0,0 +1,108 @@ +.flex-list { + list-style: none; +} + +.flex-item { + display: flex; + gap: 8px; + align-items: flex-start; + padding: 10px 0; +} + +.flex-item .flex-item-leading { + display: flex; + align-items: flex-start; +} + +.flex-item .flex-item-main { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */ + min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ +} + +.flex-item-header { + display: flex; + gap: .25rem; + justify-content: space-between; + flex-wrap: wrap; +} + +.flex-item a:not(.label, .button):hover { + color: var(--color-primary) !important; +} + +.flex-item .flex-item-icon { + align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */ +} + +.flex-item .flex-item-icon + .flex-item-main { + align-self: baseline; +} + +.flex-item .flex-item-trailing { + display: flex; + gap: 0.5rem; + align-items: center; + flex-grow: 0; + flex-wrap: wrap; + justify-content: end; +} + +.flex-item .flex-item-title { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + gap: .25rem; + max-width: 100%; + color: var(--color-text); + font-size: 16px; + font-weight: var(--font-weight-semibold); + overflow-wrap: anywhere; + min-width: 0; +} + +.flex-item .flex-item-title a { + color: var(--color-text); + overflow-wrap: anywhere; +} + +.flex-item .flex-item-body { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem; + color: var(--color-text-light-2); + overflow-wrap: anywhere; +} + +.flex-item .flex-item-body a { + color: inherit; + overflow-wrap: anywhere; +} + +.flex-list > .flex-item + .flex-item { + border-top: 1px solid var(--color-secondary); +} + +/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `tw-hidden` siblings). +Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */ +.flex-list.flex-space-fitted > .flex-item:first-child, +.ui.segment > .flex-list > .flex-item:first-child { + padding-top: 0; +} + +.flex-list.flex-space-fitted > .flex-item:last-child, +.ui.segment > .flex-list > .flex-item:last-child { + padding-bottom: 0; +} + +/* If there is a divider besides the flex-list, some padding/margin are not needs */ +.divider + .flex-list > .flex-item:first-child { + padding-top: 0; +} + +.flex-list + .divider { + margin-top: 0; +} diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css new file mode 100644 index 0000000..91e6b5e --- /dev/null +++ b/web_src/css/shared/milestone.css @@ -0,0 +1,62 @@ +.milestone-list { + list-style: none; +} + +.milestone-card { + width: 100%; + padding-top: 10px; + padding-bottom: 10px; +} + +.milestone-card + .milestone-card { + border-top: 1px solid var(--color-secondary); +} + +.milestone-card .content { + padding-top: 10px; +} + +.milestone-header progress { + width: 200px; + height: 16px; +} + +.milestone-header { + display: flex; + align-items: center; + margin: 0; + flex-wrap: wrap; + justify-content: space-between; +} + +.milestone-toolbar { + padding-top: 5px; + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: space-between; +} + +.milestone-toolbar .group { + color: var(--color-text-light-2); + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.milestone-toolbar .group > a { + font-size: 15px; + color: var(--color-text-light-2); +} + +.milestone-toolbar .group > a:hover { + color: var(--color-text); +} + +@media (max-width: 767.98px) { + .milestone-card { + display: flex; + flex-direction: column; + gap: 8px; + } +} diff --git a/web_src/css/shared/repoorg.css b/web_src/css/shared/repoorg.css new file mode 100644 index 0000000..5573ae4 --- /dev/null +++ b/web_src/css/shared/repoorg.css @@ -0,0 +1,18 @@ +.repository .head .ui.header .text, +.organization .head .ui.header .text { + vertical-align: middle; + font-size: 1.6rem; + margin-left: 15px; +} + +.repository .ui.tabs.container, +.organization .ui.tabs.container { + margin-top: 14px; + margin-bottom: 0; +} + +.repository .head .ui.header .org-visibility .label, +.organization .head .ui.header .org-visibility .label { + margin-left: 5px; + margin-top: 5px; +} diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css new file mode 100644 index 0000000..33f8861 --- /dev/null +++ b/web_src/css/shared/settings.css @@ -0,0 +1,37 @@ +details.toggleable-item { + user-select: none !important; + padding: 0 !important; +} + +details.toggleable-item .menu { + margin: 4px 0 10px !important; +} + +details.toggleable-item summary { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.92857143em 1.14285714em; +} + +details.toggleable-item summary::marker, /* Chrome, Edge, Firefox */ +details.toggleable-item summary::-webkit-details-marker /* Safari */ { + display: none; +} + +details.toggleable-item summary::after { + transition: transform 0.25s ease; + content: ""; + width: 14px; + height: 14px; + mask-size: cover; + -webkit-mask-size: cover; + mask-image: var(--octicon-chevron-right); + -webkit-mask-image: var(--octicon-chevron-right); + background: currentcolor; + border: 1px solid var(--color-body); /* workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 */ +} + +details.toggleable-item[open] summary::after { + transform: rotate(90deg); +} diff --git a/web_src/css/standalone/devtest.css b/web_src/css/standalone/devtest.css new file mode 100644 index 0000000..a7b00e1 --- /dev/null +++ b/web_src/css/standalone/devtest.css @@ -0,0 +1,16 @@ +.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; +} + +h1, h2 { + margin: 0; + padding: 10px 0; +} diff --git a/web_src/css/standalone/swagger.css b/web_src/css/standalone/swagger.css new file mode 100644 index 0000000..c32e392 --- /dev/null +++ b/web_src/css/standalone/swagger.css @@ -0,0 +1,42 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + background: #fff; +} + +.swagger-back-link { + color: #1f69c0; + text-decoration: none; + position: absolute; + top: 1rem; + right: 1.5rem; + display: flex; + align-items: center; +} + +.swagger-back-link:hover { + text-decoration: underline; +} + +.swagger-back-link svg { + color: inherit; + fill: currentcolor; + margin-right: 0.5rem; +} + +@media (prefers-color-scheme: dark) { + body { + background: #1e1e1e; + } + .swagger-ui, .swagger-back-link { + filter: invert(88%) hue-rotate(180deg); + } + .swagger-ui .microlight { + filter: invert(100%) hue-rotate(180deg); + } +} diff --git a/web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css new file mode 100644 index 0000000..5f97fa3 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-auto-deuteranopia-protanopia.css @@ -0,0 +1,2 @@ +@import "theme-forgejo-light-deuteranopia-protanopia.css"; +@import "theme-forgejo-dark-deuteranopia-protanopia.css" (prefers-color-scheme: dark); diff --git a/web_src/css/themes/theme-forgejo-auto-tritanopia.css b/web_src/css/themes/theme-forgejo-auto-tritanopia.css new file mode 100644 index 0000000..256a703 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-auto-tritanopia.css @@ -0,0 +1,2 @@ +@import "theme-forgejo-light-tritanopia.css"; +@import "theme-forgejo-dark-tritanopia.css" (prefers-color-scheme: dark); diff --git a/web_src/css/themes/theme-forgejo-auto.css b/web_src/css/themes/theme-forgejo-auto.css new file mode 100644 index 0000000..ebf5994 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-auto.css @@ -0,0 +1,2 @@ +@import "theme-forgejo-light.css"; +@import "theme-forgejo-dark.css" (prefers-color-scheme: dark); diff --git a/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css new file mode 100644 index 0000000..b30cfd6 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css @@ -0,0 +1,11 @@ +@import "./theme-forgejo-dark.css"; + +:root { + --color-diff-removed-word-bg: #693f17; + --color-diff-removed-row-border: #693f17; + --color-diff-removed-row-bg: #221b17; + --color-diff-added-word-bg: #214d88; + --color-diff-added-row-border: #214d88; + --color-diff-added-row-bg: #13233a; + --color-code-bg: #0d1117; +} diff --git a/web_src/css/themes/theme-forgejo-dark-tritanopia.css b/web_src/css/themes/theme-forgejo-dark-tritanopia.css new file mode 100644 index 0000000..aefdaa1 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-dark-tritanopia.css @@ -0,0 +1,11 @@ +@import "./theme-forgejo-dark.css"; + +:root { + --color-diff-removed-word-bg: #792e2e; + --color-diff-removed-row-border: #792e2e; + --color-diff-removed-row-bg: #25171c; + --color-diff-added-word-bg: #214d88; + --color-diff-added-row-border: #214d88; + --color-diff-added-row-bg: #13233a; + --color-code-bg: #0d1117; +} diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css new file mode 100644 index 0000000..bc321f3 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -0,0 +1,357 @@ +@import "../chroma/dark.css"; +@import "../codemirror/dark.css"; +@import "../markup/dark.css"; + +:root { + --steel-900: #10161d; + --steel-850: #131a21; + --steel-800: #171e26; + --steel-750: #1d262f; + --steel-700: #242d38; + --steel-650: #2b3642; + --steel-600: #374351; + --steel-550: #445161; + --steel-500: #515f70; + --steel-450: #5f6e80; + --steel-400: #6d7d8f; + --steel-350: #7c8c9f; + --steel-300: #8c9caf; + --steel-250: #9dadc0; + --steel-200: #aebed0; + --steel-150: #c0cfe0; + --steel-100: #d2e0f0; + --is-dark-theme: true; + --color-primary: #fb923c; + --color-primary-contrast: #000; + --color-primary-dark-1: #fdba74; + --color-primary-dark-2: #fdba74; + --color-primary-dark-3: #fed7aa; + --color-primary-dark-4: #fed7aa; + --color-primary-dark-5: #ffedd5; + --color-primary-dark-6: #ffedd5; + --color-primary-dark-7: #fff7ed; + --color-primary-light-1: #f97316; + --color-primary-light-2: #ea580c; + --color-primary-light-3: #c2410c; + --color-primary-light-4: #9a3412; + --color-primary-light-5: #9a3412; + --color-primary-light-6: #7c2d12; + --color-primary-light-7: #7c2d12; + --color-primary-alpha-10: #ea580c19; + --color-primary-alpha-20: #ea580c33; + --color-primary-alpha-30: #ea580c4b; + --color-primary-alpha-40: #ea580c66; + --color-primary-alpha-50: #ea580c80; + --color-primary-alpha-60: #ea580c99; + --color-primary-alpha-70: #ea580cb3; + --color-primary-alpha-80: #ea580ccc; + --color-primary-alpha-90: #ea580ce1; + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-2); + --color-secondary: var(--steel-700); + --color-secondary-dark-1: var(--steel-550); + --color-secondary-dark-2: var(--steel-500); + --color-secondary-dark-3: var(--steel-450); + --color-secondary-dark-4: var(--steel-400); + --color-secondary-dark-5: var(--steel-350); + --color-secondary-dark-6: var(--steel-300); + --color-secondary-dark-7: var(--steel-250); + --color-secondary-dark-8: var(--steel-200); + --color-secondary-dark-9: var(--steel-150); + --color-secondary-dark-10: var(--steel-100); + --color-secondary-dark-11: var(--steel-100); + --color-secondary-dark-12: var(--steel-100); + --color-secondary-dark-13: var(--steel-100); + --color-secondary-light-1: var(--steel-650); + --color-secondary-light-2: var(--steel-700); + --color-secondary-light-3: var(--steel-750); + --color-secondary-light-4: var(--steel-800); + --color-secondary-alpha-10: #2b364219; + --color-secondary-alpha-20: #2b364233; + --color-secondary-alpha-30: #2b36424b; + --color-secondary-alpha-40: #2b364266; + --color-secondary-alpha-50: #2b364280; + --color-secondary-alpha-60: #2b364299; + --color-secondary-alpha-70: #2b3642b3; + --color-secondary-alpha-80: #2b3642cc; + --color-secondary-alpha-90: #2b3642e1; + --color-secondary-hover: var(--color-secondary-light-1); + --color-secondary-active: var(--color-secondary-light-2); + /* console colors - used for actions console and console files */ + --color-console-fg: #eeeff2; + --color-console-fg-subtle: #959cab; + --color-console-bg: #1f212b; + --color-console-border: #383c47; + --color-console-hover-bg: #ffffff16; + --color-console-active-bg: #454a57; + --color-console-menu-bg: #383c47; + --color-console-menu-border: #5c6374; + /* colors */ + --color-red: #b91c1c; + --color-orange: #ea580c; + --color-yellow: #ca8a04; + --color-olive: #91a313; + --color-green: #15803d; + --color-teal: #0d9488; + --color-blue: #2563eb; + --color-violet: #7c3aed; + --color-purple: #9333ea; + --color-pink: #db2777; + --color-brown: #a47252; + --color-grey: var(--steel-500); + --color-black: #111827; + /* light variants */ + --color-red-light: #dc2626; + --color-orange-light: #f97316; + --color-yellow-light: #eab308; + --color-olive-light: #839311; + --color-green-light: #16a34a; + --color-teal-light: #14b8a6; + --color-blue-light: #3b82f6; + --color-violet-light: #8b5cf6; + --color-purple-light: #a855f7; + --color-pink-light: #ec4899; + --color-brown-light: #94674a; + --color-grey-light: var(--steel-300); + --color-black-light: #1f2937; + /* dark 1 variants produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #a71919; + --color-orange-dark-1: #d34f0b; + --color-yellow-dark-1: #b67c04; + --color-olive-dark-1: #839311; + --color-green-dark-1: #137337; + --color-teal-dark-1: #0c857a; + --color-blue-dark-1: #1554e0; + --color-violet-dark-1: #6a1feb; + --color-purple-dark-1: #8519e7; + --color-pink-dark-1: #c7216b; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #0f1623; + /* dark 2 variants produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #941616; + --color-orange-dark-2: #bb460a; + --color-yellow-dark-2: #ca8a04; + --color-olive-dark-2: #91a313; + --color-green-dark-2: #15803d; + --color-teal-dark-2: #0a766d; + --color-blue-dark-2: #2563eb; + --color-violet-dark-2: #5c14d8; + --color-purple-dark-2: #7c3aed; + --color-pink-dark-2: #b11d5f; + --color-brown-dark-2: #a47252; + --color-black-dark-2: #111827; + /* ansi colors used for actions console and console files */ + --color-ansi-black: #1d2328; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #424851; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + /* other colors */ + --color-gold: #b1983b; + --color-white: #ffffff; + --color-pure-black: #000000; + --color-diff-removed-word-bg: #783030; + --color-diff-added-word-bg: #255c39; + --color-diff-removed-row-bg: #432121; + --color-diff-moved-row-bg: #825718; + --color-diff-added-row-bg: #1b3625; + --color-diff-removed-row-border: #783030; + --color-diff-moved-row-border: #a67a1d; + --color-diff-added-row-border: #255c39; + --color-diff-inactive: var(--steel-650); + --color-error-border: #783030; + --color-error-bg: #5f2525; + --color-error-bg-active: #783030; + --color-error-bg-hover: #783030; + --color-error-text: #fef2f2; + --color-success-border: #1f6e3c; + --color-success-bg: #1d462c; + --color-success-text: #aef0c2; + --color-warning-border: #a67a1d; + --color-warning-bg: #644821; + --color-warning-text: #fff388; + --color-info-border: #2e50b0; + --color-info-bg: #2a396b; + --color-info-text: var(--steel-100); + --color-red-badge: #b91c1c; + --color-red-badge-bg: #b91c1c22; + --color-red-badge-hover-bg: #b91c1c44; + --color-green-badge: #16a34a; + --color-green-badge-bg: #16a34a22; + --color-green-badge-hover-bg: #16a34a44; + --color-yellow-badge: #ca8a04; + --color-yellow-badge-bg: #ca8a0422; + --color-yellow-badge-hover-bg: #ca8a0444; + --color-orange-badge: #ea580c; + --color-orange-badge-bg: #ea580c22; + --color-orange-badge-hover-bg: #ea580c44; + --color-git: #f05133; + /* Icon colors (PR/Issue/...) */ + --color-icon-green: #3fb950; + --color-icon-red: #f85149; + --color-icon-purple: #aa76ff; + /* target-based colors */ + --color-body: var(--steel-800); + --color-box-header: var(--steel-700); + --color-box-body: var(--steel-750); + --color-box-body-highlight: var(--steel-650); + --color-text-dark: #fff; + --color-text: var(--steel-100); + --color-text-light: var(--steel-150); + --color-text-light-1: var(--steel-150); + --color-text-light-2: var(--steel-200); + --color-text-light-3: var(--steel-200); + --color-footer: var(--steel-900); + --color-timeline: var(--steel-650); + --color-input-text: var(--steel-100); + --color-input-background: var(--steel-650); + --color-input-toggle-background: var(--steel-650); + --color-input-border: var(--steel-550); + --color-input-border-hover: var(--steel-450); + --color-header-wrapper: var(--steel-850); + --color-header-wrapper-transparent: #242d3800; + --color-light: #00000028; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #ffffff28; + --color-hover: var(--steel-600); + --color-active: var(--steel-650); + --color-menu: var(--steel-700); + --color-card: var(--steel-700); + --color-markup-table-row: #ffffff06; + --color-markup-code-block: var(--steel-800); + --color-markup-code-inline: var(--steel-850); + --color-button: var(--steel-600); + --color-code-bg: var(--steel-750); + --color-shadow: #00000060; + --color-secondary-bg: var(--steel-700); + --color-text-focus: #fff; + --color-expand-button: #3c404d; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--steel-700); + --color-project-board-bg: var(--color-secondary-light-3); + --color-project-board-dark-label: var(--color-text-light-3); + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-30); + --color-reaction-hover-bg: var(--color-primary-alpha-40); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; + --color-nav-bg: var(--steel-900); + --color-nav-hover-bg: var(--steel-600); + --color-nav-text: var(--color-text); + --color-secondary-nav-bg: var(--color-body); + --color-label-text: #fff; + --color-label-bg: var(--steel-600); + --color-label-hover-bg: var(--steel-550); + --color-label-active-bg: var(--steel-500); + --color-label-bg-alt: var(--steel-550); + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-highlight-fg: var(--color-primary-light-4); + --color-highlight-bg: var(--color-primary-alpha-20); + --color-overlay-backdrop: #080808c0; + /* pattern colors for image diff */ + --checkerboard-color-1: #474747; + --checkerboard-color-2: #313131; + 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); +} +i.grey.icon.icon.icon.icon { + color: var(--steel-350) !important; +} +.ui.secondary.vertical.menu { + border-radius: 0.28571429rem !important; + overflow: hidden; +} +.ui.basic.primary.button.item { + background-color: var(--color-active) !important; + color: var(--color-text) !important; + box-shadow: none !important; +} +.ui.red.label.notification_count, +.ui.primary.label, +.ui.primary.labels .label { + background-color: var(--color-primary-light-3) !important; +} +.repository.view.issue .comment-list .code-comment + .code-comment { + margin: 1.25rem 0 !important; + padding-top: 1.25rem !important; + border-top-color: var(--steel-650) !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + background-color: var(--color-light) !important; +} +#review-box .review-comments-counter { + background-color: var(--color-shadow) !important; + color: var(--color-white) !important; + margin-left: 0.5em; +} +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { + color: var(--color-text-dark) !important; +} +.ui.basic.yellow.label.pending-label { + background: var(--color-light) !important; +} +::selection { + background: var(--steel-100) !important; + color: var(--color-pure-black) !important; +} +strong.attention-important, svg.attention-important { + color: var(--color-violet-light); +} +strong.attention-note, svg.attention-note { + color: var(--color-blue-light); +} +strong.attention-caution, svg.attention-caution { + color: var(--color-red-light); +} +.ui.basic.red.button { + background-color: var(--color-red); + color: var(--color-white); +} +.ui.basic.red.button:hover, +.ui.basic.red.button:focus { + background-color: var(--color-red-dark-1); + color: var(--color-white); +} +.ui.basic.red.button:active { + background-color: var(--color-red-dark-2); + color: var(--color-white); +} diff --git a/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css new file mode 100644 index 0000000..eb48b75 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css @@ -0,0 +1,11 @@ +@import "./theme-forgejo-light.css"; + +:root { + --color-diff-removed-word-bg: #ffdbb0; + --color-diff-removed-row-border: #ffdbb0; + --color-diff-removed-row-bg: #fffaf3; + --color-diff-added-word-bg: #b1dbff; + --color-diff-added-row-border: #b1dbff; + --color-diff-added-row-bg: #eef9ff; + --color-code-bg: #ffffff; +} diff --git a/web_src/css/themes/theme-forgejo-light-tritanopia.css b/web_src/css/themes/theme-forgejo-light-tritanopia.css new file mode 100644 index 0000000..208da55 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-light-tritanopia.css @@ -0,0 +1,11 @@ +@import "./theme-forgejo-light.css"; + +:root { + --color-diff-removed-word-bg: #ffd0ce; + --color-diff-removed-row-border: #ffd0ce; + --color-diff-removed-row-bg: #fff5f4; + --color-diff-added-word-bg: #b1dbff; + --color-diff-added-row-border: #eef9ff; + --color-diff-added-row-bg: #eef9ff; + --color-code-bg: #ffffff; +} diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css new file mode 100644 index 0000000..fa89cc2 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-light.css @@ -0,0 +1,325 @@ +@import "../chroma/light.css"; +@import "../codemirror/light.css"; +@import "../markup/light.css"; + +:root { + --steel-900: #10161d; + --steel-850: #131a21; + --steel-800: #171e26; + --steel-750: #1d262f; + --steel-700: #242d38; + --steel-650: #2b3642; + --steel-600: #374351; + --steel-550: #445161; + --steel-500: #515f70; + --steel-450: #5f6e80; + --steel-400: #6d7d8f; + --steel-350: #7c8c9f; + --steel-300: #8c9caf; + --steel-250: #9dadc0; + --steel-200: #aebed0; + --steel-150: #c0cfe0; + --steel-100: #d2e0f0; + --zinc-50: #fafafa; + --zinc-100: #f4f4f5; + --zinc-150: #ececee; + --zinc-200: #e4e4e7; + --zinc-250: #dcdce0; + --zinc-300: #d4d4d8; + --zinc-350: #babac1; + --zinc-400: #a1a1aa; + --zinc-450: #898992; + --zinc-500: #71717a; + --zinc-550: #61616a; + --zinc-600: #52525b; + --zinc-650: #484850; + --zinc-700: #3f3f46; + --zinc-750: #333338; + --zinc-800: #27272a; + --zinc-850: #1f1f23; + --zinc-900: #18181b; + --color-primary: #c2410c; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #c2410c; + --color-primary-dark-2: #9a3412; + --color-primary-dark-3: #9a3412; + --color-primary-dark-4: #7c2d12; + --color-primary-dark-5: #7c2d12; + --color-primary-dark-6: #7c2d12; + --color-primary-dark-7: #7c2d12; + --color-primary-light-1: #ea580c; + --color-primary-light-2: #f97316; + --color-primary-light-3: #fb923c; + --color-primary-light-4: #fdba74; + --color-primary-light-5: #fed7aa; + --color-primary-light-6: #ffedd5; + --color-primary-light-7: #fff7ed; + --color-primary-alpha-10: #c2410c19; + --color-primary-alpha-20: #c2410c33; + --color-primary-alpha-30: #c2410c4b; + --color-primary-alpha-40: #c2410c66; + --color-primary-alpha-50: #c2410c80; + --color-primary-alpha-60: #c2410c99; + --color-primary-alpha-70: #c2410cb3; + --color-primary-alpha-80: #c2410ccc; + --color-primary-alpha-90: #c2410ce1; + --color-primary-hover: var(--color-primary-dark-2); + --color-primary-active: var(--color-primary-dark-4); + --color-secondary: var(--zinc-200); + --color-secondary-dark-1: var(--zinc-200); + --color-secondary-dark-2: var(--zinc-300); + --color-secondary-dark-3: var(--zinc-300); + --color-secondary-dark-4: var(--zinc-400); + --color-secondary-dark-5: var(--zinc-400); + --color-secondary-dark-6: var(--zinc-500); + --color-secondary-dark-7: var(--zinc-500); + --color-secondary-dark-8: var(--zinc-600); + --color-secondary-dark-9: var(--zinc-600); + --color-secondary-dark-10: var(--zinc-700); + --color-secondary-dark-11: var(--zinc-700); + --color-secondary-dark-12: var(--zinc-800); + --color-secondary-dark-13: var(--zinc-800); + --color-secondary-light-1: var(--zinc-200); + --color-secondary-light-2: var(--zinc-100); + --color-secondary-light-3: var(--zinc-100); + --color-secondary-light-4: var(--zinc-50); + --color-secondary-alpha-10: #d4d4d819; + --color-secondary-alpha-20: #d4d4d833; + --color-secondary-alpha-30: #d4d4d84b; + --color-secondary-alpha-40: #d4d4d866; + --color-secondary-alpha-50: #d4d4d880; + --color-secondary-alpha-60: #d4d4d899; + --color-secondary-alpha-70: #d4d4d8b3; + --color-secondary-alpha-80: #d4d4d8cc; + --color-secondary-alpha-90: #d4d4d8e1; + --color-secondary-hover: var(--color-secondary-dark-2); + --color-secondary-active: var(--color-secondary-dark-4); + /* console colors - used for actions console and console files */ + --color-console-fg: #eeeff2; + --color-console-fg-subtle: #959cab; + --color-console-bg: #1f212b; + --color-console-border: #383c47; + --color-console-hover-bg: #ffffff16; + --color-console-active-bg: #454a57; + --color-console-menu-bg: #383c47; + --color-console-menu-border: #5c6374; + /* colors */ + --color-red: #dc2626; + --color-orange: #ea580c; + --color-yellow: #ca8a04; + --color-olive: #91a313; + --color-green: #15803d; + --color-teal: #0d9488; + --color-blue: #2563eb; + --color-violet: #7c3aed; + --color-purple: #9333ea; + --color-pink: #db2777; + --color-brown: #a47252; + --color-grey: #4b5563; + --color-black: #000000; + /* light variants */ + --color-red-light: #ef4444; + --color-orange-light: #f97316; + --color-yellow-light: #eab308; + --color-olive-light: #839311; + --color-green-light: #16a34a; + --color-teal-light: #14b8a6; + --color-blue-light: #3b82f6; + --color-violet-light: #8b5cf6; + --color-purple-light: #a855f7; + --color-pink-light: #ec4899; + --color-brown-light: #94674a; + --color-grey-light: #6b7280; + --color-black-light: #181818; + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #c82020; + --color-orange-dark-1: #d34f0b; + --color-yellow-dark-1: #b67c04; + --color-olive-dark-1: #839311; + --color-green-dark-1: #137337; + --color-teal-dark-1: #0c857a; + --color-blue-dark-1: #1554e0; + --color-violet-dark-1: #6a1feb; + --color-purple-dark-1: #8519e7; + --color-pink-dark-1: #c7216b; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #000000; + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #b21d1d; + --color-orange-dark-2: #bb460a; + --color-yellow-dark-2: #a26e03; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #116631; + --color-teal-dark-2: #0a766d; + --color-blue-dark-2: #124bc7; + --color-violet-dark-2: #5c14d8; + --color-purple-dark-2: #7715cf; + --color-pink-dark-2: #b11d5f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #000000; + /* ansi colors used for actions console and console files */ + --color-ansi-black: #1f2326; + --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); + /* other colors */ + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fca5a5; + --color-diff-added-word-bg: #86efac; + --color-diff-removed-row-bg: #fee2e2; + --color-diff-moved-row-bg: #fef9c3; + --color-diff-added-row-bg: #dcfce7; + --color-diff-removed-row-border: #fca5a5; + --color-diff-moved-row-border: #fde047; + --color-diff-added-row-border: #86efac; + --color-diff-inactive: var(--zinc-100); + --color-error-border: #fecaca; + --color-error-bg: #fee2e2; + --color-error-bg-active: #fca5a5; + --color-error-bg-hover: #fecaca; + --color-error-text: #7f1d1d; + --color-success-border: #bbf7d0; + --color-success-bg: #dcfce7; + --color-success-text: #14532d; + --color-warning-border: #fde047; + --color-warning-bg: #fef3c7; + --color-warning-text: #78350f; + --color-info-border: #bae6fd; + --color-info-bg: #e0f2fe; + --color-info-text: #0c4a6e; + --color-red-badge: #b91c1c; + --color-red-badge-bg: #b91c1c22; + --color-red-badge-hover-bg: #b91c1c44; + --color-green-badge: #16a34a; + --color-green-badge-bg: #16a34a22; + --color-green-badge-hover-bg: #16a34a44; + --color-yellow-badge: #ca8a04; + --color-yellow-badge-bg: #ca8a0422; + --color-yellow-badge-hover-bg: #ca8a0444; + --color-orange-badge: #ea580c; + --color-orange-badge-bg: #ea580c22; + --color-orange-badge-hover-bg: #ea580c44; + --color-git: #f05133; + /* Icon colors (PR/Issue/...) */ + --color-icon-green: var(--color-green-light); + --color-icon-red: var(--color-red-light); + --color-icon-purple: var(--color-purple-light); + /* target-based colors */ + --color-body: #fff; + --color-box-header: var(--zinc-100); + --color-box-body: var(--zinc-50); + --color-box-body-highlight: var(--zinc-200); + --color-text-dark: #000; + --color-text: var(--zinc-900); + --color-text-light: var(--zinc-700); + --color-text-light-1: var(--zinc-650); + --color-text-light-2: var(--zinc-600); + --color-text-light-3: var(--zinc-550); + --color-footer: var(--zinc-100); + --color-timeline: var(--zinc-200); + --color-input-text: var(--zinc-800); + --color-input-background: #fff; + --color-input-toggle-background: #fff; + --color-input-border: var(--zinc-300); + --color-input-border-hover: var(--zinc-400); + --color-header-wrapper: var(--zinc-50); + --color-header-wrapper-transparent: #d2e0f000; + --color-light: #ffffffcc; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #0000001d; + --color-hover: #e4e4e4aa; + --color-active: #d4d4d8aa; + --color-menu: var(--zinc-100); + --color-card: var(--zinc-50); + --color-markup-table-row: #ffffff06; + --color-markup-code-block: var(--zinc-150); + --color-markup-code-inline: var(--zinc-200); + --color-button: var(--zinc-150); + --color-code-bg: var(--zinc-50); + --color-shadow: #00000060; + --color-secondary-bg: var(--zinc-100); + --color-text-focus: #fff; + --color-expand-button: var(--zinc-200); + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--zinc-100); + --color-project-board-bg: var(--color-secondary-light-2); + --color-project-board-dark-label: var(--color-text-light-3); + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #0000000a; + --color-reaction-active-bg: var(--color-primary-alpha-20); + --color-reaction-hover-bg: var(--color-primary-alpha-30); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; + --color-nav-bg: var(--zinc-100); + --color-nav-hover-bg: var(--zinc-300); + --color-nav-text: var(--color-text); + --color-secondary-nav-bg: var(--color-body); + --color-label-text: var(--color-text); + --color-label-bg: #cacaca5b; + --color-label-hover-bg: #cacacaa0; + --color-label-active-bg: #cacacaff; + --color-label-bg-alt: #cacacaff; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-highlight-fg: var(--color-primary-light-4); + --color-highlight-bg: var(--color-primary-light-6); + --color-overlay-backdrop: #080808c0; + /* pattern colors for gradient */ + --checkerboard-color-1: #ffffff; + --checkerboard-color-2: #e5e5e5; + accent-color: var(--color-accent); + color-scheme: light; +} +.ui.secondary.vertical.menu { + border-radius: 0.28571429rem !important; + overflow: hidden; +} +.ui.basic.primary.button.item { + background-color: var(--color-active) !important; + color: var(--color-text) !important; + box-shadow: none !important; +} +.ui.red.label.notification_count, +.ui.primary.labels .label { + background-color: var(--color-primary-dark-1) !important; +} +.repository.view.issue .comment-list .code-comment + .code-comment { + margin: 1.25rem 0 !important; + padding-top: 1.25rem !important; + border-top-color: var(--zinc-250) !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + background-color: var(--color-shadow) !important; +} +#review-box .review-comments-counter { + background-color: var(--color-label-bg) !important; + margin-left: 0.5em; +} +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { + color: var(--color-text-dark) !important; +} +.ui.basic.yellow.label.pending-label { + background: var(--color-warning-bg) !important; + color: var(--color-warning-text) !important; + border-color: var(--color-yellow-light) !important; +} +::selection { + background: var(--steel-450) !important; + color: var(--color-white) !important; +} diff --git a/web_src/css/themes/theme-gitea-auto.css b/web_src/css/themes/theme-gitea-auto.css new file mode 100644 index 0000000..509889e --- /dev/null +++ b/web_src/css/themes/theme-gitea-auto.css @@ -0,0 +1,2 @@ +@import "./theme-gitea-light.css" (prefers-color-scheme: light); +@import "./theme-gitea-dark.css" (prefers-color-scheme: dark); diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css new file mode 100644 index 0000000..6ad6efe --- /dev/null +++ b/web_src/css/themes/theme-gitea-dark.css @@ -0,0 +1,271 @@ +@import "../chroma/dark.css"; +@import "../codemirror/dark.css"; +@import "../markup/dark.css"; + +: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: #3b444a; + --color-secondary-dark-1: #424b51; + --color-secondary-dark-2: #4a545b; + --color-secondary-dark-3: #59646c; + --color-secondary-dark-4: #6b7681; + --color-secondary-dark-5: #78858f; + --color-secondary-dark-6: #87929d; + --color-secondary-dark-7: #939ea9; + --color-secondary-dark-8: #a1acb4; + --color-secondary-dark-9: #aab3bc; + --color-secondary-dark-10: #b6bfc8; + --color-secondary-dark-11: #c2cbd3; + --color-secondary-dark-12: #ccd4dc; + --color-secondary-dark-13: #cfd7df; + --color-secondary-light-1: #2e353b; + --color-secondary-light-2: #2b353e; + --color-secondary-light-3: #1c2227; + --color-secondary-light-4: #161b1f; + --color-secondary-alpha-10: #3b444a19; + --color-secondary-alpha-20: #3b444a33; + --color-secondary-alpha-30: #3b444a4b; + --color-secondary-alpha-40: #3b444a66; + --color-secondary-alpha-50: #3b444a80; + --color-secondary-alpha-60: #3b444a99; + --color-secondary-alpha-70: #3b444ab3; + --color-secondary-alpha-80: #3b444acc; + --color-secondary-alpha-90: #3b444ae1; + --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: #f8f8f9; + --color-console-fg-subtle: #bec4c8; + --color-console-bg: #171b1e; + --color-console-border: #2e353b; + --color-console-hover-bg: #292d31; + --color-console-active-bg: #2e353b; + --color-console-menu-bg: #252b30; + --color-console-menu-border: #424b51; + /* 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: #1d2328; + /* 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: #424851; + /* 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: #292e38; + /* 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: #272930; + /* ansi colors used for actions console and console files */ + --color-ansi-black: #1d2328; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #424851; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + /* other colors */ + --color-grey: #384147; + --color-grey-light: #828f99; + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-row-bg: #3c2626; + --color-diff-moved-row-bg: #818044; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-moved-row-border: #bcca6f; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #22282d; + --color-error-border: #a04141; + --color-error-bg: #522; + --color-error-bg-active: #744; + --color-error-bg-hover: #633; + --color-error-text: #f9cbcb; + --color-success-border: #458a57; + --color-success-bg: #284034; + --color-success-text: #6cc664; + --color-warning-border: #bb9d00; + --color-warning-bg: #3a3a30; + --color-warning-text: #fbbd08; + --color-info-border: #306090; + --color-info-bg: #26354c; + --color-info-text: #38a8e8; + --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; + /* Icon colors (PR/Issue/...) */ + --color-icon-green: var(--color-green); + --color-icon-red: var(--color-red); + --color-icon-purple: var(--color-purple); + /* target-based colors */ + --color-body: #1c1f25; + --color-box-header: #1a1d1f; + --color-box-body: #14171a; + --color-box-body-highlight: #1c2227; + --color-text-dark: #f8f8f9; + --color-text: #d1d5d8; + --color-text-light: #bdc3c7; + --color-text-light-1: #a8afb5; + --color-text-light-2: #929ba2; + --color-text-light-3: #7c8790; + --color-footer: var(--color-nav-bg); + --color-timeline: #353c42; + --color-input-text: var(--color-text-dark); + --color-input-background: #151a1e; + --color-input-toggle-background: #2e353b; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-light: #00001728; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #e8e8ff28; + --color-hover: #e8e8ff19; + --color-active: #e8e8ff24; + --color-menu: #151a1e; + --color-card: #151a1e; + --color-markup-table-row: #e8e8ff0f; + --color-markup-code-block: #e8e8ff12; + --color-markup-code-inline: #e8e8ff28; + --color-button: #151a1e; + --color-code-bg: #14171a; + --color-shadow: #00001758; + --color-secondary-bg: #2f3138; + --color-expand-button: #2b353e; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-column-bg: var(--color-secondary-light-2); + --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #e8e8ff12; + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); + --color-tooltip-text: #fafafb; + --color-tooltip-bg: #000017f0; + --color-nav-bg: #16191c; + --color-nav-hover-bg: var(--color-secondary-light-1); + --color-nav-text: var(--color-text); + --color-secondary-nav-bg: #181c20; + --color-label-text: var(--color-text); + --color-label-bg: #73828e4b; + --color-label-hover-bg: #73828ea0; + --color-label-active-bg: #73828eff; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-highlight-fg: #87651e; + --color-highlight-bg: #352c1c; + --color-overlay-backdrop: #080808c0; + /* pattern colors for image diff */ + --checkerboard-color-1: #313131; + --checkerboard-color-2: #212121; + 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); +} diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css new file mode 100644 index 0000000..830b96f --- /dev/null +++ b/web_src/css/themes/theme-gitea-light.css @@ -0,0 +1,247 @@ +@import "../chroma/light.css"; +@import "../codemirror/light.css"; +@import "../markup/light.css"; + +: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: #f8f8f9; + --color-console-fg-subtle: #bec4c8; + --color-console-bg: #171b1e; + --color-console-border: #2e353b; + --color-console-hover-bg: #292d31; + --color-console-active-bg: #2e353b; + --color-console-menu-bg: #252b30; + --color-console-menu-border: #424b51; + /* 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: #191c1d; + /* 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: #525558; + /* 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: #16191c; + /* 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: #1f2326; + --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); + /* other colors */ + --color-grey: #697077; + --color-grey-light: #7c838a; + --color-gold: #a1882b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fdb8c0; + --color-diff-added-word-bg: #acf2bd; + --color-diff-removed-row-bg: #ffeef0; + --color-diff-moved-row-bg: #f1f8d1; + --color-diff-added-row-bg: #e6ffed; + --color-diff-removed-row-border: #f1c0c0; + --color-diff-moved-row-border: #d0e27f; + --color-diff-added-row-border: #e6ffed; + --color-diff-inactive: #f0f2f4; + --color-error-border: #e0b4b4; + --color-error-bg: #fff6f6; + --color-error-bg-active: #fbb; + --color-error-bg-hover: #fdd; + --color-error-text: #9f3a38; + --color-success-border: #a3c293; + --color-success-bg: #fcfff5; + --color-success-text: #2c662d; + --color-warning-border: #c9ba9b; + --color-warning-bg: #fffaf3; + --color-warning-text: #573a08; + --color-info-border: #a9d5de; + --color-info-bg: #f8ffff; + --color-info-text: #276f86; + --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; + /* Icon colors (PR/Issue/...) */ + --color-icon-green: var(--color-green); + --color-icon-red: var(--color-red); + --color-icon-purple: var(--color-purple); + /* 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); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-light: #00001706; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #0000171d; + --color-hover: #00001708; + --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-secondary-bg: #f2f5f8; + --color-expand-button: #cfe8fa; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-light-6); + --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: #000017f0; + --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: #fffbdd; + --color-overlay-backdrop: #080808c0; + /* pattern colors for gradient */ + --checkerboard-color-1: #ffffff; + --checkerboard-color-2: #e5e5e5; + accent-color: var(--color-accent); + color-scheme: light; +} diff --git a/web_src/css/user.css b/web_src/css/user.css new file mode 100644 index 0000000..16d431e --- /dev/null +++ b/web_src/css/user.css @@ -0,0 +1,149 @@ +.user.profile .ui.card .header { + display: block; + font-weight: var(--font-weight-semibold); + font-size: 1.3rem; + margin-top: -0.2rem; + line-height: 1.3rem; +} + +.user.profile .ui.card .profile-avatar-name { + border-top: none; + text-align: center; +} + +.user.profile .ui.card .extra.content { + padding: 0; +} + +.user.profile .ui.card .extra.content > ul { + margin: 0; + padding: 0; +} + +.user.profile .ui.card .extra.content > ul > li { + padding: 10px; + display: flex; + list-style: none; + align-items: center; + gap: 0.25em; +} + +.user.profile .ui.card .extra.content > ul > li:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.user.profile .ui.card .extra.content > ul > li .svg { + margin-left: 1px; + margin-right: 5px; +} + +.user.profile .ui.card .extra.content > ul > li.follow .ui.button, +.user.profile .ui.card .extra.content > ul > li.block .ui.button { + align-items: center; + display: flex; + justify-content: center; + width: 100%; +} + +.user.profile .ui.card #profile-avatar { + padding: 1rem 1rem 0.25rem; + justify-content: center; +} + +.user.profile .ui.card #profile-avatar img { + max-width: 100%; + height: auto; +} + +@media (max-width: 767.98px) { + .user.profile .ui.card #profile-avatar img { + width: 30vw; + } +} + +@media (max-width: 767.98px) { + .user.profile .ui.card { + width: 100%; + } +} + +.user.profile .ui.secondary.stackable.pointing.menu { + flex-wrap: wrap; +} + +.user.link-account:not(.icon) { + padding-top: 15px; + padding-bottom: 5px; +} + +.user.settings .iconFloat { + float: left; +} + +.user-orgs { + display: flex; + flex-flow: row wrap; + padding: 0; + margin: -3px !important; +} + +.user-orgs > li { + display: flex; + border-bottom: 0 !important; + padding: 3px !important; + max-width: 60px; +} + +.user-badges { + display: grid; + grid-template-columns: repeat(auto-fill, 64px); + gap: 2px; +} + +.user-badges img { + object-fit: contain; +} + +#readme_profile { + padding: 1.5em; + background: var(--color-box-body); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); +} + +#profile-avatar-card { + background: var(--color-box-body); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); +} + +#notification_table { + background: var(--color-box-body); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); +} + +.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; +} + +.notifications-item:hover .notifications-updated { + display: none; +} + +#pronouns-dropdown, #pronouns-custom { + width: 140px; +} |