cloudtube/sass/includes/_base.sass

93 lines
1.6 KiB
Sass

$_theme: () !default
@use "sass:map"
body
background-color: map.get($_theme, "bg-2")
color: map.get($_theme, "fg-main")
font-family: "Bariol", sans-serif
font-size: 18px
margin: 0
padding: 0
// for footer alignment
min-height: 100vh
display: flex
flex-direction: column
a
color: map.get($_theme, "link")
pre, code
font-size: 0.88em
code
background: map.get($_theme, "bg-1")
padding: 3px 5px
border-radius: 4px
input, select, button
font-family: inherit
font-size: 16px
min-width: 0px
button
cursor: pointer
::placeholder
color: map.get($_theme, "placeholder")
opacity: 1
// focus section
:focus
outline: none
:-moz-focusring
outline: none
::-moz-focus-inner
border: 0
select:-moz-focusring
color: transparent
text-shadow: 0 0 0 map.get($_theme, "fg-bright")
body.show-focus
a, select, button, input, video, summary
&:focus
outline: 2px dotted map.get($_theme, "fg-main")
video
background-color: black
details
background-color: map.get($_theme, "bg-3")
padding: 12px
border: 1px solid map.get($_theme, "edge-grey")
border-radius: 8px
summary
cursor: pointer
line-height: 1
margin-bottom: 0
user-select: none
color: map.get($_theme, "fg-main")
&[open] summary
padding-bottom: 12px
border-bottom: 1px solid map.get($_theme, "edge-grey")
margin-bottom: 8px
table
background-color: map.get($_theme, "bg-1")
table, td, th
border: 1px solid map.get($_theme, "edge-grey")
border-collapse: collapse
td, th
padding: 4px 8px
thead, tr:nth-child(even)
background-color: map.get($_theme, "bg-0")