php-web-maker/app/style.css

:root{--color-bg:#252637;--color-sidebar:#3a2b63;--code-font-size:16px}body{margin:0;padding:0;background:rgba(0,0,0,.5);background:var(--color-bg);color:rgba(255,255,255,.9);min-height:100vh;font-size:87.5%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,'Segoe UI Emoji','Segoe UI Symbol'}h1{margin-top:0}a{text-decoration:none;color:#dc143c;cursor:pointer}.hide{display:none!important}.flex{display:flex}.flex-grow{flex-grow:1}.flex-v-center{align-items:center}.fr{float:right}.relative{position:relative}.tac{text-align:center}.tar{text-align:right}.va-m{vertical-align:middle}.full-width{width:100%}.opacity--30{opacity:.3}.opacity--70{opacity:.7}.pointer-none{pointer-events:none}.ml-1{margin-left:1rem}.ml-2{margin-left:2rem}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}hr{background:0;border:0;border-bottom:1px solid #dedede}label{cursor:pointer}[class*=hint--]:after{text-transform:none;font-weight:400;letter-spacing:.5px}.line{display:block;margin-bottom:1em}.caret{display:inline-block;width:0;height:0;border:6px solid transparent;border-top-color:currentColor;position:relative;top:5px;margin-left:8px}a>svg{fill:rgba(255,255,255,.2)}input[type=number],input[type=text],select,textarea{padding:3px 5px;font-size:inherit}.hidden-select{opacity:0;position:absolute;left:0;right:0;top:0;bottom:0}.btn{display:inline-block;border:0;background:#0074d9;color:#fff;font-size:inherit;border-radius:3px;padding:7px 15px;cursor:pointer;transition:box-shadow .2s ease}.btn--big{padding:15px 30px;border-radius:3px}.btn-icon{display:inline-flex;align-items:center}.btn:hover{text-decoration:none;box-shadow:0 3px 5px 0 rgba(0,0,0,.15)}.btn:focus{outline-width:4px;outline-color:#b76b29;outline-style:solid;outline-offset:1px}.btn-icon>svg{width:20px;height:20px;fill:currentColor;vertical-align:middle;margin-right:8px}.btn--big>svg{width:25px;height:25px;margin-right:12px}.star:after{content:'★';color:#eee333}.show-when-selected{display:none}.selected .show-when-selected{display:inline-block}.main-container{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;overflow:hidden;will-change:-webkit-filter;transition:.1s ease .2s}body:not(.light-version).overlay-visible .main-container{transition-duration:.5s;transition-delay:.4s;-webkit-filter:blur(3px);filter:blur(3px)}.code-side,.demo-side{flex-basis:inherit;position:relative;width:50%}.layout-3 .content-wrap{flex-direction:row-reverse}.code-side{display:flex;flex-direction:column}.layout-2 .content-wrap{flex-direction:column}.layout-2 .code-side{flex-direction:row;width:auto}.layout-2 .demo-side{width:auto}.layout-4 .code-side{display:none}.layout-4 .code-side+.gutter{display:none}.layout-4 .demo-side{width:100%!important}.is-detached-mode .demo-side{display:none}.is-detached-mode .code-side{width:100%!important}.is-detached-mode.layout-2 .code-side{height:auto!important}.code-wrap{display:flex;flex-direction:column;flex-basis:inherit;height:33%;overflow:hidden;position:relative;background:var(--color-bg);transition:height .3s ease,width .3s ease;will-change:height}.layout-2 .code-wrap.is-minimized{flex-direction:row}.is-dragging .code-wrap{transition:none}.layout-2 .code-wrap{height:auto;width:33%}.code-wrap:nth-of-type(3){animation-delay:.3s}.code-wrap:nth-of-type(5){animation-delay:.4s}.code-wrap__header{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;padding:5px 10px;background:rgba(0,0,0,.2);color:#888;border-bottom:1px solid rgba(0,0,0,.3);font-weight:700;user-select:none}.code-wrap__header-label{display:inline-block;font-size:1.1em;opacity:.5}.layout-2 .code-side .is-minimized .code-wrap__header{writing-mode:vertical-lr;padding:10px 5px}.code-wrap__header .caret{transition:.2s ease}.is-minimized .code-wrap__header .caret{opacity:0}.code-wrap__header-btn{display:inline-block;vertical-align:top;margin-left:8px}.code-wrap__header-btn,.code-wrap__header-btn>svg{width:18px;height:18px}.code-wrap__collapse-btn:before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>')}.is-maximized .code-wrap__collapse-btn:before{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>')}@keyframes pop-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.Codemirror{width:100%;height:calc(100% - 25px);font-size:var(--code-font-size)}.layout-2 .is-minimized .Codemirror{height:calc(100%)}.Codemirror pre{font-variant-ligatures:contextual}.cm-s-monokai .CodeMirror-linenumber{color:rgba(255,255,255,.2)}.cm-s-monokai .CodeMirror-gutters,.cm-s-monokai.CodeMirror{background:var(--color-bg)}.cm-s-monokai .CodeMirror-guttermarker-subtle{opacity:.4}.cm-s-monokai .CodeMirror-activeline-background,.cm-s-monokai .CodeMirror-activeline-gutter{background:rgba(0,0,0,.1)!important}.CodeMirror-hints{font-size:var(--code-font-size);border:0;background:#1e1e2c}.CodeMirror-hint{color:#bbb;padding:2px 4px}li.CodeMirror-hint-active{background:#5b429d}#demo-frame{border:0;width:100%;height:calc(100% - 29px);position:absolute;z-index:1;background:#fff}body>#demo-frame{height:100%}.footer,.main-header{padding:5px 10px;background-color:#12131b;color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.14)}.footer{z-index:6}.main-header{display:flex;flex-wrap:nowrap;border:0;border-bottom:1px solid rgba(255,255,255,.14)}.main-header__btn-wrap>a{font-size:.8em;font-weight:700;line-height:20px;height:20px;letter-spacing:.6px;color:#9297b3;border-radius:3px;margin-left:10px;padding:0 8px;border:1px solid rgba(0,0,0,.9);background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.1) 100%);box-shadow:0 -1px 0 0 rgba(255,255,255,.15);text-transform:uppercase}.main-header__btn-wrap>a>svg{fill:#9297b3;margin-right:4px}.main-header__btn-wrap>a.is-marked>svg{fill:#dc143c}.main-header__btn-wrap>a:hover{border-color:rgba(146,151,179,.5)}.main-header__avatar-img,.profile-modal__avatar-img{border-radius:50%}.logo{display:inline-block;height:25px;width:48px;margin-right:5px;background:url(icon-48.png) 0 -12px;background-repeat:no-repeat;vertical-align:middle;-webkit-filter:grayscale(.9);transition:.4s ease;opacity:.3}.footer:hover .logo{-webkit-filter:grayscale(0);opacity:1}.footer__right{font-size:0;line-height:0}.footer__separator{display:inline-block;height:24px;margin:0 10px 0 20px;border-left:1px solid rgba(255,255,255,.2)}.mode-btn{margin-left:10px;display:inline-block}.footer__link:first-of-type{margin-left:5px}.footer__link{display:inline-block;margin-right:5px;position:relative;top:2px}.footer a>svg{transition:.3s ease;fill:rgba(255,255,255,.2)}.footer a:hover svg{fill:rgba(255,255,255,.45)}.mode-btn svg{width:24px;height:24px}.mode-btn.selected svg{fill:rgba(255,255,255,.45)}.gutter{background:rgba(255,255,255,.05);flex-shrink:0}.gutter-horizontal{cursor:ew-resize}.gutter-vertical{cursor:ns-resize}.item-title-input{background:0 0;border:0;color:rgba(255,255,255,.6);flex:1}.search-input{background:rgba(255,255,255,.1);padding:10px 20px;border:0;width:100%;font-size:16px;color:#fff;border-radius:4px}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;z-index:2000;visibility:hidden;pointer-events:none}.modal__close-btn{position:absolute;right:10px;top:10px;opacity:.3;transition:.25s ease}.modal__close-btn>svg{fill:#000;width:30px;height:30px}.modal__close-btn:hover{opacity:.7}.modal__content{background:#fdfdfd;color:#444;position:relative;border-radius:8px;opacity:0;padding:2em;font-size:1.1em;line-height:1.4;max-width:85vw;max-height:90vh;box-sizing:border-box;overflow-y:auto;pointer-events:auto;transition-property:transform,opacity;transition-duration:.19s;transform:translateY(-50px) scale(.7)}@media screen and (max-width:900px){.modal__content{max-width:95vw}}.is-modal-visible{visibility:visible}.is-modal-visible .modal__content{transition-duration:.3s;transform:translateY(0) scale(1);opacity:1}.modal-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:5;opacity:0;will-change:opacity;background:rgba(0,0,0,.6);transition:opacity .3s}.saved-items-pane{position:fixed;right:0;top:0;bottom:0;width:450px;padding:20px 30px;z-index:6;background-color:var(--color-sidebar);transition:.3s cubic-bezier(1,.13,.21,.87);transition-property:transform;will-change:transform;transform:translateX(100%)}.saved-items-pane.is-open{transition-duration:.4s;transform:translateX(0)}.is-modal-visible~.modal-overlay,.saved-items-pane.is-open~.modal-overlay{opacity:1;visibility:visible}.saved-items-pane__close-btn{position:absolute;left:-18px;top:24px;opacity:0;visibility:hidden;border-radius:50%;padding:10px 14px;background:#dc143c;transform:scale(0);will-change:transform,opacity;transition:.3s ease;transition-delay:0}.saved-items-pane.is-open .saved-items-pane__close-btn{opacity:1;transition-delay:.4s;transform:scale(1);visibility:visible}.saved-item-tile{padding:20px;background-color:rgba(255,255,255,.06);position:relative;margin:20px 0;display:block;border-radius:4px;cursor:pointer;opacity:0;transform:translateX(50px);will-change:opacity,transform;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);animation:slide-left .35s ease forwards}.saved-item-tile:nth-child(1){animation-delay:.2s}.saved-item-tile:nth-child(2){animation-delay:.25s}.saved-item-tile:nth-child(3){animation-delay:.3s}.saved-item-tile:nth-child(4){animation-delay:.35s}.saved-item-tile:nth-child(5){animation-delay:.4s}.saved-item-tile:nth-child(6){animation-delay:.45s}.saved-item-tile:nth-child(7){animation-delay:.5s}.saved-item-tile:nth-child(8){animation-delay:.55s}.saved-item-tile:nth-child(9){animation-delay:.6s}.saved-item-tile:nth-child(10){animation-delay:.65s}.saved-item-tile:nth-child(11){animation-delay:.7s}.saved-item-tile:nth-child(12){animation-delay:.75s}.saved-item-tile:nth-child(n+12){animation-delay:.8s}@keyframes slide-left{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}.saved-item-tile.selected,.saved-item-tile:hover{background:rgba(255,255,255,.1)}.saved-item-tile__btns{position:absolute;top:6px;z-index:1;right:8px;opacity:0;pointer-events:none;transition:.25s ease}.saved-item-tile.selected .saved-item-tile__btns,.saved-item-tile:hover .saved-item-tile__btns{opacity:1;pointer-events:auto}.saved-item-tile__btn{padding:7px 10px;color:rgba(255,255,255,.3);border-radius:20px;margin-left:2px;background:rgba(255,255,255,.05);text-transform:uppercase}.saved-item-tile__btn:hover{background:rgba(255,255,255,.8);color:#555}.saved-item-tile__title{pointer-events:none;font-size:1.4em;margin:0 0 1em 0;opacity:.8}.saved-item-tile__meta{pointer-events:none;opacity:.3}.saved-items-pane__container{overflow-y:scroll;max-height:calc(100vh - 90px)}.notifications-btn{position:relative}@keyframes shake{2%,22%{transform:translate3d(-1px,0,0)}20%,5%{transform:translate3d(2px,0,0)}12%,17%,7%{transform:translate3d(-4px,0,0)}10%,15%{transform:translate3d(4px,0,0)}}.notifications-btn.has-new{animation:shake 7s linear infinite;transform-origin:50% 10px}.notifications-btn__dot{position:absolute;right:1;top:-2px;background:#31fe45;border-radius:50%;width:12px;height:12px;display:none}.has-new .notifications-btn__dot{display:block}.notification{border:1px solid #f1f1f1;border-radius:5px;padding:20px;background:#f8f6f9;position:relative}.notification:not(:last-child){margin-bottom:10px}.notification li:not(:last-child){margin-bottom:10px}.notification__version{background:#ff8c00;color:#fff;padding:3px;border-radius:5px;position:absolute;top:2px;left:2px}.loader,.loader:after{border-radius:50%;width:3em;height:3em}.loader{font-size:5px;position:relative;text-indent:-9999em;border-top:1.1em solid rgba(118,57,229,.2);border-right:1.1em solid rgba(118,57,229,.2);border-bottom:1.1em solid rgba(118,57,229,.2);border-left:1.1em solid #7639e5;transform:translateZ(0);animation:load8 1.1s infinite linear}@keyframes load8{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.btn-group{position:relative;cursor:pointer}.dropdown__menu{position:absolute;top:100%;left:0;padding:0;margin:0;min-width:200px;display:block;font-size:.88rem;list-style:none;border-radius:4px;overflow:hidden;opacity:0;visibility:hidden;transition:transform .25s ease;transform:translateY(10px);z-index:5;background:#fff}.dropdown__menu>li>a{display:block;padding:6px 15px;color:#333;cursor:pointer}.dropdown__menu>li.selected>a,.dropdown__menu>li>a:hover{background:var(--color-sidebar);color:#fff}.dropdown__menu>li:not(:last-child){border-bottom:1px solid rgba(0,0,0,.05)}.dropdown__menu.is-open,.open>.dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}.alerts-container{position:fixed;will-change:transform;left:50%;top:-5px;padding:10px;background:#fff;border:1px solid #eee;color:#333;box-shadow:0 3px 5px rgba(0,0,0,.2);font-size:1rem;border-radius:3px;z-index:6;transform:translateX(-50%) translateY(-100%);transition:.3s ease}.alerts-container.is-active{transform:translateX(-50%) translateY(0)}.error-gutter{width:8px}.gutter-error-marker{width:8px;height:20px;background:red;border-radius:0;position:relative;top:0;left:1px}.gutter-error-marker:after{content:attr(data-title);background:red;color:#fff;padding:4px;opacity:0;visibility:hidden;position:absolute;top:14px;left:0;width:300px;transform:translateX(-10px);will-change:transform;transition:.2s ease}.gutter-error-marker:hover:after{opacity:1;visibility:visible;transform:translateX(0)}.count-label{color:rgba(0,0,0,.8);background:rgba(255,255,255,.53);border-radius:5px;padding:1px 6px;font-weight:700}.onboard-step{background:#f7f2f1;border:1px solid #ecdede;margin:15px;padding:20px 30px;background-color:#fff;border-radius:10px;box-shadow:0 16px 22px rgba(0,0,0,.1);flex:1;opacity:0;animation:onboard-step-show .6s ease forwards;animation-delay:.1s}.onboard-step:nth-child(2){animation-delay:.2s}.onboard-step:nth-child(3){animation-delay:.4s}.onboard-step__icon{fill:transparent!important;stroke-width:.3px;stroke:#eeb096;width:150px;height:150px}@keyframes onboard-step-show{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.autocomplete-dropdown{border-top-left-radius:0;border-top-right-radius:0;right:0;max-height:200px;overflow-y:auto;border:1px solid rgba(0,0,0,.5);z-index:2001}.autocomplete__loader{position:absolute;right:3px;bottom:1px}@keyframes wobble{from{transform:none}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{transform:none}}.animated{animation-duration:1s;animation-fill-mode:both}.wobble{animation-name:wobble}.console{background:var(--color-bg);z-index:6;position:absolute;bottom:0;min-height:80px;height:35vh;left:0;right:0;transform:translateY(0);transition:transform .4s cubic-bezier(.76,.01,.13,.9)}.console.is-minimized{transform:translateY(calc(100% - 29px))}.console .Codemirror{height:calc(100% - 55px)}.console-exec-input{padding:5px;font-size:1.3em;flex:1;background:rgba(0,0,0,.3);color:#fff;border:0;outline:0}.console:not(.is-minimized) .code-wrap__header{cursor:ns-resize}.global-console-container{display:none;position:relative;height:35px}.is-detached-mode .console,.is-detached-mode .footer{z-index:4}.is-detached-mode .global-console-container{display:block}.kbd-shortcut__keys{background:rgba(0,0,0,.1);border-radius:3px;padding:3px 8px;margin-right:5px;display:inline-block;font-size:.9rem;font-weight:700}.kbd-shortcut__details{display:inline-block}.web-maker-with-tag{position:relative;display:inline-block}.web-maker-with-tag:after{content:'BETA';position:relative;left:3px;top:-7px;border-radius:4px;background:#b76b29;color:#fff;letter-spacing:.6px;padding:2px;font-size:10px}.is-extension .web-maker-with-tag:after{display:none}.social-login-btn--github{background:#656b6f}.social-login-btn--facebook{background:#4e62c0}.social-login-btn--google{background:#fff;border:2px solid currentColor;color:inherit}body.is-logged-in .hide-on-login,body:not(.is-app) .show-when-app,body:not(.is-extension) .show-when-extension,body:not(.is-logged-in) .hide-on-logout{display:none}.cm-s-paraiso-dark.CodeMirror{background:#2f1e2e;color:#b9b6b0}.cm-s-paraiso-dark .CodeMirror-gutters{background:#2f1e2e;border-right:0}.cm-s-paraiso-dark .CodeMirror-activeline-background{background:#4d344a}.cm-s-monokai.CodeMirror{background:#272822;color:#f8f8f2}.cm-s-monokai .CodeMirror-gutters{background:#272822;border-right:0}.cm-s-monokai .CodeMirror-activeline-background{background:#373831}.cm-s-3024-day.CodeMirror{background:#f7f7f7;color:#3a3432}.cm-s-3024-day .CodeMirror-gutters{background:#f7f7f7;border-right:0}.cm-s-3024-day .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-material.CodeMirror{background-color:#263238;color:rgba(233,237,237,1)}.cm-s-material .CodeMirror-gutters{background:#263238;color:#537f7e}.cm-s-material .CodeMirror-activeline-background{background:rgba(0,0,0,0)}.cm-s-dracula .CodeMirror-gutters,.cm-s-dracula.CodeMirror{background-color:#282a36!important;color:#f8f8f2!important}.cm-s-dracula .CodeMirror-activeline-background{background:rgba(255,255,255,.1)}.cm-s-blackboard.CodeMirror{background:#0c1021;color:#f8f8f8}.cm-s-blackboard .CodeMirror-gutters{background:#0c1021;border-right:0}.cm-s-blackboard .CodeMirror-activeline-background{background:#3c3636}.cm-s-midnight.CodeMirror{background:#0f192a;color:#d1edff}.cm-s-midnight .CodeMirror-gutters{background:#0f192a;border-right:1px solid}.cm-s-midnight .CodeMirror-activeline-background{background:#253540}