.quick-access{
|
z-index: 9999;
|
height: var(--navHeight);
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: var(--navHeight);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background-color: var(--blacker);
|
box-shadow: var(--shadow);
|
}
|
button#randomizor,
|
.quick-access input:checked + label,
|
.quick-access label,
|
.quick-access button {
|
height: var(--navHeight);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
background-color: var(--blacker);
|
color: var(--light-0);
|
transition: all var(--timing) var(--function);
|
transition-property: background-color, color;
|
}
|
.quick-access .open label {
|
background-color: var(--blackish);
|
}
|
.quick-access .search button,
|
button#randomizor {
|
width: var(--buttonWidth);
|
transition: width var(--timing) var(--function);
|
transition-property: width, transform;
|
}
|
button#randomizor span {
|
font-size: var(--small);
|
}
|
button#randomizor sup {
|
font-size: .75em;
|
}
|
.quick-access button.close,
|
.quick-access button.toggle {
|
border: .5rem solid var(--blackish);
|
width: var(--navHeight);
|
transition: width var(--timing) var(--function);
|
transition-property: width, transform;
|
}
|
|
.quick-access .open button.toggle .more,
|
.quick-access button.toggle .close {
|
transform: scale(0);
|
max-width: 0;
|
max-height: 0;
|
transition: all var(--timing) var(--function);
|
transition-property: transform;
|
}
|
.quick-access .open button.toggle .close,
|
.quick-access button.toggle .more {
|
transform: scale(1);
|
max-width: 100%;
|
max-height: 100%;
|
transition: all var(--timing) var(--function);
|
transition-property: transform;
|
}
|
|
.quick-access label {
|
font-size: var(--small);
|
cursor: pointer;
|
width: var(--navHeight);
|
}
|
.quick-access .open label {
|
width: 100%;
|
}
|
|
.quick-access .randomizor label {
|
transform: scaleX(0);
|
max-width: 0;
|
}
|
.quick-access .randomizor.open label,
|
.quick-access .randomizor input:checked + label {
|
transform: scaleX(1);
|
max-width: 100%;
|
}
|
button#randomizor:hover,
|
.quick-access label:hover,
|
.quick-access .open input:checked + label,
|
.quick-access button:hover {
|
background-color: var(--pink);
|
color: var(--black);
|
transition: all var(--timing) var(--function);
|
transition-property: background-color, color;
|
}
|
button#randomizor span,
|
.quick-access label span{
|
transform: scaleY(0);
|
max-height: 0;
|
transition: all var(--timing) var(--function);
|
transition-property: transform, max-height;
|
}
|
|
button#randomizor:hover span,
|
.quick-access .open a span,
|
.quick-access input:checked + label:hover span,
|
.quick-access .open label span,
|
.quick-access .open input:checked + label span {
|
transform: scaleY(1);
|
max-height: 100%;
|
transition: all var(--timing) var(--function);
|
transition-property: transform, max-height;
|
}
|
|
button#randomizor svg,
|
.quick-access label svg {
|
width: 32px;
|
height: 32px;
|
transition: all var(--timing) var(--function);
|
transition-property: width, height;
|
}
|
button#randomizor:hover svg,
|
.quick-access .open input:checked + label svg,
|
.quick-access input:checked + label:hover svg {
|
width: 25px;
|
height: 25px;
|
transition: all var(--timing) var(--function);
|
transition-property: width, height;
|
}
|
input[type=radio],
|
input[type=checkbox]{
|
position: absolute;
|
left: -300vw;
|
transform: scale(0);
|
max-width: 0;
|
max-height: 0;
|
}
|
.quick-access .randomizor.close .options,
|
.quick-access .close input:checked + label,
|
.quick-access .close button.toggle {
|
transform: scale(0);
|
max-width: 0;
|
max-height: 0;
|
transition: width var(--timing) var(--function);
|
transition-property: width, transform;
|
}
|
.quick-access .close a,
|
.quick-access .close button.search {
|
width: 4rem;
|
transition: width var(--timing) var(--function);
|
}
|
|
.quick-access form {
|
display: flex;
|
height: var(--navHeight);
|
margin-bottom: 0;
|
}
|
.quick-access form.search {
|
justify-content: flex-end;
|
}
|
.quick-access.search {
|
flex-wrap: wrap;
|
}
|
.quick-access.search form.search {
|
width: 100%;
|
order: 1;
|
justify-content: center;
|
}
|
.quick-access.search form.randomizor {
|
order: 2;
|
width: 0;
|
}
|
|
.quick-access .options {
|
padding: 0;
|
margin: 0;
|
border: 2px solid var(--black);
|
padding-block-end: 0;
|
padding-block-start:0;
|
padding-inline-start:0;
|
padding-inline-end: 0;
|
margin-inline-start: 0;
|
margin-inline-end: 0;
|
min-inline-size: 0;
|
display: flex;
|
transform-origin: bottom;
|
width: 100%;
|
bottom: 0;
|
overflow: visible;
|
transition: bottom var(--timing) var(--function) .25s;
|
}
|
.quick-access .open .options {
|
z-index: -1;
|
}
|
|
.quick-access .randomizor .options {
|
justify-content: flex-start;
|
width: 4rem;
|
}
|
.quick-access .randomizor.open .options {
|
left: 0;
|
width: 100%;
|
position: fixed;
|
}
|
.quick-access .search .options {
|
justify-content: flex-end;
|
position: fixed;
|
transform: scaleY(0);
|
max-height: 0;
|
right: 0;
|
}
|
.quick-access .search.open .options,
|
.quick-access .randomizor.open .options {
|
bottom: calc(var(--navHeight) - 2px);
|
transform: scaleY(1);
|
max-height: 4rem;
|
transition: bottom var(--timing) var(--function);
|
}
|
.quick-access legend {
|
transform: scale(0) translateX(-50%);
|
max-width: 0;
|
max-height: 0;
|
position: absolute;
|
background-color: var(--blacker);
|
bottom: 0;
|
left: 50%;
|
z-index: -1;
|
width: 66.666%;
|
text-align: center;
|
margin: 0 auto;
|
border-top-left-radius: .75rem;
|
border-top-right-radius: .75rem;
|
padding: .5rem 1rem;
|
transition: bottom var(--timing) var(--function);
|
}
|
.quick-access .open legend {
|
transform: scale(1) translateX(-50%);
|
max-width: 100%;
|
max-height: 100%;
|
bottom: 100%;
|
transition: bottom var(--timing) var(--function) .35s;
|
}
|
.quick-access button.close,
|
.quick-access input[type=search] {
|
transform: scaleX(0);
|
max-width: 0;
|
transition: width var(--timing) var(--function);
|
transition-property: width, transform;
|
}
|
.quick-access .open button.close,
|
.quick-access .open input[type=search] {
|
transform: scale(1);
|
max-width: 100%;
|
max-height: 100%;
|
transition: width var(--timing) var(--function);
|
transition-property: width, transform;
|
}
|
.quick-access input[type=search] {
|
width: calc(100% - 10rem);
|
padding: 0 1rem;
|
font-size: var(--large);
|
font-family: var(--body);
|
}
|
|
aside#seen-all {
|
position: fixed;
|
width: 66.6vw;
|
right: .25rem;
|
bottom: -200vh;
|
z-index: 999;
|
padding: 1rem;
|
border-radius: 1rem;
|
background: var(--light-0);
|
transition: bottom var(--timing) var(--function);
|
box-shadow: var(--shadow);
|
}
|
aside#seen-all.did-it{
|
bottom: 4.5rem;
|
transition: bottom var(--timing) var(--function) .5s;
|
}
|
aside#seen-all button {
|
position: absolute;
|
right: .5rem;
|
top: .5rem;
|
background: transparent;
|
color: var(--black);
|
}
|
aside#seen-all .button {
|
padding: .5rem 1.5rem;
|
border-radius: 4px;
|
text-decoration: none;
|
}
|
.quick-access label.screen-reader-text {
|
width: 0;
|
}
|
@media (max-width: 768px){
|
.quick-access .search {
|
width: 25vw;
|
}
|
.quick-access input[type=search] {
|
font-size: var(--medium);
|
}
|
}
|
|
button[aria-busy="true"] {
|
position: relative;
|
cursor: wait;
|
}
|
|
button[aria-busy="true"]::after {
|
content: "";
|
position: absolute;
|
width: 1em;
|
height: 1em;
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
border-top-color: white;
|
border-radius: 50%;
|
animation: loading 0.75s infinite linear;
|
}
|
|
@keyframes loading {
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
.quick-access.loading #randomizor,
|
.quick-access.loading #random-item label,
|
.quick-access.loading #random-item .toggle{
|
color: var(--lighter);
|
cursor: wait;
|
pointer-events: none;
|
}
|
|
.quick-access.loading #random-item {
|
position: relative;
|
}
|
.quick-access.loading #random-item:after {
|
content: "";
|
position: absolute;
|
top: calc(50% - .5em);
|
left: calc(50% - .5em);
|
width: 1em;
|
height: 1em;
|
border: 2px solid rgba(183, 51, 46, 0.3);
|
border-top-color: var(--pink);
|
border-radius: 50%;
|
animation: loading 0.75s infinite linear;
|
}
|
