# code-block-pro/1.21.0/src/front/style.css

Code Block Pro – Beautiful Syntax Highlighting, version 1.21.0. 182 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.21.0/code/src/front/style.css
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.21.0/raw/src/front/style.css
- Modified: 2023-07-10T00:18:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.21.0/code/src/front/style.css#L10-L20`.

```css
/*! purgecss start ignore */
.wp-block-kevinbatdorf-code-block-pro {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        monospace; /* no !important */
    direction: ltr;
    @apply relative box-border;
    * {
        @apply box-border;
    }
}
.wp-block-kevinbatdorf-code-block-pro {
    pre, pre * {
        font-size: inherit;
        line-height: inherit;
    }
}
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
    border: 0;
    overflow-wrap: normal;
    padding: 16px;
    padding-right: 0;
    font-family: inherit;
    @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none;
}
.wp-block-kevinbatdorf-code-block-pro.padding-disabled:not(
        .code-block-pro-editor
    )
    pre {
    @apply p-0;
}
.wp-block-kevinbatdorf-code-block-pro.padding-bottom-disabled pre {
    @apply pb-0;
}
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre code {
    border: 0;
    background: none;
    overflow-wrap: normal;
    font-family: inherit;
    @apply block w-full m-0 p-0 bg-transparent text-inherit text-left whitespace-pre border-none border-0 rounded-none shadow-none;
}
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor)
    pre
    code
    .line {
    @apply inline-block;
    min-width: calc(var(--cbp-block-width, 100%));
}
.wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
        .code-block-pro-editor
    )
    pre
    code {
    counter-reset: step;
    counter-increment: step calc(var(--cbp-line-number-start, 1) - 1);
}

.wp-block-kevinbatdorf-code-block-pro pre code .line {
    @apply relative;
}
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor)
    pre
    code
    .line::before {
    content: '';
    @apply inline-block;
}
.wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
        .code-block-pro-editor
    )
    pre
    code
    .line:not(.cbp-line-number-disabled)::before {
    @apply inline-block text-right opacity-50 transition-opacity duration-500;
    margin-right: 12px;
    content: counter(step);
    color: var(--cbp-line-number-color, #999);
    width: var(--cbp-line-number-width, auto);
    user-select: none;
    counter-increment: step;
}
.wp-block-kevinbatdorf-code-block-pro {
    &.cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover)) .line:hover,
    .line.cbp-no-blur:hover,
    .line.cbp-line-highlight {
        .cbp-line-highlighter {
            @apply w-full pointer-events-none absolute top-0 h-full;
            background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
            min-width: calc(var(--cbp-block-width, 100%) + 16px);
            left: -16px;
            [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf']& {
                @apply -top-0.5;
            }
            [data-code-block-pro-font-family='Code-Pro-Fira-Code']& {
                top: -1.5px !important;
            }
        }
    }
}
/* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
    .line,
    .line:hover,
    .line.cbp-no-blur:hover,
    .line.cbp-line-highlight {
        .cbp-line-highlighter {
            @apply -top-0.5;
        }
    }
} */
/* [data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
    .line,
    .line:hover,
    .line.cbp-no-blur:hover,
    .line.cbp-line-highlight {
        .cbp-line-highlighter {
            top: -1.5px !important;
        }
    }
} */
.wp-block-kevinbatdorf-code-block-pro:not(
        .code-block-pro-editor
    ).padding-disabled
    pre
    .line.cbp-line-highlight::after {
    @apply left-0 w-full;
}
.wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled
    pre
    .line:not(.cbp-no-blur) {
    filter: blur(1px);
    @apply opacity-40 transition-all duration-200;
}
.wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled.cbp-unblur-on-hover:hover
    pre
    .line:not(.cbp-no-blur) {
    @apply blur-none opacity-100;
}
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre * {
    font-family: inherit;
}
.cbp-see-more-simple-btn-hover {
    @apply transition-none;
}
.cbp-see-more-simple-btn-hover:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
.code-block-pro-copy-button {
    border: 0;
    background: none;
    padding: 6px;
    @apply absolute top-0 right-0 left-auto bg-transparent border-none border-0 cursor-pointer opacity-10 focus:opacity-40 transition-opacity duration-200 ease-in-out leading-none z-10;
}
.wp-block-kevinbatdorf-code-block-pro.padding-disabled
    .code-block-pro-copy-button {
    padding: 0;
}
.wp-block-kevinbatdorf-code-block-pro:hover .code-block-pro-copy-button {
    @apply opacity-50;
}
/* .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:active, */
.wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
    @apply opacity-90;
}
.code-block-pro-copy-button {
    .without-check {
        @apply block;
    }
    .with-check {
        @apply hidden;
    }
}
.code-block-pro-copy-button.cbp-copying {
    .without-check {
        @apply hidden;
    }
    .with-check {
        @apply block;
    }
}
.cbp-footer-link {
    @apply hover:underline;
}

```