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%); /* Settings colors */ --settings-background-color: #474747; }

/* Loading Screen */ body.page-Special_CodeFiddle:not(.code-fiddle-loaded) { background: #0e191a; }

body.page-Special_CodeFiddle:not(.code-fiddle-loaded) > .main-container * { display: none !important }

body.page-Special_CodeFiddle:not(.code-fiddle-loaded)::before { width: 15vw; height: 15vh; margin: auto; margin-top: 45vh; display: flex; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='animation: code-fiddle-spinner-rotator .5s linear infinite;transform: translateZ(0);display: inline-flex;'%3E%3Cstyle%3E@keyframes code-fiddle-spinner-rotator %7B 0%25 %7B transform: rotate(0) %7D to %7B transform: rotate(1turn) %7D%0A%7D @keyframes code-fiddle-spinner-dash %7B to %7B stroke-dashoffset: 0 %7D %7D%3C/style%3E%3Cg transform='translate(20, 20)'%3E%3Ccircle fill='none' stroke-width='2' stroke-dasharray='119.38052083641213' stroke-dashoffset='119.38052083641213' stroke-linecap='round' r='19' style='&%2310;&%239;stroke: %23797979;&%2310;&%239;animation: code-fiddle-spinner-dash 1.25s linear infinite alternate-reverse;&%2310;&%239;-webkit-backface-visibility: hidden;&%2310;&%239;backface-visibility: hidden;&%2310;'/%3E%3C/g%3E%3C/svg%3E") no-repeat center; }

.hidden { display: none !important; }

.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 var(--settings-background-color); }

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

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

/* Shadow Effect */ .code-fiddle-panel:nth-child(3)::after { box-shadow: 0 -2px 8px 1.5px black; height: 0px; width: 100%; content: ""; display: flex; z-index: 5; position: relative; }

/*** Settings Menu - Main ***/ .code-fiddle-settings-knob { display: inline-flex; width: 30px; height: 30px; margin: 5px; z-index: 500; float: left; justify-self: flex-end; cursor: pointer; 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 48 48'%3E%3Cg%3E%3Cpath fill='%23707377' d='m24.04 0.14285c-1.376 0-2.7263 0.12375-4.0386 0.34741l-0.64 6.7853c-1.3572 0.37831-2.6417 0.90728-3.8432 1.585l-5.244-4.3317c-2.2152 1.5679-4.1541 3.4955-5.7217 5.7101l4.3426 5.2437c-0.67695 1.2001-1.2177 2.4878-1.5959 3.8432l-6.7745 0.64053c-0.22379 1.3127-0.34741 2.6622-0.34741 4.0386 0 1.3788 0.12285 2.7238 0.34741 4.0386l6.7745 0.64056c0.37825 1.3554 0.91896 2.6431 1.5959 3.8432l-4.3317 5.2437c1.5648 2.2089 3.4908 4.1457 5.6997 5.7105l5.2545-4.3426c1.2023 0.67835 2.485 1.2174 3.8432 1.5959l0.64053 6.7853c1.3123 0.22368 2.6626 0.33658 4.0386 0.33658s2.7155-0.11289 4.0278-0.33658l0.64053-6.7853c1.3582-0.37847 2.6409-0.91755 3.8432-1.5959l5.2545 4.3426c2.2088-1.5649 4.1348-3.5017 5.6997-5.7105l-4.3317-5.2437c0.67695-1.2001 1.2177-2.4878 1.5959-3.8432l6.7744-0.64056c0.22456-1.3148 0.34741-2.6598 0.34741-4.0386 0-1.3765-0.12361-2.726-0.34741-4.0386l-6.7744-0.64053c-0.37825-1.3554-0.91896-2.6431-1.5959-3.8432l4.3426-5.2437c-1.568-2.2146-3.507-4.1422-5.722-5.7101l-5.2437 4.3317c-1.2015-0.67776-2.486-1.2067-3.8432-1.585l-0.641-6.7853c-1.3123-0.22366-2.6518-0.34741-4.0278-0.34741zm0 14.776c5.0178 0 9.076 4.0691 9.076 9.0869s-4.0582 9.0869-9.076 9.0869-9.0869-4.0691-9.0869-9.0869 4.0691-9.0869 9.0869-9.0869z'/%3E%3C/g%3E%3C/svg%3E") center no-repeat; transition: filter 0.1s ease; }

.code-fiddle-settings-knob:hover, .code-fiddle-settings:is(:hover, :focus) .code-fiddle-settings-knob:not(:active) { filter: brightness(1.45); }

.code-fiddle-settings-knob:active, .code-fiddle-settings:focus .code-fiddle-settings-knob { filter: brightness(0.75) !important; }

.code-fiddle-settings:not(:active, :focus) .code-fiddle-settings-dropdown, .code-fiddle-settings-knob:not(:active, :focus) + .code-fiddle-settings-dropdown, .code-fiddle-settings-dropdown:focus { animation: 0.2s settings-collapse, 0.2s settings-collapse-pointerblock; }

.code-fiddle-settings:focus .code-fiddle-settings-dropdown, .code-fiddle-settings-knob:focus + .code-fiddle-settings-dropdown, .code-fiddle-settings-dropdown:focus { animation: 0.2s settings-expand; }

.code-fiddle-settings-dropdown { position: absolute; width: 100px; height: 100px; top: 45px; filter: drop-shadow(0 0 5px black); left: 11px; z-index: 100; padding: 5px; background: #474747; transition: transform 0.15s ease; transform-origin: 9px -10px; animation-fill-mode: forwards !important; }

.code-fiddle-settings-dropdown::before { height: 0; width: 0; border-width: 0 9px 9px 9px; border-color: transparent transparent var(--settings-background-color) transparent; border-style: solid; content: ""; left: 0px; top: -9px; position: absolute; display: block; }

@keyframes settings-collapse-pointerblock { from { pointer-events: none; } to { pointer-events: none; } }

@keyframes settings-expand { 0% { transform: scale(0%); } 70% { transform: scale(120%); } 100% { transform: scale(100%); } }

@keyframes settings-collapse { 0% { transform: scale(100%); } 100% { transform: scale(0%); } }

/** 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); }

.code-fiddle-consolemessage:focus + * { border-top: none !important; }

/* Console Controls */ .code-fiddle-panel:nth-child(3) { display: flex; flex-direction: column; z-index: 30; position: relative; }

.code-fiddle-consolecontrols { width: 100%; display: flex; background: var(--message-background-color); border-bottom: 1px solid #565555; box-shadow: 0 4px 8px -4px black; z-index: 1; flex-direction: row; height: max-content; justify-content: space-between; align-content: space-between; align-items: center; }

.code-fiddle-consoleclear { display: flex; margin: 5px; width: 20px; height: 20px; 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 24 24' style='fill: gray' fill-rule='evenodd'%3E%3Cg%3E%3Cpath d='M16 19a1 1 0 0 0 1-1v-7a1 1 0 1 0-2 0v7a1 1 0 0 0 1 1m-4 0a1 1 0 0 0 1-1v-7a1 1 0 1 0-2 0v7a1 1 0 0 0 1 1m-4 0a1 1 0 0 0 1-1v-7a1 1 0 1 0-2 0v7 a1 1 0 0 0 1 1M7 2h10a1 1 0 1 0 0-2H7a1 1 0 1 0 0 2M5 22h14V7H5v15zM22 5H2a1 1 0 1 0 0 2h1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V7h1a1 1 0 1 0 0-2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center no-repeat; }

.code-fiddle-consoleclear:hover { filter: brightness(165%); cursor: pointer; }

.code-fiddle-consoleclear:active { filter: brightness(85%); }

.code-fiddle-consoleoptions { width: 20px; margin: 5px; height: 20px; justify-self: flex-end; display: flex; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Created By Thundercraft5 (https://github.com/Thundercraft5), released under CC-BY-SA 4.0 --%3E%3Csvg viewBox='0 0 273.69079 277.61405' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(33.911801,32.323902)'%3E%3Cpath id='path219' style='fill:gray;stroke:none;stroke-width:0.999999' d='m 283.30664,-124.125 a 29.635172,29.635172 0 0 0 -29.44531,26.287109 L 238.76172,34.962891 A 400.00003,400.00003 0 0 0 199.05078,54.929688 400.00003,400.00003 0 0 0 164.11719,78.152344 L 41.458984,25.089844 A 29.635176,29.635176 0 0 0 3.9960938,37.525391 L -112.77148,240.75391 a 29.635164,29.635164 0 0 0 8.12304,38.62695 l 107.6250025,79.25 a 400.00003,400.00003 0 0 0 0.2675781,86.23828 L -103.87695,524.79102 a 29.635176,29.635176 0 0 0 -7.88086,38.67773 L 6.2851562,765.95898 A 29.635164,29.635164 0 0 0 43.824219,778.1582 L 166.15234,724.32422 a 400.00003,400.00003 0 0 0 72.61328,41.73242 l 15.09571,132.78125 a 29.635176,29.635176 0 0 0 29.44531,26.28711 h 234.38672 a 29.635165,29.635165 0 0 0 29.44531,-26.28711 l 15.09961,-132.80078 a 400.00003,400.00003 0 0 0 39.71094,-19.96875 400.00003,400.00003 0 0 0 35.20898,-23.10156 l 122.38282,52.94336 a 29.635167,29.635167 0 0 0 37.46289,-12.43555 L 913.77148,560.24609 a 29.635174,29.635174 0 0 0 -8.12304,-38.62695 L 798.25195,442.53711 a 400.00003,400.00003 0 0 0 -0.25781,-86.58399 l 106.88281,-79.74414 a 29.635173,29.635173 0 0 0 7.88086,-38.67773 L 794.71484,35.041016 A 29.635165,29.635165 0 0 0 757.17578,22.841797 L 634.84766,76.675781 A 400.00003,400.00003 0 0 0 562.23438,34.943359 L 547.13867,-97.837891 A 29.635172,29.635172 0 0 0 517.69336,-124.125 Z m 116.35547,324.62695 a 200.00001,200.00001 0 0 1 173.62305,99.27344 200.00001,200.00001 0 0 1 -72.06055,273.50977 200.00001,200.00001 0 0 1 -273.50977,-72.06055 200.00001,200.00001 0 0 1 72.06055,-273.50977 200.00001,200.00001 0 0 1 99.88672,-27.21289 z' transform='matrix(0.26458333,0,0,0.26458333,-3.0320336,0.51750404)' /%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center; /* Image made by Thundercraft5, licensed under CC-BY-SA 4.0 */ }

.code-fiddle-consoleoptions:hover { filter: brightness(145%); cursor: pointer; }

.code-fiddle-consoleoptions:active { filter: brightness(85%); }

/* Make settings gear blue when menu is open */ filter: sepia(1) brightness(0.88) saturate(3) hue-rotate(170deg); }
 * 1) consolecontrols-toggle:not(:checked) + * > label {

filter: sepia(1) brightness(1.2) saturate(3) hue-rotate(170deg); }
 * 1) consolecontrols-toggle:not(:checked) + * > label:hover {

filter: sepia(1) brightness(0.6) saturate(3) hue-rotate(160deg); }
 * 1) consolecontrols-toggle:not(:checked) + * > label:active {

transition: filter 0.08s ease; }
 * 1) consolecontrols-toggle:not(:checked) + * > label {

.code-fiddle-checkbox-wrapper *, .code-fiddle-checkbox-wrapper { cursor: pointer; flex-direction: row; display: flex; align-content: flex-end; justify-content: flex-start; align-items: center; }

transform-origin: top; animation-fill-mode: forwards !important; transition: transform 0.4s ease; position: absolute; z-index: 99; margin-top: 31px; transform: translateY(-100%); background: var(--message-background-color); border-bottom: 1px solid rgb(86, 85, 85); box-shadow: black 0px 4px 8px -4px; }
 * 1) consolecontrols-toggle + .code-fiddle-consoleoptions-dropdown {

transform: translateY(0); }
 * 1) consolecontrols-toggle:not(:checked) + .code-fiddle-consoleoptions-dropdown {

.code-fiddle-consolecontrols { z-index: 100; }

h3.code-fiddle-consoleoptions-settings { margin-top: -2px !important; margin-left: 10px; margin-right: 40px; font-family: monospace; text-align: left; }

/* Remove scrollbar */ display: none; }
 * 1) code-fiddle-console-output::-webkit-scrollbar {

-ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
 * 1) code-fiddle-console-output {

/* 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-xhr::before, .code-fiddle-consolemessage-fetch::before { /* Licensed CC0 */ background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 53.937 53.937' style='enable-background:new 0 0 53.937 53.937;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:gray' d='M26.969,0C12.099,0,0,12.099,0,26.969C0,41.84,12.099,53.937,26.969,53.937 S53.937,41.84,53.937,26.969C53.937,12.099,41.839,0,26.969,0z M26.969,49.989c-1.971,0-3.874-0.274-5.7-0.742 c0.002-0.038,0.011-0.074,0.011-0.113V25.93l1.336,1.336c0.833,0.833,2.183,0.833,3.017,0c0.833-0.833,0.833-2.184,0-3.017 l-4.977-4.977c0-0.001-0.001-0.001-0.002-0.002l-1.507-1.508L17.64,19.27c-0.001,0.001-0.002,0.001-0.002,0.001l-5.333,5.333 c-0.833,0.833-0.833,2.184,0,3.017c0.417,0.417,0.962,0.625,1.508,0.625s1.092-0.208,1.508-0.625l1.692-1.691v21.765 C9.296,43.972,3.947,36.093,3.947,26.969c0-12.694,10.328-23.021,23.021-23.021c1.545,0,3.053,0.158,4.514,0.45 c-0.028,0.139-0.043,0.28-0.043,0.428V28.03l-1.336-1.336c-0.833-0.833-2.184-0.833-3.017,0s-0.833,2.184,0,3.017l4.976,4.977 c0,0.001,0.001,0.001,0.002,0.002l1.507,1.508l1.507-1.508c0.001-0.001,0.002-0.001,0.002-0.001l5.333-5.333 c0.833-0.833,0.833-2.184,0-3.017s-2.183-0.833-3.017,0l-1.691,1.691V5.681C44.077,9.129,49.99,17.368,49.99,26.969 C49.991,39.662,39.662,49.989,26.969,49.989z' /%3E%3C/g%3E%3C/svg%3E%0A"); }

.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) }