style.css

/*
    Austin Jenchi
    CSE 154 AQ 19sp
    04-18-2019
    CSS to style the canvas painting page. Adds animation for all of the ui elements, from header to
    footer to aside to main. This page is styled best for full screen. The animations are delayed by
    waiting for Javascript to remove a css class from elements so that the elements are
    fully rendered and showing before they start animating.
*/
@import url('https://fonts.googleapis.com/css?family=Finger+Paint|Source+Sans+Pro');

body {
    align-items: center;
    background-color: #EDEC99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

body, button {
    font-family: "Source Sans Pro", sans-serif;
}

canvas {
    border: 10px groove brown;
    cursor: crosshair;
    height: 33.75vw;   /* proportion so that it's scaled down 1920x1080 */
    width: 60vw;
}

h1 {
    font-size: 3em;
    font-family: 'Finger Paint', cursive;
    margin-top: 50vh;
    margin-bottom: 8px;
}

main {
    text-align: center;
    margin-top: 90vh;
    opacity: 0;
}

aside {
    animation: asideSlideIn cubic-bezier(0, 0, 0, 1) 1 1s 4s forwards;
    background-color: #45c3ff;
    border-radius: 20px 0 0 20px;
    height: 80vh;
    overflow-y: scroll;
    position: fixed;
    right: -15vw;
    top: 10vh;
    visibility: hidden;
    width: 15vw;
}

footer {
    animation: footerSlideIn cubic-bezier(0, 0, 0, 1) 1 1s 5s forwards;
    background-color: #2cde29;
    border-radius: 20px 20px 0 0;
    bottom: -5vh;
    left: 5%;
    position: fixed;
    text-align: center;
    visibility: hidden;
}

footer p {
    margin: 2px;
}

aside, footer, #stickers {
    box-shadow: 0px 0px 4px 0px black;
    color: #eeeeee;
    padding: 4px;
}

header:not(.dom-loading) h1 {
    animation: centerMove ease-out 1 1s .8s forwards,
               centerPop cubic-bezier(0.93,-0.01, 0.6, 2.07) 1 1s,
               centerRotate ease-in-out 1 0.5s 1s,
               rainbow linear infinite 5s 3s;
}

main:not(.dom-loading) {
    animation: moveUp cubic-bezier(0.47, 0.63, 0.58, 0.98) 1 1s 3s forwards;
}

#stickers {
    background-color: #ff5050;
    border-radius: 20px;
    height: fit-content;
    left: 12.5vw;
    padding: 4px;
    position: fixed;
    top: -30vh;
    transition: top ease 1s;
    width: 75vw;
    z-index: 10;
}

#stickers[data-active="true"] {
    top: 12.5vh;
}

#stickers div {
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#stickers div img {
    border: 5px dashed transparent;
    cursor: pointer;
    height: 128px;
    transition: border-color 250ms ease;
}

#stickers div img:hover {
    border-color: black;
}

#button-row {
    display: inline-block;
    margin-top: 8px;
    position: relative;
}

#button-row button, #in-color {
    background: none;
    border: solid 5px purple;
    border-radius: 10px;
    height: 70px;
    margin: 0 4px;
    transition: border-color 500ms ease, background-color 500ms ease;
    width: 70px;
}

#button-row button, label[for="in-color"] {
    font-size: 0.7em;
}

#button-row button:not([disabled]):hover, #in-color:hover {
    border-color: green;
}

#button-row button[data-selected="true"] { /* tool selected styles */
    border-color: red;
}

/* this selector has to be ultra specific so that it overrides the style above */
#button-row button#btn-save {
    display: block;
    font-size: 1.2em;
    margin-top: 4px;
    text-transform: uppercase;
    width: 99%;
}

#button-row button[disabled] {
    background: #333333;
    border-color: #222222;
    cursor: not-allowed;
}

#button-row button[disabled], label[for="in-color"] {
    color: white;
}

#in-color {
    height: 60px;
    padding: 0;
    width: 60px;
    vertical-align: bottom;
}

label[for="in-color"] {
    font-size: 0.7em;
    position: absolute;
    right: 25px;
    text-shadow: black 0 0 4px;
    top: 19.5%;
}

@keyframes centerMove {
    /* This should probably be a position animation but it breaks all the canvas stuff */
    100% {
        margin-top: 8px;
    }
}

@keyframes centerPop {
    0% {
        transform: scale(0.0);
    }

    100% {
        transform: scale(1.0);
    }
}

@keyframes rainbow {
    0%, 100% {
        color: black;
    }

    15% {
        color: red;
    }

    30% {
        color: orange;
    }

    45% {
        color: yellow;
    }

    60% {
        color: green;
    }

    75% {
        color: blue
    }

    90% {
        color: purple
    }
}

@keyframes centerRotate {
    0%, 50%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

@keyframes moveUp {
    100% {
        margin-top: 0vh;
        opacity: 1;
    }
}

@keyframes asideSlideIn {
    0% {
        visibility: visible;
    }

    100% {
        visibility: visible;
        right: 0;
    }
}

@keyframes footerSlideIn {
    0% {
        visibility: visible;
    }

    100% {
        visibility: visible;
        bottom: 0;
    }
}