1
0
Fork 0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2026-03-02 02:31:35 +00:00

Implement video filters

This commit is contained in:
Cadence Ember 2021-05-12 00:29:44 +12:00
parent aa953dc796
commit db7ccabb3b
No known key found for this signature in database
GPG key ID: BC1C2C61CF521B17
19 changed files with 790 additions and 9 deletions

View file

@ -55,4 +55,28 @@
.border-look
@include border-button
@include button-size
@include button-hover
@at-root #{selector.unify(&, "a, button")}
@include button-hover
.menu-look
@include button-size
-webkit-appearance: none
-moz-appearance: none
color: c.$fg-bright
text-decoration: none
line-height: 1.25
margin: 0
padding: 8px 20px
background: c.$bg-accent
border: solid c.$bg-darker
border-width: 1px 0px 0px
text-align: left
&:last-child
border-width: 1px 0px 1px
&:hover
background: c.$bg-accent-x
&:active
background: c.$bg-darker

View file

@ -0,0 +1,64 @@
@use "colors.sass" as c
@mixin filter-notice
margin-top: 24px
padding: 12px
border-radius: 8px
background-color: c.$bg-darker
white-space: pre-line
.filters-page
max-width: 600px
margin: 0 auto
.filter-list
margin-top: 24px
.no-filters
padding: 4px
text-align: center
.filter-confirmation-notice
@include filter-notice
color: c.$fg-warning
.filter-compile-error
@include filter-notice
&__header
color: c.$fg-warning
&__trace
background-color: c.$bg-darkest
padding: 6px
.save-filter
margin-top: 12px
.border-look
background-color: c.$bg-darker
font-size: 22px
padding: 7px 16px 8px
font-size: 24px
.filter-category-header
font-size: 1.25em
margin-bottom: 4px
.filter
display: flex
padding: 5px 0
border-top: 1px solid c.$edge-grey
&:last-child
border-bottom: 1px solid c.$edge-grey
&__details
flex: 1
&__type
font-size: 15px
color: c.$fg-dim
&__remove
flex-shrink: 0

View file

@ -13,6 +13,23 @@
font-size: 22px
padding: 7px 16px 8px
.more-settings-header
margin-top: 36px
.more-settings
margin-top: 24px
padding: 12px
border-radius: 8px
background-color: c.$bg-accent-x
&__list
margin: 0
padding-left: 1em
line-height: 1
&__list-item:not(:last-child)
margin-bottom: 0.4em // emulate line-height
.data-management
margin-top: 24px

View file

@ -1,6 +1,68 @@
@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 &, &[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
@ -78,7 +140,6 @@
grid-gap: 16px
grid-template-columns: auto 1fr
margin-bottom: 20px
overflow: hidden
max-height: 150px
@at-root .video-list-item--watched#{&}
@ -98,6 +159,10 @@
right: 5px
bottom: 5px
.info
overflow: hidden
max-height: 150px
.title
font-size: 24px