User:Thundercraft5/CodeFiddle.css

@import url("https://hypixel-skyblock.fandom.com/wiki/User:Thundercraft5/CodeFiddle.css/images.css?action=raw&ctype=text/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: var(--cf-svg--loading-spinner) no-repeat center; }

.cf-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: var(--cf-svg--settings-knob-main) 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; overflow: hidden; }

.code-fiddle-consolecontrols { width: 100%; display: flex; background: var(--message-background-color); border-bottom: 1px solid #565555; 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: var(--cf-svg--clear-consle-trashcan) 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: var(--cf-svg--consoleoptions-gear) no-repeat center; }

.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 {

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

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

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

.code-fiddle-consoleoptions-dropdown { height: min-content !important; flex-direction: column; }

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

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

transform-origin: top; animation-fill-mode: forwards !important; transition: transform 0.4s ease; position: absolute; z-index: 99; margin-top: 31px; transform: translateY(-101%); background: var(--message-background-color); border-bottom: 1px solid rgb(86, 85, 85); box-shadow: black 0px 4px 8px -4px; }	transform: translateY(0); }
 * 1) consolecontrols-toggle + * + .code-fiddle-consoleoptions-dropdown {
 * 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 { background: var(--cf-svg--consoleicon--info) no-repeat center; transform: scale(0.7); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-log::before { background-image: var(--cf-svg--consoleicon--log); transform: scale(0.7); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-debug::before { background: var(--cf-svg--consoleicon--debug) no-repeat center; }

.code-fiddle-consolemessage-xhr::before, .code-fiddle-consolemessage-fetch::before { background-image: var(--cf-svg--consoleicon--network); }

.code-fiddle-consolemessage.code-fiddle-consolemessage-warn::before { width: 40px; height: 40px; margin: -10px; margin-right: -30px; margin-left: 1px; transform: scale(0.35); background: var(--cf-svg--consoleicon--warn) no-repeat center; }

.code-fiddle-consolemessage.code-fiddle-consolemessage-error::before { background: var(--cf-svg--consoleicon--error) no-repeat center; transform: scale(0.7); }