davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Added optional ::selection styling for .window-body children

Browse Source
This commit is contained in:
Vincent Langlois
2024-04-28 12:47:14 -04:00
parent ffa29f4cd9
commit b962b24162
2 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/index.html.ejs
View File

@@ -740,6 +740,29 @@
</div>
</div>
`) %>
<p>
To apply custom selection styling to children of a <code>window-body</code> element, you can add the optional <code>color-highlight</code> class. Note that overriding selection styling may impact <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns">accessibility</a>, so use at your own discretion.
</p>
<%- example(`
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">A Window With Stuff In It</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p class="color-highlight">You can highlight me and a custom <code>::selection</code> styling will be present!</p>
<p> I have no custom <code>::selection</code> styling</p>
</div>
</div>
`) %>
</div>
</section>

8
style.css
View File

@@ -17,6 +17,8 @@
--dialog-gray: #808080;
--dialog-gray-light: #b5b5b5;
--link-blue: #0000ff;
--highlight-blue: #00005e;
--text-highlight: #ffffff;
/* Spacing */
--element-spacing: 8px;
@@ -330,6 +332,12 @@ input[type="reset"]:disabled,
margin: var(--element-spacing);
}
.window-body .color-highlight::selection,
.window-body .color-highlight *::selection {
color: var(--text-highlight);
background-color: var(--highlight-blue);
}
fieldset {
border-image: svg-load("./icon/groupbox-border.svg") 2;
padding: calc(2 * var(--border-width) + var(--element-spacing));