UNPKG

smartdown

Version:

A library for translating, rendering and interacting with Smartdown documents. Smartdown is an extension of Markdown that provides richer media support and reactive programming capability.

1,575 lines (1,544 loc) 49.2 kB
/*!*************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!../node_modules/highlight.js/styles/default.css ***! \*************************************************************************************************************************************************************************************/ pre code.hljs { display: block; overflow-x: auto; padding: 1em; } code.hljs { padding: 3px 5px; } /*! Theme: Default Description: Original highlight.js style Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org> Maintainer: @highlightjs/core-team Website: https://highlightjs.org/ License: see project LICENSE Touched: 2021 */ /* This is left on purpose making default.css the single file that can be lifted as-is from the repository directly without the need for a build step Typically this "required" baseline CSS is added by `makestuff.js` during build. */ pre code.hljs { display: block; overflow-x: auto; padding: 1em; } code.hljs { padding: 3px 5px; } /* end baseline CSS */ .hljs { background: #F3F3F3; color: #444; } /* Base color: saturation 0; */ .hljs-subst { /* default */ } /* purposely ignored */ .hljs-comment { color: #697070; } .hljs-tag, .hljs-punctuation { color: rgba(68,68,68,0.66667); } .hljs-tag .hljs-name, .hljs-tag .hljs-attr { color: #444; } .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta .hljs-keyword, .hljs-doctag, .hljs-name { font-weight: bold; } /* User color: hue: 0 */ .hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: #880000; } .hljs-title, .hljs-section { color: #880000; font-weight: bold; } .hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-operator, .hljs-selector-pseudo { color: #ab5656; } /* Language color: hue: 90; */ .hljs-literal { color: #695; } .hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition { color: #397300; } /* Meta color: hue: 200 */ .hljs-meta { color: #1f7199; } .hljs-meta .hljs-string { color: #38a; } /* Misc effects */ .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } /*!**************************************************************************************************************************************************!*\ !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/postcss-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./styles.css ***! \**************************************************************************************************************************************************/ .smartdown-outer-container { margin: 0; padding: 0 10px; background: #fafaff; } @media (min-width: 800px) { .smartdown-outer-container { margin: auto; width: 90%; } } @media (min-width: 1200px) { .smartdown-outer-container { margin: auto; width: 80%; } } .smartdown-container { border: 1px solid transparent; box-sizing: border-box; background: #fafaff; margin: 0; padding: 4px 8px; font-family: 'Asap', san-serif; font-size: 18px; line-height: 1.4; /* 1.42857143; */ overflow-x: visible; overflow-y: visible; resize: vertical; width: 100%; height: auto; max-width: 100%; max-height: 100%; /* word-break: break-all; */ word-wrap: break-word; display: inline-block; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .smartdown-container span.smartdown-swatch, .smartdown-container div.smartdown-swatch { vertical-align: middle; display: inline-block; height: 1.3em; width: 1.3em; xborder: 1px dotted gray; margin: 0 1px; } .smartdown-container br.smartdown_br { display: block; /* makes it have a width */ content: ""; /* clears default height */ margin: 5px 0 5px 0; padding: 0; } .smartdown-container blockquote br.smartdown_br { margin: 7px 0 7px 0; } .smartdown-container p.smartdown_p { margin: 4px 0 15px 0; padding: 0 0 0 0; } .smartdown-container p.smartdown_p_inline { margin: 4px 0 15px 0; padding: 0 0 0 0; display: inline; vertical-align: top; } .smartdown-container blockquote { margin: 0 0 0 5px; padding: 2px 5px 2px 12px; border: 2px solid #ddd; font-size: 1em; border-radius: 10px; border-right: none; border-top: none; border-bottom: transparent; } .smartdown-container h1, .smartdown-container h2, .smartdown-container h3, .smartdown-container h4, .smartdown-container h5, .smartdown-container h6, .smartdown-container .h1, .smartdown-container .h2, .smartdown-container .h3, .smartdown-container .h4, .smartdown-container .h5, .smartdown-container .h6 { font-weight: 500; text-transform: none; text-transform: initial; color: inherit; font-family: 'Asap', san-serif; line-height: unset; text-indent: -8px; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .smartdown-container h1, .smartdown-container .h1, .smartdown-container h2, .smartdown-container .h2, .smartdown-container h3, .smartdown-container .h3 { margin-top: 16px; margin-bottom: 10px; } .smartdown-container h4, .smartdown-container .h4, .smartdown-container h5, .smartdown-container .h5, .smartdown-container h6, .smartdown-container .h6 { margin-top: 12px; margin-bottom: 5px; } .smartdown-container h1, .smartdown-container .h1 { font-size: 2em; } .smartdown-container h2, .smartdown-container .h2 { font-size: 1.8em; } .smartdown-container h3, .smartdown-container .h3 { font-size: 1.6em; } .smartdown-container h4, .smartdown-container .h4 { font-size: 1.4em; } .smartdown-container h5, .smartdown-container .h5 { font-size: 1.2em; } .smartdown-container h6, .smartdown-container .h6 { font-size: 1em; } .smartdown-container a.smartdown-h-anchor { text-decoration: none; vertical-align: text-top; font-size: 0.5em; opacity: 0; margin: 0 0 0 0.5em; } .smartdown-container :hover > a.smartdown-h-anchor { text-decoration: none; opacity: 1; } .smartdown-container hr { height: 0; box-sizing: content-box; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .smartdown-container .playable-bottom-spacer { margin: 0; padding: 0; background: transparent; height: 1px; width: 100%; } .smartdown-container p { margin: 0; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .smartdown-container a { font-size: 1.05em; color: #337ab7; text-decoration: none; word-break: break-all; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .smartdown-container a:hover, .smartdown-container a:focus { color: #23527c; text-decoration: underline; } .smartdown-container a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .smartdown-container pre { display: block; padding: 0; margin: 0 0 10px; font-size: inherit; line-height: 1.2; color: inherit; word-wrap: break-word; white-space: pre-wrap; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .smartdown-container code { word-wrap: break-word; white-space: pre-wrap; font-size: inherit; xborder: 1px solid red; background: #EEEEEE; padding: 3px 0; font-family: 'Ubuntu Mono', monospace; font-weight: 500; } .smartdown-container code.hljs-inline { background: #F0F0F0; padding: 2px 4px; } .smartdown-container pre > code { font-size: inherit !important; line-height: inherit !important; display: block; } .smartdown-container .pre-scrollable { max-height: 340px; overflow-y: scroll; } .smartdown-container input[type="radio"], .smartdown-container input[type="checkbox"] { margin: 5px !important; vertical-align: middle !important; } .smartdown-container input[type="checkbox"].smartdown-checkbox { margin: 5px 10px !important; transform: scale(2); } smartdown-checkbox .smartdown-container input[type="range"] { display: inline-block; } .smartdown-container .infocell-group-btn { position: relative; font-size: 0; white-space: nowrap; } .smartdown-container .infocell-group-btn > .btn { position: relative; } .smartdown-container .infocell-group-btn > .btn + .btn { margin-left: -1px; } .smartdown-container .infocell-group-btn > .btn:hover, .smartdown-container .infocell-group-btn > .btn:focus, .smartdown-container .infocell-group-btn > .btn:active { z-index: 2; } .smartdown-container .infocell-group-btn :first-child > .btn, .smartdown-container .infocell-group-btn :first-child > .btn-group { margin-right: -1px; } .smartdown-container .infocell-group-btn :last-child > .btn, .smartdown-container .infocell-group-btn :last-child > .btn-group { z-index: 2; margin-left: -1px; } .smartdown-container .smartdown-playable { display: none; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } .smartdown-container .smartdown-playable.smartdown-stdlib > svg { margin: auto; display: block; } .smartdown-container .smartdown-playable:empty { height: 2px; background: transparent; } .smartdown-container .smartdown-graphviz { overflow-x: auto; overflow-y: auto; width: unset; height: unset; text-align: center; } .smartdown-container .smartdown-graphviz svg { margin: auto; width: unset; height: unset; max-width: 100%; max-height: 100%; } .smartdown-container .smartdown-json { width: 100%; } .smartdown-container .infocell-output.smartdown-markdown { xwidth: 100%; padding: 0; } .smartdown-container .abc-wrapper, .smartdown-container .infocell-output .abc-wrapper { background: ivory; margin: 0 !important; width: 100%; } .smartdown-container .smartdown-abc, .smartdown-container .infocell-output.smartdown-abc { width: 100%; } .smartdown-container .smartdown-abcsheet, .smartdown-container .infocell-output .smartdown-abcsheet { width: 100%; } .smartdown-container .smartdown-abcmidi, .smartdown-container .infocell-output .smartdown-abcmidi { width: 100%; } .smartdown-container .smartdown-mermaid { background: white; overflow-x: auto; overflow-y: auto; width: unset; height: unset; text-align: center; } .smartdown-container .smartdown-mermaid svg { margin: auto; width: unset; height: unset; max-width: 100%; max-height: 100%; } .smartdown-container .smartdown-plotly { width: 100%; height: 100%; resize: vertical; overflow-y: visible; } .smartdown-container .smartdown-plotly:empty { display: none; } .smartdown-container .smartdown-leaflet { width: 100%; min-height: 300px; height: 100%; resize: vertical; overflow-y: visible; } .smartdown-container .smartdown-leaflet:empty { display: none; } /* disable selection/Copy of UIWebView */ /* disable the IOS tooltip when long-press on a link */ /* .smartdown-plotly *:not(input):not(textarea) { -webkit-user-select: none; -webkit-touch-callout: none; border:1px solid red; } */ .smartdown-container .playable-wrapper-wrapper { margin: 0; padding: 0; display: block; width: 100%; text-align: center; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper { padding: 0; margin: 0; width: 100%; display: inline-block; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper > * { text-align: left; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper > button.playable-button { text-align: center; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper .playable-buttons { position: relative; padding: 0; margin: 0; line-height: 1em; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper button.kiosk-button { display: none; background: white; margin: 0; padding: 0 2px 4px 2px; line-height: 0; z-index: 500; position: absolute; top: 0; right: 0; width: 20px; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper button.kiosk-button > span { color: lightblue; vertical-align: middle; line-height: 12px; font-size: 14px; font-weight: 600; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper.playable-playing button.kiosk-button { display: block; } .smartdown-container .playable-wrapper-wrapper .playable-wrapper.smartdown-playable-kiosk.playable-playing { top: 0; left: 0; right: 10px !important; bottom: 0 !important; background: none; padding: 0; margin: 0; position: fixed; display: block; } .smartdown-container .playable-wrapper-wrapper-center { margin: 0; padding: 0; display: block; width: 100%; text-align: center; } .smartdown-container .playable-wrapper-wrapper-center .playable-wrapper { padding: 0; margin: 0; display: inline-block; } .smartdown-container .playable-wrapper-wrapper-center .playable-wrapper > * { text-align: left; } .smartdown-container .playable-wrapper-wrapper-center .playable-wrapper > button.playable-button { text-align: center; } .smartdown-container .inline-target-div { border: none; display: inline; margin: 0; padding: 0; } .smartdown-container .playable-wrapper-wrapper-inline { /*margin: auto !important;*/ padding: 0; display: inline-block; vertical-align: top; } .smartdown-container .playable-wrapper-wrapper-inline .playable-wrapper { padding: 0; margin: auto !important; width: auto !important; width: initial !important; display: inline-block; } .smartdown-container h1, .smartdown-container h2, .smartdown-container h3, .smartdown-container h4, .smartdown-container h5, .smartdown-container h6, .smartdown-container .h1, .smartdown-container .h2, .smartdown-container .h3, .smartdown-container .h4, .smartdown-container .h5, .smartdown-container .h6 { font-family: 'Asap', san-serif; } .smartdown-container .btn { text-transform: none; } .smartdown-container .btn-infocell { line-height: 1em; display: inline-block; margin: 0 4px 0 4px; padding: 3px 5px; font-family: 'Asap', san-serif; font-size: 0.9em; font-weight: 500; text-align: center; white-space: nowrap; vertical-align: text-bottom; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-image: linear-gradient(white 0px, #eaeaea 100%); border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc; max-width: 100%; width: auto; } .smartdown-container .btn-infocell:focus, .smartdown-container .btn-infocell:active:focus, .smartdown-container .btn-infocell.active:focus, .smartdown-container .btn-infocell.focus, .smartdown-container .btn-infocell:active.focus, .smartdown-container .btn-infocell.active.focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .smartdown-container .btn-infocell:hover, .smartdown-container .btn-infocell:focus, .smartdown-container .btn-infocell.focus { color: #333; text-decoration: none; } .smartdown-container .btn-infocell:hover { color: #333; background-color: #eaeaea; background-image: none; border-color: #adadad; } .smartdown-container .btn-infocell:focus, .smartdown-container .btn-infocell.focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; } .smartdown-container .btn-infocell:active, .smartdown-container .btn-infocell.active { background-image: none; outline: 0; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .smartdown-container .btn-infocell:active, .smartdown-container .btn-infocell.active, .open > .dropdown-toggle.smartdown-container .btn-infocell { color: #333; background-color: #e6e6e6; border-color: #adadad; } .smartdown-container .btn-infocell:active:hover, .smartdown-container .btn-infocell.active:hover, .open > .dropdown-toggle.smartdown-container .btn-infocell:hover, .smartdown-container .btn-infocell:active:focus, .smartdown-container .btn-infocell.active:focus, .open > .dropdown-toggle.smartdown-container .btn-infocell:focus, .smartdown-container .btn-infocell:active.focus, .smartdown-container .btn-infocell.active.focus, .open > .dropdown-toggle.smartdown-container .btn-infocell.focus { color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } .smartdown-container .btn-infocell.disabled, .smartdown-container .btn-infocell[disabled], fieldset[disabled] .smartdown-container .btn-infocell { cursor: not-allowed; filter: alpha(opacity=65); box-shadow: none; opacity: .65; } a.smartdown-container .btn-infocell.disabled, fieldset[disabled] a.smartdown-container .btn-infocell { pointer-events: none; } .smartdown-container .btn-infocell:active, .smartdown-container .btn-infocell.active, .open > .dropdown-toggle.smartdown-container .btn-infocell { background-image: none; } .smartdown-container .btn-infocell.disabled:hover, .smartdown-container .btn-infocell[disabled]:hover, fieldset[disabled] .smartdown-container .btn-infocell:hover, .smartdown-container .btn-infocell.disabled:focus, .smartdown-container .btn-infocell[disabled]:focus, fieldset[disabled] .smartdown-container .btn-infocell:focus, .smartdown-container .btn-infocell.disabled.focus, .smartdown-container .btn-infocell[disabled].focus, fieldset[disabled] .smartdown-container .btn-infocell.focus { background-color: #fff; border-color: #ccc; } .smartdown-container .btn-infocell img { display: block; margin: 0; padding: 0; max-height: 100%; max-width: 100%; width: auto; height: auto; } .smartdown-container .disclosable-trigger-tooltip-wrapper { display: inline; padding: 15px; margin: -15px; } .smartdown-container .disclosable-trigger-tooltip-wrapper .disclosable-trigger-tooltip { display: inline-block; color: #639ad7; } .smartdown-container .disclosable-trigger-tooltip-wrapper .disclosable-trigger-tooltip:hover { text-decoration: none; color: #337ab7; font-weight: bold; } .smartdown-container .disclosable-wrapper { display: none; overflow: visible; margin: 0; padding: 0; background: none; /*border: 2px solid magenta !important;*/ } .smartdown-container .disclosable-wrapper.disclosable-open { display: inline-block; animation: fadeIn 2s; } .smartdown-container .disclosable-wrapper.disclosable-tooltip div.resp-iframe-container { background: white; height: 60vh; min-height: 400px; margin: 0; padding: 0; } .smartdown-container .disclosable-wrapper.disclosable-shadow { /*border-radius: 10px;*/ } .smartdown-container .disclosable-wrapper.disclosable-lightbox { outline: 9999px solid rgba(0, 0, 0, 0.5); background: white; } .smartdown-container .disclosable-wrapper .disclosable-content { margin: 0; padding: 10px 10px 10px 15px; background: aliceblue; /* floralwhite */ border: 2px solid transparent; /*width: 100%;*/ } .smartdown-container .disclosable-wrapper .disclosable-content.disclosable-outline-content { border: 2px solid lightgray; border-radius: 11.5px; } .smartdown-container .disclosable-wrapper .disclosable-content.disclosable-outline-draggable-content { /* background: white; padding: 0; margin: 0; border: 2px solid gray; border-radius: 10px; */ } .smartdown-container .disclosable-wrapper .disclosable-content.disclosable-shadow-content { border-radius: 10px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); } .smartdown-container .disclosable-wrapper .disclosable-content.disclosable-transparent-content { background: none; padding: 0; } .smartdown-container .disclosable-wrapper .disclosable-content.disclosable-lightbox-content { border-radius: 0; } .smartdown-container .disclosable-wrapper .disclosable-content.disclosable-scrollable-content { height: 50%; resize: both; overflow: auto; } .smartdown-container .disclosable-wrapper.disclosable-attach { position: absolute; z-index: 100; background: none; overflow: visible; font-size: 0.95em; max-width: 60%; } .smartdown-container .disclosable-wrapper.disclosable-position { position: fixed; padding: 0; z-index: 1050; max-width: 90%; max-height: 90%; /*border: none;*/ } .smartdown-container .disclosable-wrapper.disclosable-position .disclosable-header { background: #CCC; margin: 0; padding: 0 0 1px 0; line-height: 0; border-radius: 5px; border: 1px solid #AAA; display: none; } .smartdown-container .disclosable-wrapper.disclosable-position .disclosable-header.disclosable-header-position { display: block; min-width: 200px; min-height: 22px; } .smartdown-container .disclosable-wrapper.disclosable-position .disclosable-header button.disclosable-button-close { background: #CCC; border-radius: 2px; border: none; height: 22px; line-height: 0; cursor: pointer; font-size: 16px; font-weight: 600; margin: 0 0 0 8px; padding: 4px 4px 4px 4px; } .smartdown-container .disclosable-wrapper.disclosable-position .disclosable-header button.disclosable-button-close:hover { background: #AAA; } .smartdown-container .disclosable-wrapper.disclosable-position.disclosable-scrollable { height: 50%; resize: both; overflow: auto; } @media (min-width: 800px) { .smartdown-container .disclosable-attach { max-width: 66%; } } .smartdown-container .decoration-outlinebox { display: block; color: black; background: white; padding: 20px; margin: 0; border: 2px solid gray; border-radius: 10px; } .smartdown-container .decoration-colorbox { display: block; color: white; background: #67A; padding: 20px; margin: 0; border-radius: 10px; } .smartdown-container .decoration-partialborder { display: block; color: black; background: #EEF; border-top: double; border-bottom: double; padding: 20px; } .smartdown-container .decoration-aliceblue { display: block; animation: fadeIn 2s; background: aliceblue; padding: 5px 8px 5px 16px; margin: 0; border: 1px solid lightgray; border-radius: 8px; } /* Add animation (fade in the tooltip) */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .smartdown-container .infocell-group { position: relative; display: table; border-collapse: separate; padding: 0; margin: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: 2px solid transparent; border-radius: 3px; background: #fafaff; color: black; } .smartdown-container textarea.infocell-textarea { font-size: inherit; overflow: hidden; resize: vertical; border: 1px solid lightblue; margin: 0; padding: 1px 4px; vertical-align: middle; } .smartdown-container input.infocell-input { font-size: inherit; vertical-align: middle; border: 1px solid lightblue; padding: 1px 4px; } .smartdown-container .infocell-group textarea.infocell-textarea { float: left; height: 100%; width: 100%; } .smartdown-container .infocell-group textarea.infocell-textarea:focus { z-index: 3; } .smartdown-container .infocell-group input.infocell-input { float: left; height: 100%; width: 100%; } .smartdown-container .infocell-group input.infocell-input:focus { z-index: 3; } .smartdown-container .infocell-group-addon, .smartdown-container .infocell-group-btn { display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; } .smartdown-container .infocell-group-addon { padding: 2px 6px; font-size: inherit; font-weight: normal; line-height: 1; color: #555; text-align: center; background: transparent; border: 1px solid darkslateblue; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .smartdown-container .infocell-group-addon.infocell-group-inline { display: inline; margin: 0 10px 0 0; } .smartdown-container .infocell-label { display: inline-block; color: darkslateblue; word-break: break-all; word-wrap: break-word; font-weight: 500; margin: 0; padding: 0; border: 10px solid orange; } .smartdown-container .infocell-group .infocell-label { display: table-cell; height: 100%; width: 100%; border: none; } .smartdown-container .infocell-output { display: inline-block; -webkit-user-select: text; -moz-user-select: text; user-select: text; margin: 0; padding: 1px 0; } .smartdown-container .infocell-output.smartdown-svg { width: 100%; } .smartdown-container .infocell-output.smartdown-openjscad { width: 100%; } .smartdown-container .infocell-output.smartdown-code { width: 100% !important; max-width: 95vw !important; padding: 5px; } .smartdown-container .infocell-output.smartdown-flavor-pill { padding: 0.1em 0.6em; border-radius: 5em; border: 2px solid lightgray; } .smartdown-container .infocell-output.smartdown-flavor-red { background-color: rgba(255, 0, 0, 0.3); } .smartdown-container .infocell-output.smartdown-flavor-green { background-color: rgba(0, 128, 0, 0.3); } .smartdown-container .infocell-output.smartdown-flavor-blue { background-color: rgba(0, 0, 255, 0.3); } .smartdown-container .infocell-output.smartdown-flavor-orange { background-color: rgba(255, 165, 0, 0.3); } .smartdown-container .infocell-output.smartdown-flavor-gold { background-color: rgba(255, 215, 0, 0.3); } .smartdown-container .infocell-group .infocell-output { display: table-cell; height: 100%; width: 100%; xborder: none; } .smartdown-container .infocell-output-pre { max-height: 40vh; display: block; border: 1px solid lightgray; font-size: 0.9em; color: black; resize: both; overflow-y: scroll; overflow-x: scroll; margin: 0; padding: 5px 10px; font-family: 'Ubuntu Mono', monospace; font-weight: 500; } .smartdown-container .infocell-output-list .infocell-output-pre { height: 100%; } .smartdown-container .infocell-output-pre:empty { height: 10px; background: lightgray; } .smartdown-container ul.infocell-output-list { list-style-type: none; height: auto; max-height: 400px; max-width: 100%; width: auto; overflow-y: scroll; border: none; padding: 0; } .smartdown-container ul.infocell-output-list > li { margin: 0; padding: 0; } .smartdown-container ul.infocell-output-list pre { font-size: 0.9em; } .smartdown-container ul > li > img { width: auto; height: auto; max-height: 100%; max-width: 100%; margin: auto; display: inline-block; } .smartdown-container img { display: inline-block; margin: auto; padding: 0; pointer-events: none; } .smartdown-container a > * { pointer-events: initial; } .smartdown-container .infocell-output > .smartdown_p { margin: 0; } .smartdown-container .smartdown_p > img, .smartdown-container .infocell-output td > img, .smartdown-container .smartdown_p > a > img { width: auto; height: auto; max-width: 100%; margin: auto; display: block; pointer-events: initial; } .smartdown-container .smartdown_p img.icon, .smartdown-container .infocell-output td > img.icon { width: 200px; } .smartdown-container .smartdown_p img.thumbnail, .smartdown-container .infocell-output td > img.thumbnail { width: 400px; } .smartdown-container .smartdown_p img.halfwidth, .smartdown-container .infocell-output td > img.halfwidth { width: 50%; max-height: unset; } .smartdown-container .smartdown_p img.fullwidth, .smartdown-container .infocell-output td > img.fullwidth { width: 100%; max-height: unset; } .smartdown-container div.media-image svg, .smartdown-container img.media-image svg { height: 100px; max-width: 100%; } .smartdown-container button div.media-image svg, .smartdown-container button img.media-image svg { height: 100px; width: auto; } .smartdown-container div.media-image path, .smartdown-container img.media-image path { fill: #EEE; stroke: black; stroke-width: 5px; } .smartdown-container div.media-image svg:hover path, .smartdown-container img.media-image svg:hover path { cursor: pointer; fill: rgba(200, 200, 200, 0.8); stroke: royalblue; } div.media-image path, img.media-image path { fill: #EEE; stroke: black; stroke-width: 5px; } .smartdown-container ul, .smartdown-container ol { list-style-position: inside; margin: 0; padding: 4px 0 4px 8px; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .smartdown-container ul { list-style-type: square; } .smartdown-container ul li, .smartdown-container ol li { padding: 0 3px; } .smartdown-container ul li .infocell-group { display: inline-table; width: 95%; margin: 0; padding: 0; } .smartdown-container table, .smartdown-container .markdown table { margin: auto; padding: 0; -webkit-user-select: text; -moz-user-select: text; user-select: text; } .smartdown-container table thead tr th, .smartdown-container .markdown table thead tr th { text-align: center; } .smartdown-container table thead tr th, .smartdown-container .markdown table thead tr th, .smartdown-container table tbody tr td, .smartdown-container .markdown table tbody tr td { margin: 0; padding: 2px 4px; border: 1px solid lightgray; vertical-align: text-bottom; } .smartdown-container table td[align="left"] { text-align: left; } .smartdown-container table td[align="right"] { text-align: right; } .smartdown-container table td[align="center"] { text-align: center; } .smartdown-container div.media-image { display: inline-block; } .smartdown-container div.media-image.clockwise { animation-name: clockwise; animation-duration: 15.5s; animation-iteration-count: infinite; transform-origin: 50% 50%; } .smartdown-container div.media-image.cclockwise { animation-name: cclockwise; animation-duration: 15.5s; animation-iteration-count: infinite; transform-origin: 50% 50%; } .smartdown-container div.media-image.pulse { animation-name: pulse; animation-duration: 10s; animation-iteration-count: infinite; transform-origin: 50% 50%; } .smartdown-container div.media-image.bluegreen svg path { fill: lightblue !important; stroke: green !important; } @keyframes clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes cclockwise { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(1); } } .smartdown-container node polygon { fill: red !important; stroke: green !important; } .smartdown-container node { fill: red !important; stroke: green !important; } .smartdown-container .smartdown-mermaid.mermaid g.label, .smartdown-container .smartdown-mermaid.mermaid g.cluster text, .smartdown-container .smartdown-mermaid.mermaid g.grid g.tick text, .smartdown-container .smartdown-mermaid.mermaid text.sectionTitle, .smartdown-container .smartdown-mermaid.mermaid text.actor, .smartdown-container .smartdown-mermaid.mermaid text.messageText, .smartdown-container .smartdown-mermaid.mermaid text.noteText { fill: black; font-size: 16px; font-weight: 500; } .smartdown-container .smartdown-mermaid.mermaid text.taskText, .smartdown-container .smartdown-mermaid.mermaid text.taskText.taskText0 { fill: black; font-size: 16px; font-weight: 500; } .smartdown-container .smartdown-mermaid.mermaid text.taskTextOutsideRight, .smartdown-container .smartdown-mermaid.mermaid text.taskTextOutside2 { fill: darkslateblue; font-size: 14px; font-weight: 400; } .smartdown-container table img { max-width: 100%; max-height: 100%; } .smartdown-container .btn-mobile-button { background: white; margin: 0; padding: 1px; position: absolute; font-weight: 600; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } .smartdown-container .btn-mobile-button * { margin: 0; padding: 1px; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } .smartdown-container div.playable-source.playable-autoplay { display: none; } .smartdown-container pre.playable-debug-source { display: none; height: 300px; width: auto; overflow-y: scroll; resize: vertical; border: 2px solid steelblue; } .smartdown-container pre.playable-debug-source code { word-wrap: break-word; white-space: pre-wrap; vertical-align: top; } .smartdown-container pre.playable-debug-source.hidden { display: none; } .smartdown-container .playable-console-button { border: none; border-radius: 5px; width: 100%; height: 16px; margin: 1px 0; padding: 1px 5px; background: lightsteelblue; line-height: 0; color: black; font-size: 12px; font-weight: 500; } .smartdown-container div.playable-console { resize: vertical; height: 40px; display: none; border: 2px solid lightsteelblue; background: #F0F0F0; overflow-y: scroll; } .smartdown-container div.playable-console > pre { padding: 5px 10px; font-size: 0.8em; vertical-align: top; } .smartdown-container button.playable-button { display: inline-block; margin: auto; font-size: 12px; font-weight: 600; vertical-align: top; white-space: nowrap; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: #dbe4f0; border: none; border-radius: 4px; height: 20px; width: 100%; color: dimgray; } .smartdown-container button.playable-button:focus, .smartdown-container button.playable-button:active:focus, .smartdown-container button.playable-button.active:focus, .smartdown-container button.playable-button.focus, .smartdown-container button.playable-button:active.focus, .smartdown-container button.playable-button.active.focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .smartdown-container button.playable-button:hover, .smartdown-container button.playable-button:focus, .smartdown-container button.playable-button.focus { color: #333; text-decoration: none; } .smartdown-container button.playable-button:active, .smartdown-container button.playable-button.active { outline: 0; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .smartdown-container button.playable-button.disabled, .smartdown-container button.playable-button[disabled], .smartdown-container fieldset[disabled] button.playable-button { cursor: not-allowed; filter: alpha(opacity=50); box-shadow: none; opacity: .50; } .smartdown-container .api-button { border: none; border-radius: 5px; height: 20px; background: black; color: orange; font-size: 10px; } .smartdown-container .playable-debug-button { border: none; border-radius: 5px; width: 100%; height: 16px; margin: 1px 0; padding: 1px 5px; background: steelblue; line-height: 0; color: white; font-size: 12px; font-weight: 500; } .smartdown-container .video-container { position: relative; overflow: hidden; height: 0; background: black; } .smartdown-container .video-container.youtube.thumbnail { width: 426px; height: 240px; /*width: 426px;*/ /*height: 240px;*/ padding: 0; } .smartdown-container .video-container.youtube.thumbnail iframe { width: 426px; height: 240px; } .smartdown-container .video-container.youtube.halfwidth { width: 640px; height: 360px; padding: 0; } .smartdown-container .video-container.youtube.halfwidth iframe { width: 640px; height: 360px; } .smartdown-container .video-container.youtube.fullwidth { padding-bottom: 56.25%; /* 16:9 */ } .smartdown-container .video-container.youtube.fullwidth iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .smartdown-container .video-container.vimeo.thumbnail { width: 320px; height: 180px; padding: 0; } .smartdown-container .video-container.vimeo.thumbnail iframe { width: 320px; height: 180px; } .smartdown-container .video-container.vimeo.fullwidth { padding-bottom: 56.25%; /* 16:9 */ } .smartdown-container .video-container.vimeo.fullwidth iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ----------------------------------------------------- Pure CSS Progress Bars GitHub Project: https://github.com/rkchauhan/pure-css-progress-bars/ By: Ravikumar Chauhan Find me on - Twitter: https://twitter.com/rkchauhan01 Facebook: https://www.facebook.com/ravi032chauhan GitHub: https://github.com/rkchauhan CodePen: http://codepen.io/rkchauhan -------------------------------------------------------- */ /* ----------------------------------------------------- CSS Progress Bars -------------------------------------------------------- */ .smartdown-container .smartdown-progress { width: 100%; height: 14px; position: relative; display: none; background-color: #EEE; } .smartdown-container .smartdown-progress .smartdown-progress-bar { display: block; float: left; width: 0%; height: 100%; background: #3798d9; border-radius: 9px; transition: width 0.8s ease-in-out; } .smartdown-container .smartdown-progress .smartdown-progress-label { position: absolute; overflow: hidden; left: 0px; right: 0px; color: rgba(0, 0, 0, 0.6); font-size: 0.7em; text-align: center; text-shadow: 0px 1px rgba(0, 0, 0, 0.3); } .smartdown-container .smartdown-progress .smartdown-progress-active { background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.125) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.125) 50%, rgba(255, 255, 255, 0.125) 75%, transparent 75%, transparent); background-size: 35px 35px; } .smartdown-container .smartdown-progress .smartdown-progress-active { animation: smartdown-progressActive 2s linear infinite; } @keyframes smartdown-progressActive { 0% { background-position: 0 0; } 100% { background-position: 35px 35px; } } .smartdown-container .smartdown-progress.smartdown-progress-inline .smartdown-progress-active { animation: smartdown-progressActive 2s linear infinite; } /*https://www.thecssninja.com/css/pointer-events-60fps*/ .disable-hover, .disable-hover * { pointer-events: none !important; } .disable-hover .smartdown-container a.smartdown-link, .disable-hover .smartdown-container button.btn-infocell, .disable-hover .smartdown-container button.api-button, .disable-hover .smartdown-container button.playable-debug-button, .disable-hover .smartdown-container button.playable-button, .disable-hover .smartdown-container button.btn-infocell, .disable-hover .smartdown-container input, .disable-hover .smartdown-container textarea, .disable-hover .smartdown-container audio { pointer-events: none !important; opacity: 0.8 !important; } .disable-hover .smartdown-container .gifffer-container, .disable-hover .smartdown-container .video-container, .disable-hover .smartdown-container .twitter-tweet, .disable-hover .smartdown-container .playable-wrapper, .disable-hover .smartdown-container .smartdown-playable { pointer-events: none !important; } .smartdown-container table { border-spacing: 0; border-collapse: collapse; width: 100%; } .smartdown-container td, .smartdown-container th { padding: 0; } .smartdown-container div audio { display: inline-block; } .smartdown-container .MathJax_Display { padding: 10px 0; overflow-x: auto !important; overflow-y: auto !important; } .smartdown-container div.resp-iframe-container { position: relative; overflow: hidden; padding-top: 100%; height: 0; } .smartdown-container div.resp-iframe-container > iframe { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; border: 0; } @media (min-width: 800px) { .smartdown-container { font-size: 21px; line-height: 1.5; /* 1.42857143; */ } .smartdown-container h1, .smartdown-container .h1, .smartdown-container h2, .smartdown-container .h2, .smartdown-container h3, .smartdown-container .h3 { margin-top: 30px; margin-bottom: 15px; } .smartdown-container h4, .smartdown-container .h4, .smartdown-container h5, .smartdown-container .h5, .smartdown-container h6, .smartdown-container .h6 { margin-top: 20px; margin-bottom: 10px; } .smartdown-container table thead tr th, .smartdown-container .markdown table thead tr th, .smartdown-container table tbody tr td, .smartdown-container .markdown table tbody tr td { padding: 3px 6px; } } /* smartdown-theme-dark theme */ .smartdown-theme-dark .smartdown-container .MathJax_Display svg { background: lightblue; } .smartdown-outer-container.smartdown-theme-dark { background: #2E2E2E; } .smartdown-outer-container.smartdown-theme-dark .smartdown-container div.playable-console { background: inherit; color: lightgreen; } .smartdown-outer-container.smartdown-theme-dark .smartdown-container a:hover, .smartdown-outer-container.smartdown-theme-dark .smartdown-container a:focus { color: #539ad7; } .smartdown-outer-container.smartdown-theme-dark code { background: #444444; } .smartdown-outer-container.smartdown-theme-dark .smartdown-container .infocell-output, .smartdown-outer-container.smartdown-theme-dark .smartdown-container .infocell-output-pre { xbackground: #2E2E2E; color: #EBEBEB; } .smartdown-outer-container.smartdown-theme-dark .hljs, .smartdown-outer-container.smartdown-theme-dark .smartdown-container .hljs { background: palegoldenrod; color: black; } .smartdown-outer-container.smartdown-theme-dark .smartdown-container .disclosable-wrapper .disclosable-content { background: black !important; } .smartdown-outer-container.smartdown-theme-dark .smartdown-container .infocell-group { background: #2E2E2E; color: black; } .smartdown-theme-dark .smartdown-container { background: #2E2E2E; color: #EBEBEB; } .smartdown-theme-dark .smartdown-container pre > code { color: white; } .smartdown-theme-dark .smartdown-container pre > code, .smartdown-theme-dark .smartdown-container code.hljs-inline { background: palegoldenrod; color: black; } .smartdown-theme-dark .smartdown-container .json-formatter-row { background: lightgray; } .smartdown-theme-dark .smartdown-container .btn.btn-sm.btn-infocell { background: #444; text-shadow: none; color: #EFEFEF; } .smartdown-theme-dark .smartdown-container textarea.infocell-textarea { background: #444; color: #EBEBEB; } .smartdown-theme-dark .smartdown-container h1, .smartdown-theme-dark .smartdown-container h2, .smartdown-theme-dark .smartdown-container h3, .smartdown-theme-dark .smartdown-container h4, .smartdown-theme-dark .smartdown-container h5, .smartdown-theme-dark .smartdown-container h6 { color: #EBEBEB; } .smartdown-theme-dark .smartdown-container .infocell-label { color: #EBEBEB; } .smartdown-theme-dark .smartdown-container .btn-infocell { display: inline-block; padding: 3px 5px; margin-bottom: 0; background-image: linear-gradient(#7c7c7c 0px, #686868 100%); border: 1px solid transparent; color: #EBEBEB; } .smartdown-theme-dark .smartdown-container .decoration-aliceblue { display: block; animation: fadeIn 2s; background: aliceblue; padding: 5px 8px 5px 16px; margin: 0; border: 1px solid lightgray; border-radius: 8px; } .smartdown-theme-dark .smartdown-container .decoration-aliceblue .smartdown_p { color: black; } .smartdown-theme-dark .smartdown-container .decoration-outlinebox { display: block; color: black; background: darkgray; padding: 20px; margin: 0; border: 2px solid gray; border-radius: 10px; } /* Chat theme (aka Scape) */ .smartdown-outer-container.smartdown-theme-chat { margin: 0; } .smartdown-theme-chat .smartdown-container { margin: 0; background: #fbfbfe; padding: 2px 4px; font-family: 'Asap', san-serif; font-size: 16px; line-height: 1.35; /* 1.42857143; */ } .smartdown-theme-chat .smartdown-container h1, .smartdown-theme-chat .smartdown-container .h1, .smartdown-theme-chat .smartdown-container h2, .smartdown-theme-chat .smartdown-container .h2, .smartdown-theme-chat .smartdown-container h3, .smartdown-theme-chat .smartdown-container .h3 { margin-top: 15px; margin-bottom: 5px; } .smartdown-theme-chat .smartdown-container h4, .smartdown-theme-chat .smartdown-container .h4, .smartdown-theme-chat .smartdown-container h5, .smartdown-theme-chat .smartdown-container .h5, .smartdown-theme-chat .smartdown-container h6, .smartdown-theme-chat .smartdown-container .h6 { margin-top: 10px; margin-bottom: 5px; } .smartdown-theme-chat p.smartdown_p { margin: 5px 0; padding: 0 0 0 4px; } @media (min-width: 800px) { .smartdown-theme-chat .smartdown-container { font-size: 16px; line-height: 1.35; /* 1.42857143; */ } } /* Blog theme (for Celestial Toys) */ .smartdown-theme-blog .smartdown-container { margin: 0; background: #fbfbfe; padding: 2px 4px; font-family: 'Asap', san-serif; font-size: 18px; line-height: 1.29; /* 1.42857143; */ } .smartdown-theme-blog .smartdown-container h1, .smartdown-theme-blog .smartdown-container .h1, .smartdown-theme-blog .smartdown-container h2, .smartdown-theme-blog .smartdown-container .h2, .smartdown-theme-blog .smartdown-container h3, .smartdown-theme-blog .smartdown-container .h3 { margin-top: 12px; margin-bottom: 6px; } .smartdown-theme-blog .smartdown-container h4, .smartdown-theme-blog .smartdown-container .h4, .smartdown-theme-blog .smartdown-container h5, .smartdown-theme-blog .smartdown-container .h5, .smartdown-theme-blog .smartdown-container h6, .smartdown-theme-blog .smartdown-container .h6 { margin-top: 8px; margin-bottom: 4px; } .smartdown-theme-blog .smartdown-container table thead tr th, .smartdown-theme-blog .smartdown-container .markdown table thead tr th, .smartdown-theme-blog .smartdown-container table tbody tr td, .smartdown-theme-blog .smartdown-container .markdown table tbody tr td { padding: 1px 3px; } .smartdown-theme-blog .smartdown-container .btn-infocell { margin: 0 3px; padding: 2px 4px; } @media (min-width: 800px) { .smartdown-theme-blog .smartdown-container { font-size: 20px; line-height: 1.35; /* 1.42857143; */ } } /* Playful theme (aka XKCD) */ .smartdown-outer-container.smartdown-theme-playful { margin: 0; padding: 0; } .smartdown-theme-playful .smartdown-container { margin: 0; background: #fbfbfe; padding: 2px 4px; font-family: 'Neucha', san-serif; font-size: 18px; line-height: 1.35; /* 1.42857143; */ } .smartdown-theme-playful .smartdown-container h1, .smartdown-theme-playful .smartdown-container .h1, .smartdown-theme-playful .smartdown-container h2, .smartdown-theme-playful .smartdown-container .h2, .smartdown-theme-playful .smartdown-container h3, .smartdown-theme-playful .smartdown-container .h3 { margin-top: 15px; margin-bottom: 5px; font-family: 'Cabin Sketch', san-serif; } .smartdown-theme-playful .smartdown-container h4, .smartdown-theme-playful .smartdown-container .h4, .smartdown-theme-playful .smartdown-container h5, .smartdown-theme-playful .smartdown-container .h5, .smartdown-theme-playful .smartdown-container h6, .smartdown-theme-playful .smartdown-container .h6 { margin-top: 10px; margin-bottom: 5px; font-family: 'Cabin Sketch', san-serif; } .smartdown-theme-playful p.smartdown_p { margin: 5px 0; padding: 0 0 0 4px; } .smartdown-theme-playful .smartdown-container .btn-infocell { font-family: 'Neucha', san-serif; display: inline-block; margin: 1px 4px 1px 4px; padding: 3px 5px 0 5px; } @media (min-width: 800px) { .smartdown-theme-playful .smartdown-container { font-size: 20px; line-height: 1.45; /* 1.42857143; */ } } .openjscad-container { margin: 5px; } .openjscad-container .viewerDiv { width: 100%; height: 60vh; touch-action: none; } .openjscad-container .viewer-footer { border: 1px solid lightgray; border-radius: 4px; background: aliceblue; padding: 5px; } .openjscad-container .viewer-footer table.openjscad-parametersTable { line-height: 0.9; font-size: 0.8em; } /*# sourceMappingURL=smartdown.css.map*/