[css] 背景网格，输入状态消失，其他时候显示

/**
 * 代码参考自: 集市主题[Zhang-light]。
 * 设置背景网格
 * 版本: V0.0.1-dev
 * 时间: 2022-04-19
 * 更新日志：
 */

/* ---------------------------设置页面格子背景-------------------------------------------------------- */
/* 格子背景（适合light主题，其他主题需要重新设置颜色 */
:root {
    --v-bg-grid-color1: rgba(173, 216, 230, 0.4); /* 半透明淡蓝色 */
    --v-bg-grid-color2: rgba(173, 216, 230, 0.4); /* 半透明淡蓝色 */
    --font-size-base: 16px; /* 基础字体大小 */
    --line-height: 1.6; /* 字体行高 */
    --paragraph-spacing: 1.5em; /* 段落间距 */
}

.protyle-content,
.config-bazaar__readme .item__main {
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    margin-bottom: var(--paragraph-spacing);
    text-align: justify;
    color: #333; /* 提高文字与背景对比度 */

    /* 适配移动设备 */
    @media (max-width: 768px) {
        font-size: calc(var(--font-size-base) * 0.9); /* 减小字体大小 */
        --paragraph-spacing: 1.2em; /* 减小段落间距 */
    }

    /* 默认情况下显示网格 */
    background-image:
        linear-gradient(90deg, var(--v-bg-grid-color1) 2px, transparent 0px),
        linear-gradient(1turn, var(--v-bg-grid-color2) 2px, transparent 0px);
    background-size: 40px 40px; /* 改为40px x 40px */
    background-position: 50% center;
    background-repeat: repeat;

    /* 过渡效果 */
    transition: background-image 0.3s ease-in-out;
}

.protyle-content:focus-within,
.config-bazaar__readme .item__main:focus-within {
    /* 当元素或其后代元素获得焦点时隐藏网格 */
    background-image: none;
}

.config-bazaar__readme .item__main {
    border: 0.05em solid rgba(207, 206, 206, 0.3);
}