supMDX/styles/misc.sass
2022-11-04 21:47:43 +09:00

261 lines
5 KiB
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