style.css

html, body
{
    overflow-x: hidden;
}

body
{
    background-color: #fff8b8;

    font-family: Arial;
}

button
{
    /* mimicking chromium-based colors */
    color: black;
    border-color: black;
    background-color: rgba(240, 240, 240); /* found this value from https://github.com/chromium/chromium/blob/6272343bc05f9498f366682399eb0aa21f76ff47/content/child/webthemeengine_impl_default_browsertest.cc based on the names of colors in the devtools inspector */

    transition: color 0.15s, background-color 0.15s, border-color 0.15s;

    /* This combined with the change to divs separating groups of buttons maintains the 10px gap, while also having a slightly less 8px gap between wrapped buttons (buttons that wrap to the next line); before, there would be no gap between these vertically, making it look bad */
    margin-top: 4px;
    margin-bottom: 4px;
}

button:disabled
{
    /* mimicking the coloring/styling used by default on chromium-based browsers; found these values from devtools inspector */
    /* -------- */
    /* color: -internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)); */
    /* background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)); */
    /* border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3)); */
    /* -------- */
    color: rgba(16, 16, 16, 0.3);
    background-color: rgba(239, 239, 239, 0.3);
    border-color: rgba(118, 118, 118, 0.3);
}

button:active
{
    transform: scale(0.98);
}

button:hover:enabled
{
    cursor: pointer;
}

/* puts margin between consecutive buttons: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator */
button + button
{
    margin-left: 10px;
}

button, input, textarea, select
{
    border-style: solid;
}

input, textarea
{
    transition: background-color 0.3s;
}

:is(input, textarea):focus
{
    background-color: #ff05;
}

/* only want to affect text-type inputs; otherwise, it messes up sliders, radio buttons, and checkboxes */
button, input[type="text"], textarea, select
{
    border-radius: 0;
    border-width: 2px;
}

td
{
    border: 3px solid;
    border-color: #0002;
    transition: border-color 0.2s;

    animation: grow 0.3s;
}

@keyframes grow
{
    from
    {
        transform: scale(0.8);
        opacity: 0.8;
        border-radius: 50px;
    }
    to
    {
        transform: scale(1);
        opacity: 1;
    }
}

td:hover
{
    border-color: #ffd600;

    cursor: pointer;
}

td.selected:hover
{
    border-color: purple; /* orange or pink might also work well */
}



#bottomText
{
    text-align: center;

    font-size: 50px;
    font-weight: bold;

    margin-top: 10px;
    margin-bottom: 0px; /* this makes the screenshotRegion div wrap more tightly around this */

    /* this makes it so that text never wraps (other than where the <br>'s are put, which come from the multiline input), and it preserves consecutive spaces instead of collapsing them into 1; this is required for images to properly generate on android (otherwise the wrapping isn't taken into account as part of the DOM's calculated regions, making it go out of the image and over top the watermark) */
    white-space: pre;
}

#bottomText:hover
{
    cursor: pointer;
}

#itemTable
{
    margin: 0 auto; /* makes the table stay centered in the div ( https://stackoverflow.com/questions/7059394/how-to-position-a-table-at-the-center-of-div-horizontally-vertically ) */
}

.itemCell
{
    position: relative;
}

.itemImage
{
    /* preserves aspect ratio (prevents stretching); might want to find a way to scale up images smaller than the 100x100 of the cell itself? */
    width: 100px;
    height: 100px;
    object-fit: contain; /* prevents stretching the image; object-fit:scale-down seems like it does the same thing, except it blows up items smaller than the 100x100 which also don't have a 1:1 aspect ratio */

    /* Makes the item images stand out a touch more */
    --itemImageOutlineColor: rgb(0, 0, 0, 0.5); /* default */
    filter: drop-shadow(0 0 2px var(--itemImageOutlineColor));
    transition: filter 0.2s;
}
.itemImage:hover
{
    --itemImageOutlineColor: rgb(255, 165, 0, 0.8);
}


/* the positioning for both of these labels behave weird; maybe fix at some point */


.label
{
    position: absolute;

    font-weight: bold;

    color: white;

    /* TODO -- I might want to switch over to the non-legacy format of "r g b / a", instead of "r, g, b, a" ( https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb ) */
    --labelOutlineColor: 0, 0, 0; /* default */
    /* IMPORTANT -- MUST use rgb comma list for the variable when specifying colors, not color names! */
    filter:
        drop-shadow(0 0 1px rgb(var(--labelOutlineColor), 0.8))
        drop-shadow(0 0 1px rgb(var(--labelOutlineColor), 0.8))
        drop-shadow(0 0 5px rgb(var(--labelOutlineColor), 0.8));
    transition: filter 0.2s;

    /* TODO -- try to improve the sharpness of the text "outline" with something like this (this seems to be too thick, and the positioning gets messed up when zooming in on the page) */
    /* filter: */
    /*     drop-shadow(0 0 5px rgb(var(--labelOutlineColor), 0.2)) */

    /*     drop-shadow(-1px -1px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow( 0px -1px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow( 1px -1px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow( 1px  0px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow( 1px  1px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow( 0px  1px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow(-1px  1px  0px rgb(var(--labelOutlineColor), 0.3)) */
    /*     drop-shadow(-1px  0px  0px rgb(var(--labelOutlineColor), 0.3)); */
}
.label:hover
{
    --labelOutlineColor: 255, 165, 0;
}
.customLabel
{
    --labelOutlineColor: 255, 0, 0;
}

.quantityLabel
{
    top: 5px;
    right: 5px;

    font-size: 50px;

    transition: opacity 0.2s;
}
.customQuantityLabel
{
    top: 53px;
    left: 5px;

    font-size: 25px;

    --labelOutlineColor: 255, 0, 0;

    animation: fadeIn 0.2s forwards;
}

.priceLabel
{
    transform: translate(0%, -100%);
    top: 2px;
    left: 2px;

    font-size: 30px;

    transition: opacity 0.2s;
}
.customPriceLabel
{
    transform: translate(0%, -100%);
    top: 2px;
    right: 2px;

    font-size: 25px;
    /* I don't know why I used to have this yellow, but if I decide to uncomment this again, the custom quantity label should also have this (which means I should apply this to .customLabel) */
    /* color: yellow; */

    animation: fadeIn 0.2s forwards;
}

.coin
{
    position: relative;
    top: 2px;

    /* have to manually specify width and height due to weird github pages issue */
    width: 28px;
    height: 28px;
}

#screenshotRegion
{
    background-color: inherit; /* needed for the html-to-image library to have the right background (it seems to have CORS issues in reading my styl.css file) */
    display: inline-block; /* makes the screenshotRegion wrap tightly around its children */

    transform-origin: top left;
}


/* shouldn't be a class, since not all overlays should have this */
/* #settingsOverlay, #failedCopyOverlay */
/* Actually, maybe I should make some special class instead of doing it like this? */
.overlay:not(#changelogOverlay)
{
    text-align: center;
}

.overlayBackground
{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;

    background-color: #000a;
}

.overlayBox
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50.00005%, -50%); /* the ever-so-slight offset is done since the left side of the outline of the textboxes gets weird (maybe that's only for my computer at 100%, I don't know.) */

    min-width: 20%;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;

    background-color: #fffaca;
    border-style: solid;
    border-color: black;
    border-width: 4px;
    border-radius: 5px;
}

.overlayInner
{
    margin: 10px;
}

/* technically, the name hideOverlayButton would better match how I named the id's, but I wanted to stay consistent with my naming of the css classes, as overlay is the more general/"parent" component */
.overlayHideButton
{
    position: sticky;

    top: 0;
    /* only works properly when using left, not right */
    left: calc(100%);

    transform: translate(-50%, 50%);
}
/* Had to make a more specific rule than button:active in order to maintain the translate of the transform in addition to the scaling */
.overlayHideButton:active
{
    transform: translate(-50%, 50%) scale(0.98);
}


#abbreviationMappingTableArea
{
    max-height: 400px;
    overflow-y: auto;
    display: inline-block;
}


/* need to use not disabled instead of enabled because some items which get selected don't have an enabled/disabled state (i.e. normal cells); said items should still properly show as selected */
.selected:not(:disabled), .invalid
{
    border-style: solid;
    border-color: red;
    outline: none; /* prevents black outline of focused input, along with when shift is pressed when a button is "focused" */
}

/* the second entry makes every element inside totalSelectedPriceArea fade in (it also makes images inside the p tag not fade in each time they are loaded, but it does fade in with the p tag itself the first time which is what I want; the :not:empty is to make sure the equation fades in whenever it is populated, since it can be "visible" while still empty, causing it to otherwise instantly appear when populated) */
.overlay, #totalSelectedPriceArea :not(img, :empty), #priceCalculationModeSelectionInfo
{
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

#totalSelectedPriceMessageHolder
{
    font-weight: bold;

    transition: color 0.2s;
}

.fuzzyMatchesHolder
{
    position: absolute;
    width: 100%;
    z-index: 1;

    margin: 0;
    padding: 0;

    /* fixes the gap issues */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* animates when the list of matches goes from empty -> non-empty */
.fuzzyMatchesHolder:not(:empty)
{
    animation: fadeIn 0.2s forwards;
}

/* due to how the display: flex works, this holder being empty still blocks input for a region of the screen (causing issues with phones that wrap the price input to the next line) */
.fuzzyMatchesHolder:empty
{
    display: none;
}

.fuzzyMatchesHolder button
{
    width: 100%;
    height: 100%;
    background-color: grey;
    /* border-color: grey; */
    border-style: solid;
    border-width: 1px;
    border-color: dimgrey;
    color: white;

    margin: 0;
    padding-left: 1em; /* prevent overlap with 1-9,0 number label */
}

.fuzzyMatchesHolder div
{
    position: relative; /* needed so that absolute position of p children works properly */
}

.fuzzyMatchesHolder p
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;

    padding: 0;
    margin: 0;

    font-size: 10pt;
    font-weight: bold;

    color: lime;
}


.notification
{
    /* absolute and fixed do the same thing (makes the element not take up space in the "flow" of the document), except absolute uses position offsets relative to the parent, whereas fixed does not; fixed is relative to the initial viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/position */
    /*position; absolute;*/
    position: fixed;
    left: 50%;
    top: 0;

    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    padding: 10px;

    animation: slideFade 5s forwards; /* maintain end state: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode */
}

.notificationSuccess
{
    background-color: #d1ffbd;
    border-color: #2e990055;
}

.notificationFail
{
    background-color: #ffc8c8;
    border-color: #db2f2355;
}

@keyframes slideFade
{
    /* multiple keyframes can have the same settings, and keyframes don't have to be specified in order ( https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes ) */
    from, to
    {
        /* need to be using opacity so that the entire element fades in/out */
        opacity: 0;
        transform: translate(-50%, -100%);
    }
    20%, 80%
    {
        opacity: 1;
        transform: translate(-50%, 10%);
    }
}


/* I could alternatively have a special class for whether this is actively loading or not (or just add/remove the .loading class), but I feel like the use of hidden better aligns with the rest of my code elsewhere */
.loading:not([hidden])
{
    display: inline-block;
    vertical-align: middle;

    margin-left: 10px;
    margin-right: 10px;

    width: 12px;
    height: 12px;

    border-style: solid;
    border-width: 3px;
    border-radius: 100%;
    border-color: blue blue blue transparent;

    animation: spin 2.5s linear infinite;
}

/* TODO -- you can change animation timing functions throughout the keyframes: https://drafts.csswg.org/css-animations-1/#timing-functions */
@keyframes spin
{
    from
    {
        transform: rotate(0deg);
    }
    50%
    {
        transform: rotate(360deg) scale(0.8);
        border-color: lightblue lightblue lightblue transparent;
    }
    to
    {
        transform: rotate(720deg);
    }
}

/* Want this overlay to take up most of the screen horizontally (allowing the image to be more visible) */
#failedCopyOverlay .overlayBox
{
    /* TODO -- since I made the max width/height for overlays 90%, should I change this to 90% as well? */
    width: 80%;
}

/* I want this to resize the overlay box to up to 80%, but I can't seem to get that to work without causing overflow horizontal scrollbar to show up; this seems to look fine anyway */
/* TODO -- it would be nice to make this image scale to fit on screen without causing overflow in either direction, though that probably wouldn't work well for mobile anyway */
#failedCopyOverlayImageHolder
{
    max-width: 100%;
}

/* maintain reasonable width of contact overlay even on mobile */
#contactOverlay .overlayInner
{
    min-width: 12em;
}

#screenshotPriceHolder, .watermark
{
    font-size: 16px;
    font-weight: bold;

    margin: 10px;
    margin-top: 2px;
}

#screenshotPriceHolder
{
    float: left;

    animation: fadeIn 0.2s forwards;
}

.watermark
{
    text-align: right;
}