@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; @use "@styles/abstracts/placeholders"; .wrapper { --icon-size: #{fun.convert-px(30)}; display: flex; flex-flow: column nowrap; align-items: center; height: var(--btn-size); width: calc(var(--btn-size) * 1.2); background: var(--color-bg); position: relative; @include mix.media("screen") { @include mix.dimensions("sm") { background: inherit; } @include mix.dimensions("md") { width: unset; height: unset; } } } .label { --draw-border-thickness: #{fun.convert-px(5)}; --draw-border-color1: var(--color-primary-light); --draw-border-color2: var(--color-primary-lighter); flex: 1; display: flex; flex-flow: column nowrap; width: 100%; padding: var(--spacing-2xs); &:hover { @extend %draw-borders; } @include mix.media("screen") { @include mix.dimensions("md") { display: none; } } } .checkbox { position: absolute; // centered checkbox = btn-size - approximated checkbox size / 2 top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2); left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2); opacity: 0; cursor: pointer; &:hover { ~ .label { @extend %draw-borders; } } &:focus { ~ .label { @extend %draw-borders; } } @include mix.media("screen") { @include mix.dimensions("md") { display: none; } } } .nav { display: flex; flex-flow: column wrap; place-content: center; padding-bottom: var(--toolbar-size); position: fixed; bottom: 0; z-index: -1; background: var(--color-bg-opacity); box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark); text-align: center; opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.8s ease-in-out 0s; @include mix.media("screen") { @include mix.dimensions("sm") { padding-bottom: 0; position: absolute; bottom: auto; left: auto; right: auto; top: calc(var(--btn-size) + var(--spacing-sm)); z-index: unset; border-bottom-width: fun.convert-px(5); transform-origin: 50% -100%; } @include mix.dimensions("md") { background: transparent; border: none; box-shadow: none; position: relative; top: 0; } } } .list { @extend %reset-list; @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { display: grid; grid-template-columns: min-content min-content; max-height: calc(100vh - var(--toolbar-size)); } @include mix.dimensions("md") { display: flex; flex-flow: row wrap; align-items: center; gap: var(--spacing-2xs); } } } .link { --draw-border-thickness: #{fun.convert-px(4)}; --draw-border-color1: var(--color-primary-light); --draw-border-color2: var(--color-primary-lighter); display: block; min-width: fun.convert-px(85); padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs); background: var(--color-bg); background-repeat: no-repeat; font-size: var(--font-size-sm); font-variant: small-caps; font-weight: 600; text-decoration: none; @include mix.media("screen") { @include mix.dimensions("md") { margin: 0; background-color: inherit; border-radius: 8%; } } &:hover, &:focus { @extend %draw-borders; } &:focus { color: var(--color-primary-light); } &:active { --draw-border-color1: var(--color-primary-dark); --draw-border-color2: var(--color-primary-light); @extend %draw-borders; } &.current { background-image: linear-gradient(to right, transparent, transparent), linear-gradient(to bottom, transparent, transparent), linear-gradient( to left, var(--color-primary-lighter), var(--color-primary-light) ), linear-gradient(to top, transparent, transparent); background-position: top left, top right, bottom center, bottom left; background-size: 0% var(--draw-border-thickness), var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness), var(--draw-border-thickness) 0%; &:hover, &:focus { --draw-border-color1: var(--color-primary-light); --draw-border-color2: var(--color-primary-lighter); @extend %draw-borders; } &:active { --draw-border-color1: var(--color-primary-dark); --draw-border-color2: var(--color-primary-light); @extend %draw-borders; } } } .checkbox:not(:checked) { ~ .nav { opacity: 0; visibility: hidden; transform: translateY(100vw); @include mix.media("screen") { @include mix.dimensions("sm") { transform: perspective(20rem) translate3d(0, 100%, -20rem); } @include mix.dimensions("md") { opacity: 1; visibility: visible; transform: none; } } } } .checkbox:checked { ~ .label:hover { span { background: none; box-shadow: none; } } &:hover { ~ .label { span { background: none; box-shadow: none; } } } } d-color: #e3d2d2 } /* Error */ .highlight .k { color: #008800; font-weight: bold } /* Keyword */ .highlight .ch { color: #888888 } /* Comment.Hashbang */ .highlight .cm { color: #888888 } /* Comment.Multiline */ .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ .highlight .cpf { color: #888888 } /* Comment.PreprocFile */ .highlight .c1 { color: #888888 } /* Comment.Single */ .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .gh { color: #333333 } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .highlight .go { color: #888888 } /* Generic.Output */ .highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #666666 } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
/**
 * Check if the current block has a defined language.
 * @param classList - A list of class.
 * @returns {boolean} - True if a class starts with "language-".
 */
const isLanguageBlock = (classList: DOMTokenList) => {
  const classes = Array.from(classList);
  return classes.some((className) => /language-.*/.test(className));
};

/**
 * Add automatically some classes and attributes for PrismJs.
 *
 * These classes and attributes are needed by Prism or to customize comments.
 */
export const addPrismClasses = () => {
  const preTags = document.getElementsByTagName('pre');

  Array.from(preTags).forEach((preTag) => {
    if (
      isLanguageBlock(preTag.classList) &&
      !preTag.classList.contains('command-line') &&
      !preTag.classList.contains('language-diff')
    ) {
      preTag.classList.add('line-numbers', 'match-braces');
    }

    if (
      preTag.classList.contains('command-line') &&
      preTag.classList.contains('filter-output')
    ) {
      preTag.setAttribute('data-filter-output', '#output#');
    }
  });
};