'; } &[data-step$="4"]::before { --tag: ''; } &[data-step$="5"]::before { --tag: ''; } &[data-step$="6"]::before { --tag: 'document'; } &[data-step="1"] em, &[data-step$="2"] h1, &[data-step~="3"] { outline: var(--outline-width) solid var(--color); &::before { content: var(--label-prefix) var(--tag); } } } #event-propagation2 { &[data-step$="4"]::before { --tag: '

'; } &[data-step$="3"]::before { --tag: ''; } &[data-step$="2"]::before { --tag: ''; } &[data-step$="1"]::before { --tag: 'document'; } &[data-step$="6"] em, &[data-step$="5"] h1, &[data-step]:not([data-step~="5"]) { outline: var(--outline-width) solid var(--color); &::before { content: var(--label-prefix) var(--tag); } } } #events-happen { background: url(img/fallen-tree.jpg) center / cover; & h1 { font-size: 300%; font-weight: bold; letter-spacing: -.03em; line-height: 1; } & blockquote { margin: auto; &::before { color: white; opacity: .5; } } } .slide:not([data-step~="1"]) [data-appear="1"], .slide:not([data-step~="2"]) [data-appear="2"] { display: none; } .slide[data-step~="1"] [data-strike="1"], .slide[data-step~="2"] [data-strike="2"] { text-decoration: line-through; text-decoration-color: hsla(0,0%,100%,.5); font-style: italic; opacity: .6; & * { color: inherit; } } #event-caveat { & .delayed { opacity: 1; &.current, &.displayed { opacity: .1; } } } #three-ways { font-size: 2.3vh; & iframe { xdisplay: none; width: 6em; } } .mousemove { background: radial-gradient(at calc(var(--mouse-x, .5) * 100%) calc(var(--mouse-y, .5) * 100%), transparent, black) var(--accent3); } #naive-dragging, #revisited-dragging { & .run-target { position: absolute; top: 0; left: 0; padding: .8em 1em; background: var(--accent4); box-shadow: .1em .1em 1em black; cursor: grab; &:active { cursor: grabbing; } &::before { content: "Drag me"; } } } #detached-dom { & svg { width: 100%; height: 100%; } & .node { fill: var(--accent3); stroke: var(--accent3-light); r: 5; cy: calc(5 + var(--row) * 20); } & line { stroke: var(--accent3-light); stroke-dasharray: 5 0; --y1: calc(5 + calc(var(--row, 0) - 1) * 20); --y2: calc(5 + var(--row, 0) * 20); transition: 1s stroke-dasharray, .1s 1s stroke-linecap; stroke-linecap: round; } &[data-step~="3"] line.appear-3 { stroke-dasharray: 5 0; stroke-linecap: round; } &[data-step~="1"] line.disappear-1, & line.appear-3, &[data-step~="4"] line.appear-3 { stroke-dasharray: 0 5; stroke-linecap: butt; } & .detach { transition: 1s cy, 4s transform; } &[data-step~="2"] .detach { --row: 2; } & .garbage-collection { x: 101%; y: 20%; transition: 4s transform; font-weight: bold; fill: currentColor; font-size: 20%; letter-spacing: -.03em; & tspan { font-size: 200%; } } &[data-step~="5"] .garbage-collection { transform: translate(-110px, 20px); } &[data-step~="6"] .garbage-collection { transform: translate(-400px, 0px); } &[data-step~="6"] .detach { transform: translate(-290px, -20px); } } #css-removal-bookmarklet { & h1 { & a { font-weight: bold; } } & div.prism-live { width: 90vw; & .prism-live { padding: .5em; } } } #dom-class-hiearchy { & video { object-fit: contain; } } #ids-globals { & pre:first-of-type { margin-top: 1em; & code { padding-right: 2em; } } } #dom-tree { display: grid; grid-template-columns: 1fr 1fr; align-items: start; & #dom-tree-section { grid-column: 1 / span 2; } & li li li li .node:only-child { background: white; color: black; text-shadow: none; } }