org_css_light.css

.light body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: black;
    /* background-image: radial-gradient(#fafafa 30%, transparent 0); */
    background: transparent;
}

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

.light p>code, .light li>code, .light td>code {
    background-color: "#fafafa";
    outline: 1px solid "#fafafa";
    cursor: pointer;
}

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

.light h2 {
    border-bottom: 8px solid hsl(211.91deg 76.21% 44.51%);
    padding-bottom: 0.5em;
    font-size: 1.75em;
}

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

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

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

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

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

.light a:link, a:hover, a:visited {
    text-decoration: none;
    color: black;
}

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

.light a:visited {
    color: black;
    /* background: #ffc; */
}

.light a:link:hover,
.light a:visited:hover {
    /* background: #ff0; */
}

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

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

.light a[href^="http"]:link:hover,
.light a[href^="http"]:visited:hover {
    color: hsla(204,69%,40%, 100%);
    background-color: hsla(204,69%,40%, 0.075);
}

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

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

.light #table-of-contents a:hover {
    /* color: black; */
    /* background: transparent; */
}

.light #table-of-contents {
    line-height: 1.2;
    /* background: "#fafafa"; */
}
.light #table-of-contents h2 {
    border-bottom: 0;
    /* color: white; */
}

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

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

.light #table-of-contents div>ul>li {
    margin-top: 5px;
    font-weight: bold;
}
.light #table-of-contents a:hover{
    /* background-color: hsla(0, 0%, 66%, 20%); */
    /* color: whiter; */
    color: hsl(211.91deg 76.21% 44.51%);
}

.light #table-of-contents a.active{
    color: hsl(211.91deg 76.21% 44.51%);
    font-weight: bold;
}

.light #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.871, 3%, 27%);
    background: transparent;
    padding-left: 2em;
}

.light #table-of-contents>div>ul>li>ul>li>a {
    /* padding: 2px; */
    color: hsl(219deg 18% 11%);
    padding-left: 3em;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 4px solid hsla(0, 0%, 66%, 100%);
    background: transparent;
}

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

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

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

.light table {
    width: 100%;
}

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

.light th, .light td {
    padding: 0.5em;
    text-align: left;
}


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

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

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

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

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

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

.light 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%); */
    text-shadow: 0 0 6px hsl(0,0%,100%,100%);
    content: "💡";
}

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

.light .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;
}

.light .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;
}

.light .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;
}

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

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

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

.light 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(0,0%,100%,100%);
    /* text-shadow: 0 0 6px hsl(0,0%,100%,100%) */
    content: "⚠️";
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Noto Emoji";
}

.light 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%); */
    text-shadow: 0 0 6px hsl(0,0%,100%,100%);
    content: "🍐️";
}

.light 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%); */
    text-shadow: 0 0 6px hsl(0,0%,100%,100%);
    content: "💡";
}


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

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

.light 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));
}


.light pre.src {
    background-color: hsla(0,0%,98%);
    /* 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%); */
}

.light pre.src:before {
    display: block;
    position: absolute;
    background-color: hsla(0,1%,90%,90%);
    top: 0;
    right: 0;
    padding: 0.25em 0.5em;
    /* border-bottom-left-radius: 8px; */
    /* border: 0; */
    color: black;
    font-size: 80%;
}

.light .org-src-container {
    /* pointer-events: none; */
    position: relative;
}
.light .org-src-container::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' 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: rgb(36, 41, 47);
    background-color: rgb(246, 248, 250);
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    text-decoration: none;
    left: 102%;
    padding: 7px;
    line-height: 1em;
    /* top: 1.3em; */
    pointer-events: auto;
    border-color: rgba(35, 40, 46, 0.573);
    border: .5px solid;
    filter: drop-shadow(2px 3px 1px rgb(0 0 0 / 0.4));
}

.light .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(246, 255, 250);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.light #content h3 {
    color: hsl(203.871, 82%, 50%);
}

@media screen {
    .light h1.title {
        text-align: left;
        /* margin: 1em 0 0 5%; */
    }

    .light h2 {
        margin-top: 10px;
    }

    .light #table-of-contents {
        position: fixed;
        top: 30px;
        left: calc(((100vw - 960px) / 2) - 240px);
        padding: 2em 0 2em 0em;
        width: 240px;
        height: 100vh;
        font-size: 14px;
        /* background: hsl(0,1%,95%); */
        /* overflow: auto; */
    }

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

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

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

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

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

.light .subtitle {
    color: hsla(255,51%,47%,100%);
    font-weight: 400;
}



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

@media print {

    .light body {
        color: black;
    }

    @page {
        margin: 25mm;
    }

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

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

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

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

    .light div.notice:before {
        display: none;
    }
}
.light .src-java {
	color: #24272E;
    background: hsla(0,0%,98%);
}

.light .src-org span:not(.linenr) {
	color:#24272E !important;
    background: hsla(0,0%,98%);
}

.light .src {
    color: #24272E;
    background: hsla(0,0%,98%);
}
.light #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%); */
}
.light #preamble {
    left: 0;
    bottom: 0;
    background-color: hsla(0, 0%, 73%, 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;
}

.light blockquote:before {
    content: "📌";
}
.light 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(0,0%,100%,100%)
}

.light 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;
    /* 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;
}

.light .section-number-2,.light .section-number-3,.light .section-number-4,.light .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%);
}

.light b {
    color: #56a2e7;
    /* background: #1f2228; */
}

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

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

pre {
    font-family: Inconsolata;
    border: 0;
    box-shadow: none;
    padding-top: 4pt;
    padding-bottom: 4pt;
    margin: 0em;
    margin-top: 0.5em;
    margin-bottom: 1em;
    font-size: .775rem;
}

.light .linenr {
    display: inline-block;
    text-align: right;
    min-width: 31px;
    /* background: hsl(0,8%,90%,100%); */
    color: #6c71c4;
    padding-top: 8px;
    padding-bottom: 6px;
    margin-left: -12px;
    font-size: .775rem;
    font-weight: bold;
    line-height: 0.5rem;

    user-select: none;
}

/* .linenr:first-child{ */
/*     padding-top: 10.667px; */
/* } */



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

.light .github-corner {
    border-bottom: 0;
    position: fixed;
    right: 0;
    text-decoration: none;
    top: 0;
    z-index: 1001 !important;
}
.light .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)
    }
}
@media (max-width:500px) {
    .light .github-corner:hover .octo-arm{
        animation:none
    }
    .light .github-corner .octo-arm {
        animation:octocat-wave 560ms ease-in-out
    }
}
/* 美化滚动条 */
::-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);
}
.light span.style {
    color: white !important;
}
.light .timestamp {
    color: rgba(144, 147, 163, 1);;
}

.light .previousButton, .light .nextButton{
  background: transparent;
  color: #747474;
}
.light .nextButton:hover,.light .previousButton:hover{
  color: #000000;
  background: rgba(230,230,230,0.8);
  cursor: pointer;
}