forgejo/web_src/css/editor-markdown.css
delvh 91c8261e2c
Add tooltips for MD editor buttons and add muted class for buttons (#23896)
Followup of #23876 according to my unreleased review demanding tooltips.
Additionally
- add a `muted` equivalent for buttons
- convert `switch to legacy` to an actual button
- enroll `switch to legacy` in the builtin pseudo focus cycle
- remove spaces between the buttons

The effect of the `muted` class is what you would expect: The button
loses all of its normal styling, and is defined only by its content instead.
This will help reduce a11y infractions in the future, as that was one of
the major points why people didn't use `<button>` tags and decided on a
bad fix (i.e. through `<div>`s) instead.

## Appearance

![image](https://user-images.githubusercontent.com/51889757/229510842-337378e5-faa5-4886-a910-08614c0c233d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-11 15:26:18 +08:00

95 lines
1.8 KiB
CSS

.combo-markdown-editor {
width: 100%;
}
.combo-markdown-editor markdown-toolbar {
cursor: default;
display: block;
padding-bottom: 10px;
}
.combo-markdown-editor .markdown-toolbar-group {
display: flex;
}
.combo-markdown-editor .markdown-toolbar-button {
user-select: none;
padding: 5px;
}
.ui.form .combo-markdown-editor textarea.markdown-text-editor,
.combo-markdown-editor textarea.markdown-text-editor {
display: block;
width: 100%;
min-height: 200px;
max-height: calc(100vh - 200px);
resize: vertical;
}
.combo-markdown-editor .CodeMirror-scroll {
max-height: calc(100vh - 200px);
}
text-expander {
display: block;
position: relative;
}
text-expander .suggestions {
position: absolute;
min-width: 180px;
padding: 0;
margin-top: 24px;
list-style: none;
background: var(--color-box-body);
border-radius: 5px;
border: 1px solid var(--color-secondary);
box-shadow: 0 .5rem 1rem var(--color-shadow);
}
text-expander .suggestions li {
display: flex;
align-items: center;
cursor: pointer;
padding: 4px 8px;
font-weight: 500;
}
text-expander .suggestions li + li {
border-top: 1px solid var(--color-secondary-alpha-40);
}
text-expander .suggestions li:first-child {
border-radius: 4px 4px 0 0;
}
text-expander .suggestions li:last-child {
border-radius: 0 0 4px 4px;
}
text-expander .suggestions li:only-child {
border-radius: 4px;
}
text-expander .suggestions li:hover {
background: var(--color-hover);
}
text-expander .suggestions .fullname {
font-weight: normal;
margin-left: 4px;
color: var(--color-text-light-1);
}
text-expander .suggestions li[aria-selected="true"],
text-expander .suggestions li[aria-selected="true"] span {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
text-expander .suggestions img {
width: 24px;
height: 24px;
margin-right: 8px;
}