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>
113 lines
2.6 KiB
CSS
113 lines
2.6 KiB
CSS
body:has(dialog[open]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
dialog {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
text-align: start;
|
|
border: none;
|
|
background: var(--color-body);
|
|
box-shadow:
|
|
1px 3px 3px 0 var(--color-shadow),
|
|
1px 3px 15px 2px var(--color-shadow);
|
|
border-radius: 0.28571429rem;
|
|
outline: none;
|
|
z-index: 1001;
|
|
|
|
pointer-events: auto;
|
|
touch-action: auto;
|
|
|
|
/* Modals shouldn't be wider than 800px ever. On narrow screens they shouldn't
|
|
* be wider than the screen, with a small margin */
|
|
max-width: min(800px, calc(100vw - var(--page-margin-x) * 2));
|
|
/* Modals also should't be tiny compared to the screen width */
|
|
min-width: min(400px, calc(100vw - var(--page-margin-x) * 2));
|
|
|
|
/* Suppress default <dialog> padding */
|
|
padding: 0;
|
|
}
|
|
|
|
dialog[open],
|
|
dialog:target {
|
|
display: flex;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: var(--color-overlay-backdrop);
|
|
will-change: opacity;
|
|
opacity: 0;
|
|
animation-name: fadein;
|
|
animation-duration: 100ms;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
dialog[open]::backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
dialog header {
|
|
font-size: 1.42857143rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: var(--fonts-regular);
|
|
color: var(--color-text-dark);
|
|
margin: 0;
|
|
padding: 1.25rem 1.5rem;
|
|
box-shadow: none;
|
|
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);
|
|
}
|
|
|
|
dialog article {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
dialog .content {
|
|
padding: 1.5em;
|
|
background: var(--color-body);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
dialog .content:not(.tw-hidden) + form > .content {
|
|
padding-top: 0;
|
|
}
|
|
|
|
dialog .actions {
|
|
background: var(--color-secondary-bg);
|
|
border-color: var(--color-secondary);
|
|
display: flex;
|
|
gap: 1em;
|
|
justify-content: flex-end;
|
|
padding: 1rem;
|
|
}
|
|
|
|
dialog footer {
|
|
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 */
|
|
dialog .actions .ui.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
dialog .actions .ui.button.danger {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
dialog .actions .ui.button .svg {
|
|
margin-inline-end: 5px;
|
|
}
|