@charset "utf-8";
/* ============================================================================
   响应式布局（前台 + 后台）
   ----------------------------------------------------------------------------
   原来 main.css 里那套手机规则用的是 max-device-width（看的是设备宽度，不是
   窗口宽度），桌面浏览器拉窄窗口根本不生效；而且做法是「把侧栏、搜索、节点导航
   全部 display:none」，手机上既看不到导航也搜不了帖子。这里按窗口宽度重做：

     ≤ 991px  小笔记本 / 平板横屏：栅格收窄，正文占满
     ≤ 767px  手机横屏 / 竖屏：单列、导航折叠、表单铺满、表格横向滚动
     ≤ 480px  小屏手机：再压一档字号和间距

   这个文件必须放在 main.css 之后加载（layout.html / admin/layout.html 里已处理）。
   ========================================================================== */

/* ---------------------------------------------------------------- 平板 */
@media (max-width: 991px) {
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 100%;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    .container-fluid.container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .top-navbar .navbar-inner .brand {
        margin-left: 0;
        padding-left: 0;
    }

    /* 侧栏在窄屏上稍微收一点，别把正文挤成一条 */
    .row-fluid .right {
        margin-top: 0;
    }

    /* 窄屏上搜索框永不折叠：不跟随汉堡菜单收起，直接留在导航条里 */
    .top-navbar .navbar-inner .navbar-search {
        display: block;
    }
}

/* ---------------------------------------------------------------- 手机 */
@media (max-width: 767px) {
    html,
    body {
        /* iOS 横屏时不要自作主张放大字号 */
        -webkit-text-size-adjust: 100%;
    }

    .container-fluid,
    .container-fluid.container,
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* ---------- 前台顶栏：折叠成「Logo + 铃铛 + 汉堡菜单」 ---------- */
    .top-navbar {
        font-size: 14px;
    }

    .top-navbar .navbar-inner {
        padding: 0 10px;
    }

    .top-navbar .navbar-inner .brand {
        float: left;
        margin: 0;
        padding: 8px 0;
        max-width: 62%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 17px;
        line-height: 24px;
    }

    .top-navbar .navbar-inner .brand .brand-logo {
        max-height: 26px;
        max-width: 140px;
    }

    .top-navbar .navbar-inner .brand.brand-has-logo {
        line-height: 26px;
        padding: 7px 0;
    }

    /* 手机端图标跟着 17px 的站名一起收一点 */
    .top-navbar .navbar-inner .brand .brand-pi {
        width: 24px;
        height: 24px;
        margin-right: 7px;
        vertical-align: -6px;
        border-radius: 6px;
    }

    /* 汉堡按钮：navbar 挂着 navbar-inverse 的类，但顶栏本身是浅色的，
       直接用 Bootstrap 的深色按钮会像一块黑砖，这里改回浅底深条 */
    .top-navbar .navbar-inner .btn-navbar {
        display: block;
        float: right;
        margin: 6px 0 0 8px;
        padding: 6px 9px;
        background-color: #f5f5f5;
        background-image: none;
        border: 1px solid #ddd;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .top-navbar .navbar-inner .btn-navbar:hover,
    .top-navbar .navbar-inner .btn-navbar:focus,
    .top-navbar .navbar-inner .btn-navbar:active {
        background-color: #e9e9e9;
        background-image: none;
    }

    .top-navbar .navbar-inner .btn-navbar .icon-bar {
        background-color: #555;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .top-navbar .navbar-inner .divider-vertical {
        display: none;
    }

    .top-navbar .navbar-inner .notification-indicator {
        float: right;
        width: 32px;
        height: 40px;
        margin: 0;
        line-height: 40px;
    }

    .top-navbar .navbar-inner .notification-indicator.contextually-unread {
        margin: 0;
    }

    /* 右侧账号区在手机上是整条竖着展开的，退回块级显示（桌面是弹性盒） */
    .top-navbar .navbar-inner .nav-account,
    .top-navbar .navbar-inner .nav-account.pull-right {
        display: block;
        float: none;
        width: 100%;
    }

    /* 折叠态：高度 0 + overflow hidden；展开态由 Bootstrap 的 .in 接管 */
    .top-navbar .navbar-inner .nav-collapse,
    .top-navbar .navbar-inner .nav-collapse.pull-right {
        float: none;
        clear: both;
        width: 100%;
        margin: 0;
    }

    .top-navbar .navbar-inner .nav-collapse.collapse {
        height: 0;
        overflow: hidden;
        border-top: 0;
    }

    .top-navbar .navbar-inner .nav-collapse.collapse.in {
        height: auto;
        overflow: visible;
        border-top: 1px solid #e3e3e3;
        padding: 4px 0 6px;
    }

    .top-navbar .navbar-inner .nav-collapse .nav {
        float: none;
        margin: 0;
    }

    .top-navbar .navbar-inner .nav-collapse .nav > li {
        float: none;
        display: block;
        margin: 0;
    }

    .top-navbar .navbar-inner .nav-collapse .nav > li > a {
        padding: 10px 4px;
        border-bottom: 1px solid #eee;
        text-shadow: none;
    }

    .top-navbar .navbar-inner .nav-collapse .nav > li:last-child > a {
        border-bottom: 0;
    }

    /* 账号菜单不用竖着排 4 行，横着放一条就够 */
    .top-navbar .navbar-inner .nav-collapse .account-menu {
        display: block;
        padding-top: 2px;
    }

    .top-navbar .navbar-inner .nav-collapse .account-menu > li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        float: none;
        vertical-align: middle;
    }

    .top-navbar .navbar-inner .nav-collapse .account-menu > li > a {
        padding: 8px 10px;
        border-bottom: 0;
    }

    /* 账号菜单整条靠右：未登录时那一个「登录」按钮原来贴在折叠面板左边，
       Bootstrap 的 .pull-right 在折叠态被 float:none 顶掉了，这里用 text-align 补回来 */
    .top-navbar .navbar-inner .nav-account .account-menu {
        text-align: right;
        padding-right: 0;
    }

    /* 按钮左右内边距必须对称，否则文字会被挤到右边框上。
       整条靠右是靠上面的 text-align: right 实现的，按钮自身的 padding 不用动。 */
    .top-navbar .navbar-inner .nav-account .account-menu > li:last-child > a {
        padding: 8px 10px;
    }

    /* 搜索框收进汉堡菜单：顶栏只留 Logo / 铃铛 / 汉堡一行，点开菜单后
       搜索框出现在菜单项下面（DOM 里 .navbar-search 紧跟第一个 .nav-collapse，
       用相邻兄弟选择器读折叠状态，不需要额外 JS）。 */
    .top-navbar .navbar-inner .navbar-search {
        display: none;
        float: none;
        clear: both;
        width: 100%;
        margin: 4px 0 8px;
        padding: 0;
        box-sizing: border-box;
    }

    /* 菜单展开（Bootstrap collapse 加 .in）后才显示搜索框 */
    .top-navbar .navbar-inner .nav-collapse.in + .navbar-search {
        display: block;
    }

    .top-navbar .navbar-inner .navbar-search .search-query {
        width: 100%;
        height: 34px;
        padding: 0 12px;
        box-sizing: border-box;
        -webkit-border-radius: 17px;
        -moz-border-radius: 17px;
        border-radius: 17px;
        /* iOS 在 input 字号 < 16px 时会自动放大整个页面，看着就像「布局乱了」 */
        font-size: 16px;
    }

    /* ---------- 搜索页：输入框 + 按钮保持一行 ---------- */
    .search-form-main input[type="text"] {
        width: auto;
        height: 38px;
        min-height: 38px;
        margin: 0;
        font-size: 16px;
        line-height: 36px;
    }

    .search-form-main .btn {
        height: 38px;
        margin: 0 0 0 -1px;
        padding: 0 14px;
        font-size: 14px;
        line-height: 36px;
    }

    /* ---------- 正文：单列，侧栏落到主内容下面 ---------- */
    .row-fluid .left,
    .row-fluid .right {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }

    .row-fluid .right {
        margin-top: 12px;
    }

    .container-fluid.container,
    .container-fluid.container > .row-fluid {
        overflow: visible;
    }

    /* ---------- 帖子列表 ---------- */
    .topics .topics-empty {
        padding: 56px 16px;
    }

    .topics .topics-empty .octicon {
        font-size: 36px;
        margin-bottom: 12px;
    }

    .topics .topic-item {
        padding: 9px 34px 9px 9px;
        line-height: 16px;
    }

    .topics .topic-item .avatar {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }

    .topics .topic-item .main {
        padding: 0 0 0 40px;
    }

    .topics .topic-item .title {
        font-size: 15px;
        line-height: 20px;
        margin-bottom: 4px;
        word-break: break-word;
    }

    .topics .topic-item .meta {
        font-size: 12px;
        line-height: 18px;
        color: #a5a5a5;
    }

    .topics .topic-item .meta span {
        display: inline-block;
        margin: 0 6px 0 0;
    }

    .topics .topic-item .meta .node {
        padding: 2px 4px;
    }

    .topics .topic-item .count {
        right: 6px;
        top: 50%;
        margin-top: -12px;
    }

    .topics .topic-item .count a {
        padding: 2px 6px;
        font-size: 11px;
    }

    .topics .pagination {
        float: none;
        margin: 12px 0;
        text-align: center;
    }

    /* ---------- 帖子详情 ---------- */
    .topic-detail .ui-header {
        padding: 10px;
    }

    .topic-detail .ui-header .avatar {
        width: 36px;
        height: 36px;
    }

    .topic-detail .ui-header .title {
        font-size: 17px;
        line-height: 24px;
        word-break: break-word;
    }

    .topic-detail .ui-content {
        padding: 12px 10px;
        font-size: 15px;
        line-height: 26px;
        /* 正文里贴的长链接、宽代码不要撑破屏幕 */
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .topic-detail .ui-content img {
        max-width: 100%;
        height: auto;
    }

    .topic-detail .ui-content pre,
    .topic-detail .ui-content .highlight {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .topic-detail .ui-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .topic-detail .ui-content iframe {
        max-width: 100%;
        max-height: 220px;
    }

    .topic-detail .ui-footer {
        padding: 6px 10px;
    }

    .topic-detail .ui-footer a {
        display: inline-block;
        margin: 2px 12px 2px 0;
    }

    .topic-detail .ui-footer .hits {
        float: none !important;
        display: inline-block;
        margin: 2px 0;
    }

    .topic-reply .ui-content .reply-item {
        padding: 10px;
    }

    .topic-reply .ui-content .reply-item .avatar {
        width: 32px;
        height: 32px;
    }

    .topic-reply .ui-content .reply-item .main {
        padding-left: 40px;
    }

    .topic-reply .ui-content .reply-item .meta .time {
        display: inline-block;
    }

    /* ---------- 常见节点导航：标签 + 节点名自动换行 ---------- */
    /* 左内边距 30px = 标题文字左边缘：分组名、节点名、标题三者一条竖线 */
    .nodes-cloud ul li {
        display: block;
        padding: 6px 0 6px 30px;
    }

    .nodes-cloud ul li label {
        width: auto;
        min-width: 60px;
        display: inline-block;
        margin-bottom: 2px;
    }

    .nodes-cloud ul li .nodes a {
        margin: 2px 4px 2px 0;
        display: inline-block;
    }

    /* ---------- 表单：铺满一列，别再挤成半屏 ---------- */
    fieldset {
        min-width: 0;
    }

    .form-horizontal .control-label {
        float: none;
        width: auto;
        padding: 0 0 4px;
        text-align: left;
    }

    .form-horizontal .controls {
        margin-left: 0;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    input.input-xlarge,
    input.input-xxlarge,
    textarea,
    select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    select {
        min-height: 34px;
    }

    /* 复选框/单选框不能被拉成整行 */
    .form-horizontal input[type="checkbox"],
    .form-horizontal input[type="radio"],
    .checkbox input[type="checkbox"] {
        width: auto;
    }

    .form-actions {
        padding-left: 0;
        text-align: left;
    }

    .topic-create form textarea,
    .topic-reply-create form textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .topic-create form .input-prepend {
        display: block;
    }

    .topic-create form .input-prepend .add-on {
        display: none;
    }

    .topic-create form .input-prepend input {
        width: 100%;
        box-sizing: border-box;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    /* ---------- 个人主页 / 成员页 ---------- */
    .user-page .profile .ui-header {
        padding: 10px;
    }

    .user-page .profile .ui-content .status {
        width: 25%;
        font-size: 12px;
    }

    .member-lists .member {
        width: 56px;
        padding: 8px 4px;
        margin: 4px 0 0 4px;
    }

    .member-lists .member .avatar {
        width: 42px;
        height: 42px;
    }

    /* ---------- 页脚 ---------- */
    .footer {
        padding: 14px 0 16px;
    }

    .footer .footer-bg {
        padding: 0 6px;
        line-height: 22px;
    }

    .footer .footer-bg .beian a {
        display: inline-block;
        word-break: break-all;
    }

    /* ---------- 后台 ---------- */
    body.admin {
        padding-top: 0;
    }

    .admin-nav.navbar-fixed-top {
        position: static;
    }

    .admin-nav .navbar-inner {
        padding: 0 8px;
    }

    .admin-nav .brand {
        float: left;
        margin-left: 0;
        padding: 10px 8px 10px 0;
        font-size: 15px;
        max-width: 52%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-nav .nav > li > a {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* 手机上没有空间显示登录用户名，只留「查看站点 / 退出」 */
    .admin-nav .nav.pull-right ~ .nav.pull-right {
        display: none;
    }

    /* 后台主体：侧栏在上、内容在下（原来 span2 只有 14% 宽，中文全被挤成竖排） */
    body.admin .container-fluid > .row-fluid > [class*="span"] {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }

    /* 侧栏做成两行按钮，比横滑更容易发现 */
    .admin-side {
        margin-top: 10px;
        padding: 4px 0;
    }

    .admin-side ul {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .admin-side li {
        display: block;
        float: none;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .admin-side li a {
        padding: 9px 12px;
        border-bottom: 2px solid transparent;
    }

    .admin-side li.active a {
        background: transparent;
        color: #2c3e50;
        font-weight: bold;
        border-bottom-color: #2c3e50;
    }

    .admin-main {
        margin-top: 10px;
        padding: 14px 12px 18px;
        min-height: 0;
    }

    .admin-main h3 {
        font-size: 18px;
    }

    /* 后台表格：窄屏不硬挤，横向滑动看 */
    .table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }

    .table-wrap table {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .admin-main .form-horizontal .control-label {
        float: none;
        width: auto;
        padding: 0 0 4px;
        text-align: left;
    }

    .admin-main .form-horizontal .controls {
        margin-left: 0;
    }

    .admin-main .form-horizontal .controls input[type="text"],
    .admin-main .form-horizontal .controls select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Bootstrap 给 .form-actions 留了 180px 左内边距，手机上会把按钮挤到右边换行 */
    .admin-main .form-actions {
        padding-left: 0;
        text-align: left;
    }

    .search-form input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 6px;
    }

    .search-form .btn {
        margin-bottom: 6px;
    }

    /* 概览的四宫格：两个一行 */
    .admin-main .row-fluid [class*="span"] {
        float: none;
        width: 100%;
        margin-left: 0;
    }

    .admin-main .row-fluid .span3 {
        float: left;
        width: 48%;
        margin: 0 4% 10px 0;
    }

    .admin-main .row-fluid .span3:nth-child(2n) {
        margin-right: 0;
    }

    .media-preview img {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------ 小屏手机 */
@media (max-width: 480px) {
    .top-navbar .navbar-inner .brand {
        max-width: 55%;
        font-size: 16px;
    }

    .top-navbar .navbar-inner .brand .brand-logo {
        max-width: 120px;
    }

    .top-navbar .navbar-inner .brand .brand-pi {
        width: 22px;
        height: 22px;
        margin-right: 6px;
        vertical-align: -6px;
        border-radius: 5px;
    }

    .topics .topic-item .title {
        font-size: 14px;
        line-height: 19px;
    }

    .community-status,
    .sidebox.weixin,
    .sidebox.friends {
        display: none;
    }

    .topic-detail .ui-content {
        font-size: 15px;
        line-height: 25px;
    }
}

/* ------------------------------------------------- 992 - 1199：补左右留白 */
/* 上面把容器改成了 width:100% + max-width:1200。视口在 992～1199 时容器正好
   铺满整屏又没有内边距，站名会被自己的负外边距顶到屏幕外（实测 1024 时 -9px），
   右侧「登录」按钮也紧贴窗口边缘。这一段补 20px 留白，和 1200 以上的观感一致。 */
@media (min-width: 992px) and (max-width: 1199px) {
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container,
    .container-fluid.container {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ------------------------------------------------- 平板横屏（768 - 991） */
@media (max-width: 991px) {
    /* Bootstrap 的 input-xxlarge 固定 544px，在 768px 宽的平板上会把表单顶出屏幕 */
    .input-xxlarge,
    .input-xlarge {
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-horizontal .input-xxlarge,
    .form-horizontal .input-xlarge,
    .admin-main .form-horizontal .controls input.input-xxlarge,
    .admin-main .form-horizontal .controls input.input-xlarge {
        width: 100%;
    }
}

/* ------------------------------------------------- 桌面宽度的导航兜底 */
/* Bootstrap 在 <=979px 把折叠面板设成 height:0 + overflow:hidden，靠 .in 展开。
   窗口从手机宽度放大回来时，如果浏览器没把这几条断点规则换掉，账号区（右侧
   「登录」按钮）就会被这个 0 高度 + 裁剪的盒子切掉或错位。桌面/平板宽度下直接
   把面板还原成常开状态，不再依赖任何 JS 状态。 */
@media (min-width: 768px) {
    .top-navbar .navbar-inner .nav-collapse,
    .top-navbar .navbar-inner .nav-collapse.pull-right {
        height: auto;
        overflow: visible;
    }
}