supMDX/styles/misc.sass

// SPDX-License-Identifier: MIT
// Copyright (c) 2022 sup39

html
  font-size: 16px
body
  color: var(--fg)
  background: var(--bg)
  line-height: 1.6
  font-weight: 300
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
  font-variant-numeric: tabular-nums
  margin: 0
*
  box-sizing: border-box

/**** font ****/
html:lang(zh-TW) body
  font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif

/**** image ****/
article img
  max-width: 100%
  height: auto
  margin: 1em 0

#icon-link
  text-decoration: none
  > *
    float: left
  .icon
    width: 72px
    height: 72px
  .icon-text
    height: 72px
    font-size: 27px
    font-weight: 600
    line-height: 1.2
    padding-left: 16px
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    text-align: center
    .pink
      font-size: 24px
#icon-link:link
  color: unset

/**** main ****/
main
  padding: 24px
article
  font-weight: 300
  h3
    + table, + h4
      margin-top: 0.5em
  h4 + table
    margin-top: 0.5em
  table
    margin-block-start: 1em
    margin-block-end: 1em
  table,
  table th,
  table td
    border: solid 1px var(--bd)
    border-collapse: collapse
    padding: 4px
  > ul
    padding-inline-start: 2em
    margin-block-start: 0.5em
    margin-block-end: 1em
  ul ul
    padding-inline-start: 1.25em
  > h2 + ul
    padding-inline-start: 1.5em

footer
  background: #18181e
  background: #222
  font-size: 0.75em
  line-height: 1em
  padding: 1.5em 2em
  margin-top: 1em

p + *.compact
  margin-block-start: -1em
*.compact
  margin-block-start: 0em

/**** table ****/
.tac
  text-align: center
.tar
  text-align: right
table.tb-r tbody
  text-align: right

/**** form ****/
form > div
  display: flex
  align-items: center
  > *
    margin: 3px

/**** input ****/
input, textarea
  color: var(--fg)
  background: #222
  border: var(--bd) solid 1px
  font-size: 1em
input[invalid]
  background: #600
input[type="number"]
  text-align: right

/**** button ****/
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
  color: var(--fg)
  background: #2a8
  border: #2a8 1px solid
  border-radius: 4px
  font-size: 14px
  cursor: pointer
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover
  border: #197 1px solid
  background: #197
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active
  border: #075 1px solid
  background: #075

button:disabled
  background: #444
  border: #555 1px solid
  cursor: not-allowed
button[variant="warning"]
  background: #c87603
  border: #c87603 1px solid
button[variant="warning"]:enabled:hover
  background: #b60
  border: #b60 1px solid
button[variant="warning"]:enabled:active
  background: #a50
  border: #b60 1px solid
button[variant="danger"]:enabled
  background: #c32
  border: #c32 1px solid
button[variant="danger"]:enabled:hover
  background: #b21
  border: #b21 1px solid
button[variant="danger"]:enabled:active
  background: #a10
  border: #b21 1px solid
button.sm
  font-size: 12px

/**** div.bt ****/
div.bt-plus, div.bt-minus
  position: relative
  width: 1.2em
  height: 1.2em
  border: #2ee5b8 1px solid
  border-radius: 4px
  cursor: pointer
  user-select: none
  -webkit-user-select: none
  -moz-user-select: none
  -khtml-user-select: none
  -ms-user-select: none
div.bt-plus:before,
div.bt-plus:after,
div.bt-minus:before
  content: ""
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  width: 50%
  height: 1px
  background: var(--fg)
div.bt-plus:after
  width: 1px
  height: 50%

/**** variant ****/
span.danger
  color: #f66
button.danger
  background: #a33

/**** details ****/
details
  border: 1px solid
  padding: 0.5em 1em
  margin-block-start: 0.5em
  margin-block-end: 0.5em
  > summary
    padding: 4px 0.5em
    margin: -0.5em -1em -0.5em
details[open]
  padding-bottom: 0
  > summary
    border-bottom: 1px solid
    margin: -0.5em -1em 0
  > ul, > ol
    padding-inline-start: 1.5em

/**** misc ****/
video
  max-width: 100%
.noselect
  -webkit-touch-callout: none // iOS Safari
  -webkit-user-select: none // Safari
  -khtml-user-select: none // Konqueror HTML
  -moz-user-select: none // Old versions of Firefox
  -ms-user-select: none // Internet Explorer/Edge
  user-select: none // Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox

/**** hide ****/
div.hide-ctn
  position: relative
  color: #fff
  margin-block-start: -1em
  margin-block-end: 2em
  z-index:-1
  *
    position: absolute
    font-size: 0.25em
    color: #0000

/**** highlight ****/
table.code-lnum
  padding: 0
  margin: 0
  width: 100%
  border: none
  td
    border: none
  td:first-child
    padding-left: 0.5em
    padding-right: 1em
    text-align: right
  td:last-child
    width: 100%
    white-space: pre
.hljs-comment
  color: #7d6
.hljs-keyword
  color: #ffa
  font-weight: bold
.hljs-number, .hljs-string
  color: #ffb7e7