~cadence/cloudtube

ref: 21629de5947e4da4d2962ce3f0c16b1a7c447e21 cloudtube/sass/includes/video-page.sass -rw-r--r-- 3.2 KiB
21629de5Lomanic Properly rewrite URL params for youtu.be links 6 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
@use "colors.sass" as c
@use "video-list-item.sass" as *

.video-page
  display: grid
  grid-auto-flow: row
  padding: 20px
  grid-gap: 16px

  @media screen and (min-width: 1000px)
    grid-template-columns: 1fr 400px

.main-video-section
  .video-container
    text-align: center

    .video
      display: inline-block
      width: 100%
      height: auto
      max-height: 80vh

  .stream-notice
    background: c.$bg-darkest
    padding: 4px

  .info
    display: flex
    margin: 8px 4px 16px
    font-size: 17px

    @media screen and (max-width: 499px)
      display: block

    .info-main
      flex: 1

      .title
        margin: 0px 0px 4px
        font-size: 30px
        font-weight: normal
        color: c.$fg-bright
        word-break: break-word

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

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

    .info-secondary
      display: flex
      flex-direction: column
      align-items: flex-end
      text-align: right
      margin-top: 6px
      margin-left: 6px

      @media screen and (max-width: 499px)
        align-items: flex-start
        margin-left: 0px

    .rating-bar
      margin-top: 8px
      width: 140px
      height: 8px
      border-radius: 3px
      background: linear-gradient(to right, #1a1 var(--rating), #bbb var(--rating))

  .continuous
    display: flex
    align-items: center
    justify-content: space-between
    margin: 16px 4px
    padding: 12px
    border-radius: 4px
    background-color: c.$bg-darkest

    &__description
      margin-left: 12px

    &__title
      font-size: 20px

    &__script-warning
      font-size: 15px
      color: c.$fg-warning

    &__buttons
      display: flex
      flex-shrink: 0

  .description
    position: relative
    font-size: 17px
    line-height: 1.4
    word-break: break-word
    margin: 16px 4px 4px 4px
    background-color: c.$bg-accent-area
    padding: 12px
    border-radius: 4px

    --regular-background: #{c.$bg-accent-area}
    --highlight-background: #{c.$bg-darker}

.subscribe-form
  display: inline-block

.related-cols
  display: flex
  align-items: center
  justify-content: space-between
  margin-bottom: 8px

.continuous-start
  font-size: 15px

.related-header
  margin: 4px 0px 4px 2px
  font-weight: normal
  font-size: 26px

.related-video
  @include video-list-item
  word-break: break-word

.video-error-page
  padding: 40px 20px 20px
  margin: 0 auto
  max-width: 600px
  line-height: 1.4

.blocked-explanation
  text-align: center
  margin-bottom: 32px

  @media screen and (max-width: 600px)
    display: none

  img
    width: 552px
    height: 96px

  .rows
    display: grid
    grid-template-columns: 22% 20% 20% 20%
    grid-gap: 4%
    justify-content: center

    .row
      margin: 0

      .actor
        margin: 4px 0px 10px

// Chapter highlights

.timestamp--active
  margin: 4px 0px
  display: inline-block

  &::after
    display: block
    position: absolute
    left: 0
    right: 0
    height: calc(1.4em + 4px)
    transform: translateY(-1.4em) translateY(-4px)

    padding-right: 6px
    text-align: right
    content: "⮜"
    line-height: 1.6
    color: #fff

    border: solid black
    border-width: 2px 0px