oppi.li
1/* based on Fomantic UI header 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.header {
5 color: var(--color-text);
6 border: none;
7 margin: calc(2rem - 0.1428571428571429em) 0 1rem;
8 padding: 0;
9 font-family: var(--fonts-regular);
10 font-weight: var(--font-weight-medium);
11 line-height: 1.28571429;
12}
13
14.ui.header:first-child {
15 margin-top: -0.14285714em;
16}
17
18.ui.header:last-child {
19 margin-bottom: 0;
20}
21
22.ui.header .ui.label {
23 margin-left: 0.25rem;
24 vertical-align: middle;
25}
26
27.ui.header > .ui.label.compact {
28 margin-top: inherit;
29}
30
31.ui.header .sub.header {
32 display: block;
33 font-weight: var(--font-weight-normal);
34 padding: 0;
35 margin: 0;
36 font-size: 1rem;
37 line-height: 1.2;
38 color: var(--color-text-light-1);
39}
40
41.ui.header > i.icon {
42 display: table-cell;
43 opacity: 1;
44 font-size: 1.5em;
45 padding-top: 0;
46 vertical-align: middle;
47}
48
49.ui.header > i.icon:only-child {
50 display: inline-block;
51 padding: 0;
52 margin-right: 0.75rem;
53}
54
55.ui.header + p {
56 margin-top: 0;
57}
58
59h2.ui.header {
60 font-size: 1.71428571rem;
61}
62h2.ui.header .sub.header {
63 font-size: 1.14285714rem;
64}
65
66h4.ui.header {
67 font-size: 1.07142857rem;
68}
69h4.ui.header .sub.header {
70 font-size: 1rem;
71}
72
73.ui.sub.header {
74 padding: 0;
75 margin-bottom: 0.14285714rem;
76 font-weight: var(--font-weight-normal);
77 font-size: 0.85714286em;
78}
79
80.ui.icon.header svg {
81 width: 3em;
82 height: 3em;
83 float: none;
84 display: block;
85 line-height: var(--line-height-default);
86 padding: 0;
87 margin: 0 auto 0.5rem;
88 opacity: 1;
89}
90
91.ui.header:not(h1,h2,h3,h4,h5,h6) {
92 font-size: 1.28571429em;
93}
94
95.ui.attached.header {
96 position: relative;
97 background: var(--color-box-header);
98 padding: 0.78571429rem 1rem;
99 margin: 0 -1px;
100 border-radius: 0;
101 border: 1px solid var(--color-secondary);
102}
103
104.ui.attached:not(.top).header {
105 border-top: none;
106}
107
108.ui.top.attached.header {
109 border-radius: 0.28571429rem 0.28571429rem 0 0;
110}
111
112.ui.bottom.attached.header {
113 border-radius: 0 0 0.28571429rem 0.28571429rem;
114}
115
116.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
117 font-size: 1em;
118}
119
120/* fix misaligned right buttons on box headers */
121.ui.attached.header > .ui.right {
122 position: absolute;
123 right: 0.78571429rem;
124 top: 0;
125 bottom: 0;
126 display: flex;
127 align-items: center;
128 gap: 0.25em;
129}
130
131/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
132.ui.attached.header > .ui.right .ui.tiny.button {
133 padding: 6px 10px;
134 font-weight: var(--font-weight-normal);
135}
136
137/* open dropdown menus to the left in right-attached headers */
138.ui.attached.header > .ui.right .ui.dropdown .menu {
139 right: 0;
140 left: auto;
141}
142
143/* if a .top.attached.header is followed by a .segment, add some margin */
144.ui.segments + .ui.top.attached.header,
145.ui.attached.segment + .ui.top.attached.header {
146 margin-top: 1rem;
147}
148
149.ui.dividing.header {
150 border-bottom-color: var(--color-secondary);
151}
152
153.ui.dividing.header .sub.header {
154 padding-bottom: 0.21428571rem;
155}
156
157.ui.dividing.header i.icon {
158 margin-bottom: 0;
159}
160
161.ui.error.header {
162 background: var(--color-error-bg) !important;
163 color: var(--color-error-text) !important;
164 border-color: var(--color-error-border) !important;
165}
166
167.ui.warning.header {
168 background: var(--color-warning-bg) !important;
169 color: var(--color-warning-text) !important;
170 border-color: var(--color-warning-border) !important;
171}
172
173.attention-header {
174 padding: 0.5em 0.75em !important;
175 color: var(--color-text) !important;
176}