owen/gitocean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

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

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
Cameron Radmore
2026-05-11 00:20:45 +02:00
committed by Gusted
parent a8cae6d511
commit 6b75654cc2
74 changed files with 556 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/css/base.css
+36 -41
View File
@@ -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 <img> */
margin-inline-end: .78rem; /* use the same margin as for <img> */
}
.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 "<i>" font icons, so we need to reset the icon styles */
@@ -1370,11 +1365,11 @@ table th[data-sortt-desc] .svg {
}
.ui.ui.dropdown > .dropdown.icon {
right: 0.5em;
inset-inline-end: 0.5em;
}
.ui.ui.dropdown > .remove.icon {
right: 2em;
inset-inline-end: 2em;
}
.btn,