jwebsite/_css/jtd.css

760 lines
14 KiB
CSS

html{
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font-size:15px !important;
}
@media (min-width: 31.25rem){
html{
font-size:17px !important;
}
}
body{
margin:0;
position:relative;
padding-bottom:4rem;
font-family:-apple-system,"helvetica neue",helvetica,roboto,noto,"segoe ui",arial,sans-serif;
font-size:inherit;
line-height:1.5;
color:#5c5962;
background-color:#fff;
}
@media (min-width: 50rem){
body{
position:static;
padding-bottom:0;
}
}
h1{
font-size:2em;
margin:0.67em 0
}
sub,sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sup{
top:-0.5em
}
sub{
bottom:-0.25em
}
img{
border:0
}
p,h1,h2,h3,h4,h5,h6,ol,ul,pre,address,blockquote,dl,div,fieldset,form,hr,noscript,table{
margin-top:0
}
h1,h2,h3,h4,h5,h6{
margin-top:1.2em;
margin-bottom:0.8em;
font-weight:500;
line-height:1.15;
color:#27262b;
}
p{
margin-bottom:1em
}
a{
color:#0E39B0;
text-decoration:none;
}
pre{
overflow:auto;
margin:0;
margin-bottom: 0.8em;
}
code{
font-family:"SFMono-Regular",Menlo,Consolas,Monospace;
font-size:12px;
line-height:1.4;
padding:0.2em 0.15em;
font-weight:400;
/*background-color:#f5f6fa;*/
background-color: #ffffff;
border:1px solid #eeebee;
border-radius:4px;
}
li:not(:last-child) {
margin-bottom: 5px;
}
img{
max-width:100%;
height:auto
}
hr{
height:1px;
padding:0;
margin:2rem 0;
background-color:#eeebee;
border:0;
}
@media (min-width: 50rem){
.page-wrap{
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
}
/************************************************************
=============================================================
SIDE BAR
============================================================
************************************************************/
.side-bar{
z-index: 100;
display: flex;
flex-wrap: wrap;
background-color: #b9cfe4;
}
.side-bar .header {
display: flex;
min-height: 60px;
align-items: center;
}
.side-bar .header .title{
padding-right:1rem;
padding-left:1rem;
flex-grow:1;
display:flex;
height:100%;
align-items:center;
padding-top:.75rem;
padding-bottom:.75rem;
color:#27262b;
font-size:18px !important;
line-height: 1.15em;
}
.show-menu {
cursor: pointer;
appearance:none;
display:flex;
height:100%;
/* line-height: 60px; */
padding:1rem;
align-items:center;
color:#0E39B0;
text-transform:uppercase;
background:transparent;
text-align:right;
padding-right: 2rem;
border:0;
width: calc(100% - 220px);
background-color: white;
}
.side-bar .menu {
width: 100%;
padding-right:1rem;
padding-left:1rem
}
.menu-list{
padding:0;
margin-top:0;
margin-bottom:0;
list-style:none
}
.menu-list-child-list{
padding-left:.75rem;
line-height: 0.9em;
list-style:none;
}
.menu-list-child-list .menu-list-link{
color:#5c5962
}
.menu-list-child-list .menu-list-item{
position:relative
}
.menu-list-child-list .menu-list-item::before{
position:absolute;
margin-top:0.3em;
margin-left:-0.8em;
color:rgba(92,89,98,0.3);
content:"- "
}
.menu-list-child-list .menu-list-item.active::before{
color:#5c5962
}
.menu-list-item{
font-size:14px !important;
margin:0
}
.menu-list-parent .menu-list-child-list{
display:none
}
.menu-list-parent.active .menu-list-child-list{
display:block
}
.menu-list-item.active a {
font-weight:600;
color:#27262b;
text-decoration:none
}
.menu-list-child-list{
margin-top: 0.5em;
padding-left: 0.5em;
}
ul.menu-list-child-list li {
font-size: 80%;
}
.menu-list-link{
display:block;
padding-top:.25rem;
padding-bottom:.25rem
}
/* .menu-list-link.active{
font-weight:600;
color:#27262b;
text-decoration:none
} */
.side-bar .footer {
width: 150px;
font-size: 13px;
padding-right:1rem;
padding-left:1rem;
position:absolute;
bottom:0;
left:0;
padding-top:1rem;
padding-bottom:1rem
}
/*Hide checkbox*/
input[type=checkbox]{display: none;}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #side-menu{display: block;}
/* side bar adjustments for narrow mode (bar on top) */
@media (max-width : 49.99rem){
/* Toggle menu off */
.side-bar .menu {
display: none;
padding-left:35px;
padding-bottom:15px;
}
.side-bar {
border-bottom: 1px solid #eeebee;
background-color: #b9cfe4;
}
.side-bar .header {
padding-left: 15px;
width: 150px;} /* middle space */
.show-menu {display: block;}
.side-bar .footer {
display:none;
}
}
/* side bar adjustments for narrow mode (bar on top) */
@media (min-width: 31.25rem){
.side-bar .header .title{
font-size:24px !important
}
.menu-list-item{
font-size:16px !important
}
}
/* side bar adjustments for medium mode (bar on side) */
@media (min-width: 50rem){
.side-bar{
flex-wrap: nowrap;
position: absolute;
width: 248px;
height: 100%;
flex-direction: column;
align-items: flex-end;
}
.side-bar .header{
z-index: 101;
height: 60px;
max-height: 60px;
border-bottom: 1px solid #eeebee;
padding-right:3.5rem;
padding-left:2rem;
}
.side-bar .header .title{
font-size: 35px !important;
padding-top:.5rem;
padding-bottom:.5rem
}
.show-menu {
display:none
}
.side-bar .menu{
width: 160px;
padding-right:2.5rem;
/* padding-left:0rem; */
padding-top:3rem;
padding-bottom:1rem;
overflow-y:auto;
flex:1 1 auto;
/*background-color: #0E39B0;*/
}
.side-bar .footer{
padding-right:2rem;
padding-left:2rem;
position: static;
}
}
/* side bar adjustments for wide mode (bar on side) */
@media (min-width: 66.5rem){
.side-bar{
width:calc((100% - 66.5rem) / 2 + 264px);
min-width:264px;
}
}
/************************************************************
=============================================================
MAIN CONTENT
============================================================
************************************************************/
@media (min-width: 50rem){
.main-content-wrap{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
background-color: #e8ecef;
}
.main-content{
position:relative;
max-width: 800px;
margin-left: 248px
}
}
@media (min-width: 66.5rem){
.main-content {
margin-left:calc((100% - 1064px) / 2 + 264px);
}
}
.main-header{
padding-right:1rem;
padding-left:1rem;
display:none;
/* padding-top:1rem; */
/* padding-bottom:1rem; */
background-color: #e8ecef;
height: 60px;
line-height: 60px;
}
@media (min-width: 50rem){
.main-header{
padding-right:2rem;
padding-left:2rem;
background-color: #e8ecef;
}
}
@media (min-width: 50rem){
.main-header{
display:flex;
justify-content:flex-end;
height: -1em;
background-color: #e8ecef;
border-bottom:1px solid #eeebee;
}
}
.main-footer{
font-size: 14px;
color: darkgray;
border-top: 1px solid #eeebee;
padding-top: 15px;
}
.franklin-content {
padding-right:1rem;
padding-left:1rem;
padding-top:1rem;
padding-bottom:1rem;
line-height:1.5
}
@media (min-width: 50rem){
.franklin-content {
padding-right:2rem;
padding-left:2rem;
padding-top:2rem;
padding-bottom:2rem;
}
}
/************************************************************
=============================================================
JUDOC SPECIFICS
============================================================
************************************************************/
.franklin-content a{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.franklin-content ul,ol{
line-height: 1em;
}
.franklin-content li{
margin-top: 0.3em;
line-height: 1.3em;
}
.franklin-content ul,.franklin-content ol{
padding-left:1.5em
}
.franklin-content h1:first-of-type{
margin-top:0.5em
}
.franklin-content h1,h2,h3,h4,h5,h6{
position:relative
}
td.fndef-backref {
min-width: 20px;
}
.franklin-content table {
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
text-align: center;
margin-bottom: 1em;}
.franklin-content tr,th,td{
padding: 10px;
border: 1px solid black;}
.franklin-content table tbody tr td {
border: 1px solid black;
}
.franklin-content blockquote {
background: lemonchiffon;
border-left: 7px solid #a8a8a8;
margin: 1.5em 10px;
padding: 0.5em 10px;
font-style: italic;}
.franklin-content blockquote p {
display: inline; }
.franklin-content .row {
display: block; }
.franklin-content .left {
float: left;
margin-right: 15px; }
.franklin-content .right {
float: right; }
.franklin-content .container img {
width: auto;
padding-left: 0;
border-radius: 10px;
margin-bottom: 1em;}
.franklin-content .fndef table {
margin: 0;
margin-bottom: 1em;
border: 0;
}
.franklin-content .fndef tr {
padding: 0;
border: 0;
text-align: left;
}
.franklin-content .fndef td {
padding: 0;
border: 0;
}
.franklin-content .fndef td.fndef-backref {
vertical-align: top;
font-size: 80%;
padding-left: 5px;
}
.franklin-content .fndef td.fndef-content {
font-size: 90%;
padding-left: 10px;
}
.franklin-content .fndef tr {
border-left: 2px solid lightgray;
}
.franklin-content img {
width: 70%;
text-align: center;
padding-left: 10%; }
.franklin-content .img-small img {
width: 50%;
text-align: center;
padding-left: 20%; }
/* ==================================================================
KATEX
================================================================== */
body { counter-reset: eqnum; }
.katex { font-size: 1em !important; }
.katex-display .katex {
display: inline-block; } /* overwrite katex settings */
.katex-display::after {
counter-increment: eqnum;
content: "(" counter(eqnum) ")";
position: relative;
float: right;
padding-right: 5px; }
/* ==================================================================
CODE & HIGHLIGHT.JS
================================================================== */
.hljs {
font-size: 80%;
line-height: 1.35em;
border-radius: 10px;
padding: 1em;
padding-left:1.2em;
}
.hljs-meta, .hljs-metas, .hljs-metap { font-weight: bold; }
.hljs-meta { color: rgb(25, 179, 51); }
.hljs-metas { color: red; }
.hljs-metap { color: rgb(51, 131, 231); }
.hljs-string {color: #ca4418;}
.hljs-subst { color: inherit;}
.page-foot {
margin-top: 2em;
border-top: 1px solid #eeebee;
padding-top:20px;
padding-bottom:15px;
color: gray;
font-size: 90%;
}
/* code.language-plaintext {color: purple;} */
.franklin-toc ol > li > ol {list-style-type: lower-alpha;}
.franklin-toc ol > li > ol > li > ol {list-style-type: lower-roman;}
code.language-yaml .hljs-attr { color: #ca4418;}
code.language-yaml .hljs-string { color: green;}
ul.menu-list-child-list {
padding-bottom: 0.5em;
}
ul.menu-list-child-list li{
padding-left: 1em;
}
ul.menu-list-child-list a.menu-list-link {
font-size: 14px !important;
}
/* LUNR */
.result-title a {
/* font-size: 1.2em; */
text-decoration: none;
}
.result-title a:hover {
text-decoration: underline;
}
.result-preview {
color: #808080;
}
/* .search-input {
width: 250px;
} */
.resultCount {
color: #808080;
}
.result-query {
font-weight: bold;
}
#lunrSearchForm {
margin-top: 13em;
}
/* .pagination {
text-align: center;
margin: 16px 8px 16px 8px;
}
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
} */
/* ================================================================== */
/* PAGE-DIVS
- .flist = lists with a checkmark
- .note = highlight the background in light yellow
*/
/* ================================================================== */
.blank {
height: 1.5em;
}
.flist p {
display:inline;
}
.flist ul {
list-style: none;
}
.flist a#goto {
padding-right: 10px;
margin-left: -15px;
}
.flist a#goto #arrow{
display:none;
}
.flist a#goto:hover #check {
display: none;
}
.flist a#goto:hover #arrow {
display: inline;
}
.tlist p {
display:inline;
}
.note {
margin-top: 1.5em;
width: 95%;
margin-left:auto;
margin-right:auto;
background-color: aliceblue;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-bottom: 1em;
}
.note .content {
padding: 10px;
padding-left: 12px;
}
.note .title{
font-size: 105%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-left: 7px;
padding-top: 2px;
color: white;
background: cornflowerblue;
}
.definition {
background-color: aliceblue;
border-left: 5px solid cornflowerblue;
border-radius: 10px;
padding: 10px;
margin-bottom: 1em;
}
.important {
background-color: lemonchiffon;
padding: 0.5em;
margin-bottom: 1em;
}
.silly-formatting {
width: 50%;
text-align: center;
color: magenta;
border: 1px solid black;
}
.ccols {
margin-top:1.5em;
margin-bottom:1.5em;
margin-left:auto;
margin-right:auto;
width: 60%;
text-align: center;}
.ccols svg {
width:30px;}
.lalign td {
text-align: left;
}
.lalign tr:first-of-type > td {
text-align: center;
}
.lalignb td {
text-align: left;
}
.lalignb tr:first-of-type > td {
text-align: center;
}
.lalignb th:nth-child(1){
width:100px;
}
/* ================================================================== */
/* Small additional divs */
/* ================================================================== */
.small-img {
width: 50%;
margin-left: auto;
margin-right: auto;
}
#title-header {
margin-top: -1.9em;
margin-right: 2em;
color: #6b7a99;
}