|
1 * { |
|
2 box-sizing: border-box; |
|
3 } |
|
4 |
|
5 body { |
|
6 margin: 0; |
|
7 padding-bottom: 20px; |
|
8 } |
|
9 |
|
10 #all-fonts { |
|
11 padding: 0; |
|
12 margin: 0; |
|
13 } |
|
14 |
|
15 #showall { |
|
16 border-radius: 0; |
|
17 border: 1px solid black; |
|
18 margin: 3px; |
|
19 cursor: pointer; |
|
20 position: fixed; |
|
21 bottom: 0; |
|
22 right: 0; |
|
23 } |
|
24 |
|
25 .font { |
|
26 padding: 10px 10px; |
|
27 } |
|
28 |
|
29 .theme-dark .font { |
|
30 border-bottom: 1px solid #444; |
|
31 } |
|
32 |
|
33 .theme-light .font { |
|
34 border-bottom: 1px solid #DDD; |
|
35 } |
|
36 |
|
37 .font:last-of-type { |
|
38 border-bottom: 0; |
|
39 } |
|
40 |
|
41 .theme-light .font:nth-child(even) { |
|
42 background: #F4F4F4; |
|
43 } |
|
44 |
|
45 .font-preview { |
|
46 height: 60px; |
|
47 width: 100%; |
|
48 border: 0; |
|
49 display: block; |
|
50 } |
|
51 |
|
52 .font-info { |
|
53 display: block; |
|
54 } |
|
55 |
|
56 .font-name { |
|
57 display: inline; |
|
58 } |
|
59 |
|
60 .font-css-code { |
|
61 max-width: 100%; |
|
62 overflow: hidden; |
|
63 text-overflow: ellipsis; |
|
64 padding: 5px; |
|
65 } |
|
66 |
|
67 .theme-light .font-css-code, |
|
68 .theme-light .font-url { |
|
69 border: 1px solid #CCC; |
|
70 background: white; |
|
71 } |
|
72 |
|
73 .theme-dark .font-css-code, |
|
74 .theme-dark .font-url { |
|
75 border: 1px solid #333; |
|
76 background: black; |
|
77 color: white; |
|
78 } |