/* --------------------------------------------------------------------------------------------- */
/* TomatOS 2000 Desktop CSS Document ----------------------------------------------------------- */
/* Version 2.1.1a - Published January 1, 2024 ------------------------------------------------ */
/* Copyleft 2023 Chelsea Thorne ---------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------- */
/* App Window Stuff ---------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */

/* System Window stuff ----------------------- */
#core_system {
    display: none;
    top: 2%;
    width: 800px;
    height: 50%;
    left: 20%;
    min-width: 600px;
    min-height: 300px;
}

#go_core_system .go_menu_item_icon {
    background-image: url('images/ui/computer.png');
}

#core_system_appbutton .taskbar_appbutton_icon {
    height: 16px;
    width: 16px;
    margin-right: 4px;
    background-image: url('images/ui/computer.png');
}

#core_system .appwindow_titlebar_icon {
    height: 16px;
    width: 16px;
    margin-right: 4px;
    background-image: url('images/ui/computer.png');
}

#core_system_main_grid {
    display: grid;
    height: 100%;
    grid-template-columns: 200px auto;
    grid-template-rows: calc(100% - 27px);
    grid-template-areas: 
        'system_menu system_block';
    padding: 4px 2px 2px 2px;
    gap: 4px;
}

#core_system_menu_panel {
    grid-area: system_menu;
    background-color: var(--textarea-body);
    line-height: normal;
    border-top: 2px inset var(--box-border-dark);
    border-left: 2px inset var(--box-border-dark);
    border-right: 2px inset var(--box-border-mid);
    border-bottom: 2px inset var(--box-border-mid);
    overflow: auto;
}

#core_system_menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.core_system_menu_item {
    margin: 0px;
    padding: 0px 4px;
}

.core_system_menu_item_disabled {
    text-decoration: line-through;
    color: var(--box-border-mid);
}

.core_system_menu_item_active {
    background-color: var(--highlight);
    color: var(--light-text-color);
}

#core_system_block {
    grid-area: system_block;
    overflow: auto;
}

#core_system_info {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(128px, 256px) max-content max-content max-content;
    width: 100%;
    height: 100%;
}

#core_system_info_logo {
    background-image: url('../../images/TomatOS_Logo_x1024.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#core_system_info h1 {
    padding: 0px;
    margin: 0px;
    text-align: center;
    line-height: 3rem;
    font-size: 3rem;
}

#core_system_info h2 {
    padding: 0px;
    margin: 0px;
    text-align: center;
    line-height: 1.1rem;
    font-size: 1.1rem;
}

#core_system_info_credits {
    display: grid;
    margin: auto;
    padding: 4px;
    margin-top: 32px;
    grid-template-columns: max-content auto;
    grid-template-rows: max-content max-content max-content max-content max-content;
    grid-template-areas: 
    'credit_design credit_cat'
    'credit_logo credit_eo'
    'credit_font credit_ebg'
    'credit_uicons credit_ysk'
    'credit_misc credit_misclist';
    gap: 8px;
}

#core_system_info_credits h3 {
    padding: 0px;
    margin: 0px 0px 8px 0px;
    text-align: right;
    line-height: 1rem;
    font-size: 1rem;
    color: var(--emphasis-text-color1);
}

#core_system_info_credits a {
    color: var(--emphasis-text-color2);
    text-decoration: none;
    cursor: pointer;
}

#core_system_info_credits a:hover {
    text-decoration-line: underline;
}


#core_system_info_credit_design {
    grid-area: credit_design;
}

#core_system_info_credit_cat {
    grid-area: credit_cat;
}

#core_system_info_credit_logo {
    grid-area: credit_logo;
}

#core_system_info_credit_eo {
    grid-area: credit_eo;
}

#core_system_info_credit_font {
    grid-area: credit_font;
}

#core_system_info_credit_ebg {
    grid-area: credit_ebg;
}

#core_system_info_credit_uicons {
    grid-area: credit_uicons;
}

#core_system_info_credit_ysk {
    grid-area: credit_ysk;
}

#core_system_info_credit_misc {
    grid-area: credit_misc;
}

#core_system_info_credit_misclist {
    grid-area: credit_misclist;
    list-style: none;
    padding: 0px 0px 8px 0px;
    margin: 0px;
}

#core_system_info_credit_misclist li:not(:first-child) {
    margin-top: 8px;
}

.core_system_input_button {
    min-width: 3rem;
}


/* Welcome Window stuff ---------------------- */
#core_welcome {
    display: none;
    top: 5%;
    left: calc(50vw - 300px);
    width: 600px;
}

#go_core_welcome .go_menu_item_icon {
    background-image: url('images/ui/tomatos_3dlogo_x16.png');
}

#core_welcome_grid {
    display: grid;
    grid-template-columns: auto 20%;
    grid-template-rows: max-content minmax(10rem, 40vh) max-content;
    grid-template-areas:
        'welcome_header welcome_header'
        'welcome_textzone welcome_buttons'
        'welcome_spacer welcome_closebtn';
    gap: 10px;
    padding: 15px;
    clear: both;
}

#core_welcome_title {
    grid-area: welcome_header;
    font-size: 2em;
    font-weight: normal;
}

#core_welcome_title h1 {
    margin: 0.25em 0px 0.5em 0px;
}

#core_welcome_textzone {
    display:inline-block;
    grid-area: welcome_textzone;
}

#core_welcome h2 {
    font-size: 16pt;
}

#core_welcome_buttons {
    grid-area: welcome_buttons;
    text-align: center;
    border-bottom: 4px groove #dbdbdb;
}

#core_welcome button {
    width: 100%;
}

#core_welcome_spacer {
    grid-area: welcome_spacer;
    padding-top: 8px;
    font-size: 0.8rem;
}

#core_welcome_closebtn {
    grid-area: welcome_closebtn;
    padding-top: 4px;
    margin-top: 0px;
}