/* Sakura.css v1.5.0 * ================ * Minimal css theme. * Project: https://github.com/oxalorg/sakura/ */ /* data-theme="taiyō" */ :root { --blossom: #292722; --fade: #7d7768; --bg: #ffecec; --bg-alt: #ffecec; --text: #292222; } [data-theme="iron goddess"] { --blossom: #424b51; --fade: #64707a; --bg: #fff2e2; --bg-alt: #fffce2; --text: #2c2923; } [data-theme="main sequence"] { --blossom: #3a5425; --fade: #698650; --bg: #fffde5; --bg-alt: #fff4e5; --text: #5e592a; } [data-theme="sorcery"] { --blossom: #5a5a69; --fade: #868698; --bg: #e5f4e5; --bg-alt: #e6f4e6; --text: #323932; } [data-theme="cirrus"] { --blossom: #565a4b; --fade: #9da587; --bg: #e5f6fa; --bg-alt: #e5f6fa; --text: #31393b; } [data-theme="oxygen"] { --blossom: #162011; --fade: #343932; --bg: #e1e2e4; --bg-alt: #e3e0e3; --text: #27282c; } [data-theme="dauphin"] { --blossom: #171e1c; --fade: #485b58; --bg: #ebe5f8; --bg-alt: #ebe5f8; --text: #1c1a20; } [data-theme="diamond-burned"] { --blossom: #0f0d0b; --fade: #4d4743; --bg: #f8ebf2; --bg-alt: #ebe8f4; --text: #3e363a; } [data-theme="chi"] { --blossom: #908975; --fade: #fff8e5; --bg: #110c0c; --bg-alt: #0a090c; --text: #cfa9a9; } [data-theme="darjeeling"] { --blossom: #ba949c; --fade: #f8e1e6; --bg: #1c160d; --bg-alt: #1c160d; --text: #c9b9a0; } [data-theme="subgiant"] { --blossom: #9fad8a; --fade: #e8f2d7; --bg: #16130b; --bg-alt: #16130b; --text: #bbb396; } [data-theme="goblin"] { --blossom: #7a808e; --fade: #dae1ef; --bg: #070905; --bg-alt: #0a0906; --text: #acbd9f; } [data-theme="altostratus"] { --blossom: #a8a0b7; --fade: #e5dbf7; --bg: #0c0f0f; --bg-alt: #1a1614; --text: #8da4a4; } [data-theme="silicon"] { --blossom: #717f63; --fade: #c4d4b3; --bg: #050a0f; --bg-alt: #050a0f; --text: #838e9a; } [data-theme="imperator"] { --blossom: #93a0a3; --fade: #f3fbfd; --bg: #0e0c12; --bg-alt: #0e0c12; --text: #a8a1b1; } [data-theme="mædi"] { --blossom: #ccd3b6; --fade: #fdfbf3; --bg: #10090f; --bg-alt: #2f282e; --text: #9e889a; } /* Body */ html { font-size: 62.5%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } body { font-size: 1.8rem; line-height: 1.618; max-width: 38em; margin: auto; color: var(--text); background-color: var(--bg); padding: 13px; } @media (max-width: 684px) { body { font-size: 1.53rem; } } @media (max-width: 382px) { body { font-size: 1.35rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-weight: 700; margin-top: 3rem; margin-bottom: 1.5rem; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; } h1 { font-size: 2.35em; } h2 { font-size: 2em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; } p { margin-top: 0px; margin-bottom: 2.5rem; } small, sub, sup { font-size: 75%; } hr { border-color: var(--blossom); } a { text-decoration: none; color: var(--blossom); } a:hover { color: var(--fade); border-bottom: 2px solid var(--text); } ul { padding-left: 1.4em; margin-top: 0px; margin-bottom: 2.5rem; } li { margin-bottom: 0.4em; } blockquote { margin-left: 0px; margin-right: 0px; padding-left: 1em; padding-top: 0.8em; padding-bottom: 0.8em; padding-right: 0.8em; border-left: 5px solid var(--blossom); margin-bottom: 2.5rem; background-color: var(--bg-alt); } blockquote p { margin-bottom: 0; } img, video { height: auto; max-width: 100%; margin-top: 0px; margin-bottom: 2.5rem; } /* Pre and Code */ pre { background-color: var(--bg-alt); display: block; padding: 1em; overflow-x: auto; margin-top: 0px; margin-bottom: 2.5rem; font-size: 0.9em; } code, kbd, samp { font-size: 0.9em; padding: 0 0.5em; background-color: var(--bg-alt); white-space: pre-wrap; } pre>code { padding: 0; background-color: transparent; white-space: pre; font-size: 1em; } /* Tables */ table { text-align: justify; width: 100%; border-collapse: collapse; margin-bottom: 2rem; } td, th { padding: 0.5em; border-bottom: 1px solid var(--bg-alt); } /* Buttons, forms and input */ input, textarea { border: 1px solid var(--text); } input:focus, textarea:focus { border: 1px solid var(--blossom); } textarea { width: 100%; } .button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button { display: inline-block; padding: 5px 10px; text-align: center; text-decoration: none; white-space: nowrap; background-color: var(--blossom); color: var(--bg); border-radius: 1px; border: 1px solid var(--blossom); cursor: pointer; box-sizing: border-box; } .button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] { cursor: default; opacity: 0.5; } .button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover { background-color: var(--fade); color: var(--bg); outline: 0; } .button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible { outline-style: solid; outline-width: 2px; } textarea, select, input { color: var(--text); padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ margin-bottom: 10px; background-color: var(--bg-alt); border: 1px solid var(--bg-alt); border-radius: 4px; box-shadow: none; box-sizing: border-box; } textarea:focus, select:focus, input:focus { border: 1px solid var(--blossom); outline: 0; } input[type=checkbox]:focus { outline: 1px dotted var(--blossom); } label, legend, fieldset { display: block; margin-bottom: 0.5rem; font-weight: 600; }