View source for Template:CSS nonsense

<onlyinclude>{{#css:
.boxcontainer {
display: grid;
left: 0;
position: fixed;
top: 0;
text-align: center;
user-select: none;
white-space: nowrap;
}

.boxcontainer .mouse-box {
animation: mouse-box 0.25s linear infinite alternate;
background: #0F0;
cursor: cell;
height: 32px;
left: 0;
margin: 0;
position: fixed;
top: 0;
width: 32px;
z-index: -1;
}
@keyframes mouse-box {
0% {
height: 32px;
}
100% {
height: 31px;
}
}

.boxcontainer .reset-box {
background: #000;
color: #FFF;
height: 32px;
margin: 0;
position: fixed;
width: 32px;
z-index: 65536;

top: 0;
right: 0;
}

.boxcontainer .trigger-right {
background: #0FF;
height: 32px;
margin: 0;
position: fixed;
top: 256px;
width: 32px;
}

.boxcontainer .right-box {
animation: 0.0625s step-end right-box forwards paused;
background: #FAA;
height: 32px;
left: -64px;
margin: 0;
position: fixed;
top: 0;
width: 32px;
}
.boxcontainer .reset-box:hover ~ .right-box {
animation: none;
}
@keyframes right-box {
0% {
left: -64px;
}
100% {
left: 0;
}
}

.boxcontainer .bitstrip {
position: fixed;
pointer-events: none;
top: 32px;
}

.boxcontainer .bitstrip p {
animation: 0.0625s horiz step-end forwards paused;
margin: 0;
position: relative;
}
@keyframes horiz {
0% {
top: 0;
}
100% {
top: -32px
}
}
.boxcontainer .reset-box:hover ~ .bitstrip p {
animation: none;
}

.boxcontainer .occluder {
animation: 0.5s step-end occluder forwards;
background: #A0F;
display: inline-block;
height: 32px;
margin: 0 0 0 32px;
pointer-events: initial;
width: 32px;
}
.boxcontainer .trigger-right:hover ~ .bitstrip .occluder {
animation: none;
}
@keyframes occluder {
0% {
margin: 0 0 0 32px;
}
100% {
margin: 0 32px 0 0;
}
}

.hoverbit {
display: inline-grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 64px;
pointer-events: none;
text-align: center;
user-select: none;
width: 64px;
}
.hoverbit :is(:first-child, :nth-child(2), :nth-child(3)) {
background: #AAA;
pointer-events: initial;
}
.hoverbit.fixed :is(:first-child, :nth-child(2), :nth-child(3)) {
background: #A0F;
}
.hoverbit :nth-child(3) {
grid-column: 2;
grid-row: 2;
z-index: 1;
}
.hoverbit:not(.fixed) :nth-child(3) {
animation: 0.0625s step-end hoverbit forwards paused;
}
.hoverbit.set :nth-child(3) {
grid-column: 1;
}
.hoverbit.set:not(.fixed) :nth-child(3) {
animation-name: hoverbit-set;
}
.hoverbit:not(.set) :nth-child(1):hover ~ :nth-child(3), .hoverbit.set :nth-child(2):hover ~ :nth-child(3) {
animation: none;
}
.hoverbit :nth-child(2):hover ~ :nth-child(3), .hoverbit.set :nth-child(1):hover ~ :nth-child(3) {
animation-play-state: running;
}

@keyframes hoverbit {
0% {
grid-column: 2;
}
100% {
grid-column: 1;
}
}
@keyframes hoverbit-set {
0% {
grid-column: 1;
}
100% {
grid-column: 2;
}
}
}}</onlyinclude>