DreamLife_ToolBox/css/max_width.css

/* 响应式设计 */
@media (max-width: 768px) {
    #fullscreen-button {
        display: none; /* 小屏幕隐藏头部全屏按钮 */
    }
    
    #sidebar-fullscreen-button {
        display: flex; /* 小屏幕显示侧边栏全屏按钮 */
    }

    #search-input {
        position: absolute;
        width: 50%; /* 设置宽度为屏幕的50% */
        padding: 5px 15px;
        top: 72px;
        left: 50%; /* 使搜索框居中 */
        z-index: 1000; /* 确保在顶部 */
    }

    #search-input:hover,
    #search-input:focus {
        width: 60%; /* 展开宽度 */
        padding: 5px 20px; /* 调整内边距 */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    }

    /* 小屏幕时侧边栏 */
    .sidebar {
        width: 80%;  /* 设置侧边栏宽度为60% */
        bottom: 0;
        transform: translateX(-100%);  /* 默认隐藏侧边栏 */
        z-index: 2000; /* 确保在顶部 */
    }

    .sidebar.open {
        transform: translateX(0);
        bottom: 0;
        width: 80%;  /* 确保侧边栏在打开时宽度为60% */
    }

    .logo {
        padding-top: 72px !important;
    }

    /* 小屏幕时主内容区 */
    .main-content {
        margin-left:  0px;  /* 小屏幕时移除左边距 */
        margin-right: 0px;  /* 小屏幕时右边距减小 */
        margin-top: 80px;  /* 小屏幕时稍微减小上边距 */
    }

    /* 小屏幕时头部 */
    header {
        height: 40px;  /* 设置头部高度为50px */
        justify-content: space-between; /* 保持头部内容在两端 */
        align-items: center; /* 垂直居中内容 */
        z-index: 3000; /* 确保在顶部 */
    }
    /* 小屏幕时菜单按钮 */
    header .toggle-menu {
        display: block;  /* 在小屏幕时显示菜单按钮 */
        font-size: 24px;
        background: none;
        border: none;
        color: rgb(235, 10, 10);
        cursor: pointer;
        position: absolute;
        top: 10px; /* 距离顶部20px */
        right: 14px; /* 距离右侧20px */
        transition: transform 0.3s ease-in-out;  /* 添加平滑过渡效果 */
    }

    /* 悬停效果，按钮背景颜色变化 */
    header .toggle-menu:hover {
        background-color: rgba(235, 10, 10, 0.1);  /* 增加轻微的背景色变化 */
    }

    #logo_head {
        width: 100%;
    }
}