Commit 417f19cc authored by Pouya Kary's avatar Pouya Kary

coding pretty and proud

parent c79af8b4
......@@ -22,9 +22,9 @@
"regulex": "0.0.2"
},
"devDependencies": {
"electron": "^1.4.4",
"electron-builder": "^5.30.0",
"electron-packager": "^7.7.0",
"electron-prebuilt": "^1.4.4",
"fs-extra": "0.30.0",
"gulp": "3.9.1",
"gulp-cli": "1.2.1",
......
......@@ -20,21 +20,21 @@
@keyframes show-dialog {
from {
opacity: 0;
top: 90px;
opacity: 0;
top: 90px;
}
to {
opacity: 100%;
top: 110px;
opacity: 100%;
top: 110px;
}
}
@keyframes show-button {
from {
width: 0;
width: 0;
}
to {
width: 80px;
width: 80px;
}
}
......@@ -43,41 +43,41 @@
//
#regexp-importer {
left: 190px;
left: 190px;
}
.regexp-importer-input-box {
border-radius: 100px;
height: 37px;
max-height: 37px;
min-height: 37px;
width: 370px;
overflow: hidden;
border-radius: 100px;
height: 37px;
max-height: 37px;
min-height: 37px;
width: 370px;
overflow: hidden;
}
@transition-duration: 0.4s;
@transition-duration: 0.4s;
.full-input {
width: 370px;
transition-duration: @transition-duration;
width: 370px;
transition-duration: @transition-duration;
}
.input-with-button {
width: 250px;
transition-duration: @transition-duration;
border-top-right-radius: 100px;
width: 250px;
transition-duration: @transition-duration;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
margin-right: 10px;
margin-right: 10px;
}
.disabled-button {
opacity: 0;
transition-duration: @transition-duration;
opacity: 0;
transition-duration: @transition-duration;
}
.enabled-button {
opacity: 100%;
transition-duration: 0.5s;
opacity: 100%;
transition-duration: 0.5s;
}
//
......@@ -85,27 +85,27 @@
//
.hide-dialog {
opacity: 0;
transition-duration: 0.3s;
opacity: 0;
transition-duration: 0.3s;
}
.show-dialog {
animation: show-dialog 0.4s;
animation: show-dialog 0.4s;
}
#regexp-importer {
user-select: none;
position: fixed;
top: 110px;
width: 370px;
height: 152px;
background-image: url('dialog-back.svg');
padding: 20px;
overflow: hidden;
user-select: none;
position: fixed;
top: 110px;
width: 370px;
height: 152px;
background-image: url('dialog-back.svg');
padding: 20px;
overflow: hidden;
}
.dark > #EditorView > #graph-and-ribbon-half > .ribbon > #regexp-importer {
background-image: url('dark-dialog-back.svg');
background-image: url('dark-dialog-back.svg');
}
//
......@@ -113,19 +113,19 @@
//
#regexp-importer-input {
background-color: var( --kary-background );
color: var( --kary-foreground );
float: left;
border: none;
font-size: 1.2rem;
vertical-align: middle;
font-family: @source-code-pro-typeface;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
max-width: 370px;
min-height: 37px;
padding: 0 15px 0 15px;
margin: 0;
background-color: var( --kary-background );
color: var( --kary-foreground );
float: left;
border: none;
font-size: 1.2rem;
vertical-align: middle;
font-family: @source-code-pro-typeface;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
max-width: 370px;
min-height: 37px;
padding: 0 15px 0 15px;
margin: 0;
}
//
......@@ -133,25 +133,25 @@
//
#regexp-importer-button {
width: 80px;
float: left;
border-radius: 100px;
border: none;
vertical-align: middle;
color: var( --kary-background );
font-size: 0.8rem;
border-top-right-radius: 100px;
width: 80px;
float: left;
border-radius: 100px;
border: none;
vertical-align: middle;
color: var( --kary-background );
font-size: 0.8rem;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
min-height: 37px;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-left: 10px;
min-height: 37px;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-left: 10px;
}
#regexp-importer-button:hover {
background-color: var( --kary-green );
background-color: var( --kary-green );
}
//
......@@ -159,9 +159,9 @@
//
#regexp-importer > h1 {
color: var( --kary-blue );
margin: 15px 0 6px 5px;
font-size: 1.6rem;
color: var( --kary-blue );
margin: 15px 0 6px 5px;
font-size: 1.6rem;
}
//
......@@ -169,11 +169,11 @@
//
#regexp-importer > p {
color: var( --kary-foreground );
line-height: 1.4;
padding: 0;
margin: 4px 0 10px 5px;
font-size: 1.2rem;
color: var( --kary-foreground );
line-height: 1.4;
padding: 0;
margin: 4px 0 10px 5px;
font-size: 1.2rem;
}
// ────────────────────────────────────────────────────────────────────────────────
......@@ -19,9 +19,9 @@
//
#playground-editor {
width: 100vw;
height: calc( ~'100vh - 39px ' - @ribbon-height );
color: var( --playground-text );
width: 100vw;
height: calc( ~'100vh - 39px ' - @ribbon-height );
color: var( --playground-text );
}
//
......@@ -33,33 +33,33 @@
.viwe-lines,
.view-line,
.token {
color: var( --kary-foreground );
color: var( --kary-foreground );
}
.monaco-editor .token.match {
background-color: var( --playground-match-back );
color: var( --playground-match-text );
background-color: var( --playground-match-back );
color: var( --playground-match-text );
}
.monaco-editor, .monaco-editor-background {
background-color: var( --kary-background );
background-color: var( --kary-background );
}
.monaco-editor .cursor {
background: var( --playground-caret ) !important;
background: var( --playground-caret ) !important;
}
.monaco-editor .current-line {
background: var( --color-5 );
border: none;
background: var( --color-5 );
border: none;
}
.monaco-editor.vs .line-numbers {
color: var( --playground-line-nums ) !important;
color: var( --playground-line-nums ) !important;
}
.monaco-editor .lines-decorations {
background-color: transparent;
background-color: transparent;
}
//
......@@ -67,7 +67,7 @@
//
.playground-match {
background-color: var( --color-5 );
background-color: var( --color-5 );
}
// ────────────────────────────────────────────────────────────────────────────────
......@@ -12,15 +12,15 @@
// ─── RIBBON BAR MAIN ────────────────────────────────────────────────────────────
//
@ribbon-border-size: 4px;
@ribbon-border-size: 4px;
@ribbon-border-bottom-size: 1px;
.ribbon {
-webkit-user-select: none;
user-select: none;
width: 100%;
height: @ribbon-height;
background: var( --color-2 );
border-bottom: var( --ribbon-border-bottom ) 1px solid;
-webkit-user-select: none;
user-select: none;
width: 100%;
height: @ribbon-height;
background: var( --color-2 );
border-bottom: var( --ribbon-border-bottom ) 1px solid;
}
//
......@@ -28,20 +28,20 @@
//
.ribbon-icon {
background-position: top center;
background-size: 34px 34px;
background-repeat: no-repeat;
margin: 8px 5px 0 5px;
padding-top: 41px;
width: max-content;
min-width: 46px;
text-align: center;
color: var( --kary-foreground );
float: left;
padding-bottom: 6px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: transparent;
background-position: top center;
background-size: 34px 34px;
background-repeat: no-repeat;
margin: 8px 5px 0 5px;
padding-top: 41px;
width: max-content;
min-width: 46px;
text-align: center;
color: var( --kary-foreground );
float: left;
padding-bottom: 6px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: transparent;
}
//
......@@ -49,7 +49,7 @@
//
.ribbon-icon:hover {
border-bottom-color: var( --ribbon-hover-border );
border-bottom-color: var( --ribbon-hover-border );
}
//
......@@ -57,12 +57,12 @@
//
.ribbon-separator {
@margin-tob-bottom: 8px;
width: 2px;
height: @ribbon-height - 2 * @margin-tob-bottom;
margin: @margin-tob-bottom 8px @margin-tob-bottom 8px;
background: var( --ribbon-separator );
float: left;
@margin-tob-bottom: 8px;
width: 2px;
height: @ribbon-height - 2 * @margin-tob-bottom;
margin: @margin-tob-bottom 8px @margin-tob-bottom 8px;
background: var( --ribbon-separator );
float: left;
}
// ────────────────────────────────────────────────────────────────────────────────
\ No newline at end of file
......@@ -18,20 +18,20 @@
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//
@console-color: var( --console-color );
@editor-ribbon-sum-of-icon-widths: 490px;
@console-height: 44px;
@console-color: var( --console-color );
@editor-ribbon-sum-of-icon-widths: 490px;
@console-height: 44px;
#ribbon-console-view {
text-align: center;
float: left;
background-color: @console-color;
border-radius: 3px;
margin: 11px 5px 0 5px;
padding: 3px 10px 0 10px;
width: calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths );
height: @console-height;
overflow: hidden;
text-align: center;
float: left;
background-color: @console-color;
border-radius: 3px;
margin: 11px 5px 0 5px;
padding: 3px 10px 0 10px;
width: calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths );
height: @console-height;
overflow: hidden;
}
//
......@@ -39,58 +39,55 @@
//
#ribbon-console-copy-hover-button {
background-color: var( --console-hover-color );
position: relative;
padding-top: 13px;
padding-bottom: 30px;
text-align: center;
font-family: @source-code-pro-typeface;
text-transform: uppercase;
//transition-duration: 0.5s;
letter-spacing: 7px;
font-size: 14px;
width: calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths - 20px );
opacity: 0;
top: -45px;
left: -10px;
height: 50px;
z-index: 1;
border: none;
background-color: var( --console-hover-color );
position: relative;
padding-top: 13px;
padding-bottom: 30px;
text-align: center;
font-family: @source-code-pro-typeface;
text-transform: uppercase;
letter-spacing: 7px;
font-size: 14px;
width: calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths - 20px );
opacity: 0;
top: -45px;
left: -10px;
height: 50px;
z-index: 1;
border: none;
}
#console-copy-icon {
width: 20px;
height: 18px;
float: left;
margin-left: ~'calc( 50% - 50px )';
background-position: left;
background-size: contain;
background-image: url('console-copy-icon.svg');
background-repeat: no-repeat;
width: 20px;
height: 18px;
float: left;
margin-left: ~'calc( 50% - 50px )';
background-position: left;
background-size: contain;
background-image: url('console-copy-icon.svg');
background-repeat: no-repeat;
}
.dark > .tab-view > #graph-and-ribbon-half > .ribbon > #ribbon-console-view > #ribbon-console-copy-hover-button > div > #console-copy-icon {
background-image: url('dark-console-copy-icon.svg');
background-image: url('dark-console-copy-icon.svg');
}
#console-copy-text {
padding-left: 10px;
float: left;
color: var( --console-copy-text );
padding-left: 10px;
float: left;
color: var( --console-copy-text );
}
#ribbon-console-copy-hover-button:hover {
//transition-duration: 0.2s;
opacity: 1;
opacity: 1;
}
#ribbon-console-copy-hover-button:active {
//transition-duration: 0;
background-color: var( --color-5 );
background-color: var( --color-5 );
}
.console-highlight-active-block {
color: var( --kary-magenta );
color: var( --kary-magenta );
}
//
......@@ -99,12 +96,12 @@
#ribbon-console-title {
font-family: @source-code-pro-typeface;
color: var( --console-title );
font-size: 9px;
text-transform: uppercase;
letter-spacing: 2px;
max-height: 13px
font-family: @source-code-pro-typeface;
color: var( --console-title );
font-size: 9px;
text-transform: uppercase;
letter-spacing: 2px;
max-height: 13px
}
//
......@@ -112,14 +109,14 @@
//
#ribbon-console-regexp {
font-family: @source-code-pro-typeface;
font-size: 18px;
letter-spacing: 2px;
text-align: center;
color: var( --console-regexp );
overflow: hidden;
max-height: 29px;
max-width: calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths - 140px );
font-family: @source-code-pro-typeface;
font-size: 18px;
letter-spacing: 2px;
text-align: center;
color: var( --console-regexp );
overflow: hidden;
max-height: 29px;
max-width: calc( ~'100vw' - @editor-ribbon-sum-of-icon-widths - 140px );
}
//
......@@ -127,31 +124,31 @@
//
.ribbon-editor-regexp-importer {
background-image: url('ribbon-editor-regexp-importer.png');
background-image: url('ribbon-editor-regexp-importer.png');
}
.dark > .tab-view > #graph-and-ribbon-half > .ribbon > .ribbon-editor-regexp-importer {
background-image: url('dark-ribbon-editor-regexp-importer.png');
background-image: url('dark-ribbon-editor-regexp-importer.png');
}
.ribbon-editor-export-svg {
background-image: url('ribbon-editor-export-svg.png');
background-image: url('ribbon-editor-export-svg.png');
}
.dark > .tab-view > #graph-and-ribbon-half > .ribbon > .ribbon-editor-export-svg {
background-image: url('dark-ribbon-editor-export-svg.png');
background-image: url('dark-ribbon-editor-export-svg.png');
}
.ribbon-editor-help {
background-image: url('ribbon-editor-help.png');
background-image: url('ribbon-editor-help.png');
}
.dark > .tab-view > #graph-and-ribbon-half > .ribbon > .ribbon-editor-help {
background-image: url('dark-ribbon-editor-help.png');
background-image: url('dark-ribbon-editor-help.png');
}
// ────────────────────────────────────────────────────────────────────────────────
\ No newline at end of file
......@@ -14,9 +14,9 @@
.ribbon-starting-spacer {
float: left;
height: 10px;
margin-left: 7px;
float: left;
height: 10px;
margin-left: 7px;
}
//
......
......@@ -19,13 +19,13 @@
//
#header-tabs {
margin-left: @header-tabs-spacings;
float: left;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
width: @toolbar-tabs-width;
height: @header-height;
margin-left: @header-tabs-spacings;
float: left;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
width: @toolbar-tabs-width;
height: @header-height;
}
//
......@@ -33,21 +33,21 @@
//
.invisible-tab {
height: 30px;
width: 102px;
position: fixed;
top: 9;
height: 30px;
width: 102px;
position: fixed;
top: 9px;
}
@tab-x-difference: 102px;
@tab-x-start: 7px + @header-tabs-spacings;
@tab-x-difference: 102px;
@tab-x-start: 7px + @header-tabs-spacings;
#editor-tab-invisible {
left: @tab-x-start;
left: @tab-x-start;
}
#playground-tab-invisible {
left: @tab-x-start + @tab-x-difference;
left: @tab-x-start + @tab-x-difference;
}
//
......@@ -55,19 +55,19 @@
//
.editor-tab {
background-image: url('toolbar-tabs-editor.png');
background-image: url('toolbar-tabs-editor.png');
}
.dark > .heading > .editor-tab {
background-image: url("dark-toolbar-tabs-editor.png");
background-image: url("dark-toolbar-tabs-editor.png");
}
.playground-tab {
background-image: url('toolbar-tabs-playground.png');
background-image: url('toolbar-tabs-playground.png');
}
.dark > .heading > .playground-tab {
background-image: url("dark-toolbar-tabs-playground.png");
background-image: url("dark-toolbar-tabs-playground.png");
}
// ────────────────────────────────────────────────────────────────────────────────
\ No newline at end of file
......@@ -19,23 +19,23 @@
//
.heading {
-webkit-user-select: none;
-webkit-app-region: drag;
background-size: contain;
background-position: left bottom;
background-repeat: no-repeat;
padding-top: 6px;
padding-bottom: 6px;
-webkit-user-select: none;
-webkit-app-region: drag;
background-size: contain;
background-position: left bottom;
background-repeat: no-repeat;
padding-top: 6px;
padding-bottom: 6px;
//padding-left: 20px;
padding-right: 20px;
font-size: 1.8rem;
color: var( --kary-foreground );
height: @header-height - 6px;
background-color: var( --color-2 );
width: 100vw;
padding-right: 20px;
font-size: 1.8rem;
color: var( --kary-foreground );
height: @header-height - 6px;
background-color: var( --color-2 );
width: 100vw;
//background-color: #D9D9D9;
overflow: hidden;
border-bottom: @ribbon-border-size solid var( --acent-color );
overflow: hidden;
border-bottom: @ribbon-border-size solid var( --acent-color );
}
//
......@@ -43,14 +43,14 @@
//
#header-left {
float: left;
float: left;
}
#header-right {
float: right;
color: var( --color-4 );
padding-top: 0.25rem;
font-size: 1.2rem;
float: right;
color: var( --color-4 );
padding-top: 0.25rem;
font-size: 1.2rem;
}
//
......@@ -58,15 +58,15 @@
//
.icon {
float: left;
height: @icon-box-size;
width: @icon-box-size;
margin-left: 10px;
margin-top: 4px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: @icon-size @icon-size;
float: left;
height: @icon-box-size;
width: @icon-box-size;
margin-left: 10px;
margin-top: 4px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: @icon-size @icon-size;
}
.icon:hover{
......@@ -74,24 +74,24 @@
}
.icon-active {
background-size: @active-icon-size @active-icon-size;
background-size: @active-icon-size @active-icon-size;
}
#icon-move {
margin-left: 30px;
background-image: url('cursor.png');
margin-left: 30px;