gamv/ds2-core
1
0
Fork 0
Code Issues 13 Releases 10 Activity

do a clean up

Browse Source
This commit is contained in:
A McIlwraith
2026-07-09 16:33:40 -04:00
parent 2c2a45cb7b
commit 44b116860b
10 changed files with 178 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/scaffolding-min.js vendored
View File

@@ -3372,10 +3372,10 @@ function init() {
scroller.addEventListener("scroll", updateScrollState);
window.addEventListener("resize", updateScrollState);
updateScrollState();
ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li aria-hidden=\"true\" class=\"separator\"></li>");
requestAnimationFrame(updateScrollState);
setTimeout(updateScrollState, 50);
ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li aria-hidden=\"true\" class=\"separator\"></li>");
// Tab ordering
if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) {

44
public/assets/scaffolding.css
View File

@@ -613,7 +613,7 @@ color-samples color-sample notes {
padding-top: 0.5rem;
}
tooltip {
tooltip, tool-tip {
background: #fff;
border-radius: 0.5rem;
color: #000;
@@ -647,7 +647,7 @@ tooltip {
will-change: filter;
z-index: 10;
}
tooltip::before {
tooltip::before, tool-tip::before {
clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px);
content: "; Has tooltip: ";
@@ -658,7 +658,7 @@ tooltip::before {
position: absolute;
width: 1px;
}
tooltip::after {
tooltip::after, tool-tip::after {
background: #fff;
content: "";
inset: 0;
@@ -671,11 +671,17 @@ tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]) {
text-align: center;
}
tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])), tool-tip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])) {
inset-inline-start: 50%;
inset-block-end: calc(100% + 0.75rem + 1rem);
@@ -683,6 +689,8 @@ tooltip:is([tip-position=top],
}
tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after, tool-tip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after {
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
inset-block-end: -1rem;
@@ -690,12 +698,14 @@ tooltip:is([tip-position=top],
border-block-end: 1rem solid transparent;
}
tooltip:is([tip-position=right],
[tip-position=inline-end]), tool-tip:is([tip-position=right],
[tip-position=inline-end]) {
inset-inline-start: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%;
--tooltip-y: 50%;
}
tooltip:is([tip-position=right],
[tip-position=inline-end])::after, tool-tip:is([tip-position=right],
[tip-position=inline-end])::after {
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
inset-inline-start: -1rem;
@@ -703,12 +713,14 @@ tooltip:is([tip-position=right],
border-inline-start: 1rem solid transparent;
}
tooltip:is([tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=bottom],
[tip-position=block-end]) {
inset-inline-start: 50%;
inset-block-start: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1);
}
tooltip:is([tip-position=bottom],
[tip-position=block-end])::after, tool-tip:is([tip-position=bottom],
[tip-position=block-end])::after {
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
inset-block-start: -1rem;
@@ -716,12 +728,14 @@ tooltip:is([tip-position=bottom],
border-block-start: 1rem solid transparent;
}
tooltip:is([tip-position=left],
[tip-position=inline-start]), tool-tip:is([tip-position=left],
[tip-position=inline-start]) {
inset-inline-end: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%;
--tooltip-y: 50%;
}
tooltip:is([tip-position=left],
[tip-position=inline-start])::after, tool-tip:is([tip-position=left],
[tip-position=inline-start])::after {
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
inset-inline-end: -1rem;
@@ -729,21 +743,21 @@ tooltip:is([tip-position=left],
border-inline-end: 1rem solid transparent;
}
@media (prefers-color-scheme: dark) {
tooltip {
tooltip, tool-tip {
background: #1f2127;
color: #fff;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
}
tooltip::after {
tooltip::after, tool-tip::after {
background: #1f2127;
}
}
:has(> tool-tip) {
:has(> tooltip), :has(> tool-tip) {
position: relative;
}
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
:has(> tooltip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tooltip):is(:hover, :focus-visible, :active) > tooltip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tooltip {
display: block;
opacity: 1;
-webkit-transition-delay: 300ms;
@@ -751,16 +765,20 @@ tooltip:is([tip-position=left],
}
@media (prefers-reduced-motion: no-preference) {
:has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tool-tip {
:has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tooltip {
--tooltip-y: 3px;
}
:has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tool-tip {
:has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * -3px * -1);
}
:has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tool-tip {
:has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tooltip {
--tooltip-y: -3px;
}
:has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tool-tip {
:has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * 3px * -1);
}
}
@@ -1150,8 +1168,8 @@ body .container main article tabset, body .container main article .tab-group {
margin: 2rem 0 1rem 0;
}
body .container main article tabset [role=tablist] li.selected, body .container main article .tab-group [role=tablist] li.selected {
background-color: var(--colour-green);
color: var(--colour-white);
background-color: var(--color-blue);
color: var(--color-white);
}
body .container main article tabset > ul,
body .container main article tabset .tab-scroll > ul, body .container main article .tab-group > ul,