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

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