User:Thundercraft5/CodeFiddle.css

.code-fiddle { --code-fiddle-background: #0e191a; --code-fiddle-text-color: #e6e6e6; --code-fiddle--addressbar-background: #2c3536; --code-fiddle--header-font: normal 18px rubik, helvetica, arial, sans-serif; --code-fiddle-faint-shadow: box-shadow: 0 0 3px 0.5px black; --code-fiddle-box-border: 1px solid gray; /** Console Colors/Icons - Taken from Chrome DevTools, see license at https://github.com/ChromeDevTools/devtools-frontend/blob/master/LICENSE for the license */ --debug-text-color: hsl(220deg 100% 65%); --message-background-color: #242424; --message-border-color: rgb(58 58 58); --warning-border-color: rgb(102 85 0); --warning-background-color: hsl(50deg 100% 10%); --warning-text-color: rgb(255 221 158); --error-border-color: rgb(92 0 0); --error-background-color: hsl(0deg 100% 8%); --error-text-color: hsl(0deg 100% 75%); --info-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='160' width='160' version='1.0'%3E%3Cg fill='%234b4b4b'%3E%3Cpath d='m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z'/%3E%3Cpath d='m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z' transform='matrix(1.1989 0 0 1.2342 21.214 28.75)'/%3E%3Cpath d='m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105'/%3E%3C/g%3E%3C/svg%3E") no-repeat center; /* see https://en.m.wikipedia.org/wiki/File:Infobox_info_icon.svg, licensed under CC-BY-SA 3.0 */ --warning-icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wICg0MDM1YTRmYjQ5LCAyMDIwLTA1LTAxKSIKICAgc29kaXBvZGk6ZG9jbmFtZT0id2FybmluZ19pY29uLnN2ZyIKICAgaWQ9InN2ZzI3MDkiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDEwIDEwIgogICBoZWlnaHQ9IjEwbW0iCiAgIHdpZHRoPSIxMG1tIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMjcwMyIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzkxIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjU2MCIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtcm90YXRpb249IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJtbSIKICAgICBpbmtzY2FwZTpjeT0iMTQuMzQ2NTgxIgogICAgIGlua3NjYXBlOmN4PSIyOS40NDU4NTkiCiAgICAgaW5rc2NhcGU6em9vbT0iMTUuODM5MTkyIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGlkPSJiYXNlIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTI3MDYiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjcuNzgxMjMzLC02OC4yMjQ3MTkpIgogICAgIGlkPSJsYXllcjEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSI+CiAgICA8ZwogICAgICAgaWQ9Imc0NDQzIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4wMDAwMTI0LDAsMCwxLjAwMDAxMjQsLTI3Ljc4MTI5NSw2OC4yMjQ1OTUpIj4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9InN0cm9rZTojYzE5NjAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg0NDQ3IgogICAgICAgICBkPSJtIDYxLDkgNCwtOCA0LDggeiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwKSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9ImZpbGw6I2Y0YmQwMDtzdHJva2U6I2Y1YmQwMDtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg0NDQ5IgogICAgICAgICBkPSJtIDYxLDkgNCwtOCA0LDggeiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwKSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9ImZpbGw6I2FkODYwMSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg0NDUxIgogICAgICAgICBkPSJtIDYzLjc1LDIuNzUgaCAyLjUgdiAyLjUgTCA2NS43NSw3IGggLTEuNSBsIC0wLjUsLTEuNzUgdiAtMi41IG0gMCw1LjI1IGggMi41IHYgMS4yNSBoIC0yLjUiCiAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MCkiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIGlkPSJwYXRoNDQ1MyIKICAgICAgICAgZD0ibSA2NCwzIGggMiBWIDUuMjUgTCA2NS41LDcgaCAtMSBMIDY0LDUuMjUgViAzIG0gMCw1IGggMiB2IDEgaCAtMiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwKSIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=) no-repeat center; --error-icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDEwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjYuMSAoMjYzMTMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkdyb3VwPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUsOS42NCBDNy41Niw5LjY0IDkuNjQsNy41NiA5LjY0LDUgQzkuNjQsMi40NCA3LjU2LDAuMzYgNSwwLjM2IEMyLjQ0LDAuMzYgMC4zNiwyLjQ0IDAuMzYsNSBDMC4zNiw3LjU2IDIuNDQsOS42NCA1LDkuNjQgWiIgaWQ9InBhdGgzNzAxIiBmaWxsPSIjRUIzOTQxIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLDMgTDcsNyIgaWQ9InBhdGgzNzAzIiBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTcsMyBMMyw3IiBpZD0icGF0aDM3MDUiIHN0cm9rZT0iI0ZGRkZGRiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat center; }

.code-fiddle { background: var(--code-fiddle-background); color: var(--code-fiddle-text-color); display: flex; height: 100vh; overflow: hidden; }

.code-fiddle-sidebar { width: 47vw; min-width: 47vw !important; box-shadow: 0 0 8px black; }

body:not(.global-navigation-collapsed) .code-fiddle { margin-left: 65px; transition: margin-left 0.3s 0.65s; }

body.global-navigation-collapsed .code-fiddle { transition: margin-left 0.3s 0.01s; }

.code-fiddle-header h2 { padding: 8px; text-align: center; font: var(--code-fiddle--header-font); }

.code-fiddle-editor { height: -webkit-fill-available; width: -webkit-fill-available; display: flex; }

.code-fiddle-editor-wrapper { margin: 20px; width: -webkit-fill-available; display: flex; height: -webkit-fill-available; max-height: 86vh; border: var(--code-fiddle-box-border); }

.code-fiddle-addressbar { width: -webkit-fill-available; display: flex; align-content: center; align-items: center; border-radius: 5px; border: 1px solid var(--code-fiddle--addressbar-background); }

.code-fiddle-favicon > img { width: 20px; height: 20px; margin: auto; }

.code-fiddle-favicon { align-items: center; }

.code-fiddle-output-wrapper { margin: 20px; width: 50vw; }

.code-fiddle-favicon { width: 20px; height: 20px; align-items: center; display: flex; margin-right: 5px; }

.code-fiddle-wiki-wrapper { display: flex; align-items: center; padding: 5px; background: var(--code-fiddle--addressbar-background); margin-left: -2px; border-radius: 5px 0 0 5px; margin-top: -1px; margin-bottom: -2px; padding-top: 7px; }

.code-fiddle-input-wrapper { background: var(--code-fiddle-background); padding: 5px; width: -webkit-fill-available; max-width: 50vh; }

body.global-navigation-collapsed .nav-out .global-navigation__nav { display: none !important; }

.code-fiddle-input-wrapper > .oo-ui-widget input { height: 20px; padding: 5px; max-width: 100%; display: inline; }

.code-fiddle-input-wrapper > .oo-ui-widget { display: inline; }

.code-fiddle-input-wrapper .mw-widget-titleWidget-menu { margin-top: 2px; }

height: 125%; width: 125%; transform-origin: left top; transform: scale(0.8); margin-right: -20vw; display: flex; }
 * 1) code-fiddle-output-frame {

.code-fiddle-frame-wrapper { display: flex; height: 86vh; margin-top: 10px; border: var(--code-fiddle-box-border); box-shadow: var(--code-fiddle-faint-shadow); }

.code-fiddle-output-wrapper > div { align-items: center; }

.code-fiddle-output-header-wrapper { display: flex; margin-bottom: 6px; }

h2.code-fiddle-output-header { margin: auto; font: var(--code-fiddle--header-font); }

.code-fiddle-frame-overlay.error > .code-fiddle-frame-spinner { display: none; }

.code-fiddle-frame-overlay:not(.error) > .code-fiddle-frame-error { display: none; }

.code-fiddle-frame-spinner { margin: auto; width: 40px; height: 40px; }

.code-fiddle-frame-overlay { background: var(--code-fiddle--addressbar-background); z-index: 1; display: flex; width: -webkit-fill-available; }

.code-fiddle-frame-wrapper.loading #code-fiddle-output-frame { display: none; }

.code-fiddle-frame-wrapper:not(.loading) > .code-fiddle-frame-overlay { display: none; }

.code-fiddle-addressbar-controls > * > svg { width: 18px; height: 18px; margin-bottom: 3px; transition: filter 0.2s ease; filter: brightness(0.85); cursor: pointer; }

.code-fiddle-addressbar-controls > *:hover > svg { filter: brightness(175%); }

.code-fiddle-addressbar-controls > * { display: inline-flex; margin-top: 8px; }

.code-fiddle-addressbar-controls > *:active > svg { filter: brightness(0.5); }

.code-fiddle-panels > .code-fiddle-panel:not(.active) { display: none; }

.code-fiddle-editors { width: -webkit-fill-available; height: -webkit-fill-available; display: flex; }

.code-fiddle-editors > * { width: -webkit-fill-available; height: -webkit-fill-available; display: flex; }

.code-fiddle-editors > * > * { width: -webkit-fill-available; height: -webkit-fill-available; display: flex; }

li.code-fiddle-tab:not(:last-child) { margin-right: 0; }

li.code-fiddle-tab:last-child { margin-left: 0; }

.code-fiddle-editor-tabs { margin: 5px; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; align-content: center; }

li.code-fiddle-tab { padding: 2px 15px 0px 15px; margin: 1px 2px; transition: border-bottom, backdrop-filter .2s ease; }

li.code-fiddle-tab.active { border-bottom: 4px gray solid; backdrop-filter: brightness(2); }

li.code-fiddle-tab:not(.active) { cursor: pointer; }

li.code-fiddle-tab:not(.active):after { display:block; content: ''; border-bottom: solid 4px gray; transform: scaleX(0); transition: all .15s ease; }

li.code-fiddle-tab:nth-child(1):not(.active):hover:after { transform: scaleX(2.5); }

li.code-fiddle-tab:nth-child(2):not(.active):hover:after { transform: scaleX(2); }

li.code-fiddle-tab:not(.active):active:after { border-bottom: solid 4px #404040; }

li.code-fiddle-tab:not(.active) { transition: backdrop-filter .15s ease; }

li.code-fiddle-tab:not(.active):active { backdrop-filter: brightness(0.5); }

/** Console **/ display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: baseline; overflow-y: auto; }
 * 1) code-fiddle-console-output {

.code-fiddle-consolemessage-text { margin-left: 25px; }

.code-fiddle-consolemessage { border: 1px solid var(--message-border-color); background: var(--message-background-color); width: -webkit-fill-available; padding: 3px; font: 14px consolas, lucida console, courier new, monospace !important; }

.code-fiddle-consolemessage:not(:last-of-type) { border-bottom: none; }

.code-fiddle-consolemessage:first-of-type { border-top: none; }

.code-fiddle-consolemessage.code-fiddle-consolemessage-debug { color: var(--debug-text-color); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-debug::before { background: var(--info-icon); width: 20px; height: 20px; }

.code-fiddle-consolemessage.code-fiddle-consolemessage-warn { color: var(--warning-text-color); background: var(--warning-background-color); border-color: var(--warning-border-color); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-error { color: var(--error-text-color); background: var(--error-background-color); border-color: var(--error-border-color); }