Implement video filters

sass/includes/buttons.sass

@@ -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

sass/includes/filters-page.sass

@@ -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

sass/includes/settings-page.sass

@@ -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
 

sass/includes/video-list-item.sass

@@ -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
 

sass/main.sass

@@ -10,6 +10,7 @@
 @use "includes/cant-think-page.sass"
 @use "includes/privacy-page.sass"
 @use "includes/js-licenses-page.sass"
+@use "includes/filters-page.sass"
 @use "includes/forms.sass"
 @use "includes/nav.sass"
 @use "includes/footer.sass"