Jorge Manrubia
343 lines
8.4 KiB
CSS
343 lines
8.4 KiB
CSS
@layer components {
|
|
lexxy-editor {
|
|
display: block;
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
figure.node--selected {
|
|
&:not(:has(img)) {
|
|
outline: var(--focus-ring-size) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
&:has(img) {
|
|
img {
|
|
outline: var(--focus-ring-size) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Lexical still uses the `lexxy-editor--empty` class if you have a list
|
|
started with no other characters. Here, we won't show the placeholder if
|
|
you've clicked the List button in the toolbar. */
|
|
&.lexxy-editor--empty {
|
|
.lexxy-editor__content:not(:has(ul, ol))::before {
|
|
content: attr(placeholder);
|
|
color: currentColor;
|
|
cursor: text;
|
|
opacity: 0.66;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
white-space: pre-line;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lexxy-dialog-actions {
|
|
display: flex;
|
|
font-size: var(--text-x-small);
|
|
flex: 1 1 0%;
|
|
gap: var(--inline-space-half);
|
|
margin-block-start: var(--block-space-half);
|
|
|
|
.btn {
|
|
--radius: 0.3em;
|
|
|
|
inline-size: 100%;
|
|
justify-content: center;
|
|
|
|
&:is([type="submit"]) {
|
|
--btn-background: var(--card-color, var(--color-link));
|
|
--btn-color: var(--color-ink-inverted);
|
|
--focus-ring-color: var(--card-color, var(--color-link));
|
|
}
|
|
}
|
|
|
|
span {
|
|
inline-size: 100%;
|
|
}
|
|
}
|
|
|
|
.lexxy-editor__content {
|
|
margin: var(--block-space-half) 0;
|
|
min-block-size: calc(7lh + var(--block-space));
|
|
outline: 0;
|
|
|
|
* {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lexxy-editor--drag-over {
|
|
background-color: var(--color-selected);
|
|
border-radius: 4px;
|
|
outline: 2px dashed var(--color-selected-dark);
|
|
}
|
|
|
|
lexxy-toolbar {
|
|
--lexxy-toolbar-icon-size: 1em;
|
|
|
|
background-color: var(--lexxy-bg-color, var(--color-canvas));
|
|
border-block-end: 1px solid var(--color-ink-light);
|
|
color: currentColor;
|
|
display: flex;
|
|
font-size: inherit;
|
|
margin: 0;
|
|
max-inline-size: 100%;
|
|
padding: 0.2em 0;
|
|
position: relative;
|
|
position: sticky;
|
|
inset-block-start: 0;
|
|
z-index: 1;
|
|
|
|
dialog {
|
|
background-color: var(--color-canvas);
|
|
border: 1px solid var(--color-ink-lighter);
|
|
border-radius: 0.5em;
|
|
box-shadow: var(--shadow);
|
|
color: var(--color-ink);
|
|
padding: var(--block-space) calc(var(--inline-space) * 1.5);
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
.input[type="url"] {
|
|
min-inline-size: 30ch;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lexxy-editor__toolbar-button {
|
|
--toolbar-button-size: 44px;
|
|
|
|
appearance: none;
|
|
aspect-ratio: 1;
|
|
background-color: transparent;
|
|
block-size: var(--toolbar-button-size);
|
|
border: none;
|
|
border-radius: 0.2em;
|
|
color: currentColor;
|
|
cursor: pointer;
|
|
display: grid;
|
|
font-size: inherit;
|
|
place-items: center;
|
|
|
|
&:is(:focus, :hover) {
|
|
background-color: var(--color-ink-lighter);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:is(:active),
|
|
&[aria-pressed="true"] {
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
svg {
|
|
-webkit-touch-callout: none;
|
|
block-size: var(--lexxy-toolbar-icon-size);
|
|
fill: currentColor;
|
|
grid-area: 1/1;
|
|
inline-size: var(--lexxy-toolbar-icon-size);
|
|
user-select: none;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
--toolbar-button-size: 2em;
|
|
}
|
|
}
|
|
|
|
/* Temporarily hide the highlighter button until we tackle the styles */
|
|
[name="strikethrough"] + .lexxy-editor__toolbar-dropdown {
|
|
display: none;
|
|
}
|
|
|
|
.lexxy-editor__toolbar-overflow-menu {
|
|
background-color: var(--color-canvas);
|
|
border-radius: 0.5ch;
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
inset-inline-end: 0;
|
|
padding: 4px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
:where(.lexxy-editor__toolbar-spacer) {
|
|
flex: 1;
|
|
}
|
|
|
|
:where(.lexxy-highlight-dialog) {
|
|
.lexxy-highlight-dialog-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75ch;
|
|
|
|
[data-button-group] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 0.5ch;
|
|
}
|
|
|
|
button {
|
|
appearance: none;
|
|
background: var(--color-canvas);
|
|
block-size: 3.5ch;
|
|
border: none;
|
|
border-radius: 0.5ch;
|
|
color: var(--color-ink);
|
|
cursor: pointer;
|
|
display: grid;
|
|
font-size: inherit;
|
|
inline-size: 3.5ch;
|
|
place-items: center;
|
|
position: relative;
|
|
outline: none;
|
|
|
|
&:after {
|
|
align-self: center;
|
|
content: "Aa";
|
|
display: inline-block;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
position: absolute;
|
|
inset-block-start: 0;
|
|
inset-block-end: 0;
|
|
inset-inline-end: 0;
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&[aria-pressed="true"] {
|
|
box-shadow: 0 0 0 1px var(--color-canvas), 0 0 0 3px var(--color-link);
|
|
|
|
&:after {
|
|
content: "✓";
|
|
}
|
|
}
|
|
}
|
|
|
|
.lexxy-highlight-dialog-reset {
|
|
inline-size: 100%;
|
|
|
|
&[disabled] {
|
|
display: none;
|
|
}
|
|
|
|
&:after { display: none; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Based on .input, .input--select */
|
|
.lexxy-code-language-picker {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background-color: var(--color-canvas);
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
|
|
background-position: center right 0.9em;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.5em;
|
|
border: 1px solid var(--color-ink-lighter);
|
|
border-radius: 0.3em;
|
|
color: var(--color-ink);
|
|
font-family: var(--font-base);
|
|
font-size: var(--text-x-small);
|
|
font-weight: 500;
|
|
inset-inline-end: 0;
|
|
line-height: inherit;
|
|
margin: 0.3em 0.3em 0 0;
|
|
padding: 0.5em 1.8em 0.5em 1.2em;
|
|
text-align: start;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
option {
|
|
background-color: var(--color-canvas);
|
|
color: var(--color-ink);
|
|
}
|
|
}
|
|
|
|
/* Prompt
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.lexxy-prompt-menu {
|
|
--lexxy-prompt-avatar-size: 24px;
|
|
--lexxy-prompt-min-width: 20ch;
|
|
--lexxy-prompt-padding: 0.5ch;
|
|
|
|
background-color: var(--color-canvas);
|
|
border-radius: calc(var(--lexxy-prompt-padding) * 2);
|
|
box-shadow: var(--shadow);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-small);
|
|
list-style: none;
|
|
margin: 0;
|
|
min-inline-size: var(--lexxy-prompt-min-width);
|
|
padding: var(--lexxy-prompt-padding);
|
|
visibility: hidden;
|
|
z-index: var(--z-popup);
|
|
|
|
max-height: 200px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.lexxy-prompt-menu--visible {
|
|
visibility: initial;
|
|
}
|
|
|
|
.lexxy-prompt-menu__item {
|
|
align-items: center;
|
|
border-radius: 0.5ch;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: var(--lexxy-prompt-padding);
|
|
padding: var(--lexxy-prompt-padding);
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background-color: var(--color-ink-lightest);
|
|
}
|
|
|
|
&[aria-selected] {
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
img {
|
|
block-size: var(--lexxy-prompt-avatar-size);
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
inline-size: var(--lexxy-prompt-avatar-size);
|
|
margin: 0;
|
|
}
|
|
|
|
+ & {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
code {
|
|
background-color: var(--color-terminal-text-light);
|
|
border-radius: 0.25ch;
|
|
font-size: 0.95em;
|
|
padding-inline: 0.5ch;
|
|
}
|
|
}
|
|
|
|
/* Empty state */
|
|
.lexxy-prompt-menu__item--empty {
|
|
color: var(--color-ink-medium);
|
|
padding: var(--lexxy-prompt-padding);
|
|
}
|
|
}
|