mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-02-03 20:51:07 -05:00
2a3d852e46
Followup to https://codeberg.org/forgejo/forgejo/pulls/8859, https://codeberg.org/forgejo/forgejo/pulls/9636. Convert the create branch and rename branch modals in the branch list to native dialogs and convert the create branch and create tag in the commit view to native dialogs. The dialogs in the commit view have been simplified and no longer uses javascript to construct the data in the dialog (thus would be eligible for nojs modals). The dialogs have footer styled actions. The rename branch modal now has a 'branch name' label to indicate the field is required. E2E testing is added. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9760 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Gusted <postmaster@gusted.xyz> Co-committed-by: Gusted <postmaster@gusted.xyz>
102 lines
1.9 KiB
CSS
102 lines
1.9 KiB
CSS
body:has(dialog[open]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
dialog {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
text-align: left;
|
|
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;
|
|
padding: 0;
|
|
max-width: min(800px, 90vw);
|
|
width: fit-content;
|
|
z-index: 1001;
|
|
|
|
pointer-events: auto;
|
|
touch-action: auto;
|
|
}
|
|
|
|
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);
|
|
border-top-right-radius: var(--border-radius);
|
|
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;
|
|
}
|
|
|
|
/* positive/negative action buttons */
|
|
dialog .actions .ui.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
dialog .actions .ui.button.danger {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
dialog .actions .ui.button .svg {
|
|
margin-right: 5px;
|
|
}
|