peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: enforce RTL-friendly logical CSS properties with a linter (#12491)

Browse source 
Related issue: https://codeberg.org/forgejo/forgejo/issues/8581

This should be a nice first step towards RTL support. Future PRs can look at updating the tailwind classes, changing some of the icons (arrow left might need to become arrow right in some cases for example, and updating the template files)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
Cameron Radmore 2026-05-11 00:20:45 +02:00 • committed by Gusted
parent a8cae6d511
commit 6b75654cc2
74 changed files with 556 additions and 599 deletions
Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -116,6 +116,7 @@
"stylelint": "16.26.1", "stylelint": "16.26.1",
"stylelint-declaration-block-no-ignored-properties": "2.8.0", "stylelint-declaration-block-no-ignored-properties": "2.8.0",
"stylelint-declaration-strict-value": "1.11.1", "stylelint-declaration-strict-value": "1.11.1",
"stylelint-plugin-logical-css": "2.1.0",
"stylelint-value-no-unknown-custom-properties": "6.1.1", "stylelint-value-no-unknown-custom-properties": "6.1.1",
"svgo": "4.0.1", "svgo": "4.0.1",
"typescript": "5.9.3", "typescript": "5.9.3",
@ -14758,6 +14759,16 @@
"stylelint": ">=16 <=17" "stylelint": ">=16 <=17"
} }
}, },
"node_modules/stylelint-plugin-logical-css": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/stylelint-plugin-logical-css/-/stylelint-plugin-logical-css-2.1.0.tgz",
"integrity": "sha512-625OT+p5y2kkGBaRV7uTYscuH0m1UueMXh0WcidrXgwF2DOnKov+un9tvuyNG+SUC07W0ibcn+fZvQs/keskww==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/stylelint-value-no-unknown-custom-properties": { "node_modules/stylelint-value-no-unknown-custom-properties": {
"version": "6.1.1", "version": "6.1.1",
"resolved": "https://registry.npmjs.org/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-6.1.1.tgz", "resolved": "https://registry.npmjs.org/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-6.1.1.tgz",

1
package.json
View file

@ -115,6 +115,7 @@
"stylelint": "16.26.1", "stylelint": "16.26.1",
"stylelint-declaration-block-no-ignored-properties": "2.8.0", "stylelint-declaration-block-no-ignored-properties": "2.8.0",
"stylelint-declaration-strict-value": "1.11.1", "stylelint-declaration-strict-value": "1.11.1",
"stylelint-plugin-logical-css": "2.1.0",
"stylelint-value-no-unknown-custom-properties": "6.1.1", "stylelint-value-no-unknown-custom-properties": "6.1.1",
"svgo": "4.0.1", "svgo": "4.0.1",
"typescript": "5.9.3", "typescript": "5.9.3",

11
stylelint.config.js
View file

@ -11,6 +11,7 @@ export default {
plugins: [ plugins: [
'stylelint-declaration-strict-value', 'stylelint-declaration-strict-value',
'stylelint-declaration-block-no-ignored-properties', 'stylelint-declaration-block-no-ignored-properties',
'stylelint-plugin-logical-css',
'stylelint-value-no-unknown-custom-properties', 'stylelint-value-no-unknown-custom-properties',
'@stylistic/stylelint-plugin', '@stylistic/stylelint-plugin',
], ],
@ -173,6 +174,16 @@ export default {
'keyframe-selector-notation': null, 'keyframe-selector-notation': null,
'keyframes-name-pattern': null, 'keyframes-name-pattern': null,
'length-zero-no-unit': [true, {ignore: ['custom-properties']}, {ignoreFunctions: ['var']}], 'length-zero-no-unit': [true, {ignore: ['custom-properties']}, {ignoreFunctions: ['var']}],
'logical-css/require-logical-keywords': true,
'logical-css/require-logical-properties': [true, {
fix: true,
ignore: [ // ignore properties not related to RTL support
'height', 'min-height', 'max-height', 'width', 'min-width', 'max-width', 'top', 'bottom',
'margin-bottom', 'margin-top', 'padding-bottom', 'padding-top',
'border-top', 'border-top-style', 'border-top-width', 'border-bottom', 'border-bottom-style', 'border-bottom-width',
'scroll-margin-top', 'scroll-margin-bottom', 'scroll-padding-top', 'scroll-padding-bottom'],
severity: 'error',
}],
'max-nesting-depth': null, 'max-nesting-depth': null,
'media-feature-name-allowed-list': null, 'media-feature-name-allowed-list': null,
'media-feature-name-disallowed-list': null, 'media-feature-name-disallowed-list': null,

13
web_src/css/actions.css
View file

@ -3,11 +3,11 @@
} }
.runner-container .ui.table.segment { .runner-container .ui.table.segment {
overflow-x: auto; overflow-inline: auto;
} }
.runner-container .runner-ops > a { .runner-container .runner-ops > a {
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
.runner-container .runner-ops-delete { .runner-container .runner-ops-delete {
@ -124,7 +124,7 @@
flex: none; flex: none;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
width: 12rem; width: 12rem;
padding-right: 1.5rem; padding-inline-end: 1.5rem;
} }
.runner-container dl dd { .runner-container dl dd {
@ -178,12 +178,11 @@
} }
#workflow_dispatch_dropdown .menu { #workflow_dispatch_dropdown .menu {
max-height: 500px; max-height: 500px;
overflow-x: auto; overflow-inline: auto;
} }
@media (max-width: 640px) or (767.98px < width < 854px) { @media (max-width: 640px) or (767.98px < width < 854px) {
#workflow_dispatch_dropdown .menu { #workflow_dispatch_dropdown .menu {
left: auto; inset-inline: auto 0;
right: 0;
} }
} }
@ -210,7 +209,7 @@
.ui.vertical.menu.actions-menu .item .error { .ui.vertical.menu.actions-menu .item .error {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 1rem; margin-inline-start: 1rem;
} }
.ui.vertical.menu.actions-menu .item .label { .ui.vertical.menu.actions-menu .item .label {

4
web_src/css/admin.css
View file

@ -24,7 +24,7 @@
} }
.admin dl.admin-dl-horizontal dd { .admin dl.admin-dl-horizontal dd {
margin-left: auto; margin-inline-start: auto;
width: calc(100% - 300px - 1em); width: calc(100% - 300px - 1em);
min-width: 100px; min-width: 100px;
} }
@ -36,7 +36,7 @@
} }
.admin .ui.table.segment { .admin .ui.table.segment {
overflow-x: auto; /* if the screen width is small, many wide tables (eg: user list) need scroll bars */ overflow-inline: auto; /* if the screen width is small, many wide tables (eg: user list) need scroll bars */
} }
.admin .table th { .admin .table th {

77
web_src/css/base.css
View file

@ -74,7 +74,7 @@ body {
tab-size: var(--tab-size); tab-size: var(--tab-size);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: visible; overflow-inline: visible;
overflow-wrap: break-word; overflow-wrap: break-word;
text-autospace: normal; text-autospace: normal;
text-spacing-trim: normal; text-spacing-trim: normal;
@ -390,7 +390,7 @@ a.label,
} }
.ui.menu .item > .svg { .ui.menu .item > .svg {
margin-right: 0.35em; margin-inline-end: 0.35em;
} }
.ui.menu .dropdown.item:hover, .ui.menu .dropdown.item:hover,
@ -479,7 +479,7 @@ a.label,
margin-bottom: -0.25rem; margin-bottom: -0.25rem;
} }
.ui.dropdown .menu > .item > svg { .ui.dropdown .menu > .item > svg {
margin-right: .78rem; /* use the same margin as for <img> */ margin-inline-end: .78rem; /* use the same margin as for <img> */
} }
.ui.selection.dropdown .menu > .item { .ui.selection.dropdown .menu > .item {
@ -508,9 +508,8 @@ a.label,
/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */ /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
.ui.dropdown > .text > .img { .ui.dropdown > .text > .img {
margin-left: 0; margin-inline: 0 0.78571429rem;
float: none; float: none;
margin-right: 0.78571429rem;
} }
.ui.dropdown > .text > .description, .ui.dropdown > .text > .description,
@ -521,13 +520,11 @@ a.label,
/* replace item margin on secondary menu items with gap and remove both the /* 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 */ negative margins on the menu as well as margin on the items */
.ui.secondary.menu { .ui.secondary.menu {
margin-left: 0; margin-inline: 0;
margin-right: 0;
gap: .35714286em; gap: .35714286em;
} }
.ui.secondary.menu .item { .ui.secondary.menu .item {
margin-left: 0; margin-inline: 0;
margin-right: 0;
} }
.ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .dropdown.item:hover,
@ -769,15 +766,15 @@ img.ui.avatar,
} }
.ui .text.left { .ui .text.left {
text-align: left !important; text-align: start !important;
} }
.ui .text.right { .ui .text.right {
text-align: right !important; text-align: end !important;
} }
.ui .text.truncate { .ui .text.truncate {
overflow-x: hidden; overflow-inline: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
@ -788,14 +785,13 @@ img.ui.avatar,
} }
.ui .message > ul { .ui .message > ul {
margin-left: auto; margin-inline: auto;
margin-right: auto;
display: table; display: table;
text-align: left; text-align: start;
} }
.ui .header > i + .content { .ui .header > i + .content {
padding-left: 0.75rem; padding-inline-start: 0.75rem;
vertical-align: middle; vertical-align: middle;
} }
@ -808,7 +804,7 @@ img.ui.avatar,
} }
.ui .form .sub.field { .ui .form .sub.field {
margin-left: 25px; margin-inline-start: 25px;
} }
.ui .button.truncate { .ui .button.truncate {
@ -818,11 +814,11 @@ img.ui.avatar,
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: top; vertical-align: top;
white-space: nowrap; white-space: nowrap;
margin-right: 6px; margin-inline-end: 6px;
} }
.ui.status.buttons .svg { .ui.status.buttons .svg {
margin-right: 4px; margin-inline-end: 4px;
} }
.ui.inline.delete-button { .ui.inline.delete-button {
@ -902,14 +898,13 @@ img.ui.avatar,
} }
.ui.pagination.menu.narrow .item { .ui.pagination.menu.narrow .item {
padding-left: 8px; padding-inline: 8px;
padding-right: 8px;
min-width: 1em; min-width: 1em;
text-align: center; text-align: center;
} }
.ui.pagination.menu.narrow .item .icon { .ui.pagination.menu.narrow .item .icon {
margin-right: 0; margin-inline-end: 0;
} }
.ui.floating.dropdown .overflow.menu .scrolling.menu.items { .ui.floating.dropdown .overflow.menu .scrolling.menu.items {
@ -933,7 +928,7 @@ img.ui.avatar,
.color-preview { .color-preview {
display: inline-block; display: inline-block;
margin-left: 0.4em; margin-inline-start: 0.4em;
height: 0.67em; height: 0.67em;
width: 0.67em; width: 0.67em;
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -949,35 +944,35 @@ img.ui.avatar,
} }
blockquote.attention-note { blockquote.attention-note {
border-left-color: var(--color-blue-dark-1); border-inline-start-color: var(--color-blue-dark-1);
} }
strong.attention-note, svg.attention-note { strong.attention-note, svg.attention-note {
color: var(--color-blue-dark-1); color: var(--color-blue-dark-1);
} }
blockquote.attention-tip { blockquote.attention-tip {
border-left-color: var(--color-success-text); border-inline-start-color: var(--color-success-text);
} }
strong.attention-tip, svg.attention-tip { strong.attention-tip, svg.attention-tip {
color: var(--color-success-text); color: var(--color-success-text);
} }
blockquote.attention-important { blockquote.attention-important {
border-left-color: var(--color-violet-dark-1); border-inline-start-color: var(--color-violet-dark-1);
} }
strong.attention-important, svg.attention-important { strong.attention-important, svg.attention-important {
color: var(--color-violet-dark-1); color: var(--color-violet-dark-1);
} }
blockquote.attention-warning { blockquote.attention-warning {
border-left-color: var(--color-warning-text); border-inline-start-color: var(--color-warning-text);
} }
strong.attention-warning, svg.attention-warning { strong.attention-warning, svg.attention-warning {
color: var(--color-warning-text); color: var(--color-warning-text);
} }
blockquote.attention-caution { blockquote.attention-caution {
border-left-color: var(--color-red-dark-1); border-inline-start-color: var(--color-red-dark-1);
} }
strong.attention-caution, svg.attention-caution { strong.attention-caution, svg.attention-caution {
color: var(--color-red-dark-1); color: var(--color-red-dark-1);
@ -990,7 +985,7 @@ strong.attention-caution, svg.attention-caution {
overflow-menu { overflow-menu {
border-bottom: 1px solid var(--color-secondary) !important; border-bottom: 1px solid var(--color-secondary) !important;
display: flex; display: flex;
overflow-x: auto; overflow-inline: auto;
} }
overflow-menu .overflow-menu-items { overflow-menu .overflow-menu-items {
@ -1008,7 +1003,7 @@ overflow-menu .overflow-menu-items .item > .svg {
} }
overflow-menu .ui.label { overflow-menu .ui.label {
margin-left: 7px !important; /* save some space */ margin-inline-start: 7px !important; /* save some space */
} }
.activity-bar-graph { .activity-bar-graph {
@ -1058,7 +1053,7 @@ overflow-menu .ui.label {
.lines-num { .lines-num {
padding: 0 8px; padding: 0 8px;
text-align: right !important; text-align: end !important;
color: var(--color-text-light-2); color: var(--color-text-light-2);
width: 1%; width: 1%;
font-family: var(--fonts-monospace); font-family: var(--fonts-monospace);
@ -1105,7 +1100,7 @@ overflow-menu .ui.label {
.lines-code ol li { .lines-code ol li {
display: block; display: block;
width: calc(100% - 1ch); width: calc(100% - 1ch);
padding-left: 1ch; padding-inline-start: 1ch;
} }
.code-inner { .code-inner {
@ -1156,7 +1151,7 @@ overflow-menu .ui.label {
.blame-avatar { .blame-avatar {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 4px; margin-inline-end: 4px;
} }
.top-line-blame { .top-line-blame {
@ -1201,7 +1196,7 @@ table th[data-sortt-desc]:hover {
table th[data-sortt-asc] .svg, table th[data-sortt-asc] .svg,
table th[data-sortt-desc] .svg { table th[data-sortt-desc] .svg {
margin-left: 0.25rem; margin-inline-start: 0.25rem;
} }
.ui.dropdown .menu .item { .ui.dropdown .menu .item {
@ -1291,7 +1286,7 @@ table th[data-sortt-desc] .svg {
.flash-error details code, .flash-error details code,
.flash-warning details code { .flash-warning details code {
display: block; display: block;
text-align: left; text-align: start;
} }
.truncated-item-container { .truncated-item-container {
@ -1320,7 +1315,7 @@ table th[data-sortt-desc] .svg {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-left: 1em; margin-inline-start: 1em;
} }
.precolors .color { .precolors .color {
@ -1341,13 +1336,13 @@ table th[data-sortt-desc] .svg {
.ui.dropdown.mini.button, .ui.dropdown.mini.button,
.ui.dropdown.tiny.button { .ui.dropdown.tiny.button {
padding-right: 20px; padding-inline-end: 20px;
} }
.ui.dropdown.button { .ui.dropdown.button {
padding-right: 22px; padding-inline-end: 22px;
} }
.ui.dropdown.large.button { .ui.dropdown.large.button {
padding-right: 24px; padding-inline-end: 24px;
} }
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */ /* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
@ -1370,11 +1365,11 @@ table th[data-sortt-desc] .svg {
} }
.ui.ui.dropdown > .dropdown.icon { .ui.ui.dropdown > .dropdown.icon {
right: 0.5em; inset-inline-end: 0.5em;
} }
.ui.ui.dropdown > .remove.icon { .ui.ui.dropdown > .remove.icon {
right: 2em; inset-inline-end: 2em;
} }
.btn, .btn,

4
web_src/css/chroma/base.css
View file

@ -25,13 +25,13 @@
/* LineNumbersTable */ /* LineNumbersTable */
.chroma .lnt { .chroma .lnt {
margin-right: 0.4em; margin-inline-end: 0.4em;
padding: 0 0.4em; padding: 0 0.4em;
} }
/* LineNumbers */ /* LineNumbers */
.chroma .ln { .chroma .ln {
margin-right: 0.4em; margin-inline-end: 0.4em;
padding: 0 0.4em; padding: 0 0.4em;
} }

2
web_src/css/codemirror/base.css
View file

@ -15,7 +15,7 @@
} }
.EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused { .EasyMDEContainer .CodeMirror.CodeMirror-fullscreen.CodeMirror-focused {
border-right: 1px solid var(--color-primary) !important; border-inline-end: 1px solid var(--color-primary) !important;
} }
.CodeMirror-cursor { .CodeMirror-cursor {

13
web_src/css/dashboard.css
View file

@ -17,7 +17,7 @@
.dashboard.feeds .filter.menu .item, .dashboard.feeds .filter.menu .item,
.dashboard.issues .filter.menu .item { .dashboard.issues .filter.menu .item {
text-align: left; text-align: start;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -32,15 +32,14 @@
.dashboard.feeds .filter.menu .jump.item, .dashboard.feeds .filter.menu .jump.item,
.dashboard.issues .filter.menu .jump.item { .dashboard.issues .filter.menu .jump.item {
margin: 1px; margin: 1px;
padding-right: 0; padding-inline-end: 0;
} }
.dashboard.feeds .filter.menu .menu, .dashboard.feeds .filter.menu .menu,
.dashboard.issues .filter.menu .menu { .dashboard.issues .filter.menu .menu {
max-height: 300px; max-height: 300px;
overflow-x: auto; overflow-inline: auto;
right: 0 !important; inset-inline: auto 0 !important;
left: auto !important;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
@ -64,11 +63,11 @@
} }
.dashboard .secondary-nav .right.menu div.item { .dashboard .secondary-nav .right.menu div.item {
padding-left: 0.5rem; padding-inline-start: 0.5rem;
} }
.dashboard .secondary-nav .org-visibility .label { .dashboard .secondary-nav .org-visibility .label {
margin-left: 5px; margin-inline-start: 5px;
} }
.dashboard .secondary-nav .ui.dropdown { .dashboard .secondary-nav .ui.dropdown {

6
web_src/css/editor/combomarkdowneditor.css
View file

@ -47,7 +47,7 @@
display: block; display: block;
width: 100%; width: 100%;
max-height: calc(100vh - var(--min-height-textarea)); max-height: calc(100vh - var(--min-height-textarea));
resize: vertical; resize: block;
} }
.combo-markdown-editor .CodeMirror-scroll { .combo-markdown-editor .CodeMirror-scroll {
@ -127,7 +127,7 @@ text-expander .suggestions li:hover {
text-expander .suggestions .fullname { text-expander .suggestions .fullname {
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
margin-left: 4px; margin-inline-start: 4px;
color: var(--color-text-light-1); color: var(--color-text-light-1);
} }
@ -140,5 +140,5 @@ text-expander .suggestions li[aria-selected="true"] span {
text-expander .suggestions img { text-expander .suggestions img {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 8px; margin-inline-end: 8px;
} }

8
web_src/css/editor/fileeditor.css
View file

@ -7,8 +7,8 @@
} }
.repository.file.editor .tab[data-tab="write"] .CodeMirror { .repository.file.editor .tab[data-tab="write"] .CodeMirror {
border-left: 0; border-inline-start: 0;
border-right: 0; border-inline-end: 0;
border-bottom: 0; border-bottom: 0;
} }
@ -36,8 +36,8 @@
} }
.editor-toolbar i.separator { .editor-toolbar i.separator {
border-left: none; border-inline-start: none;
border-right-color: var(--color-secondary); border-inline-end-color: var(--color-secondary);
} }
.editor-toolbar button:hover { .editor-toolbar button:hover {

4
web_src/css/explore.css
View file

@ -5,7 +5,7 @@
.explore .secondary-nav .svg { .explore .secondary-nav .svg {
width: 16px; width: 16px;
text-align: center; text-align: center;
margin-right: 5px; margin-inline-end: 5px;
} }
.ui.repository.branches .info { .ui.repository.branches .info {
@ -27,5 +27,5 @@
/* fix alignment of PR popup in branches table */ /* fix alignment of PR popup in branches table */
.ui.repository.branches table .ui.popup { .ui.repository.branches table .ui.popup {
text-align: left; text-align: start;
} }

4
web_src/css/features/codeeditor.css
View file

@ -16,7 +16,7 @@
#editor-bar { #editor-bar {
gap: var(--button-spacing); gap: var(--button-spacing);
.switch { .switch {
overflow-x: scroll; overflow-inline: scroll;
} }
} }
} }
@ -24,7 +24,7 @@
.cm-panel.fj-search { .cm-panel.fj-search {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
background-color: var(--color-body); background-color: var(--color-body);
box-shadow: 0 6px 18px var(--color-shadow); box-shadow: 0 6px 18px var(--color-shadow);
border-radius: 0.3rem; border-radius: 0.3rem;

4
web_src/css/features/colorpicker.css
View file

@ -6,14 +6,14 @@
.js-color-picker-input input { .js-color-picker-input input {
padding-top: 8px !important; padding-top: 8px !important;
padding-bottom: 8px !important; padding-bottom: 8px !important;
padding-left: 32px !important; padding-inline-start: 32px !important;
} }
.js-color-picker-input .preview-square { .js-color-picker-input .preview-square {
position: absolute; position: absolute;
aspect-ratio: 1; aspect-ratio: 1;
height: 16px; height: 16px;
left: 10px; inset-inline-start: 10px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: 2px; border-radius: 2px;

10
web_src/css/features/gitgraph.css
View file

@ -1,5 +1,5 @@
#git-graph-content { #git-graph-content {
overflow-x: auto; overflow-inline: auto;
width: 100%; width: 100%;
min-height: 250px; min-height: 250px;
} }
@ -25,7 +25,7 @@
} }
#git-graph-heading-left { #git-graph-heading-left {
margin-right: 1rem; margin-inline-end: 1rem;
} }
#git-graph-heading h2 { #git-graph-heading h2 {
@ -102,8 +102,8 @@
#git-graph-container #rel-container { #git-graph-container #rel-container {
max-width: 30%; max-width: 30%;
overflow-x: auto; overflow-inline: auto;
float: left; float: inline-start;
} }
#git-graph-container #rev-list { #git-graph-container #rev-list {
@ -117,7 +117,7 @@
#git-graph-container #rev-list .commit-refs .button { #git-graph-container #rev-list .commit-refs .button {
padding: 2px 4px; padding: 2px 4px;
margin-right: 0.25em; margin-inline-end: 0.25em;
display: inline-block; display: inline-block;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;

6
web_src/css/features/heatmap.css
View file

@ -40,19 +40,19 @@
font-size: 11px; font-size: 11px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 25px; inset-inline-start: 25px;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
#user-heatmap .total-contributions { #user-heatmap .total-contributions {
left: 21px; inset-inline-start: 21px;
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
#user-heatmap .total-contributions { #user-heatmap .total-contributions {
font-size: 10px; font-size: 10px;
left: 17px; inset-inline-start: 17px;
bottom: -4px; bottom: -4px;
} }
} }

10
web_src/css/features/imagediff.css
View file

@ -54,28 +54,28 @@
.image-diff-container .diff-swipe .swipe-frame .swipe-container { .image-diff-container .diff-swipe .swipe-frame .swipe-container {
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
display: block; display: block;
border-left: 2px solid var(--color-secondary-dark-8); border-inline-start: 2px solid var(--color-secondary-dark-8);
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container { .image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container {
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
} }
.image-diff-container .diff-swipe .swipe-frame .swipe-bar { .image-diff-container .diff-swipe .swipe-frame .swipe-bar {
position: absolute; position: absolute;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
} }
.image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle { .image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
background: var(--color-secondary-dark-8); background: var(--color-secondary-dark-8);
left: -5px; inset-inline-start: -5px;
height: 12px; height: 12px;
width: 12px; width: 12px;
position: absolute; position: absolute;

14
web_src/css/features/projects.css
View file

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-x: auto; overflow-inline: auto;
margin: 0 0.5em; margin: 0 0.5em;
} }
@ -15,7 +15,7 @@
width: 320px; width: 320px;
height: calc(100vh - 450px); height: calc(100vh - 450px);
min-height: 60vh; min-height: 60vh;
overflow-y: scroll; overflow-block: scroll;
flex: 0 0 auto; flex: 0 0 auto;
overflow: visible; overflow: visible;
display: flex; display: flex;
@ -57,7 +57,7 @@
padding: 0 !important; padding: 0 !important;
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
flex-direction: column; flex-direction: column;
overflow-x: auto; overflow-inline: auto;
gap: .25rem; gap: .25rem;
} }
@ -68,11 +68,11 @@
} }
.project-column:first-child { .project-column:first-child {
margin-left: auto !important; margin-inline-start: auto !important;
} }
.project-column:last-child { .project-column:last-child {
margin-right: auto !important; margin-inline-end: auto !important;
} }
.card-attachment-images { .card-attachment-images {
@ -87,8 +87,8 @@
display: inline-block; display: inline-block;
max-height: 50px; max-height: 50px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-align: left; text-align: start;
margin-right: 2px; margin-inline-end: 2px;
aspect-ratio: 1; aspect-ratio: 1;
} }

4
web_src/css/features/tribute.css
View file

@ -17,7 +17,7 @@
.tribute-container li span.fullname { .tribute-container li span.fullname {
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
font-size: 0.8rem; font-size: 0.8rem;
margin-left: 3px; margin-inline-start: 3px;
} }
.tribute-container li.highlight, .tribute-container li.highlight,
@ -33,7 +33,7 @@
.tribute-item .emoji, .tribute-item .emoji,
.tribute-item img[src*="/avatar/"] { .tribute-item img[src*="/avatar/"] {
margin-right: 0.5rem; margin-inline-end: 0.5rem;
} }
.tribute-container img { .tribute-container img {

32
web_src/css/form.css
View file

@ -47,7 +47,7 @@ fieldset label + .ui.dropdown {
fieldset label > input[type="checkbox"], fieldset label > input[type="checkbox"],
fieldset label > input[type="radio"] { fieldset label > input[type="radio"] {
margin-right: 0.75em; margin-inline-end: 0.75em;
margin-top: 0 !important; margin-top: 0 !important;
vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */ vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */
} }
@ -298,7 +298,7 @@ input:-webkit-autofill:active,
.h-captcha-style { .h-captcha-style {
margin: 0 auto !important; margin: 0 auto !important;
width: 304px; width: 304px;
padding-left: 30px; padding-inline-start: 30px;
} }
.g-recaptcha-style iframe, .g-recaptcha-style iframe,
.h-captcha-style iframe { .h-captcha-style iframe {
@ -351,10 +351,10 @@ input:-webkit-autofill:active,
.user.link-account form .header, .user.link-account form .header,
.user.signin form .header, .user.signin form .header,
.user.signup form .header { .user.signup form .header {
padding-left: 280px !important; padding-inline-start: 280px !important;
} }
.user.activate form .inline.field > label { .user.activate form .inline.field > label {
text-align: right; text-align: end;
width: 250px !important; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
@ -364,7 +364,7 @@ input:-webkit-autofill:active,
.user.link-account form .help, .user.link-account form .help,
.user.signin form .help, .user.signin form .help,
.user.signup form .help { .user.signup form .help {
margin-left: 265px !important; margin-inline-start: 265px !important;
} }
.user.activate form .optional .title, .user.activate form .optional .title,
.user.forgot.password form .optional .title, .user.forgot.password form .optional .title,
@ -372,7 +372,7 @@ input:-webkit-autofill:active,
.user.link-account form .optional .title, .user.link-account form .optional .title,
.user.signin form .optional .title, .user.signin form .optional .title,
.user.signup form .optional .title { .user.signup form .optional .title {
margin-left: 250px !important; margin-inline-start: 250px !important;
} }
} }
@ -383,7 +383,7 @@ input:-webkit-autofill:active,
.user.link-account form .optional .title, .user.link-account form .optional .title,
.user.signin form .optional .title, .user.signin form .optional .title,
.user.signup form .optional .title { .user.signup form .optional .title {
margin-left: 15px; margin-inline-start: 15px;
} }
.user.activate form .inline.field > label, .user.activate form .inline.field > label,
.user.forgot.password form .inline.field > label, .user.forgot.password form .inline.field > label,
@ -401,7 +401,7 @@ input:-webkit-autofill:active,
.user.link-account form .header, .user.link-account form .header,
.user.signin form .header, .user.signin form .header,
.user.signup form .header { .user.signup form .header {
padding-left: 0 !important; padding-inline-start: 0 !important;
text-align: center; text-align: center;
} }
@ -474,22 +474,22 @@ input:-webkit-autofill:active,
.repository.new.repo form .header, .repository.new.repo form .header,
.repository.new.migrate form .header, .repository.new.migrate form .header,
.repository.new.fork form .header { .repository.new.fork form .header {
padding-left: 280px !important; padding-inline-start: 280px !important;
} }
.repository.new.migrate form .inline.field > label, .repository.new.migrate form .inline.field > label,
.repository.new.fork form .inline.field > label { .repository.new.fork form .inline.field > label {
text-align: right; text-align: end;
width: 250px !important; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.repository.new.migrate form .help, .repository.new.migrate form .help,
.repository.new.fork form .help { .repository.new.fork form .help {
margin-left: 265px !important; margin-inline-start: 265px !important;
} }
.repository.new.repo form .optional .title, .repository.new.repo form .optional .title,
.repository.new.migrate form .optional .title, .repository.new.migrate form .optional .title,
.repository.new.fork form .optional .title { .repository.new.fork form .optional .title {
margin-left: 250px !important; margin-inline-start: 250px !important;
} }
.repository.new.migrate form .inline.field > input, .repository.new.migrate form .inline.field > input,
.repository.new.fork form .inline.field > input, .repository.new.fork form .inline.field > input,
@ -503,7 +503,7 @@ input:-webkit-autofill:active,
.repository.new.repo form .optional .title, .repository.new.repo form .optional .title,
.repository.new.migrate form .optional .title, .repository.new.migrate form .optional .title,
.repository.new.fork form .optional .title { .repository.new.fork form .optional .title {
margin-left: 15px; margin-inline-start: 15px;
} }
.repository.new.repo form .inline.field > label, .repository.new.repo form .inline.field > label,
.repository.new.migrate form .inline.field > label, .repository.new.migrate form .inline.field > label,
@ -514,14 +514,14 @@ input:-webkit-autofill:active,
.repository.new.migrate form .dropdown .text, .repository.new.migrate form .dropdown .text,
.repository.new.fork form .dropdown .text { .repository.new.fork form .dropdown .text {
margin-right: 0 !important; margin-inline-end: 0 !important;
} }
.moderation.new-report form .header, .moderation.new-report form .header,
.repository.new.repo form .header, .repository.new.repo form .header,
.repository.new.migrate form .header, .repository.new.migrate form .header,
.repository.new.fork form .header { .repository.new.fork form .header {
padding-left: 0 !important; padding-inline-start: 0 !important;
text-align: center; text-align: center;
} }
@ -557,7 +557,7 @@ input:-webkit-autofill:active,
@media (min-width: 768px) { @media (min-width: 768px) {
.repository.new.repo .ui.form #auto-init { .repository.new.repo .ui.form #auto-init {
margin-left: 265px !important; margin-inline-start: 265px !important;
} }
} }

8
web_src/css/home.css
View file

@ -68,14 +68,14 @@
} }
.page-footer .right-links > a { .page-footer .right-links > a {
border-left: 1px solid var(--color-secondary-dark-1); border-inline-start: 1px solid var(--color-secondary-dark-1);
padding-left: 8px; padding-inline-start: 8px;
margin-left: 8px; margin-inline-start: 8px;
} }
.page-footer .ui.dropdown.language .menu { .page-footer .ui.dropdown.language .menu {
max-height: min(500px, calc(100vh - 60px)); max-height: min(500px, calc(100vh - 60px));
overflow-y: auto; overflow-block: auto;
margin-bottom: 10px; margin-bottom: 10px;
} }

14
web_src/css/install.css
View file

@ -4,16 +4,16 @@
} }
.page-content.install form.ui.form .inline.field > label { .page-content.install form.ui.form .inline.field > label {
text-align: right; text-align: end;
width: 30%; width: 30%;
padding-right: 10px; padding-inline-end: 10px;
margin-right: 0; margin-inline-end: 0;
} }
.page-content.install .ui.form .field > .help, .page-content.install .ui.form .field > .help,
.page-content.install .ui.form .field > .ui.checkbox:first-child, .page-content.install .ui.form .field > .ui.checkbox:first-child,
.page-content.install .ui.form .field > .right-content { .page-content.install .ui.form .field > .right-content {
margin-left: calc(30% + 5px); margin-inline-start: calc(30% + 5px);
width: auto; width: auto;
} }
@ -34,20 +34,20 @@
} }
.page-content.install form.ui.form .field { .page-content.install form.ui.form .field {
text-align: left; text-align: start;
} }
.page-content.install .ui .reinstall-message { .page-content.install .ui .reinstall-message {
width: 70%; width: 70%;
margin: 20px auto; margin: 20px auto;
color: var(--color-red); color: var(--color-red);
text-align: left; text-align: start;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
} }
.page-content.install .ui .reinstall-confirm { .page-content.install .ui .reinstall-confirm {
width: 70%; width: 70%;
text-align: left; text-align: start;
margin: 10px auto; margin: 10px auto;
} }

8
web_src/css/issues.css
View file

@ -9,7 +9,7 @@
.menu .item:has(> .label-filter-item) .label-exclude-item-btn { .menu .item:has(> .label-filter-item) .label-exclude-item-btn {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
height: 100%; height: 100%;
width: 40px; width: 40px;
background: none; background: none;
@ -34,13 +34,13 @@
max-width: 288px; max-width: 288px;
@media (any-hover: none) { @media (any-hover: none) {
padding-right: 50px !important; padding-inline-end: 50px !important;
} }
&:hover, &:hover,
&.selected, &.selected,
&:has(.label-exclude-item-btn.active) { &:has(.label-exclude-item-btn.active) {
padding-right: 50px !important; padding-inline-end: 50px !important;
.label-exclude-item-btn { .label-exclude-item-btn {
opacity: 1; opacity: 1;
@ -51,7 +51,7 @@
.menu:has(> .item[data-selected]) .menu:has(> .item[data-selected])
.item:not([data-selected]) .item:not([data-selected])
> .label-filter-item { > .label-filter-item {
padding-left: 27px; padding-inline-start: 27px;
} }
.menu .item .label-filter-item { .menu .item .label-filter-item {

4
web_src/css/markup/codecopy.css
View file

@ -6,7 +6,7 @@
.markup .code-copy { .markup .code-copy {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 6px; inset-inline-end: 6px;
padding: 9px; padding: 9px;
visibility: hidden; visibility: hidden;
animation: fadeout 0.2s both; animation: fadeout 0.2s both;
@ -14,7 +14,7 @@
/* adjustments for comment content having only 14px font size */ /* adjustments for comment content having only 14px font size */
.repository.view.issue .comment-list .comment .markup .code-copy { .repository.view.issue .comment-list .comment .markup .code-copy {
right: 5px; inset-inline-end: 5px;
padding: 8px; padding: 8px;
} }

54
web_src/css/markup/content.css
View file

@ -23,9 +23,9 @@
} }
.markup .anchor { .markup .anchor {
float: left; float: inline-start;
padding-right: 4px; padding-inline-end: 4px;
margin-left: -20px; margin-inline-start: -20px;
color: inherit; color: inherit;
} }
@ -144,7 +144,7 @@
.markup ul, .markup ul,
.markup ol { .markup ol {
padding-left: 2em; padding-inline-start: 2em;
} }
.markup ul.no-list, .markup ul.no-list,
@ -167,11 +167,11 @@
} }
.markup ol .task-list-item input[type="checkbox"] { .markup ol .task-list-item input[type="checkbox"] {
margin-left: 0; margin-inline-start: 0;
} }
.markup .task-list-item input[type="checkbox"] + p { .markup .task-list-item input[type="checkbox"] + p {
margin-left: -0.2em; margin-inline-start: -0.2em;
display: inline; display: inline;
} }
@ -267,10 +267,10 @@
} }
.markup blockquote { .markup blockquote {
margin-left: 0; margin-inline-start: 0;
padding: 0 15px; padding: 0 15px;
color: var(--color-text-light-2); color: var(--color-text-light-2);
border-left: 0.25em solid var(--color-secondary); border-inline-start: 0.25em solid var(--color-secondary);
} }
.markup blockquote > :first-child { .markup blockquote > :first-child {
@ -328,12 +328,12 @@
.markup img[align="right"], .markup img[align="right"],
.markup video[align="right"] { .markup video[align="right"] {
padding-left: 20px; padding-inline-start: 20px;
} }
.markup img[align="left"], .markup img[align="left"],
.markup video[align="left"] { .markup video[align="left"] {
padding-right: 28px; padding-inline-end: 28px;
} }
.markup .emoji { .markup .emoji {
@ -347,7 +347,7 @@
.markup span.frame > span { .markup span.frame > span {
display: block; display: block;
float: left; float: inline-start;
width: auto; width: auto;
padding: 7px; padding: 7px;
margin: 13px 0 0; margin: 13px 0 0;
@ -358,7 +358,7 @@
.markup span.frame span img, .markup span.frame span img,
.markup span.frame span video { .markup span.frame span video {
display: block; display: block;
float: left; float: inline-start;
} }
.markup span.frame span span { .markup span.frame span span {
@ -397,19 +397,19 @@
display: block; display: block;
margin: 13px 0 0; margin: 13px 0 0;
overflow: hidden; overflow: hidden;
text-align: right; text-align: end;
} }
.markup span.align-right span img, .markup span.align-right span img,
.markup span.align-right span video { .markup span.align-right span video {
margin: 0; margin: 0;
text-align: right; text-align: end;
} }
.markup span.float-left { .markup span.float-left {
display: block; display: block;
float: left; float: inline-start;
margin-right: 13px; margin-inline-end: 13px;
overflow: hidden; overflow: hidden;
} }
@ -419,8 +419,8 @@
.markup span.float-right { .markup span.float-right {
display: block; display: block;
float: right; float: inline-end;
margin-left: 13px; margin-inline-start: 13px;
overflow: hidden; overflow: hidden;
} }
@ -428,7 +428,7 @@
display: block; display: block;
margin: 13px auto 0; margin: 13px auto 0;
overflow: hidden; overflow: hidden;
text-align: right; text-align: end;
} }
.markup code, .markup code,
@ -508,15 +508,15 @@
.markup .ui.list .list, .markup .ui.list .list,
.markup ol.ui.list ol, .markup ol.ui.list ol,
.markup ul.ui.list ul { .markup ul.ui.list ul {
padding-left: 2em; padding-inline-start: 2em;
} }
.file-revisions-btn { .file-revisions-btn {
display: block; display: block;
float: left; float: inline-start;
margin-bottom: 2px !important; margin-bottom: 2px !important;
padding: 11px !important; padding: 11px !important;
margin-right: 10px !important; margin-inline-end: 10px !important;
} }
.file-revisions-btn i { .file-revisions-btn i {
@ -538,20 +538,20 @@
display: block !important; /* override fomantic .ui.form .error.message {display: none} */ display: block !important; /* override fomantic .ui.form .error.message {display: none} */
border: none !important; border: none !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
box-shadow: none !important; box-shadow: none !important;
font-size: 85% !important; font-size: 85% !important;
white-space: pre-wrap !important; white-space: pre-wrap !important;
padding: 0.5rem 1rem !important; padding: 0.5rem 1rem !important;
text-align: left !important; text-align: start !important;
} }
.markup-block-error + pre { .markup-block-error + pre {
border-top: none !important; border-top: none !important;
margin-top: 0 !important; margin-top: 0 !important;
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
border-top-right-radius: 0 !important; border-top-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
} }
.file-view.markup { .file-view.markup {

2
web_src/css/markup/filepreview.css
View file

@ -18,7 +18,7 @@
.markup .file-preview-box .header { .markup .file-preview-box .header {
padding: .5rem; padding: .5rem;
padding-left: 1rem; padding-inline-start: 1rem;
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
border-bottom: none; border-bottom: none;
border-radius: 0.28571429rem 0.28571429rem 0 0; border-radius: 0.28571429rem 0.28571429rem 0 0;

2
web_src/css/modules/animations.css
View file

@ -28,7 +28,7 @@ lazy-webc::after,
content: ""; content: "";
position: absolute; position: absolute;
display: block; display: block;
left: 50%; inset-inline-start: 50%;
top: 50%; top: 50%;
height: min(4em, 66.6%); height: min(4em, 66.6%);
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */ width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */

14
web_src/css/modules/button-legacy.css
View file

@ -60,7 +60,7 @@ And the default buttons always have borders now (not the same as Fomantic UI's d
It needs some tricks to tweak the left/right borders with active state */ It needs some tricks to tweak the left/right borders with active state */
.ui.buttons .button { .ui.buttons .button {
border-right: none; border-inline-end: none;
} }
.ui.buttons .button:hover { .ui.buttons .button:hover {
@ -68,27 +68,27 @@ It needs some tricks to tweak the left/right borders with active state */
} }
.ui.buttons .button:hover + .button { .ui.buttons .button:hover + .button {
border-left: 1px solid var(--color-secondary-dark-2); border-inline-start: 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 */ /* 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:first-child,
.ui.buttons .button.tw-hidden:first-child + .button { .ui.buttons .button.tw-hidden:first-child + .button {
border-left: 1px solid var(--color-light-border); border-inline-start: 1px solid var(--color-light-border);
} }
.ui.buttons .button:last-child, .ui.buttons .button:last-child,
.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) { .ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
border-right: 1px solid var(--color-light-border); border-inline-end: 1px solid var(--color-light-border);
} }
.ui.buttons .button.active { .ui.buttons .button.active {
border-left: 1px solid var(--color-light-border); border-inline-start: 1px solid var(--color-light-border);
border-right: 1px solid var(--color-light-border); border-inline-end: 1px solid var(--color-light-border);
} }
.ui.buttons .button.active + .button { .ui.buttons .button.active + .button {
border-left: none; border-inline-start: none;
} }
.ui.basic.buttons .button, .ui.basic.buttons .button,

2
web_src/css/modules/button.css
View file

@ -100,7 +100,7 @@
/* Fomantic buttons have annoying margins to set distance between elements. In /* Fomantic buttons have annoying margins to set distance between elements. In
* the button-row/sequence helpers this is set by flex+gap */ * the button-row/sequence helpers this is set by flex+gap */
.button-row .ui.button { .button-row .ui.button {
margin-right: 0; margin-inline-end: 0;
} }
.button-sequence .ui.button { .button-sequence .ui.button {
margin: 0 !important; margin: 0 !important;

8
web_src/css/modules/card.css
View file

@ -119,16 +119,14 @@ a.ui.card:hover {
.ui.cards > .card > .extra, .ui.cards > .card > .extra,
.ui.card > .extra { .ui.card > .extra {
color: var(--color-text); color: var(--color-text);
border-top-color: var(--color-secondary-light-1) !important; border-block-start-color: var(--color-secondary-light-1) !important;
} }
.ui.three.cards { .ui.three.cards {
margin-left: -1em; margin-inline: -1em;
margin-right: -1em;
} }
.ui.three.cards > .card { .ui.three.cards > .card {
width: calc(33.33333333333333% - 2em); width: calc(33.33333333333333% - 2em);
margin-left: 1em; margin-inline: 1em;
margin-right: 1em;
} }

14
web_src/css/modules/checkbox.css
View file

@ -21,7 +21,7 @@ input[type="radio"] {
.ui.checkbox input[type="radio"] { .ui.checkbox input[type="radio"] {
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 0; inset-inline-start: 0;
width: var(--checkbox-size); width: var(--checkbox-size);
height: var(--checkbox-size); height: var(--checkbox-size);
} }
@ -41,7 +41,7 @@ input[type="radio"] {
.ui.checkbox label, .ui.checkbox label,
.ui.radio.checkbox label { .ui.radio.checkbox label {
margin-left: 1.85714em; margin-inline-start: 1.85714em;
} }
.ui.checkbox + label { .ui.checkbox + label {
@ -72,7 +72,7 @@ input[type="radio"] {
} }
.ui.toggle.checkbox label { .ui.toggle.checkbox label {
min-height: 1.5rem; min-height: 1.5rem;
padding-left: 4.5rem; padding-inline-start: 4.5rem;
padding-top: 0.15em; padding-top: 0.15em;
} }
.ui.toggle.checkbox label::before { .ui.toggle.checkbox label::before {
@ -84,7 +84,7 @@ input[type="radio"] {
width: 49px; width: 49px;
height: 21px; height: 21px;
border-radius: 500rem; border-radius: 500rem;
left: 0; inset-inline-start: 0;
} }
.ui.toggle.checkbox label::after { .ui.toggle.checkbox label::after {
background: var(--color-white); background: var(--color-white);
@ -96,15 +96,15 @@ input[type="radio"] {
width: 18px; width: 18px;
height: 18px; height: 18px;
top: 1.5px; top: 1.5px;
left: 1.5px; inset-inline-start: 1.5px;
border-radius: 500rem; border-radius: 500rem;
transition: background 0.3s ease, left 0.3s ease; transition: background 0.3s ease, left 0.3s ease;
} }
.ui.toggle.checkbox input ~ label::after { .ui.toggle.checkbox input ~ label::after {
left: 1.5px; inset-inline-start: 1.5px;
} }
.ui.toggle.checkbox input:checked ~ label::after { .ui.toggle.checkbox input:checked ~ label::after {
left: 29px; inset-inline-start: 29px;
} }
.ui.toggle.checkbox input:focus ~ label::before, .ui.toggle.checkbox input:focus ~ label::before,
.ui.toggle.checkbox label::before { .ui.toggle.checkbox label::before {

10
web_src/css/modules/comment.css
View file

@ -36,7 +36,7 @@
.ui.comments .comment > .comments::before { .ui.comments .comment > .comments::before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
} }
.ui.comments .comment > .comments .comment { .ui.comments .comment > .comments .comment {
@ -46,7 +46,7 @@
} }
.ui.comments .comment .avatar { .ui.comments .comment .avatar {
float: left; float: inline-start;
width: 2.5em; width: 2.5em;
} }
@ -55,7 +55,7 @@
} }
.ui.comments .comment > .avatar ~ .content { .ui.comments .comment > .avatar ~ .content {
margin-left: 3.5em; margin-inline-start: 3.5em;
} }
.ui.comments .comment .author { .ui.comments .comment .author {
@ -69,7 +69,7 @@
.ui.comments .comment .metadata { .ui.comments .comment .metadata {
display: inline-block; display: inline-block;
margin-left: 0.5em; margin-inline-start: 0.5em;
font-size: 0.875em; font-size: 0.875em;
} }
@ -79,7 +79,7 @@
} }
.ui.comments .comment .metadata > :last-child { .ui.comments .comment .metadata > :last-child {
margin-right: 0; margin-inline-end: 0;
} }
.ui.comments .comment .text { .ui.comments .comment .text {

15
web_src/css/modules/container.css
View file

@ -11,8 +11,7 @@
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
--container-width: auto; --container-width: auto;
width: var(--container-width); width: var(--container-width);
margin-left: 1em; margin-inline: 1em;
margin-right: 1em;
} }
} }
@ -20,8 +19,7 @@
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
--container-width: 723px; --container-width: 723px;
width: var(--container-width); width: var(--container-width);
margin-left: auto; margin-inline: auto;
margin-right: auto;
} }
} }
@ -29,8 +27,7 @@
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
--container-width: 933px; --container-width: 933px;
width: var(--container-width); width: var(--container-width);
margin-left: auto; margin-inline: auto;
margin-right: auto;
} }
} }
@ -38,8 +35,7 @@
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
--container-width: 1127px; --container-width: 1127px;
width: var(--container-width); width: var(--container-width);
margin-left: auto; margin-inline: auto;
margin-right: auto;
} }
} }
@ -57,8 +53,7 @@
--container-width: 1280px; --container-width: 1280px;
width: var(--container-width); width: var(--container-width);
max-width: calc(100% - calc(2 * var(--page-margin-x))); max-width: calc(100% - calc(2 * var(--page-margin-x)));
margin-left: auto; margin-inline: auto;
margin-right: auto;
} }
.ui.container.fluid.padded { .ui.container.fluid.padded {

14
web_src/css/modules/dialog.css
View file

@ -6,7 +6,7 @@ dialog {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
text-align: left; text-align: start;
border: none; border: none;
background: var(--color-body); background: var(--color-body);
box-shadow: box-shadow:
@ -57,8 +57,8 @@ dialog header {
margin: 0; margin: 0;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
box-shadow: none; box-shadow: none;
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
} }
@ -89,8 +89,8 @@ dialog .actions {
} }
dialog footer { dialog footer {
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
} }
/* positive/negative action buttons */ /* positive/negative action buttons */
@ -98,7 +98,7 @@ dialog .actions .ui.button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 10px 12px; padding: 10px 12px;
margin-right: 0; margin-inline-end: 0;
} }
dialog .actions .ui.button.danger { dialog .actions .ui.button.danger {
@ -109,5 +109,5 @@ dialog .actions .ui.button.danger {
} }
dialog .actions .ui.button .svg { dialog .actions .ui.button .svg {
margin-right: 5px; margin-inline-end: 5px;
} }

4
web_src/css/modules/divider.css
View file

@ -30,11 +30,11 @@ h4.divider {
} }
.divider.divider-text::before { .divider.divider-text::before {
margin-right: .75em; margin-inline-end: .75em;
} }
.divider.divider-text::after { .divider.divider-text::after {
margin-left: .75em; margin-inline-start: .75em;
} }
.ui.dropdown .menu > .divider { .ui.dropdown .menu > .divider {

78
web_src/css/modules/grid.css
View file

@ -22,12 +22,10 @@
} }
.ui.relaxed.grid { .ui.relaxed.grid {
margin-left: -1.5rem; margin-inline: -1.5rem;
margin-right: -1.5rem;
} }
.ui[class*="very relaxed"].grid { .ui[class*="very relaxed"].grid {
margin-left: -2.5rem; margin-inline: -2.5rem;
margin-right: -2.5rem;
} }
.ui.grid + .grid { .ui.grid + .grid {
@ -39,13 +37,11 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 6.25%; width: 6.25%;
padding-left: 1rem; padding-inline: 1rem;
padding-right: 1rem;
vertical-align: top; vertical-align: top;
} }
.ui.grid > * { .ui.grid > * {
padding-left: 1rem; padding-inline: 1rem;
padding-right: 1rem;
} }
.ui.grid > .row { .ui.grid > .row {
@ -103,46 +99,36 @@
@media only screen and (max-width: 767.98px) { @media only screen and (max-width: 767.98px) {
.ui.page.grid { .ui.page.grid {
width: auto; width: auto;
padding-left: 0; padding-inline: 0;
padding-right: 0; margin-inline: 0;
margin-left: 0;
margin-right: 0;
} }
} }
@media only screen and (min-width: 768px) and (max-width: 991.98px) { @media only screen and (min-width: 768px) and (max-width: 991.98px) {
.ui.page.grid { .ui.page.grid {
width: auto; width: auto;
margin-left: 0; margin-inline: 0;
margin-right: 0; padding-inline: 2em;
padding-left: 2em;
padding-right: 2em;
} }
} }
@media only screen and (min-width: 992px) and (max-width: 1199.98px) { @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
.ui.page.grid { .ui.page.grid {
width: auto; width: auto;
margin-left: 0; margin-inline: 0;
margin-right: 0; padding-inline: 3%;
padding-left: 3%;
padding-right: 3%;
} }
} }
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) { @media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
.ui.page.grid { .ui.page.grid {
width: auto; width: auto;
margin-left: 0; margin-inline: 0;
margin-right: 0; padding-inline: 15%;
padding-left: 15%;
padding-right: 15%;
} }
} }
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {
.ui.page.grid { .ui.page.grid {
width: auto; width: auto;
margin-left: 0; margin-inline: 0;
margin-right: 0; padding-inline: 23%;
padding-left: 23%;
padding-right: 23%;
} }
} }
@ -371,37 +357,32 @@
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
.ui.centered.grid > .row > .column:not(.aligned):not(.justified), .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
.ui.grid .centered.row > .column:not(.aligned):not(.justified) { .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
text-align: left; text-align: start;
} }
.ui.grid > .centered.column, .ui.grid > .centered.column,
.ui.grid > .row > .centered.column { .ui.grid > .row > .centered.column {
display: block; display: block;
margin-left: auto; margin-inline: auto;
margin-right: auto;
} }
.ui.relaxed.grid > .column:not(.row), .ui.relaxed.grid > .column:not(.row),
.ui.relaxed.grid > .row > .column, .ui.relaxed.grid > .row > .column,
.ui.grid > .relaxed.row > .column { .ui.grid > .relaxed.row > .column {
padding-left: 1.5rem; padding-inline: 1.5rem;
padding-right: 1.5rem;
} }
.ui[class*="very relaxed"].grid > .column:not(.row), .ui[class*="very relaxed"].grid > .column:not(.row),
.ui[class*="very relaxed"].grid > .row > .column, .ui[class*="very relaxed"].grid > .row > .column,
.ui.grid > [class*="very relaxed"].row > .column { .ui.grid > [class*="very relaxed"].row > .column {
padding-left: 2.5rem; padding-inline: 2.5rem;
padding-right: 2.5rem;
} }
.ui.relaxed.grid .row + .ui.divider, .ui.relaxed.grid .row + .ui.divider,
.ui.grid .relaxed.row + .ui.divider { .ui.grid .relaxed.row + .ui.divider {
margin-left: 1.5rem; margin-inline: 1.5rem;
margin-right: 1.5rem;
} }
.ui[class*="very relaxed"].grid .row + .ui.divider, .ui[class*="very relaxed"].grid .row + .ui.divider,
.ui.grid [class*="very relaxed"].row + .ui.divider { .ui.grid [class*="very relaxed"].row + .ui.divider {
margin-left: 2.5rem; margin-inline: 2.5rem;
margin-right: 2.5rem;
} }
.ui[class*="middle aligned"].grid > .column:not(.row), .ui[class*="middle aligned"].grid > .column:not(.row),
@ -419,7 +400,7 @@
.ui.grid > [class*="left aligned"].row > .column, .ui.grid > [class*="left aligned"].row > .column,
.ui.grid > [class*="left aligned"].column.column, .ui.grid > [class*="left aligned"].column.column,
.ui.grid > .row > [class*="left aligned"].column.column { .ui.grid > .row > [class*="left aligned"].column.column {
text-align: left; text-align: start;
align-self: inherit; align-self: inherit;
} }
@ -440,7 +421,7 @@
.ui.grid > [class*="right aligned"].row > .column, .ui.grid > [class*="right aligned"].row > .column,
.ui.grid > [class*="right aligned"].column.column, .ui.grid > [class*="right aligned"].column.column,
.ui.grid > .row > [class*="right aligned"].column.column { .ui.grid > .row > [class*="right aligned"].column.column {
text-align: right; text-align: end;
align-self: inherit; align-self: inherit;
} }
@ -470,8 +451,7 @@
@media only screen and (max-width: 767.98px) { @media only screen and (max-width: 767.98px) {
.ui.stackable.grid { .ui.stackable.grid {
width: auto; width: auto;
margin-left: 0 !important; margin-inline: 0 !important;
margin-right: 0 !important;
} }
.ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .row > .wide.column,
.ui.stackable.grid > .wide.column, .ui.stackable.grid > .wide.column,
@ -492,25 +472,21 @@
.ui.container > .ui.stackable.grid > .column, .ui.container > .ui.stackable.grid > .column,
.ui.container > .ui.stackable.grid > .row > .column { .ui.container > .ui.stackable.grid > .row > .column {
padding-left: 0 !important; padding-inline: 0 !important;
padding-right: 0 !important;
} }
.ui.grid .ui.stackable.grid, .ui.grid .ui.stackable.grid,
.ui.segment:not(.vertical) .ui.stackable.page.grid { .ui.segment:not(.vertical) .ui.stackable.page.grid {
margin-left: -1rem !important; margin-inline: -1rem !important;
margin-right: -1rem !important;
} }
} }
.ui.ui.ui.compact.grid > .column:not(.row), .ui.ui.ui.compact.grid > .column:not(.row),
.ui.ui.ui.compact.grid > .row > .column { .ui.ui.ui.compact.grid > .row > .column {
padding-left: 0.5rem; padding-inline: 0.5rem;
padding-right: 0.5rem;
} }
.ui.ui.ui.compact.grid > * { .ui.ui.ui.compact.grid > * {
padding-left: 0.5rem; padding-inline: 0.5rem;
padding-right: 0.5rem;
} }
.ui.ui.ui.compact.grid > .row { .ui.ui.ui.compact.grid > .row {

14
web_src/css/modules/hashbox.css
View file

@ -31,9 +31,9 @@
color: var(--color-text); color: var(--color-text);
background: var(--color-light); background: var(--color-light);
padding: 0.25rem 0.33rem; padding: 0.25rem 0.33rem;
border-left: 1px solid var(--color-light-border); border-inline-start: 1px solid var(--color-light-border);
border-top-right-radius: inherit; border-start-end-radius: inherit;
border-bottom-right-radius: inherit; border-end-end-radius: inherit;
} }
.sha.label .signature-author { .sha.label .signature-author {
@ -53,7 +53,7 @@
} }
.sha.label.isSigned.isWarning .signature { .sha.label.isSigned.isWarning .signature {
border-left: 1px solid var(--color-red-badge); border-inline-start: 1px solid var(--color-red-badge);
color: var(--color-red-badge); color: var(--color-red-badge);
} }
@ -67,7 +67,7 @@
} }
.sha.label.isSigned.isVerified .signature { .sha.label.isSigned.isVerified .signature {
border-left: 1px solid var(--color-green-badge); border-inline-start: 1px solid var(--color-green-badge);
color: var(--color-green-badge); color: var(--color-green-badge);
} }
@ -81,7 +81,7 @@
} }
.sha.label.isSigned.isVerifiedUntrusted .signature { .sha.label.isSigned.isVerifiedUntrusted .signature {
border-left: 1px solid var(--color-yellow-badge); border-inline-start: 1px solid var(--color-yellow-badge);
color: var(--color-yellow-badge); color: var(--color-yellow-badge);
} }
@ -95,7 +95,7 @@
} }
.sha.label.isSigned.isVerifiedUnmatched .signature { .sha.label.isSigned.isVerifiedUnmatched .signature {
border-left: 1px solid var(--color-orange-badge); border-inline-start: 1px solid var(--color-orange-badge);
color: var(--color-orange-badge); color: var(--color-orange-badge);
} }

11
web_src/css/modules/header.css
View file

@ -20,7 +20,7 @@
} }
.ui.header .ui.label { .ui.header .ui.label {
margin-left: 0.25rem; margin-inline-start: 0.25rem;
vertical-align: middle; vertical-align: middle;
} }
@ -49,7 +49,7 @@
.ui.header > i.icon:only-child { .ui.header > i.icon:only-child {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin-right: 0.75rem; margin-inline-end: 0.75rem;
} }
.ui.header + p { .ui.header + p {
@ -120,7 +120,7 @@ h4.ui.header .sub.header {
/* fix misaligned right buttons on box headers */ /* fix misaligned right buttons on box headers */
.ui.attached.header > .ui.right { .ui.attached.header > .ui.right {
position: absolute; position: absolute;
right: 0.78571429rem; inset-inline-end: 0.78571429rem;
top: 0; top: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
@ -136,8 +136,7 @@ h4.ui.header .sub.header {
/* open dropdown menus to the left in right-attached headers */ /* open dropdown menus to the left in right-attached headers */
.ui.attached.header > .ui.right .ui.dropdown .menu { .ui.attached.header > .ui.right .ui.dropdown .menu {
right: 0; inset-inline: auto 0;
left: auto;
} }
/* if a .top.attached.header is followed by a .segment, add some margin */ /* if a .top.attached.header is followed by a .segment, add some margin */
@ -147,7 +146,7 @@ h4.ui.header .sub.header {
} }
.ui.dividing.header { .ui.dividing.header {
border-bottom-color: var(--color-secondary); border-block-end-color: var(--color-secondary);
} }
.ui.dividing.header .sub.header { .ui.dividing.header .sub.header {

33
web_src/css/modules/input.css
View file

@ -49,7 +49,7 @@
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 2.67142857em; width: 2.67142857em;
@ -71,29 +71,26 @@
.ui.ui.ui.ui.icon.input > textarea, .ui.ui.ui.ui.icon.input > textarea,
.ui.ui.ui.ui.icon.input > input { .ui.ui.ui.ui.icon.input > input {
padding-right: 2.67142857em; padding-inline-end: 2.67142857em;
} }
.ui.icon.input > i.link.icon { .ui.icon.input > i.link.icon {
cursor: pointer; cursor: pointer;
} }
.ui.icon.input > i.circular.icon { .ui.icon.input > i.circular.icon {
top: 0.35em; top: 0.35em;
right: 0.5em; inset-inline-end: 0.5em;
} }
.ui[class*="left icon"].input > i.icon { .ui[class*="left icon"].input > i.icon {
right: auto; inset-inline: 1px auto;
left: 1px;
border-radius: 0.28571429rem 0 0 0.28571429rem; border-radius: 0.28571429rem 0 0 0.28571429rem;
} }
.ui[class*="left icon"].input > i.circular.icon { .ui[class*="left icon"].input > i.circular.icon {
right: auto; inset-inline: 0.5em auto;
left: 0.5em;
} }
.ui.ui.ui.ui[class*="left icon"].input > textarea, .ui.ui.ui.ui[class*="left icon"].input > textarea,
.ui.ui.ui.ui[class*="left icon"].input > input { .ui.ui.ui.ui[class*="left icon"].input > input {
padding-left: 2.67142857em; padding-inline: 2.67142857em 1em;
padding-right: 1em;
} }
.ui.icon.input > textarea:focus ~ .icon, .ui.icon.input > textarea:focus ~ .icon,
@ -125,9 +122,9 @@
} }
.ui.action.input:not([class*="left action"]) > input { .ui.action.input:not([class*="left action"]) > input {
border-top-right-radius: 0; border-start-end-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
border-right-color: transparent; border-inline-end-color: transparent;
} }
.ui.action.input > .dropdown:first-child, .ui.action.input > .dropdown:first-child,
@ -171,18 +168,18 @@
min-width: 10em; min-width: 10em;
} }
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) { .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
border-right: none; border-inline-end: none;
} }
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover { .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
border-color: var(--color-input-border); border-color: var(--color-input-border);
} }
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible { .ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
} }
.ui.action.input:not([class*="left action"]) > input, .ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > input:hover { .ui.action.input:not([class*="left action"]) > input:hover {
border-right: none; border-inline-end: 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,
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover, .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
@ -190,8 +187,8 @@
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover, .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,
.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover { .ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
border-left-color: var(--color-primary); border-inline-start-color: var(--color-primary);
} }
.ui.action.input:not([class*="left action"]) > input:focus { .ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-primary); border-inline-end-color: var(--color-primary);
} }

8
web_src/css/modules/label.css
View file

@ -19,10 +19,10 @@
} }
.ui.label:first-child { .ui.label:first-child {
margin-left: 0; margin-inline-start: 0;
} }
.ui.label:last-child { .ui.label:last-child {
margin-right: 0; margin-inline-end: 0;
} }
a.ui.label { a.ui.label {
@ -45,7 +45,7 @@ a.ui.label {
} }
.ui.label > .color-icon { .ui.label > .color-icon {
margin-left: 0; margin-inline-start: 0;
} }
.ui.label > .icon { .ui.label > .icon {
@ -57,7 +57,7 @@ a.ui.label {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
margin-left: 1em; margin-inline-start: 1em;
opacity: 0.8; opacity: 0.8;
} }
.ui.label > .detail .icon { .ui.label > .detail .icon {

10
web_src/css/modules/list.css
View file

@ -51,7 +51,7 @@
min-width: 1.55em; min-width: 1.55em;
padding-top: 0; padding-top: 0;
transition: color 0.1s ease; transition: color 0.1s ease;
padding-right: 0.28571429em; padding-inline-end: 0.28571429em;
vertical-align: top; vertical-align: top;
} }
.ui.list .list > .item > i.icon:only-child, .ui.list .list > .item > i.icon:only-child,
@ -69,7 +69,7 @@
} }
.ui.list .list > .item > .image:not(:only-child):not(img), .ui.list .list > .item > .image:not(:only-child):not(img),
.ui.list > .item > .image:not(:only-child):not(img) { .ui.list > .item > .image:not(:only-child):not(img) {
padding-right: 0.5em; padding-inline-end: 0.5em;
} }
.ui.list .list > .item > .image img, .ui.list .list > .item > .image img,
.ui.list > .item > .image img { .ui.list > .item > .image img {
@ -102,8 +102,8 @@
} }
.ui.list .list > .item > .content > .list, .ui.list .list > .item > .content > .list,
.ui.list > .item > .content > .list { .ui.list > .item > .content > .list {
margin-left: 0; margin-inline-start: 0;
padding-left: 0; padding-inline-start: 0;
} }
.ui.list .list > .item .header, .ui.list .list > .item .header,
@ -128,7 +128,7 @@
.ui.list .list > .item [class*="right floated"], .ui.list .list > .item [class*="right floated"],
.ui.list > .item [class*="right floated"] { .ui.list > .item [class*="right floated"] {
float: right; float: inline-end;
margin: 0 0 0 1em; margin: 0 0 0 1em;
} }

5
web_src/css/modules/message.css
View file

@ -23,8 +23,7 @@
.ui.attached.message { .ui.attached.message {
margin-bottom: -1px; margin-bottom: -1px;
border-radius: var(--border-radius) var(--border-radius) 0 0; border-radius: var(--border-radius) var(--border-radius) 0 0;
margin-left: -1px; margin-inline: -1px;
margin-right: -1px;
} }
.ui.attached + .ui.attached.message:not(.top):not(.bottom) { .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
@ -105,7 +104,7 @@
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 9px; top: 9px;
right: 9px; inset-inline-end: 9px;
opacity: .7; opacity: .7;
} }

12
web_src/css/modules/modal.css
View file

@ -20,8 +20,8 @@
color: var(--color-text-dark); color: var(--color-text-dark);
background: var(--color-body); background: var(--color-body);
border-color: var(--color-secondary); border-color: var(--color-secondary);
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
vertical-align: middle; vertical-align: middle;
} }
@ -58,12 +58,12 @@ These inconsistent layouts should be refactored to simple ones.
background: var(--color-secondary-bg); background: var(--color-secondary-bg);
border-color: var(--color-secondary); border-color: var(--color-secondary);
padding: 1rem; padding: 1rem;
text-align: right; text-align: end;
} }
.ui.modal .content > .actions { .ui.modal .content > .actions {
padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */ padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
text-align: right; text-align: end;
} }
/* positive/negative action buttons */ /* positive/negative action buttons */
@ -71,7 +71,7 @@ These inconsistent layouts should be refactored to simple ones.
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 10px 12px 10px 10px; padding: 10px 12px 10px 10px;
margin-right: 0; margin-inline-end: 0;
} }
.ui.modal .actions > .ui.button.danger { .ui.modal .actions > .ui.button.danger {
@ -82,5 +82,5 @@ These inconsistent layouts should be refactored to simple ones.
} }
.ui.modal .actions > .ui.button .svg { .ui.modal .actions > .ui.button .svg {
margin-right: 5px; margin-inline-end: 5px;
} }

8
web_src/css/modules/navbar.css
View file

@ -41,7 +41,7 @@
#navbar .secondary.menu > .item > .svg, #navbar .secondary.menu > .item > .svg,
#navbar .right.menu > .item > .svg { #navbar .right.menu > .item > .svg {
margin-right: 0; margin-inline-end: 0;
} }
/* icon with notification counter - positioned relative container */ /* icon with notification counter - positioned relative container */
@ -69,7 +69,7 @@
} }
#navbar .navbar-mobile-right { #navbar .navbar-mobile-right {
display: flex; display: flex;
margin-left: auto !important; margin-inline-start: auto !important;
width: auto !important; width: auto !important;
} }
#navbar .navbar-mobile-right > .item { #navbar .navbar-mobile-right > .item {
@ -119,7 +119,7 @@
min-height: 48px; min-height: 48px;
} }
#navbar #mobile-notifications-icon { #navbar #mobile-notifications-icon {
margin-right: 6px !important; margin-inline-end: 6px !important;
} }
} }
@ -151,7 +151,7 @@
background: var(--color-primary); background: var(--color-primary);
border: 2px solid var(--color-nav-bg); border: 2px solid var(--color-nav-bg);
position: absolute; position: absolute;
left: 6px; inset-inline-start: 6px;
top: -9px; top: -9px;
min-width: 17px; min-width: 17px;
height: 17px; height: 17px;

9
web_src/css/modules/segment.css
View file

@ -103,14 +103,14 @@
border-radius: 0; border-radius: 0;
border: none; border: none;
box-shadow: none; box-shadow: none;
border-left: 1px solid var(--color-secondary); border-inline-start: 1px solid var(--color-secondary);
} }
.ui.segments > .horizontal.segments:first-child { .ui.segments > .horizontal.segments:first-child {
border-top: none; border-top: none;
} }
.ui.horizontal.segments:not(.stackable) > .segment:first-child { .ui.horizontal.segments:not(.stackable) > .segment:first-child {
border-left: none; border-inline-start: none;
} }
.ui.horizontal.segments > .segment:first-child { .ui.horizontal.segments > .segment:first-child {
border-radius: 0.28571429rem 0 0 0.28571429rem; border-radius: 0.28571429rem 0 0 0.28571429rem;
@ -126,7 +126,7 @@
} }
.ui[class*="left aligned"].segment { .ui[class*="left aligned"].segment {
text-align: left; text-align: start;
} }
.ui[class*="center aligned"].segment { .ui[class*="center aligned"].segment {
text-align: center; text-align: center;
@ -190,8 +190,7 @@
padding-bottom: 0; padding-bottom: 0;
} }
.ui.fitted.segment:not(.vertically) { .ui.fitted.segment:not(.vertically) {
padding-left: 0; padding-inline: 0;
padding-right: 0;
} }
.ui.segments .segment, .ui.segments .segment,

2
web_src/css/modules/select.css
View file

@ -11,7 +11,7 @@
.gitea-select::after { .gitea-select::after {
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 8px; inset-inline-end: 8px;
pointer-events: none; pointer-events: none;
content: ""; content: "";
width: 14px; width: 14px;

10
web_src/css/modules/switch.css
View file

@ -41,7 +41,7 @@
&.active { &.active {
z-index: 2; z-index: 2;
padding-left: var(--switch-padding-inline); padding-inline-start: var(--switch-padding-inline);
background: var(--color-active); background: var(--color-active);
outline: 1px solid var(--color-input-border); outline: 1px solid var(--color-input-border);
} }
@ -55,12 +55,12 @@
/* Corner rounding aid: item that has to crawl under it's active neighbor, /* Corner rounding aid: item that has to crawl under it's active neighbor,
so when it is hovered, there are no ugly unpainted v/^ shapes between them */ so when it is hovered, there are no ugly unpainted v/^ shapes between them */
.switch > .item:has(+ .active.item) { /* Active neighbor is next item */ .switch > .item:has(+ .active.item) { /* Active neighbor is next item */
margin-right: calc(-1 * var(--border-radius)); margin-inline-end: calc(-1 * var(--border-radius));
padding-right: calc(var(--switch-padding-inline) + var(--border-radius)); padding-inline-end: calc(var(--switch-padding-inline) + var(--border-radius));
} }
.switch > .active.item + .item { /* Active neighbor is previous item */ .switch > .active.item + .item { /* Active neighbor is previous item */
margin-left: calc(-1 * var(--border-radius)); margin-inline-start: calc(-1 * var(--border-radius));
padding-left: calc(var(--switch-padding-inline) + var(--border-radius)); padding-inline-start: calc(var(--switch-padding-inline) + var(--border-radius));
} }
/* Make counters embedded into items more visible on brighter backgrounds */ /* Make counters embedded into items more visible on brighter backgrounds */

27
web_src/css/modules/table.css
View file

@ -35,10 +35,10 @@
vertical-align: inherit; vertical-align: inherit;
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
border-left: none; border-inline-start: none;
} }
.ui.table > thead > tr > th:first-child { .ui.table > thead > tr > th:first-child {
border-left: none; border-inline-start: none;
} }
.ui.table > thead > tr:first-child > th:first-child { .ui.table > thead > tr:first-child > th:first-child {
border-radius: 0.28571429rem 0 0; border-radius: 0.28571429rem 0 0;
@ -62,7 +62,7 @@
} }
.ui.table > tfoot > tr > th:first-child, .ui.table > tfoot > tr > th:first-child,
.ui.table > tfoot > tr > td:first-child { .ui.table > tfoot > tr > td:first-child {
border-left: none; border-inline-start: none;
} }
.ui.table > tfoot > tr:first-child > th:first-child, .ui.table > tfoot > tr:first-child > th:first-child,
.ui.table > tfoot > tr:first-child > td:first-child { .ui.table > tfoot > tr:first-child > td:first-child {
@ -154,7 +154,7 @@
.ui.table[class*="left aligned"], .ui.table[class*="left aligned"],
.ui.table [class*="left aligned"] { .ui.table [class*="left aligned"] {
text-align: left; text-align: start;
} }
.ui.table[class*="center aligned"], .ui.table[class*="center aligned"],
@ -164,7 +164,7 @@
.ui.table[class*="right aligned"], .ui.table[class*="right aligned"],
.ui.table [class*="right aligned"] { .ui.table [class*="right aligned"] {
text-align: right; text-align: end;
} }
.ui.table[class*="top aligned"], .ui.table[class*="top aligned"],
@ -301,7 +301,7 @@
.ui.basic.table > tfoot > tr > th, .ui.basic.table > tfoot > tr > th,
.ui.basic.table > tr > th { .ui.basic.table > tr > th {
background: transparent; background: transparent;
border-left: none; border-inline-start: none;
} }
.ui.basic.table > tbody > tr { .ui.basic.table > tbody > tr {
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
@ -325,7 +325,7 @@
.ui[class*="very basic"].table:not(.striped) > tr > td: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) > tbody > tr > td:first-child,
.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:first-child { .ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:first-child {
padding-left: 0; padding-inline-start: 0;
} }
.ui[class*="very basic"].table:not(.striped) > tr > th:last-child, .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) > thead > tr > th:last-child,
@ -334,7 +334,7 @@
.ui[class*="very basic"].table:not(.striped) > tr > td: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) > tbody > tr > td:last-child,
.ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:last-child { .ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:last-child {
padding-right: 0; padding-inline-end: 0;
} }
.ui[class*="very basic"].table:not(.striped) > thead > tr:first-child > th { .ui[class*="very basic"].table:not(.striped) > thead > tr:first-child > th {
padding-top: 0; padding-top: 0;
@ -347,7 +347,7 @@
.ui.celled.table > tr > td, .ui.celled.table > tr > td,
.ui.celled.table > tbody > tr > td, .ui.celled.table > tbody > tr > td,
.ui.celled.table > tfoot > tr > td { .ui.celled.table > tfoot > tr > td {
border-left: 1px solid var(--color-secondary-alpha-50); border-inline-start: 1px solid var(--color-secondary-alpha-50);
} }
.ui.celled.table > tr > th:first-child, .ui.celled.table > tr > th:first-child,
.ui.celled.table > thead > tr > th:first-child, .ui.celled.table > thead > tr > th:first-child,
@ -356,15 +356,14 @@
.ui.celled.table > tr > td:first-child, .ui.celled.table > tr > td:first-child,
.ui.celled.table > tbody > tr > td:first-child, .ui.celled.table > tbody > tr > td:first-child,
.ui.celled.table > tfoot > tr > td:first-child { .ui.celled.table > tfoot > tr > td:first-child {
border-left: none; border-inline-start: none;
} }
.ui.compact.table > tr > th, .ui.compact.table > tr > th,
.ui.compact.table > thead > tr > th, .ui.compact.table > thead > tr > th,
.ui.compact.table > tbody > tr > th, .ui.compact.table > tbody > tr > th,
.ui.compact.table > tfoot > tr > th { .ui.compact.table > tfoot > tr > th {
padding-left: 0.7em; padding-inline: 0.7em;
padding-right: 0.7em;
} }
.ui.compact.table > tr > td, .ui.compact.table > tr > td,
.ui.compact.table > tbody > tr > td, .ui.compact.table > tbody > tr > td,
@ -376,10 +375,10 @@
.ui.table > thead > tr > th:first-of-type, .ui.table > thead > tr > th:first-of-type,
.ui.table > tbody > tr > td:first-of-type, .ui.table > tbody > tr > td:first-of-type,
.ui.table > tr > td:first-of-type { .ui.table > tr > td:first-of-type {
padding-left: 10px; padding-inline-start: 10px;
} }
.ui.table > thead > tr > th:last-of-type, .ui.table > thead > tr > th:last-of-type,
.ui.table > tbody > tr > td:last-of-type, .ui.table > tbody > tr > td:last-of-type,
.ui.table > tr > td:last-of-type { .ui.table > tr > td:last-of-type {
padding-right: 10px; padding-inline-end: 10px;
} }

8
web_src/css/modules/tippy.css
View file

@ -140,25 +140,25 @@
} }
.tippy-box[data-placement^="left"] > .tippy-svg-arrow { .tippy-box[data-placement^="left"] > .tippy-svg-arrow {
right: 0; inset-inline-end: 0;
} }
.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after, .tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg { .tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
transform: rotate(90deg); transform: rotate(90deg);
top: calc(50% - 3px); top: calc(50% - 3px);
left: 11px; inset-inline-start: 11px;
} }
.tippy-box[data-placement^="right"] > .tippy-svg-arrow { .tippy-box[data-placement^="right"] > .tippy-svg-arrow {
left: 0; inset-inline-start: 0;
} }
.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after, .tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg { .tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
transform: rotate(-90deg); transform: rotate(-90deg);
top: calc(50% - 3px); top: calc(50% - 3px);
right: 11px; inset-inline-end: 11px;
} }
.tippy-svg-arrow { .tippy-svg-arrow {

16
web_src/css/modules/toast.css
View file

@ -44,11 +44,11 @@
} }
.toastify-right { .toastify-right {
right: 15px; inset-inline-end: 15px;
} }
.toastify-left { .toastify-left {
left: 15px; inset-inline-start: 15px;
} }
.toastify-top { .toastify-top {
@ -60,18 +60,14 @@
} }
.toastify-center { .toastify-center {
margin-left: auto; margin-inline: auto;
margin-right: auto; inset-inline: 0;
left: 0;
right: 0;
} }
@media (max-width: 360px) { @media (max-width: 360px) {
.toastify-right, .toastify-left { .toastify-right, .toastify-left {
margin-left: auto; margin-inline: auto;
margin-right: auto; inset-inline: 0;
left: 0;
right: 0;
max-width: fit-content; max-width: fit-content;
} }
} }

2
web_src/css/modules/user-cards.css
View file

@ -41,7 +41,7 @@
.user-cards .card .avatar { .user-cards .card .avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: 14px; margin-inline-end: 14px;
} }
.user-cards .card .name { .user-cards .card .name {

20
web_src/css/org.css
View file

@ -15,18 +15,18 @@
width: 800px !important; width: 800px !important;
} }
.organization.new.org form .header { .organization.new.org form .header {
padding-left: 280px !important; padding-inline-start: 280px !important;
} }
.organization.new.org form .inline.field > label { .organization.new.org form .inline.field > label {
text-align: right; text-align: end;
width: 250px !important; width: 250px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.organization.new.org form .help { .organization.new.org form .help {
margin-left: 265px !important; margin-inline-start: 265px !important;
} }
.organization.new.org form .optional .title { .organization.new.org form .optional .title {
margin-left: 250px !important; margin-inline-start: 250px !important;
} }
.organization.new.org form .inline.field > input, .organization.new.org form .inline.field > input,
.organization.new.org form .inline.field > textarea { .organization.new.org form .inline.field > textarea {
@ -36,7 +36,7 @@
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.organization.new.org form .optional .title { .organization.new.org form .optional .title {
margin-left: 15px; margin-inline-start: 15px;
} }
.organization.new.org form .inline.field > label { .organization.new.org form .inline.field > label {
display: block; display: block;
@ -44,7 +44,7 @@
} }
.organization.new.org form .header { .organization.new.org form .header {
padding-left: 0 !important; padding-inline-start: 0 !important;
text-align: center; text-align: center;
} }
@ -151,7 +151,7 @@
.page-content.organization .members .ui.avatar { .page-content.organization .members .ui.avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: 5px; margin-inline-end: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -161,12 +161,12 @@
} }
.organization.invite #invite-box #search-user-box input { .organization.invite #invite-box #search-user-box input {
margin-left: 0; margin-inline-start: 0;
width: 300px; width: 300px;
} }
.organization.invite #invite-box .ui.button { .organization.invite #invite-box .ui.button {
margin-left: 5px; margin-inline-start: 5px;
margin-top: -3px; margin-top: -3px;
} }
@ -205,5 +205,5 @@
#add-member-modal .team-list { #add-member-modal .team-list {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-block: auto;
} }

319
web_src/css/repo.css
View file

File diff suppressed because it is too large Load diff

6
web_src/css/repo/file-view.css
View file

@ -8,7 +8,7 @@
} }
.lines-code { .lines-code {
padding-left: 5px; padding-inline-start: 5px;
} }
.file-view tr.active .lines-num, .file-view tr.active .lines-num,
@ -18,7 +18,7 @@
} }
.file-view tr.active:last-of-type .lines-code { .file-view tr.active:last-of-type .lines-code {
border-bottom-right-radius: var(--border-radius); border-end-end-radius: var(--border-radius);
} }
.file-view tr.active .lines-num { .file-view tr.active .lines-num {
@ -32,7 +32,7 @@
.file-view tr.active .lines-num::before { .file-view tr.active .lines-num::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
width: 2px; width: 2px;
height: 100%; height: 100%;
background: var(--color-highlight-fg); background: var(--color-highlight-fg);

4
web_src/css/repo/issue-label.css
View file

@ -34,7 +34,7 @@
.issue-label-list .item a { .issue-label-list .item a {
font-size: 12px; font-size: 12px;
padding-right: 10px; padding-inline-end: 10px;
color: var(--color-text-light); color: var(--color-text-light);
} }
@ -47,6 +47,6 @@
} }
.archived-label-hint { .archived-label-hint {
float: right; float: inline-end;
margin: -12px; margin: -12px;
} }

12
web_src/css/repo/issue-list.css
View file

@ -18,7 +18,7 @@
} }
.issue-list-new.button { .issue-list-new.button {
margin-right: 0; margin-inline-end: 0;
} }
.list-header-issues { .list-header-issues {
@ -31,7 +31,7 @@
} }
.issue-list-new { .issue-list-new {
order: 1; order: 1;
margin-left: auto !important; margin-inline-start: auto !important;
} }
.issue-list-search { .issue-list-search {
order: 2 !important; order: 2 !important;
@ -44,8 +44,8 @@
**/ **/
.issue-list-toolbar-right .filter.menu { .issue-list-toolbar-right .filter.menu {
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-x: auto; overflow-inline: auto;
overflow-y: hidden; overflow-block: hidden;
} }
/* The following few CSS was created with care and built with the information /* The following few CSS was created with care and built with the information
@ -89,7 +89,7 @@
} }
#issue-list .issue-meta .checklist progress { #issue-list .issue-meta .checklist progress {
margin-left: 2px; margin-inline-start: 2px;
width: 80px; width: 80px;
height: 6px; height: 6px;
display: inline-block; display: inline-block;
@ -104,7 +104,7 @@
} }
.archived-label-filter { .archived-label-filter {
margin-left: 10px; margin-inline-start: 10px;
font-size: 12px; font-size: 12px;
display: flex !important; display: flex !important;
margin-bottom: 8px; margin-bottom: 8px;

2
web_src/css/repo/linebutton.css
View file

@ -9,7 +9,7 @@
padding: 1px 4px !important; padding: 1px 4px !important;
position: absolute; position: absolute;
font-family: var(--fonts-regular); font-family: var(--fonts-regular);
left: 0; inset-inline-start: 0;
transform: translateX(calc(-50% + 6px)); transform: translateX(calc(-50% + 6px));
cursor: pointer; cursor: pointer;
} }

5
web_src/css/repo/list-header.css
View file

@ -8,8 +8,7 @@
.list-header-sort { .list-header-sort {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 1rem; padding-inline: 1rem;
padding-right: 1rem;
} }
.list-header-search { .list-header-search {
@ -35,6 +34,6 @@
} }
.list-header-sort { .list-header-sort {
order: 2; order: 2;
margin-left: auto; margin-inline-start: auto;
} }
} }

25
web_src/css/repo/release-tag.css
View file

@ -1,6 +1,6 @@
#release-list { #release-list {
margin-top: 10px; /* Overriding browser default for <ul>, same value as divider */ margin-top: 10px; /* Overriding browser default for <ul>, same value as divider */
padding-left: 0; /* Unset browser default */ padding-inline-start: 0; /* Unset browser default */
} }
#release-list > li { #release-list > li {
@ -24,7 +24,7 @@
grid-column: 1; grid-column: 1;
grid-row: 1 / span 2; grid-row: 1 / span 2;
flex-direction: column; flex-direction: column;
text-align: right; text-align: end;
/* Align contents of meta column with release name */ /* Align contents of meta column with release name */
padding-top: 11px; padding-top: 11px;
@ -37,7 +37,7 @@
} }
:is(.detail, .release-title-wrap) { :is(.detail, .release-title-wrap) {
/* Line separating columns on wide screen */ /* Line separating columns on wide screen */
border-left: 1px solid var(--color-secondary); border-inline-start: 1px solid var(--color-secondary);
padding-inline-start: 1rem; padding-inline-start: 1rem;
margin-inline-start: 1rem; margin-inline-start: 1rem;
} }
@ -75,7 +75,7 @@
order: 2 !important; order: 2 !important;
} }
.release-list-buttons { .release-list-buttons {
margin-left: auto; margin-inline-start: auto;
} }
} }
@ -104,7 +104,7 @@
/* List of downloads */ /* List of downloads */
#release-list > li .detail .download .list { #release-list > li .detail .download .list {
/* Override <ul> default */ /* Override <ul> default */
padding-left: 0; padding-inline-start: 0;
/* Compensate emptiness that opener provides when <details> is closed */ /* Compensate emptiness that opener provides when <details> is closed */
padding-block-end: 1rem; padding-block-end: 1rem;
@ -124,14 +124,14 @@
:is(li:first-child, .start-gap + hr + li) { :is(li:first-child, .start-gap + hr + li) {
border-top: 1px solid var(--color-secondary); border-top: 1px solid var(--color-secondary);
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
} }
:is(li:last-child, .start-gap) { :is(li:last-child, .start-gap) {
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */
} }
} }
@ -156,8 +156,7 @@
} }
.repository.new.release .target .at { .repository.new.release .target .at {
margin-left: -5px; margin-inline: -5px 5px;
margin-right: 5px;
} }
.repository.new.release .target .selection.dropdown { .repository.new.release .target .selection.dropdown {
@ -174,7 +173,7 @@
} }
.ui.ui.ui.tag-label { .ui.ui.ui.tag-label {
margin-left: 0.25rem; margin-inline-start: 0.25rem;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
gap: 0.3rem; gap: 0.3rem;
} }
@ -194,7 +193,7 @@
.repository .release-tag-name .ui.label.isSigned .avatar, .repository .release-tag-name .ui.label.isSigned .avatar,
.repository .release-title-wrap .ui.label.isSigned .avatar { .repository .release-title-wrap .ui.label.isSigned .avatar {
margin-left: .5rem; margin-inline-start: .5rem;
} }
.repository .release-tag-name .ui.label.isSigned.isVerified, .repository .release-tag-name .ui.label.isSigned.isVerified,

10
web_src/css/repo/wiki.css
View file

@ -3,7 +3,7 @@
} }
.repository.wiki .wiki-pages-list .wiki-git-entry { .repository.wiki .wiki-pages-list .wiki-git-entry {
margin-left: 10px; margin-inline-start: 10px;
display: none; display: none;
} }
@ -33,13 +33,13 @@
} }
.repository.wiki .wiki-content-main.with-sidebar { .repository.wiki .wiki-content-main.with-sidebar {
float: left; float: inline-start;
width: 80%; width: 80%;
max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */ max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */
} }
.repository.wiki .wiki-content-sidebar { .repository.wiki .wiki-content-sidebar {
float: right; float: inline-end;
width: calc(20% - 1em); width: calc(20% - 1em);
min-width: 150px; min-width: 150px;
} }
@ -59,8 +59,8 @@
} }
.repository.wiki .wiki-content-toc ul ul { .repository.wiki .wiki-content-toc ul ul {
border-left: 1px var(--color-secondary); border-inline-start: 1px var(--color-secondary);
border-left-style: dashed; border-inline-start-style: dashed;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {

17
web_src/css/review.css
View file

@ -15,7 +15,7 @@
.ui.button.add-code-comment { .ui.button.add-code-comment {
padding: 2px; padding: 2px;
position: absolute; position: absolute;
margin-left: -22px; margin-inline-start: -22px;
z-index: 5; z-index: 5;
opacity: 0; opacity: 0;
transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out;
@ -36,7 +36,7 @@
} }
.repository .diff-file-box .code-diff td.lines-escape { .repository .diff-file-box .code-diff td.lines-escape {
padding-left: 0 !important; padding-inline-start: 0 !important;
} }
.diff-file-box .lines-code:hover .ui.button.add-code-comment { .diff-file-box .lines-code:hover .ui.button.add-code-comment {
@ -52,8 +52,7 @@
.repository .diff-file-box .code-diff .add-code-comment .add-comment-left, .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 .add-comment-right,
.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker { .repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
padding-left: 0 !important; padding-inline: 0 !important;
padding-right: 0 !important;
} }
.add-comment-left.add-comment-right .ui.attached.header { .add-comment-left.add-comment-right .ui.attached.header {
@ -86,7 +85,7 @@
} }
.add-comment .comment-code-cloud form { .add-comment .comment-code-cloud form {
margin-left: 42px; margin-inline-start: 42px;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
@ -109,13 +108,13 @@
flex-shrink: 0; flex-shrink: 0;
} }
.comment-code-cloud .comments .comment .avatar ~ .content { .comment-code-cloud .comments .comment .avatar ~ .content {
margin-left: 1em; margin-inline-start: 1em;
} }
.comment-code-cloud .comments .comment img.avatar { .comment-code-cloud .comments .comment img.avatar {
margin: 0 !important; margin: 0 !important;
} }
.comment-code-cloud .comments .comment .comment-content { .comment-code-cloud .comments .comment .comment-content {
margin-left: 0 !important; margin-inline-start: 0 !important;
} }
.comment-code-cloud .comments .comment.code-comment { .comment-code-cloud .comments .comment.code-comment {
padding: 0 0 0.5rem !important; padding: 0 0 0.5rem !important;
@ -180,7 +179,7 @@
} }
.diff-file-body .comment-form { .diff-file-body .comment-form {
margin-left: 3em; margin-inline-start: 3em;
} }
.diff-file-body.binary { .diff-file-body.binary {
@ -271,7 +270,7 @@
} }
.viewed-file-form input { .viewed-file-form input {
margin-right: 4px; margin-inline-end: 4px;
} }
.viewed-file-checked-form { .viewed-file-checked-form {

4
web_src/css/shared/repoorg.css
View file

@ -2,7 +2,7 @@
.organization .head .ui.header .text { .organization .head .ui.header .text {
vertical-align: middle; vertical-align: middle;
font-size: 1.6rem; font-size: 1.6rem;
margin-left: 15px; margin-inline-start: 15px;
} }
.repository .ui.tabs.container, .repository .ui.tabs.container,
@ -13,6 +13,6 @@
.repository .head .ui.header .org-visibility .label, .repository .head .ui.header .org-visibility .label,
.organization .head .ui.header .org-visibility .label { .organization .head .ui.header .org-visibility .label {
margin-left: 5px; margin-inline-start: 5px;
margin-top: 5px; margin-top: 5px;
} }

4
web_src/css/standalone/swagger.css
View file

@ -14,7 +14,7 @@ body {
text-decoration: none; text-decoration: none;
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 1.5rem; inset-inline-end: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -26,7 +26,7 @@ body {
.swagger-back-link svg { .swagger-back-link svg {
color: inherit; color: inherit;
fill: currentcolor; fill: currentcolor;
margin-right: 0.5rem; margin-inline-end: 0.5rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

2
web_src/css/themes/theme-forgejo-dark.css
View file

@ -336,7 +336,7 @@ i.grey.icon.icon.icon.icon {
#review-box .review-comments-counter { #review-box .review-comments-counter {
background-color: var(--color-shadow) !important; background-color: var(--color-shadow) !important;
color: var(--color-white) !important; color: var(--color-white) !important;
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
.ui.basic.labels .primary.label, .ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label { .ui.ui.ui.basic.primary.label {

2
web_src/css/themes/theme-forgejo-light.css
View file

@ -307,7 +307,7 @@
} }
#review-box .review-comments-counter { #review-box .review-comments-counter {
background-color: var(--color-label-bg) !important; background-color: var(--color-label-bg) !important;
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
.ui.basic.labels .primary.label, .ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label { .ui.ui.ui.basic.primary.label {

2
web_src/css/user.css
View file

@ -75,7 +75,7 @@
} }
.user.settings .iconFloat { .user.settings .iconFloat {
float: left; float: inline-start;
} }
.user-orgs { .user-orgs {

10
web_src/js/components/ActionJobStep.vue
View file

@ -235,7 +235,7 @@ export default {
} }
.job-step-summary .step-summary-duration { .job-step-summary .step-summary-duration {
margin-left: 16px; margin-inline-start: 16px;
} }
.job-step-summary.selected { .job-step-summary.selected {
@ -263,7 +263,7 @@ export default {
flex: 1; flex: 1;
word-break: break-all; word-break: break-all;
white-space: break-spaces; white-space: break-spaces;
margin-left: 10px; margin-inline-start: 10px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
color: var(--color-console-fg); color: var(--color-console-fg);
} }
@ -281,7 +281,7 @@ export default {
.job-log-line .line-num, .log-time-seconds { .job-log-line .line-num, .log-time-seconds {
width: 48px; width: 48px;
color: var(--color-text-light-3); color: var(--color-text-light-3);
text-align: right; text-align: end;
user-select: none; user-select: none;
} }
@ -291,13 +291,13 @@ export default {
} }
.log-time-seconds { .log-time-seconds {
padding-right: 2px; padding-inline-end: 2px;
} }
.job-log-line .log-time, .job-log-line .log-time,
.log-time-stamp { .log-time-stamp {
color: var(--color-text-light-3); color: var(--color-text-light-3);
margin-left: 10px; margin-inline-start: 10px;
white-space: nowrap; white-space: nowrap;
} }

10
web_src/js/components/DashboardRepoList.vue
View file

@ -466,7 +466,7 @@ export default {
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-left: 0; padding-inline-start: 0;
} }
ul li { ul li {
@ -487,8 +487,7 @@ ul li:not(:last-child) {
} }
.repos-filter .item { .repos-filter .item {
padding-left: 6px !important; padding-inline: 6px !important;
padding-right: 6px !important;
} }
.repo-list-link { .repo-list-link {
@ -505,15 +504,14 @@ ul li:not(:last-child) {
.repo-list-icon { .repo-list-icon {
min-width: 16px; min-width: 16px;
margin-right: 2px; margin-inline-end: 2px;
} }
/* octicon-mirror has no padding inside the SVG */ /* octicon-mirror has no padding inside the SVG */
.repo-list-icon.octicon-mirror { .repo-list-icon.octicon-mirror {
width: 14px; width: 14px;
min-width: 14px; min-width: 14px;
margin-left: 1px; margin-inline: 1px 3px;
margin-right: 3px;
} }
.repo-owner-name-list li.active { .repo-owner-name-list li.active {

2
web_src/js/components/DiffCommitSelector.vue
View file

@ -275,7 +275,7 @@ export default {
} }
#diff-commit-selector-menu { #diff-commit-selector-menu {
overflow-x: hidden; overflow-inline: hidden;
max-height: 450px; max-height: 450px;
} }

2
web_src/js/components/DiffFileTree.vue
View file

@ -139,6 +139,6 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 1px;
margin-right: .5rem; margin-inline-end: .5rem;
} }
</style> </style>

6
web_src/js/components/DiffFileTreeItem.vue
View file

@ -61,12 +61,12 @@ a, a:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1px; gap: 1px;
margin-left: 13px; margin-inline-start: 13px;
border-left: 1px solid var(--color-secondary); border-inline-start: 1px solid var(--color-secondary);
} }
.sub-items .item-file { .sub-items .item-file {
padding-left: 18px; padding-inline-start: 18px;
} }
.item-file.selected { .item-file.selected {

9
web_src/js/components/PullRequestMergeForm.vue
View file

@ -203,8 +203,7 @@ export default {
position: static; position: static;
} }
.ui.merge-button > .ui.dropdown:last-child > .menu:not(.left) { .ui.merge-button > .ui.dropdown:last-child > .menu:not(.left) {
left: 0; inset-inline: 0 auto;
right: auto;
} }
.ui.merge-button .ui.dropdown .menu > .item { .ui.merge-button .ui.dropdown .menu > .item {
display: flex; display: flex;
@ -227,7 +226,7 @@ export default {
} }
.auto-merge-small .auto-merge-tip { .auto-merge-small .auto-merge-tip {
display: none; display: none;
left: 38px; inset-inline-start: 38px;
top: -0.5px; top: -0.5px;
bottom: -1px; bottom: -1px;
position: absolute; position: absolute;
@ -235,8 +234,8 @@ export default {
color: var(--color-info-text); color: var(--color-info-text);
background-color: var(--color-info-bg); background-color: var(--color-info-bg);
border: 1px solid var(--color-info-border); border: 1px solid var(--color-info-border);
border-left: none; border-inline-start: none;
padding-right: 1rem; padding-inline-end: 1rem;
} }
.menu .item:has(.auto-merge-small:hover) { .menu .item:has(.auto-merge-small:hover) {

14
web_src/js/components/RepoActionView.vue
View file

@ -638,7 +638,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--button-spacing); gap: var(--button-spacing);
margin-left: auto; margin-inline-start: auto;
} }
.action-info-summary-actions > button { .action-info-summary-actions > button {
@ -656,12 +656,12 @@ export default {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5px; gap: 5px;
margin-left: 28px; margin-inline-start: 28px;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.action-commit-summary { .action-commit-summary {
margin-left: 0; margin-inline-start: 0;
margin-top: 8px; margin-top: 8px;
} }
} }
@ -675,7 +675,7 @@ export default {
position: sticky; position: sticky;
top: 12px; top: 12px;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-block: auto;
background: var(--color-body); background: var(--color-body);
z-index: 2; /* above .job-info-header */ z-index: 2; /* above .job-info-header */
} }
@ -701,12 +701,12 @@ export default {
} }
.job-artifacts-list { .job-artifacts-list {
padding-left: 12px; padding-inline-start: 12px;
list-style: none; list-style: none;
} }
.job-artifacts-icon { .job-artifacts-icon {
padding-right: 3px; padding-inline-end: 3px;
} }
.job-brief-list { .job-brief-list {
@ -827,7 +827,7 @@ export default {
} }
.action-view-right .ui.dropdown.dark-dropdown .menu > .divider { .action-view-right .ui.dropdown.dark-dropdown .menu > .divider {
border-top-color: var(--color-console-menu-border); border-block-start-color: var(--color-console-menu-border);
} }
.action-view-right .ui.pointing.dropdown.dark-dropdown > .menu:not(.hidden)::after { .action-view-right .ui.pointing.dropdown.dark-dropdown > .menu:not(.hidden)::after {

4
web_src/js/components/RepoBranchTagSelector.vue
View file

@ -287,8 +287,8 @@ export default {
.branch-tag-item.active { .branch-tag-item.active {
border-color: var(--color-secondary); border-color: var(--color-secondary);
background: var(--color-menu); background: var(--color-menu);
border-top-left-radius: var(--border-radius); border-start-start-radius: var(--border-radius);
border-top-right-radius: var(--border-radius); border-start-end-radius: var(--border-radius);
} }
.branch-tag-divider { .branch-tag-divider {