CSS/debug.css at main · in-Load/CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@charset "UTF-8";
/**
 * @updated 25.09.13
 * @copyright 2025 Hold'inCorp.
 * @author inLoad
 * @license Apache-2.0 ./LICENSE
 */
:is([debug="full"], [debug] *),
:is([debug="full"], [debug] *)::before,
:is([debug="full"], [debug] *)::after {
    --debug-border: 0.15rem;
    --debug-hsl: calc(var(--i,0) * 50) 85% 55%;
    --debug-color: hsl(var(--debug-hsl) / 0.25);

    background-image:
        repeating-linear-gradient(
            var(--debug-orientation, 45deg),
            hsl(var(--debug-hsl) / 0.45) 0rem var(--debug-border),
            hsl(var(--debug-hsl) / 0.10) var(--debug-border) calc(var(--debug-border) * 3)
        );
    background-attachment: fixed;

    outline: var(--debug-border) dashed hsl(var(--debug-hsl) / 0.80);
    outline-offset: var(--debug-border);
    mix-blend-mode: multiply;
    pointer-events: none;
}
:is([debug="full"], [debug] *):empty,
:is([debug="full"], [debug] *):empty::before,
:is([debug="full"], [debug] *):empty::after {
    border: calc(var(--debug-border) * 3) solid transparent !important;
}
[debug] *:nth-child(even) { --debug-orientation: -45deg; }
[debug] *:nth-child(1) { --i: 1; }
[debug] *:nth-child(2) { --i: 2; }
[debug] *:nth-child(3) { --i: 3; }
[debug] *:nth-child(4) { --i: 4; }
[debug] *:nth-child(5) { --i: 5; }
[debug] *:nth-child(6) { --i: 6; }