mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-13 14:30:25 +00:00
6b75654cc2
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>
194 lines
5.3 KiB
CSS
194 lines
5.3 KiB
CSS
/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
|
|
unused rules here after refactoring, please remove them. */
|
|
|
|
.ui.input {
|
|
position: relative;
|
|
font-weight: var(--font-weight-normal);
|
|
display: inline-flex;
|
|
color: var(--color-input-text);
|
|
}
|
|
.ui.input > input {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
flex: 1 0 auto;
|
|
outline: none;
|
|
font-family: var(--fonts-regular);
|
|
padding: 0.67857143em 1em;
|
|
border: 1px solid var(--color-input-border);
|
|
color: var(--color-input-text);
|
|
border-radius: 0.28571429rem;
|
|
line-height: var(--line-height-default);
|
|
text-align: start;
|
|
}
|
|
|
|
.ui.disabled.input,
|
|
.ui.input:not(.disabled) input[disabled] {
|
|
opacity: var(--opacity-disabled);
|
|
}
|
|
.ui.disabled.input > input,
|
|
.ui.input:not(.disabled) input[disabled] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui.input.focus > input,
|
|
.ui.input > input:focus {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.ui.input.error > input {
|
|
background: var(--color-error-bg);
|
|
border-color: var(--color-error-border);
|
|
color: var(--color-error-text);
|
|
}
|
|
|
|
.ui.icon.input > i.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: default;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 0;
|
|
inset-inline-end: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
width: 2.67142857em;
|
|
opacity: 0.5;
|
|
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
|
pointer-events: none;
|
|
padding: 4px;
|
|
}
|
|
|
|
.ui.icon.input > i.icon.is-loading {
|
|
position: absolute !important;
|
|
height: 28px;
|
|
top: 4px;
|
|
}
|
|
|
|
.ui.icon.input > i.icon.is-loading > * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.ui.ui.ui.ui.icon.input > textarea,
|
|
.ui.ui.ui.ui.icon.input > input {
|
|
padding-inline-end: 2.67142857em;
|
|
}
|
|
.ui.icon.input > i.link.icon {
|
|
cursor: pointer;
|
|
}
|
|
.ui.icon.input > i.circular.icon {
|
|
top: 0.35em;
|
|
inset-inline-end: 0.5em;
|
|
}
|
|
|
|
.ui[class*="left icon"].input > i.icon {
|
|
inset-inline: 1px auto;
|
|
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
|
}
|
|
.ui[class*="left icon"].input > i.circular.icon {
|
|
inset-inline: 0.5em auto;
|
|
}
|
|
.ui.ui.ui.ui[class*="left icon"].input > textarea,
|
|
.ui.ui.ui.ui[class*="left icon"].input > input {
|
|
padding-inline: 2.67142857em 1em;
|
|
}
|
|
|
|
.ui.icon.input > textarea:focus ~ .icon,
|
|
.ui.icon.input > input:focus ~ .icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui.icon.input > textarea ~ i.icon {
|
|
height: 3em;
|
|
}
|
|
|
|
.ui.form .field.error > .ui.action.input > .ui.button,
|
|
.ui.action.input.error > .ui.button {
|
|
border-top: 1px solid var(--color-error-border);
|
|
border-bottom: 1px solid var(--color-error-border);
|
|
}
|
|
|
|
.ui.action.input > .button,
|
|
.ui.action.input > .buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
.ui.action.input > .button,
|
|
.ui.action.input > .buttons > .button {
|
|
padding-top: 0.78571429em;
|
|
padding-bottom: 0.78571429em;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui.action.input:not([class*="left action"]) > input {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
border-inline-end-color: transparent;
|
|
}
|
|
|
|
.ui.action.input > .dropdown:first-child,
|
|
.ui.action.input > .button:first-child,
|
|
.ui.action.input > .buttons:first-child > .button {
|
|
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
|
}
|
|
.ui.action.input > .dropdown:not(:first-child),
|
|
.ui.action.input > .button:not(:first-child),
|
|
.ui.action.input > .buttons:not(:first-child) > .button {
|
|
border-radius: 0;
|
|
}
|
|
.ui.action.input > .dropdown:last-child,
|
|
.ui.action.input > .button:last-child,
|
|
.ui.action.input > .buttons:last-child > .button {
|
|
border-radius: 0 0.28571429rem 0.28571429rem 0;
|
|
}
|
|
|
|
.ui.fluid.input {
|
|
display: flex;
|
|
}
|
|
.ui.fluid.input > input {
|
|
width: 0 !important;
|
|
}
|
|
|
|
.ui.tiny.input {
|
|
font-size: 0.85714286em;
|
|
}
|
|
.ui.small.input {
|
|
font-size: 0.92857143em;
|
|
}
|
|
|
|
.ui.action.input .ui.ui.button {
|
|
border-color: var(--color-input-border);
|
|
padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* currently used for search bar dropdowns in repo search and explore code */
|
|
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
|
|
min-width: 10em;
|
|
}
|
|
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
|
|
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; /* 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-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,
|
|
.ui.action.input:not([class*="left action"]) > input:focus + .button,
|
|
.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-inline-start-color: var(--color-primary);
|
|
}
|
|
.ui.action.input:not([class*="left action"]) > input:focus {
|
|
border-inline-end-color: var(--color-primary);
|
|
}
|