{% for link_id in site.data.links.navbar %}
{% assign link = site.data.links.by_id[link_id] %}
- <a class="navbar-item bd-navbar-item-{{ link.id }} {% if page.route == link.id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
+ <a class="navbar-item bd-navbar-item-{{ link_id }} {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
<span class="icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span>
.bd-book-content
@extend %bd-box
- box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}-scheme-invert), 0.2)
+ box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}scheme-invert), 0.2)
max-width: 520px
padding: 3rem
.bd-book-modal-background
+overlay
- background-color: rgba(var(--#{$prefix}-scheme-invert), 0.86)
+ background-color: rgba(var(--#{$prefix}scheme-invert), 0.86)
.bd-book-modal
.bd-book-modal-background,
.bd-book-inline-cover
display: none
.bd-book-modal-column
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
position: relative
&.bd-is-cover
align-items: center
&:hover
text-decoration: underline
.bd-is-empty
- background-color: var(--#{$prefix}-background)
- color: var(--#{$prefix}-text-light)
+ background-color: var(--#{$prefix}background)
+ color: var(--#{$prefix}text-light)
.bd-is-unique
background-color: rgba($green, 0.25)
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
font-weight: $weight-bold
.bd-bootstrap-comparison-header
.default-ad
background-color: rgba(black, 0.3)
border-radius: 2px
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
display: inline-block
font-size: 10px
font-weight: bold
text-transform: uppercase
vertical-align: top
& > a
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
border-radius: $radius-large
- 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)
+ 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
position: relative
&:hover,
&:focus
- box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}-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(var(--#{$prefix}-scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}-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
height: 40px
width: 40px
.default-title
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
display: inline
font-weight: $weight-bold
&::after
.bd-callout
+block
- background-color: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
border-radius: $radius
padding: 1.25rem 2.5rem 1.25rem 1.5rem
position: relative
.bd-example,
.bd-structure,
.bd-snippet
- border: 2px solid $background
+ border: 2px solid var(--#{$prefix}background)
position: relative
&::before
background: $yellow
position: relative
&::before
+overlay
- background: rgba(var(--#{$prefix}-scheme-invert), 0.7)
+ background: rgba(var(--#{$prefix}scheme-invert), 0.7)
background: $background
border: 1px solid $border
content: ""
.bd-expand
background: none
border: none
- color: var(--#{$prefix}-text)
+ color: var(--#{$prefix}text)
cursor: pointer
font-size: 0.625rem
outline: none
.bd-show
+overlay
align-items: center
- background-color: rgba($background, 0.7)
+ background-color: var(--#{$prefix}background)
border: none
- color: rgba(#000, 0.5)
+ color: var(--#{$prefix}scheme-invert)
cursor: pointer
display: none
font-size: $size-small
justify-content: center
+ opacity: 0.8
width: 100%
strong
color: currentColor
font-weight: $weight-semibold
+ opacity: 1
&:hover
background-color: rgba($yellow, 0.8)
color: rgba(#000, 0.7)
+ opacity: 1
+tablet
pre
white-space: pre-wrap
.bd-expo
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
padding: 1.5rem
.bd-website
transition: opacity 200ms $easing
.bd-website-overlay
- background-color: var(--#{$prefix}-scheme-invert)
+ background-color: var(--#{$prefix}scheme-invert)
opacity: 0
transition: opacity 200ms $easing
.bd-footer-title
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
font-size: 1.25rem
line-height: 1.25
margin-bottom: 0.5rem
font-weight: $weight-semibold
.bd-footer-subtitle
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
margin-top: -0.5rem
transition-duration: $speed
transition-property: color
width: 100%
.bd-footer-tsp
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
margin-top: 1.5rem
%bd-footer-box
.bd-footer-support
@extend %bd-footer-box
- border-top: 2px solid var(--#{$prefix}-scheme-main-ter)
+ border-top: 2px solid var(--#{$prefix}scheme-main-ter)
box-shadow: none
padding: 3rem
.bd-footer-title
padding: 0.75rem 1.5rem
.bd-footer-donation-title
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
margin-bottom: 0.5rem
strong
color: currentColor
+tablet
width: calc(33.3333% - 2rem)
&:hover
- box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}-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: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
&.bd-is-expo,
&.bd-is-love
padding-bottom: $star-figure-height
a
color: currentColor
&:hover
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
.bd-footer-link-title
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
font-size: 1.25rem
font-weight: $weight-semibold
&:not(:first-child)
&.bd-is-more
font-size: 0.875rem
a:not(:hover)
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
&.bd-has-subtitle
a
align-items: center
font-style: normal
&:not(:hover)
em
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
+mobile
flex-wrap: wrap
margin-top: 1rem
strong
color: currentColor
a
- border-bottom: 1px solid rgba(var(--#{$prefix}-scheme-main), 0.5)
+ border-bottom: 1px solid rgba(var(--#{$prefix}scheme-main), 0.5)
padding-bottom: 2px
&:hover
- border-bottom-color: var(--#{$prefix}-scheme-main)
+ border-bottom-color: var(--#{$prefix}scheme-main)
span
margin: 0 0.25em
opacity: 0.5
padding: 0
position: relative
&:hover
- background-color: var(--#{$prefix}-scheme-main)
- box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
+ box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}scheme-main)
+tablet
width: $carbon-width
width: $carbon-image-width
&:hover
& + .carbon-text
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
&:active
opacity: 0.8
.carbon-text
display: block
- color: var(--#{$prefix}-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: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
.carbon-poweredby
bottom: 0
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
display: inline
font-size: $size-small
line-height: $carbon-poweredby-height
&:hover
background: $github
border-color: $github
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
.bd-tw-button
background-color: $twitter
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
border-color: transparent !important
&:hover
background-color: darken($twitter, 2.5%)
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
&:active,
&:focus
background-color: darken($twitter, 5%)
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
#moreDropdown
.navbar-item
.highlight
- background-color: var(--#{$prefix}-pre-background)
+ background-color: var(--#{$prefix}pre-background)
border-radius: $radius-large
color: #586e75
pre
&:hover
color: $blue
strong
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
strong
font-weight: $weight-semibold
.title
strong
color: $primary
.subtitle
- color: var(--#{$prefix}-border-hover) !important
+ color: var(--#{$prefix}border-hover) !important
strong
color: currentColor
&:not(:last-child)
margin-right: auto
.bd-index-custom-title
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
.bd-index-custom-example
padding: 1rem
.button
&.is-primary
background-color: $mauve
- color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
// Fullscreen
.bd-index-fullscreen
.tabs
a
- color: var(--#{$prefix}-border-hover) !important
+ color: var(--#{$prefix}border-hover) !important
// Columns
transition-duration: $speed * 2
transition-property: color
.subtitle
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
position: relative
strong
color: currentColor
&::before
+overlay
- background-color: var(--#{$prefix}-scheme-main-bis)
+ background-color: var(--#{$prefix}scheme-main-bis)
border-radius: $radius-large
content: ""
display: block
opacity: 1
transform: scale(1)
.subtitle
- color: var(--#{$prefix}-text)
+ color: var(--#{$prefix}text)
&:nth-child(1):hover
.title
color: $orange
color: $success
&:nth-child(3):hover
.title
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
&:nth-child(4):hover
.title
- color: var(--#{$prefix}-scheme-invert)
+ color: var(--#{$prefix}scheme-invert)
.bd-focus-icon
position: relative
color: $black-ter
&.is-success,
&.is-error
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
pointer-events: none
text-decoration: none
&.is-success
background-color: $red
\::-moz-selection
background: $yellow
- color: var(--#{$prefix}-scheme-invert-ter)
+ color: var(--#{$prefix}scheme-invert-ter)
\::selection
background: $yellow
- color: var(--#{$prefix}-scheme-invert-ter)
+ color: var(--#{$prefix}scheme-invert-ter)
.intro-buttons
margin-top: 1.5rem
padding-right: 1.375em
.intro-video
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
margin-left: auto
margin-right: auto
max-width: 640px
width: 100%
.intro-author
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
font-size: $size-small
margin-top: 40px
text-align: center
a
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
&:hover
text-decoration: underline
span
margin: 0.25rem auto 0.25rem 0
.bd-klmn-gap
- background-color: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
border-radius: $radius
color: $red
font-family: $family-monospace
white-space: nowrap
&.bd-is-selected
background-color: $green
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
.bd-klmn-columns:last-child
.bd-notification
.bd-testimonials
- background-color: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
.bd-testimonial
align-items: flex-start
justify-content: center
.bd-testimonial-tweet
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
.bd-more-loves
align-items: center
.hero.bd-is-love
.title,
.subtitle
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
@keyframes rainbow
0%
margin-left: 1.5rem
.bd-shoutout
- background-color: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
padding: 2rem
text-align: center
&:not(:last-child)
.bd-figure
+block
align-items: center
- border: 2px solid var(--#{$prefix}-scheme-main-ter)
+ border: 2px solid var(--#{$prefix}scheme-main-ter)
border-radius: $radius
display: flex
flex-direction: column
margin: 1em
figcaption
align-self: stretch
- background-color: var(--#{$prefix}-scheme-main-ter)
- color: var(--#{$prefix}-text-light)
+ background-color: var(--#{$prefix}scheme-main-ter)
+ color: var(--#{$prefix}text-light)
font-size: $size-small
padding: 1em
.bd-prev-next
align-items: flex-start
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
display: none
flex-grow: 0
flex-shrink: 0
width: 1.5rem
a
&:hover
- background-color: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
.bd-prev-next-bis
border-top: 2px solid $background
.bd-header
margin-bottom: $main-spacing
.subtitle
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
strong
color: currentColor
#meta
overflow: visible
ul,
a
- border-bottom-color: var(--#{$prefix}-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: var(--#{$prefix}-border)
+ border-bottom-color: var(--#{$prefix}border)
ul
flex-wrap: wrap
max-width: 100%
.bd-side,
.bd-side-background
- background-color: var(--#{$prefix}-scheme-main-bis)
+ background-color: var(--#{$prefix}scheme-main-bis)
.bd-side
position: relative
margin-bottom: 0.5em
&.is-past
a
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
&.is-current
a
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
a
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
&:hover
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
.bd-category
a
&:hover
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
&:not(:last-child)
margin-bottom: 0.5rem
&.is-active
.bd-category-toggle
+overlay
align-items: center
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
display: flex
justify-content: flex-end
.icon
vertical-align: text-bottom
.bd-category-name
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
position: relative
&.is-active
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
.bd-mini-tag
margin-left: 0.5em
top: 0
.bd-anchors-title
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
font-size: 0.875rem
font-weight: $weight-semibold
margin-bottom: 0.5rem
&:last-child
margin-top: 1em
a
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
+touch
.bd-lead,
.bd-duo
display: flex
.bd-lead
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
overflow: hidden
flex-grow: 1
flex-shrink: 1
text-decoration: none
&:hover
.native-cta
- box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.1)
+ box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}scheme-invert), 0.1)
transform: translateY(-0.25rem)
.native-img
.native-cta
border: none
- box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}-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
.bd-side-sponsor-label,
.bd-banner-label
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
font-size: 0.75rem
margin-bottom: 0.75rem
margin-bottom: 0.25em
&.is-patreon
background-color: $patreon-blue
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
// &.is-fortyfour
- // background-color: var(--#{$prefix}-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: var(--#{$prefix}-link)
- color: var(--#{$prefix}-link)
+ border-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link)
.bd-banner-title
color: currentColor
.button
opacity: 0.5
.bd-banner-title
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
font-size: 1.25em
font-weight: $weight-semibold
line-height: 1.25
.bd-link
border-radius: $radius-large
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
display: block
font-size: $size-5
padding: 1rem 3rem 1.5rem 5rem
strong
font-weight: $weight-semibold
&:hover
- background-color: var(--#{$prefix}-scheme-main-bis)
+ background-color: var(--#{$prefix}scheme-main-bis)
.bd-link-surtitle
float: right
min-width: 1.5em
.bd-link-counter
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
display: block
counter-increment: bd-links
font-weight: $weight-normal
width: 50%
.bd-link-name
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
font-size: $size-4
font-weight: $weight-semibold
min-width: calc(33.3333% - 3rem)
.bd-doc-title
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
a
color: currentColor
&:hover
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
&:not(:last-child)
margin-bottom: 0.75rem
background-color: darken($rss, 10%)
.bd-view-all-versions
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
&:hover
text-decoration: underline
.bd-feature-title
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
a
border-bottom: 1px solid transparent
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
&:hover
border-bottom-color: $primary
font-size: 1.25em
vertical-align: middle
-$notification-background-color: var(--#{$prefix}-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: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
border-radius: $radius
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
font-weight: $weight-semibold
padding: 1.25rem 0
position: relative
color: currentColor
code,
pre
- background-color: rgba(var(--#{$prefix}-scheme-invert), 0.2)
+ background-color: rgba(var(--#{$prefix}scheme-invert), 0.2)
border-radius: $radius
- color: var(--#{$prefix}-scheme-main)
+ color: var(--#{$prefix}scheme-main)
pre code
background-color: transparent
// Colors
min-height: 80px
text-align: center
&.is-text
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
font-size: 0.75em
line-height: 1.25
min-height: 0
.bd-partnrs
- background-color: var(--#{$prefix}-scheme-main-bis)
+ background-color: var(--#{$prefix}scheme-main-bis)
#carbonads
.carbon-text
padding-bottom: 0
display: none
.bd-partner-title
- color: var(--#{$prefix}-border-hover)
+ color: var(--#{$prefix}border-hover)
font-size: 0.875rem
margin-bottom: 1rem
.bd-minis-link
@extend %center
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
.icon
margin-right: 0.25em
strong
- color: var(--#{$prefix}-text-light)
+ color: var(--#{$prefix}text-light)
margin-left: 0.25em
.bd-minis-list
// $tw-black: #1c2022
-$tw-black: var(--#{$prefix}-text-strong)
+$tw-black: var(--#{$prefix}text-strong)
$tw-blue: #2b7bb9
$tw-grey: #697882
$tw-border: #e1e8ed
.bd-tws-home
- background-color: var(--#{$prefix}-scheme-main-bis)
+ background-color: var(--#{$prefix}scheme-main-bis)
.bd-tw
- background-color: var(--#{$prefix}-scheme-main-bis)
+ background-color: var(--#{$prefix}scheme-main-bis)
border-radius: $radius-large
color: $tw-grey
flex-shrink: 0
padding: 20px
text-align: left
&.bd-is-white
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
.bd-tw-header
align-items: stretch
width: 36px
.bd-tw-fullname
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
display: block
font-size: 16px
font-weight: 700
min-height: 632px
.twitter-tweet:not(.twitter-tweet-rendered)
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
border: 1px solid $tw-border
border-radius: 5px
color: $tw-grey
@function findCSSVarColorInvert($color)
@if colorLuminance($color) > 0.55
- @return var(--#{$prefix}-black-transparent)
+ @return var(--#{$prefix}black-transparent)
@else
- @return var(--#{$prefix}-white)
+ @return var(--#{$prefix}white)
@function findCSSVarLightColor($color)
@if type-of($color) == "color"
@if lightness($color) > 96%
$l: lightness($color)
@return change-color($color, $lightness: $l)
- @return var(--#{$prefix}-background)
+ @return var(--#{$prefix}background)
@function findCSSVarDarkColor($color)
@if type-of($color) == "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)
+ @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)
--#{$base}-dark-active: #{darken($color-dark, 10%)}
\:root
- --#{$prefix}-white: #{$white}
- --#{$prefix}-black: #{$black}
- --#{$prefix}-black-transparent: #{rgba(#000, 0.7)}
+ --#{$prefix}white: #{$white}
+ --#{$prefix}black: #{$black}
+ --#{$prefix}black-transparent: #{rgba(#000, 0.7)}
@each $name, $color in $cssvar-colors
+cssvar($name, $color)
-// $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)
+// $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)
@function findCSSVarColorInvert($color) {
@if (colorLuminance($color) > 0.55) {
- @return var(--#{$prefix}-black-transparent);
+ @return var(--#{$prefix}black-transparent);
} @else {
- @return var(--#{$prefix}-white);
+ @return var(--#{$prefix}white);
}
}
}
@return change-color($color, $lightness: $l);
}
- @return var(--#{$prefix}-background);
+ @return var(--#{$prefix}background);
}
@function findCSSVarDarkColor($color) {
$target-l: round($base-l + ($luminance-delta * 53));
@return change-color($color, $lightness: max($base-l, $target-l));
}
- @return var(--#{$prefix}-text-strong);
+ @return var(--#{$prefix}text-strong);
}
$cssvar-colors: (
}
:root {
- --#{$prefix}-white: #{$white};
- --#{$prefix}-black: #{$black};
- --#{$prefix}-black-transparent: #{rgba(#000, 0.7)};
- --#{$prefix}-scheme-main: #{$white};
- --#{$prefix}-scheme-main-bis: #{$white-bis};
- --#{$prefix}-scheme-main-ter: #{$white-ter};
- --#{$prefix}-scheme-invert: #{$black};
- --#{$prefix}-scheme-invert-bis: #{$black-bis};
- --#{$prefix}-scheme-invert-ter: #{$black-ter};
- --#{$prefix}-background: #{$white-ter};
- --#{$prefix}-border: #{$grey-lighter};
- --#{$prefix}-border-hover: #{$grey-light};
- --#{$prefix}-border-light: #{$grey-lightest};
- --#{$prefix}-border-light-hover: #{$grey-light};
- --#{$prefix}-text: #{$grey-dark};
- --#{$prefix}-text-invert: #{findCSSVarColorInvert($text)};
- --#{$prefix}-text-light: #{$grey};
- --#{$prefix}-text-strong: #{$grey-darker};
- --#{$prefix}-code: #{$red};
- --#{$prefix}-code-background: #{$background};
- --#{$prefix}-pre: #{$text};
- --#{$prefix}-pre-background: #{$background};
- --#{$prefix}-link: #{$blue};
- --#{$prefix}-link-invert: #{findCSSVarColorInvert($link)};
- --#{$prefix}-link-light: #{findCSSVarLightColor($link)};
- --#{$prefix}-link-dark: #{findCSSVarDarkColor($link)};
- --#{$prefix}-link-visited: #{$purple};
- --#{$prefix}-link-hover: #{$grey-darker};
- --#{$prefix}-link-hover-border: #{$grey-light};
- --#{$prefix}-link-focus: #{$grey-darker};
- --#{$prefix}-link-focus-border: #{$blue};
- --#{$prefix}-link-active: #{$grey-darker};
- --#{$prefix}-link-active-border: #{$grey-dark};
+ --#{$prefix}white: #{$white};
+ --#{$prefix}black: #{$black};
+ --#{$prefix}black-transparent: #{rgba(#000, 0.7)};
+ --#{$prefix}scheme-main: #{$white};
+ --#{$prefix}scheme-main-bis: #{$white-bis};
+ --#{$prefix}scheme-main-ter: #{$white-ter};
+ --#{$prefix}scheme-invert: #{$black};
+ --#{$prefix}scheme-invert-bis: #{$black-bis};
+ --#{$prefix}scheme-invert-ter: #{$black-ter};
+ --#{$prefix}background: #{$white-ter};
+ --#{$prefix}border: #{$grey-lighter};
+ --#{$prefix}border-hover: #{$grey-light};
+ --#{$prefix}border-light: #{$grey-lightest};
+ --#{$prefix}border-light-hover: #{$grey-light};
+ --#{$prefix}text: #{$grey-dark};
+ --#{$prefix}text-invert: #{findCSSVarColorInvert($text)};
+ --#{$prefix}text-light: #{$grey};
+ --#{$prefix}text-strong: #{$grey-darker};
+ --#{$prefix}code: #{$red};
+ --#{$prefix}code-background: #{$background};
+ --#{$prefix}pre: #{$text};
+ --#{$prefix}pre-background: #{$background};
+ --#{$prefix}link: #{$blue};
+ --#{$prefix}link-invert: #{findCSSVarColorInvert($link)};
+ --#{$prefix}link-light: #{findCSSVarLightColor($link)};
+ --#{$prefix}link-dark: #{findCSSVarDarkColor($link)};
+ --#{$prefix}link-visited: #{$purple};
+ --#{$prefix}link-hover: #{$grey-darker};
+ --#{$prefix}link-hover-border: #{$grey-light};
+ --#{$prefix}link-focus: #{$grey-darker};
+ --#{$prefix}link-focus-border: #{$blue};
+ --#{$prefix}link-active: #{$grey-darker};
+ --#{$prefix}link-active-border: #{$grey-dark};
@each $name, $color in $cssvar-colors {
@include cssvar($name, $color);
}
}
-$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);
+$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);
html {
background-color: $scheme-main;
@import "../sass/utilities/initial-variables.sass"
-
@media (prefers-color-scheme: light)
.bd-scheme-dark
display: none
$scheme-invert-bis: $white-bis
$scheme-invert-ter: $white-ter
$background: $black-ter
- $border: lime
+ $border: $grey-darker
$border-hover: $grey-dark
$border-light: $grey-darker
$border-light-hover: $grey-dark
$text-invert: $grey-darker
$text-light: $grey
$text-strong: $white
+ // Code colors
+ $code: $red
+ $code-background: $background
+ $pre: $text
+ $pre-background: $background
// Link colors
$link-hover: $white
$link-hover-border: $grey-dark
.bd-scheme-light
display: none
\: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}
+ --#{$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: var(--#{$prefix}-scheme-main-bis)
+ background-color: $scheme-main-bis
&.has-shadow
box-shadow: none
+ .navbar-burger
+ color: $text
+ .navbar-item,
+ .navbar-link
+ color: $text
+ a.navbar-item,
+ .navbar-link
+ &:focus,
+ &:focus-within,
+ &:hover,
+ &.is-active
+ background-color: $scheme-main-bis
+ color: $link
+ .navbar-divider
+ background-color: $background
+ +until($navbar-breakpoint)
+ .navbar-menu
+ background-color: $scheme-main
+ box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
+ +from($navbar-breakpoint)
+ .navbar-dropdown
+ background-color: $scheme-main-bis
+ border-top-color: $border
+ box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
+ a.navbar-item
+ &:focus,
+ &:hover
+ background-color: $background
+ color: $scheme-invert
+ &.is-active
+ background-color: $background
+ color: $white
+ a.navbar-item,
+ .navbar-link
+ &.is-active
+ color: $white
+ &.is-active:not(:focus)
+ background-color: $background
+ .navbar-item.has-dropdown
+ &:focus,
+ &:hover,
+ &.is-active
+ .navbar-link
+ background-color: $background
+ .card
+ background-color: $scheme-main-bis
+ box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+ .card-header
+ box-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1)
+ .dropdown-content
+ background-color: $scheme-main-bis
+ box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+ .media .media,
+ .media + .media
+ border-top-color: rgba($border, 0.5)
+ .pagination-previous,
+ .pagination-next,
+ .pagination-link
+ &:active
+ box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2)
+ .panel
+ background-color: $scheme-main-bis
+ box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+ .box
+ box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+ a.box
+ &:hover,
+ &:focus
+ box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
+ &:active
+ box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
html
- background-color: var(--#{$prefix}-scheme-main)
+ background-color: var(--#{$prefix}scheme-main)
body
- color: var(--#{$prefix}-text)
+ color: var(--#{$prefix}text)
a
- color: var(--#{$prefix}-link)
+ color: var(--#{$prefix}link)
&:hover
- color: var(--#{$prefix}-link-hover)
+ color: var(--#{$prefix}link-hover)
code
- background-color: var(--#{$prefix}-code-background)
- color: var(--#{$prefix}-code)
+ background-color: var(--#{$prefix}code-background)
+ color: var(--#{$prefix}code)
hr
- background-color: var(--#{$prefix}-background)
+ background-color: var(--#{$prefix}background)
strong
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
pre
- background-color: var(--#{$prefix}-pre-background)
- color: var(--#{$prefix}-pre)
+ background-color: var(--#{$prefix}pre-background)
+ color: var(--#{$prefix}pre)
table
th
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
+
+// Components
+.breadcrumb
+ a
+ color: var(--#{$prefix}link)
+ &:hover
+ color: var(--#{$prefix}link-hover)
+ li
+ &.is-active
+ a
+ color: var(--#{$prefix}text-strong)
+ & + li::before
+ color: var(--#{$prefix}border-hover)
+
+.card
+ // background-color: var(--#{$prefix}scheme-main)
+ color: var(--#{$prefix}text)
+
+.card-header-title
+ color: var(--#{$prefix}text-strong)
+
+.card-footer
+ border-top-color: var(--#{$prefix}border-light)
+
+.card-footer-item
+ &:not(:last-child)
+ border-right-color: var(--#{$prefix}border-light)
+
+.dropdown-content
+ // background-color: var(--#{$prefix}scheme-main)
+
+.dropdown-item
+ color: var(--#{$prefix}text)
+
+a.dropdown-item,
+button.dropdown-item
+ &:hover
+ background-color: var(--#{$prefix}background)
+ color: var(--#{$prefix}scheme-invert)
+ &.is-active
+ background-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link-invert)
+
+.dropdown-divider
+ background-color: var(--#{$prefix}border-light)
+
+.menu-list
+ a
+ color: var(--#{$prefix}text)
+ &:hover
+ background-color: var(--#{$prefix}background)
+ color: var(--#{$prefix}text-strong)
+ &.is-active
+ background-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link-invert)
+ li
+ ul
+ border-left-color: var(--#{$prefix}border)
+
+.menu-label
+ color: var(--#{$prefix}text-light)
+
+// .message
+// background-color: var(--#{$prefix}background)
+
+// .message-header
+// background-color: var(--#{$prefix}text)
+// color: var(--#{$prefix}text-invert)
+
+// .message-body
+// border-color: var(--#{$prefix}border)
+// color: var(--#{$prefix}text)
+// code,
+// pre
+// background-color: var(--#{$prefix}scheme-main)
+
+.modal-card-head,
+.modal-card-foot
+ background-color: var(--#{$prefix}background)
+
+.modal-card-head
+ border-bottom-color: var(--#{$prefix}border)
+
+.modal-card-title
+ color: var(--#{$prefix}text-strong)
+
+.modal-card-foot
+ border-top-color: var(--#{$prefix}border)
+
+.modal-card-body
+ background-color: var(--#{$prefix}scheme-main)
+
+// .navbar
+// background-color: var(--#{$prefix}scheme-main)
+
+// .navbar-burger
+// color: var(--#{$prefix}text)
+
+// .navbar-item,
+// .navbar-link
+// color: var(--#{$prefix}text)
+
+// a.navbar-item,
+// .navbar-link
+// cursor: pointer
+// &:focus,
+// &:focus-within,
+// &:hover,
+// &.is-active
+// background-color: var(--#{$prefix}scheme-main-bis)
+// color: var(--#{$prefix}link)
+
+.pagination-previous,
+.pagination-next,
+.pagination-link
+ border-color: var(--#{$prefix}border)
+ color: var(--#{$prefix}text-strong)
+ &:hover
+ border-color: var(--#{$prefix}link-hover-border)
+ color: var(--#{$prefix}link-hover)
+ &:focus
+ border-color: var(--#{$prefix}link-focus-border)
+ &[disabled]
+ background-color: var(--#{$prefix}border)
+ border-color: var(--#{$prefix}border)
+ color: var(--#{$prefix}text-light)
+
+.pagination-link
+ &.is-current
+ background-color: var(--#{$prefix}link)
+ border-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link-invert)
+
+.pagination-ellipsis
+ color: var(--#{$prefix}border-hover)
+
+.panel-tabs,
+.panel-block
+ &:not(:last-child)
+ border-bottom-color: var(--#{$prefix}border-light)
+
+.panel-heading
+ background-color: var(--#{$prefix}border-light)
+ color: var(--#{$prefix}text-strong)
+
+.panel-tabs
+ a
+ border-bottom-color: var(--#{$prefix}border)
+ &.is-active
+ border-bottom-color: var(--#{$prefix}link-active-border)
+ color: var(--#{$prefix}link-active)
+
+.panel-list
+ a
+ color: var(--#{$prefix}text)
+ &:hover
+ color: var(--#{$prefix}link)
+
+.panel-block
+ color: var(--#{$prefix}text-strong)
+ &.is-active
+ border-left-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link-active)
+ .panel-icon
+ color: var(--#{$prefix}link)
+
+a.panel-block,
+label.panel-block
+ &:hover
+ background-color: var(--#{$prefix}background)
+
+.panel-icon
+ color: var(--#{$prefix}text-light)
+
+.tabs
+ a
+ border-bottom-color: var(--#{$prefix}border)
+ color: var(--#{$prefix}text)
+ &:hover
+ border-bottom-color: var(--#{$prefix}text-strong)
+ color: var(--#{$prefix}text-strong)
+ li
+ &.is-active
+ a
+ border-bottom-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link)
+ ul
+ border-bottom-color: var(--#{$prefix}border)
+ &.is-boxed
+ a
+ &:hover
+ background-color: var(--#{$prefix}background)
+ border-bottom-color: var(--#{$prefix}border)
+ li
+ &.is-active
+ a
+ background-color: var(--#{$prefix}scheme-main)
+ border-color: var(--#{$prefix}border)
+ &.is-toggle
+ a
+ border-color: var(--#{$prefix}border)
+ &:hover
+ background-color: var(--#{$prefix}background)
+ border-color: var(--#{$prefix}border-hover)
+ li
+ &.is-active
+ a
+ background-color: var(--#{$prefix}link)
+ border-color: var(--#{$prefix}link)
+ color: var(--#{$prefix}link-invert)
+
+// Elements
+.box
+ background-color: var(--#{$prefix}scheme-main)
+ color: var(--#{$prefix}text)
.title
- color: var(--#{$prefix}-text-strong)
+ color: var(--#{$prefix}text-strong)
.subtitle
- color: var(--#{$prefix}-text)
+ color: var(--#{$prefix}text)
strong
- 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)
+ background-color: var(--#{$prefix}scheme-main-bis)
//
// 3. Assign CSS vars to elements/components
// html
-// background-color: var(--#{$prefix}-scheme-main)
+// background-color: var(--#{$prefix}scheme-main)
//
%center
justify-content: center
%bd-box
- background-color: var(--#{$prefix}-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
}
:root {
- --bulma--white: white;
- --bulma--black: #0a0a0a;
- --bulma--black-transparent: rgba(0, 0, 0, 0.7);
+ --bulma-white: white;
+ --bulma-black: #0a0a0a;
+ --bulma-black-transparent: rgba(0, 0, 0, 0.7);
--bulma-primary-h: 171deg;
--bulma-primary-s: 100%;
--bulma-primary-l: 41%;
--bulma-primary: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), calc(var(--bulma-primary-l)));
--bulma-primary-hover: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), calc(var(--bulma-primary-l) - 5%));
--bulma-primary-active: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), calc(var(--bulma-primary-l) - 10%));
- --bulma-primary-invert: var(--bulma--white);
+ --bulma-primary-invert: var(--bulma-white);
--bulma-primary-light: #ebfffc;
--bulma-primary-light-hover: #d1fff8;
--bulma-primary-light-active: #b8fff4;
--bulma-link: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), calc(var(--bulma-link-l)));
--bulma-link-hover: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), calc(var(--bulma-link-l) - 5%));
--bulma-link-active: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), calc(var(--bulma-link-l) - 10%));
- --bulma-link-invert: var(--bulma--white);
+ --bulma-link-invert: var(--bulma-white);
--bulma-link-light: #eef3fc;
--bulma-link-light-hover: #d8e4f8;
--bulma-link-light-active: #c2d5f5;
--bulma-info: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), calc(var(--bulma-info-l)));
--bulma-info-hover: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), calc(var(--bulma-info-l) - 5%));
--bulma-info-active: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), calc(var(--bulma-info-l) - 10%));
- --bulma-info-invert: var(--bulma--white);
+ --bulma-info-invert: var(--bulma-white);
--bulma-info-light: #eef6fc;
--bulma-info-light-hover: #d8ebf8;
--bulma-info-light-active: #c2e0f5;
--bulma-success: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), calc(var(--bulma-success-l)));
--bulma-success-hover: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), calc(var(--bulma-success-l) - 5%));
--bulma-success-active: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), calc(var(--bulma-success-l) - 10%));
- --bulma-success-invert: var(--bulma--white);
+ --bulma-success-invert: var(--bulma-white);
--bulma-success-light: #effaf3;
--bulma-success-light-hover: #dcf4e4;
--bulma-success-light-active: #c8eed6;
--bulma-warning: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), calc(var(--bulma-warning-l)));
--bulma-warning-hover: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), calc(var(--bulma-warning-l) - 5%));
--bulma-warning-active: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), calc(var(--bulma-warning-l) - 10%));
- --bulma-warning-invert: var(--bulma--black-transparent);
+ --bulma-warning-invert: var(--bulma-black-transparent);
--bulma-warning-light: #fffbeb;
--bulma-warning-light-hover: #fff6d1;
--bulma-warning-light-active: #fff1b8;
--bulma-danger: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), calc(var(--bulma-danger-l)));
--bulma-danger-hover: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), calc(var(--bulma-danger-l) - 5%));
--bulma-danger-active: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), calc(var(--bulma-danger-l) - 10%));
- --bulma-danger-invert: var(--bulma--white);
+ --bulma-danger-invert: var(--bulma-white);
--bulma-danger-light: #feecf0;
--bulma-danger-light-hover: #fcd4dc;
--bulma-danger-light-active: #fabdc9;
--bulma-light: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l)));
--bulma-light-hover: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 5%));
--bulma-light-active: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 10%));
- --bulma-light-invert: var(--bulma--black-transparent);
+ --bulma-light-invert: var(--bulma-black-transparent);
--bulma-light-light: whitesmoke;
--bulma-light-light-hover: #e8e8e8;
--bulma-light-light-active: #dbdbdb;
--bulma-dark: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l)));
--bulma-dark-hover: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 5%));
--bulma-dark-active: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 10%));
- --bulma-dark-invert: var(--bulma--white);
+ --bulma-dark-invert: var(--bulma-white);
--bulma-dark-light: whitesmoke;
--bulma-dark-light-hover: #e8e8e8;
--bulma-dark-light-active: #dbdbdb;
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;
+ --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: #363636;
+ --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: #242424;
+ --bulma-pre: #b5b5b5;
+ --bulma-pre-background: #242424;
+ --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);
+ background-color: #121212;
}
.bd-navbar.has-shadow {
box-shadow: none;
}
+ .bd-navbar .navbar-burger {
+ color: #b5b5b5;
+ }
+ .bd-navbar .navbar-item,
+ .bd-navbar .navbar-link {
+ color: #b5b5b5;
+ }
+ .bd-navbar a.navbar-item:focus, .bd-navbar a.navbar-item:focus-within, .bd-navbar a.navbar-item:hover, .bd-navbar a.navbar-item.is-active,
+ .bd-navbar .navbar-link:focus,
+ .bd-navbar .navbar-link:focus-within,
+ .bd-navbar .navbar-link:hover,
+ .bd-navbar .navbar-link.is-active {
+ background-color: #121212;
+ color: #3273dc;
+ }
+ .bd-navbar .navbar-divider {
+ background-color: #242424;
+ }
+}
+
+@media screen and (prefers-color-scheme: dark) and (max-width: 1023px) {
+ .bd-navbar .navbar-menu {
+ background-color: #0a0a0a;
+ box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1);
+ }
+}
+
+@media screen and (prefers-color-scheme: dark) and (min-width: 1024px) {
+ .bd-navbar .navbar-dropdown {
+ background-color: #121212;
+ border-top-color: #363636;
+ box-shadow: 0 8px 8px rgba(255, 255, 255, 0.1);
+ }
+ .bd-navbar .navbar-dropdown a.navbar-item:focus, .bd-navbar .navbar-dropdown a.navbar-item:hover {
+ background-color: #242424;
+ color: white;
+ }
+ .bd-navbar .navbar-dropdown a.navbar-item.is-active {
+ background-color: #242424;
+ color: white;
+ }
+ .bd-navbar a.navbar-item.is-active,
+ .bd-navbar .navbar-link.is-active {
+ color: white;
+ }
+ .bd-navbar a.navbar-item.is-active:not(:focus),
+ .bd-navbar .navbar-link.is-active:not(:focus) {
+ background-color: #242424;
+ }
+ .bd-navbar .navbar-item.has-dropdown:focus .navbar-link, .bd-navbar .navbar-item.has-dropdown:hover .navbar-link, .bd-navbar .navbar-item.has-dropdown.is-active .navbar-link {
+ background-color: #242424;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .card {
+ background-color: #121212;
+ box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+ }
+ .card-header {
+ box-shadow: 0 0.125em 0.25em rgba(255, 255, 255, 0.1);
+ }
+ .dropdown-content {
+ background-color: #121212;
+ box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+ }
+ .media .media,
+ .media + .media {
+ border-top-color: rgba(54, 54, 54, 0.5);
+ }
+ .pagination-previous:active,
+ .pagination-next:active,
+ .pagination-link:active {
+ box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
+ }
+ .panel {
+ background-color: #121212;
+ box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+ }
+ .box {
+ box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+ }
+ a.box:hover, a.box:focus {
+ box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0 0 1px #3273dc;
+ }
+ a.box:active {
+ box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 0 0 1px #3273dc;
+ }
}
html {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
}
body {
- color: var(--bulma--text);
+ color: var(--bulma-text);
}
a {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
a:hover {
- color: var(--bulma--link-hover);
+ color: var(--bulma-link-hover);
}
code {
- background-color: var(--bulma--code-background);
- color: var(--bulma--code);
+ background-color: var(--bulma-code-background);
+ color: var(--bulma-code);
}
hr {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
}
strong {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
}
pre {
- background-color: var(--bulma--pre-background);
- color: var(--bulma--pre);
+ background-color: var(--bulma-pre-background);
+ color: var(--bulma-pre);
}
table th {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
+}
+
+.breadcrumb a {
+ color: var(--bulma-link);
+}
+
+.breadcrumb a:hover {
+ color: var(--bulma-link-hover);
+}
+
+.breadcrumb li.is-active a {
+ color: var(--bulma-text-strong);
+}
+
+.breadcrumb li + li::before {
+ color: var(--bulma-border-hover);
+}
+
+.card {
+ color: var(--bulma-text);
+}
+
+.card-header-title {
+ color: var(--bulma-text-strong);
+}
+
+.card-footer {
+ border-top-color: var(--bulma-border-light);
+}
+
+.card-footer-item:not(:last-child) {
+ border-right-color: var(--bulma-border-light);
+}
+
+.dropdown-item {
+ color: var(--bulma-text);
+}
+
+a.dropdown-item:hover,
+button.dropdown-item:hover {
+ background-color: var(--bulma-background);
+ color: var(--bulma-scheme-invert);
+}
+
+a.dropdown-item.is-active,
+button.dropdown-item.is-active {
+ background-color: var(--bulma-link);
+ color: var(--bulma-link-invert);
+}
+
+.dropdown-divider {
+ background-color: var(--bulma-border-light);
+}
+
+.menu-list a {
+ color: var(--bulma-text);
+}
+
+.menu-list a:hover {
+ background-color: var(--bulma-background);
+ color: var(--bulma-text-strong);
+}
+
+.menu-list a.is-active {
+ background-color: var(--bulma-link);
+ color: var(--bulma-link-invert);
+}
+
+.menu-list li ul {
+ border-left-color: var(--bulma-border);
+}
+
+.menu-label {
+ color: var(--bulma-text-light);
+}
+
+.modal-card-head,
+.modal-card-foot {
+ background-color: var(--bulma-background);
+}
+
+.modal-card-head {
+ border-bottom-color: var(--bulma-border);
+}
+
+.modal-card-title {
+ color: var(--bulma-text-strong);
+}
+
+.modal-card-foot {
+ border-top-color: var(--bulma-border);
+}
+
+.modal-card-body {
+ background-color: var(--bulma-scheme-main);
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+ border-color: var(--bulma-border);
+ color: var(--bulma-text-strong);
+}
+
+.pagination-previous:hover,
+.pagination-next:hover,
+.pagination-link:hover {
+ border-color: var(--bulma-link-hover-border);
+ color: var(--bulma-link-hover);
+}
+
+.pagination-previous:focus,
+.pagination-next:focus,
+.pagination-link:focus {
+ border-color: var(--bulma-link-focus-border);
+}
+
+.pagination-previous[disabled],
+.pagination-next[disabled],
+.pagination-link[disabled] {
+ background-color: var(--bulma-border);
+ border-color: var(--bulma-border);
+ color: var(--bulma-text-light);
+}
+
+.pagination-link.is-current {
+ background-color: var(--bulma-link);
+ border-color: var(--bulma-link);
+ color: var(--bulma-link-invert);
+}
+
+.pagination-ellipsis {
+ color: var(--bulma-border-hover);
+}
+
+.panel-tabs:not(:last-child),
+.panel-block:not(:last-child) {
+ border-bottom-color: var(--bulma-border-light);
+}
+
+.panel-heading {
+ background-color: var(--bulma-border-light);
+ color: var(--bulma-text-strong);
+}
+
+.panel-tabs a {
+ border-bottom-color: var(--bulma-border);
+}
+
+.panel-tabs a.is-active {
+ border-bottom-color: var(--bulma-link-active-border);
+ color: var(--bulma-link-active);
+}
+
+.panel-list a {
+ color: var(--bulma-text);
+}
+
+.panel-list a:hover {
+ color: var(--bulma-link);
+}
+
+.panel-block {
+ color: var(--bulma-text-strong);
+}
+
+.panel-block.is-active {
+ border-left-color: var(--bulma-link);
+ color: var(--bulma-link-active);
+}
+
+.panel-block.is-active .panel-icon {
+ color: var(--bulma-link);
+}
+
+a.panel-block:hover,
+label.panel-block:hover {
+ background-color: var(--bulma-background);
+}
+
+.panel-icon {
+ color: var(--bulma-text-light);
+}
+
+.tabs a {
+ border-bottom-color: var(--bulma-border);
+ color: var(--bulma-text);
+}
+
+.tabs a:hover {
+ border-bottom-color: var(--bulma-text-strong);
+ color: var(--bulma-text-strong);
+}
+
+.tabs li.is-active a {
+ border-bottom-color: var(--bulma-link);
+ color: var(--bulma-link);
+}
+
+.tabs ul {
+ border-bottom-color: var(--bulma-border);
+}
+
+.tabs.is-boxed a:hover {
+ background-color: var(--bulma-background);
+ border-bottom-color: var(--bulma-border);
+}
+
+.tabs.is-boxed li.is-active a {
+ background-color: var(--bulma-scheme-main);
+ border-color: var(--bulma-border);
+}
+
+.tabs.is-toggle a {
+ border-color: var(--bulma-border);
+}
+
+.tabs.is-toggle a:hover {
+ background-color: var(--bulma-background);
+ border-color: var(--bulma-border-hover);
+}
+
+.tabs.is-toggle li.is-active a {
+ background-color: var(--bulma-link);
+ border-color: var(--bulma-link);
+ color: var(--bulma-link-invert);
+}
+
+.box {
+ background-color: var(--bulma-scheme-main);
+ color: var(--bulma-text);
}
.title {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
}
.subtitle {
- color: var(--bulma--text);
+ color: var(--bulma-text);
}
.subtitle strong {
- color: var(--bulma--text-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);
+ background-color: var(--bulma-scheme-main-bis);
}
.bd-columns-tool, .bd-footer-sponsor a, .bd-footer-donation-action, .bd-footer-star-figure, .bd-minis-title, .bd-minis-link, .bd-mini {
}
.bd-footer-support, .bd-footer-star, .bd-book-content {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
border-radius: 6px;
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.05);
display: block;
.bd-figure {
align-items: center;
- border: 2px solid var(--bulma--scheme-main-ter);
+ border: 2px solid var(--bulma-scheme-main-ter);
border-radius: 4px;
display: flex;
flex-direction: column;
.bd-figure figcaption {
align-self: stretch;
- background-color: var(--bulma--scheme-main-ter);
- color: var(--bulma--text-light);
+ background-color: var(--bulma-scheme-main-ter);
+ color: var(--bulma-text-light);
font-size: 0.75rem;
padding: 1em;
}
.bd-prev-next {
align-items: flex-start;
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
display: none;
flex-grow: 0;
flex-shrink: 0;
}
.bd-prev-next a:hover {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
}
.bd-prev-next-bis {
}
.bd-header .subtitle {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
}
.bd-header .subtitle strong {
}
.bd-tabs .tabs ul,
.bd-tabs .tabs a {
- border-bottom-color: var(--bulma--scheme-main-ter);
+ border-bottom-color: var(--bulma-scheme-main-ter);
border-bottom-width: 2px;
}
.bd-tabs .tabs a {
margin-bottom: -2px;
}
.bd-tabs .tabs li:not(.is-active) a:hover {
- border-bottom-color: var(--bulma--border);
+ border-bottom-color: var(--bulma-border);
}
.bd-tabs .tabs ul {
flex-wrap: wrap;
.bd-side,
.bd-side-background {
- background-color: var(--bulma--scheme-main-bis);
+ background-color: var(--bulma-scheme-main-bis);
}
.bd-side {
}
.bd-category-list li.is-past a, .bd-anchors-list li.is-past a {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
}
.bd-category-list li.is-current a, .bd-anchors-list li.is-current a {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-category-list a, .bd-anchors-list a {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
}
.bd-category-list a:hover, .bd-anchors-list a:hover {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-category a:hover {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-category:not(:last-child) {
right: 0;
top: 0;
align-items: center;
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
display: flex;
justify-content: flex-end;
}
}
.bd-category-name {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
position: relative;
}
.bd-category-name.is-active {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-category-name .bd-mini-tag {
}
.bd-anchors-title {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.bd-anchors-list a {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
}
@media screen and (max-width: 1023px) {
display: flex;
}
.bd-lead {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
overflow: hidden;
flex-grow: 1;
flex-shrink: 1;
}
.highlight {
- background-color: var(--bulma--pre-background);
+ background-color: var(--bulma-pre-background);
border-radius: 6px;
color: #586e75;
}
}
.bd-notice-body a {
- border-bottom: 1px solid rgba(var(--bulma--scheme-main), 0.5);
+ border-bottom: 1px solid rgba(var(--bulma-scheme-main), 0.5);
padding-bottom: 2px;
}
.bd-notice-body a:hover {
- border-bottom-color: var(--bulma--scheme-main);
+ border-bottom-color: var(--bulma-scheme-main);
}
.bd-notice-body span {
}
#carbon:hover {
- background-color: var(--bulma--scheme-main);
- box-shadow: 0 0 0 0.75rem var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
+ box-shadow: 0 0 0 0.75rem var(--bulma-scheme-main);
}
@media screen and (min-width: 769px), print {
}
#carbonads .carbon-img:hover + .carbon-text {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
#carbonads .carbon-img:active {
#carbonads .carbon-text {
display: block;
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
line-height: 20px;
min-height: 100px;
padding: 0 0 20px calc(130px + 1rem);
}
#carbonads .carbon-text:hover {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
#carbonads .carbon-poweredby {
bottom: 0;
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
display: inline;
font-size: 0.75rem;
line-height: 20px;
}
.bd-index-header a:hover strong {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-index-header strong {
}
.bd-index-header .subtitle {
- color: var(--bulma--border-hover) !important;
+ color: var(--bulma-border-hover) !important;
}
.bd-index-header .subtitle strong {
}
.bd-index-custom-title {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
}
.bd-index-custom-example {
.bd-index-custom.bd-is-after .button.is-primary {
background-color: #8A4D76;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-index-custom.bd-is-after .button.is-primary:hover {
.bd-index-custom.bd-is-after .button.is-link {
background-color: #FA7C91;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-index-custom.bd-is-after .button.is-link:hover {
.bd-index-custom.bd-is-after ::-moz-selection {
background-color: #FA7C91;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-index-custom.bd-is-after ::selection {
background-color: #FA7C91;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-index-fullscreen .tabs a {
- color: var(--bulma--border-hover) !important;
+ color: var(--bulma-border-hover) !important;
}
#grid .notification {
}
.bd-focus-item .subtitle {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
position: relative;
}
position: absolute;
right: 0;
top: 0;
- background-color: var(--bulma--scheme-main-bis);
+ background-color: var(--bulma-scheme-main-bis);
border-radius: 6px;
content: "";
display: block;
}
.bd-focus-item:hover .subtitle {
- color: var(--bulma--text);
+ color: var(--bulma-text);
}
.bd-focus-item:nth-child(1):hover .title {
}
.bd-focus-item:nth-child(3):hover .title {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-focus-item:nth-child(4):hover .title {
- color: var(--bulma--scheme-invert);
+ color: var(--bulma-scheme-invert);
}
.bd-focus-icon {
}
.intro-npm .intro-npm-copy.is-success, .intro-npm .intro-npm-copy.is-error {
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
pointer-events: none;
text-decoration: none;
}
.intro-npm ::-moz-selection {
background: #ffdd57;
- color: var(--bulma--scheme-invert-ter);
+ color: var(--bulma-scheme-invert-ter);
}
.intro-npm ::selection {
background: #ffdd57;
- color: var(--bulma--scheme-invert-ter);
+ color: var(--bulma-scheme-invert-ter);
}
.intro-buttons {
}
.intro-video {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
.intro-author {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
font-size: 0.75rem;
margin-top: 40px;
text-align: center;
}
.intro-author a {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
}
.intro-author a:hover {
#github:hover {
background: #333333;
border-color: #333333;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-tw-button {
background-color: #55acee;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
border-color: transparent !important;
}
.bd-tw-button:hover {
background-color: #49a6ed;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-tw-button:active, .bd-tw-button:focus {
background-color: #3ea1ec;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
#moreDropdown .navbar-item {
}
.bd-footer-title {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-size: 1.25rem;
line-height: 1.25;
margin-bottom: 0.5rem;
}
.bd-footer-subtitle {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
margin-top: -0.5rem;
transition-duration: 86ms;
transition-property: color;
}
.bd-footer-tsp {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
margin-top: 1.5rem;
}
}
.bd-footer-support {
- border-top: 2px solid var(--bulma--scheme-main-ter);
+ border-top: 2px solid var(--bulma-scheme-main-ter);
box-shadow: none;
padding: 3rem;
}
}
.bd-footer-donation-title {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
margin-bottom: 0.5rem;
}
}
.bd-footer-star:hover {
- box-shadow: 0 3rem 3rem -1.25rem rgba(var(--bulma--scheme-invert), 0.1);
+ box-shadow: 0 3rem 3rem -1.25rem rgba(var(--bulma-scheme-invert), 0.1);
transform: translateY(-0.5rem);
}
.bd-footer-star:hover .bd-footer-title,
.bd-footer-star:hover .bd-footer-subtitle {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-footer-star.bd-is-expo, .bd-footer-star.bd-is-love {
}
.bd-footer-links a:hover {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-footer-link-title {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-size: 1.25rem;
font-weight: 600;
}
}
.bd-footer-link.bd-is-more a:not(:hover) {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
}
.bd-footer-link.bd-has-subtitle a {
}
.bd-footer-link.bd-has-subtitle a:not(:hover) em {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
}
@media screen and (max-width: 768px) {
.bd-link {
border-radius: 6px;
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
display: block;
font-size: 1.25rem;
padding: 1rem 3rem 1.5rem 5rem;
}
.bd-link:hover {
- background-color: var(--bulma--scheme-main-bis);
+ background-color: var(--bulma-scheme-main-bis);
}
.bd-link-surtitle {
}
.bd-link-counter {
- color: var(--bulma--link);
+ color: var(--bulma-link);
display: block;
counter-increment: bd-links;
font-weight: 400;
}
.bd-link-name {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-size: 1.5rem;
font-weight: 600;
}
}
.bd-doc-title {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
}
.bd-doc-title a {
}
.bd-doc-title a:hover {
- color: var(--bulma--link);
+ color: var(--bulma-link);
}
.bd-doc-title:not(:last-child) {
}
.bd-view-all-versions {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
}
.bd-view-all-versions:hover {
}
.bd-feature-title {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
}
.bd-feature-title a {
border-bottom: 1px solid transparent;
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
}
.bd-feature-title a:hover {
}
.bd-notification {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
border-radius: 4px;
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
font-weight: 600;
padding: 1.25rem 0;
position: relative;
.bd-notification code,
.bd-notification pre {
- background-color: rgba(var(--bulma--scheme-invert), 0.2);
+ background-color: rgba(var(--bulma-scheme-invert), 0.2);
border-radius: 4px;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-notification pre code {
.bd-example,
.bd-structure,
.bd-snippet {
- border: 2px solid whitesmoke;
+ border: 2px solid var(--bulma-background);
position: relative;
}
position: absolute;
right: 0;
top: 0;
- background: rgba(var(--bulma--scheme-invert), 0.7);
+ background: rgba(var(--bulma-scheme-invert), 0.7);
background: whitesmoke;
border: 1px solid #dbdbdb;
content: "";
.highlight .bd-expand {
background: none;
border: none;
- color: var(--bulma--text);
+ color: var(--bulma-text);
cursor: pointer;
font-size: 0.625rem;
outline: none;
right: 0;
top: 0;
align-items: center;
- background-color: rgba(245, 245, 245, 0.7);
+ background-color: var(--bulma-background);
border: none;
- color: rgba(0, 0, 0, 0.5);
+ color: var(--bulma-scheme-invert);
cursor: pointer;
display: none;
font-size: 0.75rem;
justify-content: center;
+ opacity: 0.8;
width: 100%;
}
.highlight .bd-show strong {
color: currentColor;
font-weight: 600;
+ opacity: 1;
}
.highlight .bd-show:hover {
background-color: rgba(255, 221, 87, 0.8);
color: rgba(0, 0, 0, 0.7);
+ opacity: 1;
}
@media screen and (min-width: 769px), print {
}
.bd-callout {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
border-radius: 4px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
position: relative;
#_default_ .default-ad {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 2px;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
display: inline-block;
font-size: 10px;
font-weight: bold;
}
#_default_ > a {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
border-radius: 6px;
- box-shadow: 0 2px 3px rgba(var(--bulma--scheme-invert), 0.1), 0 0 0 1px rgba(var(--bulma--scheme-invert), 0.1);
- color: var(--bulma--text);
+ box-shadow: 0 2px 3px rgba(var(--bulma-scheme-invert), 0.1), 0 0 0 1px rgba(var(--bulma-scheme-invert), 0.1);
+ color: var(--bulma-text);
display: block;
line-height: 1.375;
margin-top: 15px;
}
#_default_ > a:hover, #_default_ > a:focus {
- box-shadow: 0 2px 3px rgba(var(--bulma--scheme-invert), 0.1), 0 0 0 1px var(--bulma--link);
+ box-shadow: 0 2px 3px rgba(var(--bulma-scheme-invert), 0.1), 0 0 0 1px var(--bulma-link);
}
#_default_ > a:active {
- box-shadow: inset 0 1px 2px rgba(var(--bulma--scheme-invert), 0.2), 0 0 0 1px var(--bulma--link);
+ box-shadow: inset 0 1px 2px rgba(var(--bulma-scheme-invert), 0.2), 0 0 0 1px var(--bulma-link);
}
#_default_ > a span {
}
#_default_ > a .default-title {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
display: inline;
font-weight: 700;
}
}
.bd-tws-home {
- background-color: var(--bulma--scheme-main-bis);
+ background-color: var(--bulma-scheme-main-bis);
}
.bd-tw {
- background-color: var(--bulma--scheme-main-bis);
+ background-color: var(--bulma-scheme-main-bis);
border-radius: 6px;
color: #697882;
flex-shrink: 0;
}
.bd-tw.bd-is-white {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
}
.bd-tw-header {
.bd-tw-author {
align-items: center;
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
display: flex;
line-height: 1.2;
}
}
.bd-tw-fullname {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
display: block;
font-size: 16px;
font-weight: 700;
}
.bd-tw-content {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-size: 16px;
line-height: 1.4;
margin-top: 14px;
}
.twitter-tweet:not(.twitter-tweet-rendered) {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
border: 1px solid #e1e8ed;
border-radius: 5px;
color: #697882;
}
.twitter-tweet:not(.twitter-tweet-rendered) p {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-size: 16px;
margin-bottom: 3.2px;
}
}
.bd-expo {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
padding: 1.5rem;
}
}
.bd-website-overlay {
- background-color: var(--bulma--scheme-invert);
+ background-color: var(--bulma-scheme-invert);
opacity: 0;
transition: opacity 200ms ease-out;
}
}
.bd-testimonials {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
}
.bd-testimonial {
}
.bd-testimonial-tweet {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
}
.bd-more-loves {
.hero.bd-is-love .title,
.hero.bd-is-love .subtitle {
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
@keyframes rainbow {
}
.bd-shoutout {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
padding: 2rem;
text-align: center;
}
}
.bd-bootstrap-comparison .table .bd-is-empty {
- background-color: var(--bulma--background);
- color: var(--bulma--text-light);
+ background-color: var(--bulma-background);
+ color: var(--bulma-text-light);
}
.bd-bootstrap-comparison .table .bd-is-unique {
background-color: rgba(72, 199, 116, 0.25);
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-weight: 700;
}
}
.bd-klmn-gap {
- background-color: var(--bulma--background);
+ background-color: var(--bulma-background);
border-radius: 4px;
color: #f14668;
font-family: monospace;
.bd-klmn-gap.bd-is-selected {
background-color: #48c774;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-klmn-columns:last-child .bd-notification {
.bd-side-sponsor-label,
.bd-banner-label {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
font-size: 0.75rem;
margin-bottom: 0.75rem;
}
.bd-banner.is-patreon {
background-color: #052d49;
- color: var(--bulma--scheme-main);
+ color: var(--bulma-scheme-main);
}
.bd-banner .button {
}
.bd-banner:hover {
- border-color: var(--bulma--link);
- color: var(--bulma--link);
+ border-color: var(--bulma-link);
+ color: var(--bulma-link);
}
.bd-banner:hover .bd-banner-title {
}
.bd-banner-title {
- color: var(--bulma--text-strong);
+ color: var(--bulma-text-strong);
font-size: 1.25em;
font-weight: 600;
line-height: 1.25;
}
.bd-partner-sponsor.is-text {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
font-size: 0.75em;
line-height: 1.25;
min-height: 0;
}
.bd-partnrs {
- background-color: var(--bulma--scheme-main-bis);
+ background-color: var(--bulma-scheme-main-bis);
}
.bd-partnrs #carbonads .carbon-text {
}
.bd-partner-title, .bd-minis-title {
- color: var(--bulma--border-hover);
+ color: var(--bulma-border-hover);
font-size: 0.875rem;
margin-bottom: 1rem;
}
}
.bd-minis-link {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
}
.bd-minis-link .icon {
}
.bd-minis-link strong {
- color: var(--bulma--text-light);
+ color: var(--bulma-text-light);
margin-left: 0.25em;
}
}
.bd-book-content {
- box-shadow: 0 3rem 3rem -1rem rgba(var(--bulma--scheme-invert), 0.2);
+ box-shadow: 0 3rem 3rem -1rem rgba(var(--bulma-scheme-invert), 0.2);
max-width: 520px;
padding: 3rem;
}
position: absolute;
right: 0;
top: 0;
- background-color: rgba(var(--bulma--scheme-invert), 0.86);
+ background-color: rgba(var(--bulma-scheme-invert), 0.86);
}
.bd-book-modal .bd-book-modal-background,
display: none;
}
.bd-book-modal-column {
- background-color: var(--bulma--scheme-main);
+ background-color: var(--bulma-scheme-main);
position: relative;
}
.bd-book-modal-column.bd-is-cover {
}
.native-flex:hover .native-cta {
- box-shadow: 0 1rem 2rem 0 rgba(var(--bulma--scheme-invert), 0.1);
+ box-shadow: 0 1rem 2rem 0 rgba(var(--bulma-scheme-invert), 0.1);
transform: translateY(-0.25rem);
}
.native-cta {
border: none;
- box-shadow: 0 0.5rem 1rem 0 rgba(var(--bulma--scheme-invert), 0.2);
+ box-shadow: 0 0.5rem 1rem 0 rgba(var(--bulma-scheme-invert), 0.2);
flex-grow: 0;
flex-shrink: 0;
font-weight: 600;
projects / thirdparty / bulma.git / commitdiff
