inphinit.github.io/css/docs.css at master · inphinit/inphinit.github.io

994 lines (850 loc) · 16.7 KB
*, ::after, ::before {
  box-sizing: border-box;
html, body > header {
  min-width: 300px;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  font-size: 1rem;
  margin: 0;
  color: inherit;
body *, body ::after, body ::before {
  border: 0 solid #C8C5C5;
html, table, #menu {
  background: #F9FAFA;
  color: #1c2024;
html, html * {
  scrollbar-color: #D9D9D9 #F2F2F2;
  overflow-x: hidden;
#skip-to-main, body > header {
  position: fixed;
  width: 100%;
  height: 60px;
  border-bottom-width: thin !important;
#skip-to-main {
  background: #4c0bce;
  color: #fff;
  padding: 12px 16px;
  padding: .75rem;
  z-index: 102;
  text-decoration: underline;
  font-weight: bold;
  transform: translateY(-100%);
  display: flex;
  align-items: center;
  justify-content: center;
#skip-to-main:focus {
  transform: translateY(0);
body > header {
  backdrop-filter: blur(.175rem);
  background: #F9FAFACC;
  z-index: 101;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
body > header > div {
  display: flex;
  gap: .32rem;
  height: 70%;
#container {
  margin-left: 280px;
  display: flex;
  flex-direction: column;
  height: 100vh;
#container > main {
  flex: 1 0 0;
  flex: 0 0 100px;
button, .btn {
  overflow: hidden;
  position: relative;
button, .btn, button *, .btn * {
  cursor: pointer;
.choose-options select {
  outline: none;
  border: none;
  position: absolute;
  left: -50%;
  height: 100%;
  width: 150%;
  text-indent: -9999px;
  background: #00000000;
  appearance: none;
  overflow: auto;
  overflow-x: hidden;
  position: fixed;
  z-index: 100;
  top: 60px;
  bottom: 0;
  width: 280px;
  border-right-width: thin !important;
  padding: .52rem;
  padding-bottom: 2rem;
#menu-backdrop {
  background: #00000000;
  backdrop-filter: blur(.5rem);
  position: fixed;
  z-index: 99;
  width: 0;
  height: 0;
  transition-property: background;
#menu-toggle {
  display: none;
  position: fixed;
  z-index: 98;
  bottom: 2%;
  right: 2%;
  width: 64px;
  height: 64px;
  text-decoration: none;
  border-radius: 50%;
  background: #b60000;
  padding: .5rem;
  color: #fff;
  /*bottom: 1%;
  right: calc(50vw - 32px);*/
#menu-toggle > * {
  pointer-events: none;
  padding: 0 0 0 1rem;
#menu dl, #menu dd {
  margin: 0;
#menu a, #menu dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
#menu a::after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 8 12"><path d="M.295 1.41L4.875 6l-4.58 4.59L1.705 12l6-6-6-6z"/></svg>') center center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  width: 11px;
  height: 16px;
body > header a,
body > header .btn,
  background: #00000000;
  border-radius: .25rem;
  color: inherit !important;
  text-decoration: none;
body > header a, body > header .btn {
  padding: .5rem;
  text-transform: uppercase;
  font-size: 72%;
  font-weight: bold;
#menu a, #menu dt {
  margin: .1rem 0;
  padding: .72rem .5rem;
body > header .icon,
body > header .icon,
body > header a > span,
body > header .btn > span {
  vertical-align: middle;
  pointer-events: none;
a.current {
  font-weight: bold;
  display: inline-block;
  width: 24px;
  width: 16px;
body > header, .info, .box, #menu-toggle {
  box-shadow: 0 .05rem .15rem #00000006, 0 .05rem .1rem #0000000d;
.info, .box, aside.sample {
  border-radius: .25rem;
.info.note {
  background: #dde7ff;
  border-color: #A3B4DD;
  scrollbar-color: #A3B4DD transparent;
.info.warn {
  background: #fff4ae;
  border-color: #d7b35d;
  scrollbar-color: #D7B35D transparent;
.info.warn a {
  color: inherit !important;
  padding: 4rem;
  padding-top: 100px !important;
main, #container > footer {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  padding: .6rem 0;
  margin: 0;
  margin: .2rem .2rem 1rem .2rem;
  margin-top: -2rem;
  padding-top: 4rem;
  margin-bottom: .875rem;
h2 a, h3 a {
  color: inherit !important;
  text-decoration: none;
h2 a::after, h3 a::after {
  display: none;
  margin-left: .4rem;
  content: "#";
  color: #FF7A7A;
  color: #b60000;
h2 a:hover::after, h3 a:hover::after {
  display: inline;
main > section {
  margin: 1rem 0;
  padding-bottom: 1rem;
  border-top-width: thin !important;
section p {
  line-height: 1.5;
section ol, section ul {
  padding-left: 1.5rem;
  word-wrap: anywhere;
  /* padding: .1rem .16rem;*/
  padding: .01rem .3rem;
  margin: .05rem .1rem;
  display: inline-block;
  background: #0F0F0F;
  border-radius: .25rem;
  white-space: pre-wrap;
  word-wrap: anywhere;
  color: #fff;
  text-decoration: underline;
  display: flex;
  gap: .75rem;
#container > footer {
  justify-content: space-between;
  padding: 2rem 4rem;
  font-size: .82rem;
#container > footer > :last-child {
  text-align: right;
#container > footer p {
  margin: .05rem 0;
main > footer {
  margin: 1.5rem 0;
  flex-direction: row-reverse;
main > footer > * {
  flex: 1 0 0;
ol > li, ul > li {
  margin-bottom: .35rem;
  border: none;
  border-collapse: collapse;
  min-width: 600px;
  width: 100%;
  text-align: left;
  border-bottom-width: thin !important;
  white-space: nowrap;
  font-weight: normal;
  padding: .75rem;
  border-right-width: thin !important;
tr>:last-child {
  border-right-width: 0 !important;
  min-width: 172px;
  font-size: .8rem;
  text-transform: uppercase;
  font-weight: bold;
tbody > tr:nth-child(2n) {
  background: #0000000d;
#menu a.current, thead {
  background: #EBEAE8;
  background: #fff;
body > header a:hover,
body > header .btn:hover,
#menu a:hover,
a.info:hover,
button.info:hover,
tbody > tr:hover,
button[data-copied]:hover {
  background: #CBE3F4 !important;
#menu a.current {
  border-width: thin;
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #F9FAFA;
/*.info, .box {
  border: 10px solid #00000000;
  border-image: linear-gradient(to right, cyan, lime) 1;
.info, .box {
  border-width: thin !important;
  position: relative;
.info > img, .info > svg {
  fill: currentColor;
  flex: 0 0 20px;
  width: 20px;
.info > p {
  flex: 1 0 0;
.info.alt, .info[rel="next"] {
  flex-direction: row-reverse;
.info.alt > img,
.info.alt > svg,
.info[rel="next"] > img,
.info[rel="next"] > svg {
  transform: scale(-1, -1);
.box, aside.info {
  overflow: auto;
  overflow-y: hidden;
.box, .info {
  margin-bottom: .875rem;
.box > code {
  border: none !important;
  border-radius: 0;
  margin: 0;
  display: block;
  padding: 1rem;
  max-width: initial;
  white-space: pre;
  overflow-x: auto;
  scrollbar-color: #736C6C transparent;
.box > code em { color: #ac95ff; }
.box > code b { color: #54cc72; }
.box > code i { color: #c39c00; }
.box > code * {
  font-style: normal;
  font-weight: normal;
.box > code strong {
  color: #a2a3a4;
  font-weight: bold !important;
.box > code i::first-letter { color: #fff; }
button[data-copied], button[data-copied]::before {
  display: flex;
  align-items: center;
  height: 36px;
button[data-copied] {
  border-radius: .25rem !important;
  background: #FFFFFFCC;
  border-width: thin;
  justify-content: space-between;
  padding: 0 10px 0 0;
  font-size: .7rem;
  text-transform: uppercase;
button[data-copied]::before {
  border-right-width: thin;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M9 19.2q-.99 0-1.695-.705T6.6 16.8V2.4q0-.99.705-1.695T9 0h10.8q.99 0 1.695.705T22.2 2.4v14.4q0 .99-.705 1.695T19.8 19.2zm0-2.4h10.8V2.4H9zM4.2 24q-.99 0-1.695-.705T1.8 21.6V4.8h2.4v16.8h13.2V24zM9 16.8V2.4z"/></svg>') center center no-repeat;
  background-size: 16px 16px;
  justify-content: center;
  content: "";
  width: 36px;
  margin-right: 10px;
.box > code + button[data-copied] {
  opacity: 0;
  position: absolute;
  right: .4rem;
  top: .4rem;
  color: #000;
  background: #FFFFFFCC;
  border-radius: .25rem;
.box:hover > code + button[data-copied], .box > code + button[data-copied]:focus {
  opacity: 1;
  color: #b60000;
  color: #1C2024;
li > a, p > a {
  font-weight: bold;
  text-underline-offset: 2px;
/* mobile */
/*@media (max-width: 1000px) {*/
@media (max-width: 920px) {
    position: fixed;
    z-index: 102;
    left: auto;
    top: auto;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    max-width: 420px;
    min-width: 296px;
    border-radius: .25rem;
    border-width: thin !important;
    transform: translateY(110%);
    overflow: visible !important;
    padding: .25rem;
  #menu > div {
    height: 40vh;
    inset: 0;
    min-height: 240px;
    padding: .5rem;
    overflow-x: hidden;
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateZ(0);
  #menu > div {
    scrollbar-color: #D9D9D9 transparent;
  html.dark #menu > div {
    scrollbar-color: #606066 transparent;
  html.show-menu #menu {
    box-shadow: 0 19px 38px #0000004D, 0 15px 12px #00000038;
    transform: translateY(0);
  html.show-menu #menu + #menu-backdrop {
    background: #00000080;
    height: 100vh;
    width: 100vw;
  html.show-menu {
    overflow: hidden;
  html.dark.show-menu #menu + #menu-backdrop {
    background: #00000000;
  #menu-toggle {
    display: block;
  #menu-toggle > .icon {
    display: block;
    margin: 0 auto;
  #menu-backdrop {
    display: block;
  #container {
    margin-left: 0;
  main, #container > footer {
    padding: 1.5rem;
  #container > footer {
    padding-bottom: 5rem;
  .compact {
    visibility: hidden !important;
    overflow: hidden !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
@media (max-width: 640px) {
    min-width: 120px;
  main > footer {
    flex-direction: column;
html.dark a[href] {
  color: #FF7A7A;
html.dark ::marker {
  color: #fff;
a[rel^="prev"].info,
a[rel*=" prev"].info,
a[rel^="next"].info,
a[rel*=" next"].info {
  color: inherit !important;
  font-weight: bold;
/* code blocks */
code[data-lang=terminal] {
  color: #00da59;
code > span::before {
  color: #c6d6c7;
code[data-lang=terminal] > span::before {
  content: "$";
  display: inline-block;
  margin-right: .5em;
code > span.output::before {
  content: "";
  margin-right: 0;
code.lines {
  counter-reset: line;
code.lines > span:not([class])::before {
  display: block;
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: thin solid #414856;
  padding-right: .5em;
  width: 1.9em;
  margin-right: .92em;
  text-align: right;
code.lines > span.output, code.lines > span:not([class])::before {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
          user-select: none;
/* code blocks */
/* folder tree */
.tree, .tree ul {
  padding: 0 0 0 2em;
  margin: 0;
  list-style-type: none;
  margin: 0 0 0 .2em;
  position: relative;
  min-height: 1.5em;
.tree li ul {
  margin-top: .2em;
.tree li::after {
  position: absolute;
  top: calc(.75em);
  left: -2em;
  border-top-width: thin !important;
  content: "";
  width: 2em;
.tree li::before {
  position: absolute;
  left: -2em;
  border-left-width: thin !important;
  content: "";
  width: 2em;
  height: 100%;
.tree li:last-child::before {
  height: .75em;
  font-family: monospace;
  flex: 0 0 6em;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  border: 0 !important;
aside.sample {
  background: #fff;
  border-width: thin;
  padding: .5rem;
  overflow: auto;
  font-size: .75rem;
  scrollbar-color: #C8C5C5 transparent !important;
aside.sample > .inner {
  padding: .5rem;
  min-width: 620px;
html.dark tbody > tr:nth-child(2n) {
  background: #FFFFFF0D;
html.dark body *,
html.dark body ::before,
html.dark body ::after {
  border-color: #363A3F;
  border-color: #414856;
html.dark, html.dark * {
  scrollbar-color: #606066 #19181E;
html.dark .info {
  background-color: #1C1B22;
html.dark .info.note {
  background: #0d2847;
  border-color: #205d9e;
  scrollbar-color: #205d9e transparent;
html.dark .info.warn {
  background: #3E3400;
  border-color: #6F5D00;
  scrollbar-color: #6F5D00 transparent;
html.dark button[data-copied] {
  background: #000000B3;
  color: #fff;
html.dark button[data-copied]::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M9 19.2q-.99 0-1.695-.705T6.6 16.8V2.4q0-.99.705-1.695T9 0h10.8q.99 0 1.695.705T22.2 2.4v14.4q0 .99-.705 1.695T19.8 19.2zm0-2.4h10.8V2.4H9zM4.2 24q-.99 0-1.695-.705T1.8 21.6V4.8h2.4v16.8h13.2V24zM9 16.8V2.4z"/></svg>');
html.dark body > header a:hover,
html.dark body > header .btn:hover,
html.dark #menu a:hover,
html.dark a.info:hover,
html.dark button.info:hover,
html.dark tbody > tr:hover,
html.dark button[data-copied]:hover {
  background: #42424A !important;
html.dark a.info:hover,
html.dark button.info:hover {
  border-color: #878793;
html.dark code,
html.dark thead,
html.dark #menu a.current {
  background: #2A2A2F;
html.dark, html.dark table, html.dark #menu {
  background: #1C1B22;
  color: #fff;
html.dark body > header {
  background: #1C1B22CC;
html.dark #menu a::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 8 12"><path d="M.295 1.41L4.875 6l-4.58 4.59L1.705 12l6-6-6-6z"/></svg>');
html.dark code {
  border-width: thin;
html.dark .box > code {
  scrollbar-color: #606066 transparent;
.code-inphinit {
  text-align: left;
  background-color: #1b1820;
  border-radius: 4px;
  overflow: hidden;
  color: #dfe0e0;
.code-inphinit .hl-line {
  background-color: #656565;
  border-radius: 2px;
  padding: 5px 0;
  margin: 5px 0;
  color: #fff;
  width: 100%;
.code-inphinit-header {
  background-color: #b60000;
  font-size: 10pt;
  padding: 10px;
  color: #fff;
.code-inphinit-header a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: thin currentColor dotted !important;
  background-color: transparent !important;
.code-inphinit .code-inphinit-error {
  background-color: #252631;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  margin: 0;
  box-shadow: 0 5px 3px -3px rgba(0,0,0,.2);
  border-bottom: thin solid #363744;
.code-inphinit .code-inphinit-error > a {
  color: inherit;
  text-decoration: none;
  border-bottom: thin #fff dotted;
.code-inphinit pre {
  line-height: 24px;
  padding: 5px;
  font-size: 9pt;
  overflow: auto;
  margin: 0;
.code-inphinit pre > span {
  display: inline-block;
.code-inphinit pre span::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  min-width: 35px;
  border-right: thin solid #363744;
  margin-right: 10px;
  color: #888;
  text-align: right;
  padding-right: 10px;
.code-inphinit .hl-line::before {
  border-right-color: #9297a2;
  color: #fff;
.grid-ani {
  perspective: 200px;
  perspective-origin: 50% 0%;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 92px;
  z-index: -1;
  overflow: hidden;
.grid-ani::before, .grid-ani::after {
  content: "";
  width: 100%;
  bottom: 0;
  position: absolute;
  display: block;
.grid-ani::before {
  z-index: 2;
  height: 92px;
  background: linear-gradient(0deg, #F9FAFA00 0, #F9FAFA 70%);
.grid-ani::after {
  z-index: 1;
  height: 145px;
  background-image:
    linear-gradient(0, #E3E2E2 1px, #00000000 1px),
    linear-gradient(90deg, #E3E2E2 1px, #00000000 1px);
  background-size: 32px 32px;
  transform: rotateX(50deg);
@keyframes move-grid-plane {
    background-position: 0 0;
    background-position: -32px 0;
@media (prefers-reduced-motion: no-preference) {
  .grid-ani::after {
    animation: move-grid-plane 1s linear infinite;
html.dark .grid-ani::before {
  background: linear-gradient(0deg, #1E1C2200 0, #1C1B22 70%);
html.dark .grid-ani::after {
  background-image:
    linear-gradient(0, #292a31 1px, #00000000 1px),
    linear-gradient(90deg, #292a31 1px, #00000000 1px);
@media (min-width: 920px) {
  .grid-ani {
    left: 280px;
    width: calc(100% - 280px);
Navigation Menu

Uh oh!

Uh oh!

FilesExpand file tree

docs.css

Latest commit

History

docs.css

File metadata and controls
