Skip to content

B
baas-ide
Unverified Commit 803b6fe1 authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #884 from ethereum/metropolis_theme

Metropolis v0.1
parents c6c1b343 927fe32f
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 125 deletions
assets/img/remix_logo_512x512.svg deleted 100644 → 0
View file @ c6c1b343
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<path fill="#414042" d="M70.582,428.904c0.811,0,1.622,0.285,2.437,0.853c0.811,0.571,1.218,1.34,1.218,2.314
c0,2.277-1.059,3.496-3.168,3.656c-5.038,0.814-9.381,2.356-13.037,4.63c-3.655,2.276-6.663,5.117-9.016,8.528
c-2.357,3.411-4.104,7.272-5.239,11.575c-1.139,4.307-1.706,8.814-1.706,13.524v32.653c0,2.273-1.139,3.411-3.412,3.411
c-2.277,0-3.412-1.138-3.412-3.411v-74.323c0-2.273,1.135-3.411,3.412-3.411c2.273,0,3.412,1.138,3.412,3.411v15.108
c1.462-2.437,3.206-4.752,5.239-6.945c2.029-2.193,4.264-4.143,6.701-5.848c2.437-1.706,5.076-3.085,7.919-4.143
C64.771,429.433,67.658,428.904,70.582,428.904z"/>
<path fill="#414042" d="M137.773,427.198c5.685,0,10.966,1.181,15.839,3.534c4.874,2.356,9.055,5.482,12.55,9.381
c3.492,3.899,6.214,8.407,8.164,13.524c1.949,5.117,2.924,10.44,2.924,15.961c0,0.976-0.366,1.79-1.097,2.438
c-0.731,0.65-1.583,0.975-2.559,0.975h-67.987c0.487,4.226,1.584,8.285,3.29,12.184c1.706,3.899,3.937,7.312,6.701,10.234
c2.761,2.925,6.008,5.281,9.748,7.067c3.735,1.789,7.877,2.681,12.428,2.681c12.021,0,21.36-4.79,28.023-14.377
c0.647-1.136,1.622-1.706,2.924-1.706c2.273,0,3.412,1.139,3.412,3.412c0,0.163-0.164,0.73-0.487,1.705
c-3.412,6.013-8.205,10.479-14.377,13.402c-6.176,2.924-12.671,4.387-19.495,4.387c-5.689,0-10.928-1.181-15.718-3.533
c-4.793-2.354-8.936-5.483-12.428-9.382c-3.495-3.899-6.214-8.407-8.163-13.524c-1.95-5.118-2.924-10.437-2.924-15.962
c0-5.521,0.975-10.844,2.924-15.961c1.949-5.117,4.668-9.625,8.163-13.524c3.492-3.898,7.634-7.024,12.428-9.381
C126.846,428.379,132.084,427.198,137.773,427.198z M169.94,466.188c-0.328-4.223-1.341-8.285-3.046-12.184
c-1.706-3.899-3.982-7.312-6.823-10.235c-2.844-2.924-6.175-5.277-9.991-7.067c-3.819-1.785-7.92-2.68-12.306-2.68
c-4.55,0-8.692,0.895-12.428,2.68c-3.739,1.79-6.987,4.144-9.748,7.067c-2.764,2.924-4.995,6.336-6.701,10.235
c-1.706,3.898-2.802,7.961-3.29,12.184H169.94z"/>
<path fill="#414042" d="M304.69,427.441c5.034,0,9.504,1.018,13.402,3.047c3.899,2.033,7.189,4.672,9.87,7.92
c2.68,3.251,4.709,7.066,6.092,11.452c1.379,4.387,2.07,8.856,2.07,13.402v43.62c0,0.975-0.365,1.789-1.097,2.438
c-0.73,0.646-1.503,0.975-2.313,0.975c-2.276,0-3.412-1.14-3.412-3.412v-43.62c0-3.571-0.529-7.104-1.584-10.6
c-1.059-3.491-2.602-6.618-4.63-9.382c-2.033-2.761-4.592-4.953-7.677-6.58c-3.088-1.621-6.662-2.436-10.722-2.436
c-5.2,0-9.587,1.218-13.159,3.654c-3.574,2.438-6.457,5.566-8.65,9.382c-2.193,3.819-3.818,8.042-4.874,12.672
c-1.059,4.63-1.584,9.058-1.584,13.28v33.629c0,0.975-0.365,1.789-1.096,2.438c-0.731,0.646-1.505,0.975-2.315,0.975
c-2.276,0-3.411-1.14-3.411-3.412v-43.62c0-3.571-0.53-7.104-1.585-10.6c-1.058-3.491-2.601-6.618-4.629-9.382
c-2.034-2.761-4.592-4.953-7.677-6.58c-3.087-1.621-6.663-2.436-10.722-2.436c-5.037,0-9.344,0.895-12.915,2.68
c-3.575,1.79-6.542,4.266-8.895,7.433c-2.357,3.167-4.063,6.944-5.117,11.331c-1.059,4.386-1.584,9.1-1.584,14.134v3.899v0.243
v32.897c0,2.272-1.138,3.412-3.412,3.412c-2.276,0-3.411-1.14-3.411-3.412v-74.567c0-2.273,1.135-3.411,3.411-3.411
c2.273,0,3.412,1.138,3.412,3.411v12.428c2.924-5.197,6.861-9.382,11.819-12.55c4.954-3.167,10.517-4.752,16.692-4.752
c6.983,0,12.995,1.991,18.032,5.97c5.033,3.983,8.688,9.223,10.966,15.719c2.76-6.336,6.739-11.533,11.94-15.596
C291.125,429.475,297.38,427.441,304.69,427.441z"/>
<path fill="#414042" d="M378.753,429.392c0.811,0,1.584,0.365,2.314,1.097c0.731,0.73,1.097,1.504,1.097,2.314v74.08
c0,0.814-0.365,1.584-1.097,2.315c-0.73,0.73-1.504,1.097-2.314,1.097c-0.975,0-1.79-0.366-2.438-1.097
c-0.65-0.731-0.975-1.501-0.975-2.315v-74.08c0-0.811,0.324-1.584,0.975-2.314C376.963,429.757,377.778,429.392,378.753,429.392z"
/>
<path fill="#414042" d="M473.34,428.66c2.273,0,3.412,1.139,3.412,3.411l-0.487,1.95l-24.368,35.334l24.368,35.577
c0.323,0.976,0.487,1.626,0.487,1.95c0,2.272-1.139,3.412-3.412,3.412c-1.302,0-2.193-0.488-2.68-1.463l-22.906-33.384
l-22.663,33.384c-0.814,0.975-1.79,1.463-2.924,1.463c-2.277,0-3.411-1.14-3.411-3.412c0-0.324,0.159-0.975,0.486-1.95
l24.369-35.577l-24.369-35.334l-0.486-1.95c0-2.272,1.134-3.411,3.411-3.411c1.134,0,2.109,0.487,2.924,1.462l22.663,33.141
l22.906-33.141C471.146,429.147,472.038,428.66,473.34,428.66z"/>
</g>
<g>
<g>
<g opacity="0.45">
<g>
<polygon fill="#010101" points="150.734,196.212 255.969,344.508 255.969,258.387 "/>
</g>
</g>
<g opacity="0.8">
<g>
<polygon fill="#010101" points="255.969,258.387 255.969,344.508 361.267,196.212 "/>
</g>
</g>
<g opacity="0.6">
<g>
<polygon fill="#010101" points="255.969,126.781 150.733,174.611 255.969,236.818 361.204,174.611 "/>
</g>
</g>
<g opacity="0.45">
<g>
<polygon fill="#010101" points="150.734,174.612 255.969,236.818 255.969,126.782 255.969,0.001 "/>
</g>
</g>
<g opacity="0.8">
<g>
<polygon fill="#010101" points="255.969,0 255.969,126.781 255.969,236.818 361.204,174.611 "/>
</g>
</g>
</g>
</g>
</svg>
src/app/editor/editor.js
View file @ 803b6fe1
...@@ -4,6 +4,7 @@ var EventManager = remixLib.EventManager ...@@ -4,6 +4,7 @@ var EventManager = remixLib.EventManager
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var ace = require('brace') var ace = require('brace')
var Range = ace.acequire('ace/range').Range var Range = ace.acequire('ace/range').Range
require('brace/ext/language_tools') require('brace/ext/language_tools')
require('brace/ext/searchbox') require('brace/ext/searchbox')
...@@ -12,6 +13,16 @@ require('./mode-solidity.js') ...@@ -12,6 +13,16 @@ require('./mode-solidity.js')
var styleGuide = remixLib.ui.styleGuide var styleGuide = remixLib.ui.styleGuide
var styles = styleGuide() var styles = styleGuide()
function setTheme (cb) {
if (styles.appProperties.aceTheme) {
cb('brace/theme/', styles.appProperties.aceTheme)
}
}
setTheme((path, theme) => {
require('brace/theme/tomorrow_night_blue')
})
var css = csjs` var css = csjs`
.ace-editor { .ace-editor {
background-color : ${styles.editor.backgroundColor_Editor}; background-color : ${styles.editor.backgroundColor_Editor};
...@@ -54,6 +65,10 @@ function Editor (opts = {}) { ...@@ -54,6 +65,10 @@ function Editor (opts = {}) {
var self = this var self = this
var el = yo`<div id="input"></div>` var el = yo`<div id="input"></div>`
var editor = ace.edit(el) var editor = ace.edit(el)
if (styles.appProperties.aceTheme) {
editor.setTheme('ace/theme/' + styles.appProperties.aceTheme)
}
ace.acequire('ace/ext/language_tools') ace.acequire('ace/ext/language_tools')
editor.setOptions({ editor.setOptions({
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
......
src/app/execution/txLogger.js
View file @ 803b6fe1
...@@ -31,7 +31,7 @@ var css = csjs` ...@@ -31,7 +31,7 @@ var css = csjs`
.txTable, .tr, .td { .txTable, .tr, .td {
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 10px;
color: ${styles.terminal.text_Secondary}; color: ${styles.terminal.text_Primary};
border: 1px solid ${styles.terminal.text_Secondary}; border: 1px solid ${styles.terminal.text_Secondary};
} }
#txTable { #txTable {
...@@ -50,10 +50,13 @@ var css = csjs` ...@@ -50,10 +50,13 @@ var css = csjs`
display: flex; display: flex;
} }
.debug, .details { .debug, .details {
color: ${styles.terminal.link_Debug}; ${styles.terminal.button_Log_Debug}
min-width: 55px;
margin-left: 5px; margin-left: 5px;
cursor: pointer; width: 55px;
min-width: 55px;
min-height: 20px;
max-height: 20px;
font-size: 11px;
} }
` `
/** /**
......
src/app/files/file-explorer.js
View file @ 803b6fe1
...@@ -24,6 +24,9 @@ var css = csjs` ...@@ -24,6 +24,9 @@ var css = csjs`
font-size : 14px; font-size : 14px;
cursor : pointer; cursor : pointer;
} }
.file {
color : ${styles.leftPanel.text_Teriary};
}
.hasFocus { .hasFocus {
background-color : ${styles.leftPanel.backgroundColor_FileExplorer}; background-color : ${styles.leftPanel.backgroundColor_FileExplorer};
} }
......
src/app/panels/editor-panel.js
View file @ 803b6fe1
...@@ -20,7 +20,7 @@ var cssTabs = yo` ...@@ -20,7 +20,7 @@ var cssTabs = yo`
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: ${styles.editor.text_Secondary}; color: ${styles.editor.text_Teriary};
} }
#files .file.active { #files .file.active {
color: ${styles.editor.text_Primary}; color: ${styles.editor.text_Primary};
...@@ -46,6 +46,7 @@ var cssTabs = yo` ...@@ -46,6 +46,7 @@ var cssTabs = yo`
} }
#files .file.active .remove { #files .file.active .remove {
display: inline-block; display: inline-block;
color: ${styles.editor.text_Primary};
} }
</style> </style>
` `
......
src/app/panels/righthand-panel.js
View file @ 803b6fe1
...@@ -42,8 +42,12 @@ var css = csjs` ...@@ -42,8 +42,12 @@ var css = csjs`
#optionViews .hide { #optionViews .hide {
display: none; display: none;
} }
a {
color: ${styles.rightPanel.text_link};
}
.menu { .menu {
display: flex; display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
} }
.options { .options {
float: left; float: left;
...@@ -63,10 +67,13 @@ var css = csjs` ...@@ -63,10 +67,13 @@ var css = csjs`
.opts_li { .opts_li {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary}; color: ${styles.rightPanel.text_Primary};
} }
.opts_li:hover { .opts_li:hover {
color: ${styles.rightPanel.text_Secondary}; color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
} }
.dragbar { .dragbar {
position : absolute; position : absolute;
...@@ -131,7 +138,6 @@ function RighthandPanel (appAPI, events, opts) { ...@@ -131,7 +138,6 @@ function RighthandPanel (appAPI, events, opts) {
${self._view.dragbar} ${self._view.dragbar}
<div id="header" class=${css.header}> <div id="header" class=${css.header}>
<div class=${css.menu}> <div class=${css.menu}>
<img class=${css.solIcon} title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
${options} ${options}
</div> </div>
${optionViews} ${optionViews}
......
src/app/panels/terminal.js
View file @ 803b6fe1
...@@ -27,7 +27,6 @@ var css = csjs` ...@@ -27,7 +27,6 @@ var css = csjs`
min-height : 1.7em; min-height : 1.7em;
overflow : hidden; overflow : hidden;
} }
.bar { .bar {
display : flex; display : flex;
min-height : 3em; min-height : 3em;
...@@ -63,7 +62,7 @@ var css = csjs` ...@@ -63,7 +62,7 @@ var css = csjs`
.toggleTerminal:hover { .toggleTerminal:hover {
color : ${styles.terminal.icon_HoverColor_TogglePanel}; color : ${styles.terminal.icon_HoverColor_TogglePanel};
} }
.terminal { .terminal_container {
background-color : ${styles.terminal.backgroundColor_Terminal}; background-color : ${styles.terminal.backgroundColor_Terminal};
display : flex; display : flex;
flex-direction : column; flex-direction : column;
...@@ -74,19 +73,32 @@ var css = csjs` ...@@ -74,19 +73,32 @@ var css = csjs`
overflow-y : auto; overflow-y : auto;
font-family : monospace; font-family : monospace;
} }
.terminal::after { .terminal_bg {
content : ""; display : flex;
background-image : url(assets/img/remix_logo_512x512.svg); flex-direction : column;
height : 100%;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
overflow-y : auto;
font-family : monospace;
background-image : ${styles.terminal.backgroundImage_Terminal};
opacity : 0.1; opacity : 0.1;
top : 15%; top : 15%;
left : 33%; left : 33%;
bottom : 0; bottom : 0;
right : 0; right : 0;
position : absolute; position : absolute;
z-index : -1;
background-repeat : no-repeat; background-repeat : no-repeat;
background-size : 45%; background-size : 45%;
} }
.terminal {
position: relative;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.journal { .journal {
margin-top : auto; margin-top : auto;
font-family : monospace; font-family : monospace;
...@@ -101,13 +113,17 @@ var css = csjs` ...@@ -101,13 +113,17 @@ var css = csjs`
.cli { .cli {
line-height : 1.7em; line-height : 1.7em;
font-family : monospace; font-family : monospace;
background-color : ${styles.terminal.backgroundColor_TerminalCLI};
padding : .4em;
color : ${styles.appProperties.mainText_Color};
border-top : solid 2px ${styles.terminal.bar_Ghost};
} }
.prompt { .prompt {
margin-right : 0.5em; margin-right : 0.5em;
font-family : monospace; font-family : monospace;
font-weight : bold; font-weight : bold;
font-size : large; font-size : large;
color : ${styles.colors.black}; color : ${styles.appProperties.supportText_OppositeColor};
} }
.input { .input {
word-break : break-all; word-break : break-all;
...@@ -273,9 +289,13 @@ class Terminal { ...@@ -273,9 +289,13 @@ class Terminal {
} }
self._view.term = yo` self._view.term = yo`
<div class=${css.terminal} onscroll=${throttle(reattach, 10)} onclick=${focusinput}> <div class=${css.terminal_container} onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
${self._view.journal} <div class=${css.terminal_bg}>
${self._view.cli} </div>
<div class=${css.terminal}>
${self._view.journal}
${self._view.cli}
</div>
</div> </div>
` `
self._view.el = yo` self._view.el = yo`
......
src/app/tabs/run-tab.js
View file @ 803b6fe1
...@@ -114,7 +114,7 @@ var css = csjs` ...@@ -114,7 +114,7 @@ var css = csjs`
font-style: italic; font-style: italic;
} }
.pendingTxsText { .pendingTxsText {
${styles.rightPanel.runTab.box_Instance} ${styles.rightPanel.runTab.borderBox_Instance}
font-style: italic; font-style: italic;
} }
.item { .item {
......
src/app/tabs/tabbed-menu.js
View file @ 803b6fe1
...@@ -9,8 +9,9 @@ var styles = styleGuide() ...@@ -9,8 +9,9 @@ var styles = styleGuide()
module.exports = tabbedMenu module.exports = tabbedMenu
var css = csjs` var css = csjs`
.active { li.active {
background-color: ${styles.rightPanel.backgroundColor_Tab}; background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color};
} }
` `
......
src/app/ui/modaldialog.js
View file @ 803b6fe1
...@@ -26,9 +26,16 @@ var css = csjs` ...@@ -26,9 +26,16 @@ var css = csjs`
} }
.modalBody { .modalBody {
background-color: ${styles.remix.modalDialog_BackgroundColor_Primary}; background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
color: ${styles.remix.modalDialog_text_Primary};
padding: 1.5em; padding: 1.5em;
line-height: 1.5em; line-height: 1.5em;
} }
.modalBody em{
color: ${styles.remix.modalDialog_text_Em};
}
.modalBody a{
color: ${styles.remix.modalDialog_text_Link};
}
.modalFooter { .modalFooter {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
src/app/ui/renderer.js
View file @ 803b6fe1
...@@ -53,7 +53,6 @@ var css = yo`<style> ...@@ -53,7 +53,6 @@ var css = yo`<style>
.sol.warning { .sol.warning {
background-color: ${styles.rightPanel.message_Warning_BackgroundColor}; background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Warning_BorderColor};
color: ${styles.rightPanel.message_Warning_Color}; color: ${styles.rightPanel.message_Warning_Color};
} }
......
src/universal-dapp.js
View file @ 803b6fe1
...@@ -28,14 +28,13 @@ var css = csjs` ...@@ -28,14 +28,13 @@ var css = csjs`
align-items: center; align-items: center;
} }
.title { .title {
${styles.rightPanel.runTab.dropdown_RunTab} ${styles.rightPanel.runTab.titlebox_RunTab}
margin-top: 5px;
display: flex; display: flex;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
font-size: 11px; font-size: 11px;
height: 30px; height: 30px;
min-width: 100%; width: 97%;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
line-height: initial; line-height: initial;
...@@ -50,10 +49,14 @@ var css = csjs` ...@@ -50,10 +49,14 @@ var css = csjs`
word-break: break-word; word-break: break-word;
min-width: 230px; min-width: 230px;
} }
.title .copy {
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
}
.instance { .instance {
${styles.rightPanel.runTab.box_Instance} ${styles.rightPanel.runTab.box_Instance};
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px 15px 6px 15px; padding: 10px 15px 15px 15px;
} }
.instance .title:before { .instance .title:before {
content: "\\25BE"; content: "\\25BE";
...@@ -97,36 +100,44 @@ var css = csjs` ...@@ -97,36 +100,44 @@ var css = csjs`
width: 75%; width: 75%;
padding: .36em; padding: .36em;
} }
// .call {
// background-color: ${styles.colors.lightRed};
// border-color: ${styles.colors.lightRed};
// }
// .constant .call {
// background-color: ${styles.colors.lightBlue};
// border-color: ${styles.colors.lightBlue};
// width: 25%;
// outline: none;
// }
// .payable .call {
// background-color: ${styles.colors.red};
// border-color: ${styles.colors.red};
// width: 25%;
// }
.contractProperty button { .contractProperty button {
border-radius : 3px; ${styles.rightPanel.runTab.button_Create}
border : .3px solid #dddddd; min-width: 100px;
cursor : pointer; width: 100px;
min-height : 25px; font-size: 10px;
max-height : 25px; margin:0;
padding : 3px; word-break: inherit;
min-width : 100px;
width : 25%;
font-size : 10px;
} }
.contractProperty button:disabled { .contractProperty button:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: white; background-color: white;
border-color: lightgray; border-color: lightgray;
} }
.call { .contractProperty.constant button {
background-color: ${styles.colors.lightRed}; ${styles.rightPanel.runTab.button_Constant}
border-color: ${styles.colors.lightRed}; min-width: 100px;
} width: 100px;
.constant .call { font-size: 10px;
background-color: ${styles.colors.lightBlue}; margin:0;
border-color: ${styles.colors.lightBlue}; word-break: inherit;
width: 25%;
outline: none; outline: none;
} width: inherit;
.payable .call {
background-color: ${styles.colors.red};
border-color: ${styles.colors.red};
width: 25%;
} }
.contractProperty input { .contractProperty input {
display: none; display: none;
...@@ -135,7 +146,7 @@ var css = csjs` ...@@ -135,7 +146,7 @@ var css = csjs`
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
align-self: center; align-self: center;
color: ${styles.colors.grey}; color: ${styles.colors.white};
} }
.hasArgs input { .hasArgs input {
display: block; display: block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment