@charset "utf-8";

html { height: 100%; }

body.普通主体 { width: 100%; height: 100%; display: flex; flex-direction: column; margin: 0px; overflow: hidden; }

main.普通主区 { display: flex; flex: 1; overflow: hidden; }

article.普通文章 { flex: 1; background: linear-gradient(#aaa, #bbb, #aaa); }

aside.普通侧边 { background: linear-gradient(#ccc, #ddd, #ccc);; display: flex; flex-direction: column; overflow: hidden; padding: 5px; }

iframe.主要框架 { border: none; width: 100%; height: 100%; }

form.搜索表单 { position: relative; }

input.搜索输入 { width: calc(100% - 10px); border: none; outline: none; padding: 5px 5px 5px 25px; margin: 5px; border-radius: 10px; background: white url(文件夹/搜索.svg) no-repeat 5px /15px; font-size: 12px; color: gray; -webkit-appearance: none; }

input.提交输入::-webkit-search-cancel-button { display: none; }

input.提交输入 { position: absolute; right: 10px; top: 50%; font-size: 12px; padding: 0 5px; transform: translateY(-50%); color: gray; background: #eee; border: none; outline: none; border-radius: 10px; }

ul.展示列表 { flex: 1; display: flex; flex-direction: column; list-style: none; margin: 0 5px; padding: 0; overflow: hidden scroll; }

ul.展示列表::-webkit-scrollbar { display: none; }

div.分隔分区 { text-align: center; }

div.建议搜索分区 { position: absolute; top: 29px; background: white; margin: 0 45px 0 25px; z-index: 50; box-shadow: 0 2px 2px 0px #888; width: calc(100% - 70px); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

li.展示项目 { display: flex; align-items: center; list-style: none; background: white; border-radius: 10px; padding: 5px; margin: 1px 0; cursor: default; position: relative; opacity: 0.6; }

li.展示项目:hover { opacity: 1; }

img.展示图片 { font-size: 12px; width: 15px; height: 15px; object-fit: cover; }

img.加载中图片 { width: 15px; margin: auto; }

img.播放中图片 { filter: invert(100%); position: absolute; right: 10px; width: 8px; }

img.搜索输入图片 { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; width: 15px; height: 15px; object-fit: contain; }

p.展示段落 { margin: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

p.建议搜索段落 { margin: 0; padding: 5px; font-size: 12px; cursor: default; color: gray; }

p.建议搜索段落:hover { background: rgb(221 221 221 / 50%); }

a.内部链接 { color: gray; font-size: 12px; text-decoration: none; }


@media (max-width: 767.9px) {
    button.主菜单按钮 { margin-left: auto; background: url(../主菜单打开图标.svg) no-repeat center / contain; border: none; outline: none; width: 30px; height: 30px; }
    ul.页眉列表 { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: white; margin: 0; padding: 0.5rem calc(10vw - 30px); border-bottom: solid 1px #bdbdbd; }
    main.普通主区 { flex-direction: column; }
    aside.普通侧边 { flex: 1; }
}

@media (min-width: 768px) {
    div.标识分区 { margin-right: 20px; }
    button.主菜单按钮 { display: none }
    ul.页眉列表 { align-items: flex-end; margin: 0; padding: 0; flex: 1; }
    main.普通主区 { flex-direction: row; }
    aside.普通侧边 { width: 200px; }
}