Dome
eda333d17a
- Implemented custom code block system with Prism.js highlighting (YAML) - Added Gutenberg block with modal editor for better handling of large code snippets - Added Classic Editor button with dialog for structured code input - Implemented copy-to-clipboard functionality with hover-based UI - Introduced dedicated styling (code.css) Performance improvements: - Load Prism.js and code block assets only when a code block is present - Reduced unnecessary JS and CSS on pages without code snippets - Improved overall frontend performance and resource efficiency UI/UX improvements: - Adapted code block styling to match theme design (rectangular layout, accent border, integrated color scheme) - Refactored sidebar search styling for consistent appearance - Removed conflicting wrapper borders causing double border rendering - Applied single-border input pattern with clean focus state - Fixed invalid CSS !important syntax issues - Aligned search input design with comments and code block components Result: - Cleaner UI with consistent component styling - Improved performance through conditional asset loading - Better authoring experience for structured YAML content
174 lines
3.7 KiB
CSS
174 lines
3.7 KiB
CSS
/**
|
|
* Code block styles
|
|
*
|
|
* Frontend and editor preview styles for the Zeitfresser code block feature.
|
|
* The selectors are scoped to avoid leaking into unrelated blocks or plugins.
|
|
*/
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Code block wrapper
|
|
------------------------------------------------------------------------- */
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Code block wrapper
|
|
------------------------------------------------------------------------- */
|
|
|
|
.ztfr-code {
|
|
position: relative;
|
|
|
|
background-color: var(--footer-color);
|
|
color: var(--light-color);
|
|
|
|
padding: 1rem 1.2rem;
|
|
margin: 1rem 0;
|
|
|
|
border-radius: 0;
|
|
border: 1px solid rgba(248, 248, 242, 0.08);
|
|
border-left: 4px solid var(--hover-color);
|
|
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
|
|
font-family: var(--secondary-font);
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Prism overrides
|
|
------------------------------------------------------------------------- */
|
|
|
|
.ztfr-code pre,
|
|
.ztfr-code code {
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
.ztfr-code pre[class*="language-"],
|
|
.ztfr-code code[class*="language-"] {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
white-space: pre-wrap !important;
|
|
word-break: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.ztfr-code pre[class*="language-"] {
|
|
overflow-x: visible !important;
|
|
}
|
|
|
|
.ztfr-code pre code {
|
|
display: block;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Copy button
|
|
------------------------------------------------------------------------- */
|
|
|
|
.ztfr-code__copy {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
background-color: var(--footer-color);
|
|
color: var(--light-color);
|
|
border: 1px solid rgba(248, 248, 242, 0.12);
|
|
border-radius: 4px;
|
|
font-size: 0.72rem;
|
|
line-height: 1;
|
|
padding: 0.45rem 0.65rem;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 0.2s ease,
|
|
background-color 0.2s ease,
|
|
color 0.2s ease,
|
|
border-color 0.2s ease;
|
|
}
|
|
|
|
.ztfr-code:hover .ztfr-code__copy {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.ztfr-code__copy:hover {
|
|
background-color: var(--hover-color);
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.ztfr-code__copy:focus {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
|
|
outline: 2px solid #bd93f9;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Dracula token colors
|
|
------------------------------------------------------------------------- */
|
|
|
|
.ztfr-code .token.comment,
|
|
.ztfr-code .token.prolog,
|
|
.ztfr-code .token.doctype,
|
|
.ztfr-code .token.cdata {
|
|
color: #6272a4;
|
|
}
|
|
|
|
.ztfr-code .token.punctuation {
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.ztfr-code .token.tag,
|
|
.ztfr-code .token.constant,
|
|
.ztfr-code .token.symbol,
|
|
.ztfr-code .token.deleted {
|
|
color: #ff79c6;
|
|
}
|
|
|
|
.ztfr-code .token.attr-name,
|
|
.ztfr-code .token.property,
|
|
.ztfr-code .token.selector,
|
|
.ztfr-code .token.important,
|
|
.ztfr-code .token.atrule {
|
|
color: #8be9fd;
|
|
}
|
|
|
|
.ztfr-code .token.attr-value,
|
|
.ztfr-code .token.string,
|
|
.ztfr-code .token.char,
|
|
.ztfr-code .token.inserted {
|
|
color: #f1fa8c;
|
|
}
|
|
|
|
.ztfr-code .token.keyword,
|
|
.ztfr-code .token.boolean,
|
|
.ztfr-code .token.number {
|
|
color: #bd93f9;
|
|
}
|
|
|
|
.ztfr-code .token.operator,
|
|
.ztfr-code .token.entity,
|
|
.ztfr-code .token.url {
|
|
color: #f8f8f2;
|
|
}
|
|
|
|
.ztfr-code .token.function,
|
|
.ztfr-code .token.class-name {
|
|
color: #50fa7b;
|
|
}
|
|
|
|
.block-editor-block-list__layout .ztfr-code,
|
|
.editor-styles-wrapper .ztfr-code {
|
|
margin: 0;
|
|
}
|