org_css_dark.css

.dark th, .dark td {
    padding: 0.5em;
    text-align: left;
}
.dark body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: hsl(219deg 17% 77%);
    background-image: radial-gradient(#ffffff 30%, transparent 0);
    background: hsl(220deg 13% 18%);
}

.dark code {
    font-family: "Inconsolata", monospace;
    font-size: 16px;
    padding: 0px 4px 0px;
    color: hsla(209,68%,75%,100%);
}

.dark p>code,.dark li>code,.dark td>code {
    background-color: hsla(212,8%,26%, 100%);;
    outline: 1px solid hsla(222,13%,14%,100%);
    cursor: pointer;
}

.dark h1,.dark h2,.dark h3 ,.dark h4,.dark h5{
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}

.dark h2 {
    border-bottom: 8px solid hsl(247,51%,75%);
    padding-bottom: 0.5em;
    font-size: 1.75em;
}

.dark h3 {
    border-bottom: 1px solid hsla(286, 59%, 66%, 100%);
    margin-top: 2em;
    font-size: 1.5em;
}

.dark h4 {
    border-bottom: 1px solid hsla(286, 59%, 66%, 100%);
    margin-top: 2em;
    font-size: 1.5em;
    color: hsl(286deg 60% 67%);
}

.dark h5 {
    border-bottom: 1px solid hsla(286, 59%, 66%, 100%);
    margin-top: 2em;
    font-size: 1.5em;
    font-size: 1em;
}

.dark h2 code,.dark  h3 code,.dark  h4 code,.dark  h5 code {
    font-family: inherit !important;
    font-size: inherit !important;
}

.dark td code {
    font-weight: bold;
}

.dark  a:link, .dark a:hover,.dark  a:visited {
                     text-decoration: none;
                     color: hsla(204,83%,62%, 100%);
                 }

.dark a:link {
    /* background: #kf8; */
}

.dark a:visited {
    color: #4EAEEF;
    /* background: #ffc; */
}

.dark a[href^="http"] {
    color: hsla(204,83%,62%, 100%);
    background-color: hsla(204,83%,62%, 0.075);
}

.dark a[href^="http"]:visited {
    color: hsla(204,83%,62%, 100%);
    background-color: hsla(204,83%,62%, 0.075);
}

.dark a[href^="http"]:link:hover,
.dark a[href^="http"]:visited:hover {
    color: hsla(204,83%,77%, 100%);
    background-color: hsla(204,83%,62%, 0.075);
}

.dark a[href^="http"]:after {
    /* content: "\21B3"; */
    /* background-color: hsla(204,83%,62%, 0.075); */
    /* padding-left: 0.2em; */
}

.dark #meta {
    margin-top: 2em;
}
.dark .figure-number::after{
    content: ' ▲ '
}
.dark .table-number::after{
    content: ' ▲'
}
.dark #table-of-contents a:link,
.dark #table-of-contents a:visited {
    /* background: transparent; */
    display: block;
}


.dark #table-of-contents a:hover {
    color: hsl(286deg 60% 67%);
    background: transparent;
}

.dark #table-of-contents {
    line-height: 1.2;
}
.dark #table-of-contents h2 {
    border-bottom: 0;
}

.dark #text-table-of-contents>ul {
    overflow-y: auto;
    height: 100vh;
}

.dark #table-of-contents ul {
    list-style: none;
    padding-left: 0;
    font-weight: normal;
}

.dark #table-of-contents div>ul>li {
    margin-top: 5px;
    font-weight: bold;
}
.dark #table-of-contents a:hover{
    background-color: hsl(220,13%,18%,100%);
    color: hsla(286, 59%, 66%, 100%);
}

.dark #table-of-contents a.active{
    background-color: hsl(220,13%,18%,100%);
    color: hsla(286, 59%, 66%, 100%);
}

.dark #table-of-contents>div>ul>li>a {
    /* padding: 2px; */
    padding-top: 5px;
    padding-bottom: 5px;
    /* background-color: hsla(220, 13%, 18%, 100%); */
    border-left: 4px solid hsla(204, 83%, 62%, 100%);
    background: transparent;
    padding-left: 2em;
}

.dark #table-of-contents>div>ul>li>ul>li>a {
    /* padding: 2px; */
    color: hsl(219deg 17% 77%);
    padding-left: 3em;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 4px solid hsla(35, 74%, 70%, 100%);
    background: transparent;
}

.dark #table-of-contents .tag {
    display: none;
}

.dark #table-of-contents .todo,
.dark #table-of-contents .done {
    font-size: 80%;
}

.dark #table-of-contents ol>li {
    margin-top: 1em;
}

.dark table {
    width: 100%;
}

.dark table,.dark th,.dark td {
    border: 1px solid #666;
}

.dark tbody {
    margin-bottom: 2em;
}
.dark tbody tr:nth-child(odd) {
    background-color: hsl(219deg 17% 27%);
}

.dark img {
    max-width: 90%;
}

.dark div.notice {
    position: relative;
    padding: 0.25em 1em;
    margin-bottom: 1em;
    border-left: 4px solid;
}

.dark table + div.notice {
    margin-top: 2em;
}

.dark div.notice a {
    background: transparent !important;
    border-bottom: 1px dotted;
}

.dark div.notice a[href^="http"]:after {
    background: transparent !important;
}

.dark div.notice:before {
    font-size: 200%;
    position: absolute;
    top: 50%;
    left: 0.3em;
    width: 2.2em;
    transform: translateY(-50%);
    text-align: center;
    text-shadow: 0 0 6px hsl(220,13%,18%,100%);
    content: "💡";
}

.dark div.notice p ,.dark div.notice-info p,.dark  div.notice-warning p ,.dark div.notice-example p{
    padding-left: 4em;
}

.dark .notice-warning {
    background: hsla(35,47%,70%,28%);
    color: hsla(0,0%,87%,100%);
    position: relative;
    padding: 0.25em 1em;
    border-left: 4px solid hsla(35,47%,70%,100%);
    margin-bottom: 1em;
}

.dark .notice-example {
    background: hsla(219,23%,54%,25%);
    color: hsla(219,23%,54%,100%);
    position: relative;
    padding: 0.25em 1em;
    border-left: 4px solid;
    margin-bottom: 1em;
}

.dark .notice-info {
    background: hsla(85,40%,56%,30%);
    color: hsla(0,0%,87%,70%);
    position: relative;
    padding: 0.25em 1em;
    border-left: 4px solid #060;
    margin-bottom: 1em;
}

.dark .notice-warning a {
    color: #600;
}

.dark .notice-example a {
    color: #069;
}

.dark .notice-info a {
    color: #060;
}

.dark div.notice-warning:before {
    font-size: 200%;
    position: absolute;
    top: 50%;
    left: 0.3em;
    width: 2.2em;
    transform: translateY(-50%);
    text-align: center;
    text-shadow: 0 0 6px hsl(220,13%,18%,100%);
    content: "⚠️";
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Noto Emoji";
}

.dark div.notice-example:before {
    position: absolute;
    font-size: 200%;
    top: 50%;
    left: 0.3em;
    width: 2.2em;
    transform: translateY(-50%);
    text-align: center;
    text-shadow: 0 0 6px hsl(220,13%,18%,100%);
    content: "🍐️";
}

.dark div.notice-info:before {
    font-size: 200%;
    position: absolute;
    top: 50%;
    left: 0.3em;
    width: 2.2em;
    transform: translateY(-50%);
    text-align: center;
    text-shadow: 0 0 6px hsl(220,13%,18%,100%);
    content: "💡";
}

/* .dark pre { */
/*     font-family: Inconsolata; */
/*     border: 0; */
/*     box-shadow: none; */
/*     padding-top: 0pt; */
/*     margin: 0em; */
/*     margin-top: 0.5em; */
/*     margin-bottom: 2em; */
/* } */

.dark pre.example:before {
    content: "Properties";
    display: block;
    border-bottom: 1px dotted;
    margin-bottom: 1em;
}

.dark pre.example {
    background: #fec;
    color: #666;
    font-size: 0.85em;
}

.dark pre {
    background-color: #f8f8f8;
    background-size: 8px 8px;
    background-image: linear-gradient(135deg, transparent 25%, rgba(0, 0, 0, 0.02) 25%, rgba(0, 0, 0, 0.02) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.02) 75%, rgba(0, 0, 0, 0.02));
}

.dark pre.src {
    background-color: #24272E;
    /* padding: 0em; */
    /* padding-top: 1em; */
    /* padding-bottom: 1em; */
    border-left: 4px solid hsla(222,12%,30%,80%) !important;
    /* box-shadow: 1px 1px 1px hsla(222,12%,9%); */
}

/* .dark pre.src span{ */
/*     font-size: .875rem; */
/*     line-height: 1rem; */
/* } */

.dark pre.src:before {
    display: block;
    position: absolute;
    background-color: #24272E;
    top: 0;
    right: 0;
    padding: 0.25em 0.5em;
    /* border-bottom-left-radius: 8px; */
    /* border: 0; */
    color: #4eaeef;
    font-size: 80%;
}

.dark .org-src-container {
    /* pointer-events: none; */
    position: relative;
}
.dark .org-src-container::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23CECAC3' height='16' viewBox='0 0 16 16' version='1.1' width='16' data-view-component='true' class='octicon octicon-copy js-clipboard-copy-icon m-2'%3E%3Cpath d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'%3E%3C/path%3E%3Cpath d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'%3E%3C/path%3E%3C/svg%3E%0A");
    color: #a39b8f;
    background-color: rgb(28, 30, 31);
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    text-decoration: none;
    left: 102%;
    fill: white;
    padding: 7px;
    line-height: 1em;
    /* top: 1.3em; */
    pointer-events: auto;
    border-color: rgba(35, 40, 46, 0.573);
    border: 0.5px solid;
    filter: drop-shadow(2px 3px 1px rgb(0 0 0 / 0.6));
}

.dark .click-btn-style::before  {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='green' height='16' viewBox='0 0 16 16' version='1.1' width='16' data-view-component='true' class='octicon octicon-check js-clipboard-check-icon color-fg-success m-2 d-none'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'%3E%3C/path%3E%3C/svg%3E");
    color: #2ECC71;
    border-color: #2ECC71;
    background-color: rgb(28, 30, 31);
}

.dark pre.src-plantuml:before {
    content: "UML";
}

.dark pre.src-javascript:before {
    content: "JS";
}

.dark pre.src-clojure:before {
    content: "CLJ";
}

.dark pre.src-c:before {
    content: "C";
}

.dark span.org-string {
    color: #f94;
}

.dark span.org-keyword {
    color: #c07;
}

.dark span.org-variable-name {
    color: #f04;
}

.dark span.org-clojure-keyword {
    color: #09f;
}

.dark span.org-comment, span.org-comment-delimiter {
    color: #999;
}

.dark span.org-rainbow-delimiters-depth-1, span.org-rainbow-delimiters-depth-5 {
    color: #666;
}

.dark span.org-rainbow-delimiters-depth-2, span.org-rainbow-delimiters-depth-6 {
    color: #888;
}

.dark span.org-rainbow-delimiters-depth-3, span.org-rainbow-delimiters-depth-7 {
    color: #aaa;
}

.dark span.org-rainbow-delimiters-depth-4, span.org-rainbow-delimiters-depth-8 {
    color: #ccc;
}

.dark div.figure {
    font-size: 0.85em;
    color:hsl(286,59%,66%);
}

.dark div.figure p:nth-child(1) {
    margin-bottom: 0px;
}
.dark div.figure p:nth-child(2) {
    margin-top: 0px;
}

.dark .tag {
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    float: right;
    margin-top: 1em;
    background: transparent;
}

.dark .tag span {
    background: #ccc;
    padding: 0 0.5em;
    border-radius: 0.2em;
    color: white;
}

.dark .todo,.dark  .done {
    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
    font-weight: normal;
    padding: 0 0.25em;
    /* border-radius: 0.2em; */
}

.dark .todo {
    background: #1f2228;
    color: hsla(35, 74%, 70%, 100%);
}

.dark .done {
    background: #1f2228;
    color: green;
}

.dark #content h3 {
    color: #98d0f5;
}

@media screen {
    .dark h1.title {
        text-align: left;
        margin: 1em 0 0 280px;
    }

    .dark h2 {
        margin-top: 3em;
    }

    .dark #table-of-contents {
        position: fixed;
        top: 0;
        left: 0;
        padding: 2em 0 2em 0em;
        width: 240px;
        height: 100vh;
        font-size: 14px;
        background: hsl(217deg 12% 12%);
        /* overflow: auto; */
    }

    .dark #table-of-contents ul>li>ul>li>ul>li {
        display: none;
    }

    .dark #table-of-contents h2 {
        margin-top: 0;
        margin-left: .5em;
    }

    .dark #table-of-contents code {
        font-size: 12px;
    }

    .dark div.outline-2, #footnotes {
        max-width: 960px;
    }
}

.dark .title {
    font-weight: 800;
    line-height: 1;
    font-size: 2.3em;
}

.dark .subtitle {
    color: hsla(247,51%,75%,100%);
    font-weight: 400;
}

.dark pre.src:hover:before{
    margin-top: 0px;
}

@media print {

    .dark body {
        color: black;
    }

    @page {
        margin: 25mm;
    }

    .dark h2,.dark  h3,.dark h4,.dark h5 {
        color: hsl(286,59%,66%);
        page-break-before: always;
        margin-top: 0;
    }

    .dark table {
        page-break-inside: avoid;
    }

    .dark a:visited {
        color: black;
        /* background: #ff8; */
    }

    .dark a[href^="http"]:visited {
        background: #bff;
    }

    .dark div.notice:before {
        display: none;
    }
}
.dark .src-java {
	color:lightgray;
	background: #24272E;
}

.dark .src-org span:not(.linenr) {
	color:lightgray !important;
	background: #24272E;
}
.dark .src {
    color: lightgray;
    background: #24272E;
}
.dark #postamble{
    right: 0;
    bottom: 0;
    margin-right: 0px;
    margin-bottom: 10px;
    position: fixed;
    color: hsla(204, 83%, 62%, 100%);
    line-height: .7;
    display: none;
    /* background-color: hsla(222, 12%, 11%, 100%); */
}
.dark #preamble {
    left: 0;
    bottom: 0;
    background-color: hsla(220,16%,14%,100%);
    width: 240px;
    height: 30px;
    margin-right: 0px;
    position: fixed;
    color: "#eceff4"
    line-height: .7;
    font-size: 95%;
    text-align: center;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark blockquote:before {
    content: "📌";
}
.dark blockquote:before {
    font-size: 200%;
    position: absolute;
    top: 50%;
    left: 0.3em;
    width: 2.2em;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    text-shadow: 0 0 6px hsl(220,13%,18%,100%)
}

.dark blockquote {
    padding: 0.1em 1.8em;
    background-color: hsl(204,65%,60%,30%);
    adding: 0.4em 1.8em;
    padding-left: 5.2em;
    position: relative;
    font-size: 95%;
    line-height: 1.5;
    color: #DEDEDE;
    /* border: 0px solid hsl(204,65%,60%,30%); */
    /* box-shadow: 2px 2px 2px hsl(204,65%,60%,28%); */
    border-left: 4px solid hsl(204,65%,60%,100%);
    margin: 0em;
    margin-bottom: 1em;
    margin-top: 1em;
}

.dark .section-number-2,.dark .section-number-3,.dark .section-number-4,.dark .section-number-5 {
    display: inline-block;
    width: 80px;
    margin-right: 18px;
    margin-left: -104px;
    font-style: normal;
    font-weight: 500;
    text-align: right;
    color: hsla(207, 6%, 38%, 100%);
}

.dark b {
    color: #92b4d3;
    /* background: #1f2228; */
}

.dark i {
    color: hsl(286,59%,66%);
}

.dark caption {
    padding-bottom: 20px;
    caption-side: bottom;
    color: hsl(286,59%,68%);;
    text-align: left;
}

.dark .linenr {
    display: inline-block;
    text-align: right;
    min-width: 31px;
    /* background: rgb(52, 58, 64); */
    color: #4eaaef;
    padding-top: 8px;
    padding-bottom: 6px;
    margin-left: -12px;
    font-size: .775rem;
    font-weight: 900;
    line-height: 0.5rem;
    user-select: none;
}

.dark mjx-container {
    text-align: left !important;
}

.dark .github-corner {
    border-bottom: 0;
    position: fixed;
    right: 0;
    text-decoration: none;
    top: 0;
    z-index: 1001 !important;
}
.dark .github-corner:hover .octo-arm {
    animation:octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
    0%,100% {
        transform:rotate(0)
    }
    20%,60% {
        transform:rotate(-25deg)
    }
    40%,80% {
        transform:rotate(10deg)
    }
}
/* 美化滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  /* display: none; */
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}


.dark .previousButton, .dark .nextButton{
  background: transparent;
  color: #43484d;
}
.dark .nextButton:hover,.dark .previousButton:hover{
  color: #98a3ad;
  background: rgba(67,72,77,1);
  cursor: pointer;
}