fix(style): donation button qrcode not displaying
parent
348eb7ca70
commit
1346e306e1
|
@ -139,9 +139,9 @@ Icarus directly import stylesheets from the [highlight.js](https://highlightjs.o
|
||||||
<th>Kimbie Dark</th>
|
<th>Kimbie Dark</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/atom-one-light.png?1"></td>
|
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/atom-one-light.png?2"></td>
|
||||||
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/monokai.png?1"></td>
|
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/monokai.png?2"></td>
|
||||||
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/kimbie-dark.png"></td>
|
<td><img width="266" src="https://ppoffice.github.io/hexo-theme-icarus/gallery/code-highlight/kimbie-dark.png?2"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
|
bulma-stylus-root = '../../../../node_modules/bulma-stylus/stylus'
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Override Bulma CSS Framework
|
* Override Bulma CSS Framework
|
||||||
|
@ -6,8 +6,8 @@ bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
|
||||||
$body-size ?= 14px
|
$body-size ?= 14px
|
||||||
$body-background-color ?= #f7f7f7
|
$body-background-color ?= #f7f7f7
|
||||||
|
|
||||||
$family-sans-serif ?= Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif
|
$family-sans-serif ?= Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
|
||||||
$family-code ?= "Source Code Pro", monospace, "Microsoft YaHei"
|
$family-code ?= 'Source Code Pro', monospace, 'Microsoft YaHei'
|
||||||
|
|
||||||
$primary ?= $blue
|
$primary ?= $blue
|
||||||
$custom-colors ?= {
|
$custom-colors ?= {
|
||||||
|
@ -43,18 +43,18 @@ $content-heading-weight ?= $weight-normal
|
||||||
$logo-height ?= 1.75rem
|
$logo-height ?= 1.75rem
|
||||||
|
|
||||||
// FIXME: https://github.com/groenroos/bulma-stylus/issues/11
|
// FIXME: https://github.com/groenroos/bulma-stylus/issues/11
|
||||||
@import bulma-stylus-root + "/utilities/initial-variables"
|
@import bulma-stylus-root + '/utilities/initial-variables'
|
||||||
@import bulma-stylus-root + "/utilities/functions"
|
@import bulma-stylus-root + '/utilities/functions'
|
||||||
@import bulma-stylus-root + "/utilities/derived-variables"
|
@import bulma-stylus-root + '/utilities/derived-variables'
|
||||||
|
|
||||||
$colors = merge($colors, $custom-colors)
|
$colors = merge($colors, $custom-colors)
|
||||||
|
|
||||||
@import bulma-stylus-root + "/utilities/animations"
|
@import bulma-stylus-root + '/utilities/animations'
|
||||||
@import bulma-stylus-root + "/utilities/mixins"
|
@import bulma-stylus-root + '/utilities/mixins'
|
||||||
@import bulma-stylus-root + "/utilities/controls"
|
@import bulma-stylus-root + '/utilities/controls'
|
||||||
@import bulma-stylus-root + "/base/_all"
|
@import bulma-stylus-root + '/base/_all'
|
||||||
@import bulma-stylus-root + "/components/_all"
|
@import bulma-stylus-root + '/components/_all'
|
||||||
@import bulma-stylus-root + "/elements/_all"
|
@import bulma-stylus-root + '/elements/_all'
|
||||||
@import bulma-stylus-root + "/form/_all"
|
@import bulma-stylus-root + '/form/_all'
|
||||||
@import bulma-stylus-root + "/grid/_all"
|
@import bulma-stylus-root + '/grid/_all'
|
||||||
@import bulma-stylus-root + "/layout/_all"
|
@import bulma-stylus-root + '/layout/_all'
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* Card
|
* Card
|
||||||
* --------------------------------- */
|
* --------------------------------- */
|
||||||
.card
|
.card
|
||||||
overflow: hidden
|
overflow: visible
|
||||||
border-radius: $card-radius
|
border-radius: $card-radius
|
||||||
|
|
||||||
& + .card, & + .column-right-shadow
|
& + .card, & + .column-right-shadow
|
||||||
|
|
|
@ -7,18 +7,39 @@ $shadow ?= none
|
||||||
$radius ?= 0
|
$radius ?= 0
|
||||||
$radius-small ?= 0
|
$radius-small ?= 0
|
||||||
// base colors
|
// base colors
|
||||||
$white ?= #cdcdcd
|
$white ?= #fff
|
||||||
$red ?= #ff003c
|
$white-bis ?= #cdcdcd
|
||||||
$yellow ?= #fcee09
|
$grey ?= #848484
|
||||||
$blue ?= #02d7f2
|
|
||||||
$black ?= #000
|
$black ?= #000
|
||||||
$black-bis ?= #050a0e
|
$black-bis ?= #050a0e
|
||||||
|
$orange ?= #ff8e3c
|
||||||
|
$yellow ?= #fcee09
|
||||||
|
$green ?= #00ff41
|
||||||
|
$blue ?= #02d7f2
|
||||||
|
$purple ?= #9561d2
|
||||||
|
$red ?= #ff003c
|
||||||
|
$primary ?= $yellow
|
||||||
|
$info ?= $blue
|
||||||
|
$success ?= $green
|
||||||
|
$warning ?= $orange
|
||||||
|
$danger ?= $red
|
||||||
|
// invert colors
|
||||||
|
$orange-invert ?= #121617
|
||||||
|
$yellow-invert ?= #121617
|
||||||
|
$green-invert ?= #121617
|
||||||
|
$blue-invert ?= #121617
|
||||||
|
$purple-invert ?= #121617
|
||||||
|
$red-invert ?= #121617
|
||||||
|
$primary-invert ?= #121617
|
||||||
|
$info-invert ?= #121617
|
||||||
|
$success-invert ?= #121617
|
||||||
|
$warning-invert ?= #121617
|
||||||
|
$danger-invert ?= #121617
|
||||||
// derived colors
|
// derived colors
|
||||||
$scheme-main ?= $black
|
$scheme-main ?= $black
|
||||||
$primary ?= $yellow
|
|
||||||
$link ?= $blue
|
$link ?= $blue
|
||||||
$link-hover ?= $primary
|
$link-hover ?= $primary
|
||||||
$text ?= $white
|
$text ?= $white-bis
|
||||||
$text-strong ?= $yellow
|
$text-strong ?= $yellow
|
||||||
$body-background-color ?= $scheme-main
|
$body-background-color ?= $scheme-main
|
||||||
$input-color ?= $text
|
$input-color ?= $text
|
||||||
|
@ -34,6 +55,7 @@ $navbar-item-margin-v ?= 1.25rem
|
||||||
$navbar-item-margin-h ?= .25rem
|
$navbar-item-margin-h ?= .25rem
|
||||||
$navbar-item-padding-v ?= 0
|
$navbar-item-padding-v ?= 0
|
||||||
$navbar-item-padding-h ?= .5rem
|
$navbar-item-padding-h ?= .5rem
|
||||||
|
$card-background-color ?= transparent
|
||||||
$menu-label-color ?= $blue
|
$menu-label-color ?= $blue
|
||||||
$menu-item-hover-color ?= $black
|
$menu-item-hover-color ?= $black
|
||||||
$menu-item-hover-background-color ?= $yellow
|
$menu-item-hover-background-color ?= $yellow
|
||||||
|
@ -41,7 +63,7 @@ $menu-list-border-left ?= 1px solid $text
|
||||||
$tag-color ?= $black
|
$tag-color ?= $black
|
||||||
$tag-background-color ?= $blue
|
$tag-background-color ?= $blue
|
||||||
$timeline-fg-line ?= $blue
|
$timeline-fg-line ?= $blue
|
||||||
$post-navigation-fg ?= $white
|
$post-navigation-fg ?= $white-bis
|
||||||
$searchbox-bg-container ?= $black-bis
|
$searchbox-bg-container ?= $black-bis
|
||||||
$searchbox-border ?= $blue
|
$searchbox-border ?= $blue
|
||||||
$searchbox-bg-input ?= $black-bis
|
$searchbox-bg-input ?= $black-bis
|
||||||
|
@ -66,6 +88,18 @@ cut-corner-bottom-left(size)
|
||||||
cut-corner-bottom-right(size)
|
cut-corner-bottom-right(size)
|
||||||
clip-path: unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)')
|
clip-path: unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)')
|
||||||
|
|
||||||
|
undercover-before()
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
z-index: -1
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
|
||||||
body
|
body
|
||||||
counter-reset: card
|
counter-reset: card
|
||||||
|
|
||||||
|
@ -74,14 +108,13 @@ body
|
||||||
background: $blue
|
background: $blue
|
||||||
|
|
||||||
.card:not(#back-to-top)
|
.card:not(#back-to-top)
|
||||||
overflow: visible
|
position: relative
|
||||||
counter-increment: card
|
counter-increment: card
|
||||||
|
|
||||||
&:before, &:after
|
&, .card-content
|
||||||
position: absolute
|
undercover-before()
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
content: ''
|
|
||||||
top: -1.2px
|
top: -1.2px
|
||||||
left: -1.2px
|
left: -1.2px
|
||||||
right: -1.2px
|
right: -1.2px
|
||||||
|
@ -91,6 +124,7 @@ body
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
content: 'R' counter(card)
|
content: 'R' counter(card)
|
||||||
|
position: absolute
|
||||||
color: $blue
|
color: $blue
|
||||||
right: 2rem
|
right: 2rem
|
||||||
bottom: -.6em
|
bottom: -.6em
|
||||||
|
@ -98,23 +132,63 @@ body
|
||||||
padding: 0 .25em
|
padding: 0 .25em
|
||||||
background: $body-background-color
|
background: $body-background-color
|
||||||
|
|
||||||
.card-image, .card-content
|
.card-image
|
||||||
cut-corner-top-right(16px)
|
cut-corner-top-right(16px)
|
||||||
|
|
||||||
.card-content
|
.card-content:before
|
||||||
background-color: $body-background-color
|
background-color: $body-background-color
|
||||||
cut-corner-reverse(16px)
|
cut-corner-reverse(16px)
|
||||||
|
|
||||||
.card-image + .card-content
|
.card-image + .card-content:before
|
||||||
cut-corner-bottom-left(16px)
|
cut-corner-bottom-left(16px)
|
||||||
|
|
||||||
.button
|
.button:not(input)
|
||||||
border: none
|
border: none
|
||||||
outline: none
|
outline: none
|
||||||
cut-corner(8px)
|
background: transparent !important
|
||||||
|
undercover-before()
|
||||||
|
|
||||||
&.is-primary
|
&:before
|
||||||
border-radius: 0 !important
|
cut-corner(8px)
|
||||||
|
|
||||||
|
// clip-path will cut off overflown content inside a button
|
||||||
|
// thus we need to use :before pseudo-element to style the buttons
|
||||||
|
for $name, $pair in $colors
|
||||||
|
$color = $pair['1']
|
||||||
|
$color-invert = $pair['2']
|
||||||
|
|
||||||
|
&.is-{$name}
|
||||||
|
&:before
|
||||||
|
background-color: $color
|
||||||
|
color: $color-invert
|
||||||
|
|
||||||
|
&:hover:before, &.is-hovered:before
|
||||||
|
background-color: darken($color, 2.5%)
|
||||||
|
color: $color-invert
|
||||||
|
|
||||||
|
&:focus:before, &.is-focused:before
|
||||||
|
color: $color-invert
|
||||||
|
|
||||||
|
&:active:before, &.is-active:before
|
||||||
|
background-color: darken($color, 5%)
|
||||||
|
color: $color-invert
|
||||||
|
|
||||||
|
&[disabled]:before, fieldset[disabled] &:before
|
||||||
|
background-color: $color
|
||||||
|
|
||||||
|
&.is-inverted
|
||||||
|
&:before
|
||||||
|
background-color: $color-invert
|
||||||
|
color: $color
|
||||||
|
|
||||||
|
&:hover:before, &.is-hovered:before
|
||||||
|
background-color: darken($color-invert, 5%)
|
||||||
|
|
||||||
|
&[disabled]:before, fieldset[disabled] &:before
|
||||||
|
background-color: $color-invert
|
||||||
|
border-color: transparent
|
||||||
|
box-shadow: none
|
||||||
|
color: $color
|
||||||
|
|
||||||
.field.has-addons
|
.field.has-addons
|
||||||
.control:not(:first-child)
|
.control:not(:first-child)
|
||||||
|
@ -153,7 +227,7 @@ body
|
||||||
background: url('../img/razor-top-black.svg') repeat-x top
|
background: url('../img/razor-top-black.svg') repeat-x top
|
||||||
height: 40px
|
height: 40px
|
||||||
|
|
||||||
.navbar-start
|
.navbar-menu
|
||||||
.navbar-item
|
.navbar-item
|
||||||
&:hover, &.is-active
|
&:hover, &.is-active
|
||||||
color: $navbar-background-color
|
color: $navbar-background-color
|
||||||
|
|
Loading…
Reference in New Issue