@import "./color.css";
@import "./dark.css";
@import "./var.css";
@import "./animate.css";
@import "./common.css";
@import "./shared.css";
@import "./font.css";
@import "/components/tools/prompt/prompt.css";

:root {
    font-size: 13px;
}
body {
    display: grid;
    grid-template: auto 1fr / auto 1fr;
    height: 100vh;
    --font: Nunito, LantingHei SC, Microsoft YaHei;
    font-family: var(--font);
    overflow-x: hidden;
    overflow-y: scroll;
    background: var(--bg-body);
    color: var(--text);
}
left-bar {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    border-right: solid 3px var(--primary);
}
tab-bar {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: var(--tab-height);
}
screen-box {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    overflow-y: scroll;
    /* height: 100%; */
    /* min-width: 900px; */
    /* overflow-x: hidden; */
}
screen-box > *:not(.current) {
    display: none;
}
screen-box:empty {
    display: grid;
    place-content: center;
}
screen-box:empty::after {
    content: var(--org);
    font-size: 8rem;
    opacity: 0.10;
    filter: blur(3px);
}
:not(:defined) {
    display:    inline-block;
    opacity: 0;
}
screen-box::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.3rem;
}
screen-box::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
screen-box::-webkit-scrollbar-thumb {
    background: var(--primary);
}
notification-list {
  /* position: fixed; */
  /* right: 0; */
  top: 60px;
}

leaf {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #131626;
    display: grid;
    place-items: center;
    transition: background-color 0.8s;
}
leaf.done {
    animation: fade-out 0.12s forwards;
}
leaf.register {
    background-color: #182C61;
}
leaf.forget {
    background-color: #2C3A47;
}
#container {
    position: absolute;
    top: 10vh;
    left: 10vw;
    width: 80vw;
    height: 80vh;
}