glife/sugarcube/src/actions/actions.css

#actions:empty {
    display: none;
}

#actions{
    position: fixed;
    bottom: 0px;
    height: 5em;

    width: inherit;
    right: 2.5em;
    display: block;
    max-width: inherit;
    left: 20em;
    overflow: auto;
    transition: left .2s ease-in
}

#ui-bar.stowed ~ #story #actions{
    left: 4.5em;
}

#actions a,
#npcActions a,
.button a,
.buttonRadio span{
    display: block;
    color: black;
    padding: 1em;
    border: 2px black solid;
    margin: 0.1em;
    border-radius: 0.4em;
    background: white;
    text-decoration: none;
}

#actions a:hover ,
#npcActions a:hover,
.button a:hover,
.buttonRadio>input:checked+span{
    background: #aaa;
}

#actions .disabled a,
#npcActions .disabled a{
    background: red;
    color: black;
}

.buttonRadio > input{
    display: none;
}

.buttonRadio>input:checked+span {
    font-weight: bold;
}



@media(max-width: 1699px){
    #actions .action{
        display: inline-block;
    }

    #passages{
        height: calc(100vh - 7.5em);
        overflow: auto;
    }
}

@media(max-width: 799px){
    #actions{
        position: static;
        height: unset;
    }

    #passages{
        height: unset;
    }
}

@media(min-width: 1700px) {
    #actions {
        right: unset;
        top: 0px;
        height: 100%;
        width: 14em;
    }
}