251 lines
4.1 KiB
Sass
251 lines
4.1 KiB
Sass
|
@keyframes pulse
|
||
|
0%
|
||
|
opacity: 1
|
||
|
75%
|
||
|
opacity: 0.1
|
||
|
100%
|
||
|
opacity: 1
|
||
|
|
||
|
code
|
||
|
font-size: 15px
|
||
|
font-weight: 400
|
||
|
overflow-y: hidden
|
||
|
display: block
|
||
|
font-family: 'Monaco', monospace
|
||
|
word-break: break-all
|
||
|
&.noClass
|
||
|
color: var(--inline-color)
|
||
|
display: inline
|
||
|
line-break: anywhere
|
||
|
.windows .highlight
|
||
|
overflow-x: hidden
|
||
|
&:hover
|
||
|
overflow-x: auto
|
||
|
|
||
|
.highlight
|
||
|
display: grid
|
||
|
width: 100%
|
||
|
border-radius: 0 0.2rem 0.2rem 0
|
||
|
overflow-x: auto
|
||
|
position: relative
|
||
|
&_wrap
|
||
|
display: grid
|
||
|
background: var(--code-bg) !important
|
||
|
border-radius: 0.5rem
|
||
|
position: relative
|
||
|
padding: 0 1rem
|
||
|
margin: 1.5rem auto 1rem auto
|
||
|
& &
|
||
|
margin: 0
|
||
|
padding: 0
|
||
|
& + &
|
||
|
margin-top: 2.25rem
|
||
|
&:hover > div
|
||
|
opacity: 1
|
||
|
.lang
|
||
|
position: absolute
|
||
|
top: 0
|
||
|
right: 0
|
||
|
text-align: right
|
||
|
width: 7.5rem
|
||
|
padding: 0.5rem 1rem
|
||
|
font-style: italic
|
||
|
text-transform: uppercase
|
||
|
font-size: 67%
|
||
|
opacity: 0.5
|
||
|
color: var(--text)
|
||
|
&:hover .lang
|
||
|
opacity: 0.1
|
||
|
& &
|
||
|
margin: 0
|
||
|
pre
|
||
|
color: var(--text) !important
|
||
|
border-radius: 4px
|
||
|
font-family: 'Monaco', monospace
|
||
|
padding-top: 1.5rem
|
||
|
padding-bottom: 2rem
|
||
|
|
||
|
table
|
||
|
display: grid
|
||
|
max-width: 100%
|
||
|
margin-bottom: 0
|
||
|
background: transparent
|
||
|
td, th
|
||
|
padding: 0
|
||
|
|
||
|
.lntd
|
||
|
width: 100%
|
||
|
border: none
|
||
|
&:first-child
|
||
|
&, pre
|
||
|
width: 2.5rem !important
|
||
|
padding-left: 0
|
||
|
padding-right: 0
|
||
|
color: rgba(255,255,255,0.5)
|
||
|
user-select: none
|
||
|
|
||
|
pre
|
||
|
width: 100%
|
||
|
display: flex
|
||
|
min-width: 0
|
||
|
align-items: center
|
||
|
flex-direction: column
|
||
|
|
||
|
.err
|
||
|
color: #a61717
|
||
|
.hl
|
||
|
width: 100%
|
||
|
background: var(--inline-color)
|
||
|
.ln, .lnt
|
||
|
margin-right: 0.75rem
|
||
|
padding: 0
|
||
|
transition: opacity 0.3s var(--ease)
|
||
|
&, span
|
||
|
color: var(--text)
|
||
|
opacity: 0.5
|
||
|
user-select: none
|
||
|
|
||
|
.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt
|
||
|
color: #6ab825
|
||
|
font-weight: 500
|
||
|
|
||
|
.kn, .kp
|
||
|
font-weight: 400
|
||
|
|
||
|
.nb, .no, .nv
|
||
|
color: #24909d
|
||
|
|
||
|
.nc, .nf, .nn
|
||
|
color: #447fcf
|
||
|
|
||
|
.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss
|
||
|
color: #ed9d13
|
||
|
|
||
|
.m, .mb, .mf, .mh, .mi, .il, .mo
|
||
|
color: #3677a9
|
||
|
|
||
|
.ow
|
||
|
color: #6ab825
|
||
|
font-weight: 500
|
||
|
|
||
|
.c, .ch, .cm, .c1
|
||
|
color: #999
|
||
|
font-style: italic
|
||
|
|
||
|
.cs
|
||
|
color: #e50808
|
||
|
background-color: #520000
|
||
|
font-weight: 500
|
||
|
|
||
|
.cp, .cpf
|
||
|
color: #cd2828
|
||
|
font-weight: 500
|
||
|
|
||
|
.gd, .gr
|
||
|
color: #d22323
|
||
|
|
||
|
.ge
|
||
|
font-style: italic
|
||
|
|
||
|
.gh, .gu, .nd, .na, .ne
|
||
|
color: #ffa500
|
||
|
font-weight: 500
|
||
|
|
||
|
.gi
|
||
|
color: #589819
|
||
|
|
||
|
.go
|
||
|
color: #ccc
|
||
|
|
||
|
.gp
|
||
|
color: #aaa
|
||
|
|
||
|
.gs
|
||
|
font-weight: 500
|
||
|
|
||
|
.gt
|
||
|
color: #d22323
|
||
|
.w
|
||
|
color: #666
|
||
|
|
||
|
.hljs
|
||
|
&-string
|
||
|
color: #6ab825
|
||
|
&-attr
|
||
|
color: #ed9d13
|
||
|
.p &-attr
|
||
|
color: var(--light)
|
||
|
|
||
|
.pre
|
||
|
&_wrap
|
||
|
white-space: pre-wrap
|
||
|
white-space: -moz-pre-wrap
|
||
|
white-space: -pre-wrap
|
||
|
white-space: -o-pre-wrap
|
||
|
word-wrap: break-word
|
||
|
|
||
|
&_nolines.ln
|
||
|
display: none
|
||
|
|
||
|
// crayon-like widget styles
|
||
|
.panel
|
||
|
&_box
|
||
|
display: inline-flex
|
||
|
perspective: 300px
|
||
|
grid-gap: 1rem
|
||
|
transition: opacity 0.3s var(--easing)
|
||
|
background: var(--code-bg)
|
||
|
padding: 0.5rem 1.5rem
|
||
|
border-radius: 2rem
|
||
|
align-items: center
|
||
|
position: absolute
|
||
|
right: 0rem
|
||
|
top: -2.1rem
|
||
|
opacity: 0
|
||
|
min-width: 0
|
||
|
&_icon
|
||
|
display: inline-flex
|
||
|
align-items: center
|
||
|
justify-content: center
|
||
|
cursor: pointer
|
||
|
padding: 0.1rem
|
||
|
transform-origin: 50% 50%
|
||
|
margin: 0
|
||
|
min-width: 0
|
||
|
&.active
|
||
|
animation: pulse 0.1s linear
|
||
|
svg
|
||
|
fill: var(--text)
|
||
|
width: 1.5rem
|
||
|
height: 1.5rem
|
||
|
&_hide
|
||
|
// hide icon if not needed
|
||
|
display: none
|
||
|
&_from
|
||
|
position: absolute
|
||
|
color: var(--theme)
|
||
|
bottom: 0
|
||
|
font-size: 1.5rem
|
||
|
font-weight: 500
|
||
|
padding: 0.5rem 0
|
||
|
cursor: pointer
|
||
|
letter-spacing: 0.1px
|
||
|
z-index: 19
|
||
|
&_expanded &_from
|
||
|
display: none
|
||
|
|
||
|
.shell
|
||
|
position: relative
|
||
|
// display: flex
|
||
|
// align-items: center
|
||
|
// gap: 0.5rem
|
||
|
&::before
|
||
|
content: "$"
|
||
|
position: relative
|
||
|
margin-right: 0.36rem
|
||
|
|
||
|
.line
|
||
|
&-flex
|
||
|
display: flex
|
||
|
min-width: 0
|