Commit | Line | Data |
---|---|---|
b8eab696 | 1 | .quoteBox { |
1a75e228 | 2 | background-color: var(--wcfContentBackground); |
5674f08c AE |
3 | border: 1px solid var(--wcfContentBorderInner); |
4 | border-left-width: 5px; | |
2f87cf32 | 5 | border-radius: 0 var(--wcfBorderRadius) var(--wcfBorderRadius) 0; |
72124edf | 6 | clear: both; |
2f87cf32 AE |
7 | column-gap: 5px; |
8 | display: grid; | |
4607e66d | 9 | font-style: normal; |
2f87cf32 AE |
10 | grid-template-areas: |
11 | "icon title" | |
12 | "content content"; | |
13 | grid-template-columns: 24px auto; | |
8f66ad4e | 14 | margin: 2em 0 1em 0; |
72124edf | 15 | overflow: hidden; |
2f87cf32 AE |
16 | padding: 15px 10px; |
17 | row-gap: 10px; | |
b8eab696 AE |
18 | } |
19 | ||
2f87cf32 AE |
20 | .quoteBox.collapsed { |
21 | position: relative; | |
8a52619a | 22 | |
2f87cf32 AE |
23 | > .quoteBoxContent { |
24 | overflow: hidden; | |
25 | max-height: 100px; | |
a26b3658 | 26 | } |
8a52619a | 27 | |
a26b3658 | 28 | > .toggleButton { |
2f87cf32 AE |
29 | bottom: 0; |
30 | box-shadow: 0 -10px 50px 10px rgba(var(--wcfContentBackground-rgb) / 0.9); | |
31 | left: 0; | |
32 | padding-bottom: 10px; | |
33 | position: absolute; | |
34 | right: 0; | |
35 | z-index: 1; | |
f63e47e6 MW |
36 | } |
37 | } | |
38 | ||
2f87cf32 AE |
39 | .quoteBox > .toggleButton { |
40 | background-color: rgba(var(--wcfContentBackground-rgb) / 0.9); | |
41 | cursor: pointer; | |
42 | display: block; | |
45db35a0 | 43 | grid-column: 1 / -1; |
2f87cf32 AE |
44 | padding: 10px 20px 0 10px; |
45 | text-align: center; | |
8a52619a | 46 | |
2f87cf32 | 47 | @include wcfFontSmall; |
4b77aefa AE |
48 | } |
49 | ||
2f87cf32 AE |
50 | .quoteBoxTitle { |
51 | align-self: center; | |
52 | color: var(--wcfContentDimmedText); | |
53 | grid-area: title; | |
8a52619a | 54 | |
2f87cf32 AE |
55 | a { |
56 | color: inherit; | |
b8eab696 | 57 | } |
8a52619a | 58 | |
2f87cf32 AE |
59 | a:hover { |
60 | color: inherit; | |
61 | text-decoration: underline; | |
62 | } | |
63 | } | |
8a52619a | 64 | |
2f87cf32 AE |
65 | .quoteBoxIcon { |
66 | color: var(--wcfContentDimmedText); | |
67 | display: flex; | |
68 | grid-area: icon; | |
69 | } | |
8a52619a | 70 | |
2f87cf32 AE |
71 | .quoteBoxContent { |
72 | grid-area: content; | |
8a52619a | 73 | |
2f87cf32 AE |
74 | > :first-child { |
75 | margin-top: 0 !important; | |
8636ad9b | 76 | } |
8a52619a | 77 | |
2f87cf32 AE |
78 | > :last-child { |
79 | margin-bottom: 0 !important; | |
b8eab696 AE |
80 | } |
81 | } |