code.gitea.io/gitea@v1.22.3/web_src/css/modules/table.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.table {
     5    width: 100%;
     6    margin: 1em 0;
     7    border: 1px solid var(--color-secondary);
     8    border-radius: 0.28571429rem;
     9    vertical-align: middle;
    10    border-collapse: separate;
    11    border-spacing: 0;
    12    color: var(--color-text);
    13    background: var(--color-box-body);
    14    border-color: var(--color-secondary);
    15    text-align: start;
    16  }
    17  
    18  .ui.table:first-child {
    19    margin-top: 0;
    20  }
    21  .ui.table:last-child {
    22    margin-bottom: 0;
    23  }
    24  .ui.table > thead,
    25  .ui.table > tbody {
    26    text-align: inherit;
    27    vertical-align: inherit;
    28  }
    29  
    30  .ui.table > thead > tr > th {
    31    background: var(--color-box-header);
    32    text-align: inherit;
    33    color: var(--color-text);
    34    padding: 6px 5px;
    35    vertical-align: inherit;
    36    font-weight: var(--font-weight-normal);
    37    border-bottom: 1px solid var(--color-secondary);
    38    border-left: none;
    39  }
    40  .ui.table > thead > tr > th:first-child {
    41    border-left: none;
    42  }
    43  .ui.table > thead > tr:first-child > th:first-child {
    44    border-radius: 0.28571429rem 0 0;
    45  }
    46  .ui.table > thead > tr:first-child > th:last-child {
    47    border-radius: 0 0.28571429rem 0 0;
    48  }
    49  .ui.table > thead > tr:first-child > th:only-child {
    50    border-radius: 0.28571429rem 0.28571429rem 0 0;
    51  }
    52  
    53  .ui.table > tfoot > tr > th,
    54  .ui.table > tfoot > tr > td {
    55    border-top: 1px solid var(--color-secondary);
    56    background: var(--color-box-body);
    57    text-align: inherit;
    58    color: var(--color-text);
    59    padding: 0.78571429em;
    60    vertical-align: inherit;
    61    font-weight: var(--font-weight-normal);
    62  }
    63  .ui.table > tfoot > tr > th:first-child,
    64  .ui.table > tfoot > tr > td:first-child {
    65    border-left: none;
    66  }
    67  .ui.table > tfoot > tr:first-child > th:first-child,
    68  .ui.table > tfoot > tr:first-child > td:first-child {
    69    border-radius: 0 0 0 0.28571429rem;
    70  }
    71  .ui.table > tfoot > tr:first-child > th:last-child,
    72  .ui.table > tfoot > tr:first-child > td:last-child {
    73    border-radius: 0 0 0.28571429rem;
    74  }
    75  .ui.table > tfoot > tr:first-child > th:only-child,
    76  .ui.table > tfoot > tr:first-child > td:only-child {
    77    border-radius: 0 0 0.28571429rem 0.28571429rem;
    78  }
    79  
    80  .ui.table > tr > td,
    81  .ui.table > tbody > tr > td {
    82    border-top: 1px solid var(--color-secondary-alpha-50);
    83    padding: 6px 5px;
    84    text-align: inherit;
    85  }
    86  .ui.table > tr:first-child > td,
    87  .ui.table > tbody > tr:first-child > td {
    88    border-top: none;
    89  }
    90  
    91  .ui.table.segment {
    92    padding: 0;
    93  }
    94  .ui.table.segment::after {
    95    display: none;
    96  }
    97  
    98  @media only screen and (max-width: 767.98px) {
    99    .ui.table:not(.unstackable) {
   100      width: 100%;
   101      padding: 0;
   102    }
   103    .ui.table:not(.unstackable) > thead,
   104    .ui.table:not(.unstackable) > thead > tr,
   105    .ui.table:not(.unstackable) > tfoot,
   106    .ui.table:not(.unstackable) > tfoot > tr,
   107    .ui.table:not(.unstackable) > tbody,
   108    .ui.table:not(.unstackable) > tr,
   109    .ui.table:not(.unstackable) > tbody > tr,
   110    .ui.table:not(.unstackable) > tr > th,
   111    .ui.table:not(.unstackable) > thead > tr > th,
   112    .ui.table:not(.unstackable) > tbody > tr > th,
   113    .ui.table:not(.unstackable) > tfoot > tr > th,
   114    .ui.table:not(.unstackable) > tr > td,
   115    .ui.table:not(.unstackable) > tbody > tr > td,
   116    .ui.table:not(.unstackable) > tfoot > tr > td {
   117      display: block !important;
   118      width: auto !important;
   119    }
   120    .ui.table:not(.unstackable) > thead {
   121      display: block;
   122    }
   123    .ui.table:not(.unstackable) > tfoot {
   124      display: block;
   125    }
   126    .ui.ui.ui.ui.table:not(.unstackable) > tr,
   127    .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
   128    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
   129    .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
   130      padding-top: 1em;
   131      padding-bottom: 1em;
   132    }
   133    .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
   134    .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
   135    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
   136    .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
   137    .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
   138    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
   139    .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
   140      background: none;
   141      border: none;
   142      padding: 0.25em 0.75em;
   143    }
   144    .ui.table:not(.unstackable) > tr > th:first-child,
   145    .ui.table:not(.unstackable) > thead > tr > th:first-child,
   146    .ui.table:not(.unstackable) > tbody > tr > th:first-child,
   147    .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
   148    .ui.table:not(.unstackable) > tr > td:first-child,
   149    .ui.table:not(.unstackable) > tbody > tr > td:first-child,
   150    .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
   151      font-weight: var(--font-weight-normal);
   152    }
   153  }
   154  
   155  .ui.table[class*="left aligned"],
   156  .ui.table [class*="left aligned"] {
   157    text-align: left;
   158  }
   159  
   160  .ui.table[class*="center aligned"],
   161  .ui.table [class*="center aligned"] {
   162    text-align: center;
   163  }
   164  
   165  .ui.table[class*="right aligned"],
   166  .ui.table [class*="right aligned"] {
   167    text-align: right;
   168  }
   169  
   170  .ui.table[class*="top aligned"],
   171  .ui.table [class*="top aligned"] {
   172    vertical-align: top;
   173  }
   174  
   175  .ui.table[class*="middle aligned"],
   176  .ui.table [class*="middle aligned"] {
   177    vertical-align: middle;
   178  }
   179  
   180  .ui.table th.collapsing,
   181  .ui.table td.collapsing {
   182    width: 1px;
   183    white-space: nowrap;
   184  }
   185  
   186  .ui.fixed.table {
   187    table-layout: fixed;
   188  }
   189  .ui.fixed.table th,
   190  .ui.fixed.table td {
   191    overflow: hidden;
   192    text-overflow: ellipsis;
   193  }
   194  
   195  .ui.attached.table {
   196    top: 0;
   197    bottom: 0;
   198    border-radius: 0;
   199    margin: 0 -1px;
   200    width: calc(100% + 2px);
   201    max-width: calc(100% + 2px);
   202    border: 1px solid var(--color-secondary);
   203  }
   204  .ui.attached + .ui.attached.table:not(.top) {
   205    border-top: none;
   206  }
   207  
   208  .ui[class*="bottom attached"].table {
   209    bottom: 0;
   210    margin-top: 0;
   211    top: 0;
   212    margin-bottom: 1em;
   213    border-radius: 0 0 0.28571429rem 0.28571429rem;
   214  }
   215  .ui[class*="bottom attached"].table:last-child {
   216    margin-bottom: 0;
   217  }
   218  
   219  .ui.striped.table > tr:nth-child(2n),
   220  .ui.striped.table > tbody > tr:nth-child(2n) {
   221    background: var(--color-light);
   222  }
   223  
   224  .ui.table[class*="single line"],
   225  .ui.table [class*="single line"] {
   226    white-space: nowrap;
   227  }
   228  
   229  /* Column Width */
   230  .ui.table th.one.wide,
   231  .ui.table td.one.wide {
   232    width: 6.25%;
   233  }
   234  .ui.table th.two.wide,
   235  .ui.table td.two.wide {
   236    width: 12.5%;
   237  }
   238  .ui.table th.three.wide,
   239  .ui.table td.three.wide {
   240    width: 18.75%;
   241  }
   242  .ui.table th.four.wide,
   243  .ui.table td.four.wide {
   244    width: 25%;
   245  }
   246  .ui.table th.five.wide,
   247  .ui.table td.five.wide {
   248    width: 31.25%;
   249  }
   250  .ui.table th.six.wide,
   251  .ui.table td.six.wide {
   252    width: 37.5%;
   253  }
   254  .ui.table th.seven.wide,
   255  .ui.table td.seven.wide {
   256    width: 43.75%;
   257  }
   258  .ui.table th.eight.wide,
   259  .ui.table td.eight.wide {
   260    width: 50%;
   261  }
   262  .ui.table th.nine.wide,
   263  .ui.table td.nine.wide {
   264    width: 56.25%;
   265  }
   266  .ui.table th.ten.wide,
   267  .ui.table td.ten.wide {
   268    width: 62.5%;
   269  }
   270  .ui.table th.eleven.wide,
   271  .ui.table td.eleven.wide {
   272    width: 68.75%;
   273  }
   274  .ui.table th.twelve.wide,
   275  .ui.table td.twelve.wide {
   276    width: 75%;
   277  }
   278  .ui.table th.thirteen.wide,
   279  .ui.table td.thirteen.wide {
   280    width: 81.25%;
   281  }
   282  .ui.table th.fourteen.wide,
   283  .ui.table td.fourteen.wide {
   284    width: 87.5%;
   285  }
   286  .ui.table th.fifteen.wide,
   287  .ui.table td.fifteen.wide {
   288    width: 93.75%;
   289  }
   290  .ui.table th.sixteen.wide,
   291  .ui.table td.sixteen.wide {
   292    width: 100%;
   293  }
   294  
   295  .ui.basic.table {
   296    background: transparent;
   297    border: 1px solid var(--color-secondary);
   298  }
   299  .ui.basic.table > thead > tr > th,
   300  .ui.basic.table > tbody > tr > th,
   301  .ui.basic.table > tfoot > tr > th,
   302  .ui.basic.table > tr > th {
   303    background: transparent;
   304    border-left: none;
   305  }
   306  .ui.basic.table > tbody > tr {
   307    border-bottom: 1px solid var(--color-secondary);
   308  }
   309  .ui.basic.table > tbody > tr > td,
   310  .ui.basic.table > tfoot > tr > td,
   311  .ui.basic.table > tr > td {
   312    background: transparent;
   313  }
   314  .ui.basic.striped.table > tbody > tr:nth-child(2n) {
   315    background: var(--color-light);
   316  }
   317  
   318  .ui[class*="very basic"].table {
   319    border: none;
   320  }
   321  .ui[class*="very basic"].table:not(.striped) > tr > th:first-child,
   322  .ui[class*="very basic"].table:not(.striped) > thead > tr > th:first-child,
   323  .ui[class*="very basic"].table:not(.striped) > tbody > tr > th:first-child,
   324  .ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:first-child,
   325  .ui[class*="very basic"].table:not(.striped) > tr > td:first-child,
   326  .ui[class*="very basic"].table:not(.striped) > tbody > tr > td:first-child,
   327  .ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:first-child {
   328    padding-left: 0;
   329  }
   330  .ui[class*="very basic"].table:not(.striped) > tr > th:last-child,
   331  .ui[class*="very basic"].table:not(.striped) > thead > tr > th:last-child,
   332  .ui[class*="very basic"].table:not(.striped) > tbody > tr > th:last-child,
   333  .ui[class*="very basic"].table:not(.striped) > tfoot > tr > th:last-child,
   334  .ui[class*="very basic"].table:not(.striped) > tr > td:last-child,
   335  .ui[class*="very basic"].table:not(.striped) > tbody > tr > td:last-child,
   336  .ui[class*="very basic"].table:not(.striped) > tfoot > tr > td:last-child {
   337    padding-right: 0;
   338  }
   339  .ui[class*="very basic"].table:not(.striped) > thead > tr:first-child > th {
   340    padding-top: 0;
   341  }
   342  
   343  .ui.celled.table > tr > th,
   344  .ui.celled.table > thead > tr > th,
   345  .ui.celled.table > tbody > tr > th,
   346  .ui.celled.table > tfoot > tr > th,
   347  .ui.celled.table > tr > td,
   348  .ui.celled.table > tbody > tr > td,
   349  .ui.celled.table > tfoot > tr > td {
   350    border-left: 1px solid var(--color-secondary-alpha-50);
   351  }
   352  .ui.celled.table > tr > th:first-child,
   353  .ui.celled.table > thead > tr > th:first-child,
   354  .ui.celled.table > tbody > tr > th:first-child,
   355  .ui.celled.table > tfoot > tr > th:first-child,
   356  .ui.celled.table > tr > td:first-child,
   357  .ui.celled.table > tbody > tr > td:first-child,
   358  .ui.celled.table > tfoot > tr > td:first-child {
   359    border-left: none;
   360  }
   361  
   362  .ui.compact.table > tr > th,
   363  .ui.compact.table > thead > tr > th,
   364  .ui.compact.table > tbody > tr > th,
   365  .ui.compact.table > tfoot > tr > th {
   366    padding-left: 0.7em;
   367    padding-right: 0.7em;
   368  }
   369  .ui.compact.table > tr > td,
   370  .ui.compact.table > tbody > tr > td,
   371  .ui.compact.table > tfoot > tr > td {
   372    padding: 0.5em 0.7em;
   373  }
   374  
   375  /* use more horizontal padding on first and last items for visuals */
   376  .ui.table > thead > tr > th:first-of-type,
   377  .ui.table > tbody > tr > td:first-of-type,
   378  .ui.table > tr > td:first-of-type {
   379    padding-left: 10px;
   380  }
   381  .ui.table > thead > tr > th:last-of-type,
   382  .ui.table > tbody > tr > td:last-of-type,
   383  .ui.table > tr > td:last-of-type {
   384    padding-right: 10px;
   385  }