kbd-navigation.css

@import 'photon-colors.css';

@font-face {
    font-family: 'Fira Sans Heavy';
    src: url('fonts/FiraSans-Heavy.ttf');
}

@font-face {
    font-family: 'Fira Sans';
    src: url('fonts/FiraSans-Regular.ttf');
}

#navCurtain {
    all: initial;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#previewRect {
    all: initial;
    position: relative;
    min-width: 700px;
    max-width: 90%;
    height: auto; /*200px*/
    overflow: hidden;
    background-color: var(--grey-90-a90);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#closeBtn {
    all: initial;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background-image: url(icons/close.svg);
    cursor: pointer;
}

#addressLabel, #captionLabel {
    all: initial;
    text-decoration: none;
    font-weight: normal;
}

#addressLabel {
    font-family: 'Fira Sans Heavy';
    font-size: 40pt;
    text-shadow: 0px 0px 3px var(--white-100);
    margin: 0px 64px 0px 64px;
    color: transparent;
    -webkit-text-stroke: 2px black; /*Non-standard*/
}

#miniature {
    all: initial;
    width: 550px;
    height: 200px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

#iconPlusCaption {
    all: initial;
    margin: 8px;
}

#iconImg {
    all: initial;
    height: 20px;
}

#iconImg[src=''] {
    display: none;
}

#captionLabel {
    margin-left: 8px;
    font-family: 'Fira Sans';
    font-size: 16pt;
    color: var(--grey-10);
}

#hints {
    all: initial;
    font-family: 'Fira Sans';
    font-size: 10pt;
    font-style: italic;
    text-align: center;
    color: var(--grey-40);    
}