@import "./home-screen.css";

/* ==== DAILY LOG HEADING ==== */

div.nav-text {
    
    /* space between text in nav section and button icon */
    margin-right: 20px;
}

div.control-container {
    display: flex;
    justify-content: space-between;
    background-color: var(--section-background);
}

button.control-btn {
    background: none;
    color: var(--snow);
    border: none;
    cursor: pointer;
    font-size: var(--log-text-size);
    margin: 0;

    /* top | right | bottom | left */
    padding: 10px 0 2px;
}

button.control-btn[priority="high"] {
    color: var(--red);
}

button.arrow-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    fill: var(--granite);
    cursor: pointer;
}

/* holds "Date" label and the actual date */

#date-container {
    display: flex;
    align-items: baseline;
}

#date-title {

    /* gap between Date label and date button */
    margin-right: var(--date-gap);
}

/* ==== DAILY LOG HEADING DONE ==== */

#date-button {
    border: none;
    border-radius: var(--rounded-button);
    background-color: var(--button-blue);
    color: var(--snow);
    height: 24px;
    font-size: var(--button-text-size);
    font-weight: 500;
    padding-left: var(--button-text-pad);
    padding-right: var(--button-text-pad);
    cursor: pointer;
}

#tracker-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* notes and journal placeholder and text same size and color */

#journal-text,
#notes-placeholder,
#note-entry,
::placeholder {
    font-family: var(--font-sans);
    color: var(--stone);
    font-size: var(--log-text-size);
    opacity: 1;
}

#journal-text {
    resize: none;
    outline: none;
    border: none;
    caret-color: var(--snow);
    background-color: var(--section-background);
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    min-height: 50%;
    max-height: 100%;
}

section {
    
    /* bottom of each section (except last) is horizontal line */
    border-bottom: var(--line-thickness) solid var(--line-grey);

    /* space between sections */
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

section:last-child {
    border: none;
}

#bullet-list {
    list-style-type: none;
    padding-left: 22px;
}

#note-entry {
    display: block;
    outline: none;
    resize: none;
    border: none;
    box-sizing: border-box;
    caret-color: var(--snow);
    background-color: var(--section-background);
    width: 98%;
    height: 100%;
}

/* container for span bullet and text */

#list-element {
    display: flex;
    align-items: center;
    
    /* top | right | bottom | left */
    margin: 2px 0.5em 2px 0;
}

/* Keep constant distance between last list element and section divider */

#list-element:last-child {
    margin-bottom: 14px;
}

/* align and center the bullet point */

#bullet-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--bullet-text-gap);
    color: var(--snow);
    height: 20px;
    width: 20px;
    cursor: pointer;
}

/* h2 for log title (BIG) */

h2 {
    font-family: var(--font-sans);
    color: var(--snow);
    font-size: 28px;
    font-weight: 700;
}

/* h3 for section titles (e.g. Notes) */

h3 {
    font-family: var(--font-sans);
    color: var(--snow);
    font-size: 17px;
    font-weight: 400;
}

#wrapper {
    background: var(--section-background);
    border-radius: var(--rounded-rect);

    /* add space between edges of wrapper and internal contents */

    /* top | right | bottom | left */
    padding: var(--wrap-top) var(--wrap-edge) var(--wrap-top) var(--wrap-edge);
    margin-left: var(--pad-screen-edge);
    margin-right: var(--pad-screen-edge);
    padding-bottom: 100px;
}

/* ===== same across browsers ===== */

/* event '◦' SAME */

#list-element[bullet-type="event-bullet"] > #bullet-container {
    color: var(--purple);
    font-size: 32px;
    padding-bottom: 2px;
}

/* ===== normalizing text/size across browsers ===== */

/* Firefox */
@supports (-moz-appearance: none) {
    
    /* force height/width of bullet pt container */

    #bullet-container {

        /* actually 24 x 24 when rendered */
        width: 20px;
        height: 16px;
    }

    /* default '.' bullet sized up */

    #list-element[bullet-type="default-bullet"] > #bullet-container {
        color: var(--green);
        font-size: 45px;
        padding-bottom: 6px;
    }

    /* important '*' sized down */
    
    #list-element[bullet-type="important-bullet"] > #bullet-container {
        color: var(--red);
        font-size: 30px;
        padding-bottom: 2px;
    }
}

/* Safari/Chrome */

@supports (not (-moz-appearance: none)) {

    /* force height/width of bullet pt container */

    #bullet-container {

        /* actually 24 x 24 when rendered */
        width: 22px;
        height: 17px;
    }

    /* default '.' sized down */

    #list-element[bullet-type="default-bullet"] > #bullet-container {
        color: var(--green);
        font-size: 28px;
        padding-bottom: 5px;
    }

    #list-element[bullet-type="important-bullet"] > #bullet-container {
        color: var(--red);
        font-size: 30px;
        padding: 0;
        padding-left: 2px;
    }
}

/* ===== end normalizing ===== */

:root {
    --rounded-rect: 20px;
    --rounded-button: 5px;
    --line-thickness: 1px;
    --button-text-pad: 10px;
    --log-text-size: 16px;
    --button-text-size: 14px;
    --date-gap: 10px;
    --max-mobile-width: 500px;
    --midnight: #020c1b;
    --full-background: #000;
    --section-background: #1c1c1e;
    --header-background: #262628;
    --header-height: 50px;
    --pad-screen-edge: 5px;
    --section-distance: 20px;
    --section-pad: 5px;
    --wrap-edge: 15px;
    --wrap-top: 15px;
    --distance-to-header: 30px;
    --bullet-text-gap: 2px;
    --bullet-center: 5px;
    --stone: #a6a3ae;
    --granite: #807f86;
    --line-grey: #3d3c41;
    --snow: #fff;
    --red: #ff7070;
    --green: rgb(121 241 163);
    --purple: rgb(199 174 255);
    --blue: #0a84fe;
    --button-blue: #53a1d9;
    --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
    --font-sans: "Calibre", "SF Pro Text", "Inter", "San Francisco", -apple-system, system-ui, blinkmacsystemfont, sans-serif;
}

#list-element :not(textarea) {
    -webkit-touch-callout: none !important; /* iOS Safari */
    -webkit-user-select: none !important; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version for Chrome/Firefox */
}