compose-theme/assets/sass/_syntax.sass

251 lines
4.1 KiB
Sass
Raw Permalink Normal View History

2024-07-26 17:08:59 +02:00
@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