mirror of
https://github.com/cypress-io/cypress.git
synced 2026-04-22 15:12:27 -05:00
feat(unify): reporter dark theme (#18313)
This commit is contained in:
Shawn Taylor
@@ -1,3 +1,5 @@
|
||||
// NOTE: All the colors in this file are also temporarily stored in packages/reporter/src/lib/variables.scss, for use in the reporter. If you change any here, please also change them there.
|
||||
|
||||
import Colors from 'windicss/colors'
|
||||
|
||||
const customColors = {
|
||||
|
||||
@@ -74,6 +74,14 @@ export const makeConfig = (config: Partial<UserConfig> = {}, plugins: PluginOpti
|
||||
minify: false,
|
||||
},
|
||||
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@use "${path.resolve(__dirname, '../reporter/src/lib/variables.scss')}" as *;`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
resolve: { alias },
|
||||
|
||||
// You cannot add or remove arbitrary options from shared plugins.
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-left: 1px solid #dcdcdc;
|
||||
border-left: 1px solid $gray-900;
|
||||
content: '';
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
@@ -102,7 +102,7 @@
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid #dcdcdc;
|
||||
border-top: 1px solid $gray-900;
|
||||
content: '';
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
@@ -111,7 +111,7 @@
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: #a2a2a2;
|
||||
color: $gray-600;
|
||||
content: '•';
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
@@ -120,19 +120,19 @@
|
||||
|
||||
.attempt-tag {
|
||||
align-items: center;
|
||||
border: 1px solid #d5d5d5;
|
||||
border: 1px solid $gray-900;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.20);
|
||||
box-shadow: 0 1px 1px 0 rgba($white, 0.20);
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
padding: 2px 5px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: $black;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #e8e8e8;
|
||||
background-color: $gray-1000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -27,23 +27,23 @@
|
||||
padding-left: 5px;
|
||||
|
||||
&:hover {
|
||||
color: #565554;
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
.command-wrapper:hover {
|
||||
background-color: #eef1f4;
|
||||
background-color: $gray-1000;
|
||||
}
|
||||
}
|
||||
|
||||
.hook-studio {
|
||||
.command-wrapper:hover {
|
||||
background-color: #eef1f4;
|
||||
background-color: $gray-1000;
|
||||
}
|
||||
|
||||
.command-type-parent > span > .command-wrapper {
|
||||
&:hover {
|
||||
border-top: 1px solid #e3e3e3;
|
||||
border-top: 1px solid $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
font-style: unset;
|
||||
.command-method,
|
||||
.command-message {
|
||||
color: #525252;
|
||||
color: $gray-200;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@@ -66,15 +66,15 @@
|
||||
|
||||
.command-method,
|
||||
.command-message {
|
||||
color: #9a9aaa;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
.command-type-parent > span > .command-wrapper {
|
||||
border-top: 1px solid #e3e3e3;
|
||||
border-top: 1px solid $gray-900;
|
||||
|
||||
&:hover {
|
||||
border-top: 1px solid #eef1f4;
|
||||
border-top: 1px solid $gray-1000;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,12 +103,12 @@
|
||||
}
|
||||
|
||||
.command-wrapper {
|
||||
background-color: #eef1f4;
|
||||
color: #777;
|
||||
background-color: $gray-1000;
|
||||
color: $gray-400;
|
||||
min-height: 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e5e7;
|
||||
background-color: $gray-900;
|
||||
}
|
||||
|
||||
.command-wrapper-text {
|
||||
@@ -127,7 +127,7 @@
|
||||
.command-alias,
|
||||
.command-interceptions {
|
||||
border-radius: 10px;
|
||||
color: #777888;
|
||||
color: $gray-400;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
@@ -136,12 +136,12 @@
|
||||
}
|
||||
|
||||
&.dom {
|
||||
background-color: darken(#d4eaff, 3%);
|
||||
background-color: $indigo-800;
|
||||
}
|
||||
|
||||
&.agent,
|
||||
&.primitive {
|
||||
background-color: darken(#ffe0de, 3%);
|
||||
background-color: $red-800;
|
||||
}
|
||||
|
||||
&.show-count {
|
||||
@@ -169,7 +169,7 @@
|
||||
.num-children,
|
||||
.command-alias-count .command-interceptions-count {
|
||||
border-radius: 5px;
|
||||
color: #777;
|
||||
color: $gray-400;
|
||||
font-size: 90%;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
@@ -195,7 +195,7 @@
|
||||
.num-children,
|
||||
.command-alias-count,
|
||||
.command-interceptions-count {
|
||||
background-color: darken(#ffdf9c, 8%) !important;
|
||||
background-color: $orange-700 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
|
||||
.command-number {
|
||||
flex-shrink: 0;
|
||||
color: #bcbccc;
|
||||
color: $gray-700;
|
||||
min-height: 1px; // because some numbers are empty
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
@@ -237,18 +237,14 @@
|
||||
font-size: 11px;
|
||||
min-width: 80px;
|
||||
font-weight: 600;
|
||||
color: #565554;
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
.command-state-pending > span > .command-wrapper {
|
||||
border-left: 2px solid $pending;
|
||||
background-color: lighten($pending, 40%);
|
||||
border-left: 2px solid $indigo-800;
|
||||
background-color: $gray-900;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.command-wrapper-text {
|
||||
padding-left: 3px;
|
||||
|
||||
@@ -261,7 +257,7 @@
|
||||
.command-method,
|
||||
.command-message,
|
||||
.command-pin {
|
||||
color: lighten($pending, 15%);
|
||||
color: $indigo-200;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -270,7 +266,7 @@
|
||||
animation-iteration-count: 1;
|
||||
animation-name: progress-bar;
|
||||
animation-timing-function: linear;
|
||||
background: #7eb0db;
|
||||
background: $indigo-500;
|
||||
display: block;
|
||||
float: right;
|
||||
height: 100%;
|
||||
@@ -290,7 +286,7 @@
|
||||
background-color: $err-header-background;
|
||||
|
||||
&:hover {
|
||||
background: darken($err-header-background, 2%);
|
||||
background: $gray-800;
|
||||
}
|
||||
|
||||
.command-wrapper-text {
|
||||
@@ -333,7 +329,7 @@
|
||||
.command-state-warn > span > .command-wrapper {
|
||||
font-style: unset;
|
||||
background-color: $warn-background;
|
||||
border-left: 2px solid hsl(42, 56%, 53%);
|
||||
border-left: 2px solid $orange-700;
|
||||
|
||||
&:hover {
|
||||
background-color: $warn-header-background;
|
||||
@@ -355,12 +351,12 @@
|
||||
> span > .command-wrapper {
|
||||
.command-status {
|
||||
font-weight: 700;
|
||||
color: #565554;
|
||||
color: $gray-200;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.command-body {
|
||||
color: #565554;
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
.fa-circle {
|
||||
@@ -378,11 +374,11 @@
|
||||
}
|
||||
|
||||
.fa-circle.bad {
|
||||
color: #f0ad4e;
|
||||
color: $orange-500;
|
||||
}
|
||||
|
||||
.fa-circle.pending {
|
||||
color: #aaa;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -399,7 +395,7 @@
|
||||
}
|
||||
|
||||
.command-message {
|
||||
color: #565554;
|
||||
color: $gray-200;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
@@ -415,14 +411,14 @@
|
||||
.command-method {
|
||||
span {
|
||||
background-color: $pending;
|
||||
color: white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.command-message {
|
||||
color: $pending;
|
||||
|
||||
strong {
|
||||
color: darken($pending, 10%);
|
||||
color: $indigo-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -431,14 +427,14 @@
|
||||
.command-method {
|
||||
span {
|
||||
background-color: $fail;
|
||||
color: white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.command-message {
|
||||
color: $fail;
|
||||
|
||||
strong {
|
||||
color: darken($fail, 10%);
|
||||
color: $red-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -449,14 +445,14 @@
|
||||
|
||||
span {
|
||||
background-color: $pass;
|
||||
color: white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.command-message {
|
||||
color: darken($pass, 3%);
|
||||
color: $jade-300;
|
||||
|
||||
strong {
|
||||
color: darken($pass, 10%);
|
||||
color: $jade-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -489,7 +485,7 @@
|
||||
.command-controls {
|
||||
i {
|
||||
padding: 2px;
|
||||
color: #ababab;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.studio-command-remove {
|
||||
@@ -544,7 +540,7 @@
|
||||
|
||||
.command-has-children > span > .command-wrapper:hover {
|
||||
.command-expander {
|
||||
color: #999;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -556,8 +552,8 @@
|
||||
pointer-events: unset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px #33333370;
|
||||
background-color: #333333;
|
||||
box-shadow: 0 0 3px rgba($gray-100, 0.44);
|
||||
background-color: $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -571,14 +567,14 @@
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
transition: all 50ms;
|
||||
background-color: #333333a0;
|
||||
background-color: rgba($gray-100, 0.63);
|
||||
padding: 2px 4px;
|
||||
color: white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.command-pin {
|
||||
color: #999;
|
||||
color: $gray-500;
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
@@ -595,7 +591,7 @@
|
||||
}
|
||||
|
||||
.command-expander {
|
||||
color: #bcbccc;
|
||||
color: $gray-700;
|
||||
display: none;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
@@ -673,16 +669,16 @@
|
||||
}
|
||||
|
||||
.command-is-pinned > span > .command-wrapper {
|
||||
background: lighten($pinned, 40%);
|
||||
background: $indigo-1000;
|
||||
border-left: 2px solid $pinned;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
|
||||
box-shadow: 0 1px 2px rgba($black, 0.2) inset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($pinned, 38%);
|
||||
background: $indigo-900;
|
||||
}
|
||||
|
||||
.command-wrapper-text {
|
||||
@@ -695,14 +691,24 @@
|
||||
}
|
||||
|
||||
.no-commands {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
background-color: $gray-1000;
|
||||
border: 1px solid $gray-900;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 1px rgba($white, 0.05);
|
||||
min-height: 20px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.num-children {
|
||||
color: $black;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
.num-elements {
|
||||
color: $black;
|
||||
background-color: $gray-600;
|
||||
}
|
||||
|
||||
// utilizing element size queries: https://github.com/marcj/css-element-queries
|
||||
// styles take effect when width is greater than or equal to the specified amount
|
||||
&[min-width~="300px"] {
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
$code-border-radius: 4px;
|
||||
|
||||
.reporter {
|
||||
.error {
|
||||
background-color: #f5f5f5;
|
||||
background-color: $gray-1000;
|
||||
min-height: 20px;
|
||||
padding: 24px;
|
||||
|
||||
h2 {
|
||||
color: #e94f5f;
|
||||
color: $err-text;
|
||||
font-size: 1.3em;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
@@ -25,7 +27,7 @@
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #fcf8e3;
|
||||
background: $orange-900;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: initial;
|
||||
@@ -56,7 +58,7 @@
|
||||
cursor: default;
|
||||
margin: 5px 0 5px 5px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px dotted #DDD;
|
||||
border-left: 1px dotted $gray-900;
|
||||
}
|
||||
|
||||
.studio-err-wrapper {
|
||||
@@ -84,14 +86,15 @@
|
||||
.runnable-err-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: $err-header-background;
|
||||
background-color: rgba($gray-1000, 0.5);
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
|
||||
.runnable-err-name {
|
||||
flex-grow: 2;
|
||||
font-size: 13px;
|
||||
line-height: 22px;;
|
||||
line-height: 22px;
|
||||
color: $err-header-text;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
@@ -134,33 +137,33 @@
|
||||
outline: 0;
|
||||
|
||||
div {
|
||||
background: #fee0e3;
|
||||
background: $red-900;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
background: #ffeaec;
|
||||
background: $err-header-background;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 7px 5px;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: $err-header-background;
|
||||
background: $gray-800;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($err-header-background, 2%);
|
||||
background: $gray-800;
|
||||
}
|
||||
|
||||
.collapsible-header-text {
|
||||
color: #4f4f4f;
|
||||
color: $gray-200;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.collapsible-indicator {
|
||||
line-height: 18px;
|
||||
color: #bbbcbd !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -175,8 +178,8 @@
|
||||
}
|
||||
|
||||
div {
|
||||
background: #ffeaec;
|
||||
color: #4f4f4f;
|
||||
background: $err-header-background;
|
||||
color: $gray-200;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
@@ -192,11 +195,11 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($err-header-background, 2%);
|
||||
background: $red-900;
|
||||
}
|
||||
|
||||
i {
|
||||
border: solid 1px #4f4f4f;
|
||||
border: solid 1px $gray-200;
|
||||
border-radius: 4px;
|
||||
font-size: 6px;
|
||||
padding: 4px 3px;
|
||||
@@ -226,19 +229,22 @@
|
||||
}
|
||||
|
||||
.test-err-code-frame {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ffe4e7;
|
||||
background-color: $gray-1000;
|
||||
border: 1px solid $gray-800;
|
||||
border-radius: $code-border-radius;
|
||||
margin: 0 10px 10px;
|
||||
|
||||
.runnable-err-file-path {
|
||||
&:before {
|
||||
@extend .#{$fa-css-prefix};
|
||||
@extend .#{$fa-css-prefix}-file;
|
||||
color: #bdbdbd;
|
||||
color: $gray-700;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
background: #f6f6f6;
|
||||
background: rgba($gray-900, 0.5);
|
||||
border-top-left-radius: $code-border-radius;
|
||||
border-top-right-radius: $code-border-radius;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@@ -247,8 +253,9 @@
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-bottom-left-radius: $code-border-radius;
|
||||
border-bottom-right-radius: $code-border-radius;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,13 +3,14 @@
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #70787a;
|
||||
color: $gray-400;
|
||||
margin: 0;
|
||||
text-shadow: $black 0px 1px;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #fff;
|
||||
background: $gray-1000;
|
||||
}
|
||||
|
||||
// .token.comment,
|
||||
@@ -20,7 +21,7 @@ pre[class*="language-"] {
|
||||
// }
|
||||
|
||||
.token.punctuation {
|
||||
color: #70787a;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@@ -30,7 +31,7 @@ pre[class*="language-"] {
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #c1434f;
|
||||
color: $red-400;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
@@ -39,7 +40,7 @@ pre[class*="language-"] {
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #469b76;
|
||||
color: $jade-400;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
@@ -50,7 +51,8 @@ pre[class*="language-"] {
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e08a45;
|
||||
color: $orange-400;
|
||||
background: $gray-1000;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
@@ -58,7 +60,7 @@ pre[class*="language-"] {
|
||||
.token.keyword,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #3e76ad;
|
||||
color: $indigo-400;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
@@ -66,11 +68,11 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #c4c8cb;
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 100%, hsla(24, 20%, 50%,0));
|
||||
background: linear-gradient(to right, rgba($gray-100,.1) 100%, rgba($gray-100,0));
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.reporter {
|
||||
header {
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: $gray-1000;
|
||||
border-bottom: 1px solid $gray-900;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f8f8f8;
|
||||
background-color: $gray-1000;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
@@ -27,11 +27,11 @@
|
||||
width: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e9e9e9;
|
||||
background-color: $gray-900;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba($white, 0.125);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
@@ -39,7 +39,7 @@
|
||||
&[disabled]:active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
color: #999;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
border-right: 1px solid #ddd;
|
||||
border-right: 1px solid $gray-900;
|
||||
font-weight: 400;
|
||||
padding: 10px 12px;
|
||||
width: auto !important;
|
||||
@@ -78,15 +78,15 @@
|
||||
padding: 10px 5px;
|
||||
|
||||
&.passed {
|
||||
color: #23AE89;
|
||||
color: $pass;
|
||||
}
|
||||
|
||||
&.failed {
|
||||
color: #E94B3B;
|
||||
color: $fail;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: #aaa;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
i {
|
||||
@@ -95,8 +95,8 @@
|
||||
}
|
||||
|
||||
.duration {
|
||||
border-left: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-left: 1px solid $gray-900;
|
||||
border-right: 1px solid $gray-900;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@@ -110,7 +110,7 @@
|
||||
display: flex;
|
||||
|
||||
&:last-child button {
|
||||
border-right: 1px solid #ddd;
|
||||
border-right: 1px solid $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
margin-right: 5px;
|
||||
|
||||
label {
|
||||
background-color: #CC4239;
|
||||
background-color: $red-500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,7 +144,7 @@
|
||||
i:first-child {
|
||||
@extend .far;
|
||||
@extend .#{$fa-css-prefix}-circle;
|
||||
color: #999;
|
||||
color: $gray-500;
|
||||
font-size: 80%;
|
||||
margin-right: 3px;
|
||||
position: relative;
|
||||
@@ -155,7 +155,7 @@
|
||||
i:first-child {
|
||||
@extend .fas;
|
||||
@extend .#{$fa-css-prefix}-circle;
|
||||
color: $yellow-dark;
|
||||
color: $orange-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
.hooks-container {
|
||||
margin: 5px 0 5px 5px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px dotted #DDD;
|
||||
border-left: 1px dotted $gray-900;
|
||||
|
||||
.hook-item {
|
||||
margin-bottom: 5px;
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
&:hover {
|
||||
.collapsible-header {
|
||||
color: #6a6b6c;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.hook-open-in-ide {
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
.collapsible-header {
|
||||
text-transform: uppercase;
|
||||
color: #959595;
|
||||
color: $gray-400;
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
@@ -45,18 +45,18 @@
|
||||
}
|
||||
|
||||
.hook-failed-message {
|
||||
color: #E94F5F;
|
||||
color: $red-600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hook-open-in-ide {
|
||||
align-items: center;
|
||||
color: #6a6b6c;
|
||||
color: $gray-400;
|
||||
display: none;
|
||||
padding: 4px 10px;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgba(186, 186, 186, 0.2);
|
||||
background-color: rgba($gray-700, 0.2);
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -3,18 +3,17 @@
|
||||
.route-alias-name {
|
||||
border-radius: 10px;
|
||||
background-color: $yellow-medium;
|
||||
color: #777888;
|
||||
color: $gray-400;
|
||||
padding: 0px 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.instrument-content {
|
||||
background-color: #eef1f4;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-left: 1px solid #ECECEC;
|
||||
background-color: $gray-900;
|
||||
border-bottom: 1px solid $gray-800;
|
||||
border-left: 1px solid $gray-900;
|
||||
border-radius: 0 3px 3px;
|
||||
border-right: 1px solid #ECECEC;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04);
|
||||
border-right: 1px solid $gray-900;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
padding: 3px 10px;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img,a img{border:none;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img,a img{border:none;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:$white;}
|
||||
|
||||
.reporter {
|
||||
background-color: #F6F6F6;
|
||||
background-color: $gray-1000;
|
||||
bottom: 0;
|
||||
color: #555;
|
||||
color: $gray-200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
@@ -28,21 +28,21 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3380FF;
|
||||
color: $indigo-400;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: #2363CC;
|
||||
color: $indigo-300;
|
||||
text-decoration: underline;
|
||||
outline: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #222;
|
||||
color: $gray-50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -51,10 +51,10 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
}
|
||||
|
||||
button {
|
||||
background: #fff;
|
||||
background: $black;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: #4f4f4f;
|
||||
color: $gray-200;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
@@ -74,10 +74,10 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
background-color: $gray-1000;
|
||||
border: 1px solid $gray-800;
|
||||
border-radius: 2px;
|
||||
color: #333;
|
||||
color: $gray-100;
|
||||
display: block;
|
||||
font-family: $open-sans;
|
||||
font-size: 1.05em;
|
||||
@@ -103,7 +103,7 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > th,
|
||||
> tfoot > tr > td {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid $gray-900;
|
||||
line-height: 1.42857;
|
||||
padding: 5px;
|
||||
vertical-align: top;
|
||||
@@ -111,7 +111,7 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
|
||||
> thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-bottom: 2px solid $gray-900;
|
||||
}
|
||||
|
||||
> caption + thead > tr:first-child > th,
|
||||
@@ -129,9 +129,9 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
}
|
||||
|
||||
label {
|
||||
background-color: #333;
|
||||
background-color: $gray-100;
|
||||
border-radius: .25em;
|
||||
color: #fff;
|
||||
color: $black;
|
||||
display: inline;
|
||||
font-size: 75%;
|
||||
font-weight: bold;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
@mixin runnable-state-processing {
|
||||
@extend .far;
|
||||
@extend .#{$fa-css-prefix}-square;
|
||||
color: #888;
|
||||
color: $gray-500;
|
||||
|
||||
// @extend .far overrides line-height, and so do many other specific selectors.
|
||||
line-height: 18px !important;
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
@mixin runnable-state-skipped {
|
||||
@extend .#{$fa-css-prefix}-ban;
|
||||
color: #888;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
@mixin runnable-state-failed {
|
||||
@@ -29,10 +29,10 @@
|
||||
|
||||
@mixin runnable-state-pending {
|
||||
@extend .#{$fa-css-prefix}-circle-notch;
|
||||
color: lighten($pending, 20%);
|
||||
color: $indigo-500;
|
||||
}
|
||||
|
||||
@mixin studio-state-passed {
|
||||
@extend .#{$fa-css-prefix}-magic;
|
||||
color: #3386d4;
|
||||
color: $indigo-700;
|
||||
}
|
||||
|
||||
@@ -4,16 +4,17 @@ $cy-tooltip-class: 'cy-tooltip';
|
||||
.cy-tooltip {
|
||||
font-family: $font-sans;
|
||||
word-wrap: break-word;
|
||||
background-color: #242424;
|
||||
background-color: $gray-50;
|
||||
color: $gray-1000;
|
||||
|
||||
.kbd {
|
||||
color:rgb(243, 243, 243);
|
||||
color: $gray-1000;
|
||||
padding: 1px 4px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
background-color: #282828;
|
||||
border: 1px solid black;
|
||||
box-shadow: 0 0.5px 0 1px rgb(95, 95, 95);
|
||||
background-color: $gray-50;
|
||||
border: 1px solid $white;
|
||||
box-shadow: 0 0.5px 0 1px $gray-300;
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,24 +1,123 @@
|
||||
$pass: #08c18d;
|
||||
$fail: #e94f5f;
|
||||
$pending: #428BCA;
|
||||
$pinned: #9442ca;
|
||||
$yellow-dark: #FFB61C;
|
||||
$yellow-medium: lighten($yellow-dark, 25%);
|
||||
$yellow-lightest: #ffffee;
|
||||
$retried: #f0ec98;
|
||||
// NOTE: All the colors in this file are also stored in packages/frontend-shared/.windicss/colors.ts, for use in windi. If you change any here, please also change them there.
|
||||
|
||||
$link-text: #3380FF;
|
||||
$gray-50: #f3f4fa;
|
||||
$gray-100: #e1e3ed;
|
||||
$gray-200: #d0d2e0;
|
||||
$gray-300: #bfc2d4;
|
||||
$gray-400: #afb3c7;
|
||||
$gray-500: #9095ad;
|
||||
$gray-600: #747994;
|
||||
$gray-700: #5a5f7a;
|
||||
$gray-800: #434861;
|
||||
$gray-900: #2e3247;
|
||||
$gray-1000: #1b1e2e;
|
||||
|
||||
$err-background: #fff3f4;
|
||||
$err-code-background: #fee4e7;
|
||||
$err-text: #cd0a17;
|
||||
$err-header-background: #fee0e3;
|
||||
$err-header-text: #cc3943;
|
||||
$red-50: #fbeff1;
|
||||
$red-100: #fad9df;
|
||||
$red-200: #f8c4cd;
|
||||
$red-300: #f59aa9;
|
||||
$red-400: #e45770;
|
||||
$red-500: #c62b49;
|
||||
$red-600: #9f1331;
|
||||
$red-700: #7a0723;
|
||||
$red-800: #5e021b;
|
||||
$red-900: #4f0018;
|
||||
$red-1000: #490018;
|
||||
|
||||
$warn-background: hsl(42, 100%, 98%);
|
||||
$warn-header-background: hsl(42, 94%, 94%);
|
||||
$warn-header-text: hsl(42, 59%, 51%);
|
||||
$warn-text: hsl(42, 91%, 35%);
|
||||
$orange-50: #f5f4d7;
|
||||
$orange-100: #f3ecb3;
|
||||
$orange-200: #f1e08f;
|
||||
$orange-300: #edbb4a;
|
||||
$orange-400: #db7903;
|
||||
$orange-500: #bd5800;
|
||||
$orange-600: #963f00;
|
||||
$orange-700: #702c00;
|
||||
$orange-800: #521f00;
|
||||
$orange-900: #411800;
|
||||
$orange-1000: #391500;
|
||||
|
||||
$jade-50: #e4fbf2;
|
||||
$jade-100: #c2f1de;
|
||||
$jade-200: #a3e7cb;
|
||||
$jade-300: #69d3a7;
|
||||
$jade-400: #1fa971;
|
||||
$jade-500: #00814d;
|
||||
$jade-600: #005f39;
|
||||
$jade-700: #00442a;
|
||||
$jade-800: #003220;
|
||||
$jade-900: #00291b;
|
||||
$jade-1000: #00261a;
|
||||
|
||||
$indigo-50: #f0f1ff;
|
||||
$indigo-100: #daddfe;
|
||||
$indigo-200: #c5c9fd;
|
||||
$indigo-300: #9aa2fc;
|
||||
$indigo-400: #6470f3;
|
||||
$indigo-500: #4956e3;
|
||||
$indigo-600: #3a46cc;
|
||||
$indigo-700: #2f3ab0;
|
||||
$indigo-800: #252e8f;
|
||||
$indigo-900: #1c236d;
|
||||
$indigo-1000: #151a50;
|
||||
|
||||
$purple-50: #f5f0fb;
|
||||
$purple-100: #e9ddfa;
|
||||
$purple-200: #decbf8;
|
||||
$purple-300: #c8a7f5;
|
||||
$purple-400: #a06ce4;
|
||||
$purple-500: #7f43c9;
|
||||
$purple-600: #632aa6;
|
||||
$purple-700: #4b1a83;
|
||||
$purple-800: #3b1268;
|
||||
$purple-900: #320e58;
|
||||
$purple-1000: #2f0c52;
|
||||
|
||||
$teal-50: #e0f6fa;
|
||||
$teal-100: #b7e7f0;
|
||||
$teal-200: #90d9e6;
|
||||
$teal-300: #4bbfd2;
|
||||
$teal-400: #0097a8;
|
||||
$teal-500: #007780;
|
||||
$teal-600: #00595d;
|
||||
$teal-700: #004143;
|
||||
$teal-800: #003131;
|
||||
$teal-900: #002828;
|
||||
$teal-1000: #002525;
|
||||
|
||||
$fuchsia-50: #faeffb;
|
||||
$fuchsia-100: #f7daf9;
|
||||
$fuchsia-200: #f3c6f8;
|
||||
$fuchsia-300: #ed9ff4;
|
||||
$fuchsia-400: #d65fe3;
|
||||
$fuchsia-500: #b735c7;
|
||||
$fuchsia-600: #901ca2;
|
||||
$fuchsia-700: #6c0f7e;
|
||||
$fuchsia-800: #510862;
|
||||
$fuchsia-900: #400651;
|
||||
$fuchsia-1000: #39054a;
|
||||
|
||||
$black: black;
|
||||
$white: white;
|
||||
|
||||
$pass: $jade-400;
|
||||
$fail: $red-400;
|
||||
$pending: $indigo-400;
|
||||
$pinned: $purple-400;
|
||||
$yellow-medium: $orange-800;
|
||||
$retried: $orange-800;
|
||||
|
||||
$link-text: $indigo-600;
|
||||
|
||||
$err-background: $gray-900;
|
||||
$err-code-background: $gray-1000;
|
||||
$err-text: $red-300;
|
||||
$err-header-background: $gray-900;
|
||||
$err-header-text: $red-400;
|
||||
|
||||
$warn-background: $red-1000;
|
||||
$warn-header-background: $orange-1000;
|
||||
$warn-header-text: $orange-700;
|
||||
$warn-text: $orange-600;
|
||||
|
||||
$header-height: 46px;
|
||||
$reporter-contents-min-width: 170px;
|
||||
|
||||
@@ -4,13 +4,14 @@
|
||||
min-height: 0; // needed for firefox or else scrolling gets funky
|
||||
|
||||
.container {
|
||||
box-shadow: 0 1px 2px #aaa;
|
||||
background-color: $gray-1000;
|
||||
box-shadow: 0 1px 2px $gray-600;
|
||||
flex-grow: 2;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
box-shadow: 0 1px 2px #aaa;
|
||||
border-bottom: 1px solid $gray-900;
|
||||
margin-bottom: 40px;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
@@ -21,12 +22,12 @@
|
||||
}
|
||||
|
||||
.no-tests {
|
||||
background-color: #f5f5f5;
|
||||
background-color: $gray-1000;
|
||||
min-height: 20px;
|
||||
padding: 24px;
|
||||
|
||||
h2 {
|
||||
color: #e94f5f;
|
||||
color: $red-400;
|
||||
font-size: 1.3em;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
@@ -34,7 +35,7 @@
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #3386d4;
|
||||
color: $indigo-400;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
@@ -46,12 +47,12 @@
|
||||
font-size: 1.1em;
|
||||
|
||||
&.text-muted {
|
||||
color: #b4b5bc;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3386d4;
|
||||
color: $indigo-300;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -64,8 +65,8 @@
|
||||
margin-bottom: 1.6em;
|
||||
border: none;
|
||||
height: 1px;
|
||||
color: #dadade;
|
||||
background-color: #dadade;
|
||||
color: $gray-900;
|
||||
background-color: $gray-900;
|
||||
}
|
||||
|
||||
.open-studio,
|
||||
@@ -81,8 +82,8 @@
|
||||
|
||||
.runnable {
|
||||
width: 100%;
|
||||
color: #6c6c6c;
|
||||
background-color: #fff;
|
||||
color: $gray-400;
|
||||
background-color: $gray-1000;
|
||||
overflow: auto;
|
||||
line-height: 18px;
|
||||
padding-left: 0;
|
||||
@@ -94,14 +95,14 @@
|
||||
.collapsible-header {
|
||||
&:focus {
|
||||
.collapsible-header-inner {
|
||||
background-color: #f7f8f9;
|
||||
background-color: $gray-1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-header-inner {
|
||||
&:hover {
|
||||
background-color: #f7f8f9;
|
||||
background-color: $gray-1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -132,7 +133,7 @@
|
||||
}
|
||||
|
||||
.hooks-container, .runnable-err-wrapper {
|
||||
border-color: #828282;
|
||||
border-color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,7 +156,7 @@
|
||||
&.suite .collapsible-indicator {
|
||||
padding-left: 2px;
|
||||
font-size: 14px;
|
||||
color: #bbbcbd;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
|
||||
@@ -176,7 +177,7 @@
|
||||
|
||||
&.runnable-pending > div > .runnable-wrapper,
|
||||
&.runnable-pending > div > .runnable-instruments {
|
||||
border-left: 5px solid lighten($pending, 25%);
|
||||
border-left: 5px solid $pending;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -192,7 +193,7 @@
|
||||
|
||||
&.runnable-studio.runnable-passed > div > .runnable-wrapper,
|
||||
&.runnable-studio.runnable-passed > div > .runnable-instruments {
|
||||
border-left: 5px solid #3386d4;
|
||||
border-left: 5px solid $indigo-700;
|
||||
}
|
||||
|
||||
&.runnable-skipped > .runnable-wrapper {
|
||||
@@ -201,13 +202,13 @@
|
||||
}
|
||||
|
||||
.runnable-title {
|
||||
color: #aaa;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
&.runnable-skipped > div > .runnable-wrapper,
|
||||
&.runnable-skipped > div > .runnable-instruments {
|
||||
border-left: 5px solid #9a9aaa;
|
||||
border-left: 5px solid $gray-500;
|
||||
}
|
||||
|
||||
&.test.runnable-failed {
|
||||
@@ -218,7 +219,7 @@
|
||||
|
||||
&.suite > div > .runnable-wrapper {
|
||||
.runnable-title {
|
||||
color: #111;
|
||||
color: $gray-50;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@@ -248,7 +249,7 @@
|
||||
@include runnable-state-pending;
|
||||
}
|
||||
.runnable-title {
|
||||
color: lighten($pending, 25%);
|
||||
color: $indigo-300;
|
||||
}
|
||||
|
||||
.runnable-commands-region {
|
||||
@@ -278,7 +279,7 @@
|
||||
white-space: pre-line;
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted #6c6c6c;
|
||||
outline: 1px dotted $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -289,7 +290,7 @@
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted #6c6c6c;
|
||||
outline: 1px dotted $gray-400;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
@@ -310,13 +311,13 @@
|
||||
|
||||
.runnable-controls-status {
|
||||
margin: 0 2px;
|
||||
color: #999;
|
||||
color: $gray-500;
|
||||
visibility: hidden;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.runnable-controls-studio {
|
||||
color: #3386d4;
|
||||
color: $indigo-300;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
@@ -361,8 +362,8 @@
|
||||
}
|
||||
|
||||
.runnable-header {
|
||||
background: #f2f2f2;
|
||||
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
|
||||
background: $gray-1000;
|
||||
border-bottom: 1px solid $gray-900;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@@ -377,10 +378,14 @@
|
||||
span > span > span:before {
|
||||
@extend .#{$fa-css-prefix};
|
||||
@extend .#{$fa-css-prefix}-file;
|
||||
color: #bdbdbd;
|
||||
color: $gray-700;
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
a, a:active, a:focus, a:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.studio-controls {
|
||||
@@ -398,16 +403,16 @@
|
||||
}
|
||||
|
||||
&:not(.studio-copy):active {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba($white, 0.125);
|
||||
}
|
||||
}
|
||||
|
||||
.studio-cancel {
|
||||
background-color: #e8e8ec;
|
||||
color: #777;
|
||||
background-color: $gray-900;
|
||||
color: $gray-400;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#e8e8ec, 5%);
|
||||
background-color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -415,7 +420,8 @@
|
||||
margin-left: auto;
|
||||
|
||||
.studio-copy {
|
||||
color: #3386d4;
|
||||
background-color: $indigo-50;
|
||||
color: $indigo-500;
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
padding: 3px 10px;
|
||||
@@ -425,7 +431,7 @@
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken(#3386d4, 5%);
|
||||
background-color: $indigo-100;
|
||||
}
|
||||
|
||||
&.studio-copy-success {
|
||||
@@ -435,27 +441,29 @@
|
||||
&[disabled],
|
||||
&[disabled]:hover,
|
||||
&[disabled]:active {
|
||||
color: #3386d4;
|
||||
opacity: 0.5;
|
||||
color: $white;
|
||||
background-color: $gray-500;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.studio-save {
|
||||
background-color: #3386d4;
|
||||
color: #fff;
|
||||
background-color: $indigo-500;
|
||||
color: $white;
|
||||
display: none;
|
||||
margin-left: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#3386d4, 10%);
|
||||
background-color: $indigo-400;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover,
|
||||
&[disabled]:active {
|
||||
background-color: #3386d4;
|
||||
opacity: 0.5;
|
||||
color: $white;
|
||||
background-color: $gray-500;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -478,27 +486,27 @@
|
||||
|
||||
div:nth-child(1) {
|
||||
animation-delay:0.1s;
|
||||
background: #56b790;
|
||||
background: $jade-400;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
animation-delay:0.2s;
|
||||
background: #4a88cc;
|
||||
background: $indigo-400;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
animation-delay:0.3s;
|
||||
background: #b96162;
|
||||
background: $red-400;
|
||||
}
|
||||
|
||||
div:nth-child(4) {
|
||||
animation-delay:0.4s;
|
||||
background: #e3b065;
|
||||
background: $orange-400;
|
||||
}
|
||||
|
||||
div:nth-child(5) {
|
||||
animation-delay:0.5s;
|
||||
background: #a9abad;
|
||||
background: $gray-400;
|
||||
}
|
||||
|
||||
@keyframes scaling {
|
||||
|
||||
@@ -5,27 +5,27 @@
|
||||
|
||||
.clear-sessions {
|
||||
text-transform: none;
|
||||
color: #6a6b6c;
|
||||
color: $gray-400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgb(48, 48, 48);
|
||||
color: $gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.session-item {
|
||||
padding: 3px 10px;
|
||||
|
||||
background-color: #eef1f4;
|
||||
color: #777;
|
||||
background-color: $gray-1000;
|
||||
color: $gray-400;
|
||||
min-height: 20px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e0e5e7;
|
||||
background-color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,10 +24,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.reporter .container {
|
||||
border-right: solid 1px #c7c7c7;
|
||||
}
|
||||
|
||||
// if you change this here,
|
||||
// make sure to update this in app.jsx too
|
||||
$spec-list-width: 250px;
|
||||
|
||||
Reference in New Issue
Block a user