mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-11 12:55:22 +02:00
Code Issues Releases Wiki Activity

build

Browse Source
This commit is contained in:
Kushagra Gour 2017-12-13 13:23:01 +05:30
parent 4d3915e185
commit 7fa2e745b2
4 changed files with 144 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/index.html
View File

@ -127,7 +127,7 @@
</div> </div>
</div> </div>
<div class="demo-side" id="js-demo-side"> <div class="demo-side" id="js-demo-side">
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe> <iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
<div id="consoleEl" class="console is-minimized"> <div id="consoleEl" class="console is-minimized">
<div id="consoleLogEl" class="console__log" class="code"> <div id="consoleLogEl" class="console__log" class="code">
<div class="js-console__header code-wrap__header" title="Double click to toggle console"> <div class="js-console__header code-wrap__header" title="Double click to toggle console">
@ -223,13 +223,18 @@
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a> <a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a>
&copy; Web Maker &nbsp;&nbsp; &copy; Web Maker &nbsp;&nbsp;
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" data-hint="Help"> <a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" aria-label="Help">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24"> <svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /> <path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg> </svg>
</a> </a>
<a d-open-modal="keyboardShortcutsModal" data-event-category="ui" data-event-action="keyboardShortcutButtonClick" class="footer__link hint--rounded hint--top-right" aria-label="Keyboard shortcuts">
<svg style="width:20px; height:20px; vertical-align:text-bottom">
<use xlink:href="#keyboard-icon"></use>
</svg>
</a>
<!-- #00ACED --> <!-- #00ACED -->
<a class="footer__link hint--rounded hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank"> <a class="footer__link hint--rounded hint--top-right" aria-label="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
<svg style="width:20px; height:20px; vertical-align:text-bottom"> <svg style="width:20px; height:20px; vertical-align:text-bottom">
<use xlink:href="#twitter-icon"></use> <use xlink:href="#twitter-icon"></use>
</svg> </svg>
@ -246,14 +251,12 @@
</svg> </svg>
</a> </a>
<h1>Add Library</h1> <h1>Add Library</h1>
<h3>JavaScript</h3>
<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<h3>CSS</h3> <input type="text" id="externalLibrarySearchInput" class="full-width" placeholder="Type here to search libraries">
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea> <div class="tar opacity--70">
<small>Powered by cdnjs</small>
<div style="margin-top:20px;"> </div>
<div style="margin:20px 0;">
Choose from popular libraries: Choose from popular libraries:
<select name="" id="js-add-library-select"> <select name="" id="js-add-library-select">
<option value="">-------</option> <option value="">-------</option>
@ -265,6 +268,14 @@
</optgroup> </optgroup>
</select> </select>
</div> </div>
<h3>JavaScript</h3>
<p style="font-size: 0.8em;" class="opacity--70">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<h3>CSS</h3>
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
</div> </div>
</div> </div>
@ -290,7 +301,7 @@
<use xlink:href="#cross-icon"></use> <use xlink:href="#cross-icon"></use>
</svg> </svg>
</a> </a>
<h1>Web Maker<small style="font-size:14px;"> v2.9.4</small></h1> <h1>Web Maker<small style="font-size:14px;"> v2.9.5</small></h1>
<div> <div>
<p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p> <p>Made with <span style="margin-right: 8px;">💖</span> & <span style="margin-right: 8px;">🙌</span> by <a href="https://twitter.com/chinchang457" target="_blank">Kushagra Gour</a></p>
<p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p> <p>Tweet out your feature requests, comments & suggestions to <a target="_blank" href="https://twitter.com/webmakerApp">@webmakerApp</a>.</p>
@ -323,6 +334,11 @@
</div> </div>
</div> </div>
<div class="modal" id="keyboardShortcutsModal">
<div class="modal__content" d-html="keyboard-shortcuts.html">
</div>
</div>
<div class="modal" id="onboardModal"> <div class="modal" id="onboardModal">
<div class="modal__content"> <div class="modal__content">
@ -605,6 +621,9 @@
<symbol id="cross-icon" viewBox="0 0 24 24"> <symbol id="cross-icon" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /> <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</symbol> </symbol>
<symbol id="keyboard-icon" viewBox="0 0 24 24">
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
</symbol>
</svg> </svg>
<script src="vendor.js"></script> <script src="vendor.js"></script>

104
app/script.js
View File

@ -380,7 +380,7 @@ window.jsLibs = [
}, },
{ {
url: url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js',
label: 'Bootstrap 4β', label: 'Bootstrap 4β',
type: 'js' type: 'js'
}, },
@ -401,7 +401,8 @@ window.jsLibs = [
type: 'js' type: 'js'
}, },
{ {
url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js', url:
'https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/cjs/react.production.min.js',
label: 'React', label: 'React',
type: 'js' type: 'js'
}, },
@ -432,7 +433,7 @@ window.jsLibs = [
type: 'js' type: 'js'
}, },
{ {
url: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js', url: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js',
label: 'Greensock TweenMax', label: 'Greensock TweenMax',
type: 'js' type: 'js'
}, },
@ -457,7 +458,7 @@ window.cssLibs = [
}, },
{ {
url: url:
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css',
label: 'Bootstrap 4β', label: 'Bootstrap 4β',
type: 'css' type: 'css'
}, },
@ -512,9 +513,10 @@ window.cssLibs = [
// textarea-autocomplete.js // textarea-autocomplete.js
(function() { (function() {
class TextareaAutoComplete { class TextareaAutoComplete {
constructor(textarea, filter) { constructor(textarea, options) {
this.t = textarea; this.t = textarea;
this.filter = filter; this.filter = options.filter;
this.selectedCallback = options.selectedCallback;
var wrap = document.createElement('div'); var wrap = document.createElement('div');
wrap.classList.add('btn-group'); wrap.classList.add('btn-group');
textarea.parentElement.insertBefore(wrap, textarea); textarea.parentElement.insertBefore(wrap, textarea);
@ -639,17 +641,25 @@ window.cssLibs = [
event.preventDefault(); event.preventDefault();
} else if (event.keyCode === 13 && this.isShowingSuggestions) { } else if (event.keyCode === 13 && this.isShowingSuggestions) {
selectedItemElement = this.list.querySelector('.selected'); selectedItemElement = this.list.querySelector('.selected');
this.replaceCurrentLine(selectedItemElement.dataset.url); this.selectSuggestion(selectedItemElement.dataset.url);
this.closeSuggestions(); this.closeSuggestions();
} }
} }
onListMouseDown(event) { onListMouseDown(event) {
var target = event.target; var target = event.target;
if (target.parentElement.dataset.url) { if (target.parentElement.dataset.url) {
this.replaceCurrentLine(target.parentElement.dataset.url); this.selectSuggestion(target.parentElement.dataset.url);
this.closeSuggestions();
} }
} }
selectSuggestion(value) {
if (this.selectedCallback) {
this.selectedCallback.call(null, value);
} else {
this.replaceCurrentLine(value);
}
this.closeSuggestions();
}
} }
window.TextareaAutoComplete = TextareaAutoComplete; window.TextareaAutoComplete = TextareaAutoComplete;
@ -664,7 +674,7 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl, onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate, runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea, customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
globalConsoleContainerEl globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
*/ */
/* eslint-disable no-extra-semi */ /* eslint-disable no-extra-semi */
(function(alertsService) { (function(alertsService) {
@ -803,28 +813,48 @@ globalConsoleContainerEl
scope.demoFrameDocument = scope.demoFrameDocument =
frame.contentDocument || frame.contentWindow.document; frame.contentDocument || frame.contentWindow.document;
// Check all the code wrap if they are minimized or not // Check all the code wrap if they are minimized or maximized
function updateCodeWrapCollapseStates() { function updateCodeWrapCollapseStates() {
// This is debounced!
clearTimeout(updateCodeWrapCollapseStates.timeout); clearTimeout(updateCodeWrapCollapseStates.timeout);
updateCodeWrapCollapseStates.timeout = setTimeout(function() { updateCodeWrapCollapseStates.timeout = setTimeout(function() {
const prop = currentLayoutMode === 2 ? 'width' : 'height';
[htmlCode, cssCode, jsCode].forEach(function(el) { [htmlCode, cssCode, jsCode].forEach(function(el) {
var bounds = el.getBoundingClientRect(); const bounds = el.getBoundingClientRect();
if (bounds[currentLayoutMode === 2 ? 'width' : 'height'] < 100) { const size = bounds[prop];
if (size < 100) {
el.classList.add('is-minimized'); el.classList.add('is-minimized');
} else { } else {
el.classList.remove('is-minimized'); el.classList.remove('is-minimized');
} }
if (el.style[prop].indexOf(`100% - ${minCodeWrapSize * 2}px`) !== -1) {
el.classList.add('is-maximized');
} else {
el.classList.remove('is-maximized');
}
}); });
}, 50); }, 50);
} }
function toggleCodeWrapCollapse(codeWrapEl) { function toggleCodeWrapCollapse(codeWrapEl) {
if (codeWrapEl.classList.contains('is-minimized')) { if (
codeWrapEl.classList.contains('is-minimized') ||
codeWrapEl.classList.contains('is-maximized')
) {
codeWrapEl.classList.remove('is-minimized'); codeWrapEl.classList.remove('is-minimized');
codeWrapEl.classList.remove('is-maximized');
codeSplitInstance.setSizes([33.3, 33.3, 33.3]); codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
} else { } else {
codeSplitInstance.collapse(parseInt(codeWrapEl.dataset.codeWrapId, 10)); const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
codeWrapEl.classList.add('is-minimized'); var arr = [
`${minCodeWrapSize}px`,
`${minCodeWrapSize}px`,
`${minCodeWrapSize}px`
];
arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
codeSplitInstance.setSizes(arr);
codeWrapEl.classList.add('is-maximized');
} }
} }
// Returns the sizes of main code & preview panes. // Returns the sizes of main code & preview panes.
@ -988,9 +1018,9 @@ globalConsoleContainerEl
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height'; var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
try { try {
sizes = [ sizes = [
+htmlCode.style[dimensionProperty].match(/([\d.]+)%/)[1], htmlCode.style[dimensionProperty],
+cssCode.style[dimensionProperty].match(/([\d.]+)%/)[1], cssCode.style[dimensionProperty],
+jsCode.style[dimensionProperty].match(/([\d.]+)%/)[1] jsCode.style[dimensionProperty]
]; ];
} catch (e) { } catch (e) {
sizes = [33.33, 33.33, 33.33]; sizes = [33.33, 33.33, 33.33];
@ -1285,6 +1315,7 @@ globalConsoleContainerEl
onboardModal.classList.remove('is-modal-visible'); onboardModal.classList.remove('is-modal-visible');
settingsModal.classList.remove('is-modal-visible'); settingsModal.classList.remove('is-modal-visible');
cssSettingsModal.classList.remove('is-modal-visible'); cssSettingsModal.classList.remove('is-modal-visible');
keyboardShortcutsModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false); toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed')); document.dispatchEvent(new Event('overlaysClosed'));
} }
@ -1597,7 +1628,8 @@ globalConsoleContainerEl
}); });
} }
function getCompleteHtml(html, css, js) { /* eslint max-params: ["error", 4] */
function getCompleteHtml(html, css, js, isForExport) {
var externalJs = externalJsTextarea.value var externalJs = externalJsTextarea.value
.split('\n') .split('\n')
.reduce(function(scripts, url) { .reduce(function(scripts, url) {
@ -1627,12 +1659,14 @@ globalConsoleContainerEl
externalJs + externalJs +
'\n'; '\n';
if (!isForExport) {
contents += contents +=
'<script src="' + '<script src="' +
(chrome.extension (chrome.extension
? chrome.extension.getURL('lib/screenlog.js') ? chrome.extension.getURL('lib/screenlog.js')
: `${location.origin}${BASE_PATH}/lib/screenlog.js`) + : `${location.origin}${BASE_PATH}/lib/screenlog.js`) +
'"></script>'; '"></script>';
}
if (jsMode === JsModes.ES6) { if (jsMode === JsModes.ES6) {
contents += contents +=
@ -1798,7 +1832,7 @@ globalConsoleContainerEl
css = result[1], css = result[1],
js = result[2]; js = result[2];
var fileContent = getCompleteHtml(html, css, js); var fileContent = getCompleteHtml(html, css, js, true);
var d = new Date(); var d = new Date();
var fileName = [ var fileName = [
@ -2782,6 +2816,11 @@ globalConsoleContainerEl
event.preventDefault(); event.preventDefault();
openSavedItemsPane(); openSavedItemsPane();
trackEvent('ui', 'openCreationKeyboardShortcut'); trackEvent('ui', 'openCreationKeyboardShortcut');
} else if ((event.ctrlKey || event.metaKey) && event.keyCode === 191) {
// Ctrl/⌘ + Shift + ?
event.preventDefault();
scope.toggleModal(keyboardShortcutsModal);
trackEvent('ui', 'showKeyboardShortcutsShortcut');
} else if (event.keyCode === 27) { } else if (event.keyCode === 27) {
closeAllOverlays(); closeAllOverlays();
} }
@ -2892,12 +2931,21 @@ globalConsoleContainerEl
externalJsTextarea.addEventListener('blur', onExternalLibChange); externalJsTextarea.addEventListener('blur', onExternalLibChange);
externalCssTextarea.addEventListener('blur', onExternalLibChange); externalCssTextarea.addEventListener('blur', onExternalLibChange);
new TextareaAutoComplete(externalJsTextarea, obj => new TextareaAutoComplete(externalJsTextarea, {
obj.latest.match(/\.js$/) filter: obj => obj.latest.match(/\.js$/)
); });
new TextareaAutoComplete(externalCssTextarea, obj => new TextareaAutoComplete(externalCssTextarea, {
obj.latest.match(/\.css$/) filter: obj => obj.latest.match(/\.css$/)
); });
new TextareaAutoComplete(externalLibrarySearchInput, {
selectedCallback: value => {
const textarea = value.match(/\.js$/)
? externalJsTextarea
: externalCssTextarea;
textarea.value = `${textarea.value}\n${value}`;
externalLibrarySearchInput.value = '';
}
});
// Console header drag resize logic // Console header drag resize logic
var consoleHeaderDragStartY; var consoleHeaderDragStartY;
@ -2965,7 +3013,7 @@ globalConsoleContainerEl
refreshEditor(); refreshEditor();
}); });
} else { } else {
utils.log('Load last unsaved item'); utils.log('Load last unsaved item', lastCode);
currentItem = lastCode; currentItem = lastCode;
refreshEditor(); refreshEditor();
} }

2
app/service-worker.js
View File

File diff suppressed because one or more lines are too long

28
app/style.css
View File

@ -26,9 +26,11 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
.fr { float: right; } .fr { float: right; }
.relative { position: relative; } .relative { position: relative; }
.tac { text-align: center; } .tac { text-align: center; }
.tar { text-align: right; }
.va-m { vertical-align: middle; } .va-m { vertical-align: middle; }
.full-width { width: 100%; } .full-width { width: 100%; }
.opacity--30 { opacity: 0.3; } .opacity--30 { opacity: 0.3; }
.opacity--70 { opacity: 0.7; }
.pointer-none { pointer-events: none; } .pointer-none { pointer-events: none; }
.ml-1 { margin-left: 1rem; } .ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; } .ml-2 { margin-left: 2rem; }
@ -234,11 +236,14 @@ body:not(.light-version).overlay-visible .main-container {
height: 18px; height: 18px;
} }
.code-wrap__collapse-btn:before { .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>');
} /* maximize icon */
.is-minimized .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>'); 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 {
/* minimize icon */
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 { @keyframes pop-in {
from { transform: scale(0.9); opacity: 0; } from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; } to { transform: scale(1); opacity: 1; }
@ -855,8 +860,8 @@ transition: 0.25s ease;
} }
.autocomplete__loader { .autocomplete__loader {
position: absolute; position: absolute;
right: 10px; right: 3px;
bottom: 10px; bottom: 1px;
} }
@keyframes wobble { @keyframes wobble {
from { from {
@ -938,6 +943,19 @@ transition: 0.25s ease;
display: block; display: block;
} }
.kbd-shortcut__keys {
background: rgba(0,0,0,0.1);
border-radius: 3px;
padding: 3px 8px;
margin-right: 5px;
display: inline-block;
font-size: 0.9rem;
font-weight: bold;
}
.kbd-shortcut__details {
display: inline-block;
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */ while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; } .cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }