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

     1  /* based on Fomantic UI grid 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.grid {
     5    display: flex;
     6    flex-direction: row;
     7    flex-wrap: wrap;
     8    align-items: stretch;
     9    padding: 0;
    10    margin-top: -1rem;
    11    margin-bottom: -1rem;
    12    margin-left: -1rem;
    13    margin-right: -1rem;
    14  }
    15  
    16  .ui.relaxed.grid {
    17    margin-left: -1.5rem;
    18    margin-right: -1.5rem;
    19  }
    20  .ui[class*="very relaxed"].grid {
    21    margin-left: -2.5rem;
    22    margin-right: -2.5rem;
    23  }
    24  
    25  .ui.grid + .grid {
    26    margin-top: 1rem;
    27  }
    28  
    29  .ui.grid > .column:not(.row),
    30  .ui.grid > .row > .column {
    31    position: relative;
    32    display: inline-block;
    33    width: 6.25%;
    34    padding-left: 1rem;
    35    padding-right: 1rem;
    36    vertical-align: top;
    37  }
    38  .ui.grid > * {
    39    padding-left: 1rem;
    40    padding-right: 1rem;
    41  }
    42  
    43  .ui.grid > .row {
    44    position: relative;
    45    display: flex;
    46    flex-direction: row;
    47    flex-wrap: wrap;
    48    justify-content: inherit;
    49    align-items: stretch;
    50    width: 100% !important;
    51    padding: 0;
    52    padding-top: 1rem;
    53    padding-bottom: 1rem;
    54  }
    55  
    56  .ui.grid > .column:not(.row) {
    57    padding-top: 1rem;
    58    padding-bottom: 1rem;
    59  }
    60  .ui.grid > .row > .column {
    61    margin-top: 0;
    62    margin-bottom: 0;
    63  }
    64  
    65  .ui.grid > .row > img,
    66  .ui.grid > .row > .column > img {
    67    max-width: 100%;
    68  }
    69  
    70  .ui.grid > .ui.grid:first-child {
    71    margin-top: 0;
    72  }
    73  .ui.grid > .ui.grid:last-child {
    74    margin-bottom: 0;
    75  }
    76  
    77  .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
    78  .ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
    79    width: 100%;
    80  }
    81  
    82  .ui.grid .row + .ui.divider {
    83    flex-grow: 1;
    84    margin: 1rem;
    85  }
    86  .ui.grid .column + .ui.vertical.divider {
    87    height: calc(50% - 1rem);
    88  }
    89  
    90  .ui.grid > .row > .column:last-child > .horizontal.segment,
    91  .ui.grid > .column:last-child > .horizontal.segment {
    92    box-shadow: none;
    93  }
    94  
    95  @media only screen and (max-width: 767.98px) {
    96    .ui.page.grid {
    97      width: auto;
    98      padding-left: 0;
    99      padding-right: 0;
   100      margin-left: 0;
   101      margin-right: 0;
   102    }
   103  }
   104  @media only screen and (min-width: 768px) and (max-width: 991.98px) {
   105    .ui.page.grid {
   106      width: auto;
   107      margin-left: 0;
   108      margin-right: 0;
   109      padding-left: 2em;
   110      padding-right: 2em;
   111    }
   112  }
   113  @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
   114    .ui.page.grid {
   115      width: auto;
   116      margin-left: 0;
   117      margin-right: 0;
   118      padding-left: 3%;
   119      padding-right: 3%;
   120    }
   121  }
   122  @media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
   123    .ui.page.grid {
   124      width: auto;
   125      margin-left: 0;
   126      margin-right: 0;
   127      padding-left: 15%;
   128      padding-right: 15%;
   129    }
   130  }
   131  @media only screen and (min-width: 1920px) {
   132    .ui.page.grid {
   133      width: auto;
   134      margin-left: 0;
   135      margin-right: 0;
   136      padding-left: 23%;
   137      padding-right: 23%;
   138    }
   139  }
   140  
   141  .ui.grid > .column:only-child,
   142  .ui.grid > .row > .column:only-child {
   143    width: 100%;
   144  }
   145  
   146  .ui[class*="one column"].grid > .row > .column,
   147  .ui[class*="one column"].grid > .column:not(.row) {
   148    width: 100%;
   149  }
   150  .ui[class*="two column"].grid > .row > .column,
   151  .ui[class*="two column"].grid > .column:not(.row) {
   152    width: 50%;
   153  }
   154  .ui[class*="three column"].grid > .row > .column,
   155  .ui[class*="three column"].grid > .column:not(.row) {
   156    width: 33.33333333%;
   157  }
   158  .ui[class*="four column"].grid > .row > .column,
   159  .ui[class*="four column"].grid > .column:not(.row) {
   160    width: 25%;
   161  }
   162  .ui[class*="five column"].grid > .row > .column,
   163  .ui[class*="five column"].grid > .column:not(.row) {
   164    width: 20%;
   165  }
   166  .ui[class*="six column"].grid > .row > .column,
   167  .ui[class*="six column"].grid > .column:not(.row) {
   168    width: 16.66666667%;
   169  }
   170  .ui[class*="seven column"].grid > .row > .column,
   171  .ui[class*="seven column"].grid > .column:not(.row) {
   172    width: 14.28571429%;
   173  }
   174  .ui[class*="eight column"].grid > .row > .column,
   175  .ui[class*="eight column"].grid > .column:not(.row) {
   176    width: 12.5%;
   177  }
   178  .ui[class*="nine column"].grid > .row > .column,
   179  .ui[class*="nine column"].grid > .column:not(.row) {
   180    width: 11.11111111%;
   181  }
   182  .ui[class*="ten column"].grid > .row > .column,
   183  .ui[class*="ten column"].grid > .column:not(.row) {
   184    width: 10%;
   185  }
   186  .ui[class*="eleven column"].grid > .row > .column,
   187  .ui[class*="eleven column"].grid > .column:not(.row) {
   188    width: 9.09090909%;
   189  }
   190  .ui[class*="twelve column"].grid > .row > .column,
   191  .ui[class*="twelve column"].grid > .column:not(.row) {
   192    width: 8.33333333%;
   193  }
   194  .ui[class*="thirteen column"].grid > .row > .column,
   195  .ui[class*="thirteen column"].grid > .column:not(.row) {
   196    width: 7.69230769%;
   197  }
   198  .ui[class*="fourteen column"].grid > .row > .column,
   199  .ui[class*="fourteen column"].grid > .column:not(.row) {
   200    width: 7.14285714%;
   201  }
   202  .ui[class*="fifteen column"].grid > .row > .column,
   203  .ui[class*="fifteen column"].grid > .column:not(.row) {
   204    width: 6.66666667%;
   205  }
   206  .ui[class*="sixteen column"].grid > .row > .column,
   207  .ui[class*="sixteen column"].grid > .column:not(.row) {
   208    width: 6.25%;
   209  }
   210  
   211  .ui.grid > [class*="one column"].row > .column {
   212    width: 100% !important;
   213  }
   214  .ui.grid > [class*="two column"].row > .column {
   215    width: 50% !important;
   216  }
   217  .ui.grid > [class*="three column"].row > .column {
   218    width: 33.33333333% !important;
   219  }
   220  .ui.grid > [class*="four column"].row > .column {
   221    width: 25% !important;
   222  }
   223  .ui.grid > [class*="five column"].row > .column {
   224    width: 20% !important;
   225  }
   226  .ui.grid > [class*="six column"].row > .column {
   227    width: 16.66666667% !important;
   228  }
   229  .ui.grid > [class*="seven column"].row > .column {
   230    width: 14.28571429% !important;
   231  }
   232  .ui.grid > [class*="eight column"].row > .column {
   233    width: 12.5% !important;
   234  }
   235  .ui.grid > [class*="nine column"].row > .column {
   236    width: 11.11111111% !important;
   237  }
   238  .ui.grid > [class*="ten column"].row > .column {
   239    width: 10% !important;
   240  }
   241  .ui.grid > [class*="eleven column"].row > .column {
   242    width: 9.09090909% !important;
   243  }
   244  .ui.grid > [class*="twelve column"].row > .column {
   245    width: 8.33333333% !important;
   246  }
   247  .ui.grid > [class*="thirteen column"].row > .column {
   248    width: 7.69230769% !important;
   249  }
   250  .ui.grid > [class*="fourteen column"].row > .column {
   251    width: 7.14285714% !important;
   252  }
   253  .ui.grid > [class*="fifteen column"].row > .column {
   254    width: 6.66666667% !important;
   255  }
   256  .ui.grid > [class*="sixteen column"].row > .column {
   257    width: 6.25% !important;
   258  }
   259  
   260  .ui.grid > .row > [class*="one wide"].column,
   261  .ui.grid > .column.row > [class*="one wide"].column,
   262  .ui.grid > [class*="one wide"].column,
   263  .ui.column.grid > [class*="one wide"].column {
   264    width: 6.25% !important;
   265  }
   266  .ui.grid > .row > [class*="two wide"].column,
   267  .ui.grid > .column.row > [class*="two wide"].column,
   268  .ui.grid > [class*="two wide"].column,
   269  .ui.column.grid > [class*="two wide"].column {
   270    width: 12.5% !important;
   271  }
   272  .ui.grid > .row > [class*="three wide"].column,
   273  .ui.grid > .column.row > [class*="three wide"].column,
   274  .ui.grid > [class*="three wide"].column,
   275  .ui.column.grid > [class*="three wide"].column {
   276    width: 18.75% !important;
   277  }
   278  .ui.grid > .row > [class*="four wide"].column,
   279  .ui.grid > .column.row > [class*="four wide"].column,
   280  .ui.grid > [class*="four wide"].column,
   281  .ui.column.grid > [class*="four wide"].column {
   282    width: 25% !important;
   283  }
   284  .ui.grid > .row > [class*="five wide"].column,
   285  .ui.grid > .column.row > [class*="five wide"].column,
   286  .ui.grid > [class*="five wide"].column,
   287  .ui.column.grid > [class*="five wide"].column {
   288    width: 31.25% !important;
   289  }
   290  .ui.grid > .row > [class*="six wide"].column,
   291  .ui.grid > .column.row > [class*="six wide"].column,
   292  .ui.grid > [class*="six wide"].column,
   293  .ui.column.grid > [class*="six wide"].column {
   294    width: 37.5% !important;
   295  }
   296  .ui.grid > .row > [class*="seven wide"].column,
   297  .ui.grid > .column.row > [class*="seven wide"].column,
   298  .ui.grid > [class*="seven wide"].column,
   299  .ui.column.grid > [class*="seven wide"].column {
   300    width: 43.75% !important;
   301  }
   302  .ui.grid > .row > [class*="eight wide"].column,
   303  .ui.grid > .column.row > [class*="eight wide"].column,
   304  .ui.grid > [class*="eight wide"].column,
   305  .ui.column.grid > [class*="eight wide"].column {
   306    width: 50% !important;
   307  }
   308  .ui.grid > .row > [class*="nine wide"].column,
   309  .ui.grid > .column.row > [class*="nine wide"].column,
   310  .ui.grid > [class*="nine wide"].column,
   311  .ui.column.grid > [class*="nine wide"].column {
   312    width: 56.25% !important;
   313  }
   314  .ui.grid > .row > [class*="ten wide"].column,
   315  .ui.grid > .column.row > [class*="ten wide"].column,
   316  .ui.grid > [class*="ten wide"].column,
   317  .ui.column.grid > [class*="ten wide"].column {
   318    width: 62.5% !important;
   319  }
   320  .ui.grid > .row > [class*="eleven wide"].column,
   321  .ui.grid > .column.row > [class*="eleven wide"].column,
   322  .ui.grid > [class*="eleven wide"].column,
   323  .ui.column.grid > [class*="eleven wide"].column {
   324    width: 68.75% !important;
   325  }
   326  .ui.grid > .row > [class*="twelve wide"].column,
   327  .ui.grid > .column.row > [class*="twelve wide"].column,
   328  .ui.grid > [class*="twelve wide"].column,
   329  .ui.column.grid > [class*="twelve wide"].column {
   330    width: 75% !important;
   331  }
   332  .ui.grid > .row > [class*="thirteen wide"].column,
   333  .ui.grid > .column.row > [class*="thirteen wide"].column,
   334  .ui.grid > [class*="thirteen wide"].column,
   335  .ui.column.grid > [class*="thirteen wide"].column {
   336    width: 81.25% !important;
   337  }
   338  .ui.grid > .row > [class*="fourteen wide"].column,
   339  .ui.grid > .column.row > [class*="fourteen wide"].column,
   340  .ui.grid > [class*="fourteen wide"].column,
   341  .ui.column.grid > [class*="fourteen wide"].column {
   342    width: 87.5% !important;
   343  }
   344  .ui.grid > .row > [class*="fifteen wide"].column,
   345  .ui.grid > .column.row > [class*="fifteen wide"].column,
   346  .ui.grid > [class*="fifteen wide"].column,
   347  .ui.column.grid > [class*="fifteen wide"].column {
   348    width: 93.75% !important;
   349  }
   350  .ui.grid > .row > [class*="sixteen wide"].column,
   351  .ui.grid > .column.row > [class*="sixteen wide"].column,
   352  .ui.grid > [class*="sixteen wide"].column,
   353  .ui.column.grid > [class*="sixteen wide"].column {
   354    width: 100% !important;
   355  }
   356  
   357  .ui.centered.grid,
   358  .ui.centered.grid > .row,
   359  .ui.grid > .centered.row {
   360    text-align: center;
   361    justify-content: center;
   362  }
   363  .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
   364  .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
   365  .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
   366    text-align: left;
   367  }
   368  .ui.grid > .centered.column,
   369  .ui.grid > .row > .centered.column {
   370    display: block;
   371    margin-left: auto;
   372    margin-right: auto;
   373  }
   374  
   375  .ui.relaxed.grid > .column:not(.row),
   376  .ui.relaxed.grid > .row > .column,
   377  .ui.grid > .relaxed.row > .column {
   378    padding-left: 1.5rem;
   379    padding-right: 1.5rem;
   380  }
   381  .ui[class*="very relaxed"].grid > .column:not(.row),
   382  .ui[class*="very relaxed"].grid > .row > .column,
   383  .ui.grid > [class*="very relaxed"].row > .column {
   384    padding-left: 2.5rem;
   385    padding-right: 2.5rem;
   386  }
   387  
   388  .ui.relaxed.grid .row + .ui.divider,
   389  .ui.grid .relaxed.row + .ui.divider {
   390    margin-left: 1.5rem;
   391    margin-right: 1.5rem;
   392  }
   393  .ui[class*="very relaxed"].grid .row + .ui.divider,
   394  .ui.grid [class*="very relaxed"].row + .ui.divider {
   395    margin-left: 2.5rem;
   396    margin-right: 2.5rem;
   397  }
   398  
   399  .ui[class*="middle aligned"].grid > .column:not(.row),
   400  .ui[class*="middle aligned"].grid > .row > .column,
   401  .ui.grid > [class*="middle aligned"].row > .column,
   402  .ui.grid > [class*="middle aligned"].column:not(.row),
   403  .ui.grid > .row > [class*="middle aligned"].column {
   404    flex-direction: column;
   405    vertical-align: middle;
   406    align-self: center !important;
   407  }
   408  
   409  .ui[class*="left aligned"].grid > .column,
   410  .ui[class*="left aligned"].grid > .row > .column,
   411  .ui.grid > [class*="left aligned"].row > .column,
   412  .ui.grid > [class*="left aligned"].column.column,
   413  .ui.grid > .row > [class*="left aligned"].column.column {
   414    text-align: left;
   415    align-self: inherit;
   416  }
   417  
   418  .ui[class*="center aligned"].grid > .column,
   419  .ui[class*="center aligned"].grid > .row > .column,
   420  .ui.grid > [class*="center aligned"].row > .column,
   421  .ui.grid > [class*="center aligned"].column.column,
   422  .ui.grid > .row > [class*="center aligned"].column.column {
   423    text-align: center;
   424    align-self: inherit;
   425  }
   426  .ui[class*="center aligned"].grid {
   427    justify-content: center;
   428  }
   429  
   430  .ui[class*="right aligned"].grid > .column,
   431  .ui[class*="right aligned"].grid > .row > .column,
   432  .ui.grid > [class*="right aligned"].row > .column,
   433  .ui.grid > [class*="right aligned"].column.column,
   434  .ui.grid > .row > [class*="right aligned"].column.column {
   435    text-align: right;
   436    align-self: inherit;
   437  }
   438  
   439  .ui[class*="equal width"].grid > .column:not(.row),
   440  .ui[class*="equal width"].grid > .row > .column,
   441  .ui.grid > [class*="equal width"].row > .column {
   442    display: inline-block;
   443    flex-grow: 1;
   444  }
   445  .ui[class*="equal width"].grid > .wide.column,
   446  .ui[class*="equal width"].grid > .row > .wide.column,
   447  .ui.grid > [class*="equal width"].row > .wide.column {
   448    flex-grow: 0;
   449  }
   450  
   451  @media only screen and (max-width: 767.98px) {
   452    .ui[class*="mobile reversed"].grid,
   453    .ui[class*="mobile reversed"].grid > .row,
   454    .ui.grid > [class*="mobile reversed"].row {
   455      flex-direction: row-reverse;
   456    }
   457    .ui.stackable[class*="mobile reversed"] {
   458      flex-direction: column-reverse;
   459    }
   460  }
   461  
   462  @media only screen and (max-width: 767.98px) {
   463    .ui.stackable.grid {
   464      width: auto;
   465      margin-left: 0 !important;
   466      margin-right: 0 !important;
   467    }
   468    .ui.stackable.grid > .row > .wide.column,
   469    .ui.stackable.grid > .wide.column,
   470    .ui.stackable.grid > .column.grid > .column,
   471    .ui.stackable.grid > .column.row > .column,
   472    .ui.stackable.grid > .row > .column,
   473    .ui.stackable.grid > .column:not(.row),
   474    .ui.grid > .stackable.stackable.stackable.row > .column {
   475      width: 100% !important;
   476      margin: 0 !important;
   477      box-shadow: none !important;
   478      padding: 1rem;
   479    }
   480    .ui.stackable.grid:not(.vertically) > .row {
   481      margin: 0;
   482      padding: 0;
   483    }
   484  
   485    .ui.container > .ui.stackable.grid > .column,
   486    .ui.container > .ui.stackable.grid > .row > .column {
   487      padding-left: 0 !important;
   488      padding-right: 0 !important;
   489    }
   490  
   491    .ui.grid .ui.stackable.grid,
   492    .ui.segment:not(.vertical) .ui.stackable.page.grid {
   493      margin-left: -1rem !important;
   494      margin-right: -1rem !important;
   495    }
   496  }
   497  
   498  .ui.ui.ui.compact.grid > .column:not(.row),
   499  .ui.ui.ui.compact.grid > .row > .column {
   500    padding-left: 0.5rem;
   501    padding-right: 0.5rem;
   502  }
   503  .ui.ui.ui.compact.grid > * {
   504    padding-left: 0.5rem;
   505    padding-right: 0.5rem;
   506  }
   507  
   508  .ui.ui.ui.compact.grid > .row {
   509    padding-top: 0.5rem;
   510    padding-bottom: 0.5rem;
   511  }
   512  
   513  .ui.ui.ui.compact.grid > .column:not(.row) {
   514    padding-top: 0.5rem;
   515    padding-bottom: 0.5rem;
   516  }