Skip to content

Commit b60f3cb

Browse files
ioedeveloperioedeveloper
authored
Merge pull request #1908 from ethereum/TerminalStyleImprovements
Terminal fixes
2 parents 35614dc + 86c09da commit b60f3cb

19 files changed

+33484
-620
lines changed

‎apps/remix-ide-e2e/src/tests/defaultLayout.test.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,15 @@ module.exports = {
5050

5151
'Toggles Terminal': function (browser: NightwatchBrowser) {
5252
browser.waitForElementVisible('div[data-id="terminalContainer"]')
53-
.assert.elementPresent('div[data-id="terminalContainerDisplay"]')
53+
.assert.elementPresent('div[data-id="terminalCli"]')
54+
.assert.elementPresent('div[data-id="terminalContainer"]')
55+
.waitForElementVisible('div[data-id="terminalContainer"]')
56+
.waitForElementVisible('div[data-id="terminalCli"]')
5457
.click('i[data-id="terminalToggleIcon"]')
5558
.checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px')
59+
.assert.not.elementPresent('div[data-id="terminalCli"]')
5660
.click('i[data-id="terminalToggleIcon"]')
57-
.assert.elementPresent('div[data-id="terminalContainerDisplay"]')
61+
.waitForElementVisible('div[data-id="terminalCli"]')
5862
},
5963

6064
'Switch Tabs using tabs icon': function (browser: NightwatchBrowser) {

‎apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css‎

Lines changed: 8533 additions & 10 deletions
Large diffs are not rendered by default.

‎apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css‎

Lines changed: 8661 additions & 10 deletions
Large diffs are not rendered by default.

‎apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css‎

Lines changed: 7203 additions & 10 deletions
Large diffs are not rendered by default.

‎apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css‎

Lines changed: 8635 additions & 10 deletions
Large diffs are not rendered by default.

‎apps/remix-ide/src/assets/css/themes/remix-black_undtds.css‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
--light: #1f2020;
2323
--dark: #1a1a1a;
2424
--text: #babbcc;
25+
--body-bg: #1a1a1a;
2526
--breakpoint-xs: 0;
2627
--breakpoint-sm: 576px;
2728
--breakpoint-md: 768px;
@@ -66,7 +67,7 @@ body {
6667
line-height: 1.5;
6768
color: #b3b3b3;
6869
text-align: left;
69-
background-color: #1a1a1a;
70+
background-color: var(--body-bg);
7071
}
7172
*::-webkit-scrollbar {
7273
width: 8px;
@@ -1638,7 +1639,7 @@ pre code {
16381639
}
16391640
.form-control:focus {
16401641
color: #aaaaaa;
1641-
background-color: #1a1a1a;
1642+
background-color: var(--body-bg);
16421643
border-color: #6d7172;
16431644
outline: 0;
16441645
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
@@ -1655,7 +1656,7 @@ pre code {
16551656
}
16561657
select.form-control:focus::-ms-value {
16571658
color: #aaaaaa;
1658-
background-color: #1a1a1a;
1659+
background-color: var(--body-bg);
16591660
}
16601661
.form-control-file,
16611662
.form-control-range {
@@ -2361,8 +2362,8 @@ fieldset:disabled a.btn {
23612362
}
23622363
.btn-dark {
23632364
color: #d5d5d5;
2364-
background-color: #1a1a1a;
2365-
border-color: #1a1a1a;
2365+
background-color: var(--body-bg);
2366+
border-color: var(--body-bg);
23662367
}
23672368
.btn-dark:hover {
23682369
color: #d5d5d5;
@@ -2376,8 +2377,8 @@ fieldset:disabled a.btn {
23762377
.btn-dark.disabled,
23772378
.btn-dark:disabled {
23782379
color: #d5d5d5;
2379-
background-color: #1a1a1a;
2380-
border-color: #1a1a1a;
2380+
background-color: var(--body-bg);
2381+
border-color: var(--body-bg);
23812382
}
23822383
.btn-dark:not(:disabled):not(.disabled).active,
23832384
.btn-dark:not(:disabled):not(.disabled):active,
@@ -2602,29 +2603,29 @@ fieldset:disabled a.btn {
26022603
box-shadow: 0 0 0 0.2rem rgba(42, 44, 63, 0.5);
26032604
}
26042605
.btn-outline-dark {
2605-
color: #1a1a1a;
2606-
border-color: #1a1a1a;
2606+
color: var(--body-bg);
2607+
border-color: var(--body-bg);
26072608
}
26082609
.btn-outline-dark:hover {
26092610
color: #d5d5d5;
2610-
background-color: #1a1a1a;
2611-
border-color: #1a1a1a;
2611+
background-color: var(--body-bg);
2612+
border-color: var(--body-bg);
26122613
}
26132614
.btn-outline-dark.focus,
26142615
.btn-outline-dark:focus {
26152616
box-shadow: 0 0 0 0.2rem rgba(34, 35, 54, 0.5);
26162617
}
26172618
.btn-outline-dark.disabled,
26182619
.btn-outline-dark:disabled {
2619-
color: #1a1a1a;
2620+
color: var(--body-bg);
26202621
background-color: transparent;
26212622
}
26222623
.btn-outline-dark:not(:disabled):not(.disabled).active,
26232624
.btn-outline-dark:not(:disabled):not(.disabled):active,
26242625
.show > .btn-outline-dark.dropdown-toggle {
26252626
color: #d5d5d5;
2626-
background-color: #1a1a1a;
2627-
border-color: #1a1a1a;
2627+
background-color: var(--body-bg);
2628+
border-color: var(--body-bg);
26282629
}
26292630
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
26302631
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
@@ -3359,7 +3360,7 @@ input[type="submit"].btn-block {
33593360
}
33603361
.custom-select:focus::-ms-value {
33613362
color: #aaaaaa;
3362-
background-color: #1a1a1a;
3363+
background-color: var(--body-bg);
33633364
}
33643365
.custom-select[multiple],
33653366
.custom-select[size]:not([size="1"]) {
@@ -3427,7 +3428,7 @@ input[type="submit"].btn-block {
34273428
font-weight: 400;
34283429
line-height: 1.25;
34293430
color: #aaaaaa;
3430-
background-color: #1a1a1a;
3431+
background-color: var(--body-bg);
34313432
border: 1px solid transparent;
34323433
border-radius: 2px;
34333434
}
@@ -3458,15 +3459,15 @@ input[type="submit"].btn-block {
34583459
outline: 0;
34593460
}
34603461
.custom-range:focus::-webkit-slider-thumb {
3461-
box-shadow: 0 0 0 1px #1a1a1a, inset 0 1px 1px rgba(0, 0, 0, 0.075),
3462+
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
34623463
0 0 0 3px rgba(0, 122, 166, 0.25);
34633464
}
34643465
.custom-range:focus::-moz-range-thumb {
3465-
box-shadow: 0 0 0 1px #1a1a1a, inset 0 1px 1px rgba(0, 0, 0, 0.075),
3466+
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
34663467
0 0 0 3px rgba(0, 122, 166, 0.25);
34673468
}
34683469
.custom-range:focus::-ms-thumb {
3469-
box-shadow: 0 0 0 1px #1a1a1a, inset 0 1px 1px rgba(0, 0, 0, 0.075),
3470+
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
34703471
0 0 0 3px rgba(0, 122, 166, 0.25);
34713472
}
34723473
.custom-range::-moz-focus-outer {
@@ -4423,7 +4424,7 @@ a.badge-light:focus {
44234424
}
44244425
.badge-dark {
44254426
color: #d5d5d5;
4426-
background-color: #1a1a1a;
4427+
background-color: var(--body-bg);
44274428
}
44284429
a.badge-dark:focus,
44294430
a.badge-dark:hover {
@@ -5040,7 +5041,7 @@ a.close.disabled {
50405041
width: 100%;
50415042
color: #d5d5d5;
50425043
pointer-events: auto;
5043-
background-color: #1a1a1a;
5044+
background-color: var(--body-bg);
50445045
background-clip: padding-box;
50455046
border: 1px solid #000000;
50465047
border-radius: 2px;
@@ -5691,7 +5692,7 @@ button.bg-light:hover {
56915692
background-color: #161720 !important;
56925693
}
56935694
.bg-dark {
5694-
background-color: #1a1a1a !important;
5695+
background-color: var(--body-bg) !important;
56955696
}
56965697
a.bg-dark:focus,
56975698
a.bg-dark:hover,
@@ -8711,16 +8712,16 @@ a.text-dark:hover {
87118712

87128713
/* Plugins manager */
87138714
.plugin-manager {
8714-
background: #1a1a1a;
8715+
background: var(--body-bg);
87158716
}
87168717
.plugins-header {
8717-
background-color: #1a1a1a !important;
8718+
background-color: var(--body-bg) !important;
87188719
border-bottom: 1px solid #000000 !important;
87198720
}
87208721
.plugins-list-header {
87218722
justify-content: flex-start !important;
87228723
padding: 1rem 1.5rem;
8723-
background-color: #1a1a1a !important
8724+
background-color: var(--body-bg) !important
87248725
}
87258726
.plugins-list-title {
87268727
margin: 0 0.5rem 0 0 !important;

‎apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
--light: #fff;
2222
--dark: #645fb5;
2323
--text: #11556c;
24+
--body-bg: #d5efff;
2425
--breakpoint-xs: 0;
2526
--breakpoint-sm: 576px;
2627
--breakpoint-md: 768px;
@@ -69,7 +70,7 @@ body {
6970
line-height: 1.5;
7071
color: #0f7292;
7172
text-align: left;
72-
background-color: #d5efff;
73+
background-color: var(--body-bg);
7374
}
7475

7576
[tabindex="-1"]:focus {

‎apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
--dark: #222336;
2424
--text: #babbcc;
2525
--text-background: #222336;
26+
--body-bg: #222336;
2627
--breakpoint-xs: 0;
2728
--breakpoint-sm: 576px;
2829
--breakpoint-md: 768px;
@@ -67,7 +68,7 @@ body {
6768
line-height: 1.5;
6869
color: #A2A3BD;
6970
text-align: left;
70-
background-color: #222336;
71+
background-color: var(--body-bg);
7172
}
7273
*::-webkit-scrollbar {
7374
width: 8px;
@@ -448,7 +449,7 @@ mark {
448449
}
449450
.img-thumbnail {
450451
padding: 0.25rem;
451-
background-color: #222336;
452+
background-color: var(--body-bg);
452453
border: 1px solid #ddd;
453454
border-radius: 2px;
454455
max-width: 100%;
@@ -1364,7 +1365,7 @@ pre code {
13641365
border: 0;
13651366
}
13661367
.table-striped tbody tr:nth-of-type(odd) {
1367-
background-color: #222336;
1368+
background-color: var(--body-bg);
13681369
}
13691370
.table-hover tbody tr:hover {
13701371
color: #fff;
@@ -1533,7 +1534,7 @@ pre code {
15331534
}
15341535
.table .thead-light th {
15351536
color: #fff;
1536-
background-color: #222336;
1537+
background-color: var(--body-bg);
15371538
border-color: #51536b;
15381539
}
15391540
.table-dark {
@@ -2353,8 +2354,8 @@ fieldset:disabled a.btn {
23532354
}
23542355
.btn-dark {
23552356
color: #fff;
2356-
background-color: #222336;
2357-
border-color: #222336;
2357+
background-color: var(--body-bg);
2358+
border-color: var(--body-bg);
23582359
}
23592360
.btn-dark:hover {
23602361
color: #fff;
@@ -2368,8 +2369,8 @@ fieldset:disabled a.btn {
23682369
.btn-dark.disabled,
23692370
.btn-dark:disabled {
23702371
color: #fff;
2371-
background-color: #222336;
2372-
border-color: #222336;
2372+
background-color: var(--body-bg);
2373+
border-color: var(--body-bg);
23732374
}
23742375
.btn-dark:not(:disabled):not(.disabled).active,
23752376
.btn-dark:not(:disabled):not(.disabled):active,
@@ -2594,29 +2595,29 @@ fieldset:disabled a.btn {
25942595
box-shadow: 0 0 0 0.2rem rgba(42, 44, 63, 0.5);
25952596
}
25962597
.btn-outline-dark {
2597-
color: #222336;
2598-
border-color: #222336;
2598+
color: var(--body-bg);
2599+
border-color: var(--body-bg);
25992600
}
26002601
.btn-outline-dark:hover {
26012602
color: #fff;
2602-
background-color: #222336;
2603-
border-color: #222336;
2603+
background-color: var(--body-bg);
2604+
border-color: var(--body-bg);
26042605
}
26052606
.btn-outline-dark.focus,
26062607
.btn-outline-dark:focus {
26072608
box-shadow: 0 0 0 0.2rem rgba(34, 35, 54, 0.5);
26082609
}
26092610
.btn-outline-dark.disabled,
26102611
.btn-outline-dark:disabled {
2611-
color: #222336;
2612+
color: var(--body-bg);
26122613
background-color: transparent;
26132614
}
26142615
.btn-outline-dark:not(:disabled):not(.disabled).active,
26152616
.btn-outline-dark:not(:disabled):not(.disabled):active,
26162617
.show > .btn-outline-dark.dropdown-toggle {
26172618
color: #fff;
2618-
background-color: #222336;
2619-
border-color: #222336;
2619+
background-color: var(--body-bg);
2620+
border-color: var(--body-bg);
26202621
}
26212622
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
26222623
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
@@ -3454,15 +3455,15 @@ input[type="submit"].btn-block {
34543455
outline: 0;
34553456
}
34563457
.custom-range:focus::-webkit-slider-thumb {
3457-
box-shadow: 0 0 0 1px #222336, inset 0 1px 1px rgba(0, 0, 0, 0.075),
3458+
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
34583459
0 0 0 3px rgba(0, 122, 166, 0.25);
34593460
}
34603461
.custom-range:focus::-moz-range-thumb {
3461-
box-shadow: 0 0 0 1px #222336, inset 0 1px 1px rgba(0, 0, 0, 0.075),
3462+
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
34623463
0 0 0 3px rgba(0, 122, 166, 0.25);
34633464
}
34643465
.custom-range:focus::-ms-thumb {
3465-
box-shadow: 0 0 0 1px #222336, inset 0 1px 1px rgba(0, 0, 0, 0.075),
3466+
box-shadow: 0 0 0 1px var(--body-bg), inset 0 1px 1px rgba(0, 0, 0, 0.075),
34663467
0 0 0 3px rgba(0, 122, 166, 0.25);
34673468
}
34683469
.custom-range::-moz-focus-outer {
@@ -3633,7 +3634,7 @@ input[type="submit"].btn-block {
36333634
.nav-tabs .nav-item.show .nav-link,
36343635
.nav-tabs .nav-link.active {
36353636
color: #fff;
3636-
background-color: #222336;
3637+
background-color: var(--body-bg);
36373638
border-color: #3f4455;
36383639
}
36393640
.nav-tabs .dropdown-menu {
@@ -4419,7 +4420,7 @@ a.badge-light:focus {
44194420
}
44204421
.badge-dark {
44214422
color: #fff;
4422-
background-color: #222336;
4423+
background-color: var(--body-bg);
44234424
}
44244425
a.badge-dark:focus,
44254426
a.badge-dark:hover {
@@ -5036,7 +5037,7 @@ a.close.disabled {
50365037
width: 100%;
50375038
color: #fff;
50385039
pointer-events: auto;
5039-
background-color: #222336;
5040+
background-color: var(--body-bg);
50405041
background-clip: padding-box;
50415042
border: 1px solid #2c3244;
50425043
border-radius: 2px;
@@ -5687,7 +5688,7 @@ button.bg-light:hover {
56875688
background-color: #161720 !important;
56885689
}
56895690
.bg-dark {
5690-
background-color: #222336 !important;
5691+
background-color: var(--body-bg) !important;
56915692
}
56925693
a.bg-dark:focus,
56935694
a.bg-dark:hover,
@@ -8707,16 +8708,16 @@ a.text-dark:hover {
87078708

87088709
/* Plugins manager */
87098710
.plugin-manager {
8710-
background: #222336;
8711+
background: var(--body-bg);
87118712
}
87128713
.plugins-header {
8713-
background-color: #222336 !important;
8714+
background-color: var(--body-bg) !important;
87148715
border-bottom: 1px solid #2C3244 !important;
87158716
}
87168717
.plugins-list-header {
87178718
justify-content: flex-start !important;
87188719
padding: 1rem 1.5rem;
8719-
background-color: #222336 !important
8720+
background-color: var(--body-bg) !important
87208721
}
87218722
.plugins-list-title {
87228723
margin: 0 0.5rem 0 0 !important;

0 commit comments

Comments
 (0)