mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-14 12:27:28 +00:00
100 lines
1.8 KiB
Sass
100 lines
1.8 KiB
Sass
@use "includes/base.sass"
|
|
@use "includes/colors.sass" as c
|
|
@use "sass:selector"
|
|
@use "includes/video-page.sass"
|
|
@use "includes/search-page.sass"
|
|
@use "includes/home-page.sass"
|
|
|
|
@font-face
|
|
font-family: "Bariol"
|
|
src: url(/static/fonts/bariol.woff)
|
|
|
|
@mixin button-base
|
|
appearance: none
|
|
-moz-appearance: none
|
|
color: c.$fg-bright
|
|
border: none
|
|
border-radius: 4px
|
|
padding: 8px
|
|
margin: 0
|
|
text-decoration: none
|
|
line-height: 1.25
|
|
|
|
@at-root #{selector.unify(&, "select")}
|
|
padding: 7px 27px 7px 8px
|
|
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
|
|
|
|
@at-root #{selector.unify(&, "a")}
|
|
padding: 7px 8px
|
|
|
|
.button-icon
|
|
position: relative
|
|
top: 3px
|
|
margin-right: 8px
|
|
margin-left: 2px
|
|
|
|
@mixin button-bg
|
|
@include button-base
|
|
|
|
background-color: c.$bg-accent-x
|
|
|
|
@mixin border-button
|
|
@include button-bg
|
|
|
|
border: 1px solid c.$edge-grey
|
|
|
|
@mixin button-size
|
|
margin: 4px
|
|
font-size: 16px
|
|
|
|
@mixin button-hover
|
|
&:hover
|
|
background-color: c.$bg-accent
|
|
|
|
&:active
|
|
background-color: c.$bg-dark
|
|
|
|
.base-border-look
|
|
@include border-button
|
|
|
|
.border-look
|
|
@include border-button
|
|
@include button-size
|
|
@include button-hover
|
|
|
|
.main-nav
|
|
background-color: c.$bg-accent
|
|
display: flex
|
|
padding: 8px
|
|
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
|
|
|
|
.link
|
|
@include button-base
|
|
text-decoration: none
|
|
margin: 1px 8px 1px 0px
|
|
font-size: 20px
|
|
|
|
&.home
|
|
font-weight: bold
|
|
|
|
&, &:visited
|
|
color: #fff
|
|
|
|
&:focus, &:hover
|
|
background-color: c.$bg-accent-x
|
|
|
|
.search-form
|
|
display: flex
|
|
flex: 1
|
|
align-items: center
|
|
|
|
.search
|
|
@include button-bg
|
|
padding: 10px
|
|
flex: 1
|
|
margin: 1px
|
|
|
|
&:hover, &:focus
|
|
border: 1px solid c.$edge-grey
|
|
margin: 0px
|