diff options
Diffstat (limited to 'web_src/css/modules/segment.css')
| -rw-r--r-- | web_src/css/modules/segment.css | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css new file mode 100644 index 0000000..04543f0 --- /dev/null +++ b/web_src/css/modules/segment.css @@ -0,0 +1,203 @@ +/* based on Fomantic UI segment module, with just the parts extracted that we use. If you find any + unused rules here after refactoring, please remove them. */ + +.ui.segment { + position: relative; + margin: 1rem 0; + padding: 1em; + border-radius: 0.28571429rem; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + color: var(--color-text); +} +.ui.segment:first-child { + margin-top: 0; +} +.ui.segment:last-child { + margin-bottom: 0; +} + +.ui.grid.segment { + margin: 1rem 0; + border-radius: 0.28571429rem; +} + +.ui.segment.tab:last-child { + margin-bottom: 1rem; +} + +.ui.segments { + flex-direction: column; + position: relative; + margin: 1rem 0; + border: 1px solid var(--color-secondary); + border-radius: 0.28571429rem; + background: var(--color-box-body); + color: var(--color-text); +} +.ui.segments:first-child { + margin-top: 0; +} +.ui.segments:last-child { + margin-bottom: 0; +} + +.ui.segments > .segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0; + width: auto; + box-shadow: none; + border: none; + border-top: 1px solid var(--color-secondary); +} +.ui.segments:not(.horizontal) > .segment:first-child { + top: 0; + bottom: 0; + border-top: none; + margin-top: 0; + margin-bottom: 0; + border-radius: 0.28571429rem 0.28571429rem 0 0; +} + +.ui.segments:not(.horizontal) > .segment:last-child { + top: 0; + bottom: 0; + margin-top: 0; + margin-bottom: 0; + border-radius: 0 0 0.28571429rem 0.28571429rem; +} + +.ui.segments:not(.horizontal) > .segment:only-child { + border-radius: 0.214285717rem; +} +.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */ + border-radius: 0.28571429rem; +} + +.ui.segments > .ui.segments { + border-top: 1px solid var(--color-secondary); + margin: 1rem; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0; +} + +.ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + padding: 0; + margin: 1rem 0; + border-radius: 0.28571429rem; + border: 1px solid var(--color-secondary); +} + +.ui.horizontal.segments > .segment { + margin: 0; + min-width: 0; + border-radius: 0; + border: none; + box-shadow: none; + border-left: 1px solid var(--color-secondary); +} + +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments:not(.stackable) > .segment:first-child { + border-left: none; +} +.ui.horizontal.segments > .segment:first-child { + border-radius: 0.28571429rem 0 0 0.28571429rem; +} +.ui.horizontal.segments > .segment:last-child { + border-radius: 0 0.28571429rem 0.28571429rem 0; +} + +.ui.clearing.segment::after { + content: ""; + display: block; + clear: both; +} + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +.ui.secondary.segment { + background: var(--color-secondary-bg); + color: var(--color-text-light); +} + +.ui.attached.segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 -1px; + width: calc(100% + 2px); + max-width: calc(100% + 2px); + box-shadow: none; + border: 1px solid var(--color-secondary); + background: var(--color-box-body); + color: var(--color-text); +} +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-top: none; +} + +.ui.attached.segment:has(+ .ui[class*="top attached"].header), +.ui.attached.segment:last-child { + border-radius: 0 0 0.28571429rem 0.28571429rem; +} + +.ui[class*="top attached"].segment { + bottom: 0; + margin-bottom: 0; + top: 0; + margin-top: 1rem; + border-radius: 0.28571429rem 0.28571429rem 0 0; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0; +} + +.ui.segment[class*="bottom attached"] { + bottom: 0; + margin-top: 0; + top: 0; + margin-bottom: 1rem; + border-radius: 0 0 0.28571429rem 0.28571429rem; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 1rem; +} + +.ui.fitted.segment:not(.horizontally) { + padding-top: 0; + padding-bottom: 0; +} +.ui.fitted.segment:not(.vertically) { + padding-left: 0; + padding-right: 0; +} + +.ui.segments .segment, +.ui.segment { + font-size: 1rem; +} + +.ui.error.segment { + border-color: var(--color-error-border) !important; +} + +.ui.warning.segment { + border-color: var(--color-warning-border) !important; +} |