mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-13 06:20:24 +00:00
6b75654cc2
Related issue: https://codeberg.org/forgejo/forgejo/issues/8581 This should be a nice first step towards RTL support. Future PRs can look at updating the tailwind classes, changing some of the icons (arrow left might need to become arrow right in some cases for example, and updating the template files) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12491 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
500 lines
14 KiB
CSS
500 lines
14 KiB
CSS
.simple-grid {
|
|
display: grid;
|
|
gap: 1em 2em;
|
|
}
|
|
|
|
@media (min-width: 30em) {
|
|
.simple-grid.grid-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
|
|
unused rules here after refactoring, please remove them. */
|
|
|
|
.ui.grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
padding: 0;
|
|
margin: -1rem;
|
|
}
|
|
|
|
.ui.relaxed.grid {
|
|
margin-inline: -1.5rem;
|
|
}
|
|
.ui[class*="very relaxed"].grid {
|
|
margin-inline: -2.5rem;
|
|
}
|
|
|
|
.ui.grid + .grid {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.ui.grid > .column:not(.row),
|
|
.ui.grid > .row > .column {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 6.25%;
|
|
padding-inline: 1rem;
|
|
vertical-align: top;
|
|
}
|
|
.ui.grid > * {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.ui.grid > .row {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: inherit;
|
|
align-items: stretch;
|
|
width: 100% !important;
|
|
padding: 0;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.ui.grid > .column:not(.row) {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
.ui.grid > .row > .column {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ui.grid > .row > img,
|
|
.ui.grid > .row > .column > img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ui.grid > .ui.grid:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.ui.grid > .ui.grid:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
|
|
.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui.grid .row + .ui.divider {
|
|
flex-grow: 1;
|
|
margin: 1rem;
|
|
}
|
|
.ui.grid .column + .ui.vertical.divider {
|
|
height: calc(50% - 1rem);
|
|
}
|
|
|
|
.ui.grid > .row > .column:last-child > .horizontal.segment,
|
|
.ui.grid > .column:last-child > .horizontal.segment {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 767.98px) {
|
|
.ui.page.grid {
|
|
width: auto;
|
|
padding-inline: 0;
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
|
.ui.page.grid {
|
|
width: auto;
|
|
margin-inline: 0;
|
|
padding-inline: 2em;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
|
.ui.page.grid {
|
|
width: auto;
|
|
margin-inline: 0;
|
|
padding-inline: 3%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
|
|
.ui.page.grid {
|
|
width: auto;
|
|
margin-inline: 0;
|
|
padding-inline: 15%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1920px) {
|
|
.ui.page.grid {
|
|
width: auto;
|
|
margin-inline: 0;
|
|
padding-inline: 23%;
|
|
}
|
|
}
|
|
|
|
.ui.grid > .column:only-child,
|
|
.ui.grid > .row > .column:only-child {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui[class*="one column"].grid > .row > .column,
|
|
.ui[class*="one column"].grid > .column:not(.row) {
|
|
width: 100%;
|
|
}
|
|
.ui[class*="two column"].grid > .row > .column,
|
|
.ui[class*="two column"].grid > .column:not(.row) {
|
|
width: 50%;
|
|
}
|
|
.ui[class*="three column"].grid > .row > .column,
|
|
.ui[class*="three column"].grid > .column:not(.row) {
|
|
width: 33.33333333%;
|
|
}
|
|
.ui[class*="four column"].grid > .row > .column,
|
|
.ui[class*="four column"].grid > .column:not(.row) {
|
|
width: 25%;
|
|
}
|
|
.ui[class*="five column"].grid > .row > .column,
|
|
.ui[class*="five column"].grid > .column:not(.row) {
|
|
width: 20%;
|
|
}
|
|
.ui[class*="six column"].grid > .row > .column,
|
|
.ui[class*="six column"].grid > .column:not(.row) {
|
|
width: 16.66666667%;
|
|
}
|
|
.ui[class*="seven column"].grid > .row > .column,
|
|
.ui[class*="seven column"].grid > .column:not(.row) {
|
|
width: 14.28571429%;
|
|
}
|
|
.ui[class*="eight column"].grid > .row > .column,
|
|
.ui[class*="eight column"].grid > .column:not(.row) {
|
|
width: 12.5%;
|
|
}
|
|
.ui[class*="nine column"].grid > .row > .column,
|
|
.ui[class*="nine column"].grid > .column:not(.row) {
|
|
width: 11.11111111%;
|
|
}
|
|
.ui[class*="ten column"].grid > .row > .column,
|
|
.ui[class*="ten column"].grid > .column:not(.row) {
|
|
width: 10%;
|
|
}
|
|
.ui[class*="eleven column"].grid > .row > .column,
|
|
.ui[class*="eleven column"].grid > .column:not(.row) {
|
|
width: 9.09090909%;
|
|
}
|
|
.ui[class*="twelve column"].grid > .row > .column,
|
|
.ui[class*="twelve column"].grid > .column:not(.row) {
|
|
width: 8.33333333%;
|
|
}
|
|
.ui[class*="thirteen column"].grid > .row > .column,
|
|
.ui[class*="thirteen column"].grid > .column:not(.row) {
|
|
width: 7.69230769%;
|
|
}
|
|
.ui[class*="fourteen column"].grid > .row > .column,
|
|
.ui[class*="fourteen column"].grid > .column:not(.row) {
|
|
width: 7.14285714%;
|
|
}
|
|
.ui[class*="fifteen column"].grid > .row > .column,
|
|
.ui[class*="fifteen column"].grid > .column:not(.row) {
|
|
width: 6.66666667%;
|
|
}
|
|
.ui[class*="sixteen column"].grid > .row > .column,
|
|
.ui[class*="sixteen column"].grid > .column:not(.row) {
|
|
width: 6.25%;
|
|
}
|
|
|
|
.ui.grid > [class*="one column"].row > .column {
|
|
width: 100% !important;
|
|
}
|
|
.ui.grid > [class*="two column"].row > .column {
|
|
width: 50% !important;
|
|
}
|
|
.ui.grid > [class*="three column"].row > .column {
|
|
width: 33.33333333% !important;
|
|
}
|
|
.ui.grid > [class*="four column"].row > .column {
|
|
width: 25% !important;
|
|
}
|
|
.ui.grid > [class*="five column"].row > .column {
|
|
width: 20% !important;
|
|
}
|
|
.ui.grid > [class*="six column"].row > .column {
|
|
width: 16.66666667% !important;
|
|
}
|
|
.ui.grid > [class*="seven column"].row > .column {
|
|
width: 14.28571429% !important;
|
|
}
|
|
.ui.grid > [class*="eight column"].row > .column {
|
|
width: 12.5% !important;
|
|
}
|
|
.ui.grid > [class*="nine column"].row > .column {
|
|
width: 11.11111111% !important;
|
|
}
|
|
.ui.grid > [class*="ten column"].row > .column {
|
|
width: 10% !important;
|
|
}
|
|
.ui.grid > [class*="eleven column"].row > .column {
|
|
width: 9.09090909% !important;
|
|
}
|
|
.ui.grid > [class*="twelve column"].row > .column {
|
|
width: 8.33333333% !important;
|
|
}
|
|
.ui.grid > [class*="thirteen column"].row > .column {
|
|
width: 7.69230769% !important;
|
|
}
|
|
.ui.grid > [class*="fourteen column"].row > .column {
|
|
width: 7.14285714% !important;
|
|
}
|
|
.ui.grid > [class*="fifteen column"].row > .column {
|
|
width: 6.66666667% !important;
|
|
}
|
|
.ui.grid > [class*="sixteen column"].row > .column {
|
|
width: 6.25% !important;
|
|
}
|
|
|
|
.ui.grid > .row > [class*="one wide"].column,
|
|
.ui.grid > .column.row > [class*="one wide"].column,
|
|
.ui.grid > [class*="one wide"].column,
|
|
.ui.column.grid > [class*="one wide"].column {
|
|
width: 6.25% !important;
|
|
}
|
|
.ui.grid > .row > [class*="two wide"].column,
|
|
.ui.grid > .column.row > [class*="two wide"].column,
|
|
.ui.grid > [class*="two wide"].column,
|
|
.ui.column.grid > [class*="two wide"].column {
|
|
width: 12.5% !important;
|
|
}
|
|
.ui.grid > .row > [class*="three wide"].column,
|
|
.ui.grid > .column.row > [class*="three wide"].column,
|
|
.ui.grid > [class*="three wide"].column,
|
|
.ui.column.grid > [class*="three wide"].column {
|
|
width: 18.75% !important;
|
|
}
|
|
.ui.grid > .row > [class*="four wide"].column,
|
|
.ui.grid > .column.row > [class*="four wide"].column,
|
|
.ui.grid > [class*="four wide"].column,
|
|
.ui.column.grid > [class*="four wide"].column {
|
|
width: 25% !important;
|
|
}
|
|
.ui.grid > .row > [class*="five wide"].column,
|
|
.ui.grid > .column.row > [class*="five wide"].column,
|
|
.ui.grid > [class*="five wide"].column,
|
|
.ui.column.grid > [class*="five wide"].column {
|
|
width: 31.25% !important;
|
|
}
|
|
.ui.grid > .row > [class*="six wide"].column,
|
|
.ui.grid > .column.row > [class*="six wide"].column,
|
|
.ui.grid > [class*="six wide"].column,
|
|
.ui.column.grid > [class*="six wide"].column {
|
|
width: 37.5% !important;
|
|
}
|
|
.ui.grid > .row > [class*="seven wide"].column,
|
|
.ui.grid > .column.row > [class*="seven wide"].column,
|
|
.ui.grid > [class*="seven wide"].column,
|
|
.ui.column.grid > [class*="seven wide"].column {
|
|
width: 43.75% !important;
|
|
}
|
|
.ui.grid > .row > [class*="eight wide"].column,
|
|
.ui.grid > .column.row > [class*="eight wide"].column,
|
|
.ui.grid > [class*="eight wide"].column,
|
|
.ui.column.grid > [class*="eight wide"].column {
|
|
width: 50% !important;
|
|
}
|
|
.ui.grid > .row > [class*="nine wide"].column,
|
|
.ui.grid > .column.row > [class*="nine wide"].column,
|
|
.ui.grid > [class*="nine wide"].column,
|
|
.ui.column.grid > [class*="nine wide"].column {
|
|
width: 56.25% !important;
|
|
}
|
|
.ui.grid > .row > [class*="ten wide"].column,
|
|
.ui.grid > .column.row > [class*="ten wide"].column,
|
|
.ui.grid > [class*="ten wide"].column,
|
|
.ui.column.grid > [class*="ten wide"].column {
|
|
width: 62.5% !important;
|
|
}
|
|
.ui.grid > .row > [class*="eleven wide"].column,
|
|
.ui.grid > .column.row > [class*="eleven wide"].column,
|
|
.ui.grid > [class*="eleven wide"].column,
|
|
.ui.column.grid > [class*="eleven wide"].column {
|
|
width: 68.75% !important;
|
|
}
|
|
.ui.grid > .row > [class*="twelve wide"].column,
|
|
.ui.grid > .column.row > [class*="twelve wide"].column,
|
|
.ui.grid > [class*="twelve wide"].column,
|
|
.ui.column.grid > [class*="twelve wide"].column {
|
|
width: 75% !important;
|
|
}
|
|
.ui.grid > .row > [class*="thirteen wide"].column,
|
|
.ui.grid > .column.row > [class*="thirteen wide"].column,
|
|
.ui.grid > [class*="thirteen wide"].column,
|
|
.ui.column.grid > [class*="thirteen wide"].column {
|
|
width: 81.25% !important;
|
|
}
|
|
.ui.grid > .row > [class*="fourteen wide"].column,
|
|
.ui.grid > .column.row > [class*="fourteen wide"].column,
|
|
.ui.grid > [class*="fourteen wide"].column,
|
|
.ui.column.grid > [class*="fourteen wide"].column {
|
|
width: 87.5% !important;
|
|
}
|
|
.ui.grid > .row > [class*="fifteen wide"].column,
|
|
.ui.grid > .column.row > [class*="fifteen wide"].column,
|
|
.ui.grid > [class*="fifteen wide"].column,
|
|
.ui.column.grid > [class*="fifteen wide"].column {
|
|
width: 93.75% !important;
|
|
}
|
|
.ui.grid > .row > [class*="sixteen wide"].column,
|
|
.ui.grid > .column.row > [class*="sixteen wide"].column,
|
|
.ui.grid > [class*="sixteen wide"].column,
|
|
.ui.column.grid > [class*="sixteen wide"].column {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.ui.centered.grid,
|
|
.ui.centered.grid > .row,
|
|
.ui.grid > .centered.row {
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
|
|
.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
|
|
.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
|
|
text-align: start;
|
|
}
|
|
.ui.grid > .centered.column,
|
|
.ui.grid > .row > .centered.column {
|
|
display: block;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.ui.relaxed.grid > .column:not(.row),
|
|
.ui.relaxed.grid > .row > .column,
|
|
.ui.grid > .relaxed.row > .column {
|
|
padding-inline: 1.5rem;
|
|
}
|
|
.ui[class*="very relaxed"].grid > .column:not(.row),
|
|
.ui[class*="very relaxed"].grid > .row > .column,
|
|
.ui.grid > [class*="very relaxed"].row > .column {
|
|
padding-inline: 2.5rem;
|
|
}
|
|
|
|
.ui.relaxed.grid .row + .ui.divider,
|
|
.ui.grid .relaxed.row + .ui.divider {
|
|
margin-inline: 1.5rem;
|
|
}
|
|
.ui[class*="very relaxed"].grid .row + .ui.divider,
|
|
.ui.grid [class*="very relaxed"].row + .ui.divider {
|
|
margin-inline: 2.5rem;
|
|
}
|
|
|
|
.ui[class*="middle aligned"].grid > .column:not(.row),
|
|
.ui[class*="middle aligned"].grid > .row > .column,
|
|
.ui.grid > [class*="middle aligned"].row > .column,
|
|
.ui.grid > [class*="middle aligned"].column:not(.row),
|
|
.ui.grid > .row > [class*="middle aligned"].column {
|
|
flex-direction: column;
|
|
vertical-align: middle;
|
|
align-self: center !important;
|
|
}
|
|
|
|
.ui[class*="left aligned"].grid > .column,
|
|
.ui[class*="left aligned"].grid > .row > .column,
|
|
.ui.grid > [class*="left aligned"].row > .column,
|
|
.ui.grid > [class*="left aligned"].column.column,
|
|
.ui.grid > .row > [class*="left aligned"].column.column {
|
|
text-align: start;
|
|
align-self: inherit;
|
|
}
|
|
|
|
.ui[class*="center aligned"].grid > .column,
|
|
.ui[class*="center aligned"].grid > .row > .column,
|
|
.ui.grid > [class*="center aligned"].row > .column,
|
|
.ui.grid > [class*="center aligned"].column.column,
|
|
.ui.grid > .row > [class*="center aligned"].column.column {
|
|
text-align: center;
|
|
align-self: inherit;
|
|
}
|
|
.ui[class*="center aligned"].grid {
|
|
justify-content: center;
|
|
}
|
|
|
|
.ui[class*="right aligned"].grid > .column,
|
|
.ui[class*="right aligned"].grid > .row > .column,
|
|
.ui.grid > [class*="right aligned"].row > .column,
|
|
.ui.grid > [class*="right aligned"].column.column,
|
|
.ui.grid > .row > [class*="right aligned"].column.column {
|
|
text-align: end;
|
|
align-self: inherit;
|
|
}
|
|
|
|
.ui[class*="equal width"].grid > .column:not(.row),
|
|
.ui[class*="equal width"].grid > .row > .column,
|
|
.ui.grid > [class*="equal width"].row > .column {
|
|
display: inline-block;
|
|
flex-grow: 1;
|
|
}
|
|
.ui[class*="equal width"].grid > .wide.column,
|
|
.ui[class*="equal width"].grid > .row > .wide.column,
|
|
.ui.grid > [class*="equal width"].row > .wide.column {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
@media only screen and (max-width: 767.98px) {
|
|
.ui[class*="mobile reversed"].grid,
|
|
.ui[class*="mobile reversed"].grid > .row,
|
|
.ui.grid > [class*="mobile reversed"].row {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.ui.stackable[class*="mobile reversed"] {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 767.98px) {
|
|
.ui.stackable.grid {
|
|
width: auto;
|
|
margin-inline: 0 !important;
|
|
}
|
|
.ui.stackable.grid > .row > .wide.column,
|
|
.ui.stackable.grid > .wide.column,
|
|
.ui.stackable.grid > .column.grid > .column,
|
|
.ui.stackable.grid > .column.row > .column,
|
|
.ui.stackable.grid > .row > .column,
|
|
.ui.stackable.grid > .column:not(.row),
|
|
.ui.grid > .stackable.stackable.stackable.row > .column {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
padding: 1rem;
|
|
}
|
|
.ui.stackable.grid:not(.vertically) > .row {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui.container > .ui.stackable.grid > .column,
|
|
.ui.container > .ui.stackable.grid > .row > .column {
|
|
padding-inline: 0 !important;
|
|
}
|
|
|
|
.ui.grid .ui.stackable.grid,
|
|
.ui.segment:not(.vertical) .ui.stackable.page.grid {
|
|
margin-inline: -1rem !important;
|
|
}
|
|
}
|
|
|
|
.ui.ui.ui.compact.grid > .column:not(.row),
|
|
.ui.ui.ui.compact.grid > .row > .column {
|
|
padding-inline: 0.5rem;
|
|
}
|
|
.ui.ui.ui.compact.grid > * {
|
|
padding-inline: 0.5rem;
|
|
}
|
|
|
|
.ui.ui.ui.compact.grid > .row {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.ui.ui.ui.compact.grid > .column:not(.row) {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|