@import url(https://unpkg.com/bootstrap@5.2.1/dist/css/bootstrap.min.css);
@import url(readtheorg.min.css);

/*
  在设置 dark mode 后，跳转页面时出现白屏一闪而过的问题。
  为了解决这个问题，在 main.css 中默认不显示 body，当 dark mode（如果已经设置）应用后，才在 js 中让 body 显示
  参考：https://zwbetz.com/fix-the-white-flash-on-page-load-when-using-a-dark-theme-on-a-static-site/
*/
body {
    visibility: hidden;
    opacity: 0;
}

body.light-theme {
    color: #222;
    background-color: #fff;
}
body.dark-theme {
    color: #b3b3b3;
    background-color: #343131;
}

/* 让类 form-control 适应 light mode */
body.light-theme .form-control {
    color: #222;
    background-color: #fff;
}
/* 让类 form-control 适应 dark mode */
body.dark-theme .form-control {
    color: #b3b3b3;
    background-color: #343131;
}

/* bootstrap navbar 中链接在访问后会变为 visited 指定的颜色（红色），这样比较丑。这里统一一下访问前后链接的颜色
 * 下面颜色方案只适应于深色的 navbar。目前固定使用深色 navbar，如果使用浅色 navbar 则需要相应调整
 */
.nav-link, .nav-link:visited, .nav-link:hover, .nav-link:active {
    color: #DCDCDC;
}
.nav-link:hover {
    color: #ffffff;
}

/*
  Fix: top nav bar blocking top content of the page, see https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page
*/
body {
    padding-top: 55px;
}
#table-of-contents {
    padding-top: 55px;
}
/*
  Fix: Navbar hides initial content when jumping to in-page anchor, see https://github.com/twbs/bootstrap/issues/1768
*/
*[id]:before {
    display: block;
    content: " ";
    margin-top: -55px;
    height: 55px;
    visibility: hidden;
}

#content{
    max-width: unset; /* readtheorg.css 中限制了 800px，这里去掉这个限制 */
}

table {
    margin: 0 auto;  /* Put table in the center of the page. */
    display: block;  /* Show x scrollbar, https://stackoverflow.com/a/62451601 */
    overflow-x: auto; /* Show x scrollbar, https://stackoverflow.com/a/62451601 */
    max-width: -moz-fit-content;  /* Show x scrollbar, https://stackoverflow.com/a/62451601 */
    max-width: fit-content;  /* Show x scrollbar, https://stackoverflow.com/a/62451601 */
}
table.nowrap-1st-column td:nth-child(1) { white-space: nowrap; }
table.nowrap-2nd-column td:nth-child(2) { white-space: nowrap; }
table.nowrap-3rd-column td:nth-child(3) { white-space: nowrap; }
table.nowrap-4th-column td:nth-child(4) { white-space: nowrap; }

caption {
    text-align: center;   /* The caption of table use <caption>, make it center align */
}

.title  {
    text-align: center;  /* 标题居中 */
    margin-bottom: .2em;
}

/* Inline code 的设置 */
code {
    color: unset; /* #bf616a; */
    background-color: unset;
    border: unset;
    font-size: unset;
}

.underline {
    text-decoration: underline;
}

/* 图片居中 */
figure{
    display:block;
}
figure {
    text-align: center;
}

.org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
.org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }

.svg100px { width: 100px; }
.svg200px { width: 200px; }
.svg300px { width: 300px; }
.svg400px { width: 400px; }
.svg500px { width: 500px; }

.MathJax {
    /* https://stackoverflow.com/questions/61915118/mathjax-equation-does-not-fit-the-width-of-window-when-using-mobile/61942403#61942403 */
    overflow-x: auto;
    overflow-y: hidden;
}

#postamble{
    /* background: #fcfcfc; */
    margin-left: 300px;  /* 左侧是 Table of Contents */
    /* margin:auto; */
    /* max-width: unset; */
    padding: 0em 3.236em;
}
#postamble p{
    font-size: 80%;
    margin: .1em;
}

#disqus_thread {
    margin-left: 300px;  /* 左侧是 Table of Contents */
    padding: 1.618em 3.236em;
}

@media screen and (max-width: 768px){
    #disqus_thread {
        margin-left: unset; /* 小屏下左侧的 Table of Contents没有显示，所以不用缩进 */
        padding: 1.618em 3.236em;
    }
}

@media print{
    #disqus_thread {
        display:none}
}