code.gitea.io/gitea@v1.22.3/web_src/css/modules/modal.css (about)

     1  .ui.modal.g-modal-confirm {
     2    max-width: min(800px, 90vw);
     3    width: fit-content;
     4  }
     5  
     6  .ui.modal.g-modal-confirm > .inside.close.icon {
     7    padding: 0;
     8    width: 1em;
     9    height: 1em;
    10    top: 1.2em;
    11  }
    12  
    13  .ui.modal > .close.inside {
    14    color: inherit;
    15  }
    16  
    17  .ui.modal > .close.icon[height="16"] {
    18    top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
    19    color: var(--color-text-dark);
    20  }
    21  
    22  .ui.modal > .header {
    23    /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
    24    color: var(--color-text-dark);
    25    background: var(--color-body);
    26    border-color: var(--color-secondary);
    27    border-top-left-radius: var(--border-radius);
    28    border-top-right-radius: var(--border-radius);
    29    vertical-align: middle;
    30  }
    31  
    32  .ui.modal > .header .svg {
    33    vertical-align: middle;
    34    display: inline-block;
    35  }
    36  
    37  .ui.modal {
    38    background: var(--color-body);
    39    box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
    40  }
    41  
    42  /* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly
    43  Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div>
    44  However, Gitea uses the following layouts:
    45  * <div .modal><div .content><div .actions/></div></div>
    46  * <div .modal><form><div .content/><div .actions/></form></div>
    47  * <div .modal><div .content><form><div .actions/></form></div></div>
    48  * <div .modal><div .content></div><form><div .actions/></form></div>
    49  * ...
    50  These inconsistent layouts should be refactored to simple ones.
    51  */
    52  
    53  .ui.modal > .content,
    54  .ui.modal form > .content {
    55    padding: 1.5em;
    56    background: var(--color-body);
    57    border-radius: 0 0 var(--border-radius) var(--border-radius);
    58  }
    59  
    60  .ui.modal > .actions,
    61  .ui.modal .content + .actions,
    62  .ui.modal .content + form > .actions {
    63    background: var(--color-secondary-bg);
    64    border-color: var(--color-secondary);
    65    padding: 1rem;
    66    text-align: right;
    67    border-radius: 0 0 var(--border-radius) var(--border-radius);
    68  }
    69  
    70  .ui.modal .content > .actions {
    71    padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
    72    text-align: right;
    73  }
    74  
    75  /* positive/negative action buttons */
    76  .ui.modal .actions > .ui.button {
    77    display: inline-flex;
    78    align-items: center;
    79    padding: 10px 12px 10px 10px;
    80    margin-right: 0;
    81  }
    82  
    83  .ui.modal .actions > .ui.button.danger {
    84    display: block;
    85    width: 100%;
    86    margin: 0 auto;
    87    text-align: center;
    88  }
    89  
    90  .ui.modal .actions > .ui.button .svg {
    91    margin-right: 5px;
    92  }