diff --git a/src/style.css b/src/style.css
index 06d009c..3613a74 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,6 @@
:root {
--color-bg: #252637;
- --color-sidebar: #3A2B63;
+ --color-sidebar: #3a2b63;
--code-font-size: 16px;
}
body {
@@ -8,33 +8,72 @@ body {
padding: 0;
background: rgba(0, 0, 0, 0.5);
background: var(--color-bg);
- color: rgba(255,255,255,0.9);
+ color: rgba(255, 255, 255, 0.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";
+ 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: crimson; cursor: pointer; }
+a {
+ text-decoration: none;
+ color: crimson;
+ 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: 0.3; }
-.opacity--70 { opacity: 0.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; }
+.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: 0.3;
+}
+.opacity--70 {
+ opacity: 0.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;
@@ -43,7 +82,7 @@ hr {
label {
cursor: pointer;
}
-[class*="hint--"]:after {
+[class*='hint--']:after {
text-transform: none;
font-weight: normal;
letter-spacing: 0.5px;
@@ -63,9 +102,12 @@ label {
margin-left: 8px;
}
a > svg {
- fill: rgba(255, 255, 255, 0.2)
+ fill: rgba(255, 255, 255, 0.2);
}
-select, input[type="text"], input[type="number"], textarea {
+select,
+input[type='text'],
+input[type='number'],
+textarea {
padding: 3px 5px;
font-size: inherit;
}
@@ -98,13 +140,13 @@ select, input[type="text"], input[type="number"], textarea {
}
.btn:hover {
text-decoration: none;
- box-shadow: 0 3px 5px 0 rgba(0,0,0,0.15);
+ box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
}
.btn:focus {
outline-width: 4px;
outline-color: #b76b29;
outline-style: solid;
- outline-offset: 1px;
+ outline-offset: 1px;
}
.btn-icon > svg {
width: 20px;
@@ -123,18 +165,24 @@ select, input[type="text"], input[type="number"], textarea {
color: #eee333;
}
/* used to show keyboard specific content when something is keyboard focused */
-.show-when-selected { display: none; }
-.selected .show-when-selected { display: inline-block; }
+.show-when-selected {
+ display: none;
+}
+.selected .show-when-selected {
+ display: inline-block;
+}
.main-container {
position: absolute;
- left: 0; right: 0;
- top: 0; bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
display: flex;
flex-direction: column;
overflow: hidden;
will-change: -webkit-filter;
- transition: 0.10s ease 0.2s;
+ transition: 0.1s ease 0.2s;
}
body:not(.light-version).overlay-visible .main-container {
transition-duration: 0.5s;
@@ -192,7 +240,7 @@ body:not(.light-version).overlay-visible .main-container {
overflow: hidden;
position: relative;
background: var(--color-bg);
- transition: height 0.30s ease, width 0.30s ease;
+ transition: height 0.3s ease, width 0.3s ease;
will-change: height;
}
.layout-2 .code-wrap.is-minimized {
@@ -218,9 +266,9 @@ body:not(.light-version).overlay-visible .main-container {
justify-content: space-between;
align-items: center;
padding: 5px 10px;
- background: rgba(0,0,0,0.20);
+ background: rgba(0, 0, 0, 0.2);
color: #888;
- border-bottom: 1px solid rgba(0,0,0,0.3);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
font-weight: bold;
user-select: none;
}
@@ -247,12 +295,11 @@ body:not(.light-version).overlay-visible .main-container {
margin-left: 8px;
}
.code-wrap__header-btn,
-.code-wrap__header-btn > svg {
+.code-wrap__header-btn > svg {
width: 18px;
height: 18px;
}
.code-wrap__collapse-btn:before {
-
/* maximize icon */
content: url('data:image/svg+xml;utf8,');
}
@@ -261,8 +308,14 @@ body:not(.light-version).overlay-visible .main-container {
content: url('data:image/svg+xml;utf8,');
}
@keyframes pop-in {
- from { transform: scale(0.9); opacity: 0; }
- to { transform: scale(1); opacity: 1; }
+ from {
+ transform: scale(0.9);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
}
/* Codemirror */
@@ -278,7 +331,7 @@ body:not(.light-version).overlay-visible .main-container {
font-variant-ligatures: contextual;
}
.cm-s-monokai .CodeMirror-linenumber {
- color:rgba(255,255,255,0.2);
+ color: rgba(255, 255, 255, 0.2);
}
.cm-s-monokai.CodeMirror,
.cm-s-monokai .CodeMirror-gutters {
@@ -287,8 +340,9 @@ body:not(.light-version).overlay-visible .main-container {
.cm-s-monokai .CodeMirror-guttermarker-subtle {
opacity: 0.4;
}
-.cm-s-monokai .CodeMirror-activeline-background, .cm-s-monokai .CodeMirror-activeline-gutter {
- background: rgba(0,0,0,0.1) !important;
+.cm-s-monokai .CodeMirror-activeline-background,
+.cm-s-monokai .CodeMirror-activeline-gutter {
+ background: rgba(0, 0, 0, 0.1) !important;
}
.CodeMirror-guttermarker-subtle {
/*visibility: hidden !important;*/
@@ -326,7 +380,7 @@ body > #demo-frame {
padding: 5px 10px;
background-color: rgb(18, 19, 27);
color: rgba(255, 255, 255, 0.45);
- border-top: 1px solid rgba(255,255,255,0.14);
+ border-top: 1px solid rgba(255, 255, 255, 0.14);
/*line-height: 20px;*/
}
.footer {
@@ -336,7 +390,7 @@ body > #demo-frame {
display: flex;
flex-wrap: nowrap;
border: 0;
- border-bottom: 1px solid rgba(255,255,255,0.14);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.main-header__btn-wrap > a {
font-size: 0.8em;
@@ -344,18 +398,22 @@ body > #demo-frame {
line-height: 20px;
height: 20px;
letter-spacing: 0.6px;
- color: #9297B3;
+ color: #9297b3;
border-radius: 3px;
margin-left: 10px;
padding: 0px 8px;
- border: 1px solid rgba(0,0,0,.9);
- background: linear-gradient(180deg, rgba(0,0,0,0.5) 0, rgba(255,255,255,0.1) 100%);
+ border: 1px solid rgba(0, 0, 0, 0.9);
+ background: linear-gradient(
+ 180deg,
+ rgba(0, 0, 0, 0.5) 0,
+ rgba(255, 255, 255, 0.1) 100%
+ );
/*text-shadow: 0px 1px 1px rgba(0,0,0,1);*/
- box-shadow: 0 -1px 0px 0 rgba(255,255,255,0.15);
+ box-shadow: 0 -1px 0px 0 rgba(255, 255, 255, 0.15);
text-transform: uppercase;
}
.main-header__btn-wrap > a > svg {
- fill: #9297B3;
+ fill: #9297b3;
margin-right: 4px;
}
.main-header__btn-wrap > a.is-marked > svg {
@@ -391,7 +449,7 @@ body > #demo-frame {
display: inline-block;
height: 24px;
margin: 0 10px 0 20px;
- border-left: 1px solid rgba(255,255,255,0.2);
+ border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.mode-btn {
margin-left: 10px;
@@ -408,10 +466,10 @@ body > #demo-frame {
}
.footer a > svg {
transition: 0.3s ease;
- fill: rgba(255, 255, 255, 0.2)
+ fill: rgba(255, 255, 255, 0.2);
}
.footer a:hover svg {
- fill: rgba(255, 255, 255, 0.45)
+ fill: rgba(255, 255, 255, 0.45);
}
.mode-btn svg {
width: 24px;
@@ -433,7 +491,7 @@ body > #demo-frame {
.item-title-input {
background: none;
border: 0;
- color: rgba(255,255,255,0.6);
+ color: rgba(255, 255, 255, 0.6);
flex: 1;
}
.search-input {
@@ -475,7 +533,8 @@ body > #demo-frame {
}
.modal__close-btn > svg {
fill: black;
- width:30px; height:30px;
+ width: 30px;
+ height: 30px;
}
.modal__close-btn:hover {
opacity: 0.7;
@@ -516,7 +575,7 @@ body > #demo-frame {
z-index: 5;
opacity: 0;
will-change: opacity;
- background: rgba(0,0,0,0.6);
+ background: rgba(0, 0, 0, 0.6);
transition: opacity 0.3s;
}
/* Make settings modal smaller */
@@ -581,22 +640,48 @@ body > #demo-frame {
opacity: 0;
transform: translateX(50px);
will-change: opacity, transform;
- box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
animation: slide-left 0.35s ease forwards;
}
-.saved-item-tile:nth-child(1) { animation-delay: 0.2s; }
-.saved-item-tile:nth-child(2) { animation-delay: 0.25s; }
-.saved-item-tile:nth-child(3) { animation-delay: 0.3s; }
-.saved-item-tile:nth-child(4) { animation-delay: 0.35s; }
-.saved-item-tile:nth-child(5) { animation-delay: 0.4s; }
-.saved-item-tile:nth-child(6) { animation-delay: 0.45s; }
-.saved-item-tile:nth-child(7) { animation-delay: 0.5s; }
-.saved-item-tile:nth-child(8) { animation-delay: 0.55s; }
-.saved-item-tile:nth-child(9) { animation-delay: 0.6s; }
-.saved-item-tile:nth-child(10) { animation-delay: 0.65s; }
-.saved-item-tile:nth-child(11) { animation-delay: 0.7s; }
-.saved-item-tile:nth-child(12) { animation-delay: 0.75s; }
-.saved-item-tile:nth-child(n+12) { animation-delay: 0.8s; }
+.saved-item-tile:nth-child(1) {
+ animation-delay: 0.2s;
+}
+.saved-item-tile:nth-child(2) {
+ animation-delay: 0.25s;
+}
+.saved-item-tile:nth-child(3) {
+ animation-delay: 0.3s;
+}
+.saved-item-tile:nth-child(4) {
+ animation-delay: 0.35s;
+}
+.saved-item-tile:nth-child(5) {
+ animation-delay: 0.4s;
+}
+.saved-item-tile:nth-child(6) {
+ animation-delay: 0.45s;
+}
+.saved-item-tile:nth-child(7) {
+ animation-delay: 0.5s;
+}
+.saved-item-tile:nth-child(8) {
+ animation-delay: 0.55s;
+}
+.saved-item-tile:nth-child(9) {
+ animation-delay: 0.6s;
+}
+.saved-item-tile:nth-child(10) {
+ animation-delay: 0.65s;
+}
+.saved-item-tile:nth-child(11) {
+ animation-delay: 0.7s;
+}
+.saved-item-tile:nth-child(12) {
+ animation-delay: 0.75s;
+}
+.saved-item-tile:nth-child(n + 12) {
+ animation-delay: 0.8s;
+}
@keyframes slide-left {
from {
opacity: 0;
@@ -609,7 +694,7 @@ body > #demo-frame {
}
.saved-item-tile:hover,
.saved-item-tile.selected {
- background: rgba(255,255,255,0.1);
+ background: rgba(255, 255, 255, 0.1);
}
.saved-item-tile__btns {
position: absolute;
@@ -627,14 +712,14 @@ body > #demo-frame {
}
.saved-item-tile__btn {
padding: 7px 10px;
- color: rgba(255,255,255,0.3);
+ color: rgba(255, 255, 255, 0.3);
border-radius: 20px;
margin-left: 2px;
- background: rgba(255,255,255,0.05);
+ background: rgba(255, 255, 255, 0.05);
text-transform: uppercase;
}
.saved-item-tile__btn:hover {
- background: rgba(255,255,255,0.8);
+ background: rgba(255, 255, 255, 0.8);
color: #555;
}
.saved-item-tile__title {
@@ -655,16 +740,21 @@ body > #demo-frame {
position: relative;
}
@keyframes shake {
- 2%, 22% {
+ 2%,
+ 22% {
transform: translate3d(-1px, 0, 0);
}
- 5%,20% {
+ 5%,
+ 20% {
transform: translate3d(2px, 0, 0);
}
- 7%, 12%, 17% {
+ 7%,
+ 12%,
+ 17% {
transform: translate3d(-4px, 0, 0);
}
- 10%, 15% {
+ 10%,
+ 15% {
transform: translate3d(4px, 0, 0);
}
}
@@ -717,9 +807,9 @@ body > #demo-frame {
font-size: 5px;
position: relative;
text-indent: -9999em;
- border-top: 1.1em solid rgba(118,57,229, 0.2);
- border-right: 1.1em solid rgba(118,57,229, 0.2);
- border-bottom: 1.1em solid rgba(118,57,229, 0.2);
+ border-top: 1.1em solid rgba(118, 57, 229, 0.2);
+ border-right: 1.1em solid rgba(118, 57, 229, 0.2);
+ border-bottom: 1.1em solid rgba(118, 57, 229, 0.2);
border-left: 1.1em solid #7639e5;
transform: translateZ(0);
animation: load8 1.1s infinite linear;
@@ -768,7 +858,7 @@ body > #demo-frame {
color: white;
}
.dropdown__menu > li:not(:last-child) {
- border-bottom: 1px solid rgba(0,0,0,0.05);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.open > .dropdown__menu,
@@ -786,7 +876,7 @@ body > #demo-frame {
background: white;
border: 1px solid #eee;
color: #333;
- box-shadow: 0 3px 5px rgba(0,0,0,0.2);
+ box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
/*color: #333;*/
font-size: 1rem;
border-radius: 3px;
@@ -831,8 +921,8 @@ body > #demo-frame {
transform: translateX(0);
}
.count-label {
- color: rgba(0,0,0,0.8);
- background: rgba(255,255,255,0.53);
+ color: rgba(0, 0, 0, 0.8);
+ background: rgba(255, 255, 255, 0.53);
border-radius: 5px;
padding: 1px 6px;
font-weight: bold;
@@ -857,7 +947,7 @@ body > #demo-frame {
animation-delay: 0.4s;
}
.onboard-step__icon {
- fill: transparent!important;
+ fill: transparent !important;
stroke-width: 0.3px;
stroke: #eeb096;
width: 150px;
@@ -881,7 +971,7 @@ body > #demo-frame {
right: 0;
max-height: 200px;
overflow-y: auto;
- border: 1px solid rgba(0,0,0,0.5);
+ border: 1px solid rgba(0, 0, 0, 0.5);
z-index: 2001;
}
.autocomplete__loader {
@@ -891,31 +981,31 @@ body > #demo-frame {
}
@keyframes wobble {
from {
- transform: none;
+ transform: none;
}
15% {
- transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
- transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
- transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
- transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
- transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
- transform: none;
+ transform: none;
}
}
.animated {
@@ -947,7 +1037,7 @@ body > #demo-frame {
padding: 5px;
font-size: 1.3em;
flex: 1;
- background: rgba(0,0,0,0.3);
+ background: rgba(0, 0, 0, 0.3);
color: white;
border: 0;
outline: 0;
@@ -970,7 +1060,7 @@ body > #demo-frame {
}
.kbd-shortcut__keys {
- background: rgba(0,0,0,0.1);
+ background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
padding: 3px 8px;
margin-right: 5px;
@@ -986,25 +1076,25 @@ body > #demo-frame {
display: inline-block;
}
.web-maker-with-tag:after {
- content: 'BETA';
- position: relative;
- left: 3px;
- top: -10px;
- border-radius: 4px;
- background: #b76b29;
- color: white;
- letter-spacing: 0.6px;
- padding: 2px;
- font-size: 10px;
+ content: 'BETA';
+ position: relative;
+ left: 3px;
+ top: -10px;
+ border-radius: 4px;
+ background: #b76b29;
+ color: white;
+ letter-spacing: 0.6px;
+ padding: 2px;
+ font-size: 10px;
}
.is-extension .web-maker-with-tag:after {
display: none;
}
.social-login-btn--github {
- background: #656B6F;
+ background: #656b6f;
}
.social-login-btn--facebook {
- background: #4E62C0;
+ background: #4e62c0;
}
.social-login-btn--google {
background: white;
@@ -1021,41 +1111,83 @@ body:not(.is-app) .show-when-app {
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */
-.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
-.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
-.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
+.cm-s-paraiso-dark.CodeMirror {
+ background: #2f1e2e;
+ color: #b9b6b0;
+}
+.cm-s-paraiso-dark .CodeMirror-gutters {
+ background: #2f1e2e;
+ border-right: 0px;
+}
+.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: 0px; }
-.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
+.cm-s-monokai.CodeMirror {
+ background: #272822;
+ color: #f8f8f2;
+}
+.cm-s-monokai .CodeMirror-gutters {
+ background: #272822;
+ border-right: 0px;
+}
+.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: 0px; }
-.cm-s-3024-day .CodeMirror-activeline-background { background: #e8f2ff; }
+.cm-s-3024-day.CodeMirror {
+ background: #f7f7f7;
+ color: #3a3432;
+}
+.cm-s-3024-day .CodeMirror-gutters {
+ background: #f7f7f7;
+ border-right: 0px;
+}
+.cm-s-3024-day .CodeMirror-activeline-background {
+ background: #e8f2ff;
+}
.cm-s-material.CodeMirror {
- background-color: #263238;
- color: rgba(233, 237, 237, 1);
+ background-color: #263238;
+ color: rgba(233, 237, 237, 1);
}
.cm-s-material .CodeMirror-gutters {
- background: #263238;
- color: rgb(83,127,126);
+ background: #263238;
+ color: rgb(83, 127, 126);
}
-.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
-
-.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
- background-color: #282a36 !important;
- color: #f8f8f2 !important;
+.cm-s-material .CodeMirror-activeline-background {
+ background: rgba(0, 0, 0, 0);
}
-.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.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-dracula.CodeMirror,
+.cm-s-dracula .CodeMirror-gutters {
+ background-color: #282a36 !important;
+ color: #f8f8f2 !important;
+}
+.cm-s-dracula .CodeMirror-activeline-background {
+ background: rgba(255, 255, 255, 0.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;
+ background: #0f192a;
+ color: #d1edff;
+}
+.cm-s-midnight .CodeMirror-gutters {
+ background: #0f192a;
+ border-right: 1px solid;
+}
+.cm-s-midnight .CodeMirror-activeline-background {
+ background: #253540;
}
-.cm-s-midnight .CodeMirror-gutters { background: #0F192A; border-right: 1px solid; }
-.cm-s-midnight .CodeMirror-activeline-background { background: #253540; }