index.styl

lsm-8-color = orchid
lsm-16-color = darkorchid
alu-8-color = limegreen
alu-16-color = seagreen
rsb-8-color = deepskyblue
control-br-color = tomato
control-misc-color = lightsalmon

default-background = snow


pre, table.opcode, div.sample-instruction
    font-size: 0.7rem

#titlecard
    text-align: center

input, select
    background-color: default-background
    color: rgb(34, 34, 34)
    border: 1px solid grey
    fill: default-background
    flood-color: default-background
    stop-coor: default-background
    border-radius: 2px
    box-shadow: none

table.opcode
    font-family: 'Ubuntu Mono', monospace


table.opcode
    position: relative
    table-layout: fixed
    width: 100%
    min-width: 75em
    margin-bottom: 1em
    background-color: black
    border-spacing: 0px;
    border-left: 1px solid black

    caption
        font-size: 1rem
        text-align: left
        font-family: 'KoHo', sans-serif

    tr
        >th
            padding: 0.8em
            &:first-child
                width: 3em
        >td
            text-align: center
            padding: 0

    th, td
        border-bottom: 1px solid black;
        border-right: 1px solid black;

    thead
        width: 100%

        &>tr
            > th
                border-top: 1px solid black;

            &:nth-of-type(odd)>th
                background-color: lightgrey

            &>th:not(:first-child)
                position: sticky
                top: 0px
                z-index: 1
                padding 0.8em 0.3em;

    tbody>tr
        &:nth-of-type(even)>th
            background-color: lightgrey
        &:nth-of-type(odd)>th
            background-color: rgb(245, 245, 245)

        &>th
            position: sticky
            left: 0px
            z-index: 1

:root {
    background-color: default-background
    font-family: 'KoHo', sans-serif
    font-size: 16px
    color: #222
}

h1
    font-size: 1.25rem

#floating-box-container
    z-index: 100
    position: fixed
    top: 0%
    left: 0%
    width: 100%
    height: 100%
    background-color: darkgrey
    background-color: rgba(169,169,169, .6)

#floating-box {
    position: fixed
    width: 80%
    left: 10%
    height: 100%;

    @media screen and (min-width: 30em) and (max-width: 48em) {
        width: 24em
        left: 50%
        transform: translateX(-50%)
    }

    @media screen and (min-width: 48em) {
        left: 25%
        width: 50%

    }

    @media screen and (min-height: 18em) and (max-height: 30em) {
        height: 18em
        top: 50%
        transform: translateY(-50%)
    }

    @media screen and (min-height: 30em) {
        top: 20%
        height: 60%
    }

    background-color: default-background
    padding: 0
    font-family: 'Ubuntu Mono', monospace
    overflow: auto
}

opcode-coloring(color)
    $lightend = lighten(color, 40%);
    background-color: $lightend
    &:not(.unused):hover
        background-color: lighten($lightend, 25%)
    &::before
        background-color: color

td.opcode
    background-color: rgb(237,237,237)
    position: relative
    background-clip: padding-box
    -webkit-user-select: none

    &::before
        position: absolute
        left: 0
        top: 0
        bottom: 0
        width: 0.7em
        background-color: slategray
        content: ""

    > div
        padding: 0.8em 0.4em 0.8em 0.75em
        > div
            overflow-wrap: break-word;
            display: inline;


    &.lsm
        &.x8
            opcode-coloring(lsm-8-color)
        &.x16
            opcode-coloring(lsm-16-color)

    &.alu
        &.x8
            opcode-coloring(alu-8-color)
        &.x16
            opcode-coloring(alu-16-color)

    &.x8.rsb
        opcode-coloring(rsb-8-color)

    &.control
        &.misc
            opcode-coloring(control-misc-color)
        &.br
            opcode-coloring(control-br-color)

td.opcode.unused
    background-color: #c8cdd1

td.opcode.hidden
    visibility: hidden

code
    background-color: rgb(230, 230, 230)
    font-family: 'Ubuntu Mono', monospace

header
    margin: 0 1em 0.5em 1em

#glossary
    >dl
        >dt
            font-weight: bold
        padding-bottom: 0.5em

.header-section
    margin: 1em 1em 0.5em 1em


dl.groups, ul.groups
    list-style: none;
    >li,>dt
        &::before
            content: "■"
            padding-right: 1em;
            color: orchid;

        &.lsm
            &.x8::before
                color: lsm-8-color
            &.x16::before
                color: lsm-16-color

        &.alu
            &.x8::before
                color: alu-8-color
            &.x16::before
                color: alu-16-color

        &.x8.rsb::before
            color: rsb-8-color

        &.control
            &.misc::before
                color: control-misc-color
            &.br::before
                color: control-br-color

dl.sameline
    display: grid;
    grid-template-columns: max-content auto auto
    dt
        grid-column-start: 1

a
    color: darkcyan;
    &.self-link:not(:hover)
        color: rgba(darkcyan, 0.5);


.floating-grid-container
    display: grid
    grid-template-columns: 1fr 1fr
    grid-template-rows: auto auto

.name
    grid-area: 1 / 1 / 1 / 3
    justify-self: center
    text-align: center
    margin: 0.5em

.data-column
    justify-self: start
    grid-area: 2 / 1
    margin: 0.5em

.timing-column
    justify-self: end
    grid-area: 2 / 2
    margin: 0.5em

.flag-table
    caption
        margin-top: 1em
    th
        text-align: left
        margin-right: 0.5em
    margin-bottom: 1em;

.sample-instruction
    display: inline-block;
    border: 1pt solid black;
    font-family: 'Ubuntu Mono', monospace;
    text-align: center;
    padding: 0.5em 1em
    margin: 1em

pre
    font-family: 'Ubuntu Mono', monospace;

#table-controls
    display: inline-block
    >*
        margin: 0em 1em;