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

     1  /* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any
     2     unused rules here after refactoring, please remove them. */
     3  
     4  .ui.segment {
     5    position: relative;
     6    margin: 1rem 0;
     7    padding: 1em;
     8    border-radius: 0.28571429rem;
     9    border: 1px solid var(--color-secondary);
    10    background: var(--color-box-body);
    11    color: var(--color-text);
    12  }
    13  .ui.segment:first-child {
    14    margin-top: 0;
    15  }
    16  .ui.segment:last-child {
    17    margin-bottom: 0;
    18  }
    19  
    20  .ui.grid.segment {
    21    margin: 1rem 0;
    22    border-radius: 0.28571429rem;
    23  }
    24  
    25  .ui.segment.tab:last-child {
    26    margin-bottom: 1rem;
    27  }
    28  
    29  .ui.segments {
    30    flex-direction: column;
    31    position: relative;
    32    margin: 1rem 0;
    33    border: 1px solid var(--color-secondary);
    34    border-radius: 0.28571429rem;
    35    background: var(--color-box-body);
    36    color: var(--color-text);
    37  }
    38  .ui.segments:first-child {
    39    margin-top: 0;
    40  }
    41  .ui.segments:last-child {
    42    margin-bottom: 0;
    43  }
    44  
    45  .ui.segments > .segment {
    46    top: 0;
    47    bottom: 0;
    48    border-radius: 0;
    49    margin: 0;
    50    width: auto;
    51    box-shadow: none;
    52    border: none;
    53    border-top: 1px solid var(--color-secondary);
    54  }
    55  .ui.segments:not(.horizontal) > .segment:first-child {
    56    top: 0;
    57    bottom: 0;
    58    border-top: none;
    59    margin-top: 0;
    60    margin-bottom: 0;
    61    border-radius: 0.28571429rem 0.28571429rem 0 0;
    62  }
    63  
    64  .ui.segments:not(.horizontal) > .segment:last-child {
    65    top: 0;
    66    bottom: 0;
    67    margin-top: 0;
    68    margin-bottom: 0;
    69    border-radius: 0 0 0.28571429rem 0.28571429rem;
    70  }
    71  
    72  .ui.segments:not(.horizontal) > .segment:only-child,
    73  .ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
    74    border-radius: 0.28571429rem;
    75  }
    76  
    77  .ui.segments > .ui.segments {
    78    border-top: 1px solid var(--color-secondary);
    79    margin: 1rem;
    80  }
    81  .ui.segments > .segments:first-child {
    82    border-top: none;
    83  }
    84  .ui.segments > .segment + .segments:not(.horizontal) {
    85    margin-top: 0;
    86  }
    87  
    88  .ui.horizontal.segments {
    89    display: flex;
    90    flex-direction: row;
    91    background-color: transparent;
    92    padding: 0;
    93    margin: 1rem 0;
    94    border-radius: 0.28571429rem;
    95    border: 1px solid var(--color-secondary);
    96  }
    97  
    98  .ui.horizontal.segments > .segment {
    99    margin: 0;
   100    min-width: 0;
   101    border-radius: 0;
   102    border: none;
   103    box-shadow: none;
   104    border-left: 1px solid var(--color-secondary);
   105  }
   106  
   107  .ui.segments > .horizontal.segments:first-child {
   108    border-top: none;
   109  }
   110  .ui.horizontal.segments:not(.stackable) > .segment:first-child {
   111    border-left: none;
   112  }
   113  .ui.horizontal.segments > .segment:first-child {
   114    border-radius: 0.28571429rem 0 0 0.28571429rem;
   115  }
   116  .ui.horizontal.segments > .segment:last-child {
   117    border-radius: 0 0.28571429rem 0.28571429rem 0;
   118  }
   119  
   120  .ui.clearing.segment::after {
   121    content: "";
   122    display: block;
   123    clear: both;
   124  }
   125  
   126  .ui[class*="left aligned"].segment {
   127    text-align: left;
   128  }
   129  .ui[class*="center aligned"].segment {
   130    text-align: center;
   131  }
   132  
   133  .ui.secondary.segment {
   134    background: var(--color-secondary-bg);
   135    color: var(--color-text-light);
   136  }
   137  
   138  .ui.attached.segment {
   139    top: 0;
   140    bottom: 0;
   141    border-radius: 0;
   142    margin: 0 -1px;
   143    width: calc(100% + 2px);
   144    max-width: calc(100% + 2px);
   145    box-shadow: none;
   146    border: 1px solid var(--color-secondary);
   147    background: var(--color-box-body);
   148    color: var(--color-text);
   149  }
   150  .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
   151    border-top: none;
   152  }
   153  
   154  .ui.attached.segment:has(+ .ui[class*="top attached"].header),
   155  .ui.attached.segment:has(+ .page.buttons),
   156  .ui.attached.segment:last-child,
   157  .ui.segment:has(+ .ui.segment:not(.attached)),
   158  .ui.attached.segment:has(+ .ui.modal) {
   159    border-bottom-left-radius: 0.28571429rem;
   160    border-bottom-right-radius: 0.28571429rem;
   161  }
   162  
   163  .ui[class*="top attached"].segment {
   164    bottom: 0;
   165    margin-bottom: 0;
   166    top: 0;
   167    margin-top: 1rem;
   168    border-radius: 0.28571429rem 0.28571429rem 0 0;
   169  }
   170  .ui.segment[class*="top attached"]:first-child {
   171    margin-top: 0;
   172  }
   173  .ui[class*="top attached"].segment:last-child {
   174    border-top-left-radius: 0.28571429rem;
   175    border-top-right-radius: 0.28571429rem;
   176  }
   177  
   178  .ui.segment[class*="bottom attached"] {
   179    bottom: 0;
   180    margin-top: 0;
   181    top: 0;
   182    margin-bottom: 1rem;
   183    border-radius: 0 0 0.28571429rem 0.28571429rem;
   184  }
   185  .ui.segment[class*="bottom attached"]:last-child {
   186    margin-bottom: 1rem;
   187  }
   188  
   189  .ui.fitted.segment:not(.horizontally) {
   190    padding-top: 0;
   191    padding-bottom: 0;
   192  }
   193  .ui.fitted.segment:not(.vertically) {
   194    padding-left: 0;
   195    padding-right: 0;
   196  }
   197  
   198  .ui.segments .segment,
   199  .ui.segment {
   200    font-size: 1rem;
   201  }
   202  
   203  .ui.error.segment {
   204    border-color: var(--color-error-border) !important;
   205  }
   206  
   207  .ui.warning.segment {
   208    border-color: var(--color-warning-border) !important;
   209  }