Hi all,
I’m developping a theme. I’d like to display an “Edit” icon inside a pane when it’s in Edit Mode (“Source” or “Live”). I’m asking for help to improve what I could come up with.
My current code :
.markdown-source-view.mod-cm6 .cm-editor:before {
content: url('https://api.iconify.design/entypo/edit.svg?width=20&height=20');
width: 20px;
height: 20px;
background-color: grey;
}
And the result :
What I’d like to improve but don’t know how, because it’s well above my CSS knowledge:
- Instead of the top left corner, I’d prefer the top right.
- I’ve had to put the icon on a grey background to keep it visible whatever the background — my theme allowing to change it. It would be much nicer if I could display the icon in the text color (
var(--text-normal)), for example.
Any help from CSS wizards would be most welcome !
Olivier :-{)
Have two copies of your code in your snippet, and put .theme-dark and .theme-light on the first line ofeach version…
.theme-dark .markdown-source-view.mod-cm6 .cm-editor:before {
I put mine at the bottom, so it looks like its in the status bar (and I’m looking down there when editing (just changed :before to :after). I also used an SVG icon, so I could colour it in my ‘interactive-accent’ colour.
Getting it on the right-hand side has eluded me so far.
Many thanks for posting this rabbit hole!
Seems churlish not to post the whole thing…
.theme-dark .markdown-source-view.mod-cm6 .cm-editor:after {
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="%231b4a6e" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1l-2.05-2.05l1-1c.1-.11.24-.16.38-.16m-1.97 1.74l2.06 2.06l-6.06 6.06H7.07v-2.06l6.06-6.06Z"%2F%3E%3C%2Fsvg%3E');
width: 20px;
height: 20px;
padding-bottom: 12px;
background-color: transparent;
}
/* Light theme */
.theme-light .markdown-source-view.mod-cm6 .cm-editor:after {
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="%23c7cedb" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1l-2.05-2.05l1-1c.1-.11.24-.16.38-.16m-1.97 1.74l2.06 2.06l-6.06 6.06H7.07v-2.06l6.06-6.06Z"%2F%3E%3C%2Fsvg%3E');
width: 20px;
height: 20px;
padding-bottom: 12px;
background-color: transparent;
}
Trial and error had yielded this result – no doubt a dreadful hack (I know little about these things), but it kinda works
padding-left: 120vmin;
Thank you very much, Jeffury ! (Your icon is much better than mine.)
Unfortunately, your proposition for “flush right” doesn’t work with split (= narrower) pannels. So, I’ve settled for just this code :
.markdown-source-view.mod-cm6 .cm-editor:before {
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="lightgrey" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1l-2.05-2.05l1-1c.1-.11.24-.16.38-.16m-1.97 1.74l2.06 2.06l-6.06 6.06H7.07v-2.06l6.06-6.06Z"%2F%3E%3C%2Fsvg%3E');
height: 0px;
background-color: transparent;
}
Does anyone know if and how we could use a CSS variable inside the “fill” property ?
