diff options
Diffstat (limited to 'web_src/css/modules/grid.css')
| -rw-r--r-- | web_src/css/modules/grid.css | 524 |
1 files changed, 524 insertions, 0 deletions
diff --git a/web_src/css/modules/grid.css b/web_src/css/modules/grid.css new file mode 100644 index 0000000..1df9a11 --- /dev/null +++ b/web_src/css/modules/grid.css @@ -0,0 +1,524 @@ +.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-left: -1.5rem; + margin-right: -1.5rem; +} +.ui[class*="very relaxed"].grid { + margin-left: -2.5rem; + margin-right: -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-left: 1rem; + padding-right: 1rem; + vertical-align: top; +} +.ui.grid > * { + padding-left: 1rem; + padding-right: 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-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + } +} +@media only screen and (min-width: 768px) and (max-width: 991.98px) { + .ui.page.grid { + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 2em; + padding-right: 2em; + } +} +@media only screen and (min-width: 992px) and (max-width: 1199.98px) { + .ui.page.grid { + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 3%; + padding-right: 3%; + } +} +@media only screen and (min-width: 1200px) and (max-width: 1919.98px) { + .ui.page.grid { + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 15%; + padding-right: 15%; + } +} +@media only screen and (min-width: 1920px) { + .ui.page.grid { + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 23%; + padding-right: 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: left; +} +.ui.grid > .centered.column, +.ui.grid > .row > .centered.column { + display: block; + margin-left: auto; + margin-right: auto; +} + +.ui.relaxed.grid > .column:not(.row), +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { + padding-left: 1.5rem; + padding-right: 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-left: 2.5rem; + padding-right: 2.5rem; +} + +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { + margin-left: 1.5rem; + margin-right: 1.5rem; +} +.ui[class*="very relaxed"].grid .row + .ui.divider, +.ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: 2.5rem; + margin-right: 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: left; + 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: right; + 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-left: 0 !important; + margin-right: 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-left: 0 !important; + padding-right: 0 !important; + } + + .ui.grid .ui.stackable.grid, + .ui.segment:not(.vertical) .ui.stackable.page.grid { + margin-left: -1rem !important; + margin-right: -1rem !important; + } +} + +.ui.ui.ui.compact.grid > .column:not(.row), +.ui.ui.ui.compact.grid > .row > .column { + padding-left: 0.5rem; + padding-right: 0.5rem; +} +.ui.ui.ui.compact.grid > * { + padding-left: 0.5rem; + padding-right: 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; +} |