1 | /*************************************************************************** |
2 | |
3 | TOYHOUSE SPOILER BOXES |
4 | |
5 | This is the CSS for spoiler boxes. Please see the demo for details! |
6 | You can edit the section below to style the spoiler boxes. |
7 | The required HTML to make a spoiler box on a page is here: |
8 | http://loader.8bitbirdsong.net/text/view/17 |
9 | Feel free to use/incorporate any part of this |
10 | in a separate stylesheet, credit optional. |
11 | |
12 | Last updated 2/10/15 |
13 | |
14 | http://toyhou.se/aleator |
15 | |
16 | ***************************************************************************/ |
17 | |
18 | /* |
19 | Basic styling. Feel free to edit this part |
20 | */ |
21 | .spoiler-box |
22 | { |
23 | padding: 5px; |
24 | border: 1px dotted #ddd; |
25 | margin-top: 5px; |
26 | margin-bottom: 5px; |
27 | } |
28 | .spoiler-close |
29 | { |
30 | background-color: #ddd; |
31 | padding: 0px 5px; |
32 | float: right; |
33 | } |
34 | .spoiler-content |
35 | { |
36 | width: 100%; |
37 | padding: 5px; |
38 | } |
39 | .spoiler-title |
40 | { |
41 | background-color: #777; |
42 | color: #fff; |
43 | width: 100%; |
44 | display: block; |
45 | padding: 5px; |
46 | position: relative; |
47 | } |
48 | /* |
49 | Hides the spoiler button and content. |
50 | Don't touch this! |
51 | */ |
52 | .spoiler-close, |
53 | .spoiler-content |
54 | { |
55 | display: none; |
56 | } |
57 | /* |
58 | Makes the spoiler content/close button show |
59 | when the box is clicked. Don't touch this! |
60 | */ |
61 | .spoiler-box:focus .spoiler-content |
62 | { |
63 | display: block; |
64 | } |
65 | .spoiler-box:focus .spoiler-close |
66 | { |
67 | display: block; |
68 | } |