~cadence/cloudtube

ref: f62fce4feaf84a8fb3c2625a64db97a382a9b887 cloudtube/sass/includes/video-list-item.sass -rw-r--r-- 3.5 KiB
f62fce4fCadence Ember Highlight current chapter in video description 11 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
@use "colors.sass" as c
@use "_dimensions.sass" as dimensions

.thumbnail
  $more-size: 24px

  &__more
    position: absolute
    top: 4px
    right: 4px
    width: $more-size
    height: $more-size
    border-radius: 50%
    background-color: rgba(20, 20, 20, 0.85)
    padding: 0px
    color: #fff

    visibility: hidden

    @at-root .thumbnail:hover &, body.show-focus &
      visibility: visible

    &[open]
      visibility: visible

  &__show-more
    display: block
    height: $more-size
    line-height: 16px
    font-size: 25px
    text-align: center

    &::-webkit-details-marker
      display: none

  &__options-container
    position: absolute
    z-index: 1
    top: $more-size
    left: -1000px
    right: 0
    padding-top: 4px
    display: flex
    justify-content: flex-end
    pointer-events: none

  &__options-list
    pointer-events: auto
    display: grid
    background-color: c.$bg-accent
    padding: 8px 0px
    border-radius: 8px
    box-shadow: 0 2px 6px 2px #000

    &::before
      content: ""
      display: block
      height: 12px
      width: 12px
      position: absolute
      top: 0
      right: 0
      transform: translate(-6px, -1px) rotate(-45deg)
      clip-path: polygon(-5% -20%, 120% -20%, 120% 125%)
      background-color: c.$bg-accent
      box-shadow: 0px 0px 4px 0px #000
      pointer-events: none

@mixin video-list-item
  display: grid
  grid-template-columns: 160px 1fr
  grid-gap: 8px
  align-items: start
  align-content: start
  margin-bottom: 12px

  @at-root .video-list-item--watched#{&}
    background: c.$bg-darker
    padding: 4px 4px 0px
    margin: -4px -4px 8px

    .thumbnail
      margin-bottom: 4px

    .image
      opacity: 0.4

  .thumbnail
    position: relative
    display: flex
    background: c.$bg-darkest

    &__link
      font-size: 0 // remove whitespace around the image

  .image
    width: 160px
    height: 90px

  .duration
    position: absolute
    bottom: 3px
    right: 3px
    color: c.$fg-bright
    font-size: 14px
    background: rgba(20, 20, 20, 0.85)
    line-height: 1
    padding: 3px 5px 4px
    border-radius: 4px
    pointer-events: none

  .title
    font-size: 15px
    line-height: 1.2

  .title-link
    color: c.$fg-main
    text-decoration: none

  .author-line
    margin-top: 4px
    font-size: 15px
    color: c.$fg-dim

  .author
    color: c.$fg-dim
    text-decoration: none

    &:hover, &:active
      color: c.$fg-bright
      text-decoration: underline

@mixin recommendation-item
  @include video-list-item

@mixin large-item
  @include video-list-item

  .title
    font-size: 17px

  +dimensions.wide
    grid-gap: 16px
    grid-template-columns: auto 1fr
    margin-bottom: 20px
    max-height: 150px

    @at-root .video-list-item--watched#{&}
      padding: 8px 8px 0px
      margin: -8px -8px 20px

      .thumbnail
        margin-bottom: 8px

    .image
      width: 240px
      height: 135px

    .duration
      font-size: 17px
      padding: 4px 5px
      right: 5px
      bottom: 5px

    .info
      overflow: hidden
      max-height: 150px

    .title
      font-size: 24px

    .author-line
      font-size: 15px
      color: c.$fg-main

    .author
      color: c.$fg-main

    .description
      margin-top: 16px
      font-size: 15px
      color: c.$fg-dim

  +dimensions.thin
    .description
      display: none

@mixin search-result
  @include large-item

  .description b
    font-weight: normal
    color: c.$fg-main

@mixin channel-video
  @include large-item

@mixin subscriptions-video
  @include large-item