diff --git a/package-lock.json b/package-lock.json index 5cc3fc5137..35fe4a8bbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -116,6 +116,7 @@ "stylelint": "16.26.1", "stylelint-declaration-block-no-ignored-properties": "2.8.0", "stylelint-declaration-strict-value": "1.11.1", + "stylelint-plugin-logical-css": "2.1.0", "stylelint-value-no-unknown-custom-properties": "6.1.1", "svgo": "4.0.1", "typescript": "5.9.3", @@ -14758,6 +14759,16 @@ "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": { "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", diff --git a/package.json b/package.json index bd3a5eb376..6b83ddb0c3 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "stylelint": "16.26.1", "stylelint-declaration-block-no-ignored-properties": "2.8.0", "stylelint-declaration-strict-value": "1.11.1", + "stylelint-plugin-logical-css": "2.1.0", "stylelint-value-no-unknown-custom-properties": "6.1.1", "svgo": "4.0.1", "typescript": "5.9.3", diff --git a/stylelint.config.js b/stylelint.config.js index 18f9af68b7..b7cc162669 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -11,6 +11,7 @@ export default { plugins: [ 'stylelint-declaration-strict-value', 'stylelint-declaration-block-no-ignored-properties', + 'stylelint-plugin-logical-css', 'stylelint-value-no-unknown-custom-properties', '@stylistic/stylelint-plugin', ], @@ -173,6 +174,16 @@ export default { 'keyframe-selector-notation': null, 'keyframes-name-pattern': null, '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, 'media-feature-name-allowed-list': null, 'media-feature-name-disallowed-list': null, diff --git a/web_src/css/actions.css b/web_src/css/actions.css index cb96bdeac6..82149378b9 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -3,11 +3,11 @@ } .runner-container .ui.table.segment { - overflow-x: auto; + overflow-inline: auto; } .runner-container .runner-ops > a { - margin-left: 0.5em; + margin-inline-start: 0.5em; } .runner-container .runner-ops-delete { @@ -124,7 +124,7 @@ flex: none; font-weight: var(--font-weight-medium); width: 12rem; - padding-right: 1.5rem; + padding-inline-end: 1.5rem; } .runner-container dl dd { @@ -178,12 +178,11 @@ } #workflow_dispatch_dropdown .menu { max-height: 500px; - overflow-x: auto; + overflow-inline: auto; } @media (max-width: 640px) or (767.98px < width < 854px) { #workflow_dispatch_dropdown .menu { - left: auto; - right: 0; + inset-inline: auto 0; } } @@ -210,7 +209,7 @@ .ui.vertical.menu.actions-menu .item .error { display: flex; align-items: center; - margin-left: 1rem; + margin-inline-start: 1rem; } .ui.vertical.menu.actions-menu .item .label { diff --git a/web_src/css/admin.css b/web_src/css/admin.css index 873b1bf91e..1c041dd6f0 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -24,7 +24,7 @@ } .admin dl.admin-dl-horizontal dd { - margin-left: auto; + margin-inline-start: auto; width: calc(100% - 300px - 1em); min-width: 100px; } @@ -36,7 +36,7 @@ } .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 { diff --git a/web_src/css/base.css b/web_src/css/base.css index 0ac81dca26..0f1b122fa6 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -74,7 +74,7 @@ body { tab-size: var(--tab-size); display: flex; flex-direction: column; - overflow-x: visible; + overflow-inline: visible; overflow-wrap: break-word; text-autospace: normal; text-spacing-trim: normal; @@ -390,7 +390,7 @@ a.label, } .ui.menu .item > .svg { - margin-right: 0.35em; + margin-inline-end: 0.35em; } .ui.menu .dropdown.item:hover, @@ -479,7 +479,7 @@ a.label, margin-bottom: -0.25rem; } .ui.dropdown .menu > .item > svg { - margin-right: .78rem; /* use the same margin as for */ + margin-inline-end: .78rem; /* use the same margin as for */ } .ui.selection.dropdown .menu > .item { @@ -508,9 +508,8 @@ a.label, /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */ .ui.dropdown > .text > .img { - margin-left: 0; + margin-inline: 0 0.78571429rem; float: none; - margin-right: 0.78571429rem; } .ui.dropdown > .text > .description, @@ -521,13 +520,11 @@ a.label, /* replace item margin on secondary menu items with gap and remove both the negative margins on the menu as well as margin on the items */ .ui.secondary.menu { - margin-left: 0; - margin-right: 0; + margin-inline: 0; gap: .35714286em; } .ui.secondary.menu .item { - margin-left: 0; - margin-right: 0; + margin-inline: 0; } .ui.secondary.menu .dropdown.item:hover, @@ -769,15 +766,15 @@ img.ui.avatar, } .ui .text.left { - text-align: left !important; + text-align: start !important; } .ui .text.right { - text-align: right !important; + text-align: end !important; } .ui .text.truncate { - overflow-x: hidden; + overflow-inline: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; @@ -788,14 +785,13 @@ img.ui.avatar, } .ui .message > ul { - margin-left: auto; - margin-right: auto; + margin-inline: auto; display: table; - text-align: left; + text-align: start; } .ui .header > i + .content { - padding-left: 0.75rem; + padding-inline-start: 0.75rem; vertical-align: middle; } @@ -808,7 +804,7 @@ img.ui.avatar, } .ui .form .sub.field { - margin-left: 25px; + margin-inline-start: 25px; } .ui .button.truncate { @@ -818,11 +814,11 @@ img.ui.avatar, text-overflow: ellipsis; vertical-align: top; white-space: nowrap; - margin-right: 6px; + margin-inline-end: 6px; } .ui.status.buttons .svg { - margin-right: 4px; + margin-inline-end: 4px; } .ui.inline.delete-button { @@ -902,14 +898,13 @@ img.ui.avatar, } .ui.pagination.menu.narrow .item { - padding-left: 8px; - padding-right: 8px; + padding-inline: 8px; min-width: 1em; text-align: center; } .ui.pagination.menu.narrow .item .icon { - margin-right: 0; + margin-inline-end: 0; } .ui.floating.dropdown .overflow.menu .scrolling.menu.items { @@ -933,7 +928,7 @@ img.ui.avatar, .color-preview { display: inline-block; - margin-left: 0.4em; + margin-inline-start: 0.4em; height: 0.67em; width: 0.67em; border-radius: var(--border-radius); @@ -949,35 +944,35 @@ img.ui.avatar, } 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 { color: var(--color-blue-dark-1); } blockquote.attention-tip { - border-left-color: var(--color-success-text); + border-inline-start-color: var(--color-success-text); } strong.attention-tip, svg.attention-tip { color: var(--color-success-text); } blockquote.attention-important { - border-left-color: var(--color-violet-dark-1); + border-inline-start-color: var(--color-violet-dark-1); } strong.attention-important, svg.attention-important { color: var(--color-violet-dark-1); } blockquote.attention-warning { - border-left-color: var(--color-warning-text); + border-inline-start-color: var(--color-warning-text); } strong.attention-warning, svg.attention-warning { color: var(--color-warning-text); } blockquote.attention-caution { - border-left-color: var(--color-red-dark-1); + border-inline-start-color: var(--color-red-dark-1); } strong.attention-caution, svg.attention-caution { color: var(--color-red-dark-1); @@ -990,7 +985,7 @@ strong.attention-caution, svg.attention-caution { overflow-menu { border-bottom: 1px solid var(--color-secondary) !important; display: flex; - overflow-x: auto; + overflow-inline: auto; } overflow-menu .overflow-menu-items { @@ -1008,7 +1003,7 @@ overflow-menu .overflow-menu-items .item > .svg { } overflow-menu .ui.label { - margin-left: 7px !important; /* save some space */ + margin-inline-start: 7px !important; /* save some space */ } .activity-bar-graph { @@ -1058,7 +1053,7 @@ overflow-menu .ui.label { .lines-num { padding: 0 8px; - text-align: right !important; + text-align: end !important; color: var(--color-text-light-2); width: 1%; font-family: var(--fonts-monospace); @@ -1105,7 +1100,7 @@ overflow-menu .ui.label { .lines-code ol li { display: block; width: calc(100% - 1ch); - padding-left: 1ch; + padding-inline-start: 1ch; } .code-inner { @@ -1156,7 +1151,7 @@ overflow-menu .ui.label { .blame-avatar { display: flex; align-items: center; - margin-right: 4px; + margin-inline-end: 4px; } .top-line-blame { @@ -1201,7 +1196,7 @@ table th[data-sortt-desc]:hover { table th[data-sortt-asc] .svg, table th[data-sortt-desc] .svg { - margin-left: 0.25rem; + margin-inline-start: 0.25rem; } .ui.dropdown .menu .item { @@ -1291,7 +1286,7 @@ table th[data-sortt-desc] .svg { .flash-error details code, .flash-warning details code { display: block; - text-align: left; + text-align: start; } .truncated-item-container { @@ -1320,7 +1315,7 @@ table th[data-sortt-desc] .svg { display: flex; flex-direction: column; justify-content: center; - margin-left: 1em; + margin-inline-start: 1em; } .precolors .color { @@ -1341,13 +1336,13 @@ table th[data-sortt-desc] .svg { .ui.dropdown.mini.button, .ui.dropdown.tiny.button { - padding-right: 20px; + padding-inline-end: 20px; } .ui.dropdown.button { - padding-right: 22px; + padding-inline-end: 22px; } .ui.dropdown.large.button { - padding-right: 24px; + padding-inline-end: 24px; } /* Gitea uses SVG images instead of Fomantic builtin "" 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 { - right: 0.5em; + inset-inline-end: 0.5em; } .ui.ui.dropdown > .remove.icon { - right: 2em; + inset-inline-end: 2em; } .btn, diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css index bce13332f8..deac36063b 100644 --- a/web_src/css/chroma/base.css +++ b/web_src/css/chroma/base.css @@ -25,13 +25,13 @@ /* LineNumbersTable */ .chroma .lnt { - margin-right: 0.4em; + margin-inline-end: 0.4em; padding: 0 0.4em; } /* LineNumbers */ .chroma .ln { - margin-right: 0.4em; + margin-inline-end: 0.4em; padding: 0 0.4em; } diff --git a/web_src/css/codemirror/base.css b/web_src/css/codemirror/base.css index aedf7d8560..556639e71f 100644 --- a/web_src/css/codemirror/base.css +++ b/web_src/css/codemirror/base.css @@ -15,7 +15,7 @@ } .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 { diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css index 9c81ccc38a..44f56efaf9 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -17,7 +17,7 @@ .dashboard.feeds .filter.menu .item, .dashboard.issues .filter.menu .item { - text-align: left; + text-align: start; display: flex; align-items: center; justify-content: space-between; @@ -32,15 +32,14 @@ .dashboard.feeds .filter.menu .jump.item, .dashboard.issues .filter.menu .jump.item { margin: 1px; - padding-right: 0; + padding-inline-end: 0; } .dashboard.feeds .filter.menu .menu, .dashboard.issues .filter.menu .menu { max-height: 300px; - overflow-x: auto; - right: 0 !important; - left: auto !important; + overflow-inline: auto; + inset-inline: auto 0 !important; } @media (max-width: 767.98px) { @@ -64,11 +63,11 @@ } .dashboard .secondary-nav .right.menu div.item { - padding-left: 0.5rem; + padding-inline-start: 0.5rem; } .dashboard .secondary-nav .org-visibility .label { - margin-left: 5px; + margin-inline-start: 5px; } .dashboard .secondary-nav .ui.dropdown { diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css index 77af4cb87b..2a1593b091 100644 --- a/web_src/css/editor/combomarkdowneditor.css +++ b/web_src/css/editor/combomarkdowneditor.css @@ -47,7 +47,7 @@ display: block; width: 100%; max-height: calc(100vh - var(--min-height-textarea)); - resize: vertical; + resize: block; } .combo-markdown-editor .CodeMirror-scroll { @@ -127,7 +127,7 @@ text-expander .suggestions li:hover { text-expander .suggestions .fullname { font-weight: var(--font-weight-normal); - margin-left: 4px; + margin-inline-start: 4px; color: var(--color-text-light-1); } @@ -140,5 +140,5 @@ text-expander .suggestions li[aria-selected="true"] span { text-expander .suggestions img { width: 24px; height: 24px; - margin-right: 8px; + margin-inline-end: 8px; } diff --git a/web_src/css/editor/fileeditor.css b/web_src/css/editor/fileeditor.css index 444ee8c7e7..287a4c7caa 100644 --- a/web_src/css/editor/fileeditor.css +++ b/web_src/css/editor/fileeditor.css @@ -7,8 +7,8 @@ } .repository.file.editor .tab[data-tab="write"] .CodeMirror { - border-left: 0; - border-right: 0; + border-inline-start: 0; + border-inline-end: 0; border-bottom: 0; } @@ -36,8 +36,8 @@ } .editor-toolbar i.separator { - border-left: none; - border-right-color: var(--color-secondary); + border-inline-start: none; + border-inline-end-color: var(--color-secondary); } .editor-toolbar button:hover { diff --git a/web_src/css/explore.css b/web_src/css/explore.css index 5cdee823c0..0a09592eeb 100644 --- a/web_src/css/explore.css +++ b/web_src/css/explore.css @@ -5,7 +5,7 @@ .explore .secondary-nav .svg { width: 16px; text-align: center; - margin-right: 5px; + margin-inline-end: 5px; } .ui.repository.branches .info { @@ -27,5 +27,5 @@ /* fix alignment of PR popup in branches table */ .ui.repository.branches table .ui.popup { - text-align: left; + text-align: start; } diff --git a/web_src/css/features/codeeditor.css b/web_src/css/features/codeeditor.css index afa6637654..9b45e4e669 100644 --- a/web_src/css/features/codeeditor.css +++ b/web_src/css/features/codeeditor.css @@ -16,7 +16,7 @@ #editor-bar { gap: var(--button-spacing); .switch { - overflow-x: scroll; + overflow-inline: scroll; } } } @@ -24,7 +24,7 @@ .cm-panel.fj-search { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; background-color: var(--color-body); box-shadow: 0 6px 18px var(--color-shadow); border-radius: 0.3rem; diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index b7436783df..30b6bc7cc2 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -6,14 +6,14 @@ .js-color-picker-input input { padding-top: 8px !important; padding-bottom: 8px !important; - padding-left: 32px !important; + padding-inline-start: 32px !important; } .js-color-picker-input .preview-square { position: absolute; aspect-ratio: 1; height: 16px; - left: 10px; + inset-inline-start: 10px; top: 50%; transform: translateY(-50%); border-radius: 2px; diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 9f44e884b7..1ba09118d8 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -1,5 +1,5 @@ #git-graph-content { - overflow-x: auto; + overflow-inline: auto; width: 100%; min-height: 250px; } @@ -25,7 +25,7 @@ } #git-graph-heading-left { - margin-right: 1rem; + margin-inline-end: 1rem; } #git-graph-heading h2 { @@ -102,8 +102,8 @@ #git-graph-container #rel-container { max-width: 30%; - overflow-x: auto; - float: left; + overflow-inline: auto; + float: inline-start; } #git-graph-container #rev-list { @@ -117,7 +117,7 @@ #git-graph-container #rev-list .commit-refs .button { padding: 2px 4px; - margin-right: 0.25em; + margin-inline-end: 0.25em; display: inline-block; max-width: 200px; overflow: hidden; diff --git a/web_src/css/features/heatmap.css b/web_src/css/features/heatmap.css index c064590c46..f2b0609186 100644 --- a/web_src/css/features/heatmap.css +++ b/web_src/css/features/heatmap.css @@ -40,19 +40,19 @@ font-size: 11px; position: absolute; bottom: 0; - left: 25px; + inset-inline-start: 25px; } @media (max-width: 1200px) { #user-heatmap .total-contributions { - left: 21px; + inset-inline-start: 21px; } } @media (max-width: 1000px) { #user-heatmap .total-contributions { font-size: 10px; - left: 17px; + inset-inline-start: 17px; bottom: -4px; } } diff --git a/web_src/css/features/imagediff.css b/web_src/css/features/imagediff.css index c8ead2ba4a..95ff384f19 100644 --- a/web_src/css/features/imagediff.css +++ b/web_src/css/features/imagediff.css @@ -54,28 +54,28 @@ .image-diff-container .diff-swipe .swipe-frame .swipe-container { position: absolute; - right: 0; + inset-inline-end: 0; display: block; - border-left: 2px solid var(--color-secondary-dark-8); + border-inline-start: 2px solid var(--color-secondary-dark-8); height: 100%; overflow: hidden; } .image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container { position: absolute; - right: 0; + inset-inline-end: 0; } .image-diff-container .diff-swipe .swipe-frame .swipe-bar { position: absolute; height: 100%; top: 0; - left: 0; + inset-inline-start: 0; } .image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle { background: var(--color-secondary-dark-8); - left: -5px; + inset-inline-start: -5px; height: 12px; width: 12px; position: absolute; diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 3a1808dfe3..939357d429 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -2,7 +2,7 @@ display: flex; flex-direction: row; flex-wrap: nowrap; - overflow-x: auto; + overflow-inline: auto; margin: 0 0.5em; } @@ -15,7 +15,7 @@ width: 320px; height: calc(100vh - 450px); min-height: 60vh; - overflow-y: scroll; + overflow-block: scroll; flex: 0 0 auto; overflow: visible; display: flex; @@ -57,7 +57,7 @@ padding: 0 !important; flex-wrap: nowrap !important; flex-direction: column; - overflow-x: auto; + overflow-inline: auto; gap: .25rem; } @@ -68,11 +68,11 @@ } .project-column:first-child { - margin-left: auto !important; + margin-inline-start: auto !important; } .project-column:last-child { - margin-right: auto !important; + margin-inline-end: auto !important; } .card-attachment-images { @@ -87,8 +87,8 @@ display: inline-block; max-height: 50px; border-radius: var(--border-radius); - text-align: left; - margin-right: 2px; + text-align: start; + margin-inline-end: 2px; aspect-ratio: 1; } diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css index bd843675e1..f18d2bfea2 100644 --- a/web_src/css/features/tribute.css +++ b/web_src/css/features/tribute.css @@ -17,7 +17,7 @@ .tribute-container li span.fullname { font-weight: var(--font-weight-normal); font-size: 0.8rem; - margin-left: 3px; + margin-inline-start: 3px; } .tribute-container li.highlight, @@ -33,7 +33,7 @@ .tribute-item .emoji, .tribute-item img[src*="/avatar/"] { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } .tribute-container img { diff --git a/web_src/css/form.css b/web_src/css/form.css index 5263d61d5d..b870d3ec0a 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -47,7 +47,7 @@ fieldset label + .ui.dropdown { fieldset label > input[type="checkbox"], fieldset label > input[type="radio"] { - margin-right: 0.75em; + margin-inline-end: 0.75em; margin-top: 0 !important; vertical-align: initial !important; /* overrides a semantic.css rule, remove when obsolete */ } @@ -298,7 +298,7 @@ input:-webkit-autofill:active, .h-captcha-style { margin: 0 auto !important; width: 304px; - padding-left: 30px; + padding-inline-start: 30px; } .g-recaptcha-style iframe, .h-captcha-style iframe { @@ -351,10 +351,10 @@ input:-webkit-autofill:active, .user.link-account form .header, .user.signin form .header, .user.signup form .header { - padding-left: 280px !important; + padding-inline-start: 280px !important; } .user.activate form .inline.field > label { - text-align: right; + text-align: end; width: 250px !important; word-wrap: break-word; } @@ -364,7 +364,7 @@ input:-webkit-autofill:active, .user.link-account form .help, .user.signin form .help, .user.signup form .help { - margin-left: 265px !important; + margin-inline-start: 265px !important; } .user.activate form .optional .title, .user.forgot.password form .optional .title, @@ -372,7 +372,7 @@ input:-webkit-autofill:active, .user.link-account form .optional .title, .user.signin 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.signin form .optional .title, .user.signup form .optional .title { - margin-left: 15px; + margin-inline-start: 15px; } .user.activate 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.signin form .header, .user.signup form .header { - padding-left: 0 !important; + padding-inline-start: 0 !important; text-align: center; } @@ -474,22 +474,22 @@ input:-webkit-autofill:active, .repository.new.repo form .header, .repository.new.migrate 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.fork form .inline.field > label { - text-align: right; + text-align: end; width: 250px !important; word-wrap: break-word; } .repository.new.migrate form .help, .repository.new.fork form .help { - margin-left: 265px !important; + margin-inline-start: 265px !important; } .repository.new.repo form .optional .title, .repository.new.migrate 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.fork form .inline.field > input, @@ -503,7 +503,7 @@ input:-webkit-autofill:active, .repository.new.repo form .optional .title, .repository.new.migrate 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.migrate form .inline.field > label, @@ -514,14 +514,14 @@ input:-webkit-autofill:active, .repository.new.migrate form .dropdown .text, .repository.new.fork form .dropdown .text { - margin-right: 0 !important; + margin-inline-end: 0 !important; } .moderation.new-report form .header, .repository.new.repo form .header, .repository.new.migrate form .header, .repository.new.fork form .header { - padding-left: 0 !important; + padding-inline-start: 0 !important; text-align: center; } @@ -557,7 +557,7 @@ input:-webkit-autofill:active, @media (min-width: 768px) { .repository.new.repo .ui.form #auto-init { - margin-left: 265px !important; + margin-inline-start: 265px !important; } } diff --git a/web_src/css/home.css b/web_src/css/home.css index 84dd793612..462a1fb6a5 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -68,14 +68,14 @@ } .page-footer .right-links > a { - border-left: 1px solid var(--color-secondary-dark-1); - padding-left: 8px; - margin-left: 8px; + border-inline-start: 1px solid var(--color-secondary-dark-1); + padding-inline-start: 8px; + margin-inline-start: 8px; } .page-footer .ui.dropdown.language .menu { max-height: min(500px, calc(100vh - 60px)); - overflow-y: auto; + overflow-block: auto; margin-bottom: 10px; } diff --git a/web_src/css/install.css b/web_src/css/install.css index df2a7cb53f..eea8db43a9 100644 --- a/web_src/css/install.css +++ b/web_src/css/install.css @@ -4,16 +4,16 @@ } .page-content.install form.ui.form .inline.field > label { - text-align: right; + text-align: end; width: 30%; - padding-right: 10px; - margin-right: 0; + padding-inline-end: 10px; + margin-inline-end: 0; } .page-content.install .ui.form .field > .help, .page-content.install .ui.form .field > .ui.checkbox:first-child, .page-content.install .ui.form .field > .right-content { - margin-left: calc(30% + 5px); + margin-inline-start: calc(30% + 5px); width: auto; } @@ -34,20 +34,20 @@ } .page-content.install form.ui.form .field { - text-align: left; + text-align: start; } .page-content.install .ui .reinstall-message { width: 70%; margin: 20px auto; color: var(--color-red); - text-align: left; + text-align: start; font-weight: var(--font-weight-semibold); } .page-content.install .ui .reinstall-confirm { width: 70%; - text-align: left; + text-align: start; margin: 10px auto; } diff --git a/web_src/css/issues.css b/web_src/css/issues.css index 28539e5eb3..9d5301b58d 100644 --- a/web_src/css/issues.css +++ b/web_src/css/issues.css @@ -9,7 +9,7 @@ .menu .item:has(> .label-filter-item) .label-exclude-item-btn { opacity: 0; position: absolute; - right: 0; + inset-inline-end: 0; height: 100%; width: 40px; background: none; @@ -34,13 +34,13 @@ max-width: 288px; @media (any-hover: none) { - padding-right: 50px !important; + padding-inline-end: 50px !important; } &:hover, &.selected, &:has(.label-exclude-item-btn.active) { - padding-right: 50px !important; + padding-inline-end: 50px !important; .label-exclude-item-btn { opacity: 1; @@ -51,7 +51,7 @@ .menu:has(> .item[data-selected]) .item:not([data-selected]) > .label-filter-item { - padding-left: 27px; + padding-inline-start: 27px; } .menu .item .label-filter-item { diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css index e3017ae962..665413d717 100644 --- a/web_src/css/markup/codecopy.css +++ b/web_src/css/markup/codecopy.css @@ -6,7 +6,7 @@ .markup .code-copy { position: absolute; top: 8px; - right: 6px; + inset-inline-end: 6px; padding: 9px; visibility: hidden; animation: fadeout 0.2s both; @@ -14,7 +14,7 @@ /* adjustments for comment content having only 14px font size */ .repository.view.issue .comment-list .comment .markup .code-copy { - right: 5px; + inset-inline-end: 5px; padding: 8px; } diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index 931f33d064..bc1f4bca78 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -23,9 +23,9 @@ } .markup .anchor { - float: left; - padding-right: 4px; - margin-left: -20px; + float: inline-start; + padding-inline-end: 4px; + margin-inline-start: -20px; color: inherit; } @@ -144,7 +144,7 @@ .markup ul, .markup ol { - padding-left: 2em; + padding-inline-start: 2em; } .markup ul.no-list, @@ -167,11 +167,11 @@ } .markup ol .task-list-item input[type="checkbox"] { - margin-left: 0; + margin-inline-start: 0; } .markup .task-list-item input[type="checkbox"] + p { - margin-left: -0.2em; + margin-inline-start: -0.2em; display: inline; } @@ -267,10 +267,10 @@ } .markup blockquote { - margin-left: 0; + margin-inline-start: 0; padding: 0 15px; 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 { @@ -328,12 +328,12 @@ .markup img[align="right"], .markup video[align="right"] { - padding-left: 20px; + padding-inline-start: 20px; } .markup img[align="left"], .markup video[align="left"] { - padding-right: 28px; + padding-inline-end: 28px; } .markup .emoji { @@ -347,7 +347,7 @@ .markup span.frame > span { display: block; - float: left; + float: inline-start; width: auto; padding: 7px; margin: 13px 0 0; @@ -358,7 +358,7 @@ .markup span.frame span img, .markup span.frame span video { display: block; - float: left; + float: inline-start; } .markup span.frame span span { @@ -397,19 +397,19 @@ display: block; margin: 13px 0 0; overflow: hidden; - text-align: right; + text-align: end; } .markup span.align-right span img, .markup span.align-right span video { margin: 0; - text-align: right; + text-align: end; } .markup span.float-left { display: block; - float: left; - margin-right: 13px; + float: inline-start; + margin-inline-end: 13px; overflow: hidden; } @@ -419,8 +419,8 @@ .markup span.float-right { display: block; - float: right; - margin-left: 13px; + float: inline-end; + margin-inline-start: 13px; overflow: hidden; } @@ -428,7 +428,7 @@ display: block; margin: 13px auto 0; overflow: hidden; - text-align: right; + text-align: end; } .markup code, @@ -508,15 +508,15 @@ .markup .ui.list .list, .markup ol.ui.list ol, .markup ul.ui.list ul { - padding-left: 2em; + padding-inline-start: 2em; } .file-revisions-btn { display: block; - float: left; + float: inline-start; margin-bottom: 2px !important; padding: 11px !important; - margin-right: 10px !important; + margin-inline-end: 10px !important; } .file-revisions-btn i { @@ -538,20 +538,20 @@ display: block !important; /* override fomantic .ui.form .error.message {display: none} */ border: none !important; margin-bottom: 0 !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */ + border-bottom-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */ box-shadow: none !important; font-size: 85% !important; white-space: pre-wrap !important; padding: 0.5rem 1rem !important; - text-align: left !important; + text-align: start !important; } .markup-block-error + pre { border-top: none !important; margin-top: 0 !important; - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; + border-top-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */ + border-top-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */ } .file-view.markup { diff --git a/web_src/css/markup/filepreview.css b/web_src/css/markup/filepreview.css index d2ec16ea8b..1c0fad5170 100644 --- a/web_src/css/markup/filepreview.css +++ b/web_src/css/markup/filepreview.css @@ -18,7 +18,7 @@ .markup .file-preview-box .header { padding: .5rem; - padding-left: 1rem; + padding-inline-start: 1rem; border: 1px solid var(--color-secondary); border-bottom: none; border-radius: 0.28571429rem 0.28571429rem 0 0; diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index a820787b16..8efea4d959 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -28,7 +28,7 @@ lazy-webc::after, content: ""; position: absolute; display: block; - left: 50%; + inset-inline-start: 50%; top: 50%; height: min(4em, 66.6%); width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */ diff --git a/web_src/css/modules/button-legacy.css b/web_src/css/modules/button-legacy.css index 8683d9ed58..f0451dec99 100644 --- a/web_src/css/modules/button-legacy.css +++ b/web_src/css/modules/button-legacy.css @@ -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 */ .ui.buttons .button { - border-right: none; + border-inline-end: none; } .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 { - 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 */ .ui.buttons .button:first-child, .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: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 { - border-left: 1px solid var(--color-light-border); - border-right: 1px solid var(--color-light-border); + border-inline-start: 1px solid var(--color-light-border); + border-inline-end: 1px solid var(--color-light-border); } .ui.buttons .button.active + .button { - border-left: none; + border-inline-start: none; } .ui.basic.buttons .button, diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 011e89c32f..07152b4d99 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -100,7 +100,7 @@ /* Fomantic buttons have annoying margins to set distance between elements. In * the button-row/sequence helpers this is set by flex+gap */ .button-row .ui.button { - margin-right: 0; + margin-inline-end: 0; } .button-sequence .ui.button { margin: 0 !important; diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css index 2406def681..e71a90cdf8 100644 --- a/web_src/css/modules/card.css +++ b/web_src/css/modules/card.css @@ -119,16 +119,14 @@ a.ui.card:hover { .ui.cards > .card > .extra, .ui.card > .extra { 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 { - margin-left: -1em; - margin-right: -1em; + margin-inline: -1em; } .ui.three.cards > .card { width: calc(33.33333333333333% - 2em); - margin-left: 1em; - margin-right: 1em; + margin-inline: 1em; } diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css index 8d73573bfa..ab0fdf9348 100644 --- a/web_src/css/modules/checkbox.css +++ b/web_src/css/modules/checkbox.css @@ -21,7 +21,7 @@ input[type="radio"] { .ui.checkbox input[type="radio"] { position: absolute; top: 1px; - left: 0; + inset-inline-start: 0; width: var(--checkbox-size); height: var(--checkbox-size); } @@ -41,7 +41,7 @@ input[type="radio"] { .ui.checkbox label, .ui.radio.checkbox label { - margin-left: 1.85714em; + margin-inline-start: 1.85714em; } .ui.checkbox + label { @@ -72,7 +72,7 @@ input[type="radio"] { } .ui.toggle.checkbox label { min-height: 1.5rem; - padding-left: 4.5rem; + padding-inline-start: 4.5rem; padding-top: 0.15em; } .ui.toggle.checkbox label::before { @@ -84,7 +84,7 @@ input[type="radio"] { width: 49px; height: 21px; border-radius: 500rem; - left: 0; + inset-inline-start: 0; } .ui.toggle.checkbox label::after { background: var(--color-white); @@ -96,15 +96,15 @@ input[type="radio"] { width: 18px; height: 18px; top: 1.5px; - left: 1.5px; + inset-inline-start: 1.5px; border-radius: 500rem; transition: background 0.3s ease, left 0.3s ease; } .ui.toggle.checkbox input ~ label::after { - left: 1.5px; + inset-inline-start: 1.5px; } .ui.toggle.checkbox input:checked ~ label::after { - left: 29px; + inset-inline-start: 29px; } .ui.toggle.checkbox input:focus ~ label::before, .ui.toggle.checkbox label::before { diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css index 799eeb8574..0a470eda71 100644 --- a/web_src/css/modules/comment.css +++ b/web_src/css/modules/comment.css @@ -36,7 +36,7 @@ .ui.comments .comment > .comments::before { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; } .ui.comments .comment > .comments .comment { @@ -46,7 +46,7 @@ } .ui.comments .comment .avatar { - float: left; + float: inline-start; width: 2.5em; } @@ -55,7 +55,7 @@ } .ui.comments .comment > .avatar ~ .content { - margin-left: 3.5em; + margin-inline-start: 3.5em; } .ui.comments .comment .author { @@ -69,7 +69,7 @@ .ui.comments .comment .metadata { display: inline-block; - margin-left: 0.5em; + margin-inline-start: 0.5em; font-size: 0.875em; } @@ -79,7 +79,7 @@ } .ui.comments .comment .metadata > :last-child { - margin-right: 0; + margin-inline-end: 0; } .ui.comments .comment .text { diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css index 95c71b207f..057c8c1be9 100644 --- a/web_src/css/modules/container.css +++ b/web_src/css/modules/container.css @@ -11,8 +11,7 @@ .ui.ui.ui.container:not(.fluid) { --container-width: auto; width: var(--container-width); - margin-left: 1em; - margin-right: 1em; + margin-inline: 1em; } } @@ -20,8 +19,7 @@ .ui.ui.ui.container:not(.fluid) { --container-width: 723px; width: var(--container-width); - margin-left: auto; - margin-right: auto; + margin-inline: auto; } } @@ -29,8 +27,7 @@ .ui.ui.ui.container:not(.fluid) { --container-width: 933px; width: var(--container-width); - margin-left: auto; - margin-right: auto; + margin-inline: auto; } } @@ -38,8 +35,7 @@ .ui.ui.ui.container:not(.fluid) { --container-width: 1127px; width: var(--container-width); - margin-left: auto; - margin-right: auto; + margin-inline: auto; } } @@ -57,8 +53,7 @@ --container-width: 1280px; width: var(--container-width); max-width: calc(100% - calc(2 * var(--page-margin-x))); - margin-left: auto; - margin-right: auto; + margin-inline: auto; } .ui.container.fluid.padded { diff --git a/web_src/css/modules/dialog.css b/web_src/css/modules/dialog.css index 3f9a1a44bf..e80acdf2a8 100644 --- a/web_src/css/modules/dialog.css +++ b/web_src/css/modules/dialog.css @@ -6,7 +6,7 @@ dialog { align-items: center; justify-content: center; position: fixed; - text-align: left; + text-align: start; border: none; background: var(--color-body); box-shadow: @@ -57,8 +57,8 @@ dialog header { margin: 0; padding: 1.25rem 1.5rem; box-shadow: none; - border-top-left-radius: var(--border-radius); - border-top-right-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); /* stylelint-disable-line logical-css/require-logical-properties */ border-bottom: 1px solid var(--color-secondary); } @@ -89,8 +89,8 @@ dialog .actions { } dialog footer { - border-bottom-left-radius: var(--border-radius); - border-bottom-right-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); /* stylelint-disable-line logical-css/require-logical-properties */ } /* positive/negative action buttons */ @@ -98,7 +98,7 @@ dialog .actions .ui.button { display: inline-flex; align-items: center; padding: 10px 12px; - margin-right: 0; + margin-inline-end: 0; } dialog .actions .ui.button.danger { @@ -109,5 +109,5 @@ dialog .actions .ui.button.danger { } dialog .actions .ui.button .svg { - margin-right: 5px; + margin-inline-end: 5px; } diff --git a/web_src/css/modules/divider.css b/web_src/css/modules/divider.css index acc8408f37..9cba544569 100644 --- a/web_src/css/modules/divider.css +++ b/web_src/css/modules/divider.css @@ -30,11 +30,11 @@ h4.divider { } .divider.divider-text::before { - margin-right: .75em; + margin-inline-end: .75em; } .divider.divider-text::after { - margin-left: .75em; + margin-inline-start: .75em; } .ui.dropdown .menu > .divider { diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css index 1df9a116f7..9b64b414ad 100644 --- a/web_src/css/modules/grid.css +++ b/web_src/css/modules/grid.css @@ -22,12 +22,10 @@ } .ui.relaxed.grid { - margin-left: -1.5rem; - margin-right: -1.5rem; + margin-inline: -1.5rem; } .ui[class*="very relaxed"].grid { - margin-left: -2.5rem; - margin-right: -2.5rem; + margin-inline: -2.5rem; } .ui.grid + .grid { @@ -39,13 +37,11 @@ position: relative; display: inline-block; width: 6.25%; - padding-left: 1rem; - padding-right: 1rem; + padding-inline: 1rem; vertical-align: top; } .ui.grid > * { - padding-left: 1rem; - padding-right: 1rem; + padding-inline: 1rem; } .ui.grid > .row { @@ -103,46 +99,36 @@ @media only screen and (max-width: 767.98px) { .ui.page.grid { width: auto; - padding-left: 0; - padding-right: 0; - margin-left: 0; - margin-right: 0; + padding-inline: 0; + margin-inline: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .ui.page.grid { width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 2em; - padding-right: 2em; + margin-inline: 0; + padding-inline: 2em; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .ui.page.grid { width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 3%; - padding-right: 3%; + margin-inline: 0; + padding-inline: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { .ui.page.grid { width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 15%; - padding-right: 15%; + margin-inline: 0; + padding-inline: 15%; } } @media only screen and (min-width: 1920px) { .ui.page.grid { width: auto; - margin-left: 0; - margin-right: 0; - padding-left: 23%; - padding-right: 23%; + margin-inline: 0; + padding-inline: 23%; } } @@ -371,37 +357,32 @@ .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), .ui.centered.grid > .row > .column:not(.aligned):not(.justified), .ui.grid .centered.row > .column:not(.aligned):not(.justified) { - text-align: left; + text-align: start; } .ui.grid > .centered.column, .ui.grid > .row > .centered.column { display: block; - margin-left: auto; - margin-right: auto; + margin-inline: auto; } .ui.relaxed.grid > .column:not(.row), .ui.relaxed.grid > .row > .column, .ui.grid > .relaxed.row > .column { - padding-left: 1.5rem; - padding-right: 1.5rem; + padding-inline: 1.5rem; } .ui[class*="very relaxed"].grid > .column:not(.row), .ui[class*="very relaxed"].grid > .row > .column, .ui.grid > [class*="very relaxed"].row > .column { - padding-left: 2.5rem; - padding-right: 2.5rem; + padding-inline: 2.5rem; } .ui.relaxed.grid .row + .ui.divider, .ui.grid .relaxed.row + .ui.divider { - margin-left: 1.5rem; - margin-right: 1.5rem; + margin-inline: 1.5rem; } .ui[class*="very relaxed"].grid .row + .ui.divider, .ui.grid [class*="very relaxed"].row + .ui.divider { - margin-left: 2.5rem; - margin-right: 2.5rem; + margin-inline: 2.5rem; } .ui[class*="middle aligned"].grid > .column:not(.row), @@ -419,7 +400,7 @@ .ui.grid > [class*="left aligned"].row > .column, .ui.grid > [class*="left aligned"].column.column, .ui.grid > .row > [class*="left aligned"].column.column { - text-align: left; + text-align: start; align-self: inherit; } @@ -440,7 +421,7 @@ .ui.grid > [class*="right aligned"].row > .column, .ui.grid > [class*="right aligned"].column.column, .ui.grid > .row > [class*="right aligned"].column.column { - text-align: right; + text-align: end; align-self: inherit; } @@ -470,8 +451,7 @@ @media only screen and (max-width: 767.98px) { .ui.stackable.grid { width: auto; - margin-left: 0 !important; - margin-right: 0 !important; + margin-inline: 0 !important; } .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column, @@ -492,25 +472,21 @@ .ui.container > .ui.stackable.grid > .column, .ui.container > .ui.stackable.grid > .row > .column { - padding-left: 0 !important; - padding-right: 0 !important; + padding-inline: 0 !important; } .ui.grid .ui.stackable.grid, .ui.segment:not(.vertical) .ui.stackable.page.grid { - margin-left: -1rem !important; - margin-right: -1rem !important; + margin-inline: -1rem !important; } } .ui.ui.ui.compact.grid > .column:not(.row), .ui.ui.ui.compact.grid > .row > .column { - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline: 0.5rem; } .ui.ui.ui.compact.grid > * { - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline: 0.5rem; } .ui.ui.ui.compact.grid > .row { diff --git a/web_src/css/modules/hashbox.css b/web_src/css/modules/hashbox.css index 316ac1f655..1095862716 100644 --- a/web_src/css/modules/hashbox.css +++ b/web_src/css/modules/hashbox.css @@ -31,9 +31,9 @@ color: var(--color-text); background: var(--color-light); padding: 0.25rem 0.33rem; - border-left: 1px solid var(--color-light-border); - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; + border-inline-start: 1px solid var(--color-light-border); + border-start-end-radius: inherit; + border-end-end-radius: inherit; } .sha.label .signature-author { @@ -53,7 +53,7 @@ } .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); } @@ -67,7 +67,7 @@ } .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); } @@ -81,7 +81,7 @@ } .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); } @@ -95,7 +95,7 @@ } .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); } diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css index f45e970018..308960031b 100644 --- a/web_src/css/modules/header.css +++ b/web_src/css/modules/header.css @@ -20,7 +20,7 @@ } .ui.header .ui.label { - margin-left: 0.25rem; + margin-inline-start: 0.25rem; vertical-align: middle; } @@ -49,7 +49,7 @@ .ui.header > i.icon:only-child { display: inline-block; padding: 0; - margin-right: 0.75rem; + margin-inline-end: 0.75rem; } .ui.header + p { @@ -120,7 +120,7 @@ h4.ui.header .sub.header { /* fix misaligned right buttons on box headers */ .ui.attached.header > .ui.right { position: absolute; - right: 0.78571429rem; + inset-inline-end: 0.78571429rem; top: 0; bottom: 0; display: flex; @@ -136,8 +136,7 @@ h4.ui.header .sub.header { /* open dropdown menus to the left in right-attached headers */ .ui.attached.header > .ui.right .ui.dropdown .menu { - right: 0; - left: auto; + inset-inline: auto 0; } /* 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 { - border-bottom-color: var(--color-secondary); + border-block-end-color: var(--color-secondary); } .ui.dividing.header .sub.header { diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css index 18b785ac82..64a8b68685 100644 --- a/web_src/css/modules/input.css +++ b/web_src/css/modules/input.css @@ -49,7 +49,7 @@ position: absolute; text-align: center; top: 0; - right: 0; + inset-inline-end: 0; margin: 0; height: 100%; width: 2.67142857em; @@ -71,29 +71,26 @@ .ui.ui.ui.ui.icon.input > textarea, .ui.ui.ui.ui.icon.input > input { - padding-right: 2.67142857em; + padding-inline-end: 2.67142857em; } .ui.icon.input > i.link.icon { cursor: pointer; } .ui.icon.input > i.circular.icon { top: 0.35em; - right: 0.5em; + inset-inline-end: 0.5em; } .ui[class*="left icon"].input > i.icon { - right: auto; - left: 1px; + inset-inline: 1px auto; border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui[class*="left icon"].input > i.circular.icon { - right: auto; - left: 0.5em; + inset-inline: 0.5em auto; } .ui.ui.ui.ui[class*="left icon"].input > textarea, .ui.ui.ui.ui[class*="left icon"].input > input { - padding-left: 2.67142857em; - padding-right: 1em; + padding-inline: 2.67142857em 1em; } .ui.icon.input > textarea:focus ~ .icon, @@ -125,9 +122,9 @@ } .ui.action.input:not([class*="left action"]) > input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-color: transparent; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-inline-end-color: transparent; } .ui.action.input > .dropdown:first-child, @@ -171,18 +168,18 @@ min-width: 10em; } .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 { border-color: var(--color-input-border); } .ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible { - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */ + 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: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: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 + .icon + .button, .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 { - border-right-color: var(--color-primary); + border-inline-end-color: var(--color-primary); } diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 4dc469631d..689577a8a6 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -19,10 +19,10 @@ } .ui.label:first-child { - margin-left: 0; + margin-inline-start: 0; } .ui.label:last-child { - margin-right: 0; + margin-inline-end: 0; } a.ui.label { @@ -45,7 +45,7 @@ a.ui.label { } .ui.label > .color-icon { - margin-left: 0; + margin-inline-start: 0; } .ui.label > .icon { @@ -57,7 +57,7 @@ a.ui.label { display: inline-block; vertical-align: top; font-weight: var(--font-weight-medium); - margin-left: 1em; + margin-inline-start: 1em; opacity: 0.8; } .ui.label > .detail .icon { diff --git a/web_src/css/modules/list.css b/web_src/css/modules/list.css index 32c71e802b..f9e3186ce3 100644 --- a/web_src/css/modules/list.css +++ b/web_src/css/modules/list.css @@ -51,7 +51,7 @@ min-width: 1.55em; padding-top: 0; transition: color 0.1s ease; - padding-right: 0.28571429em; + padding-inline-end: 0.28571429em; vertical-align: top; } .ui.list .list > .item > i.icon:only-child, @@ -69,7 +69,7 @@ } .ui.list .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 > .item > .image img { @@ -102,8 +102,8 @@ } .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list { - margin-left: 0; - padding-left: 0; + margin-inline-start: 0; + padding-inline-start: 0; } .ui.list .list > .item .header, @@ -128,7 +128,7 @@ .ui.list .list > .item [class*="right floated"], .ui.list > .item [class*="right floated"] { - float: right; + float: inline-end; margin: 0 0 0 1em; } diff --git a/web_src/css/modules/message.css b/web_src/css/modules/message.css index c62dbddd25..91b9ed9976 100644 --- a/web_src/css/modules/message.css +++ b/web_src/css/modules/message.css @@ -23,8 +23,7 @@ .ui.attached.message { margin-bottom: -1px; border-radius: var(--border-radius) var(--border-radius) 0 0; - margin-left: -1px; - margin-right: -1px; + margin-inline: -1px; } .ui.attached + .ui.attached.message:not(.top):not(.bottom) { @@ -105,7 +104,7 @@ cursor: pointer; position: absolute; top: 9px; - right: 9px; + inset-inline-end: 9px; opacity: .7; } diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css index 54a4ef81ca..e1b5f11236 100644 --- a/web_src/css/modules/modal.css +++ b/web_src/css/modules/modal.css @@ -20,8 +20,8 @@ color: var(--color-text-dark); background: var(--color-body); border-color: var(--color-secondary); - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */ + border-top-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */ vertical-align: middle; } @@ -58,12 +58,12 @@ These inconsistent layouts should be refactored to simple ones. background: var(--color-secondary-bg); border-color: var(--color-secondary); padding: 1rem; - text-align: right; + text-align: end; } .ui.modal .content > .actions { padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */ - text-align: right; + text-align: end; } /* positive/negative action buttons */ @@ -71,7 +71,7 @@ These inconsistent layouts should be refactored to simple ones. display: inline-flex; align-items: center; padding: 10px 12px 10px 10px; - margin-right: 0; + margin-inline-end: 0; } .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 { - margin-right: 5px; + margin-inline-end: 5px; } diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index 0c58441dfe..bf9752fd8a 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -41,7 +41,7 @@ #navbar .secondary.menu > .item > .svg, #navbar .right.menu > .item > .svg { - margin-right: 0; + margin-inline-end: 0; } /* icon with notification counter - positioned relative container */ @@ -69,7 +69,7 @@ } #navbar .navbar-mobile-right { display: flex; - margin-left: auto !important; + margin-inline-start: auto !important; width: auto !important; } #navbar .navbar-mobile-right > .item { @@ -119,7 +119,7 @@ min-height: 48px; } #navbar #mobile-notifications-icon { - margin-right: 6px !important; + margin-inline-end: 6px !important; } } @@ -151,7 +151,7 @@ background: var(--color-primary); border: 2px solid var(--color-nav-bg); position: absolute; - left: 6px; + inset-inline-start: 6px; top: -9px; min-width: 17px; height: 17px; diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css index 76638cb639..b54db40d90 100644 --- a/web_src/css/modules/segment.css +++ b/web_src/css/modules/segment.css @@ -103,14 +103,14 @@ border-radius: 0; border: 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 { border-top: none; } .ui.horizontal.segments:not(.stackable) > .segment:first-child { - border-left: none; + border-inline-start: none; } .ui.horizontal.segments > .segment:first-child { border-radius: 0.28571429rem 0 0 0.28571429rem; @@ -126,7 +126,7 @@ } .ui[class*="left aligned"].segment { - text-align: left; + text-align: start; } .ui[class*="center aligned"].segment { text-align: center; @@ -190,8 +190,7 @@ padding-bottom: 0; } .ui.fitted.segment:not(.vertically) { - padding-left: 0; - padding-right: 0; + padding-inline: 0; } .ui.segments .segment, diff --git a/web_src/css/modules/select.css b/web_src/css/modules/select.css index 1d7d749d4a..7b4b88ada7 100644 --- a/web_src/css/modules/select.css +++ b/web_src/css/modules/select.css @@ -11,7 +11,7 @@ .gitea-select::after { position: absolute; top: 12px; - right: 8px; + inset-inline-end: 8px; pointer-events: none; content: ""; width: 14px; diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css index dee30f4ca3..c2bea9cef2 100644 --- a/web_src/css/modules/switch.css +++ b/web_src/css/modules/switch.css @@ -41,7 +41,7 @@ &.active { z-index: 2; - padding-left: var(--switch-padding-inline); + padding-inline-start: var(--switch-padding-inline); background: var(--color-active); outline: 1px solid var(--color-input-border); } @@ -55,12 +55,12 @@ /* 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 */ .switch > .item:has(+ .active.item) { /* Active neighbor is next item */ - margin-right: calc(-1 * var(--border-radius)); - padding-right: calc(var(--switch-padding-inline) + var(--border-radius)); + margin-inline-end: calc(-1 * var(--border-radius)); + padding-inline-end: calc(var(--switch-padding-inline) + var(--border-radius)); } .switch > .active.item + .item { /* Active neighbor is previous item */ - margin-left: calc(-1 * var(--border-radius)); - padding-left: calc(var(--switch-padding-inline) + var(--border-radius)); + margin-inline-start: calc(-1 * var(--border-radius)); + padding-inline-start: calc(var(--switch-padding-inline) + var(--border-radius)); } /* Make counters embedded into items more visible on brighter backgrounds */ diff --git a/web_src/css/modules/table.css b/web_src/css/modules/table.css index 801a58d84d..39787be15a 100644 --- a/web_src/css/modules/table.css +++ b/web_src/css/modules/table.css @@ -35,10 +35,10 @@ vertical-align: inherit; font-weight: var(--font-weight-normal); border-bottom: 1px solid var(--color-secondary); - border-left: none; + border-inline-start: none; } .ui.table > thead > tr > th:first-child { - border-left: none; + border-inline-start: none; } .ui.table > thead > tr:first-child > th:first-child { border-radius: 0.28571429rem 0 0; @@ -62,7 +62,7 @@ } .ui.table > tfoot > tr > th: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 > td:first-child { @@ -154,7 +154,7 @@ .ui.table[class*="left aligned"], .ui.table [class*="left aligned"] { - text-align: left; + text-align: start; } .ui.table[class*="center aligned"], @@ -164,7 +164,7 @@ .ui.table[class*="right aligned"], .ui.table [class*="right aligned"] { - text-align: right; + text-align: end; } .ui.table[class*="top aligned"], @@ -301,7 +301,7 @@ .ui.basic.table > tfoot > tr > th, .ui.basic.table > tr > th { background: transparent; - border-left: none; + border-inline-start: none; } .ui.basic.table > tbody > tr { 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) > tbody > 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) > 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) > tbody > 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 { padding-top: 0; @@ -347,7 +347,7 @@ .ui.celled.table > tr > td, .ui.celled.table > tbody > tr > td, .ui.celled.table > tfoot > tr > td { - border-left: 1px solid var(--color-secondary-alpha-50); + border-inline-start: 1px solid var(--color-secondary-alpha-50); } .ui.celled.table > 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 > tbody > 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 > thead > tr > th, .ui.compact.table > tbody > tr > th, .ui.compact.table > tfoot > tr > th { - padding-left: 0.7em; - padding-right: 0.7em; + padding-inline: 0.7em; } .ui.compact.table > tr > td, .ui.compact.table > tbody > tr > td, @@ -376,10 +375,10 @@ .ui.table > thead > tr > th:first-of-type, .ui.table > tbody > tr > td:first-of-type, .ui.table > tr > td:first-of-type { - padding-left: 10px; + padding-inline-start: 10px; } .ui.table > thead > tr > th:last-of-type, .ui.table > tbody > tr > td:last-of-type, .ui.table > tr > td:last-of-type { - padding-right: 10px; + padding-inline-end: 10px; } diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index ab894d46c5..a44b10674a 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -140,25 +140,25 @@ } .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 > svg { transform: rotate(90deg); top: calc(50% - 3px); - left: 11px; + inset-inline-start: 11px; } .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 > svg { transform: rotate(-90deg); top: calc(50% - 3px); - right: 11px; + inset-inline-end: 11px; } .tippy-svg-arrow { diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 2a9f78e017..25b21c46b2 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -44,11 +44,11 @@ } .toastify-right { - right: 15px; + inset-inline-end: 15px; } .toastify-left { - left: 15px; + inset-inline-start: 15px; } .toastify-top { @@ -60,18 +60,14 @@ } .toastify-center { - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; + margin-inline: auto; + inset-inline: 0; } @media (max-width: 360px) { .toastify-right, .toastify-left { - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; + margin-inline: auto; + inset-inline: 0; max-width: fit-content; } } diff --git a/web_src/css/modules/user-cards.css b/web_src/css/modules/user-cards.css index d89ea4588c..f545c7d2db 100644 --- a/web_src/css/modules/user-cards.css +++ b/web_src/css/modules/user-cards.css @@ -41,7 +41,7 @@ .user-cards .card .avatar { width: 48px; height: 48px; - margin-right: 14px; + margin-inline-end: 14px; } .user-cards .card .name { diff --git a/web_src/css/org.css b/web_src/css/org.css index 78cf2e2c61..1ea22dcdbb 100644 --- a/web_src/css/org.css +++ b/web_src/css/org.css @@ -15,18 +15,18 @@ width: 800px !important; } .organization.new.org form .header { - padding-left: 280px !important; + padding-inline-start: 280px !important; } .organization.new.org form .inline.field > label { - text-align: right; + text-align: end; width: 250px !important; word-wrap: break-word; } .organization.new.org form .help { - margin-left: 265px !important; + margin-inline-start: 265px !important; } .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 > textarea { @@ -36,7 +36,7 @@ @media (max-width: 767.98px) { .organization.new.org form .optional .title { - margin-left: 15px; + margin-inline-start: 15px; } .organization.new.org form .inline.field > label { display: block; @@ -44,7 +44,7 @@ } .organization.new.org form .header { - padding-left: 0 !important; + padding-inline-start: 0 !important; text-align: center; } @@ -151,7 +151,7 @@ .page-content.organization .members .ui.avatar { width: 48px; height: 48px; - margin-right: 5px; + margin-inline-end: 5px; margin-bottom: 5px; } @@ -161,12 +161,12 @@ } .organization.invite #invite-box #search-user-box input { - margin-left: 0; + margin-inline-start: 0; width: 300px; } .organization.invite #invite-box .ui.button { - margin-left: 5px; + margin-inline-start: 5px; margin-top: -3px; } @@ -205,5 +205,5 @@ #add-member-modal .team-list { max-height: 300px; - overflow-y: auto; + overflow-block: auto; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0619f154af..85158b4d6e 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -71,13 +71,13 @@ .repository .issue-content-right #deadlineForm input { width: 12.8rem; border-radius: var(--border-radius) 0 0 var(--border-radius); - border-right: 0; + border-inline-end: 0; white-space: nowrap; } .repository .issue-content-right .filter.menu { max-height: 500px; - overflow-x: auto; + overflow-inline: auto; } .repository .filter.menu .label-filter .menu .info { @@ -86,9 +86,8 @@ font-size: 12px; width: 100%; white-space: nowrap; - margin-left: 10px; - margin-right: 8px; - text-align: left; + margin-inline: 10px 8px; + text-align: start; } .repository .filter.menu .label-filter .menu .info code { @@ -102,20 +101,19 @@ .repository .filter.menu .ui.dropdown .menu { max-height: 500px; max-width: 300px; - overflow-x: hidden; - right: 0; - left: auto; + overflow-inline: hidden; + inset-inline: auto 0; } /* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */ .repository .filter.menu .ui.dropdown.label-filter .menu { min-width: max-content; - right: unset; - left: 0; + inset-inline-end: unset; + inset-inline-start: 0; } .repository .select-label .desc { - padding-left: 23px; + padding-inline-start: 23px; white-space: normal; display: block; margin-top: 2px; @@ -152,7 +150,7 @@ .repository .ui.action.input.clone-panel > button + button, .repository .ui.action.input.clone-panel > button + input { - margin-left: -1px; /* make the borders overlap to avoid double borders */ + margin-inline-start: -1px; /* make the borders overlap to avoid double borders */ } .repository .clone-panel > button:first-of-type { @@ -166,8 +164,7 @@ /* Dropdown alignment */ .repository .clone-panel .dropdown .menu, .repository .folder-actions .dropdown .menu { - right: 0 !important; - left: auto !important; + inset-inline: auto 0 !important; } .repository.file.list .repo-description { @@ -215,7 +212,7 @@ td .commit-summary { } .latest-commit .commit-status { - margin-right: 0.25em; + margin-inline-end: 0.25em; } @media (max-width: 767.98px) { @@ -223,7 +220,7 @@ td .commit-summary { display: none; } .latest-commit .commit-summary { - margin-left: 8px; + margin-inline-start: 8px; } } @@ -243,7 +240,7 @@ td .commit-summary { text-align: inherit; color: var(--color-text); vertical-align: inherit; - border-left: none; + border-inline-start: none; padding: 6px 5px 6px 10px; } @@ -252,8 +249,7 @@ td .commit-summary { } .repository.file.list #repo-files-table tbody .svg { - margin-left: 3px; - margin-right: 5px; + margin-inline: 3px 5px; } @media (min-width: 767.98px) { @@ -267,7 +263,7 @@ td .commit-summary { } .repository.file.list #repo-files-table tbody .svg.octicon-reply { - margin-right: 10px; + margin-inline-end: 10px; } .repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill, @@ -354,8 +350,7 @@ td .commit-summary { } .repository.file.list #repo-files-table td .at { - margin-left: 3px; - margin-right: 3px; + margin-inline: 3px; } .repository.file.list #repo-files-table td > * { @@ -367,11 +362,11 @@ td .commit-summary { } .repository.file.list #repo-files-table tr:last-of-type td:first-child { - border-bottom-left-radius: var(--border-radius); + border-end-start-radius: var(--border-radius); } .repository.file.list #repo-files-table tr:last-of-type td:last-child { - border-bottom-right-radius: var(--border-radius); + border-end-end-radius: var(--border-radius); } .repository.file.list #repo-files-table tr:hover { @@ -419,8 +414,8 @@ td .commit-summary { } .code-search + #repo-files-table { - border-top-left-radius: 0; - border-top-right-radius: 0; + border-top-left-radius: 0; /* stylelint-disable-line logical-css/require-logical-properties */ + border-top-right-radius: 0; /* stylelint-disable-line logical-css/require-logical-properties */ } .view-raw { @@ -476,7 +471,7 @@ citation-information .tab:not(.active) { } .repository.file.list .non-diff-file-content .csv { - overflow-x: auto; + overflow-inline: auto; padding: 0 !important; } @@ -493,7 +488,7 @@ citation-information .tab:not(.active) { } .repository.file.list .sidebar { - padding-left: 0; + padding-inline-start: 0; } .repository.file.list .sidebar .svg { @@ -508,20 +503,20 @@ citation-information .tab:not(.active) { vertical-align: middle !important; width: auto !important; padding: 7px 8px !important; - margin-right: 5px !important; + margin-inline-end: 5px !important; } .repository.file.editor .tabular.menu .svg { - margin-right: 5px; + margin-inline-end: 5px; } .repository.file.editor .commit-form-wrapper { - padding-left: 64px; + padding-inline-start: 64px; } .repository.file.editor .commit-form-wrapper .commit-avatar { - float: left; - margin-left: -64px; + float: inline-start; + margin-inline-start: -64px; width: 3em; height: auto; } @@ -537,7 +532,7 @@ citation-information .tab:not(.active) { .repository.file.editor .commit-form-wrapper .commit-form::before, .repository.file.editor .commit-form-wrapper .commit-form::after { - right: 100%; + inset-inline-end: 100%; top: 20px; border: solid transparent; content: " "; @@ -548,13 +543,13 @@ citation-information .tab:not(.active) { } .repository.file.editor .commit-form-wrapper .commit-form::before { - border-right-color: var(--color-secondary); + border-inline-end-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } .repository.file.editor .commit-form-wrapper .commit-form::after { - border-right-color: var(--color-box-body); + border-inline-end-color: var(--color-box-body); border-width: 8px; margin-top: -8px; } @@ -571,18 +566,18 @@ citation-information .tab:not(.active) { .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input { position: relative; - margin-left: 25px; + margin-inline-start: 25px; } .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input { width: 240px !important; - padding-left: 26px !important; + padding-inline-start: 26px !important; } .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch { position: absolute; top: 9px; - left: 10px; + inset-inline-start: 10px; color: var(--color-grey); } @@ -596,12 +591,12 @@ citation-information .tab:not(.active) { } .repository.new.issue .comment.form .content { - margin-left: 4em; + margin-inline-start: 4em; } .repository.new.issue .comment.form .content::before, .repository.new.issue .comment.form .content::after { - right: 100%; + inset-inline-end: 100%; top: 20px; border: solid transparent; content: " "; @@ -612,13 +607,13 @@ citation-information .tab:not(.active) { } .repository.new.issue .comment.form .content::before { - border-right-color: var(--color-secondary); + border-inline-end-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } .repository.new.issue .comment.form .content::after { - border-right-color: var(--color-box-body); + border-inline-end-color: var(--color-box-body); border-width: 8px; margin-top: -8px; } @@ -660,7 +655,7 @@ citation-information .tab:not(.active) { display: none; } .comment.form .issue-content-left .content { - margin-left: 0 !important; + margin-inline-start: 0 !important; } .comment.form .issue-content-left .content::before, .comment.form .issue-content-left .content::after, @@ -670,7 +665,7 @@ citation-information .tab:not(.active) { } .repository.view.issue .issue-title.edit-active h1 { - padding-right: 0; + padding-inline-end: 0; } } @@ -689,7 +684,7 @@ citation-information .tab:not(.active) { font-size: 32px; line-height: 40px; margin: 0; - padding-right: 0.5rem; + padding-inline-end: 0.5rem; } .repository.view.issue .issue-title .ui.input { @@ -706,7 +701,7 @@ citation-information .tab:not(.active) { } .repository.view.issue .issue-title .label { - margin-right: 10px; + margin-inline-end: 10px; } .issue-state-label { @@ -719,7 +714,7 @@ citation-information .tab:not(.active) { } .issue-state-label .svg { - margin-right: 4px; + margin-inline-end: 4px; } .repository.view.issue .pull-desc code { @@ -734,7 +729,7 @@ citation-information .tab:not(.active) { vertical-align: middle; position: relative; top: -2px; - right: 1px; + inset-inline-end: 1px; } .repository.view.issue .pull.tabs.container { @@ -744,12 +739,12 @@ citation-information .tab:not(.active) { .repository.view.issue .pull.tabular.menu { margin-bottom: 0; - overflow-x: auto; - overflow-y: hidden; + overflow-inline: auto; + overflow-block: hidden; } .repository.view.issue .pull.tabular.menu .svg { - margin-right: 5px; + margin-inline-end: 5px; } .repository.view.issue .merge.box .branch-update.grid .row { @@ -768,7 +763,7 @@ citation-information .tab:not(.active) { margin-bottom: 14px; top: 0; bottom: 0; - left: 96px; + inset-inline-start: 96px; width: 2px; background-color: var(--color-timeline); z-index: -1; @@ -777,8 +772,8 @@ citation-information .tab:not(.active) { .repository.view.issue .comment-list .timeline { position: relative; display: block; - margin-left: 40px; - padding-left: 16px; + margin-inline-start: 40px; + padding-inline-start: 16px; } .repository.view.issue .comment-list .timeline::before { /* ciara */ @@ -789,7 +784,7 @@ citation-information .tab:not(.active) { margin-bottom: 14px; top: 0; bottom: 0; - left: 30px; + inset-inline-start: 30px; width: 2px; background-color: var(--color-timeline); z-index: -1; @@ -810,13 +805,13 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .timeline-item { - margin-left: 16px; + margin-inline-start: 16px; position: relative; } .repository.view.issue .comment-list .timeline-item .timeline-avatar { position: absolute; - left: -68px; + inset-inline-start: -68px; } /* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */ @@ -843,9 +838,8 @@ citation-information .tab:not(.active) { background-color: var(--color-timeline); border-radius: var(--border-radius-full); display: flex; - float: left; - margin-left: -33px; - margin-right: 8px; + float: inline-start; + margin-inline: -33px 8px; color: var(--color-text); align-items: center; justify-content: center; @@ -862,7 +856,7 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .timeline-item.comment > .content { - margin-left: -16px; + margin-inline-start: -16px; } .repository.view.issue .comment-list .timeline-item.event > .text { @@ -871,13 +865,13 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .timeline-item.commits-list { - padding-left: 15px; + padding-inline-start: 15px; padding-top: 0; } .repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar, .repository.view.issue .comment-list .timeline-item.event .ui.avatar { - margin-right: 0.25em; + margin-inline-end: 0.25em; } .repository.view.issue .comment-list .timeline-item .aggregated-actions .badge { @@ -931,7 +925,7 @@ citation-information .tab:not(.active) { @media (max-width: 767.98px) { .repository.view.issue .comment-list .timeline-item .ui.segments { - margin-left: -2rem; + margin-inline-start: -2rem; } } @@ -940,13 +934,13 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .comment > .content > div:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-top-left-radius: 4px; /* stylelint-disable-line logical-css/require-logical-properties */ + border-top-right-radius: 4px; /* stylelint-disable-line logical-css/require-logical-properties */ } .repository.view.issue .comment-list .comment > .content > div:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; /* stylelint-disable-line logical-css/require-logical-properties */ + border-bottom-right-radius: 4px; /* stylelint-disable-line logical-css/require-logical-properties */ } .repository.view.issue .comment-list .comment .comment-container { @@ -968,13 +962,13 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .comment .merge-section .divider { - margin-left: -1rem; + margin-inline-start: -1rem; width: calc(100% + 2rem); } .repository.view.issue .comment-list .comment .merge-section.no-header::before, .repository.view.issue .comment-list .comment .merge-section.no-header::after { - right: 100%; + inset-inline-end: 100%; top: 20px; border: solid transparent; content: " "; @@ -985,13 +979,13 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .comment .merge-section.no-header::before { - border-right-color: var(--color-secondary); + border-inline-end-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } .repository.view.issue .comment-list .comment .merge-section.no-header::after { - border-right-color: var(--color-box-body); + border-inline-end-color: var(--color-box-body); border-width: 8px; margin-top: -8px; } @@ -1060,7 +1054,7 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .code-comment .comment-content { - margin-left: calc(20px + 0.5rem); + margin-inline-start: calc(20px + 0.5rem); } .repository.view.issue .comment-list .code-comment .add-reaction { @@ -1087,14 +1081,14 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .comment > .avatar ~ .content { - margin-left: 42px; + margin-inline-start: 42px; } .repository.view.issue .comment-list .comment-code-cloud .segment.reactions { gap: var(--button-spacing); flex-wrap: wrap; width: unset !important; - margin-left: calc(20px + 0.5rem) !important; + margin-inline-start: calc(20px + 0.5rem) !important; margin-top: 1rem !important; margin-bottom: -1rem !important; border-top: none !important; @@ -1123,12 +1117,12 @@ citation-information .tab:not(.active) { } .repository.view.issue .comment-list .event { - padding-left: 15px; + padding-inline-start: 15px; } .repository.view.issue .comment-list .event .detail { margin-top: 4px; - margin-left: 15px; + margin-inline-start: 15px; } .repository.view.issue .comment-list .event .detail .text { @@ -1157,7 +1151,7 @@ citation-information .tab:not(.active) { .repository .comment.form .content .form::before, .repository .comment.form .content .form::after { - right: 100%; + inset-inline-end: 100%; top: 20px; border: solid transparent; content: " "; @@ -1168,13 +1162,13 @@ citation-information .tab:not(.active) { } .repository .comment.form .content .form::before { - border-right-color: var(--color-secondary); + border-inline-end-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } .repository .comment.form .content .form::after { - border-right-color: var(--color-box-body); + border-inline-end-color: var(--color-box-body); border-width: 8px; margin-top: -8px; } @@ -1189,7 +1183,7 @@ citation-information .tab:not(.active) { } .repository.compare.pull .show-form-container { - text-align: left; + text-align: start; } .repository .choose.branch { @@ -1220,7 +1214,7 @@ citation-information .tab:not(.active) { .repository.compare.pull .comment.form .content::before, .repository.compare.pull .comment.form .content::after { - right: 100%; + inset-inline-end: 100%; top: 20px; border: solid transparent; content: " "; @@ -1231,13 +1225,13 @@ citation-information .tab:not(.active) { } .repository.compare.pull .comment.form .content::before { - border-right-color: var(--color-secondary); + border-inline-end-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } .repository.compare.pull .comment.form .content::after { - border-right-color: var(--color-box-body); + border-inline-end-color: var(--color-box-body); border-width: 8px; margin-top: -8px; } @@ -1261,14 +1255,14 @@ citation-information .tab:not(.active) { .repository.branches .commit-divergence .bar-group { position: relative; - float: left; + float: inline-start; padding-bottom: 6px; width: 50%; max-width: 90px; } .repository.branches .commit-divergence .bar-group:last-child { - border-left: 1px solid var(--color-secondary-dark-2); + border-inline-start: 1px solid var(--color-secondary-dark-2); } .repository.branches .commit-divergence .count { @@ -1276,11 +1270,11 @@ citation-information .tab:not(.active) { } .repository.branches .commit-divergence .count.count-ahead { - text-align: left; + text-align: start; } .repository.branches .commit-divergence .count.count-behind { - text-align: right; + text-align: end; } .repository.branches .commit-divergence .bar { @@ -1290,11 +1284,11 @@ citation-information .tab:not(.active) { } .repository.branches .commit-divergence .bar.bar-behind { - right: 0; + inset-inline-end: 0; } .repository.branches .commit-divergence .bar.bar-ahead { - left: 0; + inset-inline-start: 0; } .repository.commits .header .search input { @@ -1334,7 +1328,7 @@ citation-information .tab:not(.active) { padding: 5px !important; overflow: hidden; font-size: 12px; - text-align: left; + text-align: start; white-space: nowrap; border: 1px solid var(--color-secondary); } @@ -1348,10 +1342,10 @@ citation-information .tab:not(.active) { border-bottom: none !important; } .repository .data-table tr :is(td,th):first-child { - border-left: none !important; + border-inline-start: none !important; } .repository .data-table tr :is(td,th):last-child { - border-right: none !important; + border-inline-end: none !important; } .repository .data-table td { @@ -1395,7 +1389,7 @@ citation-information .tab:not(.active) { white-space: nowrap; vertical-align: top; cursor: pointer; - text-align: right; + text-align: end; background: var(--color-body); border: 0; } @@ -1419,8 +1413,7 @@ citation-information .tab:not(.active) { } } .repository .diff-detail-box .diff-detail-stats strong { - margin-left: 0.25rem; - margin-right: 0.25rem; + margin-inline: 0.25rem; } /* Because the translations contain the we need to style with nth-of-type */ @@ -1451,15 +1444,14 @@ citation-information .tab:not(.active) { .diff-detail-actions > *, .diff-detail-actions .button { - margin-left: 0 !important; - margin-right: 0 !important; + margin-inline: 0 !important; } .repository .diff-detail-box span.status { display: inline-block; width: 12px; height: 12px; - margin-right: 8px; + margin-inline-end: 8px; vertical-align: middle; } @@ -1499,7 +1491,7 @@ citation-information .tab:not(.active) { .repository .diff-box .header:not(.resolved-placeholder) .button { padding: 0 1.125em; flex: 0 0 auto; - margin-right: 0; + margin-inline-end: 0; height: 30px; } @@ -1525,7 +1517,7 @@ citation-information .tab:not(.active) { } .repository .diff-file-box .file-body.file-code .lines-num { - text-align: right; + text-align: end; width: 1%; min-width: 50px; } @@ -1565,7 +1557,7 @@ citation-information .tab:not(.active) { .repository .diff-file-box .code-diff tbody tr [data-line-num]::before { content: attr(data-line-num); - text-align: right; + text-align: end; } .repository .diff-file-box .code-diff tbody tr .lines-type-marker { @@ -1575,12 +1567,12 @@ citation-information .tab:not(.active) { .repository .diff-file-box .code-diff tbody tr [data-type-marker]::before { content: attr(data-type-marker); - text-align: right; + text-align: end; display: inline-block; } .repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner { - padding-left: 10px !important; + padding-inline-start: 10px !important; } .repository .diff-file-box .code-diff-split table, @@ -1589,7 +1581,7 @@ citation-information .tab:not(.active) { } .repository .diff-file-box.file-content { - clear: right; + clear: inline-end; } .repository .diff-file-box.file-content .image-diff img { @@ -1683,7 +1675,7 @@ details.repo-search-result summary::marker { /* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */ .repository.settings.branches .branch-protection .ui.checkbox .help, .repository.settings.branches .branch-protection .checkbox-sub-item { - padding-left: 26px; + padding-inline-start: 26px; } .repository.settings.branches .branch-protection .status-check-matched-mark { @@ -1692,8 +1684,8 @@ details.repo-search-result summary::marker { } .repository .ui.attached.isSigned.isWarning { - border-left: 1px solid var(--color-error-border); - border-right: 1px solid var(--color-error-border); + border-inline-start: 1px solid var(--color-error-border); + border-inline-end: 1px solid var(--color-error-border); } .repository .ui.attached.isSigned.isWarning.top, @@ -1717,8 +1709,8 @@ details.repo-search-result summary::marker { } .repository .ui.attached.isSigned.isVerified { - border-left: 1px solid var(--color-success-border); - border-right: 1px solid var(--color-success-border); + border-inline-start: 1px solid var(--color-success-border); + border-inline-end: 1px solid var(--color-success-border); } .repository .ui.attached.isSigned.isVerified.top, @@ -1743,8 +1735,8 @@ details.repo-search-result summary::marker { .repository .ui.attached.isSigned.isVerifiedUntrusted, .repository .ui.attached.isSigned.isVerifiedUnmatched { - border-left: 1px solid var(--color-warning-border); - border-right: 1px solid var(--color-warning-border); + border-inline-start: 1px solid var(--color-warning-border); + border-inline-end: 1px solid var(--color-warning-border); } .repository .ui.attached.isSigned.isVerifiedUntrusted.top, @@ -1775,8 +1767,7 @@ details.repo-search-result summary::marker { .repository .segment.reactions.dropdown .menu, .repository .select-reaction.dropdown .menu { - right: 0 !important; - left: auto !important; + inset-inline: auto 0 !important; min-width: 170px; } @@ -1787,7 +1778,7 @@ details.repo-search-result summary::marker { .repository .segment.reactions.dropdown .menu > .item, .repository .select-reaction.dropdown .menu > .item { - float: left; + float: inline-start; margin: 4px; font-size: 20px; width: 34px; @@ -1816,7 +1807,7 @@ details.repo-search-result summary::marker { display: flex !important; align-items: center; border: 0; - border-right: 1px solid; + border-inline-end: 1px solid; border-radius: 0; margin: 0; font-size: 12px; @@ -1826,7 +1817,7 @@ details.repo-search-result summary::marker { } .repository .segment.reactions .ui.label:first-of-type { - border-bottom-left-radius: 3px; + border-end-start-radius: 3px; } .repository .segment.reactions .ui.label.disabled { @@ -1845,7 +1836,7 @@ details.repo-search-result summary::marker { } .repository .segment.reactions .reaction-count { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } .repository .segment.reactions .select-reaction { @@ -1912,7 +1903,7 @@ details.repo-search-result summary::marker { #search-user-box .results .result .image { order: 0; - margin-right: 12px; + margin-inline-end: 12px; width: 2em; height: 2em; min-width: 2em; @@ -2005,7 +1996,7 @@ details.repo-search-result summary::marker { } .comment:target .header::before { - border-right-color: var(--color-primary) !important; + border-inline-end-color: var(--color-primary) !important; filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important; } @@ -2041,7 +2032,7 @@ details.repo-search-result summary::marker { .comment-header::before, .comment-header::after { - right: 100%; + inset-inline-end: 100%; top: 20px; border: solid transparent; content: " "; @@ -2052,13 +2043,13 @@ details.repo-search-result summary::marker { } .comment-header::before { - border-right-color: var(--color-secondary); + border-inline-end-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } .comment-header::after { - border-right-color: var(--color-box-header); + border-inline-end-color: var(--color-box-header); border-width: 8px; margin-top: -8px; } @@ -2070,12 +2061,12 @@ details.repo-search-result summary::marker { .comment-header.arrow-top::before { top: -9px; - left: 6px; + inset-inline-start: 6px; } .comment-header.arrow-top::after { top: -8px; - left: 7px; + inset-inline-start: 7px; } .comment-header-right.actions a:not(.label) { @@ -2120,13 +2111,13 @@ details.repo-search-result summary::marker { } .stats-table .table-cell:first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-start-start-radius: 4px; + border-end-start-radius: 4px; } .stats-table .table-cell:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-start-end-radius: 4px; + border-end-end-radius: 4px; } .labels-list { @@ -2150,15 +2141,15 @@ details.repo-search-result summary::marker { } .ui.label.scope-left { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - margin-right: 0; + border-end-end-radius: 0; + border-start-end-radius: 0; + margin-inline-end: 0; } .ui.label.scope-right { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: 0; + border-end-start-radius: 0; + border-start-start-radius: 0; + margin-inline-start: 0; } .archived-label { @@ -2180,7 +2171,7 @@ details.repo-search-result summary::marker { } .repo-button-row .button.dropdown:not(.icon) { - padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */ + padding-inline-end: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */ } .repo-button-row .button strong { @@ -2257,14 +2248,14 @@ tbody.commit-list { } .git-notes.top { - text-align: left; + text-align: start; } .comment-diff-data { background: var(--color-code-bg); min-height: 12em; max-height: calc(100vh - 10.5rem); - overflow-y: auto; + overflow-block: auto; tab-size: 4; } @@ -2295,14 +2286,14 @@ tbody.commit-list { } .repo-topics .repo-topic:last-of-type { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } #new-dependency-drop-list.ui.selection.dropdown { min-width: 0; width: 100%; border-radius: var(--border-radius) 0 0 var(--border-radius); - border-right: 0; + border-inline-end: 0; white-space: nowrap; } @@ -2349,7 +2340,7 @@ tbody.commit-list { align-items: center; display: flex; justify-content: space-between; - overflow-x: auto; + overflow-inline: auto; padding: 6px 12px !important; font-size: 13px !important; min-height: 46px; @@ -2367,9 +2358,9 @@ tbody.commit-list { } .file-info-entry + .file-info-entry { - border-left: 1px solid currentcolor; - margin-left: 8px; - padding-left: 8px; + border-inline-start: 1px solid currentcolor; + margin-inline-start: 8px; + padding-inline-start: 8px; } #diff-container { @@ -2406,7 +2397,7 @@ tbody.commit-list { top: 47px; max-height: calc(100vh - 47px); height: 100%; - overflow-y: auto; + overflow-block: auto; } .ui.message.unicode-escape-prompt { @@ -2418,8 +2409,8 @@ tbody.commit-list { /* fomantic's last-child selector does not work with hidden last child */ .ui.buttons .unescape-button { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; + border-start-end-radius: 0.28571429rem; + border-end-end-radius: 0.28571429rem; } .webhook-info { @@ -2467,7 +2458,7 @@ tbody.commit-list { } .diff-file-name .ui.label { - margin-left: 0 !important; + margin-inline-start: 0 !important; } .diff-stats-bar { @@ -2483,8 +2474,7 @@ tbody.commit-list { } .ui.form .right .ui.button { - margin-left: 0.25em; - margin-right: 0; + margin-inline: 0.25em 0; } .removed-code { @@ -2532,7 +2522,7 @@ tbody.commit-list { .code-diff-split tbody tr td:nth-child(5), .code-diff-split tbody tr td.add-comment-right { - border-left: 1px solid var(--color-secondary); + border-inline-start: 1px solid var(--color-secondary); } .commits-table .commits-table-right form { @@ -2555,7 +2545,7 @@ tbody.commit-list { .repository.file.list #repo-files-table .commit-list td.age, .repository.file.list #repo-files-table .entry th.age, .repository.file.list #repo-files-table .commit-list th.age { - margin-left: auto; + margin-inline-start: auto; } .repository.file.list #repo-files-table .entry td.message, .repository.file.list #repo-files-table .commit-list td.message, @@ -2565,19 +2555,18 @@ tbody.commit-list { } .repository.view.issue .comment-list .timeline, .repository.view.issue .comment-list .timeline-item { - margin-left: 0; + margin-inline-start: 0; } .repository.view.issue .comment-list .timeline::before { - left: 14px; + inset-inline-start: 14px; } .repository.view.issue .comment-list .timeline .inline-timeline-avatar { display: flex; margin-bottom: auto; - margin-left: 6px; - margin-right: 2px; + margin-inline: 6px 2px; } .repository.view.issue .comment-list .timeline .comment-header { - padding-left: 4px; + padding-inline-start: 4px; } .repository.view.issue .comment-list .timeline .comment-header::before, .repository.view.issue .comment-list .timeline .comment-header::after { @@ -2591,7 +2580,7 @@ tbody.commit-list { } .commit-header-row .ui.horizontal.list { width: 100%; - overflow-x: auto; + overflow-inline: auto; margin-top: 2px; } .commit-header-row .ui.horizontal.list .item { @@ -2621,7 +2610,7 @@ tbody.commit-list { order: 2; /* the "search" button */ } .commit-table { - overflow-x: auto; + overflow-inline: auto; } .commit-table td.sha, .commit-table th.sha { @@ -2634,7 +2623,7 @@ tbody.commit-list { flex-wrap: wrap; } .comment-header .comment-header-right { - margin-left: auto; + margin-inline-start: auto; } } @@ -2666,7 +2655,7 @@ tbody.commit-list { .commit-status-list { max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */ - overflow-x: hidden; + overflow-inline: hidden; transition: max-height .2s; } @@ -2699,7 +2688,7 @@ tbody.commit-list { } .commit-status-item .status-details > span { - padding-right: 0.5em; /* To avoid scrollbar occlusion */ + padding-inline-end: 0.5em; /* To avoid scrollbar occlusion */ } .search-fullname { @@ -2742,8 +2731,8 @@ tbody.commit-list { .repository .issue-content .issue-content-right .ui.grid .column.muted .text.black { border-color: var(--color-secondary); background: var(--color-menu); - border-top-left-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */ + border-top-right-radius: var(--border-radius); /* stylelint-disable-line logical-css/require-logical-properties */ } .repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu { border-top: none; diff --git a/web_src/css/repo/file-view.css b/web_src/css/repo/file-view.css index 2ce7f3ec0f..4f967744db 100644 --- a/web_src/css/repo/file-view.css +++ b/web_src/css/repo/file-view.css @@ -8,7 +8,7 @@ } .lines-code { - padding-left: 5px; + padding-inline-start: 5px; } .file-view tr.active .lines-num, @@ -18,7 +18,7 @@ } .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 { @@ -32,7 +32,7 @@ .file-view tr.active .lines-num::before { content: ""; position: absolute; - left: 0; + inset-inline-start: 0; width: 2px; height: 100%; background: var(--color-highlight-fg); diff --git a/web_src/css/repo/issue-label.css b/web_src/css/repo/issue-label.css index 9b4b144a00..ed34116bbd 100644 --- a/web_src/css/repo/issue-label.css +++ b/web_src/css/repo/issue-label.css @@ -34,7 +34,7 @@ .issue-label-list .item a { font-size: 12px; - padding-right: 10px; + padding-inline-end: 10px; color: var(--color-text-light); } @@ -47,6 +47,6 @@ } .archived-label-hint { - float: right; + float: inline-end; margin: -12px; } diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index 7f1b8c31cd..24bcb68afa 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -18,7 +18,7 @@ } .issue-list-new.button { - margin-right: 0; + margin-inline-end: 0; } .list-header-issues { @@ -31,7 +31,7 @@ } .issue-list-new { order: 1; - margin-left: auto !important; + margin-inline-start: auto !important; } .issue-list-search { order: 2 !important; @@ -44,8 +44,8 @@ **/ .issue-list-toolbar-right .filter.menu { flex-wrap: nowrap; - overflow-x: auto; - overflow-y: hidden; + overflow-inline: auto; + overflow-block: hidden; } /* The following few CSS was created with care and built with the information @@ -89,7 +89,7 @@ } #issue-list .issue-meta .checklist progress { - margin-left: 2px; + margin-inline-start: 2px; width: 80px; height: 6px; display: inline-block; @@ -104,7 +104,7 @@ } .archived-label-filter { - margin-left: 10px; + margin-inline-start: 10px; font-size: 12px; display: flex !important; margin-bottom: 8px; diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css index d32899a06b..d46b8787dc 100644 --- a/web_src/css/repo/linebutton.css +++ b/web_src/css/repo/linebutton.css @@ -9,7 +9,7 @@ padding: 1px 4px !important; position: absolute; font-family: var(--fonts-regular); - left: 0; + inset-inline-start: 0; transform: translateX(calc(-50% + 6px)); cursor: pointer; } diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css index 4f8e39db64..6acc4df668 100644 --- a/web_src/css/repo/list-header.css +++ b/web_src/css/repo/list-header.css @@ -8,8 +8,7 @@ .list-header-sort { display: flex; align-items: center; - padding-left: 1rem; - padding-right: 1rem; + padding-inline: 1rem; } .list-header-search { @@ -35,6 +34,6 @@ } .list-header-sort { order: 2; - margin-left: auto; + margin-inline-start: auto; } } diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index b421b13562..713a268594 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -1,6 +1,6 @@ #release-list { margin-top: 10px; /* Overriding browser default for