mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
Merge pull request #12362 from meteor/async-accounts-base
Update on tinytest UI
This commit is contained in:
Gabriel Grubba
@@ -1,135 +1,199 @@
|
||||
|
||||
* {
|
||||
/* 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: black !important;
|
||||
color: white !important;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: var(--bg-black) !important;
|
||||
color: var(--primary-white) !important;
|
||||
|
||||
}
|
||||
|
||||
.test-in-browser {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.test-results {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#testProgressBar {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
padding-bottom: 4px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.header.in-progress {
|
||||
color: #ccc;
|
||||
color: var(--red-50);
|
||||
}
|
||||
|
||||
.header.pass {
|
||||
color: #090; /* green */
|
||||
color: #090; /* green */
|
||||
}
|
||||
|
||||
.header.fail {
|
||||
color: #900; /* red */
|
||||
font-weight: bold;
|
||||
color: #900; /* red */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header .time {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
color: var(--gray-500);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.test_table {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.test_table .group {
|
||||
border-left: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.test_table .group .group {
|
||||
margin-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.test_table .test {
|
||||
margin-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.test_table .testname {
|
||||
margin-left: 200px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
margin-left: 200px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.test_table .groupname {
|
||||
font-weight: bold;
|
||||
background: #212121;
|
||||
padding-left: 5px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background: var(--neutral-black);
|
||||
padding-left: 5px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
color: var(--primary-white);
|
||||
}
|
||||
|
||||
.test_table .event {
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
border-left: 2px solid #def;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
border-left: 2px solid var(--blue-50);
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.test_table .test .testrow { position: relative; overflow: hidden; /*hasLayout*/ }
|
||||
.test_table .test .testrow {
|
||||
position: relative;
|
||||
overflow: hidden; /*hasLayout*/
|
||||
}
|
||||
|
||||
.test_table .running .testname { color: #66c; /* blue */ }
|
||||
.test_table .failed .testname { color: #900; /* red */ }
|
||||
.test_table .succeeded .testname { color: #090; /* green */ }
|
||||
.test_table .running .testname {
|
||||
color: var(--blue-500);
|
||||
}
|
||||
|
||||
.test_table .failed .testname {
|
||||
color: var(--red-900);
|
||||
}
|
||||
|
||||
.test_table .succeeded .testname {
|
||||
color: var(--green-600);
|
||||
}
|
||||
|
||||
.test_table .teststatus {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
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: #757575;
|
||||
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);
|
||||
}
|
||||
|
||||
.test_table .succeeded .teststatus { color: #090; /* green */ background: black; }
|
||||
.test_table .failed .teststatus { color: #900; /* red */ background: black; }
|
||||
.test_table .running .teststatus { color: #ccc; }
|
||||
.test_table .succeeded .teststatus {
|
||||
color: var(--green-600);
|
||||
background: var(--bg-black);
|
||||
}
|
||||
|
||||
.test_table .event .expected_fail { color: #600; }
|
||||
.test_table .event .fail { color: #d00; }
|
||||
.test_table .event .exception { color: #d00; }
|
||||
.test_table .event .nodata { color: #ccc; font-style: italic; }
|
||||
.test_table .failed .teststatus {
|
||||
color: var(--red-900); /* red */
|
||||
background: var(--bg-black);
|
||||
}
|
||||
|
||||
.test_table .event .xtimes, .test_table .event .failkey { font-weight: bold; }
|
||||
.test_table .running .teststatus {
|
||||
color: var(--red-50);
|
||||
}
|
||||
|
||||
.test_table .event .expected_fail {
|
||||
color: var(--red-900);
|
||||
}
|
||||
|
||||
.test_table .event .fail {
|
||||
color: var(--red-600);
|
||||
}
|
||||
|
||||
.test_table .event .exception {
|
||||
color: var(--red-600);
|
||||
}
|
||||
|
||||
.exception pre {
|
||||
color: var(--primary-white);
|
||||
}
|
||||
|
||||
.test_table .event .nodata {
|
||||
color: var(--red-50);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.test_table .event .xtimes, .test_table .event .failkey {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.test_table .event .debug {
|
||||
display: none;
|
||||
@@ -137,7 +201,7 @@ body {
|
||||
|
||||
.test_table .event:hover .debug {
|
||||
display: inline;
|
||||
color: gray;
|
||||
color: var(--gray-500);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -149,25 +213,28 @@ body {
|
||||
}
|
||||
|
||||
.string_equal {
|
||||
line-height: 1.2;
|
||||
margin-left: 30px;
|
||||
line-height: 1.2;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.string_equal ins {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.string_equal_expected ins {
|
||||
background: #ed0;
|
||||
background: var(--yellow-400);
|
||||
}
|
||||
|
||||
.string_equal_actual ins {
|
||||
color: #d00;
|
||||
background: #fcc;
|
||||
color: var(--red-600);
|
||||
background: var(--red-200);
|
||||
}
|
||||
|
||||
#current-client-test {
|
||||
color: #ccc;
|
||||
margin-right: 15px;
|
||||
color: var(--gray-300);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.failedTests {
|
||||
color: #900; /* red */
|
||||
color: var(--red-900);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user