0
0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-22 21:06:02 +01:00
gitea/web_src/css/base.css
Excellencedev 45809c8f54
feat: Add configurable permissions for Actions automatic tokens (#36173)
## Overview

This PR introduces granular permission controls for Gitea Actions tokens
(`GITEA_TOKEN`), aligning Gitea's security model with GitHub Actions
standards while maintaining compatibility with Gitea's unique repository
unit system.

It addresses the need for finer access control by allowing
administrators and repository owners to define default token
permissions, set maximum permission ceilings, and control
cross-repository access within organizations.

## Key Features

### 1. Granular Token Permissions

- **Standard Keyword Support**: Implements support for the
`permissions:` keyword in workflow and job YAML files (e.g., `contents:
read`, `issues: write`).
- **Permission Modes**:
- **Permissive**: Default write access for most units (backwards
compatible).
- **Restricted**: Default read-only access for `contents` and
`packages`, with no access to other units.
- ~~**Custom**: Allows defining specific default levels for each unit
type (Code, Issues, PRs, Packages, etc.).~~**EDIT removed UI was
confusing**
- **Clamping Logic**: Workflow-defined permissions are automatically
"clamped" by repository or organization-level maximum settings.
Workflows cannot escalate their own permissions beyond these limits.

### 2. Organization & Repository Settings

- **Settings UI**: Added new settings pages at both Organization and
Repository levels to manage Actions token defaults and maximums.
- **Inheritance**: Repositories can be configured to "Follow
organization-level configuration," simplifying management across large
organizations.
- **Cross-Repository Access**: Added a policy to control whether Actions
workflows can access other repositories or packages within the same
organization. This can be set to "None," "All," or restricted to a
"Selected" list of repositories.

### 3. Security Hardening

- **Fork Pull Request Protection**: Tokens for workflows triggered by
pull requests from forks are strictly enforced as read-only, regardless
of repository settings.
- ~~**Package Access**: Actions tokens can now only access packages
explicitly linked to a repository, with cross-repo access governed by
the organization's security policy.~~ **EDIT removed
https://github.com/go-gitea/gitea/pull/36173#issuecomment-3873675346**
- **Git Hook Integration**: Propagates Actions Task IDs to git hooks to
ensure that pushes performed by Actions tokens respect the specific
permissions granted at runtime.

### 4. Technical Implementation

- **Permission Persistence**: Parsed permissions are calculated at job
creation and stored in the `action_run_job` table. This ensures the
token's authority is deterministic throughout the job's lifecycle.
- **Parsing Priority**: Implemented a priority system in the YAML parser
where the broad `contents` scope is applied first, allowing granular
scopes like `code` or `releases` to override it for precise control.
- **Re-runs**: Permissions are re-evaluated during a job re-run to
incorporate any changes made to repository settings in the interim.

### How to Test

1. **Unit Tests**: Run `go test ./services/actions/...` and `go test
./models/repo/...` to verify parsing logic and permission clamping.
2. **Integration Tests**: Comprehensive tests have been added to
`tests/integration/actions_job_token_test.go` covering:
   - Permissive vs. Restricted mode behavior.
   - YAML `permissions:` keyword evaluation.
   - Organization cross-repo access policies.
- Resource access (Git, API, and Packages) under various permission
configs.
3. **Manual Verification**: 
   - Navigate to **Site/Org/Repo Settings -> Actions -> General**.
- Change "Default Token Permissions" and verify that newly triggered
workflows reflect these changes in their `GITEA_TOKEN` capabilities.
- Attempt a cross-repo API call from an Action and verify the Org policy
is enforced.

## Documentation

Added a PR in gitea's docs for this :
https://gitea.com/gitea/docs/pulls/318

## UI:

<img width="1366" height="619" alt="Screenshot 2026-01-24 174112"
src="https://github.com/user-attachments/assets/bfa29c9a-4ea5-4346-9410-16d491ef3d44"
/>

<img width="1360" height="621" alt="Screenshot 2026-01-24 174048"
src="https://github.com/user-attachments/assets/d5ec46c8-9a13-4874-a6a4-fb379936cef5"
/>

/fixes #24635
/claim #24635

---------

Signed-off-by: Excellencedev <ademiluyisuccessandexcellence@gmail.com>
Signed-off-by: ChristopherHX <christopher.homberger@web.de>
Signed-off-by: silverwind <me@silverwind.io>
Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: ChristopherHX <christopher.homberger@web.de>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Zettat123 <zettat123@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2026-03-21 15:39:47 -07:00

859 lines
19 KiB
CSS

:root {
/* fonts */
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
/* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
--fonts-emoji: -emoji-fallback;
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* line-height: 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>');
--select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
/* other variables */
--border-radius: 4px;
--border-radius-medium: 6px;
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
--opacity-disabled: 0.55;
--height-loading: 16rem;
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
--tab-size: 4;
--checkbox-size: 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 */
--page-space-bottom: 64px; /* space between last page element and footer */
--transition-hover-fade: opacity 0.2s ease; /* fade transition for elements that show on hover */
/* z-index */
--z-index-modal: 1001; /* modal dialog */
--z-index-toast: 1002; /* should be larger than modal */
--font-size-label: 12px; /* font size of individual labels */
--gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
--gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
--background-view-image: repeating-conic-gradient(var(--color-transparency-grid-dark) 0 25%, var(--color-transparency-grid-light) 0 50%) 0 0 / 18px 18px;
}
@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 */
}
/* there are many <code> blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers, for example: translation strings, etc,
so we need to make <code> have default global styles, ".markup code" has its own styles and these styles sometimes conflict.
TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line, then drop this ":not" patch */
code:where(:not(.code-inner)) {
padding: 1px 4px;
border-radius: var(--border-radius);
background-color: var(--color-markup-code-inline);
}
b,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--font-weight-semibold);
}
h1,
h2,
h3,
h4,
h5 {
line-height: 1.28571429;
margin: calc(2rem - 0.1428571428571429em) 0 1rem;
font-weight: var(--font-weight-medium);
padding: 0;
}
h1 {
min-height: 1rem;
font-size: 2rem;
}
h2 {
font-size: 1.71428571rem;
}
h3 {
font-size: 1.28571429rem;
}
h4 {
font-size: 1.07142857rem;
}
h5 {
font-size: 1rem;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
margin-top: 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
margin-bottom: 0;
}
p {
margin: 0 0 1em;
line-height: 1.4285;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
table {
border-collapse: collapse;
}
ul {
margin: 0.5em 0;
padding: 0 0 0 1.5em;
}
button {
cursor: pointer;
}
details summary {
cursor: pointer;
}
progress {
background: var(--color-secondary-dark-1);
border-radius: var(--border-radius);
border: none;
overflow: hidden;
}
progress::-webkit-progress-bar {
background: var(--color-secondary-dark-1);
}
progress::-webkit-progress-value {
background-color: var(--color-accent);
}
progress::-moz-progress-bar {
background-color: var(--color-accent);
}
* {
caret-color: var(--color-caret);
}
::file-selector-button {
border: 1px solid var(--color-light-border);
color: var(--color-text-light);
background: var(--color-light);
border-radius: var(--border-radius);
}
::file-selector-button:hover {
color: var(--color-text);
background: var(--color-hover);
}
::selection,
relative-time::part(root)::selection {
background: var(--color-primary-light-1);
color: var(--color-white);
}
::placeholder {
color: var(--color-placeholder-text) !important;
opacity: 1 !important;
}
.unselectable,
.btn,
.button,
.lines-num,
.lines-commit,
.lines-commit .blame-info,
.ellipsis-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.container-disabled {
opacity: var(--opacity-disabled);
pointer-events: none;
user-select: none;
}
a {
color: var(--color-primary);
cursor: pointer;
text-decoration-line: none;
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;
}
.native-select {
position: relative;
}
.native-select > select {
appearance: none; /* hide default triangle */
padding: 6px 26px 6px 10px;
border-radius: var(--border-radius);
}
/* ::before and ::after pseudo elements don't work on select elements,
so we need to put it on the parent wrapper element. */
.native-select::after {
position: absolute;
pointer-events: none; /* make the click event can pass through the svg to the select element */
top: 50%;
transform: translateY(-50%);
right: 5px;
content: "";
width: 16px;
height: 16px;
mask-size: cover;
-webkit-mask-size: cover;
mask-image: var(--select-arrows);
-webkit-mask-image: var(--select-arrows);
background: currentcolor;
}
.empty-placeholder {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
text-wrap: balance;
}
.inline-code-block {
padding: 2px 4px;
border-radius: .24em;
background-color: var(--color-label-bg);
}
.ui.menu .dropdown.item:hover,
.ui.menu a.item:hover,
.ui.menu details.item summary:hover {
color: var(--color-text);
background: var(--color-hover);
}
/* slightly more contrast for filters on issue list */
.ui.ui.menu .dropdown.item.disabled {
color: var(--color-text-light-2);
}
/* styles from removed fomantic transition module */
.hidden.transition {
visibility: hidden;
display: none;
}
.visible.transition {
display: block !important;
visibility: visible !important;
}
.ui.comments .comment .metadata {
color: var(--color-text-light-2);
}
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: var(--page-space-bottom);
}
.status-page-error {
margin-top: max(45vh - 90px, 80px);
margin-bottom: 80px;
}
.status-page-error-title {
font-size: 48px;
margin-bottom: 14px; /* some elements below may use tw-my-4 or tw-my-8, so use 14px as a minimal margin */
line-height: initial;
text-align: center;
font-weight: var(--font-weight-bold);
color: var(--color-text-light-2);
}
/* add margin below .secondary nav when it is the first child */
.page-content > :first-child.secondary-nav {
margin-bottom: 14px;
}
/* add margin to all pages when there is no .secondary.nav */
.page-content > :first-child:not(.secondary-nav) {
margin-top: var(--page-spacing);
}
/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
to compensate here */
.page-content > :first-child.ui.grid {
margin-top: calc(var(--page-spacing) - 1rem);
}
.ui .message.flash-message {
text-align: center;
}
.ui .header > i + .content {
padding-left: 0.75rem;
vertical-align: middle;
}
.ui .sha.label {
font-family: var(--fonts-monospace);
font-size: 13px;
font-weight: var(--font-weight-normal);
flex-shrink: 0;
}
.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 .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;
}
.user-menu > .item {
width: 100%;
border-radius: 0 !important;
}
.color-preview {
display: inline-block;
margin-left: 0.4em;
height: 0.67em;
width: 0.67em;
border-radius: var(--border-radius);
}
.attention-icon {
margin: 2px 6px 0 0;
}
blockquote.attention-note {
border-left-color: var(--color-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);
}
/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
.center {
text-align: center;
}
overflow-menu {
border-bottom: 1px solid var(--color-secondary) !important;
display: flex;
}
overflow-menu .overflow-menu-items {
display: flex;
flex: 1;
}
overflow-menu .overflow-menu-items .item {
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
}
overflow-menu .overflow-menu-items .item-flex-space {
flex: 1;
}
overflow-menu .overflow-menu-button {
background: transparent;
border: none;
color: inherit;
text-align: center;
width: 32px;
padding: 0;
}
/* match the styles of ".ui.secondary.pointing.menu .active.item" */
overflow-menu.ui.secondary.pointing.menu .overflow-menu-button.active {
padding: 2px 0 0;
border-bottom: 2px solid currentcolor;
background-color: transparent;
font-weight: var(--font-weight-medium);
}
overflow-menu .overflow-menu-button:hover {
color: var(--color-text-dark);
}
overflow-menu .ui.label {
margin-left: 7px !important; /* save some space */
}
.activity-bar-graph {
background-color: var(--color-primary);
color: var(--color-primary-contrast);
}
.activity-bar-graph-alt {
color: var(--color-primary-contrast);
}
.archived-icon {
color: var(--color-secondary-dark-2) !important;
}
.oauth2-authorize-application-box {
margin-top: 3em !important;
}
.lines-blame-btn {
padding: 0 0 0 5px;
display: flex;
justify-content: center;
}
.lines-num {
padding: 0 8px;
text-align: right !important;
color: var(--color-text-light-2);
width: 1%; /* this apparently needs to be a percentage so that code column stretches in diffs */
min-width: 72px;
white-space: nowrap;
}
.code-diff .lines-num {
min-width: 50px;
}
.lines-num span.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;
display: block;
}
.lines-type-marker {
vertical-align: top;
white-space: nowrap;
}
.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;
white-space: nowrap;
padding: 0;
}
.lines-code {
padding-left: 5px;
}
.code-inner {
font: 12px var(--fonts-monospace);
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: inherit; /* needed for inline code preview in markup */
}
.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: 6px;
}
tr.top-line-blame {
border-top: 1px solid var(--color-secondary);
}
tr.top-line-blame:first-of-type {
border-top: none; /* merge code lines belonging to the same commit into one block */
}
.lines-code .bottom-line,
.lines-commit .bottom-line {
border-bottom: 1px solid var(--color-secondary);
}
.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;
}
/* for "image" emojis like ":git:" ":gitea:" and ":github:" (see CUSTOM_EMOJIS config option) */
.emoji img {
border-width: 0 !important;
margin: 0 !important;
width: 1em !important;
height: 1em !important;
vertical-align: -0.15em;
}
.ui.tabular.menu .item,
.ui.secondary.pointing.menu .item {
padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
color: var(--color-text-light-2);
}
.ui.tabular.menu .item:hover,
.ui.secondary.pointing.menu a.item:hover {
color: var(--color-text);
}
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item,
.resize-for-semibold::before {
font-weight: var(--font-weight-semibold);
}
.resize-for-semibold::before {
content: attr(data-text);
visibility: hidden;
display: block;
height: 0;
}
.flash-error details code,
.flash-warning details code {
display: block;
text-align: left;
}
.ui.button.ellipsis-button {
padding: 0 5px 8px;
display: inline-block;
font-weight: var(--font-weight-semibold);
line-height: 8px;
vertical-align: middle;
min-height: 0;
}
.btn,
.ui.ui.dropdown,
.flex-text-inline,
.flex-text-inline > a,
.flex-text-inline > span {
display: inline-flex;
align-items: center;
gap: var(--gap-inline);
vertical-align: middle;
min-width: 0; /* make ellipsis work */
}
.ui.ui.labeled.button {
gap: 0;
align-items: stretch;
}
.ui.list.flex-items-block > .item,
.ui.vertical.menu.flex-items-block > .item,
.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
.flex-items-block > .item,
.flex-text-block {
display: flex;
align-items: center;
gap: var(--gap-block);
min-width: 0;
}
.flex-text-block > .ui.button,
.flex-text-inline > .ui.button {
margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
}
.svg.octicon-file-directory-fill,
.svg.octicon-file-directory-open-fill,
.svg.octicon-file-submodule {
color: var(--color-primary);
}
.svg.octicon-file,
.svg.octicon-file-symlink-file,
.svg.octicon-file-directory-symlink {
color: var(--color-secondary-dark-7);
}