hexo-theme-amane/source/css/cyberpunk.styl

@import url(hexo-config('@fontface.cyberpunk'))

$family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
$family-code ?= 'Roboto Mono', monospace, 'Microsoft YaHei'
// shadow and radius
$shadow ?= none
$radius ?= 0
$radius-small ?= 0
// base colors
$white ?= #cdcdcd
$red ?= #ff003c
$yellow ?= #fcee09
$blue ?= #02d7f2
$black ?= #000
$black-bis ?= #050a0e
// derived colors
$scheme-main ?= $black
$primary ?= $yellow
$link ?= $blue
$link-hover ?= $primary
$text ?= $white
$text-strong ?= $yellow
$body-background-color ?= $scheme-main
$input-color ?= $text
$input-placeholder-color ?= rgba($input-color, .8)
$footer-color ?= $black
$footer-background-color ?= $yellow
$navbar-background-color ?= $yellow
$navbar-item-color ?= $black
$navbar-item-active-color ?= $black
$navbar-item-hover-color ?= $black
$navbar-item-hover-background-color ?= transparent
$navbar-item-margin-v ?= 1.25rem
$navbar-item-margin-h ?= .25rem
$navbar-item-padding-v ?= 0
$navbar-item-padding-h ?= .5rem
$menu-label-color ?= $blue
$menu-item-hover-color ?= $black
$menu-item-hover-background-color ?= $yellow
$menu-list-border-left ?= 1px solid $text
$tag-color ?= $black
$tag-background-color ?= $blue
$timeline-fg-line ?= $blue
$post-navigation-fg ?= $white
$searchbox-bg-container ?= $black-bis
$searchbox-border ?= $blue
$searchbox-bg-input ?= $black-bis
$searchbox-bg-close-hover ?= $black
$searchbox-bg-close-active ?= $searchbox-bg-close-hover
$searchbox-bg-result-item-hover ?= $black

@import 'style'

cut-corner(size)
    clip-path: unquote('polygon(' + size + ' 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%, 0 ' + size + ')')

cut-corner-reverse(size)
    clip-path: unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '), 0 0)')

cut-corner-top-right(size)
    clip-path: unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, 0 100%)')

cut-corner-bottom-left(size)
    clip-path: unquote('polygon(0 0, 100% 0, 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '))')

cut-corner-bottom-right(size)
    clip-path: unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)')

body
    counter-reset: card

::selection
    color: $black
    background: $blue

.card:not(#back-to-top)
    overflow: visible
    counter-increment: card

    &:before, &:after
        position: absolute

    &:before
        content: ''
        top: -1.2px
        left: -1.2px
        right: -1.2px
        bottom: -1.2px
        background-color: $blue
        cut-corner-reverse(16px)

    &:after
        content: 'R' counter(card)
        color: $blue
        right: 2rem
        bottom: -.6em
        font-size: .75rem
        padding: 0 .25em
        background: $body-background-color

    .card-image, .card-content
        cut-corner-top-right(16px)

    .card-content
        background-color: $body-background-color
        cut-corner-reverse(16px)

    .card-image + .card-content
        cut-corner-bottom-left(16px)

.button
    border: none
    outline: none
    cut-corner(8px)

    &.is-primary
        border-radius: 0 !important

.field.has-addons
    .control:not(:first-child)
        .button
            cut-corner-bottom-right(8px)

.menu-list a
    cut-corner(8px)

.tags.has-addons
    .tag:first-child
        background: $yellow !important

    .tag:last-child
        background: $blue !important

.pagination-previous, .pagination-next, .pagination-link
    cut-corner(8px)

    &:hover
        background-color: $blue

        &, a
            color: $black

.navbar-main
    padding-top: 10px
    padding-bottom: 30px

    &:after
        content: ''
        position: absolute
        left: 0
        right: 0
        bottom: -2px
        background: url('../img/razor-top-black.svg') repeat-x top
        height: 40px

    .navbar-start
        .navbar-item
            &:hover, &.is-active
                color: $navbar-background-color
                background-color: $body-background-color !important

article.article, article.media
    .title a
        background-image: linear-gradient(transparent calc(100% - 2px), $text-strong 2px)
        background-repeat: no-repeat
        background-size: 0 100%
        transition: background-size .25s ease-in-out

    .title:hover a
        background-size: 100% 100%

article.article
    .article-more
        @extend .button.is-link

.content
    blockquote
        background: transparent
        border: .5px solid $blue
        border-left: 5px solid $blue

.footer
    position: relative

    &:before
        content: ''
        position: absolute
        left: 0
        right: 0
        top: -1px
        height: 39px
        background: url('../img/razor-bottom-black.svg') repeat-x top

    & > .container
        padding-top: 40px

.timeline .media
    &:before
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)

.searchbox .searchbox-container
    border: 1px solid $blue

    .searchbox-body
        border-bottom: 1px solid $searchbox-border

        li:last-child .searchbox-result-section
            border-bottom: none

    .searchbox-result-item
        em
            color: $black

#back-to-top
    color: $black
    background: $blue
    margin-top: 45px
    cut-corner(8px)