mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
Merge pull request #12538 from meteor/fix/meteor-3-add-css
[Meteor 3] Partial fix for stylesheets
This commit is contained in:
Gabriel Grubba
@@ -4,15 +4,19 @@
|
||||
/* for reference: https://tailwindcss.com/docs/customizing-colors */
|
||||
|
||||
--bg-black: #18181b;
|
||||
--neutral-black: #262626;
|
||||
--neutral-black: #343333;
|
||||
--primary-white: #F9FAFB;
|
||||
--red-50: #fef2f2;
|
||||
--red-200: #fecaca;
|
||||
--red-400: #ea5555;
|
||||
--red-600: #dc2626;
|
||||
--red-900: #7f1d1d;
|
||||
--gray-300: #d6d3d1;
|
||||
--gray-400: #a09d9a;
|
||||
--gray-500: #737373;
|
||||
|
||||
--blue-gray-400: #5f6373;
|
||||
|
||||
|
||||
--blue-500: #6366f1;
|
||||
--blue-50: #eef2ff;
|
||||
@@ -61,18 +65,17 @@ body {
|
||||
}
|
||||
|
||||
.header.pass {
|
||||
color: #16a34a; /* green */
|
||||
color: #16a34a;
|
||||
color: var(--green-600); /* green */
|
||||
}
|
||||
|
||||
.header.fail {
|
||||
color: #7f1d1d; /* red */
|
||||
color: var(--red-900); /* red */
|
||||
color: var(--red-400);
|
||||
color: #ea5555;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .time {
|
||||
color: var(--gray-500);
|
||||
color: #737373;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -83,8 +86,8 @@ body {
|
||||
}
|
||||
|
||||
.test_table .group {
|
||||
border-left: 1px solid #fef2f2;
|
||||
border-left: 1px solid var(--red-50);
|
||||
border-left: 1px solid #313131;
|
||||
border-left: 1px solid var(--neutral-black);
|
||||
}
|
||||
|
||||
.test_table .group .group {
|
||||
@@ -106,7 +109,7 @@ body {
|
||||
.test_table .groupname {
|
||||
font-weight: bold;
|
||||
background: var(--neutral-black);
|
||||
background: #262626;
|
||||
background: #313131;
|
||||
padding-left: 5px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
@@ -118,8 +121,8 @@ body {
|
||||
.test_table .event {
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
border-left: 2px solid var(--blue-50);
|
||||
border-left: 2px solid #eef2ff;
|
||||
border-left: 2px solid var(--blue-gray-400);
|
||||
border-left: 2px solid #5f6373;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -135,8 +138,8 @@ body {
|
||||
}
|
||||
|
||||
.test_table .failed .testname {
|
||||
color: var(--red-900);
|
||||
color: #7f1d1d;
|
||||
color: var(--red-400);
|
||||
color: #ea5555;
|
||||
}
|
||||
|
||||
.test_table .succeeded .testname {
|
||||
@@ -150,7 +153,7 @@ body {
|
||||
width: 100px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -178,9 +181,9 @@ body {
|
||||
}
|
||||
|
||||
.test_table .failed .teststatus {
|
||||
color: var(--red-900); /* red */
|
||||
color: var(--red-400); /* red */
|
||||
background: var(--bg-black);
|
||||
color: #7F1D1D; /* red */
|
||||
color: #ea5555; /* red */
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
@@ -190,21 +193,21 @@ body {
|
||||
}
|
||||
|
||||
.test_table .event .expected_fail {
|
||||
color: var(--red-900);
|
||||
color: #7f1d1d;
|
||||
color: var(--red-400);
|
||||
color: #ea5555;
|
||||
}
|
||||
|
||||
.test_table .event .fail {
|
||||
color: var(--red-600);
|
||||
color: #dc2626;
|
||||
color: var(--red-400);
|
||||
color: #ea5555;
|
||||
}
|
||||
|
||||
.test_table .event .exception {
|
||||
color: var(--red-600);
|
||||
color: #dc2626;
|
||||
color: var(--red-400);
|
||||
color: #ea5555;
|
||||
}
|
||||
|
||||
.exception pre {
|
||||
pre {
|
||||
color: var(--primary-white);
|
||||
color: #F9FAFB;
|
||||
}
|
||||
@@ -225,8 +228,8 @@ body {
|
||||
|
||||
.test_table .event:hover .debug {
|
||||
display: inline;
|
||||
color: var(--gray-500);
|
||||
color: #737373;
|
||||
color: var(--gray-400);
|
||||
color: #a09d9a;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -247,7 +250,6 @@ body {
|
||||
}
|
||||
|
||||
.string_equal_expected ins {
|
||||
background: var(--yellow-400);
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
@@ -265,6 +267,15 @@ body {
|
||||
}
|
||||
|
||||
.failedTests {
|
||||
color: var(--red-900);
|
||||
color: #7f1d1d;
|
||||
color: var(--red-400);
|
||||
color: #ea5555;
|
||||
}
|
||||
|
||||
#testProgressBar {
|
||||
background: --var(--blue-gray-400);
|
||||
background: #5f6373;
|
||||
}
|
||||
|
||||
.progress-bar.bg-warning {
|
||||
background-color: #f59e0b !important;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
|
||||
<template name="testInBrowserBody">
|
||||
{{> styles }}
|
||||
<div class="test-in-browser">
|
||||
{{> navBar}}
|
||||
<div class="test-results">
|
||||
@@ -176,282 +175,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template name="styles">
|
||||
<!--
|
||||
TODO FIBERS:
|
||||
TODO Remove this before 3.0 release
|
||||
TODO This is a workaround, brought the styles from driver.css until
|
||||
TODO I can figure out how to get them to load.
|
||||
-->
|
||||
<style>
|
||||
* {
|
||||
/* Variables */
|
||||
/* for reference: https://tailwindcss.com/docs/customizing-colors */
|
||||
|
||||
--bg-black: #18181b;
|
||||
--neutral-black: #262626;
|
||||
--primary-white: #F9FAFB;
|
||||
--red-50: #fef2f2;
|
||||
--red-200: #fecaca;
|
||||
--red-600: #dc2626;
|
||||
--red-900: #7f1d1d;
|
||||
--gray-300: #d6d3d1;
|
||||
--gray-500: #737373;
|
||||
|
||||
|
||||
--blue-500: #6366f1;
|
||||
--blue-50: #eef2ff;
|
||||
|
||||
--yellow-400: #facc15;
|
||||
|
||||
--green-600: #16a34a;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #18181b !important;
|
||||
background-color: var(--bg-black) !important;
|
||||
color: #F9FAFB !important;
|
||||
color: var(--primary-white) !important;
|
||||
|
||||
}
|
||||
|
||||
.test-in-browser {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.test-results {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#testProgressBar {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.header.in-progress {
|
||||
color: #fef2f2;
|
||||
color: var(--red-50);
|
||||
}
|
||||
|
||||
.header.pass {
|
||||
color: #16a34a; /* green */
|
||||
color: var(--green-600); /* green */
|
||||
}
|
||||
|
||||
.header.fail {
|
||||
color: #7f1d1d; /* red */
|
||||
color: var(--red-900); /* red */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .time {
|
||||
color: var(--gray-500);
|
||||
color: #737373;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.test_table {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.test_table .group {
|
||||
border-left: 1px solid #fef2f2;
|
||||
border-left: 1px solid var(--red-50);
|
||||
}
|
||||
|
||||
.test_table .group .group {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.test_table .test {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.test_table .testname {
|
||||
margin-left: 200px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.test_table .groupname {
|
||||
font-weight: bold;
|
||||
background: var(--neutral-black);
|
||||
background: #262626;
|
||||
padding-left: 5px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
color: var(--primary-white);
|
||||
color: #F9FAFB;
|
||||
}
|
||||
|
||||
.test_table .event {
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
border-left: 2px solid var(--blue-50);
|
||||
border-left: 2px solid #eef2ff;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.test_table .test .testrow {
|
||||
position: relative;
|
||||
overflow: hidden; /*hasLayout*/
|
||||
}
|
||||
|
||||
.test_table .running .testname {
|
||||
color: var(--blue-500);
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.test_table .failed .testname {
|
||||
color: var(--red-900);
|
||||
color: #7f1d1d;
|
||||
}
|
||||
|
||||
.test_table .succeeded .testname {
|
||||
color: var(--green-600);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.test_table .teststatus {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.test_table .testtime {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 75px;
|
||||
margin-right: 5px;
|
||||
left: 100px;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
color: var(--gray-500);
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.test_table .succeeded .teststatus {
|
||||
color: var(--green-600);
|
||||
background: var(--bg-black);
|
||||
color: #16a34a;
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.test_table .failed .teststatus {
|
||||
color: var(--red-900); /* red */
|
||||
background: var(--bg-black);
|
||||
color: #7F1D1D; /* red */
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.test_table .running .teststatus {
|
||||
color: var(--red-50);
|
||||
color: #fef2f2;
|
||||
}
|
||||
|
||||
.test_table .event .expected_fail {
|
||||
color: var(--red-900);
|
||||
color: #7f1d1d;
|
||||
}
|
||||
|
||||
.test_table .event .fail {
|
||||
color: var(--red-600);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.test_table .event .exception {
|
||||
color: var(--red-600);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.exception pre {
|
||||
color: var(--primary-white);
|
||||
color: #F9FAFB;
|
||||
}
|
||||
|
||||
.test_table .event .nodata {
|
||||
color: var(--red-50);
|
||||
color: #fef2f2;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.test_table .event .xtimes, .test_table .event .failkey {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.test_table .event .debug {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.test_table .event:hover .debug {
|
||||
display: inline;
|
||||
color: var(--gray-500);
|
||||
color: #737373;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.in-progress {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.string_equal {
|
||||
line-height: 1.2;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.string_equal ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.string_equal_expected ins {
|
||||
background: var(--yellow-400);
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
.string_equal_actual ins {
|
||||
color: var(--red-600);
|
||||
background: var(--red-200);
|
||||
color: #dc2626;
|
||||
background: #fecaca;
|
||||
}
|
||||
|
||||
#current-client-test {
|
||||
color: var(--gray-300);
|
||||
color: #d6d3d1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.failedTests {
|
||||
color: var(--red-900);
|
||||
color: #7f1d1d;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
|
||||
@@ -776,13 +776,16 @@ class ResourceSlot {
|
||||
// stub, so setting .implicit marks the resource as disposable.
|
||||
}).implicit = true;
|
||||
|
||||
if (! cssResource.lazy &&
|
||||
! Buffer.isBuffer(cssResource.data)) {
|
||||
// If there was an error processing this file, cssResource.data
|
||||
// will not be a Buffer, and accessing cssResource.data here
|
||||
// should cause the error to be reported via inputFile.error.
|
||||
return;
|
||||
}
|
||||
// TODO[FIBERS]: Look into this. We probably don't want addStylesheet
|
||||
// to be async, and I'm also not sure the old behavior here is what we wanted
|
||||
//
|
||||
// if (! cssResource.lazy &&s
|
||||
// ! Buffer.isBuffer(cssResource.data)) {
|
||||
// // If there was an error processing this file, cssResource.data
|
||||
// // will not be a Buffer, and accessing cssResource.data here
|
||||
// // should cause the error to be reported via inputFile.error.
|
||||
// return;
|
||||
// }
|
||||
|
||||
this.outputResources.push(cssResource);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user