/*
 * @Author: Leo Zhao
 * @Date: 2021-09-07 21:08:35
 * @LastEditTime: 2021-10-24 08:03:52
 * @FilePath: /MyNavi/Codes/Css/style.css
 */

body
{
    overflow: hidden;

    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'PingFang SC', 'Myriad Pro', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.075rem;

    --light-color: #1296db;
    --dark-color: #0e6492;
    --current-color: var(--light-color);
    --preserved-color: var(--dark-color);
}

a
{
    text-decoration: none;
    font-size: 1.25rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

a:visited
{
    color: var(--current-color);
}

input
{
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.075rem;

    outline: none;
    overflow: scroll;
    white-space: nowrap;
}

li
{
    list-style: none;
}

select
{
    outline: none;
}

svg
{
    width: 100%;
    height: 100%;
}

::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb 
{
    border-radius   : 8px;
    background-color: var(--current-color);
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-track 
{
    background-color: rgba(240, 248, 255);
    border-radius: 8px;
}

#preloadImages
{
    display: none;
    background: url(./Resources/Images/Icon_SearchEngine/ICON_Baidu.svg),
                url(./Resources/Images/Icon_SearchEngine/ICON_Bing.svg),
                url(./Resources/Images/Icon_SearchEngine/ICON_Google.svg),
                url(./Resources/Images/Backgrounds/Thumbnail/Bkg_Img_0.ico),
                url(./Resources/Images/Backgrounds/Thumbnail/Bkg_Img_1.ico),
                url(./Resources/Images/Backgrounds/Thumbnail/Bkg_Img_2.ico),
                url(./Resources/Images/Backgrounds/Thumbnail/Bkg_Img_3.ico),
                url(./Resources/Images/Backgrounds/Bkg_Img_0.jpg), 
                url(./Resources/Images/Backgrounds/Bkg_Img_1.jpg),
                url(./Resources/Images/Backgrounds/Bkg_Img_2.jpg),
                url(./Resources/Images/Backgrounds/Bkg_Img_3.jpg),;
}

#contextMenu
{
    position: absolute;
    background-color: white;

    width: 10rem;

    border: medium solid var(--current-color);
    box-shadow: #80808069 -5px 5px 12px;

    border-radius: 8px;
    padding: 8px;

    font-size: 1rem;

    overflow-x: hidden;
    overflow-y: visible;
    white-space: nowrap;

    text-align: left;

    z-index: 10;
}

#contextList
{
    margin: 0;
    padding: 0;
}

.contextMenuItem
{
    padding: 0 8px;
    border-radius: 5px;
    margin-bottom: 3px;
    user-select: none;

    color: var(--current-color);

    cursor: pointer;
}

.contextMenuItem:hover
{
    background-color: var(--preserved-color);
    color: white;
}

#mainModuleContainer
{
    position: fixed;

    left: calc(50vw - 25rem);
    top: 0;

    width: 50rem;
    height: 100%;
}

#loadingModule
{
    position: fixed;

    left: 0;
    top: 0;

    width: 100vw;
    height: 100vh;

    color: var(--current-color);
    user-select: none;

    z-index: 8;
}

#loadingBackground
{
    position: fixed;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: white;
}

#loadingIcon
{
    position: absolute;
    width: 10rem;
    height: 10rem;
    top: calc(40vh - 5rem);
    left: calc(50vw - 5rem);
}

#loadingText
{
    position: fixed;
    width: 30rem;
    left: calc(50% - 15rem);
    top: 60%;

    font-size: 2.5rem;
    letter-spacing: 2px;
    text-align: center;
}

#loadingPrompt
{
    position: absolute;

    bottom: 6vh;
    width: 30rem;
    left: calc(50vw - 15rem);


    font-size: 1rem;
    text-align: center;
}

#loadingPrompt a
{
    color: var(--current-color);
}

#loadingInstruction
{
    position: absolute;
    top: 6rem;
    left: 0;

    width: 5rem;
    height: 5rem;

    font-size: 5rem;
}

#loadingInstructionText
{
    position: absolute;
    top: 12.5rem;
    margin: 3px;

    font-size: 1rem;
    letter-spacing: 0;

}

#backgroundModule
{
    position: fixed;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: -5;
}

#backgroundImage
{
    position: relative;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    /* FORTEST */
    /* background-image: url(./Resources/Images/Backgrounds/Bkg_Img_0.jpg); */

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#iconContainer
{
    position: fixed;
    top: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
}

#iconTrigger
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    cursor: help;
    z-index: 5;
}

#searchModule
{
    display: block;
    margin: 0 auto;

    position: sticky;

    width: 100%;
    height: 30%;

    max-width: 50rem;
}

#searchEngineLogo
{
    position: relative;
    top: 35%;

    /* make it in the center */
    margin: 0 auto;

    width: 20%;
    height: 20%;

    min-width: 200px;
    max-width: 200px;
    min-height: 55px;
}

/* TODO: If the media's width is too small, it should load another bkg_img 
 * for better visibility
*/
#searchEngineImage
{
    width: 100%;
    height: 100%;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-image: url(./Resources/Images/Icon_SearchEngine/ICON_Google.svg);*/

    cursor: pointer;
}

#searchEngineSelect
{
    position: absolute;

    /*width: 75%;
    left: 12.5%;

    margin-top: 3%;*/
    width: 100%;
    height: fit-content;

    left: 0;
    top: 0;

    padding: 0.3rem 0;
    margin-top: 0;

    border: medium solid var(--current-color);
    border-radius: 8px;

    background-color: white;

    /* font-size: 1.25rem; */
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.075rem;
    text-align: center;

    z-index: 5;
}

.searchEngineSelectOption
{
    background-color: white;
    user-select: none;

    cursor: pointer;
}

.searchEngineSelectOption:hover
{
    background-color: aliceblue;
}

#searchEditor
{
    position: relative;
    top: 45%;

    margin: 0 auto;

    width: 100%;
    height: 2rem;

    text-align: center;
}

#searchInput
{
    float: left;

    width: 80%;
    height: 100%;

    /*max-width: 620px;*/

    padding-left: 2%; /* To create a space by the head */
    padding-right: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

    background-color: rgba(255, 255, 255, 0.5);

    border: medium solid var(--current-color);
    border-radius: 8px 0 0 8px;

    text-align: left;
    vertical-align: middle;

    transition: background-color 0.8s;
}

#searchInput:focus
{
    background-color: aliceblue !important;
}

#searchInput:hover
{
    background-color: white !important;
}

#searchSuggestion
{
    position: absolute;
    /* the same length as searchInput's 80%, and 2% for searchInput's padding */
    width: 82%;  
    height: fit-content;

    background-color: rgb(255, 255, 255);

    border: medium solid var(--current-color);
    border-top: 0;
    border-radius: 0 0 8px 8px;

    margin-top: 2.5rem;
    /* the same as searchInput */
    margin-left: 0%;

    text-align: left;

    z-index: 5;
}

#searchSuggestionList
{
    margin: 1rem 0 1rem 0;

    /* the 'padding-left' of 'searchInput' is 2%, 
      and the 'searchSuggestion''s width is 77%,
      therefore, to have the padding-left consistent,
      this value should be 2 / 0.77, that is 2.597
    */
    padding-left: 2.597%;

    /* this is random */
    padding-right: 2%;
}

.searchSuggestionItem
{
    width: 100%;
    height: fit-content;

    font-size: 1.25rem;

    user-select: none;
}

.searchSuggestionItem:hover
{
    background-color: rgb(181, 231, 255);
}

.searchSuggestionItem[tag="current"]
{
    background-color: rgb(181, 231, 255);
}

#searchButton
{
    float: left;

    width: 15%;
    height: 100%;

    /*max-width: 125px;*/

    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

    color: white;
    background-color: var(--current-color);

    border: medium solid var(--current-color);
    border-radius: 0 8px 8px 0;

    /* To solve the problem that the "inline-block" elements
     * may sink if here are texts
    */
    vertical-align: middle;

    cursor: pointer;
}

#websitesModule
{
    display: block;
    margin: 0 auto;

    /* disable the son element to transform because of scrolling bar */
    width: 100%;
    height: 70%;

    max-width: 50rem;

    overflow-y: hidden;
}

#websitesModule:hover
{
    overflow-y: scroll;
}

#websitesContainer
{
    width: calc(100% - 8px);
}

.websitesGroup
{
    margin: 0.5% 0;
    padding: 0;

    border-radius: 8px;
}

.websitesGroupTitle
{
    display: inline-block;
    background-color: var(--current-color);
    color: white;

    margin: 1% 3% 1% 5%;
    padding: 2px 8px;
    border-radius: 8px;

    vertical-align: middle;

    cursor: default;
}

.websitesGroupAppendix
{
    margin: 0.5% 0;
    padding: 0;
    vertical-align: middle;
}

.websitesGroupAppendixTitle
{
    display: inline-block;
    background-color: var(--current-color);
    color: white;

    height: 1.75rem;
    line-height: 1.75rem;

    margin: 1% 3% 1% 5%;
    padding: 2px 8px;
    border-radius: 8px;

    text-align: right;
    vertical-align: middle;
    cursor: crosshair;

    user-select: none;
}

.websitesItem
{
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--current-color);

    margin: 1% 0.5%;
    padding: 2px 8px;
    border-radius: 8px;

    vertical-align: middle;

    cursor: grab;

    transition: background-color 0.8s;
}

.websitesItem:hover
{
    background-color: white !important;
}

.websitesItem div
{
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}

.websitesLink
{
    color: var(--current-color);
}

.websiteAppendix
{
    display: inline-block;
    
    height: 1.75rem;
    line-height: 1.75rem;
    
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--current-color);

    margin: 1% 0.5%;
    padding: 2px 8px;
    border-radius: 8px;

    text-align: center;
    vertical-align: middle;
    cursor: crosshair;

    user-select: none;

    transition: background-color 0.8s
}

.websiteAppendix:hover
{
    background-color: white !important;
}

/*#websiteAppendingPanel*/
.floatingWindow
{
    position: absolute;

    width: 12rem;

    background-color: var(--current-color);

    border: medium solid var(--current-color);
    border-radius: 8px;

    box-shadow: #80808069 -5px 5px 12px;

    z-index: 5;

    --animate-duration: 0.8s;
}

/*#websiteAppendingPanel::before*/
.floatingWindow::before
{
    content: "◀︎";
    position: absolute;
    left: -1.25rem;
    top: calc(50% - 1rem);
    margin-left: 4px;
    color: var(--current-color);
}

/*#websiteAppendingPanel::after*/
/*.floatingWindow::after
{
     TODO 
}*/

/*#websiteAppendingPanel input*/
.floatingWindow input
{
    display: block;
    margin: 0 auto;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;

    width: 10rem;
    height: 1.25rem;

    font-size: 1rem;
    
    padding-left: 3%;

    border: medium solid var(--current-color);
    border-radius: 8px;
}

/*#websiteAppendingConfirmPanel*/
.floatingWindowConfirmPanel
{
    position: absolute;

    bottom: -1rem;
    right: 0;

    user-select: none;
}

/*#websiteAppendingConfirmPanel div*/
.floatingWindowConfirmPanel div
{
    display: inline-block;

    width: 1.25rem;
    height: 1.25rem;

    text-align: center;
    font-size: 1rem;

    border-radius: 50%;
    background-color: white;
    color: var(--current-color);

    cursor: pointer;
}

.websiteDeleteButton
{
    position: absolute;
    left: -0.5rem;
    top: -0.5rem;
    width: 1rem;
    height: 1rem;

    border-radius: 50%;

    background-image: url(./Resources/Icon/ICON_close.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    cursor: crosshair;
    z-index: 5;
}

.groupDeleteButton
{
    position: absolute;
    right: -0.5rem;
    top: -0.5rem;
    width: 1rem;
    height: 1rem;

    border-radius: 50%;

    background-image: url(./Resources/Icon/ICON_close.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    cursor: crosshair;
    z-index: 5;
}

#settingModule
{
    position: fixed;

    right: 3%;
    bottom: 3%;

    width: 2.5rem;
    height: 2.5rem;

    z-index: 5;
}

#settingButton
{
    width: 100%;
    height: 100%;

    /*background-image: url(./Resources/Icon/ICON_Setting.svg);*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 0 3px 3px 3px;
    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.8s, padding 0.8s, border-radius 0.8s;
}

#settingButton:hover
{
    background-color: white;
}

#settingMenu
{
    position: absolute;

    bottom: 2.5rem;
    right: inherit;

    --animate-duration: 0.5s;
}

.settingModuleWindow
{
    background-color: white;

    height: 10rem;
    width: 12rem;

    border: medium solid var(--current-color);
    box-shadow: #80808069 -5px 5px 12px;

    border-radius: 8px;
    padding: 8px;

    font-size: 1rem;

    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;

    text-align: left;
}

.settingFixedListItem::after
{
    float: right;
    content: "➤";
}

.settingListItem
{
    padding: 0 8px;
    border-radius: 5px;
    margin-bottom: 3px;
    user-select: none;

    color: var(--current-color);

    cursor: pointer;
}

.settingListItem:hover
{
    background-color: var(--preserved-color);
    color: white;
}

.settingListItemUnselected
{
    background-color: white;
    color: var(--current-color);
}

.settingListItemSelected
{
    background-color: var(--current-color);
    color: white;
}

.settingSubPanel span
{
    display: block;
    margin-bottom: 5px;
    padding: 3px;
    background-color: var(--current-color);
    color: white;
    font-size: 1rem;
    text-align: center;

    border-radius: 8px;
    user-select: none;
}

.settingBackgroundItem
{
    /*display: inline-block;*/

    width: 2.5rem;
    height: 2.5rem;

    float: left;
    margin: 3px;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 0.3rem;
    /*border: thick solid transparent;*/

    text-align: center;

    cursor: pointer;
}

.settingBackgroundItemSelected::after
{
    content: "✓";
    font-size: 2rem;
    font-weight: bold;
    color: white;
    line-height: 2.5rem;
}

.settingTextColorItem
{
    width: 2.5rem;
    height: 2.5rem;

    float: left;
    margin: 3px;

    border-radius: 0.3rem;

    text-align: center;

    cursor: pointer;
}

.settingTextColorItemSelected::after
{
    content: "✓";
    font-size: 2rem;
    font-weight: bold;
    color: white;
    line-height: 2.5rem;
}