fixed stile of external themes. fixed cli style in terminal

pull/5370/head
lianahus 3 years ago
parent 25e5ba7e1d
commit 79f5dbee0b
  1. 8543
      apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
  2. 8671
      apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
  3. 7213
      apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
  4. 8645
      apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
  5. 51
      apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
  6. 3
      apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
  7. 51
      apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
  8. 20
      apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
  9. 3
      apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
  10. 9
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
  11. 4
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -22,6 +22,7 @@
--light: #1f2020;
--dark: #1a1a1a;
--text: #babbcc;
--body-bg: #1a1a1a;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
@ -66,7 +67,7 @@ body {
line-height: 1.5;
color: #b3b3b3;
text-align: left;
background-color: #1a1a1a;
background-color: var(--body-bg);
}
*::-webkit-scrollbar {
width: 8px;
@ -1638,7 +1639,7 @@ pre code {
}
.form-control:focus {
color: #aaaaaa;
background-color: #1a1a1a;
background-color: var(--body-bg);
border-color: #6d7172;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
@ -1655,7 +1656,7 @@ pre code {
}
select.form-control:focus::-ms-value {
color: #aaaaaa;
background-color: #1a1a1a;
background-color: var(--body-bg);
}
.form-control-file,
.form-control-range {
@ -2361,8 +2362,8 @@ fieldset:disabled a.btn {
}
.btn-dark {
color: #d5d5d5;
background-color: #1a1a1a;
border-color: #1a1a1a;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-dark:hover {
color: #d5d5d5;
@ -2376,8 +2377,8 @@ fieldset:disabled a.btn {
.btn-dark.disabled,
.btn-dark:disabled {
color: #d5d5d5;
background-color: #1a1a1a;
border-color: #1a1a1a;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active,
@ -2602,13 +2603,13 @@ fieldset:disabled a.btn {
box-shadow: 0 0 0 0.2rem rgba(42, 44, 63, 0.5);
}
.btn-outline-dark {
color: #1a1a1a;
border-color: #1a1a1a;
color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-outline-dark:hover {
color: #d5d5d5;
background-color: #1a1a1a;
border-color: #1a1a1a;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-outline-dark.focus,
.btn-outline-dark:focus {
@ -2616,15 +2617,15 @@ fieldset:disabled a.btn {
}
.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
color: #1a1a1a;
color: var(--body-bg);
background-color: transparent;
}
.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):active,
.show > .btn-outline-dark.dropdown-toggle {
color: #d5d5d5;
background-color: #1a1a1a;
border-color: #1a1a1a;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
@ -3359,7 +3360,7 @@ input[type="submit"].btn-block {
}
.custom-select:focus::-ms-value {
color: #aaaaaa;
background-color: #1a1a1a;
background-color: var(--body-bg);
}
.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
@ -3427,7 +3428,7 @@ input[type="submit"].btn-block {
font-weight: 400;
line-height: 1.25;
color: #aaaaaa;
background-color: #1a1a1a;
background-color: var(--body-bg);
border: 1px solid transparent;
border-radius: 2px;
}
@ -3458,15 +3459,15 @@ input[type="submit"].btn-block {
outline: 0;
}
.custom-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #1a1a1a, inset 0 1px 1px rgba(0, 0, 0, 0.075),
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 0 3px rgba(0, 122, 166, 0.25);
}
.custom-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #1a1a1a, inset 0 1px 1px rgba(0, 0, 0, 0.075),
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 0 3px rgba(0, 122, 166, 0.25);
}
.custom-range:focus::-ms-thumb {
box-shadow: 0 0 0 1px #1a1a1a, inset 0 1px 1px rgba(0, 0, 0, 0.075),
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 0 3px rgba(0, 122, 166, 0.25);
}
.custom-range::-moz-focus-outer {
@ -4423,7 +4424,7 @@ a.badge-light:focus {
}
.badge-dark {
color: #d5d5d5;
background-color: #1a1a1a;
background-color: var(--body-bg);
}
a.badge-dark:focus,
a.badge-dark:hover {
@ -5040,7 +5041,7 @@ a.close.disabled {
width: 100%;
color: #d5d5d5;
pointer-events: auto;
background-color: #1a1a1a;
background-color: var(--body-bg);
background-clip: padding-box;
border: 1px solid #000000;
border-radius: 2px;
@ -5691,7 +5692,7 @@ button.bg-light:hover {
background-color: #161720 !important;
}
.bg-dark {
background-color: #1a1a1a !important;
background-color: var(--body-bg) !important;
}
a.bg-dark:focus,
a.bg-dark:hover,
@ -8711,16 +8712,16 @@ a.text-dark:hover {
/* Plugins manager */
.plugin-manager {
background: #1a1a1a;
background: var(--body-bg);
}
.plugins-header {
background-color: #1a1a1a !important;
background-color: var(--body-bg) !important;
border-bottom: 1px solid #000000 !important;
}
.plugins-list-header {
justify-content: flex-start !important;
padding: 1rem 1.5rem;
background-color: #1a1a1a !important
background-color: var(--body-bg) !important
}
.plugins-list-title {
margin: 0 0.5rem 0 0 !important;

@ -21,6 +21,7 @@
--light: #fff;
--dark: #645fb5;
--text: #11556c;
--body-bg: #d5efff;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
@ -69,7 +70,7 @@ body {
line-height: 1.5;
color: #0f7292;
text-align: left;
background-color: #d5efff;
background-color: var(--body-bg);
}
[tabindex="-1"]:focus {

@ -23,6 +23,7 @@
--dark: #222336;
--text: #babbcc;
--text-background: #222336;
--body-bg: #222336;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
@ -67,7 +68,7 @@ body {
line-height: 1.5;
color: #A2A3BD;
text-align: left;
background-color: #222336;
background-color: var(--body-bg);
}
*::-webkit-scrollbar {
width: 8px;
@ -448,7 +449,7 @@ mark {
}
.img-thumbnail {
padding: 0.25rem;
background-color: #222336;
background-color: var(--body-bg);
border: 1px solid #ddd;
border-radius: 2px;
max-width: 100%;
@ -1364,7 +1365,7 @@ pre code {
border: 0;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #222336;
background-color: var(--body-bg);
}
.table-hover tbody tr:hover {
color: #fff;
@ -1533,7 +1534,7 @@ pre code {
}
.table .thead-light th {
color: #fff;
background-color: #222336;
background-color: var(--body-bg);
border-color: #51536b;
}
.table-dark {
@ -2353,8 +2354,8 @@ fieldset:disabled a.btn {
}
.btn-dark {
color: #fff;
background-color: #222336;
border-color: #222336;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-dark:hover {
color: #fff;
@ -2368,8 +2369,8 @@ fieldset:disabled a.btn {
.btn-dark.disabled,
.btn-dark:disabled {
color: #fff;
background-color: #222336;
border-color: #222336;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active,
@ -2594,13 +2595,13 @@ fieldset:disabled a.btn {
box-shadow: 0 0 0 0.2rem rgba(42, 44, 63, 0.5);
}
.btn-outline-dark {
color: #222336;
border-color: #222336;
color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-outline-dark:hover {
color: #fff;
background-color: #222336;
border-color: #222336;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-outline-dark.focus,
.btn-outline-dark:focus {
@ -2608,15 +2609,15 @@ fieldset:disabled a.btn {
}
.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
color: #222336;
color: var(--body-bg);
background-color: transparent;
}
.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):active,
.show > .btn-outline-dark.dropdown-toggle {
color: #fff;
background-color: #222336;
border-color: #222336;
background-color: var(--body-bg);
border-color: var(--body-bg);
}
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
@ -3454,15 +3455,15 @@ input[type="submit"].btn-block {
outline: 0;
}
.custom-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #222336, inset 0 1px 1px rgba(0, 0, 0, 0.075),
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 0 3px rgba(0, 122, 166, 0.25);
}
.custom-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #222336, inset 0 1px 1px rgba(0, 0, 0, 0.075),
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 0 3px rgba(0, 122, 166, 0.25);
}
.custom-range:focus::-ms-thumb {
box-shadow: 0 0 0 1px #222336, inset 0 1px 1px rgba(0, 0, 0, 0.075),
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 0 3px rgba(0, 122, 166, 0.25);
}
.custom-range::-moz-focus-outer {
@ -3633,7 +3634,7 @@ input[type="submit"].btn-block {
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: #fff;
background-color: #222336;
background-color: var(--body-bg);
border-color: #3f4455;
}
.nav-tabs .dropdown-menu {
@ -4419,7 +4420,7 @@ a.badge-light:focus {
}
.badge-dark {
color: #fff;
background-color: #222336;
background-color: var(--body-bg);
}
a.badge-dark:focus,
a.badge-dark:hover {
@ -5036,7 +5037,7 @@ a.close.disabled {
width: 100%;
color: #fff;
pointer-events: auto;
background-color: #222336;
background-color: var(--body-bg);
background-clip: padding-box;
border: 1px solid #2c3244;
border-radius: 2px;
@ -5687,7 +5688,7 @@ button.bg-light:hover {
background-color: #161720 !important;
}
.bg-dark {
background-color: #222336 !important;
background-color: var(--body-bg) !important;
}
a.bg-dark:focus,
a.bg-dark:hover,
@ -8707,16 +8708,16 @@ a.text-dark:hover {
/* Plugins manager */
.plugin-manager {
background: #222336;
background: var(--body-bg);
}
.plugins-header {
background-color: #222336 !important;
background-color: var(--body-bg) !important;
border-bottom: 1px solid #2C3244 !important;
}
.plugins-list-header {
justify-content: flex-start !important;
padding: 1rem 1.5rem;
background-color: #222336 !important
background-color: var(--body-bg) !important
}
.plugins-list-title {
margin: 0 0.5rem 0 0 !important;

@ -21,6 +21,7 @@
--light: #fff;
--dark: #f8fafe;
--text: #3b445e;
--body-bg: #eef1f6;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
@ -69,7 +70,7 @@ body {
line-height: 1.5;
color: #2e3145;
text-align: left;
background-color: #eef1f6;
background-color: var(--body-bg);
}
[tabindex="-1"]:focus {
@ -517,7 +518,7 @@ mark,
.img-thumbnail {
padding: 0.25rem;
background-color: #eef1f6;
background-color: var(--body-bg);
border: 1px solid #dee2e6;
border-radius: 0.25rem;
max-width: 100%;
@ -1673,7 +1674,7 @@ pre code {
.table-active,
.table-active > th,
.table-active > td {
background-color: #eef1f6;
background-color: var(--body-bg);
}
.table-hover .table-active:hover {
@ -3767,13 +3768,13 @@ input[type="button"].btn-block {
outline: none;
}
.custom-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #eef1f6, 0px 0px 5px #00bbff;
box-shadow: 0 0 0 1px var(--body-bg), 0px 0px 5px #00bbff;
}
.custom-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #eef1f6, 0px 0px 5px #00bbff;
box-shadow: 0 0 0 1px var(--body-bg), 0px 0px 5px #00bbff;
}
.custom-range:focus::-ms-thumb {
box-shadow: 0 0 0 1px #eef1f6, 0px 0px 5px #00bbff;
box-shadow: 0 0 0 1px var(--body-bg), 0px 0px 5px #00bbff;
}
.custom-range::-moz-focus-outer {
border: 0;
@ -5482,7 +5483,7 @@ a.close.disabled {
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #eef1f6;
background-color: var(--body-bg);
background-clip: padding-box;
border: 1px solid #dfe1ea;
border-radius: 0.3rem;
@ -5496,7 +5497,7 @@ a.close.disabled {
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #eef1f6;
background-color: var(--body-bg);
}
.modal-backdrop.fade {
opacity: 0;
@ -9494,8 +9495,9 @@ a.text-dark:focus {
border: none !important;
}
.remix-bg-opacity {
background: rgba(248, 250, 254, 0.80) !important;
background: rgba(248, 250, 254, 0.80) !important;
}
.plugins-list-header {
background: transparent !important;
}

@ -21,6 +21,7 @@
--light: #eeede9;
--dark: #01414E;
--text: #11556c;
--body-bg: #DBE2E0;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
@ -69,7 +70,7 @@ body {
line-height: 1.5;
color: #062809;
text-align: left;
background-color: #DBE2E0;
background-color: var(--body-bg);
}
[tabindex="-1"]:focus {

@ -4,7 +4,8 @@ element.style {
}
#terminalCliInput{
width: 97%;
background: transparent;
font-weight: 800;
background: var(--body-bg)
}
#terminalCliInput:focus {
outline: none;
@ -40,6 +41,7 @@ element.style {
.remix_ui_terminal_journal {
margin-top : auto;
margin-bottom : 2rem;
font-family : monospace;
overflow-y : scroll;
}
@ -51,13 +53,14 @@ element.style {
.remix_ui_terminal_block > pre {
max-height : 200px;
}
.remix_ui_terminal_cli {
.remix_ui_terminal_cli {
white-space : nowrap;
line-height : 1.7em;
font-family : monospace;
padding : .4em;
color : var(--primary);
}
.remix_ui_terminal_prompt {
.remix_ui_terminal_prompt {
font-family : monospace;
}
.remix_ui_terminal_input {

@ -467,7 +467,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
handleAutoComplete()
}
<div className="position-relative d-flex flex-column-reverse h-100">
<div id='journal' className='remix_ui_terminal_journal d-flex flex-column pt-3 mb-4 pb-4 px-2 m-2 mr-0' data-id='terminalJournal'>
<div id='journal' className='remix_ui_terminal_journal d-flex flex-column pt-3 pb-4 px-2 mx-2 mr-0' data-id='terminalJournal'>
{!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}
{newstate.journalBlocks && newstate.journalBlocks.map((x, index) => {
if (x.name === EMPTY_BLOCK) {
@ -550,7 +550,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
{ isOpen && <div id="terminalCli" data-id="terminalCli" className="remix_ui_terminal_cli position-absolute w-100" onClick={focusinput}>
<span className="remix_ui_terminal_prompt blink mx-1 font-weight-bold text-dark">{'>'}</span>
<input
className="remix_ui_terminal_input ml-1 text-break border-0"
className="remix_ui_terminal_input ml-1 text-dark text-break border-0"
ref={inputEl}
spellCheck="false"
contentEditable="true"

Loading…
Cancel
Save