code.gitea.io/gitea@v1.21.7/web_src/css/shared/flex-list.css (about)

     1  .flex-list {
     2    list-style: none;
     3  }
     4  
     5  .flex-item {
     6    display: flex;
     7    gap: 8px;
     8    align-items: flex-start;
     9    padding: 10px 0;
    10  }
    11  
    12  .flex-item .flex-item-leading {
    13    display: flex;
    14    align-items: flex-start;
    15  }
    16  
    17  .flex-item .flex-item-main {
    18    display: flex;
    19    flex-direction: column;
    20    flex-grow: 1;
    21    flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
    22    min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
    23  }
    24  
    25  .flex-item-header {
    26    display: flex;
    27    gap: .25rem;
    28    justify-content: space-between;
    29    flex-wrap: wrap;
    30  }
    31  
    32  .flex-item a:not(.label, .button):hover {
    33    color: var(--color-primary) !important;
    34  }
    35  
    36  .flex-item .flex-item-icon {
    37    align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */
    38  }
    39  
    40  .flex-item .flex-item-icon + .flex-item-main {
    41    align-self: baseline;
    42  }
    43  
    44  .flex-item .flex-item-trailing {
    45    display: flex;
    46    gap: 0.5rem;
    47    align-items: center;
    48    flex-grow: 0;
    49    flex-wrap: wrap;
    50    justify-content: end;
    51  }
    52  
    53  .flex-item .flex-item-title {
    54    display: inline-flex;
    55    flex-wrap: wrap;
    56    align-items: center;
    57    gap: .25rem;
    58    max-width: 100%;
    59    color: var(--color-text);
    60    font-size: 16px;
    61    font-weight: var(--font-weight-semibold);
    62    word-break: break-word;
    63    min-width: 0;
    64  }
    65  
    66  .flex-item .flex-item-title a {
    67    color: var(--color-text);
    68    overflow-wrap: anywhere;
    69  }
    70  
    71  .flex-item .flex-item-body {
    72    display: flex;
    73    align-items: center;
    74    flex-wrap: wrap;
    75    gap: .25rem;
    76    color: var(--color-text-light-2);
    77    word-break: break-word;
    78  }
    79  
    80  .flex-item .flex-item-body a {
    81    color: inherit;
    82    overflow-wrap: anywhere;
    83  }
    84  
    85  .flex-list > .flex-item + .flex-item {
    86    border-top: 1px solid var(--color-secondary);
    87  }
    88  
    89  /* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `gt-hidden` siblings).
    90  Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */
    91  .flex-list.flex-space-fitted > .flex-item:first-child,
    92  .ui.segment > .flex-list > .flex-item:first-child {
    93    padding-top: 0;
    94  }
    95  
    96  .flex-list.flex-space-fitted > .flex-item:last-child,
    97  .ui.segment > .flex-list > .flex-item:last-child {
    98    padding-bottom: 0;
    99  }
   100  
   101  /* If there is a divider besides the flex-list, some padding/margin are not needs */
   102  .divider + .flex-list > .flex-item:first-child {
   103    padding-top: 0;
   104  }
   105  
   106  .flex-list + .divider {
   107    margin-top: 0;
   108  }