oppi.li
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.segment {
5 position: relative;
6 margin: 1rem 0;
7 padding: 1em;
8 border-radius: 0.28571429rem;
9 border: 1px solid var(--color-secondary);
10 background: var(--color-box-body);
11 color: var(--color-text);
12}
13.ui.segment:first-child {
14 margin-top: 0;
15}
16.ui.segment:last-child {
17 margin-bottom: 0;
18}
19
20.ui.grid.segment {
21 margin: 1rem 0;
22 border-radius: 0.28571429rem;
23}
24
25.ui.segment.tab:last-child {
26 margin-bottom: 1rem;
27}
28
29.ui.segments {
30 flex-direction: column;
31 position: relative;
32 margin: 1rem 0;
33 border: 1px solid var(--color-secondary);
34 border-radius: 0.28571429rem;
35 background: var(--color-box-body);
36 color: var(--color-text);
37}
38.ui.segments:first-child {
39 margin-top: 0;
40}
41.ui.segments:last-child {
42 margin-bottom: 0;
43}
44
45.ui.segments > .segment {
46 top: 0;
47 bottom: 0;
48 border-radius: 0;
49 margin: 0;
50 width: auto;
51 box-shadow: none;
52 border: none;
53 border-top: 1px solid var(--color-secondary);
54}
55.ui.segments:not(.horizontal) > .segment:first-child {
56 top: 0;
57 bottom: 0;
58 border-top: none;
59 margin-top: 0;
60 margin-bottom: 0;
61 border-radius: 0.28571429rem 0.28571429rem 0 0;
62}
63
64.ui.segments:not(.horizontal) > .segment:last-child {
65 top: 0;
66 bottom: 0;
67 margin-top: 0;
68 margin-bottom: 0;
69 border-radius: 0 0 0.28571429rem 0.28571429rem;
70}
71
72.ui.segments:not(.horizontal) > .segment:only-child {
73 border-radius: 0.214285717rem;
74}
75.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { /* workaround issue with :last-child ignoring hidden elements */
76 border-radius: 0.28571429rem;
77}
78
79.ui.segments > .ui.segments {
80 border-top: 1px solid var(--color-secondary);
81 margin: 1rem;
82}
83.ui.segments > .segments:first-child {
84 border-top: none;
85}
86.ui.segments > .segment + .segments:not(.horizontal) {
87 margin-top: 0;
88}
89
90.ui.horizontal.segments {
91 display: flex;
92 flex-direction: row;
93 background-color: transparent;
94 padding: 0;
95 margin: 1rem 0;
96 border-radius: 0.28571429rem;
97 border: 1px solid var(--color-secondary);
98}
99
100.ui.horizontal.segments > .segment {
101 margin: 0;
102 min-width: 0;
103 border-radius: 0;
104 border: none;
105 box-shadow: none;
106 border-left: 1px solid var(--color-secondary);
107}
108
109.ui.segments > .horizontal.segments:first-child {
110 border-top: none;
111}
112.ui.horizontal.segments:not(.stackable) > .segment:first-child {
113 border-left: none;
114}
115.ui.horizontal.segments > .segment:first-child {
116 border-radius: 0.28571429rem 0 0 0.28571429rem;
117}
118.ui.horizontal.segments > .segment:last-child {
119 border-radius: 0 0.28571429rem 0.28571429rem 0;
120}
121
122.ui.clearing.segment::after {
123 content: "";
124 display: block;
125 clear: both;
126}
127
128.ui[class*="left aligned"].segment {
129 text-align: left;
130}
131.ui[class*="center aligned"].segment {
132 text-align: center;
133}
134
135.ui.secondary.segment {
136 background: var(--color-secondary-bg);
137 color: var(--color-text-light);
138}
139
140.ui.attached.segment {
141 top: 0;
142 bottom: 0;
143 border-radius: 0;
144 margin: 0 -1px;
145 width: calc(100% + 2px);
146 max-width: calc(100% + 2px);
147 box-shadow: none;
148 border: 1px solid var(--color-secondary);
149 background: var(--color-box-body);
150 color: var(--color-text);
151}
152.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
153 border-top: none;
154}
155
156.ui.attached.segment:has(+ .ui[class*="top attached"].header),
157.ui.attached.segment:last-child {
158 border-radius: 0 0 0.28571429rem 0.28571429rem;
159}
160
161.ui[class*="top attached"].segment {
162 bottom: 0;
163 margin-bottom: 0;
164 top: 0;
165 margin-top: 1rem;
166 border-radius: 0.28571429rem 0.28571429rem 0 0;
167}
168.ui.segment[class*="top attached"]:first-child {
169 margin-top: 0;
170}
171
172.ui.segment[class*="bottom attached"] {
173 bottom: 0;
174 margin-top: 0;
175 top: 0;
176 margin-bottom: 1rem;
177 border-radius: 0 0 0.28571429rem 0.28571429rem;
178}
179.ui.segment[class*="bottom attached"]:last-child {
180 margin-bottom: 1rem;
181}
182
183.ui.fitted.segment:not(.horizontally) {
184 padding-top: 0;
185 padding-bottom: 0;
186}
187.ui.fitted.segment:not(.vertically) {
188 padding-left: 0;
189 padding-right: 0;
190}
191
192.ui.segments .segment,
193.ui.segment {
194 font-size: 1rem;
195}
196
197.ui.error.segment {
198 border-color: var(--color-error-border) !important;
199}
200
201.ui.warning.segment {
202 border-color: var(--color-warning-border) !important;
203}