151 lines
2.5 KiB
Sass
151 lines
2.5 KiB
Sass
@mixin prefers-dark
|
|
@media (prefers-color-scheme: dark)
|
|
@content
|
|
|
|
@mixin desktop
|
|
@media screen and (min-width: 520px)
|
|
@content
|
|
|
|
:root
|
|
--bg-primary: #fcf5f4
|
|
--bg-secondary: #e9e1df
|
|
--bg-tertiary: #cec8c6
|
|
--fg-header: #000
|
|
--fg-primary: #181818
|
|
--fg-dim: #646464
|
|
--fg-link: #2664b5
|
|
--edge-mark: #aaa
|
|
--edge-table: #333
|
|
|
|
@include prefers-dark
|
|
--bg-primary: #232323
|
|
--bg-secondary: #191919
|
|
--bg-tertiary: #383838
|
|
--fg-header: #fff
|
|
--fg-primary: #d9d9d9
|
|
--fg-dim: #828282
|
|
--fg-link: #529ef5
|
|
--edge-mark: #555
|
|
--edge-table: #aaa
|
|
|
|
body
|
|
background-color: var(--bg-primary)
|
|
color: var(--fg-primary)
|
|
font-size: 20px
|
|
margin: 0
|
|
padding: 8px
|
|
font-family: sans-serif
|
|
|
|
a, a:visited
|
|
color: var(--fg-link)
|
|
|
|
noscript
|
|
display: block
|
|
|
|
mark
|
|
background-color: var(--bg-tertiary)
|
|
color: var(--fg-primary)
|
|
padding: 3px 5px
|
|
border-radius: 4px
|
|
border: 1px solid var(--edge-mark)
|
|
|
|
table, td, th
|
|
border: 1px solid var(--edge-table)
|
|
border-collapse: collapse
|
|
|
|
td, th
|
|
padding: 4px 8px
|
|
|
|
thead, tr:nth-child(even)
|
|
background-color: var(--bg-secondary)
|
|
|
|
footer
|
|
font-size: 16px
|
|
text-align: center
|
|
max-width: 500px
|
|
margin: 40px auto
|
|
|
|
.banner
|
|
display: grid
|
|
grid-gap: 24px
|
|
align-items: center
|
|
justify-items: center
|
|
justify-content: center
|
|
padding: 20px
|
|
|
|
@include desktop
|
|
grid-template-columns: 80px auto
|
|
|
|
.logo
|
|
width: 80px
|
|
height: 80px
|
|
background-size: contain
|
|
background-image: url(static("/assets/img/invidious-logo-light.svg"))
|
|
|
|
@include prefers-dark
|
|
background-image: url(static("/assets/img/invidious-logo-dark.svg"))
|
|
|
|
h1
|
|
color: var(--fg-header)
|
|
font-size: 56px
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.story
|
|
margin: 40px 0px
|
|
text-align: center
|
|
|
|
@include desktop
|
|
white-space: pre-line
|
|
|
|
.instances-table, .js-license-table
|
|
display: flex
|
|
justify-content: center
|
|
|
|
table
|
|
width: 100%
|
|
max-width: 700px
|
|
|
|
.instances-list
|
|
text-align: center
|
|
|
|
.list
|
|
margin: 0 auto
|
|
padding-left: 1em
|
|
text-align: left
|
|
max-width: max-content
|
|
|
|
.loading-td
|
|
text-align: center
|
|
padding: 20px
|
|
background-color: var(--bg-secondary)
|
|
|
|
.column-center
|
|
text-align: center
|
|
|
|
.health-unknown
|
|
color: var(--fg-dim)
|
|
|
|
.script-warning
|
|
margin: 0 auto
|
|
max-width: max-content
|
|
background: #700
|
|
color: #fff
|
|
padding: 4px 20px
|
|
border-radius: 8px
|
|
border: 1px solid
|
|
|
|
.footer-link-list
|
|
margin: 0
|
|
padding: 0
|
|
justify-content: center
|
|
display: flex
|
|
list-style-type: none
|
|
white-space: pre-wrap
|
|
|
|
li:not(:first-child)::before
|
|
content: " • "
|
|
display: inline
|