UNPKG

@16bits/nes.css

Version:

since NES.css hasn't be published for a long time. this pkg is published with using the latest develop branch to solve some issues

1,742 lines (1,666 loc) 67.7 kB
/* !***************************************************************************\ NES.css Framework Version: development build-data() \ *****************************************************************************/ /*! * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */ *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } [tabindex="-1"]:focus { outline: 0 !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title], abbr[data-original-title] { -webkit-text-decoration: underline dotted; text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a { color: #007bff; text-decoration: none; background-color: transparent; } a:hover { color: #0056b3; text-decoration: underline; } a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; } a:not([href]):not([tabindex]):focus { outline: 0; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } figure { margin: 0 0 1rem; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6c757d; text-align: left; caption-side: bottom; } th { text-align: inherit; } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { padding: 0; border-style: none; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input[type=radio], input[type=checkbox] { box-sizing: border-box; padding: 0; } input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { outline-offset: -2px; -webkit-appearance: none; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none !important; } html, body, pre, code, kbd, samp { font-family: "Press Start 2P"; } html { cursor: url(), auto; } body { font-size: 16px; color: #212529; background-color: #fff; -webkit-font-smoothing: antialiased; } label { cursor: inherit; } a, button { cursor: url() 14 0, pointer; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: none; } input[type=radio], input[type=checkbox] { outline: 0; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } } .nes-select select, .nes-input, .nes-textarea, .nes-table.is-dark.is-bordered, .nes-table.is-bordered, .nes-progress.is-rounded, .nes-progress, .nes-dialog.is-rounded.is-dark, .nes-dialog.is-rounded, .nes-container.is-rounded.is-dark, .nes-container.is-rounded, .nes-btn, .nes-balloon.is-dark, .nes-balloon { border-style: solid; border-width: 4px; } /* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */ .nes-pointer { cursor: url() 14 0, pointer; } .nes-avatar { width: 32px; height: 32px; } .nes-avatar.is-rounded { border-radius: 50px; } .nes-avatar.is-pixelated { image-rendering: pixelated; } .nes-avatar.is-small { width: 16px; height: 16px; } .nes-avatar.is-small.is-rounded { border-radius: 50px; } .nes-avatar.is-small.is-pixelated { image-rendering: pixelated; } .nes-avatar.is-medium { width: 48px; height: 48px; } .nes-avatar.is-medium.is-rounded { border-radius: 50px; } .nes-avatar.is-medium.is-pixelated { image-rendering: pixelated; } .nes-avatar.is-large { width: 64px; height: 64px; } .nes-avatar.is-large.is-rounded { border-radius: 50px; } .nes-avatar.is-large.is-pixelated { image-rendering: pixelated; } .nes-badge { position: relative; display: inline-block; width: 10.5em; height: 1.875em; margin: 0.5em; font-size: 0.9em; white-space: nowrap; vertical-align: top; -webkit-user-select: none; user-select: none; } .nes-badge.is-splited span.is-dark:first-child, .nes-badge.is-split span.is-dark:first-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #212529; left: 0; box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0 0 #212529, -0.5em 0 #212529; } .nes-badge.is-splited span.is-dark:last-child, .nes-badge.is-split span.is-dark:last-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #212529; right: 0; box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0.5em 0 #212529, 0 0 #212529; } .nes-badge.is-icon { width: 5.25em; } .nes-badge.is-icon span.is-dark:first-child { display: flex; align-items: center; justify-content: center; width: 2.7em; font-size: 0.5em; color: #fff; text-align: center; background-color: #212529; position: absolute; top: -2.8em; left: -2.7em; height: 2.7em; } .nes-badge.is-icon span.is-dark:last-child { display: inline-block; align-items: center; justify-content: center; width: 6em; font-size: 0.88em; color: #fff; text-align: center; background-color: #212529; box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0.5em 0 #212529, -0.5em 0 #212529; } .nes-badge span.is-dark:first-child { position: absolute; top: 0; width: 100%; color: #fff; text-align: center; background-color: #212529; box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0.5em 0 #212529, -0.5em 0 #212529; } .nes-badge.is-splited span.is-primary:first-child, .nes-badge.is-split span.is-primary:first-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #209cee; left: 0; box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0 0 #209cee, -0.5em 0 #209cee; } .nes-badge.is-splited span.is-primary:last-child, .nes-badge.is-split span.is-primary:last-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #209cee; right: 0; box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, 0 0 #209cee; } .nes-badge.is-icon { width: 5.25em; } .nes-badge.is-icon span.is-primary:first-child { display: flex; align-items: center; justify-content: center; width: 2.7em; font-size: 0.5em; color: #fff; text-align: center; background-color: #209cee; position: absolute; top: -2.8em; left: -2.7em; height: 2.7em; } .nes-badge.is-icon span.is-primary:last-child { display: inline-block; align-items: center; justify-content: center; width: 6em; font-size: 0.88em; color: #fff; text-align: center; background-color: #209cee; box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, -0.5em 0 #209cee; } .nes-badge span.is-primary:first-child { position: absolute; top: 0; width: 100%; color: #fff; text-align: center; background-color: #209cee; box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, -0.5em 0 #209cee; } .nes-badge.is-splited span.is-success:first-child, .nes-badge.is-split span.is-success:first-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #92cc41; left: 0; box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0 0 #92cc41, -0.5em 0 #92cc41; } .nes-badge.is-splited span.is-success:last-child, .nes-badge.is-split span.is-success:last-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #92cc41; right: 0; box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, 0 0 #92cc41; } .nes-badge.is-icon { width: 5.25em; } .nes-badge.is-icon span.is-success:first-child { display: flex; align-items: center; justify-content: center; width: 2.7em; font-size: 0.5em; color: #fff; text-align: center; background-color: #92cc41; position: absolute; top: -2.8em; left: -2.7em; height: 2.7em; } .nes-badge.is-icon span.is-success:last-child { display: inline-block; align-items: center; justify-content: center; width: 6em; font-size: 0.88em; color: #fff; text-align: center; background-color: #92cc41; box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, -0.5em 0 #92cc41; } .nes-badge span.is-success:first-child { position: absolute; top: 0; width: 100%; color: #fff; text-align: center; background-color: #92cc41; box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, -0.5em 0 #92cc41; } .nes-badge.is-splited span.is-warning:first-child, .nes-badge.is-split span.is-warning:first-child { position: absolute; top: 0; width: 50%; color: #212529; text-align: center; background-color: #f7d51d; left: 0; box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0 0 #f7d51d, -0.5em 0 #f7d51d; } .nes-badge.is-splited span.is-warning:last-child, .nes-badge.is-split span.is-warning:last-child { position: absolute; top: 0; width: 50%; color: #212529; text-align: center; background-color: #f7d51d; right: 0; box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, 0 0 #f7d51d; } .nes-badge.is-icon { width: 5.25em; } .nes-badge.is-icon span.is-warning:first-child { display: flex; align-items: center; justify-content: center; width: 2.7em; font-size: 0.5em; color: #212529; text-align: center; background-color: #f7d51d; position: absolute; top: -2.8em; left: -2.7em; height: 2.7em; } .nes-badge.is-icon span.is-warning:last-child { display: inline-block; align-items: center; justify-content: center; width: 6em; font-size: 0.88em; color: #212529; text-align: center; background-color: #f7d51d; box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, -0.5em 0 #f7d51d; } .nes-badge span.is-warning:first-child { position: absolute; top: 0; width: 100%; color: #212529; text-align: center; background-color: #f7d51d; box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, -0.5em 0 #f7d51d; } .nes-badge.is-splited span.is-error:first-child, .nes-badge.is-split span.is-error:first-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #e76e55; left: 0; box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0 0 #e76e55, -0.5em 0 #e76e55; } .nes-badge.is-splited span.is-error:last-child, .nes-badge.is-split span.is-error:last-child { position: absolute; top: 0; width: 50%; color: #fff; text-align: center; background-color: #e76e55; right: 0; box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, 0 0 #e76e55; } .nes-badge.is-icon { width: 5.25em; } .nes-badge.is-icon span.is-error:first-child { display: flex; align-items: center; justify-content: center; width: 2.7em; font-size: 0.5em; color: #fff; text-align: center; background-color: #e76e55; position: absolute; top: -2.8em; left: -2.7em; height: 2.7em; } .nes-badge.is-icon span.is-error:last-child { display: inline-block; align-items: center; justify-content: center; width: 6em; font-size: 0.88em; color: #fff; text-align: center; background-color: #e76e55; box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, -0.5em 0 #e76e55; } .nes-badge span.is-error:first-child { position: absolute; top: 0; width: 100%; color: #fff; text-align: center; background-color: #e76e55; box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, -0.5em 0 #e76e55; } .nes-balloon { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; position: relative; display: inline-block; padding: 1rem 1.5rem; margin: 8px; margin-bottom: 30px; background-color: #fff; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-balloon { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-balloon { border-image-repeat: stretch; } } .nes-balloon > :last-child { margin-bottom: 0; } .nes-balloon::before, .nes-balloon::after { position: absolute; content: ""; } .nes-balloon.is-dark { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>'); border-image-outset: 0; color: #fff; background: #212529; border-image-outset: 2; box-shadow: 0 0 0 8px #212529; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-balloon.is-dark { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-balloon.is-dark { border-image-repeat: stretch; } } .nes-balloon.is-dark.from-left::before, .nes-balloon.is-dark.from-right::before { background-color: #212529; border-color: #fff; } .nes-balloon.is-dark.from-left::after, .nes-balloon.is-dark.from-right::after { color: #fff; background-color: #212529; } .nes-balloon.is-dark.from-left::before { box-shadow: -5px 10px 0 6px #212529; } .nes-balloon.is-dark.from-left::after { box-shadow: -4px 0, 4px 0, -4px 4px #212529, 0 4px, -8px 4px, -4px 8px, -8px 8px; } .nes-balloon.is-dark.from-right::before { box-shadow: 5px 10px 0 6px #212529; } .nes-balloon.is-dark.from-right::after { box-shadow: -4px 0, 4px 0, 4px 4px #212529, 0 4px, 8px 4px, 4px 8px, 8px 8px; } .nes-balloon.from-left::before, .nes-balloon.from-left::after { left: 2rem; } .nes-balloon.from-left::before { bottom: -14px; width: 26px; height: 10px; background-color: #fff; border-right: 4px solid #212529; border-left: 4px solid #212529; } .nes-balloon.from-left::after { bottom: -18px; width: 18px; height: 4px; margin-right: 8px; color: #212529; background-color: #fff; box-shadow: -4px 0, 4px 0, -4px 4px #fff, 0 4px, -8px 4px, -4px 8px, -8px 8px; } .nes-balloon.from-right::before, .nes-balloon.from-right::after { right: 2rem; } .nes-balloon.from-right::before { bottom: -14px; width: 26px; height: 10px; background-color: #fff; border-right: 4px solid #212529; border-left: 4px solid #212529; } .nes-balloon.from-right::after { bottom: -18px; width: 18px; height: 4px; margin-left: 8px; background-color: #fff; box-shadow: -4px 0, 4px 0, 4px 4px #fff, 0 4px, 8px 4px, 4px 8px, 8px 8px; } .nes-btn { border-image-slice: 2; border-image-width: 2; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; position: relative; display: inline-block; padding: 6px 8px; margin: 4px; text-align: center; vertical-align: middle; cursor: url() 14 0, pointer; -webkit-user-select: none; user-select: none; color: #212529; background-color: #fff; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-btn { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-btn { border-image-repeat: stretch; } } .nes-btn::after { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; content: ""; box-shadow: inset -4px -4px #adafbc; } .nes-btn:hover { color: #212529; text-decoration: none; background-color: #e7e7e7; } .nes-btn:hover::after { box-shadow: inset -6px -6px #adafbc; } .nes-btn:focus { box-shadow: 0 0 0 6px rgba(173, 175, 188, 0.3); } .nes-btn:active:not(.is-disabled)::after { box-shadow: inset 4px 4px #adafbc; } .nes-btn:focus { outline: 0; } .nes-btn.is-disabled, .nes-btn.is-disabled:hover, .nes-btn.is-disabled:focus { color: #212529; cursor: not-allowed; background-color: #d3d3d3; box-shadow: inset -4px -4px #adafbc; opacity: 0.6; } .nes-btn.is-disabled:hover::after { box-shadow: inset -4px -4px #adafbc; } .nes-btn.is-primary { color: #fff; background-color: #209cee; } .nes-btn.is-primary::after { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; content: ""; box-shadow: inset -4px -4px #006bb3; } .nes-btn.is-primary:hover { color: #fff; text-decoration: none; background-color: #108de0; } .nes-btn.is-primary:hover::after { box-shadow: inset -6px -6px #006bb3; } .nes-btn.is-primary:focus { box-shadow: 0 0 0 6px rgba(0, 107, 179, 0.3); } .nes-btn.is-primary:active:not(.is-disabled)::after { box-shadow: inset 4px 4px #006bb3; } .nes-btn.is-success { color: #fff; background-color: #92cc41; } .nes-btn.is-success::after { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; content: ""; box-shadow: inset -4px -4px #4aa52e; } .nes-btn.is-success:hover { color: #fff; text-decoration: none; background-color: #76c442; } .nes-btn.is-success:hover::after { box-shadow: inset -6px -6px #4aa52e; } .nes-btn.is-success:focus { box-shadow: 0 0 0 6px rgba(74, 165, 46, 0.3); } .nes-btn.is-success:active:not(.is-disabled)::after { box-shadow: inset 4px 4px #4aa52e; } .nes-btn.is-warning { color: #212529; background-color: #f7d51d; } .nes-btn.is-warning::after { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; content: ""; box-shadow: inset -4px -4px #e59400; } .nes-btn.is-warning:hover { color: #212529; text-decoration: none; background-color: #f2c409; } .nes-btn.is-warning:hover::after { box-shadow: inset -6px -6px #e59400; } .nes-btn.is-warning:focus { box-shadow: 0 0 0 6px rgba(229, 148, 0, 0.3); } .nes-btn.is-warning:active:not(.is-disabled)::after { box-shadow: inset 4px 4px #e59400; } .nes-btn.is-error { color: #fff; background-color: #e76e55; } .nes-btn.is-error::after { position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; content: ""; box-shadow: inset -4px -4px #8c2022; } .nes-btn.is-error:hover { color: #fff; text-decoration: none; background-color: #ce372b; } .nes-btn.is-error:hover::after { box-shadow: inset -6px -6px #8c2022; } .nes-btn.is-error:focus { box-shadow: 0 0 0 6px rgba(140, 32, 34, 0.3); } .nes-btn.is-error:active:not(.is-disabled)::after { box-shadow: inset 4px 4px #8c2022; } .nes-btn input[type=file] { position: absolute; pointer-events: none; opacity: 0; } .nes-container { position: relative; padding: 1.5rem 2rem; border-color: black; border-style: solid; border-width: 4px; } .nes-container > :last-child { margin-bottom: 0; } .nes-container.is-centered { text-align: center; } .nes-container.is-right { text-align: right; } .nes-container.with-title > .title { display: table; padding: 0 0.5rem; margin: -1.8rem 0 1rem; font-size: 1rem; background-color: #fff; } .nes-container.with-title.is-centered > .title { margin: -2rem auto 1rem; } .nes-container.with-title.is-right > .title { margin: -2rem 0 1rem auto; } .nes-container.is-dark { position: relative; margin: 4px; color: #fff; background-color: #212529; border-color: white; } .nes-container.is-dark::after { position: absolute; top: -7.2px; right: -7.2px; bottom: -7.2px; left: -7.2px; z-index: -1; content: ""; background-color: #212529; } .nes-container.is-dark.with-title > .title { color: #fff; background-color: #212529; } .nes-container.is-rounded { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; padding: 1rem 1.5rem; margin: 4px; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-container.is-rounded { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-container.is-rounded { border-image-repeat: stretch; } } .nes-container.is-rounded.with-title > .title { margin-top: -1.5rem; } .nes-container.is-rounded.with-title.is-centered > .title { margin: -1.5rem auto 1rem; } .nes-container.is-rounded.with-title.is-right > .title { margin: -1.5rem 0 1rem auto; } .nes-container.is-rounded.is-dark { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>'); border-image-outset: 0; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-container.is-rounded.is-dark { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-container.is-rounded.is-dark { border-image-repeat: stretch; } } .nes-container.is-rounded.is-dark::after { content: none; } .nes-container.is-rounded.is-dark.with-title > .title { margin-top: -1.3rem; } .nes-container.is-rounded.is-dark.with-title.is-centered > .title { margin: -1.3rem auto 1rem; } .nes-container.is-rounded.is-dark.with-title.is-right > .title { margin: -1.3rem 0 1rem auto; } .nes-dialog { padding: 1.5rem 2rem; border-width: 4px; } .nes-dialog::-webkit-backdrop { background-color: rgba(0, 0, 0, 0.3); } .nes-dialog > .backdrop, .nes-dialog::backdrop { background-color: rgba(0, 0, 0, 0.3); } .nes-dialog > :last-child { margin-bottom: 0; } .nes-dialog.is-rounded { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-dialog.is-rounded { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-dialog.is-rounded { border-image-repeat: stretch; } } .nes-dialog.is-rounded.is-dark { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>'); border-image-outset: 0; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-dialog.is-rounded.is-dark { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-dialog.is-rounded.is-dark { border-image-repeat: stretch; } } .nes-dialog.is-dark { color: #fff; background-color: #212529; border-color: #fff; } .nes-dialog.is-dark:not(.is-rounded)::before { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; z-index: -1; content: ""; border: 4px solid #212529; } .nes-list { list-style-type: none; } .nes-list li { position: relative; } .nes-list.is-disc li::before { position: absolute; top: calc(50% - 8px); left: -22px; content: ""; width: 2px; height: 2px; color: #212529; box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,8px 6px,10px 6px,12px 6px,14px 6px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px; } @supports (-moz-appearance: meterbar) { .nes-list.is-disc li::before { box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em; } } .nes-list.is-circle li::before { position: absolute; top: calc(50% - 8px); left: -22px; content: ""; width: 2px; height: 2px; color: #212529; box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,12px 6px,14px 6px,4px 8px,6px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px; } @supports (-moz-appearance: meterbar) { .nes-list.is-circle li::before { box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em; } } .nes-list.is-dark.is-disc li::before { position: absolute; top: calc(50% - 8px); left: -22px; content: ""; width: 2px; height: 2px; color: #fff; box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,8px 6px,10px 6px,12px 6px,14px 6px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px; } @supports (-moz-appearance: meterbar) { .nes-list.is-dark.is-disc li::before { box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em; } } .nes-list.is-dark.is-circle li::before { position: absolute; top: calc(50% - 8px); left: -22px; content: ""; width: 2px; height: 2px; color: #fff; box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,12px 6px,14px 6px,4px 8px,6px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px; } @supports (-moz-appearance: meterbar) { .nes-list.is-dark.is-circle li::before { box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em; } } .nes-list.is-dark li { color: #fff; } .nes-progress { border-image-slice: 2; border-image-width: 2; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; width: 100%; height: 48px; margin: 4px; color: #212529; background-color: #fff; -webkit-appearance: none; appearance: none; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-progress { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-progress { border-image-repeat: stretch; } } .nes-progress::-webkit-progress-bar { background-color: #fff; } .nes-progress::-webkit-progress-value { background-color: #212529; } .nes-progress::-moz-progress-bar { background-color: #212529; } .nes-progress::-ms-fill { background-color: #212529; border: none; } .nes-progress.is-rounded { border-image-slice: 3; border-image-width: 3; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-progress.is-rounded { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-progress.is-rounded { border-image-repeat: stretch; } } .nes-progress.is-primary::-webkit-progress-bar { background-color: #fff; } .nes-progress.is-primary::-webkit-progress-value { background-color: #209cee; } .nes-progress.is-primary::-moz-progress-bar { background-color: #209cee; } .nes-progress.is-primary::-ms-fill { background-color: #209cee; border: none; } .nes-progress.is-success::-webkit-progress-bar { background-color: #fff; } .nes-progress.is-success::-webkit-progress-value { background-color: #92cc41; } .nes-progress.is-success::-moz-progress-bar { background-color: #92cc41; } .nes-progress.is-success::-ms-fill { background-color: #92cc41; border: none; } .nes-progress.is-warning::-webkit-progress-bar { background-color: #fff; } .nes-progress.is-warning::-webkit-progress-value { background-color: #f7d51d; } .nes-progress.is-warning::-moz-progress-bar { background-color: #f7d51d; } .nes-progress.is-warning::-ms-fill { background-color: #f7d51d; border: none; } .nes-progress.is-error::-webkit-progress-bar { background-color: #fff; } .nes-progress.is-error::-webkit-progress-value { background-color: #e76e55; } .nes-progress.is-error::-moz-progress-bar { background-color: #e76e55; } .nes-progress.is-error::-ms-fill { background-color: #e76e55; border: none; } .nes-progress.is-pattern::-webkit-progress-value { background-color: #212529; background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .nes-progress.is-pattern::-moz-progress-bar { background-color: #212529; background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-position: 0 0, 10px 10px; background-size: 20px 20px; } .nes-progress.is-pattern::-ms-fill { background-color: #212529; background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-position: 0 0, 10px 10px; background-size: 20px 20px; border: none; } .nes-table-responsive { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .nes-table { table-layout: fixed; background-color: #fff; /*************************************************************************** \ This eliminates the gap between the last row in a table and the border, as well as hiding the derelict pixels in the bottom right and bottom left of the last row of a table \ ***************************************************************************/ } .nes-table tr { margin-left: -0.25em; } .nes-table th, .nes-table td { position: relative; padding: 0.5rem; word-wrap: break-word; border-color: #212529; border-style: solid; border-width: 0 0.25em 0.25em 0; } .nes-table th:last-child, .nes-table td:last-child { border-right-width: 0; } .nes-table th::after, .nes-table th::before, .nes-table td::after, .nes-table td::before { position: absolute; display: block; width: 0.25em; height: 0.25em; content: ""; background-color: #212529; } .nes-table th::after, .nes-table td::after { bottom: -0.25em; left: -0.25em; } .nes-table th::before, .nes-table td::before { top: -0.25em; right: -0.25em; } .nes-table th:last-child::before, .nes-table td:last-child::before { top: initial; bottom: -0.25em; } .nes-table.is-centered th { text-align: center; } .nes-table.is-bordered { margin: 4px; border-spacing: 0; border-collapse: separate; border-image-slice: 2; border-image-width: 2; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-table.is-bordered { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-table.is-bordered { border-image-repeat: stretch; } } .nes-table.is-dark { color: #fff; background-color: #212529; } .nes-table.is-dark.is-bordered { border-image-slice: 2; border-image-width: 2; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>'); border-image-outset: 0; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-table.is-dark.is-bordered { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-table.is-dark.is-bordered { border-image-repeat: stretch; } } .nes-table.is-dark th, .nes-table.is-dark td { border-color: #fff; } .nes-table.is-dark th::after, .nes-table.is-dark th::before, .nes-table.is-dark td::after, .nes-table.is-dark td::before { display: none; } .nes-table tbody tr:last-child th, .nes-table tbody tr:last-child td, .nes-table thead:last-child tr:last-child th, .nes-table thead:last-child tr:last-child td { border-bottom-width: 0; } .nes-table tbody tr:last-child th:first-child::after, .nes-table tbody tr:last-child th:last-child::before, .nes-table tbody tr:last-child td:first-child::after, .nes-table tbody tr:last-child td:last-child::before, .nes-table thead:last-child tr:last-child th:first-child::after, .nes-table thead:last-child tr:last-child th:last-child::before, .nes-table thead:last-child tr:last-child td:first-child::after, .nes-table thead:last-child tr:last-child td:last-child::before { display: none; } .nes-text.is-primary { color: #209cee; } .nes-text.is-success { color: #92cc41; } .nes-text.is-warning { color: #f7d51d; } .nes-text.is-error { color: #e76e55; } .nes-text.is-disabled { color: #d3d3d3; } .nes-input, .nes-textarea { border-image-slice: 2; border-image-width: 2; border-image-repeat: stretch; border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>'); border-image-outset: 2; width: calc(100% - 8px); padding: 0.5rem 1rem; margin: 4px; background-clip: padding-box; } @media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { .nes-input, .nes-textarea { border-image-repeat: space; } } @supports (-moz-appearance: meterbar) { .nes-input, .nes-textarea { border-image-repeat: stretch; } } .nes-input.is-dark, .nes-textarea.is-dark { border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>'); outline-color: #e7e7e7; color: #fff; background-color: #212529; } .nes-input.is-success, .nes-textarea.is-success { border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(146,204,65)" /></svg>'); outline-color: #76c442; } .nes-input.is-warning, .nes-textarea.is-warning { border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(247,213,29)" /></svg>'); outline-color: #f2c409; } .nes-input.is-error, .nes-textarea.is-error { border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(231,110,85)" /></svg>'); outline-color: #ce372b; } .nes-input.is-disabled, .nes-textarea.is-disabled { border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(211,211,211)" /></svg>'); outline-color: #adafbc; color: #d3d3d3; cursor: not-allowed; } .nes-field > label { display: block; } .nes-field .nes-input, .nes-field .nes-textarea { display: block; } .nes-field.is-inline { display: flex; align-items: center; } .nes-field.is-inline > label { flex-basis: 0; flex-grow: 1; margin: 0; margin-right: 1.5rem; text-align: right; } .nes-field.is-inline .nes-input, .nes-field.is-inline .nes-textarea { flex-basis: 0; flex-grow: 5; } @media screen and (max-width: 768px) { .nes-field.is-inline { display: block; } .nes-field.is-inline > label { margin-bottom: 0.5rem; text-align: left; } .nes-field.is-inline .nes-input { max-width: 100%; } } .nes-radio { margin-right: 20px; -webkit-appearance: none; appearance: none; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap; border: 0; } .nes-radio + span { position: relative; display: inline-flex; align-items: center; cursor: url() 14 0, pointer; } .nes-radio:checked + span::before { position: absolute; left: -20px; margin-top: -15px; content: ""; width: 2px; height: 2px; color: #212529; box-shadow: 2px 2px,4px 2px,2px 4px,4px 4px,6px 4px,8px 4px,2px 6px,4px 6px,6px 6px,8px 6px,10px 6px,2px 8px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,2px 10px,4px 10px,6px 10px,8px 10px,10px 10px,2px 12px,4px 12px,6px 12px,8px 12px,2px 14px,4px 14px; } @supports (-moz-appearance: meterbar) { .nes-radio:checked + span::before { box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } } .nes-radio:checked:hover + span::before, .nes-radio:checked:focus + span::before { animation: blink 1s infinite steps(1); } .nes-radio:checked:focus + span::before { width: 2px; height: 2px; color: #adafbc; box-shadow: 2px 2px,4px 2px,2px 4px,4px 4px,6px 4px,8px 4px,2px 6px,4px 6px,6px 6px,8px 6px,10px 6px,2px 8px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,2px 10px,4px 10px,6px 10px,8px 10px,10px 10px,2px 12px,4px 12px,6px 12px,8px 12px,2px 14px,4px 14px; } @supports (-moz-appearance: meterbar) { .nes-radio:checked:focus + span::before { box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } } .nes-radio.is-dark + span { color: #fff; } .nes-radio.is-dark + span::before { /* stylelint-disable-line no-descending-specificity */ color: #fff; } .nes-radio.is-dark:checked + span::before { width: 2px; height: 2px; color: #adafbc; box-shadow: 2px 2px,4px 2px,2px 4px,4px 4px,6px 4px,8px 4px,2px 6px,4px 6px,6px 6px,8px 6px,10px 6px,2px 8px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,2px 10px,4px 10px,6px 10px,8px 10px,10px 10px,2px 12px,4px 12px,6px 12px,8px 12px,2px 14px,4px 14px; color: #fff; } @supports (-moz-appearance: meterbar) { .nes-radio.is-dark:checked + span::before { box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } } .nes-radio.is-dark:checked:focus + span::before { width: 2px; height: 2px; color: #adafbc; box-shadow: 2px 2px,4px 2px,2px 4px,4px 4px,6px 4px,8px 4px,2px 6px,4px 6px,6px 6px,8px 6px,10px 6px,2px 8px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,2px 10px,4px 10px,6px 10px,8px 10px,10px 10px,2px 12px,4px 12px,6px 12px,8px 12px,2px 14px,4px 14px; color: #fff; } @supports (-moz-appearance: meterbar) { .nes-radio.is-dark:checked:focus + span::before { box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } } .nes-radio.is-disabled { /* stylelint-disable-next-line no-descending-specificity */ /* stylelint-disable-next-line no-descending-specificity */ } .nes-radio.is-disabled + span { color: #d3d3d3; cursor: not-allowed; } .nes-radio.is-disabled + span::before { color: #d3d3d3; cursor: not-allowed; } .nes-radio.is-disabled:checked:hover + span::before, .nes-radio.is-disabled:checked:focus + span::before { animation: unset; } .nes-radio.is-disabled:checked + span::before { width: 2px; height: 2px; color: #adafbc; box-shadow: 2px 2px,4px 2px,2px 4px,4px 4px,6px 4px,8px 4px,2px 6px,4px 6px,6px 6px,8px 6px,10px 6px,2px 8px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,2px 10px,4px 10px,6px 10px,8px 10px,10px 10px,2px 12px,4px 12px,6px 12px,8px 12px,2px 14px,4px 14px; color: #d3d3d3; } @supports (-moz-appearance: meterbar) { .nes-radio.is-disabled:checked + span::before { box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } } .nes-radio.is-disabled:checked:focus + span::before { width: 2px; height: 2px; color: #adafbc; box-shadow: 2px 2px,4px 2px,2px 4px,4px 4px,6px 4px,8px 4px,2px 6px,4px 6px,6px 6px,8px 6px,10px 6px,2px 8px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,2px 10px,4px 10px,6px 10px,8px 10px,10px 10px,2px 12px,4px 12px,6px 12px,8px 12px,2px 14px,4px 14px; color: #d3d3d3; } @supports (-moz-appearance: meterbar) { .nes-radio.is-disabled:checked:focus + span::before { b