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 - 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%); /* Focused colors */ --console--focused-border: hsl(214deg 47% 48%); --console--focused-background: hsl(214deg 19% 20%); }

.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 { margin-left: 0; 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); }

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

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

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 **/ /* Colors */ 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; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; align-items: baseline; justify-content: flex-start; max-width: 93%; margin-top: auto; margin-bottom: auto; }

.code-fiddle-consolemessage { display: flex; align-content: center; flex-direction: row; justify-content: flex-start; align-items: flex-start; 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; white-space: pre-wrap; overflow-wrap: anywhere; border-left: none !important; border-right: none !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); }

/* On focus */ .code-fiddle-consolemessage:focus { background: var(--console--focused-background); border-bottom: 1px solid var(--console--focused-border); }

.code-fiddle-consolemessage:not(:first-of-type):focus { border-top: 1px solid var(--console--focused-border); }

/* Icons */ .code-fiddle-consolemessage::before { height: 20px; display: inline-flex; width: 20px; margin-right: -18px; margin-bottom: -2px; margin-left: 10px; content: ""; background-repeat: no-repeat; }

.code-fiddle-consolemessage.code-fiddle-consolemessage-info::before { /* Icon taken from Chrome DevTools, see https://github.com/ChromeDevTools/devtools-frontend/blob/master/LICENSE for the license */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 10 10'%3E%3Cg xmlns='http://www.w3.org/2000/svg' mask='url(%23j)' transform=%3E%3Cpath d='M85 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5' transform= fill='url(%23k)'/%3E%3Cpath d='M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5' fill='%232a53cd'/%3E%3Cmask id='j'%3E%3Cpath fill='%23fff' d='M0 0h10v10H0z'/%3E%3Cpath d='M83.93 2.14c-.03-.53.55-.97 1.06-.83.5.12.79.73.56 1.18-.2.44-.79.61-1.2.36a.812.812 0 01-.42-.71zm1.7 5.46h.67v.53h-2.89V7.6h.66V3.99h-.66v-.53h2.22z' transform='translate(-80)'/%3E%3C/mask%3E%3C/g%3E%3C/svg%3E") no-repeat center; transform: scale(0.7); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-log::before { /* Icon taken from Chrome DevTools, see https://github.com/ChromeDevTools/devtools-frontend/blob/master/LICENSE for the license */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' fill='gray' viewBox='0 0 612 612' style='enable-background:new 0 0 612 612;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M577.662,0h-319.77c-4.974,0-9.743,1.975-13.259,5.491L21.08,229.046c-3.516,3.516-5.493,8.286-5.493,13.257v350.945 c0,10.355,8.396,18.751,18.751,18.751h543.324c10.355,0,18.751-8.396,18.751-18.751V18.751C596.413,8.393,588.017,0,577.662,0z M239.141,64.021v159.532H79.608L239.141,64.021z M558.911,574.497H53.089V261.055h204.803c10.355,0,18.751-8.396,18.751-18.751 V37.502h282.267V574.497L558.911,574.497z'/%3E%3C/g%3E%3C/svg%3E"); transform: scale(0.7); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-debug::before { /* Licensed CC0 */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='hsl(220deg 45% 33%)'%3E%3Cpath d='M 8.90625 2 L 7.71875 3.59375 L 9.25 4.75 C 9.0839167 5.1277969 9 5.5491469 9 6 L 15 6 C 15 5.564911 14.936469 5.148849 14.78125 4.78125 L 16.34375 3.625 L 15.15625 2 L 13.375 3.34375 C 12.962316 3.1354159 12.508234 3 12 3 C 11.50753 3 11.059705 3.116189 10.65625 3.3125 L 8.90625 2 z M 8 7 C 7.4455939 7 6.9569277 7.6783929 6.59375 8.78125 L 4.15625 7.375 L 3.15625 9.09375 L 6.125 10.8125 C 6.0365185 11.488416 6 12.232851 6 13 L 3 13 L 3 15 L 6.125 15 C 6.2422017 15.797279 6.4390457 16.481344 6.6875 17.0625 L 4.09375 19.03125 L 5.3125 20.625 L 7.78125 18.75 C 8.6724703 19.679039 9.8221552 20.186034 11 20.59375 L 11 13 L 13 13 L 13 20.6875 C 14.44375 20.25 15.583374 19.776807 16.40625 18.90625 L 18.71875 20.65625 L 19.9375 19.09375 L 17.4375 17.15625 C 17.656442 16.552483 17.783977 15.84839 17.875 15 L 21 15 L 21 13 L 18 13 C 18 12.208956 17.937538 11.443166 17.84375 10.75 L 20.75 9.0625 L 19.75 7.3125 L 17.375 8.6875 C 17.014656 7.6428208 16.537602 7 16 7 L 8 7 z'/%3E%3C/svg%3E") no-repeat center; }

.code-fiddle-consolemessage.code-fiddle-consolemessage-warn::before { /* Icon taken from Chrome DevTools, see https://github.com/ChromeDevTools/devtools-frontend/blob/master/LICENSE for the license */ width: 40px; height: 40px; margin: -10px; margin-right: -30px; margin-left: 1px; transform: scale(0.35); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wICg0MDM1YTRmYjQ5LCAyMDIwLTA1LTAxKSIKICAgc29kaXBvZGk6ZG9jbmFtZT0id2FybmluZ19pY29uLnN2ZyIKICAgaWQ9InN2ZzI3MDkiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDEwIDEwIgogICBoZWlnaHQ9IjEwbW0iCiAgIHdpZHRoPSIxMG1tIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMjcwMyIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzkxIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjU2MCIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtcm90YXRpb249IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJtbSIKICAgICBpbmtzY2FwZTpjeT0iMTQuMzQ2NTgxIgogICAgIGlua3NjYXBlOmN4PSIyOS40NDU4NTkiCiAgICAgaW5rc2NhcGU6em9vbT0iMTUuODM5MTkyIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGlkPSJiYXNlIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTI3MDYiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjcuNzgxMjMzLC02OC4yMjQ3MTkpIgogICAgIGlkPSJsYXllcjEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSI+CiAgICA8ZwogICAgICAgaWQ9Imc0NDQzIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4wMDAwMTI0LDAsMCwxLjAwMDAxMjQsLTI3Ljc4MTI5NSw2OC4yMjQ1OTUpIj4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9InN0cm9rZTojYzE5NjAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg0NDQ3IgogICAgICAgICBkPSJtIDYxLDkgNCwtOCA0LDggeiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwKSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9ImZpbGw6I2Y0YmQwMDtzdHJva2U6I2Y1YmQwMDtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg0NDQ5IgogICAgICAgICBkPSJtIDYxLDkgNCwtOCA0LDggeiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwKSIgLz4KICAgICAgPHBhdGgKICAgICAgICAgc3R5bGU9ImZpbGw6I2FkODYwMSIKICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgICAgaWQ9InBhdGg0NDUxIgogICAgICAgICBkPSJtIDYzLjc1LDIuNzUgaCAyLjUgdiAyLjUgTCA2NS43NSw3IGggLTEuNSBsIC0wLjUsLTEuNzUgdiAtMi41IG0gMCw1LjI1IGggMi41IHYgMS4yNSBoIC0yLjUiCiAgICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MCkiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICAgIGlkPSJwYXRoNDQ1MyIKICAgICAgICAgZD0ibSA2NCwzIGggMiBWIDUuMjUgTCA2NS41LDcgaCAtMSBMIDY0LDUuMjUgViAzIG0gMCw1IGggMiB2IDEgaCAtMiIKICAgICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwKSIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=) no-repeat center; }

.code-fiddle-consolemessage.code-fiddle-consolemessage-error::before { /* Icon taken from Chrome DevTools, see https://github.com/ChromeDevTools/devtools-frontend/blob/master/LICENSE for the license */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDEwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjYuMSAoMjYzMTMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkdyb3VwPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUsOS42NCBDNy41Niw5LjY0IDkuNjQsNy41NiA5LjY0LDUgQzkuNjQsMi40NCA3LjU2LDAuMzYgNSwwLjM2IEMyLjQ0LDAuMzYgMC4zNiwyLjQ0IDAuMzYsNSBDMC4zNiw3LjU2IDIuNDQsOS42NCA1LDkuNjQgWiIgaWQ9InBhdGgzNzAxIiBmaWxsPSIjRUIzOTQxIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLDMgTDcsNyIgaWQ9InBhdGgzNzAzIiBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTcsMyBMMyw3IiBpZD0icGF0aDM3MDUiIHN0cm9rZT0iI0ZGRkZGRiIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat center; transform: scale(1.4) }