Files
AFFiNE-Mirror/blocksuite/affine/blocks/code/src/styles.ts
T
DarkSky ef6717e59a fix(editor): editor behavior and styles (#14498)
fix #14269 
fix #13920
fix #13977
fix #13953
fix #13895
fix #13905
fix #14136
fix #14357
fix #14491

#### PR Dependency Tree


* **PR #14498** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
  * Callout and toolbar defaults now reliably show grey backgrounds
  * Keyboard shortcuts behave better across layouts and non-ASCII input
  * Deleted workspaces no longer appear in local listings

* **New Features**
  * Cell editing now respects pre-entry validation hooks
* Scrollbars use themeable variables and include Chromium compatibility
fixes

* **Style**
  * Minor UI color adjustment for hidden properties

* **Tests**
  * Added unit tests for table column handling and keymap behavior
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-23 06:37:16 +08:00

84 lines
2.2 KiB
TypeScript

import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css } from 'lit';
export const codeBlockStyles = css`
affine-code {
display: block;
}
.affine-code-block-container {
font-size: var(--affine-font-xs);
line-height: var(--affine-line-height);
position: relative;
padding: 32px 20px;
background: var(--affine-background-code-block);
border-radius: 10px;
box-sizing: border-box;
}
.affine-code-block-container.mobile {
padding: 12px;
}
.affine-code-block-container.highlight-comment {
outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
}
${scrollbarStyle('.affine-code-block-container rich-text')}
/* In Chromium 121+, non-auto scrollbar-width/color override ::-webkit-scrollbar styles. */
@supports not selector(::-webkit-scrollbar) {
.affine-code-block-container rich-text {
scrollbar-width: thin;
scrollbar-color: ${unsafeCSSVarV2('icon/secondary', '#b1b1b1')}
transparent;
scrollbar-gutter: stable both-edges;
}
}
.affine-code-block-container .inline-editor {
font-family: var(--affine-font-code-family);
font-variant-ligatures: none;
}
.affine-code-block-container v-line {
position: relative;
display: inline-grid !important;
grid-template-columns: auto minmax(0, 1fr);
}
.affine-code-block-container.disable-line-numbers v-line {
grid-template-columns: unset;
}
.affine-code-block-container div:has(> v-line) {
display: grid;
}
.affine-code-block-container .line-number {
position: sticky;
text-align: left;
padding-right: 12px;
width: 32px;
word-break: break-word;
white-space: nowrap;
left: -0.5px;
z-index: 1;
background: var(--affine-background-code-block);
font-size: var(--affine-font-xs);
line-height: var(--affine-line-height);
color: var(--affine-text-secondary);
box-sizing: border-box;
user-select: none;
}
.affine-code-block-container.disable-line-numbers .line-number {
display: none;
}
affine-code .affine-code-block-preview {
padding: 12px;
}
`;