META-INF.resources.css.main.css Maven / Gradle / Ivy

Go to download
/* ---------- Common color & fonts ---------- */

/* ---------- Syntax highlight variables ---------- */

/* ---------- Styling ---------- */

/* ---------- Buttons ---------- */

.btn-command-log, .btn-error, .btn-jump-to-details, .btn-screenshot, .btn-sidebar {
font-family: 'FontAwesome' !important; }

.sidebar-btn-container .btn, .sidebar-toolbar .btn, .syntax-log .btn {
background-color: rgba(247, 247, 247, 0.16);
border: 1px solid #CDCDCD;
border-radius: 4px;
color: #9FA2A6;
cursor: pointer;
font-size: 10px;
height: 32px;
left: 0;
line-height: 1em;
margin-right: 5px;
opacity: 0.6;
outline: none;
padding: 0;
text-align: center;
transition: opacity 0.2s ease;
width: 32px; }
.sidebar-btn-container .btn:active:focus, .sidebar-btn-container .btn:focus, .sidebar-btn-container .btn:hover, .sidebar-toolbar .btn:active:focus, .sidebar-toolbar .btn:focus, .sidebar-toolbar .btn:hover, .syntax-log .btn:active:focus, .syntax-log .btn:focus, .syntax-log .btn:hover {
box-shadow: none;
outline: 0; }
.sidebar-btn-container .btn .btn-content, .sidebar-toolbar .btn .btn-content, .syntax-log .btn .btn-content {
transition: transform 0.2s ease; }
.sidebar-btn-container .btn:hover, .sidebar-toolbar .btn:hover, .syntax-log .btn:hover {
opacity: 1; }
.sidebar-btn-container .btn.toggle, .sidebar-toolbar .btn.toggle, .syntax-log .btn.toggle {
background-color: #E0E0E0; }
.sidebar-btn-container .btn.btn-sidebar:before, .sidebar-toolbar .btn.btn-sidebar:before, .syntax-log .btn.btn-sidebar:before {
transform: rotate(180deg);
transition: transform 0.5s ease-in-out; }
.sidebar-btn-container .btn.btn-sidebar.toggle:before, .sidebar-toolbar .btn.btn-sidebar.toggle:before, .syntax-log .btn.btn-sidebar.toggle:before {
transform: rotate(0); }

.sidebar-btn-container .btn-label, .sidebar-toolbar .btn-label, .syntax-log .btn-label {
display: inline-block;
font-family: "Open Sans", "Verdana", "Geneva", sans-serif;
font-size: 15px;
font-weight: 100;
line-height: 0.6em;
text-align: center;
text-transform: lowercase; }

.syntax-log .btn-error, .syntax-log .btn-screenshot {
bottom: 0;
display: inline-block;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 17px; }

.syntax-log .fail .btn-error, .syntax-log .fail .btn-screenshot {
background-color: rgba(255, 135, 135, 0.16);
border-color: #FF8787;
color: #FF8787; }
.syntax-log .fail .btn-error.toggle, .syntax-log .fail .btn-screenshot.toggle {
background: #FFD9D9; }

.syntax-log .warning .btn-error, .syntax-log .warning .btn-screenshot {
background-color: rgba(255, 184, 121, 0.16);
border-color: #FFB879;
color: #FFB879; }
.syntax-log .warning .btn-error.toggle, .syntax-log .warning .btn-screenshot.toggle {
background: #FFE3CB; }

/* ---------- Sidebar buttons ---------- */

.sidebar-btn-container {
left: -60px;
margin-top: 10px;
position: absolute;
width: 28px; }
.sidebar-btn-container .btn {
font-size: 20px;
line-height: 1em;
margin: 5px 15px; }
.sidebar-btn-container .btn-command-log:before {
content: '\f126'; }
.sidebar-btn-container .btn-sidebar:before {
content: '\f104';
display: block; }
.sidebar-btn-container .btn-jump-to-details {
display: none; }
.sidebar-btn-container .btn-jump-to-details:before {
content: '\f071'; }

.running .btn-command-log {
display: none; }

.command-logger .btn.btn-jump-to-details {
display: block; }

.sidebar-toolbar .btn {
font-size: 11px;
height: 45px;
line-height: 1em;
margin: 17px 15px;
width: 150px; }

.sidebar-toolbar .btn-pause {
position: relative; }
.sidebar-toolbar .btn-pause .btn-label {
position: absolute;
top: 16px; }
.sidebar-toolbar .btn-pause .btn-label.pause {
animation: fadeIn 0.15s ease-in both;
left: 23px;
opacity: 1; }
.sidebar-toolbar .btn-pause .btn-label.pause:after {
	content: '\f04c';
	margin-left: 14px; }
.sidebar-toolbar .btn-pause .btn-label.continue {
animation: fadeOut 0.15s ease-out both;
left: 14px;
opacity: 0; }
.sidebar-toolbar .btn-pause .btn-label:after {
font-family: 'FontAwesome'; }
.sidebar-toolbar .btn-pause.toggle {
background-color: rgba(247, 247, 247, 0.16); }
.sidebar-toolbar .btn-pause.toggle .btn-label.pause {
animation: fadeOut 0.15s ease-out both;
opacity: 0;
transition: height 0s 0.15s; }
.sidebar-toolbar .btn-pause.toggle .btn-label.continue {
animation: fadeIn 0.15s ease-in both;
opacity: 1; }
.sidebar-toolbar .btn-pause.toggle .btn-label.continue:after {
	content: '\f04b';
	margin-left: 14px; }

/* ---------- Button icons ---------- */

.btn-collapse:before {
content: '+'; }

.btn-collapse.toggle:before {
content: '-'; }

.btn-var:before {
content: 'var';
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace; }

.btn-error .btn-content:before {
content: '!'; }

.btn-screenshot .btn-content:before {
content: '\f108'; }

.console {
left: 2%;
overflow-Y: auto;
position: absolute;
width: 96%; }
.console.toggle {
max-height: 0;
transform: translate(calc(-100% + 4%));
transition: transform 0.2s ease, max-height 0s 0.15s, visibility 0s 0.15s;
visibility: hidden;
will-change: initial; }

.console {
-webkit-filter: blur(0);
background-color: #FBFBFB;
border: 1px solid #E0E0E0;
border-radius: 2px;
color: #9FA2A6;
font-family: "Open Sans", "Verdana", "Geneva", sans-serif;
font-size: 17px;
letter-spacing: 0.08em;
margin-top: 11px;
max-height: 100%;
padding: 14px 52px 56px;
transform-origin: top left;
transition: transform 0.15s ease, max-height 0s, visibility 0s;
will-change: transform;
word-wrap: break-word;
z-index: 900; }

.summary-log {
float: right;
margin: 14px 0;
width: 40%; }
.summary-log .status {
border-top: 1px solid #00F9A0;
color: #A4A7AB;
display: block;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 13px;
font-weight: 300;
padding-left: 32px;
width: 134px; }
.summary-log strong {
font-weight: inherit; }
.summary-log strong em {
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 12px;
font-style: normal;
font-weight: 300; }
.summary-log .summary-failure strong > .status {
border-color: #FF8787;
color: #FF8787; }
.summary-log .summary-warning strong > .status {
border-color: #FFB879;
color: #FFB879; }

.steps {
font-size: 15px;
margin: 0 0 20px; }

.steps-header, .cause-header {
color: #9FA2A6;
font-size: 15px;
font-weight: 200;
margin: 0;
margin-bottom: 20px; }

.major-steps {
color: #9AA8B1;
line-height: 1.75;
padding-left: 0; }

.major-step > .step-description {
color: #989DA9;
display: inline-block;
font-size: 18px;
font-weight: 100;
letter-spacing: 0.01em;
margin-bottom: 17px; }

.minor-steps {
font-size: 13px;
letter-spacing: 0.07em;
padding-bottom: 23px;
padding-left: 18px; }

.minor-step {
display: list-item;
list-style-type: square;
padding: 4px 0; }

.cause-body {
color: #989DA9;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 2;
margin: 0;
white-space: pre-wrap; }

.screenshots-log {
display: inline-block;
padding: 24px 0;
width: calc(60% - 57px); }

.screenshot-container {
margin: 0 6px;
position: relative;
width: 100%; }
.screenshot-container img {
cursor: pointer;
width: 100%; }

.before > img {
margin-bottom: 58px; }

.before > span {
bottom: 0; }

.after > img {
margin-top: 58px; }

.after > span {
border-top: 1px solid #CDCDCD;
top: 0; }

.fullscreen-image {
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 9999; }
.fullscreen-image:before {
background: #222;
content: '';
height: 100%;
opacity: 0.9;
position: absolute;
transition: opacity 0.5s ease;
width: 100%; }
.fullscreen-image img {
cursor: zoom-out;
left: 50%;
position: absolute;
right: 0;
top: 50%;
transform: translate(-50%, -50%);
transition: height 0.5s ease;
width: 95%; }
.fullscreen-image.toggle {
transition: all 0s ease 0.5s;
visibility: hidden; }
.fullscreen-image.toggle, .fullscreen-image.toggle img {
height: 0; }
.fullscreen-image.toggle:before {
opacity: 0; }
.fullscreen-image.toggle img {
transition: all 0s ease 0.5s; }

/* ---------- Global ---------- */

* {
box-sizing: border-box; }

body {
background-color: #F7F7F7;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 11px;
letter-spacing: 0.06em;
line-height: 2.2;
margin: 0;
overflow-x: hidden;
padding: 0;
word-wrap: break-word; }

h3 {
font-size: 23px;
font-weight: 300;
margin: 0;
padding: 16px 16px 28px; }

li {
display: block;
transition: background 0.2s ease-in-out; }

.hidden {
display: none; }

span {
display: inline; }

.hidden {
display: none; }

/* ---------- Scope selection ---------- */

.current-scope .line-number {
opacity: 0.8; }

.current-scope.hover .line-number {
opacity: 0.8; }

.current-scope.hover .macro > .btn-container .line-number, .current-scope.hover .macro > .line-container .line-number .current-scope .macro > .line-container .line-number {
opacity: 0.8; }

.current-scope.hover .macro .line-number {
opacity: 0.2; }

.current-scope.macro > .btn-container .line-number {
opacity: 0.2; }

.current-scope .macro > .btn-container .line-number {
opacity: 0.8; }

.current-scope .macro .line-number {
opacity: 0.2; }

.current-scope .macro .child-container .macro .btn-container .line-number, .current-scope .macro .child-container .macro .line-container .line-number {
opacity: 0.2; }

.transitioning .current-scope:after {
opacity: 0; }

.hover > .btn-container .line-number, .hover > .line-container .line-number {
opacity: 1; }

.hover .line-number {
opacity: 1; }

.marco.current-scope > .btn-container .line-number, .marco.current-scope > .line-container .line-number {
opacity: 0.2; }

/* ---------- Command log ---------- */

.command-log {
font-family: "Open Sans", "Verdana", "Geneva", sans-serif;
font-size: 11px;
font-weight: 500;
height: 100%;
letter-spacing: 0.06em;
margin: 0;
overflow-y: scroll;
padding: 0;
transition: height 0.5s ease-in-out; }
.command-log.running {
height: calc(100% - 80px); }
.command-log .status div {
display: inline; }
.command-log.collapse {
display: block;
height: 0; }
.command-log.toggle {
height: 100%; }
.command-log .line-container {
margin-left: 32px;
padding: 0 0 8px; }
.command-log .run-line {
padding: 10px 0; }
.command-log .linkable {
cursor: pointer;
transition: background-color 0.3s ease; }
.command-log .divider-line {
background-color: #F7F7F7;
border-bottom: 1px solid #E3E3E3;
border-top: 1px solid #E3E3E3;
color: #989DA9;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 15px;
font-weight: 200;
height: auto;
letter-spacing: 0.08em;
padding: 14px 22px 18px;
position: relative;
z-index: 100; }
.command-log .line-group {
-webkit-filter: blur(0);
-webkit-font-smoothing: subpixel-antialiased;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
padding: 12px 4px 16px 8px;
position: relative;
width: 100%; }
.command-log .line-group.linkable:hover {
background-color: #FAFAFA; }
.command-log .current-scope {
background-color: #F7F7F7;
border-color: #E1E8EB;
position: relative;
z-index: 10; }
.command-log .child-container {
border: 1px solid #E0E0E0;
border-right-width: 0;
border-top-width: 0;
color: #AEBBC2;
margin: 0 0 0 32px;
margin-right: 14px;
overflow: hidden;
padding-left: 20px; }
.command-log .child-container .run-line:last-child {
padding-bottom: 11px; }
.command-log .expand-toggle {
background: transparent;
background-clip: content-box;
border-radius: 25px;
color: #9FA2A6;
cursor: pointer;
height: 21px;
line-height: 10px;
margin: 6px 0 0 0;
opacity: 0.6;
padding: 5px;
position: absolute;
text-align: center;
transition: opacity 0.2s ease 0.1s, transform 0.2s ease;
width: 21px; }
.command-log .expand-toggle:hover {
opacity: 1; }
.command-log .expand-toggle:active {
box-shadow: none; }
.command-log .expand-toggle:before {
content: '\f105';
font-family: 'FontAwesome';
font-size: 14px;
height: 10px;
width: 10px; }
.command-log .expand-toggle.toggle {
transform: rotate(90deg); }
.command-log .failed {
background-color: rgba(255, 135, 135, 0.14); }
.command-log .failed.line-group.linkable:hover {
background-color: rgba(255, 135, 135, 0.1); }
.command-log .warning {
background-color: rgba(255, 184, 121, 0.14); }
.command-log .warning.line-group.linkable:hover {
background-color: rgba(255, 184, 121, 0.1); }
.command-log .title-line {
display: none; }

/* ---------- Sidebar ---------- */

.command-logger .sidebar {
width: 30%; }

.minimized-sidebar .sidebar {
transform: translateX(100%); }

.sidebar {
background-color: #FBFBFB;
border-left: 1px solid #E0E0E0;
color: #AEBBC2;
display: inline-block;
font-family: "Open Sans", "Verdana", "Geneva", sans-serif;
height: 100%;
position: fixed;
right: 0;
top: 0;
transform: translateX(0%);
transition: transform 0.4s ease-out, width 0.4s ease-out;
width: 20%;
z-index: 200; }
.sidebar .title {
display: block;
font-size: 32px;
font-weight: 500;
margin: 30px 0 10px 17px;
position: relative; }
.sidebar .scope-type {
margin-bottom: 60px; }
.sidebar .scope-name {
background-color: #FBFBFB;
display: block;
float: right;
font-size: 15px;
font-weight: 100;
max-width: 100%;
min-width: 100%;
overflow: hidden;
padding: 9px 0 9px 20px;
position: relative;
text-overflow: ellipsis;
transition: all 0.8s ease-in-out;
white-space: nowrap;
width: auto; }
.sidebar .scope-name:hover {
box-shadow: -1px 2px 1px 0 rgba(0, 0, 0, 0.1), -3px 4px 2px 0 rgba(0, 0, 0, 0.05);
max-width: 300%;
padding-right: 20px; }
.sidebar .parameter-name {
font-size: 12px;
font-weight: 500;
margin: 15px 20px 0; }
.sidebar .parameter-value {
font-size: 11px;
margin: 10px 30px; }

.sidebar-toolbar {
background-color: #F7F7F7;
border-top: 1px solid #E3E3E3;
display: none;
font-family: "Open Sans", "Verdana", "Geneva", sans-serif;
font-size: 11px;
font-weight: 500;
height: 80px;
letter-spacing: 0.06em;
margin: 0;
padding: 0;
transition: height 0.5s ease-in-out; }

.command-logger.running .sidebar-toolbar {
display: block; }

.running .sidebar-toolbar {
display: block; }

/* ---------- Syntax highlight ---------- */

/* ---------- Breaks ---------- */

.name + .misc {
display: inline-block; }

.misc:first-child {
margin-left: 0; }

/* ---------- Sidebar ---------- */

.command-name {
color: #4E6A7D;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-size: 14px;
font-weight: 300; }

.param-type {
color: #A0A0A0; }

.param-value {
color: #8B95A0;
cursor: text;
display: block;
font-family: "Source Code Pro", "Menlo", "Lucia Console", Monaco, monospace;
font-weight: 300;
letter-spacing: 0.05em;
line-height: 2.5; }

.action-type, .misc, .tag-type {
margin: 3px; }

/* ---------- Syntax log ---------- */

.syntax-log .misc {
color: #C1CFD7; }

.name {
color: #728EA0;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.06em; }

.tag-type {
color: #A2B4BE; }

/* ---------- Current scope ---------- */

.current-scope .name, .current-scope .command-name {
color: #000; }

/* ---------- Syntax log ---------- */

.collapse, .header > .btn-container {
display: none; }

.syntax-log {
color: #617484;
display: block;
position: relative;
transition: width 0.4s ease-out;
width: 80%; }
.syntax-log .current-scope {
background-color: #F4F4F4; }
.syntax-log .current-scope > .line-container {
background-color: #F7F7F7;
box-shadow: -2px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 1px 0 rgba(0, 0, 0, 0.08), inset -1px 0 1px 0 #9FA2A6; }

.command-logger .syntax-log {
width: 70%; }

.minimized-sidebar .syntax-log {
width: 100%; }

.syntax-log-container {
border-width: 0;
padding-left: 100px; }

.line-container {
display: block;
padding: 8px;
transition: border-width 0.1s cubic-bezier(1, 0.79, 0, 1.77), background-color 0.3s cubic-bezier(1, 0.44, 1, 1), background 0.2s ease;
z-index: 1; }

.syntax-log .line-container {
-webkit-filter: blur(0);
-webkit-font-smoothing: subpixel-antialiased;
padding-right: 2%;
position: relative;
width: 102%; }

.syntax-log .current-scope > .line-container:nth-child(2):before, .syntax-log .current-scope > .line-container:nth-child(2):after {
background-color: #9FA2A6;
content: "";
margin-right: 26px;
opacity: 1;
position: absolute;
top: 24px;
transform: translateY(-50%) translateZ(0); }

.syntax-log .current-scope > .line-container:nth-child(2):before {
height: 1px;
left: calc(-100vw - 44px);
transition: height 0.2s ease, opacity 0.15s ease, background-color 0.2s ease;
width: 100vw;
z-index: -4; }

.syntax-log .current-scope > .line-container:nth-child(2):after {
background-clip: content-box;
border: 1px solid #9FA2A6;
border-radius: 25px;
height: 8px;
padding: 10px;
right: 100%;
transform-origin: top;
transition: border-color 0.15s ease;
width: 8px; }

.syntax-log .transitioning .current-scope > .line-container:nth-child(2):after, .syntax-log .transitioning .current-scope > .line-container:nth-child(2):before {
display: none;
opacity: 0; }

.syntax-log *:not(.transitioning) .current-scope > .line-container:nth-child(2):after {
animation: ping 0.25s cubic-bezier(1, 0.9, 0.47, 1.92); }

.function > .line-container, .macro > .line-container:nth-of-type(2) {
cursor: pointer; }

.macro.hover {
background-color: rgba(205, 205, 205, 0.12); }

.macro > .child-container {
background-color: rgba(239, 239, 239, 0.03);
box-shadow: inset 1px 1px 2px 1px rgba(0, 0, 0, 0.04), inset 1px 1px 1px -1px rgba(0, 0, 0, 0.1);
padding: 1px 0 1px 12px; }
.macro > .child-container.in {
margin: 40px 0 40px 24px; }

.child-container {
border-left: 1px solid #E0E0E0;
height: 0;
list-style-type: none;
margin: 0 0 0 24px;
overflow: visible;
padding: 1px 0; }
.child-container.root-container {
border-width: 0;
overflow: visible; }
.child-container.transitioning {
overflow: hidden;
transform: translateZ(0);
will-change: height, margin; }
.child-container.transitioning .btn-container, .child-container.transitioning .line-number {
opacity: 0;
transition: opacity 0s; }

.header > .line-container {
padding: 4px 0 8px; }

.header > .child-container {
height: auto; }

.btn-container {
left: 0;
opacity: 1;
padding-top: 8px;
position: absolute;
transition: opacity 0.2s ease;
z-index: 3; }

.parameter-container {
border: 1px solid #E0E0E0;
border-right-width: 0;
border-top-width: 0;
height: 0;
margin-left: 35px;
overflow: hidden; }
.parameter-container .line-container {
padding: 12px; }
.parameter-container .line-number {
left: 0;
position: absolute; }

.line-number {
border-width: 0;
color: #222;
cursor: pointer;
display: inline-block;
font-size: 10px;
line-height: 31px;
margin-left: 5px;
min-width: 26px;
opacity: 0.2; }
.line-number:hover {
opacity: 1; }

/* ---------- Command-logger mode ---------- */

.command-logger .syntax-log .fail:not(.current-scope) > .line-container, .command-logger .syntax-log .pass:not(.current-scope) > .line-container, .command-logger .syntax-log .pending:not(.current-scope) > .line-container, .command-logger .syntax-log .warning:not(.current-scope) > .line-container {
box-shadow: -2px 0 0 0 rgba(0, 0, 0, 0.03), -1px 0 1px 0 rgba(0, 0, 0, 0.08); }

.command-logger .syntax-log .fail > .line-container, .command-logger .syntax-log .pass > .line-container, .command-logger .syntax-log .pending > .line-container, .command-logger .syntax-log .screenshot > .line-container, .command-logger .syntax-log .warning > .line-container {
border-left: 7px solid transparent; }

.command-logger .syntax-log .pass.conditional-failed > .line-container {
background: transparent; }

.command-logger .syntax-log .pass > .line-container {
border-left-color: #00FEA3; }

.command-logger .syntax-log .pending > .line-container {
border-left-color: #DDE1E3; }

.command-logger .syntax-log .screenshot > .line-container {
border-left-color: #00FEA3; }

.command-logger .syntax-log .warning > .line-container {
border-left-color: #FFB879; }

.command-logger .syntax-log .fail .line-number {
color: #FF8787; }

.command-logger .syntax-log .fail > .line-container {
border-left-color: #FF8787; }

.command-logger .syntax-log .function.fail:not(.macro) > .line-container:hover, .command-logger .syntax-log .function.fail.hover > .line-container, .command-logger .syntax-log .function.pass:not(.macro) > .line-container:hover, .command-logger .syntax-log .function.pass.hover > .line-container, .command-logger .syntax-log .function.pending:not(.macro) > .line-container:hover, .command-logger .syntax-log .function.pending.hover > .line-container, .command-logger .syntax-log .function.warning:not(.macro) > .line-container:hover, .command-logger .syntax-log .function.warning.hover > .line-container, .command-logger .syntax-log .macro.fail:not(.macro) > .line-container:hover, .command-logger .syntax-log .macro.fail.hover > .line-container, .command-logger .syntax-log .macro.pass:not(.macro) > .line-container:hover, .command-logger .syntax-log .macro.pass.hover > .line-container, .command-logger .syntax-log .macro.pending:not(.macro) > .line-container:hover, .command-logger .syntax-log .macro.pending.hover > .line-container, .command-logger .syntax-log .macro.warning:not(.macro) > .line-container:hover, .command-logger .syntax-log .macro.warning.hover > .line-container {
-webkit-filter: blur(0);
background-color: #F7F7F7;
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.04), -1px 1px 3px 1px rgba(0, 0, 0, 0.1);
transform: scale(1.007);
transition: transform 0.15s cubic-bezier(1, 0.51, 0.44, 1.21) 0.1s, box-shadow 0.14s cubic-bezier(1, 0.12, 0.51, 0.98) 0.1s, background-color 0.2s cubic-bezier(1, 0.44, 1, 1);
z-index: 2; }

.command-logger .syntax-log .function.fail > .line-container:nth-child(2):before, .command-logger .syntax-log .function.warning > .line-container:nth-child(2):before, .command-logger .syntax-log .macro.fail > .line-container:nth-child(2):before, .command-logger .syntax-log .macro.warning > .line-container:nth-child(2):before {
background-repeat: no-repeat;
background-size: calc(100vw - 32px);
content: '';
height: 100%;
left: calc(-100vw - 7px);
position: absolute;
top: 0;
width: 100vw; }

.command-logger .syntax-log .function.fail > .line-container:nth-child(2):before, .command-logger .syntax-log .macro.fail > .line-container:nth-child(2):before {
background-color: rgba(255, 135, 135, 0.16); }

.command-logger .syntax-log .function.warning > .line-container:nth-child(2):before, .command-logger .syntax-log .macro.warning > .line-container:nth-child(2):before {
background-color: rgba(255, 184, 121, 0.16); }

.command-logger .syntax-log .current-scope.pass.function {
background: transparent;
outline-width: 0; }

.command-logger .syntax-log .current-scope.fail > .line-container:nth-child(2):before {
background: linear-gradient(transparent 23px, #FF8787 24px, rgba(27, 27, 27, 0) 25px);
background-color: rgba(255, 135, 135, 0.16);
top: 50%; }

.command-logger .syntax-log .current-scope.fail > .line-container:nth-child(2):after {
background-color: #FF8787;
border-color: #FF8787; }

.command-logger .syntax-log .current-scope.warning > .line-container:nth-child(2):before {
background: linear-gradient(transparent 23px, #FFB879 24px, rgba(27, 27, 27, 0) 25px);
background-color: rgba(255, 184, 121, 0.16);
top: 50%; }

.command-logger .syntax-log .current-scope.warning > .line-container:nth-child(2):after {
background-color: #FFB879;
border-color: #FFB879; }

.command-logger .syntax-log .current-scope.pass > .line-container:nth-child(2):before, .command-logger .syntax-log .current-scope.pending > .line-container:nth-child(2):before {
background: linear-gradient(transparent 24px, #9FA2A6 25px, rgba(27, 27, 27, 0) 26px);
background-color: rgba(159, 162, 166, 0.16); }

.command-logger .syntax-log .current-scope.pass > .line-container:nth-child(2):after, .command-logger .syntax-log .current-scope.pending > .line-container:nth-child(2):after {
background-color: #9FA2A6;
border-color: #9FA2A6; }

.command-logger .syntax-log .current-scope.fail > .line-container:nth-child(2):before, .command-logger .syntax-log .current-scope.pass > .line-container:nth-child(2):before, .command-logger .syntax-log .current-scope.pending > .line-container:nth-child(2):before, .command-logger .syntax-log .current-scope.warning > .line-container:nth-child(2):before {
background-repeat: no-repeat;
background-size: calc(100vw - 32px);
content: '';
height: 100%;
left: calc(-100vw - 7px);
position: absolute;
top: 50%;
width: 100vw; }

.collapse .fail:after, .transitioning .fail:after, .transitioning .fail .line-container:before {
opacity: 0; }

/* ---------- Extras ---------- */

@keyframes ping {
0% {
border-color: transparent;
transform: scale(0.2) translateY(-50%); }
20% {
border-color: transparent; }
100% {
transform: scale(1) translateY(-50%); } }

@keyframes loop {
0% {
transform: rotate(0) translateY(-50%); }
50% {
transform: rotate(180deg) translateY(-50%); }
100% {
transform: rotate(360deg) translateY(-50%); } }

@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-20px); }
40% {
opacity: 0; }
100% {
opacity: 1;
transform: translateY(0); } }

@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0); }
60% {
opacity: 0; }
100% {
opacity: 0;
transform: translateY(20px); } }

.running *:not(.transitioning) .current-scope.pending > .line-container:nth-child(2):after {
animation: loop 1s cubic-bezier(0.41, 0.35, 0.63, 0.88) 0.1s infinite, ping 0.25s cubic-bezier(1, 0.9, 0.47, 1.92);
border-left-color: transparent; }