mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2026-03-02 02:31:35 +00:00
Add theme support, light theme, and edgeless light
This commit is contained in:
Cadence Ember
parent
4e1f2b3607
commit
0d23d66700
45 changed files with 433 additions and 212 deletions
9
sass/dark.sass
Normal file
9
sass/dark.sass
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@use "themes/dark" as *
|
||||
@use "includes/main" with ($_theme: $theme)
|
||||
|
||||
@use "theme-modules/edgeless" with ($_theme: $theme)
|
||||
|
||||
// navigation shadow
|
||||
.main-nav
|
||||
position: relative // needed for box shadow to overlap related videos section
|
||||
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
|
||||
4
sass/edgeless-light.sass
Normal file
4
sass/edgeless-light.sass
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@use "themes/edgeless-light" as *
|
||||
@use "includes/main" with ($_theme: $theme)
|
||||
|
||||
@use "theme-modules/edgeless" with ($_theme: $theme)
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
@use "colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
body
|
||||
background-color: c.$bg-dark
|
||||
color: c.$fg-main
|
||||
background-color: map.get($_theme, "bg-2")
|
||||
color: map.get($_theme, "fg-main")
|
||||
font-family: "Bariol", sans-serif
|
||||
font-size: 18px
|
||||
margin: 0
|
||||
|
|
@ -13,13 +15,13 @@ body
|
|||
flex-direction: column
|
||||
|
||||
a
|
||||
color: c.$link
|
||||
color: map.get($_theme, "link")
|
||||
|
||||
pre, code
|
||||
font-size: 0.88em
|
||||
|
||||
code
|
||||
background: c.$bg-darker
|
||||
background: map.get($_theme, "bg-1")
|
||||
padding: 3px 5px
|
||||
border-radius: 4px
|
||||
|
||||
|
|
@ -32,7 +34,7 @@ button
|
|||
cursor: pointer
|
||||
|
||||
::placeholder
|
||||
color: #c4c4c4
|
||||
color: map.get($_theme, "placeholder")
|
||||
opacity: 1
|
||||
|
||||
// focus section
|
||||
|
|
@ -48,19 +50,20 @@ button
|
|||
|
||||
select:-moz-focusring
|
||||
color: transparent
|
||||
text-shadow: 0 0 0 c.$fg-bright
|
||||
text-shadow: 0 0 0 map.get($_theme, "fg-bright")
|
||||
|
||||
body.show-focus
|
||||
a, select, button, input, video, summary
|
||||
&:focus
|
||||
outline: 2px dotted #ddd
|
||||
outline: 2px dotted map.get($_theme, "fg-main")
|
||||
|
||||
video
|
||||
background-color: black
|
||||
|
||||
details
|
||||
background-color: c.$bg-accent-x
|
||||
background-color: map.get($_theme, "bg-3")
|
||||
padding: 12px
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
border-radius: 8px
|
||||
|
||||
summary
|
||||
|
|
@ -68,20 +71,22 @@ details
|
|||
line-height: 1
|
||||
margin-bottom: 0
|
||||
user-select: none
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
&[open] summary
|
||||
margin-bottom: 16px
|
||||
padding-bottom: 12px
|
||||
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
||||
margin-bottom: 8px
|
||||
|
||||
table
|
||||
background-color: c.$bg-darker
|
||||
background-color: map.get($_theme, "bg-1")
|
||||
|
||||
table, td, th
|
||||
border: 1px solid c.$edge-grey
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
border-collapse: collapse
|
||||
|
||||
td, th
|
||||
padding: 4px 8px
|
||||
|
||||
thead, tr:nth-child(even)
|
||||
background-color: c.$bg-darkest
|
||||
background-color: map.get($_theme, "bg-0")
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
$_theme: () !default
|
||||
|
||||
@use "sass:selector"
|
||||
@use "colors.sass" as c
|
||||
@use "sass:map"
|
||||
|
||||
@mixin button-base
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
color: c.$fg-bright
|
||||
color: map.get($_theme, "fg-bright")
|
||||
border: none
|
||||
border-radius: 4px
|
||||
padding: 8px
|
||||
|
|
@ -14,7 +16,7 @@
|
|||
|
||||
@at-root #{selector.unify(&, "select")}
|
||||
padding: 8px 27px 8px 8px
|
||||
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
|
||||
background: map.get($_theme, "image-dropdown") right 53% no-repeat map.get($_theme, "bg-4")
|
||||
|
||||
@at-root #{selector.unify(&, "a")}
|
||||
padding: 7px 8px
|
||||
|
|
@ -31,12 +33,12 @@
|
|||
@mixin button-bg
|
||||
@include button-base
|
||||
|
||||
background-color: c.$bg-accent-x
|
||||
background-color: map.get($_theme, "bg-4")
|
||||
|
||||
@mixin border-button
|
||||
@include button-bg
|
||||
|
||||
border: 1px solid c.$edge-grey
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
|
||||
@mixin button-size
|
||||
margin: 4px
|
||||
|
|
@ -44,10 +46,10 @@
|
|||
|
||||
@mixin button-hover
|
||||
&:hover
|
||||
background-color: c.$bg-accent
|
||||
background-color: map.get($_theme, "bg-3")
|
||||
|
||||
&:active
|
||||
background-color: c.$bg-dark
|
||||
background-color: map.get($_theme, "bg-2")
|
||||
|
||||
.base-border-look
|
||||
@include border-button
|
||||
|
|
@ -62,13 +64,13 @@
|
|||
@include button-size
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
color: c.$fg-bright
|
||||
color: map.get($_theme, "fg-bright")
|
||||
text-decoration: none
|
||||
line-height: 1.25
|
||||
margin: 0
|
||||
padding: 8px 20px
|
||||
background: c.$bg-accent
|
||||
border: solid c.$bg-darker
|
||||
background: map.get($_theme, "bg-3")
|
||||
border: solid map.get($_theme, "edge-grey")
|
||||
border-width: 1px 0px 0px
|
||||
text-align: left
|
||||
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
border-width: 1px 0px 1px
|
||||
|
||||
&:hover
|
||||
background: c.$bg-accent-x
|
||||
background: map.get($_theme, "bg-4")
|
||||
|
||||
&:active
|
||||
background: c.$bg-darker
|
||||
background: map.get($_theme, "bg-1")
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
$_theme: () !default
|
||||
|
||||
@use "sass:list"
|
||||
@use "colors.sass" as c
|
||||
@use "sass:map"
|
||||
|
||||
.cant-think-page
|
||||
.main-nav
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
box-sizing: border-box
|
||||
|
||||
.page-narration
|
||||
background-color: c.$bg-accent
|
||||
background-color: map.get($_theme, "bg-3")
|
||||
border: 1px solid #aaa
|
||||
color: #fff
|
||||
border-radius: 0
|
||||
|
|
@ -28,7 +30,7 @@
|
|||
|
||||
.leave
|
||||
margin: 26px 32px !important
|
||||
color: #aaa
|
||||
color: map.get($_theme, "fg-dim")
|
||||
|
||||
$sizes: 14px 16px 21px 30px 72px
|
||||
@each $size in $sizes
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
|
||||
&.leave__final
|
||||
font-weight: bold
|
||||
color: #f2f2f2
|
||||
color: map.get($_theme, "fg-bright")
|
||||
text-align: center
|
||||
|
||||
.leave__actions
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
@use "colors.sass" as c
|
||||
@use "video-list-item.sass" as *
|
||||
@use "_dimensions.sass" as dimensions
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "_dimensions" as dimensions
|
||||
@use "video-list-item" as *
|
||||
|
||||
.channel-page
|
||||
padding: 40px 20px 20px
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
align-self: flex-start
|
||||
|
||||
.channel-data
|
||||
background-color: c.$bg-darker
|
||||
background-color: map.get($_theme, "bg-1")
|
||||
padding: 24px
|
||||
margin: 12px 0px 24px
|
||||
border-radius: 8px
|
||||
|
|
@ -44,11 +46,11 @@
|
|||
.name
|
||||
font-size: 30px
|
||||
font-weight: normal
|
||||
color: c.$fg-bright
|
||||
color: map.get($_theme, "fg-bright")
|
||||
margin: 0
|
||||
|
||||
.subscribers
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
font-size: 18px
|
||||
|
||||
.subscribe-form
|
||||
|
|
@ -61,7 +63,8 @@
|
|||
line-height: 1
|
||||
border-radius: 8px
|
||||
font-size: 22px
|
||||
background-color: c.$power-deep
|
||||
background-color: map.get($_theme, "power-deep")
|
||||
color: map.get($_theme, "power-fg")
|
||||
border: none
|
||||
|
||||
.description
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
@use "colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
@mixin filter-notice
|
||||
margin-top: 24px
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
background-color: c.$bg-darker
|
||||
background-color: map.get($_theme, "bg-1")
|
||||
white-space: pre-line
|
||||
|
||||
.filters-page
|
||||
|
|
@ -20,23 +22,23 @@
|
|||
|
||||
.filter-confirmation-notice
|
||||
@include filter-notice
|
||||
color: c.$fg-warning
|
||||
color: map.get($_theme, "fg-warning")
|
||||
|
||||
.filter-compile-error
|
||||
@include filter-notice
|
||||
|
||||
&__header
|
||||
color: c.$fg-warning
|
||||
color: map.get($_theme, "fg-warning")
|
||||
|
||||
&__trace
|
||||
background-color: c.$bg-darkest
|
||||
background-color: map.get($_theme, "bg-0")
|
||||
padding: 6px
|
||||
|
||||
.save-filter
|
||||
margin-top: 12px
|
||||
|
||||
.border-look
|
||||
background-color: c.$bg-darker
|
||||
background-color: map.get($_theme, "bg-1")
|
||||
font-size: 22px
|
||||
padding: 7px 16px 8px
|
||||
font-size: 24px
|
||||
|
|
@ -48,17 +50,17 @@
|
|||
.filter
|
||||
display: flex
|
||||
padding: 5px 0
|
||||
border-top: 1px solid c.$edge-grey
|
||||
border-top: 1px solid map.get($_theme, "edge-grey")
|
||||
|
||||
&:last-child
|
||||
border-bottom: 1px solid c.$edge-grey
|
||||
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
||||
|
||||
&__details
|
||||
flex: 1
|
||||
|
||||
&__type
|
||||
font-size: 15px
|
||||
color: c.$fg-dim
|
||||
color: map.get($_theme, "fg-dim")
|
||||
|
||||
&__remove
|
||||
flex-shrink: 0
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
@use "./colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
.footer__container
|
||||
flex: 1
|
||||
|
|
@ -10,9 +12,10 @@
|
|||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
background-color: c.$bg-darkest
|
||||
background-color: map.get($_theme, "bg-dim")
|
||||
margin: 40px 0 0
|
||||
padding: 10px 10px 30px
|
||||
border-top: 1px solid map.get($_theme, "edge-grey")
|
||||
|
||||
.footer__cols
|
||||
display: flex
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
@use "colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
@mixin disabled
|
||||
background-color: c.$bg-dark
|
||||
background-color: map.get($_theme, "bg-2")
|
||||
color: #808080
|
||||
|
||||
fieldset
|
||||
|
|
@ -20,7 +22,7 @@ fieldset
|
|||
font-size: 28px
|
||||
font-weight: bold
|
||||
padding: 0
|
||||
border-bottom: 1px solid #333
|
||||
border-bottom: 1px solid map.get($_theme, "edge-grey") // TODO: originally contrasted more
|
||||
line-height: 1.56
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
|
|
@ -36,7 +38,7 @@ fieldset
|
|||
position: relative
|
||||
padding-bottom: 5px
|
||||
margin-bottom: 5px
|
||||
border-bottom: 1px solid #999
|
||||
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
flex-direction: column
|
||||
|
|
@ -52,7 +54,7 @@ fieldset
|
|||
&__label
|
||||
grid-area: label
|
||||
padding: 8px 8px 8px 0px
|
||||
color: #fff
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
&__input
|
||||
grid-area: input
|
||||
|
|
@ -63,7 +65,7 @@ fieldset
|
|||
white-space: pre-line
|
||||
margin: 12px 0px 18px
|
||||
font-size: 16px
|
||||
color: #ccc
|
||||
color: map.get($_theme, "fg-dim")
|
||||
line-height: 1.2
|
||||
|
||||
//
|
||||
|
|
@ -79,7 +81,7 @@ fieldset
|
|||
width: 16px
|
||||
height: 16px
|
||||
padding: 0px
|
||||
border: 1px solid #666
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
border-radius: 3px
|
||||
margin-left: 8px
|
||||
position: relative
|
||||
|
|
@ -110,18 +112,19 @@ fieldset
|
|||
height: 42px
|
||||
margin: 0
|
||||
|
||||
.#{$base}-container
|
||||
position: relative
|
||||
display: grid // why does the default not work???
|
||||
top: -42px
|
||||
background: c.$bg-accent-x
|
||||
line-height: 1
|
||||
border-radius: 8px
|
||||
margin-bottom: -18px
|
||||
.checkbox-hider__container
|
||||
position: relative
|
||||
display: grid // why does the default not work???
|
||||
top: -42px
|
||||
background: map.get($_theme, "bg-3")
|
||||
line-height: 1
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
border-radius: 8px
|
||||
margin-bottom: -18px
|
||||
|
||||
.#{$base}-label
|
||||
padding: 12px 0px 12px 32px
|
||||
cursor: pointer
|
||||
.checkbox-hider__label
|
||||
padding: 12px 0px 12px 32px
|
||||
cursor: pointer
|
||||
|
||||
@mixin single-button-form
|
||||
display: inline-block
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
@use "colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
.home-page
|
||||
padding: 40px
|
||||
|
|
@ -18,8 +20,8 @@
|
|||
padding: 16px
|
||||
border-radius: 4px
|
||||
font-size: 20px
|
||||
background-color: c.$bg-darker
|
||||
color: c.$fg-main
|
||||
background-color: map.get($_theme, "bg-1")
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
p
|
||||
margin: 0 32px
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
$_theme: () !default
|
||||
|
||||
.js-licenses-page
|
||||
max-width: 800px
|
||||
margin: 0 auto
|
||||
32
sass/includes/_main.sass
Normal file
32
sass/includes/_main.sass
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
$_theme: () !default
|
||||
|
||||
@use "sass:selector"
|
||||
|
||||
// preload second-level includes with the theme (there will be conflicts due to reconfiguration they are loaded individually)
|
||||
// this isn't _exactly_ what @forward is supposed to be used for, but it's the best option here
|
||||
@forward "video-list-item" show _ with ($_theme: $_theme)
|
||||
@forward "forms" show _ with ($_theme: $_theme)
|
||||
@forward "buttons" show _ with ($_theme: $_theme)
|
||||
|
||||
@use "base" with ($_theme: $_theme)
|
||||
@use "video-page" with ($_theme: $_theme)
|
||||
@use "search-page" with ($_theme: $_theme)
|
||||
@use "home-page" with ($_theme: $_theme)
|
||||
@use "channel-page" with ($_theme: $_theme)
|
||||
@use "subscriptions-page" with ($_theme: $_theme)
|
||||
@use "settings-page" with ($_theme: $_theme)
|
||||
@use "cant-think-page" with ($_theme: $_theme)
|
||||
@use "privacy-page" with ($_theme: $_theme)
|
||||
@use "licenses-page" with ($_theme: $_theme)
|
||||
@use "filters-page" with ($_theme: $_theme)
|
||||
@use "takedown-page" with ($_theme: $_theme)
|
||||
@use "nav" with ($_theme: $_theme)
|
||||
@use "footer" with ($_theme: $_theme)
|
||||
|
||||
@font-face
|
||||
font-family: "Bariol"
|
||||
src: url(/static/fonts/bariol.woff?statichash=1)
|
||||
|
||||
.button-container
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
@use "colors.sass" as c
|
||||
@use "buttons.sass" as *
|
||||
@use "_dimensions.sass" as dimensions
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "buttons" as *
|
||||
@use "_dimensions" as dimensions
|
||||
|
||||
.main-nav
|
||||
background-color: c.$bg-accent
|
||||
background-color: map.get($_theme, "bg-nav")
|
||||
display: flex
|
||||
padding: 8px
|
||||
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
|
||||
border-bottom: 1px solid map.get($_theme, "edge-grey")
|
||||
|
||||
+dimensions.thin
|
||||
display: block
|
||||
|
|
@ -30,10 +32,16 @@
|
|||
font-weight: bold
|
||||
|
||||
&, &:visited
|
||||
color: #fff
|
||||
color: map.get($_theme, "fg-bright")
|
||||
|
||||
&:focus, &:hover
|
||||
background-color: c.$bg-accent-x
|
||||
background-color: map.get($_theme, "bg-4")
|
||||
|
||||
&.icon-link
|
||||
color: map.get($_theme, "fg-dim")
|
||||
|
||||
&:hover, &:focus
|
||||
color: map.get($_theme, "fg-bright")
|
||||
|
||||
.search-form
|
||||
display: flex
|
||||
|
|
@ -44,8 +52,7 @@
|
|||
@include button-bg
|
||||
padding: 10px
|
||||
flex: 1
|
||||
margin: 1px
|
||||
border: 1px solid map.get($_theme, "bg-nav")
|
||||
|
||||
&:hover, &:focus
|
||||
border: 1px solid c.$edge-grey
|
||||
margin: 0px
|
||||
border-color: map.get($_theme, "edge-grey")
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
$_theme: () !default
|
||||
|
||||
.privacy-page
|
||||
max-width: 600px
|
||||
margin: 0 auto
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
@use "video-list-item.sass" as *
|
||||
@use "colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "video-list-item" as *
|
||||
|
||||
.search-page
|
||||
padding: 40px 20px 20px
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
@use "forms.sass" as forms
|
||||
@use "colors.sass" as c
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "forms" as forms
|
||||
|
||||
.settings-page
|
||||
padding: 40px 20px 20px
|
||||
|
|
@ -19,8 +21,9 @@
|
|||
.more-settings
|
||||
margin-top: 24px
|
||||
padding: 12px
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
border-radius: 8px
|
||||
background-color: c.$bg-accent-x
|
||||
background-color: map.get($_theme, "bg-3")
|
||||
|
||||
&__list
|
||||
margin: 0
|
||||
|
|
@ -34,7 +37,7 @@
|
|||
margin-top: 24px
|
||||
|
||||
.delete-confirm-container
|
||||
background: c.$bg-darker
|
||||
background: map.get($_theme, "bg-1")
|
||||
margin-bottom: -36px
|
||||
|
||||
@include forms.checkbox-hider("delete-confirm")
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
@use "colors.sass" as c
|
||||
@use "video-list-item.sass" as *
|
||||
@use "forms.sass" as forms
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "forms" as forms
|
||||
@use "video-list-item" as *
|
||||
|
||||
.subscriptions-page
|
||||
padding: 40px 20px 20px
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
|
||||
.name
|
||||
font-size: 22px
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
@include forms.checkbox-hider("watched-videos-display")
|
||||
|
||||
16
sass/includes/_takedown-page.sass
Normal file
16
sass/includes/_takedown-page.sass
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
.takedown-page
|
||||
max-width: 700px
|
||||
margin: 0 auto
|
||||
|
||||
.new-section
|
||||
margin-top: 200px
|
||||
|
||||
.important-section
|
||||
padding: 4px 20px
|
||||
border: 1px solid map.get($_theme, "edge-grey")
|
||||
color: map.get($_theme, "fg-bright")
|
||||
background-color: map.get($_theme, "bg-1")
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
@use "colors.sass" as c
|
||||
@use "_dimensions.sass" as dimensions
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "_dimensions" as dimensions
|
||||
|
||||
// navigator hacks
|
||||
.thumbnail > .thumbnail__options-container
|
||||
|
|
@ -30,6 +32,7 @@
|
|||
&__show-more
|
||||
display: block
|
||||
height: $more-size
|
||||
color: #fff
|
||||
line-height: 16px
|
||||
font-size: 25px
|
||||
text-align: center
|
||||
|
|
@ -52,7 +55,7 @@
|
|||
&__options-list
|
||||
pointer-events: auto
|
||||
display: grid
|
||||
background-color: c.$bg-accent
|
||||
background-color: map.get($_theme, "bg-3")
|
||||
padding: 8px 0px
|
||||
border-radius: 8px
|
||||
box-shadow: 0 2px 6px 2px #000
|
||||
|
|
@ -67,7 +70,7 @@
|
|||
right: 0
|
||||
transform: translate(-6px, -1px) rotate(-45deg)
|
||||
clip-path: polygon(-5% -20%, 120% -20%, 120% 125%)
|
||||
background-color: c.$bg-accent
|
||||
background-color: map.get($_theme, "bg-3")
|
||||
box-shadow: 0px 0px 4px 0px #000
|
||||
pointer-events: none
|
||||
|
||||
|
|
@ -80,7 +83,7 @@
|
|||
margin-bottom: 12px
|
||||
|
||||
@at-root .video-list-item--watched#{&}
|
||||
background: c.$bg-darker
|
||||
background: map.get($_theme, "bg-dim")
|
||||
padding: 4px 4px 0px
|
||||
margin: -4px -4px 8px
|
||||
|
||||
|
|
@ -93,7 +96,7 @@
|
|||
.thumbnail
|
||||
position: relative
|
||||
display: flex
|
||||
background: c.$bg-darkest
|
||||
background: map.get($_theme, "bg-0")
|
||||
|
||||
&__link
|
||||
font-size: 0 // remove whitespace around the image
|
||||
|
|
@ -106,7 +109,7 @@
|
|||
position: absolute
|
||||
bottom: 3px
|
||||
right: 3px
|
||||
color: c.$fg-bright
|
||||
color: #fff
|
||||
font-size: 14px
|
||||
background: rgba(20, 20, 20, 0.85)
|
||||
line-height: 1
|
||||
|
|
@ -119,20 +122,20 @@
|
|||
line-height: 1.2
|
||||
|
||||
.title-link
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
text-decoration: none
|
||||
|
||||
.author-line
|
||||
margin-top: 4px
|
||||
font-size: 15px
|
||||
color: c.$fg-dim
|
||||
color: map.get($_theme, "fg-dim")
|
||||
|
||||
.author
|
||||
color: c.$fg-dim
|
||||
color: map.get($_theme, "fg-dim")
|
||||
text-decoration: none
|
||||
|
||||
&:hover, &:active
|
||||
color: c.$fg-bright
|
||||
color: map.get($_theme, "fg-bright")
|
||||
text-decoration: underline
|
||||
|
||||
@mixin recommendation-item
|
||||
|
|
@ -176,15 +179,15 @@
|
|||
|
||||
.author-line
|
||||
font-size: 15px
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
.author
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
.description
|
||||
margin-top: 16px
|
||||
font-size: 15px
|
||||
color: c.$fg-dim
|
||||
color: map.get($_theme, "fg-dim")
|
||||
|
||||
+dimensions.thin
|
||||
.description
|
||||
|
|
@ -195,7 +198,7 @@
|
|||
|
||||
.description b
|
||||
font-weight: normal
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
|
||||
@mixin channel-video
|
||||
@include large-item
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
@use "colors.sass" as c
|
||||
@use "video-list-item.sass" as *
|
||||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
@use "video-list-item" 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
|
||||
|
|
@ -13,10 +13,25 @@
|
|||
&--recommended-below, &--recommended-hidden
|
||||
grid-template-columns: none
|
||||
|
||||
&--recommended-hidden .related-videos
|
||||
display: none
|
||||
&--recommended-side
|
||||
.related-videos
|
||||
border-left: 1px solid map.get($_theme, "edge-grey")
|
||||
padding-left: 12px
|
||||
padding-right: 20px
|
||||
background-color: map.get($_theme, "bg-4")
|
||||
padding-top: 12px
|
||||
|
||||
&--recommended-below
|
||||
.related-videos
|
||||
padding: 20px
|
||||
|
||||
&--recommended-hidden
|
||||
.related-videos
|
||||
display: none
|
||||
|
||||
.main-video-section
|
||||
padding: 20px
|
||||
|
||||
.video-container
|
||||
text-align: center
|
||||
|
||||
|
|
@ -27,7 +42,7 @@
|
|||
max-height: 80vh
|
||||
|
||||
.stream-notice
|
||||
background: c.$bg-darkest
|
||||
background: map.get($_theme, "bg-0")
|
||||
padding: 4px
|
||||
|
||||
.info
|
||||
|
|
@ -45,15 +60,15 @@
|
|||
margin: 0px 0px 4px
|
||||
font-size: 30px
|
||||
font-weight: normal
|
||||
color: c.$fg-bright
|
||||
color: map.get($_theme, "fg-bright")
|
||||
word-break: break-word
|
||||
|
||||
.author-link
|
||||
color: c.$fg-main
|
||||
color: map.get($_theme, "fg-main")
|
||||
text-decoration: none
|
||||
|
||||
&:hover, &:active
|
||||
color: c.$fg-bright
|
||||
color: map.get($_theme, "fg-bright")
|
||||
text-decoration: underline
|
||||
|
||||
.info-secondary
|
||||
|
|
@ -75,7 +90,7 @@
|
|||
margin: 16px 4px
|
||||
padding: 12px
|
||||
border-radius: 4px
|
||||
background-color: c.$bg-darkest
|
||||
background-color: map.get($_theme, "bg-0")
|
||||
|
||||
&__description
|
||||
margin-left: 12px
|
||||
|
|
@ -85,7 +100,7 @@
|
|||
|
||||
&__script-warning
|
||||
font-size: 15px
|
||||
color: c.$fg-warning
|
||||
color: map.get($_theme, "fg-warning")
|
||||
|
||||
&__buttons
|
||||
display: flex
|
||||
|
|
@ -97,12 +112,12 @@
|
|||
line-height: 1.4
|
||||
word-break: break-word
|
||||
margin: 16px 4px 4px 4px
|
||||
background-color: c.$bg-accent-area
|
||||
background-color: map.get($_theme, "bg-5")
|
||||
padding: 12px
|
||||
border-radius: 4px
|
||||
|
||||
--regular-background: #{c.$bg-accent-area}
|
||||
--highlight-background: #{c.$bg-darker}
|
||||
--regular-background: #{map.get($_theme, "bg-5")}
|
||||
--highlight-background: #{map.get($_theme, "bg-1")}
|
||||
|
||||
.subscribe-form
|
||||
display: inline-block
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
$bg-darkest: #202123
|
||||
$bg-darker: #303336
|
||||
$bg-dark: #36393f
|
||||
$bg-accent: #4f5359
|
||||
$bg-accent-x: #3f4247
|
||||
$bg-accent-area: #44474b
|
||||
|
||||
$fg-bright: #fff
|
||||
$fg-main: #ddd
|
||||
$fg-dim: #bbb
|
||||
$fg-warning: #fdca6d
|
||||
|
||||
$edge-grey: #a0a0a0
|
||||
|
||||
$link: #8ac2f9
|
||||
|
||||
$power-deep: #c62727
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@use "colors.sass" as c
|
||||
|
||||
.takedown-page
|
||||
max-width: 700px
|
||||
margin: 0 auto
|
||||
|
||||
.new-section
|
||||
margin-top: 200px
|
||||
|
||||
.important-section
|
||||
padding: 4px 20px
|
||||
border: 1px solid c.$edge-grey
|
||||
color: c.$fg-bright
|
||||
background-color: c.$bg-darker
|
||||
2
sass/light.sass
Normal file
2
sass/light.sass
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@use "themes/light" as *
|
||||
@use "includes/main" with ($_theme: $theme)
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
@use "includes/colors.sass" as c
|
||||
|
||||
@use "includes/base.sass"
|
||||
@use "sass:selector"
|
||||
@use "includes/video-page.sass"
|
||||
@use "includes/search-page.sass"
|
||||
@use "includes/home-page.sass"
|
||||
@use "includes/channel-page.sass"
|
||||
@use "includes/subscriptions-page.sass"
|
||||
@use "includes/settings-page.sass"
|
||||
@use "includes/cant-think-page.sass"
|
||||
@use "includes/privacy-page.sass"
|
||||
@use "includes/licenses-page.sass"
|
||||
@use "includes/filters-page.sass"
|
||||
@use "includes/takedown-page.sass"
|
||||
@use "includes/forms.sass"
|
||||
@use "includes/nav.sass"
|
||||
@use "includes/footer.sass"
|
||||
|
||||
@font-face
|
||||
font-family: "Bariol"
|
||||
src: url(/static/fonts/bariol.woff?statichash=1)
|
||||
|
||||
.icon-link:hover, .icon-link:focus
|
||||
.icon
|
||||
filter: brightness(2)
|
||||
|
||||
.button-container
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
27
sass/theme-modules/_edgeless.sass
Normal file
27
sass/theme-modules/_edgeless.sass
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
$_theme: () !default
|
||||
|
||||
@use "sass:map"
|
||||
|
||||
// remove separating edges
|
||||
.main-nav, .footer__center, .video-page--recommended-side .related-videos
|
||||
border: none
|
||||
|
||||
// no background change to recommended videos sidebar
|
||||
.video-page--recommended-side .related-videos
|
||||
background-color: map.get($_theme, "bg-2")
|
||||
|
||||
// navigation shadow
|
||||
.main-nav
|
||||
position: relative // needed for box shadow to overlap related videos section
|
||||
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
|
||||
|
||||
// thumbnail dropdown menu dividers
|
||||
.menu-look
|
||||
border-color: map.get($_theme, "bg-0")
|
||||
|
||||
// details areas
|
||||
details, .checkbox-hider__container, .more-settings
|
||||
border: none
|
||||
details[open] summary
|
||||
border: none
|
||||
margin-bottom: 4px
|
||||
38
sass/themes/_dark.scss
Normal file
38
sass/themes/_dark.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// Defined in scss file instead of sass because indented syntax does not have multiline maps
|
||||
// https://github.com/sass/sass/issues/216
|
||||
|
||||
@use "sass:map";
|
||||
|
||||
// This section is for colour shades
|
||||
$theme: (
|
||||
// darker
|
||||
"bg-0": #252628,
|
||||
"bg-1": #303336,
|
||||
// regular
|
||||
"bg-2": #36393f,
|
||||
// lighter
|
||||
"bg-3": #3f4247, // slightly
|
||||
"bg-4": #44474b, // noticably
|
||||
"bg-5": #4f5359, // brightly
|
||||
|
||||
"fg-bright": #fff,
|
||||
"fg-main": #ddd,
|
||||
"fg-dim": #bbb,
|
||||
"fg-warning": #fdca6d,
|
||||
|
||||
"edge-grey": #a0a0a0,
|
||||
"placeholder": #c4c4c4,
|
||||
|
||||
"link": #8ac2f9,
|
||||
|
||||
"power-deep": #c62727,
|
||||
"power-fg": "#fff",
|
||||
|
||||
"image-dropdown": url(/static/images/arrow-down-wide-dark.svg)
|
||||
);
|
||||
|
||||
// This section is for colour meanings
|
||||
$theme: map.merge($theme, (
|
||||
"bg-dim": map.get($theme, "bg-0"),
|
||||
"bg-nav": map.get($theme, "bg-5"),
|
||||
));
|
||||
8
sass/themes/_edgeless-light.scss
Normal file
8
sass/themes/_edgeless-light.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// extend regular light theme to change a couple of shades
|
||||
@use "light";
|
||||
@use "sass:map";
|
||||
|
||||
// this section is for colour meanings
|
||||
$theme: map.merge(light.$theme, (
|
||||
"edge-grey": #c0c0c0,
|
||||
));
|
||||
38
sass/themes/_light.scss
Normal file
38
sass/themes/_light.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// Defined in scss file instead of sass because indented syntax does not have multiline maps
|
||||
// https://github.com/sass/sass/issues/216
|
||||
|
||||
@use "sass:map";
|
||||
|
||||
// this section is for colour shades
|
||||
$theme: (
|
||||
// lighter
|
||||
"bg-0": #fff,
|
||||
"bg-1": #fff,
|
||||
// regular
|
||||
"bg-2": #f2f2f2,
|
||||
// darker
|
||||
"bg-3": #e8e8e8, // slightly
|
||||
"bg-4": #dadada, // noticably
|
||||
"bg-5": #d0d0d0, // brightly
|
||||
|
||||
"fg-bright": #000,
|
||||
"fg-main": #202020,
|
||||
"fg-dim": #454545,
|
||||
"fg-warning": #ce8600,
|
||||
|
||||
"edge-grey": #909090,
|
||||
"placeholder": #636363,
|
||||
|
||||
"link": #0b51d4,
|
||||
|
||||
"power-deep": #c62727,
|
||||
"power-fg": #fff,
|
||||
|
||||
"image-dropdown": url(/static/images/arrow-down-wide-light.svg)
|
||||
);
|
||||
|
||||
// this section is for colour meanings
|
||||
$theme: map.merge($theme, (
|
||||
"bg-dim": map.get($theme, "bg-4"),
|
||||
"bg-nav": map.get($theme, "bg-0")
|
||||
));
|
||||
Loading…
Add table
Add a link
Reference in a new issue