mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-20 01:36:37 +00:00
chore: enforce RTL-friendly logical CSS properties with a linter (#12491)
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
Gusted
parent
a8cae6d511
commit
6b75654cc2
74 changed files with 556 additions and 599 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.gitea-select::after {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
width: 14px;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
.user-cards .card .avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 14px;
|
||||
margin-inline-end: 14px;
|
||||
}
|
||||
|
||||
.user-cards .card .name {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue