git ssb

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