style.css

:root {
    --accentColor: #3bc4ff; /* 3bc4ff */
    --viewportBgColor: #e5e5e5;
    --currentColor: #666666;
}

* {
    font-family: sans-serif;
}

*::-webkit-scrollbar {
    width: 3px;
    height: 7px;
}
*::-webkit-scrollbar-track {
    background: #343434;
}
*::-webkit-scrollbar-thumb {
    background-color: #4a4a4a;
    border-radius: 100px;
    border: 0px solid #ffffff;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: #6e6e6e;
    border: 0px solid #ffffff;
}

#gifContainer img {
    width: 100%;
}

body {
    margin: 0;
    user-select: none;
}

.posAbs {
    position: absolute;
}

/* FILE EDIT VIEW BAR AT TOP OF SCREEN (FOR EXE, NOT WEBSITE) ----------------------------------------- */
#filebar {
    width: 100vw;
    height: 2vh;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.filebarButton {
    color: #ffffff;
    padding-left: 0.5%;
    padding-right: 0.5%;
}
.filebarButton:hover {
    background-color: #181818;
}

.filebarOpen {
    background-color: #252525;
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 15%;
}

.filebarOpenRow {
    width: 100%;
    aspect-ratio: 10;
    color: #565656;
    box-sizing: border-box;
    padding-left: 10px;
    display: flex;
    align-items: center;
}
.filebarOpenRow:hover {
    background-color: #343434;
    color: var(--accentColor);
    cursor: pointer;
}

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer;
}

/* Container of the full app, 100% by 100% of screen -------------------------------------------------- */
#appContainer {
    width: 100vw;
    height: 100vh;
    background-color: #2b2b2b;
}

/* Container of top half, contains canvas, tools, color pallet, --------------------------------------- */
#topHalfContainer {
    width: 100%;
    height: 85%;

    display: flex;
}

#canvasSide {
    height: 100%;
    width: 90%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#canvasContainer {
    width: 90%;
    height: 95%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    background-color: #343434;
    position: relative;
}

#whichProject {
    color: #ffffff;
    position: absolute;
    top: 5px;
}

#whichFrame {
    color: #ffffff;
    position: absolute;
    bottom: 5px;
}

#canvas {
    height: 700px;
    width: 1400px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--viewportBgColor);
    cursor: url("cursor.png") 8 8, auto;
}

#toolSide {
    overflow: hidden;
    width: 10%;
    height: 100%;
}

#colorPalette {
    color: white;
    width: 100%;
    height: 30%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#chooseColor {
    height: 50%;
    width: 100%;
    position: relative;

    display: flex;
    justify-content: right;
}

#colorSelectionButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    position: absolute;
    background-color: #666666;

    font-size: 1vw;
    text-transform: uppercase;
    font-family: monospace;
    font-weight: bold;
}

#recentColors {
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    overflow-y: auto;
}
#addColorSwatch {
    border: solid 2px #565656;
    background: none;
    cursor: pointer;
    color: #565656;
    font-size: 25px;
    overflow: hidden;
}
#addColorSwatch:hover {
    border: solid 2px var(--accentColor);
    color: var(--accentColor);
}

.swatch {
    width: 20%;
    height: 30px;
    margin-right: 5%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.swatch:nth-child(4n) {
    margin-right: 0;
}

.swatch:hover {
    background-color: black;
    cursor: pointer;
    border: solid 2px var(--accentColor);
}

#tools {
    color: var(--accentColor);
    width: 100%;
    height: 70%;

    display: flex;
    flex-direction: column;

    background-color: #252525;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

.toolRow {
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: 5px;

    border-bottom: solid 2px #2B2B2B;
}
.toolRow:hover {
    background-color: #343434;
}

/*Chrome onion skin */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #onionSkinTools input[type='range'] {
        overflow: hidden;
        width: 80px;
        -webkit-appearance: none;
        background: rgba(255, 255, 255, 0.18);
    }

    #onionSkinTools input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: var(--accentColor);
        margin-top: -1px;
    }

    #onionSkinTools input[type='range']::-webkit-slider-thumb {
        width: 1px;
        -webkit-appearance: none;
        height: 10px;
        background: var(--accentColor);
        box-shadow: -80px 0 0 80px var(--accentColor);
    }

}
/** FF onion skin */
#onionSkinTools input[type="range"]::-moz-range-progress {
    background-color: var(--accentColor);
}
#onionSkinTools input[type="range"]::-moz-range-track {
    background-color: rgba(255, 255, 255, 0.18);
}
/* IE onion skin */
#onionSkinTools input[type="range"]::-ms-fill-lower {
    background-color: var(--accentColor);
}
#onionSkinTools input[type="range"]::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.18);
}

/*Chrome brush size */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #brushSizeTools input[type='range'] {
        overflow: hidden;
        width: 80px;
        -webkit-appearance: none;
        background: rgba(255, 255, 255, 0.18);
    }

    #brushSizeTools input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: var(--currentColor);
        margin-top: -1px;
    }

    #brushSizeTools input[type='range']::-webkit-slider-thumb {
        width: 1px;
        -webkit-appearance: none;
        height: 10px;
        background: var(--currentColor);
        box-shadow: -80px 0 0 80px var(--currentColor);
    }

}
/** FF brush size */
#brushSizeTools input[type="range"]::-moz-range-progress {
    background-color: var(--currentColor);
}
#brushSizeTools input[type="range"]::-moz-range-track {
    background-color: rgba(255, 255, 255, 0.18);
}
/* IE brush size */
#brushSizeTools input[type="range"]::-ms-fill-lower {
    background-color: var(--currentColor);
}
#brushSizeTools input[type="range"]::-ms-fill-upper {
    background-color: rgba(255, 255, 255, 0.18);
}


/* Container of bottom half, mostly just contains the frames, frames control, and playback ------------ */
#bottomHalfContainer {
    width: 100%;
    height: 15%;
    display: flex;
    color: var(--accentColor);
    background-color: #343434;
}

/* Frame navigator or add */
#framesContainer {
    width: 80%;
    height: 100%;

    display: flex;
    justify-content: left;
    align-items: center;

    overflow-x: auto;
    overflow-y: hidden;

    background-color: #343434;
}

.frame {
    height: 80%;
    aspect-ratio: 1;
    margin-left: 1%;

    background-color: var(--viewportBgColor);

    cursor: pointer;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: end;
    color: #000000;
    position: relative;
}
.frame:hover {
    filter: brightness(.85);
}
img {
    border: 0;
}

.frameActive {
    border: solid 5px var(--accentColor);
}

#addFrame {
    height: 80%;
    aspect-ratio: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    margin-left: 1%;
    margin-right: 1%;

    cursor: pointer;
    color: #565656;

    box-sizing: border-box;
    border: solid 5px #565656;
}
#addFrame:hover {
    color: var(--accentColor);
    border: solid 5px var(--accentColor);
}

/* After frames */
#afterFrames {
    height: 100%;
    width: 20%;
}

#frameNav {
    background-color: #424242;
    width: 30%;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    margin-top: 2%;
}

#delFrameNav {
    background-color: #424242;
    width: 30%;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    margin-top: 2%;
}

#dupFrameNav {
    background-color: #424242;
    width: 30%;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    margin-top: 2%;
}

#playNav {
    background-color: #424242;
    width: 30%;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    margin-top: 2%;
}

#frameTimeNav {
    background-color: #424242;
    width: 30%;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    margin-top: 2%;
}