mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Use var() notation
This commit is contained in:
Jeremy Thomas
parent
867a306fc3
commit
6b09dcfcf0
@ -45,7 +45,7 @@ $book-beige: #FFEDD7
|
||||
|
||||
.bd-book-content
|
||||
@extend %bd-box
|
||||
box-shadow: 0 3rem 3rem -1rem rgba($scheme-invert, 0.2)
|
||||
box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}-scheme-invert), 0.2)
|
||||
max-width: 520px
|
||||
padding: 3rem
|
||||
|
||||
@ -98,7 +98,7 @@ $book-beige: #FFEDD7
|
||||
|
||||
.bd-book-modal-background
|
||||
+overlay
|
||||
background-color: rgba($scheme-invert, 0.86)
|
||||
background-color: rgba(var(--#{$prefix}-scheme-invert), 0.86)
|
||||
|
||||
.bd-book-modal
|
||||
.bd-book-modal-background,
|
||||
@ -153,7 +153,7 @@ $book-beige: #FFEDD7
|
||||
.bd-book-inline-cover
|
||||
display: none
|
||||
.bd-book-modal-column
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
position: relative
|
||||
&.bd-is-cover
|
||||
align-items: center
|
||||
|
||||
@ -70,11 +70,11 @@ $bootstrap-invert: #fff
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
.bd-is-empty
|
||||
background-color: $background
|
||||
color: $text-light
|
||||
background-color: var(--#{$prefix}-background)
|
||||
color: var(--#{$prefix}-text-light)
|
||||
.bd-is-unique
|
||||
background-color: rgba($green, 0.25)
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
font-weight: $weight-bold
|
||||
|
||||
.bd-bootstrap-comparison-header
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
.default-ad
|
||||
background-color: rgba(black, 0.3)
|
||||
border-radius: 2px
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
display: inline-block
|
||||
font-size: 10px
|
||||
font-weight: bold
|
||||
@ -16,10 +16,10 @@
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
& > a
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)
|
||||
color: $text
|
||||
box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px rgba(var(--#{$prefix}-scheme-invert), 0.1)
|
||||
color: var(--#{$prefix}-text)
|
||||
display: block
|
||||
line-height: 1.375
|
||||
margin-top: 15px
|
||||
@ -29,9 +29,9 @@
|
||||
position: relative
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px $link
|
||||
box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}-link)
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
|
||||
box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}-scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}-link)
|
||||
span
|
||||
display: block
|
||||
.default-image
|
||||
@ -46,7 +46,7 @@
|
||||
height: 40px
|
||||
width: 40px
|
||||
.default-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
display: inline
|
||||
font-weight: $weight-bold
|
||||
&::after
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.bd-callout
|
||||
+block
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}-background)
|
||||
border-radius: $radius
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
position: relative
|
||||
|
||||
@ -164,7 +164,7 @@ $structure-invert: $danger-invert
|
||||
position: relative
|
||||
&::before
|
||||
+overlay
|
||||
background: rgba($scheme-invert, 0.7)
|
||||
background: rgba(var(--#{$prefix}-scheme-invert), 0.7)
|
||||
background: $background
|
||||
border: 1px solid $border
|
||||
content: ""
|
||||
@ -193,7 +193,7 @@ $structure-invert: $danger-invert
|
||||
.bd-expand
|
||||
background: none
|
||||
border: none
|
||||
color: $text
|
||||
color: var(--#{$prefix}-text)
|
||||
cursor: pointer
|
||||
font-size: 0.625rem
|
||||
outline: none
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.bd-expo
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-website
|
||||
@ -31,7 +31,7 @@
|
||||
transition: opacity 200ms $easing
|
||||
|
||||
.bd-website-overlay
|
||||
background-color: $scheme-invert
|
||||
background-color: var(--#{$prefix}-scheme-invert)
|
||||
opacity: 0
|
||||
transition: opacity 200ms $easing
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.bd-footer-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
font-size: 1.25rem
|
||||
line-height: 1.25
|
||||
margin-bottom: 0.5rem
|
||||
@ -9,7 +9,7 @@
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.bd-footer-subtitle
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
margin-top: -0.5rem
|
||||
transition-duration: $speed
|
||||
transition-property: color
|
||||
@ -29,7 +29,7 @@
|
||||
width: 100%
|
||||
|
||||
.bd-footer-tsp
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
margin-top: 1.5rem
|
||||
|
||||
%bd-footer-box
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
.bd-footer-support
|
||||
@extend %bd-footer-box
|
||||
border-top: 2px solid $scheme-main-ter
|
||||
border-top: 2px solid var(--#{$prefix}-scheme-main-ter)
|
||||
box-shadow: none
|
||||
padding: 3rem
|
||||
.bd-footer-title
|
||||
@ -63,7 +63,7 @@
|
||||
padding: 0.75rem 1.5rem
|
||||
|
||||
.bd-footer-donation-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
margin-bottom: 0.5rem
|
||||
strong
|
||||
color: currentColor
|
||||
@ -103,11 +103,11 @@ $star-figure-height: 156px
|
||||
+tablet
|
||||
width: calc(33.3333% - 2rem)
|
||||
&:hover
|
||||
box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1)
|
||||
box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}-scheme-invert), 0.1)
|
||||
transform: translateY(-0.5rem)
|
||||
.bd-footer-title,
|
||||
.bd-footer-subtitle
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
&.bd-is-expo,
|
||||
&.bd-is-love
|
||||
padding-bottom: $star-figure-height
|
||||
@ -144,10 +144,10 @@ $star-figure-height: 156px
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
|
||||
.bd-footer-link-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
font-size: 1.25rem
|
||||
font-weight: $weight-semibold
|
||||
&:not(:first-child)
|
||||
@ -158,7 +158,7 @@ $star-figure-height: 156px
|
||||
&.bd-is-more
|
||||
font-size: 0.875rem
|
||||
a:not(:hover)
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
&.bd-has-subtitle
|
||||
a
|
||||
align-items: center
|
||||
@ -174,7 +174,7 @@ $star-figure-height: 156px
|
||||
font-style: normal
|
||||
&:not(:hover)
|
||||
em
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
+mobile
|
||||
flex-wrap: wrap
|
||||
margin-top: 1rem
|
||||
|
||||
@ -16,10 +16,10 @@ svg
|
||||
strong
|
||||
color: currentColor
|
||||
a
|
||||
border-bottom: 1px solid rgba($scheme-main, 0.5)
|
||||
border-bottom: 1px solid rgba(var(--#{$prefix}-scheme-main), 0.5)
|
||||
padding-bottom: 2px
|
||||
&:hover
|
||||
border-bottom-color: $scheme-main
|
||||
border-bottom-color: var(--#{$prefix}-scheme-main)
|
||||
span
|
||||
margin: 0 0.25em
|
||||
opacity: 0.5
|
||||
@ -99,8 +99,8 @@ $carbon-poweredby-height: 20px
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $scheme-main
|
||||
box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}-scheme-main)
|
||||
+tablet
|
||||
width: $carbon-width
|
||||
|
||||
@ -138,20 +138,20 @@ $carbon-poweredby-height: 20px
|
||||
width: $carbon-image-width
|
||||
&:hover
|
||||
& + .carbon-text
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
&:active
|
||||
opacity: 0.8
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
line-height: 20px
|
||||
min-height: $carbon-height
|
||||
padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
display: inline
|
||||
font-size: $size-small
|
||||
line-height: $carbon-poweredby-height
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
&:hover
|
||||
background: $github
|
||||
border-color: $github
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
.bd-tw-button
|
||||
background-color: $twitter
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
border-color: transparent !important
|
||||
&:hover
|
||||
background-color: darken($twitter, 2.5%)
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: darken($twitter, 5%)
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
#moreDropdown
|
||||
.navbar-item
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.highlight
|
||||
background-color: $pre-background
|
||||
background-color: var(--#{$prefix}-pre-background)
|
||||
border-radius: $radius-large
|
||||
color: #586e75
|
||||
pre
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
&:hover
|
||||
color: $blue
|
||||
strong
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
.title
|
||||
strong
|
||||
color: $primary
|
||||
.subtitle
|
||||
color: $border-hover !important
|
||||
color: var(--#{$prefix}-border-hover) !important
|
||||
strong
|
||||
color: currentColor
|
||||
&:not(:last-child)
|
||||
@ -41,7 +41,7 @@
|
||||
margin-right: auto
|
||||
|
||||
.bd-index-custom-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
|
||||
.bd-index-custom-example
|
||||
padding: 1rem
|
||||
@ -77,28 +77,28 @@
|
||||
.button
|
||||
&.is-primary
|
||||
background-color: $mauve
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
&:hover
|
||||
background-color: darken($mauve, 2.5%)
|
||||
&:active
|
||||
background-color: darken($mauve, 5%)
|
||||
&.is-link
|
||||
background-color: $pink
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
&:hover
|
||||
background-color: darken($pink, 2.5%)
|
||||
&:active
|
||||
background-color: darken($pink, 5%)
|
||||
+selection
|
||||
background-color: $pink
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
// Fullscreen
|
||||
|
||||
.bd-index-fullscreen
|
||||
.tabs
|
||||
a
|
||||
color: $border-hover !important
|
||||
color: var(--#{$prefix}-border-hover) !important
|
||||
|
||||
// Columns
|
||||
|
||||
@ -161,13 +161,13 @@
|
||||
transition-duration: $speed * 2
|
||||
transition-property: color
|
||||
.subtitle
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
position: relative
|
||||
strong
|
||||
color: currentColor
|
||||
&::before
|
||||
+overlay
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
border-radius: $radius-large
|
||||
content: ""
|
||||
display: block
|
||||
@ -182,7 +182,7 @@
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
.subtitle
|
||||
color: $text
|
||||
color: var(--#{$prefix}-text)
|
||||
&:nth-child(1):hover
|
||||
.title
|
||||
color: $orange
|
||||
@ -191,10 +191,10 @@
|
||||
color: $success
|
||||
&:nth-child(3):hover
|
||||
.title
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
&:nth-child(4):hover
|
||||
.title
|
||||
color: $scheme-invert
|
||||
color: var(--#{$prefix}-scheme-invert)
|
||||
|
||||
.bd-focus-icon
|
||||
position: relative
|
||||
@ -292,7 +292,7 @@
|
||||
color: $black-ter
|
||||
&.is-success,
|
||||
&.is-error
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
pointer-events: none
|
||||
text-decoration: none
|
||||
&.is-success
|
||||
@ -301,10 +301,10 @@
|
||||
background-color: $red
|
||||
\::-moz-selection
|
||||
background: $yellow
|
||||
color: $scheme-invert-ter
|
||||
color: var(--#{$prefix}-scheme-invert-ter)
|
||||
\::selection
|
||||
background: $yellow
|
||||
color: $scheme-invert-ter
|
||||
color: var(--#{$prefix}-scheme-invert-ter)
|
||||
|
||||
.intro-buttons
|
||||
margin-top: 1.5rem
|
||||
@ -313,7 +313,7 @@
|
||||
padding-right: 1.375em
|
||||
|
||||
.intro-video
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 640px
|
||||
@ -384,12 +384,12 @@
|
||||
width: 100%
|
||||
|
||||
.intro-author
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
font-size: $size-small
|
||||
margin-top: 40px
|
||||
text-align: center
|
||||
a
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
span
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
margin: 0.25rem auto 0.25rem 0
|
||||
|
||||
.bd-klmn-gap
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}-background)
|
||||
border-radius: $radius
|
||||
color: $red
|
||||
font-family: $family-monospace
|
||||
@ -24,7 +24,7 @@
|
||||
white-space: nowrap
|
||||
&.bd-is-selected
|
||||
background-color: $green
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
.bd-klmn-columns:last-child
|
||||
.bd-notification
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.bd-testimonials
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}-background)
|
||||
|
||||
.bd-testimonial
|
||||
align-items: flex-start
|
||||
@ -7,7 +7,7 @@
|
||||
justify-content: center
|
||||
|
||||
.bd-testimonial-tweet
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
.bd-more-loves
|
||||
align-items: center
|
||||
@ -57,7 +57,7 @@
|
||||
.hero.bd-is-love
|
||||
.title,
|
||||
.subtitle
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
@keyframes rainbow
|
||||
0%
|
||||
@ -111,7 +111,7 @@
|
||||
margin-left: 1.5rem
|
||||
|
||||
.bd-shoutout
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}-background)
|
||||
padding: 2rem
|
||||
text-align: center
|
||||
&:not(:last-child)
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
.bd-figure
|
||||
+block
|
||||
align-items: center
|
||||
border: 2px solid $scheme-main-ter
|
||||
border: 2px solid var(--#{$prefix}-scheme-main-ter)
|
||||
border-radius: $radius
|
||||
display: flex
|
||||
flex-direction: column
|
||||
@ -14,8 +14,8 @@
|
||||
margin: 1em
|
||||
figcaption
|
||||
align-self: stretch
|
||||
background-color: $scheme-main-ter
|
||||
color: $text-light
|
||||
background-color: var(--#{$prefix}-scheme-main-ter)
|
||||
color: var(--#{$prefix}-text-light)
|
||||
font-size: $size-small
|
||||
padding: 1em
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
.bd-prev-next
|
||||
align-items: flex-start
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
display: none
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
@ -45,7 +45,7 @@
|
||||
width: 1.5rem
|
||||
a
|
||||
&:hover
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}-background)
|
||||
|
||||
.bd-prev-next-bis
|
||||
border-top: 2px solid $background
|
||||
@ -64,7 +64,7 @@
|
||||
.bd-header
|
||||
margin-bottom: $main-spacing
|
||||
.subtitle
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
strong
|
||||
color: currentColor
|
||||
#meta
|
||||
@ -87,12 +87,12 @@
|
||||
overflow: visible
|
||||
ul,
|
||||
a
|
||||
border-bottom-color: $scheme-main-ter
|
||||
border-bottom-color: var(--#{$prefix}-scheme-main-ter)
|
||||
border-bottom-width: 2px
|
||||
a
|
||||
margin-bottom: -2px
|
||||
li:not(.is-active) a:hover
|
||||
border-bottom-color: $border
|
||||
border-bottom-color: var(--#{$prefix}-border)
|
||||
ul
|
||||
flex-wrap: wrap
|
||||
max-width: 100%
|
||||
@ -109,7 +109,7 @@
|
||||
|
||||
.bd-side,
|
||||
.bd-side-background
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
|
||||
.bd-side
|
||||
position: relative
|
||||
@ -128,19 +128,19 @@
|
||||
margin-bottom: 0.5em
|
||||
&.is-past
|
||||
a
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
&.is-current
|
||||
a
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
a
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
|
||||
.bd-category
|
||||
a
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
&.is-active
|
||||
@ -156,7 +156,7 @@
|
||||
.bd-category-toggle
|
||||
+overlay
|
||||
align-items: center
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
.icon
|
||||
@ -174,10 +174,10 @@
|
||||
vertical-align: text-bottom
|
||||
|
||||
.bd-category-name
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
position: relative
|
||||
&.is-active
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
.bd-mini-tag
|
||||
margin-left: 0.5em
|
||||
|
||||
@ -201,7 +201,7 @@
|
||||
top: 0
|
||||
|
||||
.bd-anchors-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
font-size: 0.875rem
|
||||
font-weight: $weight-semibold
|
||||
margin-bottom: 0.5rem
|
||||
@ -212,7 +212,7 @@
|
||||
&:last-child
|
||||
margin-top: 1em
|
||||
a
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
|
||||
+touch
|
||||
.bd-lead,
|
||||
@ -229,7 +229,7 @@
|
||||
.bd-duo
|
||||
display: flex
|
||||
.bd-lead
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
overflow: hidden
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
text-decoration: none
|
||||
&:hover
|
||||
.native-cta
|
||||
box-shadow: 0 1rem 2rem 0 rgba($scheme-invert, 0.1)
|
||||
box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.1)
|
||||
transform: translateY(-0.25rem)
|
||||
|
||||
.native-img
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
.native-cta
|
||||
border: none
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba($scheme-invert, 0.2)
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.2)
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-weight: $weight-semibold
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.bd-side-sponsor-label,
|
||||
.bd-banner-label
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
font-size: 0.75rem
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
@ -31,17 +31,17 @@
|
||||
margin-bottom: 0.25em
|
||||
&.is-patreon
|
||||
background-color: $patreon-blue
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
// &.is-fortyfour
|
||||
// background-color: $scheme-main
|
||||
// background-color: var(--#{$prefix}-scheme-main)
|
||||
// border: 2px solid $background
|
||||
.button
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: transform
|
||||
&:hover
|
||||
border-color: $link
|
||||
color: $link
|
||||
border-color: var(--#{$prefix}-link)
|
||||
color: var(--#{$prefix}-link)
|
||||
.bd-banner-title
|
||||
color: currentColor
|
||||
.button
|
||||
@ -55,7 +55,7 @@
|
||||
opacity: 0.5
|
||||
|
||||
.bd-banner-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
font-size: 1.25em
|
||||
font-weight: $weight-semibold
|
||||
line-height: 1.25
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
|
||||
.bd-link
|
||||
border-radius: $radius-large
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
display: block
|
||||
font-size: $size-5
|
||||
padding: 1rem 3rem 1.5rem 5rem
|
||||
@ -68,7 +68,7 @@
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
&:hover
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
|
||||
.bd-link-surtitle
|
||||
float: right
|
||||
@ -91,7 +91,7 @@
|
||||
min-width: 1.5em
|
||||
|
||||
.bd-link-counter
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
display: block
|
||||
counter-increment: bd-links
|
||||
font-weight: $weight-normal
|
||||
@ -123,7 +123,7 @@
|
||||
width: 50%
|
||||
|
||||
.bd-link-name
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
font-size: $size-4
|
||||
font-weight: $weight-semibold
|
||||
|
||||
@ -139,11 +139,11 @@
|
||||
min-width: calc(33.3333% - 3rem)
|
||||
|
||||
.bd-doc-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}-link)
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
@ -227,15 +227,15 @@
|
||||
background-color: darken($rss, 10%)
|
||||
|
||||
.bd-view-all-versions
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.bd-feature-title
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
a
|
||||
border-bottom: 1px solid transparent
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
|
||||
@ -273,14 +273,14 @@
|
||||
font-size: 1.25em
|
||||
vertical-align: middle
|
||||
|
||||
$notification-background-color: $background !default
|
||||
$notification-background-color: var(--#{$prefix}-background) !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
|
||||
.bd-notification
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}-background)
|
||||
border-radius: $radius
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
font-weight: $weight-semibold
|
||||
padding: 1.25rem 0
|
||||
position: relative
|
||||
@ -292,9 +292,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background-color: rgba($scheme-invert, 0.2)
|
||||
background-color: rgba(var(--#{$prefix}-scheme-invert), 0.2)
|
||||
border-radius: $radius
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}-scheme-main)
|
||||
pre code
|
||||
background-color: transparent
|
||||
// Colors
|
||||
|
||||
@ -29,13 +29,13 @@
|
||||
min-height: 80px
|
||||
text-align: center
|
||||
&.is-text
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
font-size: 0.75em
|
||||
line-height: 1.25
|
||||
min-height: 0
|
||||
|
||||
.bd-partnrs
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
#carbonads
|
||||
.carbon-text
|
||||
padding-bottom: 0
|
||||
@ -43,7 +43,7 @@
|
||||
display: none
|
||||
|
||||
.bd-partner-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}-border-hover)
|
||||
font-size: 0.875rem
|
||||
margin-bottom: 1rem
|
||||
|
||||
@ -57,11 +57,11 @@
|
||||
|
||||
.bd-minis-link
|
||||
@extend %center
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
.icon
|
||||
margin-right: 0.25em
|
||||
strong
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}-text-light)
|
||||
margin-left: 0.25em
|
||||
|
||||
.bd-minis-list
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// $tw-black: #1c2022
|
||||
$tw-black: $text-strong
|
||||
$tw-black: var(--#{$prefix}-text-strong)
|
||||
$tw-blue: #2b7bb9
|
||||
$tw-grey: #697882
|
||||
$tw-border: #e1e8ed
|
||||
|
||||
.bd-tws-home
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
|
||||
.bd-tw
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
border-radius: $radius-large
|
||||
color: $tw-grey
|
||||
flex-shrink: 0
|
||||
@ -18,7 +18,7 @@ $tw-border: #e1e8ed
|
||||
padding: 20px
|
||||
text-align: left
|
||||
&.bd-is-white
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
.bd-tw-header
|
||||
align-items: stretch
|
||||
@ -45,7 +45,7 @@ $tw-border: #e1e8ed
|
||||
width: 36px
|
||||
|
||||
.bd-tw-fullname
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
display: block
|
||||
font-size: 16px
|
||||
font-weight: 700
|
||||
@ -163,7 +163,7 @@ $tw-border: #e1e8ed
|
||||
min-height: 632px
|
||||
|
||||
.twitter-tweet:not(.twitter-tweet-rendered)
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
border: 1px solid $tw-border
|
||||
border-radius: 5px
|
||||
color: $tw-grey
|
||||
|
||||
@ -1,6 +1,29 @@
|
||||
$prefix: "bulma-"
|
||||
|
||||
$cssvar-colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark), "scheme-main": ($scheme-main, $scheme-invert))
|
||||
@function findCSSVarColorInvert($color)
|
||||
@if colorLuminance($color) > 0.55
|
||||
@return var(--#{$prefix}-black-transparent)
|
||||
@else
|
||||
@return var(--#{$prefix}-white)
|
||||
|
||||
@function findCSSVarLightColor($color)
|
||||
@if type-of($color) == "color"
|
||||
$l: 96%
|
||||
@if lightness($color) > 96%
|
||||
$l: lightness($color)
|
||||
@return change-color($color, $lightness: $l)
|
||||
@return var(--#{$prefix}-background)
|
||||
|
||||
@function findCSSVarDarkColor($color)
|
||||
@if type-of($color) == "color"
|
||||
$base-l: 29%
|
||||
$luminance: colorLuminance($color)
|
||||
$luminance-delta: 0.53 - $luminance
|
||||
$target-l: round($base-l + $luminance-delta * 53)
|
||||
@return change-color($color, $lightness: max($base-l, $target-l))
|
||||
@return var(--#{$prefix}-text-strong)
|
||||
|
||||
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
|
||||
|
||||
@function getCssVariable($color, $name)
|
||||
$hue: hue($color)
|
||||
@ -9,55 +32,65 @@ $cssvar-colors: ("white": ($white, $black), "black": ($black, $white), "light":
|
||||
$alpha: alpha($color)
|
||||
@return $hue, $saturation, $lightness
|
||||
|
||||
=cssvar($color, $name, $color-light, $color-dark)
|
||||
=cssvar($name, $color)
|
||||
$hue: hue($color)
|
||||
$saturation: saturation($color)
|
||||
$lightness: lightness($color)
|
||||
$base: "#{$prefix}#{$name}"
|
||||
|
||||
--#{$base}-h: #{$hue}
|
||||
--#{$base}-s: #{$saturation}
|
||||
--#{$base}-l: #{$lightness}
|
||||
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
|
||||
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
|
||||
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
|
||||
|
||||
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
|
||||
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
|
||||
$color-invert: findCSSVarColorInvert($color)
|
||||
--#{$base}-invert: #{$color-invert}
|
||||
$color-light: findCSSVarLightColor($color)
|
||||
--#{$base}-light: #{$color-light}
|
||||
--#{$base}-light-hover: #{darken($color-light, 5%)}
|
||||
--#{$base}-light-active: #{darken($color-light, 10%)}
|
||||
|
||||
$color-dark: findCSSVarDarkColor($color)
|
||||
--#{$base}-dark: #{$color-dark}
|
||||
--#{$base}-dark-hover: #{darken($color-dark, 5%)}
|
||||
--#{$base}-dark-active: #{darken($color-dark, 10%)}
|
||||
|
||||
// @if $cssvar-invert
|
||||
// --#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
|
||||
// @else
|
||||
// --#{$base}-invert: #{findColorInvert($color)}
|
||||
|
||||
\:root
|
||||
@each $name, $components in $cssvar-colors
|
||||
$color: nth($components, 1)
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
// $cssvar-invert-name: ""
|
||||
--#{$prefix}-white: #{$white}
|
||||
--#{$prefix}-black: #{$black}
|
||||
--#{$prefix}-black-transparent: #{rgba(#000, 0.7)}
|
||||
@each $name, $color in $cssvar-colors
|
||||
+cssvar($name, $color)
|
||||
|
||||
// @if length($components) >= 5
|
||||
// $color-light: nth($components, 3)
|
||||
// $color-dark: nth($components, 4)
|
||||
// $cssvar-invert-name: nth($components, 5)
|
||||
@if length($components) >= 4
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: nth($components, 4)
|
||||
// $cssvar-invert-name: findColorInvert($color)
|
||||
@else if length($components) >= 3
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: findDarkColor($color)
|
||||
// $cssvar-invert-name: findColorInvert($color)
|
||||
@else
|
||||
$color-light: findLightColor($color)
|
||||
$color-dark: findDarkColor($color)
|
||||
// $cssvar-invert-name: findColorInvert($color)
|
||||
|
||||
+cssvar($color, $name, $color-light, $color-dark)
|
||||
// $white: var(--#{$prefix}-white)
|
||||
// $black: var(--#{$prefix}-black)
|
||||
// $black-transparent: var(--#{$prefix}-black-transparent)
|
||||
// $scheme-main: var(--#{$prefix}-scheme-main)
|
||||
// $scheme-main-bis: var(--#{$prefix}-scheme-main-bis)
|
||||
// $scheme-main-ter: var(--#{$prefix}-scheme-main-ter)
|
||||
// $scheme-invert: var(--#{$prefix}-scheme-invert)
|
||||
// $scheme-invert-bis: var(--#{$prefix}-scheme-invert-bis)
|
||||
// $scheme-invert-ter: var(--#{$prefix}-scheme-invert-ter)
|
||||
// $background: var(--#{$prefix}-background)
|
||||
// $border: var(--#{$prefix}-border)
|
||||
// $border-hover: var(--#{$prefix}-border-hover)
|
||||
// $border-light: var(--#{$prefix}-border-light)
|
||||
// $border-light-hover: var(--#{$prefix}-border-light-hover)
|
||||
// $text: var(--#{$prefix}-text)
|
||||
// $text-invert: var(--#{$prefix}-text-invert)
|
||||
// $text-light: var(--#{$prefix}-text-light)
|
||||
// $text-strong: var(--#{$prefix}-text-strong)
|
||||
// $code: var(--#{$prefix}-code)
|
||||
// $code-background: var(--#{$prefix}-code-background)
|
||||
// $pre: var(--#{$prefix}-pre)
|
||||
// $pre-background: var(--#{$prefix}-pre-background)
|
||||
// $link: var(--#{$prefix}-link)
|
||||
// $link-invert: var(--#{$prefix}-link-invert)
|
||||
// $link-light: var(--#{$prefix}-link-light)
|
||||
// $link-dark: var(--#{$prefix}-link-dark)
|
||||
// $link-visited: var(--#{$prefix}-link-visited)
|
||||
// $link-hover: var(--#{$prefix}-link-hover)
|
||||
// $link-hover-border: var(--#{$prefix}-link-hover-border)
|
||||
// $link-focus: var(--#{$prefix}-link-focus)
|
||||
// $link-focus-border: var(--#{$prefix}-link-focus-border)
|
||||
// $link-active: var(--#{$prefix}-link-active)
|
||||
// $link-active-border: var(--#{$prefix}-link-active-border)
|
||||
|
||||
@ -1,52 +1,114 @@
|
||||
@import "../sass/utilities/initial-variables.sass"
|
||||
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
.bd-scheme-dark
|
||||
display: none
|
||||
|
||||
@media (prefers-color-scheme: dark)
|
||||
// General colors
|
||||
$scheme-main: $black
|
||||
$scheme-main-bis: $black-bis
|
||||
$scheme-main-ter: $black-ter
|
||||
$scheme-invert: $white
|
||||
$scheme-invert-bis: $white-bis
|
||||
$scheme-invert-ter: $white-ter
|
||||
$background: $black-ter
|
||||
$border: lime
|
||||
$border-hover: $grey-dark
|
||||
$border-light: $grey-darker
|
||||
$border-light-hover: $grey-dark
|
||||
// Text colors
|
||||
$text: $grey-light
|
||||
$text-invert: $grey-darker
|
||||
$text-light: $grey
|
||||
$text-strong: $white
|
||||
// Link colors
|
||||
$link-hover: $white
|
||||
$link-hover-border: $grey-dark
|
||||
$link-focus: $white
|
||||
$link-focus-border: $blue
|
||||
$link-active: $white
|
||||
$link-active-border: $grey-light
|
||||
.bd-scheme-light
|
||||
display: none
|
||||
html
|
||||
background-color: $scheme-invert-bis
|
||||
color: $scheme-main-ter
|
||||
\:root
|
||||
--#{$prefix}-scheme-main: #{$scheme-main}
|
||||
--#{$prefix}-scheme-main-bis: #{$scheme-main-bis}
|
||||
--#{$prefix}-scheme-main-ter: #{$scheme-main-ter}
|
||||
--#{$prefix}-scheme-invert: #{$scheme-invert}
|
||||
--#{$prefix}-scheme-invert-bis: #{$scheme-invert-bis}
|
||||
--#{$prefix}-scheme-invert-ter: #{$scheme-invert-ter}
|
||||
--#{$prefix}-background: #{$background}
|
||||
--#{$prefix}-border: #{$border}
|
||||
--#{$prefix}-border-hover: #{$border-hover}
|
||||
--#{$prefix}-border-light: #{$border-light}
|
||||
--#{$prefix}-border-light-hover: #{$border-light-hover}
|
||||
--#{$prefix}-text: #{$text}
|
||||
--#{$prefix}-text-invert: #{$text-invert}
|
||||
--#{$prefix}-text-light: #{$text-light}
|
||||
--#{$prefix}-text-strong: #{$text-strong}
|
||||
--#{$prefix}-code: #{$code}
|
||||
--#{$prefix}-code-background: #{$code-background}
|
||||
--#{$prefix}-pre: #{$pre}
|
||||
--#{$prefix}-pre-background: #{$pre-background}
|
||||
--#{$prefix}-link: #{$link}
|
||||
--#{$prefix}-link-invert: #{$link-invert}
|
||||
--#{$prefix}-link-light: #{$link-light}
|
||||
--#{$prefix}-link-dark: #{$link-dark}
|
||||
--#{$prefix}-link-visited: #{$link-visited}
|
||||
--#{$prefix}-link-hover: #{$link-hover}
|
||||
--#{$prefix}-link-hover-border: #{$link-hover-border}
|
||||
--#{$prefix}-link-focus: #{$link-focus}
|
||||
--#{$prefix}-link-focus-border: #{$link-focus-border}
|
||||
--#{$prefix}-link-active: #{$link-active}
|
||||
--#{$prefix}-link-active-border: #{$link-active-border}
|
||||
.bd-navbar
|
||||
background-color: $scheme-invert-ter
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
&.has-shadow
|
||||
box-shadow: none
|
||||
.title
|
||||
color: $scheme-main
|
||||
|
||||
// // General colors
|
||||
html
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
|
||||
// $scheme-main: $black
|
||||
// $scheme-main-bis: $black-bis
|
||||
// $scheme-main-ter: $black-ter
|
||||
// $scheme-invert: $white
|
||||
// $scheme-invert-bis: $white-bis
|
||||
// $scheme-invert-ter: $white-ter
|
||||
body
|
||||
color: var(--#{$prefix}-text)
|
||||
|
||||
// $background: $black-ter
|
||||
a
|
||||
color: var(--#{$prefix}-link)
|
||||
|
||||
// $border: $grey-darker
|
||||
// $border-hover: $grey-dark
|
||||
// $border-light: $grey-darker
|
||||
// $border-light-hover: $grey-dark
|
||||
&:hover
|
||||
color: var(--#{$prefix}-link-hover)
|
||||
|
||||
// // Text colors
|
||||
code
|
||||
background-color: var(--#{$prefix}-code-background)
|
||||
color: var(--#{$prefix}-code)
|
||||
|
||||
// $text: $grey-light
|
||||
// $text-invert: $grey-darker
|
||||
// $text-light: $grey
|
||||
// $text-strong: $white
|
||||
hr
|
||||
background-color: var(--#{$prefix}-background)
|
||||
|
||||
// // Link colors
|
||||
strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
|
||||
// $link-hover: $white
|
||||
// $link-hover-border: $grey-dark
|
||||
pre
|
||||
background-color: var(--#{$prefix}-pre-background)
|
||||
color: var(--#{$prefix}-pre)
|
||||
|
||||
// $link-focus: $white
|
||||
// $link-focus-border: $blue
|
||||
table
|
||||
th
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
|
||||
// $link-active: $white
|
||||
// $link-active-border: $grey-light
|
||||
.title
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
|
||||
.subtitle
|
||||
color: var(--#{$prefix}-text)
|
||||
strong
|
||||
color: var(--#{$prefix}-text-strong)
|
||||
|
||||
.footer
|
||||
background-color: var(--#{$prefix}-scheme-main-bis)
|
||||
|
||||
.media .media,
|
||||
.media + .media
|
||||
border-top-color: rgba(var(--#{$prefix}-border), 0.5)
|
||||
|
||||
@ -25,9 +25,22 @@ $intro-width: 1080px
|
||||
$sidebar-width: 10.5rem
|
||||
|
||||
@import "../bulma"
|
||||
// @import "../sass/utilities/_all.sass"
|
||||
@import "./bulma-cssvar.scss"
|
||||
// @import "./bulma-dark"
|
||||
@import "./bulma-cssvar.sass"
|
||||
@import "./bulma-dark"
|
||||
|
||||
// Dark mode steps
|
||||
//
|
||||
// 1. Swap values
|
||||
// $scheme-main: $black
|
||||
//
|
||||
// 2. Assign updated CSS vars to :root
|
||||
// :root
|
||||
// --bulma-scheme-main: #{$scheme-main}
|
||||
//
|
||||
// 3. Assign CSS vars to elements/components
|
||||
// html
|
||||
// background-color: var(--#{$prefix}-scheme-main)
|
||||
//
|
||||
|
||||
%center
|
||||
align-items: center
|
||||
@ -35,7 +48,7 @@ $sidebar-width: 10.5rem
|
||||
justify-content: center
|
||||
|
||||
%bd-box
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}-scheme-main)
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
|
||||
display: block
|
||||
|
||||
@ -10808,36 +10808,6 @@ label.panel-block:hover {
|
||||
--bulma--white: white;
|
||||
--bulma--black: #0a0a0a;
|
||||
--bulma--black-transparent: rgba(0, 0, 0, 0.7);
|
||||
--bulma--scheme-main: white;
|
||||
--bulma--scheme-main-bis: #fafafa;
|
||||
--bulma--scheme-main-ter: whitesmoke;
|
||||
--bulma--scheme-invert: #0a0a0a;
|
||||
--bulma--scheme-invert-bis: #121212;
|
||||
--bulma--scheme-invert-ter: #242424;
|
||||
--bulma--background: whitesmoke;
|
||||
--bulma--border: #dbdbdb;
|
||||
--bulma--border-hover: #b5b5b5;
|
||||
--bulma--border-light: #ededed;
|
||||
--bulma--border-light-hover: #b5b5b5;
|
||||
--bulma--text: #4a4a4a;
|
||||
--bulma--text-invert: var(--bulma--white);
|
||||
--bulma--text-light: #7a7a7a;
|
||||
--bulma--text-strong: #363636;
|
||||
--bulma--code: #f14668;
|
||||
--bulma--code-background: whitesmoke;
|
||||
--bulma--pre: #4a4a4a;
|
||||
--bulma--pre-background: whitesmoke;
|
||||
--bulma--link: #3273dc;
|
||||
--bulma--link-invert: var(--bulma--white);
|
||||
--bulma--link-light: #eef3fc;
|
||||
--bulma--link-dark: #2160c4;
|
||||
--bulma--link-visited: #b86bff;
|
||||
--bulma--link-hover: #363636;
|
||||
--bulma--link-hover-border: #b5b5b5;
|
||||
--bulma--link-focus: #363636;
|
||||
--bulma--link-focus-border: #3273dc;
|
||||
--bulma--link-active: #363636;
|
||||
--bulma--link-active-border: #4a4a4a;
|
||||
--bulma-primary-h: 171deg;
|
||||
--bulma-primary-s: 100%;
|
||||
--bulma-primary-l: 41%;
|
||||
@ -10944,6 +10914,56 @@ label.panel-block:hover {
|
||||
--bulma-dark-dark-active: #707070;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.bd-scheme-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bd-scheme-light {
|
||||
display: none;
|
||||
}
|
||||
:root {
|
||||
--bulma--scheme-main: #0a0a0a;
|
||||
--bulma--scheme-main-bis: #121212;
|
||||
--bulma--scheme-main-ter: #242424;
|
||||
--bulma--scheme-invert: white;
|
||||
--bulma--scheme-invert-bis: #fafafa;
|
||||
--bulma--scheme-invert-ter: whitesmoke;
|
||||
--bulma--background: #242424;
|
||||
--bulma--border: lime;
|
||||
--bulma--border-hover: #4a4a4a;
|
||||
--bulma--border-light: #363636;
|
||||
--bulma--border-light-hover: #4a4a4a;
|
||||
--bulma--text: #b5b5b5;
|
||||
--bulma--text-invert: #363636;
|
||||
--bulma--text-light: #7a7a7a;
|
||||
--bulma--text-strong: white;
|
||||
--bulma--code: #f14668;
|
||||
--bulma--code-background: whitesmoke;
|
||||
--bulma--pre: #4a4a4a;
|
||||
--bulma--pre-background: whitesmoke;
|
||||
--bulma--link: #3273dc;
|
||||
--bulma--link-invert: #fff;
|
||||
--bulma--link-light: #eef3fc;
|
||||
--bulma--link-dark: #2160c4;
|
||||
--bulma--link-visited: #b86bff;
|
||||
--bulma--link-hover: white;
|
||||
--bulma--link-hover-border: #4a4a4a;
|
||||
--bulma--link-focus: white;
|
||||
--bulma--link-focus-border: #3273dc;
|
||||
--bulma--link-active: white;
|
||||
--bulma--link-active-border: #b5b5b5;
|
||||
}
|
||||
.bd-navbar {
|
||||
background-color: var(--bulma--scheme-main-bis);
|
||||
}
|
||||
.bd-navbar.has-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--bulma--scheme-main);
|
||||
}
|
||||
@ -10966,7 +10986,41 @@ code {
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: whitesmoke;
|
||||
background-color: var(--bulma--background);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--bulma--text-strong);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--bulma--pre-background);
|
||||
color: var(--bulma--pre);
|
||||
}
|
||||
|
||||
table th {
|
||||
color: var(--bulma--text-strong);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--bulma--text-strong);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--bulma--text);
|
||||
}
|
||||
|
||||
.subtitle strong {
|
||||
color: var(--bulma--text-strong);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--bulma--scheme-main-bis);
|
||||
}
|
||||
|
||||
.media .media,
|
||||
.media + .media {
|
||||
border-top-color: rgba(var(--bulma--border), 0.5);
|
||||
}
|
||||
|
||||
.bd-columns-tool, .bd-footer-sponsor a, .bd-footer-donation-action, .bd-footer-star-figure, .bd-minis-title, .bd-minis-link, .bd-mini {
|
||||
@ -10978,7 +11032,7 @@ hr {
|
||||
.bd-footer-support, .bd-footer-star, .bd-book-content {
|
||||
background-color: var(--bulma--scheme-main);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(var(--bulma--black), 0.05);
|
||||
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.05);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -11047,7 +11101,7 @@ hr {
|
||||
}
|
||||
|
||||
.bd-prev-next-bis {
|
||||
border-top: 2px solid var(--bulma--background);
|
||||
border-top: 2px solid whitesmoke;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 3rem;
|
||||
@ -12227,7 +12281,7 @@ svg {
|
||||
.intro-npm {
|
||||
background: #242424;
|
||||
border-radius: 4px;
|
||||
color: var(--bulma--white);
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
justify-content: space-between;
|
||||
@ -13034,7 +13088,7 @@ svg {
|
||||
}
|
||||
|
||||
.bd-box {
|
||||
border: 4px solid var(--bulma--background);
|
||||
border: 4px solid whitesmoke;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -13268,7 +13322,7 @@ svg {
|
||||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet {
|
||||
border: 2px solid var(--bulma--background);
|
||||
border: 2px solid whitesmoke;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -13484,8 +13538,8 @@ svg {
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: rgba(var(--bulma--scheme-invert), 0.7);
|
||||
background: var(--bulma--background);
|
||||
border: 1px solid var(--bulma--border);
|
||||
background: whitesmoke;
|
||||
border: 1px solid #dbdbdb;
|
||||
content: "";
|
||||
display: block;
|
||||
z-index: 1;
|
||||
@ -13559,7 +13613,7 @@ svg {
|
||||
right: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
background-color: rgba(var(--bulma--background), 0.7);
|
||||
background-color: rgba(245, 245, 245, 0.7);
|
||||
border: none;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user