1
0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2024-11-14 04:17:29 +00:00
cloudtube/sass/main.sass

116 lines
2.1 KiB
Sass
Raw Normal View History

2020-08-22 13:17:31 +00:00
@use "includes/base.sass"
@use "includes/colors.sass" as c
@use "sass:selector"
@use "includes/video-page.sass"
2020-08-24 10:43:55 +00:00
@use "includes/search-page.sass"
@use "includes/home-page.sass"
2020-08-29 13:21:48 +00:00
@use "includes/channel-page.sass"
2020-08-30 15:14:05 +00:00
@use "includes/subscriptions-page.sass"
2020-08-31 13:22:16 +00:00
@use "includes/settings-page.sass"
@use "includes/forms.sass"
2020-08-22 13:17:31 +00:00
@font-face
font-family: "Bariol"
2020-08-30 15:14:05 +00:00
src: url(/static/fonts/bariol.woff?statichash=1)
2020-08-22 13:17:31 +00:00
@mixin button-base
2020-08-31 13:22:16 +00:00
-webkit-appearance: none
2020-08-22 13:17:31 +00:00
-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")}
2020-08-31 13:22:16 +00:00
padding: 8px 27px 8px 8px
2020-08-22 13:17:31 +00:00
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
@at-root #{selector.unify(&, "a")}
padding: 7px 8px
2020-08-31 13:22:16 +00:00
@at-root #{selector.unify(&, "button")}
cursor: pointer
2020-08-22 13:17:31 +00:00
.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
2020-08-24 10:43:55 +00:00
.base-border-look
@include border-button
2020-08-22 13:17:31 +00:00
.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
2020-08-30 15:14:05 +00:00
display: flex
align-items: center
2020-08-22 13:17:31 +00:00
&.home
font-weight: bold
&, &:visited
color: #fff
&:focus, &:hover
background-color: c.$bg-accent-x
2020-08-24 10:43:55 +00:00
.search-form
display: flex
2020-08-22 13:17:31 +00:00
flex: 1
2020-08-24 10:43:55 +00:00
align-items: center
.search
@include button-bg
padding: 10px
flex: 1
margin: 1px
2020-08-22 13:17:31 +00:00
2020-08-24 10:43:55 +00:00
&:hover, &:focus
border: 1px solid c.$edge-grey
margin: 0px
2020-08-30 15:14:05 +00:00
2020-08-31 13:22:16 +00:00
.icon-link:hover, .icon-link:focus
.icon
2020-08-30 15:14:05 +00:00
filter: brightness(2)
2020-08-31 13:22:16 +00:00
.button-container
display: flex