Files: 87dd7388171016a3b49fb155c4b07fd06b4c5436 / app / page / statsShow.mcss
2920 bytesRaw
1 | Page -statsShow { |
2 | div.Scroller { |
3 | display: flex |
4 | flex-direction: column |
5 | align-items: center |
6 | |
7 | div.content { |
8 | flex-grow: 0 |
9 | $backgroundPrimaryText |
10 | padding: 1rem |
11 | width: 1000px |
12 | |
13 | h1 { |
14 | font-size: .8rem |
15 | letter-spacing: 4px |
16 | } |
17 | |
18 | section.totals { |
19 | display: flex |
20 | |
21 | div { |
22 | flex-basis: 33% |
23 | flex-grow: 1 |
24 | |
25 | cursor: pointer |
26 | $colorFontSubtle |
27 | padding: 0 0 .5rem .8rem |
28 | border-bottom: 1px solid gainsboro |
29 | border-right: 1px solid gainsboro |
30 | |
31 | transition: all ease-out .5s |
32 | :hover { |
33 | $colorFontBasic |
34 | transition: all ease-out .5s |
35 | } |
36 | |
37 | -selected { |
38 | $colorFontBasic |
39 | border-bottom: 1px solid #fff |
40 | } |
41 | |
42 | div.count { |
43 | font-size: 3rem |
44 | font-weight: 600 |
45 | margin-right: .5rem |
46 | } |
47 | strong { |
48 | margin-right: .5rem |
49 | } |
50 | } |
51 | |
52 | |
53 | div.shares { |
54 | border-right: none |
55 | } |
56 | } |
57 | |
58 | section.graph { |
59 | display: flex |
60 | flex-wrap: wrap |
61 | justify-content: center |
62 | |
63 | margin: 2rem 0 |
64 | |
65 | canvas { |
66 | margin-bottom: 1rem |
67 | } |
68 | div.changeRange { |
69 | a { |
70 | cursor: pointer |
71 | :hover { text-decoration: underline } |
72 | } |
73 | span { |
74 | $colorFontSubtle |
75 | } |
76 | } |
77 | } |
78 | |
79 | table.blogs { |
80 | width: 100% |
81 | margin: 1rem 0 4rem |
82 | |
83 | thead { |
84 | tr { |
85 | margin-bottom: 1rem |
86 | color: hsl(0, 0%, 25%) |
87 | th.details { |
88 | width: 70% |
89 | padding: 0 2rem 0 0 |
90 | } |
91 | th.comments, th.likes, th.shares { |
92 | $colorFontSubtle |
93 | width: 10% |
94 | } |
95 | } |
96 | } |
97 | tbody { |
98 | tr.blog { |
99 | margin-bottom: 1rem |
100 | td { |
101 | border-bottom: 1px solid rgba(0, 0, 0, .05) |
102 | } |
103 | |
104 | td.details { |
105 | width: 70% |
106 | padding: .8rem 2rem .8rem 0 |
107 | |
108 | div.title { |
109 | font-size: 1.3rem |
110 | font-weight: 600 |
111 | cursor: pointer |
112 | } |
113 | |
114 | a { |
115 | $colorFontSubtle |
116 | letter-spacing: .8px |
117 | font-size: .7rem |
118 | text-decoration: none |
119 | |
120 | :hover { |
121 | text-decoration: underline |
122 | } |
123 | } |
124 | } |
125 | td.comments, td.likes, td.shares { |
126 | width: 10% |
127 | /* padding: 0 2.5rem */ |
128 | font-size: 1.3rem |
129 | font-weight: 600 |
130 | text-align: center |
131 | } |
132 | |
133 | -background { |
134 | filter: opacity(40%) |
135 | } |
136 | } |
137 | } |
138 | } |
139 | } |
140 | } |
141 | } |
142 |
Built with git-ssb-web