oppi.li
1/* Below styles are a subset of the full fomantic card styles which are */
2/* needed to get all current uses of fomantic cards working. */
3/* TODO: remove all these styles and use custom styling instead */
4
5.ui.card:last-child {
6 margin-bottom: 0;
7}
8.ui.card:first-child {
9 margin-top: 0;
10}
11
12.ui.cards > .card,
13.ui.card {
14 display: flex;
15 flex-direction: column;
16 max-width: 100%;
17 width: 290px;
18 min-height: 0;
19 padding: 0;
20 background: var(--color-card);
21 border: 1px solid var(--color-secondary);
22 box-shadow: none;
23 word-wrap: break-word;
24}
25
26.ui.card {
27 margin: 1em 0;
28}
29
30.ui.cards {
31 display: flex;
32 margin: -0.875em -0.5em;
33 flex-wrap: wrap;
34}
35
36.ui.cards > .card {
37 display: flex;
38 margin: 0.875em 0.5em;
39 float: none;
40}
41
42.ui.cards > .card > .content,
43.ui.card > .content {
44 border-top: 1px solid var(--color-secondary);
45 max-width: 100%;
46 padding: 1em;
47 font-size: 1em;
48}
49
50.ui.cards > .card > .content > .meta + .description,
51.ui.cards > .card > .content > .header + .description,
52.ui.card > .content > .meta + .description,
53.ui.card > .content > .header + .description {
54 margin-top: .5em;
55}
56
57.ui.cards > .card > .content > .header:not(.ui),
58.ui.card > .content > .header:not(.ui) {
59 font-weight: var(--font-weight-medium);
60 font-size: 1.28571429em;
61 margin-top: -.21425em;
62 line-height: 1.28571429;
63}
64
65.ui.cards > .card > .content:first-child,
66.ui.card > .content:first-child {
67 border-top: none;
68 border-radius: var(--border-radius) var(--border-radius) 0 0;
69}
70
71.ui.cards > .card > :last-child,
72.ui.card > :last-child {
73 border-radius: 0 0 var(--border-radius) var(--border-radius);
74}
75
76.ui.cards > .card > :only-child,
77.ui.card > :only-child {
78 border-radius: var(--border-radius) !important;
79}
80
81.ui.cards > .card > .extra,
82.ui.card > .extra,
83.ui.cards > .card > .extra a:not(.ui),
84.ui.card > .extra a:not(.ui) {
85 color: var(--color-text);
86}
87
88.ui.cards > .card > .extra a:not(.ui):hover,
89.ui.card > .extra a:not(.ui):hover {
90 color: var(--color-primary);
91}
92
93.ui.cards > .card > .content > .header,
94.ui.card > .content > .header {
95 color: var(--color-text);
96}
97
98.ui.cards > .card > .content > .description,
99.ui.card > .content > .description {
100 color: var(--color-text);
101}
102
103.ui.cards > .card .meta > a:not(.ui),
104.ui.card .meta > a:not(.ui) {
105 color: var(--color-text-light-2);
106}
107
108.ui.cards > .card .meta > a:not(.ui):hover,
109.ui.card .meta > a:not(.ui):hover {
110 color: var(--color-text);
111}
112
113.ui.cards a.card:hover,
114a.ui.card:hover {
115 border: 1px solid var(--color-secondary);
116 background: var(--color-card);
117}
118
119.ui.cards > .card > .extra,
120.ui.card > .extra {
121 color: var(--color-text);
122 border-top-color: var(--color-secondary-light-1) !important;
123}
124
125.ui.three.cards {
126 margin-left: -1em;
127 margin-right: -1em;
128}
129
130.ui.three.cards > .card {
131 width: calc(33.33333333333333% - 2em);
132 margin-left: 1em;
133 margin-right: 1em;
134}